feat: 优化定制频道和多频多台展示处理

src/views/operation/channel/index.vue

@@ -32,7 +32,7 @@
 
       <el-table-column label="序号" align="center">
         <template slot-scope="scope">
-          <div v-if="currentEditIndex !== scope.$index">
+          <div v-if="editData.currentEditIndex !== scope.$index">
             <span style="margin-right: 8px">
               {{ scope.row.sort || "" }}
             </span>
@@ -204,8 +204,10 @@ export default {
   name: "OperationChannel",
   data() {
     return {
-      currentEditIndex: -1,
-      editData: {},
+      editData: {
+        currentEditIndex: -1,
+        currentEditSort: 1,
+      },
       // 遮罩层
       loading: false,
       dialog_loading: false,
@@ -375,10 +377,8 @@ export default {
 
     // 点击编辑图标显示输入框
     handleEditClick(row, index) {
-      this.editData = {
-        sortIndex: row.sortIndex,
-      };
-      this.currentEditIndex = index;
+      this.editData.currentEditIndex = index;
+      this.editData.currentEditSort = row.sort;
       this.$nextTick(() => {
         this.$refs.numberInput.focus();
       });
@@ -386,46 +386,46 @@ export default {
 
     // 输入框失去焦点时隐藏
     onNumberBlur(row, index) {
-      let newValue = this.editData.sortIndex ?? -1;
-      console.log("newValue", newValue);
+      var newSort = row.sort;
 
-      if (newValue === -1 || newValue === "") {
-        // 新值为空时处理
-        this.currentEditIndex = -1;
-        console.log("序号未修改:", newValue);
+      if (newSort === "") {
+        row.sort = this.editData.currentEditSort;
+        this.$message.warning("序号不能为空");
         return;
       }
 
-      if (newValue <= 0) {
-        // 新值与原值相同时处理
-        this.$message.warning("序号必须大于0", newValue);
+      if (newSort <= 0) {
+        row.sort = this.editData.currentEditSort;
+        this.$message.warning("序号必须大于0");
         return;
       }
 
+      this.editData.currentEditIndex = -1;
+
       // 检查序号是否重复
-      const isDuplicate = this.tableData.some(
-        (item, i) => i !== index && item.sortIndex === newValue
-      );
+      // const isDuplicate = this.tableData.some(
+      //   (item, i) => i !== index && item.sortIndex === newSort
+      // );
 
-      if (isDuplicate) {
-        this.$message.warning("序号已存在");
-      } else {
-        // 更新到tableData
-        this.$set(this.tableData, index, {
-          ...row,
-          sortIndex: newValue,
-        });
-        console.log(
-          "序号修改成功:",
-          newValue,
-          "row.sortIndex",
-          row.sortIndex,
-          "this.tableData",
-          this.tableData[index].sortIndex
-        );
-        // 隐藏编辑框
-        this.currentEditIndex = -1;
-      }
+      // if (isDuplicate) {
+      //   this.$message.warning("序号已存在");
+      // } else {
+      //   // 更新到tableData
+      //   this.$set(this.tableData, index, {
+      //     ...row,
+      //     sortIndex: newSort,
+      //   });
+      //   console.log(
+      //     "序号修改成功:",
+      //     newSort,
+      //     "row.sortIndex",
+      //     row.sortIndex,
+      //     "this.tableData",
+      //     this.tableData[index].sortIndex
+      //   );
+      // 隐藏编辑框
+      //   this.editData.currentEditIndex = -1;
+      // }
     },
 
     // 排序

src/views/operation/channels/index.vue

@@ -28,7 +28,7 @@
 
       <el-table-column label="序号" align="center">
         <template slot-scope="scope">
-          <div v-if="currentEditIndex !== scope.$index">
+          <div v-if="editData.currentEditIndex !== scope.$index">
             <span style="margin-right: 8px">
               {{ scope.row.sort || "" }}
             </span>
@@ -327,8 +327,10 @@ export default {
   name: "OperationChannels",
   data() {
     return {
-      currentEditIndex: -1,
-      editData: {},
+      editData: {
+        currentEditIndex: -1,
+        currentEditSort: 1,
+      },
       // 遮罩层
       loading: false,
       // 列表
@@ -421,10 +423,8 @@ export default {
 
     // 点击编辑图标显示输入框
     handleEditClick(row, index) {
-      this.editData = {
-        sortIndex: row.sortIndex,
-      };
-      this.currentEditIndex = index;
+      this.editData.currentEditIndex = index;
+      this.editData.currentEditSort = row.sort;
       this.$nextTick(() => {
         this.$refs.numberInput.focus();
       });
@@ -432,46 +432,46 @@ export default {
 
     // 输入框失去焦点时隐藏
     onNumberBlur(row, index) {
-      let newValue = this.editData.sortIndex ?? -1;
-      console.log("newValue", newValue);
+      var newSort = row.sort;
 
-      if (newValue === -1 || newValue === "") {
-        // 新值为空时处理
-        this.currentEditIndex = -1;
-        console.log("序号未修改:", newValue);
+      if (newSort === "") {
+        row.sort = this.editData.currentEditSort;
+        this.$message.warning("序号不能为空");
         return;
       }
 
-      if (newValue <= 0) {
-        // 新值与原值相同时处理
-        this.$message.warning("序号必须大于0", newValue);
+      if (newSort <= 0) {
+        row.sort = this.editData.currentEditSort;
+        this.$message.warning("序号必须大于0");
         return;
       }
 
+      this.editData.currentEditIndex = -1;
+
       // 检查序号是否重复
-      const isDuplicate = this.tableData.some(
-        (item, i) => i !== index && item.sortIndex === newValue
-      );
-
-      if (isDuplicate) {
-        this.$message.warning("序号已存在");
-      } else {
-        // 更新到tableData
-        this.$set(this.tableData, index, {
-          ...row,
-          sortIndex: newValue,
-        });
-        console.log(
-          "序号修改成功:",
-          newValue,
-          "row.sortIndex",
-          row.sortIndex,
-          "this.tableData",
-          this.tableData[index].sortIndex
-        );
-        // 隐藏编辑框
-        this.currentEditIndex = -1;
-      }
+      // const isDuplicate = this.tableData.some(
+      //   (item, i) => i !== index && item.sortIndex === newSort
+      // );
+
+      // if (isDuplicate) {
+      //   this.$message.warning("序号已存在");
+      // } else {
+      //   // 更新到tableData
+      //   this.$set(this.tableData, index, {
+      //     ...row,
+      //     sortIndex: newSort,
+      //   });
+      //   console.log(
+      //     "序号修改成功:",
+      //     newSort,
+      //     "row.sortIndex",
+      //     row.sortIndex,
+      //     "this.tableData",
+      //     this.tableData[index].sortIndex
+      //   );
+      // 隐藏编辑框
+      //   this.editData.currentEditIndex = -1;
+      // }
     },
 
     // 弹窗