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

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

@@ -3,9 +3,7 @@ import type { VbenFormSchema } from '#/adapter/form';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-/** 售后表单 */
+export const schema: VbenFormSchema[] = [
-export function useFormSchema(): VbenFormSchema[] {
-  return [
   {
     component: 'Input',
     fieldName: 'id',
@@ -43,7 +41,6 @@ export function useFormSchema(): VbenFormSchema[] {
     componentProps: {
       mode: 'tags',
       placeholder: '请直接输入退货理由',
-        class: 'w-full',
     },
     dependencies: {
       triggerFields: ['type'],
@@ -54,11 +51,12 @@ export function useFormSchema(): VbenFormSchema[] {
     fieldName: 'deliveryExpressFreeEnabled',
     label: '启用包邮',
     component: 'Switch',
+    rules: 'required',
     dependencies: {
       triggerFields: ['type'],
       show: (values) => values.type === 'delivery',
     },
-      description: '商城是否启用全场包邮',
+    help: '商城是否启用全场包邮',
   },
   {
     fieldName: 'deliveryExpressFreePrice',
@@ -67,6 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
     componentProps: {
       min: 0,
       precision: 2,
+      placeholder: '请输入满额包邮金额',
       class: 'w-full',
     },
     rules: 'required',
@@ -74,12 +73,13 @@ export function useFormSchema(): VbenFormSchema[] {
       triggerFields: ['type'],
       show: (values) => values.type === 'delivery',
     },
-      description: '商城商品满多少金额即可包邮，单位：元',
+    help: '商城商品满多少金额即可包邮，单位：元',
   },
   {
     fieldName: 'deliveryPickUpEnabled',
     label: '启用门店自提',
     component: 'Switch',
+    rules: 'required',
     dependencies: {
       triggerFields: ['type'],
       show: (values) => values.type === 'delivery',
@@ -89,7 +89,7 @@ export function useFormSchema(): VbenFormSchema[] {
     fieldName: 'brokerageEnabled',
     label: '启用分佣',
     component: 'Switch',
-      description: '商城是否开启分销模式',
+    help: '商城是否开启分销模式',
     dependencies: {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
@@ -100,21 +100,16 @@ export function useFormSchema(): VbenFormSchema[] {
     label: '分佣模式',
     component: 'RadioGroup',
     componentProps: {
-        options: getDictOptions(
+      options: getDictOptions(DICT_TYPE.BROKERAGE_ENABLED_CONDITION, 'number'),
-          DICT_TYPE.BROKERAGE_ENABLED_CONDITION,
-          'number',
-        ),
       buttonStyle: 'solid',
       optionType: 'button',
-        class: 'w-full',
     },
     rules: 'required',
     dependencies: {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description:
+    help: '人人分销：每个用户都可以成为推广员 \n 指定分销：仅可在后台手动设置推广员',
-        '人人分销：每个用户都可以成为推广员 \n 单级分销：每个用户只能有一个上级推广员',
   },
   {
     fieldName: 'brokerageBindMode',
@@ -124,33 +119,35 @@ export function useFormSchema(): VbenFormSchema[] {
       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:
+    help: '首次绑定：只要用户没有推广人，随时都可以绑定推广关系 \n 注册绑定：只有新用户注册时或首次进入系统时才可以绑定推广关系',
-        '首次绑定：只要用户没有推广人，随时都可以绑定推广关系 \n 注册绑定：只有新用户注册时或首次进入系统时才可以绑定推广关系',
   },
   {
     fieldName: 'brokeragePosterUrls',
     label: '分销海报图',
     component: 'ImageUpload',
+    componentProps: {
+      maxNumber: 9,
+    },
     dependencies: {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description: '个人中心分销海报图片，建议尺寸 600x1000',
+    help: '个人中心分销海报图片，建议尺寸 600x1000',
   },
   {
     fieldName: 'brokerageFirstPercent',
-      label: '一级返佣比例',
+    label: '一级返佣比例（%）',
     component: 'InputNumber',
     componentProps: {
       min: 0,
       max: 100,
+      placeholder: '请输入一级返佣比例',
       class: 'w-full',
     },
     rules: 'required',
@@ -158,15 +155,16 @@ export function useFormSchema(): VbenFormSchema[] {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description: '订单交易成功后给推广人返佣的百分比',
+    help: '订单交易成功后给推广人返佣的百分比',
   },
   {
     fieldName: 'brokerageSecondPercent',
-      label: '二级返佣比例',
+    label: '二级返佣比例（%）',
     component: 'InputNumber',
     componentProps: {
       min: 0,
       max: 100,
+      placeholder: '请输入二级返佣比例',
       class: 'w-full',
     },
     rules: 'required',
@@ -174,7 +172,7 @@ export function useFormSchema(): VbenFormSchema[] {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description: '订单交易成功后给推广人的推荐人返佣的百分比',
+    help: '订单交易成功后给推广人的推荐人返佣的百分比',
   },
   {
     fieldName: 'brokerageFrozenDays',
@@ -182,6 +180,7 @@ export function useFormSchema(): VbenFormSchema[] {
     component: 'InputNumber',
     componentProps: {
       min: 0,
+      placeholder: '请输入佣金冻结天数',
       class: 'w-full',
     },
     rules: 'required',
@@ -189,16 +188,16 @@ export function useFormSchema(): VbenFormSchema[] {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description:
+    help: '防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天',
-        '防止用户退款，佣金被提现了，所以需要设置佣金冻结时间，单位：天',
   },
   {
     fieldName: 'brokerageWithdrawMinPrice',
-      label: '提现最低金额',
+    label: '提现最低金额（元）',
     component: 'InputNumber',
     componentProps: {
       min: 0,
       precision: 2,
+      placeholder: '请输入提现最低金额',
       class: 'w-full',
     },
     rules: 'required',
@@ -206,15 +205,17 @@ export function useFormSchema(): VbenFormSchema[] {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description: '用户提现最低金额限制，单位：元',
+    help: '用户提现最低金额限制，单位：元',
   },
   {
     fieldName: 'brokerageWithdrawFeePercent',
-      label: '提现手续费',
+    label: '提现手续费（元）',
     component: 'InputNumber',
     componentProps: {
       min: 0,
       max: 100,
+      precision: 2,
+      placeholder: '请输入提现手续费百分比',
       class: 'w-full',
     },
     rules: 'required',
@@ -222,8 +223,7 @@ export function useFormSchema(): VbenFormSchema[] {
       triggerFields: ['type'],
       show: (values) => values.type === 'brokerage',
     },
-      description:
+    help: '提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现10 元，到账 9 元，1 元手续费',
-        '提现手续费百分比，范围 0-100，0 为无提现手续费。例：设置 10，即收取 10% 手续费，提现10 元，到账 9 元，1 元手续费',
   },
   {
     fieldName: 'brokerageWithdrawTypes',
@@ -231,14 +231,12 @@ export function useFormSchema(): VbenFormSchema[] {
     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: '商城开通提现的付款方式',
+    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();
+async function handleSubmit() {
-  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() {
   const { valid } = await formApi.validate();
   if (!valid) {
     return;
   }
   // 提交表单
   const data = (await formApi.getValues()) as MallTradeConfigApi.Config;
-  formApi.setState({ commonConfig: { disabled: true } });
+  // 转换金额单位
-  try {
+  data.deliveryExpressFreePrice = yuanToFen(data.deliveryExpressFreePrice!);
+  data.brokerageWithdrawMinPrice = yuanToFen(data.brokerageWithdrawMinPrice!);
   await saveTradeConfig(data);
   message.success($t('ui.actionMessage.operationSuccess'));
-  } finally {
-    formApi.setState({ commonConfig: { disabled: false } });
-  }
 }
 
-onMounted(() => {
-  loadConfig();
-});
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 所有表单项
+    labelWidth: 150,
-    labelClass: 'w-2/6',
   },
-  wrapperClass: 'grid-cols-1',
-  handleSubmit: onSubmit,
   layout: 'horizontal',
-  resetButtonOptions: {
+  handleSubmit,
-    show: false,
+  schema,
-  },
+});
-  schema: useFormSchema(),
+
+/** 初始化 */
+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>