index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. import React, { useState, useEffect, useRef } from 'react';
  2. import { Form, Input, Button, Table, Select, Pagination, Space, Menu, Dropdown, Modal, Breadcrumb, message, Row, Col } from 'antd';
  3. import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
  4. import AddUser from './addUser'
  5. import '@common/common.less';
  6. import { useSelector } from 'react-redux'
  7. import apiObj from '@api/index';
  8. import UserContext from './user-context';
  9. const { post, api, xPost } = apiObj;
  10. const { Option } = Select;
  11. function UserManager() {
  12. useEffect(() => {
  13. getUserPage();
  14. }, []);
  15. const [userList, setUserList] = useState([]);
  16. const [title, setTitle] = useState("");
  17. const [visible, setVisible] = useState(false);
  18. const [userId, setUserId] = useState("");
  19. const [msvisible, setMsvisible] = useState(false);
  20. const [modalType, setModalType] = useState("");
  21. const [type, setType] = useState("");
  22. const [formData, setFormData] = useState(null);
  23. const [username, setUsername] = useState(null);
  24. const [roleList, setRoleList] = useState([]);
  25. const [total, setTotal] = useState(0);
  26. const [form] = Form.useForm();
  27. const tipText = {
  28. 1: '确定要删除该用户?',
  29. 2: '禁用后该用户将无法登录,确定要禁用该用户?',
  30. 3: '确定要重置该用户密码?',
  31. };
  32. const staticInfo = useSelector(state => {
  33. return state.staticInfo;
  34. });
  35. let list = []
  36. let params = {
  37. pages: 1,
  38. current: 1,
  39. size: 15
  40. }
  41. const { statusList } = staticInfo;
  42. //新增弹窗
  43. const showModal = (name, type, flag, userId) => {
  44. setVisible(type);
  45. setTitle(name);
  46. setType(flag)
  47. setUserId(userId)
  48. if (flag == 1) {
  49. setFormData({
  50. status: '1'
  51. })
  52. }
  53. if (flag == 3 || flag == 2) {
  54. getUserById(userId)
  55. }
  56. }
  57. //表格数据
  58. function getUserPage() {
  59. post(api.getUserPage, params).then((res) => {
  60. if (res.data.code === 200) {
  61. const data = res.data.data;
  62. setUserList(data.records);
  63. setTotal(data.total)
  64. }
  65. })
  66. }
  67. //查看用户
  68. function getUserById(userId) {
  69. xPost(api.getUserById, { userId: userId }).then((res) => {
  70. if (res.data.code === 200) {
  71. const data = res.data.data;
  72. let roles = []
  73. data.roles.forEach(item => {
  74. roles.push(item.roleId)
  75. })
  76. const arr = {
  77. username: data.username,
  78. mobilePhone: data.mobilePhone,
  79. password: data.password,
  80. againpassword: data.password,
  81. name: data.name,
  82. idcard: data.idcard,
  83. addHospitalTreeVO: getHospitals(data.hospitals),
  84. titleId: data.titleId,
  85. jobNo: data.jobNo,
  86. roles: roles,
  87. orderNo: data.orderNo,
  88. status: data.status,
  89. }
  90. setRoleList(data.roles)
  91. setFormData(arr)
  92. }
  93. })
  94. }
  95. // 处理组织结构数据回显
  96. function getHospitals(arr) {
  97. arr.forEach((item, i, array) => {
  98. item.value = item.hospitalId
  99. item.title = item.hospitalName
  100. if (!item.children && item.depts) {
  101. item.depts.forEach(it => {
  102. it.value = item.parentId + '-' + it.deptId
  103. if (it.relation == 1) {
  104. list.push(it.value)
  105. }
  106. })
  107. }
  108. if (item.type != 0 && item.relation == 1) {
  109. list.push(item.value)
  110. console.log(list)
  111. }
  112. if (item.children) {
  113. getHospitals(item.children)
  114. }
  115. })
  116. return list
  117. }
  118. // 禁用/启用接口
  119. function disableUser(userId, status) {
  120. const param = { userId: userId, status: status };
  121. xPost(api.disableUser, param).then((res) => {
  122. if (res.data.code === 200) {
  123. getUserPage();
  124. setMsvisible(false);
  125. message.success((status ? '启用' : '禁用') + "成功");
  126. } else {
  127. message.warning(res.data.msg || '操作失败');
  128. }
  129. }).catch(() => {
  130. message.error("接口出错");
  131. });
  132. }
  133. //重置密码
  134. function onResetPsd() {
  135. // const param = { HospitalId: operId };
  136. // xPost(api.disableHospital, param).then((res) => {
  137. // if (res.data.code === 200) {
  138. // getUserPage();
  139. // message.success("重置成功");
  140. // } else {
  141. // message.warning(res.data.msg || '操作失败');
  142. // }
  143. // }).catch(() => {
  144. // message.error("接口出错");
  145. // });
  146. }
  147. //删除
  148. function deleteUser() {
  149. const param = { userId: userId };
  150. xPost(api.deleteUser, param).then((res) => {
  151. if (res.data.code === 200) {
  152. getUserPage();
  153. setMsvisible(false);
  154. message.success("删除成功");
  155. } else {
  156. message.warning(res.data.msg || '操作失败');
  157. }
  158. }).catch(() => {
  159. message.error("接口出错");
  160. });
  161. }
  162. function onSizeChange(current, pageSize) {
  163. params.current = current
  164. params.size = pageSize
  165. getUserPage()
  166. }
  167. function changePage(page, pageSize) {
  168. params.current = page
  169. params.size = pageSize
  170. getUserPage()
  171. }
  172. const onFinish = (value) => {
  173. params = {
  174. ...params,
  175. ...value
  176. }
  177. getUserPage();
  178. };
  179. const onReset = () => {
  180. form.resetFields();
  181. getUserPage();
  182. };
  183. const messageBox = (type, id) => {
  184. setMsvisible(true)
  185. setUserId(id)
  186. setModalType(type)
  187. }
  188. //提示框确认事件
  189. function handleOk() {
  190. if (modalType == 1) {
  191. deleteUser(userId)
  192. } else if (modalType == 2) {
  193. disableUser(userId, 0)
  194. } else if (modalType == 3) {
  195. onResetPsd();
  196. }
  197. }
  198. //提示框取消
  199. function handleCancel() {
  200. setMsvisible(false);
  201. }
  202. function cancel() {
  203. setVisible(false)
  204. setFormData(null)
  205. }
  206. function userChange() {
  207. setVisible(false)
  208. }
  209. const columns = [
  210. { title: '用户名', dataIndex: 'username', key: 'index' },
  211. { title: '姓名', dataIndex: 'name', key: 'index' },
  212. { title: '所属组织', dataIndex: 'hospitalName', key: 'index' },
  213. { title: '工号', dataIndex: 'jobNo', key: 'index' },
  214. {
  215. title: '状态', dataIndex: 'status', key: 'status', render: (text, record) => (
  216. <Space size="middle">
  217. {record.status == 1 ?
  218. <span className="Enable">启用</span>
  219. :
  220. <span className="Disable">禁用</span>
  221. }
  222. </Space>
  223. )
  224. },
  225. {
  226. title: '操作', dataIndex: 'key', render: (text, record) => (
  227. <Space size="middle">
  228. <a onClick={e => showModal('查看用户', true, 3, record.userId)}>查看</a>
  229. <a onClick={e => showModal('修改用户', true, 2, record.userId)} >修改</a>
  230. <Dropdown overlay={menu.bind(this, record)} record={record}>
  231. <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
  232. 更多 <DownOutlined />
  233. </a>
  234. </Dropdown>
  235. </Space>
  236. )
  237. }
  238. ]
  239. const menu = (record) => {
  240. return (
  241. <Menu>
  242. <Menu.Item key="0">
  243. <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
  244. 重置密码
  245. </a>
  246. </Menu.Item>
  247. <Menu.Item key="1">
  248. {record.status === '1' ? (<a onClick={() => messageBox(2, record.userId)}>禁用</a>) : (<a onClick={() => disableUser(record.userId, 1)}>启用</a>)}
  249. </Menu.Item>
  250. <Menu.Item key="2">
  251. <a target="_blank" onClick={() => messageBox(1, record.userId)}>
  252. 删除
  253. </a>
  254. </Menu.Item>
  255. </Menu>
  256. )
  257. }
  258. return (
  259. <div className="wrapper">
  260. <div className="filter-box">
  261. <Form
  262. form={form}
  263. name="normal_login"
  264. onFinish={onFinish}
  265. initialValues={{ status: '' }}
  266. >
  267. <Row gutter={24}>
  268. <Col span={5} key={0}>
  269. <Form.Item label="用户名" name="username">
  270. <Input placeholder="用户名" />
  271. </Form.Item>
  272. </Col>
  273. <Col span={5} key={1}>
  274. <Form.Item label="姓名" name="name">
  275. <Input placeholder="姓名" />
  276. </Form.Item>
  277. </Col>
  278. <Col span={5} key={2}>
  279. <Form.Item name="status" label="当前状态">
  280. <Select
  281. allowClear
  282. >
  283. {statusList.map((item) => {
  284. return (
  285. <Option value={item.name} key={item.name}>{item.val}</Option>
  286. )
  287. })}
  288. </Select>
  289. </Form.Item>
  290. </Col>
  291. <Col span={6} key={3}>
  292. <Form.Item>
  293. <Button type="primary" htmlType="submit">
  294. 查询
  295. </Button>
  296. <Button onClick={onReset}>
  297. 重置
  298. </Button>
  299. </Form.Item>
  300. </Col>
  301. </Row>
  302. </Form>
  303. </div>
  304. <div className="table">
  305. <div className="table-header">
  306. <h2 className="table-title">用户管理</h2>
  307. <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增用户', true, 1)}>新增用户</Button>
  308. </div>
  309. <Table
  310. columns={columns}
  311. dataSource={userList}
  312. rowKey={record => record.userId + record.hospitalName}
  313. pagination={{
  314. pageNo: 1,
  315. pageSize: params.size,
  316. pageSizeOptions: ['15', '30', '60', '120'],
  317. showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
  318. onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
  319. onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
  320. total: total
  321. }} />
  322. </div>
  323. {visible && formData ?
  324. <Modal
  325. title={title}
  326. okText='确定'
  327. cancelText='取消'
  328. width={'45%'}
  329. visible={visible}
  330. onCancel={cancel}
  331. footer={null}
  332. forceRender={true}
  333. >
  334. <UserContext.Provider value={{ userId, type, formData, roleList }}>
  335. <AddUser userChange={userChange} />
  336. </UserContext.Provider>
  337. </Modal>
  338. : ''}
  339. <Modal
  340. title="提示"
  341. okText='确定'
  342. cancelText='取消'
  343. width={400}
  344. visible={msvisible}
  345. onOk={handleOk}
  346. onCancel={handleCancel}
  347. >
  348. <p>{tipText[modalType]}</p>
  349. </Modal>
  350. </div >
  351. )
  352. }
  353. export default UserManager;