@bit-sun/business-component 2.2.41 → 2.2.43

package/dist/utils/TableUtils.d.ts

@@ -1,9 +1,9 @@
-type mediaListType = {
+declare type mediaListType = {
     type: number;
     url: string;
     [key: string]: any;
 };
-type recordType = {
+declare type recordType = {
     mediaList?: mediaListType;
     [key: string]: any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "2.2.41",
+  "version": "2.2.43",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/BsSulaQueryTable/SearchItemSetting.tsx

@@ -79,7 +79,7 @@ class SearchItemTable extends React.Component {
   };
 
   patchConfigToLocalstorage = (configvalue) => {
-    const { setShowSearchFields } = this.props;
+    const { setShowSearchFields, datasource = [] } = this.props;
     const { sortDataSource, bsTableCode } = this.state;
     let config = localStorage.getItem(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION) || '[]'
     let configArray = JSON.parse(config)
@@ -97,7 +97,22 @@ class SearchItemTable extends React.Component {
     this.setState({
       visible: false,
     });
-    setShowSearchFields([...sortDataSource]);
+    if(configvalue){
+      setShowSearchFields([...sortDataSource]);
+    }else{
+      this.setState({
+        isDefaultValue: true,
+        dataSource: [...datasource.map((item)=>({
+          ...item,
+          hidden: false
+        }))],
+        sortDataSource: [...datasource.map((item)=>({
+          ...item,
+          hidden: false
+        }))]
+      });
+      setShowSearchFields([...datasource]);
+    }
   };
 
   setInitValue = (isClick = false) => {
@@ -362,6 +377,10 @@ class SearchItemTable extends React.Component {
     this.setInitValue(true);
   };
 
+  handleResetSetting = () =>{
+    this.patchUserSearchFieldsConfig('');
+  }
+
   onSearch = (e: any) => {
     this.setState({
       searchDataSource: e.target.value,
@@ -396,15 +415,22 @@ class SearchItemTable extends React.Component {
             onOk={this.handleOk}
             onCancel={this.handleCancel}
             footer={[
-              <Button key="back" onClick={this.handleReset}>
-                恢复默认
-              </Button>,
-              <Button key="submit" onClick={this.handleCancel}>
-                取消
-              </Button>,
-              <Button key="submit" type="primary" onClick={this.handleOk}>
-                确认
-              </Button>,
+              <div>
+                <Button key="back" onClick={this.handleReset} style={{marginRight: 0}}>
+                  恢复默认
+                </Button>,
+                <Button key="back" onClick={this.handleResetSetting}>
+                  重置设置
+                </Button>
+              </div>,
+              <div>
+                <Button key="submit" onClick={this.handleCancel} style={{marginRight: 0}}>
+                  取消
+                </Button>,
+                <Button key="submit" type="primary" onClick={this.handleOk}>
+                  确认
+                </Button>
+              </div>,
             ]}
           >
             <div className={'sort_table'}>

package/src/components/Business/BsSulaQueryTable/index.less

@@ -145,7 +145,9 @@
     height: 70px;
     border: 0;
     padding: 20px;
-
+    display: flex;
+    justify-content: space-between;
+    
     .ant-btn {
       width: 80px;
       height: 34px;
@@ -160,9 +162,9 @@
         line-height: 20px;
       }
 
-      &:first-child {
-        margin-right: 524px;
-      }
+      // &:first-child {
+      //   margin-right: 524px;
+      // }
     }
   }
 

package/src/components/Business/BsSulaQueryTable/setting.tsx

@@ -86,7 +86,7 @@ class SortableTable extends React.Component {
   };
 
   patchConfigToLocalstorage = (configvalue) => {
-    const { setShowColumns } = this.props;
+    const { setShowColumns, datasource = []  } = this.props;
     const { sortDataSource, bsTableCode } = this.state;
     let config = localStorage.getItem(ENUM.BROWSER_CACHE.COLUMN_CONDITION) || '[]'
     let configArray = JSON.parse(config)
@@ -104,7 +104,22 @@ class SortableTable extends React.Component {
     this.setState({
       visible: false,
     });
-    setShowColumns([...sortDataSource]);
+    if(configvalue){
+      setShowColumns([...sortDataSource]);
+    }else{
+      this.setState({
+        isDefaultValue: true,
+        dataSource: [...datasource.map((item)=>({
+          ...item,
+          hidden: false
+        }))],
+        sortDataSource: [...datasource.map((item)=>({
+          ...item,
+          hidden: false
+        }))]
+      });
+      setShowColumns([...datasource]);
+    }
   };
 
   setInitValue = (isClick = false) => {
@@ -570,6 +585,10 @@ class SortableTable extends React.Component {
     this.setInitValue(true);
   };
 
+  handleResetSetting = () =>{
+    this.patchUserColumnConfig('');
+  }
+
   onSearch = (e: any) => {
     this.setState({
       searchDataSource: e.target.value,
@@ -606,15 +625,22 @@ class SortableTable extends React.Component {
             onOk={this.handleOk}
             onCancel={this.handleCancel}
             footer={[
-              <Button key="back" onClick={this.handleReset}>
-                恢复默认
-              </Button>,
-              <Button key="submit" onClick={this.handleCancel}>
-                取消
-              </Button>,
-              <Button key="submit" type="primary" onClick={this.handleOk}>
-                确认
-              </Button>,
+              <div>
+                <Button key="back" onClick={this.handleReset} style={{marginRight: 0}}>
+                  恢复默认
+                </Button>,
+                <Button key="back" onClick={this.handleResetSetting}>
+                  重置设置
+                </Button>
+              </div>,
+              <div>
+                <Button key="submit" onClick={this.handleCancel} style={{marginRight: 0}}>
+                  取消
+                </Button>,
+                <Button key="submit" type="primary" onClick={this.handleOk}>
+                  确认
+                </Button>
+              </div>
             ]}
           >
             <div className={'sort_table'}>

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

@@ -0,0 +1,92 @@
+import React, {useEffect, useImperativeHandle, useRef, useState} from 'react'
+
+function getOffset(node: any) {
+  const box = node.getBoundingClientRect();
+  const docElem = document.documentElement;
+  console.log(box, 'box', {
+    left: box.left + (window.pageXOffset || docElem.scrollLeft) -
+      (docElem.clientLeft || document.body.clientLeft || 0),
+    top: box.top + (window.pageYOffset || docElem.scrollTop) -
+      (docElem.clientTop || document.body.clientTop || 0),
+  })
+  // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
+  return {
+    left: box.left + (window.pageXOffset || docElem.scrollLeft) -
+      (docElem.clientLeft || document.body.clientLeft || 0),
+    top: box.top + (window.pageYOffset || docElem.scrollTop) -
+      (docElem.clientTop || document.body.clientTop || 0),
+  };
+}
+
+
+const FixedScrollBar = ({viewPort, width}: any, ref: any) => {
+
+  const [scrollState, setScrollState] = useState({
+    isHiddenScrollBar: false
+  })
+
+  const onContainerScroll = () => {
+    if (!viewPort.current) {
+      return;
+    }
+    const tableOffsetTop = getOffset(viewPort.current).top;
+    const tableBottomOffset = tableOffsetTop + viewPort.current.offsetHeight;
+    const currentClientOffset = document.documentElement.scrollTop + window.innerHeight
+
+    if (
+      tableBottomOffset - 1  <= currentClientOffset ||
+      tableOffsetTop >= currentClientOffset
+    ) {
+      setScrollState(state => ({
+        ...state,
+        isHiddenScrollBar: true,
+      }));
+    } else {
+      ref.current?.scrollTo(viewPort.current.scrollLeft, 0)
+      setScrollState(state => ({
+        ...state,
+        isHiddenScrollBar: false,
+      }));
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('scroll', onContainerScroll)
+    return () => {
+      document.removeEventListener('scroll', onContainerScroll)
+    }
+  },[])
+
+  if(scrollState.isHiddenScrollBar){
+    return null
+  }
+
+  return (
+    <div
+      ref={ref}
+      onScroll={(e) => {
+        // @ts-ignore
+        viewPort.current.scrollTo(e.target.scrollLeft, 0)
+      }}
+      style={{
+        position:'fixed',
+        zIndex: '9999',
+        bottom: '45px',
+        overflowY: 'hidden',
+        overflowX: 'auto',
+        width: viewPort.current?.offsetWidth || 0,
+        background:'#fff',
+        opacity: 0.6,
+      }}>
+      <div
+        className={'ant-table-sticky-scroll-bar'}
+        style={{
+          height: '1px',
+          backgroundColor: '#fff',
+          width,
+        }}></div>
+    </div>
+  )
+}
+
+export default React.forwardRef(FixedScrollBar)

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

@@ -2,6 +2,7 @@
 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) => {
@@ -21,10 +22,11 @@ export default forwardRef((props, ref) => {
   const itemWidth = 100; // 表格每一项宽度
 
   const viewPort = useRef(null);
+  const topScrollBar = useRef(null)
 
   //起始渲染item
   const [startIndex, setStartIndex] = useState(0);
-  
+
   //结束渲染item
   const endIndex = useMemo(() => {
     return startIndex + viewCount;
@@ -41,6 +43,9 @@ export default forwardRef((props, ref) => {
   }, [])
 
   const onScroll = () => {
+    if(topScrollBar.current){
+      topScrollBar.current.scrollTo(viewPort.current.scrollLeft, 0)
+    }
     const scrollWidth = viewPort.current.scrollLeft;
     const startIndex = Math.floor(scrollWidth/itemWidth);
     const offsetWidth = startIndex * itemWidth;
@@ -134,8 +139,8 @@ export default forwardRef((props, ref) => {
   // if (!show) {
   //   return <div>loading</div>;
   // }
-  
-  const {width, height } = props;
+
+  const {width, height, tableProps } = props;
   let tableWidth = width ? `${width}px` : '100%';
   let tableHeight = `${height || 400}px`;
   const rightAreaWidth = 'calc(100% - ' +  `${config.colHeaderWidth}px` + ')';
@@ -147,6 +152,11 @@ export default forwardRef((props, ref) => {
         onScroll={onScroll}
         ref={viewPort}
       >
+        {tableProps?.sticky && <FixedScrollBar
+          viewPort={viewPort}
+          width={`${config.colHeaderWidth + 1 + placeholderWidth}px`}
+          ref={topScrollBar}
+        />}
         <div style={{
           width: `${config.colHeaderWidth + 1 + placeholderWidth}px`,
           position: 'absolute',