|
@@ -23,18 +23,34 @@
|
|
<div style="flex: 1"></div>
|
|
<div style="flex: 1"></div>
|
|
<el-button size="mini" plain type="success" icon="el-icon-plus" @click="onEdit(null)">添加权限组</el-button>
|
|
<el-button size="mini" plain type="success" icon="el-icon-plus" @click="onEdit(null)">添加权限组</el-button>
|
|
</div>
|
|
</div>
|
|
- <div class="item" v-for="group of groupList" :key="group.id" @click="onSelect(group)" :class="{ selected: selected == group.id }">
|
|
|
|
- <div class="name">
|
|
|
|
- <div>{{ group.permName }}</div>
|
|
|
|
- <div style="flex: 1"></div>
|
|
|
|
- <el-button size="mini" type="primary" plain icon="el-icon-setting" v-show="!isSelect" @click="goSetting(group)"> 权限设置 </el-button>
|
|
|
|
- <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="onEdit(group)"></el-button>
|
|
|
|
- <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="onDel(group)"></el-button>
|
|
|
|
- </div>
|
|
|
|
- <div class="selected">
|
|
|
|
- <div class="tag" v-for="item of group.dpList" :key="item.id"><i class="el-icon-s-flag" style="color: #67c23a; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
- <div class="tag" v-for="item of group.roleList" :key="item.id"><i class="el-icon-user-solid" style="color: #e6a23c; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
- <div class="tag" v-for="item of group.userList" :key="item.id"><i class="el-icon-user" style="color: #909399; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
|
|
+ <div class="main">
|
|
|
|
+ <div class="item" v-for="group of groupList" :key="group.id" :class="{ selected: selected == group.id }">
|
|
|
|
+ <div class="name">
|
|
|
|
+ <div>{{ group.permName }}</div>
|
|
|
|
+ <div style="flex: 1"></div>
|
|
|
|
+ <el-button
|
|
|
|
+ size="mini" type="primary" plain icon="el-icon-setting" v-show="!isSelect&&group.id"
|
|
|
|
+ @click="goSetting(group)"
|
|
|
|
+ >
|
|
|
|
+ 权限设置
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button size="mini" type="success" icon="el-icon-thumb" v-show="isSelect" @click="onSelect(group)">
|
|
|
|
+ 选择
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="onEdit(group)"></el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-show="group.id" size="mini" type="danger" plain icon="el-icon-delete" @click="onDel(group)"
|
|
|
|
+ ></el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="selected">
|
|
|
|
+ <div class="tag" v-for="item of group.dpList" :key="item.id"><i class="el-icon-s-flag" style="color: #67c23a; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
+ <div class="tag" v-for="item of group.roleList" :key="item.id"><i class="el-icon-user-solid" style="color: #e6a23c; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
+ <div class="tag" v-for="item of group.userList" :key="item.id"><i class="el-icon-user" style="color: #909399; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
+ <div class="tag" v-for="item of group.blackUserList" :key="item.id">
|
|
|
|
+ <i class="el-icon-error" style="color:#909399;margin-right: 5px"></i>
|
|
|
|
+ <span style="color:#f56c6c;text-decoration: line-through">{{ item.name }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination
|
|
<el-pagination
|
|
@@ -87,57 +103,136 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="已选择项">
|
|
<el-form-item label="已选择项">
|
|
<div class="selected">
|
|
<div class="selected">
|
|
- <div class="tag" v-for="item of form.dpList" :key="item.id"><i class="el-icon-s-flag" style="color: #67c23a; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
- <div class="tag" v-for="item of form.roleList" :key="item.id"><i class="el-icon-user-solid" style="color: #e6a23c; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
- <div class="tag" v-for="item of form.userList" :key="item.id"><i class="el-icon-user" style="color: #909399; margin-right: 5px"></i>{{ item.name }}</div>
|
|
|
|
|
|
+ <div class="tag" v-for="(item,i) of form.dpList" :key="item.id">
|
|
|
|
+ <i class="el-icon-s-flag" style="color:#67c23a;margin-right: 5px"></i>
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ <i class="el-icon-close" @click="onQuickDel('dpList',item,i)"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tag" v-for="(item,i) of form.roleList" :key="item.id">
|
|
|
|
+ <i class="el-icon-user-solid" style="color:#e6a23c;margin-right: 5px"></i>
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ <i class="el-icon-close" @click="onQuickDel('roleList',item,i)"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tag" v-for="(item,i) of form.userList" :key="item.id">
|
|
|
|
+ <i class="el-icon-user" style="color:#909399;margin-right: 5px"></i>
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ <i class="el-icon-close" @click="onQuickDel('userList',item,i)"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tag" v-for="(item,i) of form.blackUserList" :key="item.id">
|
|
|
|
+ <i class="el-icon-error" style="color:#909399;margin-right: 5px"></i>
|
|
|
|
+ <span style="color:#f56c6c;text-decoration: line-through">{{ item.name }}</span>
|
|
|
|
+ <i class="el-icon-close" @click="onQuickDel('blackUserList',item,i)"></i>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- <el-tabs type="card" v-model="activeType">
|
|
|
|
|
|
+ <el-tabs type="card" v-model="activeType" @tab-click="onSelectTab">
|
|
<el-tab-pane name="dept">
|
|
<el-tab-pane name="dept">
|
|
- <span slot="label"><i class="el-icon-s-flag" style="color: #67c23a; margin-right: 5px"></i>部门</span>
|
|
|
|
- <el-tree
|
|
|
|
- ref="dept"
|
|
|
|
- :data="deptList"
|
|
|
|
- node-key="id"
|
|
|
|
- :props="{ label: 'title' }"
|
|
|
|
- default-expand-all
|
|
|
|
- show-checkbox
|
|
|
|
- check-strictly
|
|
|
|
- check-on-click-node
|
|
|
|
- :expand-on-click-node="false"
|
|
|
|
- @check-change="onDeptChange"
|
|
|
|
- ></el-tree>
|
|
|
|
|
|
+ <span slot="label"><i class="el-icon-s-flag" style="color:#67c23a;margin-right: 5px"></i>部门</span>
|
|
|
|
+ <div class="left">
|
|
|
|
+ <el-tree
|
|
|
|
+ ref="dept" :data="deptList" node-key="id" :props="{label:'title',}" default-expand-all show-checkbox
|
|
|
|
+ check-strictly check-on-click-node :expand-on-click-node="false" @check-change="onDeptChange"
|
|
|
|
+ ></el-tree>
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="role">
|
|
<el-tab-pane name="role">
|
|
- <span slot="label"><i class="el-icon-user-solid" style="color: #e6a23c; margin-right: 5px"></i>角色</span>
|
|
|
|
- <el-tree
|
|
|
|
- ref="role"
|
|
|
|
- :data="roleList"
|
|
|
|
- node-key="id"
|
|
|
|
- :props="{ label: 'title' }"
|
|
|
|
- default-expand-all
|
|
|
|
- show-checkbox
|
|
|
|
- check-strictly
|
|
|
|
- check-on-click-node
|
|
|
|
- :expand-on-click-node="false"
|
|
|
|
- @check-change="onRoleChange"
|
|
|
|
- ></el-tree>
|
|
|
|
|
|
+ <span slot="label"><i class="el-icon-user-solid" style="color:#e6a23c;margin-right: 5px"></i>角色</span>
|
|
|
|
+ <div class="left">
|
|
|
|
+ <el-tree
|
|
|
|
+ ref="role" :data="roleList" node-key="id" :props="{label:'title',}" default-expand-all show-checkbox
|
|
|
|
+ check-strictly check-on-click-node :expand-on-click-node="false" @check-change="onRoleChange"
|
|
|
|
+ ></el-tree>
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="user">
|
|
<el-tab-pane name="user">
|
|
- <span slot="label"><i class="el-icon-user" style="color: #909399; margin-right: 5px"></i>用户</span>
|
|
|
|
- <el-tree
|
|
|
|
- ref="user"
|
|
|
|
- :data="userList"
|
|
|
|
- node-key="id"
|
|
|
|
- :props="{ children: 'list' }"
|
|
|
|
- default-expand-all
|
|
|
|
- show-checkbox
|
|
|
|
- check-strictly
|
|
|
|
- check-on-click-node
|
|
|
|
- :expand-on-click-node="false"
|
|
|
|
- @check-change="onUserChange"
|
|
|
|
- ></el-tree>
|
|
|
|
|
|
+ <span slot="label"><i class="el-icon-user" style="color:#909399;margin-right: 5px"></i>用户</span>
|
|
|
|
+ <div class="left">
|
|
|
|
+ <el-tree
|
|
|
|
+ ref="user" :data="deptList" node-key="id" default-expand-all
|
|
|
|
+ check-on-click-node :expand-on-click-node="false" @node-click="onUserChange"
|
|
|
|
+ ></el-tree>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right" style="padding: 10px">
|
|
|
|
+ <el-checkbox
|
|
|
|
+ v-for="(item,i) of userChecks" :key="i" v-model="item.select" @change="onSelectUser($event,item)">
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane name="black">
|
|
|
|
+ <span slot="label"><i class="el-icon-error" style="color:#909399;margin-right: 5px"></i>黑名单</span>
|
|
|
|
+ <div class="left">
|
|
|
|
+ <el-tree
|
|
|
|
+ ref="black" :data="deptList" node-key="id" default-expand-all
|
|
|
|
+ check-on-click-node :expand-on-click-node="false" @node-click="onBlackChange"
|
|
|
|
+ ></el-tree>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right" style="padding: 10px">
|
|
|
|
+ <el-checkbox
|
|
|
|
+ v-for="(item,i) of userChecks" :key="i" v-model="item.select" @change="onSelectBlackUser($event,item)">
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane name="search">
|
|
|
|
+ <div slot="label" style="display: flex;align-items: center">
|
|
|
|
+ <el-input size="mini" v-model="searchKey" clearable @input="onSearch"></el-input>
|
|
|
|
+ <el-button size="mini" type="primary">搜索</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="left">
|
|
|
|
+ <div class="name" @click="deptFold=!deptFold">
|
|
|
|
+ <i class="el-icon-s-flag" style="color:#67c23a;margin-right: 5px"></i>部门
|
|
|
|
+ <i class="el-icon-arrow-right" v-if="deptFold"></i>
|
|
|
|
+ <i class="el-icon-arrow-down" v-else></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="items" v-show="!deptFold">
|
|
|
|
+ <el-checkbox
|
|
|
|
+ v-for="(item ,i) of deptSearched" :key="i" v-model="item.select"
|
|
|
|
+ @change="onSelectDeptOrRole($event,item,'dept')"
|
|
|
|
+ >
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="name" @click="roleFold=!roleFold">
|
|
|
|
+ <i class="el-icon-user-solid" style="color:#e6a23c;margin-right: 5px"></i>角色
|
|
|
|
+ <i class="el-icon-arrow-right" v-if="roleFold"></i>
|
|
|
|
+ <i class="el-icon-arrow-down" v-else></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="items" v-show="!roleFold">
|
|
|
|
+ <el-checkbox
|
|
|
|
+ v-for="(item ,i) of roleSearched" :key="i" v-model="item.select"
|
|
|
|
+ @change="onSelectDeptOrRole($event,item,'role')"
|
|
|
|
+ >
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="name" @click="userFold=!userFold">
|
|
|
|
+ <i class="el-icon-user" style="color:#909399;margin-right: 5px"></i>用户
|
|
|
|
+ <i class="el-icon-arrow-right" v-if="userFold"></i>
|
|
|
|
+ <i class="el-icon-arrow-down" v-else></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="items" v-show="!userFold">
|
|
|
|
+ <el-checkbox
|
|
|
|
+ v-for="(item ,i) of userSearched" :key="i" v-model="item.select"
|
|
|
|
+ @change="onSelectUser($event,item)">
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="name" @click="blackFold=!blackFold">
|
|
|
|
+ <i class="el-icon-error" style="color:#909399;margin-right: 5px"></i>黑名单
|
|
|
|
+ <i class="el-icon-arrow-right" v-if="blackFold"></i>
|
|
|
|
+ <i class="el-icon-arrow-down" v-else></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="items" v-show="!blackFold">
|
|
|
|
+ <el-checkbox
|
|
|
|
+ v-for="(item ,i) of blackSearched" :key="i" v-model="item.select"
|
|
|
|
+ @change="onSelectBlackUser($event,item)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
<div class="btns">
|
|
<div class="btns">
|
|
@@ -159,7 +254,7 @@ export default {
|
|
groupList: [],
|
|
groupList: [],
|
|
deptList: [],
|
|
deptList: [],
|
|
roleList: [],
|
|
roleList: [],
|
|
- userList: [],
|
|
|
|
|
|
+ userChecks: [],
|
|
form: {},
|
|
form: {},
|
|
show: false,
|
|
show: false,
|
|
activeType: 'dept',
|
|
activeType: 'dept',
|
|
@@ -169,41 +264,103 @@ export default {
|
|
typeForm: {},
|
|
typeForm: {},
|
|
showTypeEdit: false,
|
|
showTypeEdit: false,
|
|
nowTypeId: 0,
|
|
nowTypeId: 0,
|
|
- page: { size: 10, current: 1, total: 0 }
|
|
|
|
|
|
+ page: {size: 10, current: 1, total: 0},
|
|
|
|
+ searchKey: '',
|
|
|
|
+ deptSearched: [],
|
|
|
|
+ roleSearched: [],
|
|
|
|
+ userSearched: [],
|
|
|
|
+ blackSearched: [],
|
|
|
|
+ deptFold: false,
|
|
|
|
+ roleFold: false,
|
|
|
|
+ userFold: false,
|
|
|
|
+ blackFold: false,
|
|
|
|
+ roleListPlat: [],
|
|
|
|
+ deptListPlat: [],
|
|
|
|
+ userListPlat: [],
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.getType()
|
|
this.getType()
|
|
getDeptTree().then((res) => {
|
|
getDeptTree().then((res) => {
|
|
- this.deptList = res.data.data
|
|
|
|
- getList(1, 10000).then((userRes) => {
|
|
|
|
- let users = userRes.data.data.records
|
|
|
|
- users.forEach((item) => (item.deptId = item.deptId.split(',')[0]))
|
|
|
|
- let userListPlat = []
|
|
|
|
- this.getPlat(JSON.parse(JSON.stringify(res.data.data)), userListPlat)
|
|
|
|
- userListPlat.forEach((i) => (i.parent = userListPlat.find((j) => j.id == i.parentId)))
|
|
|
|
- this.userList = userListPlat
|
|
|
|
- .map((item) => {
|
|
|
|
- let id = item.id
|
|
|
|
- let label = item.title
|
|
|
|
- let parent = item.parent
|
|
|
|
- while (parent) {
|
|
|
|
- label = parent.title + ' / ' + label
|
|
|
|
- parent = parent.parent
|
|
|
|
- }
|
|
|
|
- let list = users.filter((i) => i.deptId == id).map((i) => ({ id: i.id, label: i.name }))
|
|
|
|
- return { id, label, list, disabled: true }
|
|
|
|
- })
|
|
|
|
- .filter((i) => i.list.length)
|
|
|
|
- })
|
|
|
|
|
|
+ getList(1, 10000).then(userRes => {
|
|
|
|
+ let users = userRes.data.data.records;
|
|
|
|
+ this.userListPlat = users.map(i => ({id: i.id, label: i.realName}));
|
|
|
|
+ users.forEach(item => item.depts = item.deptId.split(','));
|
|
|
|
+ let userListPlat = [];
|
|
|
|
+ let userList = res.data.data;
|
|
|
|
+ this.getPlat(userList, userListPlat);
|
|
|
|
+ userListPlat.forEach(item => {
|
|
|
|
+ let id = item.id;
|
|
|
|
+ item.label = item.title;
|
|
|
|
+ item.list = users.filter(i => i.depts.includes(id)).map(i => ({id: i.id, label: i.realName, select: false}));
|
|
|
|
+ });
|
|
|
|
+ this.deptList = userList;
|
|
|
|
+ this.deptListPlat = userListPlat.map(i => ({id: i.id, label: i.title}));
|
|
|
|
+ });
|
|
})
|
|
})
|
|
roleTree().then((res) => {
|
|
roleTree().then((res) => {
|
|
- this.roleList = res.data.data
|
|
|
|
|
|
+ let data = res.data.data;
|
|
|
|
+ let roleListPlat = [];
|
|
|
|
+ this.getPlat(data, roleListPlat);
|
|
|
|
+ this.roleList = data;
|
|
|
|
+ this.roleListPlat = roleListPlat.map(i => ({id: i.id, label: i.title}));
|
|
})
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ onQuickDel(type, item, index) {
|
|
|
|
+ this.form[type].splice(index, 1)
|
|
|
|
+ if (type == 'dpList') {
|
|
|
|
+ this.$refs.dept.setCheckedKeys(this.form.dpList.map(i => i.id));
|
|
|
|
+ this.deptSearched.forEach(i => i.id == item.id && (i.select = false))
|
|
|
|
+ } else if (type == 'roleList') {
|
|
|
|
+ this.$refs.role.setCheckedKeys(this.form.roleList.map(i => i.id));
|
|
|
|
+ this.roleSearched.forEach(i => i.id == item.id && (i.select = false))
|
|
|
|
+ } else if (type == 'userList') {
|
|
|
|
+ this.userChecks.forEach(i => i.id == item.id && (i.select = false))
|
|
|
|
+ this.onSearch()
|
|
|
|
+ } else if (type == 'blackUserList') {
|
|
|
|
+ this.userChecks.forEach(i => i.id == item.id && (i.select = false))
|
|
|
|
+ this.onSearch()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 结果中选择部门或角色时
|
|
|
|
+ onSelectDeptOrRole(status, item, type) {
|
|
|
|
+ if (type == 'dept') {
|
|
|
|
+ if (status) {
|
|
|
|
+ this.form.dpList.push({id: item.id, name: item.label});
|
|
|
|
+ } else {
|
|
|
|
+ let index = this.form.dpList.findIndex(i => i.id == item.id);
|
|
|
|
+ this.form.dpList.splice(index, 1);
|
|
|
|
+ }
|
|
|
|
+ } else if (type == 'role') {
|
|
|
|
+ if (status) {
|
|
|
|
+ this.form.roleList.push({id: item.id, name: item.label});
|
|
|
|
+ } else {
|
|
|
|
+ let index = this.form.roleList.findIndex(i => i.id == item.id);
|
|
|
|
+ this.form.roleList.splice(index, 1);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 搜索所有类型数据时
|
|
|
|
+ onSearch() {
|
|
|
|
+ let key = this.searchKey;
|
|
|
|
+ let {dpList, roleList, userList, blackUserList} = this.form;
|
|
|
|
+ let deptSearched = this.deptListPlat.filter(i => i.label.includes(key));
|
|
|
|
+ deptSearched.forEach(i => i.select = !!dpList.find(j => j.id == i.id));
|
|
|
|
+ this.deptSearched = deptSearched;
|
|
|
|
+ let roleSearched = this.roleListPlat.filter(i => i.label.includes(key));
|
|
|
|
+ roleSearched.forEach(i => i.select = !!roleList.find(j => j.id == i.id));
|
|
|
|
+ this.roleSearched = roleSearched;
|
|
|
|
+ let userSearched = this.userListPlat.filter(i => i.label.includes(key));
|
|
|
|
+ userSearched.forEach(i => i.select = !!userList.find(j => j.id == i.id));
|
|
|
|
+ this.userSearched = userSearched;
|
|
|
|
+ let other = JSON.parse(JSON.stringify(this.userListPlat));
|
|
|
|
+ let blackSearched = other.filter(i => i.label.includes(key));
|
|
|
|
+ blackSearched.forEach(i => i.select = !!blackUserList.find(j => j.id == i.id));
|
|
|
|
+ this.blackSearched = blackSearched;
|
|
|
|
+ },
|
|
goSetting(group) {
|
|
goSetting(group) {
|
|
- this.$router.push('/system/authGroupSetting?id=' + group.id)
|
|
|
|
|
|
+ this.$router.push(`/system/authGroupSetting?id=${group.id}&name=${group.permName}`);
|
|
},
|
|
},
|
|
sizeChange(size) {
|
|
sizeChange(size) {
|
|
this.page.size = size
|
|
this.page.size = size
|
|
@@ -272,23 +429,71 @@ export default {
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
.catch(() => {})
|
|
},
|
|
},
|
|
- onUserChange() {
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- let nodes = this.$refs.user.getCheckedNodes()
|
|
|
|
- this.form.userList = nodes.map((i) => ({ id: i.id, name: i.label }))
|
|
|
|
- })
|
|
|
|
|
|
+ // 选择面板时
|
|
|
|
+ onSelectTab({name}) {
|
|
|
|
+ if (name == 'user') {
|
|
|
|
+ let node = this.$refs.user.getCurrentNode();
|
|
|
|
+ if (node) {
|
|
|
|
+ this.onUserChange(node);
|
|
|
|
+ } else {
|
|
|
|
+ this.userChecks = [];
|
|
|
|
+ }
|
|
|
|
+ } else if (name == 'black') {
|
|
|
|
+ let node = this.$refs.black.getCurrentNode();
|
|
|
|
+ if (node) {
|
|
|
|
+ this.onBlackChange(node);
|
|
|
|
+ } else {
|
|
|
|
+ this.userChecks = [];
|
|
|
|
+ }
|
|
|
|
+ } else if (name == 'search') {
|
|
|
|
+ this.onSearch();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 用户选择用户时
|
|
|
|
+ onSelectUser(status, item) {
|
|
|
|
+ if (status) {
|
|
|
|
+ this.form.userList.push({id: item.id, name: item.label});
|
|
|
|
+ } else {
|
|
|
|
+ let index = this.form.userList.findIndex(i => i.id == item.id);
|
|
|
|
+ this.form.userList.splice(index, 1);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 黑名单选择用户时
|
|
|
|
+ onSelectBlackUser(status, item) {
|
|
|
|
+ if (status) {
|
|
|
|
+ this.form.blackUserList.push({id: item.id, name: item.label});
|
|
|
|
+ } else {
|
|
|
|
+ let index = this.form.blackUserList.findIndex(i => i.id == item.id);
|
|
|
|
+ this.form.blackUserList.splice(index, 1);
|
|
|
|
+ }
|
|
},
|
|
},
|
|
|
|
+ // 选择用户部门时
|
|
|
|
+ onUserChange({list}) {
|
|
|
|
+ list.forEach(i => {
|
|
|
|
+ i.select = !!this.form.userList.find(j => j.id == i.id);
|
|
|
|
+ });
|
|
|
|
+ this.userChecks = list;
|
|
|
|
+ },
|
|
|
|
+ // 选择黑名单部门时
|
|
|
|
+ onBlackChange({list}) {
|
|
|
|
+ list.forEach(i => {
|
|
|
|
+ i.select = !!this.form.blackUserList.find(j => j.id == i.id);
|
|
|
|
+ });
|
|
|
|
+ this.userChecks = list;
|
|
|
|
+ },
|
|
|
|
+ // 选择部门时
|
|
onDeptChange() {
|
|
onDeptChange() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- let nodes = this.$refs.dept.getCheckedNodes()
|
|
|
|
- this.form.dpList = nodes.map((i) => ({ id: i.id, name: i.title }))
|
|
|
|
- })
|
|
|
|
|
|
+ let nodes = this.$refs.dept.getCheckedNodes();
|
|
|
|
+ this.form.dpList = nodes.map(i => ({id: i.id, name: i.title}));
|
|
|
|
+ });
|
|
},
|
|
},
|
|
|
|
+ // 选择角色时
|
|
onRoleChange() {
|
|
onRoleChange() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- let nodes = this.$refs.role.getCheckedNodes()
|
|
|
|
- this.form.roleList = nodes.map((i) => ({ id: i.id, name: i.title }))
|
|
|
|
- })
|
|
|
|
|
|
+ let nodes = this.$refs.role.getCheckedNodes();
|
|
|
|
+ this.form.roleList = nodes.map(i => ({id: i.id, name: i.title}));
|
|
|
|
+ });
|
|
},
|
|
},
|
|
getData() {
|
|
getData() {
|
|
let { size, current } = this.page
|
|
let { size, current } = this.page
|
|
@@ -299,18 +504,22 @@ export default {
|
|
groupPage(data).then((res) => {
|
|
groupPage(data).then((res) => {
|
|
let { records, total } = res.data.data
|
|
let { records, total } = res.data.data
|
|
this.page.total = total
|
|
this.page.total = total
|
|
- this.groupList = records.map((i) => {
|
|
|
|
- let { dpList, roleList, userList } = JSON.parse(i.permJson)
|
|
|
|
- return { ...i, dpList, roleList, userList }
|
|
|
|
- })
|
|
|
|
|
|
+ this.groupList = records.map(i => {
|
|
|
|
+ let {dpList, roleList, userList, blackUserList} = JSON.parse(i.permJson);
|
|
|
|
+ dpList = dpList || [];
|
|
|
|
+ roleList = roleList || [];
|
|
|
|
+ userList = userList || [];
|
|
|
|
+ blackUserList = blackUserList || [];
|
|
|
|
+ return {...i, dpList, roleList, userList, blackUserList};
|
|
|
|
+ });
|
|
})
|
|
})
|
|
},
|
|
},
|
|
onSubmit() {
|
|
onSubmit() {
|
|
- let { permName, dpList, roleList, userList, typeId } = this.form
|
|
|
|
|
|
+ let { permName, dpList, roleList, userList, typeId, blackUserList } = this.form
|
|
if (!permName || !typeId) {
|
|
if (!permName || !typeId) {
|
|
return this.$message({ type: 'warning', message: '请填写完整' })
|
|
return this.$message({ type: 'warning', message: '请填写完整' })
|
|
}
|
|
}
|
|
- let data = { permName, typeId, permJson: JSON.stringify({ dpList, roleList, userList }) }
|
|
|
|
|
|
+ let data = { permName, typeId, permJson: JSON.stringify({ dpList, roleList, userList,blackUserList }) }
|
|
if (this.form.id) {
|
|
if (this.form.id) {
|
|
data.id = this.form.id
|
|
data.id = this.form.id
|
|
}
|
|
}
|
|
@@ -332,13 +541,15 @@ export default {
|
|
if (item) {
|
|
if (item) {
|
|
this.form = item
|
|
this.form = item
|
|
} else {
|
|
} else {
|
|
- this.form = { permName: '', dpList: [], roleList: [], userList: [], typeId: 0 }
|
|
|
|
|
|
+ this.form = { permName: '', dpList: [], roleList: [], userList: [], blackUserList: [],
|
|
|
|
+ typeId: this.nowTypeId || '' }
|
|
}
|
|
}
|
|
this.show = true
|
|
this.show = true
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.$refs.dept.setCheckedKeys(item ? item.dpList.map((i) => i.id) : [])
|
|
this.$refs.dept.setCheckedKeys(item ? item.dpList.map((i) => i.id) : [])
|
|
this.$refs.role.setCheckedKeys(item ? item.roleList.map((i) => i.id) : [])
|
|
this.$refs.role.setCheckedKeys(item ? item.roleList.map((i) => i.id) : [])
|
|
this.$refs.user.setCheckedKeys(item ? item.userList.map((i) => i.id) : [])
|
|
this.$refs.user.setCheckedKeys(item ? item.userList.map((i) => i.id) : [])
|
|
|
|
+ this.$refs.black.setCheckedKeys(item ? item.blackUserList.map(i => i.id) : []);
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -375,13 +586,21 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-wrapper {
|
|
.right-wrapper {
|
|
- padding: 10px 10px 0;
|
|
|
|
flex: 1;
|
|
flex: 1;
|
|
- overflow-y: auto;
|
|
|
|
|
|
+ padding: 10px 10px 0;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .my-menu {
|
|
|
|
+ flex: 0 0 40px;
|
|
|
|
+ }
|
|
|
|
+ .main {
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ }
|
|
.item {
|
|
.item {
|
|
margin: 10px;
|
|
margin: 10px;
|
|
- border: 1px solid #dcdfe6;
|
|
|
|
- transition: all 0.2s;
|
|
|
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
|
+ transition: all .2s;
|
|
&:hover {
|
|
&:hover {
|
|
border: 1px solid #409eff;
|
|
border: 1px solid #409eff;
|
|
}
|
|
}
|
|
@@ -412,19 +631,46 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .my-paging {
|
|
|
|
+ padding: 10px;
|
|
|
|
+ flex: 0 0 50px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.auth-group-dialog {
|
|
.auth-group-dialog {
|
|
.selected {
|
|
.selected {
|
|
height: 100px;
|
|
height: 100px;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
- border: 1px solid #dcdfe6;
|
|
|
|
|
|
+ border: 1px solid #DCDFE6;
|
|
padding: 5px;
|
|
padding: 5px;
|
|
.tag {
|
|
.tag {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- margin: 5px;
|
|
|
|
|
|
+ margin: 5px 10px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
line-height: 16px;
|
|
|
|
+ .el-icon-close {
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ color: red;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .el-tab-pane {
|
|
|
|
+ height: 300px;
|
|
|
|
+ display: flex;
|
|
|
|
+ .left, .right {
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ .name {
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ .el-checkbox {
|
|
|
|
+ margin: 3px 15px;
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btns {
|
|
.btns {
|