feat：【antd】【erp 系统】finance/payment 的迁移 4/4（form 部分）

apps/web-antd/src/views/erp/finance/payment/data.ts

@@ -407,3 +407,193 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+4; /** 采购入库单选择表单的配置项 */
+export function usePurchaseInGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '入库单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入入库单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '已自动选择供应商',
+      },
+    },
+    {
+      fieldName: 'paymentStatus',
+      label: '付款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未付款', value: 0 },
+          { label: '部分付款', value: 1 },
+          { label: '全部付款', value: 2 },
+        ],
+        placeholder: '请选择付款状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 采购入库单选择列表的字段 */
+export function usePurchaseInGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '入库单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'inTime',
+      title: '入库时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'totalPrice',
+      title: '应付金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'paymentPrice',
+      title: '已付金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unPaymentPrice',
+      title: '未付金额',
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(row.totalPrice - row.paymentPrice || 0);
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+  ];
+}
+
+/** 采购退货单选择表单的配置项 */
+export function useSaleReturnGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '退货单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入退货单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+        placeholder: '已自动选择供应商',
+      },
+    },
+    {
+      fieldName: 'refundStatus',
+      label: '退款状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退款', value: 0 },
+          { label: '部分退款', value: 1 },
+          { label: '全部退款', value: 2 },
+        ],
+        placeholder: '请选择退款状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 采购退货单选择列表的字段 */
+export function useSaleReturnGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '退货单号',
+      width: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'returnTime',
+      title: '退货时间',
+      width: 160,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'totalPrice',
+      title: '应退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'refundPrice',
+      title: '已退金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'unRefundPrice',
+      title: '未退金额',
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(row.totalPrice - row.refundPrice || 0);
+      },
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+    },
+  ];
+}

apps/web-antd/src/views/erp/finance/payment/modules/form.vue

@@ -85,20 +85,23 @@ const handleUpdateItems = (
   items: ErpFinancePaymentApi.FinancePaymentItem[],
 ) => {
   formData.value.items = items;
-  // 重新计算合计付款
-  const totalPrice = items.reduce(
-    (prev, curr) => prev + (curr.totalPrice || 0),
-    0,
-  );
-  const paymentPrice = items.reduce(
-    (prev, curr) => prev + (curr.paymentPrice || 0),
-    0,
-  );
-  formData.value.totalPrice = totalPrice;
-  formData.value.paymentPrice = paymentPrice - formData.value.discountPrice;
   formApi.setValues({
     items,
+  });
+};
+
+/** 更新总金额 */
+const handleUpdateTotalPrice = (totalPrice: number) => {
+  formData.value.totalPrice = totalPrice;
+  formApi.setValues({
     totalPrice: formData.value.totalPrice,
+  });
+};
+
+/** 更新付款金额 */
+const handleUpdatePaymentPrice = (paymentPrice: number) => {
+  formData.value.paymentPrice = paymentPrice;
+  formApi.setValues({
     paymentPrice: formData.value.paymentPrice,
   });
 };
@@ -180,7 +183,10 @@ const [Modal, modalApi] = useVbenModal({
           :items="formData?.items ?? []"
           :supplier-id="formData?.supplierId"
           :disabled="formType === 'detail'"
+          :discount-price="formData?.discountPrice ?? 0"
           @update:items="handleUpdateItems"
+          @update:total-price="handleUpdateTotalPrice"
+          @update:payment-price="handleUpdatePaymentPrice"
         />
       </template>
     </Form>

apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue

@@ -20,15 +20,21 @@ interface Props {
   items?: ErpFinancePaymentApi.FinancePaymentItem[];
   supplierId?: number;
   disabled?: boolean;
+  discountPrice?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   supplierId: undefined,
   disabled: false,
+  discountPrice: 0,
 });
 
-const emit = defineEmits(['update:items']);
+const emit = defineEmits([
+  'update:items',
+  'update:total-price',
+  'update:payment-price',
+]);
 
 const tableData = ref<ErpFinancePaymentApi.FinancePaymentItem[]>([]); // 表格数据
 
@@ -78,7 +84,6 @@ watch(
     if (!items) {
       return;
     }
-    items.forEach((item) => initRow(item));
     tableData.value = [...items];
     await nextTick(); // 特殊：保证 gridApi 已经初始化
     await gridApi.grid.reloadData(tableData.value);
@@ -91,6 +96,29 @@ watch(
   },
 );
 
+/** 计算 totalPrice、paymentPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPrice],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const paymentPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.paymentPrice || 0),
+      0,
+    );
+    const finalPaymentPrice = paymentPrice - (props.discountPrice || 0);
+    // 通知父组件更新
+    emit('update:total-price', totalPrice);
+    emit('update:payment-price', finalPaymentPrice);
+  },
+  { deep: true },
+);
+
 /** 添加采购入库单 */
 const purchaseInSelectRef = ref();
 const handleOpenPurchaseIn = () => {
@@ -168,11 +196,6 @@ const handleRowChange = (row: any) => {
   emit('update:items', [...tableData.value]);
 };
 
-/** 初始化行数据 */
-const initRow = (item: any) => {
-  // 不需要特殊初始化
-};
-
 /** 表单校验 */
 const validate = () => {
   // 检查是否有明细

apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue

@@ -9,6 +9,8 @@ import { message, Modal } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPurchaseInPage } from '#/api/erp/purchase/in';
 
+import { usePurchaseInGridColumns, usePurchaseInGridFormSchema } from '../data';
+
 const emit = defineEmits<{
   success: [rows: ErpPurchaseInApi.PurchaseIn[]];
 }>();
@@ -20,97 +22,10 @@ const selectedRows = ref<ErpPurchaseInApi.PurchaseIn[]>([]); // 选中的行
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
-    schema: [
+    schema: usePurchaseInGridFormSchema(),
-      {
-        fieldName: 'no',
-        label: '入库单号',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入入库单号',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'supplierId',
-        label: '供应商',
-        component: 'Input',
-        componentProps: {
-          disabled: true,
-          placeholder: '已自动选择供应商',
-        },
-      },
-      {
-        fieldName: 'paymentStatus',
-        label: '付款状态',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '未付款', value: 0 },
-            { label: '部分付款', value: 1 },
-            { label: '全部付款', value: 2 },
-          ],
-          placeholder: '请选择付款状态',
-          allowClear: true,
-        },
-      },
-    ],
   },
   gridOptions: {
-    columns: [
+    columns: usePurchaseInGridColumns(),
-      {
-        type: 'checkbox',
-        width: 50,
-        fixed: 'left',
-      },
-      {
-        field: 'no',
-        title: '入库单号',
-        width: 200,
-        fixed: 'left',
-      },
-      {
-        field: 'supplierName',
-        title: '供应商',
-        minWidth: 120,
-      },
-      {
-        field: 'inTime',
-        title: '入库时间',
-        width: 160,
-        formatter: 'formatDate',
-      },
-      {
-        field: 'totalPrice',
-        title: '应付金额',
-        formatter: 'formatAmount2',
-        minWidth: 120,
-      },
-      {
-        field: 'paymentPrice',
-        title: '已付金额',
-        formatter: 'formatAmount2',
-        minWidth: 120,
-      },
-      {
-        field: 'unPaymentPrice',
-        title: '未付金额',
-        // TODO @AI：芋艿，后续统一改；
-        formatter: ({ row }) => {
-          const unPaymentPrice = row.totalPrice - row.paymentPrice;
-          return `${unPaymentPrice?.toFixed(2) || '0.00'}元`;
-        },
-        minWidth: 120,
-      },
-      {
-        field: 'status',
-        title: '状态',
-        minWidth: 100,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: 'ERP_AUDIT_STATUS' },
-        },
-      },
-    ],
     height: 'auto',
     keepSource: true,
     proxyConfig: {

apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue

@@ -9,6 +9,8 @@ import { message, Modal } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPurchaseReturnPage } from '#/api/erp/purchase/return';
 
+import { useSaleReturnGridColumns, useSaleReturnGridFormSchema } from '../data';
+
 const emit = defineEmits<{
   success: [rows: ErpPurchaseReturnApi.PurchaseReturn[]];
 }>();
@@ -20,96 +22,10 @@ const selectedRows = ref<ErpPurchaseReturnApi.PurchaseReturn[]>([]); // 选中
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
-    schema: [
+    schema: useSaleReturnGridFormSchema(),
-      {
-        fieldName: 'no',
-        label: '退货单号',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入退货单号',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'supplierId',
-        label: '供应商',
-        component: 'Input',
-        componentProps: {
-          disabled: true,
-          placeholder: '已自动选择供应商',
-        },
-      },
-      {
-        fieldName: 'refundStatus',
-        label: '退款状态',
-        component: 'Select',
-        componentProps: {
-          options: [
-            { label: '未退款', value: 0 },
-            { label: '部分退款', value: 1 },
-            { label: '全部退款', value: 2 },
-          ],
-          placeholder: '请选择退款状态',
-          allowClear: true,
-        },
-      },
-    ],
   },
   gridOptions: {
-    columns: [
+    columns: useSaleReturnGridColumns(),
-      {
-        type: 'checkbox',
-        width: 50,
-        fixed: 'left',
-      },
-      {
-        field: 'no',
-        title: '退货单号',
-        width: 200,
-        fixed: 'left',
-      },
-      {
-        field: 'supplierName',
-        title: '供应商',
-        minWidth: 120,
-      },
-      {
-        field: 'returnTime',
-        title: '退货时间',
-        width: 160,
-        formatter: 'formatDate',
-      },
-      {
-        field: 'totalPrice',
-        title: '应退金额',
-        formatter: 'formatAmount2',
-        minWidth: 120,
-      },
-      {
-        field: 'refundPrice',
-        title: '已退金额',
-        formatter: 'formatAmount2',
-        minWidth: 120,
-      },
-      {
-        field: 'unRefundPrice',
-        title: '未退金额',
-        formatter: ({ row }) => {
-          const unRefundPrice = row.totalPrice - row.refundPrice;
-          return `${unRefundPrice?.toFixed(2) || '0.00'}元`;
-        },
-        minWidth: 120,
-      },
-      {
-        field: 'status',
-        title: '状态',
-        minWidth: 100,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: 'ERP_AUDIT_STATUS' },
-        },
-      },
-    ],
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -158,16 +74,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 /** 打开弹窗 */
 const openModal = (id: number) => {
+  // 重置数据
   supplierId.value = id;
   open.value = true;
   selectedRows.value = [];
-  // 重置表单并设置供应商ID
+  // 查询列表
   gridApi.formApi?.resetForm();
   gridApi.formApi?.setValues({ supplierId: id });
-  // 延迟查询，确保表单值已设置
+  gridApi.query();
-  setTimeout(() => {
-    gridApi.query();
-  }, 100);
 };
 
 /** 确认选择 */
@@ -176,25 +90,7 @@ const handleOk = () => {
     message.warning('请选择要添加的采购退货单');
     return;
   }
-
+  emit('success', selectedRows.value);
-  // 过滤已全部退款的单据
-  const validRows = selectedRows.value.filter((row) => {
-    const unRefundPrice = row.totalPrice - row.refundPrice;
-    return unRefundPrice > 0;
-  });
-
-  if (validRows.length === 0) {
-    message.warning('所选的退货单已全部退款，无需再付款');
-    return;
-  }
-
-  if (validRows.length < selectedRows.value.length) {
-    message.warning(
-      `已过滤${selectedRows.value.length - validRows.length}个已全部退款的退货单`,
-    );
-  }
-
-  emit('success', validRows);
   open.value = false;
 };
 
@@ -203,14 +99,13 @@ defineExpose({ open: openModal });
 
 <template>
   <Modal
-    class="!w-[70vw]"
+    class="!w-[50vw]"
     v-model:open="open"
     title="选择采购退货单"
     @ok="handleOk"
-    :width="1000"
   >
     <Grid
-      class="max-h-[500px]"
+      class="max-h-[600px]"
       table-title="采购退货单列表(仅展示需退款的单据)"
     />
   </Modal>