@bit-sun/business-component 1.2.4-alpha.1 → 1.2.4

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

@@ -1,233 +0,0 @@
-import React, { useState } from 'react';
-import { Table, Tooltip, Typography } from 'antd';
-import { Resizable } from 'react-resizable';
-import ColumnSetting from './columnSetting';
-import { getItemDefaultWidth, handleTextOverflow } from './utils';
-import { noEmptyArray } from './utils';
-import ENUM from '@/utils/enumConfig';
-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 = columnConfig.length ? columnConfig.map((item: any) => {
-      let inner = columns.filter(innerItem => (
-        innerItem.dataIndex && innerItem.dataIndex === item.dataIndex
-      ) || (innerItem.key && innerItem.key === item.key))[0];
-      return {
-        ...inner,
-        ...item,
-      }
-    }).filter((item: any) => !item.hidden)
-      :
-      (columns || []).filter((item: any) => !item.hidden);
-    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 }: any = this.props;
-    const { showColumns }: any = this.state;
-    let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
-    let summaryInitial = summary().cont;
-    let summaryDom: any = <Table.Summary fixed>
-      <Table.Summary.Row>
-        {
-          [...summaryRow].map((item: any, index: number) => {
-            return (
-              <Table.Summary.Cell index={rowSelection ? index : index - 1}>
-                <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,
-        };
-        if (arr[i].textOverflow) {
-          arr[i].render = ({ text }: any) => handleTextOverflow(text, size.width);
-        };
-      }
-    };
-    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, 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) => {
-      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}
-            />
-          </span>
-        </div>
-        <Table
-          columns={showCol}
-          components={{
-            header: {
-              cell: this.ResizeableTitle,
-            },
-          }}
-          {
-          ...otherTableInfo
-          }
-        />
-      </div >
-    )
-  }
-
-}

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

@@ -1,241 +0,0 @@
-import React, { useState } from 'react';
-import { Table as SulaTable, request } from 'bssula';
-import { Resizable } from 'react-resizable';
-import ColumnSetting from './columnSetting';
-import { getItemDefaultWidth, handleTextOverflow } from './utils';
-import { noEmptyArray } from './utils';
-import {
-  Table,
-  Typography,
-} from 'antd';
-import ENUM from '@/utils/enumConfig';
-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 = columnConfig.length ? columnConfig.map((item:any) => {
-      let inner = columns.filter(innerItem => (
-        innerItem.dataIndex && innerItem.dataIndex === item.dataIndex
-      ) || (innerItem.key && innerItem.key === item.key))[0];
-      return {
-        ...inner,
-        ...item,
-      }
-    }).filter((item: any) => !item.hidden)
-      :
-      (columns || []).filter((item: any) => !item.hidden);
-    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 }: any = this.props;
-    const { showColumns }: any = this.state;
-    let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
-    let summaryInitial = summary().cont;
-    let summaryDom: any = <Table.Summary fixed>
-      <Table.Summary.Row>
-        {
-          [...summaryRow].map((item: any, index: number) => {
-            return (
-              <Table.Summary.Cell index={rowSelection ? index : index - 1}>
-                <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,
-        };
-        if (arr[i].textOverflow) {
-          arr[i].render = ({ text }: any) => handleTextOverflow(text, size.width);
-        };
-      }
-    };
-    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, 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) => {
-      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}
-            />
-          </span>
-        </div>
-        <SulaTable
-          ref={this.sulaTableRef}
-          style={style}
-          columns={showCol}
-          components={{
-            header: {
-              cell: this.ResizeableTitle,
-            },
-          }}
-          {
-          ...otherTableInfo
-          }
-        />
-      </div >
-    )
-  }
-
-}

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

@@ -1,69 +0,0 @@
-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;
-  let lowerCaseKey = (item.key || item.dataIndex).toLowerCase();
-  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>
-  );
-};