diff --git a/apps/web-antd/src/views/mall/trade/config/data.ts b/apps/web-antd/src/views/mall/trade/config/data.ts index c9125673b..8be8f8a23 100644 --- a/apps/web-antd/src/views/mall/trade/config/data.ts +++ b/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: '商城开通提现的付款方式', + }, +]; diff --git a/apps/web-antd/src/views/mall/trade/config/index.vue b/apps/web-antd/src/views/mall/trade/config/index.vue index e683fe21b..d1c5dedef 100644 --- a/apps/web-antd/src/views/mall/trade/config/index.vue +++ b/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(); +/** 获取配置 */ +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(); }); @@ -89,10 +91,9 @@ const [Form, formApi] = useVbenForm({ - -
+