|
|
|
@ -7,13 +7,14 @@ import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, c |
|
|
|
import UserModal from '../components/userModal'; |
|
|
|
import ResetPwd from '../components/resetPwd'; |
|
|
|
import DeptModal from '../components/deptModal'; |
|
|
|
import './user.less'; |
|
|
|
|
|
|
|
const TreeNode = Tree.TreeNode; |
|
|
|
|
|
|
|
const UserManage = (props) => { |
|
|
|
const user = JSON.parse(sessionStorage.getItem('user')); |
|
|
|
const [tableList, settableList] = useState([]) |
|
|
|
const { dispatch, loading, depMessage, depUser, clientHeight,actions } = props; |
|
|
|
const { dispatch, loading, depMessage, depUser, clientHeight, actions } = props; |
|
|
|
// 部门
|
|
|
|
const [deptModalVisible, setDeptModalVisible] = useState(false); |
|
|
|
const [deptModalType, setDeptModalType] = useState(); |
|
|
|
@ -32,16 +33,16 @@ const UserManage = (props) => { |
|
|
|
projectList() |
|
|
|
}, []) |
|
|
|
|
|
|
|
const projectList = (obj) => { |
|
|
|
|
|
|
|
const projectList = (obj) => { |
|
|
|
|
|
|
|
dispatch(projectRegime.getProjectList()).then(res => { |
|
|
|
// console.log(res)
|
|
|
|
if (res.success) { |
|
|
|
settableList(res.payload.data?.rows) |
|
|
|
// setLimits(res.payload.data?.count)
|
|
|
|
} |
|
|
|
// console.log(res)
|
|
|
|
if (res.success) { |
|
|
|
settableList(res.payload.data?.rows) |
|
|
|
// setLimits(res.payload.data?.count)
|
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (depMessage.length) { |
|
|
|
@ -186,11 +187,11 @@ const UserManage = (props) => { |
|
|
|
|
|
|
|
const renderTree = (item, id) => { |
|
|
|
// let cannotDel = item.users.length || item.subordinate?.filter(is => is.users.length).length;//自己下面有成员 或者下级部门下有成员 不能删除
|
|
|
|
return <div style={{ display: 'flex', width: '6vw', justifyContent: 'space-between' }}> |
|
|
|
return <div style={{ display: 'flex', width: '10vw', justifyContent: 'space-between' }}> |
|
|
|
<Tooltip title={item.name}> |
|
|
|
<div style={{ width: '70%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div> |
|
|
|
<div style={{ width: '80%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div> |
|
|
|
</Tooltip> |
|
|
|
<div style={{ width: '30%' }} > |
|
|
|
<div style={{ width: '20%' }} > |
|
|
|
{ |
|
|
|
depSelectedKeys == id && user.username === "SuperAdmin" ? |
|
|
|
<> |
|
|
|
@ -209,127 +210,129 @@ const UserManage = (props) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
console.log(tableList,'tableList') |
|
|
|
return (<div > |
|
|
|
<Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */> |
|
|
|
<Row gutter={16} /* style={{ overflow: "scroll" }} */> |
|
|
|
<Col flex="260px" style={{ height: '100%' }}> |
|
|
|
<Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24, }}> |
|
|
|
{ |
|
|
|
user.username === "SuperAdmin" && <Button |
|
|
|
type="primary" |
|
|
|
key="primary" |
|
|
|
style={{ margin: '16px 0px' }} |
|
|
|
onClick={() => openDeptModal('create')} |
|
|
|
>新建部门</Button> |
|
|
|
} |
|
|
|
{ |
|
|
|
depMessage.length ? |
|
|
|
<Tree |
|
|
|
height={clientHeight - 95} |
|
|
|
defaultExpandedKeys={[depMessage[0].id]} |
|
|
|
selectedKeys={depSelectedKeys} |
|
|
|
onSelect={(selectedKeys, e) => { |
|
|
|
if (e.selected) { |
|
|
|
setDepSelectedKeys(selectedKeys) |
|
|
|
dispatch(getDepUser(selectedKeys[0])) |
|
|
|
} |
|
|
|
}} |
|
|
|
// treeData={depMessage}
|
|
|
|
// fieldNames={{
|
|
|
|
// title: 'name',
|
|
|
|
// key: 'id',
|
|
|
|
// children: 'subordinate'
|
|
|
|
// }}
|
|
|
|
> |
|
|
|
{ |
|
|
|
depMessage.map((s, index) => { |
|
|
|
return <TreeNode title={renderTree(s, s.id)} key={s.id} > |
|
|
|
{ |
|
|
|
s.subordinate.map(k => { |
|
|
|
return <TreeNode title={renderTree(k, k.id)} key={k.id} onMouseOver={() => { setIShowIcon(k.id) }} onMouseOut={() => { setIShowIcon(null) }}> |
|
|
|
</TreeNode> |
|
|
|
}) |
|
|
|
} |
|
|
|
</TreeNode> |
|
|
|
}) |
|
|
|
} |
|
|
|
</Tree> : '' |
|
|
|
} |
|
|
|
</Card> |
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}> |
|
|
|
<Card title="用户" bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}> |
|
|
|
<ProTable |
|
|
|
columns={columns} |
|
|
|
dataSource={depUser} |
|
|
|
style={{ width: "100% ", height: clientHeight - 95, overflow: "auto" }} |
|
|
|
rowSelection={{ |
|
|
|
selectedRowKeys: rowSelected, |
|
|
|
onChange: (selectedRowKeys) => { |
|
|
|
setRowSelected(selectedRowKeys); |
|
|
|
|
|
|
|
}, |
|
|
|
getCheckboxProps: (record) => { |
|
|
|
return { |
|
|
|
disabled: record.username === 'SuperAdmin', |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
options={false} |
|
|
|
search={false} |
|
|
|
rowKey="id" |
|
|
|
toolBarRender={() => [ |
|
|
|
<span> |
|
|
|
<Button |
|
|
|
type="primary" |
|
|
|
key="primary" |
|
|
|
style={{ marginRight: 10 }} |
|
|
|
onClick={() => openModal('create')} |
|
|
|
>新建用户</Button> |
|
|
|
<Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button> |
|
|
|
<Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }}> |
|
|
|
<Button>批量删除</Button> |
|
|
|
</Popconfirm> |
|
|
|
</span> |
|
|
|
]} |
|
|
|
/> |
|
|
|
</Card> |
|
|
|
{ |
|
|
|
deptModalVisible ? |
|
|
|
<DeptModal |
|
|
|
visible={deptModalVisible} |
|
|
|
onVisibleChange={setDeptModalVisible} |
|
|
|
modalType={deptModalType} |
|
|
|
onConfirm={onDeptConfirm} |
|
|
|
editData={deptModalRecord} |
|
|
|
depts={depMessage} |
|
|
|
/> |
|
|
|
: '' |
|
|
|
} |
|
|
|
return (<> |
|
|
|
<Spin spinning={loading} style={{ height: clientHeight }}> |
|
|
|
<div className='dep-box'> |
|
|
|
<div className='top'> |
|
|
|
<div className='title'> |
|
|
|
<span className='line'></span> |
|
|
|
<span className='cn'>部门</span> |
|
|
|
<span className='en'> DEPARTMENT</span> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
depMessage.length && modalVisible ? |
|
|
|
<UserModal |
|
|
|
visible={modalVisible} |
|
|
|
onVisibleChange={setModalVisible} |
|
|
|
modalType={modalType} |
|
|
|
onConfirm={onConfirm} |
|
|
|
editData={{...modalRecord,structure:modalRecord?.structure||[]}} |
|
|
|
tableList={tableList} |
|
|
|
/> |
|
|
|
: '' |
|
|
|
user.username === "SuperAdmin" && <Button |
|
|
|
type="primary" |
|
|
|
key="primary" |
|
|
|
onClick={() => openDeptModal('create')} |
|
|
|
>新建部门</Button> |
|
|
|
} |
|
|
|
{pwdModalVisible ? <ResetPwd visible={pwdModalVisible} |
|
|
|
onVisibleChange={setPwdModalVisible} |
|
|
|
onConfirm={onPwdConfirm} /> : ''} |
|
|
|
</div> |
|
|
|
{ |
|
|
|
depMessage.length ? |
|
|
|
<Tree |
|
|
|
style={{ width: 272 }} |
|
|
|
height={150} |
|
|
|
defaultExpandedKeys={[depMessage[0].id]} |
|
|
|
selectedKeys={depSelectedKeys} |
|
|
|
onSelect={(selectedKeys, e) => { |
|
|
|
if (e.selected) { |
|
|
|
setDepSelectedKeys(selectedKeys) |
|
|
|
dispatch(getDepUser(selectedKeys[0])) |
|
|
|
} |
|
|
|
}} |
|
|
|
// treeData={depMessage}
|
|
|
|
// fieldNames={{
|
|
|
|
// title: 'name',
|
|
|
|
// key: 'id',
|
|
|
|
// children: 'subordinate'
|
|
|
|
// }}
|
|
|
|
> |
|
|
|
{ |
|
|
|
depMessage.map((s, index) => { |
|
|
|
return <TreeNode title={renderTree(s, s.id)} key={s.id} > |
|
|
|
{ |
|
|
|
s.subordinate.map(k => { |
|
|
|
return <TreeNode title={renderTree(k, k.id)} key={k.id} onMouseOver={() => { setIShowIcon(k.id) }} onMouseOut={() => { setIShowIcon(null) }}> |
|
|
|
</TreeNode> |
|
|
|
}) |
|
|
|
} |
|
|
|
</TreeNode> |
|
|
|
}) |
|
|
|
} |
|
|
|
</Tree> : '' |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div className='user-box'> |
|
|
|
<div className='top' style={{ marginBottom: 19 }}> |
|
|
|
<div className='title'> |
|
|
|
<span className='line'></span> |
|
|
|
<span className='cn'>用户</span> |
|
|
|
<span className='en'> USER</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<Button |
|
|
|
type="primary" |
|
|
|
key="primary" |
|
|
|
style={{ marginRight: 10 }} |
|
|
|
onClick={() => openModal('create')} |
|
|
|
>新建用户</Button> |
|
|
|
<Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button> |
|
|
|
<Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }}> |
|
|
|
<Button>批量删除</Button> |
|
|
|
</Popconfirm> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ProTable |
|
|
|
columns={columns} |
|
|
|
dataSource={depUser} |
|
|
|
style={{ width: "100% ", height: clientHeight - 371, overflow: "auto" }} |
|
|
|
rowSelection={{ |
|
|
|
selectedRowKeys: rowSelected, |
|
|
|
onChange: (selectedRowKeys) => { |
|
|
|
setRowSelected(selectedRowKeys); |
|
|
|
|
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
}, |
|
|
|
getCheckboxProps: (record) => { |
|
|
|
return { |
|
|
|
disabled: record.username === 'SuperAdmin', |
|
|
|
} |
|
|
|
}, |
|
|
|
}} |
|
|
|
options={false} |
|
|
|
search={false} |
|
|
|
rowKey="id" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
deptModalVisible ? |
|
|
|
<DeptModal |
|
|
|
visible={deptModalVisible} |
|
|
|
onVisibleChange={setDeptModalVisible} |
|
|
|
modalType={deptModalType} |
|
|
|
onConfirm={onDeptConfirm} |
|
|
|
editData={deptModalRecord} |
|
|
|
depts={depMessage} |
|
|
|
/> |
|
|
|
: '' |
|
|
|
} |
|
|
|
{ |
|
|
|
depMessage.length && modalVisible ? |
|
|
|
<UserModal |
|
|
|
visible={modalVisible} |
|
|
|
onVisibleChange={setModalVisible} |
|
|
|
modalType={modalType} |
|
|
|
onConfirm={onConfirm} |
|
|
|
editData={{ ...modalRecord, structure: modalRecord?.structure || [] }} |
|
|
|
tableList={tableList} |
|
|
|
/> |
|
|
|
: '' |
|
|
|
} |
|
|
|
{pwdModalVisible ? <ResetPwd visible={pwdModalVisible} |
|
|
|
onVisibleChange={setPwdModalVisible} |
|
|
|
onConfirm={onPwdConfirm} /> : ''} |
|
|
|
</Spin> |
|
|
|
</div> |
|
|
|
|
|
|
|
) |
|
|
|
</>) |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
|
