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

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

@@ -108,7 +108,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'deliveryType',
+      fieldName: 'pickUpVerifyCode',
       label: '核销码',
       component: 'Input',
       componentProps: {
@@ -213,7 +213,6 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       },
       minWidth: 80,
     },
-
     {
       field: 'payPrice',
       title: '实际支付',

apps/web-ele/src/views/mall/trade/order/detail/index.vue

@@ -25,10 +25,10 @@ import * as TradeOrderApi from '#/api/mall/trade/order';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
 
-import DeliveryForm from '../modules/delevery-form.vue';
-import UpdateAddressForm from '../modules/update-address-form.vue';
-import UpdatePriceForm from '../modules/update-price-form.vue';
-import RemarkForm from '../modules/update-remark-form.vue';
+import DeliveryForm from '../modules/delivery-form.vue';
+import AddressForm from '../modules/address-form.vue';
+import PriceForm from '../modules/price-form.vue';
+import RemarkForm from '../modules/remark-form.vue';
 import {
   useExpressTrackColumns,
   useOperateLogColumns,
@@ -112,12 +112,12 @@ const [RemarkFormModal, remarkFormModalApi] = useVbenModal({
 });
 
 const [AddressFormModal, addressFormModalApi] = useVbenModal({
-  connectedComponent: UpdateAddressForm,
+  connectedComponent: AddressForm,
   destroyOnClose: true,
 });
 
 const [PriceFormModal, priceFormModalApi] = useVbenModal({
-  connectedComponent: UpdatePriceForm,
+  connectedComponent: PriceForm,
   destroyOnClose: true,
 });
 

apps/web-ele/src/views/mall/trade/order/index.vue

@@ -20,13 +20,13 @@ import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DeleveryForm from './modules/delevery-form.vue';
-import RemarkForm from './modules/update-remark-form.vue';
+import DeliveryForm from './modules/delivery-form.vue';
+import RemarkForm from './modules/remark-form.vue';
 
 const { push } = useRouter();
 
-const [DeleveryFormModal, deleveryFormModalApi] = useVbenModal({
-  connectedComponent: DeleveryForm,
+const [DeliveryFormModal, deliveryFormModalApi] = useVbenModal({
+  connectedComponent: DeliveryForm,
   destroyOnClose: true,
 });
 
@@ -47,7 +47,7 @@ function handleDetail(row: MallOrderApi.Order) {
 
 /** 发货 */
 function handleDelivery(row: MallOrderApi.Order) {
-  deleveryFormModalApi.setData(row).open();
+  deliveryFormModalApi.setData(row).open();
 }
 
 /** 备注 */
@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <DeleveryFormModal @success="handleRefresh" />
+    <DeliveryFormModal @success="handleRefresh" />
     <RemarkFormModal @success="handleRefresh" />
     <Grid table-title="订单列表">
       <template #expand_content="{ row }">

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>