Browse Source

feature:修改音乐专辑的下标选择

zeng.chen 1 tháng trước cách đây
mục cha
commit
be41378371
1 tập tin đã thay đổi với 43 bổ sung16 xóa
  1. 43 16
      src/views/music/album/index.vue

+ 43 - 16
src/views/music/album/index.vue

@@ -67,8 +67,9 @@
             </span>
             <svg-icon icon-class="edit" @click.native="handleEditClick(scope.row, scope.$index)" />
           </div>
-          <el-input v-else v-model="scope.row.sortIndex" size="mini" style="width:60px;" type="number"
-            @blur="onNumberBlur(scope.row, scope.$index)" placeholder="序号" ref="numberInput" />
+          <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">
@@ -125,6 +126,7 @@ export default {
       total: 0,
       // 列表
       tableData: [],
+      editData: {},
       currentEditIndex: -1,
       // 批量上下架
       obj: {
@@ -230,30 +232,55 @@ export default {
     },
     // 点击编辑图标显示输入框
     handleEditClick(row, index) {
-      // 设置当前编辑的行索引
+      this.editData = {
+        sortIndex: row.sortIndex,
+      };
       this.currentEditIndex = index;
-
-      // 使用nextTick确保DOM更新后再获取焦点
       this.$nextTick(() => {
-        const inputs = this.$refs.numberInput;
-        if (inputs && inputs.length) {
-          inputs[0].focus();
-        } else if (inputs) {
-          inputs.focus();
-        }
+        this.$refs.numberInput.focus();
       });
     },
 
     // 输入框失去焦点时隐藏
     onNumberBlur(row, index) {
-      // 重置当前编辑的行索引
-      this.currentEditIndex = -1;
-      if (row.sortIndex != this.tableData[index].sortIndex) {
-        console.log('修改后的序号:', row.sortIndex);
-        // 这里可以添加序号修改的API调用逻辑
+      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) {
       return this.selectDictLabel(this.platformOptions, row.platformId);