完成字典配置拖拽排序功能

package.json

@@ -41,6 +41,7 @@
         "clipboard": "2.0.8",
         "core-js": "3.25.3",
         "echarts": "4.9.0",
+        "el-table-draggable": "^1.4.12",
         "element-ui": "2.15.10",
         "file-saver": "2.0.5",
         "fuse.js": "6.4.3",

src/views/login.vue

@@ -96,7 +96,7 @@ export default {
       codeUrl: "",
       loginForm: {
         username: "admin",
-        password: "admin123",
+        password: "123456",
         rememberMe: false,
         code: "",
         uuid: "",

src/views/system/zyml/index.vue

@@ -406,56 +406,59 @@
           :name="item.name"
           style="width: 100%; height: 100%"
         >
-          <el-table
-            :ref="'table' + item.id"
-            :id="'table' + item.id"
-            :height="500"
-            :data="item.tabelData"
-            @cell-click="cellClick"
-            :row-class-name="tableRowClassName"
-            :cell-class-name="tableCellClassName"
-            border
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-            ></el-table-column>
-            <el-table-column align="center" label="字段名称" prop="fieldname">
-            </el-table-column>
-            <el-table-column prop="sort" label="字段别名" align="center">
-              <template slot-scope="{ row, column }">
-                <el-input
-                  size="mini"
-                  v-if="row.index == rowIndex && column.index == columnIndex"
-                  v-model="row.fieldaliasname"
-                  @blur="inputBlur(row)"
-                ></el-input>
-                <span v-else>{{ row.fieldaliasname }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="是否显示">
-              <template slot-scope="{ row }">
-                <el-switch
-                  v-model="row.status"
-                  active-text="是"
-                  inactive-text="否"
-                >
-                </el-switch>
-              </template>
-            </el-table-column>
-            <el-table-column label="显示顺序">
-              <template slot-scope="{ row }">
-                <el-input-number
-                  size="mini"
-                  v-model="row.order"
-                  :min="0"
-                  :precision="2"
-                  :step="1"
-                ></el-input-number>
-              </template>
-            </el-table-column>
-          </el-table>
+          <el-table-draggable @onEnd="handleRowOnEnd">
+            <el-table
+              :ref="'table' + item.id"
+              :id="'table' + item.id"
+              :height="500"
+              :data="item.tabelData"
+              @cell-click="cellClick"
+              :row-class-name="tableRowClassName"
+              :cell-class-name="tableCellClassName"
+              :row-key="(row) => row.id"
+              border
+            >
+              <el-table-column
+                align="center"
+                type="index"
+                label="序号"
+              ></el-table-column>
+              <el-table-column align="center" label="字段名称" prop="fieldname">
+              </el-table-column>
+              <el-table-column prop="sort" label="字段别名" align="center">
+                <template slot-scope="{ row, column }">
+                  <el-input
+                    size="mini"
+                    v-if="row.index == rowIndex && column.index == columnIndex"
+                    v-model="row.fieldaliasname"
+                    @blur="inputBlur(row)"
+                  ></el-input>
+                  <span v-else>{{ row.fieldaliasname }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否显示">
+                <template slot-scope="{ row }">
+                  <el-switch
+                    v-model="row.status"
+                    active-text="是"
+                    inactive-text="否"
+                  >
+                  </el-switch>
+                </template>
+              </el-table-column>
+              <!-- <el-table-column label="显示顺序">
+                <template slot-scope="{ row }">
+                  <el-input-number
+                    size="mini"
+                    v-model="row.order"
+                    :min="0"
+                    :precision="2"
+                    :step="1"
+                  ></el-input-number>
+                </template>
+              </el-table-column> -->
+            </el-table>
+          </el-table-draggable>
         </el-tab-pane>
       </el-tabs>
       <div slot="footer" class="dialog-footer">
@@ -481,6 +484,7 @@ import { getToken } from "@/utils/auth";
 import { getXzq } from "@/api/system/user";
 import { GetFieldValue, UpdateFieldValue } from "@/api/system/yztfield";
 import axios from "axios";
+import ElTableDraggable from "el-table-draggable";
 export default {
   name: "Zyml",
   dicts: [
@@ -494,6 +498,7 @@ export default {
   ],
   components: {
     Treeselect,
+    ElTableDraggable,
   },
   data() {
     return {
@@ -579,6 +584,14 @@ export default {
     this.getList();
   },
   methods: {
+    handleRowOnEnd(evt) {
+      setTimeout(() => {
+        // 输出移动后每行的数据及索引
+        this.tabelList[0].tabelData.forEach((row, index) => {
+          this.tabelList[0].tabelData[index].order = index + 1;
+        });
+      }, 200);
+    },
     /** 查询数据资源目录列表 */
     getList() {
       this.loading = true;
@@ -865,13 +878,11 @@ export default {
     },
     /** 字典维护 */
     async handleDict(row) {
-      console.log(row.legend);
       this.tempRowData = row;
       this.tabelList = [];
       this.tempTableData = [];
       //默认选中
       this.tabActiveName = row.name;
-      // console.log(row.url, row);
       let indexss = row.url.lastIndexOf("/");
       var resolvess = row.url.substring(0, indexss);
       let url1 = resolvess.replace("map-", "data-");
@@ -885,7 +896,6 @@ export default {
           method: "get",
           url: newUrl,
         }).then((res) => {
-          console.log(res);
           if (res.fieldNames.length > 0) {
             //处理数据
             res.fieldNames.forEach((item, iindex) => {
@@ -894,6 +904,7 @@ export default {
                 fieldaliasname: item,
                 status: true,
                 order: iindex,
+                id: iindex,
               });
             });
 
@@ -906,12 +917,18 @@ export default {
           }
         });
       } else {
-        console.log(JSON.parse(row.legend), "已有配置");
+        let newLegend = JSON.parse(row.legend)
+        newLegend.forEach((le,n) => {
+          if (!le.id) {
+            le.id = n
+          }
+        })
         //如果lenged中存在字段修正数据，则直接使用
         this.tabelList.push({
           bsm: row.bsm,
           name: row.name,
-          tabelData: JSON.parse(row.legend),
+          // tabelData: JSON.parse(row.legend),
+          tabelData:newLegend,
           servicename: row.name,
         });
       }
@@ -924,7 +941,6 @@ export default {
       if (this.tabelList.length > 0) {
         //将数据转化为字符串存储
         this.tempRowData.legend = JSON.stringify(this.tabelList[0].tabelData);
-        console.log(this.tempRowData, "this.tempRowData");
 
         updateZyml(this.tempRowData).then((response) => {
           this.$modal.msgSuccess("修改成功");
@@ -964,12 +980,8 @@ export default {
     inputBlur(row) {
       this.rowIndex = -1;
       this.columnIndex = -1;
-      console.log(row);
     },
-    // 字典维护—— 字段浏览设置
-    // handleStatusChange(row) {
-    //     console.log(row)
-    // },
+
   },
 };
 </script>