lhq/FT501-WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

子页面修改国际化显示语言

Browse Source
This commit is contained in:
lsymicc
2025-06-05 18:05:25 +08:00
parent f3c2f3a1ac
commit 95fde513e9
4 changed files with 737 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
ruoyi-ui/src/views/system/menu/index.vue
View File

@@ -1,16 +1,18 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="菜单名称" prop="menuName">
<!-- 菜单名称 -->
<el-form-item :label="$t('systemManagement_MenuManagement.menuName')" prop="menuName">
<el-input
v-model="queryParams.menuName"
placeholder="请输入菜单名称"
:placeholder="$t('systemManagement_MenuManagement.placeholderMenuName')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
<!-- 状态 -->
<el-form-item :label="$t('systemManagement_MenuManagement.status')" prop="status">
<el-select v-model="queryParams.status" :placeholder="$t('systemManagement_MenuManagement.placeholderStatus')" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
@@ -20,13 +22,16 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<!-- 【查询】按钮 -->
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('systemManagement_MenuManagement.btnSearch') }}</el-button>
<!-- 【重置】按钮 -->
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('systemManagement_MenuManagement.btnReset') }}</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<!-- 【新增】按钮 -->
<el-button
type="primary"
plain
@@ -34,16 +39,17 @@
size="mini"
@click="handleAdd"
v-hasPermi="['system:menu:add']"
>新增</el-button>
>{{ $t('systemManagement_MenuManagement.btnAdd') }}</el-button>
</el-col>
<el-col :span="1.5">
<!-- 【展开/折叠】按钮 -->
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
>{{ $t('systemManagement_MenuManagement.btnExpandOrCollapse') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -54,50 +60,60 @@
:data="menuList"
row-key="menuId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
<el-table-column prop="icon" label="图标" align="center" width="100">
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
<!-- 菜单名称 -->
<el-table-column prop="menuName" :label="$t('systemManagement_MenuManagement.menuName')" :show-overflow-tooltip="true" width="160"></el-table-column>
<!-- 图标 -->
<el-table-column prop="icon" :label="$t('systemManagement_MenuManagement.icon')" align="center" width="100">
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon" />
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="status" label="状态" width="80">
<!-- 排序 -->
<el-table-column prop="orderNum" :label="$t('systemManagement_MenuManagement.orderNum')" align="center" width="90"></el-table-column>
<!-- 权限标识 -->
<el-table-column prop="perms" :label="$t('systemManagement_MenuManagement.perms')" :show-overflow-tooltip="true"></el-table-column>
<!-- 组件 -->
<el-table-column prop="component" :label="$t('systemManagement_MenuManagement.componentPath')" :show-overflow-tooltip="true"></el-table-column>
<!-- 状态 -->
<el-table-column prop="status" :label="$t('systemManagement_MenuManagement.status')" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime">
<!-- 创建时间 -->
<el-table-column :label="$t('systemManagement_MenuManagement.createTime')" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!-- 人工操作 -->
<el-table-column :label="$t('systemManagement_MenuManagement.operation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- 人工操作---【修改】按钮 -->
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:menu:edit']"
>修改</el-button>
>{{ $t('systemManagement_MenuManagement.btnEdit') }}</el-button>
<!-- 人工操作---【新增】按钮 -->
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:menu:add']"
>新增</el-button>
>{{ $t('systemManagement_MenuManagement.btnAdd') }}</el-button>
<!-- 人工操作---【删除】按钮 -->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:menu:remove']"
>删除</el-button>
>{{ $t('systemManagement_MenuManagement.btnDelete') }}</el-button>
</template>
</el-table-column>
</el-table>
@@ -107,31 +123,37 @@
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="上级菜单" prop="parentId">
<!-- 上级菜单 -->
<el-form-item :label="$t('systemManagement_MenuManagement.parentMenu')" prop="parentId">
<treeselect
v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="选择上级菜单"
:placeholder="$t('systemManagement_MenuManagement.placeholderParentMenu')"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="菜单类型" prop="menuType">
<!-- 菜单类型 -->
<el-form-item :label="$t('systemManagement_MenuManagement.menuType')" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio label="M">目录</el-radio>
<el-radio label="C">菜单</el-radio>
<el-radio label="F">按钮</el-radio>
<!-- 选项：目录 -->
<el-radio label="M">{{ $t('systemManagement_MenuManagement.menuTypeOptions1') }}</el-radio>
<!-- 选项：菜单 -->
<el-radio label="C">{{ $t('systemManagement_MenuManagement.menuTypeOptions2') }}</el-radio>
<!-- 选项：按钮 -->
<el-radio label="F">{{ $t('systemManagement_MenuManagement.menuTypeOptions3') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item label="菜单图标" prop="icon">
<!-- 菜单名称 -->
<el-form-item :label="$t('systemManagement_MenuManagement.menuIcon')" prop="icon">
<el-popover
placement="bottom-start"
width="460"
@@ -139,7 +161,8 @@
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
<!-- 选择菜单图标 -->
<el-input slot="reference" v-model="form.icon" :placeholder="$t('systemManagement_MenuManagement.placeholderMenuIcon')" readonly>
<svg-icon
v-if="form.icon"
slot="prefix"
@@ -152,25 +175,29 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<!-- 显示排序 -->
<el-form-item :label="$t('systemManagement_MenuManagement.orderNum')" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="菜单名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
<!-- 菜单名称 -->
<el-form-item :label="$t('systemManagement_MenuManagement.menuName')" prop="menuName">
<el-input v-model="form.menuName" :placeholder="$t('systemManagement_MenuManagement.placeholderMenuName')" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType == 'C'">
<!-- 路由名称 -->
<el-form-item prop="routeName">
<el-input v-model="form.routeName" placeholder="请输入路由名称" />
<el-input v-model="form.routeName" :placeholder="$t('systemManagement_MenuManagement.placeholderRouterName')" />
<span slot="label">
<el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
<!-- 文本：默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：为避免名字的冲突，特殊情况下请自定义，保证唯一性） -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textRouterName')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
路由名称
{{ $t('systemManagement_MenuManagement.routerName') }}
</span>
</el-form-item>
</el-col>
@@ -178,50 +205,63 @@
<el-row>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="isFrame">
<!-- 内外链选择框 -->
<span slot="label">
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
<!-- 文本：选择是外链则路由地址需要以`http(s)://`开头 -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textIsFrame')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
是否外链
{{ $t('systemManagement_MenuManagement.isFrame') }}
</span>
<el-radio-group v-model="form.isFrame">
<el-radio label="0">是</el-radio>
<el-radio label="1">否</el-radio>
<!-- 选项：是 -->
<el-radio label="0">{{ $t('systemManagement_MenuManagement.isFrameOptions1') }}</el-radio>
<!-- 选项：否 -->
<el-radio label="1">{{ $t('systemManagement_MenuManagement.isFrameOptions2') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="path">
<!-- 路由地址 -->
<span slot="label">
<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
<!-- 文本：路由地址：如地址为`user`，则路由地址为`/system/user`（注意：为避免名字的冲突，特殊情况下请自定义，保证唯一性） -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textRouterPath')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
路由地址
{{ $t('systemManagement_MenuManagement.routerPath') }}
</span>
<el-input v-model="form.path" placeholder="请输入路由地址" />
<!-- 提示：请输入路由地址 -->
<el-input v-model="form.path" :placeholder="$t('systemManagement_MenuManagement.placeholderRouterPath')" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="component">
<!-- 组件路径 -->
<span slot="label">
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
<!-- 文本：访问的组件路径，如：`system/user/index`，默认在`views`目录下 -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textComponentPath')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
组件路径
{{ $t('systemManagement_MenuManagement.componentPath') }}
</span>
<el-input v-model="form.component" placeholder="请输入组件路径" />
<!-- 提示：请输入组件路径 -->
<el-input v-model="form.component" :placeholder="$t('systemManagement_MenuManagement.placeholderComponentPath')" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'M'">
<el-form-item prop="perms">
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
<!-- 权限标识 -->
<el-input v-model="form.perms" :placeholder="$t('systemManagement_MenuManagement.placeholderPerms')" maxlength="100" />
<!-- 权限字符 -->
<span slot="label">
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
<!-- 文本：控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`) -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textPerms')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
{{ $t('systemManagement_MenuManagement.perms') }}
</span>
</el-form-item>
</el-col>
@@ -229,26 +269,33 @@
<el-row>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="query">
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
<!-- 提示：请输入路由参数 -->
<el-input v-model="form.query" :placeholder="$t('systemManagement_MenuManagement.placeholderParams')" maxlength="255" />
<!-- 路由参数 -->
<span slot="label">
<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
<!-- 文本：访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}` -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textRouterParams')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
路由参数
{{ $t('systemManagement_MenuManagement.routerParams') }}
</span>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="isCache">
<!-- 是否缓存 -->
<span slot="label">
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
<!-- 文本：选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致 -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textIsCache')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
是否缓存
{{ $t('systemManagement_MenuManagement.isCache') }}
</span>
<el-radio-group v-model="form.isCache">
<el-radio label="0">缓存</el-radio>
<el-radio label="1">不缓存</el-radio>
<!-- 选项：是 -->
<el-radio label="0">{{ $t('systemManagement_MenuManagement.isCacheOptions1') }}</el-radio>
<!-- 选项：否 -->
<el-radio label="1">{{ $t('systemManagement_MenuManagement.isCacheOptions2') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@@ -256,11 +303,13 @@
<el-row>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="visible">
<!-- 显示状态 -->
<span slot="label">
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
<!-- 文本：选择隐藏则路由将不会出现在侧边栏，但仍然可以访问 -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textIsVisible')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
显示状态
{{ $t('systemManagement_MenuManagement.isVisible') }}
</span>
<el-radio-group v-model="form.visible">
<el-radio
@@ -273,11 +322,13 @@
</el-col>
<el-col :span="12">
<el-form-item prop="status">
<!-- 状态 -->
<span slot="label">
<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
<!-- 文本：选择停用则路由将不会出现在侧边栏，也不能被访问 -->
<el-tooltip :content="$t('systemManagement_MenuManagement.textStatus')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
菜单状态
{{ $t('systemManagement_MenuManagement.status') }}
</span>
<el-radio-group v-model="form.status">
<el-radio
@@ -291,8 +342,10 @@
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<!-- 二级窗口---【确定】按钮 -->
<el-button type="primary" @click="submitForm">{{ $t('systemManagement_MenuManagement.btnSubmit') }}</el-button>
<!-- 二级窗口---【取消】按钮 -->
<el-button @click="cancel">{{ $t('systemManagement_MenuManagement.btnCancel') }}</el-button>
</div>
</el-dialog>
</div>
@@ -336,13 +389,16 @@ export default {
// 表单校验
rules: {
menuName: [
{ required: true, message: "菜单名称不能为空", trigger: "blur" }
// 校验：菜单名称不能为空
{ required: true, message: this.$t('systemManagement_MenuManagement.checkMenuNameIsNull'), trigger: "blur" }
],
orderNum: [
{ required: true, message: "菜单顺序不能为空", trigger: "blur" }
// 校验：菜单顺序不能为空
{ required: true, message: this.$t('systemManagement_MenuManagement.checkOrderNumIsNull'), trigger: "blur" }
],
path: [
{ required: true, message: "路由地址不能为空", trigger: "blur" }
// 校验：路由地址不能为空
{ required: true, message: this.$t('systemManagement_MenuManagement.checkRouterPathIsNull'), trigger: "blur" }
]
}
}
@@ -359,6 +415,7 @@ export default {
getList() {
this.loading = true
listMenu(this.queryParams).then(response => {
// 国际化菜单名称
for (const item of response.data) {
item.menuName = this.$t(item.menuName)
}
@@ -381,11 +438,27 @@ export default {
getTreeselect() {
listMenu().then(response => {
this.menuOptions = []
const menu = { menuId: 0, menuName: '主类目', children: [] }
// 主类目
const menu = { menuId: 0, menuName: this.$t('systemManagement_MenuManagement.MainTitle'), children: [] }
menu.children = this.handleTree(response.data, "menuId")
this.menuOptions.push(menu)
console.log(response.data)
console.log(this.menuOptions)
// 国际化菜单名称
// const translatedData = this.translateMenuLabels(response.data);
// this.menuOptions = translatedData
})
},
//@@@
// translateMenuLabels(data) {
// return data.map(item => ({
// ...item,
// label: this.$t(item.label),
// children: item.children ? this.translateMenuLabels(item.children) : []
// }));
// },
// 取消按钮
cancel() {
this.open = false
@@ -426,7 +499,8 @@ export default {
this.form.parentId = 0
}
this.open = true
this.title = "添加菜单"
// 设置标题: 添加菜单
this.title = this.$t('systemManagement_MenuManagement.addMenuItem')
},
/** 展开/折叠操作 */
toggleExpandAll() {
@@ -443,7 +517,8 @@ export default {
getMenu(row.menuId).then(response => {
this.form = response.data
this.open = true
this.title = "修改菜单"
// 设置标题: 修改菜单
this.title = this.$t('systemManagement_MenuManagement.editMenuItem')
})
},
/** 提交按钮 */
@@ -452,13 +527,15 @@ export default {
if (valid) {
if (this.form.menuId != undefined) {
updateMenu(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
// 提示：修改成功
this.$modal.msgSuccess(this.$t('systemManagement_MenuManagement.editSuccessInfo'))
this.open = false
this.getList()
})
} else {
addMenu(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
// 提示：新增成功
this.$modal.msgSuccess(this.$t('systemManagement_MenuManagement.addSuccessInfo'))
this.open = false
this.getList()
})
@@ -468,11 +545,12 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
this.$modal.confirm(this.$t('systemManagement_MenuManagement.txtDeleteConfirm1') + row.menuName + this.$t('systemManagement_MenuManagement.txtDeleteConfirm2')).then(function() {
return delMenu(row.menuId)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
// 提示：删除成功
this.$modal.msgSuccess(this.$t('systemManagement_MenuManagement.deleteSuccessInfo'))
}).catch(() => {})
}
}

226
ruoyi-ui/src/views/system/role/index.vue
View File

@@ -1,28 +1,31 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="角色名称" prop="roleName">
<!-- 角色名称 -->
<el-form-item :label="$t('systemManagement_RoleManagement.roleName')" prop="roleName">
<el-input
v-model="queryParams.roleName"
placeholder="请输入角色名称"
:placeholder="$t('systemManagement_RoleManagement.placeholderRoleName')"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="权限字符" prop="roleKey">
<!-- 权限字符 -->
<el-form-item :label="$t('systemManagement_RoleManagement.roleKey')" prop="roleKey">
<el-input
v-model="queryParams.roleKey"
placeholder="请输入权限字符"
:placeholder="$t('systemManagement_RoleManagement.placeholderRoleKey')"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<!-- 角色状态 -->
<el-form-item :label="$t('systemManagement_RoleManagement.status')" prop="status">
<el-select
v-model="queryParams.status"
placeholder="角色状态"
:placeholder="$t('systemManagement_RoleManagement.placeholderStatus')"
clearable
style="width: 240px"
>
@@ -34,25 +37,29 @@
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<!-- 创建时间 -->
<el-form-item :label="$t('systemManagement_RoleManagement.createTime')">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:start-placeholder="$t('systemManagement_RoleManagement.placeholderDateStart')"
:end-placeholder="$t('systemManagement_RoleManagement.placeholderDateEnd')"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<!-- 【搜索】按钮 -->
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('systemManagement_RoleManagement.btnSearch') }}</el-button>
<!-- 【重置】按钮 -->
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('systemManagement_RoleManagement.btnReset') }}</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<!-- 【新增】按钮 -->
<el-button
type="primary"
plain
@@ -60,9 +67,10 @@
size="mini"
@click="handleAdd"
v-hasPermi="['system:role:add']"
>新增</el-button>
>{{ $t('systemManagement_RoleManagement.btnAdd') }}</el-button>
</el-col>
<el-col :span="1.5">
<!-- 【修改】按钮 -->
<el-button
type="success"
plain
@@ -71,9 +79,10 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:role:edit']"
>修改</el-button>
>{{ $t('systemManagement_RoleManagement.btnEdit') }}</el-button>
</el-col>
<el-col :span="1.5">
<!-- 【删除】按钮 -->
<el-button
type="danger"
plain
@@ -82,9 +91,10 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:role:remove']"
>删除</el-button>
>{{ $t('systemManagement_RoleManagement.btnDelete') }}</el-button>
</el-col>
<el-col :span="1.5">
<!-- 【导出】按钮 -->
<el-button
type="warning"
plain
@@ -92,18 +102,23 @@
size="mini"
@click="handleExport"
v-hasPermi="['system:role:export']"
>导出</el-button>
>{{ $t('systemManagement_RoleManagement.btnExport') }}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column label="状态" align="center" width="100">
<!-- 角色编号 -->
<el-table-column :label="$t('systemManagement_RoleManagement.roleId')" prop="roleId" width="120" />
<!-- 角色名称 -->
<el-table-column :label="$t('systemManagement_RoleManagement.roleName')" prop="roleName" :show-overflow-tooltip="true" width="150" />
<!-- 角色权限字符 -->
<el-table-column :label="$t('systemManagement_RoleManagement.roleKey')" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<!-- 显示顺序 -->
<el-table-column :label="$t('systemManagement_RoleManagement.roleSort')" prop="roleSort" width="100" />
<!-- 状态 -->
<el-table-column :label="$t('systemManagement_RoleManagement.status')" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
@@ -113,34 +128,41 @@
></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<!-- 创建时间 -->
<el-table-column :label="$t('systemManagement_RoleManagement.createTime')" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!-- 人工操作 -->
<el-table-column :label="$t('systemManagement_RoleManagement.operation')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<!-- 人工操作---【修改】按钮 -->
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
>修改</el-button>
>{{ $t('systemManagement_RoleManagement.btnEdit') }}</el-button>
<!-- 人工操作---【删除】按钮 -->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:role:remove']"
>删除</el-button>
>{{ $t('systemManagement_RoleManagement.btnDelete') }}</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<!-- 人工操作---【更多】按钮 -->
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">{{ $t('systemManagement_RoleManagement.btnMore') }}</el-button>
<el-dropdown-menu slot="dropdown">
<!-- 人工操作---【数据权限】按钮 -->
<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
v-hasPermi="['system:role:edit']">{{ $t('systemManagement_RoleManagement.btnDataPermission') }}</el-dropdown-item>
<!-- 人工操作---【分配用户】按钮 -->
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
v-hasPermi="['system:role:edit']">{{ $t('systemManagement_RoleManagement.btnAssignRole') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
@@ -158,22 +180,28 @@
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
<!-- 角色名称 -->
<el-form-item :label="$t('systemManagement_RoleManagement.roleName')" prop="roleName">
<el-input v-model="form.roleName" :placeholder="$t('systemManagement_RoleManagement.placeholderRoleName')" />
</el-form-item>
<!-- 角色权限字符 -->
<el-form-item prop="roleKey">
<span slot="label">
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
<!-- 角色权限字符：提示 -->
<el-tooltip :content="$t('systemManagement_RoleManagement.roleKeyContent')" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
<!-- 角色权限字符：文本 -->
{{ $t('systemManagement_RoleManagement.roleKey') }}
</span>
<el-input v-model="form.roleKey" placeholder="请输入权限字符" />
<el-input v-model="form.roleKey" :placeholder="$t('systemManagement_RoleManagement.placeholderRoleName')" />
</el-form-item>
<el-form-item label="角色顺序" prop="roleSort">
<!-- 角色顺序 -->
<el-form-item :label="$t('systemManagement_RoleManagement.roleSort')" prop="roleSort">
<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态">
<!-- 状态 -->
<el-form-item :label="$t('systemManagement_RoleManagement.status')">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
@@ -182,10 +210,15 @@
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<!-- 菜单权限复选框 -->
<el-form-item :label="$t('systemManagement_RoleManagement.menuAccess')">
<!-- 菜单权限：展开/折叠 -->
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">{{ $t('systemManagement_RoleManagement.cbxExpandOrCollapse') }}</el-checkbox>
<!-- 菜单权限：全选/全不选 -->
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">{{ $t('systemManagement_RoleManagement.cbxAllOrNone') }}</el-checkbox>
<!-- 菜单权限：父子联动 -->
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">{{ $t('systemManagement_RoleManagement.cbxInherite') }}</el-checkbox>
<!-- 提示：加载中，请稍候 -->
<el-tree
class="tree-border"
:data="menuOptions"
@@ -193,30 +226,36 @@
ref="menu"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍候"
:empty-text="$t('systemManagement_RoleManagement.txtLoading')"
:props="defaultProps"
></el-tree>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
<!-- 备注&请输入内容 -->
<el-form-item :label="$t('systemManagement_RoleManagement.remark')">
<el-input v-model="form.remark" type="textarea" :placeholder="$t('systemManagement_RoleManagement.tbxRemark')"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
<!-- 二级窗口---【确定】按钮 -->
<el-button type="primary" @click="submitForm">{{ $t('systemManagement_RoleManagement.btnSubmit') }}</el-button>
<!-- 二级窗口---【取消】按钮 -->
<el-button @click="cancel">{{ $t('systemManagement_RoleManagement.btnCancel') }}</el-button>
</div>
</el-dialog>
<!-- 分配角色数据权限对话框 -->
<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<!-- 角色名称 -->
<el-form-item :label="$t('systemManagement_RoleManagement.roleName')">
<el-input v-model="form.roleName" :disabled="true" />
</el-form-item>
<el-form-item label="权限字符">
<!-- 角色权限字符 -->
<el-form-item :label="$t('systemManagement_RoleManagement.roleKey')">
<el-input v-model="form.roleKey" :disabled="true" />
</el-form-item>
<el-form-item label="权限范围">
<!-- 权限范围/数据权限 -->
<el-form-item :label="$t('systemManagement_RoleManagement.dataScope')">
<el-select v-model="form.dataScope" @change="dataScopeSelectChange">
<el-option
v-for="item in dataScopeOptions"
@@ -226,10 +265,15 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope == 2">
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
<!-- 数据权限 -->
<el-form-item :label="$t('systemManagement_RoleManagement.dataScope')" v-show="form.dataScope == 2">
<!-- 标签文本：展开/折叠 -->
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">{{ $t('systemManagement_RoleManagement.cbxExpandOrCollapse') }}</el-checkbox>
<!-- 标签文本：全选/全不选 -->
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">{{ $t('systemManagement_RoleManagement.cbxAllOrNone') }}</el-checkbox>
<!-- 标签文本：父子联动 -->
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">{{ $t('systemManagement_RoleManagement.cbxInherite') }}</el-checkbox>
<!-- 提示：加载中，请稍候 -->
<el-tree
class="tree-border"
:data="deptOptions"
@@ -238,14 +282,16 @@
ref="dept"
node-key="id"
:check-strictly="!form.deptCheckStrictly"
empty-text="加载中，请稍候"
:empty-text="$t('systemManagement_RoleManagement.txtLoading')"
:props="defaultProps"
></el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitDataScope">确 定</el-button>
<el-button @click="cancelDataScope">取 消</el-button>
<!-- 二级窗口---【确定】按钮 -->
<el-button type="primary" @click="submitDataScope">{{ $t('systemManagement_RoleManagement.btnSubmit') }}</el-button>
<!-- 二级窗口---【取消】按钮 -->
<el-button @click="cancelDataScope">{{ $t('systemManagement_RoleManagement.btnCancel') }}</el-button>
</div>
</el-dialog>
</div>
@@ -290,23 +336,28 @@ export default {
dataScopeOptions: [
{
value: "1",
label: "全部数据权限"
// label: "全部数据权限",
label: this.$t('systemManagement_RoleManagement.lblDataScopeOption1')
},
{
value: "2",
label: "自定数据权限"
// label: "自定数据权限",
label: this.$t('systemManagement_RoleManagement.lblDataScopeOption2')
},
{
value: "3",
label: "本部门数据权限"
// label: "本部门数据权限",
label: this.$t('systemManagement_RoleManagement.lblDataScopeOption3')
},
{
value: "4",
label: "本部门及以下数据权限"
// label: "本部门及以下数据权限",
label: this.$t('systemManagement_RoleManagement.lblDataScopeOption4')
},
{
value: "5",
label: "仅本人数据权限"
// label: "仅本人数据权限",
label: this.$t('systemManagement_RoleManagement.lblDataScopeOption5')
}
],
// 菜单列表
@@ -330,13 +381,16 @@ export default {
// 表单校验
rules: {
roleName: [
{ required: true, message: "角色名称不能为空", trigger: "blur" }
// 角色名称不能为空
{ required: true, message: this.$t('systemManagement_RoleManagement.checkRoleNameIsNull'), trigger: "blur" }
],
roleKey: [
{ required: true, message: "权限字符不能为空", trigger: "blur" }
// 权限字符不能为空
{ required: true, message: this.$t('systemManagement_RoleManagement.checkRoleKeyIsNull'), trigger: "blur" }
],
roleSort: [
{ required: true, message: "角色顺序不能为空", trigger: "blur" }
// 角色顺序不能为空
{ required: true, message: this.$t('systemManagement_RoleManagement.checkRoleSortIsNull'), trigger: "blur" }
]
}
}
@@ -358,9 +412,25 @@ export default {
/** 查询菜单树结构 */
getMenuTreeselect() {
menuTreeselect().then(response => {
this.menuOptions = response.data
// 国际化菜单名称
// let listMenu = response.data.map(item => {
// return this.$t(item.label); // 只提取翻译后的 label
// });
const translatedData = this.translateMenuLabels(response.data);
// this.menuOptions = response.data
// this.menuOptions = listMenu
this.menuOptions = translatedData
})
},
//@@@
translateMenuLabels(data) {
return data.map(item => ({
...item,
label: this.$t(item.label),
children: item.children ? this.translateMenuLabels(item.children) : []
}));
},
// 所有菜单节点数据
getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
@@ -395,11 +465,14 @@ export default {
},
// 角色状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用"
this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
// 角色状态：0-启用，1-停用
let text = row.status === "0" ? this.$t('systemManagement_RoleManagement.textEnable') : this.$t('systemManagement_RoleManagement.textDisable')
// 文本：确认修改角色状态
this.$modal.confirm(this.$t('systemManagement_RoleManagement.textUserConfirm1') + text + '""' + row.roleName + this.$t('systemManagement_RoleManagement.textUserConfirm2')).then(function() {
return changeRoleStatus(row.roleId, row.status)
}).then(() => {
this.$modal.msgSuccess(text + "成功")
// 提示文本：修改角色状态【成功】
this.$modal.msgSuccess(text + this.$t('systemManagement_RoleManagement.textSuccess'))
}).catch(function() {
row.status = row.status === "0" ? "1" : "0"
})
@@ -502,7 +575,7 @@ export default {
this.reset()
this.getMenuTreeselect()
this.open = true
this.title = "添加角色"
this.title = this.$t('systemManagement_RoleManagement.addRoleItem')
},
/** 修改按钮操作 */
handleUpdate(row) {
@@ -523,7 +596,7 @@ export default {
})
})
})
this.title = "修改角色"
this.title = this.$t('systemManagement_RoleManagement.editRoleItem')
},
/** 选择角色权限范围触发 */
dataScopeSelectChange(value) {
@@ -544,7 +617,7 @@ export default {
})
})
})
this.title = "分配数据权限"
this.title = this.$t('systemManagement_RoleManagement.AssignDataPermission')
},
/** 分配用户操作 */
handleAuthUser: function(row) {
@@ -558,14 +631,16 @@ export default {
if (this.form.roleId != undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys()
updateRole(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
// 提示文本：修改成功
this.$modal.msgSuccess(this.$t('systemManagement_RoleManagement.editSuccessInfo'))
this.open = false
this.getList()
})
} else {
this.form.menuIds = this.getMenuAllCheckedKeys()
addRole(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
// 提示文本：新增成功
this.$modal.msgSuccess(this.$t('systemManagement_RoleManagement.addSuccessInfo'))
this.open = false
this.getList()
})
@@ -578,7 +653,8 @@ export default {
if (this.form.roleId != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys()
dataScope(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
// 提示文本：修改成功
this.$modal.msgSuccess(this.$t('systemManagement_RoleManagement.editSuccessInfo'))
this.openDataScope = false
this.getList()
})
@@ -587,11 +663,13 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.roleId || this.ids
this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
// 文本提示：是否删除角色编号为" + roleIds + "的数据项？
this.$modal.confirm(this.$t('systemManagement_RoleManagement.textDeleteConfirm1') + roleIds + this.$t('systemManagement_RoleManagement.textDeleteConfirm2')).then(function() {
return delRole(roleIds)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
// 提示文本：删除成功
this.$modal.msgSuccess(this.$t('systemManagement_RoleManagement.deleteSuccessInfo'))
}).catch(() => {})
},
/** 导出按钮操作 */