调整评审细则-资料目录展示

src/pages/GradeHospitalAccreditation/accreditationDetail/components/materialTable/index.tsx

@@ -1,17 +1,17 @@
 /*
  * @Author: your name
  * @Date: 2021-12-07 09:28:41
- * @LastEditTime: 2021-12-14 14:34:15
+ * @LastEditTime: 2022-02-23 10:52:10
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/accreditationDetail/components/materialTable/index.tsx
  */
 
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState,useRef } from 'react';
 import MccsSelect from '@/components/MccsProFormSelect/index';
 
-import { Input, Row, Col, Button, Checkbox, Divider, Pagination, Empty,Spin } from 'antd';
+import { Input, Row, Col, Button, Checkbox, Divider, Pagination, Empty,Spin,Tooltip } from 'antd';
 
 import './style.less';
 import { CheckboxChangeEvent } from 'antd/lib/checkbox';
@@ -22,13 +22,31 @@ const { Search } = Input;
 const TableItem: React.FC<any> = ({ data, actionHandle,checkBoxChangeHandle }) => {
 
     //注意！！！！data类型有待补充
+    const textWraperSpanRef = useRef(null);
+    const subTextRef = useRef(null);
+    const [ifShowTip,setIfShowTip] = useState(false);
+    const [visible,setVisible] = useState(false);
+
+    const onVisibleChangeHanfle = (bool:boolean)=>{
+         if(bool){
+            if(textWraperSpanRef.current&&subTextRef.current){
+                // console.log(textWraperSpanRef.current['clientWidth'],subTextRef.current['clientWidth'])
+                setIfShowTip(textWraperSpanRef.current['clientWidth'] > subTextRef.current['clientWidth'])
+            }
+         }else{
+            setIfShowTip(false);
+         }
+    }
+
 
     return (
         <div className='tableChild'>
             <Checkbox className='check' onChange={(e:CheckboxChangeEvent)=>checkBoxChangeHandle(e,data)} />
             <div className='tableChildContent'>
-                <div className='mainText'>{`${data.sort}.${data.profileName}`}</div>
-                <div className='subText'>{`档次：${data.grade}   目录：${data.directory}`}</div>
+                {(data.sort&&data.profileName)&&<div className='mainText'>{`${data.sort}.${data.profileName}`}</div>}
+                <Tooltip title={`档次：${data.grade}   目录：${data.directory}`} visible={ifShowTip} onVisibleChange={onVisibleChangeHanfle}>
+                    <div className='subText' ref={subTextRef}><span ref={textWraperSpanRef}>{`档次：${data.grade}   目录：${data.directory}`}</span></div>
+                </Tooltip>
             </div>
             <div className='action'>
                 <a onClick={() => actionHandle('EDIT',[data])}>修改</a><Divider type='vertical' /><a onClick={() => actionHandle('DEL',[data])}>删除</a>

src/pages/GradeHospitalAccreditation/accreditationDetail/components/materialTable/style.less

@@ -49,7 +49,13 @@
                  margin-right: 2%;
              }
              .tableChildContent {
+                 display: flex;
+                 flex-direction: row;
+                 justify-content: flex-start;
+                 align-items: center;
+                 width: 78%;
                  .mainText {
+                    width: 100%;
                     font-size: 14px;
                     font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                     font-weight: 400;
@@ -60,6 +66,7 @@
                     text-overflow: ellipsis;
                  }
                  .subText {
+                    width: 100%;
                     font-size: 12px;
                     font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                     font-weight: 400;
@@ -67,6 +74,11 @@
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+                    &>span {
+                        display: inline-block;
+                        white-space:nowrap;
+                        
+                    }
                  }
              }
              .action {