<template>
|
<div class="app">
|
<!--面包屑导航区域-->
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/home' }">{{$t('breadcrumb.home')}}</el-breadcrumb-item>
|
<el-breadcrumb-item>{{$t('breadcrumb.permissionManagement')}}</el-breadcrumb-item>
|
<el-breadcrumb-item>{{$t('breadcrumb.permissionList')}}</el-breadcrumb-item>
|
</el-breadcrumb>
|
<!--卡片视图区域-->
|
<el-card class="el-card">
|
<el-row :gutter="20">
|
<!--搜索与添加区域-->
|
<el-col :span="6">
|
<el-input :placeholder="$t('search.placeholder')" v-model="queryInfo.name" clearable @clear="getPowerList()">
|
<el-button slot="append" icon="el-icon-search" @click="getPowerList()"></el-button>
|
</el-input>
|
</el-col>
|
<!--添加区域-->
|
<el-col :span="4">
|
<el-button type="primary" @click="showAddDialog">{{$t('button.addPermission')}}</el-button>
|
</el-col>
|
</el-row>
|
<!--权限列表区域-->
|
<el-table :data="powerList.records" border stripe>
|
<el-table-column label="#" type="index"></el-table-column>
|
<el-table-column :label="$t('table.role')" prop="role.name"></el-table-column>
|
<el-table-column :label="$t('table.permissionDescription')" prop="permission.description"></el-table-column>
|
<el-table-column :label="$t('table.permissionValue')" prop="permission.name"></el-table-column>
|
<el-table-column :label="$t('table.createTime')" prop="createTime"></el-table-column>
|
<el-table-column :label="$t('table.isActive')">
|
<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('table.operation')">
|
<template slot-scope="scope">
|
<!--修改-->
|
<el-tooltip effect="dark" :content="$t('tooltip.edit')" 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('tooltip.delete')" 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="[6, 12, 18, 24]"
|
:page-size="queryInfo.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="powerList.total">
|
</el-pagination>
|
</el-card>
|
<!--添加权限的对话框-->
|
<el-dialog
|
:title="$t('dialog.addPermission')"
|
:visible.sync="addDialogVisible"
|
width="50%"
|
@close="addDialogClosed">
|
<!--内容主体区域-->
|
<el-form :model="addPowerForm" :rules="powerRules" ref="powerRef" label-width="70px">
|
<el-form-item :label="$t('form.role')" prop="roleId">
|
<el-select filterable v-model="addPowerForm.roleId" :placeholder="$t('form.select')">
|
<el-option v-for="item in roleList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="$t('form.permission')" prop="permissionId">
|
<el-select filterable v-model="addPowerForm.permissionId" :placeholder="$t('form.select')">
|
<el-option v-for="item in permissionList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="$t('form.isActive')" prop="state">
|
<el-select v-model="addPowerForm.state" :placeholder="$t('form.select')">
|
<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('button.cancel')}}</el-button>
|
<el-button type="primary" @click="addPower">{{$t('button.confirm')}}</el-button>
|
</span>
|
</el-dialog>
|
<!--修改权限的对话框-->
|
<el-dialog
|
:title="$t('dialog.editPermission')"
|
:visible.sync="editDialogVisible"
|
width="50%">
|
<!--内容主体区域-->
|
<el-form :model="editRoleForm" :rules="powerRules" ref="powerRef" label-width="70px">
|
<el-form-item :label="$t('form.role')" prop="roleId">
|
<el-select filterable v-model="editRoleForm.roleId" :placeholder="$t('form.select')">
|
<el-option v-for="item in roleList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item filterable :label="$t('form.permission')" prop="permissionId">
|
<el-select v-model="editRoleForm.permissionId" :placeholder="$t('form.select')">
|
<el-option v-for="item in permissionList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="$t('form.isActive')" prop="state">
|
<el-select v-model="editRoleForm.state" :placeholder="$t('form.select')">
|
<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('button.cancel')}}</el-button>
|
<el-button type="primary" @click="editRoleInfo">{{$t('button.confirm')}}</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getById, removeById, saveOrUpdate, selectPage} from "../../api/rolePermission";
|
import {select} from "../../api/role";
|
import {selectPermission} from "../../api/permission";
|
import LanguageMixin from '../../lang/LanguageMixin'
|
|
export default {
|
name: "Power",
|
mixins: [LanguageMixin],
|
data() {
|
return {
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 6
|
},
|
powerList: {
|
records: [],
|
total: 0
|
},
|
// 控制添加权限弹框的显示和隐藏
|
addDialogVisible: false,
|
// 控制修改权限对话框的显示与隐藏
|
editDialogVisible: false,
|
// 添加的权限对象
|
addPowerForm: {
|
roleId: null,
|
permissionId: null,
|
state: 1
|
},
|
// 修改的权限对象
|
editRoleForm: {
|
roleId: null,
|
permissionId: null
|
},
|
// 添加权限的验证规则
|
powerRules: {
|
roleId: [
|
{required: true, message: '请输入角色', trigger: 'blur'}
|
],
|
permissionId: [
|
{required: true, message: '请输入权限描述', trigger: 'blur'},
|
]
|
},
|
options: [
|
{label: '生效', value: 1},
|
{label: '无效', value: 0}
|
],
|
roleList: [],
|
permissionList: []
|
}
|
},
|
created() {
|
this.getPowerList();
|
},
|
methods: {
|
getPowerList() {
|
selectPage(this.queryInfo).then(res => {
|
this.powerList.total = res.data.total;
|
this.powerList.records = res.data.records;
|
});
|
},
|
// 监听pageSize改变的事件
|
handleSizeChange(newSize) {
|
this.queryInfo.pageSize = newSize;
|
this.getPowerList()
|
},
|
// 监听pageNum改变的事件
|
handleCurrentChange(newPage) {
|
this.queryInfo.pageNum = newPage;
|
this.getPowerList()
|
},
|
stateChange(info) {
|
saveOrUpdate(info).then(() => {
|
this.$message.success(this.$t('updateSuccessMessage'))
|
});
|
},
|
// 监听添加权限对话框的关闭事件
|
addDialogClosed() {
|
this.$refs['powerRef'].resetFields();
|
},
|
// 点击按钮添加新权限
|
addPower() {
|
this.$refs.powerRef.validate(async valid => {
|
if (!valid) return;
|
// 发起添加权限的网络请求
|
saveOrUpdate(this.addPowerForm).then(() => {
|
// 重新获取权限列表
|
this.getPowerList();
|
// 隐藏添加权限对话框
|
this.addDialogVisible = false;
|
this.$message.success(this.$t('addSuccessMessage'));
|
});
|
})
|
},
|
// 展示修改权限的对话框
|
showEditDialog(role) {
|
getById({id: role.id}).then(res => {
|
this.editRoleForm = res.data;
|
});
|
select(this.addPowerForm).then(res => {
|
this.roleList = res.data;
|
});
|
selectPermission(this.addPowerForm).then(res => {
|
this.permissionList = res.data;
|
});
|
this.editDialogVisible = true;
|
},
|
// 展示添加权限的对话框
|
showAddDialog() {
|
select(this.addPowerForm).then(res => {
|
this.roleList = res.data;
|
});
|
selectPermission(this.addPowerForm).then(res => {
|
this.permissionList = res.data;
|
});
|
this.addDialogVisible = true;
|
},
|
// 修改权限信息并提交
|
editRoleInfo() {
|
this.$refs.powerRef.validate(async valid => {
|
if (!valid) return;
|
// 发起修改权限的网络请求
|
saveOrUpdate(this.editRoleForm).then(() => {
|
// 重新获取权限列表
|
this.getPowerList();
|
// 隐藏添加权限对话框
|
this.editDialogVisible = false;
|
this.$message.success(this.$t('updateSuccessMessage'));
|
});
|
})
|
},
|
// 根据id删除权限信息
|
removeById(power) {
|
// 弹框询问用户是否删除权限
|
this.$confirm(this.$t('deleteConfirmMessage'), this.$t('prompt'), {
|
confirmButtonText: this.$t('confirmButtonText'),
|
cancelButtonText: this.$t('cancelButtonText'),
|
type: 'warning'
|
}).then(() => {
|
// 删除权限
|
removeById({id: power.id}).then(() => {
|
// 重新获取权限列表
|
this.getPowerList();
|
this.$message.success(this.$t('deleteSuccessMessage'));
|
});
|
}).catch(() => {
|
this.$message.info(this.$t('deleteCancelledMessage'));
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.el-table {
|
margin-top: 15px;
|
font-size: 12px;
|
}
|
|
.el-pagination {
|
margin-top: 15px;
|
}
|
|
.app .el-card {
|
width: 99%;
|
}
|
</style>
|
