feat：【antd】【erp 系统】stock/in 1/1 重构完成

apps/web-antd/src/views/erp/stock/in/data.ts

@@ -4,33 +4,47 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { createRequiredValidation } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
 import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
 import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 表单的配置项 */
-export function useFormSchema(): VbenFormSchema[] {
+export function useFormSchema(formType: string): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
-      componentProps: {
-        style: { display: 'none' },
-      },
       fieldName: 'id',
-      label: 'ID',
+      component: 'Input',
-      hideLabel: true,
+      dependencies: {
-      formItemClass: 'hidden',
+        triggerFields: [''],
+        show: () => false,
+      },
     },
     {
+      fieldName: 'no',
+      label: '入库单号',
       component: 'Input',
       componentProps: {
         placeholder: '系统自动生成',
         disabled: true,
       },
-      fieldName: 'no',
-      label: '入库单号',
     },
     {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择入库时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      label: '供应商',
+      fieldName: 'supplierId',
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择供应商',
@@ -42,34 +56,22 @@ export function useFormSchema(): VbenFormSchema[] {
           value: 'id',
         },
       },
-      fieldName: 'supplierId',
-      label: '供应商',
-    },
-    {
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '选择入库时间',
-        showTime: true,
-        format: 'YYYY-MM-DD HH:mm:ss',
-        valueFormat: 'x',
-        style: { width: '100%' },
-      },
-      fieldName: 'inTime',
-      label: '入库时间',
       rules: 'required',
     },
     {
+      fieldName: 'remark',
+      label: '备注',
       component: 'Textarea',
       componentProps: {
         placeholder: '请输入备注',
-        autoSize: { minRows: 2, maxRows: 4 },
+        autoSize: { minRows: 1, maxRows: 1 },
-        class: 'w-full',
+        disabled: formType === 'detail',
       },
-      fieldName: 'remark',
+      formItemClass: 'col-span-2',
-      label: '备注',
-      formItemClass: 'col-span-3',
     },
     {
+      fieldName: 'fileUrl',
+      label: '附件',
       component: 'FileUpload',
       componentProps: {
         maxNumber: 1,
@@ -85,25 +87,22 @@ export function useFormSchema(): VbenFormSchema[] {
           'jpeg',
           'png',
         ],
-        showDescription: true,
+        showDescription: formType !== 'detail',
+        disabled: formType === 'detail',
       },
-      fieldName: 'fileUrl',
-      label: '附件',
       formItemClass: 'col-span-3',
     },
     {
-      fieldName: 'product',
+      fieldName: 'items',
-      label: '产品清单',
+      label: '入库产品清单',
       component: 'Input',
       formItemClass: 'col-span-3',
     },
   ];
 }
 
-/** 入库产品清单表格列定义 */
+/** 表单的明细表格列 */
-export function useStockInItemTableColumns(
+export function useFormItemColumns(): VxeTableGridOptions['columns'] {
-  isValidating?: any,
-): VxeTableGridOptions['columns'] {
   return [
     { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
@@ -111,19 +110,17 @@ export function useStockInItemTableColumns(
       title: '仓库名称',
       minWidth: 150,
       slots: { default: 'warehouseId' },
-      className: createRequiredValidation(isValidating, 'warehouseId'),
     },
     {
       field: 'productId',
       title: '产品名称',
       minWidth: 200,
       slots: { default: 'productId' },
-      className: createRequiredValidation(isValidating, 'productId'),
     },
     {
       field: 'stockCount',
       title: '库存',
-      minWidth: 100,
+      minWidth: 80,
     },
     {
       field: 'productBarCode',
@@ -135,32 +132,33 @@ export function useStockInItemTableColumns(
       title: '单位',
       minWidth: 80,
     },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
     {
       field: 'count',
       title: '数量',
       minWidth: 120,
+      fixed: 'right',
       slots: { default: 'count' },
-      className: createRequiredValidation(isValidating, 'count'),
-      formatter: 'formatAmount3',
     },
     {
       field: 'productPrice',
       title: '产品单价',
       minWidth: 120,
+      fixed: 'right',
       slots: { default: 'productPrice' },
     },
     {
       field: 'totalPrice',
       title: '金额',
       minWidth: 120,
+      fixed: 'right',
       formatter: 'formatAmount2',
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 150,
-      slots: { default: 'remark' },
-    },
     {
       title: '操作',
       width: 50,
@@ -182,6 +180,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'inTime',
+      label: '入库时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
     {
       fieldName: 'supplierId',
       label: '供应商',
@@ -191,38 +213,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
         showSearch: true,
         api: getSupplierSimpleList,
-        labelField: 'name',
+        fieldNames: {
-        valueField: 'id',
+          label: 'name',
+          value: 'id',
+        },
       },
     },
     {
-      fieldName: 'inTime',
+      fieldName: 'warehouseId',
-      label: '入库时间',
+      label: '仓库',
-      component: 'RangePicker',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: ['开始日期', '结束日期'],
+        placeholder: '请选择仓库',
-        showTime: true,
-        format: 'YYYY-MM-DD HH:mm:ss',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-      },
-    },
-    {
-      fieldName: 'status',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        placeholder: '请选择状态',
-        allowClear: true,
-        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
-      },
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入备注',
         allowClear: true,
+        showSearch: true,
+        api: getWarehouseSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
       },
     },
     {
@@ -234,8 +243,29 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
         showSearch: true,
         api: getSimpleUserList,
-        labelField: 'nickname',
+        fieldNames: {
-        valueField: 'id',
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
       },
     },
   ];
@@ -252,13 +282,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'no',
       title: '入库单号',
-      minWidth: 180,
+      width: 200,
+      fixed: 'left',
     },
     {
       field: 'productNames',
       title: '产品信息',
-      minWidth: 200,
       showOverflow: 'tooltip',
+      minWidth: 120,
     },
     {
       field: 'supplierName',
@@ -268,21 +299,30 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'inTime',
       title: '入库时间',
-      minWidth: 180,
+      width: 160,
-      cellRender: {
+      formatter: 'formatDate',
-        name: 'CellDateTime',
-      },
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
+      minWidth: 120,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      formatter: 'formatAmount3',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '总金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 90,
+      minWidth: 120,
-      fixed: 'right',
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
@@ -290,7 +330,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 300,
+      width: 220,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/erp/stock/in/index.vue

@@ -2,8 +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 { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -17,71 +19,81 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import StockInForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
-/** 其它入库单管理 */
+/** ERP 其它入库单列表 */
 defineOptions({ name: 'ErpStockIn' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: StockInForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
-/** 导出入库单 */
+/** 导出表格 */
 async function handleExport() {
   const data = await exportStockIn(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '其它入库单.xls', source: data });
 }
 
-/** 新增/编辑/详情 */
+/** 新增其它入库单 */
-function openForm(type: string, id?: number) {
+function handleCreate() {
-  formModalApi.setData({ type, id }).open();
+  formModalApi.setData({ type: 'create' }).open();
 }
 
-/** 删除 */
+/** 编辑其它入库单 */
-async function handleDelete(ids: any[]) {
+function handleEdit(row: ErpStockInApi.StockIn) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除其它入库单 */
+async function handleDelete(ids: number[]) {
   const hideLoading = message.loading({
-    content: '删除中...',
+    content: $t('ui.actionMessage.deleting'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteStockIn(ids);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess'));
-      content: '删除成功',
+    handleRefresh();
-      key: 'action_process_msg',
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 审核/反审核 */
+/** 审批/反审批操作 */
-async function handleUpdateStatus(id: any, status: number) {
+async function handleUpdateStatus(row: ErpStockInApi.StockIn, status: number) {
-  const statusText = status === 20 ? '审核' : '反审核';
   const hideLoading = message.loading({
-    content: `${statusText}中...`,
+    content: `确定${status === 20 ? '审批' : '反审批'}该入库单吗？`,
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await updateStockInStatus({ id, status });
+    await updateStockInStatus({ id: row.id!, status });
-    message.success({
+    message.success(`${status === 20 ? '审批' : '反审批'}成功`);
-      content: `${statusText}成功`,
+    handleRefresh();
-      key: 'action_process_msg',
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
 }
 
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: ErpStockInApi.StockIn[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 查看详情 */
+function handleDetail(row: ErpStockInApi.StockIn) {
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -103,15 +115,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    checkboxConfig: {
-      reserve: true,
-    },
   } as VxeTableGridOptions<ErpStockInApi.StockIn>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
@@ -124,97 +138,85 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
+    <FormModal @success="handleRefresh" />
     <Grid table-title="其它入库单列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['其它入库']),
+              label: $t('ui.actionTitle.create', ['其它入库单']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['erp:stock-in:create'],
-              onClick: () => openForm('create'),
+              onClick: handleCreate,
             },
             {
               label: $t('ui.actionTitle.export'),
-              type: 'default',
+              type: 'primary',
               icon: ACTION_ICON.DOWNLOAD,
               auth: ['erp:stock-in:export'],
               onClick: handleExport,
             },
             {
               label: '批量删除',
-              type: 'default',
+              type: 'primary',
               danger: true,
+              disabled: isEmpty(checkedIds),
               icon: ACTION_ICON.DELETE,
               auth: ['erp:stock-in:delete'],
               popConfirm: {
-                title: '是否删除所选中数据？',
+                title: `是否删除所选中数据？`,
-                confirm: () => {
+                confirm: handleDelete.bind(null, checkedIds),
-                  const checkboxRecords = gridApi.grid.getCheckboxRecords();
-                  if (checkboxRecords.length === 0) {
-                    message.warning('请选择要删除的数据');
-                    return;
-                  }
-                  handleDelete(checkboxRecords.map((item) => item.id));
-                },
               },
             },
           ]"
         />
       </template>
-
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
-              label: '详情',
+              label: $t('common.detail'),
+              type: 'link',
               icon: ACTION_ICON.VIEW,
               auth: ['erp:stock-in:query'],
-              onClick: () => openForm('detail', row.id),
+              onClick: handleDetail.bind(null, row),
             },
             {
-              label: '编辑',
+              label: $t('common.edit'),
-              auth: ['erp:stock-in:update'],
+              type: 'link',
               icon: ACTION_ICON.EDIT,
-              disabled: row.status !== 10,
+              auth: ['erp:stock-in:update'],
-              onClick: () => openForm('update', row.id),
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
             },
             {
-              label: '审核',
+              label: row.status === 10 ? '审批' : '反审批',
-              auth: ['erp:stock-in:update'],
+              type: 'link',
-              ifShow: row.status === 10,
+              auth: ['erp:stock-in:update-status'],
               popConfirm: {
-                title: '确认要审核该入库单吗？',
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
-                confirm: () => handleUpdateStatus(row.id, 20),
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
               },
             },
             {
-              label: '反审核',
+              label: $t('common.delete'),
-              danger: true,
+              type: 'link',
-              auth: ['erp:stock-in:update'],
-              ifShow: row.status === 20,
-              popConfirm: {
-                title: '确认要反审核该入库单吗？',
-                confirm: () => handleUpdateStatus(row.id, 10),
-              },
-            },
-            {
-              label: '删除',
               danger: true,
+              color: 'error',
               auth: ['erp:stock-in:delete'],
-              disabled: row.status !== 10,
               popConfirm: {
-                title: '确认要删除该入库单吗？',
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
-                confirm: () => handleDelete([row.id]),
+                confirm: handleDelete.bind(null, [row.id!]),
               },
             },
           ]"
         />
       </template>
     </Grid>
-
-    <!-- 表单弹窗 -->
-    <FormModal @success="onRefresh" />
   </Page>
 </template>

apps/web-antd/src/views/erp/stock/in/modules/StockInItemForm.vue

@@ -1,363 +0,0 @@
-<script lang="ts" setup>
-// TODO @nehc：这里的组件名
-import type { ErpStockInApi } from '#/api/erp/stock/in';
-
-import { nextTick, onMounted, ref, watch } from 'vue';
-
-import { erpPriceMultiply } from '@vben/utils';
-
-import { Input, InputNumber, Select } from 'ant-design-vue';
-
-import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getProductSimpleList } from '#/api/erp/product/product';
-import { getStockCount } from '#/api/erp/stock/stock';
-import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
-
-import { useStockInItemTableColumns } from '../data';
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  disabled: false,
-});
-
-const emit = defineEmits(['update:items']);
-
-interface Props {
-  items?: ErpStockInApi.StockInItem[];
-  disabled?: boolean;
-}
-
-const tableData = ref<ErpStockInApi.StockInItem[]>([]);
-const productOptions = ref<any[]>([]);
-const warehouseOptions = ref<any[]>([]);
-const isValidating = ref(false);
-
-/** 表格配置 */
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    editConfig: {
-      trigger: 'click',
-      mode: 'cell',
-    },
-    columns: useStockInItemTableColumns(isValidating),
-    data: tableData.value,
-    border: true,
-    showOverflow: true,
-    autoResize: true,
-    minHeight: 250,
-    keepSource: true,
-    rowConfig: {
-      keyField: 'id',
-    },
-    pagerConfig: {
-      enabled: false,
-    },
-    toolbarConfig: {
-      enabled: false,
-    },
-    showFooter: true,
-    footerCellClassName: 'stock-in-footer-cell',
-    footerMethod: ({ columns }) => {
-      const footers: any[][] = [];
-      const sums = getSummaries();
-      const footerData: any[] = [];
-      columns.forEach((column, columnIndex) => {
-        if (columnIndex === 0) {
-          footerData.push('合计');
-        } else if (column.field === 'count') {
-          footerData.push(sums.count);
-        } else if (column.field === 'totalPrice') {
-          footerData.push(sums.totalPrice);
-        } else {
-          footerData.push('');
-        }
-      });
-      footers.push(footerData);
-      return footers;
-    },
-  },
-});
-
-/** 监听外部传入的列数据 */
-watch(
-  () => props.items,
-  async (items) => {
-    if (!items) {
-      return;
-    }
-    await nextTick();
-    tableData.value = [...items];
-    await nextTick();
-    gridApi.grid.reloadData(tableData.value);
-  },
-  {
-    immediate: true,
-  },
-);
-
-/** 初始化 */
-onMounted(async () => {
-  productOptions.value = await getProductSimpleList();
-  warehouseOptions.value = await getWarehouseSimpleList();
-});
-
-function handleAdd() {
-  const newRow = {
-    warehouseId: null,
-    productId: null,
-    productName: '',
-    productUnitId: null,
-    productUnitName: '',
-    productBarCode: '',
-    count: 1,
-    productPrice: 0,
-    totalPrice: 0,
-    stockCount: 0,
-    remark: '',
-  };
-  tableData.value.push(newRow);
-  gridApi.grid.insertAt(newRow, -1);
-  emit('update:items', [...tableData.value]);
-  // 触发表格重新渲染以更新cellClassName
-  nextTick(() => {
-    gridApi.grid.refreshColumn();
-  });
-}
-
-function handleDelete(row: ErpStockInApi.StockInItem) {
-  gridApi.grid.remove(row);
-  const index = tableData.value.findIndex((item) => item.id === row.id);
-  if (index !== -1) {
-    tableData.value.splice(index, 1);
-  }
-  emit('update:items', [...tableData.value]);
-}
-
-async function handleWarehouseChange(warehouseId: any, row: any) {
-  const warehouse = warehouseOptions.value.find((w) => w.id === warehouseId);
-  if (!warehouse) {
-    return;
-  }
-
-  row.warehouseId = warehouseId;
-
-  // 如果已选择产品，重新获取库存
-  if (row.productId) {
-    const stockCount = await getStockCount(row.productId, warehouseId);
-    row.stockCount = stockCount || 0;
-  }
-
-  handleUpdateValue(row);
-}
-
-async function handleProductChange(productId: any, row: any) {
-  const product = productOptions.value.find((p) => p.id === productId);
-  if (!product) {
-    return;
-  }
-
-  // 获取库存数量
-  const stockCount = row.warehouseId
-    ? await getStockCount(productId, row.warehouseId)
-    : await getStockCount(productId);
-
-  row.productId = productId;
-  row.productUnitId = product.unitId;
-  row.productBarCode = product.barCode;
-  row.productUnitName = product.unitName;
-  row.productName = product.name;
-  row.stockCount = stockCount || 0;
-  row.productPrice = product.purchasePrice || 0;
-  row.count = row.count || 1;
-
-  handlePriceChange(row);
-}
-
-function handlePriceChange(row: any) {
-  if (row.productPrice && row.count) {
-    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
-  }
-  handleUpdateValue(row);
-}
-
-function handleUpdateValue(row: any) {
-  const index = tableData.value.findIndex((item) => item.id === row.id);
-  if (index === -1) {
-    tableData.value.push(row);
-  } else {
-    tableData.value[index] = row;
-  }
-  emit('update:items', [...tableData.value]);
-  // 触发表格重新渲染以更新cellClassName
-  nextTick(() => {
-    gridApi.grid.refreshColumn();
-  });
-}
-
-const getSummaries = (): {
-  count: number;
-  totalPrice: number;
-} => {
-  return {
-    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
-    totalPrice: tableData.value.reduce(
-      (sum, item) => sum + (item.totalPrice || 0),
-      0,
-    ),
-  };
-};
-
-/** 验证表单 */
-function validate(): Promise<boolean> {
-  return new Promise((resolve) => {
-    isValidating.value = true;
-
-    // 触发表格重新渲染以显示验证错误
-    nextTick(() => {
-      gridApi.grid.refreshColumn();
-    });
-
-    // 验证是否有产品清单
-    if (!tableData.value || tableData.value.length === 0) {
-      resolve(false);
-      return;
-    }
-
-    // 验证每一行的必填字段
-    for (const item of tableData.value) {
-      if (
-        !item.warehouseId ||
-        !item.productId ||
-        !item.count ||
-        item.count <= 0
-      ) {
-        resolve(false);
-        return;
-      }
-    }
-
-    // 验证通过，清除验证状态
-    isValidating.value = false;
-    nextTick(() => {
-      gridApi.grid.refreshColumn();
-    });
-
-    resolve(true);
-  });
-}
-
-/** 初始化表格数据 */
-function init(items: ErpStockInApi.StockInItem[]) {
-  tableData.value = items || [];
-  gridApi.grid.reloadData(tableData.value);
-}
-
-defineExpose({
-  validate,
-  init,
-  handleAdd,
-});
-</script>
-
-<template>
-  <div class="w-full">
-    <div class="mb-4 flex justify-between">
-      <span class="text-lg font-medium"></span>
-    </div>
-
-    <Grid>
-      <template #warehouseId="{ row }">
-        <Select
-          v-model:value="row.warehouseId"
-          :options="warehouseOptions"
-          :field-names="{ label: 'name', value: 'id' }"
-          placeholder="请选择仓库"
-          :disabled="disabled"
-          show-search
-          @change="(value) => handleWarehouseChange(value, row)"
-          class="w-full"
-        />
-      </template>
-
-      <template #productId="{ row }">
-        <Select
-          v-model:value="row.productId"
-          :options="productOptions"
-          :field-names="{ label: 'name', value: 'id' }"
-          placeholder="请选择产品"
-          :disabled="disabled"
-          show-search
-          @change="(value) => handleProductChange(value, row)"
-          class="w-full"
-        />
-      </template>
-
-      <template #count="{ row }">
-        <InputNumber
-          v-model:value="row.count"
-          :disabled="disabled"
-          :min="0.001"
-          :precision="3"
-          @change="() => handlePriceChange(row)"
-          class="w-full"
-        />
-      </template>
-
-      <template #productPrice="{ row }">
-        <InputNumber
-          v-model:value="row.productPrice"
-          :disabled="disabled"
-          :min="0.01"
-          :precision="2"
-          @change="() => handlePriceChange(row)"
-          class="w-full"
-        />
-      </template>
-
-      <template #remark="{ row }">
-        <Input
-          v-model:value="row.remark"
-          :disabled="disabled"
-          placeholder="请输入备注"
-        />
-      </template>
-
-      <template #actions="{ row }">
-        <TableAction
-          v-if="!disabled"
-          :actions="[
-            {
-              label: '删除',
-              type: 'link',
-              danger: true,
-              popConfirm: {
-                title: '确认删除该产品吗？',
-                confirm: handleDelete.bind(null, row),
-              },
-            },
-          ]"
-        />
-      </template>
-
-      <template #bottom>
-        <TableAction
-          v-if="!disabled"
-          class="mt-4 flex justify-center"
-          :actions="[
-            {
-              label: '添加产品',
-              type: 'default',
-              onClick: handleAdd,
-            },
-          ]"
-        />
-      </template>
-    </Grid>
-  </div>
-</template>
-
-<style scoped>
-:deep(.vxe-table .vxe-footer--column.stock-in-footer-cell .vxe-cell) {
-  background-color: #f5f5f5 !important;
-}
-</style>

apps/web-antd/src/views/erp/stock/in/modules/form.vue

@@ -1,33 +1,32 @@
 <script lang="ts" setup>
 import type { ErpStockInApi } from '#/api/erp/stock/in';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
+import { createStockIn, getStockIn, updateStockIn } from '#/api/erp/stock/in';
-  createStockIn,
+import { $t } from '#/locales';
-  getStockIn,
-  updateStockIn,
-  updateStockInStatus,
-} from '#/api/erp/stock/in';
 
 import { useFormSchema } from '../data';
-import StockInItemForm from './StockInItemForm.vue';
+import ItemForm from './item-form.vue';
 
 const emit = defineEmits(['success']);
 const formData = ref<ErpStockInApi.StockIn>();
-const formType = ref('');
+const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
-const itemFormRef = ref();
+const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-const getTitle = computed(() => {
+/* eslint-disable unicorn/no-nested-ternary */
-  if (formType.value === 'create') return '添加其它入库单';
+const getTitle = computed(() =>
-  if (formType.value === 'update') return '编辑其它入库单';
+  formType.value === 'create'
-  return '其它入库单详情';
+    ? $t('ui.actionTitle.create', ['其它入库单'])
-});
+    : formType.value === 'edit'
+      ? $t('ui.actionTitle.edit', ['其它入库单'])
+      : '其它入库单详情',
+);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -38,64 +37,39 @@ const [Form, formApi] = useVbenForm({
   },
   wrapperClass: 'grid-cols-3',
   layout: 'vertical',
-  schema: useFormSchema(),
+  schema: useFormSchema(formType.value),
   showDefaultActions: false,
 });
 
+/** 更新入库单项 */
 const handleUpdateItems = (items: ErpStockInApi.StockInItem[]) => {
   formData.value = modalApi.getData<ErpStockInApi.StockIn>();
-  if (formData.value) {
+  formData.value.items = items;
-    formData.value.items = items;
+  formApi.setValues({
-  }
+    items,
+  });
 };
 
-/**
+/** 创建或更新其它入库单 */
- * 创建或更新其它入库单
- */
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    await nextTick();
-
     const itemFormInstance = Array.isArray(itemFormRef.value)
       ? itemFormRef.value[0]
       : itemFormRef.value;
-    if (itemFormInstance && typeof itemFormInstance.validate === 'function') {
+    try {
-      try {
+      itemFormInstance.validate();
-        const isValid = await itemFormInstance.validate();
+    } catch (error: any) {
-        if (!isValid) {
+      message.error(error.message || '子表单验证失败');
-          message.error('产品清单验证失败，请检查必填项');
-          return;
-        }
-      } catch (error) {
-        message.error(error.message || '产品清单验证失败');
-        return;
-      }
-    } else {
-      message.error('产品清单验证方法不存在');
-      return;
-    }
-
-    // 验证产品清单不能为空
-    if (!formData.value?.items || formData.value.items.length === 0) {
-      message.error('产品清单不能为空，请至少添加一个产品');
       return;
     }
 
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as ErpStockInApi.StockIn;
-    data.items = formData.value?.items?.map((item) => ({
-      ...item,
-      id: undefined,
-    }));
-    // 将文件数组转换为字符串
-    if (data.fileUrl && Array.isArray(data.fileUrl)) {
-      data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
-    }
     try {
       await (formType.value === 'create'
         ? createStockIn(data)
@@ -103,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
       // 关闭并提示
       await modalApi.close();
       emit('success');
-      message.success(formType.value === 'create' ? '新增成功' : '更新成功');
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
@@ -115,86 +89,34 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<{ id?: number; type: string }>();
-    if (!data) {
-      return;
-    }
     formType.value = data.type;
-
+    formApi.setDisabled(formType.value === 'detail');
-    if (!data.id) {
+    formApi.updateSchema(useFormSchema(formType.value));
-      // 初始化空的表单数据
+    if (!data || !data.id) {
-      formData.value = { items: [] } as ErpStockInApi.StockIn;
-      await nextTick();
-      const itemFormInstance = Array.isArray(itemFormRef.value)
-        ? itemFormRef.value[0]
-        : itemFormRef.value;
-      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
-        itemFormInstance.init([]);
-      }
-      // 如果是新增，自动添加一行
-      if (formType.value === 'create' && itemFormInstance) {
-        itemFormInstance.handleAdd();
-      }
       return;
     }
-
     modalApi.lock();
     try {
       formData.value = await getStockIn(data.id);
-      // 将字符串形式的文件URL转换为数组形式以适配FileUpload组件
-      if (
-        formData.value.fileUrl &&
-        typeof formData.value.fileUrl === 'string'
-      ) {
-        formData.value.fileUrl = formData.value.fileUrl
-          ? [formData.value.fileUrl]
-          : [];
-      }
       // 设置到 values
       await formApi.setValues(formData.value);
-      // 初始化子表单
-      await nextTick();
-      const itemFormInstance = Array.isArray(itemFormRef.value)
-        ? itemFormRef.value[0]
-        : itemFormRef.value;
-      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
-        itemFormInstance.init(formData.value.items || []);
-      }
     } finally {
       modalApi.unlock();
     }
   },
 });
-
-/** 审核/反审核 */
-async function handleUpdateStatus(id: number, status: number) {
-  try {
-    await updateStockInStatus({ id, status });
-    message.success(status === 20 ? '审核成功' : '反审核成功');
-    emit('success');
-    await modalApi.close();
-  } catch (error) {
-    message.error(error.message || '操作失败');
-  }
-}
-
-defineExpose({ modalApi, handleUpdateStatus });
 </script>
 
 <template>
   <Modal
-    v-bind="$attrs"
     :title="getTitle"
-    class="w-4/5"
+    class="w-3/4"
-    :closable="true"
-    :mask-closable="true"
     :show-confirm-button="formType !== 'detail'"
   >
     <Form class="mx-3">
-      <template #product="slotProps">
+      <template #items>
-        <StockInItemForm
+        <ItemForm
-          v-bind="slotProps"
           ref="itemFormRef"
-          class="w-full"
           :items="formData?.items ?? []"
           :disabled="formType === 'detail'"
           @update:items="handleUpdateItems"

apps/web-antd/src/views/erp/stock/in/modules/item-form.vue

@@ -0,0 +1,297 @@
+<script lang="ts" setup>
+import type { ErpProductApi } from '#/api/erp/product/product';
+import type { ErpStockInApi } from '#/api/erp/stock/in';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { Input, InputNumber, Select } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCount } from '#/api/erp/stock/stock';
+import { getWarehouseSimpleList } from '#/api/erp/stock/warehouse';
+
+import { useFormItemColumns } from '../data';
+
+interface Props {
+  items?: ErpStockInApi.StockInItem[];
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+const emit = defineEmits(['update:items']);
+
+const tableData = ref<ErpStockInApi.StockInItem[]>([]); // 表格数据
+const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
+const warehouseOptions = ref<any[]>([]); // 仓库下拉选项
+
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+});
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useFormItemColumns(),
+    data: tableData.value,
+    minHeight: 250,
+    autoResize: true,
+    border: true,
+    rowConfig: {
+      keyField: 'row_id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.items,
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    items.forEach((item) => initRow(item));
+    tableData.value = [...items];
+    await nextTick(); // 特殊：保证 gridApi 已经初始化
+    await gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 处理新增 */
+function handleAdd() {
+  const newRow = {
+    id: undefined,
+    warehouseId: undefined,
+    productId: undefined,
+    productUnitName: undefined, // 产品单位
+    productBarCode: undefined, // 产品条码
+    productPrice: undefined,
+    stockCount: undefined,
+    count: 1,
+    totalPrice: undefined,
+    remark: undefined,
+  };
+  tableData.value.push(newRow);
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理删除 */
+function handleDelete(row: ErpStockInApi.StockInItem) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  // 通知父组件更新
+  emit('update:items', [...tableData.value]);
+}
+
+/** 处理仓库变更 */
+async function handleWarehouseChange(warehouseId: any, row: any) {
+  const warehouse = warehouseOptions.value.find((w) => w.id === warehouseId);
+  if (!warehouse) {
+    return;
+  }
+  row.warehouseId = warehouseId;
+
+  // 如果已选择产品，重新获取库存
+  if (row.productId) {
+    row.stockCount = (await getStockCount(row.productId, warehouseId)) || 0;
+  }
+
+  handleRowChange(row);
+}
+
+/** 处理产品变更 */
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
+  }
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = row.warehouseId
+    ? (await getStockCount(productId, row.warehouseId)) || 0
+    : (await getStockCount(productId)) || 0;
+  row.productPrice = product.purchasePrice || 0;
+  row.count = row.count || 1;
+  handleRowChange(row);
+}
+
+/** 处理行数据变更 */
+function handleRowChange(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index === -1) {
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
+  }
+  emit('update:items', [...tableData.value]);
+}
+
+/** 初始化行数据 */
+const initRow = (row: ErpStockInApi.StockInItem): void => {
+  if (row.productPrice && row.count) {
+    row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+  }
+};
+
+/** 表单校验 */
+function validate() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
+    if (item) {
+      if (!item.warehouseId) {
+        throw new Error(`第 ${i + 1} 行：仓库不能为空`);
+      }
+      if (!item.productId) {
+        throw new Error(`第 ${i + 1} 行：产品不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+      if (!item.productPrice || item.productPrice <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+      }
+    }
+  }
+}
+
+defineExpose({
+  validate,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+  warehouseOptions.value = await getWarehouseSimpleList();
+  // 目的：新增时，默认添加一行
+  if (tableData.value.length === 0) {
+    handleAdd();
+  }
+});
+</script>
+
+<template>
+  <Grid class="w-full">
+    <template #warehouseId="{ row }">
+      <Select
+        v-model:value="row.warehouseId"
+        :options="warehouseOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择仓库"
+        show-search
+        :disabled="disabled"
+        @change="handleWarehouseChange($event, row)"
+      />
+    </template>
+    <template #productId="{ row }">
+      <Select
+        v-model:value="row.productId"
+        :options="productOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+        class="w-full"
+        placeholder="请选择产品"
+        show-search
+        :disabled="disabled"
+        @change="handleProductChange($event, row)"
+      />
+    </template>
+    <template #count="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.count"
+        :min="0"
+        :precision="3"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.count || '-' }}</span>
+    </template>
+    <template #productPrice="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.productPrice"
+        :min="0"
+        :precision="2"
+        @change="handleRowChange(row)"
+      />
+      <span v-else>{{ row.productPrice || '-' }}</span>
+    </template>
+    <template #remark="{ row }">
+      <Input v-if="!disabled" v-model:value="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        v-if="!disabled"
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+
+    <template #bottom>
+      <div class="border-border bg-muted mt-2 rounded border p-2">
+        <div class="text-muted-foreground flex justify-between text-sm">
+          <span class="text-foreground font-medium">合计：</span>
+          <div class="flex space-x-4">
+            <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
+            <span>
+              金额：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <TableAction
+        v-if="!disabled"
+        class="mt-2 flex justify-center"
+        :actions="[
+          {
+            label: '添加入库产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>