选择页，表格筛选样式统一

craco.config.js

@@ -41,7 +41,7 @@ module.exports = {
                             '@theme-bg-color':'#fff',
                             '@link-color': '#1690FF', // 链接色
                             '@success-color': '#52c41a', // 成功色
-                            '@warning-color': '#faad14', // 警告色
+                            '@warning-color': '#FF7272', // 警告色
                             '@error-color': '#f5222d', // 错误色
                             '@font-size-base': '14px', // 主字号
                             '@heading-color': '#333', // 标题色
@@ -49,7 +49,7 @@ module.exports = {
                             '@text-color-secondary': '#666', // 次文本色
                             '@disabled-color': '#999', // 失效色
                             '@border-radius-base': '2px', // 组件/浮层圆角
-                            '@border-color-base': '#D8D8D8', // 边框色
+                            '@border-color-base': '#DEE2E9', // 边框色
                             '@box-shadow-base':'0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05)',
                         },
                         javascriptEnabled: true,

src/api/index.js

@@ -39,25 +39,29 @@ const get=(url,data)=>{
     });
 };
 
+function interceptors(param){
 //拦截所有请求添加token
-axios.interceptors.request.use(function (req) {
-    const tokenStr = localStorage.getItem('token');
-    if (tokenStr) {
-        req.headers.Authorization = `Bearer ${tokenStr}`;
-        req.headers.hospitalId=1;//41
-        req.headers.softwareId=1;
-        return req;
-    } else {
-        return req;
-    }
-}, function (error) {
-    return Promise.reject(error);
-});
+    const {token,sysId,hisId} = param;
+    axios.interceptors.request.use(function (req) {
+        const tokenStr = localStorage.getItem('token');
+        if (tokenStr) {
+            token&&(req.headers.Authorization = `Bearer ${tokenStr}`);
+            sysId&&(req.headers.softwareId=sysId);
+            hisId&&(req.headers.hospitalId=hisId);
+            return req;
+        } else {
+            return req;
+        }
+    }, function (error) {
+        return Promise.reject(error);
+    });
+}
 
 const obj = {
     post,
     xPost,
     get,
     api,
+    interceptors
 };
 export default obj;

src/api/request.js

@@ -1,5 +1,6 @@
 const request = {
     login:'/security-center/userManage/login',
+    getUserHospitals:'/security-center/userManage/getUserHospitals',      //用户关联的医院列表
     //组织管理相关接口
     getHospitalListInfo:'/security-center/hospitalManage/getHospitalListInfo',  //列表数据
     getManagerBoxInfo:'/security-center/hospitalManage/getManagerBoxInfo',  //筛选下拉数据

src/common/common.less

@@ -1,9 +1,12 @@
+@body-bg:#EBEEF4; /**body背景色***/
 @bg-color:#fff;  /**主题背景色**/
 @header-height:50px;  /***Header高度**/
 @table-th-color:#F2F4F6;  /***表头背景色***/
 @active-bg:#DEF1FF;   /***下拉项选中背景色***/
 
-
+body{
+  background: @body-bg;
+}
 .clearfix:after{
   content: "";
   display: block;
@@ -22,35 +25,28 @@
 
 .wrapper{
   min-width: 1214px;
+  padding: 15px 30px;
+  .filter-box{
+    border-bottom: 1px @border-color-base solid;
+  }
+  .ant-form-item{
+    margin-bottom: 15px;
+  }
   .basic{
-    height: 78px;
     background: #fff;
-    margin-bottom:12px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 28px 0 60px;
     border-radius: 4px;
-    .basic-left{
-      display: flex;
-    }
-    .basic-right{
-      & button:first-child{
-        margin-right: 15px;
-      }
-    }
   }
   .table{
-    padding: 0 28px;
-    background: #fff;
     .table-header{
       display: flex;
       justify-content: space-between;
-      padding: 24px 0;
-      .ant-breadcrumb-link{
+      padding: 15px 0;
+      .table-title{
         font-size: 16px;
-        font-weight: 500;
-        color: #333333;
+        font-weight: bold;
       }
     }
   }

src/components/AHeader/index.js

@@ -1,5 +1,6 @@
 import {Dropdown ,Menu} from 'antd';
 import { withRouter } from 'react-router'
+import { Layout } from 'antd';
 import logo from '@images/logo.png';
 import msg from '@images/msg.png';
 import me from '@images/me.png';
@@ -10,6 +11,7 @@ const propTypes = {
 
 }
 const defaultProps = {};
+const { Header } = Layout;
 function AHeader({ history }){
     function loginOut(){
         localStorage.removeItem("token");
@@ -25,7 +27,7 @@ function AHeader({ history }){
         </Menu>
     );
     return (
-        <>
+        <Header className='page-header'>
             <img className='logo' src={logo} alt=""/>
             <span className='break-line'>|</span>
             <span className='sys-name'>AI病案质控平台</span>
@@ -43,7 +45,7 @@ function AHeader({ history }){
                     </Dropdown>
                 </div>
             </div>
-        </>
+        </Header>
     )
 }
 

src/components/AuthIndex/index.js

@@ -2,12 +2,8 @@ import {
     BrowserRouter as Router,
     Switch,
     Route,
-    Redirect,
-    withRouter
+    Redirect
 } from "react-router-dom";
-/*import NullPage from '@components/NullPage';
-import Login from '@components/Login';
-import PageLayout from '@components/PageLayout'*/
 import RouteWithSubRoutes from '@utils/RouteWithSubRoutes'
 import routes from '@utils/routes';
 
@@ -16,19 +12,6 @@ export default function AuthIndex() {
     return (
         <Router>
             <Switch>
-                {/*<Route path="/404">
-                    <NullPage></NullPage>
-                </Route>
-                <Route path="/manage">
-                    {user?(<PageLayout></PageLayout>):(<Redirect
-                        to={{
-                            pathname: "/login",
-                        }}
-                    />)}
-                </Route>
-                <Route path="/">
-                    <Login></Login>
-                </Route>*/}
                 <Route
                     exact
                     path="/"

src/components/DataManager/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Table, Select, Pagination, Space, Modal } from 'antd';
+import { Form, Input, Button, Table, Select, Pagination, Space, Modal,Row,Col } from 'antd';
 import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 // import NormalPlayer from './testComponent/testComponent'
 import '@common/common.less';
@@ -107,48 +107,55 @@ function UserManager() {
   }
   return (
     <div className="wrapper">
-      <Form
-        form={form}
-        name="normal_login"
-        className="basic"
-        layout="inline"
-        onFinish={onFinish}
-        initialValues={{ status: '' }}
-      >
-        <div className="basic-left">
-          <Form.Item label="数据权限名称" name="username">
-            <Input placeholder="用户名" />
+        <div className="filter-box">
+        <Form
+          form={form}
+          name="normal_login"
+          className="basic"
+          onFinish={onFinish}
+          initialValues={{ status: '' }}
+        >
+            <Row gutter={24}>
+                <Col span={6} key={0}>
+                  <Form.Item label="数据权限名称" name="username">
+                    <Input placeholder="用户名" />
+                  </Form.Item>
+                </Col>
+                <Col span={6} key={1}>
+                  <Form.Item label="所属角色" name="name">
+                    <Input placeholder="姓名" />
+                  </Form.Item>
+                </Col>
+                <Col span={8} key={2}>
+              <Form.Item label="当前状态" name="status">
+                <Select
+                  style={{ width: 200 }}
+                  placeholder="Select a person"
+                >
+                  <Option value="">全部</Option>
+                  <Option value="1">启用</Option>
+                  <Option value="0" >禁用</Option>
+                </Select>
+              </Form.Item>
+                </Col>
+                <Col span={4} key={3}>
+          <Form.Item>
+            <Space size="middle">
+              <Button onClick={onReset}>
+                重置
+            </Button>
+              <Button type="primary" htmlType="submit">
+                查询
+            </Button>
+            </Space>
           </Form.Item>
-          <Form.Item label="所属角色" name="name">
-            <Input placeholder="姓名" />
-          </Form.Item>
-          <Form.Item label="当前状态" name="status">
-            <Select
-              style={{ width: 200 }}
-              placeholder="Select a person"
-            >
-              <Option value="">全部</Option>
-              <Option value="1">启用</Option>
-              <Option value="0" >禁用</Option>
-            </Select>
-          </Form.Item>
-
-        </div>
-        <Form.Item>
-          <Space size="middle">
-            <Button onClick={onReset}>
-              重置
-          </Button>
-            <Button type="primary" htmlType="submit">
-              查询
-          </Button>
-          </Space>
-        </Form.Item>
-      </Form>
-
+                </Col>
+            </Row>
+        </Form>
+      </div>
       <div className="table">
         <div className="table-header">
-          <span className="table-header-title">数据权限</span>
+          <h2 className="table-title">组织管理</h2>
           <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增用户', true)}>新增数据权限</Button>
         </div>
 

src/components/Login/index.js

@@ -1,17 +1,10 @@
-/*import {useEffect} from 'react';
-import { useDispatch,useSelector } from 'react-redux'*/
 import { Form, Input, Button, message } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import apiObj from '@api/index';
-import { add } from '@reducers/userInfo'
 import './index.less'
 
-const {post,api} = apiObj;
+const {post,api,interceptors} = apiObj;
 function Login({history}) {
-    /*useEffect(() => {
-        login();
-    });*/
-    //const dispatch = useDispatch();
     const user = localStorage.getItem('token');
     if(user){
         history.push('/manage');
@@ -20,10 +13,10 @@ function Login({history}) {
         post(api.login,data).then((res)=>{
             if(res.data.code===200){
                 const data = res.data.data;
-                //dispatch(add(res.data.data))
                 localStorage.setItem('token',data.token);
                 message.success('登录成功',1);
-                history.push('/manage')
+                interceptors({token:data.token});
+                history.push('/choose')
             }else{
                 message.error(res.data.msg||'数据有误')
             }

src/components/OrgManager/index.js

@@ -232,7 +232,7 @@ function OrgManager(){
         )
     }
     return (
-        <div className='container'>
+        <div className='wrapper'>
             <div className="filter-box">
                 <Form form={form} name="control-hooks" onFinish={onFinish}>
                     <Row gutter={24}>
@@ -283,9 +283,7 @@ function OrgManager(){
             </div>
             <div className="table">
                 <div className="table-header">
-                    <Breadcrumb>
-                        <Breadcrumb.Item>组织管理</Breadcrumb.Item>
-                    </Breadcrumb>
+                    <h2 className="table-title">组织管理</h2>
                     <Button type="primary" icon={<PlusOutlined />} onClick={()=> showAddOrg()}>新增子组织</Button>
                 </div>
                 <RenderTable />

src/components/OrgManager/index.less

@@ -1,10 +1,5 @@
 @import "@common/common.less";
 
-.container{
-  background: #fff;
-  margin:14px ;
-  padding:17px 28px;
-}
 .ant-table-thead > tr > th{
   background: @table-th-color;
   color: @text-color;

src/components/PageLayout/index.js

@@ -1,13 +1,13 @@
 import {useEffect,useState} from 'react';
 import { useDispatch,useSelector } from 'react-redux'
-import { Layout, Menu } from 'antd';
+import { Layout } from 'antd';
 import AHeader from '../AHeader'
 import AMenu from '../AMenu'
 import ATabs from '../ATabs'
 import apiObj from '@api/index';
 import { setStatusList, setHisTypeList} from '@reducers/staticInfo';
 
-const { Header, Content, Sider } = Layout;
+const {  Content, Sider } = Layout;
 const {post,api,xPost} = apiObj;
 const propTypes = {
 
@@ -37,9 +37,7 @@ function PageLayout(){
     },[]);
     return (
         <Layout>
-            <Header className='page-header'>
-                <AHeader></AHeader>
-            </Header>
+            <AHeader></AHeader>
             <Layout>
                 <Sider className='page-sider'>
                     <AMenu></AMenu>

src/components/RoleManager/index.js

@@ -200,7 +200,7 @@ function RoleManager(){
         )
     }
     return (
-        <div className='container'>
+        <div className='wrapper'>
             <div className="filter-box">
                 <Form form={form} name="control-hooks" onFinish={onFinish}>
                     <Row gutter={24}>
@@ -237,9 +237,7 @@ function RoleManager(){
             </div>
             <div className="table">
                 <div className="table-header">
-                    <Breadcrumb>
-                        <Breadcrumb.Item>角色管理</Breadcrumb.Item>
-                    </Breadcrumb>
+                    <h2 className="table-title">组织管理</h2>
                     <Button type="primary" icon={<PlusOutlined />} onClick={()=> showAddRole()}>新增角色</Button>
                 </div>
                 <RenderTable />

src/components/RoleManager/index.less

@@ -1,10 +1,5 @@
 @import "@common/common.less";
 
-.container{
-  background: #fff;
-  margin:14px ;
-  padding:17px 28px;
-}
 .ant-table-thead > tr > th{
   background: @table-th-color;
   color: @text-color;
@@ -29,11 +24,11 @@
     margin-left: 20px;
   }
 }
-.filter-box{
+/*.filter-box{
   .ant-btn-primary{
     margin-right: 20px;
   }
-}
+}*/
 .add-container{
   margin: 30px 165px;
 }

src/components/SysChoose/index.js

@@ -0,0 +1,138 @@
+import {useEffect,useState} from 'react';
+import { useDispatch, useSelector } from 'react-redux'
+import { setSys } from '@reducers/userInfo.js';
+import { Radio, Row, Col,Steps } from 'antd';
+import AHeader from '../AHeader'
+import './index.less'
+import iconLb from '@images/lb.png';
+import iconHis from '@images/his.png';
+import rightIcon from '@images/right.png';
+import {message} from "antd/lib/index";
+import apiObj from '@api/index';
+
+const {api,xPost,interceptors} = apiObj;
+
+const { Step } = Steps;
+function SysChoose({history}) {
+    const [current, setCurrent] = useState(0);
+    const [sysId, setSysId] = useState(1);
+    const [orgList, setOrgList] = useState([]);
+    const [hisList, setHisList] = useState([]);
+    const dispatch = useDispatch();
+    const steps = [
+        {
+            title: '选择系统',
+            content: 'First-content',
+        },
+        {
+            title: '选择组织',
+            content: 'Second-content',
+        },
+        {
+            title: '进入组织',
+            content: 'Last-content',
+        },
+    ];
+    //系统单选
+    function onChange(e){
+        setCurrent(1);
+        const id = e.target.value;
+        const checkOrg = orgList.find((it)=>it.id===id);
+        const his =checkOrg.hospitals;
+        setSysId(id);
+        setHisList(his);
+    }
+    //获取组织列表
+    function getOrgList(){
+        xPost(api.getUserHospitals).then((res)=>{
+            if(res.data.code===200){
+                const data = res.data.data;
+                const { software } = data;
+                setOrgList(software);
+                //默认显示第一个系统的组织
+                setHisList(software[0]?software[0].hospitals:[]);
+            }else{
+                message.warning(res.data.msg||'获取医院列表失败');
+            }
+        }).catch(()=>{
+            message.error("接口出错");
+        });
+    }
+    //点击进入
+    function getIn(id){
+        dispatch(setSys({sysId,hisId:id}));
+        interceptors({sysId,hisId:id});
+        history.push("/manage");
+    }
+    useEffect(()=>{
+        getOrgList();
+    },[]);
+    return (
+        <>
+        <AHeader></AHeader>
+        <div className="choose-container">
+            <div className="banner">
+                <p className='title'>欢迎登录AI病案质控平台！</p>
+                <div className="tip-warn">
+                    <img src={iconLb} alt=""/>
+                    <span>平台检测到您的账号关联以下系统及组织，请先选择您想要进入的系统再选择要进入的组织。</span>
+                </div>
+            </div>
+            <div className="content">
+                <Steps current={current} className='steps-bar'>
+                    {steps.map(item => (
+                        <Step key={item.title} title={item.title} />
+                    ))}
+                </Steps>
+                <div className="steps-content">
+                    <div className="item">
+                        <div className="item-title">
+                            选择系统（单选）
+                        </div>
+                        <div className="item-content">
+                            <Radio.Group
+                                onChange={onChange}
+                                value={sysId}>
+                                {orgList.map((it)=>{
+                                    return <Radio key={it.id} value={it.id}>{it.name}</Radio>
+                                })}
+                            </Radio.Group>
+                        </div>
+                    </div>
+                    <div className="item">
+                        <div className="item-title">
+                            选择组织（单选）
+                        </div>
+                        <div className="item-content">
+                            <div className="row-container">
+                                <Row className='item-rows-box' gutter={16}>
+                                    {
+                                        hisList.map((it)=>{
+                                            return (
+                                                <Col className="box-row" key={it.hospitalId} span={8}>
+                                                    <div className='card'>
+                                                        <div className="icon">
+                                                            <img src={iconHis} alt="icon"/>
+                                                        </div>
+                                                        <div className="card-content">
+                                                            <div className='name'>{it.hospitalName}</div>
+                                                            <a className='get-in' onClick={()=>getIn(it.hospitalId)}>点击进入 <img src={rightIcon} alt="箭头"/></a>
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                            )
+                                        })
+                                    }
+                                </Row>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+            </>
+    )
+}
+
+export default SysChoose;

src/components/SysChoose/index.less

@@ -0,0 +1,87 @@
+@import "@common/common.less";
+
+.choose-container{
+  .banner{
+    background: #fff;
+    padding: 28px 36px 15px;
+    .title{
+      font-size: 18px;
+    }
+  }
+  .content{
+    min-height: calc(100vh - 192px);
+    margin: 10px;
+    padding: 28px 36px 15px;
+    background: #fff;
+  }
+  .row-container{
+    margin-top: -10px;
+  }
+  .steps-bar{
+    width: 70%;
+    margin: auto;
+  }
+  .tip-warn{
+    padding:4px 20px ;
+    color: @error-color;
+    border-radius: 2px;
+    border: 1px #FFC1C1 solid;
+    background:#FFF6F6;
+    display: inline-block;
+    span{
+      margin-left: 4px;
+      vertical-align: middle;
+    }
+  }
+  .item{
+    margin-bottom: 28px;
+  }
+  .item-title{
+    font-weight: bold;
+    padding-left:22px;
+    border-left: 4px solid @primary-color;
+    line-height: 14px;
+    margin-bottom: 10px;
+  }
+  .item-content{
+    padding-top: 10px;
+    border-top: 1px @border-color-base solid;
+  }
+  .item-rows-box{
+    background: @body-bg;
+    padding:0 10px 18px;
+    margin:-18px 0 0!important;
+    &:first-child{
+      margin-top: 0!important;
+    }
+    .box-row{
+      margin-top: 16px;
+    }
+  }
+  .card{
+    position: relative;
+    padding: 36px 30px 32px;
+    height: 170px;
+    box-sizing: border-box;
+    background: #fff;
+    border-radius: 4px;
+    .icon{
+      float: left;
+      margin-right: 10px;
+    }
+    .name{
+      height: 45px;
+      margin-bottom: 10px;
+    }
+    .get-in{
+      display: inline-block;
+      background: #DBEEFF;
+      color: @link-color;
+      width: 80px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      border-radius: 4px;
+    }
+  }
+}

src/components/UserManager/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Form, Input, Button, Table, Select, Pagination, Space, Menu, Dropdown, Modal, Breadcrumb, message } from 'antd';
+import { Form, Input, Button, Table, Select, Pagination, Space, Menu, Dropdown, Modal, Row, Col, message } from 'antd';
 import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import NormalPlayer from './addUser'
 import '@common/common.less';
@@ -216,50 +216,55 @@ function UserManager() {
   }
   return (
     <div className="wrapper">
-      <Form
-        form={form}
-        name="normal_login"
-        className="basic"
-        layout="inline"
-        onFinish={onFinish}
-        initialValues={{ status: '' }}
-      >
-        <div className="basic-left">
-          <Form.Item label="用户名" name="username">
-            <Input placeholder="用户名" />
-          </Form.Item>
-          <Form.Item label="姓名" name="name">
-            <Input placeholder="姓名" />
-          </Form.Item>
-          <Form.Item label="当前状态" name="status">
-            <Select
-              style={{ width: 200 }}
-              placeholder="Select a person"
-            >
-              <Option value="">全部</Option>
-              <Option value="1">启用</Option>
-              <Option value="0" >禁用</Option>
-            </Select>
-          </Form.Item>
-
-        </div>
-        <Form.Item>
-          <Space size="middle">
-            <Button onClick={onReset}>
-              重置
-          </Button>
-            <Button type="primary" htmlType="submit">
-              查询
-          </Button>
-          </Space>
-        </Form.Item>
-      </Form>
-
+        <div className="filter-box">
+        <Form
+          form={form}
+          name="normal_login"
+          className="basic"
+          onFinish={onFinish}
+          initialValues={{ status: '' }}
+        >
+            <Row gutter={24}>
+              <Col span={6} key={0}>
+                <Form.Item label="用户名" name="username">
+                  <Input placeholder="用户名" />
+                </Form.Item>
+              </Col>
+              <Col span={6} key={1}>
+                <Form.Item label="姓名" name="name">
+                  <Input placeholder="姓名" />
+                </Form.Item>
+            </Col>
+            <Col span={8} key={2}>
+              <Form.Item label="当前状态" name="status">
+                <Select
+                  style={{ width: 200 }}
+                  placeholder="Select a person"
+                >
+                  <Option value="">全部</Option>
+                  <Option value="1">启用</Option>
+                  <Option value="0" >禁用</Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={4} key={3}>
+              <Form.Item>
+                <Space size="middle">
+                  <Button type="primary" htmlType="submit">
+                    查询
+                </Button>
+                <Button onClick={onReset}>
+                    重置
+                </Button>
+                </Space>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </div>
       <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/userInfo.js

@@ -12,9 +12,14 @@ export const slice = createSlice({
         remove: (state) => {        //删除token
             state.tokenInfo=null;
         },
+        setSys:(state,action) => {        //选中的系统和医院id
+            const {sysId,hisId} = action.payload;
+            state.sysId=sysId;
+            state.hisId=hisId;
+        },
     },
 });
 
-export const { remove, add} = slice.actions;
+export const { remove, add, setSys } = slice.actions;
 
 export default slice.reducer;

src/utils/routes.js

@@ -1,5 +1,7 @@
 import Login from '@components/Login';
 import PageLayout from '@components/PageLayout';
+import SysChoose from '@components/SysChoose';
+import NullPage from '@components/NullPage';
 /*import RoleManager from '@components/RoleManager';
 import UserManager from '@components/UserManager';*/
 
@@ -7,9 +9,15 @@ const routes = [
     {
         path:'/login',
         component:Login
+    },{
+        path:'/choose',
+        component:SysChoose
     },{
         path:'/manage',
         component:PageLayout
+    },{
+        path:'/404',
+        component:NullPage
     }
 ];