feature：音乐专辑的序号挪到新增里

src/views/music/album/detail.vue

@@ -1,145 +1,79 @@
 <!-- 音乐专辑 详情 -->
 <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="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="albumType">
         <el-select v-model="form.albumType" placeholder="请选择专辑类型">
-          <el-option
-            v-for="item in albumTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
+          <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="资源平台：" 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="payType">
         <el-select v-model="form.payType" 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.payType !== 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.payType !== 1" label="折扣价：" prop="discount">
-        <el-input-number
-          v-model="form.discount"
-          placeholder="请输入折扣价"
-          :min="1"
-          :precision="2"
-          :controls="false"
-        />
+        <el-input-number v-model="form.discount" placeholder="请输入折扣价" :min="1" :precision="2" :controls="false" />
       </el-form-item>
       <el-form-item label="专辑封面：" prop="coverUrl">
-        <Upload
-          listType="picture-card"
-          :url="form.coverUrl"
-          @upload="upload($event, 'coverUrl')"
-          :disabled="disabled"
-        />
+        <Upload listType="picture-card" :url="form.coverUrl" @upload="upload($event, 'coverUrl')"
+          :disabled="disabled" />
       </el-form-item>
       <el-form-item label="歌曲列表：" style="width: 100%">
-        <el-button type="primary" icon="el-icon-plus" @click="getDialog"
-          >添加歌曲</el-button
-        >
+        <el-button type="primary" icon="el-icon-plus" @click="getDialog">添加歌曲</el-button>
         <!-- 列表 -->
         <el-table :data="form.programList" v-loading="form_loading">
           <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="singerName"
-            align="center"
-            show-overflow-tooltip
-          />
+          <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
+          <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
           <el-table-column label="播放时长" prop="playTime" align="center" />
-          <el-table-column
-            label="当前状态"
-            prop="status"
-            align="center"
-            :formatter="statusFormatter"
-          />
+          <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="margin-right:8px;">
+                  {{ (dialogForm.pageNum - 1) * dialogForm.pageSize + scope.$index + 1 }}
+                </span>
+                <svg-icon v-if="!disabled || !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)"
+                @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">
               <Audio :src="scope.row.progaramUrl" />
-              <el-button
-                type="delete"
-                :disabled="disabled"
-                @click="getDelete(scope.$index)"
-                >删除</el-button
-              >
+              <el-button type="delete" :disabled="disabled" @click="getDelete(scope.$index)">删除</el-button>
 
               <!-- 向上移动 -->
-              <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.programList.length - 2 && !disabled) ||
+              <el-button type="text" icon="el-icon-caret-bottom"
+                @click="getChange(false, scope.$index, scope.$index + 1)" :disabled="(scope.$index > form.programList.length - 2 && !disabled) ||
                   disabledPlatformId(form.platformId)
-                "
-              />
+                  " />
             </template>
           </el-table-column>
         </el-table>
@@ -147,77 +81,37 @@
     </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="1100px">
       <el-form inline size="mini" style="width: 100%">
         <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-input
-            v-model="dialogForm.singerName"
-            placeholder="请输入歌手名称"
-            clearable
-          />
+          <el-input v-model="dialogForm.singerName" placeholder="请输入歌手名称" clearable />
         </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="tableData"
-        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="tableData" 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="singerName"
-          align="center"
-          show-overflow-tooltip
-        />
+        <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
+        <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
         <el-table-column label="播放时长" prop="playTime" align="center" />
         <!-- <el-table-column label="操作" align="center">
           <template slot-scope="scope">
@@ -235,13 +129,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>
@@ -251,13 +140,13 @@ import { list } from "@/api/music/list";
 import { detail, submit } from "@/api/music/menu";
 import Audio from "@/components/Audio/index.vue";
 import {
-albumTypeMixin,
-onOrOffMixin,
-payTypeMixin,
-platformMixin,
+  albumTypeMixin,
+  onOrOffMixin,
+  payTypeMixin,
+  platformMixin,
 } from "@/mixin/index";
 export default {
-  name:"musicAlbumDetail",
+  name: "musicAlbumDetail",
   mixins: [platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin],
   components: {
     Audio,
@@ -292,6 +181,8 @@ export default {
         status: 1,
         type: 1,
       },
+      editData: {},
+      currentEditIndex: -1,
       // 校验
       rules: {
         name: [
@@ -402,7 +293,67 @@ export default {
     tableKey(row) {
       return row.id;
     },
+    // 输入框失去焦点时隐藏
+    onNumberBlur(row, index) {
+
+      let newValue = Number(this.editData.sortIndex);
+      console.log('序号修改:', newValue, '当前索引:', index, this.currentEditIndex);
+      const maxLen = this.form.programList.length;
+      this.currentEditIndex = -1;
+
+      if (isNaN(newValue) || newValue === null || newValue === undefined) {
+
+        return;
+      }
+      if (newValue < 1) {
+        this.$message.warning('序号必须大于0');
+        // this.currentEditIndex = -1;
+
+        return;
+      }
+      if (newValue > maxLen) {
+        this.$message.warning(`序号不能超过${maxLen}`);
+        // this.currentEditIndex = -1;
+
+        return;
+      }
+
+      if (newValue === -1 || newValue === '') {
+        // 新值为空时处理
+        // this.currentEditIndex = -1;
+        console.log('序号未修改:', newValue);
+        return
+      }
+      // 计算目标下标
+      const targetIndex = newValue - 1;
+      if (targetIndex === index) {
+        // this.currentEditIndex = -1;
+        return;
+      }
+      // 交换两个元素
+      const temp = this.form.programList[index];
+      this.$set(this.form.programList, index, this.form.programList[targetIndex]);
+      this.$set(this.form.programList, targetIndex, temp);
+
+      // this.currentEditIndex = -1;
+      this.$message.success("操作成功！");
+
+
+    },
+    // 点击编辑图标显示输入框
+    handleEditClick(row, index) {
+      if (this.disabled || !this.canOrder) {
+        return;
+      }
+      this.editData = {
+        sortIndex: row.index,
+      };
+      this.currentEditIndex = index;
+      this.$nextTick(() => {
+        this.$refs.numberInput.focus();
+      });
 
+    },
     handleSelectionChange(val) {
       if (this.isLoad) {
         if (this.form.programList.length == 0) {

src/views/music/album/index.vue

@@ -59,24 +59,12 @@
       <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="序号" align="center">
-        <template slot-scope="scope">
-          <div v-if="currentEditIndex !== scope.$index">
-            <span style="margin-right:8px;">
-              {{ scope.row.sortIndex || '' }}
-            </span>
-            <svg-icon 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)" @keyup.enter.native="onNumberBlur(scope.row, scope.$index)"
-            placeholder="序号" ref="numberInput" />
-        </template>
-      </el-table-column>
+
       <el-table-column label="更新时间" prop="updateTime" align="center">
         <template slot-scope="scope">
           <span>{{
             parseTime(scope.row.updateTime, "{y}-{m}-{d} {h}:{i}:{s}")
-          }}</span>
+            }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
@@ -126,8 +114,7 @@ export default {
       total: 0,
       // 列表
       tableData: [],
-      editData: {},
-      currentEditIndex: -1,
+
       // 批量上下架
       obj: {
         id: "",
@@ -230,56 +217,6 @@ export default {
           (this.obj.id += item.id + (index + 1 < e.length ? "," : ""))
       );
     },
-    // 点击编辑图标显示输入框
-    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;
-      }
-
-
-    },
-
 
     // 字典翻译
     platformFormatter(row) {