feature：增加音乐-博客专辑的序号功能

src/views/music/blog/detail.vue

@@ -1,179 +1,86 @@
 <!-- 音频管理 播客专辑详情 -->
 <template>
   <div class="app-container">
-    <el-form
-      class="form"
-      :model="form"
-      ref="form"
-      :rules="rules"
-      label-width="100px"
-      :disabled="disabled"
-    >
+    <el-form class="form" :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
       <el-form-item label="播客名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入播客名称" />
       </el-form-item>
       <el-form-item label="主播名称：" prop="podcasterIds">
-        <el-select
-          v-model="form.podcasterIds"
-          multiple
-          filterable
-          remote
-          reserve-keyword
-          placeholder="请输入主播名称"
-          :remote-method="getSelect"
-          no-data-text="请新增主播"
-        >
-          <el-option
-            v-for="item in anchorOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+        <el-select v-model="form.podcasterIds" multiple filterable remote reserve-keyword placeholder="请输入主播名称"
+          :remote-method="getSelect" no-data-text="请新增主播">
+          <el-option v-for="item in anchorOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="播客分类：" prop="categoryIds">
-        <el-select
-          v-model="form.categoryIds"
-          multiple
-          placeholder="请选择播客分类"
-        >
-          <el-option
-            v-for="item in blogClassOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+        <el-select v-model="form.categoryIds" multiple placeholder="请选择播客分类">
+          <el-option v-for="item in blogClassOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="播客介绍：" prop="description">
-        <el-input
-          v-model="form.description"
-          type="textarea"
-          :autosize="{ minRows: 5, maxRows: 10 }"
-          maxlength="300"
-          show-word-limit
-          placeholder=" 请输入播客介绍"
-        />
+        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" maxlength="300"
+          show-word-limit placeholder=" 请输入播客介绍" />
       </el-form-item>
       <el-form-item label="资源平台：" prop="platformId">
-        <el-select
-          v-model="form.platformId"
-          placeholder="请选择资源平台"
-          :disabled="disabledPlatformId(form.platformId)"
-        >
-          <el-option
-            v-for="item in platformOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-            :disabled="disabledJoinType(item.joinType)"
-          />
+        <el-select v-model="form.platformId" placeholder="请选择资源平台" :disabled="disabledPlatformId(form.platformId)">
+          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label"
+            :disabled="disabledJoinType(item.joinType)" />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：" prop="charging">
         <el-select v-model="form.charging" placeholder="请选择付费类型">
-          <el-option
-            v-for="item in payTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.charging !== 1" label="原价：" prop="price">
-        <el-input-number
-          v-model="form.price"
-          placeholder="请输入原价"
-          :min="1"
-          :precision="2"
-          :controls="false"
-        />
+        <el-input-number v-model="form.price" placeholder="请输入原价" :min="1" :precision="2" :controls="false" />
       </el-form-item>
-      <el-form-item
-        v-if="form.charging !== 1"
-        label="折扣价："
-        prop="discountedPrice"
-      >
-        <el-input-number
-          v-model="form.discountedPrice"
-          placeholder="请输入折扣价"
-          :min="1"
-          :precision="2"
-          :controls="false"
-        />
+      <el-form-item v-if="form.charging !== 1" label="折扣价：" prop="discountedPrice">
+        <el-input-number v-model="form.discountedPrice" placeholder="请输入折扣价" :min="1" :precision="2"
+          :controls="false" />
       </el-form-item>
       <el-form-item label="播客封面" prop="thumb">
-        <Upload
-          listType="picture-card"
-          :url="form.thumb"
-          @upload="upload"
-          :disabled="disabled"
-        />
+        <Upload listType="picture-card" :url="form.thumb" @upload="upload" :disabled="disabled" />
       </el-form-item>
       <el-form-item label="关联节目：" prop="adminPodCastProgramDetailResp">
         <el-button type="primary" @click="getDialog">关联节目</el-button>
-        <el-button @click="getDelete" :disabled="ids.length > 0 ? false : true"
-          >解除关联</el-button
-        >
+        <el-button @click="getDelete" :disabled="ids.length > 0 ? false : true">解除关联</el-button>
       </el-form-item>
 
       <el-form-item style="width: 100%">
-        <el-table
-          :data="form.adminPodCastProgramDetailResp"
-          @selection-change="handleSelect"
-        >
+        <el-table :data="form.adminPodCastProgramDetailResp" @selection-change="handleSelect">
           <el-table-column type="selection" align="center" />
-          <el-table-column
-            label="ID"
-            prop="id"
-            align="center"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            label="节目名称"
-            prop="name"
-            align="center"
-            show-overflow-tooltip
-          />
-          <el-table-column
-            label="资源平台"
-            prop="platformId"
-            align="center"
-            :formatter="platformFormatter"
-          />
-
-          <el-table-column
-            label="当前状态"
-            prop="status"
-            align="center"
-            :formatter="statusFormatter"
-          />
+          <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
+          <el-table-column label="节目名称" prop="name" align="center" show-overflow-tooltip />
+          <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
 
+          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+          <el-table-column label="序号" align="center">
+            <template slot-scope="scope">
+              <div v-if="currentEditIndex !== scope.$index">
+                <span :style="{ marginRight: (canOrder) ? '0px' : '8px' }">
+                  {{ (dialogForm.pageNum - 1) * dialogForm.pageSize + scope.$index + 1 }}
+                </span>
+                <svg-icon v-if="canOrder" icon-class="edit" @click.native="handleEditClick(scope.row, scope.$index)" />
+              </div>
+              <el-input v-else v-model="editData.sortIndex" size="mini" style="width:60px;" type="number"
+                @blur="onNumberBlur(scope.row, scope.$index)" placeholder="序号" ref="numberInput" />
+            </template>
+          </el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
               <!-- 向上移动 -->
-              <el-button
-                type="text"
-                icon="el-icon-caret-top"
-                @click="getChange(true, scope.$index, scope.$index - 1)"
-                :disabled="
-                  (scope.$index < 1 && !disabled) ||
+              <el-button type="text" icon="el-icon-caret-top" @click="getChange(true, scope.$index, scope.$index - 1)"
+                :disabled="(scope.$index < 1 && !disabled) ||
                   disabledPlatformId(form.platformId)
-                "
-              />
+                  " />
 
               <!-- 向下移动 -->
-              <el-button
-                type="text"
-                icon="el-icon-caret-bottom"
-                @click="getChange(false, scope.$index, scope.$index + 1)"
-                :disabled="
-                  (scope.$index >
-                    form.adminPodCastProgramDetailResp.length - 2 &&
-                    !disabled) ||
+              <el-button type="text" icon="el-icon-caret-bottom"
+                @click="getChange(false, scope.$index, scope.$index + 1)" :disabled="(scope.$index >
+                  form.adminPodCastProgramDetailResp.length - 2 &&
+                  !disabled) ||
                   disabledPlatformId(form.platformId)
-                "
-              />
+                  " />
             </template>
           </el-table-column>
         </el-table>
@@ -181,103 +88,44 @@
     </el-form>
     <div class="form-btn">
       <el-button @click="cancel">取消</el-button>
-      <el-button v-if="!disabled" type="primary" @click="getSubmit"
-        >确定</el-button
-      >
+      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
     </div>
 
     <!-- 弹窗 -->
     <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1200px">
       <el-form inline size="mini" style="width: 100%">
         <el-form-item label="节目ID：">
-          <el-input
-            v-model="dialogForm.id"
-            placeholder="请输入节目ID"
-            clearable
-          />
+          <el-input v-model="dialogForm.id" placeholder="请输入节目ID" clearable />
         </el-form-item>
         <el-form-item label="节目名称：">
-          <el-input
-            v-model="dialogForm.name"
-            placeholder="请输入节目名称"
-            clearable
-          />
+          <el-input v-model="dialogForm.name" placeholder="请输入节目名称" clearable />
         </el-form-item>
         <el-form-item label="付费类型：">
-          <el-select
-            v-model="dialogForm.isFree"
-            placeholder="请选择付费类型"
-            clearable
-          >
-            <el-option
-              v-for="item in freeOptions"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            />
+          <el-select v-model="dialogForm.isFree" placeholder="请选择付费类型" clearable>
+            <el-option v-for="item in freeOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
         <el-form-item label="资源平台：">
-          <el-select
-            v-model="dialogForm.platformId"
-            placeholder="请选择资源平台"
-          >
-            <el-option
-              v-for="item in platformOptions.filter(
-                (i) => !i.joinType.includes('1')
-              )"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            />
+          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
+            <el-option v-for="item in platformOptions.filter(
+              (i) => !i.joinType.includes('1')
+            )" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="getSearch"
-            >搜索</el-button
-          >
+          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
           <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
         </el-form-item>
       </el-form>
-      <el-table
-        :data="dialogTableData"
-        ref="multipleTable"
-        :row-key="tableKey"
-        v-loading="loading"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column
-          type="selection"
-          align="center"
-          key="selection"
-          reserve-selection
-        />
+      <el-table :data="dialogTableData" ref="multipleTable" :row-key="tableKey" v-loading="loading"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" key="selection" reserve-selection />
 
         <el-table-column label="ID" prop="id" align="center" />
-        <el-table-column
-          label="节目名称"
-          prop="name"
-          align="center"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="资源平台"
-          prop="platformId"
-          align="center"
-          :formatter="platformFormatter"
-        />
-        <el-table-column
-          label="付费类型"
-          prop="isFree"
-          align="center"
-          :formatter="freeFormatter"
-        />
-        <el-table-column
-          label="当前状态"
-          prop="status"
-          align="center"
-          :formatter="statusFormatter"
-        />
+        <el-table-column label="节目名称" prop="name" align="center" show-overflow-tooltip />
+        <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
+        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
+        <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
 
         <!-- <el-table-column label="操作" align="center">
           <template slot-scope="scope">
@@ -297,13 +145,8 @@
           </template>
         </el-table-column> -->
       </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="dialogForm.pageNum"
-        :limit.sync="dialogForm.pageSize"
-        @pagination="getList"
-      />
+      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
+        @pagination="getList" />
     </el-dialog>
   </div>
 </template>
@@ -312,14 +155,14 @@
 import { selectAnchor } from "@/api/music/anchor";
 import { checkList, detail, relieve, submit } from "@/api/music/blog";
 import {
-blogClassMixin,
-isFreeMixin,
-onOrOffMixin,
-payTypeMixin,
-platformMixin,
+  blogClassMixin,
+  isFreeMixin,
+  onOrOffMixin,
+  payTypeMixin,
+  platformMixin,
 } from "@/mixin/index";
 export default {
-  name:"musicBlogDetail",
+  name: "musicBlogDetail",
   mixins: [
     blogClassMixin,
     platformMixin,
@@ -350,6 +193,8 @@ export default {
     return {
       // 遮罩层
       loading: false,
+      editData: {},
+      currentEditIndex: -1,
       // 表单
       form: {
         adminPodCastProgramDetailResp: [],
@@ -450,6 +295,7 @@ export default {
     };
   },
   mounted() {
+    console.log("博客专辑mounted");
     // 获取资源平台
     this.getPlatform({
       audioType: 8,
@@ -752,7 +598,66 @@ export default {
     cancel() {
       this.$tab.closeOpenPage("/music/musicBlog");
     },
+    // 输入框失去焦点时隐藏
+    onNumberBlur(row, index) {
+
+      let newValue = Number(this.editData.sortIndex);
+      const maxLen = this.form.adminPodCastProgramDetailResp.length;
+
+      if (isNaN(newValue) || newValue === null || newValue === undefined) {
+        this.currentEditIndex = -1;
+        console.log('序号未修改:', newValue);
+        return;
+      }
+      if (newValue < 1) {
+        this.$message.warning('序号必须大于1');
+        this.currentEditIndex = -1;
+
+        return;
+      }
+      if (newValue > maxLen) {
+        // 超出就是最后一位
+        newValue = maxLen
+      }
+
+      if (newValue === -1 || newValue === '') {
+        // 新值为空时处理
+        this.currentEditIndex = -1;
+        console.log('序号未修改:', newValue);
+        return
+      }
+      console.log('序号修改:', newValue, '当前索引:', index, this.currentEditIndex);
+
+      // 计算目标下标
+      const targetIndex = newValue - 1;
+      if (targetIndex === index) {
+        this.currentEditIndex = -1;
+        return;
+      }
+      // 交换两个元素
+      // ...existing code...
+      const movingItem = this.form.adminPodCastProgramDetailResp.splice(index, 1)[0];
+      this.form.adminPodCastProgramDetailResp.splice(targetIndex, 0, movingItem);
+      this.currentEditIndex = -1;
+      this.$message.success("操作成功！");
+
+
+    },
+    // 点击编辑图标显示输入框
+    handleEditClick(row, index) {
+      if (!this.canOrder) {
+        console.log('编辑功能已禁用', this.disabled, this.canOrder);
+        return;
+      }
+      this.editData = {
+        sortIndex: row.index,
+      };
+      this.currentEditIndex = index;
+      this.$nextTick(() => {
+        this.$refs.numberInput.focus();
+      });
 
+    },
     // 字典翻译
     platformFormatter(row) {
       return this.selectDictLabel(this.platformOptions, row.platformId);