@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

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

@@ -0,0 +1,235 @@
+import React, { useState } from 'react';
+import { Table, Tooltip, Typography } from 'antd';
+import { Resizable } from 'react-resizable';
+import ColumnSetting from './columnSetting';
+import { getItemDefaultWidth, getShowColumns, handleTextOverflow } from './utils';
+import { noEmptyArray } from './utils';
+import ENUM from '@/utils/enumConfig';
+import { handleAntdColumnsSpecialParams } from '@/utils/utils';
+const { Text } = Typography;
+export default class ColumnSettingTable extends React.Component {
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      showColumns: [],
+    }
+  }
+
+  componentDidMount() {
+    const { columns }: any = this.props;
+    this.setInitialShowColumn(columns || [])
+  }
+
+
+  componentWillReceiveProps(nextProps: any) {
+    // if (JSON.stringify(this.props.columns) !== JSON.stringify(nextProps.columns)) {
+    // }
+    this.setInitialShowColumn(nextProps.columns || [])
+  }
+
+  setInitialShowColumn = (columns: any[]) => {
+    // 获取当前列表定义数据
+    let columnConfig = this.getConfigFromlocalstorage();
+    let showColumns = getShowColumns(columns, columnConfig);
+    this.setState({
+      showColumns,
+    })
+  }
+
+  reSetInitialShowColumn = () => {
+    const { columns }: any = this.props;
+
+    let showColumns = getShowColumns(columns, []);
+    this.setState({
+      showColumns,
+    })
+  }
+
+  setShowColumns = (newColumns: Array<any>) => {
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  }
+
+  getConfigFromlocalstorage = () => {
+    const { tableCode }: any = this.props;
+    if (!tableCode) return [];
+    let config = localStorage.getItem(ENUM.BROWSER_CACHE.COLUMN_CONDITION) || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item:any) => item.code === tableCode,
+    );
+
+    if (configSetting.length) {
+      return JSON.parse(configSetting[0].detail || '[]');
+    }
+    return [];
+  };
+
+  getTableSummaryInfo = () => {
+    const { summary = undefined, rowSelection, expandable }: any = this.props;
+    const { showColumns }: any = this.state;
+    // let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
+    let summaryRow = rowSelection && expandable ? [{}, {}, ...showColumns] : rowSelection || expandable ? [{}, ...showColumns] : [...showColumns]; //兼容table配置展开expandable属性导致汇总列位置不对的问题
+    let summaryInitial = summary().cont;
+    let summaryDom: any = <Table.Summary fixed>
+      <Table.Summary.Row>
+        {
+          [...summaryRow].map((item: any, index: number) => {
+            return (
+              <Table.Summary.Cell index={index}>
+                <Text type="danger">
+                  {
+                    summaryInitial.filter((inner: any) => inner.key === item.dataIndex || inner.key === item.key).length ?
+                      `${item.title}: ${summaryInitial.filter((inner: any) => inner.key === item.dataIndex || inner.key === item.key)[0].value}` : ''
+
+                  }
+                </Text>
+              </Table.Summary.Cell>
+            )
+          })
+        }
+      </Table.Summary.Row >
+    </Table.Summary>
+  return () => summaryDom
+  };
+
+  handledynamicColumns = (col: any[]) => {
+    let { dynamicColumns, modeType }: any = this.props;
+    col = col.map((item: any) => {
+      let target = dynamicColumns.find((d: any) => item.dataIndex === d.key || item.key === d.key)
+      if (modeType === 'view' && target) {
+        item.render = target?.render;
+      }
+      return { ...item };
+    })
+    return [...col]
+  };
+
+  handleResize = (index: any) => (_: any, { size }: any) => {
+    let newColumns = this.state.showColumns.map((col: any) => ({ ...col }));
+    const handleIndex = (arr: any, indexArr: any) => {
+      let i = indexArr.shift();
+      if (indexArr.length > 0) {
+        handleIndex(arr[i].children, indexArr);
+      } else {
+        arr[i] = {
+          ...arr[i],
+          width: size.width,
+        };
+        handleAntdColumnsSpecialParams(arr[i]);
+      }
+    };
+    handleIndex(newColumns, [...index]);
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  };
+
+  ResizeableTitle = (props: any) => {
+    const { onResize, width, ...restProps } = props;
+
+    if (!width) {
+      return <th {...restProps} />;
+    }
+    return (
+      <Resizable
+        width={width}
+        height={0}
+        onResize={onResize}
+        draggableOpts={{ enableUserSelectHack: false }}
+      >
+        <th {...restProps} />
+      </Resizable>
+    );
+  }
+
+  getTableScrollXWidth = (cols: any[]) => {
+    if (cols.every((item: any) => item.width)) {
+      return cols.reduce((cur: any, obj: any) => cur += obj.width, 0)
+    } else {
+      return 'max-content'
+    }
+  };
+
+  render() {
+    const { columns, tableCode, appRequestConfig, summary = undefined, dynamicColumns = [], scroll={}, ...restProps }: any = this.props;
+    let otherTableInfo = {
+      ...restProps,
+    };
+    let showSummary = null;
+    if (this.state.showColumns.length) {
+      if (summary && summary().diy) {
+        showSummary = this.getTableSummaryInfo();
+      } else {
+        showSummary = summary;
+      }
+    };
+
+    const handleColumns = (arr: any, indexArr: any[]) => {
+      arr.forEach((item: any, index: any) => {
+        let indexArrInside = [...indexArr, index].filter((i: any) => i || i === 0)
+        if (noEmptyArray(item.children)) {
+          handleColumns(item.children, indexArrInside);
+        } else {
+          item.width = item.width || getItemDefaultWidth(item);
+          item.onHeaderCell = (column: any) => ({
+            ...item,
+            width:
+              typeof column.width === 'number'
+                ? column.width
+                : parseInt(column.width.replace('px', '')),
+            onResize: this.handleResize(indexArrInside),
+          });
+        }
+      })
+    };
+    let showCol = this.state.showColumns.map((item: any) => {
+      handleAntdColumnsSpecialParams(item);
+      return ({ ...item })
+    })
+    handleColumns(showCol, []);
+    if (dynamicColumns.length) {
+      showCol = this.handledynamicColumns(showCol);
+    }
+
+    otherTableInfo = {
+      ...otherTableInfo,
+      scroll: {
+        y: 400,
+        ...scroll,
+        x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
+      },
+      summary: showSummary,
+    }
+    return (
+      <div>
+        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
+          <span style={{ float: 'right' }} className="ant-dropdown-link">
+            <ColumnSetting
+              setShowColumns={this.setShowColumns}
+              showColumns={this.state.showColumns}
+              datasource={columns || []}
+              reSetInitialShowColumn={this.reSetInitialShowColumn}
+              tableCode={tableCode}
+              appRequestConfig={appRequestConfig}
+            />
+          </span>
+        </div>
+        <Table
+          columns={showCol}
+          components={{
+            header: {
+              cell: this.ResizeableTitle,
+            },
+          }}
+          {
+          ...otherTableInfo
+          }
+        />
+      </div >
+    )
+  }
+
+}

package/src/components/Business/columnSettingTable/sulaSettingTable.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { Table as SulaTable, request } from 'bssula';
+import { Resizable } from 'react-resizable';
+import ColumnSetting from './columnSetting';
+import { getItemDefaultWidth, getShowColumns } from './utils';
+import { noEmptyArray } from './utils';
+import {
+  Table,
+  Typography,
+} from 'antd';
+import ENUM from '@/utils/enumConfig';
+import { handleBssulaColumnsSpecialParams, parseWidth } from '@/utils/utils';
+const { Text } = Typography;
+export default class ColumnSettingSulaTable extends React.Component {
+  sulaTableRef: React.RefObject<unknown>;
+  state: any;
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      showColumns: [],
+    }
+    this.sulaTableRef = React.createRef();
+  }
+
+  componentDidMount() {
+    const { columns }: any = this.props;
+    this.setInitialShowColumn(columns || [])
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    // if (JSON.stringify(this.props.columns) !== JSON.stringify(nextProps.columns)) {
+    // }
+    this.setInitialShowColumn(nextProps.columns || [])
+  }
+
+  setInitialShowColumn = (columns: any[]) => {
+    // 获取当前列表定义数据
+    let columnConfig = this.getConfigFromlocalstorage();
+    let showColumns = getShowColumns(columns, columnConfig);
+    this.setState({
+      showColumns,
+    })
+
+  }
+
+  setShowColumns = (newColumns: Array<any>) => {
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  }
+
+  getConfigFromlocalstorage = () => {
+    const { tableCode }:any = this.props;
+    if (!tableCode) return [];
+    let config = localStorage.getItem(ENUM.BROWSER_CACHE.COLUMN_CONDITION) || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item: any) => item.code === tableCode,
+    );
+
+    if (configSetting.length) {
+      return JSON.parse(configSetting[0].detail || '[]');
+    }
+    return [];
+  };
+
+  getTableSummaryInfo = () => {
+    const { summary = undefined, rowSelection, expandable }: any = this.props;
+    const { showColumns }: any = this.state;
+    // let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
+    let summaryRow = rowSelection && expandable ? [{}, {}, ...showColumns] : rowSelection || expandable ? [{}, ...showColumns] : [...showColumns]; //兼容table配置展开expandable属性导致汇总列位置不对的问题
+    let summaryInitial = summary().cont;
+    let summaryDom: any = <Table.Summary fixed>
+      <Table.Summary.Row>
+        {
+          [...summaryRow].map((item: any, index: number) => {
+            return (
+              <Table.Summary.Cell index={index}>
+                <Text type="danger">
+                  {
+                    summaryInitial.filter((inner: any) => inner.key === item.dataIndex || inner.key === item.key).length ?
+                      `${item.title}: ${summaryInitial.filter((inner: any) => inner.key === item.dataIndex || inner.key === item.key)[0].value}` : ''
+
+                  }
+                </Text>
+              </Table.Summary.Cell>
+            )
+          })
+        }
+      </Table.Summary.Row >
+    </Table.Summary>
+  return () => summaryDom
+  };
+
+  handledynamicColumns = (col: any[]) => {
+    let { dynamicColumns, modeType }: any = this.props;
+    col = col.map((item: any) => {
+      let target = dynamicColumns.find((d: any) => item.dataIndex === d.key || item.key === d.key)
+      if (modeType === 'view' && target) {
+        item.render = target?.render;
+      }
+      return { ...item };
+    })
+    return [...col]
+  };
+
+  handleResize = (index: any) => (_: any, { size }: any) => {
+    let newColumns = this.state.showColumns.map((col: any) => ({ ...col }));
+    const handleIndex = (arr: any, indexArr: any) => {
+      let i = indexArr.shift();
+      if (indexArr.length > 0) {
+        handleIndex(arr[i].children, indexArr);
+      } else {
+        arr[i] = {
+          ...arr[i],
+          width: size.width,
+        };
+        handleBssulaColumnsSpecialParams(arr[i]);
+      }
+    };
+    handleIndex(newColumns, [...index]);
+    this.setState({
+      showColumns: [...newColumns]
+    })
+  };
+
+  ResizeableTitle = (props: any) => {
+    const { onResize, width, ...restProps } = props;
+
+    if (!width) {
+      return <th {...restProps} />;
+    }
+    return (
+      <Resizable
+        width={width}
+        height={0}
+        onResize={onResize}
+        draggableOpts={{ enableUserSelectHack: false }}
+      >
+        <th {...restProps} />
+      </Resizable>
+    );
+  }
+
+  getTableScrollXWidth = (cols: any[]) => {
+    if (cols.every((item: any) => item.width)) {
+      return cols.reduce((cur: any, obj: any) => cur += obj.width, 0)
+    } else {
+      return 'max-content'
+    }
+  };
+
+  render() {
+    const { style=null, columns, tableCode, appRequestConfig, summary = undefined, dynamicColumns = [], scroll={}, ...restProps }: any = this.props;
+    let otherTableInfo = {
+      ...restProps,
+    };
+    let showSummary = null;
+    if (this.state.showColumns.length) {
+      if (summary && summary().diy) {
+        showSummary = this.getTableSummaryInfo();
+      } else {
+        showSummary = summary;
+      }
+    };
+
+    const handleColumns = (arr: any, indexArr: any[]) => {
+      arr.forEach((item: any, index: any) => {
+        let indexArrInside = [...indexArr, index].filter((i: any) => i || i === 0)
+        if (noEmptyArray(item.children)) {
+          handleColumns(item.children, indexArrInside);
+        } else {
+          item.width = item.width || getItemDefaultWidth(item);
+          item.onHeaderCell = (column: any) => ({
+            ...item,
+            width: typeof column.width === 'number'
+            ? column.width
+            : parseWidth(column.width),
+            onResize: this.handleResize(indexArrInside),
+          });
+        }
+      })
+    };
+    let showCol = this.state.showColumns.map((item: any) => {
+      handleBssulaColumnsSpecialParams(item);
+      return ({ ...item })
+    })
+    handleColumns(showCol, []);
+    if (dynamicColumns.length) {
+      showCol = this.handledynamicColumns(showCol);
+    }
+
+    otherTableInfo = {
+      ...otherTableInfo,
+      scroll: {
+        y: 400,
+        ...scroll,
+        x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
+      },
+      summary: showSummary,
+    }
+    return (
+      <div>
+        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
+          <span style={{ float: 'right' }} className="ant-dropdown-link">
+            <ColumnSetting
+              setShowColumns={this.setShowColumns}
+              showColumns={this.state.showColumns}
+              datasource={columns || []}
+              tableCode={tableCode}
+              appRequestConfig={appRequestConfig}
+            />
+          </span>
+        </div>
+        <SulaTable
+          ref={this.sulaTableRef}
+          style={style}
+          columns={showCol}
+          components={{
+            header: {
+              cell: this.ResizeableTitle,
+            },
+          }}
+          {
+          ...otherTableInfo
+          }
+        />
+      </div >
+    )
+  }
+
+}

package/src/components/Business/columnSettingTable/utils.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Tooltip,
+} from 'antd';
+/**
+ * 非空数组
+ * @param arr 要判断的数据
+ * @returns boolean
+ */
+ export const noEmptyArray = (arr: any[]) =>
+ Array.isArray(arr) && arr.length > 0;
+
+ //设置queryTable默认列宽
+export const getItemDefaultWidth = (item: any) => {
+  let defaultWidth = 200;
+  if (Array.isArray(item.key) || Array.isArray(item.dataIndex)) return defaultWidth;
+  let lowerCaseKey = (item.key || item.dataIndex)?.toLowerCase();
+  if (!lowerCaseKey) return defaultWidth;
+  switch (true) {
+    case item?.title === '操作' || lowerCaseKey === 'operate':
+      defaultWidth = 60;
+      break;
+    case lowerCaseKey.indexOf('number') > -1:
+    case lowerCaseKey.indexOf('quantity') > -1:
+    case lowerCaseKey.indexOf('amount') > -1:
+      defaultWidth = 90;
+      break;
+    case (lowerCaseKey.indexOf('no') > -1):
+      defaultWidth = 200;
+      break;
+    case lowerCaseKey.indexOf('code') > -1:
+      defaultWidth = 170;
+      break;
+    case lowerCaseKey.indexOf('time') > -1:
+      defaultWidth = 130;
+      break;
+    case lowerCaseKey.indexOf('status') > -1:
+      defaultWidth = 100;
+      break;
+    case lowerCaseKey.indexOf('user') > -1:
+      defaultWidth = 130;
+      break;
+    default:
+      break;
+  }
+  return defaultWidth;
+};
+
+// 带有toptile 清提示 ...
+export const handleTextOverflow = (
+  text: string | undefined,
+  width: number = 130,
+) => {
+  return (
+    <Tooltip title={text || '-'}>
+      <span
+        style={{
+          width: width ? width + 'px' : '130px',
+          display: 'inline-block',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          position: 'relative',
+          top: '5px',
+        }}
+      >
+        {text || '-'}
+      </span>
+    </Tooltip>
+  );
+};
+
+export const getShowColumns = (originColumns: any[], configs: any[]) => {
+  let showColumns: any[] = [];
+  if (configs.length) {
+    configs.forEach(config => {
+      let inner = originColumns.filter(innerItem => (
+        innerItem.dataIndex && innerItem.dataIndex === config.dataIndex
+      ) || (innerItem.key && innerItem.key === config.key))[0];
+      inner && showColumns.push({
+        ...inner,
+        ...config,
+      });
+    })
+ }
+ if (showColumns.length) return showColumns;
+ return (originColumns || []).filter((item: any) => !item.hidden);
+}

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

@@ -0,0 +1,87 @@
+import React, {useEffect, useImperativeHandle, useRef, useState} from 'react'
+import {throttle} from "lodash";
+import useSticky from "./hooks/useSticky";
+
+function getOffset(node: any) {
+  const box = node.getBoundingClientRect();
+  const docElem = document.documentElement;
+  // < 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, stickyProps}: any, ref: any) => {
+  const {isSticky, container} = useSticky(stickyProps)
+  const [scrollState, setScrollState] = useState({
+    isHiddenScrollBar: !isSticky
+  })
+  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(() => {
+    onContainerScroll()
+    const onscroll = throttle(onContainerScroll, 50)
+    container.addEventListener('scroll', onscroll)
+    return () => {
+      container.removeEventListener('scroll', onscroll)
+    }
+  },[])
+
+  if(scrollState.isHiddenScrollBar){
+    return null
+  }
+
+  return (
+    <div
+      ref={ref}
+      onScroll={throttle((e) => {
+        // @ts-ignore
+        viewPort.current.scrollTo(e.target.scrollLeft, 0)
+      }, 50)}
+      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: viewPort.current?.scrollWidth || 0,
+        }}></div>
+    </div>
+  )
+}
+
+export default React.forwardRef(FixedScrollBar)

package/src/components/Business/moreTreeTable/hooks/useSticky.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface TableSticky{
+  getContainer?:  () => Window | HTMLElement;
+}
+
+const useSticky = (sticky: boolean | TableSticky) => {
+  const {getContainer = () => window.document} = typeof sticky === 'object' ? sticky : {}
+
+  const container = getContainer()
+  return React.useMemo(() => {
+    const isSticky = !!sticky
+    return {
+      isSticky,
+      container,
+    }
+  },[sticky])
+
+}
+
+export default useSticky