@bit-sun/business-component 3.1.5 → 3.1.7

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

@@ -1,772 +1,772 @@
-// @ts-nocheck
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { useLocation } from 'umi';
-import { QueryTable } from 'bssula';
-import {
-  userColumns,
-  getItemDefaultWidth,
-  authFn,
-  queryParams,
-  renderToString,
-} from './utils';
-import { Menu, Tooltip, Dropdown, Table, Typography } from 'antd';
-import SortableTable from './setting';
-import SearchItemTable from './SearchItemSetting';
-import { Resizable } from 'react-resizable';
-import quanping from '../../../assets/icon-quanping.svg';
-import scanning from '../../../assets/scanning.svg';
-import shezhi from '../../../assets/icon-shezhi.svg';
-import { debounce } from 'lodash';
-import ExportIcon from '@/components/Functional/ExportFunctions/ExportIcon';
-import ENUM from '@/utils/enumConfig';
-import { handleBssulaColumnsSpecialParams, uuid } from '@/utils/utils';
-import './bssulaquerytable.less';
-import { getMenuAuthDataKey } from '@/utils/LocalstorageUtils';
-import { shouldUseAuth } from '@/utils';
-
-interface Column {
-  key?: string | string[];
-  dataIndex?: string | string[];
-  notRegularCheckList?: boolean;
-  width?: number | string;
-  onHeaderCell?: (column: Column) => any; // 仅作示例，具体类型根据实际情况定义
-}
-
-interface Field {
-  name: string;
-  label: string;
-  field: any;
-}
-
-const MemoQueryTable = React.memo(QueryTable);
-const { Text } = Typography;
-
-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>
-  );
-};
-
-export default (props: any) => {
-  const bsTableCode = props?.tableCode || window.location.hash; //设置列字段的唯一标识
-
-   // 获取 table columns中所有的 key  防止有的地方是 dataindex
-   const checkedList = useMemo(
-    () =>
-      props.columns
-        .filter((col: any) => !col.hidden)
-        .map((d: any) =>
-          Array.isArray(d.key || d.dataIndex)
-            ? JSON.stringify(d.key || d.dataIndex)
-            : d.key || d.dataIndex,
-        ),
-    [props.columns],
-  );
-  
-  const getConfigFromlocalstorage = (type: string, tableCode:string = bsTableCode) => {
-    let config = localStorage.getItem(type) || '[]';
-    let configArray = JSON.parse(config);
-    let configSetting = configArray.filter(
-      (item) => item.code === tableCode,
-    );
-
-    if (configSetting.length && configSetting[0].detail) {
-      return JSON.parse(configSetting[0].detail);
-    }
-    return [];
-  };
-
-  /**
- * 根据保存的配置和原始配置，获取设置的字段或列。
- * @param savedConfig 保存的配置数组，可能包含字段或列的配置。
- * @param originConfig 原始配置数组，包含完整的字段或列信息。
- * @param type 字段或列的类型，用于确定配置的属性。
- * @returns 返回根据保存的配置处理后的字段或列数组，如果未保存任何配置，则返回原始配置。
- */
-const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
-  /**
-   * 判断值是否为字符串数组。
-   * @param value 待判断的值。
-   * @returns 如果值是字符串数组，则返回true，否则返回false。
-   */
-  const isStringArray = (value: any): value is string[] => {
-    return Array.isArray(value) && value.every(v => typeof v === 'string');
-  }
-
-  /**
-   * 根据配置项和类型，获取配置项的键。
-   * @param config 配置项，可以是字段或列。
-   * @param type 配置项的类型。
-   * @returns 返回配置项的键，如果无法获取，则返回空字符串。
-   */
-  const getItemKey = (config: Column | Field, type: string): string => {
-    try {
-      if (type === 'columns') {
-        return isStringArray(config.key) ? JSON.stringify(config.key) : isStringArray(config.dataIndex) ? JSON.stringify(config.dataIndex) : config.key || config.dataIndex || '';
-      }
-      return isStringArray(config.name) ? JSON.stringify(config.name) : config.name || '';
-    } catch(e) {}
-    return '';
-  }
-
-  const newConfig = [];
-
-  if (savedConfig.length) {
-    const hash = originConfig.reduce((prev, inneritem) => {
-      prev[getItemKey(inneritem, type)] = inneritem;
-      return prev;
-    }, {} as { [key: string]: Column | Field });
-
-    savedConfig.forEach((config, index) => {
-      let inner = hash[getItemKey(config, type)];
-      inner && newConfig.push({ ...inner, ...config });
-    })
-  }
-
-  if (newConfig.length) return newConfig;
-
-  if (type === 'columns') {
-    return originConfig.filter(column => {
-      const columnKey = getItemKey(column, type);
-      return column.notRegularCheckList || checkedList.indexOf(columnKey) > -1;
-    });
-  }
-
-  return [...originConfig];
-}
-  const refs = useRef(null);
-  const [pagePath, setPagePath] = useState('');
-
-  const { pathname, state = {} } = useLocation();
-  const [isFullScreen, setIsFnllScreen]: any = useState(false);
-  // @ts-nocheck
-  const value = props;
-  const { fields = [] } = props;
-  const [showColumn, setShowColumns] = useState([]); // 列字段
-  const originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
-  const [showSearchFields, setShowSearchFields] = useState(originSearchFields); //搜索项字段
-  const [showExportColumn, setShowExportColumns] = useState([]); // 导出列字段
-
-  const [height, setHeight]: any = useState('100vh');
-  const sortTableRef = useRef(null);
-  const searchTableRef = useRef(null);
-  const exportTableRef = useRef<any>(null);
-
-  const bsTableCodeExport = `${bsTableCode}___Export`; //设置导出列字段的唯一标识
-
-  // 获取table高度
-  const getTableHeight = () => {
-    setTimeout(() => {
-      const cancelHeight = window.top == window ? 303 : 223;
-      const isFullScreen: any =
-        window.top.document.fullScreen ||
-        window.top.document.webkitIsFullScreen ||
-        window.top.document.mozFullScreen;
-
-      // wujie子应用iframe首次加载获取不到client以及dom元素高度兼容处理
-      let realIframeClientHeight = document.body.clientHeight ? document.body.clientHeight : window.top?.document.body.clientHeight - 76;
-      let summaryHeight = document.querySelector(`.ant-tabs-tabpane-active .table-bssula-summary`) ?
-        (document.querySelector(`.ant-tabs-tabpane-active .table-bssula-summary`)?.clientHeight || 22) : 0;
-      let listTabHeight = document.querySelector(`.ant-tabs-tabpane-active .list_top_tab .ant-tabs-nav`) ?
-        (document.querySelector(`.ant-tabs-tabpane-active .list_top_tab .ant-tabs-nav`)?.clientHeight || 48) : 0;
-
-
-      const h =
-        realIframeClientHeight -
-        summaryHeight -
-        listTabHeight -
-        (document.querySelector(
-          `.ant-tabs-tabpane-active .ant-form ant-form-horizontal`,
-        )?.clientHeight || 0) -
-        (isFullScreen
-          ? 0
-          : document.querySelector(
-              `.ant-tabs-tabpane-active .ant-pro-page-container-warp`,
-            )?.clientHeight || 0) -
-        cancelHeight +
-        'px';
-      setHeight(h);
-    }, 0);
-  };
-
-  //监测是否按下esc键
-  function checkFull() {
-    let globalDocument = window?.parent?.document || document;
-    var isFull =
-      globalDocument.fullscreenElement ||
-      globalDocument.mozFullScreenElement ||
-      globalDocument.webkitFullscreenElement;
-    if (isFull == undefined) isFull = false;
-    return isFull;
-  }
-
-
-  const setInitialTableInfo = () => {
-    const resourceCodeArray = {};
-    const uuIdList = [];
-    if (props.actionsRender && props.actionsRender.length) {
-      props.actionsRender.forEach((item: any) => {
-        if (item.code) {
-          if (resourceCodeArray[item.code]) {
-            const uuId = uuid();
-            uuIdList.push(uuId);
-            resourceCodeArray[item.code + uuId] = item;
-          } else {
-            resourceCodeArray[item.code] = item;
-          }
-        }
-      });
-    }
-    if (props.columns && props.columns.length) {
-      props.columns.forEach((d: any) => {
-        if (d.isPermissionColumn && d.render && d.render.length) {
-          d.render.forEach((inneritem: any) => {
-            if (inneritem.code) {
-              if (resourceCodeArray[inneritem.code]) {
-                const uuId = uuid();
-                uuIdList.push(uuId);
-                resourceCodeArray[inneritem.code + uuId] = inneritem;
-              } else {
-                resourceCodeArray[inneritem.code] = inneritem;
-              }
-            }
-          });
-        }
-        handleBssulaColumnsSpecialParams(d);
-      });
-      setCommonRenderFn(props.columns);
-      const authButton = localStorage.getItem(getMenuAuthDataKey())
-        ? JSON.parse(localStorage.getItem(getMenuAuthDataKey()) as string)
-        : [];
-      Object.keys(resourceCodeArray).forEach((item: any) => {
-        let Item = item;
-        if (uuIdList?.some(s => item.indexOf(s) >-1)) {
-          const uuId = uuIdList.filter(s => item.indexOf(s) >-1)[0];
-          Item = item.replace(uuId, '');
-        }
-        if (shouldUseAuth() && !authButton.filter((itemInner: any) => Item === itemInner).length) {
-          resourceCodeArray[item].visible = false;
-        }
-      });
-    }
-    
-    const { columns } = props;
-    let columnConfig = getConfigFromlocalstorage(ENUM.BROWSER_CACHE.COLUMN_CONDITION);
-
-
-    const parseWidth = (widthStr: string): number => {
-      const parsedWidth = parseInt(widthStr.replace('px', ''));
-      return isNaN(parsedWidth) ? 0 : parsedWidth;
-    }
-
-    let showColumns = getSettingFieldOrColumn(columnConfig, columns, 'columns');
-    
-    showColumns.forEach((item, index) => {
-      item.width = item.width || getItemDefaultWidth(item);
-      handleBssulaColumnsSpecialParams(item);
-      item.onHeaderCell = (column) => ({
-        ...item,
-        width: typeof column.width === 'number'
-          ? column.width
-          : parseWidth(column.width),
-        onResize: handleResize(index),
-      });
-    });
-    setShowColumns([...showColumns]);
-
-    let exportColumnConfig = getConfigFromlocalstorage(
-      ENUM.BROWSER_CACHE.COLUMN_CONDITION,
-      bsTableCodeExport,
-    );
-    let showExportColumns = getSettingFieldOrColumn(exportColumnConfig, columns, 'columns');
-
-    showExportColumns.forEach((item, index) => {
-      item.width = item.width || getItemDefaultWidth(item);
-      handleBssulaColumnsSpecialParams(item);
-      item.onHeaderCell = (column) => ({
-        ...item,
-        width:
-          typeof column.width === 'number'
-            ? column.width
-            : parseInt(column.width.replace('px', '')),
-        onResize: handleResize(index),
-      });
-    });
-    setShowExportColumns([...showExportColumns]);
-  };
-
-  const setInitialSearchFieldsInfo = () => {
-    //获取搜索字段的缓存配置
-    const { fields = [] } = props;
-    let searchFieldsConfig = getConfigFromlocalstorage(
-      ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION,
-    );
-    const showSearchFields = getSettingFieldOrColumn(searchFieldsConfig, fields, 'searchFields');
-    setShowSearchFields([...showSearchFields]);
-  };
-
-  //组件初始挂载
-  useEffect(() => {
-    getTableHeight();
-    setInitialTableInfo();
-    setInitialSearchFieldsInfo();
-    window.addEventListener('resize', (e) => {
-      watchWinResize();
-    });
-
-    setPagePath(pathname); // 做处理，记录当前页面渲染的初始pathname，用于进行判断当前列表页面数据是否需要重新渲染
-  }, []);
-
-  useEffect(() => {
-    if (props?.columns && value?.columns) {
-      let newKeys = props.columns.map((d: any) =>
-        Array.isArray(d.key || d.dataIndex)
-          ? JSON.stringify(d.key || d.dataIndex)
-          : d.key || d.dataIndex,
-      );
-      let oldKeys = value.columns.map((d: any) =>
-        Array.isArray(d.key || d.dataIndex)
-          ? JSON.stringify(d.key || d.dataIndex)
-          : d.key || d.dataIndex,
-      );
-      JSON.stringify(newKeys) !== JSON.stringify(oldKeys) &&
-        setInitialTableInfo();
-    }
-  }, [props?.columns]);
-
-  useEffect(() => {
-    if (props?.fields && value?.fields) {
-      let newKeys = props.fields.map((d: any) =>
-        Array.isArray(d.name) ? JSON.stringify(d.name) : d.name,
-      );
-      let oldKeys = value.fields.map((d: any) =>
-        Array.isArray(d.name) ? JSON.stringify(d.name) : d.name,
-      );
-      JSON.stringify(newKeys) !== JSON.stringify(oldKeys) &&
-        setInitialSearchFieldsInfo();
-    }
-  }, [props?.fields]);
-
-  useEffect(() => {
-    setInitialTableInfo();
-  }, [props?.refreshColumns]);
-
-  const watchWinResize = debounce(() => {
-    getTableHeight();
-    if (!checkFull()) {
-      // addTabsNavStyle(true);
-      // 全屏下按键esc后要执行的动作
-      // isFullScreen 为true 此时为全屏状态  false 为非全屏状态
-      if (!isFullScreen) {
-        // 按下esc键退出全屏
-        setIsFnllScreen(false);
-      } else {
-        setIsFnllScreen(false);
-      }
-    }
-  }, 10);
-
-  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: props?.pagination
-          ? false
-          : {
-              defaultPageSize: 20,
-              pageSize: 20,
-              showTotal: (total: any) => `共 ${total} 条`,
-              showQuickJumper: true,
-              hideOnSinglePage: value.hideOnSinglePage || false,
-
-              ...tableProps?.initialPaging?.pagination
-            },
-      },
-      initialSelectedRowKeys: value.initialSelectedRowKeys || [],
-      expandable: props.expandable,
-      scroll: { x: props.overScrollX || 'max-content', y: props?.overScrollY || height },
-      bordered: value.bordered || false,
-      sticky: true,
-      rowClassName: (record: object | null | undefined, index: number) =>
-        index % 2 === 0 ? 'table_base' : 'table_odd',
-      components: {
-        header: {
-          cell: ResizeableTitle,
-        },
-      },
-    };
-
-    // @ts-ignore
-    if (tableProps?.initialPaging?.pagination) {
-      // @ts-ignore
-      tableProps.initialPaging.pagination.showSizeChanger = true;
-    }
-    return tableProps;
-  };
-
-  const ShowFullScreen = () => {
-    const isFullScreen: any =
-      window.top.document.fullScreen ||
-      window.top.document.webkitIsFullScreen ||
-      window.top.document.mozFullScreen;
-    let contentEle: any = window.top.document.querySelector(`body`);
-    // addTabsNavStyle(isFullScreen);
-    if (contentEle && !isFullScreen) {
-      let fullScreenEle =
-        contentEle.requestFullscreen ||
-        contentEle.mozRequestFullScreen ||
-        contentEle.webkitRequestFullScreen ||
-        contentEle.msRequestFullscreen;
-      if (fullScreenEle) {
-        fullScreenEle.call(contentEle);
-        setIsFnllScreen(true);
-        // getTableHeight(true);
-        return;
-      }
-    }
-    if (window.top.document && isFullScreen) {
-      let exitFullScreen =
-        window.top.document.exitFullscreen ||
-        window.top.document.mozCancelFullScreen ||
-        window.top.document.webkitCancelFullScreen ||
-        window.top.document.msExitFullscreen;
-      if (exitFullScreen) {
-        exitFullScreen.call(window.top.document);
-        setIsFnllScreen(false);
-        // getTableHeight();
-        return;
-      }
-    }
-  };
-
-  const handleTimeValue = () => {
-
-
-    let actionsRender = (value.actionsRender ?? []).map((x) => ({
-      ...x,
-      position: x.position ?? 'left',
-    })).filter((x) => authFn(x?.code));
-
-    if (value?.exportConfig && authFn(value?.exportConfig?.code)) {
-      actionsRender = actionsRender.concat([
-        {
-          type: 'text',
-          props: {
-            children: (
-              <ExportIcon
-                request={{
-                  url:
-                    value?.exportConfig?.url ||
-                    `/oms-ops/excel/exportAsync/${value?.exportConfig?.type}`,
-                  params: value?.exportConfig?.params,
-                }}
-                tableRef={props.forwardedRef || refs}
-                allowSelect={value?.exportConfig?.allowSelect ?? true}
-                columnsRowKey={value?.rowKey}
-              />
-            ),
-          },
-        },
-      ]);
-    }
-
-    actionsRender = actionsRender.concat([
-      {
-        type: 'text',
-        props: {
-          children: (
-            <a>
-              {isFullScreen ? (
-                <Tooltip title="取消全屏">
-                  <img
-                    onClick={() => {
-                      ShowFullScreen();
-                    }}
-                    width={32}
-                    src={scanning}
-                  />
-                </Tooltip>
-              ) : (
-                <Tooltip title="全屏">
-                  <img
-                    onClick={() => {
-                      ShowFullScreen();
-                    }}
-                    width={32}
-                    src={quanping}
-                  />
-                </Tooltip>
-              )}
-            </a>
-          ),
-        },
-      },
-      {
-        type: 'text',
-        props: {
-          children: (
-            <span className="ant-dropdown-link">
-              <Dropdown
-                overlay={
-                  <Menu>
-                    <Menu.Item>
-                      <div
-                        onClick={sortTableRef?.current?.showModal}
-                        style={{ fontSize: 14, textAlign: 'center' }}
-                      >
-                        列设置
-                      </div>
-                    </Menu.Item>
-                    {!value?.searchConfig?.isHidden && (
-                     <Menu.Item>
-                        <SearchItemTable
-                          ref={searchTableRef}
-                          setShowSearchFields={setShowSearchFields}
-                          showSearchFields={showSearchFields}
-                          datasource={value?.fields || []}
-                          bsTableCode={bsTableCode}
-                        />
-                    </Menu.Item>
-                    )}
-                    {value?.exportConfig?.settingColumns && (
-                      <Menu.Item>
-                        <div
-                          onClick={exportTableRef?.current?.showModal}
-                          style={{ fontSize: 14, textAlign: 'center' }}
-                        >
-                          导出字段设置
-                        </div>
-                      </Menu.Item>
-                    )}
-                  </Menu>
-                }
-                placement="bottomRight"
-              >
-                <div className="ant-dropdown-link">
-                  <img width={32} src={shezhi} />
-                </div>
-              </Dropdown>
-            </span>
-          ),
-        },
-      },
-    ]);
-    if (value.rowSelection) {
-      value.rowSelection.columnWidth = 50;
-    }
-    return {
-      ...value,
-      actionsRender,
-    };
-  };
-
-  const handleResize =
-    (index) =>
-    (e, { size }) => {
-      setShowColumns((columns: any) => {
-        let newColumns = [...columns];
-        newColumns[index] = {
-          ...newColumns[index],
-          width: size.width,
-        };
-        newColumns.forEach((d: any) => {
-          handleBssulaColumnsSpecialParams(d);
-        });
-        return [...newColumns];
-      });
-    };
-
-  const setVisibleColumn = (columnTitle: string) => {
-    sortTableRef?.current?.handleTableHeadHidden?.(columnTitle);
-  };
-  const toMapByKey = (
-    arr: any[],
-    key: string,
-    fn?: (item: any, index: number) => any,
-  ) => {
-    const map = {};
-    arr.forEach((i: any) => (map[renderToString(i[key])] = i));
-    return map;
-  };
-  const getColumns = () => {
-    // 优化一下 减少复杂度
-    const titleMap = toMapByKey(value.columns, 'title');
-    // 加上排序
-    const cols = showColumn.map((i) => ({
-      ...i,
-      isPermissionColumn: titleMap[renderToString(i.title)]?.isPermissionColumn,
-      render: titleMap[renderToString(i.title)]?.render,
-    }));
-    cols.forEach((i) => handleBssulaColumnsSpecialParams(i));
-    return cols;
-  };
-
-  const config = {
-    visibleFieldsCount: 3,
-    tableWrapperStyle: {
-      padding: '10px',
-      // background: '#f3f3f3',
-    },
-    setVisibleColumn: setVisibleColumn,
-    itemLayout: {
-      span: 8, // 栅格占位格数
-      labelCol: {
-        // label标签布局；可设置 span、offset
-        span: 8,
-      },
-      wrapperCol: {
-        // value布局, 方式同labelCol（horizontal状态下配置）
-        span: 16,
-      },
-    },
-    rowSelection: false, // 默认无多选
-    ...handleTimeValue(),
-    tableProps: setTableProps(),
-    columns: getColumns(),
-    fields: [...showSearchFields],
-    ref: props.forwardedRef || refs,
-    isFullScreen,
-  };
-
-  useEffect(() => {
-    if (!localStorage.getItem('isTabChange') || state?.updateCurrentPage) {
-      if (pagePath === pathname) {
-        // @ts-ignore
-        config.ref?.current?.tableRef?.current?.refreshTable();
-      }
-    }
-    setTimeout(() => {
-      // 处理页面刷新两面
-      localStorage.removeItem('isTabChange');
-    }, 0);
-  }, [pathname]);
-
-  const expandedRowKeys = props?.expandable?.expandedRowKeys;
-
-  //todo  summary属性已经被使用，为了兼容之前的，现在使用 summaryList
-  //结构为了实现多行总结栏   定义如下(lableShow: boolean 是否显示列文本)
-  /**
-   * [
-   *  {
-   *  cont:[{key: 'spuCode',value: 100,labelShow: false}]
-   *  }
-   * ]
-   * @returns []
-   */
-  const getTableSummaryInfo = () => {
-    const { summaryList, rowSelection,expandable }: any = props;
-    if (summaryList && Array.isArray(summaryList)) {
-      const summaryRow = (rowSelection) ? [{}, ...showColumn] : [...showColumn];
-      if(expandable){
-        summaryRow.unshift({});
-      }
-      // let summaryInitial = summary().cont;
-      return (
-        <Table.Summary fixed>
-          {Array.isArray(summaryList) &&
-            summaryList.map((summaryItem, summaryIndex) => (
-              <Table.Summary.Row key={summaryIndex}>
-                {summaryRow.map((item: any, index: number) => {
-                  const { cout = [] } = summaryItem;
-                  const target = cout.filter(
-                    (inner: any) =>
-                      inner.key &&
-                      (inner.key === item.dataIndex || inner.key === item.key),
-                  )[0];
-                  if (target) {
-                    const labelText = target.labelShow ? `${item.title}:` :``;
-                    return (
-                      <Table.Summary.Cell
-                        index={index}
-                        key={`Table.Summary.Cell_${item.index}`}
-                      >
-                        <Text type="danger">
-                          {`${labelText} ${target.value ?? ''}`}
-                        </Text>
-                      </Table.Summary.Cell>
-                    );
-                  } else {
-                    return (
-                      <Table.Summary.Cell
-                        index={index}
-                        key={`Table.Summary.Cell_${item.index}`}
-                      >
-                        <Text type="danger">{` `}</Text>
-                      </Table.Summary.Cell>
-                    );
-                  }
-                })}
-              </Table.Summary.Row>
-            ))}
-        </Table.Summary>
-      );
-    } else {
-      return undefined;
-    }
-  };
-
-  const memoConfig = useMemo(
-    () => ({
-      ...config,
-      summary: props.summary,
-      summaryList: props.summaryList ? getTableSummaryInfo : undefined,
-      statusMapping: props.statusMapping,
-    }),
-    [
-      // value,
-      checkedList,
-      showColumn,
-      props.statusMapping,
-      showSearchFields,
-      expandedRowKeys,
-    ],
-  );
-  return (
-    <div id="bs-sula-query-table">
-      <MemoQueryTable {...memoConfig} />
-      <SortableTable
-        ref={sortTableRef}
-        setShowColumns={setShowColumns}
-        showColumn={showColumn}
-        datasource={value?.columns || []}
-        bsTableCode={bsTableCode}
-        onlyModal
-      />
-      {value?.exportConfig?.settingColumns && (
-        <SortableTable
-          ref={exportTableRef}
-          setShowColumns={setShowExportColumns}
-          showColumn={showExportColumn}
-          datasource={value?.columns || []}
-          bsTableCode={bsTableCodeExport}
-          onlyModal
-        />
-      )}
-    </div>
-  );
-};
+// @ts-nocheck
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useLocation } from 'umi';
+import { QueryTable } from 'bssula';
+import {
+  userColumns,
+  getItemDefaultWidth,
+  authFn,
+  queryParams,
+  renderToString,
+} from './utils';
+import { Menu, Tooltip, Dropdown, Table, Typography } from 'antd';
+import SortableTable from './setting';
+import SearchItemTable from './SearchItemSetting';
+import { Resizable } from 'react-resizable';
+import quanping from '../../../assets/icon-quanping.svg';
+import scanning from '../../../assets/scanning.svg';
+import shezhi from '../../../assets/icon-shezhi.svg';
+import { debounce } from 'lodash';
+import ExportIcon from '@/components/Functional/ExportFunctions/ExportIcon';
+import ENUM from '@/utils/enumConfig';
+import { handleBssulaColumnsSpecialParams, uuid } from '@/utils/utils';
+import './bssulaquerytable.less';
+import { getMenuAuthDataKey } from '@/utils/LocalstorageUtils';
+import { shouldUseAuth } from '@/utils';
+
+interface Column {
+  key?: string | string[];
+  dataIndex?: string | string[];
+  notRegularCheckList?: boolean;
+  width?: number | string;
+  onHeaderCell?: (column: Column) => any; // 仅作示例，具体类型根据实际情况定义
+}
+
+interface Field {
+  name: string;
+  label: string;
+  field: any;
+}
+
+const MemoQueryTable = React.memo(QueryTable);
+const { Text } = Typography;
+
+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>
+  );
+};
+
+export default (props: any) => {
+  const bsTableCode = props?.tableCode || window.location.hash; //设置列字段的唯一标识
+
+   // 获取 table columns中所有的 key  防止有的地方是 dataindex
+   const checkedList = useMemo(
+    () =>
+      props.columns
+        .filter((col: any) => !col.hidden)
+        .map((d: any) =>
+          Array.isArray(d.key || d.dataIndex)
+            ? JSON.stringify(d.key || d.dataIndex)
+            : d.key || d.dataIndex,
+        ),
+    [props.columns],
+  );
+  
+  const getConfigFromlocalstorage = (type: string, tableCode:string = bsTableCode) => {
+    let config = localStorage.getItem(type) || '[]';
+    let configArray = JSON.parse(config);
+    let configSetting = configArray.filter(
+      (item) => item.code === tableCode,
+    );
+
+    if (configSetting.length && configSetting[0].detail) {
+      return JSON.parse(configSetting[0].detail);
+    }
+    return [];
+  };
+
+  /**
+ * 根据保存的配置和原始配置，获取设置的字段或列。
+ * @param savedConfig 保存的配置数组，可能包含字段或列的配置。
+ * @param originConfig 原始配置数组，包含完整的字段或列信息。
+ * @param type 字段或列的类型，用于确定配置的属性。
+ * @returns 返回根据保存的配置处理后的字段或列数组，如果未保存任何配置，则返回原始配置。
+ */
+const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
+  /**
+   * 判断值是否为字符串数组。
+   * @param value 待判断的值。
+   * @returns 如果值是字符串数组，则返回true，否则返回false。
+   */
+  const isStringArray = (value: any): value is string[] => {
+    return Array.isArray(value) && value.every(v => typeof v === 'string');
+  }
+
+  /**
+   * 根据配置项和类型，获取配置项的键。
+   * @param config 配置项，可以是字段或列。
+   * @param type 配置项的类型。
+   * @returns 返回配置项的键，如果无法获取，则返回空字符串。
+   */
+  const getItemKey = (config: Column | Field, type: string): string => {
+    try {
+      if (type === 'columns') {
+        return isStringArray(config.key) ? JSON.stringify(config.key) : isStringArray(config.dataIndex) ? JSON.stringify(config.dataIndex) : config.key || config.dataIndex || '';
+      }
+      return isStringArray(config.name) ? JSON.stringify(config.name) : config.name || '';
+    } catch(e) {}
+    return '';
+  }
+
+  const newConfig = [];
+
+  if (savedConfig.length) {
+    const hash = originConfig.reduce((prev, inneritem) => {
+      prev[getItemKey(inneritem, type)] = inneritem;
+      return prev;
+    }, {} as { [key: string]: Column | Field });
+
+    savedConfig.forEach((config, index) => {
+      let inner = hash[getItemKey(config, type)];
+      inner && newConfig.push({ ...inner, ...config });
+    })
+  }
+
+  if (newConfig.length) return newConfig;
+
+  if (type === 'columns') {
+    return originConfig.filter(column => {
+      const columnKey = getItemKey(column, type);
+      return column.notRegularCheckList || checkedList.indexOf(columnKey) > -1;
+    });
+  }
+
+  return [...originConfig];
+}
+  const refs = useRef(null);
+  const [pagePath, setPagePath] = useState('');
+
+  const { pathname, state = {} } = useLocation();
+  const [isFullScreen, setIsFnllScreen]: any = useState(false);
+  // @ts-nocheck
+  const value = props;
+  const { fields = [] } = props;
+  const [showColumn, setShowColumns] = useState([]); // 列字段
+  const originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
+  const [showSearchFields, setShowSearchFields] = useState(originSearchFields); //搜索项字段
+  const [showExportColumn, setShowExportColumns] = useState([]); // 导出列字段
+
+  const [height, setHeight]: any = useState('100vh');
+  const sortTableRef = useRef(null);
+  const searchTableRef = useRef(null);
+  const exportTableRef = useRef<any>(null);
+
+  const bsTableCodeExport = `${bsTableCode}___Export`; //设置导出列字段的唯一标识
+
+  // 获取table高度
+  const getTableHeight = () => {
+    setTimeout(() => {
+      const cancelHeight = window.top == window ? 303 : 223;
+      const isFullScreen: any =
+        window.top.document.fullScreen ||
+        window.top.document.webkitIsFullScreen ||
+        window.top.document.mozFullScreen;
+
+      // wujie子应用iframe首次加载获取不到client以及dom元素高度兼容处理
+      let realIframeClientHeight = document.body.clientHeight ? document.body.clientHeight : window.top?.document.body.clientHeight - 76;
+      let summaryHeight = document.querySelector(`.ant-tabs-tabpane-active .table-bssula-summary`) ?
+        (document.querySelector(`.ant-tabs-tabpane-active .table-bssula-summary`)?.clientHeight || 22) : 0;
+      let listTabHeight = document.querySelector(`.ant-tabs-tabpane-active .list_top_tab .ant-tabs-nav`) ?
+        (document.querySelector(`.ant-tabs-tabpane-active .list_top_tab .ant-tabs-nav`)?.clientHeight || 48) : 0;
+
+
+      const h =
+        realIframeClientHeight -
+        summaryHeight -
+        listTabHeight -
+        (document.querySelector(
+          `.ant-tabs-tabpane-active .ant-form ant-form-horizontal`,
+        )?.clientHeight || 0) -
+        (isFullScreen
+          ? 0
+          : document.querySelector(
+              `.ant-tabs-tabpane-active .ant-pro-page-container-warp`,
+            )?.clientHeight || 0) -
+        cancelHeight +
+        'px';
+      setHeight(h);
+    }, 0);
+  };
+
+  //监测是否按下esc键
+  function checkFull() {
+    let globalDocument = window?.parent?.document || document;
+    var isFull =
+      globalDocument.fullscreenElement ||
+      globalDocument.mozFullScreenElement ||
+      globalDocument.webkitFullscreenElement;
+    if (isFull == undefined) isFull = false;
+    return isFull;
+  }
+
+
+  const setInitialTableInfo = () => {
+    const resourceCodeArray = {};
+    const uuIdList = [];
+    if (props.actionsRender && props.actionsRender.length) {
+      props.actionsRender.forEach((item: any) => {
+        if (item.code) {
+          if (resourceCodeArray[item.code]) {
+            const uuId = uuid();
+            uuIdList.push(uuId);
+            resourceCodeArray[item.code + uuId] = item;
+          } else {
+            resourceCodeArray[item.code] = item;
+          }
+        }
+      });
+    }
+    if (props.columns && props.columns.length) {
+      props.columns.forEach((d: any) => {
+        if (d.isPermissionColumn && d.render && d.render.length) {
+          d.render.forEach((inneritem: any) => {
+            if (inneritem.code) {
+              if (resourceCodeArray[inneritem.code]) {
+                const uuId = uuid();
+                uuIdList.push(uuId);
+                resourceCodeArray[inneritem.code + uuId] = inneritem;
+              } else {
+                resourceCodeArray[inneritem.code] = inneritem;
+              }
+            }
+          });
+        }
+        handleBssulaColumnsSpecialParams(d);
+      });
+      setCommonRenderFn(props.columns);
+      const authButton = localStorage.getItem(getMenuAuthDataKey())
+        ? JSON.parse(localStorage.getItem(getMenuAuthDataKey()) as string)
+        : [];
+      Object.keys(resourceCodeArray).forEach((item: any) => {
+        let Item = item;
+        if (uuIdList?.some(s => item.indexOf(s) >-1)) {
+          const uuId = uuIdList.filter(s => item.indexOf(s) >-1)[0];
+          Item = item.replace(uuId, '');
+        }
+        if (shouldUseAuth() && !authButton.filter((itemInner: any) => Item === itemInner).length) {
+          resourceCodeArray[item].visible = false;
+        }
+      });
+    }
+    
+    const { columns } = props;
+    let columnConfig = getConfigFromlocalstorage(ENUM.BROWSER_CACHE.COLUMN_CONDITION);
+
+
+    const parseWidth = (widthStr: string): number => {
+      const parsedWidth = parseInt(widthStr.replace('px', ''));
+      return isNaN(parsedWidth) ? 0 : parsedWidth;
+    }
+
+    let showColumns = getSettingFieldOrColumn(columnConfig, columns, 'columns');
+    
+    showColumns.forEach((item, index) => {
+      item.width = item.width || getItemDefaultWidth(item);
+      handleBssulaColumnsSpecialParams(item);
+      item.onHeaderCell = (column) => ({
+        ...item,
+        width: typeof column.width === 'number'
+          ? column.width
+          : parseWidth(column.width),
+        onResize: handleResize(index),
+      });
+    });
+    setShowColumns([...showColumns]);
+
+    let exportColumnConfig = getConfigFromlocalstorage(
+      ENUM.BROWSER_CACHE.COLUMN_CONDITION,
+      bsTableCodeExport,
+    );
+    let showExportColumns = getSettingFieldOrColumn(exportColumnConfig, columns, 'columns');
+
+    showExportColumns.forEach((item, index) => {
+      item.width = item.width || getItemDefaultWidth(item);
+      handleBssulaColumnsSpecialParams(item);
+      item.onHeaderCell = (column) => ({
+        ...item,
+        width:
+          typeof column.width === 'number'
+            ? column.width
+            : parseInt(column.width.replace('px', '')),
+        onResize: handleResize(index),
+      });
+    });
+    setShowExportColumns([...showExportColumns]);
+  };
+
+  const setInitialSearchFieldsInfo = () => {
+    //获取搜索字段的缓存配置
+    const { fields = [] } = props;
+    let searchFieldsConfig = getConfigFromlocalstorage(
+      ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION,
+    );
+    const showSearchFields = getSettingFieldOrColumn(searchFieldsConfig, fields, 'searchFields');
+    setShowSearchFields([...showSearchFields]);
+  };
+
+  //组件初始挂载
+  useEffect(() => {
+    getTableHeight();
+    setInitialTableInfo();
+    setInitialSearchFieldsInfo();
+    window.addEventListener('resize', (e) => {
+      watchWinResize();
+    });
+
+    setPagePath(pathname); // 做处理，记录当前页面渲染的初始pathname，用于进行判断当前列表页面数据是否需要重新渲染
+  }, []);
+
+  useEffect(() => {
+    if (props?.columns && value?.columns) {
+      let newKeys = props.columns.map((d: any) =>
+        Array.isArray(d.key || d.dataIndex)
+          ? JSON.stringify(d.key || d.dataIndex)
+          : d.key || d.dataIndex,
+      );
+      let oldKeys = value.columns.map((d: any) =>
+        Array.isArray(d.key || d.dataIndex)
+          ? JSON.stringify(d.key || d.dataIndex)
+          : d.key || d.dataIndex,
+      );
+      JSON.stringify(newKeys) !== JSON.stringify(oldKeys) &&
+        setInitialTableInfo();
+    }
+  }, [props?.columns]);
+
+  useEffect(() => {
+    if (props?.fields && value?.fields) {
+      let newKeys = props.fields.map((d: any) =>
+        Array.isArray(d.name) ? JSON.stringify(d.name) : d.name,
+      );
+      let oldKeys = value.fields.map((d: any) =>
+        Array.isArray(d.name) ? JSON.stringify(d.name) : d.name,
+      );
+      JSON.stringify(newKeys) !== JSON.stringify(oldKeys) &&
+        setInitialSearchFieldsInfo();
+    }
+  }, [props?.fields]);
+
+  useEffect(() => {
+    setInitialTableInfo();
+  }, [props?.refreshColumns]);
+
+  const watchWinResize = debounce(() => {
+    getTableHeight();
+    if (!checkFull()) {
+      // addTabsNavStyle(true);
+      // 全屏下按键esc后要执行的动作
+      // isFullScreen 为true 此时为全屏状态  false 为非全屏状态
+      if (!isFullScreen) {
+        // 按下esc键退出全屏
+        setIsFnllScreen(false);
+      } else {
+        setIsFnllScreen(false);
+      }
+    }
+  }, 10);
+
+  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: props?.pagination
+          ? false
+          : {
+              defaultPageSize: 20,
+              pageSize: 20,
+              showTotal: (total: any) => `共 ${total} 条`,
+              showQuickJumper: true,
+              hideOnSinglePage: value.hideOnSinglePage || false,
+
+              ...tableProps?.initialPaging?.pagination
+            },
+      },
+      initialSelectedRowKeys: value.initialSelectedRowKeys || [],
+      expandable: props.expandable,
+      scroll: { x: props.overScrollX || 'max-content', y: props?.overScrollY || height },
+      bordered: value.bordered || false,
+      sticky: true,
+      rowClassName: (record: object | null | undefined, index: number) =>
+        index % 2 === 0 ? 'table_base' : 'table_odd',
+      components: {
+        header: {
+          cell: ResizeableTitle,
+        },
+      },
+    };
+
+    // @ts-ignore
+    if (tableProps?.initialPaging?.pagination) {
+      // @ts-ignore
+      tableProps.initialPaging.pagination.showSizeChanger = true;
+    }
+    return tableProps;
+  };
+
+  const ShowFullScreen = () => {
+    const isFullScreen: any =
+      window.top.document.fullScreen ||
+      window.top.document.webkitIsFullScreen ||
+      window.top.document.mozFullScreen;
+    let contentEle: any = window.top.document.querySelector(`body`);
+    // addTabsNavStyle(isFullScreen);
+    if (contentEle && !isFullScreen) {
+      let fullScreenEle =
+        contentEle.requestFullscreen ||
+        contentEle.mozRequestFullScreen ||
+        contentEle.webkitRequestFullScreen ||
+        contentEle.msRequestFullscreen;
+      if (fullScreenEle) {
+        fullScreenEle.call(contentEle);
+        setIsFnllScreen(true);
+        // getTableHeight(true);
+        return;
+      }
+    }
+    if (window.top.document && isFullScreen) {
+      let exitFullScreen =
+        window.top.document.exitFullscreen ||
+        window.top.document.mozCancelFullScreen ||
+        window.top.document.webkitCancelFullScreen ||
+        window.top.document.msExitFullscreen;
+      if (exitFullScreen) {
+        exitFullScreen.call(window.top.document);
+        setIsFnllScreen(false);
+        // getTableHeight();
+        return;
+      }
+    }
+  };
+
+  const handleTimeValue = () => {
+
+
+    let actionsRender = (value.actionsRender ?? []).map((x) => ({
+      ...x,
+      position: x.position ?? 'left',
+    })).filter((x) => authFn(x?.code));
+
+    if (value?.exportConfig && authFn(value?.exportConfig?.code)) {
+      actionsRender = actionsRender.concat([
+        {
+          type: 'text',
+          props: {
+            children: (
+              <ExportIcon
+                request={{
+                  url:
+                    value?.exportConfig?.url ||
+                    `/oms-ops/excel/exportAsync/${value?.exportConfig?.type}`,
+                  params: value?.exportConfig?.params,
+                }}
+                tableRef={props.forwardedRef || refs}
+                allowSelect={value?.exportConfig?.allowSelect ?? true}
+                columnsRowKey={value?.rowKey}
+              />
+            ),
+          },
+        },
+      ]);
+    }
+
+    actionsRender = actionsRender.concat([
+      {
+        type: 'text',
+        props: {
+          children: (
+            <a>
+              {isFullScreen ? (
+                <Tooltip title="取消全屏">
+                  <img
+                    onClick={() => {
+                      ShowFullScreen();
+                    }}
+                    width={32}
+                    src={scanning}
+                  />
+                </Tooltip>
+              ) : (
+                <Tooltip title="全屏">
+                  <img
+                    onClick={() => {
+                      ShowFullScreen();
+                    }}
+                    width={32}
+                    src={quanping}
+                  />
+                </Tooltip>
+              )}
+            </a>
+          ),
+        },
+      },
+      {
+        type: 'text',
+        props: {
+          children: (
+            <span className="ant-dropdown-link">
+              <Dropdown
+                overlay={
+                  <Menu>
+                    <Menu.Item>
+                      <div
+                        onClick={sortTableRef?.current?.showModal}
+                        style={{ fontSize: 14, textAlign: 'center' }}
+                      >
+                        列设置
+                      </div>
+                    </Menu.Item>
+                    {!value?.searchConfig?.isHidden && (
+                     <Menu.Item>
+                        <SearchItemTable
+                          ref={searchTableRef}
+                          setShowSearchFields={setShowSearchFields}
+                          showSearchFields={showSearchFields}
+                          datasource={value?.fields || []}
+                          bsTableCode={bsTableCode}
+                        />
+                    </Menu.Item>
+                    )}
+                    {value?.exportConfig?.settingColumns && (
+                      <Menu.Item>
+                        <div
+                          onClick={exportTableRef?.current?.showModal}
+                          style={{ fontSize: 14, textAlign: 'center' }}
+                        >
+                          导出字段设置
+                        </div>
+                      </Menu.Item>
+                    )}
+                  </Menu>
+                }
+                placement="bottomRight"
+              >
+                <div className="ant-dropdown-link">
+                  <img width={32} src={shezhi} />
+                </div>
+              </Dropdown>
+            </span>
+          ),
+        },
+      },
+    ]);
+    if (value.rowSelection) {
+      value.rowSelection.columnWidth = 50;
+    }
+    return {
+      ...value,
+      actionsRender,
+    };
+  };
+
+  const handleResize =
+    (index) =>
+    (e, { size }) => {
+      setShowColumns((columns: any) => {
+        let newColumns = [...columns];
+        newColumns[index] = {
+          ...newColumns[index],
+          width: size.width,
+        };
+        newColumns.forEach((d: any) => {
+          handleBssulaColumnsSpecialParams(d);
+        });
+        return [...newColumns];
+      });
+    };
+
+  const setVisibleColumn = (columnTitle: string) => {
+    sortTableRef?.current?.handleTableHeadHidden?.(columnTitle);
+  };
+  const toMapByKey = (
+    arr: any[],
+    key: string,
+    fn?: (item: any, index: number) => any,
+  ) => {
+    const map = {};
+    arr.forEach((i: any) => (map[renderToString(i[key])] = i));
+    return map;
+  };
+  const getColumns = () => {
+    // 优化一下 减少复杂度
+    const titleMap = toMapByKey(value.columns, 'title');
+    // 加上排序
+    const cols = showColumn.map((i) => ({
+      ...i,
+      isPermissionColumn: titleMap[renderToString(i.title)]?.isPermissionColumn,
+      render: titleMap[renderToString(i.title)]?.render,
+    }));
+    cols.forEach((i) => handleBssulaColumnsSpecialParams(i));
+    return cols;
+  };
+
+  const config = {
+    visibleFieldsCount: 3,
+    tableWrapperStyle: {
+      padding: '10px',
+      // background: '#f3f3f3',
+    },
+    setVisibleColumn: setVisibleColumn,
+    itemLayout: {
+      span: 8, // 栅格占位格数
+      labelCol: {
+        // label标签布局；可设置 span、offset
+        span: 8,
+      },
+      wrapperCol: {
+        // value布局, 方式同labelCol（horizontal状态下配置）
+        span: 16,
+      },
+    },
+    rowSelection: false, // 默认无多选
+    ...handleTimeValue(),
+    tableProps: setTableProps(),
+    columns: getColumns(),
+    fields: [...showSearchFields],
+    ref: props.forwardedRef || refs,
+    isFullScreen,
+  };
+
+  useEffect(() => {
+    if (!localStorage.getItem('isTabChange') || state?.updateCurrentPage) {
+      if (pagePath === pathname) {
+        // @ts-ignore
+        config.ref?.current?.tableRef?.current?.refreshTable();
+      }
+    }
+    setTimeout(() => {
+      // 处理页面刷新两面
+      localStorage.removeItem('isTabChange');
+    }, 0);
+  }, [pathname]);
+
+  const expandedRowKeys = props?.expandable?.expandedRowKeys;
+
+  //todo  summary属性已经被使用，为了兼容之前的，现在使用 summaryList
+  //结构为了实现多行总结栏   定义如下(lableShow: boolean 是否显示列文本)
+  /**
+   * [
+   *  {
+   *  cont:[{key: 'spuCode',value: 100,labelShow: false}]
+   *  }
+   * ]
+   * @returns []
+   */
+  const getTableSummaryInfo = () => {
+    const { summaryList, rowSelection,expandable }: any = props;
+    if (summaryList && Array.isArray(summaryList)) {
+      const summaryRow = (rowSelection) ? [{}, ...showColumn] : [...showColumn];
+      if(expandable){
+        summaryRow.unshift({});
+      }
+      // let summaryInitial = summary().cont;
+      return (
+        <Table.Summary fixed>
+          {Array.isArray(summaryList) &&
+            summaryList.map((summaryItem, summaryIndex) => (
+              <Table.Summary.Row key={summaryIndex}>
+                {summaryRow.map((item: any, index: number) => {
+                  const { cout = [] } = summaryItem;
+                  const target = cout.filter(
+                    (inner: any) =>
+                      inner.key &&
+                      (inner.key === item.dataIndex || inner.key === item.key),
+                  )[0];
+                  if (target) {
+                    const labelText = target.labelShow ? `${item.title}:` :``;
+                    return (
+                      <Table.Summary.Cell
+                        index={index}
+                        key={`Table.Summary.Cell_${item.index}`}
+                      >
+                        <Text type="danger">
+                          {`${labelText} ${target.value ?? ''}`}
+                        </Text>
+                      </Table.Summary.Cell>
+                    );
+                  } else {
+                    return (
+                      <Table.Summary.Cell
+                        index={index}
+                        key={`Table.Summary.Cell_${item.index}`}
+                      >
+                        <Text type="danger">{` `}</Text>
+                      </Table.Summary.Cell>
+                    );
+                  }
+                })}
+              </Table.Summary.Row>
+            ))}
+        </Table.Summary>
+      );
+    } else {
+      return undefined;
+    }
+  };
+
+  const memoConfig = useMemo(
+    () => ({
+      ...config,
+      summary: props.summary,
+      summaryList: props.summaryList ? getTableSummaryInfo : undefined,
+      statusMapping: props.statusMapping,
+    }),
+    [
+      // value,
+      checkedList,
+      showColumn,
+      props.statusMapping,
+      showSearchFields,
+      expandedRowKeys,
+    ],
+  );
+  return (
+    <div id="bs-sula-query-table">
+      <MemoQueryTable {...memoConfig} />
+      <SortableTable
+        ref={sortTableRef}
+        setShowColumns={setShowColumns}
+        showColumn={showColumn}
+        datasource={value?.columns || []}
+        bsTableCode={bsTableCode}
+        onlyModal
+      />
+      {value?.exportConfig?.settingColumns && (
+        <SortableTable
+          ref={exportTableRef}
+          setShowColumns={setShowExportColumns}
+          showColumn={showExportColumn}
+          datasource={value?.columns || []}
+          bsTableCode={bsTableCodeExport}
+          onlyModal
+        />
+      )}
+    </div>
+  );
+};