数据引擎添加表格拖拽

zkqy-ui/src/views/tool/datasheet/index.vue

@@ -22,7 +22,19 @@
         <span>数据表字段</span>
       </div>
       <el-form ref="tableform" :rules="tableform" :model="experienceDataForm">
-        <el-table :data="experienceData" stripe style="width: 100%">
+        <el-table
+          ref="dragTable"
+          :data="experienceData"
+          stripe
+          row-key="sort"
+          style="width: 100%"
+        >
+          <el-table-column
+            type="index"
+            label="序号"
+            width="50"
+            class-name="allowDrag"
+          />
           <el-table-column prop="fieldName" label="字段名称" width="200">
             <template slot-scope="scope">
               <el-form-item
@@ -178,6 +190,7 @@ import { createDatabase } from "@/api/datasheet/index";
 import { tableInfo, editTable } from "@/api/dataEngine/index";
 import { mapState } from "vuex";
 import { getDicts } from "@/api/system/dict/data";
+import Sortable from "sortablejs";
 export default {
   name: "Datasheet",
   // dicts: [
@@ -249,7 +262,9 @@ export default {
       this.experienceData = [];
     }
   },
-  mounted() {},
+  mounted() {
+    this.initDragTable();
+  },
   computed: {
     ...mapState({
       databaseName: (state) => state.user.dataSource.databaseName,
@@ -569,8 +584,9 @@ export default {
         databaseName: this.databaseName,
       };
       tableInfo(data).then((response) => {
-        response.data.forEach((item) => {
+        response.data.forEach((item, index) => {
           item.oldVal = JSON.parse(JSON.stringify(item)); // 保留原始数据
+          // item.sort = index;
           this.experienceData.push(item);
           this.handleRules("add");
         });
@@ -730,6 +746,8 @@ export default {
         this.experienceData = new Array();
       }
       let obj = {
+        sort: this.experienceData.length + 1,
+        tag: this.experienceData.length + 1,
         fieldName: "",
         fieldType: "",
         fieldLength: undefined,
@@ -878,7 +896,26 @@ export default {
         this.$tab.closePage();
       });
     },
+    //处理表格行拖拽
+    initDragTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      const sortable = Sortable.create(el, {
+        handle: ".allowDrag",
+        onEnd: (evt) => {
+          const targetRow = this.experienceData.splice(evt.oldIndex, 1)[0];
+          this.experienceData.splice(evt.newIndex, 0, targetRow);
+          // for (let index in this.experienceData) {
+          //   this.experienceData[index].sort = parseInt(index) + 1;
+          // }
+          // this.$nextTick(() => {
+          //   this.$refs.dragTable.doLayout();
+          // });
+        },
+      });
+    },
   },
 };
 </script>
-<style scoped></style>
+<style scoped lang="scss"></style>