feat: 物联管理-设备：增加多语言

src/i18n/pages/iotmanagerI18n/en.ts

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-05 12:42:31
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-08-06 18:09:23
+ * @LastEditTime: 2025-08-08 21:22:28
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/iotmanagerI18n/en.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -36,17 +36,27 @@ export default {
 			categoryName: "Category Name",
 			desc: "Description",
 			sort: "Sort",
+			key: "Key",
+			name: "Name",
+			category: "Category",
+			transportProtocol: "Transport Protocol",
+			deviceType: "Device Type",
+			status: "Status",
 		},
 		tableI18nAlarmType: {
 		},
 		tableI18nStatus: {
+			enabled: "Enabled",
+			disabled: "Disabled"
 		},
 		tableI18nConfirm: {
-			deleteMessage: "This operation will permanently delete the category: {name}, continue?",
+			deleteCategoryMessage: "This operation will permanently delete the category: {name}, continue?",
+			deleteProductMessage: "This operation will permanently delete the product: {name}, continue?"
 		},
 		tableI18nAction: {
 			addCategory: "Add Category",
-			editCategory: "Edit Category"
+			editCategory: "Edit Category",
+			deviceManagement: "Device Management"
 		},
 		formI18nLabel: {
 			keyword: "Keyword",

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

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-05 12:42:31
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-08-06 18:06:54
+ * @LastEditTime: 2025-08-08 21:26:06
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/iotmanagerI18n/zh-cn.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -36,17 +36,27 @@ export default {
 			categoryName: "分类名称",
 			desc: "描述",
 			sort: "排序",
+			key: "标识",
+			name: "名称",
+			category: "分类",
+			transportProtocol: "接入方式",
+			deviceType: "类型",
+			status: "状态",
 		},
 		tableI18nAlarmType: {
 		},
 		tableI18nStatus: {
+			enabled: "已启用",
+			disabled: "未启用"
 		},
 		tableI18nConfirm: {
-			deleteMessage: "此操作将永久删除分类：{name}, 是否继续?",
+			deleteCatrgoryMessage: "此操作将永久删除分类：{name}, 是否继续?",
+			deleteProductMessage: "此操作将永久删除产品：{name}，是否继续?"
 		},
 		tableI18nAction: {
 			addCategory: "添加分类",
-			editCategory: "修改分类"
+			editCategory: "修改分类",
+			deviceManagement: "设备管理",
 		},
 		formI18nLabel: {
 			keyword: "关键字",

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

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-05 12:42:31
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-08-06 18:10:09
+ * @LastEditTime: 2025-08-08 21:22:52
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/iotmanager/zh-tw.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -36,17 +36,27 @@ export default {
 			categoryName: "分類名稱",
 			desc: "描述",
 			sort: "排序",
+			key: "標識",
+			name: "名稱",
+			category: "分類",
+			transportProtocol: "接入方式",
+			deviceType: "類型",
+			status: "狀態"
 		},
 		tableI18nAlarmType: {
 		},
 		tableI18nStatus: {
+			enabled: "已啟用",
+			disabled: "未啟用"
 		},
 		tableI18nConfirm: {
-			deleteMessage: "此操作將永久刪除分類：{name}, 是否繼續?",
+			deleteCatrgoryMessage: "此操作將永久刪除分類：{name}, 是否繼續?",
+			deleteProductMessage: "此操作將永久刪除產品：{name}，是否繼續?"
 		},
 		tableI18nAction: {
 			addCategory: "添加分類",
-			editCategory: "修改分類"
+			editCategory: "修改分類",
+			deviceManagement: "設備管理"
 		},
 		formI18nLabel: {
 			keyword: "關鍵字",

src/i18n/pages/tableI18n/en.ts

@@ -19,7 +19,9 @@ export default {
 		deleteSuccess: "Delete Success",
 		addSuccess: "Create Success",
 		addFailed: "Create Failed",
-		editSuccess: "Edit Success"
+		editSuccess: "Edit Success",
+		deleteSelectedMessage: "Are you sure you want to delete the selected data?",
+		selectDataFirst: "Please select the data to delete first."
 	},
 	tableI18nAction: {
 		detail: "Detail",

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

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-06 01:16:57
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-08-06 14:35:07
+ * @LastEditTime: 2025-08-08 21:17:25
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/tableI18n/zh-cn.ts
  * @Description: 表格国际化 - 简体中文
  */
@@ -19,7 +19,9 @@ export default {
 		deleteSuccess: "删除成功",
 		addSuccess: "添加成功",
 		addFailed: "添加失败",
-		editSuccess: "修改成功"
+		editSuccess: "修改成功",
+		deleteSelectedMessage: "你确定要删除所选数据？",
+		selectDataFirst: "请选择要删除的数据。"
 	},
 	tableI18nAction: {
 		detail: "详情",

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

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-06 01:16:57
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-08-06 14:39:37
+ * @LastEditTime: 2025-08-08 21:19:12
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/tableI18n/zh-tw.ts
  * @Description: 表格国际化 - 繁体中文
  */
@@ -19,7 +19,9 @@ export default {
 		deleteSuccess: "刪除成功",
 		addSuccess: "添加成功",
 		addFailed: "添加失敗",
-		editSuccess: "修改成功"
+		editSuccess: "修改成功",
+		deleteSelectedMessage: "你確定要刪除所選數據？",
+		selectDataFirst: "請選擇要刪除的數據。",
 	},
 	tableI18nAction: {
 		detail: "詳情",

src/views/iot/device/category/index.vue

@@ -98,7 +98,7 @@ const onOpenEdit = (row: TableDataRow) => {
 // 删除当前行
 const onTabelRowDel = (row: TableDataRow) => {
   ElMessageBox.confirm(
-    t('message.device.tableI18nConfirm.deleteMessage', { name: row.name }),
+    t('message.device.tableI18nConfirm.deleteCatrgoryMessage', { name: row.name }),
     t('message.tableI18nConfirm.deleteTitle'),
     {
       confirmButtonText: t('message.tableI18nConfirm.confirmText'),

src/views/iot/device/product/index.vue

@@ -4,11 +4,11 @@
       <el-form :model="tableData.param" ref="queryRef" inline label-width="68px">
         <!-- 关键字 -->
         <el-form-item :label="$t('message.device.formI18nLabel.keyword')" prop="name">
-          <el-input v-model="tableData.param.name" :placeholder="$t('message.device.formI18nPlaceholder.keyword')" clearable style="width: 150px" @keyup.enter.native="typeList" />
+          <el-input v-model="tableData.param.name" :placeholder="$t('message.device.formI18nPlaceholder.keyword')" clearable style="width: 150px" @keyup.enter.native="getList" />
         </el-form-item>
         <!-- 类型 -->
         <el-form-item :label="$t('message.device.formI18nLabel.type')" prop="deviceType" style="width: 180px">
-          <el-select v-model="tableData.param.deviceType" :placeholder="$t('message.device.formI18nPlaceholder.type')" clearable style="width: 240px" @keyup.enter.native="typeList">
+          <el-select v-model="tableData.param.deviceType" :placeholder="$t('message.device.formI18nPlaceholder.type')" clearable style="width: 240px" @keyup.enter.native="getList">
             <!-- 网关 -->
             <el-option :label="$t('message.device.formI18nOption.gateway')" :value="'网关'" />
             <!-- 设备 -->
@@ -33,7 +33,7 @@
         <!--        </el-form-item>-->
         <el-form-item>
           <!-- 查询 -->
-          <el-button type="primary" class="ml10" @click="typeList">
+          <el-button type="primary" class="ml10" @click="getList">
             <el-icon>
               <ele-Search />
             </el-icon>
@@ -64,42 +64,61 @@
       </el-form>
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="标识" prop="key" min-width="130" show-overflow-tooltip v-col="'key'">
+        <!-- 标识 -->
+        <el-table-column :label="$t('message.device.tableI18nColumn.key')" prop="key" min-width="130" show-overflow-tooltip v-col="'key'">
           <template #default="{ row }"><copy :text="row.key"></copy></template>
         </el-table-column>
-        <el-table-column label="名称" prop="name" min-width="160" show-overflow-tooltip v-col="'name'" />
-        <el-table-column label="分类" prop="categoryName" align="center" width="140" show-overflow-tooltip v-col="'categoryName'" />
+        <!-- 名称 -->
+        <el-table-column :label="$t('message.device.tableI18nColumn.name')" prop="name" min-width="160" show-overflow-tooltip v-col="'name'" />
+        <!-- 分类 -->
+        <el-table-column :label="$t('message.device.tableI18nColumn.category')" prop="categoryName" min-width="160" align="center" show-overflow-tooltip v-col="'categoryName'" />
         <!--        <el-table-column label="消息协议" prop="messageProtocol" align="center" min-width="150" show-overflow-tooltip v-col="'messageProtocol'" />-->
-        <el-table-column label="接入方式" prop="transportProtocol" min-width="120" align="center" show-overflow-tooltip v-col="'transportProtocol'" />
-        <el-table-column label="类型" prop="deviceType" min-width="90" align="center" show-overflow-tooltip v-col="'deviceType'" />
-        <el-table-column prop="status" label="状态" min-width="90" align="center" v-col="'status'">
+        <!-- 接入方式 -->
+        <el-table-column :label="$t('message.device.tableI18nColumn.transportProtocol')" prop="transportProtocol" min-width="120" align="center" show-overflow-tooltip v-col="'transportProtocol'" />
+        <!-- 类型 -->
+        <el-table-column :label="$t('message.device.tableI18nColumn.deviceType')" prop="deviceType" min-width="90" align="center" show-overflow-tooltip v-col="'deviceType'" />
+        <!-- 状态 -->
+        <el-table-column prop="status" :label="$t('message.device.tableI18nColumn.status')" min-width="90" align="center" v-col="'status'">
           <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status">已启用</el-tag>
-            <el-tag type="info" size="small" v-else>未启用</el-tag>
+            <el-tag type="success" size="small" v-if="scope.row.status">{{ $t('message.device.tableI18nStatus.enabled') }}</el-tag>
+            <el-tag type="info" size="small" v-else>{{ $t('message.device.tableI18nStatus.disabled') }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="150" align="center" fixed="right">
+        <!-- 操作 -->
+        <el-table-column :label="$t('message.tableI18nColumn.operation')" align="center" fixed="right" :min-width="currentLang === 'en' ? 240 : 160">
           <template #default="scope">
+            <!-- 详情 -->
             <router-link :to="'/iotmanager/device/product/detail/' + scope.row.key" class="link-type" style="padding-right: 12px; font-size: 12px; color: #409eff">
-              <span>详情</span>
+              <span>{{ $t('message.tableI18nAction.detail') }}</span>
+            </router-link>
+            <!-- 设备管理 -->
+            <router-link :to="{ path: '/iotmanager/device/instance', query: { productKey: scope.row.key } }" class="link-type" style="padding-right: 12px; font-size: 12px; color: #409eff">
+              <span>{{ $t('message.device.tableI18nAction.deviceManagement') }}</span>
             </router-link>
-            <router-link :to="{ path: '/iotmanager/device/instance', query: { productKey: scope.row.key } }" class="link-type" style="padding-right: 12px; font-size: 12px; color: #409eff">设备管理</router-link>
-            <!--            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>-->
-            <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+            <!-- <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>-->
+             <!-- 删除 -->
+            <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">{{ $t('message.tableI18nAction.delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+      <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList" />
     </el-card>
-    <EditDic ref="editDicRef" @typeList="typeList" />
+    <EditDic ref="editDicRef" @typeList="getList" />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { toRefs, reactive, onMounted, ref, defineComponent } from "vue";
 import { ElMessageBox, ElMessage, FormInstance } from "element-plus";
 import EditDic from "./component/editPro.vue";
 import api from "/@/api/device";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n();
+
+const currentLang = computed(() => locale.value);
+
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -111,121 +130,88 @@ interface TableDataRow {
   desc: string;
   createBy: string;
 }
-interface TableDataState {
-  keys: string[];
-  tableData: {
-    data: Array<TableDataRow>;
-    total: number;
-    loading: boolean;
-    param: {
-      pageNum: number;
-      pageSize: number;
-      name: string;
-      deviceType: string;
-      status: string;
-      dateRange: string[];
-    };
-  };
-}
 
-export default defineComponent({
-  name: "deviceproduct",
-  components: { EditDic },
-  setup() {
-    const addDicRef = ref();
-    const editDicRef = ref();
-    const queryRef = ref();
-    const state = reactive<TableDataState>({
-      keys: [],
-      tableData: {
-        data: [],
-        total: 0,
-        loading: false,
-        param: {
-          pageNum: 1,
-          pageSize: 20,
-          status: "",
-          name: "",
-          deviceType: "",
-          dateRange: [],
-        },
-      },
-    });
-    // 初始化表格数据
-    const initTableData = () => {
-      typeList();
-    };
-    const typeList = () => {
-      state.tableData.loading = true;
-      api.product
-        .getList(state.tableData.param)
-        .then((res: any) => {
-          state.tableData.data = res.product;
-          state.tableData.total = res.total;
-        })
-        .finally(() => (state.tableData.loading = false));
-    };
-    // 打开新增产品弹窗
-    const onOpenAddDic = () => {
-      editDicRef.value.openDialog();
-    };
-    // 打开修改产品弹窗
-    const onOpenEditDic = (row: TableDataRow) => {
-      editDicRef.value.openDialog(row);
-    };
-    // 删除产品
-    const onRowDel = (row?: TableDataRow) => {
-      let msg = "你确定要删除所选数据？";
-      let keys: string[] = [];
-      if (row) {
-        msg = `此操作将永久删除产品：“${row.name}”，是否继续?`;
-        keys = [row.key];
-      } else {
-        keys = state.keys;
-      }
-      if (keys.length === 0) {
-        ElMessage.error("请选择要删除的数据。");
-        return;
-      }
-      ElMessageBox.confirm(msg, "提示", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          api.product.delete(keys).then(() => {
-            ElMessage.success("删除成功");
-            typeList();
-          });
-        })
-        .catch(() => {});
-    };
-    // 页面加载时
-    onMounted(() => {
-      initTableData();
-    });
-    /** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
-      if (!formEl) return;
-      formEl.resetFields();
-      typeList();
-    };
-    // 多选框选中数据
-    const handleSelectionChange = (selection: TableDataRow[]) => {
-      state.keys = selection.map((item) => item.key);
-    };
-    return {
-      addDicRef,
-      editDicRef,
-      queryRef,
-      onOpenAddDic,
-      onOpenEditDic,
-      onRowDel,
-      typeList,
-      resetQuery,
-      handleSelectionChange,
-      ...toRefs(state),
-    };
+
+// const addDicRef = ref();
+const editDicRef = ref();
+const queryRef = ref();
+const keys = ref<any>([]);
+const tableData = ref({
+  data: [],
+  total: 0,
+  loading: false,
+  param: {
+    pageNum: 1,
+    pageSize: 20,
+    status: "",
+    name: "",
+    deviceType: "",
+    dateRange: [],
   },
+})
+// 初始化表格数据
+// const initTableData = () => {
+//   typeList();
+// };
+const getList = () => {
+  tableData.value.loading = true;
+  api.product
+    .getList(tableData.value.param)
+    .then((res: any) => {
+      tableData.value.data = res.product;
+      tableData.value.total = res.total;
+    })
+    .finally(() => (tableData.value.loading = false));
+};
+// 打开新增产品弹窗
+const onOpenAddDic = () => {
+  editDicRef.value.openDialog();
+};
+// 打开修改产品弹窗
+// const onOpenEditDic = (row: TableDataRow) => {
+//   editDicRef.value.openDialog(row);
+// };
+// 删除产品
+const onRowDel = (row?: TableDataRow) => {
+  let msg = t('message.tableI18nConfirm.deleteSelectedMessage');
+  let keysData: string[] = [];
+  if (row) {
+    msg = t('message.device.tableI18nConfirm.deleteProductMessage', { name: row.name });
+    keysData = [row.key];
+  } else {
+    keysData = keys.value;
+  }
+  if (keysData.length === 0) {
+    ElMessage.error(t('message.tableI18nConfirm.selectDataFirst'));
+    return;
+  }
+  ElMessageBox.confirm(msg, t('message.tableI18nConfirm.deleteTitle'), {
+    confirmButtonText: t('message.tableI18nConfirm.confirmText'),
+    cancelButtonText: t('message.tableI18nConfirm.cancelText'),
+    type: "warning",
+  })
+    .then(() => {
+      api.product.delete(keysData).then(() => {
+        ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
+        getList();
+      });
+    })
+    .catch(() => {});
+};
+// 页面加载时
+onMounted(() => {
+  // initTableData();
+  getList()
 });
+/** 重置按钮操作 */
+// const resetQuery = (formEl: FormInstance | undefined) => {
+//   if (!formEl) return;
+//   formEl.resetFields();
+//   typeList();
+// };
+// 多选框选中数据
+const handleSelectionChange = (selection: TableDataRow[]) => {
+  keys.value = selection.map((item) => item.key);
+};
+
 </script>