@bit-sun/business-component 4.0.13-alpha.9 → 4.2.0-aiwei-alpha.1

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

@@ -14,7 +14,7 @@ import {
   SortableElement,
   SortableHandle,
 } from 'react-sortable-hoc';
-import request from '@/utils/request';
+import request from '@/utils/cachedRequest';
 import { SearchOutlined } from '@ant-design/icons';
 import { arrayMoveImmutable } from 'array-move';
 import close from '../../../assets/close.svg';
@@ -312,7 +312,7 @@ class SearchItemTable extends React.Component {
   DraggableContainer = (props) => (
     <SortableBody
       useDragHandle
-      disableAutoscroll
+      lockAxis='y'
       helperClass="row-dragging"
       onSortEnd={this.onSortEnd}
       {...props}
@@ -405,9 +405,9 @@ class SearchItemTable extends React.Component {
     } else {
       switch(item.field.type){
         //多值录入搜索组件 默认使用下拉框第一个选项
-        case 'bs-multiInput':
+        case 'bs-multiInput': case 'bs-multiTimeCustom': case 'bs-multiRemark': case 'bs-multiSelectCustom':
           const { options = [] } = item?.field?.props;
-          return options[0]?.text;
+          return options[0]?.text || options[0]?.label;
         default:
           return '';
       }
@@ -580,13 +580,14 @@ class SearchItemTable extends React.Component {
                         row: this.DraggableBodyRow,
                       },
                     }}
+                    scroll={{ y: 364 }}
                   />
                 </div>
               </div>
             </div>
           </Modal>
         )}
-        <div onClick={this.showModal} style={{fontSize:14, textAlign: 'center', border: '0.67px solid #D9D9D9', width: '24px', height: '24px', lineHeight: '20px'}}><img style={{width: '20px', height: '20px'}} src={shezhi} /></div>
+        <div onClick={this.showModal} style={{fontSize:14, cursor: 'pointer', textAlign: 'center', border: '0.67px solid #D9D9D9', width: '24px', height: '24px', lineHeight: '20px'}}><img style={{width: '20px', height: '20px'}} src={shezhi} /></div>
       </div>
     );
   }

package/src/components/Business/BsSulaQueryTable/bssulaquerytable.less

@@ -2,8 +2,4 @@
   .ant-table-title+.ant-table-container table {
     visibility: unset !important;
   }
-  .ant-table-body table {
-    table-layout: fixed !important;
-    width: 100% !important;
-  }
 }

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

@@ -151,16 +151,18 @@
     }
   }
 
-  .ant-table-wrapper::-webkit-scrollbar {
+  .ant-table-body::-webkit-scrollbar {
     display: none;
   }
 
   .ant-table-wrapper {
     margin-top: 10px;
-    height: 364px;
-    overflow: scroll;
     padding-bottom: 50px;
 
+    tbody tr:first-child {
+      display: none;
+    }
+
     tr {
       height: 30px;
       td {

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

@@ -38,6 +38,7 @@ export default () => {
         return {
           ...item,
           id: `${index}`,
+          orderStatus: index === 1 ? '-1' : '',
           name: `${item.name.first} ${item.name.last}`,
         };
       }),
@@ -118,83 +119,95 @@ export default () => {
         title: '邮箱',
       },
       {
-        key: 'id',
-        title: 'ID',
+        key: 'id1',
+        title: 'ID1',
       },
       {
-        key: 'name',
-        title: '姓名',
+        key: 'name1',
+        title: '姓名1',
       },
       {
-        key: 'nat',
-        title: '国家',
+        key: 'nat1',
+        title: '国家1',
       },
       {
-        key: 'gender',
-        title: '性别',
+        key: 'gender1',
+        title: '性别1',
         render: ({ text }) => {
           return text === 'male' ? '男' : '女';
         },
       },
       {
-        key: 'email',
-        title: '邮箱',
+        key: 'email1',
+        title: '邮箱1',
       },
       {
-        key: 'id',
-        title: 'ID',
+        key: 'id2',
+        title: 'ID2',
       },
       {
-        key: 'name',
-        title: '姓名',
+        key: 'name2',
+        title: '姓名2',
       },
       {
-        key: 'nat',
-        title: '国家',
+        key: 'nat2',
+        title: '国家2',
       },
       {
-        key: 'gender',
-        title: '性别',
+        key: 'orderStatus2',
+        title: '单据状态2',
+      },
+      {
+        key: 'gender2',
+        title: '性别2',
         render: ({ text }) => {
           return text === 'male' ? '男' : '女';
         },
       },
       {
-        key: 'email',
-        title: '邮箱',
+        key: 'email2',
+        title: '邮箱2',
       },
       {
-        key: 'id',
-        title: 'ID',
+        key: 'id3',
+        title: 'ID3',
       },
       {
-        key: 'name',
-        title: '姓名',
+        key: 'name3',
+        title: '姓名3',
       },
       {
-        key: 'nat',
-        title: '国家',
+        key: 'nat3',
+        title: '国家3',
       },
       {
-        key: 'gender',
-        title: '性别',
+        key: 'gender3',
+        title: '性别3',
         render: ({ text }) => {
           return text === 'male' ? '男' : '女';
         },
       },
       {
-        key: 'email',
-        title: '邮箱',
+        key: 'email3',
+        title: '邮箱3',
       },
     ],
+    rowSelection: {
+        onChange: (rowKey: any, rows: any) => {
+          console.log(rowKey, rows);
+          setRows(rows);
+        },
+      },
     rowKey: 'id',
     tableProps: {
       initialPaging: {
         pagination: {
           pageSize: 10,
         }
-      }
-    }
+      },
+      showStatusRowClass: true,
+      showStatusFields: ['orderStatus']
+    },
   };
   return (
     <div>

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import { useLocation, history } from 'umi';
 import { QueryTable } from 'bssula';
 import { Menu, Tooltip, Dropdown, Table, Typography } from 'antd';
@@ -7,7 +7,7 @@ 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 { handleBssulaColumnsSpecialParams, uuid, parseWidth, } from '@/utils/utils';
 import { getMenuAuthDataKey } from '@/utils/LocalstorageUtils';
 import { shouldUseAuth } from '@/utils';
 import {
@@ -164,6 +164,8 @@ const ResizeableTitle = (props: any) => {
 export default (props: any) => {
   const bsTableCode = props?.tableCode || window.location.hash; //设置列字段的唯一标识
 
+  const rowsRef = useRef<any>(null);
+
   // 获取 table columns中所有的 key  防止有的地方是 dataindex
   const checkedList = useMemo(
     () =>
@@ -337,6 +339,26 @@ export default (props: any) => {
       globalDocument.webkitFullscreenElement;
     if (isFull == undefined) isFull = false;
     return isFull;
+  };
+
+  const getResizeShowColumns = (showColumns, ) => {
+    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),
+      });
+    });
+    return showColumns;
+  }
+  const setResizeShowColumns = (showColumns: any) => {
+    let newShowColumns = getResizeShowColumns(showColumns);
+    setShowColumns([...newShowColumns]);
   }
 
   const setInitialTableInfo = (isReset) => {
@@ -370,7 +392,7 @@ export default (props: any) => {
             }
           });
         }
-        handleBssulaColumnsSpecialParams(d);
+        // handleBssulaColumnsSpecialParams(d);
       });
       setCommonRenderFn(props.columns);
       const authButton = localStorage.getItem(getMenuAuthDataKey())
@@ -396,49 +418,14 @@ export default (props: any) => {
       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');
-
-    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]);
+    setResizeShowColumns(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),
-      });
-    });
+    let showExportColumns = getSettingFieldOrColumn(exportColumnConfig,columns,'columns');
     setShowExportColumns([...showExportColumns]);
   };
 
@@ -527,49 +514,97 @@ export default (props: any) => {
 
   // 处理 table 基本参数
   const setTableProps = () => {
-    let tableProps = value.tableProps || {};
-    tableProps = {
-      ...tableProps,
+    const defaultPageSize = 20;
+    const baseTableProps = {
       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,
-            },
-      },
+      defaultPageSize,
+      pageSize: defaultPageSize,
       initialSelectedRowKeys: value.initialSelectedRowKeys || [],
       expandable: props.expandable,
       scroll: {
         x: props.overScrollX || 'max-content',
         y: props?.overScrollY || height,
       },
-      bordered: value.bordered || true,
-      sticky: true,
-      rowClassName: (record: object | null | undefined, index: number) =>
-        index % 2 === 0 ? 'table_base' : 'table_odd',
+      bordered: typeof value.bordered === 'boolean' ? value.bordered : true,
+      sticky: typeof value.sticky === 'boolean' ? value.sticky : true,
+      rowClassName: (record, index) => {
+        if (props?.rowClassName) {
+          return props.rowClassName(record, index);
+        }
+        if (value?.tableProps?.showStatusFields && value?.tableProps?.showStatusFields?.some(status => record?.[status] == -1)) {
+          return 'table_gray';
+        }
+        return index % 2 === 0 ? 'table_base' : 'table_odd';
+      },
       components: {
         header: {
           cell: ResizeableTitle,
         },
-        ...tableProps?.components,
+        ...value.tableProps?.components,
       },
-      ...(props.viewPagePath ? // 详情页查看地址 存在该参数时 默认列表支持双击打开
-        {
-          onRow: (record: any) => ({
-            onDoubleClick: (e: any) => {
-              history.push(eval(`\`${props.viewPagePath.replace(/'/g, '`').replace(/#{(.*?)}/g, (match: any, p: any) => `\${${p}}`)}\``));
-            },
-          }),
-        } : {}),
+    };
+
+    const paginationConfig = props?.pagination
+      ? false
+      : {
+        defaultPageSize,
+        pageSize: defaultPageSize,
+        showTotal: (total) => `共 ${total} 条`,
+        showQuickJumper: true,
+        hideOnSinglePage: value.hideOnSinglePage || false,
+        ...value.tableProps?.initialPaging?.pagination,
+      };
+
+    const handleRowClick = (record) => {
+      const { rowKey } = value;
+
+      let newSelectedRowKeys = [...(rowsRef?.current?.selectedRowKeys || [])];
+      let newSelectedRows = [...(rowsRef?.current?.selectedRows || [])];
+
+      const keyIndex = newSelectedRowKeys.indexOf(record[rowKey]);
+      if (keyIndex > -1) {
+        // 如果已经选中，则取消选中
+        newSelectedRowKeys.splice(keyIndex, 1);
+        newSelectedRows.splice(keyIndex, 1);
+      } else {
+        // 如果未选中，则添加到选中列表
+        newSelectedRowKeys.push(record[rowKey]);
+        newSelectedRows.push(record);
+      }
+      
+      rowsRef.current = {
+        selectedRowKeys: newSelectedRowKeys,
+        selectedRows: newSelectedRows,
+      };
+
+      // 手动调用外部传入的 onChange 函数
+      const { rowSelection } = value;
+      if (rowSelection && typeof rowSelection.onChange === 'function') {
+        // 直接将 record 作为数组元素传递
+        rowSelection.onChange(newSelectedRowKeys, newSelectedRows);
+      }
+    };
+
+    const handleRowDoubleClick = (record) => {
+      console.log('handleRowDoubleClick', record);
+      if (props.viewPagePath) {
+        const path = eval(`\`${props.viewPagePath.replace(/'/g, '`').replace(/#{(.*?)}/g, (match, p) => `\${${p}}`)}\``);
+        history.push(path);
+      }
+    };
+    
+    const tableProps = {
+      ...baseTableProps,
+      initialPaging: {
+        pagination: paginationConfig,
+      },
+      onRow: (record) => {
+        return {
+          onClick: () => handleRowClick(record), // 绑定行点击事件
+          onDoubleClick: () => handleRowDoubleClick(record), // 绑定行点击事件
+        };
+      },
+      ...value?.tableProps || {}
     };
 
     // @ts-ignore
@@ -715,9 +750,9 @@ export default (props: any) => {
           ...newColumns[index],
           width: size.width,
         };
-        newColumns.forEach((d: any) => {
-          handleBssulaColumnsSpecialParams(d);
-        });
+        // newColumns.forEach((d: any) => {
+        //   handleBssulaColumnsSpecialParams(d);
+        // });
         return [...newColumns];
       });
     };
@@ -747,6 +782,36 @@ export default (props: any) => {
     return cols;
   };
 
+  const onSelectChange = useCallback((newSelectedRowKeys: any, newSelectedRows: any) => {
+    const originalSelectedRowKeys = rowsRef?.current?.selectedRowKeys || [];
+    const originalSelectedRows = rowsRef?.current?.selectedRows || [];
+
+    // 合并新的 selectedRowKeys，去除重复项
+    const mergedSelectedRowKeys = [...new Set([...originalSelectedRowKeys, ...newSelectedRowKeys])];
+    // 合并新的 selectedRows
+    const rowKey = props.rowKey;
+    const mergedSelectedRows = mergedSelectedRowKeys.map((key) => {
+      const existingRow = originalSelectedRows.find((row) => row[rowKey] === key);
+      const newRow = newSelectedRows.find((row) => row[rowKey] === key);
+      return newRow || existingRow || {};
+    });
+
+    rowsRef.current = {
+      selectedRowKeys: mergedSelectedRowKeys,
+      selectedRows: mergedSelectedRows,
+    };
+
+    // 如果外部传入了 rowSelection 的 onChange 事件，调用它
+    if (value.rowSelection && typeof value.rowSelection.onChange === 'function') {
+      value.rowSelection.onChange(newSelectedRowKeys, newSelectedRows);
+    }
+  }, [value.rowKey, value.rowSelection]);
+
+  const isObject = (value: any) => typeof value === 'object' && value!== null;
+  const hasValidRowSelection = (propRowSelection: any) => {
+    return isObject(propRowSelection) && Object.keys(propRowSelection).length > 0;
+  };
+
   const config = {
     visibleFieldsCount: 7,
     tableWrapperStyle: {
@@ -765,9 +830,21 @@ export default (props: any) => {
         span: 16,
       },
     },
-    rowSelection: false, // 默认无多选
     ...handleTimeValue(),
     tableProps: setTableProps(),
+    rowSelection: value.rowSelection ? {
+      ...value.rowSelection,
+      selectedRowKeys: rowsRef?.current?.selectedRowKeys || [],
+      onChange: (selectedRowKeys: any, selectedRows: any) => {
+        rowsRef.current = {
+          selectedRowKeys: selectedRowKeys,
+          selectedRows: selectedRows,
+        };
+        if (value.rowSelection && typeof value.rowSelection.onChange === 'function') {
+          value.rowSelection.onChange(selectedRowKeys, selectedRows);
+        }
+      },
+    } : false,
     columns: [...getColumns()],
     fields: [...showSearchFields],
     ref: props.forwardedRef || refs,
@@ -890,7 +967,8 @@ export default (props: any) => {
       {/* 列设置弹出框表格 */}
       <SortableTable
         ref={sortTableRef}
-        setShowColumns={setShowColumns}
+        disableColumnFixed={props.tableProps?.isVirtualTable}
+        setShowColumns={setResizeShowColumns}
         showColumn={showColumn}
         setInitialTableInfo={setInitialTableInfo}
         datasource={value?.columns || []}

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

@@ -15,7 +15,7 @@ import {
   SortableElement,
   SortableHandle,
 } from 'react-sortable-hoc';
-import request from '@/utils/request';
+import request from '@/utils/cachedRequest';
 import { SearchOutlined } from '@ant-design/icons';
 import { arrayMoveImmutable } from 'array-move';
 import shezhi from '../../../assets/icon-shezhi.svg';
@@ -48,9 +48,10 @@ class SortableTable extends React.Component {
     bsTableCode: '', //设置table 列的标识
   };
 
-  patchUserColumnConfig = (config) => {
+  patchUserColumnConfig = (config: any, tableCode: any) => {
     const { appRequestConfig } = this.props;
     let that = this;
+    const newTableCode = tableCode || that.state.bsTableCode;
     let configvalue = config
       ? config.map((item) => ({
           key: item.key,
@@ -65,12 +66,12 @@ class SortableTable extends React.Component {
         url: handleRequestUrl('/user','/appConfig/saveUserOrder', appRequestConfig),
         method: 'POST',
         data: {
-          code: that.state.bsTableCode,
+          code: newTableCode,
           detail: configvalue ? JSON.stringify(configvalue) : '',
         },
       }).then((res:any) => {
         if (judgeIsRequestSuccess(res?.data)) {
-          this.patchConfigToLocalstorage(configvalue);
+          this.patchConfigToLocalstorage(configvalue, newTableCode, config);
           resolve({ status: '0' });
         } else {
           message.error('保存表头列自定义失败，请稍后尝试');
@@ -93,20 +94,22 @@ class SortableTable extends React.Component {
     return [];
   };
 
-  patchConfigToLocalstorage = (configvalue) => {
+  patchConfigToLocalstorage = (configvalue, tableCode: any, newDataSource: any) => {
     const { setShowColumns, datasource = [] } = this.props;
     const { sortDataSource, bsTableCode } = this.state;
+
+    const sourceList = newDataSource || sortDataSource;
     let config =
       localStorage.getItem(ENUM.BROWSER_CACHE.COLUMN_CONDITION) || '[]';
     let configArray = JSON.parse(config);
     let currentSetting = configArray.filter(
-      (item) => item.code === bsTableCode,
+      (item) => item.code === tableCode,
     );
     if (currentSetting.length) {
       currentSetting[0].detail = JSON.stringify(configvalue);
     } else {
       configArray.push({
-        code: bsTableCode,
+        code: tableCode,
         detail: JSON.stringify(configvalue),
       });
     }
@@ -119,7 +122,7 @@ class SortableTable extends React.Component {
       visible: false,
     });
     if (configvalue) {
-      setShowColumns([...sortDataSource]);
+      setShowColumns([...sourceList]);
     } else {
       this.setState({
         isDefaultValue: true,
@@ -140,6 +143,30 @@ class SortableTable extends React.Component {
     }
   };
 
+  isColumnsChange = (pre=[], next=[]) => {
+    const preKeyStr = pre.map(item => item.key || item.dataIndex).join(',');
+    const nextKeyStr = next.map(item => item.key || item.dataIndex).join(',');
+    return preKeyStr !== nextKeyStr;
+  }
+
+  // 提取逻辑到单独的方法
+  validateLocalStorageConfig = (datasource: any, tableCode: string) => {
+    let config = localStorage.getItem(ENUM.BROWSER_CACHE.COLUMN_CONDITION) || '[]';
+    let configArray = JSON.parse(config);
+    let currentSetting = configArray.filter((item: any) => item.code === tableCode);
+    let configvalue = currentSetting?.[0]?.detail ? JSON.parse(currentSetting[0].detail) : [];
+    if (currentSetting.length === 0 || configvalue.length === 0) {
+      this.patchUserColumnConfig(datasource || [], tableCode);
+    }
+  }
+
+  componentWillReceiveProps(nextProps: any) {
+    if (this.isColumnsChange(this.props?.datasource, nextProps?.datasource)) {
+      //this.setInitValue(nextProps?.datasource || []);
+      this.validateLocalStorageConfig(nextProps?.datasource, nextProps?.bsTableCode);
+    }
+  }
+
   setInitValue = (isClick = false) => {
     const { datasource, showColumn }: any = this.props;
     let config = this.getConfigFromlocalstorage();
@@ -188,6 +215,8 @@ class SortableTable extends React.Component {
     const { datasource, showColumn, bsTableCode }: any = this.props;
     let config = this.getConfigFromlocalstorage();
 
+    this.validateLocalStorageConfig(datasource, bsTableCode);
+
     this.setState({
       dataSource: datasource.map((item) => {
         let innerItem = config.filter((inneritem) => {
@@ -259,6 +288,9 @@ class SortableTable extends React.Component {
       title: '列首',
       dataIndex: 'fixedLeft',
       render: (text, record) => {
+        if(this.props.disableColumnFixed) {
+          return null
+        }
         return (
           <span
             onClick={() => {
@@ -346,6 +378,9 @@ class SortableTable extends React.Component {
       title: '列尾',
       dataIndex: 'fixedRight',
       render: (text, record) => {
+        if(this.props.disableColumnFixed) {
+          return null
+        }
         return (
           <span
             onClick={() => {
@@ -544,7 +579,7 @@ class SortableTable extends React.Component {
   DraggableContainer = (props) => (
     <SortableBody
       useDragHandle
-      disableAutoscroll
+      lockAxis='y'
       helperClass="row-dragging"
       onSortEnd={this.onSortEnd}
       {...props}
@@ -555,9 +590,9 @@ class SortableTable extends React.Component {
     const { sortDataSource } = this.state;
     // function findIndex base on Table rowKey props and should always be a right array index
     const index = sortDataSource.findIndex(
-      (x) => x.key === restProps['data-row-key'],
+      (x) => (x.key||x.dataIndex) == restProps['data-row-key'],
     );
-    return <SortableItem index={index} {...restProps} />;
+    return <SortableItem key={restProps['data-row-key']} index={index} {...restProps} />;
   };
 
 
@@ -918,6 +953,7 @@ class SortableTable extends React.Component {
                         row: this.DraggableBodyRow,
                       },
                     }}
+                    scroll={{ y: 364 }}
                   />
                 </div>
               </div>