feat: 设备档案管理页面多语言

src/i18n/pages/property/en.ts

@@ -50,4 +50,54 @@ export default {
       deleteItemConfirm: 'Are you sure to delete the item with name: “{name}”?',
     },
   },
+  dossier: {
+    dialog: {
+      editTitle: 'Edit Device Archive',
+      addTitle: 'Add Device Archive',
+    },
+    form: {
+      keyword: 'Name',
+      keywordPlaceholder: 'Please enter name',
+      productKey: 'Select Product',
+      productPlaceholder: 'Please select product',
+      deviceKey: 'Select Device',
+      devicePlaceholder: 'Please select device',
+      deviceName: 'Device Name',
+      deviceNamePlaceholder: 'Please enter device name',
+      deviceNumber: 'Device Code',
+      deviceNumberPlaceholder: 'Please enter device code',
+      deptId: 'Department',
+      deptPlaceholder: 'Please select department',
+      deviceCategory: 'Device Type',
+      deviceCategoryPlaceholder: 'Please enter device type',
+      installTime: 'Install Time',
+      datePlaceholder: 'Please select date',
+      dividerCustom: 'Custom Attributes',
+      inputPlaceholder: 'Please enter {title}',
+    },
+    actions: {
+      save: 'Confirm',
+    },
+    columns: {
+      deviceName: 'Device Name',
+      deviceKey: 'Device KEY',
+      deviceNumber: 'Device Code',
+      deviceCategory: 'Device Type',
+      installTime: 'Install Time',
+    },
+    valid: {
+      productRequired: 'Product is required',
+      deviceNameRequired: 'Device name is required',
+      deviceRequired: 'Device is required',
+    },
+    messages: {
+      tips: 'Tips',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      deleteSuccess: 'Deleted successfully',
+      saveSuccess: 'Operation successful',
+      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

@@ -50,4 +50,54 @@ export default {
       deleteItemConfirm: '是否确认删除名称为：“{name}”的数据项?',
     },
   },
+  dossier: {
+    dialog: {
+      editTitle: '编辑设备档案',
+      addTitle: '新增设备档案',
+    },
+    form: {
+      keyword: '名称',
+      keywordPlaceholder: '请输入名称',
+      productKey: '选择产品',
+      productPlaceholder: '请选择产品',
+      deviceKey: '选择设备',
+      devicePlaceholder: '请选择设备',
+      deviceName: '设备名称',
+      deviceNamePlaceholder: '请输入设备名称',
+      deviceNumber: '设备编码',
+      deviceNumberPlaceholder: '请输入设备编码',
+      deptId: '所属部门',
+      deptPlaceholder: '请选择所属部门',
+      deviceCategory: '设备类型',
+      deviceCategoryPlaceholder: '请输入设备类型',
+      installTime: '安装时间',
+      datePlaceholder: '请选择时间',
+      dividerCustom: '自定义属性',
+      inputPlaceholder: '请输入{title}',
+    },
+    actions: {
+      save: '确定',
+    },
+    columns: {
+      deviceName: '设备名称',
+      deviceKey: '设备KEY',
+      deviceNumber: '设备编码',
+      deviceCategory: '设备类型',
+      installTime: '安装时间',
+    },
+    valid: {
+      productRequired: '所属产品不能为空',
+      deviceNameRequired: '设备名称不能为空',
+      deviceRequired: '设备不能为空',
+    },
+    messages: {
+      tips: '提示',
+      confirm: '确认',
+      cancel: '取消',
+      deleteSuccess: '删除成功',
+      saveSuccess: '操作成功',
+      batchDeleteConfirm: '是否确认要批量删除这些数据吗?',
+      deleteItemConfirm: '是否确认删除名称为：“{name}”的数据项?',
+    },
+  },
 };

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

@@ -50,4 +50,54 @@ export default {
       deleteItemConfirm: '是否確認刪除名稱為：「{name}」的資料項？',
     },
   },
+  dossier: {
+    dialog: {
+      editTitle: '編輯設備檔案',
+      addTitle: '新增設備檔案',
+    },
+    form: {
+      keyword: '名稱',
+      keywordPlaceholder: '請輸入名稱',
+      productKey: '選擇產品',
+      productPlaceholder: '請選擇產品',
+      deviceKey: '選擇設備',
+      devicePlaceholder: '請選擇設備',
+      deviceName: '設備名稱',
+      deviceNamePlaceholder: '請輸入設備名稱',
+      deviceNumber: '設備編碼',
+      deviceNumberPlaceholder: '請輸入設備編碼',
+      deptId: '所屬部門',
+      deptPlaceholder: '請選擇所屬部門',
+      deviceCategory: '設備類型',
+      deviceCategoryPlaceholder: '請輸入設備類型',
+      installTime: '安裝時間',
+      datePlaceholder: '請選擇時間',
+      dividerCustom: '自定義屬性',
+      inputPlaceholder: '請輸入{title}',
+    },
+    actions: {
+      save: '確定',
+    },
+    columns: {
+      deviceName: '設備名稱',
+      deviceKey: '設備KEY',
+      deviceNumber: '設備編碼',
+      deviceCategory: '設備類型',
+      installTime: '安裝時間',
+    },
+    valid: {
+      productRequired: '所屬產品不能為空',
+      deviceNameRequired: '設備名稱不能為空',
+      deviceRequired: '設備不能為空',
+    },
+    messages: {
+      tips: '提示',
+      confirm: '確認',
+      cancel: '取消',
+      deleteSuccess: '刪除成功',
+      saveSuccess: '操作成功',
+      batchDeleteConfirm: '是否確認要批量刪除這些資料？',
+      deleteItemConfirm: '是否確認刪除名稱為：「{name}」的資料項？',
+    },
+  },
 };

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

@@ -1,127 +1,114 @@
-
 <template>
-	<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="$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="$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="$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="$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="$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">{{ $t('message.tableI18nAction.cancel') }}</el-button>
-				<el-button type="primary" @click="onSubmit">{{ $t('message.property.attribute.actions.save') }}</el-button>
-			</div>
-		</template>
-	</el-dialog>
+  <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="$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="$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="$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="$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="$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">{{ $t("message.tableI18nAction.cancel") }}</el-button>
+        <el-button type="primary" @click="onSubmit">{{ $t("message.property.attribute.actions.save") }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
-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'
+import { ref, reactive, nextTick, computed } 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 emit = defineEmits(["getList"]);
 
-const showDialog = ref(false)
-const formRef = ref()
+const showDialog = ref(false);
+const formRef = ref();
 const productData = ref();
-const typesData = ref([
-    { value: 'input' },
-    { value: 'textarea' },
-    { value: 'date' },
-    { value: 'file' },
-])
+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(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'))],
-}
+const { t } = useI18n();
 
+const ruleForm = computed(() => {
+  return {
+    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"))],
+  };
+});
 
 const onSubmit = async () => {
-	await formRef.value.validate()
+  await formRef.value.validate();
 
-	const theApi = formData.id ? api.dev_asset_metadata.edit : api.dev_asset_metadata.add
+  const theApi = formData.id ? api.dev_asset_metadata.edit : api.dev_asset_metadata.add;
 
-	await theApi(formData)
+  await theApi(formData);
 
-	ElMessage.success(t('message.property.attribute.messages.saveSuccess'))
-	resetForm()
-	showDialog.value = false
-	emit('getList')
-}
+  ElMessage.success(t("message.property.attribute.messages.saveSuccess"));
+  resetForm();
+  showDialog.value = false;
+  emit("getList");
+};
 
 const resetForm = async () => {
-	Object.assign(formData, { ...baseForm })
-	formRef.value && formRef.value.resetFields()
-}
+  Object.assign(formData, { ...baseForm });
+  formRef.value && formRef.value.resetFields();
+};
 
 const open = async (row: any, productInfo: any) => {
-	resetForm()
-	showDialog.value = true
-	nextTick(() => {
-		Object.assign(formData, { ...row })
-
-		//获取 所有的产品
-		api.product.getLists({}).then((res: any) => {
-			productData.value = res.product
-		})
-
-		formData.productKey = productInfo.key
-	})
-}
+  resetForm();
+  showDialog.value = true;
+  nextTick(() => {
+    Object.assign(formData, { ...row });
+
+    //获取 所有的产品
+    api.product.getLists({}).then((res: any) => {
+      productData.value = res.product;
+    });
+
+    formData.productKey = productInfo.key;
+  });
+};
 
-defineExpose({ open })
+defineExpose({ open });
 </script>
 <style scoped lang="scss">
 .demo-form-inline .el-input {
-	--el-input-width: 320px;
+  --el-input-width: 320px;
 }
-</style>
+</style>

src/views/iot/property/dossier/component/from.vue

@@ -4,7 +4,7 @@
 		<div v-for="(item, index) in dataList" :key="index">
 
       <el-form-item :label="item.title + '：'" :prop="item.name" class="form-item" v-if="item.types === 'input'">
-        <el-input v-model="formData[item.name]" :placeholder="'请输入' + item.title" @input="saveData()" :readonly="disable" />
+        <el-input v-model="formData[item.name]" :placeholder="t('message.property.dossier.form.inputPlaceholder', { title: item.title })" @input="saveData()" :readonly="disable" />
       </el-form-item>
 
       <el-form-item :label="item.title + '：'" :prop="item.name" class="form-item" v-if="item.types === 'textarea'">
@@ -12,13 +12,13 @@
       </el-form-item>
 
       <el-form-item v-if="item.types === 'date'" :label="item.title + '：'">
-        <el-date-picker v-model="formData[item.name]" :default-value="item.value" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable @change="saveData()" :readonly="disable" />
+        <el-date-picker v-model="formData[item.name]" :default-value="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="t('message.property.dossier.form.datePlaceholder')" class="w100" clearable @change="saveData()" :readonly="disable" />
       </el-form-item>
 
       <el-form-item :label="item.title + '：'" prop="path" v-if="item.types === 'file'">
         <el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false" :on-success="customCallback(item.name)" :disabled="disable">
           <img v-if="formData[item.name]" :src="formData[item.name]" class="avatar" />
-          <el-icon v-else class="avatar-uploader-icon" v-if="!disable">
+          <el-icon v-else-if="!disable" class="avatar-uploader-icon">
             <Plus />
           </el-icon>
         </el-upload>
@@ -33,6 +33,7 @@ import {onMounted, defineComponent, reactive, toRefs} from 'vue'
 import getOrigin from '/@/utils/origin'
 import { Plus } from '@element-plus/icons-vue'
 import { getToken } from "/@/utils/auth";
+import { useI18n } from 'vue-i18n'
 
 interface FromState {
   dataList: any,
@@ -53,6 +54,7 @@ export default defineComponent({
     }
   },
   setup(prop, { emit }) {
+    const { t } = useI18n()
     const uploadUrl = getOrigin('/common/singleFile')
     const headers = {
       Authorization: 'Bearer ' + getToken(),
@@ -102,6 +104,7 @@ export default defineComponent({
       uploadUrl,
       customCallback,
       saveData,
+      t,
       ...toRefs(state),
     };
   },

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

@@ -1,11 +1,10 @@
 <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.dossier.dialog.editTitle') : t('message.property.dossier.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-row>
         <el-col :span="12">
-          <el-form-item label="选择产品" prop="productKey">
-            <el-select v-model="formData.productKey" placeholder="请选择产品" class="w100" disabled>
+          <el-form-item :label="t('message.property.dossier.form.productKey')" prop="productKey">
+            <el-select v-model="formData.productKey" :placeholder="t('message.property.dossier.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>
@@ -15,8 +14,8 @@
         </el-col>
 
         <el-col :span="12">
-          <el-form-item label="选择设备" prop="deviceKey">
-            <el-select v-model="formData.deviceKey" placeholder="请选择设备" class="w100" filterable clearable @change="handleSelectionChange">
+          <el-form-item :label="t('message.property.dossier.form.deviceKey')" prop="deviceKey">
+            <el-select v-model="formData.deviceKey" :placeholder="t('message.property.dossier.form.devicePlaceholder')" class="w100" filterable clearable @change="handleSelectionChange">
               <el-option v-for="item in deviceList" :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>
@@ -28,22 +27,22 @@
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model.trim="formData.deviceName" placeholder="请输入设备名称" disabled />
+          <el-form-item :label="t('message.property.dossier.form.deviceName')" prop="deviceName">
+            <el-input v-model.trim="formData.deviceName" :placeholder="t('message.property.dossier.form.deviceNamePlaceholder')" disabled />
           </el-form-item>
         </el-col>
 
         <el-col :span="12">
-          <el-form-item label="设备编码" prop="deviceNumber">
-            <el-input v-model.trim="formData.deviceNumber" placeholder="请输入设备编码" />
+          <el-form-item :label="t('message.property.dossier.form.deviceNumber')" prop="deviceNumber">
+            <el-input v-model.trim="formData.deviceNumber" :placeholder="t('message.property.dossier.form.deviceNumberPlaceholder')" />
           </el-form-item>
         </el-col>
       </el-row>
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="所属部门" prop="deptId">
-            <el-cascader :options="deptData" :props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择所属部门" clearable class="w100" v-model="formData.deptId">
+          <el-form-item :label="t('message.property.dossier.form.deptId')" prop="deptId">
+            <el-cascader :options="deptData" :props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }" :placeholder="t('message.property.dossier.form.deptPlaceholder')" clearable class="w100" v-model="formData.deptId">
               <template #default="{ node, data }">
                 <span>{{ data.deptName }}</span>
                 <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -53,101 +52,102 @@
         </el-col>
 
         <el-col :span="12">
-          <el-form-item label="设备类型">
-            <el-input v-model.trim="formData.deviceCategory" placeholder="请输入设备类型" />
+          <el-form-item :label="t('message.property.dossier.form.deviceCategory')">
+            <el-input v-model.trim="formData.deviceCategory" :placeholder="t('message.property.dossier.form.deviceCategoryPlaceholder')" />
           </el-form-item>
         </el-col>
       </el-row>
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="安装时间">
-            <el-date-picker v-model="formData.installTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择时间" class="w100" clearable />
+          <el-form-item :label="t('message.property.dossier.form.installTime')">
+            <el-date-picker v-model="formData.installTime" type="date" value-format="YYYY-MM-DD" :placeholder="t('message.property.dossier.form.datePlaceholder')" class="w100" clearable />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <el-divider content-position="left" v-if="Datalist">自定义属性</el-divider>
+      <el-divider content-position="left" v-if="Datalist">{{ t("message.property.dossier.form.dividerCustom") }}</el-divider>
       <FromData :DataList="Datalist" @SetSaveData="SetSaveData" v-if="Datalist && Datalist.length > 0"></FromData>
-
     </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.property.dossier.messages.cancel") }}</el-button>
+        <el-button type="primary" @click="onSubmit">{{ t("message.property.dossier.messages.confirm") }}</el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
-import api from '/@/api/device'
-import system from '/@/api/system';
-import FromData from './component/from.vue';
+import { ref, reactive, nextTick, computed } from "vue";
+import api from "/@/api/device";
+import system from "/@/api/system";
+import FromData from "./component/from.vue";
 
-import { ruleRequired } from '/@/utils/validator';
-import { ElMessage } from 'element-plus';
+import { ruleRequired } from "/@/utils/validator";
+import { ElMessage } from "element-plus";
+import { useI18n } from "vue-i18n";
 
-const emit = defineEmits(['getList']);
+const emit = defineEmits(["getList"]);
+const { t } = useI18n();
 
 const showDialog = ref(false);
 const formRef = ref();
-const orgData = ref();
-const deviceList = ref();
-const productData = ref();
-const deptData = ref();
-const Datalist = ref();
-const newData = ref([]);
+const orgData = ref<any[]>([]);
+const deviceList = ref<Array<{ key: string; name: string }>>([]);
+const productData = ref<any[]>([]);
+const deptData = ref<any[]>([]);
+const Datalist = ref<any[]>([]);
 const baseForm = {
   id: undefined,
-  productKey: '',
-  deviceKey: '',
-  deviceName: '',
+  productKey: "",
+  deviceKey: "",
+  deviceName: "",
   area: "",
-  deviceNumber: '',
-  deviceCategory: '',
-  installTime: '',
-  deptId: '',
+  deviceNumber: "",
+  deviceCategory: "",
+  installTime: "",
+  deptId: "",
   data: [],
-
 };
 
-
 const SetSaveData = (data: any) => {
   formData.data = data;
-}
+};
 const formData = reactive({
   ...baseForm,
 });
 
-const ruleForm = {
-  productKey: [ruleRequired('所属产品不能为空')],
-  deviceName: [ruleRequired('设备名称不能为空')],
-  deviceKey: [ruleRequired('设备不能为空')],
-};
-const handleSelectionChange = (value: any) => {
-  const selectedOption = deviceList.value.find(option => option.key === value);
+const ruleForm = computed(() => {
+  return {
+    productKey: [ruleRequired(t("message.property.dossier.valid.productRequired"))],
+    deviceName: [ruleRequired(t("message.property.dossier.valid.deviceNameRequired"))],
+    deviceKey: [ruleRequired(t("message.property.dossier.valid.deviceRequired"))],
+  };
+});
+
+const handleSelectionChange = (value: string) => {
+  const selectedOption = deviceList.value.find((option: { key: string; name: string }) => option.key === value);
   if (selectedOption) {
     formData.deviceName = selectedOption.name;
   } else {
-    formData.deviceName = '';
+    formData.deviceName = "";
   }
-}
+};
 
 const onSubmit = async () => {
   await formRef.value.validate();
-  const theApi = !formData.id || formData.id === '0' ? api.dev_asset.add : api.dev_asset.edit;
+  const theApi = !formData.id || formData.id === "0" ? api.dev_asset.add : api.dev_asset.edit;
   await theApi(formData);
-  ElMessage.success('操作成功');
+  ElMessage.success(t("message.property.dossier.messages.saveSuccess"));
   resetForm();
   showDialog.value = false;
-  emit('getList');
+  emit("getList");
 };
 
 const resetForm = async () => {
   Object.assign(formData, { ...baseForm });
-  Datalist.value = ''
+  Datalist.value = [];
   formRef.value && formRef.value.resetFields();
 };
 
@@ -158,7 +158,7 @@ const getIdByKey = (key: string) => {
     }
   }
   return null; // 如果没有找到匹配的key，则返回null（或者其他合适的值）
-}
+};
 
 const open = async (row: any, productInfo: any) => {
   resetForm();
@@ -178,13 +178,13 @@ const open = async (row: any, productInfo: any) => {
         productInfo = {
           id: getIdByKey(row.productKey),
           key: row.productKey,
-        }
+        };
       }
       //根据产品ID获取设备列表
       api.device.allList({ productKey: productInfo.key }).then((resd: any) => {
-        deviceList.value = resd.device || [];
+        deviceList.value = (resd.device || []) as Array<{ key: string; name: string }>;
       });
-    })
+    });
 
     //获取部门
     api.dept.getList({ status: -1 }).then((res: any) => {
@@ -195,26 +195,24 @@ const open = async (row: any, productInfo: any) => {
     });
 
     if (row.id) {
-
       api.dev_asset.detail({ deviceKey: row.deviceKey }).then((resde: any) => {
         Object.assign(formData, { ...resde });
-        formData.productKey = row.productKey
-        const newArray = resde.data.map(obj => {
+        formData.productKey = row.productKey;
+        const newArray = (resde.data as any[]).map((obj: any) => {
           const { name, value, ...rest } = obj;
           const newObj = { name, value, ...rest };
-          newObj[name] = value ? value : '';
+          newObj[name] = value ? value : "";
           return newObj;
         });
-        Datalist.value = newArray
+        Datalist.value = newArray;
       });
     } else {
       //获取档案属性
-      api.dev_asset_metadata.detail({ productKey: productInfo.key }).then((res: any) => {
-        const sortedArray = res.sort((a, b) => a.id - b.id);
+      api.dev_asset_metadata.detail({ productKey: productInfo.key }).then((res: any[]) => {
+        const sortedArray = res.sort((a: any, b: any) => a.id - b.id);
         Datalist.value = sortedArray || [];
       });
-      formData.productKey = productInfo.key
-
+      formData.productKey = productInfo.key;
     }
   });
 };
@@ -225,4 +223,4 @@ defineExpose({ open });
 .demo-form-inline .el-input {
   --el-input-width: 320px;
 }
-</style>
+</style>

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

@@ -1,8 +1,8 @@
 <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.dossier.form.keyword') + '：'" prop="keyWord">
+				<el-input v-model="params.keyWord" :placeholder="$t('message.property.dossier.form.keywordPlaceholder')" clearable style="width: 240px" />
 			</el-form-item>
 
 			<el-form-item>
@@ -10,7 +10,7 @@
 					<el-icon>
 						<ele-Search />
 					</el-icon>
-					查询
+					{{ $t('message.tableI18nAction.query') }}
 				</el-button>
 			</el-form-item>
 			<el-form-item>
@@ -18,7 +18,7 @@
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
-					删除
+					{{ $t('message.tableI18nAction.delete') }}
 				</el-button>
 			</el-form-item>
 		</el-form>
@@ -42,15 +42,15 @@
 				<div class="page page-full">
 					<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
 						<el-table-column type="selection" width="55" align="center" />
-						<el-table-column prop="deviceName" v-col="'deviceName'" label="设备名称" min-width="100" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="deviceKey" v-col="'deviceKey'" label="设备KEY" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="deviceNumber" v-col="'deviceNumber'" label="设备编码" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="deviceCategory" v-col="'deviceCategory'" label="设备类型" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="installTime" v-col="'installTime'" label="安装时间" width="160" align="center"></el-table-column>
-						<el-table-column label="操作" width="120" align="center">
+						<el-table-column prop="deviceName" v-col="'deviceName'" :label="$t('message.property.dossier.columns.deviceName')" min-width="100" show-overflow-tooltip />
+						<el-table-column prop="deviceKey" v-col="'deviceKey'" :label="$t('message.property.dossier.columns.deviceKey')" show-overflow-tooltip />
+						<el-table-column prop="deviceNumber" v-col="'deviceNumber'" :label="$t('message.property.dossier.columns.deviceNumber')" show-overflow-tooltip />
+						<el-table-column prop="deviceCategory" v-col="'deviceCategory'" :label="$t('message.property.dossier.columns.deviceCategory')" show-overflow-tooltip />
+						<el-table-column prop="installTime" v-col="'installTime'" :label="$t('message.property.dossier.columns.installTime')" width="160" align="center" />
+						<el-table-column :label="$t('message.tableI18nColumn.operation')" width="160" align="center">
 							<template #default="scope">
-								<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
-								<el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">删除</el-button>
+								<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">{{ $t('message.tableI18nAction.edit') }}</el-button>
+								<el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">{{ $t('message.tableI18nAction.delete') }}</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -69,6 +69,7 @@ import { Folder } from '@element-plus/icons-vue'
 
 import { ElMessageBox, ElMessage } from 'element-plus'
 import EditForm from './edit.vue'
+import { useI18n } from 'vue-i18n'
 interface Tree {
 	label: string
 	children?: Tree[]
@@ -80,6 +81,7 @@ const defaultProps = {
 }
 
 const queryRef = ref()
+const { t } = useI18n()
 const productData = ref([])
 const mergedData = ref()
 const cateData = ref()
@@ -177,25 +179,25 @@ const buildTree = (category: any, productData: any) => {
 }
 
 const batchdel = () => {
-	ElMessageBox.confirm('是否确认要批量删除这些数据吗?', '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
+	ElMessageBox.confirm(t('message.property.dossier.messages.batchDeleteConfirm'), t('message.property.dossier.messages.tips'), {
+		confirmButtonText: t('message.property.dossier.messages.confirm'),
+		cancelButtonText: t('message.property.dossier.messages.cancel'),
 		type: 'warning',
 	}).then(async () => {
 		await device.dev_asset.delete({ deviceKeys: deviceKeys.value })
-		ElMessage.success('删除成功')
+		ElMessage.success(t('message.property.dossier.messages.deleteSuccess'))
 		getList()
 	})
 }
 
 const del = (row: any) => {
-	ElMessageBox.confirm('是否确认删除名称为："' + row.deviceName + '"的数据项?', '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
+	ElMessageBox.confirm(t('message.property.dossier.messages.deleteItemConfirm', { name: row.deviceName }), t('message.property.dossier.messages.tips'), {
+		confirmButtonText: t('message.property.dossier.messages.confirm'),
+		cancelButtonText: t('message.property.dossier.messages.cancel'),
 		type: 'warning',
 	}).then(async () => {
 		await device.dev_asset.delete({ deviceKeys: [row.deviceKey] })
-		ElMessage.success('删除成功')
+		ElMessage.success(t('message.property.dossier.messages.deleteSuccess'))
 		getList()
 	})
 }