@bit-sun/business-component 4.0.12-alpha.2 → 4.0.12-alpha.21

package/src/components/Business/columnSettingTable/sulaSettingTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Table as SulaTable, request } from 'bssula';
 import { Resizable } from 'react-resizable';
 import ColumnSetting from './columnSetting';
@@ -9,8 +9,10 @@ import {
   Typography,
 } from 'antd';
 import ENUM from '@/utils/enumConfig';
-import { handleBssulaColumnsSpecialParams, parseWidth } from '@/utils/utils';
+import { handleBssulaColumnsSpecialParams, parseWidth, uuid } from '@/utils/utils';
+import TableSumComponent from './components/TableSumComponent';
 const { Text } = Typography;
+
 export default class ColumnSettingSulaTable extends React.Component {
   sulaTableRef: React.RefObject<unknown>;
   state: any;
@@ -126,21 +128,123 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   ResizeableTitle = (props: any) => {
     const { onResize, width, ...restProps } = props;
-
-    if (!width) {
-      return <th {...restProps} />;
-    }
+    
+    const [innerWidth, setInnerWidth] = useState(width);
+    const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
+    const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
+    const [startX, setStartX] = useState(0); // 初始X坐标
+    const markerPosition = useRef({ left: 0, top: 0 });
+    const currentStart = useRef(0);
+    const uuidref = useRef(uuid());
+    
+    const prevWidthRef = useRef(width);
+  
+    const handleMouseDown = (e: any) => {
+      currentStart.current = e.clientX;
+      markerPosition.current = { left: e.clientX, top: e.clientY }
+      setIsResizing(true);
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+  
+    const handleMouseMove = (e: any) => {
+      e.stopPropagation();
+      e.preventDefault();
+      // 更新标记位置
+      markerPosition.current = { left: e.clientX, top: e.clientY }
+      const dom: HTMLElement | null =  document.getElementById('text1');
+  
+      if (dom && dom.style) {
+        dom.style.left = `${e.clientX}px`;
+        dom.style.top = `${e.clientY - 20}px`;
+      }
+    };
+  
+    const handleMouseUp = (e: any) => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      setIsResizing(false);
+    };
+    
+    const handleresize = (e: any, data: any, title: string) => {
+      const newWidth = data?.size?.width || 0;
+      setInnerWidth(newWidth); // 更新内部分宽度
+    };
+  
+    const handleResizeStart = () => {
+      setIsResizing(true);
+    };
+  
+    const handleResizeStop = (e: any, data: any) => {
+      setIsResizing(false);
+      if (onResize) {
+        onResize(e, data);
+      }
+    };
+  
+    useEffect(() => {
+      if (width !== prevWidthRef.current) {
+        prevWidthRef.current = width;
+        setInnerWidth(width);
+      }
+    }, [width]);
+  
+    const thStyle = {
+      boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
+    };
+  
     return (
       <Resizable
-        width={width}
+        width={innerWidth}
         height={0}
-        onResize={onResize}
-        draggableOpts={{ enableUserSelectHack: false }}
+        handle={
+          <div>
+            <div
+          style={{
+            width: '10px',
+            height: '30px',
+            cursor: 'col-resize', // 拖动时改变鼠标样式
+            position: 'absolute',
+            zIndex: 10,
+            top: 0,
+            right: 0,
+          }}
+          onMouseDown={handleMouseDown}
+          // onDrag={handleDrag}
+        >
+        </div>
+        {isResizing && <div
+            id="text1"
+            style={{
+              position: 'fixed',
+              left: markerPosition.current.left, // 跟随鼠标偏移一点
+              top: markerPosition.current.top - 20,
+              backgroundColor: '#1890ff',
+              color: 'white',
+              borderRadius: '4px',
+              zIndex: 9999,
+              pointerEvents: 'none',
+              height: '40px',
+              width: 2
+            }}
+          >
+          </div>}
+          </div>
+        }
+        onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
+        onResizeStart={handleResizeStart}
+        onResizeStop={handleResizeStop}
+        draggableOpts={{
+          enableUserSelectHack: true,
+          grid: [20, 20],
+          axis: 'x',
+          bounds: 'parent',
+        }}
       >
         <th {...restProps} />
       </Resizable>
     );
-  }
+  };
 
   getTableScrollXWidth = (cols: any[]) => {
     if (cols.every((item: any) => item.width)) {
@@ -156,7 +260,7 @@ export default class ColumnSettingSulaTable extends React.Component {
       ...restProps,
     };
     let showSummary = null;
-    if (this.state.showColumns.length) {
+    if (this.state.showColumns.length && !Array.isArray(summary)) {
       if (summary && summary().diy) {
         showSummary = this.getTableSummaryInfo();
       } else {
@@ -197,7 +301,10 @@ export default class ColumnSettingSulaTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
-      summary: showSummary,
+      sticky: true,
+      ...(
+        showSummary ? { summary: showSummary } : {}
+      )
     }
     return (
       <div style={{ position: 'relative' }}>
@@ -223,6 +330,9 @@ export default class ColumnSettingSulaTable extends React.Component {
           ...otherTableInfo
           }
         />
+       {Array.isArray(summary) && (
+          <TableSumComponent summary={summary} />
+       )}
       </div >
     )
   }

package/src/components/Functional/SearchSelect/index.less

@@ -2,13 +2,43 @@
 @primary-color: #005cff;
 
 .search_select {
+  // 选择器 隐藏滚动条 横向滑动
+  .ant-select-selector{
+    height: 24px;
+    overflow: hidden;
+    .ant-select-selection-overflow{
+      height: 40px;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+    .ant-select-selection-overflow-item {
+      align-self: auto;
+    }
+  }
   &_show {
     display: flex;
 
+    .ant-select-dropdown {
+      top: 24px !important;
+      width: calc(150%) !important;
+    }
+
     // 下拉框清除图标位置调整
     .ant-select-clear {
       right: 33px;
     }
+
+    // 解决多选宽度不够 滑动会白一块的问题
+    .ant-select-multiple.ant-select-show-arrow .ant-select-selector, .ant-select-multiple.ant-select-allow-clear .ant-select-selector {
+      padding-right: 28px;
+    }
+  }
+
+  &_show.search_select_show_list {
+    .ant-select-dropdown {
+      top: 24px !important;
+      width: calc(141%) !important;
+    }
   }
 
   &_expand_button {
@@ -20,7 +50,6 @@
     cursor: pointer;
     font-size: 14px;
     font-weight: bolder;
-    background: #fafafa;
 
     span {
       position: absolute;
@@ -32,6 +61,8 @@
   &_expand_button:hover {
     background-color: @primary-color;
     color: #fff;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   &_expand_button_disabled:hover {
     background-color: transparent;
@@ -282,3 +313,11 @@
     height: 300px !important;
   }
 }
+
+.searchSelectMaxTagToolTip {
+  .ant-tooltip-inner {
+    max-height: 72px;
+    overflow-x: auto;
+    padding: 0px;
+  }
+}

package/src/components/Functional/SearchSelect/index.tsx

@@ -8,7 +8,7 @@ import { stringify } from 'querystring';
 import _, { escapeRegExp, isNil, values } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth }  from './utils';
+import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth, getCurrentSRKs, getRenderSource }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 
@@ -69,8 +69,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     listHeight: 160,
     optionLabelProp: "label",
     autoClearSearchValue: false,
-    placement: 'bottomLeft'
+    placement: 'bottomRight'
   }
+
+  const pathname = window.location.href;
+  var pattern = /(action|create|edit|view)/
+  const isFormPage = pathname.match(pattern)?.length > 0;
+
   const initPagination = { showQuickJumper: true, showSizeChanger: false, showTotal: (total: any) => `共 ${total} 条`, pageSize: tableInitPageSize }
   const tableInitPagination = { ...initPagination, total: 0, current: 1 }
   const disabled = noOperate || selectProps?.disabled || props?.disabled;
@@ -87,6 +92,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const [items, setItems] = useState([]);
   const [selectOpen, setSelectOpen] = useState(false);
+  const [isMaxTagsOpen, setIsMaxTagsOpen] = useState(false);
   const [scrollPage, setScrollPage] = useState(1);
   const [itemsTotal, setItemsTotal] = useState(0);
   const [fetching, setFetching] = useState(false);
@@ -368,7 +374,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
-                  keyIndex: index + 1,
+                  keyIndex: type != 1 ? ((queryParams?.currentPage - 1) * queryParams?.pageSize + index + 1) : (index+1),
                 };
               })
               : Array.isArray(res) &&
@@ -393,13 +399,20 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
-                  keyIndex: index + 1,
+                  keyIndex: type != 1 ? ((queryParams?.currentPage - 1) * queryParams?.pageSize + index + 1) : (index+1),
                 };
               })
             : [];
         }
+        // 补充搜索项--选中的数据添加到数据源中去
+        const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+        if(type === 1 && currentSRKs?.length && currentSRKs?.some(s=> !source?.find(r=> r.value==s))) {
+          const selectedOption = items.filter(option => currentSRKs?.includes(option.value))||[];
+          source = (source||[]).concat(selectedOption)
+        }
         // 数据源 不可以有重复key
         source = Array.isArray(source) ? _.uniqBy(source, 'value') : [];
+        
         if(callback) {
           callback(source)
         } else {
@@ -834,9 +847,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const renderShowTable =  (tableList, type) => {
     const tableBoxHeighth = getTableHeigth(modalTableProps?.tableSearchForm);
-    const oSY = `calc(100vh - 391px - 82px)`;  // 分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
+    const oSY = `calc(100vh - ${tableBoxHeighth}px - 82px)`;  // 分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
     return (
-      <div style={{ height: `calc(100vh - 391px)` }}> 
+      <div style={{ height: `calc(100vh - ${tableBoxHeighth}px)` }}> 
         <Table
           bordered
           size="middle"
@@ -889,7 +902,12 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }
 
   const onClear = () => {
+    // 执行父组件 onClear 事件
+    props?.onClear?.();
+    // 清空下拉框 / 弹窗 选中数据
     formaData([], items);
+    onChangeSelectedKeys([], [])
+    // 重置下拉框数据源
     resetSelectDataSource();
   }
 
@@ -905,13 +923,22 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }
 
   const onDropdownVisibleChange = (visible) => {
+    // 阻止maxTagPlaceholder点击事件触发下拉框展示事件
+    if(isMaxTagsOpen && !selectOpen) return; 
+    
     setSelectOpen(visible); 
     // 关闭下拉框 如果首次本身就不展示数据的 没有选中数据-需要清空查询数据源; 首次展示的默认展示
     if (!visible && !value?.length) {
-      resetSelectDataSource()
+      setTimeout(() => {
+        // 延时 是为了避免 执行时候出现下拉框弹两次的问题-可以看到数据源从展示到显示空数据框的问题
+        resetSelectDataSource()
+      }, 200)
     }
   }
   const renderTable = (dataSource) => {
+    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+    const renderSource = getRenderSource(currentSRKs,items)
+
     return (
       <div className={`search_select_dropdown_table ${!selectMode?'search_select_dropdown_table1':''}`}>
         <Table
@@ -921,7 +948,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             rowSelection: {
               type: 'checkbox',  
               columnWidth: '24px',
-              selectedRowKeys: labelInValue ? value?.map(s=> (s?.value||s)) : value,
+              selectedRowKeys: currentSRKs,
               preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
               onChange: (sks, srs) => {
                 const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
@@ -945,7 +972,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             rowSelection: {
               type: 'radio',
               columnWidth: 0,
-              selectedRowKeys: labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[],
+              selectedRowKeys: currentSRKs,
             },
             onRow: (record, rowKey) => ({
               onClick: event => {
@@ -955,7 +982,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             })
           })}
           columns={selectProps?.renderTableColumns||[]}
-          dataSource={items}
+          dataSource={renderSource}
           size="middle"
           pagination={false}
           rowKey={mappingValueField}
@@ -972,15 +999,33 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       onChange(newValue);
     }
     return (
-      <Tooltip title={selectedValues.map((i: any) => (
-        <Tag
-          closable={true}
-          onClose={(e) => onClose(e, i)}
-          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
-        >
-          {i.label}
-        </Tag>
-      ))}>
+      <Tooltip 
+        overlayClassName='searchSelectMaxTagToolTip'
+        destroyTooltipOnHide 
+        placement="topRight" 
+        autoAdjustOverflow={false} 
+        title={(
+          <div 
+            style={{ margin: '6px 8px 0px' }}
+            onMouseEnter={() => {
+              setIsMaxTagsOpen(true)
+            }}
+            onMouseLeave={() => {
+              setIsMaxTagsOpen(false)
+            }}
+          >
+            {selectedValues.map((i: any) => (
+              <Tag
+                closable={true}
+                onClose={(e) => onClose(e, i)}
+                style={{ margin: '0px 3px 3px 0px', background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+              >
+                {i.label}
+              </Tag>
+            ))}
+          </div>
+        )}
+      >
         {`+ ${selectedValues?.length}`}
       </Tooltip>
     )
@@ -1044,7 +1089,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           {getShowStr()}
         </div>) :
         <div
-          className="search_select_show"
+          className={`${isFormPage ? '' : 'search_select_show_list'} search_select_show`}
           id={`search_select_div_${uniqueValue}`}
         >
           <Select
@@ -1054,7 +1099,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             onClear={onClear}
             onDeselect={onDeselect}
             disabled={sDisabled}
-            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px' }}
+            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px'}}
             open={selectOpen}
             onDropdownVisibleChange={onDropdownVisibleChange}
             dropdownRender={(menu) => items?.length ? renderTable(items) : menu}
@@ -1076,7 +1121,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               suffixIcon: <div className={`search_select_expand_button ${(sDisabled)?'search_select_expand_button_disabled':''}`} onClick={showModal}><SearchOutlined /></div>
             } : {})}
             {...currentSelectProps}
-            getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
+            getPopupContainer={(triggerNode) => triggerNode.parentElement || getPopupContainer && getPopupContainer(triggerNode)}
           >
             {items.map(item => (
               <Option key={item.value} label={item.text}>

package/src/components/Functional/SearchSelect/utils.ts

@@ -4,6 +4,7 @@ export const handleSourceName = (sName: any) => {
   return sName
 }
 
+// ------------------------------------------处理样式相关--开始----------------------------------------
 export const getFormRowInfo = (list: any) => {
   const totalRows = Math.ceil(list.length / columnsPerRow); // 计算总行数
   const lastRowColumns = (list.length+1) % columnsPerRow; // 计算最后一行的实际列数
@@ -33,6 +34,41 @@ export const getRealStr = (oldSelect: any,newSelect: any, record: any) => {
 
 export const getTableHeigth = (list: any) => {
   const totalRows = Math.ceil((list?.length+1) / 4);
-  if(totalRows == 1) return 502;  // modal弹窗760 调整为700 适应小屏     
-  return 488 - totalRows*10
-}
+  if(totalRows == 1) return 358;  // modal弹窗760 调整为700 适应小屏     
+  return 411 - totalRows*10  
+}
+
+// ------------------------------------------处理样式相关--结束----------------------------------------
+
+
+// ------------------------------------------处理数据相关--开始----------------------------------------
+export const getCurrentSRKs = (selectMode: any,labelInValue:boolean,value: any) => {
+  return selectMode ? (labelInValue ? value?.map((s: any)=> (s?.value||s)) : value) : (labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[])
+}
+
+export const getRenderSource = (currentSRKs: any, items: any) => {
+  // 判空处理
+  if(!currentSRKs?.length) return items||[];
+
+  // 创建映射对象 用于记录原始选中顺序
+  const orderMap = new Map<number, number>();
+  currentSRKs?.forEach((value: any, index: number) => {
+    orderMap.set(value, index);
+  });
+
+  // 被选中数据集合，获取之后排序
+  const selectedOption = items?.filter((option: any) => currentSRKs?.includes(option.value))||[];
+  const selectedOptionSort = selectedOption?.sort((a: any, b: any) => {
+    return (orderMap.get(a.value) ?? Infinity) - (orderMap.get(b.value) ?? Infinity);
+  })||[];
+
+  // 未选中数据集合
+  const otherOptions = items?.filter((option: any) => !currentSRKs?.includes(option.value))||[];
+
+  return [
+    ...selectedOptionSort,
+    ...otherOptions
+  ]
+}
+
+// ------------------------------------------处理数据相关--结束----------------------------------------

package/src/styles/bsDefault.less

@@ -278,7 +278,6 @@ body {
 
     .ant-input-affix-wrapper {
       padding: 0 11px;
-      height: 24px;
     }
   }