@bit-sun/business-component 4.2.1-alpha.8 → 4.2.1-alpha.8-longya

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

@@ -138,6 +138,22 @@
       height: calc(100vh - 235px); // modal弹窗760 调整为700 适应小屏
       overflow: hidden;
     }
+    .search_select_current_page_filter_column {
+      min-width: 140px;
+
+      .ant-table-filter-column {
+        min-width: 108px;
+      }
+
+      .ant-table-column-title {
+        min-width: 64px;
+        white-space: nowrap;
+      }
+
+      .ant-table-filter-trigger {
+        flex: 0 0 32px;
+      }
+    }
     .ant-modal-footer {
       .ant-btn.ant-btn-default {
         color: @primary-color;

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

@@ -11,8 +11,6 @@ order: 3
 
 ## SearchSelect
 
-客户编码在不同销售组织下可能对应多条记录。此时可设置 `mappingValueField: 'id'` 作为选择器内部的唯一标识，同时设置 `mappingOutputField: 'code'`，使表单继续接收客户编码。`onChange` 的第二个参数保留选中记录，可读取其中的 `salesOrgCode`。仅需区分展示和选择的场景使用这两个配置；现有选择器默认行为不变。
-
 Demo:
 
 ```tsx

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import { useDebounceFn } from 'ahooks';
 import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag, Row, Col, Space, Tabs, Empty, DatePicker } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
@@ -19,6 +19,7 @@ import { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 import PropertySelector from '@/components/Business/PropertyModal';
 import ItemPropertySelector from '@/components/Business/ItemPropertySelector';
+import { buildCurrentPageFilterColumns, markCurrentPageFilterByDataIndex } from './currentPageFilter';
 
 const { Option } = Select;
 
@@ -53,7 +54,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     mappingTextField = 'name',
     mappingTextShowKeyField,
     mappingValueField = 'code',
-    mappingOutputField,
     mappingTextShowTextField,
     init = false,// 是否初始请求,默认初始不请求,查询需要限制录入4位数以上支持模糊查询
     extralHeaders = {},// 额外请求头参数
@@ -65,7 +65,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     isQuery = false, // 是否是查询条件
     requestType = 'get', // 自定义弹窗时候的查询方式 如果是post 并且需要所有参数都放在body里 需要设置此参数 && 兼容之前逻辑
   } = rCTemp || {};
-  const requestConfig = {url,method,otherParams,isMap,fixedparameter,fieldValToParam,fixedparamsDisabled,mappingTextField,mappingTextShowKeyField,mappingValueField,mappingOutputField,mappingTextShowTextField,init,extralHeaders,specialBracket,noNeedSplit,noOperate,viewShowValueStr,searchStartLength,...rCTemp};
+  const requestConfig = {url,method,otherParams,isMap,fixedparameter,fieldValToParam,fixedparamsDisabled,mappingTextField,mappingTextShowKeyField,mappingValueField,mappingTextShowTextField,init,extralHeaders,specialBracket,noNeedSplit,noOperate,viewShowValueStr,searchStartLength,...rCTemp};
   const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || ctx?.name || 'supplierCode')
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
@@ -108,30 +108,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const sDisabled = disabled || (isHaveDependency && !!!isHaveDValue() && !isQuery);
 
   const [items, setItems] = useState([]);
-  const selectedRecordsRef = useRef<any[]>([]);
-  const [, refreshSelectedRecords] = useState(0);
-
-  /**
-   * 使用记录标识维护选中状态，同时保留原有表单业务值。
-   */
-  const getSelectedRecords = () => {
-    if (!mappingOutputField || !value) return [];
-    const outputValues = selectMode ? value : [value];
-    const codes = new Set((Array.isArray(outputValues) ? outputValues : [outputValues]).map((item: any) => labelInValue ? item?.value ?? item?.key : item));
-    return [...codes].flatMap((code: any) => {
-      const cached = selectedRecordsRef.current.filter((item: any) => item[mappingOutputField] === code);
-      return cached.length ? cached : items.filter((item: any) => item[mappingOutputField] === code).slice(0, 1);
-    });
-  };
-
-  const getIdentityValue = () => {
-    if (!mappingOutputField) return value;
-    const keys = getSelectedRecords().map((item: any) => labelInValue
-      ? { key: item[mappingValueField], value: item[mappingValueField], label: item[mappingTextField] }
-      : item[mappingValueField]);
-    if (!keys.length) return value;
-    return selectMode ? keys : keys[0];
-  };
   const [selectOpen, setSelectOpen] = useState(false);
   const [isMaxTagsOpen, setIsMaxTagsOpen] = useState(false);
   const [scrollPage, setScrollPage] = useState(1);
@@ -174,11 +150,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const [tablePagination, setTablePagination] = useState(tableInitPagination)
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [selectedRows, setSelectedRows] = useState([]);
+  const selectedLookupVersion = useRef(0);
   const [checkedAll, setCheckedAll] = useState(false)
   const [indeterminate, setIndeterminate] = useState(false)
   const [tableFormParams, setTableFormParams] = useState({});
   const [tooltipVisible, setTooltipVisible] = useState(false);
   const [tableShowColumns, setTabletShowColumns] = useState(handleTableColumns(modalTableProps?.tableColumns)); // 默认展示表头-modalTableProps?.tableColumns
+  const [currentPageFilters, setCurrentPageFilters] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [modalSearched, setModalSearched]=useState(false);
 
@@ -224,7 +202,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const getData = (params = {}, type = 1,callback?: any) => {
     if (!requestConfig) return;
 
-    setFetching(true)
+    if (type !== 3) setFetching(true)
 
     // 处理dependence参数
     const fixedParam = {};
@@ -234,7 +212,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         if(fixedParamVal) {
           fixedParam[item] = fixedParamVal;
           // 解决依赖项在弹窗中回显/更改（如果不能更改，传参fixedparamsDisabled为true即可）
-          if(type == 2 || type == 3) {
+          if(type == 2) {
             const fixedChangeParamVal = form.getFieldValue(item);
             let isDependenceValueChange = false;
             let dependenceValue = fixedParamVal;
@@ -267,7 +245,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       ...fixedParam,
       ...params,
     };
-    if (isNil(queryParams[selectParamsKey])&&searchValue?.length) {
+    if (type !== 3 && isNil(queryParams[selectParamsKey])&&searchValue?.length) {
       queryParams[selectParamsKey] = searchValue?.trim?.();
     }
 
@@ -289,17 +267,20 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       getRequest = request.get( `${url}${convertUrlQueryParams(queryParams)}`,{headers: { ...extralHeaders }})
     }
 
-    if (!url || !getRequest) return;
+    if (!url || !getRequest) {
+      if (type !== 3) setFetching(false);
+      return;
+    }
 
     getRequest.then((result: any) => {
-        setFetching(false)
+        if (type !== 3) setFetching(false)
         result = result.data;
         if (judgeIsRequestError(result)) {
           message.error(result.msg);
           return;
         }
         const res = result.data;
-        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value: getIdentityValue(), type, items, queryParams, needTopSelectedSource });
+        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value, type, items, queryParams, needTopSelectedSource });
         
         if(callback) {
           callback(source)
@@ -308,12 +289,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             ctx?.form?.setFieldSource(resultSourceKey, source)
             setSelectDataSource(source,(Number(res?.total || res?.totalCount || source.length)))
           } else {
+            setCurrentPageFilters({});
             setTableData(source)
             setTablePagination({ ...tablePagination, total: Number(res?.total || res?.totalCount || source.length), pageSize: Number(res?.size || res?.pageSize || (params?.pageSize || pageSize)), current: Number(res?.page || res?.currentPage || (params?.currentPage || currentPage)) })
           }
         }
       })
-      .catch((err) => { setFetching(false) });
+      .catch((err) => { if (type !== 3) setFetching(false) });
   }
 
   const SelectScroll = e => {
@@ -439,15 +421,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     setTablePagination({ ...tableInitPagination, pageSize: cachedPageSize, current: 1 });
 
     setIsModalVisible(true);
-    if (mappingOutputField) {
-      const records = getSelectedRecords();
-      setSelectedRowKeys(records.map((item: any) => item[mappingValueField]));
-      setSelectedRows(records);
-      setPopValue(records);
-      setIndeterminate(!!records.length && records.length < itemsTotal);
-      setCheckedAll(!!itemsTotal && records.length === itemsTotal);
-      return;
-    }
     // 回显
     if (value) {
       if (selectMode) {
@@ -464,6 +437,19 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
       }
     }
+    /** 根据已选值查询完整记录，更新弹窗右侧的回显列。 */
+    const selectedValues = selectMode ? getShowValue(value) : value == null ? [] : [value];
+    const selectedKeys = selectedValues.map((item: any) => labelInValue ? (item?.key ?? item?.value) : item).filter((key: any) => key !== null && key !== undefined && key !== '');
+    const lookupKey = requestConfig?.filterInit?.endsWith?.('-in')
+      ? requestConfig.filterInit
+      : `qp-${mappingValueField}-in`;
+    const lookupVersion = ++selectedLookupVersion.current;
+    if (selectedKeys.length && url) {
+      getData({ [lookupKey]: selectedKeys.join(','), pageSize: Math.max(selectedKeys.length, tableInitPageSize), currentPage: 1 }, 3, (source: any[]) => {
+        if (lookupVersion !== selectedLookupVersion.current) return;
+        setSelectedRows((previous: any[]) => previous.map((row: any) => source.find((item: any) => String(item.value) === String(row.value)) || row));
+      });
+    }
   };
 
   const handleSelectOver = (selectedValue: any) => {
@@ -528,17 +514,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   };
 
   const formaData = (value: any, source: any) => {
-    if (mappingOutputField) {
-      selectedRecordsRef.current = value;
-      refreshSelectedRecords((current: number) => current + 1);
-    }
     if (labelInValue) {
       const getFromat = (format, val) => format.map(({key,value})=> ({[key]:val[value]}))
-      const formatResult = value.map((i: any) => (Object.assign({ key: i[mappingOutputField || mappingValueField] || i.key, label: i[mappingTextField] || i.label, value: i[mappingOutputField || mappingValueField] || i.value }, ...getFromat(returnFormat, i))))
-      onChange(selectMode ? mappingOutputField ? _.uniqBy(formatResult, 'value') : formatResult : formatResult[0], value,source)
+      const formatResult = value.map((i: any) => (Object.assign({ key: i[mappingValueField] || i.key, label: i[mappingTextField] || i.label, value: i[mappingValueField] || i.value }, ...getFromat(returnFormat, i))))
+      onChange(selectMode ? formatResult : formatResult[0], value,source)
     } else {
-      const formatResult = selectMode ? value.map((i: any) => mappingOutputField ? i[mappingOutputField] : i.value) : mappingOutputField ? value[0]?.[mappingOutputField] : _.get(value[0], 'value')
-      onChange(selectMode && mappingOutputField ? _.uniq(formatResult) : formatResult, value,source)
+      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
+      onChange(formatResult, value,source)
     }
   };
 
@@ -546,6 +528,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     form.resetFields();
     setTableFormParams({});
     setTableData([]);
+    setCurrentPageFilters({});
     setTablePagination(tableInitPagination);
     setSelectedRowKeys([]);
     setSelectedRows([]);
@@ -554,6 +537,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   };
 
   const handleCancel = () => {
+    selectedLookupVersion.current += 1;
     clearModalTable();
     setIsModalVisible(false);
   };
@@ -582,6 +566,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     const pageSize = normalizeSearchSelectModalPageSize(tablePagination?.pageSize);
     setModalSearched(true);
     setTableFormParams(params);
+    setCurrentPageFilters({});
     getData({ ...params, pageSize, currentPage: 1 }, 2, null);
   }
 
@@ -589,6 +574,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     const pageSize = normalizeSearchSelectModalPageSize(tablePagination?.pageSize);
     form.resetFields();
     setTableFormParams({});
+    setCurrentPageFilters({});
     getData({ pageSize, currentPage: 1 }, 2)
   }
 
@@ -596,9 +582,15 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     setCollapsed(!collapsed);
   };
 
-  const handleTableChange = (pagination) => {
+  const handleTableChange = (pagination, filters, sorter, extra) => {
+    if (extra?.action === 'filter') {
+      setCurrentPageFilters(filters || {});
+      return;
+    }
+
     const pageSize = normalizeSearchSelectModalPageSize(pagination.pageSize);
     setSearchSelectModalPageSize(pageSize);
+    setCurrentPageFilters({});
     getData({ ...tableFormParams, pageSize, currentPage: pagination.current }, 2)
   }
 
@@ -818,14 +810,47 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     const x = tableList?.length ? 82 : 28;  // 无数据没有分页，有数据计算减去：分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
     const oSY = `calc(100vh - ${tableBoxHeighth}px - ${x}px)`; 
     const mTB = `calc(50vh - ${tableBoxHeighth/2}px - ${x/2}px - 40px)`
+    const currentColumns = buildCurrentPageFilterColumns(
+      markCurrentPageFilterByDataIndex(tableShowColumns),
+      tableList,
+      currentPageFilters,
+      type !== 'noPage',
+    );
+    // 无 width 的列在固定 scroll.x 下会被挤没；先兜底宽度再按列宽求和
+    const DEFAULT_COLUMN_WIDTH = 120;
+    const columnsWithWidth = currentColumns.map((col: any) => {
+      if (typeof col?.width === 'number' && col.width > 0) {
+        return col;
+      }
+      if (typeof col?.width === 'string') {
+        const parsed = parseFloat(col.width);
+        if (Number.isFinite(parsed) && parsed > 0) {
+          return { ...col, width: parsed };
+        }
+      }
+      return { ...col, width: DEFAULT_COLUMN_WIDTH };
+    });
+    const sumColumnScrollX = (columns: any[], extraWidth = 0) => {
+      const sum = (columns || []).reduce(
+        (total: number, col: any) => total + (Number(col?.width) || DEFAULT_COLUMN_WIDTH),
+        extraWidth,
+      );
+      return sum > extraWidth ? sum : undefined;
+    };
+    const tableScrollX = modalTableProps.overScrollX
+      || sumColumnScrollX(columnsWithWidth, rowSelection ? 60 : 0)
+      || true;
     return (
       <div style={{ height: `calc(100vh - ${tableBoxHeighth}px)` }}> 
         <Table
           bordered
           size="middle"
           rowSelection={rowSelection}
-          columns={tableShowColumns}
+          columns={columnsWithWidth}
           dataSource={tableList}
+          getPopupContainer={(triggerNode) =>
+            modalTableProps?.getFilterPopupContainer?.(triggerNode) || document.body
+          }
           {...type=='noPage'?{
             pagination: { ...initPagination,showSizeChanger: false },
             locale: {
@@ -841,7 +866,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           }}
           rowKey={mappingValueField}
           scroll={{
-            x: modalTableProps.overScrollX || 'max-content',
+            x: tableScrollX,
             y: modalTableProps.overScrollY || oSY,
           }}
           onRow={(record) => {
@@ -882,7 +907,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }
 
   const onDeselect = (...arg) => {
-    const oldSelect = mappingOutputField ? getSelectedRecords() : formatSelectedValue(value);
+    const oldSelect = formatSelectedValue(value);
     const deRecord = arg[1];
     const srs = oldSelect.filter((s: any) => s.value != deRecord?.value)
     onSelectClick(srs, items,false)
@@ -906,7 +931,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     }
   }
   const renderTable = (dataSource) => {
-    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,getIdentityValue())
+    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
     const renderSource = getRenderSource(currentSRKs,items)
 
     return (
@@ -921,7 +946,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               selectedRowKeys: currentSRKs,
               preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
               onChange: (sks, srs) => {
-                const oldSelect = mappingOutputField ? getSelectedRecords() : formatSelectedValue(value);
+                const oldSelect = formatSelectedValue(value);
                 let tmpSelectedRows = oldSelect.concat(srs).filter(item => item != undefined);
                 let realSrs = sks.map(key => tmpSelectedRows.filter(item => item.value == key)[0]).filter(item => item != undefined)
                 onSelectClick(realSrs, dataSource,false)
@@ -932,7 +957,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 event.stopPropagation();
                 event.nativeEvent.stopImmediatePropagation();
 
-                const oldSelect = mappingOutputField ? getSelectedRecords() : formatSelectedValue(value);
+                const oldSelect = formatSelectedValue(value);
                 const newSelect = [JSON.parse(JSON.stringify(record))];
                 const srs = getRealStr(oldSelect,newSelect,record);
                 onSelectClick(srs,dataSource,false)
@@ -962,15 +987,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     );
   }
 
-  /**
-   * 折叠标签移除记录时，先按内部标识更新选中项，再回传业务值。
-   */
-  const onRemoveIdentityTag = (remainingValue: any) => {
-    const keys = getCurrentSRKs(selectMode, labelInValue, remainingValue);
-    const records = getSelectedRecords().filter((item: any) => keys.includes(item[mappingValueField]));
-    onSelectClick(records, items, false);
-  };
-
   const isShouldShowStr = (props.disabled && ctx) || ctx?.mode == 'view';
   return (
     <div className={'search_select'}>
@@ -985,8 +1001,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         </div>
       ) : (
         isShouldShowStr ?
-        (<div title={getShowStr({ viewShowValueStr, labelInValue, selectMode, value: getIdentityValue(), items })} style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} className={'search_select_show'}>
-          {getShowStr({viewShowValueStr, labelInValue, selectMode, value: getIdentityValue(), items })}
+        (<div title={getShowStr({ viewShowValueStr, labelInValue, selectMode, value, items })} style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} className={'search_select_show'}>
+          {getShowStr({viewShowValueStr, labelInValue, selectMode, value, items })}
         </div>) :
         <div
           className={`${isFormPage ? '' : 'search_select_show_list'} search_select_show`}
@@ -994,7 +1010,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         >
           <Select
             labelInValue={labelInValue}
-            value={getIdentityValue()}
+            value={value}
             onChange={onchange}
             onClear={onClear}
             onDeselect={onDeselect}
@@ -1015,7 +1031,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             onPopupScroll={SelectScroll}
             style={{ width: 'calc(100%)' }}
             placeholder="请选择"
-            maxTagPlaceholder={(v)=> maxTagPlaceholder(v,{ selectProps:{labelInValue}, onChange: mappingOutputField ? onRemoveIdentityTag : onChange, value: getIdentityValue(), setIsMaxTagsOpen })}
+            maxTagPlaceholder={(v)=> maxTagPlaceholder(v,{ selectProps:{labelInValue}, onChange, value, setIsMaxTagsOpen })}
             onSearch={(v) => onSearchChange(v)}
             {...(needModalTable ? {
               suffixIcon: <div className={`search_select_expand_button ${(sDisabled)?'search_select_expand_button_disabled':''}`} onClick={showModal}><SearchOutlined /></div>

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

@@ -1,11 +1,11 @@
-export const SEARCH_SELECT_MODAL_DEFAULT_PAGE_SIZE = 100;
+export const SEARCH_SELECT_MODAL_DEFAULT_PAGE_SIZE = 200;
 
-export const SEARCH_SELECT_MODAL_PAGE_SIZE_OPTIONS = [10, 20, 50, 100, 500, 1000];
+export const SEARCH_SELECT_MODAL_PAGE_SIZE_OPTIONS = [10, 20, 50, 100, 200, 300, 500, 1000];
 
 export const SEARCH_SELECT_MODAL_PAGE_SIZE_CACHE_KEY = 'businessComponentSearchSelectPageSize';
 
 /**
- * 规范化选择器弹窗分页大小，缓存异常时统一回退到每页 100 条。
+ * 规范化选择器弹窗分页大小，缓存异常时统一回退到默认条数。
  *
  * @param pageSize 待校验的分页大小
  * @returns 合法的分页大小
@@ -20,7 +20,7 @@ export const normalizeSearchSelectModalPageSize = (pageSize: unknown): number =>
 /**
  * 读取所有选择器弹窗共用的分页大小。
  *
- * @returns 缓存中的分页大小，无有效缓存时返回每页 100 条
+ * @returns 缓存中的分页大小，无有效缓存时返回默认条数
  */
 export const getSearchSelectModalPageSize = (): number => {
   if (typeof window === 'undefined') {