feat(mes)：完成“安灯（pro_andon）”的 review
YunaiV
parent
f4e71137e0
commit
9c7986d230
|
|
@ -9,7 +9,6 @@ export namespace MesProAndonConfigApi {
|
|||
reason?: string; // 呼叫原因
|
||||
level?: number; // 级别
|
||||
handlerRoleId?: number; // 处置角色编号
|
||||
handlerRoleName?: string; // 处置角色名称（前端通过角色精简列表回显）
|
||||
handlerUserId?: number; // 处置人编号
|
||||
handlerUserNickname?: string; // 处置人昵称
|
||||
remark?: string; // 备注
|
||||
|
|
|
|||
|
|
@ -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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -15,25 +15,26 @@ import {
|
|||
} from '#/api/mes/pro/andon/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useConfigFormSchema } from '../../record/data';
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<MesProAndonConfigApi.AndonConfig>();
|
||||
|
||||
const getTitle = computed(() =>
|
||||
formData.value?.id
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['安灯配置'])
|
||||
: $t('ui.actionTitle.create', ['安灯配置']),
|
||||
);
|
||||
: $t('ui.actionTitle.create', ['安灯配置']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: { class: 'w-full' },
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 100,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useConfigFormSchema(),
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
|
|
@ -44,6 +45,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data =
|
||||
(await formApi.getValues()) as MesProAndonConfigApi.AndonConfig;
|
||||
if (!data.handlerRoleId && !data.handlerUserId) {
|
||||
|
|
@ -55,6 +57,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
await (formData.value?.id
|
||||
? updateAndonConfig(data)
|
||||
: createAndonConfig(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
|
|
@ -67,7 +70,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
await formApi.resetForm();
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MesProAndonConfigApi.AndonConfig>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
|
|
@ -75,6 +78,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getAndonConfig(data.id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
|
@ -13,67 +11,58 @@ import {
|
|||
deleteAndonConfig,
|
||||
getAndonConfigList,
|
||||
} from '#/api/mes/pro/andon/config';
|
||||
import { getSimpleRoleList } from '#/api/system/role';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useConfigGridColumns } from '../../record/data';
|
||||
import ConfigForm from './config-form.vue';
|
||||
import { useGridColumns } from '../data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const list = ref<MesProAndonConfigApi.AndonConfig[]>([]); // 安灯配置列表（已回填处置角色名称）
|
||||
|
||||
const [ConfigFormModal, configFormModalApi] = useVbenModal({
|
||||
connectedComponent: ConfigForm,
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
// TODO @AI：这个格式，是不是有问题？应该要换行？看看别的模块也是；
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
autoResize: true,
|
||||
border: true,
|
||||
columns: useConfigGridColumns(),
|
||||
data: list.value,
|
||||
columns: useGridColumns(),
|
||||
minHeight: 320,
|
||||
pagerConfig: { enabled: false },
|
||||
rowConfig: { isHover: true, keyField: 'id' },
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
isHover: true,
|
||||
keyField: 'id',
|
||||
},
|
||||
showOverflow: true,
|
||||
toolbarConfig: { enabled: false },
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
} as VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>,
|
||||
});
|
||||
|
||||
/** 加载安灯配置列表，并通过角色精简列表回填处置角色名称 */
|
||||
// TODO @AI：这里需要 getAndonConfigList、getSimpleRoleList 么？通过 data.ts 里处理，是不是更主流？？？
|
||||
/** 加载安灯配置列表 */
|
||||
async function getList() {
|
||||
gridApi.setLoading(true);
|
||||
try {
|
||||
const [configList, roleList] = await Promise.all([
|
||||
getAndonConfigList(),
|
||||
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 });
|
||||
const data = (await getAndonConfigList()) || [];
|
||||
gridApi.setGridOptions({ data });
|
||||
} finally {
|
||||
gridApi.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/** 新增配置 */
|
||||
/** 创建安灯配置 */
|
||||
function handleCreate() {
|
||||
configFormModalApi.setData({}).open();
|
||||
formModalApi.setData({}).open();
|
||||
}
|
||||
|
||||
/** 编辑配置 */
|
||||
/** 编辑安灯配置 */
|
||||
function handleEdit(row: MesProAndonConfigApi.AndonConfig) {
|
||||
configFormModalApi.setData({ id: row.id }).open();
|
||||
formModalApi.setData({ id: row.id }).open();
|
||||
}
|
||||
|
||||
/** 删除配置 */
|
||||
/** 删除安灯配置 */
|
||||
async function handleDelete(row: MesProAndonConfigApi.AndonConfig) {
|
||||
await deleteAndonConfig(row.id!);
|
||||
message.success($t('ui.actionMessage.deleteSuccess', ['安灯配置']));
|
||||
|
|
@ -93,8 +82,13 @@ defineExpose({ open: () => modalApi.open() });
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show-cancel-button="false" :show-confirm-button="false" class="w-3/5" title="安灯设置">
|
||||
<ConfigFormModal @success="getList" />
|
||||
<Modal
|
||||
: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">
|
||||
<TableAction
|
||||
:actions="[
|
||||
|
|
@ -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 { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
|
||||
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
|
||||
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
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';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
import { MdWorkstationSelect } from '#/views/mes/md/workstation/components';
|
||||
import { ProProcessSelect } from '#/views/mes/pro/process/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';
|
||||
|
||||
/** 列表搜索表单 */
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'workstationId',
|
||||
label: '工作站',
|
||||
component: MdWorkstationSelect as any,
|
||||
componentProps: { allowClear: true, placeholder: '请选择工作站' },
|
||||
component: markRaw(MdWorkstationSelect),
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择工作站',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'userId',
|
||||
|
|
@ -64,20 +68,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
|||
label: '发起时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
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'] {
|
||||
return [
|
||||
{ field: 'workstationCode', title: '工作站编码', width: 140 },
|
||||
|
|
@ -126,96 +124,83 @@ export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.Andon
|
|||
];
|
||||
}
|
||||
|
||||
/** 安灯记录表单（按表单类型动态切换字段） */
|
||||
/**
|
||||
* 新增/处置/详情安灯呼叫记录的表单
|
||||
*
|
||||
* - create：录入呼叫主体信息（工作站/发起人/工单/工序/呼叫原因/备注）
|
||||
* - update：呼叫主体信息只读，编辑处置时间/处置人/备注
|
||||
* - detail：所有字段只读
|
||||
*/
|
||||
export function useFormSchema(
|
||||
formType: 'create' | 'detail' | 'update',
|
||||
onConfigChange?: (config: MesProAndonConfigApi.AndonConfig | undefined) => void,
|
||||
formType: string,
|
||||
formApi?: VbenFormApi,
|
||||
): VbenFormSchema[] {
|
||||
const isCreate = formType === 'create';
|
||||
const isUpdate = formType === 'update';
|
||||
const isDetail = formType === 'detail';
|
||||
return [
|
||||
{
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: { triggerFields: [''], show: () => false },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'workstationId',
|
||||
label: '工作站',
|
||||
component: MdWorkstationSelect as any,
|
||||
componentProps: { placeholder: '请选择工作站' },
|
||||
rules: 'selectRequired',
|
||||
}
|
||||
: {
|
||||
fieldName: 'workstationName',
|
||||
label: '工作站',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'userId',
|
||||
label: '发起人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: getSimpleUserList,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择发起人',
|
||||
valueField: 'id',
|
||||
},
|
||||
}
|
||||
: {
|
||||
fieldName: 'userNickname',
|
||||
label: '发起人',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'workOrderId',
|
||||
label: '生产工单',
|
||||
component: ProWorkOrderSelect as any,
|
||||
componentProps: {
|
||||
placeholder: '请选择工单（可选）',
|
||||
status: MesProWorkOrderStatusEnum.CONFIRMED,
|
||||
},
|
||||
}
|
||||
: {
|
||||
fieldName: 'workOrderCode',
|
||||
label: '生产工单',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'processId',
|
||||
label: '工序',
|
||||
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 },
|
||||
{
|
||||
fieldName: 'workstationId',
|
||||
label: '工作站',
|
||||
component: markRaw(MdWorkstationSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
placeholder: '请选择工作站',
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
fieldName: 'userId',
|
||||
label: '发起人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: getSimpleUserList,
|
||||
disabled: !isCreate,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择发起人',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'workOrderId',
|
||||
label: '生产工单',
|
||||
component: markRaw(ProWorkOrderSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
placeholder: '请选择工单（可选）',
|
||||
status: MesProWorkOrderStatusEnum.CONFIRMED,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'processId',
|
||||
label: '工序',
|
||||
component: markRaw(ProProcessSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
placeholder: '请选择工序（可选）',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'configId',
|
||||
label: '呼叫原因',
|
||||
component: markRaw(AndonConfigSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
// 选择呼叫原因后，自动填充对应的级别
|
||||
onChange: async (config?: MesProAndonConfigApi.AndonConfig) => {
|
||||
await formApi?.setValues({
|
||||
level: config?.level,
|
||||
reason: config?.reason,
|
||||
});
|
||||
},
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
fieldName: 'level',
|
||||
label: '级别',
|
||||
|
|
@ -226,7 +211,7 @@ export function useFormSchema(
|
|||
placeholder: '由呼叫原因自动带出',
|
||||
},
|
||||
},
|
||||
// 处置信息：update / detail 才展示
|
||||
// 处置信息：update / detail 模式才展示
|
||||
...(isCreate
|
||||
? []
|
||||
: ([
|
||||
|
|
@ -236,7 +221,10 @@ export function useFormSchema(
|
|||
component: 'Select',
|
||||
componentProps: {
|
||||
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: {
|
||||
disabled: !isUpdate,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
placeholder: isUpdate ? '请选择处置时间' : undefined,
|
||||
placeholder: '请选择处置时间',
|
||||
showTime: true,
|
||||
valueFormat: 'x',
|
||||
},
|
||||
},
|
||||
isUpdate
|
||||
? {
|
||||
fieldName: 'handlerUserId',
|
||||
label: '处置人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: getSimpleUserList,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择处置人',
|
||||
valueField: 'id',
|
||||
},
|
||||
}
|
||||
: {
|
||||
fieldName: 'handlerUserNickname',
|
||||
label: '处置人',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
{
|
||||
fieldName: 'handlerUserId',
|
||||
label: '处置人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: getSimpleUserList,
|
||||
disabled: !isUpdate,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择处置人',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
] as VbenFormSchema[])),
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
disabled: isDetail,
|
||||
disabled: formType === 'detail',
|
||||
maxLength: 250,
|
||||
placeholder: '请输入备注',
|
||||
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: '请输入备注' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
import { $t } from '#/locales';
|
||||
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 Form from './modules/form.vue';
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
|
|||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const configModalRef = ref<InstanceType<typeof ConfigModal>>();
|
||||
const configModalRef = ref<InstanceType<typeof ConfigList>>();
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
|
|
@ -109,7 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
/>
|
||||
</template>
|
||||
<FormModal @success="handleRefresh" />
|
||||
<ConfigModal ref="configModalRef" />
|
||||
<ConfigList ref="configModalRef" />
|
||||
<Grid table-title="安灯呼叫记录">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
|
||||
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
|
@ -7,7 +6,7 @@ import { computed, ref } from 'vue';
|
|||
import { useVbenModal } from '@vben/common-ui';
|
||||
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 {
|
||||
|
|
@ -20,69 +19,40 @@ import { MesProAndonStatusEnum } from '#/views/mes/utils/constants';
|
|||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
type FormMode = 'create' | 'detail' | 'update';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formType = ref<'create' | 'detail' | 'update'>('create'); // 表单当前模式：新增 / 处置 / 详情
|
||||
const formMode = ref<FormMode>('create'); // 表单模式：新增 / 处置 / 详情
|
||||
const formData = ref<MesProAndonRecordApi.AndonRecord>();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
switch (formType.value) {
|
||||
case 'create': {
|
||||
return '新增安灯呼叫';
|
||||
}
|
||||
case 'detail': {
|
||||
return '安灯呼叫详情';
|
||||
}
|
||||
case 'update': {
|
||||
return '处置安灯呼叫';
|
||||
}
|
||||
default: {
|
||||
return '安灯呼叫';
|
||||
}
|
||||
const isUpdate = computed(() => formMode.value === 'update'); // 是否处置模式
|
||||
const getTitle = computed(() => {
|
||||
if (formMode.value === 'detail') {
|
||||
return $t('ui.actionTitle.view', ['安灯呼叫']);
|
||||
}
|
||||
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({
|
||||
commonConfig: {
|
||||
componentProps: { class: 'w-full' },
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 100,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema('create', handleConfigChange),
|
||||
schema: [],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
/** 提交：新增 */
|
||||
async function handleCreate() {
|
||||
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();
|
||||
}
|
||||
}
|
||||
/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
|
||||
formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
|
||||
|
||||
/** 处置：保存（保持 ACTIVE） */
|
||||
// TODO @AI：这里写下注释；
|
||||
/** 处置：保存（保持 ACTIVE 状态） */
|
||||
async function handleSave() {
|
||||
modalApi.lock();
|
||||
try {
|
||||
|
|
@ -103,8 +73,7 @@ async function handleSave() {
|
|||
}
|
||||
}
|
||||
|
||||
/** 处置：标记已处置 */
|
||||
// TODO @AI：这里写下注释；
|
||||
/** 处置：标记已处置（状态变为 HANDLED） */
|
||||
async function handleFinish() {
|
||||
const values =
|
||||
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
|
||||
|
|
@ -133,34 +102,47 @@ async function handleFinish() {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO @AI：这里的代码风格？！！
|
||||
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) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
const data = modalApi.getData<{
|
||||
id?: number;
|
||||
type: 'create' | 'detail' | 'update';
|
||||
}>();
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
formType.value = data.type;
|
||||
// 重新挂载 schema，以便按 type 切换字段表现
|
||||
formApi.setState({ schema: useFormSchema(data.type, handleConfigChange) });
|
||||
// 加载数据
|
||||
const data = modalApi.getData<{ id?: number; type?: FormMode }>();
|
||||
formMode.value = data?.type || 'create';
|
||||
formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
|
||||
modalApi.setState({ showConfirmButton: formMode.value === 'create' });
|
||||
await formApi.resetForm();
|
||||
|
||||
if (data.type === 'create') {
|
||||
// 新增时默认填发起人为当前用户
|
||||
const currentUserId = userStore.userInfo?.id;
|
||||
formData.value = { userId: currentUserId };
|
||||
await formApi.setValues({ userId: currentUserId });
|
||||
if (formMode.value === 'create') {
|
||||
// 新增时，发起人默认为当前用户
|
||||
await formApi.setValues({ userId: userStore.userInfo?.id });
|
||||
return;
|
||||
}
|
||||
// 处置 / 详情：加载详情
|
||||
if (!data.id) {
|
||||
if (!data?.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
|
|
@ -168,7 +150,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
formData.value = await getAndonRecord(data.id);
|
||||
const initial: MesProAndonRecordApi.AndonRecord = { ...formData.value };
|
||||
// 处置模式下，默认填充处置时间和处置人，方便快速保存
|
||||
if (data.type === 'update') {
|
||||
if (isUpdate.value) {
|
||||
if (!initial.handleTime) {
|
||||
initial.handleTime = Date.now();
|
||||
}
|
||||
|
|
@ -176,6 +158,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
initial.handlerUserId = userStore.userInfo?.id;
|
||||
}
|
||||
}
|
||||
// 设置到 values
|
||||
await formApi.setValues(initial);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
|
|
@ -185,21 +168,17 @@ const [Modal, modalApi] = useVbenModal({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="dialogTitle" class="w-1/2">
|
||||
<Form />
|
||||
<template #footer>
|
||||
<template v-if="formType === 'create'">
|
||||
<Button @click="modalApi.close()">取消</Button>
|
||||
<Button type="primary" @click="handleCreate">确定</Button>
|
||||
</template>
|
||||
<template v-else-if="formType === 'update'">
|
||||
<Button @click="modalApi.close()">关闭</Button>
|
||||
<Button type="primary" @click="handleSave">保存</Button>
|
||||
<Button type="primary" danger @click="handleFinish">已处置</Button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Button @click="modalApi.close()">关闭</Button>
|
||||
</template>
|
||||
<Modal :title="getTitle" class="w-1/2">
|
||||
<Form class="mx-4" />
|
||||
<template #prepend-footer>
|
||||
<div v-if="isUpdate" class="flex flex-auto items-center justify-end gap-2">
|
||||
<Popconfirm title="确认保存当前处置进度？" @confirm="handleSave">
|
||||
<Button type="primary">保存</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm title="确认标记为已处置？" @confirm="handleFinish">
|
||||
<Button danger type="primary">已处置</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,26 @@
|
|||
import type { PageParam, PageResult } from '@vben/request';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace MesProAndonConfigApi {
|
||||
/** MES 安灯配置 */
|
||||
export interface AndonConfig {
|
||||
id?: number;
|
||||
id?: number; // 编号
|
||||
reason?: string; // 呼叫原因
|
||||
level?: number; // 级别
|
||||
handlerRoleId?: number; // 处置角色编号
|
||||
handlerUserId?: number; // 处置人编号
|
||||
handlerUserNickname?: string; // 处置人姓名（详情回显）
|
||||
remark?: string;
|
||||
handlerUserNickname?: string; // 处置人昵称
|
||||
remark?: string; // 备注
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询安灯配置分页 */
|
||||
export function getAndonConfigPage(params: any) {
|
||||
return requestClient.get('/mes/pro/andon-config/page', { params });
|
||||
export function getAndonConfigPage(params: PageParam) {
|
||||
return requestClient.get<PageResult<MesProAndonConfigApi.AndonConfig>>(
|
||||
'/mes/pro/andon-config/page',
|
||||
{ params },
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询安灯配置列表 */
|
||||
|
|
|
|||
|
|
@ -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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -15,25 +15,26 @@ import {
|
|||
} from '#/api/mes/pro/andon/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useConfigFormSchema } from '../../record/data';
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<MesProAndonConfigApi.AndonConfig>();
|
||||
|
||||
const getTitle = computed(() =>
|
||||
formData.value?.id
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['安灯配置'])
|
||||
: $t('ui.actionTitle.create', ['安灯配置']),
|
||||
);
|
||||
: $t('ui.actionTitle.create', ['安灯配置']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: { class: 'w-full' },
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 100,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useConfigFormSchema(),
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
|
|
@ -44,6 +45,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
// 提交表单
|
||||
const data =
|
||||
(await formApi.getValues()) as MesProAndonConfigApi.AndonConfig;
|
||||
if (!data.handlerRoleId && !data.handlerUserId) {
|
||||
|
|
@ -55,6 +57,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
await (formData.value?.id
|
||||
? updateAndonConfig(data)
|
||||
: createAndonConfig(data));
|
||||
// 关闭并提示
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
|
|
@ -67,7 +70,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
await formApi.resetForm();
|
||||
// 加载数据
|
||||
const data = modalApi.getData<MesProAndonConfigApi.AndonConfig>();
|
||||
if (!data || !data.id) {
|
||||
return;
|
||||
|
|
@ -75,6 +78,7 @@ const [Modal, modalApi] = useVbenModal({
|
|||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getAndonConfig(data.id);
|
||||
// 设置到 values
|
||||
await formApi.setValues(formData.value);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
|
@ -15,13 +13,11 @@ import {
|
|||
} from '#/api/mes/pro/andon/config';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useConfigGridColumns } from '../../record/data';
|
||||
import ConfigForm from './config-form.vue';
|
||||
import { useGridColumns } from '../data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const list = ref<MesProAndonConfigApi.AndonConfig[]>([]);
|
||||
|
||||
const [ConfigFormModal, configFormModalApi] = useVbenModal({
|
||||
connectedComponent: ConfigForm,
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
|
|
@ -29,13 +25,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
gridOptions: {
|
||||
autoResize: true,
|
||||
border: true,
|
||||
columns: useConfigGridColumns(),
|
||||
data: list.value,
|
||||
columns: useGridColumns(),
|
||||
minHeight: 320,
|
||||
pagerConfig: { enabled: false },
|
||||
rowConfig: { isHover: true, keyField: 'id' },
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
rowConfig: {
|
||||
isHover: true,
|
||||
keyField: 'id',
|
||||
},
|
||||
showOverflow: true,
|
||||
toolbarConfig: { enabled: false },
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
} as VxeTableGridOptions<MesProAndonConfigApi.AndonConfig>,
|
||||
});
|
||||
|
||||
|
|
@ -43,24 +45,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
async function getList() {
|
||||
gridApi.setLoading(true);
|
||||
try {
|
||||
list.value = (await getAndonConfigList()) || [];
|
||||
gridApi.setGridOptions({ data: list.value });
|
||||
const data = (await getAndonConfigList()) || [];
|
||||
gridApi.setGridOptions({ data });
|
||||
} finally {
|
||||
gridApi.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/** 新增配置 */
|
||||
/** 创建安灯配置 */
|
||||
function handleCreate() {
|
||||
configFormModalApi.setData({}).open();
|
||||
formModalApi.setData({}).open();
|
||||
}
|
||||
|
||||
/** 编辑配置 */
|
||||
/** 编辑安灯配置 */
|
||||
function handleEdit(row: MesProAndonConfigApi.AndonConfig) {
|
||||
configFormModalApi.setData({ id: row.id }).open();
|
||||
formModalApi.setData({ id: row.id }).open();
|
||||
}
|
||||
|
||||
/** 删除配置 */
|
||||
/** 删除安灯配置 */
|
||||
async function handleDelete(row: MesProAndonConfigApi.AndonConfig) {
|
||||
await deleteAndonConfig(row.id!);
|
||||
ElMessage.success($t('ui.actionMessage.deleteSuccess', ['安灯配置']));
|
||||
|
|
@ -86,7 +88,7 @@ defineExpose({ open: () => modalApi.open() });
|
|||
class="w-3/5"
|
||||
title="安灯设置"
|
||||
>
|
||||
<ConfigFormModal @success="getList" />
|
||||
<FormModal @success="getList" />
|
||||
<div class="mb-3 flex items-center justify-start">
|
||||
<TableAction
|
||||
:actions="[
|
||||
|
|
@ -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 { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
|
||||
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
|
||||
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import { getRangePickerDefaultProps } from '#/utils';
|
||||
import { MdWorkstationSelect } from '#/views/mes/md/workstation/components';
|
||||
import { ProProcessSelect } from '#/views/mes/pro/process/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';
|
||||
|
||||
/** 列表搜索表单 */
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'workstationId',
|
||||
label: '工作站',
|
||||
component: MdWorkstationSelect as any,
|
||||
componentProps: { clearable: true, placeholder: '请选择工作站' },
|
||||
component: markRaw(MdWorkstationSelect),
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请选择工作站',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'userId',
|
||||
|
|
@ -61,18 +66,16 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
|||
{
|
||||
fieldName: 'createTime',
|
||||
label: '发起时间',
|
||||
component: 'DatePicker',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
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'] {
|
||||
return [
|
||||
{ field: 'workstationCode', title: '工作站编码', width: 140 },
|
||||
|
|
@ -121,96 +124,83 @@ export function useGridColumns(): VxeTableGridOptions<MesProAndonRecordApi.Andon
|
|||
];
|
||||
}
|
||||
|
||||
/** 安灯记录表单（按表单类型动态切换字段） */
|
||||
/**
|
||||
* 新增/处置/详情安灯呼叫记录的表单
|
||||
*
|
||||
* - create：录入呼叫主体信息（工作站/发起人/工单/工序/呼叫原因/备注）
|
||||
* - update：呼叫主体信息只读，编辑处置时间/处置人/备注
|
||||
* - detail：所有字段只读
|
||||
*/
|
||||
export function useFormSchema(
|
||||
formType: 'create' | 'detail' | 'update',
|
||||
onConfigChange?: (config: MesProAndonConfigApi.AndonConfig | undefined) => void,
|
||||
formType: string,
|
||||
formApi?: VbenFormApi,
|
||||
): VbenFormSchema[] {
|
||||
const isCreate = formType === 'create';
|
||||
const isUpdate = formType === 'update';
|
||||
const isDetail = formType === 'detail';
|
||||
return [
|
||||
{
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: { triggerFields: [''], show: () => false },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'workstationId',
|
||||
label: '工作站',
|
||||
component: MdWorkstationSelect as any,
|
||||
componentProps: { placeholder: '请选择工作站' },
|
||||
rules: 'selectRequired',
|
||||
}
|
||||
: {
|
||||
fieldName: 'workstationName',
|
||||
label: '工作站',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'userId',
|
||||
label: '发起人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleUserList,
|
||||
clearable: true,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择发起人',
|
||||
valueField: 'id',
|
||||
},
|
||||
}
|
||||
: {
|
||||
fieldName: 'userNickname',
|
||||
label: '发起人',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'workOrderId',
|
||||
label: '生产工单',
|
||||
component: ProWorkOrderSelect as any,
|
||||
componentProps: {
|
||||
placeholder: '请选择工单（可选）',
|
||||
status: MesProWorkOrderStatusEnum.CONFIRMED,
|
||||
},
|
||||
}
|
||||
: {
|
||||
fieldName: 'workOrderCode',
|
||||
label: '生产工单',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
isCreate
|
||||
? {
|
||||
fieldName: 'processId',
|
||||
label: '工序',
|
||||
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 },
|
||||
{
|
||||
fieldName: 'workstationId',
|
||||
label: '工作站',
|
||||
component: markRaw(MdWorkstationSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
placeholder: '请选择工作站',
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
fieldName: 'userId',
|
||||
label: '发起人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleUserList,
|
||||
clearable: true,
|
||||
disabled: !isCreate,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择发起人',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'workOrderId',
|
||||
label: '生产工单',
|
||||
component: markRaw(ProWorkOrderSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
placeholder: '请选择工单（可选）',
|
||||
status: MesProWorkOrderStatusEnum.CONFIRMED,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'processId',
|
||||
label: '工序',
|
||||
component: markRaw(ProProcessSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
placeholder: '请选择工序（可选）',
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'configId',
|
||||
label: '呼叫原因',
|
||||
component: markRaw(AndonConfigSelect),
|
||||
componentProps: {
|
||||
disabled: !isCreate,
|
||||
// 选择呼叫原因后，自动填充对应的级别
|
||||
onChange: async (config?: MesProAndonConfigApi.AndonConfig) => {
|
||||
await formApi?.setValues({
|
||||
level: config?.level,
|
||||
reason: config?.reason,
|
||||
});
|
||||
},
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
fieldName: 'level',
|
||||
label: '级别',
|
||||
|
|
@ -221,7 +211,7 @@ export function useFormSchema(
|
|||
placeholder: '由呼叫原因自动带出',
|
||||
},
|
||||
},
|
||||
// 处置信息：update / detail 才展示
|
||||
// 处置信息：update / detail 模式才展示
|
||||
...(isCreate
|
||||
? []
|
||||
: ([
|
||||
|
|
@ -231,7 +221,10 @@ export function useFormSchema(
|
|||
component: 'Select',
|
||||
componentProps: {
|
||||
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',
|
||||
disabled: !isUpdate,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
placeholder: isUpdate ? '请选择处置时间' : undefined,
|
||||
placeholder: '请选择处置时间',
|
||||
type: 'datetime',
|
||||
valueFormat: 'x',
|
||||
},
|
||||
},
|
||||
isUpdate
|
||||
? {
|
||||
fieldName: 'handlerUserId',
|
||||
label: '处置人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleUserList,
|
||||
clearable: true,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择处置人',
|
||||
valueField: 'id',
|
||||
},
|
||||
}
|
||||
: {
|
||||
fieldName: 'handlerUserNickname',
|
||||
label: '处置人',
|
||||
component: 'Input',
|
||||
componentProps: { disabled: true },
|
||||
},
|
||||
{
|
||||
fieldName: 'handlerUserId',
|
||||
label: '处置人',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: getSimpleUserList,
|
||||
clearable: true,
|
||||
disabled: !isUpdate,
|
||||
labelField: 'nickname',
|
||||
placeholder: '请选择处置人',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
] as VbenFormSchema[])),
|
||||
{
|
||||
fieldName: 'remark',
|
||||
|
|
@ -273,97 +260,10 @@ export function useFormSchema(
|
|||
component: 'Textarea',
|
||||
componentProps: {
|
||||
autosize: { maxRows: 3, minRows: 2 },
|
||||
disabled: isDetail,
|
||||
disabled: formType === 'detail',
|
||||
maxLength: 250,
|
||||
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: '请输入备注' },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
import { $t } from '#/locales';
|
||||
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 Form from './modules/form.vue';
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
|
|||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const configModalRef = ref<InstanceType<typeof ConfigModal>>();
|
||||
const configModalRef = ref<InstanceType<typeof ConfigList>>();
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
|
|
@ -108,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
/>
|
||||
</template>
|
||||
<FormModal @success="handleRefresh" />
|
||||
<ConfigModal ref="configModalRef" />
|
||||
<ConfigList ref="configModalRef" />
|
||||
<Grid table-title="安灯呼叫记录">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<script lang="ts" setup>
|
||||
import type { MesProAndonConfigApi } from '#/api/mes/pro/andon/config';
|
||||
import type { MesProAndonRecordApi } from '#/api/mes/pro/andon/record';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
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 {
|
||||
|
|
@ -21,68 +19,40 @@ import { MesProAndonStatusEnum } from '#/views/mes/utils/constants';
|
|||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
type FormMode = 'create' | 'detail' | 'update';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formType = ref<'create' | 'detail' | 'update'>('create');
|
||||
const formData = ref<MesProAndonRecordApi.AndonRecord>({});
|
||||
const formMode = ref<FormMode>('create'); // 表单模式：新增 / 处置 / 详情
|
||||
const formData = ref<MesProAndonRecordApi.AndonRecord>();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
switch (formType.value) {
|
||||
case 'create': {
|
||||
return '新增安灯呼叫';
|
||||
}
|
||||
case 'detail': {
|
||||
return '安灯呼叫详情';
|
||||
}
|
||||
case 'update': {
|
||||
return '处置安灯呼叫';
|
||||
}
|
||||
default: {
|
||||
return '安灯呼叫';
|
||||
}
|
||||
const isUpdate = computed(() => formMode.value === 'update'); // 是否处置模式
|
||||
const getTitle = computed(() => {
|
||||
if (formMode.value === 'detail') {
|
||||
return $t('ui.actionTitle.view', ['安灯呼叫']);
|
||||
}
|
||||
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({
|
||||
commonConfig: {
|
||||
componentProps: { class: 'w-full' },
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 100,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema('create', handleConfigChange),
|
||||
schema: [],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
/** 提交：新增 */
|
||||
async function handleCreate() {
|
||||
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();
|
||||
}
|
||||
}
|
||||
/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
|
||||
formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
|
||||
|
||||
/** 处置：保存（保持 ACTIVE） */
|
||||
/** 处置：保存（保持 ACTIVE 状态） */
|
||||
async function handleSave() {
|
||||
modalApi.lock();
|
||||
try {
|
||||
|
|
@ -91,7 +61,7 @@ async function handleSave() {
|
|||
await updateAndonRecord({
|
||||
handlerUserId: values.handlerUserId,
|
||||
handleTime: values.handleTime,
|
||||
id: formData.value.id,
|
||||
id: formData.value?.id,
|
||||
remark: values.remark,
|
||||
status: MesProAndonStatusEnum.ACTIVE,
|
||||
});
|
||||
|
|
@ -103,7 +73,7 @@ async function handleSave() {
|
|||
}
|
||||
}
|
||||
|
||||
/** 处置：标记已处置 */
|
||||
/** 处置：标记已处置（状态变为 HANDLED） */
|
||||
async function handleFinish() {
|
||||
const values =
|
||||
(await formApi.getValues()) as MesProAndonRecordApi.AndonRecord;
|
||||
|
|
@ -120,7 +90,7 @@ async function handleFinish() {
|
|||
await updateAndonRecord({
|
||||
handlerUserId: values.handlerUserId,
|
||||
handleTime: values.handleTime,
|
||||
id: formData.value.id,
|
||||
id: formData.value?.id,
|
||||
remark: values.remark,
|
||||
status: MesProAndonStatusEnum.HANDLED,
|
||||
});
|
||||
|
|
@ -133,43 +103,62 @@ async function handleFinish() {
|
|||
}
|
||||
|
||||
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) {
|
||||
if (!isOpen) {
|
||||
formData.value = {};
|
||||
formData.value = undefined;
|
||||
return;
|
||||
}
|
||||
const data = modalApi.getData<{
|
||||
id?: number;
|
||||
type: 'create' | 'detail' | 'update';
|
||||
}>();
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
formType.value = data.type;
|
||||
formApi.setState({ schema: useFormSchema(data.type, handleConfigChange) });
|
||||
// 加载数据
|
||||
const data = modalApi.getData<{ id?: number; type?: FormMode }>();
|
||||
formMode.value = data?.type || 'create';
|
||||
formApi.setState({ schema: useFormSchema(formMode.value, formApi) });
|
||||
modalApi.setState({ showConfirmButton: formMode.value === 'create' });
|
||||
await formApi.resetForm();
|
||||
|
||||
if (data.type === 'create') {
|
||||
const currentUserId = userStore.userInfo?.id;
|
||||
formData.value = { userId: currentUserId };
|
||||
await formApi.setValues({ userId: currentUserId });
|
||||
if (formMode.value === 'create') {
|
||||
// 新增时，发起人默认为当前用户
|
||||
await formApi.setValues({ userId: userStore.userInfo?.id });
|
||||
return;
|
||||
}
|
||||
if (!data.id) {
|
||||
if (!data?.id) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getAndonRecord(data.id);
|
||||
const initial: MesProAndonRecordApi.AndonRecord = { ...formData.value };
|
||||
if (data.type === 'update') {
|
||||
// 处置模式下，默认填充处置时间和处置人，方便快速保存
|
||||
if (isUpdate.value) {
|
||||
if (!initial.handleTime) {
|
||||
initial.handleTime = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
|
||||
initial.handleTime = Date.now();
|
||||
}
|
||||
if (!initial.handlerUserId) {
|
||||
initial.handlerUserId = userStore.userInfo?.id;
|
||||
}
|
||||
}
|
||||
// 设置到 values
|
||||
await formApi.setValues(initial);
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
|
|
@ -179,21 +168,21 @@ const [Modal, modalApi] = useVbenModal({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="dialogTitle" class="w-1/2">
|
||||
<Form />
|
||||
<template #footer>
|
||||
<template v-if="formType === 'create'">
|
||||
<ElButton @click="modalApi.close()">取消</ElButton>
|
||||
<ElButton type="primary" @click="handleCreate">确定</ElButton>
|
||||
</template>
|
||||
<template v-else-if="formType === 'update'">
|
||||
<ElButton @click="modalApi.close()">关闭</ElButton>
|
||||
<ElButton type="primary" @click="handleSave">保存</ElButton>
|
||||
<ElButton type="success" @click="handleFinish">已处置</ElButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ElButton @click="modalApi.close()">关闭</ElButton>
|
||||
</template>
|
||||
<Modal :title="getTitle" class="w-1/2">
|
||||
<Form class="mx-4" />
|
||||
<template #prepend-footer>
|
||||
<div v-if="isUpdate" class="flex flex-auto items-center justify-end gap-2">
|
||||
<ElPopconfirm title="确认保存当前处置进度？" @confirm="handleSave">
|
||||
<template #reference>
|
||||
<ElButton type="primary">保存</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<ElPopconfirm title="确认标记为已处置？" @confirm="handleFinish">
|
||||
<template #reference>
|
||||
<ElButton type="success">已处置</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue