|
@@ -0,0 +1,348 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <!-- 表头 -->
|
|
|
|
|
+ <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
|
|
|
|
|
+ <el-form :inline="true">
|
|
|
|
|
+ <el-form-item label="角色权限">
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item >
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入关键字查询" clearable="true">
|
|
|
|
|
+ <el-button slot="append" @click="mohu" @clear="mohus" icon="el-icon-search"></el-button>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-link type="primary" :underline="false" @click="handleAdd('添加角色', '立即添加')">添加角色</el-link>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <!-- 表格 -->
|
|
|
|
|
+ <el-table :data="tableData" style="width: 100%" height="615">
|
|
|
|
|
+ <el-table-column prop="rolename" label="角色"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="roleDescribe" label="描述"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="date" label="操作">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-button type="primary" size="small" @click="handleAdd('编辑角色', '立即修改', scope.row)">编辑角色</el-button>
|
|
|
|
|
+ <el-button type="primary" size="small" @click="shisha(scope.row.companyId),dialogVisible = true">分配权限</el-button>
|
|
|
|
|
+ <el-button type="danger" size="small" @click="deteHand(scope.row)">删除</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <!--工具条-->
|
|
|
|
|
+ <!-- <el-col :span="24" class="toolbar">
|
|
|
|
|
+ <el-pagination
|
|
|
|
|
+ @size-change="handleSizeChange"
|
|
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
|
|
+ :page-sizes="[20 , 50 , 80 , 100]"
|
|
|
|
|
+ :page-size="20"
|
|
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
|
|
+ :total="total"
|
|
|
|
|
+ style="float:right;"
|
|
|
|
|
+ ></el-pagination>
|
|
|
|
|
+ </el-col> -->
|
|
|
|
|
+ <!-- 分配权限弹窗 -->
|
|
|
|
|
+ <el-dialog title="分配权限" :visible.sync="dialogVisible" width="600" :before-close="handleClose">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
|
|
|
|
|
+ <!-- <el-tree :data="data" show-checkbox node-key="id" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> </el-tree> -->
|
|
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
|
|
+ <!-- 分模块展示功能项 -->
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li v-for="mainMenu in moduleList" :key="mainMenu.id">
|
|
|
|
|
+ <el-checkbox :label="mainMenu.name" name="type" v-model="mainMenu.checked" style="font-weight:bold;" @change="mainChange(mainMenu)"></el-checkbox>
|
|
|
|
|
+ <ul v-if="mainMenu.children">
|
|
|
|
|
+ <li v-for="subMenu in mainMenu.children" :key="subMenu.id">
|
|
|
|
|
+ <el-checkbox :label="subMenu.name" name="type" v-model="subMenu.checked" style="font-weight:bold;" @change="subChange(subMenu)"></el-checkbox>
|
|
|
|
|
+ <span v-if="subMenu.functionList && subMenu.functionList.length > 0" style="margin-right:10px;margin-left:10px;">(功能:
|
|
|
|
|
+ <el-checkbox v-for="fun in subMenu.functionList" :key="fun.id" :label="fun.name" name="type" v-model="fun.checked" @change="funChange(fun)"></el-checkbox>)</span>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <el-button type="primary" size="small" @click="saveList()">保存</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ <!-- 添加角色弹窗 -->
|
|
|
|
|
+ <el-dialog :title="titles" :visible.sync="addDialogVisible" width="600" :before-close="handleClose">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
|
|
+ <el-form-item label="角色名称">
|
|
|
|
|
+ <el-input v-model="form.rolename" clearable></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="描述">
|
|
|
|
|
+ <el-input type="textarea" v-model="form.roleDescribe" clearable></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" @click="onSubmit()">{{addTil}}</el-button>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ props: {},
|
|
|
|
|
+ components: {},
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ filterText(val) {
|
|
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ user: JSON.parse(sessionStorage.getItem("user")),
|
|
|
|
|
+ tableData: [],
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ dialogVisible: false,
|
|
|
|
|
+ filterText: '',
|
|
|
|
|
+ addDialogVisible: false,
|
|
|
|
|
+ form: {
|
|
|
|
|
+ rolename: '',
|
|
|
|
|
+ roleDescribe: '',
|
|
|
|
|
+ id: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ moduleList: [],
|
|
|
|
|
+ roles: '',
|
|
|
|
|
+ titles: '',
|
|
|
|
|
+ addTil: '立即添加',
|
|
|
|
|
+ keyword: '',
|
|
|
|
|
+ auseList: []
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {},
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ filterText(val) {
|
|
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
|
|
+ },
|
|
|
|
|
+ keyword(val) {
|
|
|
|
|
+ if(val == '') {
|
|
|
|
|
+ this.mohu()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {},
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.getRole()
|
|
|
|
|
+ // this.shisha()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ // 模糊匹配
|
|
|
|
|
+ mohu() {
|
|
|
|
|
+ console.log(this.keyword)
|
|
|
|
|
+ if(this.keyword == '') {
|
|
|
|
|
+ this.tableData = this.auseList
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ var len = this.auseList.length;
|
|
|
|
|
+ var arr = []
|
|
|
|
|
+ for(var i = 0; i < len; i++){
|
|
|
|
|
+ if(this.auseList[i].rolename.indexOf(this.keyword)>=0){
|
|
|
|
|
+ arr.push(this.auseList[i]);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.tableData = arr
|
|
|
|
|
+ },
|
|
|
|
|
+ // 还不知道是啥
|
|
|
|
|
+ shisha(id) {
|
|
|
|
|
+ this.roles = id
|
|
|
|
|
+ this.http.post('/permission/getAuthority', {
|
|
|
|
|
+ companyId: this.user.companyId,
|
|
|
|
|
+ role: id
|
|
|
|
|
+ },
|
|
|
|
|
+ res => {
|
|
|
|
|
+ if (res.code == "ok") {
|
|
|
|
|
+ console.log(res.data, '数据来源(990)')
|
|
|
|
|
+ this.moduleList = res.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ error => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: error,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 获取权限列表
|
|
|
|
|
+ getRole() {
|
|
|
|
|
+ this.http.post('/permission/getRoleList', {
|
|
|
|
|
+ companyId: this.user.companyId
|
|
|
|
|
+ },
|
|
|
|
|
+ res => {
|
|
|
|
|
+ if (res.code == "ok") {
|
|
|
|
|
+ console.log(res.data, '数据来源')
|
|
|
|
|
+ this.tableData = res.data
|
|
|
|
|
+ this.auseList = res.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ error => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: error,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ handleSizeChange() {},
|
|
|
|
|
+ handleCurrentChange() {},
|
|
|
|
|
+ filterNode(value, data) {
|
|
|
|
|
+ if (!value) return true;
|
|
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
|
|
+ },
|
|
|
|
|
+ handleAdd(tex, tel, id) {
|
|
|
|
|
+ this.titles = tex
|
|
|
|
|
+ this.addTil = tel
|
|
|
|
|
+ this.addDialogVisible = true
|
|
|
|
|
+ // var ss = {rolename: '', roleDescribe: '',id: ''}
|
|
|
|
|
+ var ss = {}
|
|
|
|
|
+ id ? ss.id = id.id : ss.id = ''
|
|
|
|
|
+ id ? ss.rolename = id.rolename : ss.rolename = ''
|
|
|
|
|
+ id ? ss.roleDescribe = id.roleDescribe : ss.roleDescribe = ''
|
|
|
|
|
+ this.form = ss
|
|
|
|
|
+ },
|
|
|
|
|
+ // 添加角色
|
|
|
|
|
+ onSubmit() {
|
|
|
|
|
+ // var ss = this.form
|
|
|
|
|
+ this.http.post('/permission/editRole', {
|
|
|
|
|
+ id: this.form.id,
|
|
|
|
|
+ name: this.form.rolename,
|
|
|
|
|
+ description: this.form.roleDescribe,
|
|
|
|
|
+ companyId: this.user.companyId
|
|
|
|
|
+ },
|
|
|
|
|
+ res => {
|
|
|
|
|
+ if (res.code == "ok") {
|
|
|
|
|
+ console.log(res.data, '数据来源(123)')
|
|
|
|
|
+ this.addDialogVisible = false
|
|
|
|
|
+ this.getRole()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ error => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: error,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ deteHand(item) {
|
|
|
|
|
+ this.$confirm('此操作将删除('+item.rolename+')角色, 是否继续?', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ this.http.post('/permission/deleteRole', {
|
|
|
|
|
+ id: item.id,
|
|
|
|
|
+ },
|
|
|
|
|
+ res => {
|
|
|
|
|
+ if (res.code == "ok") {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: '删除成功',
|
|
|
|
|
+ type: "success"
|
|
|
|
|
+ });
|
|
|
|
|
+ this.getRole()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ error => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: error,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }).catch(() => {});
|
|
|
|
|
+ },
|
|
|
|
|
+ mainChange(mainMenu) {
|
|
|
|
|
+ //一级选中，全部选中,一级取消全部取消
|
|
|
|
|
+ console.log(mainMenu);
|
|
|
|
|
+ mainMenu.children.forEach(c=>{
|
|
|
|
|
+ c.checked = mainMenu.checked;
|
|
|
|
|
+ c.functionList.forEach(f=>{
|
|
|
|
|
+ f.checked = mainMenu.checked;
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ subChange(subMenu) {
|
|
|
|
|
+ //二级选中，自动勾选对应的一级
|
|
|
|
|
+ console.log(subMenu);
|
|
|
|
|
+ let mainMenuList = this.moduleList;
|
|
|
|
|
+ mainMenuList.forEach(m=>{
|
|
|
|
|
+ //检测子菜单
|
|
|
|
|
+ if (m.id == subMenu.parentId) {
|
|
|
|
|
+ //找到父菜单了
|
|
|
|
|
+ var hasChecked = false;
|
|
|
|
|
+ m.children.forEach(c=>{
|
|
|
|
|
+ if (c.checked) {
|
|
|
|
|
+ hasChecked = true;
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ //当前点击的子菜单所有同级菜单是否有点中的，如果没有需要把父级取消勾选
|
|
|
|
|
+ m.checked = hasChecked;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ //子功能全部勾上，取消
|
|
|
|
|
+ subMenu.functionList.forEach(f=>{
|
|
|
|
|
+ f.checked = subMenu.checked;
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ saveList() {
|
|
|
|
|
+ this.dialogVisible = false
|
|
|
|
|
+ console.log(this.moduleList)
|
|
|
|
|
+ this.http.post('/permission/savePermission', {
|
|
|
|
|
+ role: this.roles,
|
|
|
|
|
+ moduleList: JSON.stringify(this.moduleList),
|
|
|
|
|
+ },
|
|
|
|
|
+ res => {
|
|
|
|
|
+ if (res.code == "ok") {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: '操作成功',
|
|
|
|
|
+ type: "success"
|
|
|
|
|
+ });
|
|
|
|
|
+ this.getRole()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: res.msg,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ error => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ message: error,
|
|
|
|
|
+ type: "error"
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+ li {
|
|
|
|
|
+ list-style: none;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|
Lijy