From 8bd135414e2c412b9bff04ee171fd079ef8cc6a1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 15 Oct 2025 09:45:38 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=20=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E3=80=91=E4=BA=A4=E6=98=93=E8=AE=A2=E5=8D=95=EF=BC=8850%=20ant?=
 =?UTF-8?q?d=20address=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mall/trade/order/data.ts        |  60 ++++++++
 .../views/mall/trade/order/detail/index.vue   |   8 +-
 .../mall/trade/order/modules/address-form.vue |  77 ++++++++++
 .../trade/order/modules/delivery-form.vue     |   4 +-
 .../order/modules/update-address-form.vue     | 131 ------------------
 5 files changed, 143 insertions(+), 137 deletions(-)
 create mode 100644 apps/web-antd/src/views/mall/trade/order/modules/address-form.vue
 delete mode 100644 apps/web-antd/src/views/mall/trade/order/modules/update-address-form.vue

diff --git a/apps/web-antd/src/views/mall/trade/order/data.ts b/apps/web-antd/src/views/mall/trade/order/data.ts
index 310949c55..0f1541bfa 100644
--- 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',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/trade/order/detail/index.vue b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
index 94598bfbe..fb6cad496 100644
--- 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" />
 
     <!-- 订单信息 -->
diff --git 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
new file mode 100644
index 000000000..23a31489f
--- /dev/null
+++ 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>
diff --git 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
index 5bf26abc3..7b31a84c3 100644
--- 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>
diff --git 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
deleted file mode 100644
index f513ada5e..000000000
--- a/apps/web-antd/src/views/mall/trade/order/modules/update-address-form.vue
+++ /dev/null
@@ -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>
\ No newline at end of file