|
|
@ -1,17 +1,17 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Col, Row, Button, Tree, ButtonGroup, RadioGroup, Radio, Checkbox, CheckboxGroup, Popconfirm, Modal, Form, useFormApi } from '@douyinfe/semi-ui'; |
|
|
|
import { Col, Row, Button, Tree, ButtonGroup, RadioGroup, Radio, Checkbox, CheckboxGroup, Popconfirm, Toast } from '@douyinfe/semi-ui'; |
|
|
|
import EmployeeAuthModal from './employeeAuthModal' |
|
|
|
import EmployeeAuthUserModal from './employeeAuthUserModal' |
|
|
|
import '../style.less' |
|
|
|
|
|
|
|
const EmployeeAuth = (props) => { |
|
|
|
const form = useRef(); |
|
|
|
const { dispatch, actions, roleList, userRoleList } = props |
|
|
|
const { dispatch, actions, roleList, userRoleList, resourceList } = props |
|
|
|
const [dataRange, setDataRange] = useState(1); |
|
|
|
const [checkedList, setCheckedList] = useState([]); |
|
|
|
const [indeterminate, setIndeterminate] = useState(true); |
|
|
|
const [checkAll, setCheckall] = useState(false); |
|
|
|
const [roleId, setRoleId] = useState(); |
|
|
|
const [two, setTwo] = useState({}); |
|
|
|
const [visible, setVisible] = useState(false); |
|
|
|
const [eidtRole, setEidtRole] = useState(null); |
|
|
|
const [eidtTit, setEidtTit] = useState(null); |
|
|
@ -22,11 +22,13 @@ const EmployeeAuth = (props) => { |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
getRoleList() |
|
|
|
dispatch(actions.humanAffairs.getResource()) |
|
|
|
}, []) |
|
|
|
let hrUser = JSON.parse(sessionStorage.getItem('hrUser')) |
|
|
|
console.log(hrUser, '登录返回'); |
|
|
|
console.log(roleList, '角色列表'); |
|
|
|
console.log(userRoleList, '用户角色关联'); |
|
|
|
console.log(resourceList, '权限列表'); |
|
|
|
const button = ( |
|
|
|
<ButtonGroup |
|
|
|
size="small" |
|
|
@ -71,7 +73,7 @@ const EmployeeAuth = (props) => { |
|
|
|
size="small" |
|
|
|
theme="borderless" |
|
|
|
> |
|
|
|
<Button>删除</Button> |
|
|
|
{/* <Button>删除</Button> */} |
|
|
|
</ButtonGroup> |
|
|
|
</div> |
|
|
|
), |
|
|
@ -83,7 +85,7 @@ const EmployeeAuth = (props) => { |
|
|
|
} |
|
|
|
roleLists.push({ |
|
|
|
label: ( |
|
|
|
<div style={style}> |
|
|
|
<div style={style} onClick={() => { roleListBtn(e.id) }}> |
|
|
|
<span>{e.name}</span> |
|
|
|
<ButtonGroup |
|
|
|
size="small" |
|
|
@ -109,45 +111,93 @@ const EmployeeAuth = (props) => { |
|
|
|
const dataRangeChange = (e) => { |
|
|
|
setDataRange(e.target.value); |
|
|
|
}; |
|
|
|
const plainOptions = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '绩效考核', |
|
|
|
child: [ |
|
|
|
{ id: 1, name: '基本动作', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '删除' }] }, |
|
|
|
{ id: 2, name: '员工考核', child: [{ id: 5, name: '查看' }, { id: 6, name: '添加' }, { id: 7, name: '编辑' }, { id: 8, name: '删除' }] }, |
|
|
|
{ id: 1, name: '中层考核', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '删除' }] }, |
|
|
|
{ id: 2, name: '高管考核', child: [{ id: 5, name: '查看' }, { id: 6, name: '添加' }, { id: 7, name: '编辑' }, { id: 8, name: '删除' }] }, |
|
|
|
{ id: 1, name: '员工绩效', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '删除' }] }, |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '模块2', |
|
|
|
child: [ |
|
|
|
{ id: 1, name: '模块2子模块1', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '删除' }] }, |
|
|
|
{ id: 2, name: '模块2子模块2', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '删除' }] } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '模块3', |
|
|
|
child: [ |
|
|
|
{ id: 1, name: '模块3子模块1', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '导入' }] }, |
|
|
|
{ id: 2, name: '模块3子模块2', child: [{ id: 1, name: '查看' }, { id: 2, name: '添加' }, { id: 3, name: '编辑' }, { id: 4, name: '导出' }] } |
|
|
|
] |
|
|
|
}, |
|
|
|
]; |
|
|
|
const onCheckAllChange = (e) => { |
|
|
|
setCheckedList(e.target.checked ? plainOptions : []); |
|
|
|
setIndeterminate(false); |
|
|
|
setCheckall(e.target.checked); |
|
|
|
}; |
|
|
|
const onChange = (checkedList) => { |
|
|
|
setCheckedList(checkedList); |
|
|
|
setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length); |
|
|
|
setCheckall(checkedList.length === plainOptions.length); |
|
|
|
const treeList = [] |
|
|
|
if (resourceList && resourceList.rows) { |
|
|
|
resourceList.rows.forEach((item) => { |
|
|
|
item.child = resourceList.rows.filter((sec) => { |
|
|
|
return sec.parentId === item.id |
|
|
|
}) |
|
|
|
if (item.parentId === null) { |
|
|
|
treeList.push(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const onChangeOne = (value, recod) => { |
|
|
|
let twos = two |
|
|
|
let selList = [] |
|
|
|
recod.child.forEach(e => { |
|
|
|
if (value.target.checked) { |
|
|
|
twos[e.id] = true |
|
|
|
} else { |
|
|
|
twos[e.id] = false |
|
|
|
} |
|
|
|
if (e.child.length) { |
|
|
|
e.child.forEach(i => { |
|
|
|
selList.push(i.id) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
if (value.target.checked) { |
|
|
|
twos[value.target.value] = true |
|
|
|
setTwo(twos) |
|
|
|
setCheckedList([...checkedList, ...selList]) |
|
|
|
} else { |
|
|
|
twos[value.target.value] = false |
|
|
|
setCheckedList(getDiffer(checkedList, selList)); |
|
|
|
setTwo(twos) |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(treeList, '权限树形结构') |
|
|
|
const onCheckAllChange = (value, recod) => { |
|
|
|
console.log(value.target, '第二阶', recod); |
|
|
|
let selList = [] |
|
|
|
recod.child.forEach(i => { |
|
|
|
if (i.id == value.target.value) { |
|
|
|
if (i.child.length) { |
|
|
|
i.child.forEach(s => { |
|
|
|
selList.push(s.id) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
let twos = two |
|
|
|
if (value.target.checked) { |
|
|
|
setCheckedList([...checkedList, ...selList]) |
|
|
|
twos[value.target.value] = true |
|
|
|
twos[recod.id] = true |
|
|
|
setTwo(two) |
|
|
|
} else { |
|
|
|
setCheckedList(getDiffer(checkedList, selList)); |
|
|
|
twos[value.target.value] = false |
|
|
|
setTwo(two) |
|
|
|
} |
|
|
|
}; |
|
|
|
const checkItem = (e, recod) => { |
|
|
|
let check = [e.target.value] |
|
|
|
let twos = two |
|
|
|
let twosid |
|
|
|
if (e.target.checked) { |
|
|
|
setCheckedList([...checkedList, ...check]) |
|
|
|
resourceList.rows.forEach(e => { |
|
|
|
console.log(e, '==============', check[0]); |
|
|
|
if (e.id == check[0]) { |
|
|
|
twosid = e.parentId |
|
|
|
} |
|
|
|
}) |
|
|
|
twos[twosid] = true |
|
|
|
twos[recod.id] = true |
|
|
|
setTwo(twos) |
|
|
|
} else { |
|
|
|
setCheckedList(getDiffer(checkedList, check)); |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(two, 'two'); |
|
|
|
const getDiffer = (arr1, arr2) => { |
|
|
|
let arr = arr1.filter(e => { |
|
|
|
return !arr2.includes(e) |
|
|
|
}) |
|
|
|
return arr |
|
|
|
} |
|
|
|
const handleCancel = () => { |
|
|
|
setVisible(false); |
|
|
|
}; |
|
|
@ -170,6 +220,45 @@ const EmployeeAuth = (props) => { |
|
|
|
const handleCancelUser = () => { |
|
|
|
setVisibleUser(false); |
|
|
|
}; |
|
|
|
const roleListBtn = (id) => { |
|
|
|
setRoleId(id) |
|
|
|
dispatch(actions.humanAffairs.getRoleResource({ id })).then(res => { |
|
|
|
if (res.success) { |
|
|
|
let two = {} |
|
|
|
let checkList = [] |
|
|
|
if (res.payload.data && res.payload.data.rows.length) { |
|
|
|
console.log(res.payload.data, '-------'); |
|
|
|
checkList = res.payload.data.rows.map(e => { |
|
|
|
two[e.resId] = true |
|
|
|
return e.resId |
|
|
|
}) |
|
|
|
setCheckedList(checkList) |
|
|
|
setTwo(two) |
|
|
|
}else{ |
|
|
|
setCheckedList([]) |
|
|
|
setTwo(two) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const handlOk = () => { |
|
|
|
console.log(roleId, '请求的角色id'); |
|
|
|
console.log(checkedList, '请求三阶参数'); |
|
|
|
console.log(two, '请求一二阶参数'); |
|
|
|
let resourceId = []; |
|
|
|
for (let item in two) { |
|
|
|
if (two[item]) { |
|
|
|
resourceId.push(parseInt(item)); |
|
|
|
} |
|
|
|
} |
|
|
|
resourceId = [...checkedList, ...resourceId] |
|
|
|
if (roleId == undefined || resourceId.length == 0) { |
|
|
|
Toast.error('请选择角色和权限!') |
|
|
|
} else { |
|
|
|
dispatch(actions.humanAffairs.addRoleResource({ roleId, resourceId })) |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ padding: '0px 12px' }}> |
|
|
@ -232,15 +321,15 @@ const EmployeeAuth = (props) => { |
|
|
|
<h2>权限范围:</h2> |
|
|
|
<Checkbox style={{ float: 'left', marginTop: 17, }} >全部权限</Checkbox> |
|
|
|
</div> |
|
|
|
{plainOptions.map(e => { |
|
|
|
{treeList.map(e => { |
|
|
|
return <div className='codeList'> |
|
|
|
<Checkbox style={{ borderBottom: '1px solid #f2f2f2', padding: '10px 10px' }} key={e.id}>{e.name}</Checkbox> |
|
|
|
<Checkbox onChange={(value) => { onChangeOne(value, e) }} style={{ borderBottom: '1px solid #f2f2f2', padding: '10px 10px' }} checked={two[e.id]} key={e.id} value={e.id}>{e.name}</Checkbox> |
|
|
|
{e.child.map(i => { |
|
|
|
return <div> |
|
|
|
<Checkbox value={i.id} style={{ borderBottom: '1px solid #f2f2f2', padding: '10px 10px' }} key={i.id} onChange={onCheckAllChange}>{i.name}</Checkbox> |
|
|
|
<CheckboxGroup style={{ width: '100%', borderBottom: '1px solid #f2f2f2', padding: '10px 10px' }} direction='horizontal'> |
|
|
|
<Checkbox value={i.id} style={{ borderBottom: '1px solid #f2f2f2', padding: '10px 10px' }} key={i.id} checked={two[i.id]} onChange={(value) => { onCheckAllChange(value, e) }}>{i.name}</Checkbox> |
|
|
|
<CheckboxGroup style={{ width: '100%', borderBottom: '1px solid #f2f2f2', padding: '10px 10px' }} direction='horizontal' value={checkedList}> |
|
|
|
{ |
|
|
|
i.child.map(s => (<Checkbox key={s.id} value={s.id} >{s.name}</Checkbox>)) |
|
|
|
i.child.map(s => (<Checkbox onChange={(value) => { checkItem(value, e) }} key={s.id} value={s.id} >{s.name}</Checkbox>)) |
|
|
|
} |
|
|
|
</CheckboxGroup> |
|
|
|
</div> |
|
|
@ -248,7 +337,7 @@ const EmployeeAuth = (props) => { |
|
|
|
|
|
|
|
</div> |
|
|
|
})} |
|
|
|
|
|
|
|
<Button onClick={handlOk} theme='solid' style={{ background: '#0099FF', marginTop: 10 }}>保存</Button> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</div> |
|
|
@ -266,12 +355,13 @@ const EmployeeAuth = (props) => { |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global, roleList, userRoleList } = state; |
|
|
|
const { auth, global, roleList, userRoleList, resourceList } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
roleList: roleList.data, |
|
|
|
userRoleList: userRoleList.data |
|
|
|
userRoleList: userRoleList.data, |
|
|
|
resourceList: resourceList.data |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|