标签组件可双击修改

src/views/book/courseware/create/components/base/label/Label.vue

@@ -1,31 +1,48 @@
 <template>
   <ModuleBase ref="base" :type="data.type">
     <template #content>
-      <div class="tag-edit">
-        <el-tag
-          v-for="(tag, i) in data.dynamicTags"
-          :key="i"
-          closable
-          :style="{ color: tag.color }"
-          @close="handleClose(i)"
-        >
-          {{ tag.name }}
-        </el-tag>
-        <el-input
-          v-if="inputVisible"
-          ref="saveTagInput"
-          v-model="inputValue"
-          class="input-new-tag"
-          @keyup.enter.native="handleInputConfirm"
-          @blur="handleInputConfirm"
-        />
-        <el-button
-          v-else
-          class="button-new-tag"
-          :disabled="data.dynamicTags.length >= 16"
-          @click="showAddLabelTextInput"
-          >+ 添加标签</el-button
-        >
+      <div>
+        <div class="tag-edit">
+          <template v-for="(tag, i) in data.dynamicTags">
+            <el-input
+              v-if="tag.isEditing"
+              :key="'input-' + i"
+              :ref="'inputRefs-' + i"
+              v-model="tag.editName"
+              class="input-new-tag"
+              @blur="handleSave(i)"
+              @keydown.enter.native="handleSave(i)"
+              @keydown.escape.native="handleCancel(i)"
+            />
+            <el-tag
+              v-else
+              :key="'tag-' + i"
+              closable
+              :style="{ color: tag.color }"
+              @close="handleClose(i)"
+              @dblclick.native="handleEdit(i)"
+              class="dynamic-tag"
+            >
+              {{ tag.name }}
+            </el-tag>
+          </template>
+
+          <el-input
+            v-if="inputVisible"
+            ref="saveTagInput"
+            v-model="inputValue"
+            class="input-new-tag"
+            @keyup.enter.native="handleInputConfirm"
+            @blur="handleInputConfirm"
+          />
+          <el-button
+            v-else
+            class="button-new-tag"
+            :disabled="data.dynamicTags.length >= 16"
+            @click="showAddLabelTextInput"
+            >+ 添加标签</el-button
+          >
+        </div>
       </div>
       <hr style="margin: 16px 0; border-top: 1px solid #ededed" />
       <div class="tag-manager">
@@ -123,12 +140,67 @@ export default {
       labelName: '',
       editLanguage: false, // 编辑多语言
       editMultilingualTags: {},
+      editLable: false,
     };
   },
   created() {
     this.getLabelList();
   },
   methods: {
+    handleEdit(index, event) {
+      this.data.dynamicTags
+        .filter((x) => x.isEditing)
+        .forEach((tag, i) => {
+          if (tag.isEditing && i !== index) {
+            this.$set(this.data.dynamicTags[i], 'isEditing', false);
+            this.$set(this.data.dynamicTags[i], 'editName', null);
+          }
+        });
+
+      this.$set(this.data.dynamicTags[index], 'isEditing', true);
+      this.$set(this.data.dynamicTags[index], 'editName', this.data.dynamicTags[index].name);
+
+      this.$nextTick(() => {
+        const input = this.$refs['inputRefs-' + index];
+        if (input && input.length > 0) {
+          input[0].focus();
+        }
+      });
+
+      this.editLable = true;
+    },
+
+    // 保存编辑
+    handleSave(index) {
+      if (!this.editLable) return;
+      const en = this.data.dynamicTags[index];
+      const newName = en.editName.trim();
+
+      if (newName) {
+        en.name = newName;
+        UpdateLabel(en)
+          .then(() => {
+            this.$set(this.data.dynamicTags[index], 'isEditing', false);
+            this.$set(this.data.dynamicTags[index], 'name', newName);
+            this.$message.success('设置成功!');
+            this.cur_page = 1;
+
+            this.getLabelList();
+
+            this.editLable = false;
+          })
+          .catch((e) => {
+            console.error(e);
+          });
+      }
+    },
+
+    // 取消编辑
+    handleCancel(index) {
+      this.editLable = false;
+      this.$set(this.data.dynamicTags[index], 'isEditing', false);
+    },
+
     // 随机显示颜色
     getRandomColor() {
       let randomIndex = Math.floor(Math.random() * (this.labelColorList.length - 1)) + 1;
@@ -221,7 +293,6 @@ export default {
           mult_language_list: this.commonTags[index].mult_language_list || [],
         });
       }
-      console.info(1, this.data.dynamicTags);
     },
     // 得到标签列表
     getLabelList() {
@@ -287,7 +358,6 @@ export default {
     // 上传标签
     customUpload(file) {
       fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
-        // console.log(file_info_list);
         if (file_info_list.length > 0) {
           let file_id = file_info_list[0].file_id;
           ImportLabel({ file_id })