组织管理表格初版

craco.config.js

@@ -10,13 +10,18 @@ module.exports = {
             '@common':resolve('src/common'),
             '@components':resolve('src/components'),
             '@utils':resolve('src/utils'),
-            '@image':resolve('src/images'),
+            '@images':resolve('src/images'),
+            '@store':resolve('src/store'),
+            '@actions':resolve('src/actions'),
+            '@reducers':resolve('src/reducers'),
         }
     },
     plugins: [
         {
             plugin: CracoLessPlugin,
             options: {
+                styleLoaderOptions:{},
+                cssLoaderOptions:{},
                 lessLoaderOptions: {
                     lessOptions: {
                         modifyVars: {

src/App.less

@@ -4,6 +4,7 @@
 .page-header{
   background: @primary-color;
   height: @header-height;
+  line-height: @header-height;
 }
 .page-sider{
   height: calc(100vh - @header-height);

src/components/AFilterBar/index.js

@@ -0,0 +1 @@
+/********筛选项组件********/

src/components/AHeader/index.js

@@ -1,9 +1,10 @@
 import {Dropdown ,Menu} from 'antd';
-import logo from '@image/logo.png';
-import msg from '@image/msg.png';
-import me from '@image/me.png';
-import down from '@image/down.png';
+import logo from '@images/logo.png';
+import msg from '@images/msg.png';
+import me from '@images/me.png';
+import down from '@images/down.png';
 import {Component} from "react";
+import style from './index.less'
 
 const propTypes = {
 
@@ -22,16 +23,19 @@ class AHeader extends Component{
         );
         return (
             <>
-                <img src={logo} alt=""/>
-                <span>AI病案质控平台</span>
-                <div className="infos">
-                    <span className='time'></span>
-                    <img src={msg} alt=""/>
+                <img className='logo' src={logo} alt=""/>
+                <span className='break-line'>|</span>
+                <span className='sys-name'>AI病案质控平台</span>
+                <div className='infos'>
+                    <span className='time'>2021年5月14日/星期五/18:05:19</span>
+                    <span className='break-line'>|</span>
+                    <img className='msg-icon' src={msg} alt="未读消息"/>
                     <div className="user">
-                        <img src={me} alt=""/>
+                        <img className='user-icon' src={me} alt="用户头像"/>
                         <Dropdown overlay={menu} trigger={['click']}>
                             <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-                                用户名 <img src={down} alt=""/>
+                                <i>用户名</i>
+                                <img src={down} alt=""/>
                             </a>
                         </Dropdown>
                     </div>

src/components/AHeader/index.less

@@ -1,3 +1,36 @@
+@import "../../common/common.less";
+
+@header-font-color:#fff;
+.logo{
+  margin: -6px 26px 0 0;
+}
+.break-line{
+  color: #fff;
+  margin-right: 26px;
+  vertical-align: middle;
+}
+.sys-name{
+  color: @header-font-color;
+  vertical-align: middle;
+}
 .infos{
   float: right;
+  .user{
+    margin-left: 18px;
+    float: right;
+  }
+  .ant-dropdown-link{
+    margin-left: 6px;
+    color: @header-font-color;
+    vertical-align: middle;
+    i{
+      font-style: normal;
+    }
+  }
+}
+.time{
+  color: @header-font-color;
+  display: inline-block;
+  margin-right: 18px;
+  vertical-align: middle;
 }

src/components/AMenu/index.js

@@ -29,6 +29,7 @@ function AMenu (){
             <Menu
                 defaultSelectedKeys={['组织管理']}
                 defaultOpenKeys={['权限管理']}
+                selectedKeys={activeTab}
                 mode="inline"
                 onClick={changeMenu}
             >
@@ -36,7 +37,7 @@ function AMenu (){
                     <Menu.Item key="组织管理">组织管理</Menu.Item>
                     <Menu.Item key="角色管理">角色管理</Menu.Item>
                     <Menu.Item key="用户管理">用户管理</Menu.Item>
-                    <Menu.Item key="数据管理">数据管理{activeTab}</Menu.Item>
+                    <Menu.Item key="数据管理">数据管理</Menu.Item>
                 </SubMenu>
                 <SubMenu key="系统管理" title="系统管理">
                     <Menu.Item key="功能管理">功能管理</Menu.Item>

src/components/ATabs/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Tabs } from 'antd';
 import { useDispatch,useSelector } from 'react-redux'
-import { active } from '../../store/reducers/tabPanes'
+import { active, close} from '../../store/reducers/tabPanes'
 
 const { TabPane } = Tabs;
 const propTypes = {
@@ -17,13 +17,20 @@ function ATabs(){
         console.log(22,state)
         return state.tabPanes.activeTab
     });
+    //切换tab
     function onChange(activeKey){
         dispatch(active(activeKey))
     }
+    //关闭tab
+    function onDelTab(activeKey){
+        const paneIndex = panes.findIndex((it)=>it.key===activeKey);
+        dispatch(close({del:paneIndex,active:panes[1].key}))
+    }
     return (
         <Tabs
             hideAdd
             onChange={onChange}
+            onEdit={onDelTab}
             type="editable-card"
             activeKey={activeTab}
         >

src/components/OrgManager/index.js

@@ -1,7 +1,92 @@
+import { useDispatch,useSelector } from 'react-redux'
+import { Table, Badge, Menu, Dropdown, Space } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import './index.less';
+
 function OrgManager(){
+    const menu = (
+        <Menu>
+            <Menu.Item>Action 1</Menu.Item>
+            <Menu.Item>Action 2</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>
+                ),
+            },
+        ];
+
+        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 columns = [
+        { title: 'Name', dataIndex: 'name', key: 'name' },
+        { title: 'Platform', dataIndex: 'platform', key: 'platform' },
+        { title: 'Version', dataIndex: 'version', key: 'version' },
+        { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+        { title: 'Creator', dataIndex: 'creator', key: 'creator' },
+        { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
+        { title: 'Action', key: 'operation', render: () => <a>Publish</a> },
+    ];
 
+    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 (
-        <div>组织管理</div>
+        <div className='container'>
+            <Table
+                className="components-table-demo-nested"
+                columns={columns}
+                expandable={{ expandedRowRender }}
+                dataSource={data}
+            />
+        </div>
     )
 }
 

src/components/OrgManager/index.less

@@ -0,0 +1,12 @@
+@import "@common/common.less";
+
+.container{
+  background: #fff;
+  margin:14px ;
+  padding:38px 28px;
+}
+.ant-table-thead > tr > th{
+  background: @table-th-color;
+  color: @text-color;
+  border-bottom: 1px #D8D8D8 solid;
+}

src/store/reducers/tabPanes.js

@@ -7,16 +7,15 @@ export const slice = createSlice({
         panes:[{title:'111',content:'111',key:'111'}]
     },
     reducers: {
-        close: (state,action) => {          //关闭tab
-            state.activeTab = action.activeTab||'';
-            state.panes.slice(action.index,1);
+        close: (state,action) => {        //关闭tab
+            state.panes.splice(action.payload.del,1);
+            state.activeTab = action.payload.active;
         },
         add: (state,action) => {        //打开新tab
-            console.log(33,action)
             state.panes.push(action.payload);
             state.activeTab = action.payload.key;
         },
-        active:(state,action) => {   console.log(action)       //切换tab
+        active:(state,action) => {       //切换tab
             state.activeTab = action.payload;
         },
     },