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

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,7 @@ export default (props: any) => {
       {/* 列设置弹出框表格 */}
       <SortableTable
         ref={sortTableRef}
-        setShowColumns={setShowColumns}
+        setShowColumns={setResizeShowColumns}
         showColumn={showColumn}
         setInitialTableInfo={setInitialTableInfo}
         datasource={value?.columns || []}

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

@@ -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) => {
@@ -544,7 +573,7 @@ class SortableTable extends React.Component {
   DraggableContainer = (props) => (
     <SortableBody
       useDragHandle
-      disableAutoscroll
+      lockAxis='y'
       helperClass="row-dragging"
       onSortEnd={this.onSortEnd}
       {...props}
@@ -555,9 +584,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 +947,7 @@ class SortableTable extends React.Component {
                         row: this.DraggableBodyRow,
                       },
                     }}
+                    scroll={{ y: 364 }}
                   />
                 </div>
               </div>

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

@@ -242,24 +242,27 @@ export const tableColumnsImage = (
   url?: string,
   paramsObj?: tableColumnsImageType,
 ) => {
-  // 测试使用 测试类型缩小 随时可删除 start
-  const imgHtml = document.querySelector('.ant-image-mask-info')!;
-  if (imgHtml) {
-    let str = imgHtml?.innerHTML;
-    str = str?.replace('预览', '');
-    imgHtml.innerHTML = str;
-  }
-  // 测试使用 测试类型缩小  end
+  // 默认预览配置（修复失真问题）
+  const defaultPreview = {
+    width: "40%",        // 基于视窗宽度
+    objectFit: 'cover'
+  };
 
   return (
     <>
       {url ? (
-        <div className={`clomnsImg`}>
-          <Image src={url} width="16px" height="16px" {...paramsObj}></Image>
+        <div className="clomnsImg">
+          <Image
+            src={url}
+            width="16px"
+            height="16px"
+            preview={defaultPreview} // 直接使用配置，避免展开运算符
+            {...paramsObj}
+          />
         </div>
       ) : (
-        <div className={`clomnsImg2`}>
-          <img {...paramsObj} src={noImg}></img>
+        <div className="clomnsImg2">
+          <img {...paramsObj} src={noImg} alt="无图片" />
         </div>
       )}
     </>

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

@@ -28,7 +28,7 @@ export default () => {
     console.log('确定操作，可获取到成功录入的商品，做一系列操作')
     console.log(resultData)
     // 一般拿到导入数据是做请求接口操作
-    // import {request} from "bssula";
+    // import {request} from 'bssula';
     // request({
     //   url: `/bop/api/sku/import/save`,
     //   method: "POST",

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

@@ -34,16 +34,18 @@ const CommodityEntry = (props: any) => {
 
   const handleOk = () => {
     // 方法获取当前组件内部的数据，然后进行自身的业务操作
-    const resultData = dataValidationRef.current?.getValidateData();
+    let resultData = props?.notValid ? dataValidationRef.current?.getData() : dataValidationRef.current?.getValidateData();
 
-    if (!resultData.successData.length) {
-      message.error("无校验通过数据，请校验数据");
-      return;
-    }
-
-    if (resultData.failData.length) {
-      message.error(`有${resultData.failData.length}条校验失败数据`);
-      return;
+    if(!(!!props?.notValid)) {
+      if (!resultData.successData.length) {
+        message.error("无校验通过数据，请校验数据");
+        return;
+      }
+  
+      if (resultData.failData.length) {
+        message.error(`有${resultData.failData.length}条校验失败数据`);
+        return;
+      }
     }
 
     callbackHandleOk(resultData, () => {

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

@@ -94,7 +94,7 @@
     align-items: center;
     gap: 2px;
     border-radius: 3px;
-    padding: 0 10px;
+    padding: 0 2px;
   }
   .ant-btn-dangerous {
     background-color: #EC5246 !important;

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

@@ -12,6 +12,12 @@ import editIcon from '../../../assets/btn-edit.svg';
 import submitIcon from '../../../assets/btn-submit.svg';
 import deleteIcon from '../../../assets/btn-delete.svg';
 import moreIcon from '../../../assets/btn-more.svg';
+import hangUpIcon from '../../../assets/btn-hangUp.svg';
+import unhookIcon from '../../../assets/btn-unhook.svg';
+import refreshIcon from '../../../assets/btn-refresh.svg';
+import printIcon from '../../../assets/btn-print.svg';
+import copyIcon from '../../../assets/btn-copy.svg';
+import cancelIcon from '../../../assets/btn-cancel.svg';
 import { useLocation, formatMessage } from 'umi';
 import CommonAlert from '../CommonAlert';
 import ENUM from '@/utils/enumConfig';
@@ -30,11 +36,21 @@ interface actionItem {
   action: object;
 }
 
+const iconStyle = {
+  width: 16,
+  height: 16,
+};
 export const iconMap = {
-  edit: <img src={editIcon} />,
-  delete: <img src={deleteIcon} />,
-  submit: <img src={submitIcon} />,
-  more: <img src={moreIcon} />,
+  edit: <img src={editIcon} {...iconStyle} />,
+  delete: <img src={deleteIcon} {...iconStyle} />,
+  submit: <img src={submitIcon} {...iconStyle} />,
+  more: <img src={moreIcon} {...iconStyle} />,
+  hangUp: <img src={hangUpIcon} {...iconStyle} />,
+  unhook: <img src={unhookIcon} {...iconStyle} />,
+  refresh: <img src={refreshIcon} {...iconStyle} />,
+  print: <img src={printIcon} {...iconStyle} />,
+  copy: <img src={copyIcon} {...iconStyle} />,
+  cancel: <img src={cancelIcon} {...iconStyle} />,
 };
 
 export default (props: any) => {
@@ -194,6 +210,7 @@ const DetailWrapper = React.memo(
           <Button
             type={type || 'primary'}
             icon={item.icon ? iconMap[item.icon] : ''}
+            style={item.icon ? {} : {}}
             danger={item.name === '删除' ? true : false}
             disabled={item.disabled}
             onClick={() => {
@@ -203,13 +220,15 @@ const DetailWrapper = React.memo(
                 doDetailPageAction(item.action);
               }
             }}
+            {...item?.buttomProps}
           >
             {item.name}
           </Button>
         );
       };
 
-      if (visibleActions.length <= 3) {
+      // 可在actionList第一项设置visibleActionCount，控制按钮几个开始显示更多，默认为3个
+      if (visibleActions.length <= (actionLists?.[0]?.visibleActionCount || 3)) {
         return visibleActions.map((item) => {
           return renderButton(item);
         });

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

@@ -85,7 +85,12 @@ export const getMainCrumbNameMap = (menuData) => {
 
   const flattenMenuData = (data, parent) => {
     let pNameMap = parent.nameMap ? [...parent.nameMap] : [];
-    data.forEach((menuItem) => {
+    data.forEach((menuItem) => { 
+      // 面包屑路径，增加显示一级导航路径显示
+      if(parent.isMenuRoot) {
+        const newList = (window.top||window)?.applicationList?.filter?.((app: any) => app.code === menuItem.belongAppCode) || [];
+        pNameMap = newList.length > 0 ? [newList[0].name] : [];
+      }
       let newMenuItem = {
         ...menuItem,
         nameMap: [...pNameMap, menuItem.name]
@@ -100,7 +105,7 @@ export const getMainCrumbNameMap = (menuData) => {
       };
     });
   };
-  flattenMenuData(menuData, {});
+  flattenMenuData(menuData,{ isMenuRoot: true });
   return routerMap;
 }
 

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

@@ -1,5 +1,5 @@
 .bs_home_page_head_wrapper{
-  height: 32px;
+  // 如果设置高度 需要考虑列表页引用有传提示参数alertProps情况，写死固定高度会导致提示遮挡筛选条件
   position: sticky;
   background: #fff;
   width: 100%;