增加项目列表页面多语言处理

src/i18n/index.ts

@@ -34,6 +34,10 @@ import pagesIotcardZhcn from './pages/iotCard/zh-cn';
 import pagesIotcardEn from './pages/iotCard/en';
 import pagesIotcardZhtw from './pages/iotCard/zh-tw';
 
+import pagesProjectsZhcn from './pages/projects/zh-cn';
+import pagesProjectsEn from './pages/projects/en';
+import pagesProjectsZhtw from './pages/projects/zh-tw';
+
 // 定义语言国际化内容
 /**
  * 说明：
@@ -49,7 +53,8 @@ const messages = {
 			...pagesFormI18nZhcn,
 			...pagesTable18nZhcn,
 			...pagesIotmanagerZhcn,
-			iotCard: pagesIotcardZhcn
+			iotCard: pagesIotcardZhcn,
+			projects: pagesProjectsZhcn
 		}
 	},
 	[enLocale.name]: {
@@ -60,7 +65,8 @@ const messages = {
 			...pagesFormI18nEn,
 			...pagesTable18nEn,
 			...pagesIotmanagerEn,
-			iotCard: pagesIotcardEn
+			iotCard: pagesIotcardEn,
+			projects: pagesProjectsEn
 		},	
 	},
 	[zhtwLocale.name]: {
@@ -71,7 +77,8 @@ const messages = {
 			...pagesFormI18nZhtw,
 			...pagesTable18nZhtw,
 			...pagesIotmanagerZhtw,
-			iotCard: pagesIotcardZhtw
+			iotCard: pagesIotcardZhtw,
+			projects: pagesProjectsZhtw
 		},
 	},
 };

src/i18n/pages/projects/en.ts

@@ -0,0 +1,54 @@
+export default {
+  list: {
+    search: {
+      channelPlaceholder: 'Search channel merchant',
+      statusPlaceholder: 'Please select format',
+      query: 'Search',
+      reset: 'Reset'
+    },
+    status: {
+      all: 'All status',
+      enabled: 'Enabled',
+      disabled: 'Disabled'
+    },
+    actions: {
+      add: 'Add',
+      delete: 'Delete',
+      enable: 'Enable',
+      disable: 'Disable'
+    },
+    table: {
+      columns: {
+        projectStatus: 'Project Status',
+        projectName: 'Project Name',
+        address: 'Province/City/District/County',
+        addressDetail: 'Address Detail',
+        channelMerchants: 'Channel Merchant',
+        customName: 'Key Customer',
+        repairCompany: 'Maintenance Company',
+        updatedAt: 'Updated At',
+        actions: 'Actions'
+      },
+      actions: {
+        detail: 'Detail',
+        edit: 'Edit',
+        delete: 'Delete'
+      }
+    },
+    messages: {
+      operationSuccess: 'Operation succeeded',
+      deleteConfirmSingle: 'This will delete project: “{name}”. Continue?',
+      deleteConfirmMultiple: 'This will delete {count} projects',
+      tip: 'Prompt',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      deleteSuccess: 'Deleted successfully'
+    }
+  },
+  editDialog: {
+    title: {
+      add: 'Add Project',
+      edit: 'Edit Project'
+    }
+  }
+};

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

@@ -0,0 +1,55 @@
+export default {
+  list: {
+    search: {
+      channelPlaceholder: '渠道商搜索',
+      statusPlaceholder: '请选择转发格式',
+      query: '查询',
+      reset: '重置'
+    },
+    status: {
+      all: '全部状态',
+      enabled: '正常',
+      disabled: '禁用'
+    },
+    actions: {
+      add: '新增',
+      delete: '删除',
+      enable: '启用',
+      disable: '禁用'
+    },
+    table: {
+      columns: {
+        projectStatus: '项目状态',
+        projectName: '项目名称',
+        address: '省/市/区/县',
+        addressDetail: '详细地址',
+        channelMerchants: '渠道商',
+        customName: '关键客户',
+        repairCompany: '维修公司',
+        updatedAt: '更新时间',
+        actions: '操作'
+      },
+      actions: {
+        detail: '详情',
+        edit: '编辑',
+        delete: '删除'
+      }
+    },
+    messages: {
+      operationSuccess: '操作成功',
+      deleteConfirmSingle: '此操作将项目：“{name}”，是否继续?',
+      deleteConfirmMultiple: '此操作将{count}个项目',
+      tip: '提示',
+      confirm: '确认',
+      cancel: '取消',
+      deleteSuccess: '删除成功'
+    }
+  }
+  ,
+  editDialog: {
+    title: {
+      add: '新增项目',
+      edit: '编辑项目'
+    }
+  }
+};

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

@@ -0,0 +1,54 @@
+export default {
+  list: {
+    search: {
+      channelPlaceholder: '渠道商搜尋',
+      statusPlaceholder: '請選擇轉發格式',
+      query: '查詢',
+      reset: '重置'
+    },
+    status: {
+      all: '全部狀態',
+      enabled: '正常',
+      disabled: '禁用'
+    },
+    actions: {
+      add: '新增',
+      delete: '刪除',
+      enable: '啟用',
+      disable: '禁用'
+    },
+    table: {
+      columns: {
+        projectStatus: '項目狀態',
+        projectName: '項目名稱',
+        address: '省/市/區/縣',
+        addressDetail: '詳細地址',
+        channelMerchants: '渠道商',
+        customName: '關鍵客戶',
+        repairCompany: '維修公司',
+        updatedAt: '更新時間',
+        actions: '操作'
+      },
+      actions: {
+        detail: '詳情',
+        edit: '編輯',
+        delete: '刪除'
+      }
+    },
+    messages: {
+      operationSuccess: '操作成功',
+      deleteConfirmSingle: '此操作將項目：「{name}」，是否繼續?',
+      deleteConfirmMultiple: '此操作將{count}個項目',
+      tip: '提示',
+      confirm: '確認',
+      cancel: '取消',
+      deleteSuccess: '刪除成功'
+    }
+  },
+  editDialog: {
+    title: {
+      add: '新增項目',
+      edit: '編輯項目'
+    }
+  }
+};

src/views/iot/projects/list/edit-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData?.id ? '编辑项目' : '新增项目'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+  <el-dialog class="api-edit" v-model="showDialog" :title="formData?.id ? $t('message.projects.editDialog.title.edit') : $t('message.projects.editDialog.title.add')" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
     <EditVue ref="editRef" v-if="showDialog" @getList="getList" @cancel="cancel"></EditVue>
   </el-dialog>
 </template>

src/views/iot/projects/list/index.vue

@@ -4,14 +4,14 @@
       <div class="search">
         <el-form inline>
           <el-form-item>
-            <el-input v-model="params.channelMerchants" style="width: 200px;" placeholder="渠道商搜索" @keyup.enter.native="getList(1)" clearable>
+            <el-input v-model="params.channelMerchants" style="width: 200px;" :placeholder="$t('message.projects.list.search.channelPlaceholder')" @keyup.enter.native="getList(1)" clearable>
             </el-input>
           </el-form-item>
           <el-form-item>
-            <el-select v-model="params.status" placeholder="请选择转发格式" style="width: 100px">
-              <el-option label="全部状态" :value="-1"> </el-option>
-              <el-option label="正常" :value="1"> </el-option>
-              <el-option label="禁用" :value="0"> </el-option>
+            <el-select v-model="params.status" :placeholder="$t('message.projects.list.search.statusPlaceholder')" style="width: 100px">
+              <el-option :label="$t('message.projects.list.status.all')" :value="-1"> </el-option>
+              <el-option :label="$t('message.projects.list.status.enabled')" :value="1"> </el-option>
+              <el-option :label="$t('message.projects.list.status.disabled')" :value="0"> </el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -19,13 +19,13 @@
               <el-icon>
                 <ele-Search />
               </el-icon>
-              查询
+              {{ $t('message.projects.list.search.query') }}
             </el-button>
             <el-button @click="resetQuery()">
               <el-icon>
                 <ele-Refresh />
               </el-icon>
-              重置
+              {{ $t('message.projects.list.search.reset') }}
             </el-button>
           </el-form-item>
           <el-form-item>
@@ -33,33 +33,33 @@
               <el-icon>
                 <ele-FolderAdd />
               </el-icon>
-              新增
+              {{ $t('message.projects.list.actions.add') }}
             </el-button>
             <el-button type="danger" v-auth="'del'" :disabled="!ids.length" @click="del()">
               <el-icon>
                 <ele-Delete />
               </el-icon>
-              删除
+              {{ $t('message.projects.list.actions.delete') }}
             </el-button>
           </el-form-item>
         </el-form>
       </div>
       <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="status" label="项目状态" width="100" :formatter="(row: any) => row.status ? '正常' : '禁用'" align="center"></el-table-column>
-        <el-table-column prop="name" v-col="'name'" label="项目名称" min-width="120" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="address" v-col="'address'" label="省/市/区/县" :formatter="(row: any) => JSON.parse(row.address)?.name" min-width="200" align="center"></el-table-column>
-        <el-table-column prop="addressDetail" v-col="'addressDetail'" label="详细地址" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="channelMerchants" v-col="'channelMerchants'" label="渠道商" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="customName" v-col="'customName'" label="关键客户" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="repairCompany" v-col="'repairCompany'" label="维修公司" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="updatedAt" v-col="'updatedAt'" label="更新时间" width="165" align="center"></el-table-column>
-        <el-table-column label="操作" width="160" v-col="'handle'" align="center" fixed="right">
+        <el-table-column prop="status" :label="$t('message.projects.list.table.columns.projectStatus')" width="120" :formatter="(row: any) => row.status ? $t('message.projects.list.status.enabled') : $t('message.projects.list.status.disabled')" align="center"></el-table-column>
+        <el-table-column prop="name" v-col="'name'" :label="$t('message.projects.list.table.columns.projectName')" min-width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="address" v-col="'address'" :label="$t('message.projects.list.table.columns.address')" :formatter="(row: any) => JSON.parse(row.address)?.name" min-width="230" align="center"></el-table-column>
+        <el-table-column prop="addressDetail" v-col="'addressDetail'" :label="$t('message.projects.list.table.columns.addressDetail')" min-width="140" align="center"></el-table-column>
+        <el-table-column prop="channelMerchants" v-col="'channelMerchants'" :label="$t('message.projects.list.table.columns.channelMerchants')" min-width="150" align="center"></el-table-column>
+        <el-table-column prop="customName" v-col="'customName'" :label="$t('message.projects.list.table.columns.customName')" min-width="150" align="center"></el-table-column>
+        <el-table-column prop="repairCompany" v-col="'repairCompany'" :label="$t('message.projects.list.table.columns.repairCompany')" min-width="190" align="center"></el-table-column>
+        <el-table-column prop="updatedAt" v-col="'updatedAt'" :label="$t('message.projects.list.table.columns.updatedAt')" width="165" align="center"></el-table-column>
+        <el-table-column :label="$t('message.projects.list.table.columns.actions')" width="200" v-col="'handle'" align="center" fixed="right">
           <template #default="{ row }">
-            <el-button size="small" text style="margin-left: 0;" type="primary" v-auth="'detail'" @click="$router.push('/iotmanager/projects/list/' + row.code)">详情</el-button>
-            <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(row)">编辑</el-button>
-            <el-button size="small" text type="primary" v-auth="'startOrStop'" @click="editStatus(row)">{{ row.status ? '禁用' : '启用' }}</el-button>
-            <el-button size="small" text type="danger" v-auth="'del'" @click="del(row)">删除</el-button>
+            <el-button size="small" text style="margin-left: 0;" type="primary" v-auth="'detail'" @click="$router.push('/iotmanager/projects/list/' + row.code)">{{ $t('message.projects.list.table.actions.detail') }}</el-button>
+            <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(row)">{{ $t('message.projects.list.table.actions.edit') }}</el-button>
+            <el-button size="small" text type="primary" v-auth="'startOrStop'" @click="editStatus(row)">{{ row.status ? $t('message.projects.list.actions.disable') : $t('message.projects.list.actions.enable') }}</el-button>
+            <el-button size="small" text type="danger" v-auth="'del'" @click="del(row)">{{ $t('message.projects.list.table.actions.delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -73,9 +73,10 @@
 import api from '/@/api/projects';
 import { useSearch } from '/@/hooks/useCommon';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import getOrigin from '/@/utils/origin'
 import EditForm from './edit-dialog.vue';
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
 const editFormRef = ref();
 const ids = ref<number[]>([]);
@@ -84,11 +85,6 @@ const { params, tableData, getList, loading, resetQuery } = useSearch<any[]>(api
 
 getList();
 
-function getTokenUrl(url: string) {
-  const tokenUrl = import.meta.env.VITE_TOPO_URL
-  return getOrigin(tokenUrl + url)
-}
-
 const addOrEdit = (row?: any) => {
   if (row) {
     editFormRef.value.open(row);
@@ -99,7 +95,7 @@ const addOrEdit = (row?: any) => {
 };
 const editStatus = (row: any) => {
   api.editStatus({ id: row.id, status: row.status ? 0 : 1 }).then(() => {
-    ElMessage.success('操作成功')
+    ElMessage.success(t('message.projects.list.messages.operationSuccess'))
     getList()
   })
 };
@@ -109,19 +105,14 @@ const handleSelectionChange = (selections: any[]) => {
   ids.value = selections.map((item) => item.id);
 };
 
-const edit = (row: any) => {
-  const url = getTokenUrl('#/editor/' + row.id);
-  window.open(url);
-};
-
 const del = (row?: any) => {
-  ElMessageBox.confirm(row ? `此操作将项目：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个项目`, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm(row ? t('message.projects.list.messages.deleteConfirmSingle', { name: row.name }) : t('message.projects.list.messages.deleteConfirmMultiple', { count: ids.value.length }), t('message.projects.list.messages.tip'), {
+    confirmButtonText: t('message.projects.list.messages.confirm'),
+    cancelButtonText: t('message.projects.list.messages.cancel'),
     type: 'warning',
   }).then(async () => {
     await api.del(row ? [row.id] : ids.value);
-    ElMessage.success('删除成功');
+    ElMessage.success(t('message.projects.list.messages.deleteSuccess'));
     getList(1);
   });
 };