perf: 标签选择交互调整

2025-09-18 11:54:48 +08:00
parent b24dc1af9d
commit 465920796f
6 changed files with 133 additions and 41 deletions
--- a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
+++ b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
@ -48,8 +48,12 @@ export default defineComponent({
      }
    };

-    const handleTagChange = (record) => {
-      console.log(record.tag_ids);
+    const handleTagChange = (value, option, record) => {
+      if (value.length < 6) {
+        record.tag_ids = value;
+      } else {
+        message.warning('最多选择5个');
+      }
    };

    // 添加处理标签输入的函数
@ -57,15 +61,13 @@ export default defineComponent({
      const inputValue = e.target.value.trim();

      if (!inputValue) return;
-
-      if (record.tag_ids.length >= 5) {
-        message.warning('最多选择5个');
+      const _target = tagData.value.find((item) => item.name === inputValue);
+      if (_target) {
        return;
      }

-      const _target = tagData.value.find((item) => item.name === inputValue);
-      if (_target) {
-        record.tag_ids = [...record.tag_ids, _target.id];
+      if (record.tag_ids.length >= 5) {
+        message.warning('最多选择5个');
        return;
      }

@ -355,17 +357,21 @@ export default defineComponent({
                return (
                  <Select
                    disabled={record.uploadStatus === EnumUploadStatus.uploading}
-                    v-model:value={record.tag_ids}
-                    mode="tags"
+                    value={record.tag_ids}
+                    mode="multiple"
                    size="middle"
                    placeholder="请选择标签"
                    allowClear
+                    autoClearSearchValue
                    class="w-full"
                    showSearch
                    showArrow
                    maxTagCount={5}
                    maxTagTextLength={5}
-                    onChnange={() => handleTagChange(record)}
+                    options={tagData.value}
+                    optionFilterProp="name"
+                    field-names={{ label: 'name', value: 'id' }}
+                    onChange={(value, option) => handleTagChange(value, option, record)}
                    onInputKeyDown={(e) => {
                      // 检测回车键
                      if (e.key === 'Enter') {
@ -373,13 +379,7 @@ export default defineComponent({
                        handleTagInputPressEnter(e, record);
                      }
                    }}
-                  >
-                    {tagData.value.map((item) => (
-                      <Option value={item.id} key={item.id}>
-                        {item.name}
-                      </Option>
-                    ))}
-                  </Select>
+                  />
                );
              }}
            />
--- a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
+++ b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
@ -9,8 +9,8 @@
  }

  .ant-select {
-    .ant-select-selection-item {
-      
+    .ant-select-selection-overflow-item {
+      max-width: 50%;
    }
  }

--- a/src/views/material-center/components/raw-material/components/edit-raw-material-modal/index.vue
+++ b/src/views/material-center/components/raw-material/components/edit-raw-material-modal/index.vue
@ -5,7 +5,12 @@ import { Button, Modal, Form, FormItem, Input, message, Select } from 'ant-desig
 const { TextArea } = Input;

 import { formatFileSize, exactFormatTime } from '@/utils/tools';
-import { getRawMaterialDetail, putRawMaterial, getRawMaterialTagsList } from '@/api/all/generationWorkshop';
+import {
+  getRawMaterialDetail,
+  putRawMaterial,
+  getRawMaterialTagsList,
+  posRawMaterialTags,
+} from '@/api/all/generationWorkshop';
 import { TABS_LIST, ORIGIN_LIST } from '@/views/material-center/components/raw-material/constants';

 const INITIAL_FORM = {
@ -98,6 +103,46 @@ export default {
      });
    };

+    const handleTagChange = (value) => {
+      if (value.length < 6) {
+        form.value.tag_ids = value;
+      } else {
+        message.warning('最多选择5个');
+      }
+    };
+
+    // 添加处理标签输入的函数
+    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;
+      }
+
+      if (form.value.tag_ids.length >= 5) {
+        message.warning('最多选择5个');
+        return;
+      }
+
+      try {
+        const { code, data } = await posRawMaterialTags({ 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, data.id];
+        }
+      } catch (error) {
+        message.error('添加标签失败');
+      }
+    };
+
    expose({ open });

    return () => (
@ -152,30 +197,29 @@ export default {
          </FormItem>
          <FormItem label="标签" name="tag_ids" v-model:value={form.value.tag_ids}>
            <Select
-              v-model:value={form.value.tag_ids}
-              mode="tags"
+              value={form.value.tag_ids}
+              mode="multiple"
              size="middle"
              placeholder="请选择标签"
              allowClear
+              autoClearSearchValue
              class="w-full"
              showSearch
              showArrow
              maxTagCount={5}
+              optionFilterProp="name"
+              options={tagOptions.value}
              maxTagTextLength={5}
+              field-names={{ label: 'name', value: 'id' }}
+              onChange={handleTagChange}
              onInputKeyDown={(e) => {
                // 检测回车键
                if (e.key === 'Enter') {
                  e.preventDefault();
-                  // handleTagInputPressEnter(e);
+                  handleTagInputPressEnter(e);
                }
              }}
-            >
-              {tagOptions.value.map((item) => (
-                <Select.Option value={item.id} key={item.id}>
-                  {item.name}
-                </Select.Option>
-              ))}
-            </Select>
+            />
          </FormItem>
          <FormItem label="来源" name="origin">
            <Input
--- a/src/views/material-center/components/raw-material/components/filter-block/index.vue
+++ b/src/views/material-center/components/raw-material/components/filter-block/index.vue
@ -15,14 +15,31 @@
          </template>
        </Input>
      </div>
-<!--      <div class="filter-row-item">-->
-<!--        <span class="label">序号</span>-->
-<!--        <Input v-model:value="query.uid" class="!w-160px" placeholder="请输入序号" allowClear @change="handleSearch">-->
-<!--          <template #prefix>-->
-<!--            <icon-search />-->
-<!--          </template>-->
-<!--        </Input>-->
-<!--      </div>-->
+      <div class="filter-row-item">
+        <span class="label">标签</span>
+        <Select
+          v-model:value="query.tag_ids"
+          :field-names="{ label: 'name', value: 'id' }"
+          :maxTagCount="1"
+          :options="tagData"
+          allowClear
+          class="!w-200px"
+          mode="multiple"
+          optionFilterProp="name"
+          placeholder="请选择标签"
+          showArrow
+          showSearch
+          @change="handleSearch"
+        />
+      </div>
+      <!--      <div class="filter-row-item">-->
+      <!--        <span class="label">序号</span>-->
+      <!--        <Input v-model:value="query.uid" class="!w-160px" placeholder="请输入序号" allowClear @change="handleSearch">-->
+      <!--          <template #prefix>-->
+      <!--            <icon-search />-->
+      <!--          </template>-->
+      <!--        </Input>-->
+      <!--      </div>-->
      <div class="filter-row-item">
        <span class="label">上传时间</span>
        <DatePicker.RangePicker
@ -54,8 +71,9 @@

 <script setup>
 import { defineEmits, defineProps, ref, nextTick } from 'vue';
-import { Button, Input, DatePicker } from 'ant-design-vue';
+import { Button, Input, DatePicker, Select } from 'ant-design-vue';
 import dayjs from 'dayjs';
+import { getRawMaterialTagsList } from '@/api/all/generationWorkshop';

 const props = defineProps({
  query: {
@ -67,6 +85,14 @@ const props = defineProps({
 const emits = defineEmits(['search', 'reset', 'update:query']);

 const created_at = ref([]);
+const tagData = ref([]);
+
+const getTagData = async () => {
+  const { code, data } = await getRawMaterialTagsList();
+  if (code === 200) {
+    tagData.value = data ?? [];
+  }
+};

 const handleSearch = () => {
  emits('update:query', props.query);
@ -96,4 +122,18 @@ const handleReset = () => {
  created_at.value = [];
  emits('reset');
 };
+
+onMounted(() => {
+  getTagData();
+});
 </script>
+
+<style lang="scss" scoped>
+.common-filter-wrap {
+  :deep(.ant-select) {
+    .ant-select-selection-overflow-item {
+      max-width: 50%;
+    }
+  }
+}
+</style>
--- a/src/views/material-center/components/raw-material/constants.ts
+++ b/src/views/material-center/components/raw-material/constants.ts
@ -44,6 +44,7 @@ export const INITIAL_QUERY = {
  // uid: '',
  type: RawMaterialType.All,
  created_at: [],
+  tag_ids: [],
  sort_column: undefined,
  sort_order: undefined,
 };