feat: 定制频道编辑交换位置本地处理

src/views/operation/channel/index.vue

@@ -34,7 +34,9 @@
         <template slot-scope="scope">
           <div v-if="editData.currentEditIndex !== scope.$index">
             <span style="margin-right: 8px">
-              {{ scope.row.sort || "" }}
+              {{ scope.row.indexNum }}
+              <!-- {{ scope.$index + 1 }} -->
+              <!-- {{ scope.row.sort || "" }} -->
             </span>
             <svg-icon
               icon-class="edit"
@@ -43,7 +45,7 @@
           </div>
           <el-input
             v-else
-            v-model="scope.row.sort"
+            v-model="scope.row.indexNum"
             size="mini"
             style="width: 60px"
             type="number"
@@ -191,13 +193,13 @@
 
 <script>
 import {
-  change,
-  channelPage,
-  create,
-  devList,
-  editPage,
-  getRemove,
-  page,
+change,
+channelPage,
+create,
+devList,
+editPage,
+getRemove,
+page,
 } from "@/api/operation/channel";
 import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
@@ -260,7 +262,11 @@ export default {
       this.loading = true;
       page(this.form).then((res) => {
         if (res.code === 0) {
-          this.tableData = res.data;
+          var data = res.data;
+          for (var i = 0; i < data.length; i++) {
+            data[i].indexNum = i + 1;
+          }
+          this.tableData = data;
           this.loading = false;
         }
       });
@@ -378,7 +384,7 @@ export default {
     // 点击编辑图标显示输入框
     handleEditClick(row, index) {
       this.editData.currentEditIndex = index;
-      this.editData.currentEditSort = row.sort;
+      this.editData.currentEditSort = row.indexNum;
       this.$nextTick(() => {
         this.$refs.numberInput.focus();
       });
@@ -386,16 +392,16 @@ export default {
 
     // 输入框失去焦点时隐藏
     onNumberBlur(row, index) {
-      var newSort = row.sort;
+      var newSort = row.indexNum;
 
       if (newSort === "") {
-        row.sort = this.editData.currentEditSort;
+        row.indexNum = this.editData.currentEditSort;
         this.$message.warning("序号不能为空");
         return;
       }
 
       if (newSort <= 0) {
-        row.sort = this.editData.currentEditSort;
+        row.indexNum = this.editData.currentEditSort;
         this.$message.warning("序号必须大于0");
         return;
       }
@@ -405,6 +411,14 @@ export default {
         return;
       }
 
+      ///删除第index个元素
+
+      this.tableData.splice(index, 1);
+      this.tableData.splice(newSort - 1, 0, row);
+
+      for (var i = 0; i < this.tableData.length; i++) {
+        this.tableData[i].indexNum = i + 1;
+      }
       this.editData.currentEditIndex = -1;
 
       // 检查序号是否重复