feat: 对定多频多台详情序号处理

src/views/operation/channel/detail.vue

@@ -105,6 +105,49 @@
             align="center"
             :formatter="statusFormatter"
           />
+
+          <!-- ///排序 -->
+
+          <el-table-column label="序号" align="center">
+            <template slot-scope="scope">
+              <div v-if="editData.currentEditIndex !== scope.$index">
+                <span style="margin-right: 8px">
+                  {{ scope.row.indexNum }}
+                  <!-- {{ scope.$index + 1 }} -->
+                  <!-- {{ 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.indexNum"
+                type="number"
+                rows="12"
+                placeholder="序号"
+                @blur="onNumberBlur(scope.row, scope.$index)"
+                @keyup.enter.native="onNumberBlurEnter(scope.row, scope.$index)"
+              /> -->
+
+              <el-input
+                v-else
+                v-model="scope.row.indexNum"
+                size="mini"
+                style="width: 60px"
+                type="number"
+                @blur="onNumberBlur(scope.row, scope.$index)"
+                @keyup.enter.native="onNumberBlurEnter(scope.row, scope.$index)"
+                placeholder="序号"
+                ref="numberInput"
+              />
+            </template>
+          </el-table-column>
+
+          <!-- ///排序 -->
+
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
               <el-button type="delete" @click="getDelete(scope.row)"
@@ -149,13 +192,17 @@ import { channelDetail, edit } from "@/api/operation/channel";
 import Dialog from "@/components/Dialog/index.vue";
 import { disabledMixin, isFreeMixin, platformMixin } from "@/mixin/index";
 export default {
-  name:"operationChannelDetail",
+  name: "operationChannelDetail",
   mixins: [platformMixin, isFreeMixin, disabledMixin],
   components: {
     Dialog,
   },
   data() {
     return {
+      editData: {
+        currentEditIndex: -1,
+        currentEditSort: 1,
+      },
       // 遮罩层
       loading: false,
       // 弹窗
@@ -181,12 +228,62 @@ export default {
   },
 
   methods: {
+    // 点击编辑图标显示输入框
+    handleEditClick(row, index) {
+      this.editData.currentEditIndex = index;
+      this.editData.currentEditSort = row.indexNum;
+      this.$nextTick(() => {
+        this.$refs.numberInput.focus();
+      });
+    },
+
+    onNumberBlurEnter(row, index) {
+      this.editData.currentEditIndex = -1;
+    },
+
+    // 输入框失去焦点时隐藏
+    onNumberBlur(row, index) {
+      var newSort = row.indexNum;
+
+      if (newSort === "") {
+        row.indexNum = this.editData.currentEditSort;
+        this.$message.warning("序号不能为空");
+        return;
+      }
+
+      if (newSort <= 0) {
+        row.indexNum = this.editData.currentEditSort;
+        this.$message.warning("序号必须大于0");
+        return;
+      }
+
+      if (newSort === this.editData.currentEditSort) {
+        this.editData.currentEditIndex = -1;
+        return;
+      }
+
+      ///删除第index个元素
+      this.form.list.splice(index, 1);
+      this.form.list.splice(newSort - 1, 0, row);
+
+      for (var i = 0; i < this.form.list.length; i++) {
+        this.form.list[i].indexNum = i + 1;
+      }
+      this.form.list = this.form.list.filter((i) => i);
+      this.editData.currentEditIndex = -1;
+    },
+
     // 排序
     getChangeSort(row, sort) {
       const rowBean = this.form.list[row];
       const sortBean = this.form.list[sort];
       this.form.list[row] = sortBean;
       this.form.list[sort] = rowBean;
+
+      for (var i = 0; i < this.form.list.length; i++) {
+        this.form.list[i].indexNum = i + 1;
+      }
+
       this.form.list = this.form.list.filter((i) => i);
 
       // this.form.audioList = [];
@@ -204,6 +301,7 @@ export default {
       // });
     },
 
+    
     // 频道详情
     getDetail() {
       channelDetail({
@@ -211,6 +309,12 @@ export default {
       }).then((res) => {
         if (res.code === 0) {
           this.form = res.data;
+          if (this.form.list) {
+            for (var i = 0; i < this.form.list.length; i++) {
+              this.form.list[i].indexNum = i + 1;
+            }
+            this.form.list = this.form.list.filter((i) => i);
+          }
         }
       });
     },