Merge pull request #67 from WeBankFinTech/branch_bertcai

Branch bertcai

Author: nancyzhan

docs/.vitepress/components/BTagsPanel/index.md

@@ -20,6 +20,11 @@ app.use(BTagsPanel);
 
 --USEDISABLED
 
+### 双击编辑标签
+允许通过双击标签编辑标签
+
+--USEEDITABLED
+
 ### 长度限制
 支持限制单标签长度，样例设置标签最大长度为8,设置展示当前输入长度。
 --USElIMIT
@@ -50,6 +55,7 @@ app.use(BTagsPanel);
 | effect | 主题，可选值：dark、light、plain | string|light|
 | type |  类型，可选值：default、success、info、warning、danger | string|default|
 | disabled | 是否不可编辑 | boolean|false|
+| editabled | 是否支持双击标签编辑标签内容 | boolean|false|
 | maxlength | 单标签最大长度 | number|25|
 | showWordLimit | 是否显示输入内容长度统计 | boolean|false|
 | regex | 是否自定义输入标签校验 | string|''|

docs/.vitepress/components/BTagsPanel/useEditabled.vue

@@ -0,0 +1,12 @@
+<template>
+    <BTagsPanel v-model:tags="tags" :editabled="true"></BTagsPanel>
+    <br>
+    当前tag列表：{{ tags }}
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { BTagsPanel } from '@fesjs/traction-widget';
+
+const tags = ref<string[]>(['默认标签1', '默认标签2']);
+
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/traction-widget",
-  "version": "1.12.5",
+  "version": "1.12.6",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "scripts": {
     "docs:dev": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress dev docs",

packages/traction-widget/components/TagsPanel/TagsPanel.vue

@@ -1,9 +1,14 @@
 <template>
     <div :class="prefixCls" class="wd-tags-panel">
-        <FTag v-for="tag in tags" :key="tag" :closable="!disabled" @close="deleteTag(tag)" :size="size" :type="type" :effect="effect">
-            <FEllipsis :content="tag" style="max-width: 240px">
-            </FEllipsis>
-        </FTag>
+        <div v-for="(tag,index) in tags" :key="index">
+            <FTag v-if="!showTagInputArray[index]" @dblclick="startEdit(index)" :closable="!disabled" @close="deleteTag(index)" :size="size" :type="type" :effect="effect">
+                <FEllipsis :content="tag" style="max-width: 240px">
+                </FEllipsis>
+            </FTag>
+            <FInput v-else :ref="(el) => { if (el) editTagInputRefs[index] = el as any }" v-model="editTempTagInput" class="input-in-tag input-nef-tag" size="small"
+                :maxlength="maxlength" :showWordLimit="showWordLimit" @keydown.escape="cancelEdit(index)" @keyup.enter="commitEdit(index)" @blur="commitEdit(index)">
+        </FInput>
+        </div>
         <FInput v-if="showTagInput" ref="tagInputRef" v-model="tempTagInput" class="input-nef-tag" size="small"
             :maxlength="maxlength" :showWordLimit="showWordLimit" @keyup.enter="addNewTag" @blur="addNewTag">
         </FInput>
@@ -62,6 +67,11 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    // 是否可双击编辑标签
+    editabled: {
+        type: Boolean,
+        default: false
+    },
     // 尺寸，可选值：small、middle、large
     size: {
         type: String,
@@ -87,18 +97,42 @@ const props = defineProps({
 // eslint-disable-next-line no-undef
 const emit = defineEmits(['update:tags']);
 const { datasource } = useFormModel(props, emit, ['tags']);
+const showTagInputArray = ref(datasource.tags.map(() => false));
+const editTagInputRefs = ref<InstanceType<typeof FInput>[]>([] as any[]);
+const editTempTagInput = ref<string>('');
+
+// 开始编辑
+const startEdit = (index: number) => {
+    if (!props.editabled) return;
+    editTempTagInput.value = datasource.tags[index];
+    showTagInputArray.value.splice(index, 1, true);
+    nextTick(() => {
+        editTagInputRefs.value[index].focus();
+    });
+};
+
+// 提交编辑
+const commitEdit = (index: number) => {
+    const newText = editTempTagInput.value;
+    showTagInputArray.value.splice(index, 1, false);
+    datasource.tags.splice(index, 1, newText);
+};
+
+// 取消编辑
+const cancelEdit = (index: number) => {
+    showTagInputArray.value.splice(index, 1, false);
+};
 
 const showTagInput = ref<boolean>(false);
 
 const tempTagInput = ref<string>('');
 const currentInstance = getCurrentInstance();
-const deleteTag = async (tag: string) => {
-    const index = datasource.tags.indexOf(tag);
+const deleteTag = async (index: number) => {
     datasource.tags.splice(index, 1);
     console.log(datasource.tags);
     await currentInstance?.proxy?.$forceUpdate();
 };
-const notNull = (value: string) => {
+const notNull = (value: string) => { /*  */
     if (!value) {
         return false;
     }

packages/traction-widget/components/TagsPanel/style/index.less

@@ -11,6 +11,11 @@
     width: 100px;
   }
 
+  .input-in-tag {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+
   .button-nef-tag {
     margin-right: 16px;
   }