feat：【antd】【erp 系统】sale/order 部分代码优化(form 继续优化代码）

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

@@ -15,38 +15,37 @@ import { getSimpleUserList } from '#/api/system/user';
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
-      componentProps: {
-        style: { display: 'none' },
-      },
       fieldName: 'id',
-      label: 'ID',
-      hideLabel: true,
-      formItemClass: 'hidden',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
     },
     {
+      fieldName: 'no',
+      label: '订单单号',
       component: 'Input',
       componentProps: {
         placeholder: '系统自动生成',
         disabled: true,
       },
-      fieldName: 'no',
-      label: '订单单号',
     },
     {
+      fieldName: 'orderTime',
+      label: '订单时间',
       component: 'DatePicker',
       componentProps: {
         placeholder: '选择订单时间',
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
-        style: { width: '100%' },
       },
-      fieldName: 'orderTime',
-      label: '订单时间',
       rules: 'required',
     },
     {
+      label: '客户',
+      fieldName: 'customerId',
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择客户',
@@ -58,8 +57,6 @@ export function useFormSchema(): VbenFormSchema[] {
           value: 'id',
         },
       },
-      fieldName: 'customerId',
-      label: '客户',
       rules: 'required',
     },
     {
@@ -78,15 +75,18 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
+      fieldName: 'remark',
+      label: '备注',
       component: 'Textarea',
       componentProps: {
         placeholder: '请输入备注',
         autoSize: { minRows: 1, maxRows: 1 },
       },
-      fieldName: 'remark',
-      label: '备注',
+      formItemClass: 'col-span-2',
     },
     {
+      fieldName: 'fileUrl',
+      label: '附件',
       component: 'FileUpload',
       componentProps: {
         maxNumber: 1,
@@ -104,54 +104,51 @@ export function useFormSchema(): VbenFormSchema[] {
         ],
         showDescription: true,
       },
-      fieldName: 'fileUrl',
-      label: '附件',
       formItemClass: 'col-span-3',
     },
     {
-      fieldName: 'product',
+      fieldName: 'items',
       label: '产品清单',
       component: 'Input',
       formItemClass: 'col-span-3',
     },
     {
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
         precision: 2,
-        style: { width: '100%' },
       },
-      fieldName: 'discountPercent',
-      label: '优惠率(%)',
       rules: z.number().min(0).optional(),
     },
     {
+      fieldName: 'discountPrice',
+      label: '付款优惠',
       component: 'InputNumber',
       componentProps: {
         placeholder: '收款优惠',
         precision: 2,
         formatter: erpPriceInputFormatter,
         disabled: true,
-        style: { width: '100%' },
       },
-      fieldName: 'discountPrice',
-      label: '付款优惠',
     },
     {
+      fieldName: 'totalPrice',
+      label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
         disabled: true,
-        style: { width: '100%' },
       },
-      fieldName: 'totalPrice',
-      label: '优惠后金额',
     },
     {
+      fieldName: 'accountId',
+      label: '结算账户',
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择结算账户',
@@ -163,8 +160,6 @@ export function useFormSchema(): VbenFormSchema[] {
           value: 'id',
         },
       },
-      fieldName: 'accountId',
-      label: '结算账户',
     },
     {
       component: 'InputNumber',

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

@@ -45,6 +45,7 @@ const [Form, formApi] = useVbenForm({
   schema: useFormSchema(),
   showDefaultActions: false,
   handleValuesChange: (values, changedFields) => {
+    // 目的：同步到 item-form 组件，触发整体的价格计算
     if (formData.value && changedFields.includes('discountPercent')) {
       formData.value.discountPercent = values.discountPercent;
     }
@@ -54,9 +55,10 @@ const [Form, formApi] = useVbenForm({
 /** 更新商品项 */
 const handleUpdateItems = (items: ErpSaleOrderApi.SaleOrderItem[]) => {
   formData.value = modalApi.getData<ErpSaleOrderApi.SaleOrder>();
-  if (formData.value) {
-    formData.value.items = items;
-  }
+  formData.value.items = items;
+  formApi.setValues({
+    items,
+  });
 };
 
 /** 更新优惠金额 */
@@ -140,7 +142,7 @@ const [Modal, modalApi] = useVbenModal({
     :show-confirm-button="formType !== 'detail'"
   >
     <Form class="mx-3">
-      <template #product="slotProps">
+      <template #items="slotProps">
         <ItemForm
           v-bind="slotProps"
           ref="itemFormRef"

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

@@ -2,7 +2,7 @@
 import type { ErpProductApi } from '#/api/erp/product/product';
 import type { ErpSaleOrderApi } from '#/api/erp/sale/order';
 
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import { erpPriceMultiply } from '@vben/utils';
 
@@ -35,20 +35,33 @@ const emit = defineEmits([
 const tableData = ref<ErpSaleOrderApi.SaleOrderItem[]>([]); // 表格数据
 const productOptions = ref<ErpProductApi.Product[]>([]); // 产品下拉选项
 
+/** 获取表格合计数据 */
+const summaries = computed(() => {
+  return {
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalProductPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalProductPrice || 0),
+      0,
+    ),
+    taxPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.taxPrice || 0),
+      0,
+    ),
+    totalPrice: tableData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
+});
+
 /** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    editConfig: {
-      trigger: 'click',
-      mode: 'cell',
-    },
     columns: useFormItemColumns(),
     data: tableData.value,
-    border: true,
-    showOverflow: true,
-    autoResize: true,
     minHeight: 250,
-    keepSource: true,
+    autoResize: true,
+    border: true,
     rowConfig: {
       keyField: 'row_id',
       isHover: true,
@@ -118,14 +131,12 @@ function handleAdd() {
     remark: undefined,
   };
   tableData.value.push(newRow);
-  gridApi.grid.insertAt(newRow, -1);
   // 通知父组件更新
   emit('update:items', [...tableData.value]);
 }
 
 /** 处理删除 */
 function handleDelete(row: ErpSaleOrderApi.SaleOrderItem) {
-  gridApi.grid.remove(row);
   const index = tableData.value.findIndex((item) => item.id === row.id);
   if (index !== -1) {
     tableData.value.splice(index, 1);
@@ -172,32 +183,6 @@ const initRow = (row: ErpSaleOrderApi.SaleOrderItem): void => {
   }
 };
 
-/** 获取表格合计数据 */
-function getSummaries(): {
-  count: number;
-  productName: string;
-  taxPrice: number;
-  totalPrice: number;
-  totalProductPrice: number;
-} {
-  return {
-    productName: '合计',
-    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
-    totalProductPrice: tableData.value.reduce(
-      (sum, item) => sum + (item.totalProductPrice || 0),
-      0,
-    ),
-    taxPrice: tableData.value.reduce(
-      (sum, item) => sum + (item.taxPrice || 0),
-      0,
-    ),
-    totalPrice: tableData.value.reduce(
-      (sum, item) => sum + (item.totalPrice || 0),
-      0,
-    ),
-  };
-}
-
 /** 表单校验 */
 function validate() {
   for (let i = 0; i < tableData.value.length; i++) {
@@ -289,10 +274,10 @@ onMounted(async () => {
         <div class="text-muted-foreground flex justify-between text-sm">
           <span class="text-foreground font-medium">合计：</span>
           <div class="flex space-x-4">
-            <span>数量：{{ getSummaries().count }}</span>
-            <span>金额：{{ getSummaries().totalProductPrice }}</span>
-            <span>税额：{{ getSummaries().taxPrice }}</span>
-            <span>税额合计：{{ getSummaries().totalPrice }}</span>
+            <span>数量：{{ summaries.count }}</span>
+            <span>金额：{{ summaries.totalProductPrice }}</span>
+            <span>税额：{{ summaries.taxPrice }}</span>
+            <span>税额合计：{{ summaries.totalPrice }}</span>
           </div>
         </div>
       </div>