| | |
| | | <script lang="ts" setup> |
| | | import type { VxeTableGridOptions } from '#/adapter/vxe-table'; |
| | | import type { MdmItemApi } from '#/api/mdm/item'; |
| | | import type { MesMdItemTypeApi } from '#/api/mes/md/item/type'; |
| | | |
| | | import { ref } from 'vue'; |
| | | import { computed, ref } from 'vue'; |
| | | |
| | | import { confirm, Page, useVbenModal } from '#/packages/effects/common-ui/src'; |
| | | import { downloadFileFromBlobPart, isEmpty } from '#/packages/utils/src'; |
| | | |
| | | import { message, Tag } from 'ant-design-vue'; |
| | | import { message, Switch, Tag } from 'ant-design-vue'; |
| | | |
| | | import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; |
| | | import { |
| | |
| | | // exportItem, |
| | | getItemPage, |
| | | updateItemStatus, |
| | | updateItemSync, |
| | | } from '#/api/mdm/item'; |
| | | import { getItemTypeSimpleList } from '#/api/mes/md/item/type'; |
| | | import { $t } from '#/locales'; |
| | | |
| | | import { useGridColumns, useGridFormSchema, ITEM_TYPE_MAP, ITEM_TYPE_COLOR_MAP } from './data'; |
| | | import { useGridColumns, useGridFormSchema } from './data'; |
| | | import Form from './modules/form.vue'; |
| | | |
| | | defineOptions({ name: 'MdmItem' }); |
| | |
| | | destroyOnClose: true, |
| | | }); |
| | | |
| | | // 分类列表缓存 |
| | | const categoryList = ref<MesMdItemTypeApi.ItemType[]>([]); |
| | | |
| | | const TAG_COLORS = [ |
| | | 'green', |
| | | 'orange', |
| | | 'blue', |
| | | 'purple', |
| | | 'cyan', |
| | | 'magenta', |
| | | 'geekblue', |
| | | 'volcano', |
| | | 'gold', |
| | | 'lime', |
| | | ] as const; |
| | | |
| | | /** 分类ID → 颜色映射(基于分类在列表中的索引循环分配) */ |
| | | const categoryColorMap = computed(() => { |
| | | const map = new Map<number, string>(); |
| | | categoryList.value.forEach((item, index) => { |
| | | map.set(item.id!, TAG_COLORS[index % TAG_COLORS.length]!); |
| | | }); |
| | | return map; |
| | | }); |
| | | |
| | | /** 获取分类Tag颜色 */ |
| | | function getCategoryColor(categoryId?: number): string { |
| | | if (!categoryId) return ''; |
| | | return categoryColorMap.value.get(categoryId) || ''; |
| | | } |
| | | |
| | | /** 获取分类名称 */ |
| | | function getCategoryName(categoryId?: number) { |
| | | if (!categoryId || !categoryList.value.length) return ''; |
| | | const category = categoryList.value.find((item) => item.id === categoryId); |
| | | return category?.name || ''; |
| | | } |
| | | |
| | | /** 刷新表格 */ |
| | | function handleRefresh() { |
| | | gridApi.query(); |
| | |
| | | /** 导出表格 */ |
| | | // async function handleExport() { |
| | | // const data = await exportItem(await gridApi.formApi.getValues()); |
| | | // downloadFileFromBlobPart({ fileName: '物料.xls', source: data }); |
| | | // downloadFileFromBlobPart({ fileName: '品种.xls', source: data }); |
| | | // } |
| | | |
| | | /** 创建物料 */ |
| | | /** 创建品种 */ |
| | | function handleCreate() { |
| | | formModalApi.setData(null).open(); |
| | | } |
| | | |
| | | /** 编辑物料 */ |
| | | /** 编辑品种 */ |
| | | function handleEdit(row: MdmItemApi.Item) { |
| | | formModalApi.setData(row).open(); |
| | | } |
| | | |
| | | /** 删除物料 */ |
| | | /** 删除品种 */ |
| | | async function handleDelete(row: MdmItemApi.Item) { |
| | | const hideLoading = message.loading({ |
| | | content: $t('ui.actionMessage.deleting', [row.name]), |
| | |
| | | } |
| | | } |
| | | |
| | | /** 批量删除物料 */ |
| | | /** 批量删除品种 */ |
| | | async function handleDeleteBatch() { |
| | | await confirm($t('ui.actionMessage.deleteBatchConfirm')); |
| | | const hideLoading = message.loading({ |
| | |
| | | } |
| | | } |
| | | |
| | | const syncingId = ref<number | null>(null); |
| | | |
| | | /** 切换同步状态:关闭开关会从 MES 删除品种,需确认 */ |
| | | async function handleSyncChange(row: MdmItemApi.Item, checked: boolean) { |
| | | if (!checked) { |
| | | await confirm('关闭同步将从 MES 删除该品种及关联配置(BOM/SOP/SIP/批次配置),确认继续?'); |
| | | } |
| | | syncingId.value = row.id!; |
| | | try { |
| | | await updateItemSync(row.id!, checked); |
| | | message.success(checked ? '已同步到 MES' : '已取消同步'); |
| | | handleRefresh(); |
| | | } finally { |
| | | syncingId.value = null; |
| | | } |
| | | } |
| | | |
| | | const checkedIds = ref<number[]>([]); |
| | | function handleRowCheckboxChange({ |
| | | records, |
| | |
| | | proxyConfig: { |
| | | ajax: { |
| | | query: async ({ page }, formValues) => { |
| | | // 加载分类列表(用于显示分类名称) |
| | | if (!categoryList.value.length) { |
| | | try { |
| | | categoryList.value = await getItemTypeSimpleList(); |
| | | } catch { |
| | | categoryList.value = []; |
| | | } |
| | | } |
| | | return await getItemPage({ |
| | | pageNo: page.currentPage, |
| | | pageSize: page.pageSize, |
| | |
| | | <template> |
| | | <Page auto-content-height> |
| | | <FormModal @success="handleRefresh" /> |
| | | <Grid table-title="物料列表"> |
| | | <Grid table-title="品种列表"> |
| | | <template #toolbar-tools> |
| | | <TableAction |
| | | :actions="[ |
| | | { |
| | | label: $t('ui.actionTitle.create', ['物料']), |
| | | label: $t('ui.actionTitle.create', ['品种']), |
| | | type: 'primary', |
| | | icon: ACTION_ICON.ADD, |
| | | auth: ['mdm:item:create'], |
| | |
| | | ]" |
| | | /> |
| | | </template> |
| | | <template #itemType="{ row }"> |
| | | <Tag v-if="row.itemType === 1" color="green">原料</Tag> |
| | | <Tag v-else-if="row.itemType === 2" color="orange">半成品</Tag> |
| | | <Tag v-else-if="row.itemType === 3" color="blue">成品</Tag> |
| | | <Tag v-else-if="row.itemType === 4" color="purple">辅料</Tag> |
| | | <template #categoryName="{ row }"> |
| | | <Tag v-if="getCategoryColor(row.categoryId)" :color="getCategoryColor(row.categoryId)">{{ getCategoryName(row.categoryId) }}</Tag> |
| | | <span v-else>{{ getCategoryName(row.categoryId) }}</span> |
| | | </template> |
| | | <template #isBatchManaged="{ row }"> |
| | | <Tag v-if="row.isBatchManaged" color="success">是</Tag> |
| | | <Tag v-else>否</Tag> |
| | | </template> |
| | | <template #syncedMes="{ row }"> |
| | | <Switch |
| | | :checked="row.syncedMes" |
| | | :loading="syncingId === row.id" |
| | | checkedChildren="已同步" |
| | | unCheckedChildren="未同步" |
| | | @change="handleSyncChange(row, $event)" |
| | | /> |
| | | </template> |
| | | <template #actions="{ row }"> |
| | | <TableAction |
| | | :actions="[ |