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

2025-12-30 10:32:25 +00:00 · 2025-10-15 13:25:46 +08:00
parent 7fd071a79b
commit ce5fc8cf3d
5 changed files with 61 additions and 49 deletions
--- a/apps/web-ele/src/views/mall/trade/order/data.ts
+++ b/apps/web-ele/src/views/mall/trade/order/data.ts
@@ -77,10 +77,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleDeliveryExpressList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
+        labelField: 'name',
+        valueField: 'id',
        placeholder: '请选择快递公司',
        clearable: true,
      },
@@ -315,6 +313,8 @@ export function usePriceFormSchema(): VbenFormSchema[] {
        placeholder: '请输入订单调价',
        step: 0.1,
        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
      },
      help: '订单调价。 正数，加价；负数，减价',
      rules: 'required',
@@ -431,10 +431,8 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleDeliveryExpressList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
+        labelField: 'name',
+        valueField: 'id',
        placeholder: '请选择物流公司',
      },
      dependencies: {
--- a/apps/web-ele/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-ele/src/views/mall/trade/order/detail/index.vue
@@ -25,8 +25,8 @@ import * as TradeOrderApi from '#/api/mall/trade/order';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';

-import DeliveryForm from '../modules/delivery-form.vue';
 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 {
@@ -374,27 +374,19 @@ onMounted(async () => {
        </div>
        <div class="flex">
          <span class="mr-2 min-w-fit text-gray-600">优惠劵优惠:</span>
-          <span class="text-red-500"
-            >{{ fenToYuan(order.couponPrice ?? 0) }} 元</span
-          >
+          <span class="text-red-500">{{ fenToYuan(order.couponPrice ?? 0) }} 元</span>
        </div>
        <div class="flex">
          <span class="mr-2 min-w-fit text-gray-600">VIP 优惠:</span>
-          <span class="text-red-500"
-            >{{ fenToYuan(order.vipPrice ?? 0) }} 元</span
-          >
+          <span class="text-red-500">{{ fenToYuan(order.vipPrice ?? 0) }} 元</span>
        </div>
        <div class="flex">
          <span class="mr-2 min-w-fit text-gray-600">活动优惠:</span>
-          <span class="text-red-500"
-            >{{ fenToYuan(order.discountPrice ?? 0) }} 元</span
-          >
+          <span class="text-red-500">{{ fenToYuan(order.discountPrice ?? 0) }} 元</span>
        </div>
        <div class="flex">
          <span class="mr-2 min-w-fit text-gray-600">积分抵扣:</span>
-          <span class="text-red-500"
-            >{{ fenToYuan(order.pointPrice ?? 0) }} 元</span
-          >
+          <span class="text-red-500">{{ fenToYuan(order.pointPrice ?? 0) }} 元</span>
        </div>
        <div class="flex">
          <span class="mr-2 min-w-fit text-gray-600">应付金额:</span>
@@ -426,10 +418,8 @@ onMounted(async () => {
        </div>
        <div class="flex md:col-span-3">
          <span class="mr-2 min-w-fit text-gray-600">收货地址:</span>
-          <span
-            >{{ order.receiverAreaName }}
-            {{ order.receiverDetailAddress }}</span
-          >
+          <span>{{ order.receiverAreaName }}
+            {{ order.receiverDetailAddress }}</span>
        </div>
        <div class="flex">
          <span class="mr-2 min-w-fit text-gray-600">发货时间:</span>
--- a/apps/web-ele/src/views/mall/trade/order/index.vue
+++ b/apps/web-ele/src/views/mall/trade/order/index.vue
@@ -109,11 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    <Grid table-title="订单列表">
      <template #expand_content="{ row }">
        <div class="order-items">
-          <div
-            v-for="(item, index) in row.items"
-            :key="index"
-            class="order-item"
-          >
+          <div v-for="item in row.items" :key="item.id!" class="order-item">
            <div class="order-item-image">
              <ElImage :src="item.picUrl" class="h-10 w-10" />
            </div>
@@ -121,8 +117,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
              <div class="order-item-name">
                {{ item.spuName }}
                <ElTag
-                  v-for="(property, index) in item.properties"
-                  :key="index"
+                  v-for="property in item.properties"
+                  :key="property.id!"
                  class="ml-1"
                  size="small"
                >
@@ -149,6 +145,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
          :actions="[
            {
              label: $t('common.detail'),
+              type: 'primary',
              link: true,
              icon: ACTION_ICON.VIEW,
              auth: ['trade:order:query'],
@@ -158,6 +155,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
          :drop-down-actions="[
            {
              label: '发货',
+              type: 'primary',
              link: true,
              ifShow: () =>
                row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
@@ -166,6 +164,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
            },
            {
              label: '备注',
+              type: 'primary',
              link: true,
              onClick: handleRemark.bind(null, row),
            },
--- a/apps/web-ele/src/views/mall/trade/order/modules/delivery-form.vue
+++ b/apps/web-ele/src/views/mall/trade/order/modules/delivery-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,18 @@ import { ElMessage } from 'element-plus';
 import { useVbenForm } from '#/adapter/form';
 import { deliveryOrder } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+
 import { useDeliveryFormSchema } from '../data';

 const emit = defineEmits(['success']);

+const formData = ref({
+  id: 0,
+  expressType: 'express',
+  logisticsId: undefined,
+  logisticsNo: '',
+});
+
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
@@ -33,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');
@@ -55,15 +65,15 @@ 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 });
-      if (data.logisticsId === 0) {
-        await formApi.setValues({ expressType: 'none' });
-      }
+      formData.value = data as any;
+      formData.value.expressType = data.logisticsId === 0 ? 'none' : 'express';
+      // 设置到 values
+      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
@@ -72,7 +82,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-ele/src/views/mall/trade/order/modules/price-form.vue
+++ b/apps/web-ele/src/views/mall/trade/order/modules/price-form.vue
@@ -1,17 +1,28 @@
 <script lang="ts" setup>
 import type { MallOrderApi } from '#/api/mall/trade/order';

+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';

 import { ElMessage } from 'element-plus';

 import { useVbenForm } from '#/adapter/form';
 import { updateOrderPrice } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+
 import { usePriceFormSchema } from '../data';

 const emit = defineEmits(['success']);

+const formData = ref({
+  id: 0,
+  payPrice: '0',
+  adjustPrice: '0',
+  newPayPrice: '0',
+});
+
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
@@ -33,9 +44,12 @@ const [Modal, modalApi] = useVbenModal({
    }
    modalApi.lock();
    // 提交表单
-    const data = (await formApi.getValues()) as MallOrderApi.PriceRequest;
+    const data = await formApi.getValues();
    try {
-      await updateOrderPrice(data);
+      await updateOrderPrice({
+        id: data.id,
+        adjustPrice: data.adjustPrice * 100, // 转换为分
+      });
      // 关闭并提示
      await modalApi.close();
      emit('success');
@@ -50,16 +64,17 @@ 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,
-        payPrice: data.payPrice,
-        adjustPrice: data.adjustPrice ? data.adjustPrice / 100 : 0,
-      });
+      formData.value.id = data.id;
+      formData.value.payPrice = fenToYuan(data.payPrice || 0);
+      formData.value.adjustPrice = fenToYuan(data.adjustPrice || 0);
+      formData.value.newPayPrice = formData.value.payPrice;
+      // 设置到 values
+      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
@@ -68,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-1/3" title="调整价格">
+  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['订单价格'])">
    <Form class="mx-4" />
  </Modal>
 </template>