From 9c7986d230f83434ead9d4936d93b846870f3cca Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 25 May 2026 23:29:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes)=EF=BC=9A=E5=AE=8C=E6=88=90=E2=80=9C?=
 =?UTF-8?q?=E5=AE=89=E7=81=AF=EF=BC=88pro=5Fandon=EF=BC=89=E2=80=9D?=
 =?UTF-8?q?=E7=9A=84=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/mes/pro/andon/config/index.ts     |   1 -
 .../src/views/mes/pro/andon/config/data.ts    | 111 +++++++
 .../modules/{config-form.vue => form.vue}     |  22 +-
 .../modules/{config-modal.vue => list.vue}    |  66 ++--
 .../src/views/mes/pro/andon/record/data.ts    | 301 ++++++------------
 .../src/views/mes/pro/andon/record/index.vue  |   6 +-
 .../mes/pro/andon/record/modules/form.vue     | 149 ++++-----
 .../src/api/mes/pro/andon/config/index.ts     |  15 +-
 .../src/views/mes/pro/andon/config/data.ts    | 111 +++++++
 .../modules/{config-form.vue => form.vue}     |  22 +-
 .../modules/{config-modal.vue => list.vue}    |  44 +--
 .../src/views/mes/pro/andon/record/data.ts    | 298 ++++++-----------
 .../src/views/mes/pro/andon/record/index.vue  |   6 +-
 .../mes/pro/andon/record/modules/form.vue     | 159 +++++----
 14 files changed, 652 insertions(+), 659 deletions(-)
 create mode 100644 apps/web-antd/src/views/mes/pro/andon/config/data.ts
 rename apps/web-antd/src/views/mes/pro/andon/config/modules/{config-form.vue => form.vue} (85%)
 rename apps/web-antd/src/views/mes/pro/andon/config/modules/{config-modal.vue => list.vue} (59%)
 create mode 100644 apps/web-ele/src/views/mes/pro/andon/config/data.ts
 rename apps/web-ele/src/views/mes/pro/andon/config/modules/{config-form.vue => form.vue} (85%)
 rename apps/web-ele/src/views/mes/pro/andon/config/modules/{config-modal.vue => list.vue} (77%)

diff --git a/apps/web-antd/src/api/mes/pro/andon/config/index.ts b/apps/web-antd/src/api/mes/pro/andon/config/index.ts
index 7a2ac2ad1..d21621877 100644
--- a/apps/web-antd/src/api/mes/pro/andon/config/index.ts
+++ b/apps/web-antd/src/api/mes/pro/andon/config/index.ts
@@ -9,7 +9,6 @@ export namespace MesProAndonConfigApi {
     reason?: string; // 呼叫原因
     level?: number; // 级别
     handlerRoleId?: number; // 处置角色编号
-    handlerRoleName?: string; // 处置角色名称（前端通过角色精简列表回显）
     handlerUserId?: number; // 处置人编号
     handlerUserNickname?: string; // 处置人昵称
     remark?: string; // 备注
diff --git a/apps/web-antd/src/views/mes/pro/andon/config/data.ts b/apps/web-antd/src/views/mes/pro/andon/config/data.ts
new file mode 100644
index 000000000..f8ff65c18
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/andon/config/data.ts
@@ -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: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/pro/andon/config/modules/config-form.vue b/apps/web-antd/src/views/mes/pro/andon/config/modules/form.vue
similarity index 85%
rename from apps/web-antd/src/views/mes/pro/andon/config/modules/config-form.vue
rename to apps/web-antd/src/views/mes/pro/andon/config/modules/form.vue
index 46a6a5ed2..e421a4d31 100644
--- a/apps/web-antd/src/views/mes/pro/andon/config/modules/config-form.vue
+++ b/apps/web-antd/src/views/mes/pro/andon/config/modules/form.vue
@@ -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();
diff --git a/apps/web-antd/src/views/mes/pro/andon/config/modules/config-modal.vue b/apps/web-antd/src/views/mes/pro/andon/config/modules/list.vue
similarity index 59%
rename from apps/web-antd/src/views/mes/pro/andon/config/modules/config-modal.vue
rename to apps/web-antd/src/views/mes/pro/andon/config/modules/list.vue
index 5b01674b6..0b992e320 100644
--- a/apps/web-antd/src/views/mes/pro/andon/config/modules/config-modal.vue
+++ b/apps/web-antd/src/views/mes/pro/andon/config/modules/list.vue
@@ -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="[
diff --git a/apps/web-antd/src/views/mes/pro/andon/record/data.ts b/apps/web-antd/src/views/mes/pro/andon/record/data.ts
index 3badb717b..0a58427b1 100644
--- a/apps/web-antd/src/views/mes/pro/andon/record/data.ts
+++ b/apps/web-antd/src/views/mes/pro/andon/record/data.ts
@@ -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: '请输入备注' },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/mes/pro/andon/record/index.vue b/apps/web-antd/src/views/mes/pro/andon/record/index.vue
index d6d4921d8..c3c819160 100644
--- a/apps/web-antd/src/views/mes/pro/andon/record/index.vue
+++ b/apps/web-antd/src/views/mes/pro/andon/record/index.vue
@@ -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
diff --git a/apps/web-antd/src/views/mes/pro/andon/record/modules/form.vue b/apps/web-antd/src/views/mes/pro/andon/record/modules/form.vue
index 0e43f9b9e..295b2489d 100644
--- a/apps/web-antd/src/views/mes/pro/andon/record/modules/form.vue
+++ b/apps/web-antd/src/views/mes/pro/andon/record/modules/form.vue
@@ -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>
diff --git a/apps/web-ele/src/api/mes/pro/andon/config/index.ts b/apps/web-ele/src/api/mes/pro/andon/config/index.ts
index 317c6cc50..d21621877 100644
--- a/apps/web-ele/src/api/mes/pro/andon/config/index.ts
+++ b/apps/web-ele/src/api/mes/pro/andon/config/index.ts
@@ -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 },
+  );
 }
 
 /** 查询安灯配置列表 */
diff --git a/apps/web-ele/src/views/mes/pro/andon/config/data.ts b/apps/web-ele/src/views/mes/pro/andon/config/data.ts
new file mode 100644
index 000000000..a83f6cef4
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/andon/config/data.ts
@@ -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: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/pro/andon/config/modules/config-form.vue b/apps/web-ele/src/views/mes/pro/andon/config/modules/form.vue
similarity index 85%
rename from apps/web-ele/src/views/mes/pro/andon/config/modules/config-form.vue
rename to apps/web-ele/src/views/mes/pro/andon/config/modules/form.vue
index d411ba9b6..af6b32037 100644
--- a/apps/web-ele/src/views/mes/pro/andon/config/modules/config-form.vue
+++ b/apps/web-ele/src/views/mes/pro/andon/config/modules/form.vue
@@ -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();
diff --git a/apps/web-ele/src/views/mes/pro/andon/config/modules/config-modal.vue b/apps/web-ele/src/views/mes/pro/andon/config/modules/list.vue
similarity index 77%
rename from apps/web-ele/src/views/mes/pro/andon/config/modules/config-modal.vue
rename to apps/web-ele/src/views/mes/pro/andon/config/modules/list.vue
index 13ab75340..ba237cec0 100644
--- a/apps/web-ele/src/views/mes/pro/andon/config/modules/config-modal.vue
+++ b/apps/web-ele/src/views/mes/pro/andon/config/modules/list.vue
@@ -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="[
diff --git a/apps/web-ele/src/views/mes/pro/andon/record/data.ts b/apps/web-ele/src/views/mes/pro/andon/record/data.ts
index 04f85ac3c..a0734a6e0 100644
--- a/apps/web-ele/src/views/mes/pro/andon/record/data.ts
+++ b/apps/web-ele/src/views/mes/pro/andon/record/data.ts
@@ -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: '请输入备注' },
-    },
-  ];
-}
diff --git a/apps/web-ele/src/views/mes/pro/andon/record/index.vue b/apps/web-ele/src/views/mes/pro/andon/record/index.vue
index 68e44734d..aaba8a21d 100644
--- a/apps/web-ele/src/views/mes/pro/andon/record/index.vue
+++ b/apps/web-ele/src/views/mes/pro/andon/record/index.vue
@@ -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
diff --git a/apps/web-ele/src/views/mes/pro/andon/record/modules/form.vue b/apps/web-ele/src/views/mes/pro/andon/record/modules/form.vue
index b7bb6d1ee..518146b5e 100644
--- a/apps/web-ele/src/views/mes/pro/andon/record/modules/form.vue
+++ b/apps/web-ele/src/views/mes/pro/andon/record/modules/form.vue
@@ -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>