index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. import { useEffect, useState } from 'react';
  2. import { useSelector } from 'react-redux'
  3. import { Table, Modal, message, Menu, Breadcrumb, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
  4. import { DownOutlined, PlusOutlined } from '@ant-design/icons';
  5. import AddSubOrg from './AddSubOrg';
  6. import './index.less';
  7. import apiObj from '@api/index';
  8. import OrgContext from './org-context';
  9. import utils from '@utils/index'
  10. const { pickCheckedTreeIds } = utils;
  11. const { post, api, xPost } = apiObj;
  12. const { Option } = Select;
  13. function OrgManager() {
  14. useEffect(() => {
  15. //监听resize事件
  16. // setTableHt(window.innerHeight - 260);
  17. // window.addEventListener('resize', () => {
  18. // setTableHt(window.innerHeight - 260);
  19. // });
  20. //刷新列表
  21. getTableData();
  22. //解绑事件
  23. // return function clear() {
  24. // window.removeEventListener("resize");
  25. // }
  26. }, []);
  27. const [dataSource, setDataSource] = useState([]); //列表数据
  28. // const [tableHt, setTableHt] = useState(300); //表格滚动高度
  29. const [visible, setVisible] = useState(false); //删除禁用确认弹窗显示
  30. const [addVisible, setAddVisible] = useState(false); //新增页面显示
  31. const [confirmLoading, setConfirmLoading] = useState(false);
  32. //弹窗类型:1删除 2有子组织、用户删除 3禁用 4有子组织、用户禁用 5重置密码
  33. const [modalType, setModalType] = useState(1);
  34. const [operId, setOperId] = useState(''); //当前操作的组织id
  35. const [orgId, setOrgId] = useState(''); //上级组织id
  36. const [orgName, setOrgName] = useState(''); //上级组织名称,新增修改用
  37. const [orgDetail, setOrgDetail] = useState(null);
  38. const [typeId, setTypeId] = useState('');
  39. const [type, setType] = useState('');
  40. //从state中取出状态、类型列表
  41. const staticInfo = useSelector(state => {
  42. return state.staticInfo;
  43. });
  44. const { hisTypeList, statusList } = staticInfo;
  45. const tipText = {
  46. 1: '确定要删除该组织?',
  47. 2: '当前组织内可能包含子组织或其相关用户,删除后所包含信息将一并被删除',
  48. 3: '确定要禁用该组织?',
  49. 4: '当前组织内可能包含子组织或其相关用户,禁用后所包含信息将一并被禁用',
  50. 5: '确定要重置该组织密码?',
  51. 6: '您还有内容未保存,确定要退出?',
  52. };
  53. //获取表格数据
  54. function getTableData(param = {}) {
  55. post(api.getHospitalListInfo, param).then((res) => {
  56. if (res.data.code === 200) {
  57. const data = res.data.data;
  58. setOrgId(data[0] ? data[0].hospitalId : '');
  59. setOrgName(data[0] ? data[0].hospitalName : '')
  60. setDataSource(data);
  61. }
  62. })
  63. }
  64. //启用/禁用
  65. function enable(flag, id, type) {
  66. const param = { HospitalId: id || operId, status: flag, type: type || typeId };
  67. xPost(api.disableHospital, param).then((res) => {
  68. if (res.data.code === 200) {
  69. getTableData();
  70. setVisible(false);
  71. message.success((flag ? '启用' : '禁用') + "成功");
  72. } else {
  73. message.warning(res.data.msg || '操作失败');
  74. }
  75. }).catch(() => {
  76. message.error("接口出错");
  77. });
  78. }
  79. //重置密码
  80. function onResetPsd() {
  81. const param = { HospitalId: operId };
  82. xPost(api.resetPassword, param).then((res) => {
  83. if (res.data.code === 200) {
  84. getTableData();
  85. setVisible(false)
  86. message.success("重置成功");
  87. } else {
  88. message.warning(res.data.msg || '操作失败');
  89. }
  90. }).catch(() => {
  91. message.error("接口出错");
  92. });
  93. }
  94. //删除
  95. function onDelete() {
  96. const param = { HospitalId: operId, type:typeId };
  97. xPost(api.deleteHospital, param).then((res) => {
  98. if (res.data.code === 200) {
  99. getTableData();
  100. setVisible(false);
  101. message.success("删除成功");
  102. } else {
  103. message.warning(res.data.msg || '操作失败');
  104. }
  105. }).catch(() => {
  106. message.error("接口出错");
  107. });
  108. }
  109. //显示弹窗
  110. function showModal(type, id, flag) {
  111. setModalType(type);
  112. setOperId(id);
  113. setVisible(true);
  114. setTypeId(flag)
  115. }
  116. //弹窗确认事件
  117. function handleOk() {
  118. if ("1,2".indexOf(modalType) > -1) {
  119. onDelete();
  120. } else if ("3,4".indexOf(modalType) > -1) {
  121. enable(0);
  122. } else if (modalType === 5) {
  123. onResetPsd();
  124. }
  125. }
  126. //弹窗取消
  127. function handleCancel() {
  128. setVisible(false);
  129. setAddVisible(false);
  130. }
  131. //新增子组织弹窗
  132. function showAddOrg() {
  133. setAddVisible(true);
  134. setType(1)
  135. setOrgDetail({
  136. parentId: orgId,
  137. parentName: orgName,
  138. status: 1
  139. })
  140. }
  141. function getOrgDetail(id, type) {
  142. xPost(api.getHospitalById, { HospitalId: id, type }).then((res) => {
  143. const { data, code } = res.data;
  144. if (code === 200) {
  145. structDetail(data);
  146. //setOrgDetail(res.data.data);
  147. } else {
  148. message.warning(res.data.msg || '获取详情失败')
  149. }
  150. });
  151. }
  152. function structDetail(data) {
  153. const content = JSON.parse(JSON.stringify(data).replace(/getHospitalUserDTO/g, "addHospitalUserVO"));
  154. const menuData = content.getRoleDTO.loginUserMenuResourceTree;
  155. content.confirmPsd = content.addHospitalUserVO.password
  156. let softwares = [], sids = [];
  157. for (let i = 0; i < menuData.length; i++) {
  158. const obj = pickCheckedTreeIds(menuData[i]);
  159. softwares.push(obj);
  160. sids.push(obj.id);
  161. }
  162. const fData = Object.assign({}, content, { softwares, sids });
  163. setOrgDetail(fData);
  164. }
  165. //修改子组织
  166. function editSubOrg(id, type) {
  167. getOrgDetail(id, type);
  168. setAddVisible(true);
  169. setType(2)
  170. setOperId(id);
  171. }
  172. //保存
  173. function addSubOrg(formData) {
  174. const param = formData;
  175. let url = api.addHospital
  176. const arr = formData.softwares.filter((it) => {
  177. if (Object.keys(it).length && it.softwareMenuIds && it.softwareMenuIds.length) {
  178. return it;
  179. }
  180. });
  181. if (type == 2) {
  182. url = api.updateHospital
  183. param.id = operId
  184. // delete param.addHospitalUserVO
  185. // delete param.confirmPsd
  186. }
  187. formData.softwares = arr;
  188. post(url, param).then((res) => {
  189. if (res.data.code === 200) {
  190. getTableData();
  191. setAddVisible(false);
  192. setOrgDetail(null)
  193. message.success("添加成功");
  194. } else {
  195. message.warning(res.data.msg || '操作失败');
  196. }
  197. }).catch(() => {
  198. message.error("接口出错");
  199. });
  200. }
  201. function goBack() {
  202. setAddVisible(false);
  203. setOrgDetail(null)
  204. }
  205. //表格渲染
  206. function RenderTable() {
  207. const columns = [
  208. { title: '组织机构层级', dataIndex: 'hospitalName', key: 'hospitalName' },
  209. {
  210. title: '类型', width: 150, key: 'type', render: (row) => {
  211. if (row.children) {
  212. return '-'
  213. } else {
  214. return row.typeName;
  215. }
  216. }
  217. },
  218. {
  219. title: '状态', width: 120, key: 'status', render: (row) => {
  220. if (row.children) {
  221. return '-'
  222. } else {
  223. return (<span className={(row.status === '1') ? 'Enable' : 'Disable'}>{row.statusName}</span>);
  224. }
  225. }
  226. },
  227. { title: '创建时间', width: 240, dataIndex: 'gmtCreate', key: 'gmtCreate' },
  228. {
  229. title: '操作', width: 240, key: 'operation', render: (row) => {
  230. //console.log(21,row)
  231. if (row.rootFlag) {
  232. return '-'
  233. }
  234. const menu = (
  235. <Menu>
  236. <Menu.Item key="0" onClick={() => showModal(5, row.hospitalId)}>重置密码</Menu.Item>
  237. <Menu.Item key="1" onClick={() => showModal((row.hasUserFlag || row.hasHospitalFlag ? 2 : 1), row.hospitalId, row.type)}>删除</Menu.Item>
  238. </Menu>
  239. );
  240. return (<Space size="middle">
  241. <a onClick={() => editSubOrg(row.hospitalId, row.type)}>修改</a>
  242. {row.status === '1' ? (<a onClick={() => showModal(row.hasUserFlag || row.hasHospitalFlag ? 4 : 3, row.hospitalId, row.type)}>禁用</a>) : (<a onClick={() => enable(1, row.hospitalId, row.type)}>启用</a>)}
  243. <Dropdown overlay={menu} trigger={['click']}>
  244. <a className="ant-dropdown-link">
  245. 更多 <DownOutlined />
  246. </a>
  247. </Dropdown>
  248. </Space>)
  249. }
  250. },
  251. ];
  252. return (
  253. <Table
  254. pagination={false}
  255. className="components-table-demo-nested"
  256. rowKey={record => record.hospitalId}
  257. columns={columns}
  258. dataSource={dataSource}
  259. />
  260. )
  261. }
  262. //筛选项渲染
  263. const [form] = Form.useForm();
  264. const onFinish = (values: any) => {
  265. getTableData(values);
  266. console.log('筛选项:', values);
  267. };
  268. const onReset = () => {
  269. form.resetFields();
  270. getTableData();
  271. };
  272. if (addVisible && orgDetail) {
  273. return (
  274. <OrgContext.Provider value={{ type,hisTypeList, save: addSubOrg, detail: orgDetail }}>
  275. <AddSubOrg back={goBack} />
  276. </OrgContext.Provider>
  277. )
  278. }
  279. return (
  280. <div className='wrapper'>
  281. <div className="filter-box">
  282. <Form form={form} name="control-hooks" onFinish={onFinish}>
  283. <Row gutter={24}>
  284. <Col span={5} key={0}>
  285. <Form.Item name="hospitalName" label="组织名称">
  286. <Input placeholder='组织名称' />
  287. </Form.Item>
  288. </Col>
  289. <Col span={5} key={1}>
  290. <Form.Item name="type" label="类型">
  291. <Select
  292. allowClear
  293. >
  294. {hisTypeList.map((item) => {
  295. return (
  296. <Option value={item.name} key={item.name}>{item.val}</Option>
  297. )
  298. })}
  299. </Select>
  300. </Form.Item>
  301. </Col>
  302. <Col span={5} key={2}>
  303. <Form.Item name="status" label="当前状态">
  304. <Select
  305. allowClear
  306. >
  307. {statusList.map((item) => {
  308. return (
  309. <Option value={item.name} key={item.name}>{item.val}</Option>
  310. )
  311. })}
  312. </Select>
  313. </Form.Item>
  314. </Col>
  315. <Col span={9} key={3}>
  316. <Form.Item>
  317. <Button type="primary" htmlType="submit">
  318. 查询
  319. </Button>
  320. <Button htmlType="button" onClick={onReset}>
  321. 重置
  322. </Button>
  323. </Form.Item>
  324. </Col>
  325. </Row>
  326. </Form>
  327. </div>
  328. <div className="table">
  329. <div className="table-header">
  330. <h2 className="table-title">组织管理</h2>
  331. <Button type="primary" icon={<PlusOutlined />} onClick={() => showAddOrg()}>新增子组织</Button>
  332. </div>
  333. <RenderTable />
  334. </div>
  335. <Modal
  336. title="提示"
  337. okText='确定'
  338. cancelText='取消'
  339. width={400}
  340. visible={visible}
  341. onOk={handleOk}
  342. confirmLoading={confirmLoading}
  343. onCancel={handleCancel}
  344. >
  345. <p>{tipText[modalType]}</p>
  346. </Modal>
  347. </div>
  348. )
  349. }
  350. export default OrgManager;