feat：【mall 商城】交易订单（80% ele 部分）

apps/web-ele/src/views/mall/trade/order/modules/address-form.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
@@ -8,10 +10,13 @@ import { ElMessage } from 'element-plus';
 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: {
@@ -33,9 +38,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.AddressRequest;
+    const data = await formApi.getValues();
     try {
-      await updateOrderAddress(data);
+      await updateOrderAddress(data as MallOrderApi.AddressRequest);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -50,18 +55,14 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<MallOrderApi.Order>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
     modalApi.lock();
     try {
-      await formApi.setValues({
-        id: data.id,
-        receiverName: data.receiverName,
-        receiverMobile: data.receiverMobile,
-        receiverAreaId: data.receiverAreaId,
-        receiverDetailAddress: data.receiverDetailAddress,
-      });
+      formData.value = data;
+      // 设置到 values
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -70,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" title="修改地址">
+  <Modal :title="$t('ui.actionTitle.edit', ['收货地址'])" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-ele/src/views/mall/trade/order/modules/remark-form.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
@@ -12,6 +14,8 @@ import { useRemarkFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
+const formData = ref<MallOrderApi.DeliveryRequest>();
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -46,16 +50,18 @@ 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 {
-      await formApi.setValues({ id: data.id, remark: data.remark });
+      // 设置到 values
+      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }
@@ -64,7 +70,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>