MTRAgent管理模块、MTR探测策略、服务器管理添加标签配置

src/components/form/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" :key="config && config.key" class="demo-ruleForm">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" :key="config && config.key" class="demo-ruleForm" @submit.native.prevent>
         <template v-for="(formItem,index) of formList">
           <h4 v-if="formItem && formItem.config && formItem.config.title" style="color: #000;" class="form-header h4">{{formItem.config.title}}</h4>
           <el-row style="color: #606266;">
@@ -235,6 +235,37 @@
                   ></el-transfer>
                 </template>
 
+                <template v-else-if="formVal.type === 'dynamicTags'">
+                  <div class="dynamic-tags-container">
+                    <!-- 显示已存在的标签 -->
+                    <el-tag
+                      v-for="(tag, tagIndex) in ruleForm[key]"
+                      :key="tagIndex"
+                      :closable="!toBoolean(formVal.disabled || formItem.config.readonly)"
+                      :disable-transitions="false"
+                      @close="handleTagClose(key, tagIndex)"
+                      class="dynamic-tag">
+                      {{ tag }}
+                    </el-tag>
+                    <!-- 动态输入框 -->
+                    <template v-if="!toBoolean(formVal.disabled || formItem.config.readonly)">
+                      <el-input
+                        v-if="inputVisibleMap[key]"
+                        ref="tagInputRef"
+                        v-model="inputValueMap[key]"
+                        class="input-new-tag"
+                        size="small"
+                        @keyup.enter.native="handleInputConfirm(key)"
+                        @blur="handleInputConfirm(key)"
+                        @keyup.delete="handleDeleteWhenEmpty(key)"
+                        style="width: 100px">
+                      </el-input>
+                      <!-- 添加新标签的按钮 -->
+                      <el-button v-else class="button-new-tag" size="small" @click="showInput(key)">+ 新标签</el-button>
+                    </template>
+                  </div>
+                </template>
+
                 <!-- 自定义插槽，用于特殊类型的表单控件 -->
                 <template v-else-if="formVal.slotName">
                   <slot :name="formVal.slotName" :field="formVal"></slot>
@@ -292,6 +323,9 @@
         //   {porp: 'name', label: '姓名', span: 24, type: 'input',rules: {required: true, message: '请输入活动名称', trigger: 'blur'}},
         //   {porp: 'age', label: '下拉', span: 24, type: 'select',options:[{value: '1', label: '10'},{value: '2', label: '20'}]},
         // ],
+        inputVisibleMap: {},    // 记录每个字段的输入框显示状态
+        inputValueMap: {},      // 记录每个字段的输入值
+        tagInputRef: null       // 输入框引用
       };
     },
     watch: {
@@ -407,6 +441,56 @@
           }
         }
       },
+      // 显示输入框 tag
+      showInput(fieldKey) {
+        // 1. 先显示输入框
+        this.$set(this.inputVisibleMap, fieldKey, true);
+        // 初始化该字段的数组（如果尚未初始化）
+        if (!Array.isArray(this.ruleForm[fieldKey])) {
+          this.$set(this.ruleForm, fieldKey, []);
+        }
+
+        // 设置该字段的输入框为可见状态
+        this.$set(this.inputValueMap, fieldKey, '');
+
+        // 下一个tick聚焦输入框
+        this.$nextTick(() => {
+          if (this.$refs.tagInputRef && this.$refs.tagInputRef[0].focus) {
+            this.$refs.tagInputRef[0].focus();
+          }
+        });
+      },
+
+      // 确认输入 tag
+      handleInputConfirm(fieldKey) {
+        const inputValue = this.inputValueMap[fieldKey]?.trim();
+
+        if (inputValue) {
+          // 避免重复标签
+          if (!this.ruleForm[fieldKey].includes(inputValue)) {
+            this.ruleForm[fieldKey].push(inputValue);
+            // 触发change事件
+            this.handleChange(fieldKey, this.ruleForm[fieldKey], this.formVal);
+          }
+        }
+        // 重置输入状态
+        this.$set(this.inputVisibleMap, fieldKey, false);
+        this.$set(this.inputValueMap, fieldKey, '');
+      },
+
+      // 删除标签 tag
+      handleTagClose(fieldKey, tagIndex) {
+        this.ruleForm[fieldKey].splice(tagIndex, 1);
+        // 触发change事件
+        this.handleChange(fieldKey, this.ruleForm[fieldKey], this.formVal);
+      },
+
+      // 当输入框为空时按删除键，隐藏输入框 tag
+      handleDeleteWhenEmpty(fieldKey) {
+        if (!this.inputValueMap[fieldKey]) {
+          this.$set(this.inputVisibleMap, fieldKey, false);
+        }
+      }
     }
   }
 </script>
@@ -439,5 +523,26 @@
   ::v-deep .labelWidthNullSty .el-form-item__content {
     margin-left: 0px!important;
   }
+
+  .dynamic-tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 0;
+  }
+
+  .dynamic-tag {
+    margin: 2px;
+  }
+
+  .input-new-tag {
+    width: 100px;
+  }
+
+  .button-new-tag {
+    margin-left: 0;
+  }
+
 </style>