|
@@ -1,7 +1,7 @@
|
|
|
/*
|
|
|
* @Author: your name
|
|
|
* @Date: 2021-12-07 09:28:41
|
|
|
- * @LastEditTime: 2022-02-23 10:52:10
|
|
|
+ * @LastEditTime: 2022-02-28 14:11:18
|
|
|
* @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
|
|
@@ -14,38 +14,45 @@ import MccsSelect from '@/components/MccsProFormSelect/index';
|
|
|
import { Input, Row, Col, Button, Checkbox, Divider, Pagination, Empty,Spin,Tooltip } from 'antd';
|
|
|
|
|
|
import './style.less';
|
|
|
-import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
|
|
+import { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
|
|
|
|
|
|
|
|
const { Search } = Input;
|
|
|
|
|
|
const TableItem: React.FC<any> = ({ data, actionHandle,checkBoxChangeHandle }) => {
|
|
|
|
|
|
- // 注意!!!!data类型有待补充
|
|
|
+ //注意!!!!data类型有待补充
|
|
|
const textWraperSpanRef = useRef(null);
|
|
|
const subTextRef = useRef(null);
|
|
|
const [ifShowTip,setIfShowTip] = useState(false);
|
|
|
- const [visible,setVisible] = useState(false);
|
|
|
+ const [ifHasMore,setifHasMore] = useState(false);
|
|
|
|
|
|
- const onVisibleChangeHanfle = (bool: boolean)=>{
|
|
|
+ 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)
|
|
|
- }
|
|
|
+ setIfShowTip(ifHasMore);
|
|
|
}else{
|
|
|
setIfShowTip(false);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ useEffect(()=>{
|
|
|
+ if(textWraperSpanRef.current&&subTextRef.current){
|
|
|
+ setifHasMore(textWraperSpanRef.current['clientWidth'] > subTextRef.current['clientWidth'])
|
|
|
+ }
|
|
|
+ },[]);
|
|
|
|
|
|
return (
|
|
|
<div className='tableChild'>
|
|
|
- <Checkbox className='check' onChange={(e: CheckboxChangeEvent)=>checkBoxChangeHandle(e,data)} />
|
|
|
- <div className='tableChildContent'>
|
|
|
+ {
|
|
|
+ //用于测量渲染出文案的长度
|
|
|
+ }
|
|
|
+ <div ref={textWraperSpanRef} style={{height:0.1,position:'absolute',visibility:'hidden'}}>{`档次:${data.grade} 目录:${data.directory}`}</div>
|
|
|
+
|
|
|
+ <Checkbox className='check' onChange={(e:CheckboxChangeEvent)=>checkBoxChangeHandle(e,data)} />
|
|
|
+ <div className='tableChildContent' ref={subTextRef}>
|
|
|
{(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>
|
|
|
+ <div className='subText' >{`档次:${data.grade} 目录:${data.directory}`}</div>
|
|
|
</Tooltip>
|
|
|
</div>
|
|
|
<div className='action'>
|
|
@@ -57,18 +64,18 @@ const TableItem: React.FC<any> = ({ data, actionHandle,checkBoxChangeHandle }) =
|
|
|
|
|
|
const MaterialTable: React.FC<MaterialTable.MaterialTableProps> = (props) => {
|
|
|
|
|
|
- const { selectOptions, request, addHandle, tableItemActionHandle, reload } = props;
|
|
|
+ const { selectOptions, request, addHandle, tableItemActionHandle } = props;
|
|
|
const [list, setList] = useState<any[]>([]);
|
|
|
- const [selectorFilter, setSelectorFilter] = useState<string>(''); // 下拉筛选
|
|
|
+ const [selectorFilter, setSelectorFilter] = useState<string>(''); //下拉筛选
|
|
|
const [keyword, setKeyword] = useState<string>('');
|
|
|
const [relaodData, setRelaodData] = useState(false);
|
|
|
- const [loading,setLoading] = useState(false); // 加载中
|
|
|
+ const [loading,setLoading] = useState(false); //加载中
|
|
|
const [pageData, setPageData] = useState<{
|
|
|
pageSize: number,
|
|
|
current: number,
|
|
|
}>({ current: 1, pageSize: 10 });
|
|
|
const [total,setTotal] = useState(0);
|
|
|
- const [checkedList,setCheckedList] = useState<any[]>([]); // 已勾选的项集合
|
|
|
+ const [checkedList,setCheckedList] = useState<any[]>([]); //已勾选的项集合
|
|
|
|
|
|
|
|
|
const geData = async () => {
|
|
@@ -97,17 +104,17 @@ const MaterialTable: React.FC<MaterialTable.MaterialTableProps> = (props) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- const checkBoxChangeHandle = (e: CheckboxChangeEvent,data: any)=>{
|
|
|
+ const checkBoxChangeHandle = (e:CheckboxChangeEvent,data:any)=>{
|
|
|
if(e.target.checked){
|
|
|
setCheckedList([...checkedList,data]);
|
|
|
}else{
|
|
|
- const _checkedList = checkedList;
|
|
|
+ let _checkedList = checkedList;
|
|
|
_checkedList.splice(_checkedList.findIndex(t=>t.id == data.id),1);
|
|
|
setCheckedList([..._checkedList]);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 批量删除
|
|
|
+ //批量删除
|
|
|
const batchDelList = async ()=>{
|
|
|
if (tableItemActionHandle) {
|
|
|
const resp = await tableItemActionHandle('DEL',checkedList);
|
|
@@ -118,12 +125,9 @@ const MaterialTable: React.FC<MaterialTable.MaterialTableProps> = (props) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // useEffect(()=>{
|
|
|
- // console.log({checkedList});
|
|
|
- // },[checkedList]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- // 刷新数据
|
|
|
+ //刷新数据
|
|
|
if (relaodData) {
|
|
|
geData();
|
|
|
}
|
|
@@ -206,7 +210,7 @@ const MaterialTable: React.FC<MaterialTable.MaterialTableProps> = (props) => {
|
|
|
onChange={(page, pageSize) => {
|
|
|
setPageData({
|
|
|
current:page,
|
|
|
- pageSize:pageSize || 10
|
|
|
+ pageSize:pageSize?pageSize:10
|
|
|
});
|
|
|
setRelaodData(true);
|
|
|
}}
|