feat(账号管理): 在添加账号模态框中实现标签的创建和选择功能

src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue

@@ -16,6 +16,7 @@ import {
   Tooltip,
   Upload,
   Switch,
+  Select,
 } from 'ant-design-vue';
 const { TextArea } = Input;
 import AuthorizedAccountModal from '../authorized-account-modal';
@@ -36,6 +37,7 @@ import {
   getTemplateUrl,
   batchMediaAccounts,
   getProjectList,
+  postAccountTags,
 } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-download.png';
@@ -268,6 +270,35 @@ export default {
         </>
       );
     };
+    const handleTagChange = (value) => {
+      form.value.tag_ids = value;
+    };
+    const handleTagInputPressEnter = async (e) => {
+      const inputValue = e.target.value.trim();
+
+      if (!inputValue) return;
+      const _target = tagOptions.value.find((item) => item.name === inputValue);
+      if (_target) {
+        return;
+      }
+
+      try {
+        const { code, data } = await postAccountTags({ name: inputValue });
+
+        if (code === 200 && data) {
+          tagOptions.value.push({
+            id: data.id,
+            name: data.name,
+          });
+          e.target.value = '';
+
+          form.value.tag_ids = form.value.tag_ids.filter((item) => item !== inputValue);
+          form.value.tag_ids.push(data.id);
+        }
+      } catch (error) {
+        message.error('添加标签失败');
+      }
+    };
 
     expose({ open });
 
@@ -394,11 +425,28 @@ export default {
               </FormItem>
 
               <FormItem label="选择标签">
-                <CommonSelect
-                  v-model={form.value.tag_ids}
-                  options={tagOptions.value}
-                  placeholder="请选择…"
+                <Select
+                  value={form.value.tag_ids}
+                  mode="tags"
                   size="large"
+                  placeholder="请选择标签"
+                  allowClear
+                  autoClearSearchValue
+                  class="w-full"
+                  showSearch
+                  showArrow
+                  maxTagCount={5}
+                  optionFilterProp="name"
+                  options={tagOptions.value}
+                  field-names={{ label: 'name', value: 'id' }}
+                  onChange={handleTagChange}
+                  onInputKeyDown={(e) => {
+                    // 检测回车键
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleTagInputPressEnter(e);
+                    }
+                  }}
                 />
               </FormItem>
               <FormItem