2
0

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

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

View File

@@ -809,6 +809,26 @@ const local: any = {
plestatus:'Please select status.', plestatus:'Please select status.',
search:'Search', search:'Search',
reset:'Reset', 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: { form: {

View File

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

View File

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