组织管理弹窗改页面，路由未完

package-lock.json

@@ -11907,6 +11907,20 @@
         }
       }
     },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.1",
     "redux-devtools": "^3.7.0",

src/App.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import './App.less';
 import PageLayout from '@components/PageLayout';
-import Login from '@components/Login';
+import AuthIndex from '@components/AuthIndex';
 /*import { useSelector } from 'react-redux'*/
 
 function App(){
-    const tokenInfo =localStorage.getItem('token');
+   //const tokenInfo =localStorage.getItem('token');
     return (<div className="App">
-        {tokenInfo?<PageLayout></PageLayout>:<Login></Login>}
+        <AuthIndex></AuthIndex>
     </div>)
 };
 

src/common/common.less

@@ -43,4 +43,26 @@
       }
     }
   }
+}
+//面包屑样式覆盖
+.ant-breadcrumb{
+  margin: 20px 0 30px 30px;
+}
+//步骤条样式覆盖
+.ant-steps-item-icon{
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+}
+.ant-steps-item-tail{
+  top:18px;
+  left: 4px;
+}
+.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after,
+.ant-steps-item-title::after,
+.ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after{
+  background-color:#c2c2c2;
+}
+.ant-steps-item-icon, .ant-steps-item-content{
+  vertical-align: unset;
 }

src/components/AuthIndex/index.js

@@ -0,0 +1,32 @@
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+    Redirect,
+} from "react-router-dom";
+import NullPage from '@components/NullPage';
+import Login from '@components/Login';
+import PageLayout from '@components/PageLayout'
+
+export default function AuthIndex() {
+    const user = localStorage.getItem("token");
+    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>
+            </Switch>
+        </Router>
+    )
+}

src/components/NullPage/index.js

@@ -0,0 +1,7 @@
+export default function NullPage() {
+    return (
+        <div>
+            404
+        </div>
+    )
+}

src/components/OrgManager/AddSubOrg.js

@@ -1,18 +1,19 @@
 import {useEffect,useState,useContext} from 'react';
-import { Form, Input, Checkbox, Button, Select,Steps,Tabs ,InputNumber,Space,Switch, } from 'antd';
+import { Form, Input, Checkbox, Button, Select,Steps,Tabs ,InputNumber,Space,Switch,Breadcrumb  } from 'antd';
 import MenuTree  from './MenuTree';
 import './index.less';
 import OrgContext from './org-context';
-import {message} from "antd/lib/index";
 import apiObj from '@api/index';
+import backIcon from "@images/back.png";
 
 const {post,api,xPost} = apiObj;
 
 const { Step } = Steps;
 const { TabPane } = Tabs;
 const { Option } = Select;
-function AddSubOrg(){
+function AddSubOrg(props){
     const [current, setCurrent] = useState(0);
+    const { back } = props;
     const steps = [
         {
             title: '基础信息',
@@ -35,19 +36,27 @@ function AddSubOrg(){
         setCurrent(current - 1);
     };
     return (
-        <div className="add-container">
-            <Steps current={current} labelPlacement='vertical'>
-                {steps.map(item => (
-                    <Step key={item.title} title={item.title} />
-                ))}
-            </Steps>
-            <div className="steps-content">
-                <StepContent current={current}
-                    pre={pre}
-                    next={next}
-                />
+        <>
+            <Breadcrumb separator="">
+                <Breadcrumb.Item><img className='back-icon' src={backIcon} onClick={back} alt="返回上一页"/></Breadcrumb.Item>
+                <Breadcrumb.Item>组织管理</Breadcrumb.Item>
+                <Breadcrumb.Separator />
+                <Breadcrumb.Item>新增子组织</Breadcrumb.Item>
+            </Breadcrumb>
+            <div className="add-container">
+                <Steps current={current}>
+                    {steps.map(item => (
+                        <Step key={item.title} title={item.title} />
+                    ))}
+                </Steps>
+                <div className="steps-content">
+                    <StepContent current={current}
+                        pre={pre}
+                        next={next}
+                    />
+                </div>
             </div>
-        </div>
+        </>
     )
 }
 
@@ -220,9 +229,9 @@ function StepContent(props){
                 rules={[{ required: true }]}>
                 <Select placeholder='请选择类型'>
                     <Option value="">全部</Option>
-                    {typeList.map((item)=>{
+                    {typeList.map((item,i)=>{
                         return (
-                            <Option value={item.name} key={item.name}>{item.val}</Option>
+                            <Option value={item.name} key={i}>{item.val}</Option>
                         )
                     })}
                 </Select>

src/components/OrgManager/OrgManager.js

@@ -0,0 +1,294 @@
+import {useEffect,useState} from 'react';
+/*import { useDispatch,useSelector } from 'react-redux'*/
+import { Table,Modal, message, Menu, Breadcrumb, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
+import { DownOutlined,PlusOutlined } from '@ant-design/icons';
+import AddSubOrg from './AddSubOrg';
+import './index.less';
+import apiObj from '@api/index';
+import OrgContext from './org-context';
+
+const {post,api,xPost} = apiObj;
+const { Option } = Select;
+function OrgManager(){
+    useEffect(() => {
+        getFilterList();
+        getTableData();
+    },[]);
+
+    const [dataSource, setDataSource] = useState([]);
+    const [typeList,setTypeList] = useState([]);
+    const [visible,setVisible] = useState(false);
+    const [addVisible,setAddVisible] = useState(false);
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    //弹窗类型：1删除 2有子组织、用户删除 3禁用 4有子组织、用户禁用 5重置密码
+    const [modalType,setModalType] = useState(1);
+    const [modalTitle,setModalTitle] = useState(1);
+    const [operId,setOperId] = useState('');
+    const [orgId,setOrgId] = useState('');
+    const [orgName,setOrgName] = useState('');
+
+    const tipText={
+        1:'确定要删除该组织？',
+        2:'当前组织内可能包含子组织或其相关用户，删除后所包含信息将一并被删除',
+        3:'确定要禁用该组织？',
+        4:'当前组织内可能包含子组织或其相关用户，禁用后所包含信息将一并被禁用',
+        5:'确定要重置该组织密码？',
+    };
+
+    //获取筛选下拉数据
+    function getFilterList(){
+        post(api.getManagerBoxInfo).then((res)=>{
+            if(res.data.code===200){
+                const data = res.data.data;
+                setTypeList(data[43]);
+            }
+        })
+    }
+    //获取表格数据
+    function getTableData(param={}){
+        post(api.getHospitalListInfo,param).then((res)=>{
+            if(res.data.code===200){
+                const data = res.data.data;
+                setOrgId(data[0]?data[0].hospitalId:'');
+                setOrgName(data[0]?data[0].hospitalName:'')
+                setDataSource(data);
+            }
+
+        })
+    }
+    //启用/禁用
+    function enable(flag,id) {
+        const param = {HospitalId:id||operId,status:flag};
+        xPost(api.disableHospital,param).then((res)=>{
+            if(res.data.code===200){
+                getTableData();
+                setVisible(false);
+                message.success((flag?'启用':'禁用')+"成功");
+            }else{
+                message.warning(res.data.msg||'操作失败');
+            }
+        }).catch(()=>{
+            message.error("接口出错");
+        });
+    }
+    //重置密码
+    function onResetPsd(){
+        const param = {HospitalId:operId};
+        xPost(api.resetPassword,param).then((res)=>{
+            if(res.data.code===200){
+                getTableData();
+                setVisible(false)
+                message.success("重置成功");
+            }else{
+                message.warning(res.data.msg||'操作失败');
+            }
+        }).catch(()=>{
+            message.error("接口出错");
+        });
+    }
+    //删除
+    function onDelete(){
+        const param = {HospitalId:operId};
+        xPost(api.deleteHospital,param).then((res)=>{
+            if(res.data.code===200){
+                getTableData();
+                setVisible(false);
+                message.success("删除成功");
+            }else{
+                message.warning(res.data.msg||'操作失败');
+            }
+        }).catch(()=>{
+            message.error("接口出错");
+        });
+    }
+    //显示弹窗
+    function showModal(type,id){
+        setModalType(type);
+        setOperId(id);
+        setVisible(true);
+    }
+    //弹窗确认事件
+    function handleOk(){
+        if("1,2".indexOf(modalType)>-1){
+            onDelete();
+        }else if("3,4".indexOf(modalType)>-1){
+            enable(0);
+        }else if(modalType===5){
+            onResetPsd();
+        }
+
+    }
+    //弹窗取消
+    function handleCancel(){
+        setVisible(false);
+        setAddVisible(false);
+    }
+    //新增子组织弹窗
+    function showAddModal(title){
+        setModalTitle(title);
+        setAddVisible(true);
+    }
+    //保存
+    function addSubOrg(formData){
+        console.log('保存参数：',formData);
+        const param = formData;
+        post(api.addHospital,param).then((res)=>{
+            if(res.data.code===200){
+                getTableData();
+                setAddVisible(false);
+                message.success("添加成功");
+            }else{
+                message.warning(res.data.msg||'操作失败');
+            }
+        }).catch(()=>{
+            message.error("接口出错");
+        });
+    }
+    //表格渲染
+    function RenderTable(){
+        const columns = [
+            { title: '组织机构层级', dataIndex: 'hospitalName', key: 'hospitalName' },
+            { title: '类型',  key: 'type',render:(row)=>{
+                    if(row.children){
+                        return '-'
+                    }else{
+                        return row.type;
+                    }
+                } },
+            { title: '状态',  key: 'status',render:(row)=>{
+                    if(row.children){
+                        return '-'
+                    }else{
+                        return row.status;
+                    }
+                } },
+            { title: '创建时间', dataIndex: 'gmtCreate', key: 'gmtCreate' },
+            { title: '操作', key: 'operation', render: (row) => {
+                    //console.log(21,row)
+                    if(row.children){
+                        return '-'
+                    }
+                    const menu = (
+                        <Menu>
+                            <Menu.Item key="0" onClick={()=>showModal(5,row.hospitalId)}>重置密码</Menu.Item>
+                            <Menu.Item key="1" onClick={()=>showModal((row.hasUserFlag||row.hasHospitalFlag?2:1),row.hospitalId)}>删除</Menu.Item>
+                        </Menu>
+                    );
+                    return (<Space size="middle">
+                        <a>修改</a>
+                        {row.status==='1'?(<a onClick={()=>showModal(row.hasUserFlag||row.hasHospitalFlag?4:3,row.hospitalId)}>禁用</a>):(<a onClick={()=>enable(1,row.hospitalId)}>启用</a>)}
+                        <Dropdown overlay={menu} trigger={['click']}>
+                            <a className="ant-dropdown-link">
+                                更多 <DownOutlined />
+                            </a>
+                        </Dropdown>
+                    </Space>) }},
+        ];
+        return (
+            <Table
+                pagination={false}
+                className="components-table-demo-nested"
+                rowKey={record => record.hospitalId}
+                expandable={{defaultExpandAllRows:true}}
+                columns={columns}
+                dataSource={dataSource}
+            />
+        )
+    }
+    //筛选项渲染
+    const [form] = Form.useForm();
+    const onFinish = (values: any) => {
+        getTableData(values);
+        console.log('筛选项:',values);
+    };
+    const onReset = () => {
+        form.resetFields();
+        getTableData();
+    };
+    return (
+        <div className='container'>
+            <div className="filter-box">
+                <Form form={form} name="control-hooks" onFinish={onFinish}>
+                    <Row gutter={24}>
+                        <Col span={5} key={0}>
+                            <Form.Item name="hospitalName" label="组织名称">
+                                <Input placeholder='组织名称'/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={5} key={1}>
+
+                            <Form.Item name="type" label="类型">
+                                <Select
+                                    allowClear
+                                >
+                                    <Option value="">全部</Option>
+                                    {typeList.map((item)=>{
+                                        return (
+                                            <Option value={item.name}  key={item.name}>{item.val}</Option>
+                                        )
+                                    })}
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={5} key={2}>
+                            <Form.Item name="status" label="当前状态">
+                                <Select
+                                    allowClear
+                                >
+                                    <Option value="">全部</Option>
+                                    <Option value="1">启用</Option>
+                                    <Option value="0">禁用</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={9} key={3}>
+                            <Form.Item>
+                                <Button type="primary" htmlType="submit">
+                                    查询
+                                </Button>
+                                <Button htmlType="button" onClick={onReset}>
+                                    重置
+                                </Button>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </div>
+            <div className="table">
+                <div className="table-header">
+                    <Breadcrumb>
+                        <Breadcrumb.Item>组织管理</Breadcrumb.Item>
+                    </Breadcrumb>
+                    <Button type="primary" icon={<PlusOutlined />} onClick={()=> showAddModal('新增子组织')}>新增子组织</Button>
+                </div>
+                <RenderTable />
+            </div>
+            <Modal
+                title="提示"
+                okText='确定'
+                cancelText='取消'
+                width={400}
+                visible={visible}
+                onOk={handleOk}
+                confirmLoading={confirmLoading}
+                onCancel={handleCancel}
+            >
+                <p>{tipText[modalType]}</p>
+            </Modal>
+            <Modal
+                title={modalTitle}
+                footer={null}
+                width={690}
+                visible={addVisible}
+                confirmLoading={confirmLoading}
+                onCancel={handleCancel}
+            >
+                <OrgContext.Provider value={{orgId,orgName,typeList,save:addSubOrg}}>
+                    <AddSubOrg />
+                </OrgContext.Provider>
+            </Modal>
+        </div>
+    )
+}
+
+export default OrgManager;

src/components/OrgManager/index.js

@@ -144,6 +144,9 @@ function OrgManager(){
             message.error("接口出错");
         });
     }
+    function goBack(){
+        setAddVisible(false);
+    }
     //表格渲染
     function RenderTable(){
         const columns = [
@@ -164,30 +167,32 @@ function OrgManager(){
                 } },
             { title: '创建时间', dataIndex: 'gmtCreate', key: 'gmtCreate' },
             { title: '操作', key: 'operation', render: (row) => {
-                //console.log(21,row)
-                if(row.children){
-                    return '-'
-                }
-                const menu = (
-                    <Menu>
-                        <Menu.Item key="0" onClick={()=>showModal(5,row.hospitalId)}>重置密码</Menu.Item>
-                        <Menu.Item key="1" onClick={()=>showModal((row.hasUserFlag||row.hasHospitalFlag?2:1),row.hospitalId)}>删除</Menu.Item>
-                    </Menu>
-                );
-                return (<Space size="middle">
-                    <a>修改</a>
-                    {row.status==='1'?(<a onClick={()=>showModal(row.hasUserFlag||row.hasHospitalFlag?4:3,row.hospitalId)}>禁用</a>):(<a onClick={()=>enable(1,row.hospitalId)}>启用</a>)}
-                    <Dropdown overlay={menu} trigger={['click']}>
-                        <a className="ant-dropdown-link">
-                            更多 <DownOutlined />
-                        </a>
-                    </Dropdown>
-                </Space>) }},
+                    //console.log(21,row)
+                    if(row.children){
+                        return '-'
+                    }
+                    const menu = (
+                        <Menu>
+                            <Menu.Item key="0" onClick={()=>showModal(5,row.hospitalId)}>重置密码</Menu.Item>
+                            <Menu.Item key="1" onClick={()=>showModal((row.hasUserFlag||row.hasHospitalFlag?2:1),row.hospitalId)}>删除</Menu.Item>
+                        </Menu>
+                    );
+                    return (<Space size="middle">
+                        <a>修改</a>
+                        {row.status==='1'?(<a onClick={()=>showModal(row.hasUserFlag||row.hasHospitalFlag?4:3,row.hospitalId)}>禁用</a>):(<a onClick={()=>enable(1,row.hospitalId)}>启用</a>)}
+                        <Dropdown overlay={menu} trigger={['click']}>
+                            <a className="ant-dropdown-link">
+                                更多 <DownOutlined />
+                            </a>
+                        </Dropdown>
+                    </Space>) }},
         ];
         return (
             <Table
+                pagination={false}
                 className="components-table-demo-nested"
                 rowKey={record => record.hospitalId}
+                expandable={{defaultExpandAllRows:true}}
                 columns={columns}
                 dataSource={dataSource}
             />
@@ -203,6 +208,13 @@ function OrgManager(){
         form.resetFields();
         getTableData();
     };
+    if(addVisible){
+        return (
+                <OrgContext.Provider value={{orgId,orgName,typeList,save:addSubOrg}}>
+                    <AddSubOrg back={goBack}/>
+                </OrgContext.Provider>
+        )
+    }
     return (
         <div className='container'>
             <div className="filter-box">
@@ -219,7 +231,6 @@ function OrgManager(){
                                 <Select
                                     allowClear
                                 >
-                                    <Option value="">全部</Option>
                                     {typeList.map((item)=>{
                                         return (
                                             <Option value={item.name}  key={item.name}>{item.val}</Option>
@@ -273,18 +284,6 @@ function OrgManager(){
             >
                 <p>{tipText[modalType]}</p>
             </Modal>
-            <Modal
-                title={modalTitle}
-                footer={null}
-                width={690}
-                visible={addVisible}
-                confirmLoading={confirmLoading}
-                onCancel={handleCancel}
-            >
-            <OrgContext.Provider value={{orgId,orgName,typeList,save:addSubOrg}}>
-                <AddSubOrg />
-            </OrgContext.Provider>
-            </Modal>
         </div>
     )
 }

src/components/OrgManager/index.less

@@ -34,6 +34,18 @@
     margin-right: 20px;
   }
 }
+.add-container{
+  margin: 30px 165px;
+}
+.ant-breadcrumb{
+  .back-icon{
+    width: 14px;
+    height: 12px;
+    vertical-align: baseline;
+    margin-right: 4px;
+    cursor: pointer;
+  }
+}
 
 
 .table-header{

src/utils/routes.js

@@ -0,0 +1,22 @@
+import Login from '@components/Login';
+import OrgManager from '@components/OrgManager';
+import RoleManager from '@components/RoleManager';
+import UserManager from '@components/UserManager';
+
+const routes = [
+    {
+        path:'/login',
+        component:Login
+    },{
+        path:'/org',
+        component:OrgManager
+    },{
+        path:'/role',
+        component:RoleManager
+    },{
+        path:'/user',
+        component:UserManager
+    },
+];
+
+export default routes;