发送接口对接、交互完善--

src/common/MyDeptStruct.js

@@ -61,14 +61,14 @@ function MyDeptStruct(props) {
         box.current.scrollTop = 0
     }
     function onSelect() { }
-    const defaultCheckedKeys = checkeds && checkeds.softwareMenuIds ? checkeds.softwareMenuIds.slice() : []
+    //const defaultCheckedKeys = checkeds && checkeds.softwareMenuIds ? checkeds.softwareMenuIds.slice() : []
     return (
         <div className='treeContent' >
             <p className='title'>组织结构</p>
             <div className='tree' onScrollCapture={handleScroll} ref={box}>
                 <Tree
                     checkable
-                    defaultCheckedKeys={defaultCheckedKeys}
+                    //defaultCheckedKeys={defaultCheckedKeys}
                     onCheck={onCheck}
                     onSelect={onSelect}
                     treeData={treeData}

src/components/MsgManage/AddNewMsg.js

@@ -8,18 +8,21 @@ import UserList from './UserList';
 import './index.less';
 import "quill/dist/quill.snow.css";
 import backIcon from "@images/back.png";
-/*import apiObj from '@api/index';
-const { post, api, xPost } = apiObj;*/
+import apiObj from '@api/index';
+const { post, api } = apiObj;
 const { TabPane } = Tabs;
 function AddNewMsg(props) {
     const {goBack} = props;
     const [form] = Form.useForm();
-    const initialValues={receiveType:0,type:1};
+    const initialValues={receiveType:0,type:1,sendUsers:[],sendDepts:[],sendHospitals:[]};
+    const [content,setContent] = useState('');//通知内容
     const [showCustom,setShowCustom] = useState(false);     //是否显示自定义内容
     const [checkedUser, setCheckedUser] = useState([]);   //指定用户选中项
     const [checkedIds, setCheckedIds] = useState([]);   //指定用户选中项id
     const [checkedDepts, setCheckedDepts] = useState([]);   //指定科室选中项
-    const [checkedDeptIds, setCheckedDeptIds] = useState([]);   //指定科室选中项id
+    const [checkedDeptIds, setCheckedDeptIds] = useState([]);   //指定科室选中的科室项id
+    const [checkedHosIds, setCheckedHosIds] = useState([]);   //指定科室选中的医院项id
+    const [receiverError,setReceiverError]=useState(false);   //接收者校验状态
 
 
     useEffect(() => {
@@ -61,6 +64,7 @@ function AddNewMsg(props) {
         //注册事件
         quill.on('selection-change',(range)=>{
             if(range===null){       //为空代表失焦
+                console.log(quill.root.innerText)
                 const content = quill.root.innerHTML;
                 form.setFieldsValue({content:content});
                 //console.log(quill.getContents(),quill.root.innerHTML);
@@ -69,8 +73,21 @@ function AddNewMsg(props) {
     }
 
     //发送消息
-    function sendMsg(){
+    function validateForm(){
         console.log(form.getFieldsValue())
+        form.validateFields().then((values)=>{
+            if(!receiverError){
+                sendMsg(values)
+            }
+        }).catch((error)=>{
+            console.log('验证失败',error)
+        })
+    }
+    //发送消息
+    function sendMsg(values){
+        post(api.noticeAdd,values).then((res)=>{
+
+        })
     }
     //类型切换
     function onTypeChange(){
@@ -80,6 +97,7 @@ function AddNewMsg(props) {
     function onReceiveTypeChange(e){
         const val = e.target.value;
         setShowCustom(val===1);
+        setReceiverError(val===1);
     }
     //切换tab
     function handleTabChange(){
@@ -89,16 +107,30 @@ function AddNewMsg(props) {
     function handleTableCheck(userIdArr,userArr){
         setCheckedUser(userArr);
         setCheckedIds(userIdArr);
-        form.setFieldsValue({sendUsers:userIdArr})
+        form.setFieldsValue({sendUsers:userIdArr});
+        validateReceiver(userIdArr.length+checkedDeptIds.length+checkedHosIds.length);
+    }
+    //验证接收者是否为空
+    function validateReceiver(len){
+        if(len===0){
+            setReceiverError(true)
+        }else{
+            setReceiverError(false)
+        }
+
     }
     //选中科室
     function handleCheckDept(checks,e){
         const checkedDepts = structureDeptTag(checks);
-        let deptIdsArr=[...checkedDepts.ids];
-        let deptArr=[...checkedDepts.obj];
-        setCheckedDepts(deptArr);
+        let deptIdsArr=[...checkedDepts.deptIds];
+        let deptArr=[...checkedDepts.deptObj];
+        let hosIdsArr=[...checkedDepts.hosIds];
+        let hosArr=[...checkedDepts.hosObj];
+        setCheckedDepts(deptArr.concat(hosArr));
         setCheckedDeptIds(deptIdsArr);
-        form.setFieldsValue({sendDepts:deptIdsArr});
+        setCheckedHosIds(hosIdsArr);
+        validateReceiver(checkedIds.length+deptIdsArr.length+hosIdsArr.length);
+        form.setFieldsValue({sendDepts:deptIdsArr,sendHospitals:hosIdsArr});
     }
     //格式化选中科室数据
     function structureDeptTag(arr){   //全选传医院id，非全选传科室id
@@ -109,19 +141,19 @@ function AddNewMsg(props) {
             temp = it.split("-");
             len=temp.length;
             console.log(arrSorted,it,hosIds);
-            //if(len===2){
+            if(len===2){
                 //医院id存入sendHospitals，科室id存入sendDepts
-                hosArr.push({id:temp[len-2],name:temp[len-1]});
-                hosIds.push(temp[len-2]);
-            /*}else{
+                hosArr.push({id:temp[0],name:temp[1]});
+                hosIds.push(temp[0]);
+            }else{
                 if(!hosIds.includes(temp[0])){
                     deptArr.push({id:temp[1],name:temp[2]});
                     deptIds.push(temp[1]);
                 }
-            }*/
+            }
 
         });
-        return {ids:hosIds,obj:hosArr};
+        return {hosIds:hosIds,hosObj:hosArr,deptIds:deptIds,deptObj:deptArr};
     }
     //删除已选用户
     function handleTagDel(id){
@@ -159,27 +191,69 @@ function AddNewMsg(props) {
                         <Radio value={2}>其他</Radio>
                     </Radio.Group>
                 </Form.Item>
-                <Form.Item name='title' label='标题' required>
-                    <Input autoComplete='off'/>
+                <Form.Item name='title'
+                           label='标题'
+                           required
+                           rules={[() => ({
+                               validator(_, value) {
+                                   if(!value){
+                                       return Promise.reject(new Error('标题不能为空!'));
+                                   }else if (value.length<51) {
+                                       return Promise.resolve();
+                                   }
+                                   return Promise.reject(new Error('格式错误!'));
+                               },
+                           }),]}>
+                    <Input placeholder='输入50字以内标题' autoComplete='off'/>
                 </Form.Item>
-                <Form.Item name='content' label='内容' required>
+                <Form.Item name='content'
+                           label='内容'
+                           required
+                           rules={[() => ({
+                           validator(_, value) {
+                               if(!value){
+                                   return Promise.reject(new Error('内容不能为空!'));
+                               }else{
+                                   return Promise.resolve();
+                               }
+                           },
+                        }),]}>
                     <div className="ql-snow">
                         <div id='editor'></div>
                     </div>
-
                 </Form.Item>
-                <Form.Item name='receiveType' label='接收者' required>
+                <Form.Item name='content' hidden>
+                    <Input autoComplete='off'/>
+                </Form.Item>
+                <Form.Item name='receiveType'
+                           label='接收者'
+                           required
+                           /*rules={[({ getFieldValue }) => ({
+                    validator(_, value) {
+                        const {sendUsers,sendDepts,sendHospitals} = getFieldValue();
+                        const len = sendUsers.length+sendDepts.length+sendHospitals.length;
+                        if(value===1&&len===0){
+                            return Promise.reject(new Error('接收者不能为空!'));
+                        }else{
+                            return Promise.resolve();
+                        }
+                    },
+                }),]}*/>
                     <Radio.Group onChange={onReceiveTypeChange}>
                         <Radio value={0}>所有人</Radio>
                         <Radio value={1}>自定义</Radio>
                     </Radio.Group>
                 </Form.Item>
+                {receiverError?<p className='receive-error'>接收者不能为空!</p>:''}
                 <Form.Item name='sendUsers' hidden>
                     <Input autoComplete='off'/>
                 </Form.Item>
                 <Form.Item name='sendDepts' hidden>
                     <Input autoComplete='off'/>
                 </Form.Item>
+                <Form.Item name='sendHospitals' hidden>
+                    <Input autoComplete='off'/>
+                </Form.Item>
             </Form>
             {showCustom?<div className="receive-container">
                 <SelectedTag data={[...checkedUser,...checkedDepts]} delTag={handleTagDel}></SelectedTag>
@@ -189,14 +263,14 @@ function AddNewMsg(props) {
                             <UserList setChecked={handleTableCheck} checkedIds={checkedIds}></UserList>
                         </TabPane>
                         <TabPane tab="指定科室" key="2">
-                            <MyDeptStruct checkEv={handleCheckDept} checkeds={checkedDepts}></MyDeptStruct>
+                            <MyDeptStruct checkEv={handleCheckDept} ></MyDeptStruct>
                         </TabPane>
                     </Tabs>
                 </div>
             </div>:""}
             <div className="button-box">
                 <Button onClick={goBack}>取消</Button>
-                <Button onClick={sendMsg} type='primary'>发送</Button>
+                <Button onClick={validateForm} type='primary'>发送</Button>
             </div>
         </div>
             </>)

src/components/MsgManage/UserList.js

@@ -1,46 +1,61 @@
 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 { Table, Form, Input, Button, Row, Col, TreeSelect } 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;
+import apiObj from '@api/index';
+import MenuTree from '../DataManager/MenuTree';
+const { post, api } = apiObj;
+const { organizationData } = utils;
+const { SHOW_PARENT } = TreeSelect;
 function UserList(props) {
     useEffect(() => {
+        getHospitalTree();
         //刷新列表
         getTableData();
 
     }, []);
     const {checkedIds,setChecked} = props;
     const [size, setSize] = useState(15);       //每页显示条数
+    const [current, setCurrent] = useState(1);       //每页显示条数
     const [total, setTotal] = useState(0);       //每页显示条数
     const [dataSource, setDataSource] = useState([]);   //列表数据
-    //从state中取出状态、类型列表
-    const staticInfo = useSelector(state => {
-        return state.staticInfo;
-    });
-    const { msgTypeList, msgStatusList } = staticInfo;
+    const [treeData,setTreeData] = useState([]);
+
+    //获取当前用户组织
+    function getHospitalTree() {
+        post(api.getHospitalTree).then((res) => {
+            if (res.data.code === 200) {
+                const data = res.data.data;
+                let arr = data ? data : []
+                arr = organizationData(arr)
+                setTreeData(arr)
+            }
+        })
+    }
+    function onChange(){
 
+    }
     //获取表格数据
     function getTableData(param = {}) {
         post(api.getHospitalUser, param).then((res) => {
             if (res.data.code === 200) {
                 let data = res.data.data;
                 setTotal(data.total);
+                setCurrent(param.current);
+                setSize(param.size);
                 setDataSource(data.records);
             }
 
         })
     }
-    //每页显示条数切换
-    function onSizeChange(){
 
-    }
     //翻页
-    function onPageChange(){
-
+    function onPageChange(current, size){
+        const values = form.getFieldsValue();
+        const params = {...values,current,size};
+        getTableData(params);
     }
     //表格渲染
     function RenderTable() {
@@ -63,17 +78,19 @@ function UserList(props) {
         return (
             <Table
                 rowSelection={rowSelection}
-                rowKey={record => record.id}
+                rowKey={record => record.id+"-"+record.hospitalId}
                 columns={columns}
                 dataSource={dataSource}
                 pagination={{
                     showSizeChanger:true,
                     pageSizeOptions:[15,30,60,120],
                     defaultPageSize:size,
-                    pageNo: 1,
+                    current: current,
                     size:'small',
                     total: total,
+                    pageSize:size,
                     showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
+                    onChange:onPageChange,
                 }}
             />
         )
@@ -83,7 +100,6 @@ function UserList(props) {
     const [form] = Form.useForm();
     const onFinish = (values: any) => {
         getTableData(values);
-        console.log('筛选项:', values);
     };
     const onReset = () => {
         form.resetFields();
@@ -96,28 +112,29 @@ function UserList(props) {
                     <Row gutter={24}>
                         <Col span={5} key={1}>
                             <Form.Item name="name" label="姓名">
-                                <Input placeholder='姓名'/>
+                                <Input placeholder='姓名' allowClear/>
                             </Form.Item>
                         </Col>
                         <Col span={5} key={2}>
                             <Form.Item name="mobilePhone" label="手机号码">
-                                <Input placeholder='手机号码'/>
+                                <Input placeholder='手机号码' allowClear/>
                             </Form.Item>
                         </Col>
-                        <Col span={5} key={3}>
-                            <Form.Item name="hospitalId" label="所属组织">
-                                <Select
-                                    allowClear
-                                >
-                                    {msgStatusList.map((item) => {
-                                        return (
-                                            <Option value={item.name} key={item.name}>{item.val}</Option>
-                                        )
-                                    })}
-                                </Select>
+                        <Col span={7} key={3}>
+                            <Form.Item name="hospitals" label="所属组织">
+                                <TreeSelect
+                                    showSearch={false}
+                                    treeData={treeData}
+                                    onChange={onChange}
+                                    treeCheckable
+                                    maxTagCount={1}
+                                    showCheckedStrategy={SHOW_PARENT}
+                                    placeholder="请选择组织"
+                                    style={{ width: 240 }}
+                                />
                             </Form.Item>
                         </Col>
-                        <Col span={9} key={4}>
+                        <Col span={7} key={4}>
                             <Form.Item>
                                 <Button type="primary" htmlType="submit">
                                     查询

src/components/MsgManage/index.less

@@ -95,7 +95,10 @@
 /*********新增页面样式*******/
 .receive-container{
   margin-left: 8.3%;
-
+}
+.receive-error{
+  color: @error-color;
+  margin:-32px 0 10px 8.3%;
 }
 .add-msg-container{
   height:calc(100vh - 162px);