feat：【mall 商城】交易配置的迁移与 bugfix（antd）

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

@@ -3,242 +3,240 @@ import type { VbenFormSchema } from '#/adapter/form';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-/** 售后表单 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
+export const schema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'id',
+    dependencies: {
+      triggerFields: [''],
+      show: () => false,
     },
-    {
-      component: 'Input',
-      fieldName: 'type',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
+  },
+  {
+    component: 'Input',
+    fieldName: 'type',
+    dependencies: {
+      triggerFields: [''],
+      show: () => false,
     },
-    {
-      fieldName: 'afterSaleRefundReasons',
-      label: '退款理由',
-      component: 'Select',
-      componentProps: {
-        mode: 'tags',
-        placeholder: '请直接输入退款理由',
-        class: 'w-full',
-      },
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'afterSale',
-      },
+  },
+  {
+    fieldName: 'afterSaleRefundReasons',
+    label: '退款理由',
+    component: 'Select',
+    componentProps: {
+      mode: 'tags',
+      placeholder: '请直接输入退款理由',
+      class: 'w-full',
     },
-    {
-      fieldName: 'afterSaleReturnReasons',
-      label: '退货理由',
-      component: 'Select',
-      componentProps: {
-        mode: 'tags',
-        placeholder: '请直接输入退货理由',
-        class: 'w-full',
-      },
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'afterSale',
-      },
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'afterSale',
     },
-    {
-      fieldName: 'deliveryExpressFreeEnabled',
-      label: '启用包邮',
-      component: 'Switch',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'delivery',
-      },
-      description: '商城是否启用全场包邮',
+  },
+  {
+    fieldName: 'afterSaleReturnReasons',
+    label: '退货理由',
+    component: 'Select',
+    componentProps: {
+      mode: 'tags',
+      placeholder: '请直接输入退货理由',
     },
-    {
-      fieldName: 'deliveryExpressFreePrice',
-      label: '满额包邮',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'delivery',
-      },
-      description: '商城商品满多少金额即可包邮，单位：元',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'afterSale',
     },
-    {
-      fieldName: 'deliveryPickUpEnabled',
-      label: '启用门店自提',
-      component: 'Switch',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'delivery',
-      },
+  },
+  {
+    fieldName: 'deliveryExpressFreeEnabled',
+    label: '启用包邮',
+    component: 'Switch',
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'delivery',
     },
-    {
-      fieldName: 'brokerageEnabled',
-      label: '启用分佣',
-      component: 'Switch',
-      description: '商城是否开启分销模式',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
+    help: '商城是否启用全场包邮',
+  },
+  {
+    fieldName: 'deliveryExpressFreePrice',
+    label: '满额包邮',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      precision: 2,
+      placeholder: '请输入满额包邮金额',
+      class: 'w-full',
     },
-    {
-      fieldName: 'brokerageEnabledCondition',
-      label: '分佣模式',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(
-          DICT_TYPE.BROKERAGE_ENABLED_CONDITION,
-          'number',
-        ),
-        buttonStyle: 'solid',
-        optionType: 'button',
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description:
-        '人人分销：每个用户都可以成为推广员 \n 单级分销：每个用户只能有一个上级推广员',
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'delivery',
     },
-    {
-      fieldName: 'brokerageBindMode',
-      label: '分销关系绑定',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.BROKERAGE_BIND_MODE, 'number'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description:
-        '首次绑定：只要用户没有推广人，随时都可以绑定推广关系 \n 注册绑定：只有新用户注册时或首次进入系统时才可以绑定推广关系',
+    help: '商城商品满多少金额即可包邮，单位：元',
+  },
+  {
+    fieldName: 'deliveryPickUpEnabled',
+    label: '启用门店自提',
+    component: 'Switch',
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'delivery',
     },
-    {
-      fieldName: 'brokeragePosterUrls',
-      label: '分销海报图',
-      component: 'ImageUpload',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description: '个人中心分销海报图片，建议尺寸 600x1000',
+  },
+  {
+    fieldName: 'brokerageEnabled',
+    label: '启用分佣',
+    component: 'Switch',
+    help: '商城是否开启分销模式',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
     },
-    {
-      fieldName: 'brokerageFirstPercent',
-      label: '一级返佣比例',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        max: 100,
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description: '订单交易成功后给推广人返佣的百分比',
+  },
+  {
+    fieldName: 'brokerageEnabledCondition',
+    label: '分佣模式',
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.BROKERAGE_ENABLED_CONDITION, 'number'),
+      buttonStyle: 'solid',
+      optionType: 'button',
     },
-    {
-      fieldName: 'brokerageSecondPercent',
-      label: '二级返佣比例',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        max: 100,
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description: '订单交易成功后给推广人的推荐人返佣的百分比',
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
     },
-    {
-      fieldName: 'brokerageFrozenDays',
-      label: '佣金冻结天数',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description:
-        '防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天',
+    help: '人人分销：每个用户都可以成为推广员 \n 指定分销：仅可在后台手动设置推广员',
+  },
+  {
+    fieldName: 'brokerageBindMode',
+    label: '分销关系绑定',
+    component: 'RadioGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.BROKERAGE_BIND_MODE, 'number'),
+      buttonStyle: 'solid',
+      optionType: 'button',
     },
-    {
-      fieldName: 'brokerageWithdrawMinPrice',
-      label: '提现最低金额',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description: '用户提现最低金额限制，单位：元',
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
     },
-    {
-      fieldName: 'brokerageWithdrawFeePercent',
-      label: '提现手续费',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        max: 100,
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description:
-        '提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现10 元，到账 9 元，1 元手续费',
+    help: '首次绑定：只要用户没有推广人，随时都可以绑定推广关系 \n 注册绑定：只有新用户注册时或首次进入系统时才可以绑定推广关系',
+  },
+  {
+    fieldName: 'brokeragePosterUrls',
+    label: '分销海报图',
+    component: 'ImageUpload',
+    componentProps: {
+      maxNumber: 9,
     },
-    {
-      fieldName: 'brokerageWithdrawTypes',
-      label: '提现方式',
-      component: 'CheckboxGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, 'number'),
-        class: 'w-full',
-      },
-      rules: 'required',
-      dependencies: {
-        triggerFields: ['type'],
-        show: (values) => values.type === 'brokerage',
-      },
-      description: '商城开通提现的付款方式',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
     },
-  ];
-}
+    help: '个人中心分销海报图片，建议尺寸 600x1000',
+  },
+  {
+    fieldName: 'brokerageFirstPercent',
+    label: '一级返佣比例（%）',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      max: 100,
+      placeholder: '请输入一级返佣比例',
+      class: 'w-full',
+    },
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
+    },
+    help: '订单交易成功后给推广人返佣的百分比',
+  },
+  {
+    fieldName: 'brokerageSecondPercent',
+    label: '二级返佣比例（%）',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      max: 100,
+      placeholder: '请输入二级返佣比例',
+      class: 'w-full',
+    },
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
+    },
+    help: '订单交易成功后给推广人的推荐人返佣的百分比',
+  },
+  {
+    fieldName: 'brokerageFrozenDays',
+    label: '佣金冻结天数',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      placeholder: '请输入佣金冻结天数',
+      class: 'w-full',
+    },
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
+    },
+    help: '防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天',
+  },
+  {
+    fieldName: 'brokerageWithdrawMinPrice',
+    label: '提现最低金额（元）',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      precision: 2,
+      placeholder: '请输入提现最低金额',
+      class: 'w-full',
+    },
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
+    },
+    help: '用户提现最低金额限制，单位：元',
+  },
+  {
+    fieldName: 'brokerageWithdrawFeePercent',
+    label: '提现手续费（元）',
+    component: 'InputNumber',
+    componentProps: {
+      min: 0,
+      max: 100,
+      precision: 2,
+      placeholder: '请输入提现手续费百分比',
+      class: 'w-full',
+    },
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
+    },
+    help: '提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现10 元，到账 9 元，1 元手续费',
+  },
+  {
+    fieldName: 'brokerageWithdrawTypes',
+    label: '提现方式',
+    component: 'CheckboxGroup',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, 'number'),
+    },
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['type'],
+      show: (values) => values.type === 'brokerage',
+    },
+    help: '商城开通提现的付款方式',
+  },
+];

apps/web-antd/src/views/mall/trade/config/index.vue

@@ -4,6 +4,7 @@ import type { MallTradeConfigApi } from '#/api/mall/trade/config';
 import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
+import { fenToYuan, yuanToFen } from '@vben/utils';
 
 import { Card, message, Tabs } from 'ant-design-vue';
 
@@ -11,65 +12,66 @@ import { useVbenForm } from '#/adapter/form';
 import { getTradeConfig, saveTradeConfig } from '#/api/mall/trade/config';
 import { $t } from '#/locales';
 
-import { useFormSchema } from './data';
+import { schema } from './data';
 
 const activeKey = ref('afterSale');
 const formData = ref<MallTradeConfigApi.Config & { type?: string }>();
 
+/** 获取配置 */
+async function getConfigInfo() {
+  const res = await getTradeConfig();
+  if (!res) {
+    return;
+  }
+  formData.value = res;
+  // 转换金额单位
+  formData.value.deliveryExpressFreePrice = Number.parseFloat(
+    fenToYuan(formData.value.deliveryExpressFreePrice!),
+  );
+  formData.value.brokerageWithdrawMinPrice = Number.parseFloat(
+    fenToYuan(formData.value.brokerageWithdrawMinPrice!),
+  );
+  formData.value!.type = activeKey.value;
+  formApi.updateSchema(schema);
+  // 设置到 values
+  await formApi.setValues(formData.value);
+}
+
+/** 切换 Tab */
 function handleTabChange(key: any) {
   activeKey.value = key;
   formData.value!.type = activeKey.value;
   formApi.setValues(formData.value!);
-  formApi.updateSchema(useFormSchema());
+  formApi.updateSchema(schema);
 }
 
-async function loadConfig() {
-  const res = await getTradeConfig();
-  if (res) {
-    formData.value = res;
-    // 金额缩小
-    formData.value.deliveryExpressFreePrice =
-      formData.value.deliveryExpressFreePrice! / 100 || 0;
-    formData.value.brokerageWithdrawMinPrice =
-      formData.value.brokerageWithdrawMinPrice! / 100 || 0;
-    formData.value!.type = activeKey.value;
-    formApi.updateSchema(useFormSchema());
-    await formApi.setValues(formData.value);
-  }
-}
-
-async function onSubmit() {
+/** 提交表单 */
+async function handleSubmit() {
   const { valid } = await formApi.validate();
   if (!valid) {
     return;
   }
   // 提交表单
   const data = (await formApi.getValues()) as MallTradeConfigApi.Config;
-  formApi.setState({ commonConfig: { disabled: true } });
-  try {
-    await saveTradeConfig(data);
-    message.success($t('ui.actionMessage.operationSuccess'));
-  } finally {
-    formApi.setState({ commonConfig: { disabled: false } });
-  }
+  // 转换金额单位
+  data.deliveryExpressFreePrice = yuanToFen(data.deliveryExpressFreePrice!);
+  data.brokerageWithdrawMinPrice = yuanToFen(data.brokerageWithdrawMinPrice!);
+  await saveTradeConfig(data);
+  message.success($t('ui.actionMessage.operationSuccess'));
 }
 
-onMounted(() => {
-  loadConfig();
-});
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 所有表单项
-    labelClass: 'w-2/6',
+    labelWidth: 150,
   },
-  wrapperClass: 'grid-cols-1',
-  handleSubmit: onSubmit,
   layout: 'horizontal',
-  resetButtonOptions: {
-    show: false,
-  },
-  schema: useFormSchema(),
+  handleSubmit,
+  schema,
+});
+
+/** 初始化 */
+onMounted(() => {
+  getConfigInfo();
 });
 </script>
 
@@ -89,10 +91,9 @@ const [Form, formApi] = useVbenForm({
       <Tabs :active-key="activeKey" @change="handleTabChange">
         <Tabs.TabPane tab="售后" key="afterSale" :force-render="true" />
         <Tabs.TabPane tab="配送" key="delivery" :force-render="true" />
-        <!-- TODO @xingyu：tooltip 有点丑；要不要左对齐？（貌似都行） -->
         <Tabs.TabPane tab="分销" key="brokerage" :force-render="true" />
       </Tabs>
-      <Form class="w-3/5" />
+      <Form class="w-2/5" />
     </Card>
   </Page>
 </template>