yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(mes)：优化 review - 工序定义（pro_process）、工艺路线（pro_route）

pull/349/head
YunaiV 2026-05-25 18:10:29 +08:00
parent 4949ed1c07
commit adb57ed364
19 changed files with 359 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/src/views/mes/pro/process/data.ts
View File

@ -40,7 +40,6 @@ export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
{
type: 'default',
onClick: async () => {
// TODO @AI：需要 try catch 么？感觉直接去掉也可以？
try {
const code = await generateAutoCode(
MesAutoCodeRuleCode.PRO_PROCESS_CODE,

15
apps/web-antd/src/views/mes/pro/process/modules/content-list.vue
View File

@ -19,10 +19,11 @@ import { useContentGridColumns } from '../data';
import ContentForm from './content-form.vue';
const props = defineProps<{
formMode: 'create' | 'detail' | 'update';
processId: number;
readonly?: boolean;
}>();
const isEditable = ref(props.formMode !== 'detail'); // 是否可编辑
const list = ref<MesProProcessContentApi.ProcessContent[]>([]);
const [ContentFormModal, contentFormModalApi] = useVbenModal({
@ -60,11 +61,7 @@ async function getList() {
/** 新增工序步骤 */
function handleCreate() {
// TODO @AI：是不是可以直接 max 然后 || 0；
const maxSort =
list.value.length > 0
? Math.max(...list.value.map((item) => item.sort || 0))
: 0;
const maxSort = Math.max(0, ...list.value.map((item) => item.sort || 0));
contentFormModalApi
.setData({ maxSort, processId: props.processId })
.open();
@ -95,7 +92,7 @@ watch(
<template>
<ContentFormModal @success="getList" />
<div v-if="!readonly" class="mb-3 flex items-center justify-start">
<div v-if="isEditable" class="mb-3 flex items-center justify-start">
<TableAction
:actions="[
{
@ -113,14 +110,14 @@ watch(
{
label: $t('common.edit'),
type: 'link',
ifShow: () => !readonly,
ifShow: () => isEditable,
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
ifShow: () => !readonly,
ifShow: () => isEditable,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', ['工序步骤']),
confirm: handleDelete.bind(null, row),

4
apps/web-antd/src/views/mes/pro/process/modules/form.vue
View File

@ -22,7 +22,7 @@ type FormMode = 'create' | 'detail' | 'update';
const emit = defineEmits(['success']);
const formMode = ref<FormMode>('create'); // 表单模式
const formData = ref<MesProProcessApi.Process>(); // 当前编辑/查看的工序数据
const formData = ref<MesProProcessApi.Process>();
const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
@ -110,7 +110,7 @@ const processId = computed(() => formData.value?.id);
<template v-if="processId">
<Divider class="!my-3" orientation="left">操作步骤</Divider>
<div class="mx-4">
<ContentList :process-id="processId" :readonly="isDetail" />
<ContentList :form-mode="formMode" :process-id="processId" />
</div>
</template>
</Modal>

2
apps/web-antd/src/views/mes/pro/route/modules/bom-form.vue
View File

@ -17,7 +17,7 @@ import { $t } from '#/locales';
import { useRouteProductBomFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MesProRouteProductBomApi.RouteProductBom>(); // 当前编辑的 BOM 数据
const formData = ref<MesProRouteProductBomApi.RouteProductBom>();
const productId = ref<number>(0); // 当前产品物料编号，供 BOM 选择器筛选可用 BOM
const getTitle = computed(() =>
formData.value?.id

20
apps/web-antd/src/views/mes/pro/route/modules/form.vue
View File

@ -8,11 +8,7 @@ import { useVbenModal } from '@vben/common-ui';
import { message, TabPane, Tabs } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createRoute,
getRoute,
updateRoute,
} from '#/api/mes/pro/route';
import { createRoute, getRoute, updateRoute } from '#/api/mes/pro/route';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -22,11 +18,11 @@ import ProductList from './product-list.vue';
type FormMode = 'create' | 'detail' | 'update';
const emit = defineEmits(['success']);
const formMode = ref<FormMode>('create');
const subTab = ref('process');
const formMode = ref<FormMode>('create'); // 表单模式
const subTab = ref('process'); // 当前激活的子表 Tab
const formData = ref<MesProRouteApi.Route>();
const isDetail = computed(() => formMode.value === 'detail');
const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
if (formMode.value === 'detail') {
return $t('ui.actionTitle.detail', ['工艺路线']);
@ -48,10 +44,9 @@ const [Form, formApi] = useVbenForm({
wrapperClass: 'grid-cols-2',
});
// TODO @AI：注释风格，是不是和别的没对齐
/** 表单 schema 需要 formApi 引用（生成编码按钮），所以通过 setState 设置 schema */
formApi.setState({ schema: useFormSchema(formApi) });
// TODO @AI：注释风格，是不是和别的没对齐
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (isDetail.value) {
@ -63,9 +58,11 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MesProRouteApi.Route;
try {
if (formMode.value === 'create') {
// 新增成功后切到编辑模式，方便继续维护组成工序、关联产品
const id = await createRoute(data);
formData.value = { ...data, id };
await formApi.setFieldValue('id', id);
@ -87,6 +84,7 @@ const [Modal, modalApi] = useVbenModal({
}
await formApi.resetForm();
subTab.value = 'process';
// 加载数据
const data = modalApi.getData<{ id?: number; type?: FormMode }>();
formMode.value = data?.type ?? 'create';
formApi.setDisabled(formMode.value === 'detail');
@ -97,6 +95,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
formData.value = await getRoute(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
@ -108,6 +107,7 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal :title="getTitle" class="w-4/5">
<Form class="mx-4" />
<!-- 编辑/详情模式下展示子表 Tab，新增模式下隐藏 -->
<Tabs
v-if="formMode !== 'create' && formData?.id"
v-model:active-key="subTab"

18
apps/web-antd/src/views/mes/pro/route/modules/process-form.vue
View File

@ -12,6 +12,7 @@ import { useVbenForm } from '#/adapter/form';
import { getProcessSimpleList } from '#/api/mes/pro/process';
import {
createRouteProcess,
getRouteProcess,
updateRouteProcess,
} from '#/api/mes/pro/route/process';
import { $t } from '#/locales';
@ -48,7 +49,6 @@ async function loadSchema(): Promise<VbenFormSchema[]> {
return useRouteProcessFormSchema(options);
}
// TODO @AI：注释风格，是不是和别的没对齐
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@ -56,12 +56,14 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MesProRouteProcessApi.RouteProcess;
try {
await (formData.value?.id
? updateRouteProcess(data)
: createRouteProcess(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@ -76,22 +78,24 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
try {
// 工序下拉依赖远程数据，schema 在弹窗打开时再生成
const schema = await loadSchema();
formApi.setState({ schema });
await formApi.resetForm();
} finally {
modalApi.unlock();
}
// 加载数据
const data = modalApi.getData<{
id?: number;
maxSort?: number;
routeId: number;
row?: MesProRouteProcessApi.RouteProcess;
}>();
if (!data) {
return;
}
if (!data.id) {
// 新增时，默认序号 = maxSort + 1，并给一个默认甘特图颜色
await formApi.setValues({
colorCode: '#00AEF3',
routeId: data.routeId,
@ -99,9 +103,13 @@ const [Modal, modalApi] = useVbenModal({
});
return;
}
if (data.row) {
formData.value = data.row;
await formApi.setValues(data.row);
modalApi.lock();
try {
formData.value = await getRouteProcess(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});

19
apps/web-antd/src/views/mes/pro/route/modules/process-list.vue
View File

@ -23,8 +23,8 @@ const props = defineProps<{
routeId: number;
}>();
const isEditable = ref(props.formMode !== 'detail');
const list = ref<MesProRouteProcessApi.RouteProcess[]>([]);
const isEditable = ref(props.formMode !== 'detail'); // 是否可编辑
const list = ref<MesProRouteProcessApi.RouteProcess[]>([]); // 工艺路线工序列表
const [ProcessFormModal, processFormModalApi] = useVbenModal({
connectedComponent: ProcessForm,
@ -45,7 +45,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<MesProRouteProcessApi.RouteProcess>,
});
// TODO @AI：注释风格，是不是和别的没对齐
/** 加载工艺路线工序列表 */
async function getList() {
gridApi.setLoading(true);
try {
@ -56,21 +56,18 @@ async function getList() {
}
}
// TODO @AI：注释风格，是不是和别的没对齐
/** 新增工艺路线工序 */
function handleCreate() {
const maxSort =
list.value.length > 0
? Math.max(...list.value.map((item) => item.sort || 0))
: 0;
const maxSort = Math.max(0, ...list.value.map((item) => item.sort || 0));
processFormModalApi.setData({ maxSort, routeId: props.routeId }).open();
}
// TODO @AI：注释风格，是不是和别的没对齐
/** 编辑工艺路线工序 */
function handleEdit(row: MesProRouteProcessApi.RouteProcess) {
processFormModalApi.setData({ id: row.id, routeId: props.routeId, row }).open();
processFormModalApi.setData({ id: row.id, routeId: props.routeId }).open();
}
// TODO @AI：注释风格，是不是和别的没对齐
/** 删除工艺路线工序 */
async function handleDelete(row: MesProRouteProcessApi.RouteProcess) {
await deleteRouteProcess(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', ['工艺路线工序']));

34
apps/web-antd/src/views/mes/pro/route/modules/product-bom-list.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProRouteProcessApi } from '#/api/mes/pro/route/process';
import type { MesProRouteProductBomApi } from '#/api/mes/pro/route/productbom';
import { ref, watch } from 'vue';
@ -25,12 +26,9 @@ const props = defineProps<{
routeId: number;
}>();
// TODO @AI：const 的尾注释？别的 vue 文件也看看，遵守 agents md 里说的。
const processOptions = ref<
Array<{ processId: number; processName?: string }>
>([]); // TODO @AI：是不是不用转换，vue 那直接处理就好了；
const activeProcessId = ref<string>(''); // TODO @AI：这个好像是 number？看看 vue3 + ep 里的代码。
const list = ref<MesProRouteProductBomApi.RouteProductBom[]>([]);
const processList = ref<MesProRouteProcessApi.RouteProcess[]>([]); // 工序列表（用于 Tab）
const activeProcessId = ref<number>(); // 当前选中的工序 Tab
const list = ref<MesProRouteProductBomApi.RouteProductBom[]>([]); // 当前工序下的 BOM 列表
const [BomFormModal, bomFormModalApi] = useVbenModal({
connectedComponent: BomForm,
@ -53,16 +51,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
/** 加载路线下的工序列表，用于工序 Tab */
async function loadProcessList() {
const data = await getRouteProcessListByRoute(props.routeId);
processOptions.value = (data || []).map((item) => ({
processId: item.processId!,
processName: item.processName,
}));
if (processOptions.value.length > 0) {
activeProcessId.value = String(processOptions.value[0]!.processId);
processList.value = (await getRouteProcessListByRoute(props.routeId)) || [];
if (processList.value.length > 0) {
activeProcessId.value = processList.value[0]!.processId;
await getList();
} else {
activeProcessId.value = '';
activeProcessId.value = undefined;
list.value = [];
gridApi.setGridOptions({ data: list.value });
}
@ -76,7 +70,7 @@ async function getList() {
gridApi.setLoading(true);
try {
list.value = await getRouteProductBomList({
processId: Number(activeProcessId.value),
processId: activeProcessId.value,
productId: props.productId,
routeId: props.routeId,
});
@ -94,7 +88,7 @@ function handleCreate() {
}
bomFormModalApi
.setData({
processId: Number(activeProcessId.value),
processId: activeProcessId.value,
productId: props.productId,
routeId: props.routeId,
})
@ -105,10 +99,10 @@ function handleCreate() {
function handleEdit(row: MesProRouteProductBomApi.RouteProductBom) {
bomFormModalApi
.setData({
processId: Number(activeProcessId.value),
id: row.id,
processId: activeProcessId.value!,
productId: props.productId,
routeId: props.routeId,
row,
})
.open();
}
@ -135,8 +129,8 @@ watch(
<BomFormModal @success="getList" />
<Tabs v-model:active-key="activeProcessId" @change="getList">
<TabPane
v-for="item in processOptions"
:key="String(item.processId)"
v-for="item in processList"
:key="item.processId"
:tab="item.processName"
/>
</Tabs>

25
apps/web-antd/src/views/mes/pro/route/modules/product-form.vue
View File

@ -10,6 +10,7 @@ import { Divider, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createRouteProduct,
getRouteProduct,
updateRouteProduct,
} from '#/api/mes/pro/route/product';
import { $t } from '#/locales';
@ -18,7 +19,7 @@ import { useRouteProductFormSchema } from '../data';
import ProductBomList from './product-bom-list.vue';
const emit = defineEmits(['success']);
const formData = ref<MesProRouteProductApi.RouteProduct>(); // 当前编辑/查看的产品数据
const formData = ref<MesProRouteProductApi.RouteProduct>();
const getTitle = computed(() =>
formData.value?.id
? $t('ui.actionTitle.edit', ['工艺路线产品'])
@ -51,7 +52,6 @@ const [Form, formApi] = useVbenForm({
});
const [Modal, modalApi] = useVbenModal({
// TODO @AI：注释风格，是不是和别的没对齐
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
@ -64,7 +64,10 @@ const [Modal, modalApi] = useVbenModal({
try {
if (formData.value?.id) {
await updateRouteProduct(data);
// 用最新表单值同步 formData，确保产品 BOM 子表绑定的 itemId 与表单一致
formData.value = { ...formData.value, ...data };
} else {
// 新增成功后切换到编辑模式，方便继续维护产品 BOM
const id = await createRouteProduct(data);
formData.value = { ...data, id };
await formApi.setFieldValue('id', id);
@ -85,18 +88,22 @@ const [Modal, modalApi] = useVbenModal({
const data = modalApi.getData<{
id?: number;
routeId: number;
row?: MesProRouteProductApi.RouteProduct;
}>();
if (!data) {
return;
}
if (data.row) {
formData.value = data.row;
// 设置到 values
await formApi.setValues(data.row);
if (!data.id) {
await formApi.setValues({ routeId: data.routeId });
return;
}
await formApi.setValues({ routeId: data.routeId });
modalApi.lock();
try {
formData.value = await getRouteProduct(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
@ -104,7 +111,7 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal :title="getTitle" class="w-3/5">
<Form class="mx-4" />
<!-- 编辑/详情模式下展示产品 BOM 子表，新增模式下隐藏 -->
<!-- 编辑模式下展示产品 BOM 子表，新增模式下隐藏 -->
<template v-if="formData?.id && formData?.itemId">
<Divider class="!my-3" orientation="left">产品 BOM 配置</Divider>
<div class="mx-4">

15
apps/web-antd/src/views/mes/pro/route/modules/product-list.vue
View File

@ -25,15 +25,14 @@ const props = defineProps<{
routeId: number;
}>();
const isEditable = ref(props.formMode !== 'detail');
const list = ref<MesProRouteProductApi.RouteProduct[]>([]);
const isEditable = ref(props.formMode !== 'detail'); // 是否可编辑
const list = ref<MesProRouteProductApi.RouteProduct[]>([]); // 工艺路线产品列表
const [ProductFormModal, productFormModalApi] = useVbenModal({
connectedComponent: ProductForm,
destroyOnClose: true,
});
// TODO @AI：代码的排版风格？ps：和别的模块，看看是不是一致；
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
autoResize: true,
@ -48,7 +47,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<MesProRouteProductApi.RouteProduct>,
});
// TODO @AI：注释风格，是不是和别的没对齐
/** 加载工艺路线产品列表 */
async function getList() {
gridApi.setLoading(true);
try {
@ -59,17 +58,17 @@ async function getList() {
}
}
// TODO @AI：注释风格，是不是和别的没对齐
/** 新增工艺路线产品 */
function handleCreate() {
productFormModalApi.setData({ routeId: props.routeId }).open();
}
// TODO @AI：注释风格，是不是和别的没对齐
/** 编辑工艺路线产品 */
function handleEdit(row: MesProRouteProductApi.RouteProduct) {
productFormModalApi.setData({ id: row.id, routeId: props.routeId, row }).open();
productFormModalApi.setData({ id: row.id, routeId: props.routeId }).open();
}
// TODO @AI：注释风格，是不是和别的没对齐
/** 删除工艺路线产品 */
async function handleDelete(row: MesProRouteProductApi.RouteProduct) {
await deleteRouteProduct(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', ['工艺路线产品']));

14
apps/web-ele/src/views/mes/pro/process/modules/content-list.vue
View File

@ -19,10 +19,11 @@ import { useContentGridColumns } from '../data';
import ContentForm from './content-form.vue';
const props = defineProps<{
formMode: 'create' | 'detail' | 'update';
processId: number;
readonly?: boolean;
}>();
const isEditable = ref(props.formMode !== 'detail'); // 是否可编辑
const list = ref<MesProProcessContentApi.ProcessContent[]>([]);
const [ContentFormModal, contentFormModalApi] = useVbenModal({
@ -60,10 +61,7 @@ async function getList() {
/** 新增工序步骤 */
function handleCreate() {
const maxSort =
list.value.length > 0
? Math.max(...list.value.map((item) => item.sort || 0))
: 0;
const maxSort = Math.max(0, ...list.value.map((item) => item.sort || 0));
contentFormModalApi
.setData({ maxSort, processId: props.processId })
.open();
@ -94,7 +92,7 @@ watch(
<template>
<ContentFormModal @success="getList" />
<div v-if="!readonly" class="mb-3 flex items-center justify-start">
<div v-if="isEditable" class="mb-3 flex items-center justify-start">
<TableAction
:actions="[
{
@ -113,14 +111,14 @@ watch(
label: $t('common.edit'),
type: 'primary',
link: true,
ifShow: () => !readonly,
ifShow: () => isEditable,
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
ifShow: () => !readonly,
ifShow: () => isEditable,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', ['工序步骤']),
confirm: handleDelete.bind(null, row),

4
apps/web-ele/src/views/mes/pro/process/modules/form.vue
View File

@ -22,7 +22,7 @@ type FormMode = 'create' | 'detail' | 'update';
const emit = defineEmits(['success']);
const formMode = ref<FormMode>('create'); // 表单模式
const formData = ref<MesProProcessApi.Process>(); // 当前编辑/查看的工序数据
const formData = ref<MesProProcessApi.Process>();
const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
@ -110,7 +110,7 @@ const processId = computed(() => formData.value?.id);
<template v-if="processId">
<ElDivider class="!my-3" content-position="left">操作步骤</ElDivider>
<div class="mx-4">
<ContentList :process-id="processId" :readonly="isDetail" />
<ContentList :form-mode="formMode" :process-id="processId" />
</div>
</template>
</Modal>

135
apps/web-ele/src/views/mes/pro/route/data.ts
View File

@ -14,6 +14,10 @@ import { ElButton } from 'element-plus';
import { z } from '#/adapter/form';
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import {
MdItemSelect,
MdProductBomSelect,
} from '#/views/mes/md/item/components';
import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
/** 工艺路线表单 */
@ -348,3 +352,134 @@ export function useRouteProductBomGridColumns(): VxeTableGridOptions<MesProRoute
},
];
}
/** 工艺路线产品表单 */
export function useRouteProductFormSchema(
onItemChange?: (item: any) => void,
): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'routeId',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
// 产品物料：使用业务自定义选择器，change 回填编码/名称/规格/单位
{
fieldName: 'itemId',
label: '产品',
component: MdItemSelect as any,
componentProps: {
onChange: onItemChange,
},
formItemClass: 'col-span-2',
rules: 'selectRequired',
},
{
fieldName: 'quantity',
label: '生产数量',
component: 'InputNumber',
componentProps: {
class: '!w-full',
controlsPosition: 'right',
min: 1,
precision: 0,
},
rules: z.number().default(1),
},
{
fieldName: 'productionTime',
label: '生产用时',
component: 'InputNumber',
componentProps: {
class: '!w-full',
controlsPosition: 'right',
min: 0,
precision: 2,
},
rules: z.number().default(1),
},
{
fieldName: 'timeUnitType',
label: '时间单位',
component: 'Select',
componentProps: {
clearable: true,
options: getDictOptions(DICT_TYPE.MES_TIME_UNIT_TYPE),
placeholder: '请选择',
},
rules: z.string().default('MINUTE'),
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
formItemClass: 'col-span-2',
componentProps: { maxLength: 250, placeholder: '请输入备注', rows: 2 },
},
];
}
/** 工艺路线产品 BOM 表单 */
export function useRouteProductBomFormSchema(
itemId: () => number,
onBomChange?: (bom: any) => void,
): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'routeId',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'processId',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'productId',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
// BOM 物料：依赖产品物料，使用业务自定义选择器
{
fieldName: 'itemId',
label: 'BOM 物料',
component: MdProductBomSelect as any,
componentProps: () => ({
itemId: itemId(),
onChange: onBomChange,
placeholder: '请选择 BOM 物料',
}),
rules: 'selectRequired',
},
{
fieldName: 'quantity',
label: '用料比例',
component: 'InputNumber',
componentProps: {
class: '!w-full',
controlsPosition: 'right',
min: 0,
precision: 2,
},
rules: z.number().default(1),
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: { maxLength: 250, placeholder: '请输入备注', rows: 2 },
},
];
}

12
apps/web-ele/src/views/mes/pro/route/modules/form.vue
View File

@ -18,11 +18,11 @@ import ProductList from './product-list.vue';
type FormMode = 'create' | 'detail' | 'update';
const emit = defineEmits(['success']);
const formMode = ref<FormMode>('create');
const subTab = ref('process');
const formMode = ref<FormMode>('create'); // 表单模式
const subTab = ref('process'); // 当前激活的子表 Tab
const formData = ref<MesProRouteApi.Route>();
const isDetail = computed(() => formMode.value === 'detail');
const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
if (formMode.value === 'detail') {
return $t('ui.actionTitle.detail', ['工艺路线']);
@ -44,6 +44,7 @@ const [Form, formApi] = useVbenForm({
wrapperClass: 'grid-cols-2',
});
/** 表单 schema 需要 formApi 引用（生成编码按钮），所以通过 setState 设置 schema */
formApi.setState({ schema: useFormSchema(formApi) });
const [Modal, modalApi] = useVbenModal({
@ -57,9 +58,11 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MesProRouteApi.Route;
try {
if (formMode.value === 'create') {
// 新增成功后切到编辑模式，方便继续维护组成工序、关联产品
const id = await createRoute(data);
formData.value = { ...data, id };
await formApi.setFieldValue('id', id);
@ -81,6 +84,7 @@ const [Modal, modalApi] = useVbenModal({
}
await formApi.resetForm();
subTab.value = 'process';
// 加载数据
const data = modalApi.getData<{ id?: number; type?: FormMode }>();
formMode.value = data?.type ?? 'create';
formApi.setDisabled(formMode.value === 'detail');
@ -91,6 +95,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
try {
formData.value = await getRoute(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
@ -102,6 +107,7 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal :title="getTitle" class="w-4/5">
<Form class="mx-4" />
<!-- 编辑/详情模式下展示子表 Tab，新增模式下隐藏 -->
<ElTabs
v-if="formMode !== 'create' && formData?.id"
v-model="subTab"

18
apps/web-ele/src/views/mes/pro/route/modules/process-form.vue
View File

@ -12,6 +12,7 @@ import { useVbenForm } from '#/adapter/form';
import { getProcessSimpleList } from '#/api/mes/pro/process';
import {
createRouteProcess,
getRouteProcess,
updateRouteProcess,
} from '#/api/mes/pro/route/process';
import { $t } from '#/locales';
@ -38,6 +39,7 @@ const [Form, formApi] = useVbenForm({
wrapperClass: 'grid-cols-2',
});
/** 加载工序选项后再生成 schema（避免下拉空选项） */
async function loadSchema(): Promise<VbenFormSchema[]> {
const list = await getProcessSimpleList();
const options = (list || []).map((item) => ({
@ -54,12 +56,14 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MesProRouteProcessApi.RouteProcess;
try {
await (formData.value?.id
? updateRouteProcess(data)
: createRouteProcess(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
@ -74,22 +78,24 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
try {
// 工序下拉依赖远程数据，schema 在弹窗打开时再生成
const schema = await loadSchema();
formApi.setState({ schema });
await formApi.resetForm();
} finally {
modalApi.unlock();
}
// 加载数据
const data = modalApi.getData<{
id?: number;
maxSort?: number;
routeId: number;
row?: MesProRouteProcessApi.RouteProcess;
}>();
if (!data) {
return;
}
if (!data.id) {
// 新增时，默认序号 = maxSort + 1，并给一个默认甘特图颜色
await formApi.setValues({
colorCode: '#00AEF3',
routeId: data.routeId,
@ -97,9 +103,13 @@ const [Modal, modalApi] = useVbenModal({
});
return;
}
if (data.row) {
formData.value = data.row;
await formApi.setValues(data.row);
modalApi.lock();
try {
formData.value = await getRouteProcess(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});

17
apps/web-ele/src/views/mes/pro/route/modules/process-list.vue
View File

@ -23,8 +23,8 @@ const props = defineProps<{
routeId: number;
}>();
const isEditable = ref(props.formMode !== 'detail');
const list = ref<MesProRouteProcessApi.RouteProcess[]>([]);
const isEditable = ref(props.formMode !== 'detail'); // 是否可编辑
const list = ref<MesProRouteProcessApi.RouteProcess[]>([]); // 工艺路线工序列表
const [ProcessFormModal, processFormModalApi] = useVbenModal({
connectedComponent: ProcessForm,
@ -45,6 +45,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<MesProRouteProcessApi.RouteProcess>,
});
/** 加载工艺路线工序列表 */
async function getList() {
gridApi.setLoading(true);
try {
@ -55,20 +56,18 @@ async function getList() {
}
}
/** 新增工艺路线工序 */
function handleCreate() {
const maxSort =
list.value.length > 0
? Math.max(...list.value.map((item) => item.sort || 0))
: 0;
const maxSort = Math.max(0, ...list.value.map((item) => item.sort || 0));
processFormModalApi.setData({ maxSort, routeId: props.routeId }).open();
}
/** 编辑工艺路线工序 */
function handleEdit(row: MesProRouteProcessApi.RouteProcess) {
processFormModalApi
.setData({ id: row.id, routeId: props.routeId, row })
.open();
processFormModalApi.setData({ id: row.id, routeId: props.routeId }).open();
}
/** 删除工艺路线工序 */
async function handleDelete(row: MesProRouteProcessApi.RouteProcess) {
await deleteRouteProcess(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', ['工艺路线工序']));

187
apps/web-ele/src/views/mes/pro/route/modules/product-bom-list.vue
View File

@ -1,34 +1,24 @@
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProRouteProcessApi } from '#/api/mes/pro/route/process';
import type { MesProRouteProductBomApi } from '#/api/mes/pro/route/productbom';
import { computed, reactive, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import {
ElDialog,
ElForm,
ElFormItem,
ElInput,
ElInputNumber,
ElMessage,
ElTabPane,
ElTabs,
} from 'element-plus';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage, ElTabPane, ElTabs } from 'element-plus';
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getRouteProcessListByRoute } from '#/api/mes/pro/route/process';
import {
createRouteProductBom,
deleteRouteProductBom,
getRouteProductBomList,
updateRouteProductBom,
} from '#/api/mes/pro/route/productbom';
import { $t } from '#/locales';
import { MdProductBomSelect } from '#/views/mes/md/item/components';
import { useRouteProductBomGridColumns } from '../data';
import BomForm from './bom-form.vue';
const props = defineProps<{
productId: number;
@ -36,27 +26,14 @@ const props = defineProps<{
routeId: number;
}>();
const processOptions = ref<
Array<{ processId: number; processName?: string }>
>([]);
const activeProcessId = ref<string>('');
const list = ref<MesProRouteProductBomApi.RouteProductBom[]>([]);
const processList = ref<MesProRouteProcessApi.RouteProcess[]>([]); // 工序列表（用于 Tab）
const activeProcessId = ref<number>(); // 当前选中的工序 Tab
const list = ref<MesProRouteProductBomApi.RouteProductBom[]>([]); // 当前工序下的 BOM 列表
const formVisible = ref(false);
const formRef = ref<FormInstance>();
const isUpdate = ref(false);
const formData = reactive<MesProRouteProductBomApi.RouteProductBom>({
quantity: 1,
const [BomFormModal, bomFormModalApi] = useVbenModal({
connectedComponent: BomForm,
destroyOnClose: true,
});
const formRules: FormRules = {
itemId: [{ message: 'BOM 物料不能为空', required: true }],
quantity: [{ message: '用料比例不能为空', required: true }],
};
const formTitle = computed(() =>
isUpdate.value
? $t('ui.actionTitle.edit', ['BOM 物料'])
: $t('ui.actionTitle.create', ['BOM 物料']),
);
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
@ -72,22 +49,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<MesProRouteProductBomApi.RouteProductBom>,
});
/** 加载路线下的工序列表，用于工序 Tab */
async function loadProcessList() {
const data = await getRouteProcessListByRoute(props.routeId);
processOptions.value = (data || []).map((item) => ({
processId: item.processId!,
processName: item.processName,
}));
if (processOptions.value.length > 0) {
activeProcessId.value = String(processOptions.value[0]!.processId);
processList.value = (await getRouteProcessListByRoute(props.routeId)) || [];
if (processList.value.length > 0) {
activeProcessId.value = processList.value[0]!.processId;
await getList();
} else {
activeProcessId.value = '';
activeProcessId.value = undefined;
list.value = [];
gridApi.setGridOptions({ data: list.value });
}
}
/** 加载当前工序下的 BOM 列表 */
async function getList() {
if (!activeProcessId.value) {
return;
@ -95,7 +70,7 @@ async function getList() {
gridApi.setLoading(true);
try {
list.value = await getRouteProductBomList({
processId: Number(activeProcessId.value),
processId: activeProcessId.value,
productId: props.productId,
routeId: props.routeId,
});
@ -105,69 +80,40 @@ async function getList() {
}
}
function resetForm() {
Object.assign(formData, {
id: undefined,
itemCode: undefined,
itemId: undefined,
itemName: undefined,
processId: Number(activeProcessId.value),
productId: props.productId,
quantity: 1,
remark: undefined,
routeId: props.routeId,
specification: undefined,
unitName: undefined,
});
formRef.value?.clearValidate();
}
/** 新增 BOM */
function handleCreate() {
if (!activeProcessId.value) {
ElMessage.warning('请先选择工序');
return;
}
resetForm();
isUpdate.value = false;
formVisible.value = true;
bomFormModalApi
.setData({
processId: activeProcessId.value,
productId: props.productId,
routeId: props.routeId,
})
.open();
}
/** 编辑 BOM */
function handleEdit(row: MesProRouteProductBomApi.RouteProductBom) {
Object.assign(formData, row);
isUpdate.value = true;
formVisible.value = true;
bomFormModalApi
.setData({
id: row.id,
processId: activeProcessId.value!,
productId: props.productId,
routeId: props.routeId,
})
.open();
}
/** 删除 BOM */
async function handleDelete(row: MesProRouteProductBomApi.RouteProductBom) {
await deleteRouteProductBom(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', ['BOM 物料']));
await getList();
}
async function submitForm() {
try {
await formRef.value?.validate();
} catch {
return;
}
await (isUpdate.value
? updateRouteProductBom(formData)
: createRouteProductBom(formData));
ElMessage.success($t('ui.actionMessage.operationSuccess'));
formVisible.value = false;
await getList();
}
function handleBomChange(bom?: any) {
if (bom) {
formData.quantity = bom.quantity ?? 1;
formData.itemCode = bom.bomItemCode;
formData.itemName = bom.bomItemName;
formData.specification = bom.specification;
formData.unitName = bom.unitName;
}
}
watch(
() => [props.routeId, props.productId],
() => {
@ -180,12 +126,13 @@ watch(
</script>
<template>
<BomFormModal @success="getList" />
<ElTabs v-model="activeProcessId" @tab-change="getList">
<ElTabPane
v-for="item in processOptions"
:key="String(item.processId)"
v-for="item in processList"
:key="item.processId"
:label="item.processName"
:name="String(item.processId)"
:name="item.processId"
/>
</ElTabs>
<div class="mb-3 flex items-center justify-start">
@ -223,56 +170,4 @@ watch(
/>
</template>
</Grid>
<ElDialog v-model="formVisible" :title="formTitle" width="500px">
<ElForm
ref="formRef"
label-width="100px"
:model="formData"
:rules="formRules"
>
<ElFormItem label="BOM 物料" prop="itemId">
<MdProductBomSelect
v-model="formData.itemId"
:item-id="productId"
placeholder="请选择 BOM 物料"
@change="handleBomChange"
/>
</ElFormItem>
<ElFormItem label="用料比例" prop="quantity">
<ElInputNumber
v-model="formData.quantity"
class="!w-full"
controls-position="right"
:min="0"
:precision="2"
/>
</ElFormItem>
<ElFormItem label="备注" prop="remark">
<ElInput
v-model="formData.remark"
:maxlength="250"
placeholder="请输入备注"
:rows="2"
type="textarea"
/>
</ElFormItem>
</ElForm>
<template #footer>
<TableAction
:actions="[
{
label: $t('common.cancel'),
type: 'default',
onClick: () => (formVisible = false),
},
{
label: $t('common.confirm'),
type: 'primary',
onClick: submitForm,
},
]"
/>
</template>
</ElDialog>
</template>

192
apps/web-ele/src/views/mes/pro/route/modules/product-form.vue
View File

@ -1,87 +1,76 @@
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';
import type { MesProRouteProductApi } from '#/api/mes/pro/route/product';
import { computed, reactive, ref } from 'vue';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import {
ElDivider,
ElForm,
ElFormItem,
ElInput,
ElInputNumber,
ElMessage,
ElOption,
ElSelect,
} from 'element-plus';
import { ElDivider, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
createRouteProduct,
getRouteProduct,
updateRouteProduct,
} from '#/api/mes/pro/route/product';
import { $t } from '#/locales';
import { MdItemSelect } from '#/views/mes/md/item/components';
import { useRouteProductFormSchema } from '../data';
import ProductBomList from './product-bom-list.vue';
const emit = defineEmits(['success']);
const isUpdate = ref(false);
const formRef = ref<FormInstance>();
const formData = reactive<MesProRouteProductApi.RouteProduct>({
productionTime: 1,
quantity: 1,
timeUnitType: 'MINUTE',
});
const formRules: FormRules = {
itemId: [{ message: '产品不能为空', required: true }],
quantity: [{ message: '生产数量不能为空', required: true }],
};
const timeUnitOptions = computed(() =>
getDictOptions(DICT_TYPE.MES_TIME_UNIT_TYPE),
);
const formData = ref<MesProRouteProductApi.RouteProduct>();
const getTitle = computed(() =>
isUpdate.value
formData.value?.id
? $t('ui.actionTitle.edit', ['工艺路线产品'])
: $t('ui.actionTitle.create', ['工艺路线产品']),
);
function resetForm(routeId?: number) {
Object.assign(formData, {
id: undefined,
itemCode: undefined,
itemId: undefined,
itemName: undefined,
productionTime: 1,
quantity: 1,
remark: undefined,
routeId: routeId ?? formData.routeId,
specification: undefined,
timeUnitType: 'MINUTE',
unitName: undefined,
/** MdItemSelect change 回调：把物料编码/名称/规格/单位回填到 form */
async function handleItemChange(item?: any) {
if (!item) {
return;
}
await formApi.setValues({
itemCode: item.code,
itemName: item.name,
specification: item.specification,
unitName: item.unitMeasureName,
});
formRef.value?.clearValidate();
}
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: { class: 'w-full' },
formItemClass: 'col-span-1',
labelWidth: 100,
},
layout: 'horizontal',
schema: useRouteProductFormSchema(handleItemChange),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
try {
await formRef.value?.validate();
} catch {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MesProRouteProductApi.RouteProduct;
try {
if (isUpdate.value) {
await updateRouteProduct(formData);
if (formData.value?.id) {
await updateRouteProduct(data);
// 用最新表单值同步 formData，确保产品 BOM 子表绑定的 itemId 与表单一致
formData.value = { ...formData.value, ...data };
} else {
const id = await createRouteProduct(formData);
formData.id = id;
isUpdate.value = true;
// 新增成功后切换到编辑模式，方便继续维护产品 BOM
const id = await createRouteProduct(data);
formData.value = { ...data, id };
await formApi.setFieldValue('id', id);
}
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
@ -89,102 +78,41 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock();
}
},
onOpenChange(isOpen: boolean) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
resetForm();
isUpdate.value = false;
formData.value = undefined;
return;
}
await formApi.resetForm();
// 加载数据
const data = modalApi.getData<{
id?: number;
routeId: number;
row?: MesProRouteProductApi.RouteProduct;
}>();
if (!data) {
return;
}
if (data.row) {
Object.assign(formData, data.row);
isUpdate.value = true;
} else {
resetForm(data.routeId);
isUpdate.value = false;
if (!data.id) {
await formApi.setValues({ routeId: data.routeId });
return;
}
modalApi.lock();
try {
formData.value = await getRouteProduct(data.id);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
function handleItemChange(item?: any) {
if (!item) {
return;
}
formData.itemCode = item.code;
formData.itemName = item.name;
formData.specification = item.specification;
formData.unitName = item.unitName;
}
</script>
<template>
<Modal :title="getTitle" class="w-3/5">
<ElForm
ref="formRef"
class="mx-4"
label-width="120px"
:model="formData"
:rules="formRules"
>
<div class="grid grid-cols-2 gap-x-4">
<ElFormItem class="col-span-2" label="产品" prop="itemId">
<MdItemSelect
v-model="formData.itemId"
@change="handleItemChange"
/>
</ElFormItem>
<ElFormItem label="生产数量" prop="quantity">
<ElInputNumber
v-model="formData.quantity"
class="!w-full"
controls-position="right"
:min="1"
:precision="0"
/>
</ElFormItem>
<ElFormItem label="生产用时" prop="productionTime">
<ElInputNumber
v-model="formData.productionTime"
class="!w-full"
controls-position="right"
:min="0"
:precision="2"
/>
</ElFormItem>
<ElFormItem label="时间单位" prop="timeUnitType">
<ElSelect
v-model="formData.timeUnitType"
class="!w-full"
clearable
placeholder="请选择"
>
<ElOption
v-for="dict in timeUnitOptions"
:key="dict.value as string"
:label="dict.label"
:value="dict.value as string"
/>
</ElSelect>
</ElFormItem>
<ElFormItem class="col-span-2" label="备注" prop="remark">
<ElInput
v-model="formData.remark"
:maxlength="250"
placeholder="请输入备注"
:rows="2"
type="textarea"
/>
</ElFormItem>
</div>
</ElForm>
<template v-if="isUpdate && formData.id && formData.itemId">
<Form class="mx-4" />
<!-- 编辑模式下展示产品 BOM 子表，新增模式下隐藏 -->
<template v-if="formData?.id && formData?.itemId">
<ElDivider class="!my-3" content-position="left">产品 BOM 配置</ElDivider>
<div class="mx-4">
<ProductBomList

12
apps/web-ele/src/views/mes/pro/route/modules/product-list.vue
View File

@ -25,8 +25,8 @@ const props = defineProps<{
routeId: number;
}>();
const isEditable = ref(props.formMode !== 'detail');
const list = ref<MesProRouteProductApi.RouteProduct[]>([]);
const isEditable = ref(props.formMode !== 'detail'); // 是否可编辑
const list = ref<MesProRouteProductApi.RouteProduct[]>([]); // 工艺路线产品列表
const [ProductFormModal, productFormModalApi] = useVbenModal({
connectedComponent: ProductForm,
@ -47,6 +47,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<MesProRouteProductApi.RouteProduct>,
});
/** 加载工艺路线产品列表 */
async function getList() {
gridApi.setLoading(true);
try {
@ -57,16 +58,17 @@ async function getList() {
}
}
/** 新增工艺路线产品 */
function handleCreate() {
productFormModalApi.setData({ routeId: props.routeId }).open();
}
/** 编辑工艺路线产品 */
function handleEdit(row: MesProRouteProductApi.RouteProduct) {
productFormModalApi
.setData({ id: row.id, routeId: props.routeId, row })
.open();
productFormModalApi.setData({ id: row.id, routeId: props.routeId }).open();
}
/** 删除工艺路线产品 */
async function handleDelete(row: MesProRouteProductApi.RouteProduct) {
await deleteRouteProduct(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', ['工艺路线产品']));