feat(@vben/web-antd): erp-采购订单表单逻辑

- 使用 handleValuesChange
- 优化 discountPrice 和 totalPrice 的计算逻辑
- 改进子表单的验证和数据处理
- 统一数值格式化处理
- 优化表格数据的更新方式

apps/web-antd/src/views/crm/product/modules/product-table.vue

@@ -66,7 +66,7 @@ function handleUpdateValue(row: any) {
   } else {
     tableData.value[index] = row;
   }
-  emit('update:products', tableData.value);
+  emit('update:products', [...tableData.value]);
 }
 
 /** 表格配置 */

apps/web-antd/src/views/erp/purchase/order/data.ts

@@ -3,6 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { erpCountInputFormatter, erpPriceInputFormatter } from '@vben/utils';
 
+import { z } from '#/adapter/form';
 import { getAccountSimpleList } from '#/api/erp/finance/account';
 import { getProductSimpleList } from '#/api/erp/product/product';
 import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
@@ -96,11 +97,11 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         max: 100,
         precision: 2,
-        formatter: erpPriceInputFormatter,
         style: { width: '100%' },
       },
       fieldName: 'discountPercent',
       label: '优惠率(%)',
+      rules: z.number().min(0).optional(),
     },
     {
       component: 'InputNumber',
@@ -146,11 +147,12 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入支付订金',
         precision: 2,
-        formatter: erpPriceInputFormatter,
         style: { width: '100%' },
+        min: 0,
       },
       fieldName: 'depositPrice',
       label: '支付订金',
+      rules: z.number().min(0).optional(),
     },
   ];
 }

apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue

@@ -16,13 +16,19 @@ import { usePurchaseOrderItemTableColumns } from '../data';
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   disabled: false,
+  discountPercent: 0,
 });
 
-const emit = defineEmits(['update:items']);
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:total-price',
+]);
 
 interface Props {
   items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
   disabled?: boolean;
+  discountPercent?: number;
 }
 
 const tableData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
@@ -62,7 +68,8 @@ watch(
       return;
     }
     await nextTick();
-    tableData.value = items;
+    tableData.value = [...items];
+    await nextTick();
     gridApi.grid.reloadData(tableData.value);
   },
   {
@@ -70,6 +77,30 @@ watch(
   },
 );
 
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const discountPrice =
+      props.discountPercent === null
+        ? 0
+        : erpPriceMultiply(totalPrice, props.discountPercent / 100);
+    const finalTotalPrice = totalPrice - discountPrice;
+
+    // 发送计算结果给父组件
+    emit('update:discount-price', discountPrice);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
 /** 初始化 */
 onMounted(async () => {
   productOptions.value = await getProductSimpleList();
@@ -81,6 +112,11 @@ function handleAdd() {
 
 function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
   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 handleProductChange(productId: any, row: any) {
@@ -121,7 +157,7 @@ function handleUpdateValue(row: any) {
   } else {
     tableData.value[index] = row;
   }
-  emit('update:items', tableData.value);
+  emit('update:items', [...tableData.value]);
 }
 
 const getSummaries = (): {
@@ -131,7 +167,7 @@ const getSummaries = (): {
   totalPrice: number;
   totalProductPrice: number;
 } => {
-  const sums = {
+  return {
     productName: '合计',
     count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
     totalProductPrice: tableData.value.reduce(
@@ -147,20 +183,21 @@ const getSummaries = (): {
       0,
     ),
   };
-  return sums;
 };
 
 const validate = async (): Promise<void> => {
   for (let i = 0; i < tableData.value.length; i++) {
     const item = tableData.value[i];
-    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} 行：产品单价不能为空`);
+    if (item) {
+      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} 行：产品单价不能为空`);
+      }
     }
   }
 };
@@ -169,8 +206,10 @@ const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => tableData.value;
 const init = (
   items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
 ): void => {
-  tableData.value = items || [];
-  gridApi.grid.reloadData(tableData.value);
+  tableData.value = items ? [...items] : [];
+  nextTick(() => {
+    gridApi.grid.reloadData(tableData.value);
+  });
 };
 
 defineExpose({ validate, getData, init });
@@ -232,7 +271,6 @@ defineExpose({ validate, getData, init });
     </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>

apps/web-antd/src/views/erp/purchase/order/modules/form.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { erpPriceMultiply, formatDateTime } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -40,52 +40,56 @@ const [Form, formApi] = useVbenForm({
   layout: 'vertical',
   schema: useFormSchema(),
   showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    if (formData.value && changedFields.includes('discountPercent')) {
+      formData.value.discountPercent = values.discountPercent;
+    }
+  },
 });
 
-/** 计算 discountPrice、totalPrice 价格 */
-watch(
-  () => [formData.value?.items, formData.value?.discountPercent],
-  () => {
-    if (!formData.value?.items) {
-      return;
-    }
-    // 计算 discountPrice 价格
-    let totalPrice = 0;
-    formData.value.items.forEach((item) => {
-      totalPrice += item.totalPrice || 0;
-    });
-    formData.value.discountPrice = erpPriceMultiply(
-      totalPrice,
-      formData.value.discountPercent / 100,
-    );
-    formData.value.totalPrice = totalPrice - formData.value.discountPrice;
-    // 更新表单值
-    formApi.setValues({
-      discountPrice: formData.value.discountPrice,
-      totalPrice: formData.value.totalPrice,
-    });
-  },
-  { deep: true },
-);
-
 const handleUpdateItems = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+  formData.value = modalApi.getData<ErpPurchaseOrderApi.PurchaseOrder>();
   if (formData.value) {
     formData.value.items = items;
   }
 };
 
+const handleUpdateDiscountPrice = (discountPrice: number) => {
+  if (formData.value) {
+    formData.value.discountPrice = discountPrice;
+    formApi.setValues({
+      discountPrice: formData.value.discountPrice,
+    });
+  }
+};
+
+const handleUpdateTotalPrice = (totalPrice: number) => {
+  if (formData.value) {
+    formData.value.totalPrice = totalPrice;
+    formApi.setValues({
+      totalPrice: formData.value.totalPrice,
+    });
+  }
+};
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    await itemFormRef.value?.validate();
+    // 验证子表单
+    if (itemFormRef.value && typeof itemFormRef.value.validate === 'function') {
+      await itemFormRef.value.validate();
+    }
     modalApi.lock();
     // 提交表单
     const data =
       (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
-    data.items = itemFormRef.value?.getData();
+    data.items =
+      itemFormRef.value && typeof itemFormRef.value.getData === 'function'
+        ? itemFormRef.value.getData()
+        : [];
     try {
       await (formType.value === 'create'
         ? createPurchaseOrder(data)
@@ -140,9 +144,12 @@ defineExpose({ modalApi });
           v-bind="slotProps"
           ref="itemFormRef"
           class="w-full"
-          :items="formData?.items || []"
+          :items="formData?.items ?? []"
           :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
           @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:total-price="handleUpdateTotalPrice"
         />
       </template>
     </Form>