WFC/fe.wfc
2
0
Fork 0
Code Activity

fix：计费规则界面中英适配

Browse Source
This commit is contained in:
zhongzm
2025-02-08 18:03:00 +08:00
parent 1c2fa63615
commit 196ff4bcdc
3 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/locales/langs/en-us.ts
View File

@@ -809,6 +809,26 @@ const local: any = {
plestatus:'Please select status.',
search:'Search',
reset:'Reset',
},
rule:{
title:'Configure Billing Rules',
edit:'Edit',
traffic:'Traffic',
pletraffic:'Please enter flow rate',
price:'Price',
pleprice:'Please enter price',
unit:'Unit',
pleunit:'Please select unit',
status:'Status',
close:'Cancel',
confirm:'Confirm',
modaltitle:'Edit rule',
use:'Enable',
unuse:'Not enabled',
action:'Operate',
geterr:'Failed to get the billing rule',
updatesuc:'Update successful',
updateerr:'Update failed'
}
},
form: {

20
src/locales/langs/zh-cn.ts
View File

@@ -809,6 +809,26 @@ const local:any = {
plestatus:'请选择状态',
search:'查询',
reset:'重置',
},
rule:{
title:'计费规则配置',
edit:'编辑',
traffic:'流量',
pletraffic:'请输入流量大小',
price:'价格',
pleprice:'请输入价格',
unit:'单位',
pleunit:'请选择单位',
status:'状态',
close:'取消',
confirm:'确定',
modaltitle:'编辑规则',
use:'启用',
unuse:'未启用',
action:'操作',
geterr:'获取计费规则失败',
updatesuc:'更新成功',
updateerr:'更新失败'
}
},
form: {

54
src/views/billing/rule/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<ACard
title="计费规则配置"
:title="t('page.rule.title')"
:bordered="false"
:body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden"
@@ -17,7 +17,7 @@
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<ASpace>
<AButton type="primary" @click="handleEdit(record)">编辑</AButton>
<AButton type="primary" @click="handleEdit(record)">{{ t('page.rule.edit') }}</AButton>
</ASpace>
</template>
</template>
@@ -39,29 +39,29 @@
:rules="rules"
layout="vertical"
>
<AFormItem label="流量" name="traffic">
<AFormItem :label="t('page.rule.traffic')" name="traffic">
<AInputNumber
v-model:value="currentRule.traffic"
:min="1"
:precision="0"
style="width: 100%"
placeholder="请输入流量大小"
:placeholder="t('page.rule.pletraffic')"
/>
</AFormItem>
<AFormItem label="价格" name="price">
<AFormItem :label="t('page.rule.price')" name="price">
<AInputNumber
v-model:value="currentRule.price"
:min="0"
:precision="2"
style="width: 100%"
placeholder="请输入价格"
:placeholder="t('page.rule.pleprice')"
/>
</AFormItem>
<AFormItem label="单位" name="unit">
<AFormItem :label="t('page.rule.unit')" name="unit">
<ASelect
v-model:value="currentRule.unit"
style="width: 100%"
placeholder="请选择单位"
:placeholder="t('page.rule.pleunit')"
>
<ASelect.Option
v-for="option in unitOptions"
@@ -72,15 +72,15 @@
</ASelect.Option>
</ASelect>
</AFormItem>
<AFormItem label="状态" name="enable">
<AFormItem :label="t('page.rule.status')" name="enable">
<ASwitch v-model:checked="currentRule.enable" />
</AFormItem>
</AForm>
<template #footer>
<ASpace>
<AButton @click="closeDrawer">取消</AButton>
<AButton type="primary" :loading="submitLoading" @click="handleSubmit">确定</AButton>
<AButton @click="closeDrawer">{{ t('page.rule.close') }}</AButton>
<AButton type="primary" :loading="submitLoading" @click="handleSubmit">{{ t('page.rule.confirm') }}</AButton>
</ASpace>
</template>
</ADrawer>
@@ -105,6 +105,8 @@ import {
} from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import type { ColumnsType } from 'ant-design-vue/es/table';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
interface BillRule {
id: number;
@@ -129,7 +131,7 @@ const loading = ref(false);
const submitLoading = ref(false);
const data = ref<BillRule[]>([]);
const drawerVisible = ref(false);
const drawerTitle = ref('编辑规则');
const drawerTitle = ref(t('page.rule.modaltitle'));
const currentRule = ref<BillRuleUpdate | null>(null);
const formRef = ref<FormInstance>();
@@ -149,21 +151,21 @@ const getUnitText = (unit: number) => {
const columns: ColumnsType = [
{
title: '流量',
title: t('page.rule.traffic'),
dataIndex: 'traffic',
key: 'traffic',
align: 'center',
width: 150
},
{
title: '价格',
title: t('page.rule.price'),
dataIndex: 'price',
key: 'price',
align: 'center',
width: 150
},
{
title: '单位',
title: t('page.rule.unit'),
dataIndex: 'unit',
key: 'unit',
align: 'center',
@@ -171,15 +173,15 @@ const columns: ColumnsType = [
customRender: ({ text }) => getUnitText(text)
},
{
title: '状态',
title: t('page.rule.status'),
dataIndex: 'enable',
key: 'enable',
align: 'center',
width: 100,
customRender: ({ text: enable }) => (enable ? '启用' : '未启用')
customRender: ({ text: enable }) => (enable ? t('page.rule.use') : t('page.rule.unuse'))
},
{
title: '操作',
title: t('page.rule.action'),
key: 'action',
align: 'center',
width: 100,
@@ -188,9 +190,9 @@ const columns: ColumnsType = [
];
const rules = {
traffic: [{ required: true, message: '请输入流量大小' }],
price: [{ required: true, message: '请输入价格' }],
unit: [{ required: true, message: '请输入单位' }]
traffic: [{ required: true, message: t('page.rule.pletraffic') }],
price: [{ required: true, message: t('page.rule.pleprice') }],
unit: [{ required: true, message: t('page.rule.pleunit') }]
};
// 获取列表数据
@@ -204,8 +206,8 @@ const getData = async () => {
data.value = [];
}
} catch (error) {
console.error('获取计费规则失败:', error);
message.error('获取计费规则失败');
console.error('error:', error);
message.error(t('page.rule.geterr'));
data.value = [];
} finally {
loading.value = false;
@@ -234,12 +236,12 @@ const handleSubmit = async () => {
submitLoading.value = true;
await updateBillRule(currentRule.value);
message.success('更新成功');
message.success(t('page.rule.updatesuc'));
closeDrawer();
getData();
} catch (error) {
console.error('更新失败:', error);
message.error('更新失败');
console.error('update error:', error);
message.error(t('page.rule.updateerr'));
} finally {
submitLoading.value = false;
}