refactor:优化前端国际化

Web/src/views/system/role/component/editRole.vue

@@ -10,39 +10,39 @@
 			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
 				<el-row :gutter="10">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="角色名称" prop="name" :rules="[{ required: true, message: '角色名称不能为空', trigger: 'blur' }]">
+						<el-form-item :label="$t('message.list.roleName')" prop="name" :rules="[{ required: true, message: $t('message.list.roleNameRequired'), trigger: 'blur' }]">
-							<el-input v-model="state.ruleForm.name" placeholder="角色名称" clearable />
+							<el-input v-model="state.ruleForm.name" :placeholder="$t('message.list.roleName')" clearable />
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="角色编码" prop="code" :rules="[{ required: true, message: '角色编码不能为空', trigger: 'blur' }]">
+						<el-form-item :label="$t('message.list.roleCode')" prop="code" :rules="[{ required: true, message: $t('message.list.roleCodeRequired'), trigger: 'blur' }]">
-							<el-input v-model="state.ruleForm.code" placeholder="角色编码" clearable :disabled="state.ruleForm.code == 'sys_admin' && state.ruleForm.id != undefined" />
+							<el-input v-model="state.ruleForm.code" :placeholder="$t('message.list.roleCode')" clearable :disabled="state.ruleForm.code == 'sys_admin' && state.ruleForm.id != undefined" />
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="排序">
+						<el-form-item :label="$t('message.list.orderNo')">
-							<el-input-number v-model="state.ruleForm.orderNo" placeholder="排序" class="w100" />
+							<el-input-number v-model="state.ruleForm.orderNo" :placeholder="$t('message.list.orderNo')" class="w100" />
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="状态">
+						<el-form-item :label="$t('message.list.status')">
 							<el-radio-group v-model="state.ruleForm.status">
-								<el-radio :value="1">启用</el-radio>
+								<el-radio :value="1">{{ $t('message.list.enable') }}</el-radio>
-								<el-radio :value="2">禁用</el-radio>
+								<el-radio :value="2">{{ $t('message.list.disable') }}</el-radio>
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="备注">
+						<el-form-item :label="$t('message.list.remark')">
-							<el-input v-model="state.ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea" />
+							<el-input v-model="state.ruleForm.remark" :placeholder="$t('message.list.needInputRemark')" clearable type="textarea" />
 						</el-form-item>
 					</el-col>
 				</el-row>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
-					<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
+					<el-button icon="ele-CircleCloseFilled" @click="cancel">{{ $t('message.list.cancelButtonText') }}</el-button>
-					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
+					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">{{ $t('message.list.confirmButtonText') }}</el-button>
 				</span>
 			</template>
 		</el-dialog>

Web/src/views/system/role/component/grantApi.vue

@@ -12,7 +12,7 @@
 					<div class="card-header">
 						<div class="tree-h-flex">
 							<div class="tree-h-left">
-								<el-input :prefix-icon="Search" v-model="filterText" placeholder="API路由" />
+								<el-input :prefix-icon="Search" v-model="filterText" :placeholder="$t('message.list.apiRoute')" />
 							</div>
 						</div>
 					</div>
@@ -50,8 +50,8 @@
 			</el-card>
 			<template #footer>
 				<div style="margin-bottom: 20px; margin-right: 20px">
-					<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
+					<el-button icon="ele-CircleCloseFilled" @click="cancel">{{ $t('message.list.cancelButtonText') }}</el-button>
-					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
+					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">{{ $t('message.list.confirmButtonText') }}</el-button>
 				</div>
 			</template>
 		</el-drawer>
@@ -65,6 +65,10 @@ import { Search } from '@element-plus/icons-vue';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysCommonApi, SysRoleApi } from '/@/api-services/api';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
@@ -103,7 +107,9 @@ const initTreeData = async () => {
 const openDrawer = async (row: any) => {
 	state.selectedTabName = 0;
 	state.roleId = row.id;
-	state.drawerTitle = '设置角色接口黑名单【' + row.name + '】';
+	state.drawerTitle = t('message.list.setApiBlacklist', { name: row.name });
+
+
 
 	state.loading = true;
 	// 获取已有接口资源

Web/src/views/system/role/component/grantData.vue

@@ -10,14 +10,14 @@
 			<el-form :model="state.ruleForm" label-position="top">
 				<el-row :gutter="10">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl1="24" class="mb10">
-						<el-form-item label="数据范围：">
+						<el-form-item :label="$t('message.list.dataScope') + '：'">
-							<el-select v-model="state.ruleForm.dataScope" placeholder="数据范围" style="width: 100%">
+							<el-select v-model="state.ruleForm.dataScope" :placeholder="$t('message.list.dataScope')" style="width: 100%">
 								<el-option v-for="d in state.dataScopeType" :key="d.value" :label="d.label" :value="d.value" />
 							</el-select>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl1="24" v-show="state.ruleForm.dataScope === 5">
-						<el-form-item label="机构列表：" class="tree-box">
+						<el-form-item :label="$t('message.list.orgList') + '：'" class="tree-box">
 							<div style="display: flex; height: 100%; width: 100%">
 								<OrgTree ref="orgTreeRef" :check-strictly="false" class="w100" />
 							</div>
@@ -27,8 +27,8 @@
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
-					<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
+					<el-button icon="ele-CircleCloseFilled" @click="cancel">{{ $t('message.list.cancelButtonText') }}</el-button>
-					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
+					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">{{ $t('message.list.confirmButtonText') }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -38,6 +38,7 @@
 <script lang="ts" setup name="sysGrantData">
 import { reactive, ref } from 'vue';
 import OrgTree from '/@/views/system/org/component/orgTree.vue';
+import { useI18n } from 'vue-i18n';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysRoleApi } from '/@/api-services/api';
@@ -45,22 +46,24 @@ import { RoleOrgInput } from '/@/api-services/models';
 
 const emits = defineEmits(['handleQuery']);
 const orgTreeRef = ref();
+const { t } = useI18n();
 const state = reactive({
 	isShowDialog: false,
 	title: '',
 	ruleForm: {} as RoleOrgInput,
 	dataScopeType: [
-		{ value: 1, label: '全部数据' },
+		{ value: 1, label: t('message.list.allData') },
-		{ value: 2, label: '本部门及以下数据' },
+		{ value: 2, label: t('message.list.deptAndBelowData') },
-		{ value: 3, label: '本部门数据' },
+		{ value: 3, label: t('message.list.deptData') },
-		{ value: 4, label: '仅本人数据' },
+		{ value: 4, label: t('message.list.personalData') },
-		{ value: 5, label: '自定义数据' },
+		{ value: 5, label: t('message.list.customData') },
 	],
 });
 
 // 打开弹窗
 const openDialog = async (row: any) => {
-	state.title = '授权角色数据范围【' + row.name + '】';
+	state.title = t('message.list.authRoleDataScopeWithName', { name: row.name });
+
 
 	state.ruleForm = JSON.parse(JSON.stringify(row));
 	var res = await getAPI(SysRoleApi).apiSysRoleOwnOrgListGet(row.id);

Web/src/views/system/role/component/grantMenu.vue

@@ -8,7 +8,7 @@
 				</div>
 			</template>
 			<div>
-				<NoticeBar leftIcon="iconfont icon-tongzhi2" text="非超管角色禁止授权系统核心模块菜单资源！！！" :scrollable="true" style="margin: 5px" />
+				<NoticeBar leftIcon="iconfont icon-tongzhi2" :text="$t('message.list.noAuthForCoreMenu')" :scrollable="true" style="margin: 5px" />
 			</div>
 			<div v-loading="state.loading">
 				<el-tree
@@ -25,8 +25,8 @@
 			</div>
 			<template #footer>
 				<div style="margin-bottom: 20px; margin-right: 20px">
-					<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
+					<el-button icon="ele-CircleCloseFilled" @click="cancel">{{ $t('message.list.cancelButtonText') }}</el-button>
-					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
+					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">{{ $t('message.list.confirmButtonText') }}</el-button>
 				</div>
 			</template>
 		</el-drawer>
@@ -41,6 +41,9 @@ import NoticeBar from '/@/components/noticeBar/index.vue';
 import { getAPI } from '/@/utils/axios-utils';
 import { SysMenuApi, SysRoleApi } from '/@/api-services/api';
 import { SysMenu } from '/@/api-services/models';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const treeRef = ref<InstanceType<typeof ElTree>>();
 const state = reactive({
@@ -57,13 +60,27 @@ onMounted(async () => {
 	state.loading = true;
 	var res = await getAPI(SysMenuApi).apiSysMenuListGet();
 	state.menuData = res.data.result ?? [];
+	recurenceMenuData(state.menuData);
 	state.loading = false;
+
 });
 
+const recurenceMenuData = (menuData: Array<SysMenu>) => {
+	menuData.forEach(item => {
+		item.title = item.i18nName ?? item.title;
+		if (item.children) {
+			recurenceMenuData(item.children);
+		}
+	});
+};
+
+
 // 打开页面
 const openDrawer = async (row: any) => {
+
 	state.roleId = row.id;
-	state.drawerTitle = '授权角色菜单【' + row.name + '】';
+	state.drawerTitle = t('message.list.grantRoleMenuWithName', { name: row.name });
+
 
 	state.loading = true;
 	treeRef.value?.setCheckedKeys([]); // 清空选中值

Web/src/views/system/role/component/grantTable.vue

@@ -8,7 +8,7 @@
 				</div>
 			</template>
 			<div>
-				<NoticeBar leftIcon="iconfont icon-tongzhi2" text="非超管角色禁止授权系统核心模块表格资源！！！" :scrollable="true" style="margin: 5px" />
+				<NoticeBar leftIcon="iconfont icon-tongzhi2" :text="$t('message.list.noAuthForCoreMenu')" :scrollable="true" style="margin: 5px" />
 			</div>
 			<div v-loading="state.loading">
 				<el-tree
@@ -25,8 +25,8 @@
 			</div>
 			<template #footer>
 				<div style="margin-bottom: 20px; margin-right: 20px">
-					<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
+					<el-button icon="ele-CircleCloseFilled" @click="cancel">{{ $t('message.list.cancelButtonText') }}</el-button>
-					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
+					<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">{{ $t('message.list.confirmButtonText') }}</el-button>
 				</div>
 			</template>
 		</el-drawer>
@@ -37,6 +37,7 @@
 import { reactive, onMounted, ref } from 'vue';
 import type { ElTree } from 'element-plus';
 import NoticeBar from '/@/components/noticeBar/index.vue';
+import { useI18n } from 'vue-i18n';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysRoleApi } from '/@/api-services/api';
@@ -52,6 +53,8 @@ const state = reactive({
 	roleTableData: [] as Array<RoleTableOutput>, // 表格字段数据
 });
 
+const { t } = useI18n();
+
 // 页面初始化
 onMounted(async () => {
 	state.loading = true;
@@ -63,7 +66,8 @@ onMounted(async () => {
 // 打开页面
 const openDrawer = async (row: any) => {
 	state.roleId = row.id;
-	state.drawerTitle = '设置角色字段黑名单【' + row.name + '】';
+	state.drawerTitle = t('message.list.setApiBlacklist', { name: row.name });
+
 
 	state.loading = true;
 	treeRef.value?.setCheckedKeys([]); // 清空选中值

Web/src/views/system/tenant/component/grantMenu.vue

@@ -59,9 +59,19 @@ onMounted(async () => {
 	state.loading = true;
 	var res = await getAPI(SysMenuApi).apiSysMenuListGet();
 	state.menuData = res.data.result;
+	recurenceMenuData(state.menuData);
 	state.loading = false;
 });
 
+const recurenceMenuData = (menuData: Array<SysMenu>) => {
+	menuData.forEach(item => {
+		item.title = item.i18nName ?? item.title;
+		if (item.children) {
+			recurenceMenuData(item.children);
+		}
+	});
+};
+
 // 打开弹窗
 const openDialog = async (row: any) => {
 	treeRef.value?.setCheckedKeys([]); // 先清空已选择节点