| | |
| | | <script lang="ts" setup> |
| | | import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure'; |
| | | import type { MdmUnitApi } from '#/api/mdm/unit'; |
| | | |
| | | import { computed, onMounted, ref, watch } from 'vue'; |
| | | |
| | | import { Select, Tag, Tooltip } from 'ant-design-vue'; |
| | | import { Select, Tooltip } from 'ant-design-vue'; |
| | | |
| | | import { getUnitMeasureSimpleList } from '#/api/mes/md/unitmeasure'; |
| | | import { getUnitPage } from '#/api/mdm/unit'; |
| | | |
| | | defineOptions({ name: 'MdUnitMeasureSelect', inheritAttrs: false }); |
| | | |
| | |
| | | ); |
| | | |
| | | const emit = defineEmits<{ |
| | | change: [item: MesMdUnitMeasureApi.UnitMeasure | undefined]; |
| | | change: [item: MdmUnitApi.Unit | undefined]; |
| | | 'update:modelValue': [value: number | undefined]; |
| | | }>(); |
| | | |
| | | const allList = ref<MesMdUnitMeasureApi.UnitMeasure[]>([]); // 计量单位列表 |
| | | const filteredList = ref<MesMdUnitMeasureApi.UnitMeasure[]>([]); // 过滤后的计量单位列表 |
| | | const selectedItem = ref<MesMdUnitMeasureApi.UnitMeasure>(); // 当前选中计量单位 |
| | | const allList = ref<MdmUnitApi.Unit[]>([]); // 计量单位列表 |
| | | const filteredList = ref<MdmUnitApi.Unit[]>([]); // 过滤后的计量单位列表 |
| | | const selectedItem = ref<MdmUnitApi.Unit>(); // 当前选中计量单位 |
| | | |
| | | const selectValue = computed({ |
| | | // 选择器绑定值 |
| | | get: () => props.modelValue, |
| | | set: (value: number | undefined) => { |
| | | emit('update:modelValue', value); |
| | | set: (val: number | undefined) => { |
| | | emit('update:modelValue', val); |
| | | }, |
| | | }); |
| | | |
| | | /** 前端按名称和编码过滤计量单位 */ |
| | | function handleFilter(input: string, option: any) { |
| | | const keyword = input.toLowerCase(); |
| | | const item = option?.item as MesMdUnitMeasureApi.UnitMeasure | undefined; |
| | | // Ant Design Vue 4 中 Select.Option 的自定义属性不会传入 option 对象 |
| | | // 改为通过 option.value 从 allList 中查找对应的数据项 |
| | | const item = allList.value.find((i) => i.id === option?.value); |
| | | if (!item) return false; |
| | | return Boolean( |
| | | item?.name?.toLowerCase().includes(keyword) || |
| | | item?.code?.toLowerCase().includes(keyword), |
| | | item.name?.toLowerCase().includes(keyword) || |
| | | item.code?.toLowerCase().includes(keyword), |
| | | ); |
| | | } |
| | | |
| | |
| | | |
| | | watch( |
| | | () => props.modelValue, |
| | | (value) => { |
| | | syncSelectedItem(value); |
| | | (val) => { |
| | | syncSelectedItem(val); |
| | | }, |
| | | ); |
| | | |
| | | onMounted(async () => { |
| | | allList.value = await getUnitMeasureSimpleList(); |
| | | try { |
| | | const result = await getUnitPage({ pageNo: 1, pageSize: 100 }); |
| | | allList.value = result.list ?? []; |
| | | } catch { |
| | | allList.value = []; |
| | | } |
| | | filteredList.value = allList.value; |
| | | syncSelectedItem(props.modelValue); |
| | | }); |
| | |
| | | <Select.Option |
| | | v-for="item in filteredList" |
| | | :key="item.id" |
| | | :item="item" |
| | | :value="item.id" |
| | | > |
| | | <div class="flex items-center gap-2"> |
| | | <span>{{ item.name }}</span> |
| | | <Tag v-if="item.code" color="default">编号: {{ item.code }}</Tag> |
| | | </div> |
| | | {{ item.name }} |
| | | </Select.Option> |
| | | </Select> |
| | | </Tooltip> |