doctorList.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import React, { useState, useEffect, useContext, componentWillReceiveProps } from 'react';
  2. import { Form, Input, Button, Table, Select, Pagination, Space, TreeSelect, Tag } from 'antd';
  3. import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
  4. import apiObj from '@api/index';
  5. import { useSelector } from 'react-redux'
  6. import utils from '@utils/index'
  7. import { getOverflowOptions } from 'antd/lib/tooltip/placements';
  8. const { post, api, xPost } = apiObj;
  9. const { Option } = Select;
  10. const { SHOW_PARENT } = TreeSelect;
  11. const { organizationData } = utils;
  12. function DoctorList(props) {
  13. useEffect(() => {
  14. getDoctorPage();
  15. getHospitalTree()
  16. }, []);
  17. const { checkeds,checkDoct } = props;
  18. const [form] = Form.useForm();
  19. const [doctorList, setDoctorList] = useState([]);
  20. const [name, setName] = useState("");
  21. const [phone, setPhone] = useState("");
  22. const [pages, setPages] = useState("1");
  23. const [current, setCurrent] = useState("5");
  24. const [treeData, setTreeData] = useState([]);
  25. // const [selectedRowKeys, setSelectedRowKeys] = useState();
  26. const [addHospitalTreeVO, setAddHospitalTreeVO] = useState({
  27. depts: [],
  28. hospitals: []
  29. });
  30. const selectedRowKeys = checkeds.selectedRowKeys ? checkeds.selectedRowKeys.slice() : []
  31. console.log(selectedRowKeys)
  32. //获取可看医生列表
  33. function getDoctorPage() {
  34. const param = {
  35. pages: pages,
  36. current: current,
  37. mobilePhone: phone,
  38. name: name,
  39. depts: addHospitalTreeVO.depts,
  40. hospitals: unique(addHospitalTreeVO.hospitals)
  41. }
  42. post(api.getDoctorPage, param).then((res) => {
  43. if (res.data.code === 200) {
  44. const data = res.data.data;
  45. setDoctorList(data.records);
  46. }
  47. })
  48. }
  49. //获取当前用户组织
  50. function getHospitalTree() {
  51. post(api.getHospitalTree).then((res) => {
  52. if (res.data.code === 200) {
  53. const data = res.data.data;
  54. let arr = data ? data : []
  55. arr = organizationData(arr)
  56. setTreeData(arr)
  57. }
  58. })
  59. }
  60. // 去重
  61. function unique(arr) {
  62. return arr.filter(function (item, index, arr) {
  63. return arr.indexOf(item, 0) === index;
  64. });
  65. }
  66. const onFinish = (value) => {
  67. getDoctorPage(value);
  68. };
  69. const onReset = () => {
  70. form.resetFields();
  71. getDoctorPage();
  72. };
  73. const handleName = (event) => {
  74. setName(event.target.value)
  75. }
  76. const handlePhone = (event) => {
  77. setPhone(event.target.value)
  78. }
  79. const columns = [
  80. { title: '姓名', dataIndex: 'name', key: 'index' },
  81. { title: '电话号码', dataIndex: 'mobilePhone', key: 'index' },
  82. { title: '所属组织', dataIndex: 'hospitalName', key: 'index' },
  83. ]
  84. const onChange = value => {
  85. let addHospitalTreeVO = {
  86. depts: [],
  87. hospitals: []
  88. }
  89. value.forEach(it => {
  90. let arr = it.split('-')
  91. let len = arr.length
  92. if (len == 3) {
  93. addHospitalTreeVO.depts.push(arr[2])
  94. } else {
  95. addHospitalTreeVO.hospitals.push(arr[1])
  96. treeData.forEach(item => {
  97. if (item.value.split('-')[1] == arr[1]) {
  98. item.children.forEach(its => {
  99. addHospitalTreeVO.depts.push(its.value.split('-')[2])
  100. })
  101. }
  102. })
  103. }
  104. })
  105. setAddHospitalTreeVO(addHospitalTreeVO)
  106. };
  107. function onSelectChange(selectedRowKeys) {
  108. checkDoct(selectedRowKeys)
  109. }
  110. function submit() {
  111. getDoctorPage()
  112. }
  113. return (
  114. <div className="wrapper">
  115. <div className="doctor_header">
  116. <div className="doctor_header_left">
  117. <div className="left_item">
  118. 姓名:<Input placeholder="用户名" onChange={e => handleName(e)} style={{ width: 160 }} />
  119. </div>
  120. <div className="left_item">
  121. 手机号码:<Input placeholder="用户名" onChange={e => handlePhone(e)} style={{ width: 160 }} />
  122. </div>
  123. <div className="left_item">
  124. 所属组织:
  125. <TreeSelect
  126. showSearch={false}
  127. treeData={treeData}
  128. onChange={onChange}
  129. treeCheckable
  130. maxTagCount={1}
  131. showCheckedStrategy={SHOW_PARENT}
  132. placeholder="请选择组织"
  133. style={{ width: 160 }}
  134. />
  135. </div>
  136. <div className="left_item">
  137. <Space size="middle">
  138. <Button onClick={onReset}>
  139. 重置
  140. </Button>
  141. <Button type="primary" onClick={submit}>
  142. 查询
  143. </Button>
  144. </Space>
  145. </div>
  146. </div>
  147. </div>
  148. <div className="table">
  149. <div className="table-header">
  150. <span className="table-header-title">医生列表</span>
  151. </div>
  152. <Table
  153. rowSelection={{
  154. selectedRowKeys,
  155. onChange: onSelectChange,
  156. }}
  157. columns={columns}
  158. dataSource={doctorList}
  159. rowKey={record => record.id + '-' + record.name}
  160. pagination={{
  161. showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
  162. pageSizeOptions: ['15', '30', '60', '120'],
  163. pageSize: 5,
  164. }} />
  165. </div>
  166. </div>
  167. )
  168. }
  169. export default DoctorList;