From dd390a8a0fd30a54ea73a26a75357c4438022a31 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Sat, 8 Feb 2025 19:24:23 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=A5=97=E9=A4=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2=E4=B8=AD=E8=8B=B1=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/langs/en-us.ts          |  49 +++++++++
 src/locales/langs/zh-cn.ts          |  51 ++++++++-
 src/views/billing/package/index.vue | 154 ++++++++++++++--------------
 3 files changed, 174 insertions(+), 80 deletions(-)

diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index a835644..ed4ce89 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -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: {
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index f85d1f3..0ef11c2 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -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: '不能为空',
diff --git a/src/views/billing/package/index.vue b/src/views/billing/package/index.vue
index 0e50786..0b8ad8c 100644
--- a/src/views/billing/package/index.vue
+++ b/src/views/billing/package/index.vue
@@ -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'));
       }
     }
   });