WFC/fe.wfc
2
0
Fork 0
Code Activity

fix：套餐管理界面中英适配

Browse Source
This commit is contained in:
zhongzm
2025-02-08 19:24:23 +08:00
parent 66b705ab17
commit dd390a8a0f
3 changed files with 174 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -857,6 +857,55 @@ const local: any = {
operate:'Operate',
changed:'Revise',
delete:'Delete',
},
package: {
title: 'Package Management',
add: 'Add Package',
packagename: 'Package Name',
plepackagename: 'Please enter package name',
period: 'Billing Cycle',
pleperiod: 'Please enter cycle number',
pleunit:'Please enter the billing period unit',
price: 'Price',
pleprice: 'Please enter price',
traffic: 'Traffic Limit',
pletraffic: 'Please enter traffic',
limit: 'Bandwidth Limit',
plelimit: 'Please select bandwidth limit configuration',
duration: 'Duration Limit',
pleduration: 'Please enter duration',
client: 'Device Limit',
pleclient: 'Please enter number of devices',
unit: 'Units',
usepackage: 'Package Status',
day: 'Day',
month: 'Month',
year: 'Year',
unlimit: 'Unlimited',
up: 'Upload',
down: 'Download',
status:'Status',
use: 'Enable',
unuse: 'Disable',
operate: 'Operation',
edit: 'Edit',
delete: 'Delete',
hour: 'Hour',
second:'s',
rejtraffic: 'Please enter a traffic value greater than 0',
rejduration: 'Please enter a duration value greater than 0',
rejclient: 'Please enter a device number greater than 0',
idnull: 'Edit ID cannot be empty',
editsuc: 'Modified successfully',
addsuc: 'Added successfully',
editerr: 'Modification failed',
adderr: 'Add failed',
confirmdelete: 'Confirm Delete',
deletecontent: 'Are you sure to delete this package?',
confirm: 'Confirm',
close: 'Cancel',
deletesuc: 'Deleted successfully',
deleteerr: 'Delete failed',
}
},
form: {

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

@@ -857,7 +857,56 @@ const local:any = {
operate:'操作',
changed:'修改',
delete:'删除',
}
},
package:{
title:'套餐管理',
add:'新增套餐',
packagename:'套餐名称',
plepackagename:'请输入套餐名称',
period:'计费周期',
pleperiod:'请输入周期数',
pleunit:'请输入计费周期单位',
price:'价格',
pleprice:'请输入价格',
traffic:'流量限制',
pletraffic:'请输入流量',
limit:'带宽限制',
plelimit:'请选择带宽限速配置',
duration:'时长限制',
pleduration:'请输入时长',
client:'设备数限制',
pleclient:'请输入设备数',
unit:'台',
usepackage:'套餐启用',
day:'天',
month:'月',
year:'年',
unlimit:'无限制',
up:'上行',
down:'下行',
status:'套餐状态',
use:'启用',
unuse:'禁用',
operate:'操作',
edit:'编辑',
delete:'删除',
hour:'小时',
second:'秒',
rejtraffic:'请输入大于0的流量值',
rejduration:'请输入大于0的时长值',
rejclient:'请输入大于0的设备数',
idnull:'编辑ID不能为空',
editsuc:'修改成功',
addsuc:'添加成功',
editerr:'修改失败',
adderr:'添加失败',
confirmdelete:'确认删除',
deletecontent:'是否确认删除该套餐?',
confirm:'确认',
close:'取消',
deletesuc:'删除成功',
deleteerr:'删除失败',
},
},
form: {
required: '不能为空',

154
src/views/billing/package/index.vue
View File

@@ -3,24 +3,18 @@
<SimpleScrollbar>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<ACard
title="套餐管理"
:title="t('page.package.title')"
:bordered="false"
:body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
>
<template #extra>
<div class="flex items-center gap-2">
<AButton type="primary" @click="handleAdd">
<template #icon>
<PlusOutlined />
</template>
新增
</AButton>
<TableHeaderOperation
v-model:columns="columnChecks"
:loading="loading"
:show-delete="false"
:notShowAdd="true"
@add="handleAdd"
@refresh="getData"
/>
</div>
@@ -43,7 +37,7 @@
<!-- 新增套餐弹窗 -->
<AModal
v-model:open="showModal"
title="新增套餐"
:title="t('page.package.add')"
@ok="handleOk"
@cancel="handleCancel"
width="600px"
@@ -55,16 +49,16 @@
:label-col="{ span: 6 }"
:wrapper-col="{ span: 16 }"
>
<AFormItem label="套餐名称" name="packageName">
<AInput v-model:value="formState.packageName" placeholder="请输入套餐名称" />
<AFormItem :label="t('page.package.packagename')" name="packageName">
<AInput v-model:value="formState.packageName" :placeholder="t('page.package.plepackagename')" />
</AFormItem>
<AFormItem label="计费周期" required>
<AFormItem :label="t('page.package.period')" required>
<div class="flex gap-2">
<AFormItem name="periodNum" class="mb-0 flex-1">
<AInputNumber
v-model:value="formState.periodNum"
placeholder="请输入周期数"
:placeholder="t('page.package.pleperiod')"
:min="1"
style="width: 100%"
/>
@@ -75,10 +69,10 @@
</div>
</AFormItem>
<AFormItem label="价格" name="price" :rules="[{ required: true, message: '请输入价格' }]">
<AFormItem :label="t('page.package.price')" name="price" :rules="[{ required: true, message: t('page.package.pleprice') }]">
<AInputNumber
v-model:value="formState.price"
placeholder="请输入价格"
:placeholder="t('page.package.pleprice')"
:min="0"
:precision="2"
style="width: 100%"
@@ -87,13 +81,13 @@
/>
</AFormItem>
<AFormItem label="流量限制" name="traffic">
<AFormItem :label="t('page.package.traffic')" name="traffic">
<div class="flex items-center gap-4">
<ASwitch v-model:checked="formState.trafficEnable" />
<div v-if="formState.trafficEnable" class="flex gap-2 flex-1">
<AInputNumber
v-model:value="formState.traffic"
placeholder="请输入流量"
:placeholder="t('page.package.pletraffic')"
:min="1"
:precision="0"
style="width: 100%"
@@ -107,13 +101,13 @@
</div>
</AFormItem>
<AFormItem label="带宽限制" name="rateLimitId">
<AFormItem :label="t('page.package.limit')" name="rateLimitId">
<div class="flex items-center gap-4">
<ASwitch v-model:checked="formState.rateLimitEnable" />
<ASelect
v-if="formState.rateLimitEnable"
v-model:value="formState.rateLimitId"
placeholder="请选择带宽限速配置"
:placeholder="t('page.package.plelimit')"
:options="rateLimitOptions"
:loading="!rateLimitOptions.length"
style="width: 100%"
@@ -121,13 +115,13 @@
</div>
</AFormItem>
<AFormItem label="时长限制" name="duration">
<AFormItem :label="t('page.package.duration')" name="duration">
<div class="flex items-center gap-4">
<ASwitch v-model:checked="formState.durationEnable" />
<div v-if="formState.durationEnable" class="flex gap-2 flex-1">
<AInputNumber
v-model:value="formState.duration"
placeholder="请输入时长"
:placeholder="t('page.package.pleduration')"
:min="1"
style="width: 100%"
/>
@@ -140,21 +134,21 @@
</div>
</AFormItem>
<AFormItem label="设备数限制" name="clientNum">
<AFormItem :label="t('page.package.client')" name="clientNum">
<div class="flex items-center gap-4">
<ASwitch v-model:checked="formState.clientNumEnable" />
<AInputNumber
v-if="formState.clientNumEnable"
v-model:value="formState.clientNum"
placeholder="请输入设备数"
:placeholder="t('page.package.pleclient')"
:min="1"
addon-after="台"
:addon-after="t('page.package.unit')"
style="width: 100%"
/>
</div>
</AFormItem>
<AFormItem label="套餐启用">
<AFormItem :label="t('page.package.usepackage')">
<ASwitch v-model:checked="formState.packageEnable" />
</AFormItem>
</AForm>
@@ -182,6 +176,8 @@ import {
type StorageUnit,
type TimeUnit
} from '@/utils/units';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl);
@@ -194,9 +190,9 @@ const scrollConfig = computed(() => {
});
const periodMap: Record<number, string> = {
1: '天',
2: '月',
3: '年'
1: t('page.package.day'),
2: t('page.package.month'),
3: t('page.package.year')
};
const { columns, columnChecks, data, loading, getData, mobilePagination } = useTable({
@@ -224,13 +220,13 @@ const { columns, columnChecks, data, loading, getData, mobilePagination } = useT
{
key: 'packageName',
dataIndex: 'packageName',
title: '套餐名称',
title: t('page.package.packagename'),
align: 'center'
},
{
key: 'periodNum',
dataIndex: 'periodNum',
title: '计费周期',
title: t('page.package.period'),
align: 'center',
customRender: ({ record }) => {
const { periodNum, periodType } = record;
@@ -241,17 +237,17 @@ const { columns, columnChecks, data, loading, getData, mobilePagination } = useT
{
key: 'price',
dataIndex: 'price',
title: '价格',
title: t('page.package.price'),
align: 'center',
customRender: ({ text }) => `${Number(text).toFixed(2)}`
},
{
key: 'traffic',
dataIndex: 'traffic',
title: '流量限制',
title: t('page.package.traffic'),
align: 'center',
customRender: ({ text, record }) => {
if (!record.trafficEnable) return '无限制';
if (!record.trafficEnable) return t('page.package.unlimit');
const { value, unit } = formatStorage(text);
return `${value} ${unit}`;
}
@@ -259,28 +255,28 @@ const { columns, columnChecks, data, loading, getData, mobilePagination } = useT
{
key: 'rateLimitId',
dataIndex: 'rateLimitId',
title: '带宽限制',
title: t('page.package.limit'),
align: 'center',
customRender: ({ record }) => {
if (!record.rateLimitEnable) return '无限制';
if (!record.rateLimitEnable) return t('page.package.unlimit');
const rateLimit = rateLimitData.value.find(item => item.id === record.rateLimitId);
if (!rateLimit) return '-';
const upLimitText = rateLimit.upLimitEnable
? `上行:${formatBandwidth(rateLimit.upLimit).value} ${formatBandwidth(rateLimit.upLimit).unit}`
: '上行:无限制';
? `${t('page.package.up')}:${formatBandwidth(rateLimit.upLimit).value} ${formatBandwidth(rateLimit.upLimit).unit}`
: `${t('page.package.up')}:${t('page.package.unlimit')}`;
const downLimitText = rateLimit.downLimitEnable
? `下行:${formatBandwidth(rateLimit.downLimit).value} ${formatBandwidth(rateLimit.downLimit).unit}`
: '下行:无限制';
? `${t('page.package.down')}:${formatBandwidth(rateLimit.downLimit).value} ${formatBandwidth(rateLimit.downLimit).unit}`
: `${t('page.package.down')}:${t('page.package.unlimit')}`;
return `${rateLimit.rateLimitName} (${upLimitText}/${downLimitText})`;
}
},
{
key: 'duration',
dataIndex: 'duration',
title: '时长限制',
title: t('page.package.duration'),
align: 'center',
customRender: ({ text, record }) => {
if (!record.durationEnable) return '无限制';
if (!record.durationEnable) return t('page.package.unlimit');
const { value, unit } = formatTime(text);
return `${value} ${unit}`;
}
@@ -288,36 +284,36 @@ const { columns, columnChecks, data, loading, getData, mobilePagination } = useT
{
key: 'clientNum',
dataIndex: 'clientNum',
title: '设备数限制',
title: t('page.package.client'),
align: 'center',
customRender: ({ text, record }) => {
if (!record.clientNumEnable) return '无限制';
if (!record.clientNumEnable) return t('page.package.unlimit');
return text;
}
},
{
key: 'packageEnable',
dataIndex: 'packageEnable',
title: '套餐状态',
title: t('page.package.status'),
align: 'center',
customRender: ({ text }) => (
<ATag color={text ? 'success' : 'error'}>
{text ? '启用' : '禁用'}
{text ? t('page.package.use') : t('page.package.unuse')}
</ATag>
)
},
{
key: 'operate',
title: '操作',
title: t('page.package.operate'),
align: 'center',
width: 200,
customRender: ({ record }) => (
<div class="flex justify-center gap-2">
<AButton type="link" onClick={() => handleEdit(record)}>
编辑
{t('page.package.edit')}
</AButton>
<AButton type="link" danger onClick={() => handleDelete(record)}>
删除
{t('page.package.delete')}
</AButton>
</div>
)
@@ -359,22 +355,22 @@ const formState = ref<PackageForm>({
rateLimitId: undefined,
durationEnable: false,
duration: 0,
durationUnit: '小时',
durationUnit: t('page.package.hour'),
clientNumEnable: false,
clientNum: 0,
packageEnable: true
});
const rules: Record<string, Rule[]> = {
packageName: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
periodNum: [{ required: true, message: '请输入计费周期数', trigger: 'blur' }],
periodType: [{ required: true, message: '请选择计费周期单位', trigger: 'change' }],
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
packageName: [{ required: true, message: t('page.package.plepackagename'), trigger: 'blur' }],
periodNum: [{ required: true, message: t('page.package.pleperiod'), trigger: 'blur' }],
periodType: [{ required: true, message: t('page.package.pleunit'), trigger: 'change' }],
price: [{ required: true, message: t('page.package.pleprice'), trigger: 'blur' }],
traffic: [
{
validator: (_rule: Rule, value: number) => {
if (!formState.value.trafficEnable) return Promise.resolve();
if (!value || value <= 0) return Promise.reject('请输入大于0的流量值');
if (!value || value <= 0) return Promise.reject(t('page.package.rejtraffic'));
return Promise.resolve();
},
trigger: 'blur'
@@ -384,7 +380,7 @@ const rules: Record<string, Rule[]> = {
{
validator: (_rule: Rule, value: number) => {
if (!formState.value.rateLimitEnable) return Promise.resolve();
if (!value) return Promise.reject('请选择带宽限速配置');
if (!value) return Promise.reject(t('page.package.plelimit'));
return Promise.resolve();
},
trigger: 'change'
@@ -394,7 +390,7 @@ const rules: Record<string, Rule[]> = {
{
validator: (_rule: Rule, value: number) => {
if (!formState.value.durationEnable) return Promise.resolve();
if (!value || value <= 0) return Promise.reject('请输入大于0的时长值');
if (!value || value <= 0) return Promise.reject(t('page.package.rejduration'));
return Promise.resolve();
},
trigger: 'blur'
@@ -404,7 +400,7 @@ const rules: Record<string, Rule[]> = {
{
validator: (_rule: Rule, value: number) => {
if (!formState.value.clientNumEnable) return Promise.resolve();
if (!value || value <= 0) return Promise.reject('请输入大于0的设备数');
if (!value || value <= 0) return Promise.reject(t('page.package.rejclient'));
return Promise.resolve();
},
trigger: 'blur'
@@ -412,12 +408,12 @@ const rules: Record<string, Rule[]> = {
]
};
const periodOptions = [
{ label: '小时', value: 0 },
{ label: '天', value: 1 },
{ label: '月', value: 2 },
{ label: '年', value: 3 }
];
const periodOptions =computed(()=> [
{ label: t('page.package.hour'), value: 0 },
{ label: t('page.package.day'), value: 1 },
{ label: t('page.package.month'), value: 2 },
{ label: t('page.package.year'), value: 3 }
]);
const rateLimitOptions = ref<{ label: string; value: number }[]>([]);
@@ -429,11 +425,11 @@ const getRateLimitData = async () => {
rateLimitData.value = response.data || [];
rateLimitOptions.value = rateLimitData.value.map(item => {
const upLimitText = item.upLimitEnable
? `上行:${formatBandwidth(item.upLimit).value} ${formatBandwidth(item.upLimit).unit}`
: '上行:无限制';
? `${t('page.package.up')}:${formatBandwidth(item.upLimit).value} ${formatBandwidth(item.upLimit).unit}`
: `${t('page.package.up')}:${t('page.package.unlimit')}`;
const downLimitText = item.downLimitEnable
? `下行:${formatBandwidth(item.downLimit).value} ${formatBandwidth(item.downLimit).unit}`
: '下行:无限制';
? `${t('page.package.down')}:${formatBandwidth(item.downLimit).value} ${formatBandwidth(item.downLimit).unit}`
: `${t('page.package.down')}:${t('page.package.unlimit')}`;
return {
label: `${item.rateLimitName} (${upLimitText}/${downLimitText})`,
@@ -441,7 +437,7 @@ const getRateLimitData = async () => {
};
});
} catch (error) {
console.error('获取带宽限速配置失败:', error);
console.error('error:', error);
}
};
@@ -472,7 +468,7 @@ const handleCancel = () => {
rateLimitId: undefined,
durationEnable: false,
duration: 0,
durationUnit: '小时',
durationUnit:`${t('page.package.hour')}`,
clientNumEnable: false,
clientNum: 0,
packageEnable: true
@@ -508,7 +504,7 @@ const handleOk = async () => {
if (isEdit.value) {
if (!editId.value) {
message.error('编辑ID不能为空');
message.error(t('page.package.isnull'));
return;
}
// 编辑模式
@@ -518,7 +514,7 @@ const handleOk = async () => {
traffic,
duration
});
message.success('修改成功');
message.success(t('page.package.editsuc'));
} else {
// 新增模式
await addPackage({
@@ -526,12 +522,12 @@ const handleOk = async () => {
traffic,
duration
});
message.success('添加成功');
message.success(t('page.package.addsuc'));
}
handleCancel();
getData();
} catch (error) {
message.error(isEdit.value ? '修改失败' : '添加失败');
message.error(isEdit.value ? t('page.package.editerr') : t('page.package.adderr'));
}
};
@@ -565,18 +561,18 @@ const handleEdit = async (record: Api.Auth.Package) => {
const handleDelete = (record: Api.Auth.Package) => {
Modal.confirm({
title: '确认删除',
content: '是否确认删除该套餐?',
okText: '确认',
cancelText: '取消',
title: t('page.package.confirmdelete'),
content: t('page.package.deletecontent'),
okText: t('page.package.confirm'),
cancelText: t('page.package.close'),
okType: 'danger',
async onOk() {
try {
await deletePackage(record.id);
message.success('删除成功');
message.success(t('page.package.deletesuc'));
getData();
} catch (error) {
message.error('删除失败');
message.error(t('page.package.deleteerr'));
}
}
});