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

2025-10-15 09:37:02 +08:00
parent b40f10c68b
commit 26f3aa18c2
4 changed files with 149 additions and 138 deletions
--- a/apps/web-antd/src/views/mall/trade/order/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/data.ts
@@ -6,6 +6,7 @@ import { ref } from 'vue';

 import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { convertToInteger, formatToFraction } from '@vben/utils';

 import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
 import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
@@ -284,3 +285,58 @@ export function useRemarkFormSchema(): VbenFormSchema[] {
    },
  ];
 }
+
+/** 订单调价表单配置 */
+export function usePriceFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'payPrice',
+      label: '应付金额(总)',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应付金额(总)',
+        disabled: true,
+        formatter: (value: string) => `${value}元`,
+      },
+    },
+    {
+      fieldName: 'adjustPrice',
+      label: '订单调价',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入订单调价',
+        step: 0.1,
+        precision: 2,
+      },
+      help: '订单调价。 正数，加价；负数，减价',
+      rules: 'required',
+    },
+    {
+      fieldName: 'newPayPrice',
+      label: '调价后',
+      component: 'Input',
+      componentProps: {
+        placeholder: '',
+        formatter: (value: string) => `${value}元`,
+      },
+      dependencies: {
+        triggerFields: ['payPrice', 'adjustPrice'],
+        disabled: true,
+        trigger(values, form) {
+          const originalPrice = convertToInteger(values.payPrice);
+          const adjustPrice = convertToInteger(values.adjustPrice);
+          const newPrice = originalPrice + adjustPrice;
+          form.setFieldValue('newPayPrice', formatToFraction(newPrice));
+        },
+      },
+    },
+  ];
+}
--- a/apps/web-antd/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
@@ -26,9 +26,9 @@ import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';

 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 OrderUpdatePriceForm from '../modules/update-price-form.vue';
 import {
  useDeliveryInfoSchema,
  useExpressTrackColumns,
@@ -156,8 +156,8 @@ const [OrderUpdateAddressFormModal, addressFormModalApi] = useVbenModal({
  destroyOnClose: true,
 });

-const [OrderUpdatePriceFormModal, priceFormModalApi] = useVbenModal({
-  connectedComponent: OrderUpdatePriceForm,
+const [PriceFormModal, priceFormModalApi] = useVbenModal({
+  connectedComponent: PriceForm,
  destroyOnClose: true,
 });

@@ -300,7 +300,7 @@ onMounted(async () => {
    <DeliveryFormModal @success="getDetail" />
    <RemarkFormModal @success="getDetail" />
    <OrderUpdateAddressFormModal @success="getDetail" />
-    <OrderUpdatePriceFormModal @success="getDetail" />
+    <PriceFormModal @success="getDetail" />

    <!-- 订单信息 -->
    <Card class="mb-4">
--- a/apps/web-antd/src/views/mall/trade/order/modules/price-form.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/price-form.vue
@@ -0,0 +1,89 @@
+<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 { message } from 'ant-design-vue';
+
+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: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: usePriceFormSchema(),
+  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 updateOrderPrice({
+        id: data.id,
+        adjustPrice: data.adjustPrice * 100, // 转换为分
+      });
+      // 关闭并提示
+      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.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();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['订单价格'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/mall/trade/order/modules/update-price-form.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/update-price-form.vue
@@ -1,134 +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 { floatToFixed2 } from '@vben/utils';
-
-import { message } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import { updateOrderPrice } from '#/api/mall/trade/order';
-import { $t } from '#/locales';
-
-const emit = defineEmits(['success']);
-
-const formData = ref<MallOrderApi.DeliveryRequest>();
-const newPayPrice = ref<string>();
-
-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: 'payPrice',
-      label: '应付金额(总)',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入应付金额(总)',
-        disabled: true,
-        formatter: (value: string) => `${floatToFixed2(value)}元`,
-      },
-    },
-    {
-      fieldName: 'adjustPrice',
-      label: '订单调价',
-      component: 'InputNumber',
-      componentProps: {
-        class: 'w-100%',
-        placeholder: '请输入订单调价',
-        step: 0.1,
-        precision: 2,
-        onChange: async (value: number) => {
-          const { payPrice } = await formApi.getValues();
-          await formApi.setValues({
-            newPayPrice: (payPrice + value * 100).toFixed(2),
-          });
-        },
-      },
-      description: '订单调价。 正数，加价；负数，减价',
-    },
-    {
-      fieldName: 'newPayPrice',
-      label: '调价后',
-      component: 'Input',
-      componentProps: {
-        disabled: true,
-        formatter: (value: string) => `${floatToFixed2(value)}元`,
-      },
-    },
-  ],
-  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.PriceRequest;
-    if (data.adjustPrice) {
-      data.adjustPrice = data.adjustPrice * 100;
-    }
-    try {
-      await updateOrderPrice(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 {
-      newPayPrice.value = data.payPrice?.toString();
-      data.adjustPrice = data.adjustPrice ? data.adjustPrice / 100 : 0;
-      await formApi.setValues({
-        id: data.id,
-        payPrice: data.payPrice,
-        adjustPrice: data.adjustPrice,
-        newPayPrice: newPayPrice.value,
-      });
-      // 设置到 values
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-</script>
-
-<template>
-  <Modal class="w-1/3" title="调整价格">
-    <Form class="mx-4" />
-  </Modal>
-</template>