feat: 对定制频道详情序号处理

src/mixin/index.js

@@ -469,7 +469,7 @@ const platformMixin = {
               );
               e ? (this.platformTypeOptions = this.platformOptions) : "";
               res.data.map((i) => {
-                console.log("获取对应平台====" + Number(i.id) + "==" + i.name + "==" + i.joinType);
+//                console.log("获取对应平台====" + Number(i.id) + "==" + i.name + "==" + i.joinType);
                 return i;
               });
 

src/views/operation/channels/detail.vue

@@ -103,6 +103,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)"
@@ -148,13 +191,17 @@ import { channelDetail, channeledit } from "@/api/operation/channels";
 import Dialog from "@/components/Dialog/index.vue";
 import { disabledMixin, isFreeMixin, platformMixin } from "@/mixin/index";
 export default {
-  name:"operationChannelsDetail",
+  name: "operationChannelsDetail",
   mixins: [platformMixin, isFreeMixin, disabledMixin],
   components: {
     Dialog,
   },
   data() {
     return {
+      editData: {
+        currentEditIndex: -1,
+        currentEditSort: 1,
+      },
       // 遮罩层
       loading: false,
       // 弹窗
@@ -174,13 +221,64 @@ export default {
     this.getDetail();
     this.getPlatform({});
   },
+
   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 = [];
@@ -207,6 +305,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);
+          }
         }
       });
     },

src/views/operation/channels/index.vue

@@ -40,6 +40,7 @@
             />
           </div>
 
+
           <el-input
             v-else
             v-model="scope.row.indexNum"
@@ -312,18 +313,17 @@
 
 <script>
 import {
-  change,
-  channeledit,
-  channels,
-  classEdit,
-  classRemove,
-  classSubmit,
-  detail,
-  dev,
-  edit,
-  list,
-  remove,
-  submit,
+change,
+channels,
+classEdit,
+classRemove,
+classSubmit,
+detail,
+dev,
+edit,
+list,
+remove,
+submit
 } from "@/api/operation/channels";
 
 import { dialogCallBack } from "@/utils/DialogUtil";