feature：增加音乐专辑的编辑按钮

src/views/music/album/index.vue

@@ -10,149 +10,67 @@
         <el-input v-model="form.name" placeholder="请输入专辑名称" clearable />
       </el-form-item>
       <el-form-item label="歌手名称：">
-        <el-input
-          v-model="form.singerName"
-          placeholder="请输入歌手名称"
-          clearable
-        />
+        <el-input v-model="form.singerName" placeholder="请输入歌手名称" clearable />
       </el-form-item>
       <el-form-item label="资源平台：">
-        <el-select
-          v-model="form.platformId"
-          placeholder="请选择资源平台"
-          clearable
-        >
-          <el-option
-            v-for="item in platformOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+        <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
+          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="专辑类型：">
-        <el-select
-          v-model="form.albumType"
-          placeholder="请选择专辑类型"
-          clearable
-        >
-          <el-option
-            v-for="item in albumTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+        <el-select v-model="form.albumType" placeholder="请选择专辑类型" clearable>
+          <el-option v-for="item in albumTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：">
-        <el-select
-          v-model="form.payType"
-          placeholder="请选择付费类型"
-          clearable
-        >
-          <el-option
-            v-for="item in payTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+        <el-select v-model="form.payType" placeholder="请选择付费类型" clearable>
+          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
-          <el-option
-            v-for="item in onOrOffOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+          <el-option v-for="item in onOrOffOptions" :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-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          @click="getDetail()"
-          v-hasPermi="['music:album:add']"
-          >新增</el-button
-        >
-        <el-button
-          type="primary"
-          :disabled="obj.id === ''"
-          @click="getChange(obj, 1)"
-          v-hasPermi="['music:album:up']"
-          >批量上架</el-button
-        >
-        <el-button
-          type="primary"
-          :disabled="obj.id === ''"
-          @click="getChange(obj, 2)"
-          v-hasPermi="['music:album:down']"
-          >批量下架</el-button
-        >
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()"
+          v-hasPermi="['music:album:add']">新增</el-button>
+        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 1)"
+          v-hasPermi="['music:album:up']">批量上架</el-button>
+        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 2)"
+          v-hasPermi="['music:album:down']">批量下架</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table
-      :data="tableData"
-      v-loading="loading"
-      @selection-change="handleSelect"
-    >
+    <el-table :data="tableData" v-loading="loading" @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="专辑Id" prop="id" align="center" show-overflow-tooltip />
+      <el-table-column label="专辑名称" prop="name" align="center" show-overflow-tooltip />
       <el-table-column label="专辑封面" align="center" width="100px">
         <template slot-scope="scope">
           <el-image v-if="scope.row.coverUrl" :src="scope.row.coverUrl" />
         </template>
       </el-table-column>
-      <el-table-column
-        label="专辑类型"
-        prop="albumType"
-        align="center"
-        :formatter="typeFormatter"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        label="歌手名称"
-        prop="singerName"
-        align="center"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        label="付费类型"
-        prop="payType"
-        align="center"
-        :formatter="payTypeFormatter"
-      />
+      <el-table-column label="专辑类型" prop="albumType" align="center" :formatter="typeFormatter" show-overflow-tooltip />
+      <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
+      <el-table-column label="付费类型" prop="payType" align="center" :formatter="payTypeFormatter" />
       <el-table-column label="歌曲数量" prop="programCount" align="center" />
-      <el-table-column
-        label="资源平台"
-        prop="platformId"
-        align="center"
-        :formatter="platformFormatter"
-      />
-      <el-table-column
-        label="当前状态"
-        prop="status"
-        align="center"
-        :formatter="statusFormatter"
-      />
+      <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="!scope.row.showEdit">
+            <span style="margin-right:8px;">
+              {{ form.sortIndex ? form.sortIndex + 1 : "" }}
+            </span>
+            <svg-icon icon-class="edit" @click.native="handleEditClick(scope.row)" />
+          </div>
+          <el-input v-else v-model="scope.row.editNumber" size="mini" style="width:60px;" type="number"
+            @blur="onNumberBlur(scope.row)" placeholder="序号" ref="numberInput" />
+        </template>
+      </el-table-column>
       <el-table-column label="更新时间" prop="updateTime" align="center">
         <template slot-scope="scope">
           <span>{{
@@ -162,62 +80,36 @@
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id, true)"
-            >查看</el-button
-          >
+          <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
           <span v-if="scope.row.status === 2">
-            <el-button
-              type="text"
-              @click="getDetail(scope.row.id)"
-              v-hasPermi="['music:album:edit']"
-              style="margin-left: 10px"
-            >
+            <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['music:album:edit']"
+              style="margin-left: 10px">
               编辑
             </el-button>
-            <el-button
-              type="text"
-              @click="getChange(scope.row, 1)"
-              v-hasPermi="['music:album:up']"
-              >上架
+            <el-button type="text" @click="getChange(scope.row, 1)" v-hasPermi="['music:album:up']">上架
             </el-button>
-            <el-button
-              type="delete"
-              @click="getDelete(scope.row)"
-              v-hasPermi="['music:album:delete']"
-              >删除
+            <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['music:album:delete']">删除
             </el-button>
           </span>
-          <el-button
-            v-else
-            type="text"
-            @click="getChange(scope.row, 2)"
-            v-hasPermi="['music:album:down']"
-            >下架
+          <el-button v-else type="text" @click="getChange(scope.row, 2)" v-hasPermi="['music:album:down']">下架
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="form.pageNum"
-      :limit.sync="form.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 
 <script>
 import { change, list, remove } from "@/api/music/menu";
 import {
-albumTypeMixin,
-onOrOffMixin,
-payTypeMixin,
-platformMixin,
+  albumTypeMixin,
+  onOrOffMixin,
+  payTypeMixin,
+  platformMixin,
 } from "@/mixin/index";
 import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
-  name:"MusicAlbum",
+  name: "MusicAlbum",
   mixins: [platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin],
   data() {
     return {
@@ -304,7 +196,7 @@ export default {
             }
           });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
 
     // 删除
@@ -323,7 +215,7 @@ export default {
               }
             });
           })
-          .catch(() => {});
+          .catch(() => { });
       });
     },
 
@@ -335,6 +227,43 @@ export default {
           (this.obj.id += item.id + (index + 1 < e.length ? "," : ""))
       );
     },
+    // 点击编辑图标显示输入框
+    handleEditClick(row) {
+      // 先隐藏所有已打开的编辑框
+      this.tableData.forEach(item => {
+        if (item !== row && item.showEdit) {
+          this.$set(item, 'showEdit', false);
+        }
+      });
+
+      // 初始化编辑值为当前序号
+      const index = this.tableData.indexOf(row);
+      const originalNumber = this.form.sortIndex + 1;
+      row.editNumber = originalNumber;
+      this.$set(row, 'showEdit', true);
+      // 使用nextTick确保DOM更新后再获取焦点
+      this.$nextTick(() => {
+        // 注意：由于el-table中的ref可能有多个，这里需要使用$refs.numberInput[0]
+        const inputs = this.$refs.numberInput;
+        if (inputs && inputs.length) {
+          inputs[0].focus();
+        } else if (inputs) {
+          inputs.focus();
+        }
+      });
+    },
+
+    // 输入框失去焦点时隐藏
+    onNumberBlur(row) {
+      const originalNumber = this.form.sortIndex + 1;
+
+      if (row.editNumber && row.editNumber !== originalNumber) {
+        console.log('序号已修改:', originalNumber, '→', row.editNumber);
+        // 这里可以添加序号修改的API调用逻辑
+      }
+
+      this.$set(row, 'showEdit', false);
+    },
 
     // 字典翻译
     platformFormatter(row) {