通知管理--

craco.config.js

@@ -16,6 +16,18 @@ module.exports = {
         }
     },*/
     webpack:{
+        /*configure: (config, { env, paths }) => {
+            config.module.rules.push({
+                test: /\.svg$/,
+                use: [{
+                    loader: 'html-loader',
+                    options: {
+                        minimize: true
+                    }
+                }]
+            })
+            return config;
+        },*/
         alias:{
             '@':resolve('src'),
             '@common':resolve('src/common'),
@@ -26,6 +38,8 @@ module.exports = {
             '@actions':resolve('src/store/actions'),
             '@reducers':resolve('src/store/reducers'),
             '@api':resolve('src/api'),
+            /*'parchment': resolve('node_modules/parchment/src/parchment.ts'),
+            'quill': resolve('node_modules/quill/quill.js'),*/
         }
     },
     plugins: [

package-lock.json

@@ -3993,6 +3993,11 @@
         "wrap-ansi": "^6.2.0"
       }
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6113,6 +6118,11 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -6196,6 +6206,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-glob": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
@@ -6939,6 +6954,15 @@
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
     },
+    "html-loader": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-2.1.2.tgz",
+      "integrity": "sha512-XB4O1+6mpLp4qy/3qg5+1QPZ/uXvWtO64hNAX87sKHwcHkp1LJGU7V3sJ9iVmRACElAZXQ4YOO/Lbkx5kYfl9A==",
+      "requires": {
+        "html-minifier-terser": "^5.1.1",
+        "parse5": "^6.0.1"
+      }
+    },
     "html-minifier-terser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -9764,6 +9788,11 @@
         }
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11250,6 +11279,36 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -11298,6 +11357,27 @@
         }
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "rc-align": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.10.tgz",
@@ -14119,6 +14199,41 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "ts-loader": {
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.6.tgz",
+      "integrity": "sha512-QMTC4UFzHmu9wU2VHZEmWWE9cUajjfcdcws+Gh7FhiO+Dy0RnR1bNz0YCHqhI0yRowCE9arVnNxYHqELOy9Hjw==",
+      "requires": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "enhanced-resolve": {
+          "version": "5.8.3",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
+          "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
+          "requires": {
+            "graceful-fs": "^4.2.4",
+            "tapable": "^2.2.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "tapable": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
+        }
+      }
+    },
     "ts-pnp": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -14197,6 +14312,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
+      "integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA=="
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",

package.json

@@ -11,6 +11,9 @@
     "antd": "^4.16.10",
     "axios": "^0.21.1",
     "craco-less": "^1.18.0",
+    "html-loader": "^2.1.2",
+    "quill": "^1.3.7",
+    "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
@@ -21,6 +24,8 @@
     "redux-devtools": "^3.7.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.4.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/common/QuillEditor.js

@@ -0,0 +1,20 @@
+import Quill from 'quill/core';
+
+import Toolbar from 'quill/modules/toolbar';
+import Snow from 'quill/themes/snow';
+
+import Bold from 'quill/formats/bold';
+import Italic from 'quill/formats/italic';
+import Header from 'quill/formats/header';
+
+
+Quill.register({
+    'modules/toolbar': Toolbar,
+    'themes/snow': Snow,
+    'formats/bold': Bold,
+    'formats/italic': Italic,
+    'formats/header': Header
+});
+
+
+export default Quill;

src/common/SelectedTag.js

@@ -0,0 +1,17 @@
+import delIcon from "@images/del.png";
+import './selectedTag.less';
+
+function SelectedTag(){
+
+    return (
+        <div className="selected-box">
+            <p className='clear-bar'>
+                <span>已选中</span>
+                <a href=""><img className='back-icon' src={delIcon} alt="清空所有" />清空所有</a>
+            </p>
+            <div className="selected-items"></div>
+        </div>
+    )
+}
+
+export default SelectedTag;

src/common/selectedTag.less

@@ -0,0 +1,19 @@
+@import "@common/common.less";
+
+.selected-box{
+  border:1px @border-color-base solid;
+  min-height: 76px;
+}
+.clear-bar{
+  line-height: 30px;
+  background: @table-th-color;
+  padding:0 20px;
+  img{
+    vertical-align: middle;
+    margin-right: 2px;
+  }
+  a{
+    float: right;
+    color: @text-color;
+  }
+}

src/components/DataManager/MenuTree.js

@@ -1,5 +1,4 @@
 import { Tree } from 'antd';
-import DataContext from './data-context';
 function MenuTree(props) {
   const { data, checkEv, checkeds } = props;
   //console.log(42,checkeds)

src/components/MsgManage/AddNewMsg.js

@@ -0,0 +1,145 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux'
+import { Table, Modal, message, Menu, Breadcrumb, Dropdown, Space, Form, Radio, Input, Button, Tabs, Row, Col, Select } from 'antd';
+import { DownOutlined, PlusOutlined } from '@ant-design/icons';
+import Quill from '@common/QuillEditor';
+import SelectedTag from '@common/SelectedTag.js';
+import UserList from './UserList';
+import DeptTree from './DeptTree';
+import './index.less';
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import backIcon from "@images/back.png";
+import apiObj from '@api/index';
+import utils from '@utils/index'
+const { post, api, xPost } = apiObj;
+const { Option } = Select;
+const { TabPane } = Tabs;
+function AddNewMsg() {
+    const [form] = Form.useForm();
+    const initialValues={receiveType:0,type:1};
+    const [showCustom,setShowCustom] = useState(false);
+
+    useEffect(() => {
+        /*var toolbarOptions = [
+            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+            ['blockquote', 'code-block'],
+
+            [{ 'header': 1 }, { 'header': 2 }], // custom button values
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+            [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
+            [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
+            [{ 'direction': 'rtl' }], // text direction
+
+            [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+            [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
+            [{ 'font': [] }],
+            [{ 'align': [] }],
+
+            ['clean'], // remove formatting button
+            ['chord'],
+            ['play']
+        ];
+        const editor = document.getElementById('editor');
+        let quill = new Quill(editor,{
+            modules:{
+                toolbar: {
+                    container: [['bold', 'italic'], ['link', 'image']],
+                }
+            },
+            theme:'snow'
+        });*/
+        //刷新列表
+        getUserData();
+
+    }, []);
+    function getUserData(){
+        post(api.getHospitalUser, {}).then((res) => {
+            const { code } = res.data;
+            if (code === 200) {
+
+            } else {
+                message.warning(res.data.msg || '获取用户列表失败，请重试')
+            }
+        });
+    }
+    //返回通知管理页
+    function goBack(){
+
+    }
+    //发送消息
+    function sendMsg(){
+        console.log(form.getFieldsValue())
+    }
+    //类型切换
+    function onTypeChange(){
+
+    }
+    //接收者类型切换
+    function onReceiveTypeChange(e){
+        const val = e.target.value;
+        setShowCustom(val===1);
+    }
+    //切换tab
+    function handleTabChange(){
+
+    }
+    return (
+        <>
+            <Breadcrumb separator="">
+                <Breadcrumb.Item><img className='back-icon' src={backIcon} onClick={goBack} alt="返回上一页" /></Breadcrumb.Item>
+                <Breadcrumb.Item>通知管理</Breadcrumb.Item>
+                <Breadcrumb.Separator />
+                <Breadcrumb.Item>新增通知</Breadcrumb.Item>
+            </Breadcrumb>
+            <div className='add-msg-container'>
+            <Form form={form}
+                  initialValues={initialValues}
+                  labelCol={{ span: 2 }}
+                  layout="horizontal">
+                <Form.Item name='type' label='类型' required>
+                    <Radio.Group onChange={onTypeChange}>
+                        <Radio value={1}>公告</Radio>
+                        <Radio value={2}>其他</Radio>
+                    </Radio.Group>
+                </Form.Item>
+                <Form.Item name='title' label='标题' required>
+                    <Input />
+                </Form.Item>
+                <Form.Item name='content' label='内容' required>
+                    <div className="ql-snow">
+                        <div id='editor'></div>
+                    </div>
+
+                </Form.Item>
+                <Form.Item name='receiveType' label='接收者' required>
+                    <Radio.Group onChange={onReceiveTypeChange}>
+                        <Radio value={0}>所有人</Radio>
+                        <Radio value={1}>自定义</Radio>
+                    </Radio.Group>
+                </Form.Item>
+            </Form>
+            {showCustom?<div className="choose-container">
+                <SelectedTag></SelectedTag>
+                <div className="user-type-box">
+                    <Tabs defaultActiveKey="1" onChange={handleTabChange}>
+                        <TabPane tab="指定用户" key="1">
+                            <UserList></UserList>
+                        </TabPane>
+                        <TabPane tab="指定科室" key="2">
+                            <DeptTree></DeptTree>
+                        </TabPane>
+                    </Tabs>
+                </div>
+            </div>:""}
+            <div className="button-box">
+                <Button onClick={goBack}>取消</Button>
+                <Button onClick={sendMsg} type='primary'>发送</Button>
+            </div>
+        </div>
+            </>)
+}
+
+export default AddNewMsg;

src/components/MsgManage/DeptTree.js

@@ -0,0 +1,27 @@
+import { Tree } from 'antd';
+function DeptTree(props) {
+    const { data, checkEv, checkeds } = props;
+    //console.log(42,checkeds)
+    //菜单选中事件
+
+
+    function onCheck(checkedKeys, e) {
+        checkEv(checkedKeys)
+    }
+    function onSelect() {
+
+    }
+    const treeData = data ? data : null;
+    const defaultCheckedKeys = checkeds && checkeds.softwareMenuIds ? checkeds.softwareMenuIds.slice() : []
+    return (
+        <Tree
+            checkable
+            defaultCheckedKeys={defaultCheckedKeys}
+            onCheck={onCheck}
+            onSelect={onSelect}
+            treeData={treeData}
+        />
+    )
+}
+
+export default DeptTree;

src/components/MsgManage/UserList.js

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import { 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 './index.less';
+import apiObj from '@api/index';
+import utils from '@utils/index'
+const { post, api, xPost } = apiObj;
+const { Option } = Select;
+function UserList() {
+    useEffect(() => {
+        //刷新列表
+        getTableData();
+
+    }, []);
+
+    const [size, setSize] = useState(15);       //每页显示条数
+    const [total, setTotal] = useState(0);       //每页显示条数
+    const [dataSource, setDataSource] = useState([]);   //列表数据
+    //从state中取出状态、类型列表
+    const staticInfo = useSelector(state => {
+        return state.staticInfo;
+    });
+    const { msgTypeList, msgStatusList } = staticInfo;
+
+    //获取表格数据
+    function getTableData(param = {}) {
+        post(api.getHospitalUser, param).then((res) => {
+            if (res.data.code === 200) {
+                let data = res.data.data;
+                setTotal(data.total);
+                setDataSource(data.records);
+            }
+
+        })
+    }
+    //每页显示条数切换
+    function onSizeChange(){
+
+    }
+    //翻页
+    function onPageChange(){
+
+    }
+    //表格渲染
+    function RenderTable() {
+        const columns = [
+            { title: '全选',width:60, dataIndex: 'title', key: 'title' },
+            { title: '姓名', dataIndex: 'name', key:'name'},
+            { title: '电话号码', dataIndex: 'mobilePhone', key: 'mobilePhone' },
+            { title: '所属组织', dataIndex: 'hospitalName', key: 'hospitalName' },
+        ];
+        const rowSelection = {
+            onChange:()=>{}
+        };
+        return (
+            <Table
+                rowSelection={rowSelection}
+                rowKey={record => record.id}
+                columns={columns}
+                dataSource={dataSource}
+                pagination={{
+                    showSizeChanger:true,
+                    pageSizeOptions:[15,30,60,120],
+                    defaultPageSize:size,
+                    pageNo: 1,
+                    size:'small',
+                    total: total,
+                    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
+                }}
+            />
+        )
+
+    }
+    //筛选项渲染
+    const [form] = Form.useForm();
+    const onFinish = (values: any) => {
+        getTableData(values);
+        console.log('筛选项:', values);
+    };
+    const onReset = () => {
+        form.resetFields();
+        getTableData();
+    };
+    return (
+        <div className='wrapper'>
+            <div className="filter-box">
+                <Form form={form} name="control-hooks" onFinish={onFinish}>
+                    <Row gutter={24}>
+                        <Col span={5} key={1}>
+                            <Form.Item name="type" label="姓名">
+                                <Input placeholder='姓名'/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={5} key={2}>
+                            <Form.Item name="type" label="手机号码">
+                                <Input placeholder='手机号码'/>
+                            </Form.Item>
+                        </Col>
+                        <Col span={5} key={3}>
+                            <Form.Item name="status" label="所属组织">
+                                <Select
+                                    allowClear
+                                >
+                                    {msgStatusList.map((item) => {
+                                        return (
+                                            <Option value={item.name} key={item.name}>{item.val}</Option>
+                                        )
+                                    })}
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={9} key={4}>
+                            <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">
+                    <h2 className="table-title">用户列表</h2>
+                </div>
+                <RenderTable />
+            </div>
+        </div>
+    )
+}
+
+export default UserList;

src/components/MsgManage/index.js

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { 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 AddNewMsg from './AddNewMsg.js';
 import './index.less';
 import apiObj from '@api/index';
 import utils from '@utils/index'
@@ -14,7 +15,7 @@ function MsgManage() {
         getTableData();
 
     }, []);
-
+    const [isAdd,setIsAdd] = useState(false);   //是否是新增页面
     const [size, setSize] = useState(15);       //每页显示条数
     const [total, setTotal] = useState(0);       //每页显示条数
     const [dataSource, setDataSource] = useState([]);   //列表数据
@@ -88,7 +89,7 @@ function MsgManage() {
     }
     //新增通知
     function showAddMsg(){
-
+        setIsAdd(true);
     }
     //表格渲染
     function RenderTable() {
@@ -136,6 +137,9 @@ function MsgManage() {
         form.resetFields();
         getTableData();
     };
+    if(isAdd){
+        return (<AddNewMsg></AddNewMsg>);
+    }
     return (
         <div className='wrapper'>
             <div className="filter-box">

src/components/MsgManage/index.less

@@ -86,8 +86,18 @@
 .ant-modal-body{
   padding: 14px 18px;
 }
+
 .message-oper{
   text-align: center;
   margin-top: 30px;
 
+}
+/*********新增页面样式*******/
+.choose-container{
+  margin-left: 8.3%;
+
+}
+.add-msg-container{
+  height:calc(100vh - 162px);
+  overflow-y: auto;
 }