feat：【mall 商城】交易订单（60% antd delivery 优化代码风格）

apps/web-antd/src/views/mall/trade/order/data.ts

@@ -400,3 +400,62 @@ export function useAddressFormSchema(): VbenFormSchema[] {
     },
   ];
 }
+
+/** 订单发货表单配置 */
+export function useDeliveryFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'expressType',
+      label: '发货方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '快递', value: 'express' },
+          { label: '无需发货', value: 'none' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: 'express',
+    },
+    {
+      fieldName: 'logisticsId',
+      label: '物流公司',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeliveryExpressList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+        placeholder: '请选择物流公司',
+      },
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'logisticsNo',
+      label: '物流单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入物流单号',
+      },
+      dependencies: {
+        triggerFields: ['expressType'],
+        show: (values) => values.expressType === 'express',
+      },
+      rules: 'required',
+    },
+  ];
+}

apps/web-antd/src/views/mall/trade/order/modules/delivery-form.vue

@@ -8,13 +8,19 @@ import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
 import { deliveryOrder } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
 
+import { useDeliveryFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 
-const formData = ref<MallOrderApi.DeliveryRequest>();
+const formData = ref({
+  id: 0,
+  expressType: 'express',
+  logisticsId: 0,
+  logisticsNo: '',
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -25,55 +31,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
+  schema: useDeliveryFormSchema(),
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    // TODO @xingyu：发货默认选中第一个？
-    {
-      fieldName: 'expressType',
-      label: '发货方式',
-      component: 'RadioGroup',
-      componentProps: {
-        options: [
-          { label: '快递', value: 'express' },
-          { label: '无需发货', value: 'none' },
-        ],
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-    },
-    {
-      fieldName: 'logisticsId',
-      label: '物流公司',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleDeliveryExpressList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
-      },
-      dependencies: {
-        triggerFields: ['expressType'],
-        show: (values) => values.expressType === 'express',
-      },
-    },
-    {
-      fieldName: 'logisticsNo',
-      label: '物流单号',
-      component: 'Input',
-      dependencies: {
-        triggerFields: ['expressType'],
-        show: (values) => values.expressType === 'express',
-      },
-    },
-  ],
   showDefaultActions: false,
 });
 
@@ -85,14 +43,14 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.DeliveryRequest;
+    const data = await formApi.getValues();
     if (data.expressType === 'none') {
       // 无需发货的情况
       data.logisticsId = 0;
       data.logisticsNo = '';
     }
     try {
-      await deliveryOrder(data);
+      await deliveryOrder(data as MallOrderApi.DeliveryRequest);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -103,20 +61,22 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
     const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
+      formData.value.id = data.id;
+      // 根据当前物流信息判断发货方式
+      formData.value.expressType = data.logisticsId === 0 ? 'none' : 'express';
+      formData.value.logisticsId = data.logisticsId || 0;
+      formData.value.logisticsNo = data.logisticsNo || '';
       // 设置到 values
-      if (data.logisticsId === 0) {
+      await formApi.setValues(formData.value);
-        await formApi.setValues({ expressType: 'none' });
-      }
     } finally {
       modalApi.unlock();
     }