You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
450 lines
18 KiB
450 lines
18 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { DeleteOutlined, EllipsisOutlined, FormOutlined } from '@ant-design/icons';
|
|
import { Spin, Space, Button, Popconfirm, Row, Col, Tree, Table, Card, Switch, Tooltip, Breadcrumb } from 'antd';
|
|
import ProTable from '@ant-design/pro-table';
|
|
import { getDepById } from '../actions/user';
|
|
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user'
|
|
import { postUserRes } from '../actions/authority'
|
|
import UserModal from '../components/userModal';
|
|
import ResetPwd from '../components/resetPwd';
|
|
import DepModal from '../components/depModal';
|
|
|
|
const TreeNode = Tree.TreeNode;
|
|
|
|
const UserManage = (props) => {
|
|
const { dispatch, loading, depMessage, depUser, clientHeight, user } = props
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [modalType, setModalType] = useState();
|
|
const [modalRecord, setModalRecord] = useState();
|
|
const [pwdModalVisible, setPwdModalVisible] = useState(false);
|
|
const [depSelectedKeys, setDepSelectedKeys] = useState([])
|
|
const [rowSelected, setRowSelected] = useState([])
|
|
const [depModalVisible, setDepModalVisible] = useState(false);
|
|
const [depModalType, setDepModalType] = useState();
|
|
const [depModalRecord, setDepModalRecord] = useState();
|
|
const [selectedTree, setSelectedTree] = useState();
|
|
const [depCrumbs, setDepCrumbs] = useState([]);
|
|
const [depUserCopy, setDepUserCopy] = useState([])//用于存放除了自己的管理的数组，即自己不能调整自己是否为管理员
|
|
const [uid, setuid] = useState()
|
|
const [editAble, setEditAble] = useState(user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'USERMANAGE')[0].isshow === "true" ? true : '')//控制操作(新增删除等操作，对应权限的'不可编辑')是否可操作
|
|
const [depMessagedata, setdepMessagedata] = useState(depMessage)
|
|
console.log('depMessagedata', depMessagedata)
|
|
useEffect(async () => {
|
|
if (depMessage.length) {
|
|
console.log('depMessage', depMessage)
|
|
//超级管理员展示所有部门
|
|
if (user?.username === 'SuperAdmin') {
|
|
setdepMessagedata(depMessage)
|
|
setDepSelectedKeys([depMessage[0].id])
|
|
dispatch(getDepUser(depMessage[0].id))
|
|
} else {
|
|
//不是超级管理员，展示相应部门的数据
|
|
dispatch(getDepUser(user.departmentId))
|
|
const res = await dispatch(getDepById({ deptId: parseInt(user.departmentId) }))
|
|
console.log('resssss', res)
|
|
setdepMessagedata(res.payload.data)
|
|
// setDepSelectedKeys([res.payload.data[0].id])
|
|
// dispatch(getDepUser(res.payload.data[0].id))
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}, [depMessage])
|
|
useEffect(() => {
|
|
let code = ['USERMANAGE', 'AUTHORIMANAGE']
|
|
//console.log('你來u盧克嗎', depUser, uid)
|
|
// console.log(depUser.filter(i=>i.phone===uid)[0]?.id,'当前的用户user')
|
|
if (depUser?.filter(i => i.phone === uid)[0]?.id) {
|
|
//console.log('你來u盧克嗎', depUser, uid)
|
|
|
|
dispatch(postUserRes({ userId: depUser.filter(i => i.phone === uid)[0]?.id, resCode: code, isShow: false }))
|
|
}
|
|
}, [uid])
|
|
useEffect(() => {
|
|
dispatch(getDepMessage())
|
|
}, [])
|
|
useEffect(() => {
|
|
console.log('depuser', depUser, user)
|
|
const copy = depUser.filter((item) => {
|
|
console.log('item1', item)
|
|
return item.id !== user.id//把自己筛选出去
|
|
})
|
|
console.log('copy', copy)
|
|
setDepUserCopy(copy)
|
|
}, [depUser])
|
|
useEffect(() => {
|
|
if (depMessage.length) {
|
|
|
|
|
|
}
|
|
}, [depMessage])
|
|
|
|
useEffect(() => {
|
|
const list = handleCrumbs(depSelectedKeys)
|
|
setDepCrumbs(list)
|
|
|
|
}, [depSelectedKeys])
|
|
const columns =
|
|
[
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: '手机号(用户名)',
|
|
dataIndex: 'phone',
|
|
},
|
|
{
|
|
title: '邮箱',
|
|
dataIndex: 'email',
|
|
}, {
|
|
title: '启用状态',
|
|
dataIndex: 'enable',
|
|
render: (_, r) => {
|
|
return <Switch checkedChildren="启用" unCheckedChildren="禁用" disabled defaultChecked={r.enable} />
|
|
}
|
|
},
|
|
{
|
|
title: '是否管理员',
|
|
dataIndex: 'isadmin',
|
|
render: (_, r) => {
|
|
return <div>{r.isAdmin ? '是' : '否'}</div>
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
render: (dom, record) => {
|
|
// return record.username == 'SuperAdmin' ? '' : [
|
|
// <Button type="link" onClick={() => { openModal('edit', record) }}>编辑</Button>,
|
|
// <Popconfirm
|
|
// title="确认删除?"
|
|
// onConfirm={() => {
|
|
// delUsers([record.id])
|
|
// }}
|
|
// >
|
|
// <Button type="link">删除</Button>
|
|
// </Popconfirm>,
|
|
// <Button
|
|
// type="link"
|
|
// onClick={() => {
|
|
// setModalRecord(record);
|
|
// setPwdModalVisible(true);
|
|
// }}
|
|
// >重置密码</Button>
|
|
// ]
|
|
return [
|
|
<Button type="link" onClick={() => { openModal('edit', record) }} disabled={editAble}>编辑</Button>,
|
|
<Popconfirm
|
|
title="确认删除?"
|
|
onConfirm={() => {
|
|
delUsers([record.id])
|
|
}}
|
|
disabled={editAble}
|
|
>
|
|
<Button type="link" disabled={editAble}>删除</Button>
|
|
</Popconfirm>,
|
|
<Button
|
|
type="link"
|
|
onClick={() => {
|
|
setModalRecord(record);
|
|
setPwdModalVisible(true);
|
|
}}
|
|
disabled={editAble}
|
|
>重置密码</Button>
|
|
]
|
|
},
|
|
},
|
|
];
|
|
|
|
//弹窗确认
|
|
const onConfirm = (values) => {
|
|
console.log('values.contract', values.contract)
|
|
if (modalType == 'edit') {
|
|
dispatch(updateUser(modalRecord.id, values.contract)).then(res => {
|
|
if (res.success) {
|
|
setModalVisible(false);
|
|
dispatch(getDepUser(depSelectedKeys[0]));
|
|
}
|
|
});
|
|
} else {
|
|
dispatch(createUser(values.contract)).then(res => {
|
|
if (res.success) {
|
|
setModalVisible(false);
|
|
dispatch(getDepMessage())
|
|
setuid(values.contract.phone)
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
//打开弹窗
|
|
const openModal = (type, record) => {
|
|
setModalVisible(true);
|
|
setModalType(type);
|
|
if (type == 'edit') {
|
|
setModalRecord(record);
|
|
} else {
|
|
setModalRecord(null);
|
|
}
|
|
}
|
|
|
|
//打开部门弹窗
|
|
const openDepModal = (type, record) => {
|
|
setDepModalVisible(true)
|
|
setDepModalType(type)
|
|
if (type == 'edit') {
|
|
setDepModalRecord(record);
|
|
} else {
|
|
setModalRecord(null);
|
|
}
|
|
|
|
}
|
|
|
|
//删除用户
|
|
const delUsers = (ids, type) => {
|
|
dispatch(delUser(ids)).then(res => {
|
|
dispatch(getDepUser(depSelectedKeys[0]));
|
|
if (type == 'batch') {
|
|
setRowSelected([]);
|
|
}
|
|
});
|
|
}
|
|
|
|
//重置密码
|
|
const onPwdConfirm = (values) => {
|
|
dispatch(resetPwd(modalRecord.id, { password: values.password })).then(res => {
|
|
if (res.success) {
|
|
setPwdModalVisible(false);
|
|
dispatch(getDepUser(depSelectedKeys[0]));
|
|
}
|
|
});
|
|
}
|
|
//部门新增及编辑
|
|
const onDepConfirm = (data) => {
|
|
console.log('depModalType:', depModalType);
|
|
console.log('data:', data);
|
|
if (depModalType == 'edit') {
|
|
|
|
dispatch(updateDep(data)).then(res => {
|
|
if (res.success) {
|
|
setDepModalVisible(false);
|
|
dispatch(getDepMessage());
|
|
}
|
|
});
|
|
} else {
|
|
dispatch(createDep(data)).then(res => {
|
|
if (res.success) {
|
|
setDepModalVisible(false);
|
|
dispatch(getDepMessage());
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
// 删除部门
|
|
const delDepartment = (id) => {
|
|
dispatch(delDep(id)).then(res => {
|
|
if (res.success) {
|
|
dispatch(getDepMessage())
|
|
}
|
|
});
|
|
}
|
|
const renderTree = (item, id) => {
|
|
return <div style={{ display: 'flex', width: '6vw', justifyContent: 'space-between' }}>
|
|
<Tooltip title={item.name}>
|
|
<div style={{ width: '70%', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{item.name}</div>
|
|
</Tooltip>
|
|
<div style={{ width: '30%' }} >
|
|
{
|
|
selectedTree == id ? <>
|
|
<FormOutlined onClick={() => {
|
|
setDepModalRecord(item)
|
|
setDepModalVisible(true)
|
|
setDepModalType('edit')
|
|
}} />
|
|
<Popconfirm title='是否确认删除?' onConfirm={() => { delDepartment(id) }}>
|
|
<DeleteOutlined style={{ marginLeft: 5 }} />
|
|
</Popconfirm>
|
|
</> : null
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
|
|
const handleCrumbs = (id) => {
|
|
let crumbsList = []
|
|
|
|
depMessage?.forEach(d => {
|
|
if (id == d.id) {
|
|
crumbsList.push(d.name)
|
|
}
|
|
d.subordinate?.forEach(s => {
|
|
if (id == s.id) {
|
|
crumbsList.push(d.name)
|
|
crumbsList.push(s.name)
|
|
}
|
|
s.subordinate?.forEach(a => {
|
|
if (id == a.id) {
|
|
crumbsList.push(d.name)
|
|
crumbsList.push(s.name)
|
|
crumbsList.push(a.name)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
return crumbsList
|
|
}
|
|
|
|
|
|
return (<div >
|
|
<Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */>
|
|
<Row gutter={16} /* style={{ overflow: "scroll" }} */>
|
|
<Col flex="260px" style={{ height: '100%' }}>
|
|
|
|
<Card bordered={false} bodyStyle={{ padding: 8, paddingTop: 24, }}>
|
|
<Button
|
|
type="primary"
|
|
key="primary"
|
|
style={{ marginLeft: 10 }}
|
|
onClick={() => openDepModal('create')}
|
|
disabled={editAble}
|
|
>
|
|
新建部门</Button>
|
|
|
|
{
|
|
depMessage.length ?
|
|
<Tree
|
|
height={clientHeight - 95}
|
|
defaultExpandedKeys={[depMessagedata[0]?.id]}
|
|
selectedKeys={depSelectedKeys}
|
|
onSelect={(selectedKeys, e) => {
|
|
// console.log('selectedKeys:',selectedKeys);
|
|
|
|
if (e.selected) {
|
|
handleCrumbs(selectedKeys)
|
|
setSelectedTree(selectedKeys)
|
|
setDepSelectedKeys(selectedKeys)
|
|
dispatch(getDepUser(selectedKeys[0]))
|
|
}
|
|
}}
|
|
style={{ paddingTop: 20 }}
|
|
>
|
|
{
|
|
depMessagedata?.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) }}>
|
|
{
|
|
k.subordinate.map(i => {
|
|
return <TreeNode title={renderTree(i, i.id)} key={i.id} onMouseOver={() => { setIShowIcon(i.id) }} onMouseOut={() => { setIShowIcon(null) }}>
|
|
</TreeNode>
|
|
})
|
|
}
|
|
</TreeNode>
|
|
})
|
|
}
|
|
</TreeNode>
|
|
})
|
|
}
|
|
</Tree> : ''
|
|
}
|
|
</Card>
|
|
</Col>
|
|
|
|
<Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}>
|
|
<Card bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}>
|
|
<Breadcrumb separator=">" style={{ marginLeft: 24 }}>
|
|
{
|
|
depCrumbs?.map((c, index) => { return (<Breadcrumb.Item key={index}>{c}</Breadcrumb.Item>) })
|
|
}
|
|
</Breadcrumb>
|
|
<ProTable
|
|
columns={columns}
|
|
dataSource={depUserCopy}
|
|
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')}
|
|
disabled={editAble}
|
|
>新建用户</Button>
|
|
{/* <Button style={{ marginRight: 10 }} onClick={() => { dispatch(getDepUser(depSelectedKeys[0])); }}>刷新</Button> */}
|
|
<Popconfirm title="确认删除?" onConfirm={() => { delUsers(rowSelected, 'batch') }} disabled={editAble}>
|
|
<Button disabled={editAble}>批量删除</Button>
|
|
</Popconfirm>
|
|
</span>
|
|
]}
|
|
/>
|
|
</Card>
|
|
|
|
{
|
|
depMessage.length && modalVisible ?
|
|
<UserModal
|
|
dispatch={dispatch}
|
|
visible={modalVisible}
|
|
onVisibleChange={setModalVisible}
|
|
modalType={modalType}
|
|
onConfirm={onConfirm}
|
|
editData={modalRecord}
|
|
/>
|
|
: ''
|
|
}
|
|
{pwdModalVisible ? <ResetPwd visible={pwdModalVisible}
|
|
onVisibleChange={setPwdModalVisible}
|
|
onConfirm={onPwdConfirm} /> : ''}
|
|
|
|
{depModalVisible ? <DepModal visible={depModalVisible}
|
|
onVisibleChange={setDepModalVisible}
|
|
depModalType={depModalType}
|
|
data={depModalRecord}
|
|
onConfirm={onDepConfirm} /> : ''}
|
|
|
|
|
|
|
|
</Col>
|
|
</Row>
|
|
</Spin>
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { depMessage, depUser, global, auth } = state;
|
|
// console.log(state);
|
|
return {
|
|
clientHeight: global.clientHeight,
|
|
loading: depMessage.isRequesting,
|
|
depMessage: depMessage.data || [],
|
|
depUser: depUser.data || [],
|
|
user: auth.user
|
|
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(UserManage);
|
|
|