@bit-sun/business-component 2.0.12 → 2.0.13

package/src/components/sulaQueryTable/BsSulaQueryTable.tsx

@@ -1,368 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useLocation } from 'umi';
-import { QueryTable } from 'bssula';
-import { handleTextDouble, handleTextLineFeed, handleTextOverflow, handleTooltip, handleTooltipHours, tableColumnsImage, userColumns } from './utils';
-
-import {
-  CompressOutlined,
-  ExpandOutlined,
-  SettingOutlined,
-} from '@ant-design/icons';
-import { Dropdown, Menu, Tooltip } from 'antd';
-import SortableTable from './draggableTable';
-import { Resizable } from 'react-resizable';
-
-const ResizeableTitle = props => {
-  const { onResize, width, ...restProps } = props;
-
-  if (!width) {
-    return <th {...restProps} />;
-  }
-  return (
-    <Resizable
-      width={width}
-      height={0}
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
-    >
-      <th {...restProps} />
-    </Resizable>
-  );
-};
-
-const BaseQueryTable = (props: any) => {
-  const refs = useRef(null);
-  const [pagePath, setPagePath] = useState('');
-  const { pathname } = useLocation();
-  const [id]: any = useState(Number(Math.random().toString().substr(2, 0) + Date.now()).toString(36))
-  const [isFullScreen, setIsFnllScreen]: any = useState(false)
-  // @ts-nocheck
-  const [value, setValue]: any = useState(props);
-  const [showColumn, setShowColumns] = useState([]);
-
-  // 获取 table columns中所有的 key  防止有的地方是 dataindex
-  const [checkedList, setCheckedList] = useState(
-    value.columns.map((d: any) => d.key || d.dataIndex),
-  );
-  const { isPage = true, pagination } = props;
-
-  const [height, setHeight]: any = useState('100vh')
-
-  // 获取table高度
-  const getTableHeight = () => {
-    const isFullScreen: any =
-      document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen;
-    const h =
-      document.body.clientHeight -
-      (document.querySelector(".ant-form ant-form-horizontal")?.clientHeight || 0) -
-      (isFullScreen ? 0 : (document.querySelector(".ant-pro-page-container-warp")?.clientHeight || 0))
-      - 321 + (isFullScreen ? 150 : 0) +
-      "px";
-    setHeight(h)
-    setValue({ ...value })
-
-  };
-  // 处理按钮权限
-  useEffect(() => {
-    document.querySelector('.ant-table-wrapper').parentNode.parentNode.style = 'margin:0;background-color:#f3f3f3;padding:10px'
-    getTableHeight()
-    window.onresize = () => {
-      getTableHeight();
-    };
-
-    // @ts-ignore
-    setPagePath(pathname); // 做处理，记录当前页面渲染的初始pathname，用于进行判断当前列表页面数据是否需要重新渲染
-    if (props.notPermissionButtonNow) return;
-
-    const resourceCodeArray = {};
-    if (props.actionsRender && props.actionsRender.length) {
-      props.actionsRender.forEach((item: any) => {
-        if (item.code) {
-          if (resourceCodeArray[item.code]) {
-            resourceCodeArray[item.code + 1] = item;
-          } else {
-            resourceCodeArray[item.code] = item;
-          }
-        }
-      });
-    }
-
-    if (props.columns && props.columns.length) {
-      props.columns.forEach((item: any) => {
-        if (item.isPermissionColumn && item.render && item.render.length) {
-          item.render.forEach((inneritem: any) => {
-            if (inneritem.code) {
-              if (resourceCodeArray[inneritem.code]) {
-                resourceCodeArray[inneritem.code + 1] = inneritem;
-              } else {
-                resourceCodeArray[inneritem.code] = inneritem;
-              }
-            }
-          });
-        }
-      });
-    }
-    setCommonRenderFn(props.columns);
-    const authButton = localStorage.getItem('buttonAuth_FMS')
-      ? JSON.parse(localStorage.getItem('buttonAuth_FMS') as string)
-      : [];
-    Object.keys(resourceCodeArray).forEach((item: any) => {
-      if (!authButton.filter((itemInner: any) => item === itemInner.code).length) {
-        resourceCodeArray[item].visible = false;
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    const { columns } = value;
-    let showColumns = columns.filter(column => checkedList.indexOf(column.key || column.dataIndex) > -1);
-    showColumns.forEach((item, index) => {
-      item.width = item.width || 200;
-      item.onHeaderCell = (column) => ({
-        width: column.width,
-        onResize: handleResize(index),
-      })
-    })
-    setShowColumns([...showColumns])
-  }, [value, checkedList])
-
-  const setCommonRenderFn = (columns: any[]) => {
-    columns.forEach(column => {
-      if (column.showDetailUserInfo) {
-        column.render = ({ text }: any) => userColumns({ name: text })
-      }
-    })
-  }
-
-  // 处理 table 基本参数
-  const setTableProps = () => {
-    let tableProps = value.tableProps || {};
-    tableProps = {
-      ...tableProps,
-      size: value.size || 'middle',
-      defaultPageSize: 20,
-      pageSize: 20,
-      initialPaging: {
-        pagination: pagination
-          ? false
-          : {
-            defaultPageSize: 20,
-            pageSize: 20,
-            showTotal: (total: any) => `共 ${total} 条`,
-            showQuickJumper: true,
-            hideOnSinglePage: value.hideOnSinglePage || false,
-          },
-      },
-      initialSelectedRowKeys: value.initialSelectedRowKeys || [],
-      expandable: value.expandable,
-      scroll: { x: props.overScrollX || 'max-content', y: height },
-      bordered: value.bordered || false,
-      sticky: true,
-      rowClassName: (record: object | null | undefined, index: number) => index % 2 === 0 ? 'table_base' : 'table_odd',
-      ...value.tableProps,
-      components:{
-        header: {
-          cell: ResizeableTitle,
-        },
-      }
-    };
-
-
-    // @ts-ignore
-    if (tableProps?.initialPaging?.pagination) {
-      // @ts-ignore
-      tableProps.initialPaging.pagination.showSizeChanger = true;
-    }
-    return tableProps;
-  };
-
-
-  const menu = (
-    <Menu style={{ padding: '15px' }}>
-      <SortableTable 
-        setCheckedList={setCheckedList}
-        value={value}
-        setValue={setValue}
-        checkedList={checkedList} 
-        datasource={value?.columns || []} 
-      />
-    </Menu>
-  )
-
-  const ShowFullScreen = () => {
-    const isFullScreen: any =
-      document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen;
-    let contentEle: any = document.querySelector(`#${id}`);
-
-    if (contentEle && !isFullScreen) {
-      let fullScreenEle =
-        contentEle.requestFullscreen ||
-        contentEle.mozRequestFullScreen ||
-        contentEle.webkitRequestFullScreen ||
-        contentEle.msRequestFullscreen;
-      if (fullScreenEle) {
-        fullScreenEle.call(contentEle);
-        setIsFnllScreen(true)
-        getTableHeight(true)
-        return;
-      }
-    }
-    if (document && isFullScreen) {
-      let exitFullScreen =
-        document.exitFullscreen ||
-        document.mozCancelFullScreen ||
-        document.webkitCancelFullScreen ||
-        document.msExitFullscreen;
-      if (exitFullScreen) {
-        exitFullScreen.call(document);
-        setIsFnllScreen(false)
-        getTableHeight()
-        return;
-      }
-    }
-  };
-
-  const handleTimeValue = () => {
-    let actionsRender = value.actionsRender || [];
-    actionsRender = [
-      ...actionsRender,
-      {
-        type: 'text',
-        props: {
-          children: (
-            <>
-              <Dropdown overlay={menu} trigger={['click']}>
-                <Tooltip title="列设置">
-                  <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
-                    <SettingOutlined />
-                  </a>
-                </Tooltip>
-              </Dropdown>
-            </>
-          ),
-        },
-      },
-      {
-        type: 'text',
-        props: {
-          children: (
-            <a>
-              {
-                isFullScreen ? <Tooltip title='取消全屏'>
-                  <CompressOutlined onClick={() => {
-                    ShowFullScreen()
-                  }} />
-                </Tooltip>
-                  :
-                  <Tooltip title='全屏'>
-                    <ExpandOutlined onClick={() => {
-                      ShowFullScreen()
-                    }} />
-                  </Tooltip>
-              }</a>
-          ),
-        },
-      },
-    ];
-    // 防止 多选框 过宽
-    if (value && value?.columns?.length > 0) {
-      if (value.rowSelection) {
-        value.rowSelection.columnWidth = 50;
-      }
-      value.columns.forEach((d: any) => {
-        // 处理要显示 时分秒的时间
-        if (d.timeRenderHour) {
-          d.render = ({ text }: any) => handleTooltipHours(text, d.timeRenderHour);
-        }
-        // 处理不显示 时分秒的时间
-        if (d.timeRender) {
-          d.render = ({ text }: any) => handleTooltip(text, d.timeRender);
-        }
-        // 处理文字太长
-        if (d.textOverflow) {
-          d.render = ({ text }: any) => handleTextOverflow(text);
-        }
-        if (d.images) {
-          d.render = ({ text }: any) => tableColumnsImage(text);
-        }
-        if (d.double) {
-          d.render = ({ record }: any) => handleTextDouble(record[d.textOne], record[d.textTwo]);
-        }
-        if (d.lineFeed) {
-          d.render = ({ text }: any) => handleTextLineFeed(text);
-        }
-
-        // 处理序号
-        if (d.indexNumber) {
-          d.render = ({ index }: any) => index + 1;
-        }
-        // 没有值默认显示 - - 
-        if (!d.render) {
-          d.render = ({ text }: any) => text || '- -';
-        }
-      });
-    }
-    return {
-      ...value,
-      actionsRender,
-    };
-  };
-
-  // const setShowColumns = () => {
-  //   const { columns } = value;
-  //   return columns.filter(column => checkedList.indexOf(column.key || column.dataIndex) > -1);
-  // }
-
-  const handleResize = index => (e, { size }) => {
-    setShowColumns((columns: any) => {
-      let newColumns = [...columns];
-      newColumns[index] = {
-        ...newColumns[index],
-        width: size.width,
-      };
-      return [...newColumns]
-    });
-  };
-
-  const config = {
-    visibleFieldsCount: 3,
-    itemLayout: {
-      span: 8, // 栅格占位格数
-      labelCol: {
-        // label标签布局；可设置 span、offset
-        span: 8,
-      },
-      wrapperCol: {
-        // value布局, 方式同labelCol（horizontal状态下配置）
-        span: 16,
-      },
-    },
-    rowSelection: false, // 默认无多选
-    ...handleTimeValue(),
-    tableProps: setTableProps(),
-    columns: showColumn,
-    ref: props.forwardedRef || refs,
-  };
-
-  useEffect(() => {
-    if (!localStorage.getItem('isTabChange')) {
-      if (pagePath === pathname) {
-        // @ts-ignore
-        config.ref?.current?.tableRef?.current?.refreshTable();
-      }
-    } else {
-      setTimeout(() => {
-        // 处理页面刷新两面
-        localStorage.removeItem('isTabChange');
-      }, 0);
-    }
-  }, [pathname]);
-
-  return (
-    <div id={id} style={{ background: '#fff', overflowY: "auto" }}>
-      <QueryTable {...config} />
-    </div>
-  );
-};
-
-export default BaseQueryTable;

package/src/components/sulaQueryTable/draggableTable.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { Table, message } from 'antd';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
-import { MenuOutlined } from '@ant-design/icons';
-import { arrayMoveImmutable } from 'array-move';
-
-const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
-
-const columns = [
-    {
-        title: '列名称',
-        dataIndex: 'title',
-        className: 'drag-visible',
-    },
-    {
-        title: 'Sort',
-        dataIndex: 'sort',
-        width: 30,
-        className: 'drag-visible',
-        render: () => <DragHandle />,
-    },
-];
-
-const SortableItem = SortableElement((props:any) => <tr {...props} />);
-const SortableBody = SortableContainer((props:any) => <tbody {...props} />);
-
-class SortableTable extends React.Component {
-  state = {
-    dataSource: [],
-    columns: [],
-    selectedRowKeys: [],
-  };
-
-  componentDidMount(){
-      const { datasource, checkedList }: any = this.props;
-    this.setState({ 
-        dataSource: datasource.map(item => ({
-            ...item,
-            key: item.key || item.dataIndex
-        })),
-        selectedRowKeys: [...checkedList]
-    });
-  }
-
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    const { dataSource } = this.state;
-    const { value, setValue } = this.props;
-    if (dataSource[oldIndex]['fixed']) {
-        message.warning('固定列不可移动');
-        return;
-    }
-    if (oldIndex !== newIndex) {
-      const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
-        el => !!el,
-      );
-      this.setState({ dataSource: newData });
-      setValue({
-          ...value,
-          columns: [...newData]
-      })
-    }
-  };
-
-  DraggableContainer = props => (
-    <SortableBody
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={this.onSortEnd}
-      {...props}
-    />
-  );
-
-  DraggableBodyRow = ({ className, style, ...restProps }) => {
-    const { dataSource } = this.state;
-    // function findIndex base on Table rowKey props and should always be a right array index
-    const index = dataSource.findIndex(x => x.key === restProps['data-row-key']);
-    return <SortableItem index={index} {...restProps} />;
-  };
-
-  onSelectChange = selectedRowKeys => {
-      const { setCheckedList } = this.props;
-    this.setState({ selectedRowKeys });
-    setCheckedList(selectedRowKeys);
-  };
-
-  render() {
-    const { dataSource, selectedRowKeys } = this.state;
-    const rowSelection = {
-        selectedRowKeys,
-        onChange: this.onSelectChange,
-    };
-    return (
-      <Table
-        pagination={false}
-        dataSource={dataSource}
-        columns={columns}
-        rowKey='key'
-        rowSelection={rowSelection}
-        components={{
-          body: {
-            wrapper: this.DraggableContainer,
-            row: this.DraggableBodyRow,
-          },
-        }}
-      />
-    );
-  }
-}
-
-export default SortableTable;