@bit-sun/business-component 3.2.4 → 3.6.1-alpha.0

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

@@ -2,6 +2,14 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { useLocation } from 'umi';
 import { QueryTable } from 'bssula';
+import { Menu, Tooltip, Dropdown, Table, Typography } from 'antd';
+import { Resizable } from 'react-resizable';
+import { debounce } from 'lodash';
+import ExportIcon from '@/components/Functional/ExportFunctions/ExportIcon';
+import ENUM from '@/utils/enumConfig';
+import { handleBssulaColumnsSpecialParams, uuid } from '@/utils/utils';
+import { getMenuAuthDataKey } from '@/utils/LocalstorageUtils';
+import { shouldUseAuth } from '@/utils';
 import {
   userColumns,
   getItemDefaultWidth,
@@ -9,20 +17,12 @@ import {
   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, parseWidth } from '@/utils/utils';
 import './bssulaquerytable.less';
-import { getMenuAuthDataKey } from '@/utils/LocalstorageUtils';
-import { shouldUseAuth } from '@/utils';
 
 interface Column {
   key?: string | string[];
@@ -61,9 +61,13 @@ const ResizeableTitle = (props) => {
 
 export default (props: any) => {
   const bsTableCode = props?.tableCode || window.location.hash; //设置列字段的唯一标识
+  /**
+   * 默认展示行数
+  */
+  const defaultRow = 2
 
-   // 获取 table columns中所有的 key  防止有的地方是 dataindex
-   const checkedList = useMemo(
+  // 获取 table columns中所有的 key  防止有的地方是 dataindex
+  const checkedList = useMemo(
     () =>
       props.columns
         .filter((col: any) => !col.hidden)
@@ -74,13 +78,14 @@ export default (props: any) => {
         ),
     [props.columns],
   );
-  
-  const getConfigFromlocalstorage = (type: string, tableCode:string = bsTableCode) => {
+
+  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,
-    );
+    let configSetting = configArray.filter((item) => item.code === tableCode);
 
     if (configSetting.length && configSetting[0].detail) {
       return JSON.parse(configSetting[0].detail);
@@ -89,63 +94,71 @@ export default (props: any) => {
   };
 
   /**
- * 根据保存的配置和原始配置，获取设置的字段或列。
- * @param savedConfig 保存的配置数组，可能包含字段或列的配置。
- * @param originConfig 原始配置数组，包含完整的字段或列信息。
- * @param type 字段或列的类型，用于确定配置的属性。
- * @returns 返回根据保存的配置处理后的字段或列数组，如果未保存任何配置，则返回原始配置。
- */
-const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
-  /**
-   * 判断值是否为字符串数组。
-   * @param value 待判断的值。
-   * @returns 如果值是字符串数组，则返回true，否则返回false。
+   * 根据保存的配置和原始配置，获取设置的字段或列。
+   * @param savedConfig 保存的配置数组，可能包含字段或列的配置。
+   * @param originConfig 原始配置数组，包含完整的字段或列信息。
+   * @param type 字段或列的类型，用于确定配置的属性。
+   * @returns 返回根据保存的配置处理后的字段或列数组，如果未保存任何配置，则返回原始配置。
    */
-  const isStringArray = (value: any): value is string[] => {
-    return Array.isArray(value) && value.every(v => typeof v === 'string');
-  }
+  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 '';
-  }
+    /**
+     * 根据配置项和类型，获取配置项的键。
+     * @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 = [];
+    const newConfig = [];
 
-  if (savedConfig.length) {
-    const hash = originConfig.reduce((prev, inneritem) => {
-      prev[getItemKey(inneritem, type)] = inneritem;
-      return prev;
-    }, {} as { [key: string]: Column | Field });
+    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 });
-    })
-  }
+      savedConfig.forEach((config, index) => {
+        let inner = hash[getItemKey(config, type)];
+        inner && newConfig.push({ ...inner, ...config });
+      });
+    }
 
-  if (newConfig.length) return newConfig;
+    if (newConfig.length) return newConfig;
 
-  if (type === 'columns') {
-    return originConfig.filter(column => {
-      const columnKey = getItemKey(column, type);
-      return column.notRegularCheckList || checkedList.indexOf(columnKey) > -1;
-    });
-  }
+    if (type === 'columns') {
+      return originConfig.filter((column) => {
+        const columnKey = getItemKey(column, type);
+        return (
+          column.notRegularCheckList || checkedList.indexOf(columnKey) > -1
+        );
+      });
+    }
 
-  return [...originConfig];
-}
+    return [...originConfig];
+  };
   const refs = useRef(null);
   const [pagePath, setPagePath] = useState('');
 
@@ -155,14 +168,19 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
   const value = props;
   const { fields = [] } = props;
   const [showColumn, setShowColumns] = useState([]); // 列字段
-  const originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
+  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('');
+  const [height, setHeight]: any = useState('100vh');
   const sortTableRef = useRef(null);
   const searchTableRef = useRef(null);
   const exportTableRef = useRef<any>(null);
+  const queryTableRef = useRef(null);
 
   const bsTableCodeExport = `${bsTableCode}___Export`; //设置导出列字段的唯一标识
 
@@ -176,12 +194,23 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
         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;
-
+      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 -
@@ -212,8 +241,7 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
     return isFull;
   }
 
-
-  const setInitialTableInfo = () => {
+  const setInitialTableInfo = (isReset) => {
     const resourceCodeArray = {};
     const uuIdList = [];
     if (props.actionsRender && props.actionsRender.length) {
@@ -252,29 +280,40 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: 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];
+        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) {
+        if (
+          shouldUseAuth() &&
+          !authButton.filter((itemInner: any) => Item === itemInner).length
+        ) {
           resourceCodeArray[item].visible = false;
         }
       });
     }
-    
+
     const { columns } = props;
-    let columnConfig = getConfigFromlocalstorage(ENUM.BROWSER_CACHE.COLUMN_CONDITION);
+    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(isReset ?  [] : columnConfig, columns, 'columns');
 
-    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),
+        width:
+          typeof column.width === 'number'
+            ? column.width
+            : parseWidth(column.width),
         onResize: handleResize(index),
       });
     });
@@ -284,16 +323,21 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
       ENUM.BROWSER_CACHE.COLUMN_CONDITION,
       bsTableCodeExport,
     );
-    let showExportColumns = getSettingFieldOrColumn(exportColumnConfig, columns, 'columns');
+    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
-        : parseWidth(column.width),
+        width:
+          typeof column.width === 'number'
+            ? column.width
+            : parseInt(column.width.replace('px', '')),
         onResize: handleResize(index),
       });
     });
@@ -306,13 +350,17 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
     let searchFieldsConfig = getConfigFromlocalstorage(
       ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION,
     );
-    const showSearchFields = getSettingFieldOrColumn(searchFieldsConfig, fields, 'searchFields');
+    const showSearchFields = getSettingFieldOrColumn(
+      searchFieldsConfig,
+      fields,
+      'searchFields',
+    );
     setShowSearchFields([...showSearchFields]);
   };
 
   //组件初始挂载
   useEffect(() => {
-    // getTableHeight();
+    getTableHeight();
     setInitialTableInfo();
     setInitialSearchFieldsInfo();
     window.addEventListener('resize', (e) => {
@@ -397,12 +445,15 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
               showQuickJumper: true,
               hideOnSinglePage: value.hideOnSinglePage || false,
 
-              ...tableProps?.initialPaging?.pagination
+              ...tableProps?.initialPaging?.pagination,
             },
       },
       initialSelectedRowKeys: value.initialSelectedRowKeys || [],
       expandable: props.expandable,
-      scroll: { x: props.overScrollX || 'max-content', y: props?.overScrollY || height },
+      scroll: {
+        x: props.overScrollX || 'max-content',
+        y: props?.overScrollY || height,
+      },
       bordered: value.bordered || false,
       sticky: true,
       rowClassName: (record: object | null | undefined, index: number) =>
@@ -411,7 +462,6 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
         header: {
           cell: ResizeableTitle,
         },
-        ...tableProps?.components,
       },
     };
 
@@ -459,12 +509,12 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
   };
 
   const handleTimeValue = () => {
-
-
-    let actionsRender = (value.actionsRender ?? []).map((x) => ({
-      ...x,
-      position: x.position ?? 'left',
-    })).filter((x) => authFn(x?.code));
+    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([
@@ -520,55 +570,55 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
           ),
         },
       },
-      {
-        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>
-          ),
-        },
-      },
+      // {
+      //   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;
@@ -621,14 +671,13 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
   };
 
   const config = {
-    visibleFieldsCount: 3,
     tableWrapperStyle: {
       padding: '10px',
       // background: '#f3f3f3',
     },
     setVisibleColumn: setVisibleColumn,
     itemLayout: {
-      span: 8, // 栅格占位格数
+      span: 6, // 栅格占位格数
       labelCol: {
         // label标签布局；可设置 span、offset
         span: 8,
@@ -673,10 +722,10 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
    * @returns []
    */
   const getTableSummaryInfo = () => {
-    const { summaryList, rowSelection,expandable }: any = props;
+    const { summaryList, rowSelection, expandable }: any = props;
     if (summaryList && Array.isArray(summaryList)) {
-      const summaryRow = (rowSelection) ? [{}, ...showColumn] : [...showColumn];
-      if(expandable){
+      const summaryRow = rowSelection ? [{}, ...showColumn] : [...showColumn];
+      if (expandable) {
         summaryRow.unshift({});
       }
       // let summaryInitial = summary().cont;
@@ -693,7 +742,7 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
                       (inner.key === item.dataIndex || inner.key === item.key),
                   )[0];
                   if (target) {
-                    const labelText = target.labelShow ? `${item.title}:` :``;
+                    const labelText = target.labelShow ? `${item.title}:` : ``;
                     return (
                       <Table.Summary.Cell
                         index={index}
@@ -724,16 +773,41 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
     }
   };
 
+  const columnsDom = <span className="ant-dropdown-link">
+    <div onClick={sortTableRef?.current?.showModal} className="ant-dropdown-link">
+      <img style={{position: 'relative', cursor: 'pointer'}} width={24} src={shezhi} />
+    </div>
+  </span>
+
+  const queryFieldsDom = <SearchItemTable
+    ref={searchTableRef}
+    setShowSearchFields={setShowSearchFields}
+    showSearchFields={showSearchFields}
+    datasource={value?.fields || []}
+    bsTableCode={bsTableCode}
+  />
+
   const memoConfig = useMemo(
-    () => ({
-      ...config,
-      summary: props.summary,
-      summaryList: props.summaryList ? getTableSummaryInfo : undefined,
-      statusMapping: props.statusMapping,
-      isBsSulaQueryTable: true,
-    }),
+    () => {
+      /**
+       * 默认状态下,可见查询字段的个数,核心逻辑:
+       * 1.组件有传入时,优先取
+       * 2.没有传入时,通过每个字段栅格数计算,计算公式:
+       *  栅格总数(24)/每个字段栅格数*默认行数
+      */
+      return {
+        ...config,
+        ...(config?.visibleFieldsCount !== undefined
+          ? { visibleFieldsCount: config.visibleFieldsCount }
+          : { visibleFieldsCount: 24 / Number(config?.itemLayout?.span) * defaultRow }),
+          summary: props.summary,
+          summaryList: props.summaryList ? getTableSummaryInfo : undefined,
+          statusMapping: props.statusMapping,
+          columnsDom,
+          queryFieldsDom,
+      }
+    },
     [
-      // value,
       checkedList,
       showColumn,
       props.statusMapping,
@@ -741,13 +815,16 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
       expandedRowKeys,
     ],
   );
+
   return (
     <div id="bs-sula-query-table">
       <MemoQueryTable {...memoConfig} />
+      {/* 列设置弹出框表格 */}
       <SortableTable
         ref={sortTableRef}
         setShowColumns={setShowColumns}
         showColumn={showColumn}
+        setInitialTableInfo={setInitialTableInfo}
         datasource={value?.columns || []}
         bsTableCode={bsTableCode}
         onlyModal
@@ -756,6 +833,7 @@ const getSettingFieldOrColumn = (savedConfig, originConfig, type: string) => {
         <SortableTable
           ref={exportTableRef}
           setShowColumns={setShowExportColumns}
+          setInitialTableInfo={setInitialTableInfo}
           showColumn={showExportColumn}
           datasource={value?.columns || []}
           bsTableCode={bsTableCodeExport}