feat(@vben/web-antd): erp-stock-in 优化库存入库模块

- 为表格列设置 minWidth 以优化布局 - 使用 Popconfirm组件替代 Modal 确认框 - 通过 message 组件展示操作结果 - 优化删除和审核操作的处理流程 - 引入 useVbenModal 优化表单弹窗
2025-08-01 16:11:05 +08:00 · 2025-08-01 16:11:05 +08:00 · 3afd957713
parent 510ec12582
commit 3afd957713
3 changed files with 71 additions and 43 deletions
--- a/apps/web-antd/src/views/erp/stock/in/data.ts
+++ b/apps/web-antd/src/views/erp/stock/in/data.ts
@ -281,12 +281,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'supplierName',
      title: '供应商',
-      width: 120,
+      minWidth: 120,
    },
    {
      field: 'inTime',
      title: '入库时间',
-      width: 180,
+      minWidth: 180,
      cellRender: {
        name: 'CellDateTime',
      },
@ -294,12 +294,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'creatorName',
      title: '创建人',
-      width: 100,
+      minWidth: 100,
    },
    {
      field: 'totalCount',
      title: '数量',
-      width: 100,
+      minWidth: 100,
      cellRender: {
        name: 'CellAmount',
        props: {
@ -310,7 +310,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'totalPrice',
      title: '金额',
-      width: 120,
+      minWidth: 120,
      cellRender: {
        name: 'CellAmount',
        props: {
@ -321,7 +321,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'status',
      title: '状态',
-      width: 90,
+      minWidth: 90,
      fixed: 'right',
      cellRender: {
        name: 'CellDict',
@ -330,7 +330,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    },
    {
      title: '操作',
-      width: 220,
+      width: 300,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-antd/src/views/erp/stock/in/index.vue
+++ b/apps/web-antd/src/views/erp/stock/in/index.vue
@ -2,12 +2,10 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { ErpStockInApi } from '#/api/erp/stock/in';

-import { ref } from 'vue';
-
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';

-import { message, Modal } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@ -24,7 +22,10 @@ import StockInForm from './modules/form.vue';
 /** 其它入库单管理 */
 defineOptions({ name: 'ErpStockIn' });

-const formRef = ref();
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: StockInForm,
+  destroyOnClose: true,
+});

 /** 刷新表格 */
 function onRefresh() {
@ -39,34 +40,46 @@ async function handleExport() {

 /** 新增/编辑/详情 */
 function openForm(type: string, id?: number) {
-  formRef.value?.modalApi.open({ type, id });
+  formModalApi.setData({ type, id }).open();
 }

 /** 删除 */
-function handleDelete(ids: any[]) {
-  Modal.confirm({
-    title: '系统提示',
-    content: `是否确认删除编号为 ${ids.join(',')} 的其它入库单？`,
-    onOk: async () => {
-      await deleteStockIn(ids);
-      message.success('删除成功');
-      onRefresh();
-    },
+async function handleDelete(ids: any[]) {
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+    key: 'action_process_msg',
  });
+  try {
+    await deleteStockIn(ids);
+    message.success({
+      content: '删除成功',
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
 }

 /** 审核/反审核 */
-function handleUpdateStatus(id: any, status: number) {
+async function handleUpdateStatus(id: any, status: number) {
  const statusText = status === 20 ? '审核' : '反审核';
-  Modal.confirm({
-    title: '系统提示',
-    content: `确认要${statusText}该入库单吗？`,
-    onOk: async () => {
-      await updateStockInStatus({ id, status });
-      message.success(`${statusText}成功`);
-      onRefresh();
-    },
+  const hideLoading = message.loading({
+    content: `${statusText}中...`,
+    duration: 0,
+    key: 'action_process_msg',
  });
+  try {
+    await updateStockInStatus({ id, status });
+    message.success({
+      content: `${statusText}成功`,
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
 }

 const [Grid, gridApi] = useVbenVxeGrid({
@ -135,13 +148,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
              danger: true,
              icon: ACTION_ICON.DELETE,
              auth: ['erp:stock-in:delete'],
-              onClick: () => {
-                const checkboxRecords = gridApi.grid.getCheckboxRecords();
-                if (checkboxRecords.length === 0) {
-                  message.warning('请选择要删除的数据');
-                  return;
-                }
-                handleDelete(checkboxRecords.map((item) => item.id));
+              popConfirm: {
+                title: '是否删除所选中数据？',
+                confirm: () => {
+                  const checkboxRecords = gridApi.grid.getCheckboxRecords();
+                  if (checkboxRecords.length === 0) {
+                    message.warning('请选择要删除的数据');
+                    return;
+                  }
+                  handleDelete(checkboxRecords.map((item) => item.id));
+                },
              },
            },
          ]"
@ -168,21 +184,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
              type: 'primary',
              auth: ['erp:stock-in:update'],
              ifShow: row.status === 10,
-              onClick: () => handleUpdateStatus(row.id, 20),
+              popConfirm: {
+                title: '确认要审核该入库单吗？',
+                confirm: () => handleUpdateStatus(row.id, 20),
+              },
            },
            {
              label: '反审核',
              danger: true,
              auth: ['erp:stock-in:update'],
              ifShow: row.status === 20,
-              onClick: () => handleUpdateStatus(row.id, 10),
+              popConfirm: {
+                title: '确认要反审核该入库单吗？',
+                confirm: () => handleUpdateStatus(row.id, 10),
+              },
            },
            {
              label: '删除',
              danger: true,
              auth: ['erp:stock-in:delete'],
              ifShow: row.status === 10,
-              onClick: () => handleDelete([row.id]),
+              popConfirm: {
+                title: '确认要删除该入库单吗？',
+                confirm: () => handleDelete([row.id]),
+              },
            },
          ]"
        />
@ -190,6 +215,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
    </Grid>

    <!-- 表单弹窗 -->
-    <StockInForm ref="formRef" @success="onRefresh" />
+    <FormModal @success="onRefresh" />
  </Page>
 </template>
--- a/apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue
+++ b/apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue
@ -358,7 +358,10 @@ defineExpose({
              label: '删除',
              type: 'link',
              danger: true,
-              onClick: () => handleDelete(row),
+              popConfirm: {
+                title: '确认删除该产品吗？',
+                confirm: handleDelete.bind(null, row),
+              },
            },
          ]"
        />