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

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

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

apps/web-ele/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 { ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
 
@@ -11,66 +12,71 @@ 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!);
-    await saveTradeConfig(data);
+  data.brokerageWithdrawMinPrice = yuanToFen(data.brokerageWithdrawMinPrice!);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  await saveTradeConfig(data);
-  } finally {
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    formApi.setState({ commonConfig: { disabled: false } });
-  }
 }
 
-onMounted(() => {
+const [Form, formApi] = useVbenForm({
-  loadConfig();
+  commonConfig: {
+    labelWidth: 150,
+  },
+  layout: 'horizontal',
+  handleSubmit,
+  schema,
 });
 
-const [Form, formApi] = useVbenForm({
+/** 初始化 */
-  wrapperClass: 'grid-cols-1',
+onMounted(() => {
-  handleSubmit: onSubmit,
+  getConfigInfo();
-  layout: 'horizontal',
-  resetButtonOptions: {
-    show: false,
-  },
-  schema: useFormSchema(),
 });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <Page>
     <template #doc>
       <DocAlert
         title="【交易】交易订单"
@@ -81,14 +87,13 @@ const [Form, formApi] = useVbenForm({
         url="https://doc.iocoder.cn/mall/trade-cart/"
       />
     </template>
-    <ElCard class="h-full">
+    <ElCard>
-      <ElTabs v-model="activeKey" @tab-change="handleTabChange">
+      <ElTabs :model-value="activeKey" @tab-change="handleTabChange">
         <ElTabPane label="售后" name="afterSale" :force-render="true" />
         <ElTabPane label="配送" name="delivery" :force-render="true" />
-        <!-- TODO @霖：tooltip 有点丑； -->
         <ElTabPane label="分销" name="brokerage" :force-render="true" />
       </ElTabs>
-      <Form class="w-3/5" />
+      <Form class="w-2/5" />
     </ElCard>
   </Page>
 </template>