<template>
|
<div class="app">
|
<!--面包屑导航区域-->
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/home' }">{{$t('langHome')}}</el-breadcrumb-item>
|
<el-breadcrumb-item>{{$t('langRoleManagement')}}</el-breadcrumb-item>
|
<el-breadcrumb-item>{{$t('langRoleList')}}</el-breadcrumb-item>
|
</el-breadcrumb>
|
<!--卡片视图区域-->
|
<el-card class="el-card">
|
<el-row :gutter="20">
|
<!--搜索与添加区域-->
|
<el-col :span="6">
|
<el-input :placeholder="$t('langEnterRoleName')" v-model="queryInfo.name" clearable @clear="getRoleList()">
|
<el-button slot="append" icon="el-icon-search" @click="getRoleList()"></el-button>
|
</el-input>
|
</el-col>
|
<!--添加区域-->
|
<el-col :span="4">
|
<el-button type="primary" @click="showAddDialog">{{$t('langAddRole')}}</el-button>
|
</el-col>
|
</el-row>
|
<!--角色列表区域-->
|
<el-table :data="roleList.records" border stripe>
|
<el-table-column label="#" type="index"></el-table-column>
|
<el-table-column :label="$t('langRoleName')" prop="name"></el-table-column>
|
<el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column>
|
<el-table-column :label="$t('langIsValid')">
|
<template slot-scope="scope">
|
<el-switch :active-value=1
|
:inactive-value=0
|
v-model="scope.row.state"
|
@change="stateChange(scope.row)">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column :label="$t('langOperation')">
|
<template slot-scope="scope">
|
<!-- 修改 -->
|
<el-tooltip effect="dark" :content="$t('langEdit')" placement="top" :enterable="false">
|
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
|
|
</el-tooltip>
|
<el-tooltip effect="dark" :content="$t('permission update')" placement="top" :enterable="false">
|
|
<el-button type="primary" size="mini" @click="showPermissionDialog(scope.row)">{{$t('permission update')}}</el-button>
|
</el-tooltip>
|
<!-- 删除 -->
|
<el-tooltip effect="dark" :content="$t('langDelete')" placement="top" :enterable="false">
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row)"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!--分页区域-->
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="queryInfo.pageNum"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="queryInfo.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="roleList.total">
|
</el-pagination>
|
</el-card>
|
<!--添加角色的对话框-->
|
<el-dialog
|
:title="$t('langAddRole')"
|
:visible.sync="addDialogVisible"
|
width="50%"
|
@close="addDialogClosed">
|
<!--内容主体区域-->
|
<el-form :model="addRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px">
|
<el-form-item :label="$t('langRoleName')" prop="name">
|
<el-input v-model="addRoleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langState')" prop="state">
|
<el-select v-model="addRoleForm.state" placeholder="$t('langPleaseSelect')">
|
<el-option v-for="(item,index) in options"
|
:key="index"
|
:value="item.value"
|
:label="item.label">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addDialogVisible = false">{{$t('langCancel')}}</el-button>
|
<el-button type="primary" @click="addRole">{{$t('langConfirm')}}</el-button>
|
</span>
|
</el-dialog>
|
<!--修改角色的对话框-->
|
<el-dialog :title="$t('langEditRole')" :visible.sync="editDialogVisible" width="50%">
|
<!-- 内容主体区域 -->
|
<el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px">
|
<el-form-item :label="$t('langRoleName')" prop="name">
|
<el-input v-model="editRoleForm.name"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('langState')" prop="state">
|
<el-select v-model="editRoleForm.state" placeholder="$t('langPleaseSelect')">
|
<el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"></el-option>
|
</el-select>
|
</el-form-item>
|
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="editDialogVisible = false">{{$t('langCancel')}}</el-button>
|
<el-button type="primary" @click="editRoleInfo">{{$t('langConfirm')}}</el-button>
|
</span>
|
</el-dialog>
|
|
|
<el-dialog :title="$t('langEditPermissions')" :visible.sync="permissionDialogVisible">
|
<el-form label-width="130px">
|
<el-form-item :label="$t('langPermissions')" prop="permissionList">
|
<el-checkbox-group v-model="selectedPermissions">
|
<el-checkbox
|
v-for="(permission, index) in permissionList"
|
:key="index"
|
:label="permission.name"
|
@change="updatePermissionState(permission.name, $event)"
|
>{{ permission.name }}</el-checkbox>
|
</el-checkbox-group>
|
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="cancelEditPermissions">{{$t('langCancel')}}</el-button>
|
<el-button type="primary" @click="savePermissions">{{$t('langConfirm')}}</el-button>
|
</span>
|
</el-dialog>
|
|
|
|
|
</div>
|
</template>
|
|
<script>
|
import {getById, removeById, saveOrUpdate, selectPage} from "../../api/role";
|
import {getById2} from "../../api/rolePermission";
|
import {saveOrUpdate2} from "../../api/rolePermission";
|
|
import LanguageMixin from '../../lang/LanguageMixin';
|
export default {
|
name: "Role",
|
mixins: [LanguageMixin],
|
|
data() {
|
return {
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 10
|
},
|
roleList: {
|
records: [],
|
total: 0
|
},
|
// 控制添加角色弹框的显示和隐藏
|
addDialogVisible: false,
|
// 控制修改角色对话框的显示与隐藏
|
editDialogVisible: false,
|
|
// 添加的角色对象
|
addRoleForm: {
|
state: 1
|
},
|
|
// 修改的角色对象
|
editRoleForm: {
|
|
},
|
|
permissionList: [],
|
permissionDialogVisible: false,
|
selectedPermissions: [] ,// 添加selectedPermissions数组变量
|
|
// 添加角色的验证规则
|
addRoleRules: {
|
name: [
|
{required: true, message: this.$t('请输入名称'), trigger: 'blur'},
|
{min: 2, max: 15, message: this.$t('长度在 2 到 15 个字符'), trigger: 'blur'}
|
],
|
state: [
|
{required: true, message: this.$t('请输入状态'), trigger: 'blur'}
|
]
|
},
|
options: [
|
{label: this.$t('有效'), value: 1},
|
{label: this.$t('无效'), value: 0}
|
]
|
}
|
},
|
created() {
|
this.getRoleList();
|
},
|
methods: {
|
getRoleList() {
|
selectPage(this.queryInfo).then(res => {
|
this.roleList.total = res.data.total;
|
this.roleList.records = res.data.records;
|
});
|
},
|
// 监听pageSize改变的事件
|
handleSizeChange(newSize) {
|
this.queryInfo.pageSize = newSize;
|
this.getRoleList()
|
},
|
// 监听pageNum改变的事件
|
handleCurrentChange(newPage) {
|
this.queryInfo.pageNum = newPage;
|
this.getRoleList()
|
},
|
stateChange(info) {
|
saveOrUpdate(info).then(() => {
|
const 更新状态成功 = this.$t('更新状态成功');
|
this.$message.success(更新状态成功);
|
|
});
|
},
|
// 监听添加角色对话框的关闭事件
|
addDialogClosed() {
|
this.$refs['addRoleRef'].resetFields();
|
},
|
// 点击按钮添加新角色
|
addRole() {
|
this.$refs.addRoleRef.validate(async valid => {
|
if (!valid) return;
|
// 发起添加角色的网络请求
|
saveOrUpdate(this.addRoleForm).then(() => {
|
// 重新获取角色列表
|
this.getRoleList();
|
// 隐藏添加角色对话框
|
this.addDialogVisible = false;
|
const 添加角色成功 = this.$t('添加角色成功');
|
this.$message.success(添加角色成功);
|
});
|
})
|
},
|
// 展示修改角色的对话框
|
showEditDialog(role) {
|
getById({id: role.id}).then(res => {
|
this.editRoleForm = res.data;
|
|
|
|
});
|
|
|
this.editDialogVisible = true;
|
},
|
|
|
// 在 showPermissionDialog 方法中，只将选中的权限名称添加到 selectedPermissions 数组中
|
showPermissionDialog(role) {
|
this.selectedPermissions = [];
|
this.permissionList = [];
|
|
getById2({ roleId: role.id }).then((res) => {
|
this.permissionList = res.data.permissionList;
|
// 只有状态为 1 的权限名称会被添加到 selectedPermissions 数组中
|
this.selectedPermissions = this.permissionList
|
.filter(permission => permission.state === 1)
|
.map(permission => permission.name);
|
this.permissionDialogVisible = true;
|
});
|
},
|
|
// 在 updatePermissionState 方法中，根据复选框的勾选状态更新 selectedPermissions 数组
|
// updatePermissionState(name, isChecked) {
|
// if (isChecked) {
|
// // 如果复选框被勾选，将权限名称添加到数组中
|
// if (!this.selectedPermissions.includes(name)) {
|
// this.selectedPermissions.push(name);
|
// }
|
// } else {
|
// // 如果复选框被取消勾选，将权限名称从数组中移除
|
// const index = this.selectedPermissions.indexOf(name);
|
// if (index !== -1) {
|
// this.selectedPermissions.splice(index, 1);
|
// }
|
// }
|
// },
|
|
// 取消编辑权限弹出框
|
cancelEditPermissions() {
|
this.permissionDialogVisible = false;
|
},
|
// 保存权限修改
|
updatePermissionState(name, isChecked) {
|
const permission = this.permissionList.find(p => p.name === name);
|
if (permission) {
|
permission.state = isChecked ? 1 : 0;
|
}
|
|
},
|
|
|
|
savePermissions() {
|
const permissions = this.permissionList.map(({ roleId, name, state, permission_id }) => ({
|
roleId,
|
name,
|
state,
|
permission_id
|
}));
|
|
saveOrUpdate2({ permissions }).then(() => {
|
// 成功更新权限后执行的操作
|
const 更新状态成功 = this.$t('更新状态成功');
|
this.$message.success(更新状态成功);
|
this.permissionDialogVisible = false;
|
});
|
},
|
// 展示添加角色的对话框
|
showAddDialog() {
|
this.addDialogVisible = true;
|
},
|
// 修改角色信息并提交
|
editRoleInfo() {
|
this.$refs.addRoleRef.validate(async valid => {
|
if (!valid) return;
|
// 发起修改角色的网络请求
|
saveOrUpdate(this.editRoleForm).then(() => {
|
// 重新获取角色列表
|
this.getRoleList();
|
// 隐藏添加角色对话框
|
this.editDialogVisible = false;
|
const 修改角色成功 = this.$t('修改角色成功');
|
this.$message.success(修改角色成功);
|
});
|
})
|
},
|
// 根据id删除角色信息
|
removeById(role) {
|
// 弹框询问用户是否删除角色
|
const 此操作将永久删除该角色是否继续 = this.$t('此操作将永久删除该角色, 是否继续?');
|
const 提示 = this.$t('提示');
|
const 确定 = this.$t('确定');
|
const 取消 = this.$t('取消');
|
this.$confirm(此操作将永久删除该角色是否继续, 提示, {
|
confirmButtonText: 确定,
|
cancelButtonText: 取消,
|
type: 'warning'
|
}).then(() => {
|
// 删除角色
|
removeById({id: role.id}).then(() => {
|
// 重新获取角色列表
|
this.getRoleList();
|
const 删除角色成功 = this.$t('删除角色成功');
|
this.$message.success(删除角色成功);
|
});
|
}).catch(() => {
|
const 已取消删除 = this.$t('已取消删除');
|
this.$message(已取消删除);
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.el-table {
|
margin-top: 15px;
|
font-size: 12px;
|
}
|
|
.el-pagination {
|
margin-top: 15px;
|
}
|
|
.app .el-card {
|
width: 99%;
|
}
|
</style>
|
