feat(mes): 迁移 barcode
YunaiV
parent
d245eca60d
commit
f27942c8f9
|
|
@ -0,0 +1,98 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
|
||||
// TODO @AI：这里的代码风格不对；
|
||||
/** 表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: { triggerFields: [''], show: () => false },
|
||||
},
|
||||
{
|
||||
fieldName: 'format',
|
||||
label: '条码格式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_FORMAT, 'number'),
|
||||
placeholder: '请选择条码格式',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['id'],
|
||||
componentProps: (values) => ({
|
||||
// 编辑时业务类型不允许变更 TODO @AI：这种简单的注释，可以考虑放到 disabled 后面；写到 style 里；
|
||||
disabled: !!values.id,
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'contentFormat',
|
||||
label: '内容格式模板',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '支持{BUSINESSCODE}占位符，如：WH-{BUSINESSCODE}',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'contentExample',
|
||||
label: '内容样例',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '如：WH-WH001',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'autoGenerateFlag',
|
||||
label: '自动生成',
|
||||
component: 'Switch',
|
||||
componentProps: {
|
||||
checkedChildren: '是',
|
||||
unCheckedChildren: '否',
|
||||
},
|
||||
rules: z.boolean().default(true),
|
||||
},
|
||||
{
|
||||
fieldName: 'defaultTemplate',
|
||||
label: '默认打印模板',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入打印模板',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
rules: z.number().default(CommonStatusEnum.ENABLE),
|
||||
},
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesWmBarcodeConfigApi } from '#/api/mes/wm/barcode/config';
|
||||
|
||||
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteBarcodeConfig,
|
||||
getBarcodeConfigPage,
|
||||
updateBarcodeConfig,
|
||||
} from '#/api/mes/wm/barcode/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useConfigGridColumns, useConfigGridFormSchema } from '../data';
|
||||
import ConfigForm from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: ConfigForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 自动生成开关变更 */
|
||||
async function handleAutoGenerateChange(
|
||||
row: MesWmBarcodeConfigApi.BarcodeConfig,
|
||||
): Promise<boolean> {
|
||||
const text = row.autoGenerateFlag ? '启用' : '停用';
|
||||
try {
|
||||
await confirm(`确认要${text}自动生成吗？`);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
await updateBarcodeConfig(row);
|
||||
message.success(`${text}成功`);
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建条码配置 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 编辑条码配置 */
|
||||
function handleEdit(row: MesWmBarcodeConfigApi.BarcodeConfig) {
|
||||
formModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 删除条码配置 */
|
||||
async function handleDelete(row: MesWmBarcodeConfigApi.BarcodeConfig) {
|
||||
const hideLoading = message.loading({
|
||||
content: $t('ui.actionMessage.deleting', [row.contentFormat || `#${row.id}`]),
|
||||
duration: 0,
|
||||
});
|
||||
try {
|
||||
await deleteBarcodeConfig(row.id!);
|
||||
message.success(
|
||||
$t('ui.actionMessage.deleteSuccess', [row.contentFormat || `#${row.id}`]),
|
||||
);
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useConfigGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useConfigGridColumns(handleAutoGenerateChange),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getBarcodeConfigPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MesWmBarcodeConfigApi.BarcodeConfig>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="【仓库】仓库与库区库位、条码赋码、SN码"
|
||||
url="https://doc.iocoder.cn/mes/wm/warehouse-setup/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="handleRefresh" />
|
||||
|
||||
<Grid table-title="条码配置列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['条码配置']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['mes:wm-barcode-config:create'],
|
||||
onClick: handleCreate,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['mes:wm-barcode-config:update'],
|
||||
onClick: handleEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mes:wm-barcode-config:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [
|
||||
row.contentFormat || `#${row.id}`,
|
||||
]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MesWmBarcodeConfigApi } from '#/api/mes/wm/barcode/config';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
createBarcodeConfig,
|
||||
getBarcodeConfig,
|
||||
updateBarcodeConfig,
|
||||
} from '#/api/mes/wm/barcode/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<MesWmBarcodeConfigApi.BarcodeConfig>();
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['条码配置'])
|
||||
: $t('ui.actionTitle.create', ['条码配置']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 130,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data =
|
||||
(await formApi.getValues()) as MesWmBarcodeConfigApi.BarcodeConfig;
|
||||
try {
|
||||
await (formData.value?.id
|
||||
? updateBarcodeConfig(data)
|
||||
: createBarcodeConfig(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MesWmBarcodeConfigApi.BarcodeConfig>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getBarcodeConfig(data.id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-2/5">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,599 @@
|
|||
import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
|
||||
import type { MesWmBarcodeConfigApi } from '#/api/mes/wm/barcode/config';
|
||||
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
import { generateBarcodeContent } from '#/api/mes/wm/barcode';
|
||||
import DvMachinerySelect from '#/views/mes/dv/machinery/components/dv-machinery-select.vue';
|
||||
import MdClientSelect from '#/views/mes/md/client/components/md-client-select.vue';
|
||||
import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
|
||||
import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
|
||||
import MdWorkshopSelect from '#/views/mes/md/workstation/components/md-workshop-select.vue';
|
||||
import MdWorkstationSelect from '#/views/mes/md/workstation/components/md-workstation-select.vue';
|
||||
import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
|
||||
import TmToolSelect from '#/views/mes/tm/tool/components/tm-tool-select.vue';
|
||||
import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
|
||||
|
||||
import WmMaterialStockSelect from './../materialstock/components/wm-material-stock-select.vue';
|
||||
import {
|
||||
WmWarehouseAreaSelect,
|
||||
WmWarehouseLocationSelect,
|
||||
WmWarehouseSelect,
|
||||
} from './../warehouse/components';
|
||||
|
||||
/** 业务对象选中后回填业务编码、业务名称、条码内容 */
|
||||
async function applyBizSelected(formApi: VbenFormApi, item: any) {
|
||||
const values = await formApi.getValues();
|
||||
const bizType = values.bizType as number | undefined;
|
||||
if (!item) {
|
||||
await formApi.setValues({
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
let bizCode: string | undefined;
|
||||
let bizName: string | undefined;
|
||||
if (bizType === BarcodeBizTypeEnum.STOCK) {
|
||||
bizCode = item.itemCode;
|
||||
bizName = item.itemName;
|
||||
} else {
|
||||
bizCode = item.code || item.username;
|
||||
bizName = item.name || item.nickname;
|
||||
}
|
||||
let content: string | undefined;
|
||||
if (bizType && bizCode) {
|
||||
try {
|
||||
content = await generateBarcodeContent(bizType, bizCode);
|
||||
} catch (error) {
|
||||
console.error('生成条码内容失败:', error);
|
||||
}
|
||||
}
|
||||
await formApi.setValues({ bizCode, bizName, content });
|
||||
}
|
||||
|
||||
/** 新增/修改条码的表单 */
|
||||
export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
|
||||
// TODO @AI：是不是可以去掉 onBizChange，直接搞个 handleBizTypeChange 函数？
|
||||
const onBizChange = (item: any) => {
|
||||
if (formApi) {
|
||||
void applyBizSelected(formApi, item);
|
||||
}
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
// 业务类型变更时清空业务字段
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
locationWarehouseId: undefined,
|
||||
areaWarehouseId: undefined,
|
||||
areaLocationId: undefined,
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
// ==================== 业务对象选择器（按 bizType 切换） ====================
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '仓库',
|
||||
component: markRaw(WmWarehouseSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WAREHOUSE,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'locationWarehouseId',
|
||||
label: '库区·仓库',
|
||||
component: markRaw(WmWarehouseSelect),
|
||||
componentProps: {
|
||||
placeholder: '请选择仓库',
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
}),
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.LOCATION,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '库区',
|
||||
component: markRaw(WmWarehouseLocationSelect),
|
||||
dependencies: {
|
||||
triggerFields: ['bizType', 'locationWarehouseId'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.LOCATION,
|
||||
componentProps: (values) => ({
|
||||
placeholder: '请选择库区',
|
||||
warehouseId: values.locationWarehouseId,
|
||||
onChange: onBizChange,
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'areaWarehouseId',
|
||||
label: '库位·仓库',
|
||||
component: markRaw(WmWarehouseSelect),
|
||||
componentProps: {
|
||||
placeholder: '请选择仓库',
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
areaLocationId: undefined,
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
}),
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.AREA,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'areaLocationId',
|
||||
label: '库位·库区',
|
||||
component: markRaw(WmWarehouseLocationSelect),
|
||||
dependencies: {
|
||||
triggerFields: ['bizType', 'areaWarehouseId'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.AREA,
|
||||
componentProps: (values) => ({
|
||||
placeholder: '请选择库区',
|
||||
warehouseId: values.areaWarehouseId,
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '库位',
|
||||
component: markRaw(WmWarehouseAreaSelect),
|
||||
dependencies: {
|
||||
triggerFields: ['bizType', 'areaLocationId'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.AREA,
|
||||
componentProps: (values) => ({
|
||||
placeholder: '请选择库位',
|
||||
locationId: values.areaLocationId,
|
||||
onChange: onBizChange,
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '工单',
|
||||
component: markRaw(ProWorkOrderSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WORKORDER,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '设备',
|
||||
component: markRaw(DvMachinerySelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.MACHINERY,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '产品物料',
|
||||
component: markRaw(MdItemSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.ITEM,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '供应商',
|
||||
component: markRaw(MdVendorSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.VENDOR,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '工作站',
|
||||
component: markRaw(MdWorkstationSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WORKSTATION,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '车间',
|
||||
component: markRaw(MdWorkshopSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WORKSHOP,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '客户',
|
||||
component: markRaw(MdClientSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.CLIENT,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '工具',
|
||||
component: markRaw(TmToolSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.TOOL,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '库存',
|
||||
component: markRaw(WmMaterialStockSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.STOCK,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '业务编号',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
class: '!w-full',
|
||||
min: 1,
|
||||
placeholder: '请输入业务编号',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) =>
|
||||
values.bizType !== undefined &&
|
||||
![
|
||||
BarcodeBizTypeEnum.AREA,
|
||||
BarcodeBizTypeEnum.CLIENT,
|
||||
BarcodeBizTypeEnum.ITEM,
|
||||
BarcodeBizTypeEnum.LOCATION,
|
||||
BarcodeBizTypeEnum.MACHINERY,
|
||||
BarcodeBizTypeEnum.STOCK,
|
||||
BarcodeBizTypeEnum.TOOL,
|
||||
BarcodeBizTypeEnum.VENDOR,
|
||||
BarcodeBizTypeEnum.WAREHOUSE,
|
||||
BarcodeBizTypeEnum.WORKORDER,
|
||||
BarcodeBizTypeEnum.WORKSHOP,
|
||||
BarcodeBizTypeEnum.WORKSTATION,
|
||||
].includes(values.bizType),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizCode',
|
||||
label: '业务编码',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
placeholder: '自动填充',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizName',
|
||||
label: '业务名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
placeholder: '自动填充',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'content',
|
||||
label: '条码内容',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入条码内容或自动生成',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
rules: z.number().default(CommonStatusEnum.ENABLE),
|
||||
},
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizCode',
|
||||
label: '业务编码',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入业务编码',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizName',
|
||||
label: '业务名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入业务名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'content',
|
||||
label: '条码内容',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入条码内容',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions<MesWmBarcodeApi.Barcode>['columns'] {
|
||||
return [
|
||||
{
|
||||
type: 'checkbox',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '条码',
|
||||
width: 180,
|
||||
slots: { default: 'barcode' },
|
||||
},
|
||||
{
|
||||
field: 'format',
|
||||
title: '条码格式',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_FORMAT },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
title: '业务类型',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '条码内容',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'bizCode',
|
||||
title: '业务编码',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
field: 'bizName',
|
||||
title: '业务名称',
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
width: 90,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 配置列表的搜索表单 */
|
||||
export function useConfigGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'format',
|
||||
label: '条码格式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_FORMAT, 'number'),
|
||||
placeholder: '请选择条码格式',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 配置列表的字段 */
|
||||
export function useConfigGridColumns(
|
||||
onAutoGenerateChange: (
|
||||
row: MesWmBarcodeConfigApi.BarcodeConfig,
|
||||
) => Promise<boolean>,
|
||||
): VxeTableGridOptions<MesWmBarcodeConfigApi.BarcodeConfig>['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'format',
|
||||
title: '条码格式',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_FORMAT },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
title: '业务类型',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'contentFormat',
|
||||
title: '内容格式',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'contentExample',
|
||||
title: '内容样例',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'defaultTemplate',
|
||||
title: '默认打印模板',
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
field: 'autoGenerateFlag',
|
||||
title: '自动生成',
|
||||
width: 100,
|
||||
cellRender: {
|
||||
name: 'CellSwitch',
|
||||
attrs: { beforeChange: onAutoGenerateChange },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
width: 90,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteBarcode,
|
||||
exportBarcode,
|
||||
getBarcodePage,
|
||||
} from '#/api/mes/wm/barcode';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { Barcode, BarcodeDetail } from './components';
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>();
|
||||
|
||||
// TODO @AI：这里的 checkedIds，是不是拿到 handleRowCheckboxChange 代码块里？更简洁一点？
|
||||
// TODO @AI：这里的代码风格，要和 system user index 保持一致，批量选择；
|
||||
/** 已选条码 ID */
|
||||
const checkedIds = ref<number[]>([]);
|
||||
|
||||
/** 处理勾选变化 */
|
||||
function handleRowCheckboxChange({
|
||||
records,
|
||||
}: {
|
||||
records: MesWmBarcodeApi.Barcode[];
|
||||
}) {
|
||||
checkedIds.value = records.map((row) => row.id!).filter(Boolean);
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建条码 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 编辑条码 */
|
||||
function handleEdit(row: MesWmBarcodeApi.Barcode) {
|
||||
formModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 删除条码 */
|
||||
async function handleDelete(row: MesWmBarcodeApi.Barcode) {
|
||||
const hideLoading = message.loading({
|
||||
content: $t('ui.actionMessage.deleting', [row.bizName || row.bizCode || '']),
|
||||
duration: 0,
|
||||
});
|
||||
try {
|
||||
await deleteBarcode(row.id!);
|
||||
message.success(
|
||||
$t('ui.actionMessage.deleteSuccess', [row.bizName || row.bizCode || '']),
|
||||
);
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/** 批量删除条码 */
|
||||
async function handleDeleteBatch() {
|
||||
const hideLoading = message.loading({
|
||||
content: $t('ui.actionMessage.deleting', [`${checkedIds.value.length} 条`]),
|
||||
duration: 0,
|
||||
});
|
||||
try {
|
||||
await Promise.all(checkedIds.value.map((id) => deleteBarcode(id)));
|
||||
message.success($t('ui.actionMessage.deleteSuccess', ['']));
|
||||
checkedIds.value = [];
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看条码 */
|
||||
function handleView(row: MesWmBarcodeApi.Barcode) {
|
||||
barcodeDetailRef.value?.open(row);
|
||||
}
|
||||
|
||||
/** 跳转条码配置 */
|
||||
function handleConfig() {
|
||||
router.push({ name: 'MesWmBarcodeConfig' });
|
||||
}
|
||||
|
||||
/** 导出表格 */
|
||||
async function handleExport() {
|
||||
const data = await exportBarcode(await gridApi.formApi.getValues());
|
||||
downloadFileFromBlobPart({ fileName: '条码清单.xls', source: data });
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getBarcodePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
height: 80,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MesWmBarcodeApi.Barcode>,
|
||||
gridEvents: {
|
||||
checkboxAll: handleRowCheckboxChange,
|
||||
checkboxChange: handleRowCheckboxChange,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="【仓库】仓库与库区库位、条码赋码、SN码"
|
||||
url="https://doc.iocoder.cn/mes/wm/warehouse-setup/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="handleRefresh" />
|
||||
<BarcodeDetail ref="barcodeDetailRef" />
|
||||
|
||||
<Grid table-title="条码列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['条码']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['mes:wm-barcode:create'],
|
||||
onClick: handleCreate,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.deleteBatch'),
|
||||
type: 'primary',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mes:wm-barcode:delete'],
|
||||
disabled: checkedIds.length === 0,
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [
|
||||
`${checkedIds.length} 条`,
|
||||
]),
|
||||
confirm: handleDeleteBatch,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '条码设置',
|
||||
type: 'primary',
|
||||
auth: ['mes:wm-barcode-config:query'],
|
||||
onClick: handleConfig,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['mes:wm-barcode:export'],
|
||||
onClick: handleExport,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #barcode="{ row }">
|
||||
<div v-if="row.content" class="flex justify-center">
|
||||
<Barcode
|
||||
:content="row.content"
|
||||
:format="row.format"
|
||||
:height="60"
|
||||
:width="140"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'link',
|
||||
auth: ['mes:wm-barcode:query'],
|
||||
onClick: handleView.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['mes:wm-barcode:update'],
|
||||
onClick: handleEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mes:wm-barcode:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [
|
||||
row.bizName || row.bizCode || '',
|
||||
]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { CommonStatusEnum } from '@vben/constants';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
createBarcode,
|
||||
getBarcode,
|
||||
updateBarcode,
|
||||
} from '#/api/mes/wm/barcode';
|
||||
import { getWarehouseArea } from '#/api/mes/wm/warehouse/area';
|
||||
import { getWarehouseLocation } from '#/api/mes/wm/warehouse/location';
|
||||
import { $t } from '#/locales';
|
||||
import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const formData = ref<MesWmBarcodeApi.Barcode>();
|
||||
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['条码'])
|
||||
: $t('ui.actionTitle.create', ['条码']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 110,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: [],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
/** 加载级联选择器的数据（编辑时回填上级仓库/库区） */
|
||||
async function loadCascadeData(data: MesWmBarcodeApi.Barcode) {
|
||||
if (!data.bizType || !data.bizId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (data.bizType === BarcodeBizTypeEnum.LOCATION) {
|
||||
const location = await getWarehouseLocation(data.bizId);
|
||||
if (location?.warehouseId) {
|
||||
await formApi.setFieldValue(
|
||||
'locationWarehouseId',
|
||||
location.warehouseId,
|
||||
);
|
||||
}
|
||||
} else if (data.bizType === BarcodeBizTypeEnum.AREA) {
|
||||
const area = await getWarehouseArea(data.bizId);
|
||||
await formApi.setValues({
|
||||
areaWarehouseId: area?.warehouseId,
|
||||
areaLocationId: area?.locationId,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载级联数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as MesWmBarcodeApi.Barcode;
|
||||
try {
|
||||
await (formData.value?.id
|
||||
? updateBarcode({ ...data, id: formData.value.id })
|
||||
: createBarcode(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
formApi.setState({ schema: useFormSchema(formApi) });
|
||||
await formApi.setValues({ status: CommonStatusEnum.ENABLE });
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MesWmBarcodeApi.Barcode>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getBarcode(data.id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
await loadCascadeData(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-1/2">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
|
||||
/** 表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
triggerFields: [''],
|
||||
show: () => false,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'format',
|
||||
label: '条码格式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_FORMAT, 'number'),
|
||||
placeholder: '请选择条码格式',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['id'],
|
||||
componentProps: (values) => ({
|
||||
// 编辑时业务类型不允许变更
|
||||
disabled: !!values.id,
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'contentFormat',
|
||||
label: '内容格式模板',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '支持{BUSINESSCODE}占位符，如：WH-{BUSINESSCODE}',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'contentExample',
|
||||
label: '内容样例',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '如：WH-WH001',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'autoGenerateFlag',
|
||||
label: '自动生成',
|
||||
component: 'Switch',
|
||||
componentProps: {
|
||||
activeText: '是',
|
||||
inactiveText: '否',
|
||||
inlinePrompt: true,
|
||||
},
|
||||
rules: z.boolean().default(true),
|
||||
},
|
||||
{
|
||||
fieldName: 'defaultTemplate',
|
||||
label: '默认打印模板',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入打印模板',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
rules: z.number().default(CommonStatusEnum.ENABLE),
|
||||
},
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesWmBarcodeConfigApi } from '#/api/mes/wm/barcode/config';
|
||||
|
||||
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElLoading, ElMessage } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteBarcodeConfig,
|
||||
getBarcodeConfigPage,
|
||||
updateBarcodeConfig,
|
||||
} from '#/api/mes/wm/barcode/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useConfigGridColumns, useConfigGridFormSchema } from '../data';
|
||||
import ConfigForm from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: ConfigForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 自动生成开关变更 */
|
||||
async function handleAutoGenerateChange(
|
||||
row: MesWmBarcodeConfigApi.BarcodeConfig,
|
||||
): Promise<boolean> {
|
||||
const text = row.autoGenerateFlag ? '启用' : '停用';
|
||||
try {
|
||||
await confirm(`确认要${text}自动生成吗？`);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
await updateBarcodeConfig(row);
|
||||
ElMessage.success(`${text}成功`);
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建条码配置 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 编辑条码配置 */
|
||||
function handleEdit(row: MesWmBarcodeConfigApi.BarcodeConfig) {
|
||||
formModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 删除条码配置 */
|
||||
async function handleDelete(row: MesWmBarcodeConfigApi.BarcodeConfig) {
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: $t('ui.actionMessage.deleting', [
|
||||
row.contentFormat || `#${row.id}`,
|
||||
]),
|
||||
});
|
||||
try {
|
||||
await deleteBarcodeConfig(row.id!);
|
||||
ElMessage.success(
|
||||
$t('ui.actionMessage.deleteSuccess', [
|
||||
row.contentFormat || `#${row.id}`,
|
||||
]),
|
||||
);
|
||||
handleRefresh();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useConfigGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useConfigGridColumns(handleAutoGenerateChange),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getBarcodeConfigPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MesWmBarcodeConfigApi.BarcodeConfig>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="【仓库】仓库与库区库位、条码赋码、SN码"
|
||||
url="https://doc.iocoder.cn/mes/wm/warehouse-setup/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="handleRefresh" />
|
||||
|
||||
<Grid table-title="条码配置列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['条码配置']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['mes:wm-barcode-config:create'],
|
||||
onClick: handleCreate,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['mes:wm-barcode-config:update'],
|
||||
onClick: handleEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'danger',
|
||||
link: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mes:wm-barcode-config:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [
|
||||
row.contentFormat || `#${row.id}`,
|
||||
]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MesWmBarcodeConfigApi } from '#/api/mes/wm/barcode/config';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
createBarcodeConfig,
|
||||
getBarcodeConfig,
|
||||
updateBarcodeConfig,
|
||||
} from '#/api/mes/wm/barcode/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<MesWmBarcodeConfigApi.BarcodeConfig>();
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['条码配置'])
|
||||
: $t('ui.actionTitle.create', ['条码配置']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 130,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data =
|
||||
(await formApi.getValues()) as MesWmBarcodeConfigApi.BarcodeConfig;
|
||||
try {
|
||||
await (formData.value?.id
|
||||
? updateBarcodeConfig(data)
|
||||
: createBarcodeConfig(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MesWmBarcodeConfigApi.BarcodeConfig>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getBarcodeConfig(data.id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-2/5">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,599 @@
|
|||
import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
|
||||
import type { MesWmBarcodeConfigApi } from '#/api/mes/wm/barcode/config';
|
||||
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
import { generateBarcodeContent } from '#/api/mes/wm/barcode';
|
||||
import DvMachinerySelect from '#/views/mes/dv/machinery/components/dv-machinery-select.vue';
|
||||
import MdClientSelect from '#/views/mes/md/client/components/md-client-select.vue';
|
||||
import MdItemSelect from '#/views/mes/md/item/components/md-item-select.vue';
|
||||
import MdVendorSelect from '#/views/mes/md/vendor/components/md-vendor-select.vue';
|
||||
import MdWorkshopSelect from '#/views/mes/md/workstation/components/md-workshop-select.vue';
|
||||
import MdWorkstationSelect from '#/views/mes/md/workstation/components/md-workstation-select.vue';
|
||||
import ProWorkOrderSelect from '#/views/mes/pro/workorder/components/pro-work-order-select.vue';
|
||||
import TmToolSelect from '#/views/mes/tm/tool/components/tm-tool-select.vue';
|
||||
import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
|
||||
|
||||
import WmMaterialStockSelect from './../materialstock/components/wm-material-stock-select.vue';
|
||||
import {
|
||||
WmWarehouseAreaSelect,
|
||||
WmWarehouseLocationSelect,
|
||||
WmWarehouseSelect,
|
||||
} from './../warehouse/components';
|
||||
|
||||
/** 业务对象选中后回填业务编码、业务名称、条码内容 */
|
||||
async function applyBizSelected(formApi: VbenFormApi, item: any) {
|
||||
const values = await formApi.getValues();
|
||||
const bizType = values.bizType as number | undefined;
|
||||
if (!item) {
|
||||
await formApi.setValues({
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
let bizCode: string | undefined;
|
||||
let bizName: string | undefined;
|
||||
if (bizType === BarcodeBizTypeEnum.STOCK) {
|
||||
bizCode = item.itemCode;
|
||||
bizName = item.itemName;
|
||||
} else {
|
||||
bizCode = item.code || item.username;
|
||||
bizName = item.name || item.nickname;
|
||||
}
|
||||
let content: string | undefined;
|
||||
if (bizType && bizCode) {
|
||||
try {
|
||||
content = await generateBarcodeContent(bizType, bizCode);
|
||||
} catch (error) {
|
||||
console.error('生成条码内容失败:', error);
|
||||
}
|
||||
}
|
||||
await formApi.setValues({ bizCode, bizName, content });
|
||||
}
|
||||
|
||||
/** 新增/修改条码的表单 */
|
||||
export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
|
||||
const onBizChange = (item: any) => {
|
||||
if (formApi) {
|
||||
void applyBizSelected(formApi, item);
|
||||
}
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
// 业务类型变更时清空业务字段
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
locationWarehouseId: undefined,
|
||||
areaWarehouseId: undefined,
|
||||
areaLocationId: undefined,
|
||||
}),
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
// ==================== 业务对象选择器（按 bizType 切换） ====================
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '仓库',
|
||||
component: markRaw(WmWarehouseSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WAREHOUSE,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'locationWarehouseId',
|
||||
label: '库区·仓库',
|
||||
component: markRaw(WmWarehouseSelect),
|
||||
componentProps: {
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
}),
|
||||
placeholder: '请选择仓库',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.LOCATION,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '库区',
|
||||
component: markRaw(WmWarehouseLocationSelect),
|
||||
dependencies: {
|
||||
triggerFields: ['bizType', 'locationWarehouseId'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.LOCATION,
|
||||
componentProps: (values) => ({
|
||||
onChange: onBizChange,
|
||||
placeholder: '请选择库区',
|
||||
warehouseId: values.locationWarehouseId,
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'areaWarehouseId',
|
||||
label: '库位·仓库',
|
||||
component: markRaw(WmWarehouseSelect),
|
||||
componentProps: {
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
areaLocationId: undefined,
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
}),
|
||||
placeholder: '请选择仓库',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.AREA,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'areaLocationId',
|
||||
label: '库位·库区',
|
||||
component: markRaw(WmWarehouseLocationSelect),
|
||||
dependencies: {
|
||||
triggerFields: ['bizType', 'areaWarehouseId'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.AREA,
|
||||
componentProps: (values) => ({
|
||||
onChange: () =>
|
||||
formApi?.setValues({
|
||||
bizId: undefined,
|
||||
bizCode: undefined,
|
||||
bizName: undefined,
|
||||
content: undefined,
|
||||
}),
|
||||
placeholder: '请选择库区',
|
||||
warehouseId: values.areaWarehouseId,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '库位',
|
||||
component: markRaw(WmWarehouseAreaSelect),
|
||||
dependencies: {
|
||||
triggerFields: ['bizType', 'areaLocationId'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.AREA,
|
||||
componentProps: (values) => ({
|
||||
locationId: values.areaLocationId,
|
||||
onChange: onBizChange,
|
||||
placeholder: '请选择库位',
|
||||
}),
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '工单',
|
||||
component: markRaw(ProWorkOrderSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WORKORDER,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '设备',
|
||||
component: markRaw(DvMachinerySelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.MACHINERY,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '产品物料',
|
||||
component: markRaw(MdItemSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.ITEM,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '供应商',
|
||||
component: markRaw(MdVendorSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.VENDOR,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '工作站',
|
||||
component: markRaw(MdWorkstationSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WORKSTATION,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '车间',
|
||||
component: markRaw(MdWorkshopSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.WORKSHOP,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '客户',
|
||||
component: markRaw(MdClientSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.CLIENT,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '工具',
|
||||
component: markRaw(TmToolSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.TOOL,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '库存',
|
||||
component: markRaw(WmMaterialStockSelect),
|
||||
componentProps: {
|
||||
onChange: onBizChange,
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) => values.bizType === BarcodeBizTypeEnum.STOCK,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'bizId',
|
||||
label: '业务编号',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
class: '!w-full',
|
||||
controlsPosition: 'right',
|
||||
min: 1,
|
||||
placeholder: '请输入业务编号',
|
||||
},
|
||||
dependencies: {
|
||||
triggerFields: ['bizType'],
|
||||
show: (values) =>
|
||||
values.bizType !== undefined &&
|
||||
![
|
||||
BarcodeBizTypeEnum.AREA,
|
||||
BarcodeBizTypeEnum.CLIENT,
|
||||
BarcodeBizTypeEnum.ITEM,
|
||||
BarcodeBizTypeEnum.LOCATION,
|
||||
BarcodeBizTypeEnum.MACHINERY,
|
||||
BarcodeBizTypeEnum.STOCK,
|
||||
BarcodeBizTypeEnum.TOOL,
|
||||
BarcodeBizTypeEnum.VENDOR,
|
||||
BarcodeBizTypeEnum.WAREHOUSE,
|
||||
BarcodeBizTypeEnum.WORKORDER,
|
||||
BarcodeBizTypeEnum.WORKSHOP,
|
||||
BarcodeBizTypeEnum.WORKSTATION,
|
||||
].includes(values.bizType),
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizCode',
|
||||
label: '业务编码',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
placeholder: '自动填充',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizName',
|
||||
label: '业务名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
placeholder: '自动填充',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'content',
|
||||
label: '条码内容',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入条码内容或自动生成',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
},
|
||||
rules: z.number().default(CommonStatusEnum.ENABLE),
|
||||
},
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
rows: 2,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizCode',
|
||||
label: '业务编码',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请输入业务编码',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizName',
|
||||
label: '业务名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请输入业务名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'content',
|
||||
label: '条码内容',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请输入条码内容',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions<MesWmBarcodeApi.Barcode>['columns'] {
|
||||
return [
|
||||
{
|
||||
type: 'checkbox',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '条码',
|
||||
width: 180,
|
||||
slots: { default: 'barcode' },
|
||||
},
|
||||
{
|
||||
field: 'format',
|
||||
title: '条码格式',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_FORMAT },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
title: '业务类型',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
title: '条码内容',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'bizCode',
|
||||
title: '业务编码',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
field: 'bizName',
|
||||
title: '业务名称',
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
width: 90,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 配置列表的搜索表单 */
|
||||
export function useConfigGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'format',
|
||||
label: '条码格式',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_FORMAT, 'number'),
|
||||
placeholder: '请选择条码格式',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: getDictOptions(DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE, 'number'),
|
||||
placeholder: '请选择业务类型',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 配置列表的字段 */
|
||||
export function useConfigGridColumns(
|
||||
onAutoGenerateChange: (
|
||||
row: MesWmBarcodeConfigApi.BarcodeConfig,
|
||||
) => Promise<boolean>,
|
||||
): VxeTableGridOptions<MesWmBarcodeConfigApi.BarcodeConfig>['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'format',
|
||||
title: '条码格式',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_FORMAT },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
title: '业务类型',
|
||||
width: 110,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'contentFormat',
|
||||
title: '内容格式',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'contentExample',
|
||||
title: '内容样例',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'defaultTemplate',
|
||||
title: '默认打印模板',
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
field: 'autoGenerateFlag',
|
||||
title: '自动生成',
|
||||
width: 100,
|
||||
cellRender: {
|
||||
name: 'CellSwitch',
|
||||
attrs: { beforeChange: onAutoGenerateChange },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
width: 90,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
width: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { downloadFileFromBlobPart } from '@vben/utils';
|
||||
|
||||
import { ElLoading, ElMessage } from 'element-plus';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteBarcode,
|
||||
exportBarcode,
|
||||
getBarcodePage,
|
||||
} from '#/api/mes/wm/barcode';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { Barcode, BarcodeDetail } from './components';
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>();
|
||||
|
||||
/** 已选条码 ID */
|
||||
const checkedIds = ref<number[]>([]);
|
||||
|
||||
/** 处理勾选变化 */
|
||||
function handleRowCheckboxChange({
|
||||
records,
|
||||
}: {
|
||||
records: MesWmBarcodeApi.Barcode[];
|
||||
}) {
|
||||
checkedIds.value = records.map((row) => row.id!).filter(Boolean);
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 创建条码 */
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/** 编辑条码 */
|
||||
function handleEdit(row: MesWmBarcodeApi.Barcode) {
|
||||
formModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
/** 删除条码 */
|
||||
async function handleDelete(row: MesWmBarcodeApi.Barcode) {
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: $t('ui.actionMessage.deleting', [row.bizName || row.bizCode || '']),
|
||||
});
|
||||
try {
|
||||
await deleteBarcode(row.id!);
|
||||
ElMessage.success(
|
||||
$t('ui.actionMessage.deleteSuccess', [row.bizName || row.bizCode || '']),
|
||||
);
|
||||
handleRefresh();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 批量删除条码 */
|
||||
async function handleDeleteBatch() {
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: $t('ui.actionMessage.deleting', [`${checkedIds.value.length} 条`]),
|
||||
});
|
||||
try {
|
||||
await Promise.all(checkedIds.value.map((id) => deleteBarcode(id)));
|
||||
ElMessage.success($t('ui.actionMessage.deleteSuccess', ['']));
|
||||
checkedIds.value = [];
|
||||
handleRefresh();
|
||||
} finally {
|
||||
loadingInstance.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看条码 */
|
||||
function handleView(row: MesWmBarcodeApi.Barcode) {
|
||||
barcodeDetailRef.value?.open(row);
|
||||
}
|
||||
|
||||
/** 跳转条码配置 */
|
||||
function handleConfig() {
|
||||
router.push({ name: 'MesWmBarcodeConfig' });
|
||||
}
|
||||
|
||||
/** 导出表格 */
|
||||
async function handleExport() {
|
||||
const data = await exportBarcode(await gridApi.formApi.getValues());
|
||||
downloadFileFromBlobPart({ fileName: '条码清单.xls', source: data });
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getBarcodePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
height: 80,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<MesWmBarcodeApi.Barcode>,
|
||||
gridEvents: {
|
||||
checkboxAll: handleRowCheckboxChange,
|
||||
checkboxChange: handleRowCheckboxChange,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<template #doc>
|
||||
<DocAlert
|
||||
title="【仓库】仓库与库区库位、条码赋码、SN码"
|
||||
url="https://doc.iocoder.cn/mes/wm/warehouse-setup/"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<FormModal @success="handleRefresh" />
|
||||
<BarcodeDetail ref="barcodeDetailRef" />
|
||||
|
||||
<Grid table-title="条码列表">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['条码']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['mes:wm-barcode:create'],
|
||||
onClick: handleCreate,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.deleteBatch'),
|
||||
type: 'danger',
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mes:wm-barcode:delete'],
|
||||
disabled: checkedIds.length === 0,
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [
|
||||
`${checkedIds.length} 条`,
|
||||
]),
|
||||
confirm: handleDeleteBatch,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '条码设置',
|
||||
type: 'primary',
|
||||
auth: ['mes:wm-barcode-config:query'],
|
||||
onClick: handleConfig,
|
||||
},
|
||||
{
|
||||
label: $t('ui.actionTitle.export'),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.DOWNLOAD,
|
||||
auth: ['mes:wm-barcode:export'],
|
||||
onClick: handleExport,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #barcode="{ row }">
|
||||
<div v-if="row.content" class="flex justify-center">
|
||||
<Barcode
|
||||
:content="row.content"
|
||||
:format="row.format"
|
||||
:height="60"
|
||||
:width="140"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.detail'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
auth: ['mes:wm-barcode:query'],
|
||||
onClick: handleView.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'primary',
|
||||
link: true,
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['mes:wm-barcode:update'],
|
||||
onClick: handleEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'danger',
|
||||
link: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['mes:wm-barcode:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [
|
||||
row.bizName || row.bizCode || '',
|
||||
]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { CommonStatusEnum } from '@vben/constants';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
createBarcode,
|
||||
getBarcode,
|
||||
updateBarcode,
|
||||
} from '#/api/mes/wm/barcode';
|
||||
import { getWarehouseArea } from '#/api/mes/wm/warehouse/area';
|
||||
import { getWarehouseLocation } from '#/api/mes/wm/warehouse/location';
|
||||
import { $t } from '#/locales';
|
||||
import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const formData = ref<MesWmBarcodeApi.Barcode>();
|
||||
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['条码'])
|
||||
: $t('ui.actionTitle.create', ['条码']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 110,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: [],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
/** 加载级联选择器的数据（编辑时回填上级仓库/库区） */
|
||||
async function loadCascadeData(data: MesWmBarcodeApi.Barcode) {
|
||||
if (!data.bizType || !data.bizId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (data.bizType === BarcodeBizTypeEnum.LOCATION) {
|
||||
const location = await getWarehouseLocation(data.bizId);
|
||||
if (location?.warehouseId) {
|
||||
await formApi.setFieldValue(
|
||||
'locationWarehouseId',
|
||||
location.warehouseId,
|
||||
);
|
||||
}
|
||||
} else if (data.bizType === BarcodeBizTypeEnum.AREA) {
|
||||
const area = await getWarehouseArea(data.bizId);
|
||||
await formApi.setValues({
|
||||
areaWarehouseId: area?.warehouseId,
|
||||
areaLocationId: area?.locationId,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载级联数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data = (await formApi.getValues()) as MesWmBarcodeApi.Barcode;
|
||||
try {
|
||||
await (formData.value?.id
|
||||
? updateBarcode({ ...data, id: formData.value.id })
|
||||
: createBarcode(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
formApi.setState({ schema: useFormSchema(formApi) });
|
||||
await formApi.setValues({ status: CommonStatusEnum.ENABLE });
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MesWmBarcodeApi.Barcode>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getBarcode(data.id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
await loadCascadeData(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-1/2">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
Loading…
Reference in New Issue