perf: 标签选择交互调整

src/styles/components/ant-select.scss

@@ -24,6 +24,11 @@
       font-weight: 400;
     }
   }
+
+  .ant-select-arrow {
+    color: #737478;
+    //font-size: 14px;
+  }
   &:focus,
   &-focused {
     .ant-select-selector {
@@ -72,10 +77,12 @@
   &.ant-select-multiple {
     .ant-select-selector {
       height: fit-content !important;
-      padding: 0 12px 0 4px !important;
+      padding: 0 28px 0 4px !important;
 
       .ant-select-selection-overflow-item {
+        margin-right: 4px;
         .ant-select-selection-item {
+          margin-right: 0;
           border-radius: 4px;
           background: #E6E6E8;
           border: none;

src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue

@@ -48,8 +48,12 @@ export default defineComponent({
       }
     };
 
-    const handleTagChange = (record) => {
+    const handleTagChange = (value, option, record) => {
-      console.log(record.tag_ids);
+      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;
-
+      const _target = tagData.value.find((item) => item.name === inputValue);
-      if (record.tag_ids.length >= 5) {
+      if (_target) {
-        message.warning('最多选择5个');
         return;
       }
 
-      const _target = tagData.value.find((item) => item.name === inputValue);
+      if (record.tag_ids.length >= 5) {
-      if (_target) {
+        message.warning('最多选择5个');
-        record.tag_ids = [...record.tag_ids, _target.id];
         return;
       }
 
@@ -355,17 +357,21 @@ export default defineComponent({
                 return (
                   <Select
                     disabled={record.uploadStatus === EnumUploadStatus.uploading}
-                    v-model:value={record.tag_ids}
+                    value={record.tag_ids}
-                    mode="tags"
+                    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>
                 );
               }}
             />

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%;
     }
   }
 

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}
+              value={form.value.tag_ids}
-              mode="tags"
+              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

src/views/material-center/components/raw-material/components/filter-block/index.vue

@@ -15,14 +15,31 @@
           </template>
         </Input>
       </div>
-<!--      <div class="filter-row-item">-->
+      <div class="filter-row-item">
-<!--        <span class="label">序号</span>-->
+        <span class="label">标签</span>
-<!--        <Input v-model:value="query.uid" class="!w-160px" placeholder="请输入序号" allowClear @change="handleSearch">-->
+        <Select
-<!--          <template #prefix>-->
+          v-model:value="query.tag_ids"
-<!--            <icon-search />-->
+          :field-names="{ label: 'name', value: 'id' }"
-<!--          </template>-->
+          :maxTagCount="1"
-<!--        </Input>-->
+          :options="tagData"
-<!--      </div>-->
+          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>

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,
 };