95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
||
import type { MallTradeConfigApi } from '#/api/mall/trade/config';
|
||
|
||
import { onMounted, ref } from 'vue';
|
||
|
||
import { DocAlert, Page } from '@vben/common-ui';
|
||
|
||
import { ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
|
||
|
||
import { useVbenForm } from '#/adapter/form';
|
||
import { getTradeConfig, saveTradeConfig } from '#/api/mall/trade/config';
|
||
import { $t } from '#/locales';
|
||
|
||
import { useFormSchema } from './data';
|
||
|
||
const activeKey = ref('afterSale');
|
||
const formData = ref<MallTradeConfigApi.Config & { type?: string }>();
|
||
|
||
function handleTabChange(key: any) {
|
||
activeKey.value = key;
|
||
formData.value!.type = activeKey.value;
|
||
formApi.setValues(formData.value!);
|
||
formApi.updateSchema(useFormSchema());
|
||
}
|
||
|
||
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() {
|
||
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);
|
||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||
} finally {
|
||
formApi.setState({ commonConfig: { disabled: false } });
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadConfig();
|
||
});
|
||
|
||
const [Form, formApi] = useVbenForm({
|
||
wrapperClass: 'grid-cols-1',
|
||
handleSubmit: onSubmit,
|
||
layout: 'horizontal',
|
||
resetButtonOptions: {
|
||
show: false,
|
||
},
|
||
schema: useFormSchema(),
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height>
|
||
<template #doc>
|
||
<DocAlert
|
||
title="【交易】交易订单"
|
||
url="https://doc.iocoder.cn/mall/trade-order/"
|
||
/>
|
||
<DocAlert
|
||
title="【交易】购物车"
|
||
url="https://doc.iocoder.cn/mall/trade-cart/"
|
||
/>
|
||
</template>
|
||
<ElCard class="h-full">
|
||
<ElTabs v-model="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" />
|
||
</ElCard>
|
||
</Page>
|
||
</template>
|