添加多个组件实现手动输入

src/pages/sjtb/configTask/dataTable/index.vue

@@ -34,6 +34,9 @@ const graph = ref<X6Graph | null>(null);
 const level3 = ref<InstanceType<typeof ElSelect> | null>(null);
 const level4 = ref<InstanceType<typeof ElSelect> | null>(null);
 
+// 手动输入模式名
+const manualModeInput = ref('');
+
 // 表单数据
 const formData = reactive({
   taskId: '',
@@ -87,12 +90,7 @@ function handleModeChange(newValues: string[]) {
 
   // 新增节点
   added.forEach((value) => {
-    let item = modeList.value.find((item: any) => item.value === value);
-    // 兼容手动输入：allow-create 时下拉项中不存在该 value，使用输入值作为 label 并补充到 modeList
-    if (!item) {
-      item = { value, label: value };
-      modeList.value.push(item);
-    }
+    const item = modeList.value.find((item: any) => item.value === value);
     if (item) {
       graph.value?.addChildNode(formData.sourceId, {
         id: value,
@@ -320,6 +318,35 @@ function getFieldById(name: any) {
     formData.field = '';
   });
 }
+// 手动添加模式
+function handleAddMode() {
+  const inputVal = manualModeInput.value.trim();
+  if (!inputVal) {
+    ElMessage({ type: 'warning', message: '请输入模式名称' });
+    return;
+  }
+  // 检查是否已存在相同 label 的模式
+  const exists = modeList.value.find((item: any) => item.label === inputVal);
+  if (exists) {
+    // 如果已存在但未选中，直接选中
+    if (!formData.mode.includes(exists.value)) {
+      formData.mode.push(exists.value);
+      handleModeChange([...formData.mode]);
+    }
+    else {
+      ElMessage({ type: 'warning', message: '该模式已添加' });
+    }
+  }
+  else {
+    // 新建项并选中
+    const newItem = { value: uuidv4(), label: inputVal };
+    modeList.value.push(newItem);
+    formData.mode.push(newItem.value);
+    handleModeChange([...formData.mode]);
+  }
+  manualModeInput.value = '';
+}
+
 // 保存事件
 function handleSave() {
   if (!formData.targetUserName) {
@@ -364,11 +391,19 @@ function handleCancel() {
       </ElFormItem>
       <ElFormItem :label="t('mode')">
         <ElSelect v-model="formData.mode" style="width: 220px" multiple :max-collapse-tags="0" collapse-tags
-          collapse-tags-tooltip filterable allow-create default-first-option :reserve-keyword="false"
-          :placeholder="t('pleaseSelect')" class="custom-select" @change="handleModeChange">
+          collapse-tags-tooltip filterable :placeholder="t('pleaseSelect')" class="custom-select"
+          @change="handleModeChange">
           <ElOption v-for="(item, index) in modeList" :key="index" :label="item.label" :value="item.value" />
         </ElSelect>
       </ElFormItem>
+      <ElFormItem label="手动输入模式">
+        <div style="display: flex; align-items: center;">
+          <ElInput v-model="manualModeInput" style="width: 160px" placeholder="输入模式名" @keyup.enter="handleAddMode" />
+          <ElButton type="primary" style="margin-left: 8px;" @click="handleAddMode">
+            添加
+          </ElButton>
+        </div>
+      </ElFormItem>
       <ElFormItem :label="t('dataTable')">
         <ElSelect ref="level3" v-model="formData.dataValue" style="width: 220px" multiple :max-collapse-tags="0"
           collapse-tags collapse-tags-tooltip :placeholder="t('pleaseSelect')" class="custom-select"