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

2025-10-15 09:45:38 +08:00
parent 26f3aa18c2
commit 8bd135414e
5 changed files with 143 additions and 137 deletions
--- a/apps/web-antd/src/views/mall/trade/order/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/data.ts
@@ -10,6 +10,7 @@ import { convertToInteger, formatToFraction } from '@vben/utils';

 import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
 import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
+import { getAreaTree } from '#/api/system/area';
 import { getRangePickerDefaultProps } from '#/utils';

 const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
@@ -340,3 +341,62 @@ export function usePriceFormSchema(): VbenFormSchema[] {
    },
  ];
 }
+
+/** 订单修改地址表单配置 */
+export function useAddressFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'receiverName',
+      label: '收件人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'receiverMobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人手机号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'receiverAreaId',
+      label: '所在地',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+          children: 'children',
+        },
+        placeholder: '请选择收件人所在地',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'receiverDetailAddress',
+      label: '详细地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入收件人详细地址',
+        type: 'textarea',
+        rows: 3,
+      },
+      rules: 'required',
+    },
+  ];
+}
--- a/apps/web-antd/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
@@ -25,10 +25,10 @@ import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';

+import AddressForm from '../modules/address-form.vue';
 import DeliveryForm from '../modules/delivery-form.vue';
 import PriceForm from '../modules/price-form.vue';
 import RemarkForm from '../modules/remark-form.vue';
-import OrderUpdateAddressForm from '../modules/update-address-form.vue';
 import {
  useDeliveryInfoSchema,
  useExpressTrackColumns,
@@ -151,8 +151,8 @@ const [RemarkFormModal, remarkFormModalApi] = useVbenModal({
  destroyOnClose: true,
 });

-const [OrderUpdateAddressFormModal, addressFormModalApi] = useVbenModal({
-  connectedComponent: OrderUpdateAddressForm,
+const [AddressFormModal, addressFormModalApi] = useVbenModal({
+  connectedComponent: AddressForm,
  destroyOnClose: true,
 });

@@ -299,7 +299,7 @@ onMounted(async () => {
    <!-- 各种操作的弹窗 -->
    <DeliveryFormModal @success="getDetail" />
    <RemarkFormModal @success="getDetail" />
-    <OrderUpdateAddressFormModal @success="getDetail" />
+    <AddressFormModal @success="getDetail" />
    <PriceFormModal @success="getDetail" />

    <!-- 订单信息 -->
--- a/apps/web-antd/src/views/mall/trade/order/modules/address-form.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/address-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOrderAddress } from '#/api/mall/trade/order';
+import { $t } from '#/locales';
+
+import { useAddressFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MallOrderApi.Order>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useAddressFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await updateOrderAddress(data as MallOrderApi.AddressRequest);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MallOrderApi.Order>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.edit', ['收货地址'])" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/mall/trade/order/modules/delivery-form.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/delivery-form.vue
@@ -113,10 +113,10 @@ const [Modal, modalApi] = useVbenModal({
    }
    modalApi.lock();
    try {
+      // 设置到 values
      if (data.logisticsId === 0) {
        await formApi.setValues({ expressType: 'none' });
      }
-      // 设置到 values
    } finally {
      modalApi.unlock();
    }
@@ -125,7 +125,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-1/3" title="发货">
+  <Modal title="发货" class="w-1/3">
    <Form class="mx-4" />
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/trade/order/modules/update-address-form.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/update-address-form.vue
@@ -1,131 +0,0 @@
-<script lang="ts" setup>
-import type { MallOrderApi } from '#/api/mall/trade/order';
-
-import { ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import { updateOrderAddress } from '#/api/mall/trade/order';
-import { getAreaTree } from '#/api/system/area';
-import { $t } from '#/locales';
-
-const emit = defineEmits(['success']);
-
-const formData = ref<MallOrderApi.DeliveryRequest>();
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    // TODO @xingyu：发货默认选中第一个？
-    {
-      fieldName: 'receiverName',
-      label: '收件人',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入收件人名称',
-      },
-    },
-    {
-      fieldName: 'receiverMobile',
-      label: '手机号',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入收件人手机号',
-      },
-    },
-    {
-      fieldName: 'receiverAreaId',
-      label: '所在地',
-      component: 'ApiTreeSelect',
-      componentProps: {
-        api: () => getAreaTree(),
-        labelField: 'name',
-        valueField: 'id',
-        childrenField: 'children',
-        placeholder: '请选择收件人所在地',
-        treeDefaultExpandAll: true,
-      },
-    },
-    {
-      fieldName: 'receiverDetailAddress',
-      label: '详细地址',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入收件人详细地址',
-        type: 'textarea',
-        rows: 3,
-      },
-    },
-  ],
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.AddressRequest;
-    try {
-      await updateOrderAddress(data);
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      message.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      formData.value = undefined;
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
-      return;
-    }
-    modalApi.lock();
-    try {
-      await formApi.setValues({
-        id: data.id,
-        receiverName: data.receiverName,
-        receiverMobile: data.receiverMobile,
-        receiverAreaId: data.receiverAreaId,
-        receiverDetailAddress: data.receiverDetailAddress,
-      });
-      // 设置到 values
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-</script>
-
-<template>
-  <Modal class="w-1/3" title="修改收货地址">
-    <Form class="mx-4" />
-  </Modal>
-</template>