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

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } 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,8 +19,6 @@ 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';
-import QueryAutoComplete from '../QueryAutoComplete';
 
 const { Option } = Select;
 
@@ -55,6 +53,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     mappingTextField = 'name',
     mappingTextShowKeyField,
     mappingValueField = 'code',
+    mappingOutputField,
     mappingTextShowTextField,
     init = false,// 是否初始请求,默认初始不请求,查询需要限制录入4位数以上支持模糊查询
     extralHeaders = {},// 额外请求头参数
@@ -66,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,mappingTextShowTextField,init,extralHeaders,specialBracket,noNeedSplit,noOperate,viewShowValueStr,searchStartLength,...rCTemp};
+  const requestConfig = {url,method,otherParams,isMap,fixedparameter,fieldValToParam,fixedparamsDisabled,mappingTextField,mappingTextShowKeyField,mappingValueField,mappingOutputField,mappingTextShowTextField,init,extralHeaders,specialBracket,noNeedSplit,noOperate,viewShowValueStr,searchStartLength,...rCTemp};
   const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || ctx?.name || 'supplierCode')
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
@@ -109,6 +108,30 @@ 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);
@@ -156,7 +179,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   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);
 
@@ -277,7 +299,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           return;
         }
         const res = result.data;
-        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value, type, items, queryParams, needTopSelectedSource });
+        const source: any = convertResData(requestConfig, res, { selectMode, labelInValue, value: getIdentityValue(), type, items, queryParams, needTopSelectedSource });
         
         if(callback) {
           callback(source)
@@ -286,7 +308,6 @@ 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)) })
           }
@@ -418,6 +439,15 @@ 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) {
@@ -498,13 +528,17 @@ 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[mappingValueField] || i.key, label: i[mappingTextField] || i.label, value: i[mappingValueField] || i.value }, ...getFromat(returnFormat, i))))
-      onChange(selectMode ? formatResult : formatResult[0], value,source)
+      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)
     } else {
-      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
-      onChange(formatResult, value,source)
+      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)
     }
   };
 
@@ -512,7 +546,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     form.resetFields();
     setTableFormParams({});
     setTableData([]);
-    setCurrentPageFilters({});
     setTablePagination(tableInitPagination);
     setSelectedRowKeys([]);
     setSelectedRows([]);
@@ -549,7 +582,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     const pageSize = normalizeSearchSelectModalPageSize(tablePagination?.pageSize);
     setModalSearched(true);
     setTableFormParams(params);
-    setCurrentPageFilters({});
     getData({ ...params, pageSize, currentPage: 1 }, 2, null);
   }
 
@@ -557,7 +589,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     const pageSize = normalizeSearchSelectModalPageSize(tablePagination?.pageSize);
     form.resetFields();
     setTableFormParams({});
-    setCurrentPageFilters({});
     getData({ pageSize, currentPage: 1 }, 2)
   }
 
@@ -565,15 +596,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     setCollapsed(!collapsed);
   };
 
-  const handleTableChange = (pagination, filters, sorter, extra) => {
-    if (extra?.action === 'filter') {
-      setCurrentPageFilters(filters || {});
-      return;
-    }
-
+  const handleTableChange = (pagination) => {
     const pageSize = normalizeSearchSelectModalPageSize(pagination.pageSize);
     setSearchSelectModalPageSize(pageSize);
-    setCurrentPageFilters({});
     getData({ ...tableFormParams, pageSize, currentPage: pagination.current }, 2)
   }
 
@@ -729,19 +754,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             </Col>
           );
         }
-        if (i?.type === 'autoComplete' || i?.field?.type === 'autoComplete') {
-          return (
-            <Col span={ColSpan} key={i.name}>
-              <Form.Item name={i.name} label={i.label} key={i.name}>
-                <QueryAutoComplete
-                  onPressEnter={onSearchTable}
-                  disabled={setDisabled(i.name)}
-                  {...(i?.field?.props || {})}
-                />
-              </Form.Item>
-            </Col>
-          );
-        }
         if (i?.field?.type === 'proppertySelector') {
           return (
             <Col span={ColSpan} key={i.name}>
@@ -806,47 +818,14 @@ 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={columnsWithWidth}
+          columns={tableShowColumns}
           dataSource={tableList}
-          getPopupContainer={(triggerNode) =>
-            modalTableProps?.getFilterPopupContainer?.(triggerNode) || document.body
-          }
           {...type=='noPage'?{
             pagination: { ...initPagination,showSizeChanger: false },
             locale: {
@@ -862,7 +841,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           }}
           rowKey={mappingValueField}
           scroll={{
-            x: tableScrollX,
+            x: modalTableProps.overScrollX || 'max-content',
             y: modalTableProps.overScrollY || oSY,
           }}
           onRow={(record) => {
@@ -903,7 +882,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }
 
   const onDeselect = (...arg) => {
-    const oldSelect = formatSelectedValue(value);
+    const oldSelect = mappingOutputField ? getSelectedRecords() : formatSelectedValue(value);
     const deRecord = arg[1];
     const srs = oldSelect.filter((s: any) => s.value != deRecord?.value)
     onSelectClick(srs, items,false)
@@ -927,7 +906,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     }
   }
   const renderTable = (dataSource) => {
-    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,getIdentityValue())
     const renderSource = getRenderSource(currentSRKs,items)
 
     return (
@@ -942,7 +921,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               selectedRowKeys: currentSRKs,
               preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
               onChange: (sks, srs) => {
-                const oldSelect = formatSelectedValue(value);
+                const oldSelect = mappingOutputField ? getSelectedRecords() : 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)
@@ -953,7 +932,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 event.stopPropagation();
                 event.nativeEvent.stopImmediatePropagation();
 
-                const oldSelect = formatSelectedValue(value);
+                const oldSelect = mappingOutputField ? getSelectedRecords() : formatSelectedValue(value);
                 const newSelect = [JSON.parse(JSON.stringify(record))];
                 const srs = getRealStr(oldSelect,newSelect,record);
                 onSelectClick(srs,dataSource,false)
@@ -983,6 +962,15 @@ 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'}>
@@ -997,8 +985,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         </div>
       ) : (
         isShouldShowStr ?
-        (<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 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>) :
         <div
           className={`${isFormPage ? '' : 'search_select_show_list'} search_select_show`}
@@ -1006,7 +994,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         >
           <Select
             labelInValue={labelInValue}
-            value={value}
+            value={getIdentityValue()}
             onChange={onchange}
             onClear={onClear}
             onDeselect={onDeselect}
@@ -1027,7 +1015,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             onPopupScroll={SelectScroll}
             style={{ width: 'calc(100%)' }}
             placeholder="请选择"
-            maxTagPlaceholder={(v)=> maxTagPlaceholder(v,{ selectProps:{labelInValue}, onChange, value, setIsMaxTagsOpen })}
+            maxTagPlaceholder={(v)=> maxTagPlaceholder(v,{ selectProps:{labelInValue}, onChange: mappingOutputField ? onRemoveIdentityTag : onChange, value: getIdentityValue(), 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 = 200;
+export const SEARCH_SELECT_MODAL_DEFAULT_PAGE_SIZE = 100;
 
-export const SEARCH_SELECT_MODAL_PAGE_SIZE_OPTIONS = [10, 20, 50, 100, 200, 300, 500, 1000];
+export const SEARCH_SELECT_MODAL_PAGE_SIZE_OPTIONS = [10, 20, 50, 100, 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 缓存中的分页大小，无有效缓存时返回默认条数
+ * @returns 缓存中的分页大小，无有效缓存时返回每页 100 条
  */
 export const getSearchSelectModalPageSize = (): number => {
   if (typeof window === 'undefined') {