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.
341 lines
14 KiB
341 lines
14 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 } from 'antd';
|
|
import ProTable from '@ant-design/pro-table';
|
|
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user';
|
|
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 } = 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();
|
|
|
|
|
|
useEffect(() => {
|
|
dispatch(getDepMessage())
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (depMessage.length) {
|
|
setDepSelectedKeys([depMessage[0].id])
|
|
dispatch(getDepUser(depMessage[0].id))
|
|
}
|
|
}, [depMessage])
|
|
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: '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) }}>编辑</Button>,
|
|
<Popconfirm
|
|
title="确认删除?"
|
|
onConfirm={() => {
|
|
delUsers([record.id])
|
|
}}
|
|
>
|
|
<Button type="link">删除</Button>
|
|
</Popconfirm>,
|
|
<Button
|
|
type="link"
|
|
onClick={() => {
|
|
setModalRecord(record);
|
|
setPwdModalVisible(true);
|
|
}}
|
|
>重置密码</Button>
|
|
]
|
|
},
|
|
},
|
|
];
|
|
|
|
//弹窗确认
|
|
const onConfirm = (values) => {
|
|
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());
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
//打开弹窗
|
|
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) => {
|
|
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 => {
|
|
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>
|
|
}
|
|
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')}
|
|
>新建部门</Button>
|
|
{
|
|
depMessage.length ?
|
|
<Tree
|
|
height={clientHeight - 95}
|
|
defaultExpandedKeys={[depMessage[0].id]}
|
|
selectedKeys={depSelectedKeys}
|
|
onSelect={(selectedKeys, e) => {
|
|
if (e.selected) {
|
|
setSelectedTree(selectedKeys)
|
|
setDepSelectedKeys(selectedKeys)
|
|
dispatch(getDepUser(selectedKeys[0]))
|
|
}
|
|
}}
|
|
style={{ paddingTop: 20 }}
|
|
>
|
|
{
|
|
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) }}>
|
|
{
|
|
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%" }}>
|
|
|
|
<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>
|
|
|
|
{
|
|
depMessage.length && modalVisible ?
|
|
<UserModal
|
|
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 } = state;
|
|
// console.log(state);
|
|
return {
|
|
clientHeight: global.clientHeight,
|
|
loading: depMessage.isRequesting,
|
|
depMessage: depMessage.data || [],
|
|
depUser: depUser.data || []
|
|
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(UserManage);
|
|
|