组织管理列表获取1

craco.config.js

@@ -23,8 +23,8 @@ module.exports = {
             '@utils':resolve('src/utils'),
             '@images':resolve('src/images'),
             '@store':resolve('src/store'),
-            '@actions':resolve('src/actions'),
-            '@reducers':resolve('src/reducers'),
+            '@actions':resolve('src/store/actions'),
+            '@reducers':resolve('src/store/reducers'),
             '@api':resolve('src/api'),
         }
     },

src/App.js

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

src/api/index.js

@@ -1,6 +1,6 @@
 import api from './request';
 const axios=require('axios');
-axios.defaults.baseURL = 'http://192.168.2.232:8871';
+axios.defaults.baseURL = 'http://192.168.2.237:8871/';//'http://192.168.2.232:8871';
 const post=(url,data)=>{
     return axios({
         method:'post',
@@ -16,6 +16,21 @@ const get=(url,data)=>{
         data
     });
 };
+
+//拦截所有请求添加token
+axios.interceptors.request.use(function (req) {
+    const tokenStr = localStorage.getItem('token');
+    if (tokenStr) {
+        req.headers.Authorization = `Bearer ${tokenStr}`;
+        req.headers.hospitalId=1;
+        return req;
+    } else {
+        return req;
+    }
+}, function (error) {
+    return Promise.reject(error);
+});
+
 const obj = {
     post,
     get,

src/api/request.js

@@ -1,4 +1,5 @@
 const request = {
     getHospitalListInfo:'/security-center/hospitalManage/getHospitalListInfo',
+    login:'/security-center/userManage/login',
 };
 export default request;

src/components/AMenu/index.js

@@ -28,7 +28,7 @@ function AMenu (){
         //切换菜单、增加tab
         function changeMenu(val){
             const item = panes.find((it)=>it.key===val.key);
-            console.log(item);
+            //console.log(item);
             if(item){   //已存在当前tab，则定位即可不增加
                 dispatch(active(val.key));
                 return;

src/components/ATabs/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Tabs } from 'antd';
 import { useDispatch,useSelector } from 'react-redux'
 import { active, close} from '../../store/reducers/tabPanes'
+import './index.less'
 
 const { TabPane } = Tabs;
 const propTypes = {
@@ -11,10 +12,9 @@ const defaultProps = {};
 function ATabs(){
     const panes =useSelector(state => {
         return state.tabPanes.panes
-    });;
+    });
     const dispatch = useDispatch();
     const activeTab = useSelector(state => {
-        console.log(22,state)
         return state.tabPanes.activeTab
     });
     //切换tab
@@ -27,19 +27,21 @@ function ATabs(){
         dispatch(close({del:paneIndex,active:panes[1].key}))
     }
     return (
-        <Tabs
-            hideAdd
-            onChange={onChange}
-            onEdit={onDelTab}
-            type="editable-card"
-            activeKey={activeTab}
-        >
-            {panes.map(pane => (
-                <TabPane tab={pane.title} key={pane.key}>
-                    {pane.content}
-                </TabPane>
-            ))}
-        </Tabs>
+        <div className="tab-container">
+            <Tabs
+                hideAdd
+                onChange={onChange}
+                onEdit={onDelTab}
+                type="editable-card"
+                activeKey={activeTab}
+            >
+                {panes.map(pane => (
+                    <TabPane tab={pane.title} key={pane.key}>
+                        {pane.content}
+                    </TabPane>
+                ))}
+            </Tabs>
+        </div>
     )
 }
 

src/components/ATabs/index.less

@@ -0,0 +1,7 @@
+@import "@common/common.less";
+
+.tab-container{
+  background: @bg-color;
+  padding: 10px 12px;
+  margin:12px;
+}

src/components/Login/index.js

@@ -0,0 +1,30 @@
+/*import {useEffect} from 'react';
+import { useDispatch,useSelector } from 'react-redux'*/
+import apiObj from '@api/index';
+import { add } from '@reducers/userInfo'
+
+const {post,api} = apiObj;
+function Login() {
+    /*useEffect(() => {
+        login();
+    });*/
+    //const dispatch = useDispatch();
+    function login(){
+        post(api.login,{
+            "password": "a123456",
+            "username": "admin"
+        }).then((res)=>{
+            console.log(res)
+            if(res.data.code===200){
+                const data = res.data.data;
+                //dispatch(add(res.data.data))
+                localStorage.setItem('token',data.token);
+            }
+        })
+    }
+    return (
+        <button onClick={login}>登录</button>
+    )
+}
+
+export default Login;

src/components/OrgManager/index.js

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useEffect,useState} from 'react';
 import { useDispatch,useSelector } from 'react-redux'
 import { Table, Badge, Menu, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
@@ -10,110 +10,60 @@ const { Option } = Select;
 function OrgManager(){
     useEffect(() => {
         getTableData();
-    });
+    },[]);
+
+    const [dataSource, setDataSource] = useState([]);
+    const [filterData, setFilterData] = useState({});
+
     function getTableData(){
-        post(api.getHospitalListInfo).then((res)=>{
-            console.log(res)
+        const param = filterData;
+        post(api.getHospitalListInfo,{}).then((res)=>{
+            if(res.data.code===200){
+                const data = res.data.data;
+                setDataSource(data[0].hospitalDTOS);
+            }
+
         })
     }
-    const menu = (
-        <Menu>
-            <Menu.Item>Action 1</Menu.Item>
-            <Menu.Item>Action 2</Menu.Item>
-        </Menu>
-    );
+    function RenderTable(){
+        const menu = (
+            <Menu>
+                <Menu.Item key="0">重置密码</Menu.Item>
+                <Menu.Item key="1">禁用</Menu.Item>
+                <Menu.Item key="3">删除</Menu.Item>
+            </Menu>
+        );
 
-    const expandedRowRender = () => {
         const columns = [
-            { title: 'Date', dataIndex: 'date', key: 'date' },
-            { title: 'Name', dataIndex: 'name', key: 'name' },
-            {
-                title: 'Status',
-                key: 'state',
-                render: () => (
-                    <span>
-                        <Badge status="success" />
-                        Finished
-                      </span>
-                ),
-            },
-            { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
-            {
-                title: 'Action',
-                dataIndex: 'operation',
-                key: 'operation',
-                render: () => (
-                    <Space size="middle">
-                        <a>Pause</a>
-                        <a>Stop</a>
-                        <Dropdown overlay={menu}>
-                            <a>
-                                More <DownOutlined />
-                            </a>
-                        </Dropdown>
-                    </Space>
-                ),
-            },
+            { title: '组织机构层级', dataIndex: 'hospitalName', key: 'hospitalName' },
+            { title: '类型', dataIndex: 'type', key: 'type' },
+            { title: '状态', dataIndex: 'status', key: 'status' },
+            { title: '创建时间', dataIndex: 'gmtCreate', key: 'gmtCreate' },
+            { title: '操作', key: 'operation', render: () => (<Space size="middle">
+                    <a>修改</a>
+                    <a>启用</a>
+                    <Dropdown overlay={menu} trigger={['click']}>
+                        <a className="ant-dropdown-link">
+                            更多 <DownOutlined />
+                        </a>
+                    </Dropdown>
+                </Space>) },
         ];
-
-        const data = [];
-        for (let i = 0; i < 3; ++i) {
-            data.push({
-                key: i,
-                date: '2014-12-24 23:12:00',
-                name: 'This is production name',
-                upgradeNum: 'Upgraded: 56',
-            });
-        }
-        return <Table columns={columns} dataSource={data} pagination={false} />;
-    };
-    const moreOper = (
-        <Menu>
-            <Menu.Item key="0">重置密码</Menu.Item>
-            <Menu.Item key="1">禁用</Menu.Item>
-            <Menu.Item key="3">删除</Menu.Item>
-        </Menu>
-    );
-    const columns = [
-        { title: '组织机构层级', dataIndex: 'name', key: 'name' },
-        { title: '类型', dataIndex: 'platform', key: 'platform' },
-        { title: '状态', dataIndex: 'version', key: 'version' },
-        { title: '创建时间', dataIndex: 'upgradeNum', key: 'upgradeNum' },
-        { title: '操作', key: 'operation', render: () => (<Space size="middle">
-                <a>修改</a>
-                <a>启用</a>
-                <Dropdown overlay={moreOper} trigger={['click']}>
-                <a className="ant-dropdown-link">
-                    更多 <DownOutlined />
-
-                </a>
-                </Dropdown>
-            </Space>) },
-    ];
-
-    const data = [];
-    for (let i = 0; i < 3; ++i) {
-        data.push({
-            key: i,
-            name: 'Screem',
-            platform: 'iOS',
-            version: '10.3.4.5654',
-            upgradeNum: 500,
-            creator: 'Jack',
-            createdAt: '2014-12-24 23:12:00',
-        });
+        return (
+            <Table
+                className="components-table-demo-nested"
+                rowKey={record => record.hospitalId}
+                columns={columns}
+                dataSource={dataSource}
+            />
+        )
     }
-    const layout = {
-        labelCol: { span: 8 },
-        wrapperCol: { span: 16 },
-    };
-    const tailLayout = {
-        wrapperCol: { offset: 8, span: 16 },
-    };
+
     const [form] = Form.useForm();
 
     const onFinish = (values: any) => {
-        console.log(values);
+        setFilterData(values);
+        console.log('筛选项:',values);
     };
 
     const onReset = () => {
@@ -123,37 +73,37 @@ function OrgManager(){
     return (
         <div className='container'>
             <div className="filter-box">
-                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
+                <Form form={form} name="control-hooks" onFinish={onFinish}>
                     <Row gutter={24}>
                         <Col span={5} key={0}>
-                            <Form.Item name="组织名称" label="组织名称">
+                            <Form.Item name="hospitalName" label="组织名称">
                                 <Input placeholder='组织名称'/>
                             </Form.Item>
                         </Col>
                         <Col span={5} key={1}>
-                            <Form.Item name="类型" label="类型">
+                            <Form.Item name="type" label="类型">
                                 <Select
                                     allowClear
                                 >
-                                    <Option value="male">全部</Option>
+                                    <Option value="">全部</Option>
                                     <Option value="female">集团医院</Option>
                                     <Option value="other">医共体</Option>
                                 </Select>
                             </Form.Item>
                         </Col>
                         <Col span={5} key={2}>
-                            <Form.Item name="当前状态" label="当前状态">
+                            <Form.Item name="status" label="当前状态">
                                 <Select
                                     allowClear
                                 >
-                                    <Option value="male">全部</Option>
-                                    <Option value="female">启用</Option>
-                                    <Option value="other">禁用</Option>
+                                    <Option value="">全部</Option>
+                                    <Option value="1">启用</Option>
+                                    <Option value="0">禁用</Option>
                                 </Select>
                             </Form.Item>
                         </Col>
                         <Col span={9} key={3}>
-                            <Form.Item {...tailLayout}>
+                            <Form.Item>
                                 <Button type="primary" htmlType="submit">
                                     查询
                                 </Button>
@@ -165,12 +115,7 @@ function OrgManager(){
                     </Row>
                 </Form>
             </div>
-            <Table
-                className="components-table-demo-nested"
-                columns={columns}
-                expandable={{ expandedRowRender }}
-                dataSource={data}
-            />
+            <RenderTable />
         </div>
     )
 }

src/store/reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import tabPanes from './tabPanes';
+import userInfo from './userInfo';
 
 const rootReducer = combineReducers({
-    tabPanes
+    tabPanes,
+    userInfo
 });
 
 export default rootReducer;

src/store/reducers/userInfo.js

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const slice = createSlice({
+    name: 'userInfo',
+    initialState: {
+        tokenInfo:null
+    },
+    reducers: {
+        add: (state,action) => {        //添加token
+            state.tokenInfo=action.payload;
+        },
+        remove: (state) => {        //删除token
+            state.tokenInfo=null;
+        },
+    },
+});
+
+export const { remove, add} = slice.actions;
+
+export default slice.reducer;