暂存
This commit is contained in:
@@ -175,13 +175,15 @@
|
||||
<el-dropdown v-hasPermi="['system:user:resetPwd', 'system:user:edit']" size="mini" @command="(command) => handleCommand(command, scope.row)">
|
||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="handleResetPwd" icon="el-icon-key">重置密码</el-dropdown-item>
|
||||
<el-dropdown-item command="handleResetPwd" icon="el-icon-key">
|
||||
<span @click="openDrawer(scope.row)">部门权限</span>
|
||||
<el-dropdown-item icon="el-icon-key">重置密码</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-key">
|
||||
<span @click="openDeptDrawer(scope.row)">部门权限</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-key">数据权限</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-key">锁定账号</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-check">
|
||||
<span @click="openRoleDrawer(scope.row)">分配角色</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="handleResetPwd" icon="el-icon-key">数据权限</el-dropdown-item>
|
||||
<el-dropdown-item command="handleResetPwd" icon="el-icon-key">锁定账号</el-dropdown-item>
|
||||
<el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check">分配角色</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
@@ -192,31 +194,45 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-drawer
|
||||
title="分配部门权限"
|
||||
:title="drawerTitle"
|
||||
:visible.sync="deptDrawer"
|
||||
direction="rtl"
|
||||
:before-close="handleClose"
|
||||
:wrapperClosable="false"
|
||||
:wrapper-closable="false"
|
||||
size="35%"
|
||||
@close="clearCheck"
|
||||
>
|
||||
<div style="margin: 0 20px 0 20px">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
clearable
|
||||
size="mini"
|
||||
placeholder="请输入部门名称"
|
||||
prefix-icon="el-icon-search"
|
||||
class="filter-item"
|
||||
@input="getDeptDatas"
|
||||
<div style="margin: 0 20px 0 20px; height: 100%">
|
||||
<div style="height: 90%">
|
||||
<!-- <div class="head-container">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="deptName"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="mini"-->
|
||||
<!-- placeholder="请输入部门名称"-->
|
||||
<!-- prefix-icon="el-icon-search"-->
|
||||
<!-- class="filter-item"-->
|
||||
<!-- @input="getDeptDatas"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<el-tree
|
||||
ref="deptUser"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
:data="drawerDatas"
|
||||
:default-checked-keys="depChecked"
|
||||
:props="deptProps"
|
||||
:node-key="nodeKey"
|
||||
highlight-current
|
||||
check-strictly
|
||||
@check="handCheck"
|
||||
@check-change="checkChange"
|
||||
/>
|
||||
</div>
|
||||
<el-tree
|
||||
show-checkbox
|
||||
:data="deptDatas"
|
||||
:default-checked-keys="depChecked"
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
<div style="height: 10%">
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button type="primary" @click="saveChecked">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
@@ -263,6 +279,7 @@ export default {
|
||||
deptName: '', depts: [], deptDatas: [], level: 3, roles: [],
|
||||
roleDatas: [], // 多选时使用
|
||||
defaultProps: { children: 'children', label: 'name' },
|
||||
deptProps: { children: 'children', label: 'name' },
|
||||
permission: {
|
||||
add: ['admin', 'user:add'],
|
||||
edit: ['admin', 'user:edit'],
|
||||
@@ -283,7 +300,13 @@ export default {
|
||||
]
|
||||
},
|
||||
deptDrawer: false,
|
||||
depChecked: []
|
||||
depChecked: [],
|
||||
depCheckedId: '',
|
||||
drawerDatas: [], // ?
|
||||
drawerTitle: '',
|
||||
drawerHint: '',
|
||||
nodeKey: '',
|
||||
flag: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -516,10 +539,38 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
openDrawer(row) {
|
||||
openDeptDrawer(row) {
|
||||
crudDept.getDeptTree().then(res => {
|
||||
this.drawerDatas = res.content
|
||||
})
|
||||
this.drawerTitle = '分配部门权限'
|
||||
this.drawerHint = '请选择部门'
|
||||
this.nodeKey = 'dept_id'
|
||||
this.flag = true
|
||||
this.deptDrawer = true
|
||||
this.depChecked = row.depts
|
||||
this.depChecked = []
|
||||
this.depCheckedId = ''
|
||||
console.log(row)
|
||||
this.depChecked = row.depts
|
||||
this.depCheckedId = row.user_id
|
||||
},
|
||||
openRoleDrawer(row) {
|
||||
getAll().then(res => {
|
||||
this.drawerDatas = res
|
||||
})
|
||||
this.deptDrawer = true
|
||||
this.drawerTitle = '分配角色权限'
|
||||
this.drawerHint = '请选择角色'
|
||||
this.nodeKey = 'role_id'
|
||||
this.flag = false
|
||||
this.depChecked = []
|
||||
this.depCheckedId = ''
|
||||
console.log(row)
|
||||
this.depChecked = row.roles
|
||||
this.depCheckedId = row.user_id
|
||||
},
|
||||
clearCheck() {
|
||||
this.$refs.deptUser.setCheckedKeys([])
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
@@ -527,6 +578,70 @@ export default {
|
||||
done()
|
||||
})
|
||||
.catch(_ => {})
|
||||
},
|
||||
cancelForm() { // 关闭
|
||||
this.deptDrawer = false
|
||||
},
|
||||
saveChecked() {
|
||||
console.log(this.depCheckedId)
|
||||
console.log(this.$refs.deptUser.getCheckedKeys())
|
||||
const user = {
|
||||
user_id: this.depCheckedId,
|
||||
}
|
||||
if (this.flag) {
|
||||
user.depts = this.$refs.deptUser.getCheckedKeys()
|
||||
} else {
|
||||
user.roles = this.$refs.deptUser.getCheckedKeys()
|
||||
}
|
||||
crudUser.edit(user).then(res => {
|
||||
this.cancelForm()
|
||||
this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.crud.toQuery()
|
||||
})
|
||||
},
|
||||
// 覆盖原有勾选功能，父与子关联，子与父不关联
|
||||
handCheck(data, node) {
|
||||
this.hanleCheck(data, node, 'tree')
|
||||
},
|
||||
hanleCheck(data, node, treeName) {
|
||||
const _this = this
|
||||
// 获取当前节点是否被选中
|
||||
const isChecked = _this.$refs[treeName].getNode(data).checked
|
||||
// 如果当前节点被选中，则遍历下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消
|
||||
if (isChecked) {
|
||||
// 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
|
||||
data.children && data.children.length > 0 && setChildreChecked(data.children, true)
|
||||
} else {
|
||||
// 如果节点取消选中，则取消该节点下的子节点选中
|
||||
data.children && data.children.length > 0 && setChildreChecked(data.children, false)
|
||||
}
|
||||
function setChildreChecked(node, isChecked) {
|
||||
node.forEach(item => {
|
||||
item.children && item.children.length > 0 && setChildreChecked(item.children, isChecked)
|
||||
// 修改勾选状态
|
||||
_this.$refs[treeName].setChecked(item.name, isChecked)
|
||||
})
|
||||
}
|
||||
},
|
||||
checkChange(data, checked, indeterminate) {
|
||||
const _this = this
|
||||
// console.log(data, checked, indeterminate);
|
||||
// 选中全部子节点，父节点也默认选中，但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态
|
||||
const checkNode = _this.$refs.tree.getNode(data)// 获取当前节点
|
||||
// 勾选部分子节点，父节点变为半选状态
|
||||
if (checkNode.parent && checkNode.parent.childNodes.some(ele => ele.checked)) {
|
||||
checkNode.parent.indeterminate = true
|
||||
}
|
||||
// 勾选全部子节点，父节点变为全选状态
|
||||
if (checkNode.parent && checkNode.parent.childNodes.every(ele => ele.checked)) {
|
||||
checkNode.parent.checked = true
|
||||
checkNode.parent.indeterminate = false
|
||||
}
|
||||
// 如果取消所有第二节点的勾选状态，则第一层父节点也取消勾选
|
||||
if (checkNode.level == 2 && checkNode.parent.childNodes.every(ele => !ele.checked)) {
|
||||
checkNode.parent.checked = false
|
||||
checkNode.parent.indeterminate = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user