指定科室显示交互修改

src/common/MyDeptStruct.js

@@ -68,7 +68,7 @@ function MyDeptStruct(props) {
             <div className='tree' onScrollCapture={handleScroll} ref={box}>
                 <Tree
                     checkable
-                    //defaultCheckedKeys={defaultCheckedKeys}
+                    checkedKeys={checkeds}
                     onCheck={onCheck}
                     onSelect={onSelect}
                     treeData={treeData}

src/common/SelectedTag.js

@@ -7,7 +7,7 @@ import './selectedTag.less';
  *
  * ****/
 function SelectedTag(props){
-    const {data,delTag} = props;
+    const {userData,deptData,delTag} = props;
     return (
         <div className="selected-box">
             <p className='clear-bar'>
@@ -15,8 +15,13 @@ function SelectedTag(props){
                 <a onClick={()=>delTag()}><img className='back-icon' src={delIcon} alt="清空所有" /><i>清空所有</i></a>
             </p>
             <div className="selected-items">
-                {data.map((it)=>{
-                    return (<Tag closable key={it.id} onClose={()=>delTag(it.id)}>
+                {userData.map((it,i)=>{
+                    return (<Tag closable key={it.id} onClose={()=>delTag(i,1)}>
+                        {it.name}
+                    </Tag>)
+                })}
+                {deptData.map((it,i)=>{
+                    return (<Tag closable key={it.id} onClose={()=>delTag(i,2)}>
                         {it.name}
                     </Tag>)
                 })}

src/components/MsgManage/AddNewMsg.js

@@ -23,6 +23,7 @@ function AddNewMsg(props) {
     const [checkedDepts, setCheckedDepts] = useState([]);   //指定科室选中项
     const [checkedDeptIds, setCheckedDeptIds] = useState([]);   //指定科室选中的科室项id
     const [checkedHosIds, setCheckedHosIds] = useState([]);   //指定科室选中的医院项id
+    const [checkedTreeItems, setCheckedTreeItems] = useState([]);   //指定科室选中的树结构
     const [receiverError,setReceiverError]=useState(false);   //接收者校验状态
 
 
@@ -127,6 +128,7 @@ function AddNewMsg(props) {
     }
     //选中科室
     function handleCheckDept(checks,e){
+        setCheckedTreeItems(checks);
         //排序，短的在前长的在后，为去重做准备
         const posArr = [...e.checkedNodesPositions].sort((a,b)=>{
             return a.pos.length-b.pos.length;
@@ -137,7 +139,7 @@ function AddNewMsg(props) {
         let deptArr=[...checkedDepts.deptObj];
         let hosIdsArr=[...checkedDepts.hosIds];
         let hosArr=[...checkedDepts.hosObj];
-        setCheckedDepts(deptArr.concat(hosArr));
+        setCheckedDepts(hosArr.concat(deptArr));        //显示的排序可能需要再考虑一下
         setCheckedDeptIds(deptIdsArr);
         setCheckedHosIds(hosIdsArr);
         validateReceiver(checkedUserIds.length+deptIdsArr.length+hosIdsArr.length);
@@ -146,14 +148,15 @@ function AddNewMsg(props) {
     //格式化选中科室数据
     function structureDeptTag(pos){   //全选传医院id，非全选传科室id
         let tempPos=[],hosIds=[],hosArr=[],len=0,deptIds=[],deptArr=[],temp=[],tempKey='';
-        let it=null;
+        let it=null,checks=[];
         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]});
+                hosArr.push({id:temp[0],name:temp[1],key:tempKey});
                 hosIds.push(temp[0]);
+                setCheckedTreeItems([tempKey]);
                 return {hosIds:hosIds,hosObj:hosArr,deptIds:deptIds,deptObj:deptArr};
             }
             //如果当前节点的pos包含了tempPos里的某个数据，说明该节点的父节点已被选中并记录，自身则不需要记录
@@ -161,12 +164,15 @@ function AddNewMsg(props) {
                 tempPos.push(it.pos);       //记录需要展示的节点pos,作为去重的依据
                 temp = tempKey.split("-");
                 len=temp.length;
+                //记录选中的节点id,从已选中标签中删除时控制树形结构选中状态用
+                checks.push(tempKey);
+                setCheckedTreeItems(checks);
                 //医院id存入sendHospitals，科室id存入sendDepts
                 if(len===2){
-                    hosArr.push({id:temp[0],name:temp[1]});
+                    hosArr.push({id:temp[0],name:temp[1],key:tempKey});
                     hosIds.push(temp[0]);
                 }else{
-                    deptArr.push({id:temp[2],name:temp[3]});
+                    deptArr.push({id:temp[2],name:temp[3],key:tempKey});
                     deptIds.push(temp[2]);
                 }
 
@@ -174,22 +180,58 @@ function AddNewMsg(props) {
         }
         return {hosIds:hosIds,hosObj:hosArr,deptIds:deptIds,deptObj:deptArr};
     }
-    //删除已选用户
-    function handleTagDel(id){
-        if(!id){    //无入参，清空所有
+    //删除已选用户/科室
+    function handleTagDel(idx,type){ //type=1指定用户，type=2指定科室
+        if(idx===undefined){    //无入参，清空所有
+            //情况树状结构选中状态
+            setCheckedTreeItems([]);
+            //清空用户
             setCheckedUser([]);
             setCheckedUserIds([]);
-            form.setFieldsValue({sendUsers:[]});
+            //清空科室
+            setCheckedDepts([]);
+            setCheckedDeptIds([]);
+            setCheckedHosIds([]);
+            form.setFieldsValue({sendUsers:[],sendDepts:[],sendHospitals:[]});
+            //校验状态更新
+            setReceiverError(true);
             return;
         }
-        const idx=checkedUserIds.findIndex((it)=>it===id);
-        let checkedIdsArr=[...checkedUserIds];
-        let checkedUserArr=[...checkedUser];
-        checkedIdsArr.splice(idx,1);
-        checkedUserArr.splice(idx,1);
-        setCheckedUser(checkedUserArr);
-        setCheckedUserIds(checkedIdsArr);
-        form.setFieldsValue({sendUsers:checkedIdsArr})
+        //const idx=checkedUserIds.findIndex((it)=>it===id);
+        if(type===1){
+            let checkedIdsArr=[...checkedUserIds];
+            let checkedUserArr=[...checkedUser];
+            checkedIdsArr.splice(idx,1);
+            checkedUserArr.splice(idx,1);
+            setCheckedUser(checkedUserArr);
+            setCheckedUserIds(checkedIdsArr);
+            form.setFieldsValue({sendUsers:checkedIdsArr});
+            //校验状态更新--在判断外面不好判断，直接放里面
+            setReceiverError(checkedIdsArr.length===0);
+        }else if(type===2){
+            //删除树结构中对应的选中状态
+            const ikey = checkedDepts[idx].key;
+            const tempItems = [...checkedTreeItems];
+            const index = tempItems.findIndex((it)=>it===ikey);
+            tempItems.splice(index,1);
+            setCheckedTreeItems(tempItems);
+            //console.log(ikey,index,checkedDepts,checkedTreeItems,tempItems)
+            //删除对应的显示数据及传参数据
+            let checkedDeptsArr=[...checkedDepts];
+            let checkedHosIdsArr=[...checkedHosIds];
+            let checkedDeptIdsArr=[...checkedDeptIds];
+            checkedDeptsArr.splice(idx,1);
+            checkedHosIdsArr.splice(idx,1);
+            checkedDeptIdsArr.splice(idx-checkedHosIdsArr.length,1);
+            setCheckedDepts(checkedDeptsArr);            //选中的科室和医院合并过的
+            setCheckedHosIds(checkedHosIdsArr);
+            setCheckedDeptIds(checkedDeptIdsArr);
+            form.setFieldsValue({sendUsers:checkedUserIds,sendDepts:checkedDeptIdsArr,sendHospitals:checkedHosIdsArr});
+            //校验状态更新--在判断外面不好判断，直接放里面
+            setReceiverError(checkedDeptsArr.length===0);
+        }
+        //校验状态更新
+        //setReceiverError(checkedUserIds.length+);
     }
     return (
         <>
@@ -201,6 +243,7 @@ function AddNewMsg(props) {
             </Breadcrumb>
             <div className='add-msg-container'>
             <Form form={form}
+                  scrollToFirstError={true}
                   initialValues={initialValues}
                   labelCol={{ span: 2 }}
                   layout="horizontal">
@@ -264,14 +307,14 @@ function AddNewMsg(props) {
                 </Form.Item>
             </Form>
             {showCustom?<div className="receive-container">
-                <SelectedTag data={[...checkedUser,...checkedDepts]} delTag={handleTagDel}></SelectedTag>
+                <SelectedTag userData={checkedUser} deptData={checkedDepts} delTag={handleTagDel}></SelectedTag>
                 <div className="user-type-box">
                     <Tabs defaultActiveKey="1" onChange={handleTabChange}>
                         <TabPane tab="指定用户" key="1">
                             <UserList setChecked={handleTableCheck} checkedIds={checkedUserIds}></UserList>
                         </TabPane>
                         <TabPane tab="指定科室" key="2">
-                            <MyDeptStruct checkEv={handleCheckDept} ></MyDeptStruct>
+                            <MyDeptStruct checkEv={handleCheckDept} checkeds={checkedTreeItems}></MyDeptStruct>
                         </TabPane>
                     </Tabs>
                 </div>