feat: 增加物联卡其他页面的多语言处理

src/i18n/pages/iotCard/en.ts

@@ -42,5 +42,181 @@ export default {
         traffic: 'Traffic'
       }
     }
+  },
+  index: {
+    search: {
+      placeholder: 'Enter ICCID or Card Number',
+      query: 'Query',
+      reset: 'Reset'
+    },
+    table: {
+      columns: {
+        cardNumber: 'Card Number',
+        iccid: 'ICCID',
+        bindDevice: 'Bind Device',
+        platform: 'Platform',
+        operator: 'Operator',
+        type: 'Type',
+        totalFlow: 'Total Flow',
+        usedFlow: 'Used Flow',
+        remainFlow: 'Remain Flow',
+        activationDate: 'Activation Date',
+        updateTime: 'Update Time',
+        status: 'Status',
+        actions: 'Actions'
+      },
+      actions: {
+        detail: 'Detail',
+        delete: 'Delete'
+      }
+    },
+    operators: {
+      telecom: 'China Telecom',
+      unicom: 'China Unicom',
+      mobile: 'China Mobile'
+    },
+    types: {
+      monthly: 'Monthly',
+      quarterly: 'Quarterly',
+      yearly: 'Yearly',
+      other: 'Other'
+    },
+    status: {
+      activatable: 'Activatable',
+      testActivated: 'Test Activated',
+      testDeactivated: 'Test Deactivated',
+      inUse: 'In Use',
+      suspended: 'Suspended',
+      operatorManaged: 'Operator Managed'
+    },
+    messages: {
+      deleteConfirm: 'This operation will delete the card number: "{cardNumber}", continue?',
+      tip: 'Tip',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      deleteSuccess: 'Delete Success'
+    }
+  },
+  detail: {
+    basicInfo: {
+      title: 'Basic Information',
+      cardNumber: 'Card Number',
+      iccid: 'ICCID',
+      bindDevice: 'Bind Device',
+      platformType: 'Platform Type',
+      platformName: 'Platform Name',
+      operator: 'Operator',
+      type: 'Type',
+      activationDate: 'Activation Date',
+      updateTime: 'Update Time',
+      totalFlow: 'Total Flow',
+      usedFlow: 'Used Flow',
+      remainFlow: 'Remain Flow',
+      status: 'Status',
+      description: 'Description'
+    },
+    flowChart: {
+      title: 'Flow Statistics',
+      buttons: {
+        yesterday: 'Yesterday',
+        week: 'Last Week',
+        month: 'Last Month',
+        year: 'Last Year'
+      },
+      datePicker: {
+        rangeSeparator: 'to',
+        startPlaceholder: 'Start Time',
+        endPlaceholder: 'End Time'
+      }
+    },
+    dataStatistics: {
+      title: 'Data Statistics',
+      yesterdayFlow: 'Yesterday Flow Consumption',
+      monthFlow: 'Current Month Flow Consumption',
+      yearFlow: 'Current Year Flow Consumption'
+    }
+  },
+  platformManage: {
+    search: {
+      placeholder: 'Enter keyword to search',
+      query: 'Query',
+      reset: 'Reset',
+      add: 'Add'
+    },
+    table: {
+      columns: {
+        name: 'Name',
+        platformType: 'Platform Type',
+        appId: 'App ID',
+        status: 'Status',
+        description: 'Description',
+        actions: 'Actions'
+      },
+      actions: {
+        edit: 'Edit',
+        delete: 'Delete'
+      }
+    },
+    status: {
+      disabled: 'Disabled',
+      enabled: 'Enabled'
+    },
+    messages: {
+      deleteConfirm: 'This operation will delete the card number: "{cardNumber}", continue?',
+      tip: 'Tip',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      deleteSuccess: 'Delete Success'
+    },
+    addOrEdit: {
+      title: {
+        add: 'Add',
+        edit: 'Edit'
+      },
+      form: {
+        platformType: 'Platform Type',
+        name: 'Name',
+        appId: 'App ID',
+        secretKey: 'Secret Key',
+        userId: 'User ID',
+        interfaceUrl: 'Interface URL',
+        status: 'Status',
+        description: 'Description'
+      },
+      placeholders: {
+        select: 'Please select',
+        name: 'Please enter name',
+        appId: 'Please enter App ID',
+        secretKey: 'Please enter secret key',
+        userId: 'Please enter user ID',
+        interfaceUrl: 'Please enter interface URL',
+        description: 'Please enter description'
+      },
+      operators: {
+        telecom: 'China Telecom',
+        unicom: 'China Unicom',
+        mobile: 'China Mobile'
+      },
+      switch: {
+        enabled: 'On',
+        disabled: 'Off'
+      },
+      buttons: {
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+      },
+      validation: {
+        platformType: 'Please select platform type',
+        name: 'Please enter name',
+        userId: 'Please enter user ID',
+        secretKey: 'Please enter secret key',
+        appId: 'Please enter App ID',
+        interfaceUrl: 'Please enter interface URL'
+      },
+      messages: {
+        editSuccess: 'Edit Success',
+        addSuccess: 'Add Success'
+      }
+    }
   }
 };

src/i18n/pages/iotCard/zh-cn.ts

@@ -42,5 +42,181 @@ export default {
 				traffic: '流量'
 			}
 		}
+	},
+	index: {
+		search: {
+			placeholder: '请输入ICCID或卡号',
+			query: '查询',
+			reset: '重置'
+		},
+		table: {
+			columns: {
+				cardNumber: '卡号',
+				iccid: 'ICCID',
+				bindDevice: '绑定设备',
+				platform: '平台对接',
+				operator: '运营商',
+				type: '类型',
+				totalFlow: '总流量',
+				usedFlow: '使用流量',
+				remainFlow: '剩余流量',
+				activationDate: '激活日期',
+				updateTime: '更新时间',
+				status: '状态',
+				actions: '操作'
+			},
+			actions: {
+				detail: '详情',
+				delete: '删除'
+			}
+		},
+		operators: {
+			telecom: '电信',
+			unicom: '联通',
+			mobile: '移动'
+		},
+		types: {
+			monthly: '月卡',
+			quarterly: '季卡',
+			yearly: '年卡',
+			other: '其他'
+		},
+		status: {
+			activatable: '可激活',
+			testActivated: '测试激活',
+			testDeactivated: '测试去激活',
+			inUse: '在用',
+			suspended: '停机',
+			operatorManaged: '运营商管理状态'
+		},
+		messages: {
+			deleteConfirm: '此操作将卡号为：“{cardNumber}”进行删除，是否继续?',
+			tip: '提示',
+			confirm: '确认',
+			cancel: '取消',
+			deleteSuccess: '删除成功'
+		}
+	},
+	detail: {
+		basicInfo: {
+			title: '基本信息',
+			cardNumber: '卡号',
+			iccid: 'ICCID',
+			bindDevice: '绑定设备',
+			platformType: '平台类型',
+			platformName: '平台名称',
+			operator: '运营商',
+			type: '类型',
+			activationDate: '激活日期',
+			updateTime: '更新时间',
+			totalFlow: '总流量',
+			usedFlow: '使用流量',
+			remainFlow: '剩余流量',
+			status: '状态',
+			description: '说明'
+		},
+		flowChart: {
+			title: '流量统计',
+			buttons: {
+				yesterday: '昨日',
+				week: '近一周',
+				month: '近一月',
+				year: '近一年'
+			},
+			datePicker: {
+				rangeSeparator: '至',
+				startPlaceholder: '开始时间',
+				endPlaceholder: '结束时间'
+			}
+		},
+		dataStatistics: {
+			title: '数据统计',
+			yesterdayFlow: '昨日流量消耗',
+			monthFlow: '当月流量消耗',
+			yearFlow: '本年流量消耗'
+		}
+	},
+	platformManage: {
+		search: {
+			placeholder: '请输入关键字搜索',
+			query: '查询',
+			reset: '重置',
+			add: '新增'
+		},
+		table: {
+			columns: {
+				name: '名称',
+				platformType: '平台类型',
+				appId: 'App ID',
+				status: '状态',
+				description: '说明',
+				actions: '操作'
+			},
+			actions: {
+				edit: '编辑',
+				delete: '删除'
+			}
+		},
+		status: {
+			disabled: '禁用',
+			enabled: '开启'
+		},
+		messages: {
+			deleteConfirm: '此操作将卡号为：“{cardNumber}”，是否继续?',
+			tip: '提示',
+			confirm: '确认',
+			cancel: '取消',
+			deleteSuccess: '删除成功'
+		},
+		addOrEdit: {
+			title: {
+				add: '新增',
+				edit: '编辑'
+			},
+			form: {
+				platformType: '平台类型',
+				name: '名称',
+				appId: 'App ID',
+				secretKey: 'secretKey',
+				userId: '用户id',
+				interfaceUrl: '接口地址',
+				status: '状态',
+				description: '说明'
+			},
+			placeholders: {
+				select: '请选择',
+				name: '请输入名称',
+				appId: '请输入App ID',
+				secretKey: '请输入secretKey',
+				userId: '请输入用户id',
+				interfaceUrl: '请输入接口地址',
+				description: '请输入说明'
+			},
+			operators: {
+				telecom: '电信',
+				unicom: '联通',
+				mobile: '移动'
+			},
+			switch: {
+				enabled: '启',
+				disabled: '禁'
+			},
+			buttons: {
+				cancel: '取 消',
+				confirm: '确定'
+			},
+			validation: {
+				platformType: '请选择平台类型',
+				name: '请输入名称',
+				userId: '请输入用户id',
+				secretKey: '请输入secretKey',
+				appId: '请输入App ID',
+				interfaceUrl: '请输入接口地址'
+			},
+			messages: {
+				editSuccess: '修改成功',
+				addSuccess: '添加成功'
+			}
+		}
 	}
 };

src/i18n/pages/iotCard/zh-tw.ts

@@ -42,5 +42,181 @@ export default {
 				traffic: '流量'
 			}
 		}
+	},
+	index: {
+		search: {
+			placeholder: '請輸入ICCID或卡號',
+			query: '查詢',
+			reset: '重置'
+		},
+		table: {
+			columns: {
+				cardNumber: '卡號',
+				iccid: 'ICCID',
+				bindDevice: '綁定設備',
+				platform: '平台對接',
+				operator: '運營商',
+				type: '類型',
+				totalFlow: '總流量',
+				usedFlow: '使用流量',
+				remainFlow: '剩餘流量',
+				activationDate: '激活日期',
+				updateTime: '更新時間',
+				status: '狀態',
+				actions: '操作'
+			},
+			actions: {
+				detail: '詳情',
+				delete: '刪除'
+			}
+		},
+		operators: {
+			telecom: '電信',
+			unicom: '聯通',
+			mobile: '移動'
+		},
+		types: {
+			monthly: '月卡',
+			quarterly: '季卡',
+			yearly: '年卡',
+			other: '其他'
+		},
+		status: {
+			activatable: '可激活',
+			testActivated: '測試激活',
+			testDeactivated: '測試去激活',
+			inUse: '在用',
+			suspended: '停機',
+			operatorManaged: '運營商管理狀態'
+		},
+		messages: {
+			deleteConfirm: '此操作將卡號為：「{cardNumber}」進行刪除，是否繼續?',
+			tip: '提示',
+			confirm: '確認',
+			cancel: '取消',
+			deleteSuccess: '刪除成功'
+		}
+	},
+	detail: {
+		basicInfo: {
+			title: '基本信息',
+			cardNumber: '卡號',
+			iccid: 'ICCID',
+			bindDevice: '綁定設備',
+			platformType: '平台類型',
+			platformName: '平台名稱',
+			operator: '運營商',
+			type: '類型',
+			activationDate: '激活日期',
+			updateTime: '更新時間',
+			totalFlow: '總流量',
+			usedFlow: '使用流量',
+			remainFlow: '剩餘流量',
+			status: '狀態',
+			description: '說明'
+		},
+		flowChart: {
+			title: '流量統計',
+			buttons: {
+				yesterday: '昨日',
+				week: '近一週',
+				month: '近一月',
+				year: '近一年'
+			},
+			datePicker: {
+				rangeSeparator: '至',
+				startPlaceholder: '開始時間',
+				endPlaceholder: '結束時間'
+			}
+		},
+		dataStatistics: {
+			title: '數據統計',
+			yesterdayFlow: '昨日流量消耗',
+			monthFlow: '當月流量消耗',
+			yearFlow: '本年流量消耗'
+		}
+	},
+	platformManage: {
+		search: {
+			placeholder: '請輸入關鍵字搜索',
+			query: '查詢',
+			reset: '重置',
+			add: '新增'
+		},
+		table: {
+			columns: {
+				name: '名稱',
+				platformType: '平台類型',
+				appId: 'App ID',
+				status: '狀態',
+				description: '說明',
+				actions: '操作'
+			},
+			actions: {
+				edit: '編輯',
+				delete: '刪除'
+			}
+		},
+		status: {
+			disabled: '禁用',
+			enabled: '開啟'
+		},
+		messages: {
+			deleteConfirm: '此操作將卡號為：「{cardNumber}」，是否繼續?',
+			tip: '提示',
+			confirm: '確認',
+			cancel: '取消',
+			deleteSuccess: '刪除成功'
+		},
+		addOrEdit: {
+			title: {
+				add: '新增',
+				edit: '編輯'
+			},
+			form: {
+				platformType: '平台類型',
+				name: '名稱',
+				appId: 'App ID',
+				secretKey: 'secretKey',
+				userId: '用戶id',
+				interfaceUrl: '接口地址',
+				status: '狀態',
+				description: '說明'
+			},
+			placeholders: {
+				select: '請選擇',
+				name: '請輸入名稱',
+				appId: '請輸入App ID',
+				secretKey: '請輸入secretKey',
+				userId: '請輸入用戶id',
+				interfaceUrl: '請輸入接口地址',
+				description: '請輸入說明'
+			},
+			operators: {
+				telecom: '電信',
+				unicom: '聯通',
+				mobile: '移動'
+			},
+			switch: {
+				enabled: '啟',
+				disabled: '禁'
+			},
+			buttons: {
+				cancel: '取 消',
+				confirm: '確定'
+			},
+			validation: {
+				platformType: '請選擇平台類型',
+				name: '請輸入名稱',
+				userId: '請輸入用戶id',
+				secretKey: '請輸入secretKey',
+				appId: '請輸入App ID',
+				interfaceUrl: '請輸入接口地址'
+			},
+			messages: {
+				editSuccess: '修改成功',
+				addSuccess: '添加成功'
+			}
+		}
 	}
 };

src/views/modules/iotCard/index/detail.vue

@@ -191,21 +191,21 @@
     <div class="statistics-wrap gap-3">
       <el-card shadow="nover" class="left-wrap">
         <div class="top-title-wrap">
-            <div class="title">流量统计</div>
+            <div class="title">{{ $t('message.iotCard.detail.flowChart.title') }}</div>
             <div class="operate-wrap">
               <el-button-group>
-                <el-button @click="changeDate(1)" :type="activeIndex == 1 ?  'primary' : ''">昨日</el-button>
-                <el-button @click="changeDate(2)" :type="activeIndex == 2 ?  'primary' : ''">近一周</el-button>
-                <el-button @click="changeDate(3)" :type="activeIndex == 3 ?  'primary' : ''">近一月</el-button>
-                <el-button @click="changeDate(4)" :type="activeIndex == 4 ?  'primary' : ''">近一年</el-button>
+                <el-button @click="changeDate(1)" :type="activeIndex == 1 ?  'primary' : ''">{{ $t('message.iotCard.detail.flowChart.buttons.yesterday') }}</el-button>
+                <el-button @click="changeDate(2)" :type="activeIndex == 2 ?  'primary' : ''">{{ $t('message.iotCard.detail.flowChart.buttons.week') }}</el-button>
+                <el-button @click="changeDate(3)" :type="activeIndex == 3 ?  'primary' : ''">{{ $t('message.iotCard.detail.flowChart.buttons.month') }}</el-button>
+                <el-button @click="changeDate(4)" :type="activeIndex == 4 ?  'primary' : ''">{{ $t('message.iotCard.detail.flowChart.buttons.year') }}</el-button>
               </el-button-group>
                 <el-date-picker
                   class="date-picker-wrap"
                   v-model="dateRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
+                  type="daterange"
+                  :range-separator="$t('message.iotCard.detail.flowChart.datePicker.rangeSeparator')"
+                  :start-placeholder="$t('message.iotCard.detail.flowChart.datePicker.startPlaceholder')"
+                  :end-placeholder="$t('message.iotCard.detail.flowChart.datePicker.endPlaceholder')"
                   format="YYYY-MM-DD HH:mm:ss"
                   date-format="YYYY/MM/DD"
                   time-format="hh:mm:ss"
@@ -217,17 +217,17 @@
       </el-card>
 
       <el-card shadow="nover" class="right-wrap">
-        <div class="title">数据统计</div>
+        <div class="title">{{ $t('message.iotCard.detail.dataStatistics.title') }}</div>
         <div class="line-wrap flow-line-wrap">
           <div class="text-wrap">
-            <div class="text">昨日流量消耗</div>
+            <div class="text">{{ $t('message.iotCard.detail.dataStatistics.yesterdayFlow') }}</div>
             <div>{{formatSize(statisticsData.yesterdayTotal * 1024 * 1024)}}</div>
           </div>
           <div class="line-inner-wrap" ref="yesterdayLine"></div>
         </div>
         <div class="line-wrap flow-line-wrap">
           <div class="text-wrap">
-            <div class="text">当月流量消耗</div>
+            <div class="text">{{ $t('message.iotCard.detail.dataStatistics.monthFlow') }}</div>
             <div>{{formatSize(statisticsData.monthTotal * 1024 * 1024)}}</div>
           </div>
           <div class="line-inner-wrap" ref="monthLine"></div>
@@ -235,7 +235,7 @@
 
         <div class="line-wrap flow-line-wrap">
           <div class="text-wrap">
-            <div class="text">本年流量消耗</div>
+            <div class="text">{{ $t('message.iotCard.detail.dataStatistics.yearFlow') }}</div>
             <div>{{formatSize(statisticsData.yearTotal * 1024 * 1024)}}</div>
           </div>
           <div class="line-inner-wrap" ref="yearLine"></div>
@@ -254,9 +254,11 @@ import { useStore } from '/@/store/index';
 import { useRoute } from 'vue-router';
 import * as echarts from 'echarts';
 import dayjs from 'dayjs';
+import { useI18n } from 'vue-i18n';
 
 const store = useStore();
 const route = useRoute();
+const { t } = useI18n();
 const sim = ref({
   accNumber: "",// 卡号
   iccid: "",// ICCID
@@ -407,17 +409,20 @@ const handleDateChange = async (value:any) => {
 
 const formatOperator = (val:number) => {
   // 1电信,2联通,3移动
-  return ['', '电信', '联通', '移动'][val];
+  const operators = ['', t('message.iotCard.index.operators.telecom'), t('message.iotCard.index.operators.unicom'), t('message.iotCard.index.operators.mobile')];
+  return operators[val];
 }
 
 const formatType = (val:number) => {
   // 1月卡，2季卡，3年卡，4其他
-  return ['', '月卡', '季卡', '年卡', '其他'][val];
+  const types = ['', t('message.iotCard.index.types.monthly'), t('message.iotCard.index.types.quarterly'), t('message.iotCard.index.types.yearly'), t('message.iotCard.index.types.other')];
+  return types[val];
 }
 
 const formatStatus = (val:any) => {
   // 1：可激活 2：测试激活 3：测试去激活 4：在用 5：停机 6：运营商管理状态
-  return ['', '可激活', '测试激活', '测试去激活', '在用', '停机', '运营商管理状态'][val];
+  const statuses = ['', t('message.iotCard.index.status.activatable'), t('message.iotCard.index.status.testActivated'), t('message.iotCard.index.status.testDeactivated'), t('message.iotCard.index.status.inUse'), t('message.iotCard.index.status.suspended'), t('message.iotCard.index.status.operatorManaged')];
+  return statuses[val];
 }
 
 // 折线图 - 昨日流量消耗
@@ -443,14 +448,14 @@ const initYesterdayLineChart = () => {
 			formatter: function (params:any) {
 					var relVal = params[0].name
 					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + formatSize(params[0].value*1024*1024)
+					relVal += '<br/>' + circle + ' ' + t('message.iotCard.detail.charts.tooltip.flow') + ': ' + formatSize(params[0].value*1024*1024)
 					return relVal;
 				}
 		},
     grid: { top: 10, right: 10, bottom: 10, left: 10 },
     series: [
       {
-        name: '流量',
+        name: t('message.iotCard.detail.charts.series.flow'),
         type: 'line',
         smooth: true,
         data: yesterdayLineData.value,
@@ -487,14 +492,14 @@ const initMonthLineChart = () => {
 			formatter: function (params:any) {
 					var relVal = params[0].name
 					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + formatSize(params[0].value*1024*1024)
+					relVal += '<br/>' + circle + ' ' + t('message.iotCard.detail.charts.tooltip.flow') + ': ' + formatSize(params[0].value*1024*1024)
 					return relVal;
 				}
 		},
     grid: { top: 10, right: 10, bottom: 10, left: 10 },
     series: [
       {
-        name: '流量',
+        name: t('message.iotCard.detail.charts.series.flow'),
         type: 'line',
         smooth: true,
         data: monthLineData.value,
@@ -530,14 +535,14 @@ const initYearLineChart = () => {
 			formatter: function (params:any) {
 					var relVal = params[0].name
 					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + formatSize(params[0].value*1024*1024)
+					relVal += '<br/>' + circle + ' ' + t('message.iotCard.detail.charts.tooltip.flow') + ': ' + formatSize(params[0].value*1024*1024)
 					return relVal;
 				}
 		},
     grid: { top: 10, right: 10, bottom: 10, left: 10 },
     series: [
       {
-        name: '流量',
+        name: t('message.iotCard.detail.charts.series.flow'),
         type: 'line',
         smooth: true,
         data: yearLineData.value,
@@ -562,7 +567,7 @@ const iniFlowLineChart = async () => {
 			formatter: function (params:any) {
 					var relVal = params[0].name
 					let circle = `<i style="margin-right:4px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color:${params[0].color}"></i>`
-					relVal += '<br/>' + circle + ' 流量: ' + params[0].value + 'MB'
+					relVal += '<br/>' + circle + ' ' + t('message.iotCard.detail.charts.tooltip.flow') + ': ' + params[0].value + 'MB'
 					return relVal;
 				}
 		},
@@ -589,7 +594,7 @@ const iniFlowLineChart = async () => {
     ],
     series: [
       {
-        name: '流量',
+        name: t('message.iotCard.detail.charts.series.flow'),
         type: 'line',
         symbolSize: 6,
         symbol: 'circle',

src/views/modules/iotCard/index/index.vue

@@ -4,46 +4,46 @@
     <el-card shadow="nover" class="page-full-part">
       <el-form :model="params" inline ref="queryRef">
         <el-form-item prop="deptName" class="mr10">
-          <el-input @keyup.enter.native="getList" style="width: 240px;" v-model="params.keyWord" placeholder="请输入ICCID或卡号" clearable />
+          <el-input @keyup.enter.native="getList" style="width: 240px;" v-model="params.keyWord" :placeholder="$t('message.iotCard.index.search.placeholder')" clearable />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="getList">
             <el-icon>
               <ele-Search />
             </el-icon>
-            查询
+            {{ $t('message.iotCard.index.search.query') }}
           </el-button>
           <el-button v-auth="'reset'" @click="resetQuery()">
             <el-icon>
               <ele-Refresh />
             </el-icon>
-            重置
+            {{ $t('message.iotCard.index.search.reset') }}
           </el-button>
         </el-form-item>
       </el-form>
       <el-table :data="tableData" max-height="calc(100vh  - 210px);" v-loading="loading" style="width: 100%">
-        <el-table-column v-col="'accNumber'" fixed="left" min-width="130" label="卡号" prop="accNumber" align="center" />
-        <el-table-column v-col="'ICCID'" min-width="180" label="ICCID" prop="iccid" align="center" />
-        <el-table-column v-col="'bindDeviceName'" label="绑定设备" prop="bindDeviceName" align="center" />
-        <el-table-column v-col="'platName'" label="平台对接" prop="platName" align="center" />
-        <el-table-column v-col="'types'" label="运营商" prop="types" align="center">
+        <el-table-column v-col="'accNumber'" fixed="left" min-width="130" :label="$t('message.iotCard.index.table.columns.cardNumber')" prop="accNumber" align="center" />
+        <el-table-column v-col="'ICCID'" min-width="180" :label="$t('message.iotCard.index.table.columns.iccid')" prop="iccid" align="center" />
+        <el-table-column v-col="'bindDeviceName'" width="120" :label="$t('message.iotCard.index.table.columns.bindDevice')" prop="bindDeviceName" align="center" />
+        <el-table-column v-col="'platName'" width="120" :label="$t('message.iotCard.index.table.columns.platform')" prop="platName" align="center" />
+        <el-table-column v-col="'types'" width="120" :label="$t('message.iotCard.index.table.columns.operator')" prop="types" align="center">
           <template #default="scope">{{ formatOperator(scope.row.types) }}</template>
         </el-table-column>
-        <el-table-column v-col="'simTypes'" label="类型" prop="simTypes" align="center">
+        <el-table-column v-col="'simTypes'" width="120" :label="$t('message.iotCard.index.table.columns.type')" prop="simTypes" align="center">
           <template #default="scope">{{ formatType(scope.row.simTypes) }}</template>
         </el-table-column>
-        <el-table-column v-col="'totalFlow'" label="总流量" prop="totalFlow" align="center" />
-        <el-table-column v-col="'usedFlow'" label="使用流量" prop="usedFlow" align="center" />
-        <el-table-column v-col="'leaveFlow'" label="剩余流量" prop="leaveFlow" align="center" />
-        <el-table-column v-col="'activationTime'" width="160" label="激活日期" prop="activationTime" align="center" />
-        <el-table-column v-col="'updatedAt'" width="160" label="更新时间" prop="updatedAt" align="center" />
-        <el-table-column v-col="'simStatus'" label="状态" prop="simStatus" align="center">
+        <el-table-column v-col="'totalFlow'" width="120" :label="$t('message.iotCard.index.table.columns.totalFlow')" prop="totalFlow" align="center" />
+        <el-table-column v-col="'usedFlow'" width="120" :label="$t('message.iotCard.index.table.columns.usedFlow')" prop="usedFlow" align="center" />
+        <el-table-column v-col="'leaveFlow'" width="120" :label="$t('message.iotCard.index.table.columns.remainFlow')" prop="leaveFlow" align="center" />
+        <el-table-column v-col="'activationTime'" width="120" :label="$t('message.iotCard.index.table.columns.activationDate')" prop="activationTime" align="center" />
+        <el-table-column v-col="'updatedAt'" width="120" :label="$t('message.iotCard.index.table.columns.updateTime')" prop="updatedAt" align="center" />
+        <el-table-column v-col="'simStatus'" width="120" :label="$t('message.iotCard.index.table.columns.status')" prop="simStatus" align="center">
           <template #default="scope">{{ formatStatus(scope.row.simStatus) }}</template>
         </el-table-column>
-        <el-table-column v-col="'handle'" width="110" label="操作" fixed="right" prop="handle" align="center">
+        <el-table-column v-col="'handle'" width="110" :label="$t('message.iotCard.index.table.columns.actions')" fixed="right" prop="handle" align="center">
           <template #default="scope">
-            <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)" v-auth="'detail'">详情</el-button>
-            <el-button size="small" text type="warning" @click="onDel(scope.row)" v-auth="'del'">删除</el-button>
+            <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)" v-auth="'detail'">{{ $t('message.iotCard.index.table.actions.detail') }}</el-button>
+            <el-button size="small" text type="warning" @click="onDel(scope.row)" v-auth="'del'">{{ $t('message.iotCard.index.table.actions.delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -57,6 +57,8 @@ import api from '/@/api/modules/iotCard';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from "/@/hooks/useCommon"
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const { params, tableData, getList, loading } = useSearch<any[]>(
   api.simCard.getList,
   "Data"
@@ -76,30 +78,33 @@ const resetQuery = () => {
  * 单一删除
  */
 const onDel = (row: any) => {
-  ElMessageBox.confirm(`此操作将卡号为：“${row.accNumber}”进行删除，是否继续?`, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm(t('message.iotCard.index.messages.deleteConfirm', { cardNumber: row.accNumber }), t('message.iotCard.index.messages.tip'), {
+    confirmButtonText: t('message.iotCard.index.messages.confirm'),
+    cancelButtonText: t('message.iotCard.index.messages.cancel'),
     type: 'warning',
   }).then(async () => {
     await api.simCard.deleteItem({ ids: [row.id] });
-    ElMessage.success('删除成功');
+    ElMessage.success(t('message.iotCard.index.messages.deleteSuccess'));
     getList();
   });
 };
 
-const formatOperator = (val: number) => {
-  // 1电信,2联通,3移动
-  return ['', '电信', '联通', '移动'][val];
+const formatOperator = (val: any) => {
+  // 1：电信 2：联通 3：移动
+  const operators = ['', t('message.iotCard.index.operators.telecom'), t('message.iotCard.index.operators.unicom'), t('message.iotCard.index.operators.mobile')];
+  return operators[val];
 }
 
-const formatType = (val: number) => {
-  // 1月卡，2季卡，3年卡，4其他
-  return ['', '月卡', '季卡', '年卡', '其他'][val];
+const formatType = (val: any) => {
+  // 1：月卡 2：季卡 3：年卡 4：其他
+  const types = ['', t('message.iotCard.index.types.monthly'), t('message.iotCard.index.types.quarterly'), t('message.iotCard.index.types.yearly'), t('message.iotCard.index.types.other')];
+  return types[val];
 }
 
-const formatStatus = (val: number) => {
-  // 1：可激活 2：测试激活 3：测试去激活 4：在用5：停机6：运营商管理状态
-  return ['', '可激活', '测试激活', '测试去激活', '在用', '停机', '运营商管理状态'][val];
+const formatStatus = (val: any) => {
+  // 1：可激活 2：测试激活 3：测试去激活 4：在用 5：停机 6：运营商管理状态
+  const statuses = ['', t('message.iotCard.index.status.activatable'), t('message.iotCard.index.status.testActivated'), t('message.iotCard.index.status.testDeactivated'), t('message.iotCard.index.status.inUse'), t('message.iotCard.index.status.suspended'), t('message.iotCard.index.status.operatorManaged')];
+  return statuses[val];
 }
 
 const onOpenDetail = (item: any) => {

src/views/modules/iotCard/platformManage/addOrEditItem.vue

@@ -1,44 +1,44 @@
 <!-- 平台接入-新增或者编辑 -->
 <template>
-  <el-dialog :title="ruleForm.id ? '编辑' : '新增'" v-model="isShowDialog" width="650px">
-    <el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="100px">
-      <el-form-item label="平台类型" prop="types">
-        <el-select style="width: 100%;" v-model="ruleForm.types" placeholder="请选择">
-          <el-option label="电信" value="1"></el-option>
+  <el-dialog :title="ruleForm.id ? $t('message.iotCard.platformManage.addOrEdit.title.edit') : $t('message.iotCard.platformManage.addOrEdit.title.add')" v-model="isShowDialog" width="650px">
+    <el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="110px">
+      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.platformType')" prop="types">
+        <el-select style="width: 100%;" v-model="ruleForm.types" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.select')">
+          <el-option :label="$t('message.iotCard.platformManage.addOrEdit.operators.telecom')" value="1"></el-option>
           <!--            <el-option disabled label="联通" value="2"></el-option>-->
           <!--            <el-option label="移动" value="3"></el-option>-->
         </el-select>
       </el-form-item>
-      <el-form-item label="名称" prop="name">
-        <el-input v-model="ruleForm.name" placeholder="请输入名称" />
+      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.name')" prop="name">
+        <el-input v-model="ruleForm.name" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.name')" />
       </el-form-item>
-      <el-form-item label="App ID" prop="appKey">
-        <el-input v-model="ruleForm.appKey" placeholder="请输入App ID" />
+      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.appId')" prop="appKey">
+        <el-input v-model="ruleForm.appKey" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.appId')" />
       </el-form-item>
-      <el-form-item v-if="ruleForm.types == '1'" label="secretKey" prop="appSecret">
-        <el-input v-model="ruleForm.appSecret" placeholder="请输入secretKey" />
+      <el-form-item v-if="ruleForm.types == '1'" :label="$t('message.iotCard.platformManage.addOrEdit.form.secretKey')" prop="appSecret">
+        <el-input v-model="ruleForm.appSecret" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.secretKey')" />
       </el-form-item>
-      <el-form-item v-if="ruleForm.types == '1'" label="用户id" prop="userId">
-        <el-input v-model="ruleForm.userId" placeholder="请输入用户id" />
+      <el-form-item v-if="ruleForm.types == '1'" :label="$t('message.iotCard.platformManage.addOrEdit.form.userId')" prop="userId">
+        <el-input v-model="ruleForm.userId" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.userId')" />
       </el-form-item>
       <!-- <el-form-item label="密码" prop="password">
         <el-input v-model="ruleForm.password" placeholder="请输入密码" />
       </el-form-item> -->
-      <el-form-item v-if="ruleForm.types == '3'" label="接口地址" prop="restUrl">
-        <el-input v-model="ruleForm.restUrl" placeholder="请输入接口地址" />
+      <el-form-item v-if="ruleForm.types == '3'" :label="$t('message.iotCard.platformManage.addOrEdit.form.interfaceUrl')" prop="restUrl">
+        <el-input v-model="ruleForm.restUrl" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.interfaceUrl')" />
       </el-form-item>
-      <el-form-item label="状态">
+      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.status')">
         <!-- 1启用,0禁用 -->
-        <el-switch v-model="ruleForm.status" active-value="1" inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+        <el-switch v-model="ruleForm.status" active-value="1" inactive-value="0" inline-prompt :active-text="$t('message.iotCard.platformManage.addOrEdit.switch.enabled')" :inactive-text="$t('message.iotCard.platformManage.addOrEdit.switch.disabled')"></el-switch>
       </el-form-item>
-      <el-form-item label="说明">
-        <el-input :rows="6" type="textarea" v-model="ruleForm.remark" placeholder="请输入说明" />
+      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.description')">
+        <el-input :rows="6" type="textarea" v-model="ruleForm.remark" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.description')" />
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="onCancel">取 消</el-button>
-        <el-button :loading="btnLoading" type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="onCancel">{{ $t('message.iotCard.platformManage.addOrEdit.buttons.cancel') }}</el-button>
+        <el-button :loading="btnLoading" type="primary" @click="onSubmit">{{ $t('message.iotCard.platformManage.addOrEdit.buttons.confirm') }}</el-button>
       </span>
     </template>
   </el-dialog>
@@ -48,11 +48,13 @@
 import api from '/@/api/modules/iotCard';
 import { ref, unref } from 'vue';
 import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
 
 const isShowDialog = ref(false);
 const formRef = ref<HTMLElement | null>(null);
 const emit = defineEmits(['updateList']);
 const btnLoading = ref(false);
+const { t } = useI18n();
 
 const baseForm = {
   id: undefined,
@@ -72,13 +74,13 @@ const ruleForm = ref({
 })
 
 const rules = ref({
-  types: [{ required: true, message: '请选择平台类型', trigger: 'change' }],
-  name: [{ required: true, message: '请输入名称', trigger: 'change' }],
-  userId: [{ required: true, message: '请输入用户id', trigger: 'change' }],
+  types: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.platformType'), trigger: 'change' }],
+  name: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.name'), trigger: 'change' }],
+  userId: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.userId'), trigger: 'change' }],
   // password: [{ required: true, message: '请输入密码', trigger: 'change' }],
-  appSecret: [{ required: true, message: '请输入secretKey', trigger: 'change' }],
-  appKey: [{ required: true, message: '请输入App ID', trigger: 'change' }],
-  restUrl: [{ required: true, message: '请输入接口地址', trigger: 'change' }]
+  appSecret: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.secretKey'), trigger: 'change' }],
+  appKey: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.appId'), trigger: 'change' }],
+  restUrl: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.interfaceUrl'), trigger: 'change' }]
 })
 
 /**
@@ -94,7 +96,7 @@ const onSubmit = () => {
       // 修改
       api.platform.editItem(ruleForm.value)
         .then(() => {
-          ElMessage({ type: 'success', message: '修改成功' })
+          ElMessage({ type: 'success', message: t('message.iotCard.platformManage.addOrEdit.messages.editSuccess') })
           emit('updateList')
           closeDialog();
           resetForm();
@@ -104,7 +106,7 @@ const onSubmit = () => {
       // 新增
       api.platform.addItem(ruleForm.value)
         .then(() => {
-          ElMessage({ type: 'success', message: '添加成功' })
+          ElMessage({ type: 'success', message: t('message.iotCard.platformManage.addOrEdit.messages.addSuccess') })
           emit('updateList')
           closeDialog();
           resetForm();

src/views/modules/iotCard/platformManage/index.vue

@@ -4,43 +4,43 @@
     <el-card shadow="nover" class="page-full-part">
       <el-form :model="params" inline ref="queryRef">
         <el-form-item prop="deptName" class="mr10">
-          <el-input @keyup.enter.native="getList" style="width: 240px;" v-model="params.keyWord" placeholder="请输入关键字搜索" clearable />
+          <el-input @keyup.enter.native="getList" style="width: 240px;" v-model="params.keyWord" :placeholder="$t('message.iotCard.platformManage.search.placeholder')" clearable />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="getList">
             <el-icon>
               <ele-Search />
             </el-icon>
-            查询
+            {{ $t('message.iotCard.platformManage.search.query') }}
           </el-button>
           <el-button v-auth="'reset'" @click="resetQuery()">
             <el-icon>
               <ele-Refresh />
             </el-icon>
-            重置
+            {{ $t('message.iotCard.platformManage.search.reset') }}
           </el-button>
           <el-button v-auth="'add'" type="primary" @click="toAddItemPage()">
             <el-icon>
               <ele-FolderAdd />
             </el-icon>
-            新增
+            {{ $t('message.iotCard.platformManage.search.add') }}
           </el-button>
         </el-form-item>
       </el-form>
       <el-table :data="tableData" max-height="calc(100vh  - 210px);" v-loading="loading" style="width: 100%">
-        <el-table-column v-col="'name'" label="名称" prop="name" align="left" />
-        <el-table-column v-col="'type'" label="平台类型" prop="types" :formatter="function (row: any) { return ['', '电信', '联通', '移动'][row.types] }" align="center" width="120" />
-        <el-table-column v-col="'appKey'" label="App ID" prop="appKey" align="center" />
-        <el-table-column v-col="'simStatus'" label="状态" prop="simStatus" align="center" width="80">
+        <el-table-column v-col="'name'" :label="$t('message.iotCard.platformManage.table.columns.name')" prop="name" align="left" />
+        <el-table-column v-col="'type'" :label="$t('message.iotCard.platformManage.table.columns.platformType')" prop="types" :formatter="formatPlatformType" align="center" width="120" />
+        <el-table-column v-col="'appKey'" :label="$t('message.iotCard.platformManage.table.columns.appId')" prop="appKey" align="center" />
+        <el-table-column v-col="'simStatus'" :label="$t('message.iotCard.platformManage.table.columns.status')" prop="simStatus" align="center" width="140">
           <template #default="scope">
             <el-tag :type="scope.row.status === '0' ? 'danger' : 'primary'">{{ formatStatus(scope.row.status) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column v-col="'remark'" label="说明" prop="remark" align="center" show-overflow-tooltip />
-        <el-table-column v-col="'handle'" width="110" label="操作" fixed="right" prop="handle" align="center">
+        <el-table-column v-col="'remark'" :label="$t('message.iotCard.platformManage.table.columns.description')" prop="remark" align="center" show-overflow-tooltip />
+        <el-table-column v-col="'handle'" width="110" :label="$t('message.iotCard.platformManage.table.columns.actions')" fixed="right" prop="handle" align="center">
           <template #default="scope">
-            <el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetail(scope.row)">编辑</el-button>
-            <el-button v-auth="'del'" size="small" text type="warning" @click="onDel(scope.row)">删除</el-button>
+            <el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetail(scope.row)">{{ $t('message.iotCard.platformManage.table.actions.edit') }}</el-button>
+            <el-button v-auth="'del'" size="small" text type="warning" @click="onDel(scope.row)">{{ $t('message.iotCard.platformManage.table.actions.delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -53,8 +53,10 @@
 <script lang="ts" setup>
 import api from '/@/api/modules/iotCard';
 import { defineAsyncComponent, ref } from 'vue';
-import { ElMessageBox, ElMessage, formatter } from 'element-plus';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from "/@/hooks/useCommon"
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const AddOrEditItem = defineAsyncComponent(() => import('./addOrEditItem.vue'));
 
 const { params, tableData, getList, loading } = useSearch<any[]>(
@@ -75,20 +77,27 @@ const resetQuery = () => {
  * 单一删除
  */
 const onDel = (row: any) => {
-  ElMessageBox.confirm(`此操作将卡号为：“${row.accNumber}”，是否继续?`, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm(t('message.iotCard.platformManage.messages.deleteConfirm', { cardNumber: row.accNumber }), t('message.iotCard.platformManage.messages.tip'), {
+    confirmButtonText: t('message.iotCard.platformManage.messages.confirm'),
+    cancelButtonText: t('message.iotCard.platformManage.messages.cancel'),
     type: 'warning',
   }).then(async () => {
     await api.simCard.deleteItem({ ids: [row.id] });
-    ElMessage.success('删除成功');
+    ElMessage.success(t('message.iotCard.platformManage.messages.deleteSuccess'));
     getList();
   });
 };
 
 const formatStatus = (val: any) => {
   // 1：开启 0：禁用
-  return ['禁用', '开启'][val];
+  const statuses = [t('message.iotCard.platformManage.status.disabled'), t('message.iotCard.platformManage.status.enabled')];
+  return statuses[val];
+}
+
+const formatPlatformType = (row: any) => {
+  // 1：电信 2：联通 3：移动
+  const types = ['', t('message.iotCard.platformManage.addOrEdit.operators.telecom'), t('message.iotCard.platformManage.addOrEdit.operators.unicom'), t('message.iotCard.platformManage.addOrEdit.operators.mobile')];
+  return types[row.types];
 }
 
 const onOpenDetail = (item: any) => {