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

- 为表格列设置 minWidth 以优化布局
- 使用 Popconfirm组件替代 Modal 确认框
- 通过 message 组件展示操作结果
- 优化删除和审核操作的处理流程
- 引入 useVbenModal 优化表单弹窗

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' },
     },

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, useVbenModal } from '@vben/common-ui';
-
-import { DocAlert, Page } 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[]) {
+async function handleDelete(ids: any[]) {
-  Modal.confirm({
+  const hideLoading = message.loading({
-    title: '系统提示',
+    content: '删除中...',
-    content: `是否确认删除编号为 ${ids.join(',')} 的其它入库单？`,
+    duration: 0,
-    onOk: async () => {
+    key: 'action_process_msg',
-      await deleteStockIn(ids);
-      message.success('删除成功');
-      onRefresh();
-    },
   });
+  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({
+  const hideLoading = message.loading({
-    title: '系统提示',
+    content: `${statusText}中...`,
-    content: `确认要${statusText}该入库单吗？`,
+    duration: 0,
-    onOk: async () => {
+    key: 'action_process_msg',
-      await updateStockInStatus({ id, status });
-      message.success(`${statusText}成功`);
-      onRefresh();
-    },
   });
+  try {
+    await updateStockInStatus({ id, status });
+    message.success({
+      content: `${statusText}成功`,
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -135,7 +148,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-in:delete'],
-              onClick: () => {
+              popConfirm: {
+                title: '是否删除所选中数据？',
+                confirm: () => {
                   const checkboxRecords = gridApi.grid.getCheckboxRecords();
                   if (checkboxRecords.length === 0) {
                     message.warning('请选择要删除的数据');
@@ -144,6 +159,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   handleDelete(checkboxRecords.map((item) => item.id));
                 },
               },
+            },
           ]"
         />
       </template>
@@ -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>

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),
+              },
             },
           ]"
         />