feat: 设备当前属性页面多语言处理

src/i18n/index.ts

@@ -38,6 +38,10 @@ import pagesProjectsZhcn from './pages/projects/zh-cn';
 import pagesProjectsEn from './pages/projects/en';
 import pagesProjectsZhtw from './pages/projects/zh-tw';
 
+import pagesPropertyZhcn from './pages/property/zh-cn';
+import pagesPropertyEn from './pages/property/en';
+import pagesPropertyZhtw from './pages/property/zh-tw';
+
 // 定义语言国际化内容
 /**
  * 说明：
@@ -54,7 +58,8 @@ const messages = {
 			...pagesTable18nZhcn,
 			...pagesIotmanagerZhcn,
 			iotCard: pagesIotcardZhcn,
-			projects: pagesProjectsZhcn
+			projects: pagesProjectsZhcn,
+			property: pagesPropertyZhcn
 		}
 	},
 	[enLocale.name]: {
@@ -66,7 +71,8 @@ const messages = {
 			...pagesTable18nEn,
 			...pagesIotmanagerEn,
 			iotCard: pagesIotcardEn,
-			projects: pagesProjectsEn
+			projects: pagesProjectsEn,
+			property: pagesPropertyEn
 		},	
 	},
 	[zhtwLocale.name]: {
@@ -78,7 +84,8 @@ const messages = {
 			...pagesTable18nZhtw,
 			...pagesIotmanagerZhtw,
 			iotCard: pagesIotcardZhtw,
-			projects: pagesProjectsZhtw
+			projects: pagesProjectsZhtw,
+			property: pagesPropertyZhtw
 		},
 	},
 };

src/i18n/pages/property/en.ts

@@ -0,0 +1,53 @@
+export default {
+  attribute: {
+    dialog: {
+      editTitle: 'Edit Device Archive Attribute',
+      addTitle: 'Add Device Archive Attribute',
+    },
+    form: {
+      keyword: 'Keyword',
+      keywordPlaceholder: 'Please enter keyword',
+      productKey: 'Product',
+      productPlaceholder: 'Please select product',
+      fieldName: 'Field Name',
+      fieldNamePlaceholder: 'Please enter field name',
+      fieldTitle: 'Field Title',
+      fieldTitlePlaceholder: 'Please enter field title',
+      fieldType: 'Field Type',
+      typePlaceholder: 'Please select field type',
+      fieldDesc: 'Field Description',
+      fieldDescPlaceholder: 'Please enter field description',
+    },
+    actions: {
+      add: 'Add Attribute',
+      save: 'Save',
+    },
+    columns: {
+      fieldName: 'Field Name',
+      fieldTitle: 'Field Title',
+      fieldType: 'Field Type',
+      createdAt: 'Created At',
+    },
+    types: {
+      input: 'Input',
+      textarea: 'Textarea',
+      date: 'Date',
+      file: 'Upload Image',
+    },
+    valid: {
+      nameRequired: 'Field name is required',
+      titleRequired: 'Field title is required',
+      productRequired: 'Product is required',
+      typeRequired: 'Field type is required',
+    },
+    messages: {
+      tips: 'Tips',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      deleteSuccess: 'Deleted successfully',
+      saveSuccess: 'Saved successfully',
+      batchDeleteConfirm: 'Are you sure to batch delete these data?',
+      deleteItemConfirm: 'Are you sure to delete the item with name: “{name}”?',
+    },
+  },
+};

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

@@ -0,0 +1,53 @@
+export default {
+  attribute: {
+    dialog: {
+      editTitle: '编辑设备档案属性',
+      addTitle: '新增设备档案属性',
+    },
+    form: {
+      keyword: '关键词',
+      keywordPlaceholder: '请输入关键词',
+      productKey: '所属产品',
+      productPlaceholder: '请选择产品',
+      fieldName: '字段名称',
+      fieldNamePlaceholder: '请输入字段名称',
+      fieldTitle: '字段标题',
+      fieldTitlePlaceholder: '请输入字段标题',
+      fieldType: '字段类型',
+      typePlaceholder: '请选择字段类型',
+      fieldDesc: '字段描述',
+      fieldDescPlaceholder: '请输入字段描述',
+    },
+    actions: {
+      add: '新增属性',
+      save: '保存',
+    },
+    columns: {
+      fieldName: '字段名',
+      fieldTitle: '字段标题',
+      fieldType: '字段类型',
+      createdAt: '创建时间',
+    },
+    types: {
+      input: '输入框',
+      textarea: '文本框',
+      date: '日期',
+      file: '上传图片',
+    },
+    valid: {
+      nameRequired: '字段名称不能为空',
+      titleRequired: '字段标题不能为空',
+      productRequired: '所属产品不能为空',
+      typeRequired: '字段类型不能为空',
+    },
+    messages: {
+      tips: '提示',
+      confirm: '确认',
+      cancel: '取消',
+      deleteSuccess: '删除成功',
+      saveSuccess: '保存成功',
+      batchDeleteConfirm: '是否确认要批量删除这些数据吗?',
+      deleteItemConfirm: '是否确认删除名称为：“{name}”的数据项?',
+    },
+  },
+};

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

@@ -0,0 +1,53 @@
+export default {
+  attribute: {
+    dialog: {
+      editTitle: '編輯設備檔案屬性',
+      addTitle: '新增設備檔案屬性',
+    },
+    form: {
+      keyword: '關鍵詞',
+      keywordPlaceholder: '請輸入關鍵詞',
+      productKey: '所屬產品',
+      productPlaceholder: '請選擇產品',
+      fieldName: '欄位名稱',
+      fieldNamePlaceholder: '請輸入欄位名稱',
+      fieldTitle: '欄位標題',
+      fieldTitlePlaceholder: '請輸入欄位標題',
+      fieldType: '欄位類型',
+      typePlaceholder: '請選擇欄位類型',
+      fieldDesc: '欄位描述',
+      fieldDescPlaceholder: '請輸入欄位描述',
+    },
+    actions: {
+      add: '新增屬性',
+      save: '保存',
+    },
+    columns: {
+      fieldName: '欄位名',
+      fieldTitle: '欄位標題',
+      fieldType: '欄位類型',
+      createdAt: '建立時間',
+    },
+    types: {
+      input: '輸入框',
+      textarea: '文字框',
+      date: '日期',
+      file: '上傳圖片',
+    },
+    valid: {
+      nameRequired: '欄位名稱不能為空',
+      titleRequired: '欄位標題不能為空',
+      productRequired: '所屬產品不能為空',
+      typeRequired: '欄位類型不能為空',
+    },
+    messages: {
+      tips: '提示',
+      confirm: '確認',
+      cancel: '取消',
+      deleteSuccess: '刪除成功',
+      saveSuccess: '保存成功',
+      batchDeleteConfirm: '是否確認要批量刪除這些資料？',
+      deleteItemConfirm: '是否確認刪除名稱為：「{name}」的資料項？',
+    },
+  },
+};

src/views/iot/property/attribute/edit.vue

@@ -1,36 +1,44 @@
+
 <template>
-	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑设备档案属性' : '新增设备档案属性'}`" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
+	<el-dialog
+		class="api-edit"
+		v-model="showDialog"
+		:title="formData.id ? $t('message.property.attribute.dialog.editTitle') : $t('message.property.attribute.dialog.addTitle')"
+		width="800px"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+	>
 		<el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="120px">
-			<el-form-item label="所属产品" prop="productKey">
-				<el-select v-model="formData.productKey" placeholder="请选择产品" class="w100" disabled>
+			<el-form-item :label="$t('message.property.attribute.form.productKey')" prop="productKey">
+				<el-select v-model="formData.productKey" :placeholder="$t('message.property.attribute.form.productPlaceholder')" class="w100" disabled>
 					<el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key">
 						<span style="float: left">{{ item.name }}</span>
 						<span style="float: right; font-size: 13px">{{ item.key }}</span>
 					</el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="字段名称" prop="name">
-				<el-input v-model.trim="formData.name" placeholder="请输入字段名称" />
+			<el-form-item :label="$t('message.property.attribute.form.fieldName')" prop="name">
+				<el-input v-model.trim="formData.name" :placeholder="$t('message.property.attribute.form.fieldNamePlaceholder')" />
 			</el-form-item>
-			<el-form-item label="字段标题" prop="title">
-				<el-input v-model.trim="formData.title" placeholder="请输入字段标题" />
+			<el-form-item :label="$t('message.property.attribute.form.fieldTitle')" prop="title">
+				<el-input v-model.trim="formData.title" :placeholder="$t('message.property.attribute.form.fieldTitlePlaceholder')" />
 			</el-form-item>
-			<el-form-item label="字段类型" prop="types">
-				<el-select v-model="formData.types" placeholder="请字段类型" class="w100" clearable>
-					<el-option v-for="item in typesData" :key="item.value" :label="item.name" :value="item.value">
+			<el-form-item :label="$t('message.property.attribute.form.fieldType')" prop="types">
+				<el-select v-model="formData.types" :placeholder="$t('message.property.attribute.form.typePlaceholder')" class="w100" clearable>
+					<el-option v-for="item in typesData" :key="item.value" :label="t('message.property.attribute.types.' + item.value)" :value="item.value">
 					</el-option>
 				</el-select>
 			</el-form-item>
 
-			<el-form-item label="字段描述" prop="desc">
-				<el-input v-model.trim="formData.desc" placeholder="请输入字段描述" />
+			<el-form-item :label="$t('message.property.attribute.form.fieldDesc')" prop="desc">
+				<el-input v-model.trim="formData.desc" :placeholder="$t('message.property.attribute.form.fieldDescPlaceholder')" />
 			</el-form-item>
 		</el-form>
 
 		<template #footer>
 			<div class="dialog-footer">
-				<el-button @click="showDialog = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit">确定</el-button>
+				<el-button @click="showDialog = false">{{ $t('message.tableI18nAction.cancel') }}</el-button>
+				<el-button type="primary" @click="onSubmit">{{ $t('message.property.attribute.actions.save') }}</el-button>
 			</div>
 		</template>
 	</el-dialog>
@@ -41,43 +49,39 @@ import { ref, reactive, nextTick } from 'vue'
 import api from '/@/api/device'
 import { ruleRequired } from '/@/utils/validator'
 import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(['getList'])
 
 const showDialog = ref(false)
 const formRef = ref()
 const productData = ref();
-const typesData = ref([{
-	value: 'input',
-	name: '输入框',
-}, {
-	value: 'textarea',
-	name: '文本框',
-}, {
-	value: 'date',
-	name: '日期',
-}, {
-	value: 'file',
-	name: '上传图片',
-}])
+const typesData = ref([
+    { value: 'input' },
+    { value: 'textarea' },
+    { value: 'date' },
+    { value: 'file' },
+])
 const baseForm = {
-	id: undefined,
-	name: '',
-	productKey: '',
-	title: '',
-	types: '',
-	desc: '',
+    id: undefined,
+    name: '',
+    productKey: '',
+    title: '',
+    types: '',
+    desc: '',
 }
 
 const formData = reactive({
-	...baseForm,
+    ...baseForm,
 })
 
+const { t } = useI18n()
+
 const ruleForm = {
-	name: [ruleRequired('字段名称不能为空')],
-	title: [ruleRequired('字段标题不能为空')],
-	productKey: [ruleRequired('所属产品不能为空')],
-	types: [ruleRequired('字段类型不能为空')],
+    name: [ruleRequired(t('message.property.attribute.valid.nameRequired'))],
+    title: [ruleRequired(t('message.property.attribute.valid.titleRequired'))],
+    productKey: [ruleRequired(t('message.property.attribute.valid.productRequired'))],
+    types: [ruleRequired(t('message.property.attribute.valid.typeRequired'))],
 }
 
 
@@ -88,7 +92,7 @@ const onSubmit = async () => {
 
 	await theApi(formData)
 
-	ElMessage.success('操作成功')
+	ElMessage.success(t('message.property.attribute.messages.saveSuccess'))
 	resetForm()
 	showDialog.value = false
 	emit('getList')

src/views/iot/property/attribute/index.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="page page-full border bg padding">
 		<el-form inline ref="queryRef" @keyup.enter="getList(1)">
-			<el-form-item label="关键字：" prop="keyWord">
-				<el-input v-model="params.keyWord" placeholder="请输入关键字" clearable style="width: 240px" />
+			<el-form-item :label="$t('message.property.attribute.form.keyword') + '：'" prop="keyWord">
+				<el-input v-model="params.keyWord" :placeholder="$t('message.property.attribute.form.keywordPlaceholder')" clearable style="width: 240px" />
 			</el-form-item>
 			<el-form-item>
 				<el-button type="primary" class="ml10" @click="getList(1)">
 					<el-icon>
 						<ele-Search />
 					</el-icon>
-					查询
+					{{ $t('message.tableI18nAction.query') }}
 				</el-button>
 			</el-form-item>
 			<el-form-item>
@@ -17,13 +17,13 @@
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
-					新增属性
+					{{ $t('message.property.attribute.actions.add') }}
 				</el-button>
 				<el-button type="info" @click="batchdel()" v-auth="'batchdel'">
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
-					删除
+					{{ $t('message.tableI18nAction.delete') }}
 				</el-button>
 			</el-form-item>
 		</el-form>
@@ -55,15 +55,15 @@
 				<div class="page page-full">
 					<el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" row-key="id" v-loading="loading">
 						<el-table-column type="selection" width="55" align="center" />
-						<el-table-column prop="id" v-col="'id'" label="ID" min-width="100" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="name" v-col="'name'" label="字段名称" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="title" v-col="'title'" label="字段标题" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="types" v-col="'types'" label="字段类型" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="160" align="center"></el-table-column>
-						<el-table-column label="操作" width="200" align="center">
+						<el-table-column prop="id" v-col="'id'" :label="$t('message.tableI18nColumn.id')" min-width="100" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="name" v-col="'name'" :label="$t('message.property.attribute.columns.fieldName')" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="title" v-col="'title'" :label="$t('message.property.attribute.columns.fieldTitle')" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="types" v-col="'types'" :label="$t('message.property.attribute.columns.fieldType')" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="createdAt" v-col="'createdAt'" :label="$t('message.property.attribute.columns.createdAt')" width="160" align="center"></el-table-column>
+						<el-table-column :label="$t('message.tableI18nColumn.operation')" width="200" align="center">
 							<template #default="scope">
-								<el-button size="small" text v-auth="'edit'" type="warning" @click="addOrEdit(scope.row)">编辑</el-button>
-								<el-button size="small" text v-auth="'del'" type="info" @click="del(scope.row)">删除</el-button>
+								<el-button size="small" text v-auth="'edit'" type="warning" @click="addOrEdit(scope.row)">{{ $t('message.tableI18nAction.edit') }}</el-button>
+								<el-button size="small" text v-auth="'del'" type="info" @click="del(scope.row)">{{ $t('message.tableI18nAction.delete') }}</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -87,6 +87,7 @@ import { useSearch } from '/@/hooks/useCommon'
 import { Folder } from '@element-plus/icons-vue'
 
 import { ElMessageBox, ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
 import EditForm from './edit.vue'
 interface Tree {
 	label: string
@@ -100,6 +101,7 @@ const defaultProps = {
 }
 
 const queryRef = ref()
+const { t } = useI18n()
 const router = useRouter()
 const productData = ref([])
 const mergedData = ref()
@@ -197,24 +199,24 @@ const buildTree = (category: any, productData: any) => {
 	return treeNode
 }
 const batchdel = () => {
-	ElMessageBox.confirm('是否确认要批量删除这些数据吗?', '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
+	ElMessageBox.confirm(t('message.property.attribute.messages.batchDeleteConfirm'), t('message.property.attribute.messages.tips'), {
+		confirmButtonText: t('message.property.attribute.messages.confirm'),
+		cancelButtonText: t('message.property.attribute.messages.cancel'),
 		type: 'warning',
 	}).then(async () => {
 		await device.dev_asset_metadata.delete({ ids: ids.value })
-		ElMessage.success('删除成功')
+		ElMessage.success(t('message.property.attribute.messages.deleteSuccess'))
 		getList()
 	})
 }
 const del = (row: any) => {
-	ElMessageBox.confirm('是否确认删除名称为："' + row.name + '"的数据项?', '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
+	ElMessageBox.confirm(t('message.property.attribute.messages.deleteItemConfirm', { name: row.name }), t('message.property.attribute.messages.tips'), {
+		confirmButtonText: t('message.property.attribute.messages.confirm'),
+		cancelButtonText: t('message.property.attribute.messages.cancel'),
 		type: 'warning',
 	}).then(async () => {
 		await device.dev_asset_metadata.delete({ ids: row.id })
-		ElMessage.success('删除成功')
+		ElMessage.success(t('message.property.attribute.messages.deleteSuccess'))
 		getList()
 	})
 }