index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import { Layout, Dropdown, Menu, Modal, Input, Form, Space, Button } from 'antd';
  2. import { withRouter } from 'react-router'
  3. import { useState, useEffect } from 'react';
  4. import { useSelector, useDispatch } from 'react-redux';
  5. import MyMessage from "../MyMessage";
  6. import { panesNow } from '@reducers/tabPanes.js';
  7. import { getTimeDetail,getCookie,setCookie } from '@utils/index';
  8. import logo from '@images/logo.png';
  9. import msg from '@images/msg.png';
  10. import me from '@images/me.png';
  11. import down from '@images/down.png';
  12. import './index.less'
  13. import { message } from "antd/lib/index";
  14. import { add, active } from '@reducers/tabPanes'
  15. import { setSys, setUser} from '@reducers/userInfo.js';
  16. import apiObj from '@api/index';
  17. const { post, api, xPost } = apiObj;
  18. const propTypes = {
  19. }
  20. const defaultProps = {};
  21. const { Header } = Layout;
  22. function AHeader({ history, hideName }) {
  23. const dispatch = useDispatch();//当前选中的菜单
  24. const { panes } = useSelector(state => {
  25. return state.tabPanes;
  26. });
  27. const [form] = Form.useForm();
  28. const [dateTime, setDateTime] = useState('');
  29. const [visible, setVisible] = useState(false);
  30. //const [socket,setSocket] = useState(null);
  31. const [unReadNum,setUnReadNum] = useState(0);
  32. const { user, sysName } = useSelector((state) => {
  33. return state.userInfo;
  34. });
  35. //退出
  36. function loginOut() {
  37. localStorage.removeItem("token");
  38. setCookie();
  39. /*localStorage.removeItem("systemId");
  40. localStorage.removeItem("hospitalId");*/
  41. dispatch(panesNow([]));
  42. history.push('/login');
  43. }
  44. //获取未读消息数量
  45. function getNotNoticeCount(){
  46. xPost(api.getNotNoticeCount).then((res) => {
  47. if (res.data.code === 200) {
  48. const data = res.data.data||{};
  49. let count = data.count;
  50. count = count>99?'99+':count;
  51. setUnReadNum(count)
  52. initWebsocket(count);
  53. //dispatch(setUnReadNum(count));
  54. } else {
  55. //message.warning(res.data.msg || '请求失败');
  56. }
  57. })
  58. }
  59. //未读消息页面显示并带入未读筛选条件
  60. function showMyMsgPage(){
  61. const item = panes.find((it) => it.key === 'ZNTZ-WDTZ');
  62. if (item) { //已存在当前tab,则定位即可不增加
  63. dispatch(active({idName:'ZNTZ-WDTZ',isUnRead:true}));
  64. return;
  65. }
  66. dispatch(
  67. add({ title: '我的通知', content: <MyMessage />, key: 'ZNTZ-WDTZ&我的通知',isUnRead:true})
  68. )
  69. }
  70. async function initWebsocket(num){
  71. const mqtt = require('mqtt');
  72. const client = mqtt.connect('ws://192.168.2.237:15675/ws');
  73. //const userInfo = await getUserHos();
  74. //const userdata = userInfo.data.data;
  75. //handleUserInfo(userdata);
  76. const hisId = getCookie("hospitalId");
  77. //setSocket(client)
  78. client.on('connect', function () {
  79. client.subscribe(hisId+"-"+user.id, function (err) {
  80. if (!err) {
  81. console.log(hisId+"-"+user.id+"订阅成功")
  82. }
  83. })
  84. })
  85. client.on('message', function (topic, message) {
  86. let n = num>unReadNum?num:unReadNum;
  87. setUnReadNum(+n+1)
  88. console.log('收到消息+1:',message.toString())
  89. })
  90. }
  91. function handleUserInfo(data){
  92. const { userInfo, software } = data;
  93. const sysId = getCookie("systemId");
  94. const hisId = getCookie("hospitalId");
  95. const sys = software.find((it) => {
  96. return +it.id === +sysId
  97. });
  98. dispatch(setUser(userInfo));
  99. sys && dispatch(setSys({ sysId, sysName: sys.name, hisId }));
  100. }
  101. //获取组织列表
  102. function getUserHos() {
  103. return new Promise((resolve)=>{
  104. xPost(api.getUserHospitals).then((res)=>{
  105. resolve(res);
  106. });
  107. });
  108. }
  109. //修改密码
  110. function changePsd() {
  111. setVisible(true)
  112. }
  113. //时间
  114. let interVal;
  115. function countTime() {
  116. interVal = setInterval(() => {
  117. setDateTime(getTimeDetail())
  118. }, 1000);
  119. }
  120. function cancel() {
  121. setVisible(false)
  122. form.resetFields();
  123. }
  124. const onFinish = values => {
  125. const params = values
  126. post(api.midifyPassword, params).then((res) => {
  127. if (res.data.code === 200) {
  128. message.success('修改成功');
  129. }
  130. })
  131. }
  132. useEffect(() => {
  133. countTime();
  134. getNotNoticeCount();
  135. //initWebsocket();
  136. /*if (!user.name) {
  137. //刷新操作时重新获取数据
  138. //getOrgList();
  139. }*/
  140. return function clearUp() {
  141. clearInterval(interVal)
  142. }
  143. }, []);
  144. const menu = (
  145. <Menu>
  146. <Menu.Item key="0">
  147. <span className='changePsd' onClick={changePsd}>修改密码</span>
  148. </Menu.Item>
  149. <Menu.Divider />
  150. <Menu.Item key="3" onClick={loginOut}>退出</Menu.Item>
  151. </Menu>
  152. );
  153. return (
  154. <Header className='page-header'>
  155. <img className='logo' src={logo} alt="" />
  156. {hideName ? '' : <><span className='break-line'>|</span>
  157. <span className='sys-name'>{sysName}</span></>}
  158. <div className='infos'>
  159. <span className='time'>{dateTime}</span>
  160. <span className='break-line'>|</span>
  161. <div className="unRead-msg-cont" onClick={showMyMsgPage}>
  162. <img className='msg-icon' src={msg} alt="未读消息"/>
  163. {unReadNum?<span className='unRead-msg'>{unReadNum}</span>:''}
  164. </div>
  165. <div className="user">
  166. <Dropdown overlay={menu} trigger={['click']}>
  167. <span className="ant-dropdown-link" onClick={e => e.preventDefault()}>
  168. <img className='user-icon' src={me} alt="用户头像" />
  169. <i className='user-name'>{user.name}</i>
  170. <img src={down} alt="" />
  171. </span>
  172. </Dropdown>
  173. </div>
  174. </div>
  175. {visible ?
  176. <Modal
  177. title='修改密码'
  178. okText='确定'
  179. cancelText='取消'
  180. width={'40%'}
  181. visible={visible}
  182. onCancel={cancel}
  183. footer={null}
  184. forceRender={true}
  185. centered={true}
  186. >
  187. <Form
  188. labelCol={{ span: 6 }}
  189. wrapperCol={{ span: 16 }}
  190. form={form}
  191. name="register"
  192. onFinish={onFinish}
  193. >
  194. <Form.Item
  195. name="password"
  196. label="原密码"
  197. required
  198. >
  199. <Input.Password placeholder="8-12位大小写字母、数字、特殊字符" />
  200. </Form.Item>
  201. <Form.Item
  202. name="modifyPassword"
  203. label="新密码"
  204. dependencies={['password']}
  205. rules={[
  206. {
  207. required: true,
  208. message: '8-12位大小写字母、数字、特殊字符',
  209. },
  210. ({ getFieldValue }) => ({
  211. validator(_, value) {
  212. const passwordReg = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.]).*$/;
  213. if (!value || getFieldValue('password') === value) {
  214. return Promise.reject(new Error('新密码不能于原密码相同'));
  215. }
  216. if (!passwordReg.test(value)) {
  217. return Promise.reject(new Error('密码必须同时包含大写字母、小写字母和数字'));
  218. }
  219. if (value.length < 8 || value.length > 12) {
  220. return Promise.reject(new Error('密码长度8-12位'));
  221. }
  222. },
  223. }),
  224. ]}
  225. >
  226. <Input.Password placeholder="8-12位大小写字母、数字、特殊字符" />
  227. </Form.Item>
  228. <Form.Item
  229. name="againnewpassword"
  230. label="确认新密码"
  231. dependencies={['password']}
  232. rules={[
  233. {
  234. required: true,
  235. message: '8-12位大小写字母、数字、特殊字符',
  236. },
  237. ({ getFieldValue }) => ({
  238. validator(_, value) {
  239. if (!value || getFieldValue('modifyPassword') === value) {
  240. return Promise.resolve();
  241. }
  242. return Promise.reject(new Error('两次密码不一致,请确认密码'));
  243. },
  244. }),
  245. ]}
  246. >
  247. <Input.Password placeholder="8-12位大小写字母、数字、特殊字符" />
  248. </Form.Item>
  249. <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
  250. <Space size="middle">
  251. <Button htmlType="button" onClick={e => cancel()}>
  252. 取消
  253. </Button>
  254. <Button type="primary" htmlType="submit">
  255. 保存
  256. </Button>
  257. </Space>
  258. </Form.Item>
  259. </Form>
  260. </Modal>
  261. : ''}
  262. </Header>
  263. )
  264. }
  265. AHeader.propTypes = propTypes;
  266. AHeader.defaultProps = defaultProps;
  267. export default withRouter(AHeader);