vue2-client 1.2.71 → 1.2.72

package/CHANGELOG.md

@@ -1,9 +1,10 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
-**1.2.72 2022-06-16 @张振宇**
+**1.2.71 - 1.2.72 2022-06-16 @张振宇**
 - 功能修改：
 - 基础表单bug修改
+- 数据字段可以拖拽了
 
 **1.2.71 2022-06-15 @苗艳强**
 - 功能修改：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.2.71",
+  "version": "1.2.72",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/base-client/components/common/CreateQuery/CreateQuery.vue

@@ -64,7 +64,14 @@
           </a-form-model-item>
           <a-form-model-item label="数据字段" prop="column">
             <a-button type="primary" @click="addColumnItem()">增加</a-button>
-            <div v-for="(columnItem, index) in form.column" :key="index">
+            <div
+              v-for="(columnItem, index) in form.column"
+              :key="index"
+              draggable="true"
+              @dragstart="handleDragStart($event, columnItem)"
+              @dragover.prevent="handleDragOver($event, columnItem)"
+              @dragenter="handleDragEnter($event, columnItem)"
+              @dragend="handleDragEnd($event, columnItem)">
               <a-row :gutter="16">
                 <a-col :span="16">
                   <span style="font-weight: bold">{{ columnItem.title }}（{{ columnItem.key }}）</span>
@@ -173,6 +180,8 @@ export default {
         tableName: [{ required: true, message: '请输入查询表名', trigger: 'blur' }],
         orderBy: [{ required: true, message: '请输入排序方式', trigger: 'blur' }]
       },
+      ending: null,
+      dragging: null
     }
   },
   mounted () {
@@ -475,6 +484,37 @@ export default {
           return false
         }
       }
+    },
+    // 拖拽事件
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      if (this.ending.key === this.dragging.key) {
+        return
+      }
+      const newItems = [...this.form.column]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(this.ending)
+      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
+      // 挪移位置
+      newItems.splice(src, 1)
+      newItems.splice(dst, 0, this.dragging)
+      this.form.column = newItems
+      this.$nextTick(() => {
+        this.dragging = null
+        this.ending = null
+      })
+    },
+    handleDragOver (e) {
+      // 首先把div变成可以放置的元素，即重写dragenter/dragover
+      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      e.dataTransfer.dropEffect = 'move'
+    },
+    handleDragEnter (e, item) {
+      // 为需要移动的元素设置dragstart事件
+      e.dataTransfer.effectAllowed = 'move'
+      this.ending = item
     }
   }
 }