@bit-sun/business-component 4.0.11 → 4.0.12-alpha.3

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

@@ -1,15 +1,16 @@
 // @ts-nocheck
 import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { useDebounceFn } from 'ahooks';
-import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag } from 'antd';
+import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag, Row, Col, Space, Tabs } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
 import request from '@/utils/request';
 import { stringify } from 'querystring';
-import _, { escapeRegExp, isNil } from "lodash"
+import _, { escapeRegExp, isNil, values } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { handleSourceName }  from './utils';
+import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
+import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 
 const { Option } = Select;
 
@@ -27,6 +28,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     needModalTable = true,
     getPopupContainer = undefined,
     fieldComponent,
+    onSaveCallback,
     selectBusinessType,
   } = props;
   const {
@@ -40,33 +42,51 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     mappingTextShowKeyField,
     mappingValueField = 'code',
     mappingTextShowTextField,
-    init = true,// 是否初始请求
+    init = false,// 是否初始请求,默认初始不请求,查询需要限制录入4位数以上支持模糊查询
     extralHeaders = {},// 额外请求头参数
     specialBracket = false,// 是否使用特殊括弧显示选项 【value】text
     noNeedSplit = false,// label显示不需要任何特殊化
+    noOperate, // 级联禁用按钮设置字段
+    viewShowValueStr, // 详情展示值,不传展示组件处理的默认值
+    searchStartLength, // 默认不校验长度去搜索，如果配置了，则按照配置项长度进行处理搜索
   } = requestConfig || {};
   const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || ctx?.name || 'supplierCode')
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
   const initVal = value || (selectMode ? [] : null);
   const pageSize = 100 // 下拉框默认分页 条数
-  const tableInitPageSize = 10 // 弹框默认分页 条数
+  const tableInitPageSize = 20 // 弹框默认分页 条数
   const currentPage = 1
   const selectParamsKey = requestConfig?.filter || 'qp-codeAndName-like'
   const selectParamsInitKey = requestConfig?.filterInit || selectParamsKey
   const currentSelectProps = {
     ...selectProps,
     // 以下属性不可更改----设计配置项
-    showSearch: false,
+    showArrow: true,
+    showSearch: true,
     filterOption: false,
     allowClear: true,
     listHeight: 160,
     optionLabelProp: "label",
-    autoClearSearchValue: false
+    autoClearSearchValue: false,
+    placement: 'bottomLeft'
   }
-  const tableInitPagination = { showQuickJumper: true, total: 0, current: 1, pageSize: tableInitPageSize }
+  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;
+  const isHaveDependency = fixedparameter && fieldValToParam && ctx;
+  const isHaveDValue = () => {
+    let formValueList = [];
+    fieldValToParam.forEach((item: any, index: any) => {
+      const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
+      formValueList.push(fixedParamVal);
+    });
+    return formValueList.filter((item: any) => item).length > 0
+  }
+  const sDisabled = disabled || (isHaveDependency && !!!isHaveDValue());
 
   const [items, setItems] = useState([]);
+  const [selectOpen, setSelectOpen] = useState(false);
   const [scrollPage, setScrollPage] = useState(1);
   const [itemsTotal, setItemsTotal] = useState(0);
   const [fetching, setFetching] = useState(false);
@@ -101,6 +121,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   );
 
   const [form] = Form.useForm();
+  const [collapsed, setCollapsed] = useState(true);
   const [caretLeftFlag, setCaretLeftFlag] = useState(true);
   const [tableData, setTableData] = useState([]);
   const [tablePagination, setTablePagination] = useState(tableInitPagination)
@@ -110,33 +131,45 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const [indeterminate, setIndeterminate] = useState(false)
   const [tableFormParams, setTableFormParams] = useState({});
   const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [tableShowColumns, setTabletShowColumns] = useState(modalTableProps?.tableColumns?.filter(s => typeof s.defaultSort == 'number')?.sort((a,b)=> a.defaultSort-b.defaultSort)||[]);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [modalSearched, setModalSearched]=useState(false);
+
+  const setSelectDataSource = (list,total: number) => {
+    setItems(list);
+    setItemsTotal(total);
+  }
+  const clearSelectDataSource = () => {
+    setSelectDataSource([],0)
+  }
 
   useImperativeHandle(ref, () => ({
     refreshDataSource: (reset: boolean = false) => {
       if (reset) {
         if (init) {
+          // 有关联，依赖项清空，此form项数据源也应清空, 也不可点击搜索
+          if(isHaveDependency){
+            clearSelectDataSource();
+            return;
+          }
           run('init');
         } else {
-          setItems([]);
-          setItemsTotal(0);
+          clearSelectDataSource();
         }
       } else {
         run();
       }
     },
-    clearDataSource: () => {
-      setItems([]);
-      setItemsTotal(0);
-    },
+    clearSelectDataSource:clearSelectDataSource,
     getTableFormRef: () => form,
     // 解决下拉框数据源的问题
     getSelectDataSource: () => items,
-    setSelectDataSource: (list: any, listTotal: number) => {
-      setItems(list);
-      setItemsTotal(listTotal);
-    },
+    setSelectDataSource,
     refreshSelectDataSource: () => {
       refreshItems()
+    },
+    handleModalVisible: (flag) => {
+      if (flag) { showModal(); } else { handleCancel(); }
     }
   }))
 
@@ -148,7 +181,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
     // 处理dependence参数
     const fixedParam = {};
-    if (fixedparameter && fieldValToParam && ctx) {
+    if (isHaveDependency) {
       fixedparameter.forEach((item: any, index: any) => {
         const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
         if(fixedParamVal) {
@@ -314,7 +347,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           const keys = res.list ? 'list' : 'items';
           source = res
             ? res[keys]
-              ? res[keys].map((item: any) => {
+              ? res[keys].map((item: any, index: number) => {
                 let textShowText = item[mappingTextField]
                 if (mappingTextShowTextField) {
                   textShowText = []
@@ -326,6 +359,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                     textShowText = item[mappingTextShowTextField]
                   }
                 }
+                if(!item?.children?.length) {delete item?.children};
                 return {
                   ...item,
                   text: specialBracket
@@ -334,10 +368,11 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
+                  keyIndex: index + 1,
                 };
               })
               : Array.isArray(res) &&
-              res?.map((item: Record<string, any>) => {
+              res?.map((item: Record<string, any>, index: number) => {
                 let textShowText = item[mappingTextField]
                 if (mappingTextShowTextField) {
                   textShowText = []
@@ -349,6 +384,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                     textShowText = item[mappingTextShowTextField]
                   }
                 }
+                if(!item?.children?.length) {delete item?.children};
                 return {
                   ...item,
                   text: specialBracket
@@ -357,18 +393,19 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
+                  keyIndex: index + 1,
                 };
               })
             : [];
         }
-        source = Array.isArray(source) ? source : []
+        // 数据源 不可以有重复key
+        source = Array.isArray(source) ? _.uniqBy(source, 'value') : [];
         if(callback) {
           callback(source)
         } else {
           if (type === 1) {
             ctx?.form?.setFieldSource(resultSourceKey, source)
-            setItems(source)
-            setItemsTotal(Number(res?.total || res?.totalCount || source.length))
+            setSelectDataSource(source,(Number(res?.total || res?.totalCount || source.length)))
           } else {
             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 +455,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     if (init) {
       run('init')
     }
+    // 编辑/详情页面回显
+    if(!init && !!value && ['edit','view'].includes(ctx?.mode)) {
+      run('init')
+    }
   }, [])
 
   useEffect(() => {
@@ -432,14 +473,43 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   useEffect(() => {
     if (init) {
-      setItems([]);
-      setItemsTotal(0);
+      clearSelectDataSource();
       run('init')
     }
   },[selectBusinessType])
 
+  // 处理键盘事件
+  const handleKeyPress = (event) => {
+    if ((event.metaKey || event.ctrlKey) && (event.key === 'U' || event.keyCode == 85)) {
+      // ctrl + U 键 重置
+      onResetTable()
+    } else if (event.key === 'Enter' || event.keyCode == 13) {
+      // Enter 键 查询
+      onSearchTable()
+    }
+  };
+  useEffect(() => {
+    const removeListener = () => {
+        // 组件卸载时移除事件监听
+        document.removeEventListener('keydown', handleKeyPress);
+    }
+    if(isModalVisible) {
+      document.addEventListener('keydown', handleKeyPress);
+    } else {
+      removeListener()
+    }
+    return () => {
+      removeListener()
+    };
+  },[isModalVisible])
+
   const showModal = () => {
-    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 3)
+    if(sDisabled) return;
+    
+    setSelectOpen(false)
+    setSearchValue('');
+    setModalSearched(false);
+
     setIsModalVisible(true);
     // 回显
     if (value) {
@@ -461,21 +531,54 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const handleSelectOver = (selectedValue: any) => {
     if (selectedValue?.length) {
       // 解决选择最后1页的sku，返回后，不显示名称问题
-      const source = _.uniqBy(items.concat(selectedValue), 'value')
-      ctx?.form?.setFieldSource(resultSourceKey, source)
-      setItems(source)
+      updateSelectDataSource(selectedValue)
       formaData(selectedValue, source);
     } else {
       const formatResult = selectMode ? [] : null
       onChange(formatResult, selectedValue)
     }
   }
+  const handleOk = (sValue?:any) => {
+    const pValue = sValue || popvalue
+    // 按钮保存可传入
+    if(onSaveCallback) {
+      setConfirmLoading(true)
+      onSaveCallback(pValue).then(res => {
+        if(true) {
+          // 成功信息可以在调用处处理 即resolve({messageSuccessBackInfo: { needThrowSuccess: false } })、resolve({messageSuccessBackInfo: { needThrowSuccess: true, successMessage: '已保存' } })
+          let initSuccessMessage = '保存成功'
+          const rmsbi = res?.messageSuccessBackInfo || {};
+          if(rmsbi && Object.keys(rmsbi)?.length){
+            rmsbi?.needThrowSuccess ? message.success(rmsbi?.successMessage || initSuccessMessage) : null
+          } else {
+            message.success(initSuccessMessage)
+          }
+          handleCancel();
+        } else {
+        }
+        setConfirmLoading(false)
+      }).catch(Error => {
+        if(typeof Error === 'object') {
+          !Error.needThrowError ? null : message.error(Error.message)
+        } else {
+          message.error(Error);
+        }
+        setConfirmLoading(false)
+      })
+    } else {
+      handleSelectOver(pValue)
+      handleCancel();
+    }
+  };
 
-  const handleOk = () => {
-    handleSelectOver(popvalue)
-    handleCancel();
+  // 更新选中数据位置
+  const updateSelectDataSource = (selectedValues) => {
+    const nSource = _.uniqBy(selectedValues.concat(items), 'value')
+    ctx?.form?.setFieldSource(resultSourceKey, nSource)
+    setSelectDataSource(nSource,nSource?.length)
   };
 
+  // 下拉框 / 弹窗 选中数据之后 最终都会执行此函数
   const formaData = (value: any, source: any) => {
     if (labelInValue) {
       const formatResult = value.map((i: any) => ({ key: i[mappingValueField] || i.key, label: i[mappingTextField] || i.label, value: i[mappingValueField] || i.value }))
@@ -500,47 +603,35 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const handleCancel = () => {
     clearModalTable();
     setIsModalVisible(false);
-    if (selectMode) {
-      run();
-    }
   };
 
   const refreshItems = () => {
     // 查看是否存在关联值 如果有关联值 就查询 没有就不能查询
     if (fieldValToParam && ctx && fixedparamsDisabled) {
-      let formValueList = [];
-      fieldValToParam.forEach((item: any, index: any) => {
-        const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
-        formValueList.push(fixedParamVal);
-      });
-      if (formValueList.filter((item: any) => item).length > 0) {
+      if (!!isHaveDValue()) {
         run();
       } else {
-        setItems([]);
-        setItemsTotal(0);
+        clearSelectDataSource();
       }
     } else {
       run();
     }
   }
 
-  const onSearchChange = (e) => {
-    setSearchValue(e.target.value);
-    refreshItems();
-  }
-
-  const onSearchBlur = () => {
-    setSearchValue('');
+  const onSearchChange = (v) => {
+    setSearchValue(v);
+    if(!!searchStartLength && v?.length < searchStartLength) return;
     refreshItems();
   }
 
   const onSearchTable = () => {
     const params = form.getFieldsValue();
+
+    // const isHaveParams = params && Object.keys(params).filter(item => params[item]).length > 0;
+    setModalSearched(true);
+
     setTableFormParams(params);
     getData({ ...params, pageSize: tableInitPageSize }, 2)
-    if (selectMode) {
-      getData(params)
-    }
   }
 
   const onResetTable = () => {
@@ -549,49 +640,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
   }
 
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+
   const handleTableChange = (pagination) => {
     getData({ ...tableFormParams, pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
   }
-
-  const onCheckAllData = (pSize) => {
-    getData({ ...tableFormParams, pageSize: pSize, currentPage: 1 }, 2,(source) => {
-      const currentItemsData = JSON.parse(JSON.stringify(source))
-      setSelectedRowKeys(currentItemsData.map(i => i.value))
-      setPopValue(currentItemsData);
-      setSelectedRows(currentItemsData)
-    })
-  }
-
-  const onChangeCheckAll = (e) => {
-    // 允许用户自定义 全选操作逻辑
-    if(modalTableProps?.onCheckAll) {
-      modalTableProps?.onCheckAll(e,{items,itemsTotal,tablePagination,onCheckAllData,setSelectedRowKeys,setPopValue,setSelectedRows,setIndeterminate,setCheckedAll})
-      return;
-    }
-
-    if (e.target.checked) {
-      // 如果下拉框有所有数据就处理选中所有【items.length === itemsTotal】(最多可选100条)
-      // 如果超过100条 就默认查出所有数据
-      if ((items.length < itemsTotal) || (items.length === itemsTotal && itemsTotal == 0)) {
-        const totalCount = tablePagination?.total || itemsTotal // 兼容有查询条件的情况 首次加载是没有所有数据的，默认给加载后端返回的总条数
-        const totalPage = Math.ceil(totalCount / tablePagination?.pageSize);
-        const allPageSize = totalPage * tablePagination?.pageSize;
-        onCheckAllData(allPageSize)
-      } else {
-        const currentItemsData = JSON.parse(JSON.stringify(items))
-        setSelectedRowKeys(currentItemsData.map(i => i.value))
-        setPopValue(currentItemsData);
-        setSelectedRows(currentItemsData)
-      }
-    } else {
-      setSelectedRowKeys([])
-      setPopValue([]);
-      setSelectedRows([])
-    }
-    setIndeterminate(false);
-    setCheckedAll(e.target.checked);
-  }
-
   const LightHeightOption = (props) => {
     const {
       filterTxt, text,
@@ -634,12 +689,11 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   };
 
   const onChangeSelectedKeys = (selectKeys, selectRows) => {
-    let sksResult = selectRows.map((i) => i.value);
+    let sksResult = selectRows?.map((i) => i.value)||[];
 
     // 单选 默认直接选中 不需要确定  配置了modalRadioNeedFooter就需要确定
     if(!selectMode && !modalTableProps?.modalRadioNeedFooter) {
-      handleSelectOver(selectRows)
-      handleCancel();
+      handleOk(selectRows)
     }
 
     setSelectedRowKeys(sksResult)
@@ -669,13 +723,23 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     },
     getCheckboxProps: selectProps?.getCheckboxProps ? selectProps?.getCheckboxProps : () => {
       return ({
-        disabled: selectProps?.disabled || props?.disabled || (!items.length && !tableData.length),
+        disabled: disabled || (!items.length && !tableData.length),
       })
     },
   };
 
-  const onDoubleClickSelect = (e, record) => {
-    if (!selectMode && !(selectProps?.disabled || props?.disabled || (!items.length && !tableData.length))) {
+  const onRowClickSelect = (e, record,type) => {
+    if (selectMode && !(disabled || (!items.length && !tableData.length))) {
+      const oldSelect = selectedRows;
+      const newSelect = [JSON.parse(JSON.stringify(record))];
+      const srs = getRealStr(oldSelect,newSelect,record);
+      const sks = srs.map((i: any) => i.value)
+
+      onChangeSelectedKeys(sks, srs)
+    }
+  }
+  const onDoubleClickSelect = (e, record,type) => {
+    if (!selectMode && !(disabled || (!items.length && !tableData.length))) {
       const srs = [JSON.parse(JSON.stringify(record))]
       const sks = srs.map((i: any) => i.value)
       onChangeSelectedKeys(sks, srs)
@@ -693,40 +757,49 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           return false
         }
       };
-      return list.map((i: any) => {
+
+      const { emptyArray } = getFormRowInfo(list);
+      const addKong = emptyArray?.map((i: any) =>({ type: 'kong'}))||[];
+      return list?.concat(addKong)?.map((i: any, index: number) => {
+        if(i?.type === 'kong') return <Col span={ColSpan} key={i}></Col>;
+
         if (i?.type === 'select' || i?.field?.type === 'select') {
           return (
-            <Form.Item name={i.name} label={i.label} key={i.name}>
-              <Select style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}>
-                {i?.initialSource?.length && i?.initialSource.map((m: any) => (
-                  <Option value={m.value} key={m.value}>{m.text}</Option>
-                ))}
-              </Select>
-            </Form.Item>
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <Select style={{ width: '100%' }} placeholder='请选择' onDeselect	={v => onSearchTable()} {...i?.field?.props} disabled={setDisabled(i.name)}>
+                  {i?.initialSource?.length && i?.initialSource.map((m: any) => (
+                    <Option value={m.value} key={m.value}>{m.text}</Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col>
           )
         }
 
         if (i?.type === 'treeSelect' || i?.field?.type === 'treeSelect') {
           return (
-            <Form.Item name={i.name} label={i.label} key={i.name}>
-              <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}></TreeSelect>
-            </Form.Item>
+            <Col span={ColSpan} key={i.name}>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}></TreeSelect>
+              </Form.Item>
+            </Col>
           )
         }
 
         if (i?.type === 'businessSearchSelect' || i?.field?.type === 'businessSearchSelect') {
           return (
-            <div>
+            <Col span={ColSpan} key={i.name}>
               <Form.Item name={i.name} label={i.label} key={i.name}>
                 <BusinessSearchSelect {...i.field.props} disabled={setDisabled(i.name)} />
               </Form.Item>
-            </div>
+            </Col>
           )
         }
 
         if (i?.type === 'multipleQueryInput' || i?.field?.type === 'multipleQueryInput') {
           return (
-            <div>
+            <Col span={ColSpan} key={i.name}>
               <Form.Item name={i.name} label={i.label} key={i.name}>
                 <QueryMutipleInput onValueChange={(value) => {
                   form.setFieldsValue({
@@ -734,15 +807,17 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   })
                 }} />
               </Form.Item>
-            </div>
+            </Col>
           );
         }
 
         // 默认type是input
         return (
-          <Form.Item name={i.name} label={i.label} key={i.name}>
-            <Input style={{ width: '100%' }} placeholder='请输入' allowClear maxLength={100}  {...i?.field?.props} disabled={setDisabled(i.name)} />
-          </Form.Item>
+          <Col span={ColSpan} key={i.name}>
+            <Form.Item name={i.name} label={i.label} key={i.name}>
+              <Input style={{ width: '100%' }} placeholder='请输入' allowClear maxLength={100}  {...i?.field?.props} disabled={setDisabled(i.name)} />
+            </Form.Item>
+          </Col>
         )
       })
     } else {
@@ -750,6 +825,157 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     }
   }
 
+  const renderFormItem = (list) => {
+    const viCount = modalTableProps?.visibleFieldsCount || defaultVisibleFieldsCount;
+    return collapsed ? formItem(list?.slice(0,viCount)) : formItem(list)
+  }
+
+  // const queryFieldsDom = <SearchItemTable
+  //   ref={searchTableRef}
+  //   setShowSearchFields={setShowSearchFields||[]}
+  //   showSearchFields={showSearchFields||[]}
+  //   datasource={modalTableProps?.tableSearchForm || []}
+  //   bsTableCode={bsTableCode}
+  // />
+
+  const renderShowTable =  (tableList, type) => {
+    const tableBoxHeighth = getTableHeigth(modalTableProps?.tableSearchForm);
+    const oSY = `calc(100vh - ${tableBoxHeighth}px - 82px)`;  // 分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
+    return (
+      <div style={{ height: `calc(100vh - ${tableBoxHeighth}px)` }}> 
+        <Table
+          bordered
+          size="middle"
+          rowSelection={rowSelection}
+          columns={tableShowColumns}
+          dataSource={tableList}
+          {...type=='noPage'?{
+            pagination: initPagination,
+            locale: {
+              emptyText: '暂无已选结果',
+            }
+          }:{
+            pagination: tablePagination,
+            onChange: handleTableChange,
+            loading: fetching,
+            locale: {
+              emptyText: modalSearched? '无匹配结果,请更换其他内容再试' : '请输入搜索条件',
+            }
+          }}
+          rowKey={mappingValueField}
+          scroll={{
+            x: modalTableProps.overScrollX || 'max-content',
+            y: modalTableProps.overScrollY || oSY,
+          }}
+          onRow={(record) => {
+            return {
+              onClick: event => onRowClickSelect(event, record), // 点击行
+              onDoubleClick: (event) =>
+                onDoubleClickSelect(event, record),
+            };
+          }}
+        />
+      </div>
+    )
+  }
+
+  const tabsItems1 = [
+    { label: `全部（${tablePagination?.total || 0}）`, key: 'all', children: renderShowTable(tableData) }, // 务必填写 key
+  ];
+  const tabsItems2 = [
+    { label: `已选（${selectedRowKeys?.length || 0}）`, key: 'selected', children: renderShowTable(selectedRows?.map((s,index)=> ({...s,keyIndex:index+1}))||[],'noPage')  },
+  ];
+
+  const resetSelectDataSource = () => {
+    setSearchValue('');
+    // 有关联值 不需要清空下拉框数据 也不需要重新去请求了
+    if(isHaveDependency) return;
+    clearSelectDataSource();
+    init && run('init')
+  }
+
+  const onClear = () => {
+    // 执行父组件 onClear 事件
+    props?.onClear?.();
+    // 清空下拉框 / 弹窗 选中数据
+    formaData([], items);
+    onChangeSelectedKeys([], [])
+    // 重置下拉框数据源
+    resetSelectDataSource();
+  }
+
+  const onDeselect = (...arg) => {
+    const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+    const deRecord = arg[1];
+    const srs = oldSelect.filter((s: any) => s.value != deRecord?.value)
+    onSelectClick(srs, items,false)
+  }
+  const onSelectClick = (srs, ds,nr=true) => {
+    formaData(srs, ds);
+    nr && setSelectOpen(false);
+  }
+
+  const onDropdownVisibleChange = (visible) => {
+    setSelectOpen(visible); 
+    // 关闭下拉框 如果首次本身就不展示数据的 没有选中数据-需要清空查询数据源; 首次展示的默认展示
+    if (!visible && !value?.length) {
+      resetSelectDataSource()
+    }
+  }
+  const renderTable = (dataSource) => {
+    return (
+      <div className={`search_select_dropdown_table ${!selectMode?'search_select_dropdown_table1':''}`}>
+        <Table
+          virtual
+          bordered
+          {...(selectMode?{
+            rowSelection: {
+              type: 'checkbox',  
+              columnWidth: '24px',
+              selectedRowKeys: labelInValue ? value?.map(s=> (s?.value||s)) : value,
+              preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
+              onChange: (sks, srs) => {
+                const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+                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)
+              }
+            },
+            onRow: (record, rowKey) => ({
+              onClick: event => {
+                event.stopPropagation();
+                event.nativeEvent.stopImmediatePropagation();
+
+                const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+                const newSelect = [JSON.parse(JSON.stringify(record))];
+                const srs = getRealStr(oldSelect,newSelect,record);
+                onSelectClick(srs,dataSource,false)
+              }, // 点击行
+            })
+          }:{
+            rowSelection: {
+              type: 'radio',
+              columnWidth: 0,
+              selectedRowKeys: labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[],
+            },
+            onRow: (record, rowKey) => ({
+              onClick: event => {
+                const srs = [JSON.parse(JSON.stringify(record))]
+                onSelectClick(srs,dataSource)
+              }, // 点击行
+            })
+          })}
+          columns={selectProps?.renderTableColumns||[]}
+          dataSource={items}
+          size="middle"
+          pagination={false}
+          rowKey={mappingValueField}
+          scroll={{ x: 'max-content', y: 288 }}
+        />
+      </div>
+    );
+  }
+
   const maxTagPlaceholder = (selectedValues) => {
     const onClose = (e: any, item: any) => {
       e.preventDefault();
@@ -799,6 +1025,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     return (getSelectValueText(value) || kongValue) as string;
   }
   const getShowStr = () => {
+    // 优先使用业务使用传入的展示
+    if(viewShowValueStr) return viewShowValueStr;
+
     const kongValue = '无'
     // 先判断labelInValue与否，labelInValue可以直接去value中获取字段名称，否则去下拉框数据里面去拿；
     // 再判断是单选还是多选，数据类型不同取值方式也不同
@@ -808,7 +1037,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     return getShowValueStr(kongValue);
   }
 
-  const isShouldShowStr = props.disabled && ctx
+  const isShouldShowStr = (props.disabled && ctx) || ctx?.mode == 'view';
   return (
     <div className={'search_select'}>
       {fieldComponent ? (
@@ -830,44 +1059,33 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           id={`search_select_div_${uniqueValue}`}
         >
           <Select
-            virtual
             labelInValue={labelInValue}
             value={value}
-            onChange={onChange}
-            disabled={props.disabled}
-            dropdownRender={(menu) => (
-              <>
-                <Input
-                  value={searchValue}
-                  style={{ width: '98%', marginLeft: '1%' }}
-                  placeholder="请输入"
-                  onChange={(e) => onSearchChange(e)}
-                  onBlur={onSearchBlur}
-                  onKeyDown={(e) => {
-                    //  阻止多选的冒泡
-                    e.stopPropagation();
-                  }}
-                />
-                <Divider style={{ margin: '8px 0' }} />
-                {menu}
-              </>
-            )}
+            onChange={onchange}
+            onClear={onClear}
+            onDeselect={onDeselect}
+            disabled={sDisabled}
+            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px' }}
+            open={selectOpen}
+            onDropdownVisibleChange={onDropdownVisibleChange}
+            dropdownRender={(menu) => items?.length ? renderTable(items) : menu}
             notFoundContent={
               fetching ? (
                 <Spin size="small" className='searchSelectSpin' />
               ) : (
                 <div style={{ textAlign: 'center' }}>
-                  <div style={{ marginBottom: 16 }}>
-                    <CopyOutlined style={{ fontSize: '50px' }} />
-                  </div>
-                  <div>无匹配结果，请更换其他内容再试</div>
+                  <div>{(searchValue||init||isHaveDependency)?'无匹配结果,请更换其他内容再试':`请录入${searchStartLength?'4位数以上':''}字符进行模糊查询`}</div>
                 </div>
               )
             }
             onPopupScroll={SelectScroll}
-            style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
+            style={{ width: 'calc(100%)' }}
             placeholder="请选择"
             maxTagPlaceholder={maxTagPlaceholder}
+            onSearch={(v) => onSearchChange(v)}
+            {...(needModalTable ? {
+              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}
           >
@@ -880,22 +1098,16 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               </Option>
             ))}
           </Select>
-          {needModalTable && (
-            <Button
-              style={{ width: '30px', padding: '2px'}}
-              onClick={showModal}
-              type="primary"
-            >
-              <SearchOutlined />
-            </Button>
-          )}
         </div>
       )}
       {needModalTable && isModalVisible && (
         <Modal
+          maskClosable={false}
+          destroyOnClose
           width="80%"
           title={modalTableProps?.modalTableTitle}
           visible={isModalVisible}
+          confirmLoading={confirmLoading}
           onOk={handleOk}
           onCancel={handleCancel}
           footer={
@@ -907,129 +1119,54 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   <Button
                     key="submit"
                     type="primary"
+                    loading={confirmLoading}
                     onClick={handleOk}
-                    disabled={
-                      !tableData.length ||
-                      selectProps?.disabled ||
-                      props?.disabled
-                    }
+                    disabled={sDisabled}
                   >
                     确定
                   </Button>,
                 ]
               : null
           }
+          wrapClassName={'search_select_modal_wrapper'}
           {...(modalTableProps?.modalProps || {})}
         >
           <div className={'search_select_wrapper'}>
-            <div
-              className={'search_select_wrapper_click_flag'}
-              onClick={() => setCaretLeftFlag(!caretLeftFlag)}
-            >
-              <CaretLeftOutlined
-                className={
-                  caretLeftFlag
-                    ? 'search_select_wrapper_click_flag_arrow'
-                    : 'search_select_wrapper_click_flag_arrow_1'
-                }
-              />
-            </div>
-            <div
-              className={
-                caretLeftFlag
-                  ? 'search_select_wrapper_left'
-                  : 'search_select_wrapper_left1'
-              }
-            >
+            <div className={'search_select_wrapper_topForm'}>
               <div className={'select_list_columns'}>
-                <div className={'select_list_columns_tips'}>搜索</div>
-                <div className={'select_list_columns_formItems'}>
-                  <Form form={form} layout="vertical" key="modalForm">
-                    {formItem(modalTableProps?.tableSearchForm)}
-                  </Form>
-                </div>
-              </div>
-              <div className={'select_list_searchButton'}>
-                <Button
-                  key="reset"
-                  className={'select_list_button_space'}
-                  onClick={onResetTable}
-                >
-                  重置
-                </Button>
-                <Button key="search" type="primary" onClick={onSearchTable}>
-                  查询
-                </Button>
+                <Form form={form} layout={'horizontal'} colon={false} key="modalForm">
+                  <Row>
+                    {renderFormItem(modalTableProps?.tableSearchForm)}
+                    <Col span={6}>
+                      <Space>
+                        <Button key="search" type="primary" onClick={onSearchTable}>
+                          查询 Enter
+                        </Button>
+                        <Button key="reset" onClick={onResetTable}>
+                          重置 ctrl+U
+                        </Button>
+                        {/* <div>{queryFieldsDom}</div> */}
+                        <div style={{position: 'absolute',top: 0,right: 0}}>
+                          {hasMoreQueryFields(modalTableProps) && modalTableProps?.isHorizontally
+                              ? <img onClick={() => {toggleCollapsed()}} style={{
+                                cursor: 'pointer',
+                                fontSize: '10px',
+                                transition: '0.3s all',
+                                transform: `rotate(${collapsed ? 0 : 0.5}turn)`,
+                              }} src={zhankaitiaojian} />
+                              : <></>
+                            }
+                        </div>
+                      </Space>
+                    </Col>
+                  </Row>
+                </Form>
               </div>
             </div>
-            <div
-              className={
-                caretLeftFlag
-                  ? 'search_select_wrapper_right'
-                  : 'search_select_wrapper_right1'
-              }
-            >
-              <div>
-                <div className={'select_list_selectTips'}>
-                  <div style={{ marginLeft: 8 }}>
-                    搜索结果共
-                    <span style={themeColor}>
-                      {tablePagination?.total || 0}
-                    </span>
-                    项
-                    {selectMode ? (
-                      <span>
-                        ， 本次已选
-                        <span style={themeColor}>
-                          {selectedRowKeys?.length || 0}
-                        </span>
-                        项
-                      </span>
-                    ) : (
-                      ''
-                    )}
-                  </div>
-                  <div
-                    style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}
-                  >
-                    {selectMode
-                      ? '勾选后点击确定按钮完成选择'
-                      : '双击数据行或点击单选图标完成选择'}
-                  </div>
-                </div>
-                <Table
-                  size="small"
-                  rowSelection={rowSelection}
-                  columns={modalTableProps?.tableColumns}
-                  dataSource={tableData}
-                  pagination={tablePagination}
-                  onChange={handleTableChange}
-                  rowKey={mappingValueField}
-                  scroll={{
-                    x: modalTableProps.overScrollX || 'max-content',
-                    y: modalTableProps.overScrollY || null,
-                  }}
-                  onRow={(record) => {
-                    return {
-                      onDoubleClick: (event) =>
-                        onDoubleClickSelect(event, record),
-                    };
-                  }}
-                />
-                {(selectMode && !modalTableProps?.isHiddenCheckAll) ? (
-                  <div className={'select_list_selectAll'}>
-                    <Checkbox
-                      indeterminate={indeterminate}
-                      checked={checkedAll}
-                      onChange={onChangeCheckAll}
-                      disabled={selectProps?.disabled || props?.disabled}
-                    />{' '}
-                    全选所有页面
-                  </div>
-                ) : (
-                  ''
-                )}
-              </div>
+
+            <div className={'search_select_wrapper_bottomTable'}>
+              <div className={selectMode ?'search_select_wrapper_bottomTable_wrapLeft2':'search_select_wrapper_bottomTable_wrapLeft1'}><Tabs items={tabsItems1} /></div>
+              {selectMode ? <div className={'search_select_wrapper_bottomTable_wrapRight'}><Tabs items={tabsItems2} tabBarExtraContent={<span onClick={()=> onChangeSelectedKeys([], [])}>清空已选</span>} /></div> : null}
             </div>
           </div>
         </Modal>