用户信息保存

craco.config.js

@@ -41,8 +41,8 @@ module.exports = {
                             '@theme-bg-color':'#fff',
                             '@link-color': '#1690FF', // 链接色
                             '@success-color': '#52c41a', // 成功色
-                            '@warning-color': '#FF7272', // 警告色
-                            '@error-color': '#f5222d', // 错误色
+                            '@warning-color': '#FE9748', // 警告色
+                            '@error-color': '#FF4D4D', // 错误色
                             '@font-size-base': '14px', // 主字号
                             '@heading-color': '#333', // 标题色
                             '@text-color': '#333', // 主文本色

src/api/request.js

@@ -9,7 +9,6 @@ const request = {
     addHospital:'security-center/hospitalManage/addHospital', //添加组织
     updateHospital:'/security-center/hospitalManage/updateHospital',   //修改
     getHospitalById:'/security-center/hospitalManage/getHospitalById', //获取详情
-    getUserPage:'/security-center/userManage/getUserPage',//用户列表
     resetPassword:'/security-center/hospitalManage/resetPassword',  //重置密码
     //角色管理相关接口
     getUserMenuResourceTree:'/security-center/roleManage/getUserMenuResourceTree',      //获取菜单权限树

src/components/AHeader/index.js

@@ -1,6 +1,8 @@
-import {Dropdown ,Menu} from 'antd';
+import { Layout, Dropdown ,Menu } from 'antd';
 import { withRouter } from 'react-router'
-import { Layout } from 'antd';
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import utils from '@utils/index';
 import logo from '@images/logo.png';
 import msg from '@images/msg.png';
 import me from '@images/me.png';
@@ -12,15 +14,38 @@ const propTypes = {
 }
 const defaultProps = {};
 const { Header } = Layout;
-function AHeader({ history }){
+const { getTimeDetail } = utils;
+function AHeader({ history,hideName }){
+    const [dateTime,setDateTime] = useState('');
+    const { user, sysName} = useSelector((state)=>{
+        return state.userInfo;
+    });
+    //退出
     function loginOut(){
         localStorage.removeItem("token");
         history.push('/login');
     }
+    //修改密码
+    function changePsd(){
+
+    }
+    //时间
+    let interVal;
+    function countTime(){
+        interVal = setInterval(()=>{
+            setDateTime(getTimeDetail())
+        },1000);
+    }
+    useEffect(()=>{
+        countTime();
+        return function clearUp(){
+            clearInterval(interVal)
+        }
+    },[]);
     const menu = (
         <Menu>
             <Menu.Item key="0">
-                <a href="https://www.antgroup.com">修改密码</a>
+                <span className='changePsd' onClick={changePsd}>修改密码</span>
             </Menu.Item>
             <Menu.Divider/>
             <Menu.Item key="3" onClick={loginOut}>退出</Menu.Item>
@@ -29,19 +54,19 @@ function AHeader({ history }){
     return (
         <Header className='page-header'>
             <img className='logo' src={logo} alt=""/>
-            <span className='break-line'>|</span>
-            <span className='sys-name'>AI病案质控平台</span>
+            {hideName?'':<><span className='break-line'>|</span>
+            <span className='sys-name'>{sysName}</span></>}
             <div className='infos'>
-                <span className='time'>2021年5月14日/星期五/18:05:19</span>
+                <span className='time'>{dateTime}</span>
                 <span className='break-line'>|</span>
-                <img className='msg-icon' src={msg} alt="未读消息"/>
+                {/*<img className='msg-icon' src={msg} alt="未读消息"/>*/}
                 <div className="user">
-                    <img className='user-icon' src={me} alt="用户头像"/>
                     <Dropdown overlay={menu} trigger={['click']}>
-                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-                            <i>用户名</i>
+                        <span className="ant-dropdown-link" onClick={e => e.preventDefault()}>
+                            <img className='user-icon' src={me} alt="用户头像"/>
+                            <i className='user-name'>{user.name}</i>
                             <img src={down} alt=""/>
-                        </a>
+                        </span>
                     </Dropdown>
                 </div>
             </div>

src/components/AHeader/index.less

@@ -16,10 +16,14 @@
 .infos{
   float: right;
   .user{
-    margin-left: 18px;
+    /*margin-left: 18px;*/
     float: right;
+    .user-name{
+      margin:0 5px;
+    }
   }
   .ant-dropdown-link{
+    cursor: pointer;
     margin-left: 6px;
     color: @header-font-color;
     vertical-align: middle;

src/components/AMenu/index.js

@@ -1,10 +1,15 @@
-import { Menu } from 'antd';
+import { Menu,message } from 'antd';
+import { useState,useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux'
-import { add, active } from '../../store/reducers/tabPanes'
+import { add, active } from '@reducers/tabPanes'
 import OrgManager from "../OrgManager";
 import RoleManager from "../RoleManager";
-import UserManager from "../UserManager"
-import DataManager from "../DataManager"
+import UserManager from "../UserManager";
+import DataManager from "../DataManager";
+import NullPage from "../NullPage";
+import apiObj from '@api/index';
+
+const { xPost,api } = apiObj;
 const { SubMenu } = Menu;
 const propTypes = {};
 const defaultProps = {};
@@ -17,44 +22,68 @@ const pageMap = {
 }
 
 function AMenu() {
+    const [menuList,setMenuList] = useState([]);
     const dispatch = useDispatch();
     //当前选中的菜单
-    const activeTab = useSelector(state => {
-        return state.tabPanes.activeTab
-    });
-    //已打开的tabs
-    const panes = useSelector(state => {
-        return state.tabPanes.panes
+    const {activeTab ,panes} = useSelector(state => {
+        return state.tabPanes;
     });
     //切换菜单、增加tab
     function changeMenu(val) {
-        const item = panes.find((it) => it.key === val.key);
+        const idName = val.key.split("-");
+        const item = panes.find((it) => it.key === idName[0]);
         //console.log(item);
         if (item) {   //已存在当前tab，则定位即可不增加
-            dispatch(active(val.key));
+            dispatch(active(idName[0]));
             return;
         }
         dispatch(
-            add({ title: val.key, content: pageMap[val.key] || <OrgManager />, key: val.key })
+            add({ title: idName[0], content: pageMap[idName[0]] || <NullPage />, key: idName[0] })
         )
     }
+    //获取菜单数据
+    function getUserMenus(){
+        xPost(api.getUserShowMemuTree).then((res)=>{
+            if(res.data.code===200){
+                const data =  res.data.data;
+                const menuData = data.showMenuInfo;
+                setMenuList(menuData);
+            }else{
+                message.error(res.data.msg||'获取菜单失败');
+            }
+        })
+    }
+    function getSubMenu(data){
+        return data.map((it)=>{
+            if(it.menuType==='1'){
+                return (
+                    <Menu.Item key={it.menuName}>{it.menuName}</Menu.Item>
+                )
+            }else if(it.menuType==='0'){
+                return (
+                    <SubMenu key={it.menuId} title={it.menuName}>
+                        {getSubMenu(it.children)}
+                    </SubMenu>
+                )
+            }else{
+                return ''
+            }
+        })
+    }
+    useEffect(()=>{
+        getUserMenus();
+    },[]);
     return (
         <Menu
-            defaultSelectedKeys={['组织管理']}
-            defaultOpenKeys={['权限管理']}
+            /*defaultSelectedKeys={['组织管理']}
+            defaultOpenKeys={[menuList[0].menuId]}*/
             selectedKeys={activeTab}
             mode="inline"
             onClick={changeMenu}
         >
-            <SubMenu key="权限管理" title="权限管理">
-                <Menu.Item key="组织管理">组织管理</Menu.Item>
-                <Menu.Item key="角色管理">角色管理</Menu.Item>
-                <Menu.Item key="用户管理">用户管理</Menu.Item>
-                <Menu.Item key="数据权限">数据权限</Menu.Item>
-            </SubMenu>
-            <SubMenu key="系统管理" title="系统管理">
-                <Menu.Item key="功能管理">功能管理</Menu.Item>
-            </SubMenu>
+            {
+                getSubMenu(menuList)
+            }
         </Menu>
     )
 }

src/components/APsdForm/index.js

@@ -0,0 +1,8 @@
+
+function APsdForm(){
+    return (
+        <div>修改密码</div>
+    )
+}
+
+export default APsdForm;

src/components/ATabs/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
-import { Tabs } from 'antd';
+import { Tabs,Dropdown, Button,Menu } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
 import { useDispatch,useSelector } from 'react-redux'
-import { active, close} from '../../store/reducers/tabPanes'
+import { active, close, closeOther} from '../../store/reducers/tabPanes'
 import './index.less'
+import iconLt from '@images/lt.png';
+import iconRt from '@images/rt.png';
 
 const { TabPane } = Tabs;
 const propTypes = {
@@ -21,14 +24,31 @@ function ATabs(){
     function onChange(activeKey){
         dispatch(active(activeKey))
     }
-    //关闭tab
+    //关闭当前tab
     function onDelTab(activeKey){
         const paneIndex = panes.findIndex((it)=>it.key===activeKey);
         dispatch(close({del:paneIndex,active:panes[1].key}))
     }
+    //关闭其他tab
+    function onDelOtherTab(activeKey){
+        const paneIndex = panes.findIndex((it)=>it.key===activeKey);
+        dispatch(closeOther({del:paneIndex}))
+    }
+    const menu = (
+        <Menu>
+            <Menu.Item key="1" onClick={()=>onDelTab(activeTab)}>
+                关闭当前标签
+            </Menu.Item>
+            <Menu.Item key="2" onClick={()=>onDelOtherTab(activeTab)}>
+                关闭其他标签
+            </Menu.Item>
+        </Menu>
+    );
     return (
         <div className="tab-container">
+            <span className='pre-tab'><img src={iconLt} alt="向左滑"/></span>
             <Tabs
+                className='tab-cont'
                 hideAdd
                 onChange={onChange}
                 onEdit={onDelTab}
@@ -41,6 +61,12 @@ function ATabs(){
                     </TabPane>
                 ))}
             </Tabs>
+            <span className='next-tab'><img src={iconRt} alt="向右滑"/></span>
+            <Dropdown className='tab-oper' overlay={menu}>
+                <Button size='small'>
+                    <DownOutlined />
+                </Button>
+            </Dropdown>
         </div>
     )
 }

src/components/ATabs/index.less

@@ -1,7 +1,43 @@
 @import "@common/common.less";
 
 .tab-container{
+  position: relative;
   background: @bg-color;
-  padding: 0 12px 10px;
-  margin:0 12px;
+  padding: 0 10px 10px;
+  margin:0 10px;
+  .ant-tabs-nav{
+    height: 40px;
+  }
+  .ant-tabs-content-holder{
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+  }
+  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab, .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab{
+    border-left: none;
+    border-right: none;
+    border-top: none;
+  }
+  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active, .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active{
+    border-right:1px solid #f0f0f0;
+  }
+  .pre-tab,.next-tab{
+    position: absolute;
+    top: 7px;
+    cursor: pointer;
+  }
+  .pre-tab{
+    left: 8px;
+    z-index: 1;
+  }
+  .next-tab{
+    right: 50px;
+  }
+  .tab-oper{
+    position: absolute;
+    top:5px;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+  }
 }

src/components/AuthIndex/index.js

@@ -8,7 +8,7 @@ import RouteWithSubRoutes from '@utils/RouteWithSubRoutes'
 import routes from '@utils/routes';
 
 export default function AuthIndex() {
-    const user = localStorage.getItem("token");
+    //const user = localStorage.getItem("token");
     return (
         <Router>
             <Switch>

src/components/NullPage/index.js

@@ -1,7 +1,10 @@
+import imgNull from '@images/404.png';
+
 export default function NullPage() {
     return (
-        <div>
-            404
+        <div style={{textAlign:'center',height:'calc(100vh - 100px)'}}>
+            <img style={{marginTop:'19vh',}} src={imgNull} alt="找不到了"/>
+            <p style={{marginTop:'27px'}}>哎呀……您当前访问的页面迷路了，请稍后再试</p>
         </div>
     )
 }

src/components/SysChoose/index.js

@@ -1,6 +1,6 @@
 import {useEffect,useState} from 'react';
 import { useDispatch, useSelector } from 'react-redux'
-import { setSys } from '@reducers/userInfo.js';
+import { setSys,setUser } from '@reducers/userInfo.js';
 import { Radio, Row, Col,Steps, Select, Button } from 'antd';
 import AHeader from '../AHeader'
 import './index.less'
@@ -16,7 +16,8 @@ const { Step } = Steps;
 const {Option} = Select;
 function SysChoose({history}) {
     //const [current, setCurrent] = useState(1);
-    const [sysId, setSysId] = useState(1);      //选中的系统id
+    const [sysId, setSysId] = useState('');      //选中的系统id
+    const [sysName, setSysName] = useState('');      //选中的系统名称
     const [subHisId, setSubHisId] = useState('');      //选中的子医院id
     const [showId, setShowId] = useState('');       //要显示子医院列表的医院id
     const [orgList, setOrgList] = useState([]);     //系统列表
@@ -45,8 +46,11 @@ function SysChoose({history}) {
         xPost(api.getUserHospitals).then((res)=>{
             if(res.data.code===200){
                 const data = res.data.data;
-                const { software } = data;
+                const { software,userInfo } = data;
                 setOrgList(software);
+                setSysName(software[0].name)
+                setSysId(software[0].id);
+                dispatch(setUser(userInfo));
                 //默认显示第一个系统的组织
                 setHisList(software[0]?software[0].hospitals:[]);
             }else{
@@ -58,7 +62,7 @@ function SysChoose({history}) {
     }
     //点击进入
     function getIn(id){
-        dispatch(setSys({sysId,hisId:id}));
+        dispatch(setSys({sysId,sysName,hisId:id}));
         interceptors({sysId,hisId:id});
         history.push("/manage");
     }
@@ -74,7 +78,7 @@ function SysChoose({history}) {
     },[]);
     return (
         <>
-        <AHeader></AHeader>
+        <AHeader hideName={true}></AHeader>
         <div className="choose-container">
             <div className="banner">
                 <p className='title'>欢迎登录AI病案质控平台！</p>

src/components/UserManager/index.js

@@ -213,25 +213,23 @@ function UserManager() {
         <Form
           form={form}
           name="normal_login"
-          className="basic"
           onFinish={onFinish}
           initialValues={{ status: '' }}
         >
           <Row gutter={24}>
-            <Col span={6} key={0}>
+            <Col span={5} key={0}>
               <Form.Item label="用户名" name="username">
                 <Input placeholder="用户名" />
               </Form.Item>
             </Col>
-            <Col span={6} key={1}>
+            <Col span={5} key={1}>
               <Form.Item label="姓名" name="name">
                 <Input placeholder="姓名" />
               </Form.Item>
             </Col>
-            <Col span={8} key={2}>
+            <Col span={6} key={2}>
               <Form.Item label="当前状态" name="status">
                 <Select
-                  style={{ width: 200 }}
                   placeholder="Select a person"
                 >
                   <Option value="">全部</Option>
@@ -240,16 +238,14 @@ function UserManager() {
                 </Select>
               </Form.Item>
             </Col>
-            <Col span={4} key={3}>
+            <Col span={6} key={3}>
               <Form.Item>
-                <Space size="middle">
                   <Button type="primary" htmlType="submit">
                     查询
                 </Button>
                   <Button onClick={onReset}>
                     重置
                 </Button>
-                </Space>
               </Form.Item>
             </Col>
           </Row>
@@ -258,9 +254,7 @@ function UserManager() {
 
       <div className="table">
         <div className="table-header">
-          <Breadcrumb>
-            <Breadcrumb.Item>用户管理</Breadcrumb.Item>
-          </Breadcrumb>
+            <h2 className="table-title">用户管理</h2>
           <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增用户', true, 1)}>新增用户</Button>
         </div>
 

src/store/reducers/tabPanes.js

@@ -11,6 +11,11 @@ export const slice = createSlice({
             state.panes.splice(action.payload.del,1);
             state.activeTab = action.payload.active;
         },
+        closeOther:(state,action) => {        //关闭其他tab
+            const pane = state.panes[action.payload.del];
+            state.panes = [pane];
+            //state.activeTab = action.payload.active;
+        },
         add: (state,action) => {        //打开新tab
             state.panes.push(action.payload);
             state.activeTab = action.payload.key;
@@ -21,6 +26,6 @@ export const slice = createSlice({
     },
 });
 
-export const { close, active, add} = slice.actions;
+export const { close, closeOther, active, add } = slice.actions;
 
 export default slice.reducer;

src/store/reducers/userInfo.js

@@ -3,7 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 export const slice = createSlice({
     name: 'userInfo',
     initialState: {
-        tokenInfo:null
+        tokenInfo:null,
+        user:{}
     },
     reducers: {
         add: (state,action) => {        //添加token
@@ -13,13 +14,17 @@ export const slice = createSlice({
             state.tokenInfo=null;
         },
         setSys:(state,action) => {        //选中的系统和医院id
-            const {sysId,hisId} = action.payload;
+            const {sysId,sysName,hisId} = action.payload;
             state.sysId=sysId;
+            state.sysName=sysName;
             state.hisId=hisId;
         },
+        setUser:(state,action) => {        //删除token
+            state.user=action.payload;
+        },
     },
 });
 
-export const { remove, add, setSys } = slice.actions;
+export const { remove, add, setSys, setUser } = slice.actions;
 
 export default slice.reducer;

src/utils/index.js

@@ -48,9 +48,22 @@ function organizationData(arr) {
     })
     return arr
 }
+
+//时间获取
+function getTimeDetail(){
+    const d = new Date();
+    const days = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
+    let sec = d.getSeconds()
+    let min = d.getMinutes()
+    let hour = d.getHours()
+    let str = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日 / ${days[d.getDay()]} / ${hour>9?hour:'0'+hour}:${min>9?min:'0'+min}:${sec>9?sec:'0'+sec}`
+    return str;
+}
+
 const obj = {
     handleResponse,
     pickCheckedTreeIds,
-    organizationData
+    organizationData,
+    getTimeDetail
 };
 export default obj;