@bit-sun/business-component 2.4.19 → 2.4.21

package/src/components/Business/moreTreeTable/index.tsx

@@ -1,387 +1,387 @@
-// @ts-nocheck
-import React, { useState, useEffect, useImperativeHandle, forwardRef, useMemo, useRef } from 'react';
-import { getAllColumns, convertToRows, headersToRows } from './utils';
-import './index.less';
-import FixedScrollBar from "./FixedScrollBar";
-
-
-export default forwardRef((props, ref) => {
-  const [show, setShow] = useState(false);
-  const [config, setConfig] = useState({
-    tableType: 'col-header-table',
-    colHeader: [],
-    colLastData: [],
-    rowHeader: [],
-    rowLastData: [],
-    colHeaderToTop: 0,
-  });
-  const [colTableData, setColTableData] = useState([]); //纵向表头数据
-  const [multiTableData, setMmultiTableData] = useState({}); //多表头数据
-  const [viewCount, setViewCount] = useState(10); //虚拟表格每次渲染数量
-  const itemWidth = 100; // 表格每一项宽度
-  const [realColHeaderWidth, setLeftWidth] = useState(props?.colHeaderWidth || 400);
-
-  const viewPort = useRef(null);
-  const topScrollBar = useRef(null);
-  const leftTableRef = useRef(null);
-
-  //起始渲染item
-  const [startIndex, setStartIndex] = useState(0);
-
-  //结束渲染item
-  const endIndex = useMemo(() => {
-    return startIndex + viewCount;
-  }, [startIndex, viewCount])
-
-  //表格偏移量
-  const [offsetWidth, setOffset] = useState(0);
-
-  useEffect(() => { //根据容器宽度计算每次渲染个数
-    setTimeout(() => {
-      let realLeftTableWidth = leftTableRef.current.clientWidth;
-      let viewPortWidth = viewPort.current.clientWidth;
-      let defaultTableWidth =  viewPortWidth - realLeftTableWidth;
-      let viewCount = Math.floor(defaultTableWidth/itemWidth) + 2 <= 10 ? 10 : Math.floor(defaultTableWidth/itemWidth) + 2;
-      setViewCount(viewCount)
-      setLeftWidth(realLeftTableWidth);
-    })
-  }, [])
-
-  const onScroll = (e) => {
-    if(topScrollBar.current){
-      topScrollBar.current.scrollTo(viewPort.current.scrollLeft, 0)
-    }
-    const scrollWidth = viewPort.current.scrollLeft;
-    let startIndex = Math.floor(scrollWidth/itemWidth);
-    if ( startIndex + viewCount >= colTableData.length) {
-      startIndex = colTableData.length - viewCount <= 0 ? 0 : colTableData.length - viewCount;
-    }
-    const offsetWidth = startIndex * itemWidth;
-    setStartIndex(startIndex);
-    setOffset(offsetWidth);
-  }
-
-  // 占位符，表格列总宽度
-  const placeholderWidth = useMemo(() => {
-    return colTableData.length*100
-  }, [colTableData])
-
-
-  useImperativeHandle(ref, () => ({
-    // 暴露子组件刷新表格方法出去，父组件可以调用该方法刷新表格数据
-    getDataSource: getDataSource,
-  }));
-
-  // 设置表头相关信息
-  useEffect(() => {
-    const { colData, rowData } = props;
-    let tableType;
-    if (colData && colData.length && rowData && rowData.length) {
-      tableType = 'multi-header-table';
-      const colHeaderData = convertToRows(colData);
-      const rowHeaderData = headersToRows(rowData);
-      const { rowHeader } =  rowHeaderData;
-      setConfig({
-        colHeader: [],
-        colLastData: [],
-        rowHeader: [],
-        rowLastData: [],
-        ...colHeaderData,
-        ...rowHeaderData,
-        colHeaderToTop: (rowHeader?.length || 0)*40,
-        tableType: tableType
-      })
-    } else if (colData && colData.length) {
-      tableType = 'col-header-table';
-      const colHeaderData = convertToRows(colData);
-      setConfig({
-        colHeader: [],
-        colLastData: [],
-        rowHeader: [],
-        rowLastData: [],
-        ...colHeaderData,
-        colHeaderToTop: 0,
-        tableType: tableType
-      })
-    }
-  }, [props.colData, props.rowData]);
-
-  // 设置多表头表格数据
-  useEffect(() => {
-    if (!config.colLastData.length || !config.rowLastData.length || !props.multiTableData) return;
-    let tableData = {};
-    let [row, col] = [config.rowLastData, config.colLastData];
-    col.forEach(x => {
-      row.forEach(y => {
-        let key = x.id + "__" + y.id;
-        tableData[key] = "";
-      });
-    });
-    Object.assign(tableData, props.multiTableData);
-    setMmultiTableData({
-      ...tableData
-    });
-  }, [config.colLastData, config.rowLastData, props.multiTableData])
-
-  // 设置纵向表格数据
-  useEffect(() => {
-    if (props?.colTableData && props?.colTableData.length) {
-      setColTableData([
-        ...props.colTableData
-      ])
-    }
-  }, [props.colTableData])
-
-  const getDataSource = () => {
-    return colTableData;
-  }
-
-  const tableInsFn = {
-    getDataSource: getDataSource,
-  }
-
-  
-
-  // if (!show) {
-  //   return <div>loading</div>;
-  // }
-
-  const {width, height, tableProps } = props;
-  let tableWidth = width ? `${width}px` : '100%';
-  let tableHeight = `${height || 400}px`;
-  const rightAreaWidth = 'calc(100% - ' +  `${realColHeaderWidth}px` + ')';
-  return (
-      <div 
-        style={{width: tableWidth, height: tableHeight}}
-        key='moreTreeTable'
-        className={'editTableWrapper'}
-        onScroll={onScroll}
-        ref={viewPort}
-      >
-        <FixedScrollBar
-          stickyProps={tableProps?.sticky}
-          viewPort={viewPort}
-          ref={topScrollBar}
-        />
-        <div style={{
-          width: `${realColHeaderWidth + placeholderWidth}px`,
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          height: '100%',
-          }}
-          ></div>
-         {/* -------------------------------------左上角区域--------------------------------------- */}
-         <table 
-          style={{
-            width: `${realColHeaderWidth}px`, 
-            height:  `${config.colHeaderToTop}px`, 
-            display: config.tableType === 'col-header-table' ? 'none' : '',
-          }} 
-          className={`${'north__west'}`}
-        >
-        </table>
-
-        {/* --------------------------------------纵向表头---------------------------------------- */}
-        <table
-          style={{
-            tableLayout:'auto',
-            minWidth: '100px',
-            width: `${realColHeaderWidth}px`,
-            top: `${config.colHeaderToTop}px`,
-            left: '0px',
-            position: 'sticky',
-          }}
-          ref={leftTableRef}
-          className={`${'south__west'} ${'editTable__block'} ${'table_border_style'}`}
-        >
-          <tbody>
-            {config.colHeader.map((item, index) => {
-              return (
-                <tr>
-                  {item.map((innerItem) => {
-                    if (!innerItem) return null;
-                    let fixedTop = innerItem.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
-                    return (
-                      <td
-                        style={{
-                          // width: '200px',
-                          height: '40px',
-                          background: '#f7f8fb',
-                          lineHeight: '28px',
-                          color: '#000000',
-                          fontWeight: 500,
-                          position: innerItem.fixed ? 'sticky' : '',
-                          top: fixedTop,
-                        }}
-                        rowSpan={innerItem && innerItem.colSpan}
-                        colSpan={innerItem && innerItem.rowSpan}
-                      >
-                        {innerItem && innerItem.title}
-                      </td>
-                    );
-                  })}
-                  {/* <td></td> */}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-        <table 
-          className={` ${'editTable__block'} ${'table_border_style'}`}
-          style={{
-            width: '100%',
-            top: 0,
-            left: `${realColHeaderWidth}px`,
-            position: 'absolute',
-            display: config.tableType === 'col-header-table' ? 'none' : ''
-          }}
-        >
-          <colgroup>
-            {
-              config.rowLastData.map(row => {
-                return (<col width={row.width ? `${row.width}px` : '100px'} />)
-              })
-            }
-          </colgroup>
-          <tbody>
-            {
-              config.rowHeader.map((item) => {
-                return (
-                  <tr>
-                    {
-                      item.map((innerItem) => {
-                        if (!innerItem) return null;
-                        return (
-                          <td
-                            style={{
-                              height: '40px',
-                              background: '#f7f8fb',
-                              color: '#000000',
-                              fontWeight: 500,
-                              width: innerItem.width ? `${innerItem.width}px` : '100px',
-                            }}
-                            rowSpan={innerItem && innerItem.rowSpan}
-                            colSpan={innerItem && innerItem.colSpan}
-                          >
-                            {innerItem && innerItem.title}
-                          </td>
-                        )
-                      })
-                    }
-                  </tr>
-                )
-              })
-            }
-          </tbody>
-      </table>
-        <div
-          style={{
-            position: 'absolute',
-            left: `${realColHeaderWidth}px`,
-            top: `${config.colHeaderToTop}px`, 
-            minWidth: rightAreaWidth,
-            zIndex: 0,
-          }}
-        >
-          {/* --------------------------------------横向表头---------------------------------------- */}
-          {/* <div style={{position: 'relative'}}>
-            
-          </div> */}
-          <div 
-            style={{
-              width: '100%', 
-              position: 'relative'
-            }} 
-            className={`${'value_table'} ${'table_border_style'}`}
-          >
-            {/* ------------------------------------纵向表头数据-------------------------------------- */}
-            <table 
-              style={{
-                tableLayout:'auto',
-                width: '800px',
-                display: config.tableType === 'col-header-table' ? '' : 'none',
-                transform: `translateX(${offsetWidth}px)`
-              }} 
-              className={`${'editTable__block'} ${'table_border_style'}`}
-            >
-              <tbody>
-                {config.colLastData.map((item, index) => {
-                  let fixedTop = item.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
-                  return (
-                    <tr>
-                      {colTableData.map((record, index) => {
-                        let tdHidden = record?.['_rowConfig']?.hidden ? 'none' : 'table-cell'
-                        let onCellResult = item.onCell?.(record, index) || {}
-                        let {addStyle={}} = onCellResult
-                        return (
-                          <td
-                            style={{
-                              ...addStyle,
-                              display: tdHidden,
-                              background: (index % 2 === 1) || item.fixed ? '#f7f8fb' : '#fff',
-                              minWidth: '100px',
-                              width: `${itemWidth}px`,
-                              height: '40px',
-                              position: item.fixed ? 'sticky' : '',
-                              top: fixedTop,
-                              color: item.fixed ? '#000000' : 'inherit',
-                              zIndex: item.fixed ? 10 : '',
-                            }}
-                          >
-                            {
-                              item.render ? item.render({text:record[item.key || item.dataIndex], record, index, table: tableInsFn}) : record[item.key || item.dataIndex]
-                            }
-                            {/* {record[item.key || item.dataIndex]?.value} */}
-                          </td>
-                        );
-                      }).slice(startIndex, endIndex+1)}
-                      {/* <td></td> */}
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-            {/* -------------------------------------多表头数据-------------------------------------- */}
-            <table 
-              style={{
-                width: '100%',
-                display: config.tableType === 'col-header-table' ? 'none' : '',
-              }} 
-              className={`${'editTable__block'} ${'table_border_style'}`}
-            >
-              <colgroup>
-                {
-                  config.rowLastData.map(row => {
-                    return (<col width={row.width ? `${row.width}px` : '100px'} />)
-                  })
-                }
-              </colgroup>
-              <tbody>
-                {config.colLastData.map((col) => {
-                  return (
-                    <tr>
-                      {config.rowLastData.map((row, index) => {
-                        return (
-                          <td
-                            style={{
-                              background: (index % 2 === 0) ? '#fff' : '#f7f8fb',
-                              width: row.width ? `${row.width}px` : '100px',
-                              height: '40px',
-                            }}
-                          >
-                            {multiTableData[(row.key || row.dataIndex)+'__'+(col.key || col.dataIndex)]}
-                          </td>
-                        );
-                      })}
-                      {/* <td></td> */}
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-  );
-});
+// @ts-nocheck
+import React, { useState, useEffect, useImperativeHandle, forwardRef, useMemo, useRef } from 'react';
+import { getAllColumns, convertToRows, headersToRows } from './utils';
+import './index.less';
+import FixedScrollBar from "./FixedScrollBar";
+
+
+export default forwardRef((props, ref) => {
+  const [show, setShow] = useState(false);
+  const [config, setConfig] = useState({
+    tableType: 'col-header-table',
+    colHeader: [],
+    colLastData: [],
+    rowHeader: [],
+    rowLastData: [],
+    colHeaderToTop: 0,
+  });
+  const [colTableData, setColTableData] = useState([]); //纵向表头数据
+  const [multiTableData, setMmultiTableData] = useState({}); //多表头数据
+  const [viewCount, setViewCount] = useState(10); //虚拟表格每次渲染数量
+  const itemWidth = 100; // 表格每一项宽度
+  const [realColHeaderWidth, setLeftWidth] = useState(props?.colHeaderWidth || 400);
+
+  const viewPort = useRef(null);
+  const topScrollBar = useRef(null);
+  const leftTableRef = useRef(null);
+
+  //起始渲染item
+  const [startIndex, setStartIndex] = useState(0);
+
+  //结束渲染item
+  const endIndex = useMemo(() => {
+    return startIndex + viewCount;
+  }, [startIndex, viewCount])
+
+  //表格偏移量
+  const [offsetWidth, setOffset] = useState(0);
+
+  useEffect(() => { //根据容器宽度计算每次渲染个数
+    setTimeout(() => {
+      let realLeftTableWidth = leftTableRef.current.clientWidth;
+      let viewPortWidth = viewPort.current.clientWidth;
+      let defaultTableWidth =  viewPortWidth - realLeftTableWidth;
+      let viewCount = Math.floor(defaultTableWidth/itemWidth) + 2 <= 10 ? 10 : Math.floor(defaultTableWidth/itemWidth) + 2;
+      setViewCount(viewCount)
+      setLeftWidth(realLeftTableWidth);
+    })
+  }, [])
+
+  const onScroll = (e) => {
+    if(topScrollBar.current){
+      topScrollBar.current.scrollTo(viewPort.current.scrollLeft, 0)
+    }
+    const scrollWidth = viewPort.current.scrollLeft;
+    let startIndex = Math.floor(scrollWidth/itemWidth);
+    if ( startIndex + viewCount >= colTableData.length) {
+      startIndex = colTableData.length - viewCount <= 0 ? 0 : colTableData.length - viewCount;
+    }
+    const offsetWidth = startIndex * itemWidth;
+    setStartIndex(startIndex);
+    setOffset(offsetWidth);
+  }
+
+  // 占位符，表格列总宽度
+  const placeholderWidth = useMemo(() => {
+    return colTableData.length*100
+  }, [colTableData])
+
+
+  useImperativeHandle(ref, () => ({
+    // 暴露子组件刷新表格方法出去，父组件可以调用该方法刷新表格数据
+    getDataSource: getDataSource,
+  }));
+
+  // 设置表头相关信息
+  useEffect(() => {
+    const { colData, rowData } = props;
+    let tableType;
+    if (colData && colData.length && rowData && rowData.length) {
+      tableType = 'multi-header-table';
+      const colHeaderData = convertToRows(colData);
+      const rowHeaderData = headersToRows(rowData);
+      const { rowHeader } =  rowHeaderData;
+      setConfig({
+        colHeader: [],
+        colLastData: [],
+        rowHeader: [],
+        rowLastData: [],
+        ...colHeaderData,
+        ...rowHeaderData,
+        colHeaderToTop: (rowHeader?.length || 0)*40,
+        tableType: tableType
+      })
+    } else if (colData && colData.length) {
+      tableType = 'col-header-table';
+      const colHeaderData = convertToRows(colData);
+      setConfig({
+        colHeader: [],
+        colLastData: [],
+        rowHeader: [],
+        rowLastData: [],
+        ...colHeaderData,
+        colHeaderToTop: 0,
+        tableType: tableType
+      })
+    }
+  }, [props.colData, props.rowData]);
+
+  // 设置多表头表格数据
+  useEffect(() => {
+    if (!config.colLastData.length || !config.rowLastData.length || !props.multiTableData) return;
+    let tableData = {};
+    let [row, col] = [config.rowLastData, config.colLastData];
+    col.forEach(x => {
+      row.forEach(y => {
+        let key = x.id + "__" + y.id;
+        tableData[key] = "";
+      });
+    });
+    Object.assign(tableData, props.multiTableData);
+    setMmultiTableData({
+      ...tableData
+    });
+  }, [config.colLastData, config.rowLastData, props.multiTableData])
+
+  // 设置纵向表格数据
+  useEffect(() => {
+    if (props?.colTableData && props?.colTableData.length) {
+      setColTableData([
+        ...props.colTableData
+      ])
+    }
+  }, [props.colTableData])
+
+  const getDataSource = () => {
+    return colTableData;
+  }
+
+  const tableInsFn = {
+    getDataSource: getDataSource,
+  }
+
+  
+
+  // if (!show) {
+  //   return <div>loading</div>;
+  // }
+
+  const {width, height, tableProps } = props;
+  let tableWidth = width ? `${width}px` : '100%';
+  let tableHeight = `${height || 400}px`;
+  const rightAreaWidth = 'calc(100% - ' +  `${realColHeaderWidth}px` + ')';
+  return (
+      <div 
+        style={{width: tableWidth, height: tableHeight}}
+        key='moreTreeTable'
+        className={'editTableWrapper'}
+        onScroll={onScroll}
+        ref={viewPort}
+      >
+        <FixedScrollBar
+          stickyProps={tableProps?.sticky}
+          viewPort={viewPort}
+          ref={topScrollBar}
+        />
+        <div style={{
+          width: `${realColHeaderWidth + placeholderWidth}px`,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          }}
+          ></div>
+         {/* -------------------------------------左上角区域--------------------------------------- */}
+         <table 
+          style={{
+            width: `${realColHeaderWidth}px`, 
+            height:  `${config.colHeaderToTop}px`, 
+            display: config.tableType === 'col-header-table' ? 'none' : '',
+          }} 
+          className={`${'north__west'}`}
+        >
+        </table>
+
+        {/* --------------------------------------纵向表头---------------------------------------- */}
+        <table
+          style={{
+            tableLayout:'auto',
+            minWidth: '100px',
+            width: `${realColHeaderWidth}px`,
+            top: `${config.colHeaderToTop}px`,
+            left: '0px',
+            position: 'sticky',
+          }}
+          ref={leftTableRef}
+          className={`${'south__west'} ${'editTable__block'} ${'table_border_style'}`}
+        >
+          <tbody>
+            {config.colHeader.map((item, index) => {
+              return (
+                <tr>
+                  {item.map((innerItem) => {
+                    if (!innerItem) return null;
+                    let fixedTop = innerItem.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
+                    return (
+                      <td
+                        style={{
+                          // width: '200px',
+                          height: '40px',
+                          background: '#f7f8fb',
+                          lineHeight: '28px',
+                          color: '#000000',
+                          fontWeight: 500,
+                          position: innerItem.fixed ? 'sticky' : '',
+                          top: fixedTop,
+                        }}
+                        rowSpan={innerItem && innerItem.colSpan}
+                        colSpan={innerItem && innerItem.rowSpan}
+                      >
+                        {innerItem && innerItem.title}
+                      </td>
+                    );
+                  })}
+                  {/* <td></td> */}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+        <table 
+          className={` ${'editTable__block'} ${'table_border_style'}`}
+          style={{
+            width: '100%',
+            top: 0,
+            left: `${realColHeaderWidth}px`,
+            position: 'absolute',
+            display: config.tableType === 'col-header-table' ? 'none' : ''
+          }}
+        >
+          <colgroup>
+            {
+              config.rowLastData.map(row => {
+                return (<col width={row.width ? `${row.width}px` : '100px'} />)
+              })
+            }
+          </colgroup>
+          <tbody>
+            {
+              config.rowHeader.map((item) => {
+                return (
+                  <tr>
+                    {
+                      item.map((innerItem) => {
+                        if (!innerItem) return null;
+                        return (
+                          <td
+                            style={{
+                              height: '40px',
+                              background: '#f7f8fb',
+                              color: '#000000',
+                              fontWeight: 500,
+                              width: innerItem.width ? `${innerItem.width}px` : '100px',
+                            }}
+                            rowSpan={innerItem && innerItem.rowSpan}
+                            colSpan={innerItem && innerItem.colSpan}
+                          >
+                            {innerItem && innerItem.title}
+                          </td>
+                        )
+                      })
+                    }
+                  </tr>
+                )
+              })
+            }
+          </tbody>
+      </table>
+        <div
+          style={{
+            position: 'absolute',
+            left: `${realColHeaderWidth}px`,
+            top: `${config.colHeaderToTop}px`, 
+            minWidth: rightAreaWidth,
+            zIndex: 0,
+          }}
+        >
+          {/* --------------------------------------横向表头---------------------------------------- */}
+          {/* <div style={{position: 'relative'}}>
+            
+          </div> */}
+          <div 
+            style={{
+              width: '100%', 
+              position: 'relative'
+            }} 
+            className={`${'value_table'} ${'table_border_style'}`}
+          >
+            {/* ------------------------------------纵向表头数据-------------------------------------- */}
+            <table 
+              style={{
+                tableLayout:'auto',
+                width: '800px',
+                display: config.tableType === 'col-header-table' ? '' : 'none',
+                transform: `translateX(${offsetWidth}px)`
+              }} 
+              className={`${'editTable__block'} ${'table_border_style'}`}
+            >
+              <tbody>
+                {config.colLastData.map((item, index) => {
+                  let fixedTop = item.fixed ? `${index*40 + config.colHeaderToTop}px` : 0;
+                  return (
+                    <tr>
+                      {colTableData.map((record, index) => {
+                        let tdHidden = record?.['_rowConfig']?.hidden ? 'none' : 'table-cell'
+                        let onCellResult = item.onCell?.(record, index) || {}
+                        let {addStyle={}} = onCellResult
+                        return (
+                          <td
+                            style={{
+                              ...addStyle,
+                              display: tdHidden,
+                              background: (index % 2 === 1) || item.fixed ? '#f7f8fb' : '#fff',
+                              minWidth: '100px',
+                              width: `${itemWidth}px`,
+                              height: '40px',
+                              position: item.fixed ? 'sticky' : '',
+                              top: fixedTop,
+                              color: item.fixed ? '#000000' : 'inherit',
+                              zIndex: item.fixed ? 10 : '',
+                            }}
+                          >
+                            {
+                              item.render ? item.render({text:record[item.key || item.dataIndex], record, index, table: tableInsFn}) : record[item.key || item.dataIndex]
+                            }
+                            {/* {record[item.key || item.dataIndex]?.value} */}
+                          </td>
+                        );
+                      }).slice(startIndex, endIndex+1)}
+                      {/* <td></td> */}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+            {/* -------------------------------------多表头数据-------------------------------------- */}
+            <table 
+              style={{
+                width: '100%',
+                display: config.tableType === 'col-header-table' ? 'none' : '',
+              }} 
+              className={`${'editTable__block'} ${'table_border_style'}`}
+            >
+              <colgroup>
+                {
+                  config.rowLastData.map(row => {
+                    return (<col width={row.width ? `${row.width}px` : '100px'} />)
+                  })
+                }
+              </colgroup>
+              <tbody>
+                {config.colLastData.map((col) => {
+                  return (
+                    <tr>
+                      {config.rowLastData.map((row, index) => {
+                        return (
+                          <td
+                            style={{
+                              background: (index % 2 === 0) ? '#fff' : '#f7f8fb',
+                              width: row.width ? `${row.width}px` : '100px',
+                              height: '40px',
+                            }}
+                          >
+                            {multiTableData[(row.key || row.dataIndex)+'__'+(col.key || col.dataIndex)]}
+                          </td>
+                        );
+                      })}
+                      {/* <td></td> */}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+  );
+});