@bit-sun/business-component 4.0.11-alpha.1 → 4.0.11-alpha.10

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

@@ -1,17 +1,19 @@
 // @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 }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
+import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 
 const { Option } = Select;
+const ColSpan = 6;
 
 const SearchSelect = forwardRef((props: any, ref: any) => {
   const {
@@ -27,6 +29,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     needModalTable = true,
     getPopupContainer = undefined,
     fieldComponent,
+    onSaveCallback,
     selectBusinessType,
   } = props;
   const {
@@ -40,7 +43,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     mappingTextShowKeyField,
     mappingValueField = 'code',
     mappingTextShowTextField,
-    init = true,// 是否初始请求
+    init = false,// 是否初始请求,默认初始不请求,查询需要限制录入4位数以上支持模糊查询
     extralHeaders = {},// 额外请求头参数
     specialBracket = false,// 是否使用特殊括弧显示选项 【value】text
     noNeedSplit = false,// label显示不需要任何特殊化
@@ -50,23 +53,26 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   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
   }
-  const tableInitPagination = { showQuickJumper: true, total: 0, current: 1, pageSize: tableInitPageSize }
+  const initPagination = { showQuickJumper: true, showSizeChanger: true, showTotal: (total: any) => `共 ${total} 条` }
+  const tableInitPagination = { ...initPagination, total: 0, current: 1, pageSize: tableInitPageSize }
 
   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 +107,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,6 +117,8 @@ 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);
 
   useImperativeHandle(ref, () => ({
     refreshDataSource: (reset: boolean = false) => {
@@ -314,7 +323,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 +335,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                     textShowText = item[mappingTextShowTextField]
                   }
                 }
+                if(!item?.children?.length) {delete item?.children};
                 return {
                   ...item,
                   text: specialBracket
@@ -334,10 +344,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 +360,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                     textShowText = item[mappingTextShowTextField]
                   }
                 }
+                if(!item?.children?.length) {delete item?.children};
                 return {
                   ...item,
                   text: specialBracket
@@ -357,6 +369,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
+                  keyIndex: index + 1,
                 };
               })
             : [];
@@ -438,8 +451,35 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     }
   },[selectBusinessType])
 
+  // 处理键盘事件
+  const handleKeyPress = (event) => {
+    console.log(event,'----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)
+    // 弹窗打开默认不查询
+    // getData({ pageSize: tableInitPageSize, currentPage: 1 }, 3)
     setIsModalVisible(true);
     // 回显
     if (value) {
@@ -470,10 +510,36 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       onChange(formatResult, selectedValue)
     }
   }
-
   const handleOk = () => {
-    handleSelectOver(popvalue)
-    handleCancel();
+    // 按钮保存可传入
+    if(onSaveCallback) {
+      setConfirmLoading(true)
+      onSaveCallback(popvalue).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(popvalue)
+      handleCancel();
+    }
   };
 
   const formaData = (value: any, source: any) => {
@@ -524,13 +590,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     }
   }
 
-  const onSearchChange = (e) => {
-    setSearchValue(e.target.value);
-    refreshItems();
-  }
-
-  const onSearchBlur = () => {
-    setSearchValue('');
+  const onSearchChange = (v) => {
+    setSearchValue(v);
+    if(v?.length < 4) return;
     refreshItems();
   }
 
@@ -549,49 +611,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,7 +660,7 @@ 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) {
@@ -693,40 +719,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='请选择' {...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 +769,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 +787,106 @@ 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,) => {
+    return (
+      <div style={{ height: '528px' }}>
+        <Table
+          bordered
+          size="middle"
+          rowSelection={rowSelection}
+          columns={tableShowColumns}
+          dataSource={tableList}
+          {...type=='noPage'?{
+            pagination: initPagination
+          }:{
+            pagination: tablePagination,
+            onChange: handleTableChange,
+            loading: fetching
+          }}
+          rowKey={mappingValueField}
+          scroll={{
+            x: modalTableProps.overScrollX || 'max-content',
+            y: modalTableProps.overScrollY || 440,
+          }}
+          onRow={(record) => {
+            return {
+              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 onClear = () => {
+    formaData([], items);
+  }
+
+  const onDropdownVisibleChange = (visible) => {
+    setSelectOpen(visible); 
+    // 解决多选时，关闭下拉框值 搜索项被清空但是没有重新调用onsearch事件的问题
+    selectMode && !visible && setSearchValue('')
+  }
+  const renderTable = (dataSource) => {
+    return (
+      <div className={`search_select_dropdown_table ${!selectMode?'search_select_dropdown_table1':''}`}>
+        <Table
+          virtual
+          bordered
+          {...(selectMode?{
+            rowSelection: {
+              type: 'checkbox',  
+              selectedRowKeys: labelInValue ? value.map(s=> (s?.value||s)) : value,
+              onChange: (sks, srs) => {
+                formaData(srs, dataSource);
+              }
+            }
+          }:{
+            rowSelection: {
+              type: 'radio',
+              columnWidth: 0,
+              selectedRowKeys: labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[],
+            },
+            onRow: (record, rowKey) => ({
+              onDoubleClick: () => {
+                const srs = [JSON.parse(JSON.stringify(record))]
+                formaData(srs, dataSource);
+                setSelectOpen(false)
+              },
+            })
+          })}
+          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();
@@ -830,44 +967,32 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           id={`search_select_div_${uniqueValue}`}
         >
           <Select
-            virtual
             labelInValue={labelInValue}
             value={value}
-            onChange={onChange}
+            onChange={onchange}
+            onClear={onClear}
             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}
-              </>
-            )}
+            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?'无匹配结果,请更换其他内容再试':'请录入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" onClick={showModal}><SearchOutlined /></div>
+            } : {})}
             {...currentSelectProps}
             getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
           >
@@ -880,22 +1005,15 @@ 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
+          destroyOnClose
           width="80%"
           title={modalTableProps?.modalTableTitle}
           visible={isModalVisible}
+          confirmLoading={confirmLoading}
           onOk={handleOk}
           onCancel={handleCancel}
           footer={
@@ -907,6 +1025,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                   <Button
                     key="submit"
                     type="primary"
+                    loading={confirmLoading}
                     onClick={handleOk}
                     disabled={
                       !tableData.length ||
@@ -919,117 +1038,45 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 ]
               : 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>