feat: 处理结果定制频道添加添加序号和编辑图标

src/views/operation/channel/index.vue

@@ -1,4 +1,5 @@
 <!-- 运营管理 定制频道-->
+
 <template>
   <div class="app-container">
     <!-- 新增 -->
@@ -28,6 +29,32 @@
         :formatter="devFormatter"
         show-overflow-tooltip
       />
+
+      <el-table-column label="序号" align="center">
+        <template slot-scope="scope">
+          <div v-if="currentEditIndex !== scope.$index">
+            <span style="margin-right: 8px">
+              {{ scope.row.sort || "" }}
+            </span>
+            <svg-icon
+              icon-class="edit"
+              @click.native="handleEditClick(scope.row, scope.$index)"
+            />
+          </div>
+          <el-input
+            v-else
+            v-model="scope.row.sort"
+            size="mini"
+            style="width: 60px"
+            type="number"
+            @blur="onNumberBlur(scope.row, scope.$index)"
+            @keyup.enter.native="onNumberBlur(scope.row, scope.$index)"
+            placeholder="序号"
+            ref="numberInput"
+          />
+        </template>
+      </el-table-column>
+
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button
@@ -177,6 +204,8 @@ export default {
   name: "OperationChannel",
   data() {
     return {
+      currentEditIndex: -1,
+      editData: {},
       // 遮罩层
       loading: false,
       dialog_loading: false,
@@ -344,6 +373,61 @@ export default {
       }
     },
 
+    // 点击编辑图标显示输入框
+    handleEditClick(row, index) {
+      this.editData = {
+        sortIndex: row.sortIndex,
+      };
+      this.currentEditIndex = index;
+      this.$nextTick(() => {
+        this.$refs.numberInput.focus();
+      });
+    },
+
+    // 输入框失去焦点时隐藏
+    onNumberBlur(row, index) {
+      let newValue = this.editData.sortIndex ?? -1;
+      console.log("newValue", newValue);
+
+      if (newValue === -1 || newValue === "") {
+        // 新值为空时处理
+        this.currentEditIndex = -1;
+        console.log("序号未修改:", newValue);
+        return;
+      }
+
+      if (newValue <= 0) {
+        // 新值与原值相同时处理
+        this.$message.warning("序号必须大于0", newValue);
+        return;
+      }
+
+      // 检查序号是否重复
+      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;
+      }
+    },
+
     // 排序
     getChange(id, sort) {
       change({