树状结构选中显示优化

src/common/MyDeptStruct.js

@@ -31,12 +31,12 @@ function MyDeptStruct(props) {
     //数据转换为树形结构所需字段
     function structureTreeData(arr) {
         arr.forEach(item => {
-            item.key = item.hospitalId + '-' + item.hospitalName
-            item.title = item.hospitalName
-            if (!item.children && item.depts) {
+            item.key = item.hospitalId + '-' + item.hospitalName;
+            item.title = item.hospitalName;
+            if (!item.children && item.depts) {     //有科室时已选中区域要显示上级医院名称+科室名称，传参需传医院id及科室id
                 item.depts.forEach(it => {
-                    it.key = item.hospitalId + '-' + it.deptId + '-' + it.deptName
-                })
+                    it.key = item.hospitalId + '-'+item.hospitalName + '-' + it.deptId + '-' + it.deptName;
+                });
                 item.children = JSON.parse(JSON.stringify(item.depts).replace(/deptName/g, 'title').replace(/deptId/g, 'key'))
                 return
             }

src/components/MsgManage/AddNewMsg.js

@@ -9,6 +9,7 @@ import './index.less';
 import "quill/dist/quill.snow.css";
 import backIcon from "@images/back.png";
 import apiObj from '@api/index';
+import {message} from "antd/lib/index";
 const { post, api } = apiObj;
 const { TabPane } = Tabs;
 function AddNewMsg(props) {
@@ -18,7 +19,7 @@ function AddNewMsg(props) {
     const [content,setContent] = useState('');//通知内容
     const [showCustom,setShowCustom] = useState(false);     //是否显示自定义内容
     const [checkedUser, setCheckedUser] = useState([]);   //指定用户选中项
-    const [checkedIds, setCheckedIds] = useState([]);   //指定用户选中项id
+    const [checkedUserIds, setCheckedUserIds] = useState([]);   //指定用户选中项id
     const [checkedDepts, setCheckedDepts] = useState([]);   //指定科室选中项
     const [checkedDeptIds, setCheckedDeptIds] = useState([]);   //指定科室选中的科室项id
     const [checkedHosIds, setCheckedHosIds] = useState([]);   //指定科室选中的医院项id
@@ -86,7 +87,12 @@ function AddNewMsg(props) {
     //发送消息
     function sendMsg(values){
         post(api.noticeAdd,values).then((res)=>{
-
+            const data = res.data;
+            if(data.code===200){
+                message.success(data.message || '操作成功');
+            }else{
+                message.warning(data.message || '操作失败');
+            }
         })
     }
     //类型切换
@@ -106,7 +112,7 @@ function AddNewMsg(props) {
     //选中用户
     function handleTableCheck(userIdArr,userArr){
         setCheckedUser(userArr);
-        setCheckedIds(userIdArr);
+        setCheckedUserIds(userIdArr);
         form.setFieldsValue({sendUsers:userIdArr});
         validateReceiver(userIdArr.length+checkedDeptIds.length+checkedHosIds.length);
     }
@@ -121,7 +127,12 @@ function AddNewMsg(props) {
     }
     //选中科室
     function handleCheckDept(checks,e){
-        const checkedDepts = structureDeptTag(checks);
+        //排序，短的在前长的在后，为去重做准备
+        const posArr = [...e.checkedNodesPositions].sort((a,b)=>{
+            return a.pos.length-b.pos.length;
+        });
+        //console.log('排序后：',posArr);
+        const checkedDepts = structureDeptTag(posArr);
         let deptIdsArr=[...checkedDepts.deptIds];
         let deptArr=[...checkedDepts.deptObj];
         let hosIdsArr=[...checkedDepts.hosIds];
@@ -129,47 +140,55 @@ function AddNewMsg(props) {
         setCheckedDepts(deptArr.concat(hosArr));
         setCheckedDeptIds(deptIdsArr);
         setCheckedHosIds(hosIdsArr);
-        validateReceiver(checkedIds.length+deptIdsArr.length+hosIdsArr.length);
+        validateReceiver(checkedUserIds.length+deptIdsArr.length+hosIdsArr.length);
         form.setFieldsValue({sendDepts:deptIdsArr,sendHospitals:hosIdsArr});
     }
     //格式化选中科室数据
-    function structureDeptTag(arr){   //全选传医院id，非全选传科室id
-        let temp=[],hosIds=[],hosArr=[],len=0,deptIds=[],deptArr=[];
-        const arrSorted = arr.sort(()=>{return 1});
-        arrSorted.map((it)=>{
-            //it由 医院id-科室id(如果有)-医院/科室名称 组成
-            temp = it.split("-");
-            len=temp.length;
-            console.log(arrSorted,it,hosIds);
-            if(len===2){
-                //医院id存入sendHospitals，科室id存入sendDepts
+    function structureDeptTag(pos){   //全选传医院id，非全选传科室id
+        let tempPos=[],hosIds=[],hosArr=[],len=0,deptIds=[],deptArr=[],temp=[],tempKey='';
+        let it=null;
+        for(let i=0;i<pos.length;i++){
+            it=pos[i];
+            tempKey=it.node.key;
+            if(it.pos==='0-0'){     //全选了平台，终止遍历
+                temp = tempKey.split("-");
                 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 {hosIds:hosIds,hosObj:hosArr,deptIds:deptIds,deptObj:deptArr};
             }
+            //如果当前节点的pos包含了tempPos里的某个数据，说明该节点的父节点已被选中并记录，自身则不需要记录
+            if(!(tempPos.includes(it.pos.substr(0,5))||tempPos.includes(it.pos.substr(0,7)))){
+                tempPos.push(it.pos);       //记录需要展示的节点pos,作为去重的依据
+                temp = tempKey.split("-");
+                len=temp.length;
+                //医院id存入sendHospitals，科室id存入sendDepts
+                if(len===2){
+                    hosArr.push({id:temp[0],name:temp[1]});
+                    hosIds.push(temp[0]);
+                }else{
+                    deptArr.push({id:temp[2],name:temp[3]});
+                    deptIds.push(temp[2]);
+                }
 
-        });
+            }
+        }
         return {hosIds:hosIds,hosObj:hosArr,deptIds:deptIds,deptObj:deptArr};
     }
     //删除已选用户
     function handleTagDel(id){
         if(!id){    //无入参，清空所有
             setCheckedUser([]);
-            setCheckedIds([]);
+            setCheckedUserIds([]);
             form.setFieldsValue({sendUsers:[]});
             return;
         }
-        const idx=checkedIds.findIndex((it)=>it===id);
-        let checkedIdsArr=[...checkedIds];
+        const idx=checkedUserIds.findIndex((it)=>it===id);
+        let checkedIdsArr=[...checkedUserIds];
         let checkedUserArr=[...checkedUser];
         checkedIdsArr.splice(idx,1);
         checkedUserArr.splice(idx,1);
         setCheckedUser(checkedUserArr);
-        setCheckedIds(checkedIdsArr);
+        setCheckedUserIds(checkedIdsArr);
         form.setFieldsValue({sendUsers:checkedIdsArr})
     }
     return (
@@ -227,18 +246,7 @@ function AddNewMsg(props) {
                 </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();
-                        }
-                    },
-                }),]}*/>
+                           required>
                     <Radio.Group onChange={onReceiveTypeChange}>
                         <Radio value={0}>所有人</Radio>
                         <Radio value={1}>自定义</Radio>
@@ -260,7 +268,7 @@ function AddNewMsg(props) {
                 <div className="user-type-box">
                     <Tabs defaultActiveKey="1" onChange={handleTabChange}>
                         <TabPane tab="指定用户" key="1">
-                            <UserList setChecked={handleTableCheck} checkedIds={checkedIds}></UserList>
+                            <UserList setChecked={handleTableCheck} checkedIds={checkedUserIds}></UserList>
                         </TabPane>
                         <TabPane tab="指定科室" key="2">
                             <MyDeptStruct checkEv={handleCheckDept} ></MyDeptStruct>

src/components/MsgManage/UserList.js

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux'
 import { Table, Form, Input, Button, Row, Col, TreeSelect } from 'antd';
 import { DownOutlined, PlusOutlined } from '@ant-design/icons';
 import './index.less';
 import utils from '@utils/index'
 import apiObj from '@api/index';
-import MenuTree from '../DataManager/MenuTree';
 const { post, api } = apiObj;
 const { organizationData } = utils;
 const { SHOW_PARENT } = TreeSelect;
@@ -41,7 +39,7 @@ function UserList(props) {
     function getTableData(param = {}) {
         post(api.getHospitalUser, param).then((res) => {
             if (res.data.code === 200) {
-                let data = res.data.data;
+                const data = res.data.data;
                 setTotal(data.total);
                 setCurrent(param.current);
                 setSize(param.size);
@@ -78,7 +76,7 @@ function UserList(props) {
         return (
             <Table
                 rowSelection={rowSelection}
-                rowKey={record => record.id+"-"+record.hospitalId}
+                rowKey={record => record.id}
                 columns={columns}
                 dataSource={dataSource}
                 pagination={{