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)：完成“安灯（pro_andon）”的 review

pull/349/head
YunaiV 2026-05-25 23:29:41 +08:00
parent f4e71137e0
commit 9c7986d230
14 changed files with 652 additions and 659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/src/api/mes/pro/andon/config/index.ts
View File

@ -9,7 +9,6 @@ export namespace MesProAndonConfigApi {
reason?: string; // 呼叫原因 reason?: string; // 呼叫原因
level?: number; // 级别 level?: number; // 级别
handlerRoleId?: number; // 处置角色编号 handlerRoleId?: number; // 处置角色编号
handlerRoleName?: string; // 处置角色名称（前端通过角色精简列表回显）
handlerUserId?: number; // 处置人编号 handlerUserId?: number; // 处置人编号
handlerUserNickname?: string; // 处置人昵称 handlerUserNickname?: string; // 处置人昵称
remark?: string; // 备注 remark?: string; // 备注

111
apps/web-antd/src/views/mes/pro/andon/config/data.ts Normal file
View File

@ -0,0 +1,111 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import type { SystemRoleApi } from '#/api/system/role';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleRoleList } from '#/api/system/role';
import { getSimpleUserList } from '#/api/system/user';
/** 关联数据 */
let roleList: SystemRoleApi.Role[] = [];
getSimpleRoleList().then((data) => (roleList = data));
/** 安灯配置列表的字段 */
export function useGridColumns(): VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>['columns'] {
return [
{ field: 'reason', title: '呼叫原因', minWidth: 200 },
{
field: 'level',
title: '级别',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MES_PRO_ANDON_LEVEL },
},
},
{
field: 'handlerRoleId',
title: '处置角色',
width: 140,
formatter: ({ cellValue }) =>
roleList.find((role) => role.id === cellValue)?.name ?? '',
},
{ field: 'handlerUserNickname', title: '处置人', width: 140 },
{ field: 'remark', title: '备注', minWidth: 160 },
{
title: '操作',
width: 160,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 新增/修改安灯配置的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'reason',
label: '呼叫原因',
component: 'Textarea',
componentProps: {
autoSize: { maxRows: 3, minRows: 1 },
maxLength: 200,
placeholder: '请输入呼叫原因',
},
rules: z.string().min(1, '呼叫原因不能为空').max(200),
},
{
fieldName: 'level',
label: '级别',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.MES_PRO_ANDON_LEVEL, 'number'),
placeholder: '请选择级别',
},
rules: 'selectRequired',
},
{
fieldName: 'handlerRoleId',
label: '处置角色',
component: 'ApiSelect',
componentProps: {
allowClear: true,
api: getSimpleRoleList,
labelField: 'name',
placeholder: '请选择角色（与处置人至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'handlerUserId',
label: '处置人',
component: 'ApiSelect',
componentProps: {
allowClear: true,
api: getSimpleUserList,
labelField: 'nickname',
placeholder: '请选择处置人（与角色至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Input',
componentProps: {
maxLength: 100,
placeholder: '请输入备注',
},
},
];
}

22
apps/web-antd/src/views/mes/pro/andon/config/modules/config-form.vue → apps/web-antd/src/views/mes/pro/andon/config/modules/form.vue
View File

@ -15,25 +15,26 @@ import {
} from '#/api/mes/pro/andon/config'; } from '#/api/mes/pro/andon/config';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { useConfigFormSchema } from '../../record/data'; import { useFormSchema } from '../data';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formData = ref<MesProAndonConfigApi.AndonConfig>(); const formData = ref<MesProAndonConfigApi.AndonConfig>();
const getTitle = computed(() => {
const getTitle = computed(() => return formData.value?.id
formData.value?.id
? $t('ui.actionTitle.edit', ['安灯配置']) ? $t('ui.actionTitle.edit', ['安灯配置'])
: $t('ui.actionTitle.create', ['安灯配置']), : $t('ui.actionTitle.create', ['安灯配置']);
); });
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
commonConfig: { commonConfig: {
componentProps: { class: 'w-full' }, componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 100, labelWidth: 100,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useConfigFormSchema(), schema: useFormSchema(),
showDefaultActions: false, showDefaultActions: false,
}); });
@ -44,6 +45,7 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
modalApi.lock(); modalApi.lock();
// 提交表单
const data = const data =
(await formApi.getValues()) as MesProAndonConfigApi.AndonConfig; (await formApi.getValues()) as MesProAndonConfigApi.AndonConfig;
if (!data.handlerRoleId && !data.handlerUserId) { if (!data.handlerRoleId && !data.handlerUserId) {
@ -55,6 +57,7 @@ const [Modal, modalApi] = useVbenModal({
await (formData.value?.id await (formData.value?.id
? updateAndonConfig(data) ? updateAndonConfig(data)
: createAndonConfig(data)); : createAndonConfig(data));
// 关闭并提示
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
message.success($t('ui.actionMessage.operationSuccess')); message.success($t('ui.actionMessage.operationSuccess'));
@ -67,7 +70,7 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined; formData.value = undefined;
return; return;
} }
await formApi.resetForm(); // 加载数据
const data = modalApi.getData<MesProAndonConfigApi.AndonConfig>(); const data = modalApi.getData<MesProAndonConfigApi.AndonConfig>();
if (!data || !data.id) { if (!data || !data.id) {
return; return;
@ -75,6 +78,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(); modalApi.lock();
try { try {
formData.value = await getAndonConfig(data.id); formData.value = await getAndonConfig(data.id);
// 设置到 values
await formApi.setValues(formData.value); await formApi.setValues(formData.value);
} finally { } finally {
modalApi.unlock(); modalApi.unlock();

66
apps/web-antd/src/views/mes/pro/andon/config/modules/config-modal.vue → apps/web-antd/src/views/mes/pro/andon/config/modules/list.vue
View File

@ -2,8 +2,6 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config'; import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
@ -13,67 +11,58 @@ import {
deleteAndonConfig, deleteAndonConfig,
getAndonConfigList, getAndonConfigList,
} from '#/api/mes/pro/andon/config'; } from '#/api/mes/pro/andon/config';
import { getSimpleRoleList } from '#/api/system/role';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { useConfigGridColumns } from '../../record/data'; import { useGridColumns } from '../data';
import ConfigForm from './config-form.vue'; import Form from './form.vue';
const list = ref<MesProAndonConfigApi.AndonConfig[]>([]); // 安灯配置列表（已回填处置角色名称） const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
const [ConfigFormModal, configFormModalApi] = useVbenModal({
connectedComponent: ConfigForm,
destroyOnClose: true, destroyOnClose: true,
}); });
// TODO @AI：这个格式，是不是有问题？应该要换行？看看别的模块也是；
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: { gridOptions: {
autoResize: true, autoResize: true,
border: true, border: true,
columns: useConfigGridColumns(), columns: useGridColumns(),
data: list.value,
minHeight: 320, minHeight: 320,
pagerConfig: { enabled: false }, pagerConfig: {
rowConfig: { isHover: true, keyField: 'id' }, enabled: false,
},
rowConfig: {
isHover: true,
keyField: 'id',
},
showOverflow: true, showOverflow: true,
toolbarConfig: { enabled: false }, toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>, } as VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>,
}); });
/** 加载安灯配置列表，并通过角色精简列表回填处置角色名称 */ /** 加载安灯配置列表 */
// TODO @AI：这里需要 getAndonConfigList、getSimpleRoleList 么？通过 data.ts 里处理，是不是更主流？？？
async function getList() { async function getList() {
gridApi.setLoading(true); gridApi.setLoading(true);
try { try {
const [configList, roleList] = await Promise.all([ const data = (await getAndonConfigList()) || [];
getAndonConfigList(), gridApi.setGridOptions({ data });
getSimpleRoleList(),
]);
const roleMap = new Map(roleList.map((role) => [role.id!, role.name!]));
list.value = (configList || []).map((item) => ({
...item,
handlerRoleName: item.handlerRoleId
? roleMap.get(item.handlerRoleId)
: undefined,
}));
gridApi.setGridOptions({ data: list.value });
} finally { } finally {
gridApi.setLoading(false); gridApi.setLoading(false);
} }
} }
/** 新增配置 */ /** 创建安灯配置 */
function handleCreate() { function handleCreate() {
configFormModalApi.setData({}).open(); formModalApi.setData({}).open();
} }
/** 编辑配置 */ /** 编辑安灯配置 */
function handleEdit(row: MesProAndonConfigApi.AndonConfig) { function handleEdit(row: MesProAndonConfigApi.AndonConfig) {
configFormModalApi.setData({ id: row.id }).open(); formModalApi.setData({ id: row.id }).open();
} }
/** 删除配置 */ /** 删除安灯配置 */
async function handleDelete(row: MesProAndonConfigApi.AndonConfig) { async function handleDelete(row: MesProAndonConfigApi.AndonConfig) {
await deleteAndonConfig(row.id!); await deleteAndonConfig(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', ['安灯配置'])); message.success($t('ui.actionMessage.deleteSuccess', ['安灯配置']));
@ -93,8 +82,13 @@ defineExpose({ open: () => modalApi.open() });
</script> </script>
<template> <template>
<Modal :show-cancel-button="false" :show-confirm-button="false" class="w-3/5" title="安灯设置"> <Modal
<ConfigFormModal @success="getList" /> :show-cancel-button="false"
:show-confirm-button="false"
class="w-3/5"
title="安灯设置"
>
<FormModal @success="getList" />
<div class="mb-3 flex items-center justify-start"> <div class="mb-3 flex items-center justify-start">
<TableAction <TableAction
:actions="[ :actions="[

301
apps/web-antd/src/views/mes/pro/andon/record/data.ts
View File

@ -1,14 +1,15 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config'; import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record'; import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
import { markRaw } from 'vue';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleRoleList } from '#/api/system/role';
import { getSimpleUserList } from '#/api/system/user'; import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils';
import { MdWorkstationSelect } from '#/views/mes/md/workstation/components'; import { MdWorkstationSelect } from '#/views/mes/md/workstation/components';
import { ProProcessSelect } from '#/views/mes/pro/process/components'; import { ProProcessSelect } from '#/views/mes/pro/process/components';
import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components'; import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components';
@ -16,14 +17,17 @@ import { MesProWorkOrderStatusEnum } from '#/views/mes/utils/constants';
import { AndonConfigSelect } from '../config/components'; import { AndonConfigSelect } from '../config/components';
/** 列表搜索表单 */ /** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
return [ return [
{ {
fieldName: 'workstationId', fieldName: 'workstationId',
label: '工作站', label: '工作站',
component: MdWorkstationSelect as any, component: markRaw(MdWorkstationSelect),
componentProps: { allowClear: true, placeholder: '请选择工作站' }, componentProps: {
allowClear: true,
placeholder: '请选择工作站',
},
}, },
{ {
fieldName: 'userId', fieldName: 'userId',
@ -64,20 +68,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '发起时间', label: '发起时间',
component: 'RangePicker', component: 'RangePicker',
componentProps: { componentProps: {
...getRangePickerDefaultProps(),
allowClear: true, allowClear: true,
defaultTime: [
new Date(2000, 0, 1, 0, 0, 0),
new Date(2000, 0, 1, 23, 59, 59),
],
format: 'YYYY-MM-DD HH:mm:ss',
showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
}, },
}, },
]; ];
} }
/** 列表字段 */ /** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.AndonRecord>['columns'] { export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.AndonRecord>['columns'] {
return [ return [
{ field: 'workstationCode', title: '工作站编码', width: 140 }, { field: 'workstationCode', title: '工作站编码', width: 140 },
@ -126,96 +124,83 @@ export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.Andon
]; ];
} }
/** 安灯记录表单（按表单类型动态切换字段） */ /**
* 新增/处置/详情安灯呼叫记录的表单
*
* - create：录入呼叫主体信息（工作站/发起人/工单/工序/呼叫原因/备注）
* - update：呼叫主体信息只读，编辑处置时间/处置人/备注
* - detail：所有字段只读
*/
export function useFormSchema( export function useFormSchema(
formType: 'create' | 'detail' | 'update', formType: string,
onConfigChange?: (config: MesProAndonConfigApi.AndonConfig | undefined) => void, formApi?: VbenFormApi,
): VbenFormSchema[] { ): VbenFormSchema[] {
const isCreate = formType === 'create'; const isCreate = formType === 'create';
const isUpdate = formType === 'update'; const isUpdate = formType === 'update';
const isDetail = formType === 'detail';
return [ return [
{ {
fieldName: 'id', fieldName: 'id',
component: 'Input', component: 'Input',
dependencies: { triggerFields: [''], show: () => false }, dependencies: { triggerFields: [''], show: () => false },
}, },
isCreate {
? { fieldName: 'workstationId',
fieldName: 'workstationId', label: '工作站',
label: '工作站', component: markRaw(MdWorkstationSelect),
component: MdWorkstationSelect as any, componentProps: {
componentProps: { placeholder: '请选择工作站' }, disabled: !isCreate,
rules: 'selectRequired', placeholder: '请选择工作站',
} },
: { rules: 'selectRequired',
fieldName: 'workstationName', },
label: '工作站', {
component: 'Input', fieldName: 'userId',
componentProps: { disabled: true }, label: '发起人',
}, component: 'ApiSelect',
isCreate componentProps: {
? { allowClear: true,
fieldName: 'userId', api: getSimpleUserList,
label: '发起人', disabled: !isCreate,
component: 'ApiSelect', labelField: 'nickname',
componentProps: { placeholder: '请选择发起人',
allowClear: true, valueField: 'id',
api: getSimpleUserList, },
labelField: 'nickname', },
placeholder: '请选择发起人', {
valueField: 'id', fieldName: 'workOrderId',
}, label: '生产工单',
} component: markRaw(ProWorkOrderSelect),
: { componentProps: {
fieldName: 'userNickname', disabled: !isCreate,
label: '发起人', placeholder: '请选择工单（可选）',
component: 'Input', status: MesProWorkOrderStatusEnum.CONFIRMED,
componentProps: { disabled: true }, },
}, },
isCreate {
? { fieldName: 'processId',
fieldName: 'workOrderId', label: '工序',
label: '生产工单', component: markRaw(ProProcessSelect),
component: ProWorkOrderSelect as any, componentProps: {
componentProps: { disabled: !isCreate,
placeholder: '请选择工单（可选）', placeholder: '请选择工序（可选）',
status: MesProWorkOrderStatusEnum.CONFIRMED, },
}, },
} {
: { fieldName: 'configId',
fieldName: 'workOrderCode', label: '呼叫原因',
label: '生产工单', component: markRaw(AndonConfigSelect),
component: 'Input', componentProps: {
componentProps: { disabled: true }, disabled: !isCreate,
}, // 选择呼叫原因后，自动填充对应的级别
isCreate onChange: async (config?: MesProAndonConfigApi.AndonConfig) => {
? { await formApi?.setValues({
fieldName: 'processId', level: config?.level,
label: '工序', reason: config?.reason,
component: ProProcessSelect as any, });
componentProps: { placeholder: '请选择工序（可选）' },
}
: {
fieldName: 'processName',
label: '工序',
component: 'Input',
componentProps: { disabled: true },
},
isCreate
? {
fieldName: 'configId',
label: '呼叫原因',
component: AndonConfigSelect as any,
componentProps: { onChange: onConfigChange },
rules: 'selectRequired',
}
: {
fieldName: 'reason',
label: '呼叫原因',
component: 'Input',
componentProps: { disabled: true },
}, },
},
rules: 'selectRequired',
},
{ {
fieldName: 'level', fieldName: 'level',
label: '级别', label: '级别',
@ -226,7 +211,7 @@ export function useFormSchema(
placeholder: '由呼叫原因自动带出', placeholder: '由呼叫原因自动带出',
}, },
}, },
// 处置信息：update / detail 才展示 // 处置信息：update / detail 模式才展示
...(isCreate ...(isCreate
? [] ? []
: ([ : ([
@ -236,7 +221,10 @@ export function useFormSchema(
component: 'Select', component: 'Select',
componentProps: { componentProps: {
disabled: true, disabled: true,
options: getDictOptions(DICT_TYPE.MES_PRO_ANDON_STATUS, 'number'), options: getDictOptions(
DICT_TYPE.MES_PRO_ANDON_STATUS,
'number',
),
}, },
}, },
{ {
@ -246,37 +234,31 @@ export function useFormSchema(
componentProps: { componentProps: {
disabled: !isUpdate, disabled: !isUpdate,
format: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss',
placeholder: isUpdate ? '请选择处置时间' : undefined, placeholder: '请选择处置时间',
showTime: true, showTime: true,
valueFormat: 'x', valueFormat: 'x',
}, },
}, },
isUpdate {
? { fieldName: 'handlerUserId',
fieldName: 'handlerUserId', label: '处置人',
label: '处置人', component: 'ApiSelect',
component: 'ApiSelect', componentProps: {
componentProps: { allowClear: true,
allowClear: true, api: getSimpleUserList,
api: getSimpleUserList, disabled: !isUpdate,
labelField: 'nickname', labelField: 'nickname',
placeholder: '请选择处置人', placeholder: '请选择处置人',
valueField: 'id', valueField: 'id',
}, },
} },
: {
fieldName: 'handlerUserNickname',
label: '处置人',
component: 'Input',
componentProps: { disabled: true },
},
] as VbenFormSchema[])), ] as VbenFormSchema[])),
{ {
fieldName: 'remark', fieldName: 'remark',
label: '备注', label: '备注',
component: 'Textarea', component: 'Textarea',
componentProps: { componentProps: {
disabled: isDetail, disabled: formType === 'detail',
maxLength: 250, maxLength: 250,
placeholder: '请输入备注', placeholder: '请输入备注',
rows: 2, rows: 2,
@ -284,90 +266,3 @@ export function useFormSchema(
}, },
]; ];
} }
/** 安灯配置表格列（弹窗内嵌网格） */
export function useConfigGridColumns(): VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>['columns'] {
return [
{ field: 'reason', title: '呼叫原因', minWidth: 200 },
{
field: 'level',
title: '级别',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MES_PRO_ANDON_LEVEL },
},
},
{ field: 'handlerRoleName', title: '处置角色', width: 140 },
{ field: 'handlerUserNickname', title: '处置人', width: 140 },
{ field: 'remark', title: '备注', minWidth: 160 },
{
title: '操作',
width: 160,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 安灯配置表单（弹窗内的新增/编辑表单） */
export function useConfigFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'reason',
label: '呼叫原因',
component: 'Textarea',
componentProps: {
autoSize: { maxRows: 3, minRows: 1 },
maxLength: 200,
placeholder: '请输入呼叫原因',
},
rules: z.string().min(1, '呼叫原因不能为空').max(200),
},
{
fieldName: 'level',
label: '级别',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.MES_PRO_ANDON_LEVEL, 'number'),
placeholder: '请选择级别',
},
rules: 'selectRequired',
},
{
fieldName: 'handlerRoleId',
label: '处置角色',
component: 'ApiSelect',
componentProps: {
allowClear: true,
api: getSimpleRoleList,
labelField: 'name',
placeholder: '请选择角色（与处置人至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'handlerUserId',
label: '处置人',
component: 'ApiSelect',
componentProps: {
allowClear: true,
api: getSimpleUserList,
labelField: 'nickname',
placeholder: '请选择处置人（与角色至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Input',
componentProps: { maxLength: 100, placeholder: '请输入备注' },
},
];
}

6
apps/web-antd/src/views/mes/pro/andon/record/index.vue
View File

@ -18,7 +18,7 @@ import {
import { $t } from '#/locales'; import { $t } from '#/locales';
import { MesProAndonStatusEnum } from '#/views/mes/utils/constants'; import { MesProAndonStatusEnum } from '#/views/mes/utils/constants';
import ConfigModal from '../config/modules/config-modal.vue'; import ConfigList from '../config/modules/list.vue';
import { useGridColumns, useGridFormSchema } from './data'; import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue'; import Form from './modules/form.vue';
@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
const configModalRef = ref<InstanceType<typeof ConfigModal>>(); const configModalRef = ref<InstanceType<typeof ConfigList>>();
/** 刷新表格 */ /** 刷新表格 */
function handleRefresh() { function handleRefresh() {
@ -109,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
/> />
</template> </template>
<FormModal @success="handleRefresh" /> <FormModal @success="handleRefresh" />
<ConfigModal ref="configModalRef" /> <ConfigList ref="configModalRef" />
<Grid table-title="安灯呼叫记录"> <Grid table-title="安灯呼叫记录">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction

149
apps/web-antd/src/views/mes/pro/andon/record/modules/form.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record'; import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
@ -7,7 +6,7 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { useUserStore } from '@vben/stores'; import { useUserStore } from '@vben/stores';
import { Button, message } from 'ant-design-vue'; import { Button, message, Popconfirm } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
import { import {
@ -20,69 +19,40 @@ import { MesProAndonStatusEnum } from '#/views/mes/utils/constants';
import { useFormSchema } from '../data'; import { useFormSchema } from '../data';
type FormMode = 'create' | 'detail' | 'update';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formType = ref<'create' | 'detail' | 'update'>('create'); // 表单当前模式：新增 / 处置 / 详情 const formMode = ref<FormMode>('create'); // 表单模式：新增 / 处置 / 详情
const formData = ref<MesProAndonRecordApi.AndonRecord>(); const formData = ref<MesProAndonRecordApi.AndonRecord>();
const userStore = useUserStore(); const userStore = useUserStore();
const dialogTitle = computed(() => { const isUpdate = computed(() => formMode.value === 'update'); // 是否处置模式
switch (formType.value) { const getTitle = computed(() => {
case 'create': { if (formMode.value === 'detail') {
return '新增安灯呼叫'; return $t('ui.actionTitle.view', ['安灯呼叫']);
}
case 'detail': {
return '安灯呼叫详情';
}
case 'update': {
return '处置安灯呼叫';
}
default: {
return '安灯呼叫';
}
} }
return formMode.value === 'update'
? $t('ui.actionTitle.edit', ['安灯呼叫'])
: $t('ui.actionTitle.create', ['安灯呼叫']);
}); });
/** 选择呼叫原因后自动填充级别 */
function handleConfigChange(config: MesProAndonConfigApi.AndonConfig | undefined) {
if (!config) {
formApi.setValues({ level: undefined, reason: undefined });
return;
}
formApi.setValues({ level: config.level, reason: config.reason });
}
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
commonConfig: { commonConfig: {
componentProps: { class: 'w-full' }, componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 100, labelWidth: 100,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema('create', handleConfigChange), schema: [],
showDefaultActions: false, showDefaultActions: false,
}); });
/** 提交：新增 */ /** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
async function handleCreate() { formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
try {
const data =
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
await createAndonRecord(data);
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
}
/** 处置：保存（保持 ACTIVE） */ /** 处置：保存（保持 ACTIVE 状态） */
// TODO @AI：这里写下注释；
async function handleSave() { async function handleSave() {
modalApi.lock(); modalApi.lock();
try { try {
@ -103,8 +73,7 @@ async function handleSave() {
} }
} }
/** 处置：标记已处置 */ /** 处置：标记已处置（状态变为 HANDLED） */
// TODO @AI：这里写下注释；
async function handleFinish() { async function handleFinish() {
const values = const values =
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord; (await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
@ -133,34 +102,47 @@ async function handleFinish() {
} }
} }
// TODO @AI：这里的代码风格？！！
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (formMode.value === 'detail') {
await modalApi.close();
return;
}
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
try {
await createAndonRecord(data);
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = undefined; formData.value = undefined;
return; return;
} }
const data = modalApi.getData<{ // 加载数据
id?: number; const data = modalApi.getData<{ id?: number; type?: FormMode }>();
type: 'create' | 'detail' | 'update'; formMode.value = data?.type || 'create';
}>(); formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
if (!data) { modalApi.setState({ showConfirmButton: formMode.value === 'create' });
return;
}
formType.value = data.type;
// 重新挂载 schema，以便按 type 切换字段表现
formApi.setState({ schema: useFormSchema(data.type, handleConfigChange) });
await formApi.resetForm(); await formApi.resetForm();
if (formMode.value === 'create') {
if (data.type === 'create') { // 新增时，发起人默认为当前用户
// 新增时默认填发起人为当前用户 await formApi.setValues({ userId: userStore.userInfo?.id });
const currentUserId = userStore.userInfo?.id;
formData.value = { userId: currentUserId };
await formApi.setValues({ userId: currentUserId });
return; return;
} }
// 处置 / 详情：加载详情 if (!data?.id) {
if (!data.id) {
return; return;
} }
modalApi.lock(); modalApi.lock();
@ -168,7 +150,7 @@ const [Modal, modalApi] = useVbenModal({
formData.value = await getAndonRecord(data.id); formData.value = await getAndonRecord(data.id);
const initial: MesProAndonRecordApi.AndonRecord = { ...formData.value }; const initial: MesProAndonRecordApi.AndonRecord = { ...formData.value };
// 处置模式下，默认填充处置时间和处置人，方便快速保存 // 处置模式下，默认填充处置时间和处置人，方便快速保存
if (data.type === 'update') { if (isUpdate.value) {
if (!initial.handleTime) { if (!initial.handleTime) {
initial.handleTime = Date.now(); initial.handleTime = Date.now();
} }
@ -176,6 +158,7 @@ const [Modal, modalApi] = useVbenModal({
initial.handlerUserId = userStore.userInfo?.id; initial.handlerUserId = userStore.userInfo?.id;
} }
} }
// 设置到 values
await formApi.setValues(initial); await formApi.setValues(initial);
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
@ -185,21 +168,17 @@ const [Modal, modalApi] = useVbenModal({
</script> </script>
<template> <template>
<Modal :title="dialogTitle" class="w-1/2"> <Modal :title="getTitle" class="w-1/2">
<Form /> <Form class="mx-4" />
<template #footer> <template #prepend-footer>
<template v-if="formType === 'create'"> <div v-if="isUpdate" class="flex flex-auto items-center justify-end gap-2">
<Button @click="modalApi.close()">取消</Button> <Popconfirm title="确认保存当前处置进度？" @confirm="handleSave">
<Button type="primary" @click="handleCreate">确定</Button> <Button type="primary">保存</Button>
</template> </Popconfirm>
<template v-else-if="formType === 'update'"> <Popconfirm title="确认标记为已处置？" @confirm="handleFinish">
<Button @click="modalApi.close()">关闭</Button> <Button danger type="primary">已处置</Button>
<Button type="primary" @click="handleSave">保存</Button> </Popconfirm>
<Button type="primary" danger @click="handleFinish">已处置</Button> </div>
</template>
<template v-else>
<Button @click="modalApi.close()">关闭</Button>
</template>
</template> </template>
</Modal> </Modal>
</template> </template>

15
apps/web-ele/src/api/mes/pro/andon/config/index.ts
View File

@ -1,21 +1,26 @@
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request'; import { requestClient } from '#/api/request';
export namespace MesProAndonConfigApi { export namespace MesProAndonConfigApi {
/** MES 安灯配置 */ /** MES 安灯配置 */
export interface AndonConfig { export interface AndonConfig {
id?: number; id?: number; // 编号
reason?: string; // 呼叫原因 reason?: string; // 呼叫原因
level?: number; // 级别 level?: number; // 级别
handlerRoleId?: number; // 处置角色编号 handlerRoleId?: number; // 处置角色编号
handlerUserId?: number; // 处置人编号 handlerUserId?: number; // 处置人编号
handlerUserNickname?: string; // 处置人姓名（详情回显） handlerUserNickname?: string; // 处置人昵称
remark?: string; remark?: string; // 备注
} }
} }
/** 查询安灯配置分页 */ /** 查询安灯配置分页 */
export function getAndonConfigPage(params: any) { export function getAndonConfigPage(params: PageParam) {
return requestClient.get('/mes/pro/andon-config/page', { params }); return requestClient.get<PageResult<MesProAndonConfigApi.AndonConfig>>(
'/mes/pro/andon-config/page',
{ params },
);
} }
/** 查询安灯配置列表 */ /** 查询安灯配置列表 */

111
apps/web-ele/src/views/mes/pro/andon/config/data.ts Normal file
View File

@ -0,0 +1,111 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import type { SystemRoleApi } from '#/api/system/role';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleRoleList } from '#/api/system/role';
import { getSimpleUserList } from '#/api/system/user';
/** 关联数据 */
let roleList: SystemRoleApi.Role[] = [];
getSimpleRoleList().then((data) => (roleList = data));
/** 安灯配置列表的字段 */
export function useGridColumns(): VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>['columns'] {
return [
{ field: 'reason', title: '呼叫原因', minWidth: 200 },
{
field: 'level',
title: '级别',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MES_PRO_ANDON_LEVEL },
},
},
{
field: 'handlerRoleId',
title: '处置角色',
width: 140,
formatter: ({ cellValue }) =>
roleList.find((role) => role.id === cellValue)?.name ?? '',
},
{ field: 'handlerUserNickname', title: '处置人', width: 140 },
{ field: 'remark', title: '备注', minWidth: 160 },
{
title: '操作',
width: 160,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 新增/修改安灯配置的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'reason',
label: '呼叫原因',
component: 'Textarea',
componentProps: {
autosize: { maxRows: 3, minRows: 1 },
maxLength: 200,
placeholder: '请输入呼叫原因',
},
rules: z.string().min(1, '呼叫原因不能为空').max(200),
},
{
fieldName: 'level',
label: '级别',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.MES_PRO_ANDON_LEVEL, 'number'),
placeholder: '请选择级别',
},
rules: 'selectRequired',
},
{
fieldName: 'handlerRoleId',
label: '处置角色',
component: 'ApiSelect',
componentProps: {
api: getSimpleRoleList,
clearable: true,
labelField: 'name',
placeholder: '请选择角色（与处置人至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'handlerUserId',
label: '处置人',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
clearable: true,
labelField: 'nickname',
placeholder: '请选择处置人（与角色至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Input',
componentProps: {
maxLength: 100,
placeholder: '请输入备注',
},
},
];
}

22
apps/web-ele/src/views/mes/pro/andon/config/modules/config-form.vue → apps/web-ele/src/views/mes/pro/andon/config/modules/form.vue
View File

@ -15,25 +15,26 @@ import {
} from '#/api/mes/pro/andon/config'; } from '#/api/mes/pro/andon/config';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { useConfigFormSchema } from '../../record/data'; import { useFormSchema } from '../data';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formData = ref<MesProAndonConfigApi.AndonConfig>(); const formData = ref<MesProAndonConfigApi.AndonConfig>();
const getTitle = computed(() => {
const getTitle = computed(() => return formData.value?.id
formData.value?.id
? $t('ui.actionTitle.edit', ['安灯配置']) ? $t('ui.actionTitle.edit', ['安灯配置'])
: $t('ui.actionTitle.create', ['安灯配置']), : $t('ui.actionTitle.create', ['安灯配置']);
); });
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
commonConfig: { commonConfig: {
componentProps: { class: 'w-full' }, componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 100, labelWidth: 100,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useConfigFormSchema(), schema: useFormSchema(),
showDefaultActions: false, showDefaultActions: false,
}); });
@ -44,6 +45,7 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
modalApi.lock(); modalApi.lock();
// 提交表单
const data = const data =
(await formApi.getValues()) as MesProAndonConfigApi.AndonConfig; (await formApi.getValues()) as MesProAndonConfigApi.AndonConfig;
if (!data.handlerRoleId && !data.handlerUserId) { if (!data.handlerRoleId && !data.handlerUserId) {
@ -55,6 +57,7 @@ const [Modal, modalApi] = useVbenModal({
await (formData.value?.id await (formData.value?.id
? updateAndonConfig(data) ? updateAndonConfig(data)
: createAndonConfig(data)); : createAndonConfig(data));
// 关闭并提示
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess')); ElMessage.success($t('ui.actionMessage.operationSuccess'));
@ -67,7 +70,7 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined; formData.value = undefined;
return; return;
} }
await formApi.resetForm(); // 加载数据
const data = modalApi.getData<MesProAndonConfigApi.AndonConfig>(); const data = modalApi.getData<MesProAndonConfigApi.AndonConfig>();
if (!data || !data.id) { if (!data || !data.id) {
return; return;
@ -75,6 +78,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(); modalApi.lock();
try { try {
formData.value = await getAndonConfig(data.id); formData.value = await getAndonConfig(data.id);
// 设置到 values
await formApi.setValues(formData.value); await formApi.setValues(formData.value);
} finally { } finally {
modalApi.unlock(); modalApi.unlock();

44
apps/web-ele/src/views/mes/pro/andon/config/modules/config-modal.vue → apps/web-ele/src/views/mes/pro/andon/config/modules/list.vue
View File

@ -2,8 +2,6 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config'; import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
@ -15,13 +13,11 @@ import {
} from '#/api/mes/pro/andon/config'; } from '#/api/mes/pro/andon/config';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { useConfigGridColumns } from '../../record/data'; import { useGridColumns } from '../data';
import ConfigForm from './config-form.vue'; import Form from './form.vue';
const list = ref<MesProAndonConfigApi.AndonConfig[]>([]); const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
const [ConfigFormModal, configFormModalApi] = useVbenModal({
connectedComponent: ConfigForm,
destroyOnClose: true, destroyOnClose: true,
}); });
@ -29,13 +25,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: { gridOptions: {
autoResize: true, autoResize: true,
border: true, border: true,
columns: useConfigGridColumns(), columns: useGridColumns(),
data: list.value,
minHeight: 320, minHeight: 320,
pagerConfig: { enabled: false }, pagerConfig: {
rowConfig: { isHover: true, keyField: 'id' }, enabled: false,
},
rowConfig: {
isHover: true,
keyField: 'id',
},
showOverflow: true, showOverflow: true,
toolbarConfig: { enabled: false }, toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>, } as VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>,
}); });
@ -43,24 +45,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
async function getList() { async function getList() {
gridApi.setLoading(true); gridApi.setLoading(true);
try { try {
list.value = (await getAndonConfigList()) || []; const data = (await getAndonConfigList()) || [];
gridApi.setGridOptions({ data: list.value }); gridApi.setGridOptions({ data });
} finally { } finally {
gridApi.setLoading(false); gridApi.setLoading(false);
} }
} }
/** 新增配置 */ /** 创建安灯配置 */
function handleCreate() { function handleCreate() {
configFormModalApi.setData({}).open(); formModalApi.setData({}).open();
} }
/** 编辑配置 */ /** 编辑安灯配置 */
function handleEdit(row: MesProAndonConfigApi.AndonConfig) { function handleEdit(row: MesProAndonConfigApi.AndonConfig) {
configFormModalApi.setData({ id: row.id }).open(); formModalApi.setData({ id: row.id }).open();
} }
/** 删除配置 */ /** 删除安灯配置 */
async function handleDelete(row: MesProAndonConfigApi.AndonConfig) { async function handleDelete(row: MesProAndonConfigApi.AndonConfig) {
await deleteAndonConfig(row.id!); await deleteAndonConfig(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', ['安灯配置'])); ElMessage.success($t('ui.actionMessage.deleteSuccess', ['安灯配置']));
@ -86,7 +88,7 @@ defineExpose({ open: () => modalApi.open() });
class="w-3/5" class="w-3/5"
title="安灯设置" title="安灯设置"
> >
<ConfigFormModal @success="getList" /> <FormModal @success="getList" />
<div class="mb-3 flex items-center justify-start"> <div class="mb-3 flex items-center justify-start">
<TableAction <TableAction
:actions="[ :actions="[

298
apps/web-ele/src/views/mes/pro/andon/record/data.ts
View File

@ -1,13 +1,15 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config'; import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record'; import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
import { markRaw } from 'vue';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleUserList } from '#/api/system/user'; import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils';
import { MdWorkstationSelect } from '#/views/mes/md/workstation/components'; import { MdWorkstationSelect } from '#/views/mes/md/workstation/components';
import { ProProcessSelect } from '#/views/mes/pro/process/components'; import { ProProcessSelect } from '#/views/mes/pro/process/components';
import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components'; import { ProWorkOrderSelect } from '#/views/mes/pro/workorder/components';
@ -15,14 +17,17 @@ import { MesProWorkOrderStatusEnum } from '#/views/mes/utils/constants';
import { AndonConfigSelect } from '../config/components'; import { AndonConfigSelect } from '../config/components';
/** 列表搜索表单 */ /** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
return [ return [
{ {
fieldName: 'workstationId', fieldName: 'workstationId',
label: '工作站', label: '工作站',
component: MdWorkstationSelect as any, component: markRaw(MdWorkstationSelect),
componentProps: { clearable: true, placeholder: '请选择工作站' }, componentProps: {
clearable: true,
placeholder: '请选择工作站',
},
}, },
{ {
fieldName: 'userId', fieldName: 'userId',
@ -61,18 +66,16 @@ export function useGridFormSchema(): VbenFormSchema[] {
{ {
fieldName: 'createTime', fieldName: 'createTime',
label: '发起时间', label: '发起时间',
component: 'DatePicker', component: 'RangePicker',
componentProps: { componentProps: {
...getRangePickerDefaultProps(),
clearable: true, clearable: true,
format: 'YYYY-MM-DD HH:mm:ss',
type: 'datetimerange',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
}, },
}, },
]; ];
} }
/** 列表字段 */ /** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.AndonRecord>['columns'] { export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.AndonRecord>['columns'] {
return [ return [
{ field: 'workstationCode', title: '工作站编码', width: 140 }, { field: 'workstationCode', title: '工作站编码', width: 140 },
@ -121,96 +124,83 @@ export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.Andon
]; ];
} }
/** 安灯记录表单（按表单类型动态切换字段） */ /**
* 新增/处置/详情安灯呼叫记录的表单
*
* - create：录入呼叫主体信息（工作站/发起人/工单/工序/呼叫原因/备注）
* - update：呼叫主体信息只读，编辑处置时间/处置人/备注
* - detail：所有字段只读
*/
export function useFormSchema( export function useFormSchema(
formType: 'create' | 'detail' | 'update', formType: string,
onConfigChange?: (config: MesProAndonConfigApi.AndonConfig | undefined) => void, formApi?: VbenFormApi,
): VbenFormSchema[] { ): VbenFormSchema[] {
const isCreate = formType === 'create'; const isCreate = formType === 'create';
const isUpdate = formType === 'update'; const isUpdate = formType === 'update';
const isDetail = formType === 'detail';
return [ return [
{ {
fieldName: 'id', fieldName: 'id',
component: 'Input', component: 'Input',
dependencies: { triggerFields: [''], show: () => false }, dependencies: { triggerFields: [''], show: () => false },
}, },
isCreate {
? { fieldName: 'workstationId',
fieldName: 'workstationId', label: '工作站',
label: '工作站', component: markRaw(MdWorkstationSelect),
component: MdWorkstationSelect as any, componentProps: {
componentProps: { placeholder: '请选择工作站' }, disabled: !isCreate,
rules: 'selectRequired', placeholder: '请选择工作站',
} },
: { rules: 'selectRequired',
fieldName: 'workstationName', },
label: '工作站', {
component: 'Input', fieldName: 'userId',
componentProps: { disabled: true }, label: '发起人',
}, component: 'ApiSelect',
isCreate componentProps: {
? { api: getSimpleUserList,
fieldName: 'userId', clearable: true,
label: '发起人', disabled: !isCreate,
component: 'ApiSelect', labelField: 'nickname',
componentProps: { placeholder: '请选择发起人',
api: getSimpleUserList, valueField: 'id',
clearable: true, },
labelField: 'nickname', },
placeholder: '请选择发起人', {
valueField: 'id', fieldName: 'workOrderId',
}, label: '生产工单',
} component: markRaw(ProWorkOrderSelect),
: { componentProps: {
fieldName: 'userNickname', disabled: !isCreate,
label: '发起人', placeholder: '请选择工单（可选）',
component: 'Input', status: MesProWorkOrderStatusEnum.CONFIRMED,
componentProps: { disabled: true }, },
}, },
isCreate {
? { fieldName: 'processId',
fieldName: 'workOrderId', label: '工序',
label: '生产工单', component: markRaw(ProProcessSelect),
component: ProWorkOrderSelect as any, componentProps: {
componentProps: { disabled: !isCreate,
placeholder: '请选择工单（可选）', placeholder: '请选择工序（可选）',
status: MesProWorkOrderStatusEnum.CONFIRMED, },
}, },
} {
: { fieldName: 'configId',
fieldName: 'workOrderCode', label: '呼叫原因',
label: '生产工单', component: markRaw(AndonConfigSelect),
component: 'Input', componentProps: {
componentProps: { disabled: true }, disabled: !isCreate,
}, // 选择呼叫原因后，自动填充对应的级别
isCreate onChange: async (config?: MesProAndonConfigApi.AndonConfig) => {
? { await formApi?.setValues({
fieldName: 'processId', level: config?.level,
label: '工序', reason: config?.reason,
component: ProProcessSelect as any, });
componentProps: { placeholder: '请选择工序（可选）' },
}
: {
fieldName: 'processName',
label: '工序',
component: 'Input',
componentProps: { disabled: true },
},
isCreate
? {
fieldName: 'configId',
label: '呼叫原因',
component: AndonConfigSelect as any,
componentProps: { onChange: onConfigChange },
rules: 'selectRequired',
}
: {
fieldName: 'reason',
label: '呼叫原因',
component: 'Input',
componentProps: { disabled: true },
}, },
},
rules: 'selectRequired',
},
{ {
fieldName: 'level', fieldName: 'level',
label: '级别', label: '级别',
@ -221,7 +211,7 @@ export function useFormSchema(
placeholder: '由呼叫原因自动带出', placeholder: '由呼叫原因自动带出',
}, },
}, },
// 处置信息：update / detail 才展示 // 处置信息：update / detail 模式才展示
...(isCreate ...(isCreate
? [] ? []
: ([ : ([
@ -231,7 +221,10 @@ export function useFormSchema(
component: 'Select', component: 'Select',
componentProps: { componentProps: {
disabled: true, disabled: true,
options: getDictOptions(DICT_TYPE.MES_PRO_ANDON_STATUS, 'number'), options: getDictOptions(
DICT_TYPE.MES_PRO_ANDON_STATUS,
'number',
),
}, },
}, },
{ {
@ -242,30 +235,24 @@ export function useFormSchema(
class: '!w-full', class: '!w-full',
disabled: !isUpdate, disabled: !isUpdate,
format: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss',
placeholder: isUpdate ? '请选择处置时间' : undefined, placeholder: '请选择处置时间',
type: 'datetime', type: 'datetime',
valueFormat: 'x', valueFormat: 'x',
}, },
}, },
isUpdate {
? { fieldName: 'handlerUserId',
fieldName: 'handlerUserId', label: '处置人',
label: '处置人', component: 'ApiSelect',
component: 'ApiSelect', componentProps: {
componentProps: { api: getSimpleUserList,
api: getSimpleUserList, clearable: true,
clearable: true, disabled: !isUpdate,
labelField: 'nickname', labelField: 'nickname',
placeholder: '请选择处置人', placeholder: '请选择处置人',
valueField: 'id', valueField: 'id',
}, },
} },
: {
fieldName: 'handlerUserNickname',
label: '处置人',
component: 'Input',
componentProps: { disabled: true },
},
] as VbenFormSchema[])), ] as VbenFormSchema[])),
{ {
fieldName: 'remark', fieldName: 'remark',
@ -273,97 +260,10 @@ export function useFormSchema(
component: 'Textarea', component: 'Textarea',
componentProps: { componentProps: {
autosize: { maxRows: 3, minRows: 2 }, autosize: { maxRows: 3, minRows: 2 },
disabled: isDetail, disabled: formType === 'detail',
maxLength: 250, maxLength: 250,
placeholder: '请输入备注', placeholder: '请输入备注',
}, },
}, },
]; ];
} }
/** 安灯配置表格列（弹窗内嵌网格） */
export function useConfigGridColumns(): VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>['columns'] {
return [
{ field: 'reason', title: '呼叫原因', minWidth: 200 },
{
field: 'level',
title: '级别',
width: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MES_PRO_ANDON_LEVEL },
},
},
{ field: 'handlerUserNickname', title: '处置人', width: 140 },
{ field: 'remark', title: '备注', minWidth: 160 },
{
title: '操作',
width: 160,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 安灯配置表单（弹窗内的新增/编辑表单） */
export function useConfigFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: { triggerFields: [''], show: () => false },
},
{
fieldName: 'reason',
label: '呼叫原因',
component: 'Textarea',
componentProps: {
autosize: { maxRows: 3, minRows: 1 },
maxLength: 200,
placeholder: '请输入呼叫原因',
},
rules: z.string().min(1, '呼叫原因不能为空').max(200),
},
{
fieldName: 'level',
label: '级别',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.MES_PRO_ANDON_LEVEL, 'number'),
placeholder: '请选择级别',
},
rules: 'selectRequired',
},
{
fieldName: 'handlerRoleId',
label: '处置角色',
component: 'ApiSelect',
componentProps: {
api: () =>
import('#/api/system/role').then((m) => m.getSimpleRoleList()),
clearable: true,
labelField: 'name',
placeholder: '请选择角色（与处置人至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'handlerUserId',
label: '处置人',
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
clearable: true,
labelField: 'nickname',
placeholder: '请选择处置人（与角色至少填一个）',
valueField: 'id',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Input',
componentProps: { maxLength: 100, placeholder: '请输入备注' },
},
];
}

6
apps/web-ele/src/views/mes/pro/andon/record/index.vue
View File

@ -18,7 +18,7 @@ import {
import { $t } from '#/locales'; import { $t } from '#/locales';
import { MesProAndonStatusEnum } from '#/views/mes/utils/constants'; import { MesProAndonStatusEnum } from '#/views/mes/utils/constants';
import ConfigModal from '../config/modules/config-modal.vue'; import ConfigList from '../config/modules/list.vue';
import { useGridColumns, useGridFormSchema } from './data'; import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue'; import Form from './modules/form.vue';
@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
const configModalRef = ref<InstanceType<typeof ConfigModal>>(); const configModalRef = ref<InstanceType<typeof ConfigList>>();
/** 刷新表格 */ /** 刷新表格 */
function handleRefresh() { function handleRefresh() {
@ -108,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
/> />
</template> </template>
<FormModal @success="handleRefresh" /> <FormModal @success="handleRefresh" />
<ConfigModal ref="configModalRef" /> <ConfigList ref="configModalRef" />
<Grid table-title="安灯呼叫记录"> <Grid table-title="安灯呼叫记录">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction

159
apps/web-ele/src/views/mes/pro/andon/record/modules/form.vue
View File

@ -1,14 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record'; import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { useUserStore } from '@vben/stores'; import { useUserStore } from '@vben/stores';
import { formatDate } from '@vben/utils';
import { ElButton, ElMessage } from 'element-plus'; import { ElButton, ElMessage, ElPopconfirm } from 'element-plus';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
import { import {
@ -21,68 +19,40 @@ import { MesProAndonStatusEnum } from '#/views/mes/utils/constants';
import { useFormSchema } from '../data'; import { useFormSchema } from '../data';
type FormMode = 'create' | 'detail' | 'update';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formType = ref<'create' | 'detail' | 'update'>('create'); const formMode = ref<FormMode>('create'); // 表单模式：新增 / 处置 / 详情
const formData = ref<MesProAndonRecordApi.AndonRecord>({}); const formData = ref<MesProAndonRecordApi.AndonRecord>();
const userStore = useUserStore(); const userStore = useUserStore();
const dialogTitle = computed(() => { const isUpdate = computed(() => formMode.value === 'update'); // 是否处置模式
switch (formType.value) { const getTitle = computed(() => {
case 'create': { if (formMode.value === 'detail') {
return '新增安灯呼叫'; return $t('ui.actionTitle.view', ['安灯呼叫']);
}
case 'detail': {
return '安灯呼叫详情';
}
case 'update': {
return '处置安灯呼叫';
}
default: {
return '安灯呼叫';
}
} }
return formMode.value === 'update'
? $t('ui.actionTitle.edit', ['安灯呼叫'])
: $t('ui.actionTitle.create', ['安灯呼叫']);
}); });
/** 选择呼叫原因后自动填充级别 */
function handleConfigChange(config: MesProAndonConfigApi.AndonConfig | undefined) {
if (!config) {
formApi.setValues({ level: undefined, reason: undefined });
return;
}
formApi.setValues({ level: config.level, reason: config.reason });
}
const [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
commonConfig: { commonConfig: {
componentProps: { class: 'w-full' }, componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 100, labelWidth: 100,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema('create', handleConfigChange), schema: [],
showDefaultActions: false, showDefaultActions: false,
}); });
/** 提交：新增 */ /** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
async function handleCreate() { formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
try {
const data =
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
await createAndonRecord(data);
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
}
/** 处置：保存（保持 ACTIVE） */ /** 处置：保存（保持 ACTIVE 状态） */
async function handleSave() { async function handleSave() {
modalApi.lock(); modalApi.lock();
try { try {
@ -91,7 +61,7 @@ async function handleSave() {
await updateAndonRecord({ await updateAndonRecord({
handlerUserId: values.handlerUserId, handlerUserId: values.handlerUserId,
handleTime: values.handleTime, handleTime: values.handleTime,
id: formData.value.id, id: formData.value?.id,
remark: values.remark, remark: values.remark,
status: MesProAndonStatusEnum.ACTIVE, status: MesProAndonStatusEnum.ACTIVE,
}); });
@ -103,7 +73,7 @@ async function handleSave() {
} }
} }
/** 处置：标记已处置 */ /** 处置：标记已处置（状态变为 HANDLED） */
async function handleFinish() { async function handleFinish() {
const values = const values =
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord; (await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
@ -120,7 +90,7 @@ async function handleFinish() {
await updateAndonRecord({ await updateAndonRecord({
handlerUserId: values.handlerUserId, handlerUserId: values.handlerUserId,
handleTime: values.handleTime, handleTime: values.handleTime,
id: formData.value.id, id: formData.value?.id,
remark: values.remark, remark: values.remark,
status: MesProAndonStatusEnum.HANDLED, status: MesProAndonStatusEnum.HANDLED,
}); });
@ -133,43 +103,62 @@ async function handleFinish() {
} }
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (formMode.value === 'detail') {
await modalApi.close();
return;
}
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
try {
await createAndonRecord(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = {}; formData.value = undefined;
return; return;
} }
const data = modalApi.getData<{ // 加载数据
id?: number; const data = modalApi.getData<{ id?: number; type?: FormMode }>();
type: 'create' | 'detail' | 'update'; formMode.value = data?.type || 'create';
}>(); formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
if (!data) { modalApi.setState({ showConfirmButton: formMode.value === 'create' });
return;
}
formType.value = data.type;
formApi.setState({ schema: useFormSchema(data.type, handleConfigChange) });
await formApi.resetForm(); await formApi.resetForm();
if (formMode.value === 'create') {
if (data.type === 'create') { // 新增时，发起人默认为当前用户
const currentUserId = userStore.userInfo?.id; await formApi.setValues({ userId: userStore.userInfo?.id });
formData.value = { userId: currentUserId };
await formApi.setValues({ userId: currentUserId });
return; return;
} }
if (!data.id) { if (!data?.id) {
return; return;
} }
modalApi.lock(); modalApi.lock();
try { try {
formData.value = await getAndonRecord(data.id); formData.value = await getAndonRecord(data.id);
const initial: MesProAndonRecordApi.AndonRecord = { ...formData.value }; const initial: MesProAndonRecordApi.AndonRecord = { ...formData.value };
if (data.type === 'update') { // 处置模式下，默认填充处置时间和处置人，方便快速保存
if (isUpdate.value) {
if (!initial.handleTime) { if (!initial.handleTime) {
initial.handleTime = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'); initial.handleTime = Date.now();
} }
if (!initial.handlerUserId) { if (!initial.handlerUserId) {
initial.handlerUserId = userStore.userInfo?.id; initial.handlerUserId = userStore.userInfo?.id;
} }
} }
// 设置到 values
await formApi.setValues(initial); await formApi.setValues(initial);
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
@ -179,21 +168,21 @@ const [Modal, modalApi] = useVbenModal({
</script> </script>
<template> <template>
<Modal :title="dialogTitle" class="w-1/2"> <Modal :title="getTitle" class="w-1/2">
<Form /> <Form class="mx-4" />
<template #footer> <template #prepend-footer>
<template v-if="formType === 'create'"> <div v-if="isUpdate" class="flex flex-auto items-center justify-end gap-2">
<ElButton @click="modalApi.close()">取消</ElButton> <ElPopconfirm title="确认保存当前处置进度？" @confirm="handleSave">
<ElButton type="primary" @click="handleCreate">确定</ElButton> <template #reference>
</template> <ElButton type="primary">保存</ElButton>
<template v-else-if="formType === 'update'"> </template>
<ElButton @click="modalApi.close()">关闭</ElButton> </ElPopconfirm>
<ElButton type="primary" @click="handleSave">保存</ElButton> <ElPopconfirm title="确认标记为已处置？" @confirm="handleFinish">
<ElButton type="success" @click="handleFinish">已处置</ElButton> <template #reference>
</template> <ElButton type="success">已处置</ElButton>
<template v-else> </template>
<ElButton @click="modalApi.close()">关闭</ElButton> </ElPopconfirm>
</template> </div>
</template> </template>
</Modal> </Modal>
</template> </template>