|
@ -1,11 +1,12 @@ |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { EllipsisOutlined } from '@ant-design/icons'; |
|
|
import { DeleteOutlined, EllipsisOutlined, FormOutlined } from '@ant-design/icons'; |
|
|
import { Spin, Space, Button, Popconfirm, Row, Col, Tree, Table, Card, Switch } from 'antd'; |
|
|
import { Spin, Space, Button, Popconfirm, Row, Col, Tree, Table, Card, Switch, Tooltip } from 'antd'; |
|
|
import ProTable from '@ant-design/pro-table'; |
|
|
import ProTable from '@ant-design/pro-table'; |
|
|
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd } from '../actions/user'; |
|
|
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user'; |
|
|
import UserModal from '../components/userModal'; |
|
|
import UserModal from '../components/userModal'; |
|
|
import ResetPwd from '../components/resetPwd'; |
|
|
import ResetPwd from '../components/resetPwd'; |
|
|
|
|
|
import DepModal from '../components/depModal'; |
|
|
|
|
|
|
|
|
const TreeNode = Tree.TreeNode; |
|
|
const TreeNode = Tree.TreeNode; |
|
|
|
|
|
|
|
@ -17,6 +18,10 @@ const UserManage = (props) => { |
|
|
const [pwdModalVisible, setPwdModalVisible] = useState(false); |
|
|
const [pwdModalVisible, setPwdModalVisible] = useState(false); |
|
|
const [depSelectedKeys, setDepSelectedKeys] = useState([]) |
|
|
const [depSelectedKeys, setDepSelectedKeys] = useState([]) |
|
|
const [rowSelected, setRowSelected] = useState([]) |
|
|
const [rowSelected, setRowSelected] = useState([]) |
|
|
|
|
|
const [depModalVisible, setDepModalVisible] = useState(false); |
|
|
|
|
|
const [depModalType, setDepModalType] = useState(); |
|
|
|
|
|
const [depModalRecord, setDepModalRecord] = useState(); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
dispatch(getDepMessage()) |
|
|
dispatch(getDepMessage()) |
|
|
}, []) |
|
|
}, []) |
|
@ -27,20 +32,20 @@ const UserManage = (props) => { |
|
|
dispatch(getDepUser(depMessage[0].id)) |
|
|
dispatch(getDepUser(depMessage[0].id)) |
|
|
} |
|
|
} |
|
|
}, [depMessage]) |
|
|
}, [depMessage]) |
|
|
|
|
|
|
|
|
const columns = |
|
|
const columns = |
|
|
[ |
|
|
[ |
|
|
{ |
|
|
{ |
|
|
title: '姓名', |
|
|
title: '姓名', |
|
|
dataIndex: 'name', |
|
|
dataIndex: 'name', |
|
|
}, { |
|
|
}, { |
|
|
title: '用户名(手机号)', |
|
|
title: '用户名', |
|
|
dataIndex: 'username', |
|
|
dataIndex: 'username', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '职位', |
|
|
title: '手机号', |
|
|
dataIndex: 'post', |
|
|
dataIndex: 'phone', |
|
|
}, { |
|
|
}, |
|
|
|
|
|
{ |
|
|
title: '邮箱', |
|
|
title: '邮箱', |
|
|
dataIndex: 'email', |
|
|
dataIndex: 'email', |
|
|
}, { |
|
|
}, { |
|
@ -53,7 +58,6 @@ const UserManage = (props) => { |
|
|
title: '操作', |
|
|
title: '操作', |
|
|
dataIndex: 'action', |
|
|
dataIndex: 'action', |
|
|
render: (dom, record) => { |
|
|
render: (dom, record) => { |
|
|
|
|
|
|
|
|
// return record.username == 'SuperAdmin' ? '' : [
|
|
|
// return record.username == 'SuperAdmin' ? '' : [
|
|
|
// <Button type="link" onClick={() => { openModal('edit', record) }}>编辑</Button>,
|
|
|
// <Button type="link" onClick={() => { openModal('edit', record) }}>编辑</Button>,
|
|
|
// <Popconfirm
|
|
|
// <Popconfirm
|
|
@ -107,7 +111,7 @@ const UserManage = (props) => { |
|
|
dispatch(createUser(values.contract)).then(res => { |
|
|
dispatch(createUser(values.contract)).then(res => { |
|
|
if (res.success) { |
|
|
if (res.success) { |
|
|
setModalVisible(false); |
|
|
setModalVisible(false); |
|
|
dispatch(getDepUser(depSelectedKeys[0])); |
|
|
dispatch(getDepMessage()); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
@ -125,6 +129,18 @@ const UserManage = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//打开部门弹窗
|
|
|
|
|
|
const openDepModal = (type, record) => { |
|
|
|
|
|
setDepModalVisible(true) |
|
|
|
|
|
setDepModalType(type) |
|
|
|
|
|
if (type == 'edit') { |
|
|
|
|
|
setDepModalRecord(record); |
|
|
|
|
|
} else { |
|
|
|
|
|
setModalRecord(null); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
//删除用户
|
|
|
//删除用户
|
|
|
const delUsers = (ids, type) => { |
|
|
const delUsers = (ids, type) => { |
|
|
dispatch(delUser(ids)).then(res => { |
|
|
dispatch(delUser(ids)).then(res => { |
|
@ -144,7 +160,53 @@ const UserManage = (props) => { |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
//部门新增及编辑
|
|
|
|
|
|
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%' }} > |
|
|
|
|
|
{ |
|
|
|
|
|
depSelectedKeys == id ? <> |
|
|
|
|
|
<FormOutlined onClick={() => { |
|
|
|
|
|
setDepModalRecord(item) |
|
|
|
|
|
setDepModalVisible(true) |
|
|
|
|
|
setDepModalType('edit') |
|
|
|
|
|
}} /> |
|
|
|
|
|
<Popconfirm title='是否确认删除?' onConfirm={() => { delDepartment(id) }}> |
|
|
|
|
|
<DeleteOutlined style={{ marginLeft: 5 }} /> |
|
|
|
|
|
</Popconfirm> |
|
|
|
|
|
</> : null |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
return (<div > |
|
|
return (<div > |
|
|
<Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */> |
|
|
<Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */> |
|
|
<Row gutter={16} /* style={{ overflow: "scroll" }} */> |
|
|
<Row gutter={16} /* style={{ overflow: "scroll" }} */> |
|
@ -155,7 +217,7 @@ const UserManage = (props) => { |
|
|
type="primary" |
|
|
type="primary" |
|
|
key="primary" |
|
|
key="primary" |
|
|
style={{ marginLeft: 50 }} |
|
|
style={{ marginLeft: 50 }} |
|
|
onClick={() => openModal('create')} |
|
|
onClick={() => openDepModal('create')} |
|
|
>新建部门</Button> |
|
|
>新建部门</Button> |
|
|
{ |
|
|
{ |
|
|
depMessage.length ? |
|
|
depMessage.length ? |
|
@ -164,19 +226,33 @@ const UserManage = (props) => { |
|
|
defaultExpandedKeys={[depMessage[0].id]} |
|
|
defaultExpandedKeys={[depMessage[0].id]} |
|
|
selectedKeys={depSelectedKeys} |
|
|
selectedKeys={depSelectedKeys} |
|
|
onSelect={(selectedKeys, e) => { |
|
|
onSelect={(selectedKeys, e) => { |
|
|
|
|
|
|
|
|
if (e.selected) { |
|
|
if (e.selected) { |
|
|
setDepSelectedKeys(selectedKeys) |
|
|
setDepSelectedKeys(selectedKeys) |
|
|
dispatch(getDepUser(selectedKeys[0])) |
|
|
dispatch(getDepUser(selectedKeys[0])) |
|
|
} |
|
|
} |
|
|
}} |
|
|
}} |
|
|
treeData={depMessage} |
|
|
|
|
|
fieldNames={{ |
|
|
|
|
|
title: 'name', |
|
|
|
|
|
key: 'id', |
|
|
|
|
|
children: 'subordinate' |
|
|
|
|
|
}} |
|
|
|
|
|
style={{ paddingTop: 20 }} |
|
|
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> |
|
|
</Card> |
|
|
</Col> |
|
|
</Col> |
|
@ -234,6 +310,14 @@ const UserManage = (props) => { |
|
|
onVisibleChange={setPwdModalVisible} |
|
|
onVisibleChange={setPwdModalVisible} |
|
|
onConfirm={onPwdConfirm} /> : ''} |
|
|
onConfirm={onPwdConfirm} /> : ''} |
|
|
|
|
|
|
|
|
|
|
|
{depModalVisible ? <DepModal visible={depModalVisible} |
|
|
|
|
|
onVisibleChange={setDepModalVisible} |
|
|
|
|
|
depModalType={depModalType} |
|
|
|
|
|
data={depModalRecord} |
|
|
|
|
|
onConfirm={onDepConfirm} /> : ''} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col> |
|
|
</Col> |
|
|
</Row> |
|
|
</Row> |
|
|
</Spin> |
|
|
</Spin> |
|
@ -254,4 +338,4 @@ function mapStateToProps(state) { |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(UserManage); |
|
|
export default connect(mapStateToProps)(UserManage); |
|
|