@bit-sun/business-component 2.3.20 → 2.3.22-beta1

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

@@ -1,879 +1,879 @@
-// @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 { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
-import axios from 'axios';
-import { stringify } from 'querystring';
-import _ from "lodash"
-import './index.less';
-import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { handleSourceName }  from './utils';
-
-const { Option } = Select;
-
-const SearchSelect = forwardRef((props: any, ref: any) => {
-  const {
-    value, // 必传
-    onChange,
-    selectProps = {},
-    modalTableProps = {},
-    labelInValue = false,
-    requestConfig,
-    ctx,
-    sourceName,
-    needModalTable = true,
-    getPopupContainer = undefined,
-    fieldComponent,
-    selectBusinessType,
-  } = props;
-  const {
-    url,
-    otherParams,// 默认参数
-    isMap,
-    fixedparameter,
-    fieldValToParam,
-    fixedparamsDisabled = false,
-    mappingTextField = 'name',
-    mappingTextShowKeyField,
-    mappingValueField = 'code',
-    mappingTextShowTextField,
-    init = true,// 是否初始请求
-    extralHeaders = {},// 额外请求头参数
-    specialBracket = false,// 是否使用特殊括弧显示选项 【value】text
-  } = requestConfig || {};
-  const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || 'supplierCode')
-
-  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
-  const initVal = value || (selectMode ? [] : null);
-  const pageSize = 100 // 下拉框默认分页 条数
-  const tableInitPageSize = 10 // 弹框默认分页 条数
-  const currentPage = 1
-  const selectParamsKey = requestConfig?.filter || 'qp-codeAndName-like'
-  const selectParamsInitKey = requestConfig?.filterInit || selectParamsKey
-  const currentSelectProps = {
-    ...selectProps,
-    // 以下属性不可更改----设计配置项
-    showSearch: false,
-    filterOption: false,
-    allowClear: true,
-    listHeight: 160,
-    optionLabelProp: "label",
-    autoClearSearchValue: false
-  }
-  const tableInitPagination = { showQuickJumper: true, total: 0, current: 1, pageSize: tableInitPageSize }
-
-  const [items, setItems] = useState([]);
-  const [scrollPage, setScrollPage] = useState(1);
-  const [itemsTotal, setItemsTotal] = useState(0);
-  const [fetching, setFetching] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [popvalue, setPopValue] = useState(initVal);
-  const [uniqueValue, setUniqueValue] = useState(resultSourceKey)
-  const { run } = useDebounceFn(
-    (v?: any) => {
-      // 优化搜索参数 支持传多个
-      let searchParams = {};
-      if (typeof selectParamsKey === 'string') {
-        let selectParamsInitValue = initVal
-        if (labelInValue) {
-          selectParamsInitValue = Array.isArray(initVal) ? initVal.map((i: any) => i.value || i.key).join(',') : initVal
-        } else {
-          selectParamsInitValue = Array.isArray(initVal) ? initVal.join(',') : initVal
-        }
-        searchParams = v ? { [selectParamsInitKey]: selectParamsInitValue } : { [selectParamsKey]: searchValue }
-      }
-      if (Array.isArray(selectParamsKey)) {
-        selectParamsKey.forEach((i: any) => {
-          searchParams = { ...searchParams, [i]: searchValue }
-        })
-      }
-      // 防抖函数  待定
-      getData(searchParams)
-    },
-    {
-      wait: 1000,
-    },
-  );
-
-  const [form] = Form.useForm();
-  const [caretLeftFlag, setCaretLeftFlag] = useState(true);
-  const [tableData, setTableData] = useState([]);
-  const [tablePagination, setTablePagination] = useState(tableInitPagination)
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [selectedRows, setSelectedRows] = useState([]);
-  const [checkedAll, setCheckedAll] = useState(false)
-  const [indeterminate, setIndeterminate] = useState(false)
-  const [tableFormParams, setTableFormParams] = useState({});
-  const [tooltipVisible, setTooltipVisible] = useState(false);
-
-  useImperativeHandle(ref, () => ({
-    refreshDataSource: (reset: boolean = false) => {
-      if (reset) {
-        if (init) {
-          run('init');
-        } else {
-          setItems([]);
-          setItemsTotal(0);
-        }
-      } else {
-        run();
-      }
-    },
-    clearDataSource: () => {
-      setItems([]);
-      setItemsTotal(0);
-    },
-    getTableFormRef: () => form,
-    // 解决下拉框数据源的问题
-    getSelectDataSource: () => items,
-    setSelectDataSource: (list: any, listTotal: number) => {
-      setItems(list);
-      setItemsTotal(listTotal);
-    },
-    refreshSelectDataSource: () => {
-      refreshItems()
-    }
-  }))
-
-  // 获取数据源 （type: 1下拉框 2/3弹框  不传值默认为下拉框）
-  const getData = (params = {}, type = 1,callback?: any) => {
-    if (!requestConfig) return;
-
-    setFetching(true)
-
-    // 处理dependence参数
-    const fixedParam = {};
-    if (fixedparameter && fieldValToParam && ctx) {
-      fixedparameter.forEach((item: any, index: any) => {
-        const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
-        if(fixedParamVal) {
-          fixedParam[item] = fixedParamVal;
-          // 解决依赖项在弹窗中回显/更改（如果不能更改，传参fixedparamsDisabled为true即可）
-          if(type == 2 || type == 3) {
-            const fixedChangeParamVal = form.getFieldValue(item);
-            let isDependenceValueChange = false;
-            let dependenceValue = fixedParamVal;
-            // 依赖项在弹窗form中更改--①更换依赖值；②去掉依赖值
-            if(!fixedparamsDisabled) {
-              isDependenceValueChange =
-                (fixedChangeParamVal && fixedChangeParamVal !== fixedParamVal)
-                || (type == 2 && !fixedChangeParamVal);
-              dependenceValue = isDependenceValueChange ? fixedChangeParamVal : fixedParamVal;
-            }
-            fixedParam[item] = dependenceValue;
-            form.setFieldsValue({ ...form?.getFieldsValue(), [item]: dependenceValue })
-            if(isDependenceValueChange) {
-              ctx.form.setFieldValue(fieldValToParam[index],fixedChangeParamVal) // 更改依赖项
-              ctx.form.setFieldValue(resultSourceKey,null) // 同时清空之前依赖项对应的选择项
-              refreshItems()
-            }
-          }
-        }
-      });
-    }
-
-    // 数组对象处理,对带有特殊标记的name进行处理
-    for (const key in params) {
-      if (Object.prototype.hasOwnProperty.call(params, key)) {
-        const element = params[key];
-        if (element && key.indexOf('*number*') >= 0) {
-          const dataParams = key.split('*number*');
-          dataParams.forEach((value, index) => {
-            params[value] = element[index];
-          });
-          delete params[key];
-        } else if (element && key.indexOf('*address*') >= 0) {
-          const dataParams = key.split('*address*');
-          dataParams.forEach((value, index) => {
-            params[value] = element.PCDCode[index];
-          });
-          delete params[key];
-        } else if (element && key.indexOf('*costType*') >= 0) {
-          const dataParams = key.split('*costType*');
-          // eslint-disable-next-line prefer-destructuring
-          params[dataParams[0]] = element[1];
-          delete params[key];
-        } else if (element && key.indexOf('*fullDate*') >= 0) {
-          const dataParams = key.split('*fullDate*');
-          dataParams.forEach((value, index) => {
-            if (index === 0) {
-              params[value] = moment(element[index])
-                .millisecond(0)
-                .second(0)
-                .minute(0)
-                .hour(0)
-                .format('YYYY-MM-DD HH:mm:ss');
-            } else {
-              params[value] = moment(element[index])
-                .millisecond(59)
-                .second(59)
-                .minute(59)
-                .hour(23)
-                .format('YYYY-MM-DD HH:mm:ss');
-            }
-          });
-          delete params[key];
-        } else if (typeof element === 'boolean' && key.indexOf('*checkBox*') >= 0) {
-          const dataParams = key.split('*checkBox*');
-          if (element) {
-            params[dataParams[0]] = 0
-          }
-          delete params[key];
-        } else if (element && key.indexOf('*cascader*') >= 0) {
-          const dataParams = key.split('*cascader*');
-          params[dataParams[0]] = element[element.length - 1]
-          delete params[key];
-        } else if (element && key.indexOf('*date*') >= 0) {
-          const dataParams = key.split('*date*')
-          dataParams.forEach((value, index) => {
-            if (index === 0) {
-              params[value] = moment(element[index])
-                .format('YYYY-MM-DD');
-            } else {
-              params[value] = moment(element[index])
-                .format('YYYY-MM-DD');
-            }
-          });
-          delete params[key];
-        }
-        else if (element && key.indexOf('*') >= 0) {
-          const dataParams = key.split('*');
-          dataParams.forEach((value, index) => {
-            params[value] = element[index].format('YYYY-MM-DD HH:mm:ss');
-          });
-          delete params[key];
-        } else if (element && key.indexOf('_selectNumberRange') >= 0) { // key = xxxxx_selectNumberRange   qp-xxxxx-gt
-          const dataParams = key.split('_selectNumberRange')[0]
-          if (params[key][0] === 'range') {
-            if (params[key][1][0]) {
-              params[`qp-${dataParams}-ge`] = params[key][1][0]
-            }
-            if (params[key][1][1]) {
-              params[`qp-${dataParams}-le`] = params[key][1][1]
-            }
-          } else {
-            params[`qp-${dataParams}-${params[key][0]}`] = params[key][1]
-          }
-          delete params[key]
-        } else if (Array.isArray(element)) {
-          params[key] = element.join(',');
-        } else if (element == null || element === undefined || String(element).trim() === '') {
-          delete params[key]
-        }
-      }
-    }
-
-    const queryParams = {
-      pageSize,
-      currentPage,
-      ...otherParams, // 默认参数
-      ...fixedParam,
-      ...params,
-    }
-
-    axios
-      .get(
-        `${url}?${stringify(queryParams)}`,
-        {
-          headers: { ...extralHeaders }
-        })
-      .then((result: any) => {
-        setFetching(false)
-        result = result.data;
-        if ((result?.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
-          message.error(result.msg);
-          return;
-        }
-        const res = result.data;
-        let source = [];
-        if (isMap) {
-          source = Object.keys(res).map((d, i) => {
-            return {
-              text: Object.values(res)[i],
-              value: d,
-            };
-          });
-        } else {
-          const keys = res.list ? 'list' : 'items';
-          source = res
-            ? res[keys]
-              ? res[keys].map((item: any) => {
-                let textShowText = item[mappingTextField]
-                if (mappingTextShowTextField) {
-                  textShowText = []
-                  if (Array.isArray(mappingTextShowTextField)) {
-                    mappingTextShowTextField.forEach((r: any) => {
-                      textShowText.push(item[r])
-                    })
-                  } else {
-                    textShowText = item[mappingTextShowTextField]
-                  }
-                }
-                return {
-                  ...item,
-                  text: specialBracket 
-                    ? `【${item[mappingValueField]}】${item[mappingTextField]}` 
-                    : item[mappingTextField],
-                  textShowText,
-                  textShowKey: item[mappingTextShowKeyField || mappingValueField],
-                  value: item[mappingValueField],
-                };
-              })
-              : Array.isArray(res) &&
-              res?.map((item: Record<string, any>) => {
-                let textShowText = item[mappingTextField]
-                if (mappingTextShowTextField) {
-                  textShowText = []
-                  if (Array.isArray(mappingTextShowTextField)) {
-                    mappingTextShowTextField.forEach((r: any) => {
-                      textShowText.push(item[r])
-                    })
-                  } else {
-                    textShowText = item[mappingTextShowTextField]
-                  }
-                }
-                return {
-                  ...item,
-                  text: specialBracket 
-                    ? `【${item[mappingValueField]}】${item[mappingTextField]}` 
-                    : item[mappingTextField],
-                  textShowText,
-                  textShowKey: item[mappingTextShowKeyField || mappingValueField],
-                  value: item[mappingValueField],
-                };
-              })
-            : [];
-        }
-        source = Array.isArray(source) ? source : []
-        if(callback) {
-          callback(source)
-        } else {
-          if (type === 1) {
-            ctx?.form?.setFieldSource(resultSourceKey, source)
-            setItems(source)
-            setItemsTotal(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)) })
-          }
-        }
-      })
-      .catch((err) => { setFetching(false) });
-  }
-
-  const SelectScroll = e => {
-    e.persist();
-    const { target } = e;
-    const totalPage = Math.ceil(itemsTotal / pageSize)
-    // 判断是否滑动到底部
-    const isTouchGround = target.scrollTop + target.offsetHeight === target.scrollHeight // >=scrollHeight
-    // 判断数据是否还没有加载到了最后一页
-    const canPageAdd = scrollPage < totalPage
-    if (isTouchGround && canPageAdd) {
-      const nextScrollPage = scrollPage + 1;
-      setScrollPage(nextScrollPage);
-      getData({ currentPage: nextScrollPage }); // 调用api方法
-    }
-
-    //判断是否滑动到顶部
-    const isTouchTop = target.scrollTop === 0  // <=0
-    // 判断数据是否到第一页
-    const canPageJian = scrollPage > 1
-    if (isTouchTop && canPageJian) {
-      const preScrollPage = scrollPage - 1;
-      setScrollPage(preScrollPage);
-      getData({ currentPage: preScrollPage }); // 调用api方法
-    }
-  }
-
-  useEffect(() => {
-    if (init) {
-      run('init')
-    }
-  }, [])
-
-  useEffect(() => {
-    if (value) {
-      setPopValue(value);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    makeUniqueValue();
-  }, [resultSourceKey])
-
-  useEffect(() => {
-    if (init) {
-      setItems([]);
-      setItemsTotal(0);
-      run('init')
-    }
-  },[selectBusinessType])
-
-  const showModal = () => {
-    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 3)
-    setIsModalVisible(true);
-    // 回显
-    if (value) {
-      if (selectMode) {
-        setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
-        setSelectedRows(labelInValue ? value.map(i => ({ [mappingValueField]: i.key, value: i.key, text: i.label })) : value.map(i => ({ [mappingValueField]: i, value: i })))
-        setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
-        setIndeterminate(!!value.length && value.length < itemsTotal);
-        setCheckedAll(itemsTotal && value.length === itemsTotal);
-      } else {
-        setSelectedRowKeys(labelInValue ? [value.key] : [value])
-        setSelectedRows(labelInValue ? [{ [mappingValueField]: value.key, value: value.key, text: value.label }] : [{ [mappingValueField]: value, value: value }])
-        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
-      }
-    }
-  };
-
-  const handleSelectOver = (selectedValue: any) => {
-    if (selectedValue?.length) {
-      // 解决选择最后1页的sku，返回后，不显示名称问题
-      const source = _.uniqBy(items.concat(selectedValue), 'value')
-      ctx?.form?.setFieldSource(resultSourceKey, source)
-      setItems(source)
-      formaData(selectedValue, source);
-    } else {
-      const formatResult = selectMode ? [] : null
-      onChange(formatResult, selectedValue)
-    }
-  }
-
-  const handleOk = () => {
-    handleSelectOver(popvalue)
-    handleCancel();
-  };
-
-  const formaData = (value: any, source: any) => {
-    if (labelInValue) {
-      const formatResult = value.map((i: any) => ({ key: i[mappingValueField], label: i[mappingTextField], value: i[mappingValueField] }))
-      onChange(selectMode ? formatResult : formatResult[0], value,source)
-    } else {
-      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
-      onChange(formatResult, value,source)
-    }
-  };
-
-  const clearModalTable = () => {
-    form.resetFields();
-    setTableFormParams({});
-    setTableData([]);
-    setTablePagination(tableInitPagination);
-    setSelectedRowKeys([]);
-    setSelectedRows([]);
-    setCheckedAll(false);
-    setIndeterminate(false);
-  };
-
-  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) {
-        run();
-      } else {
-        setItems([]);
-        setItemsTotal(0);
-      }
-    } else {
-      run();
-    }
-  }
-
-  const onSearchChange = (e) => {
-    setSearchValue(e.target.value);
-    refreshItems();
-  }
-
-  const onSearchBlur = () => {
-    setSearchValue('');
-    refreshItems();
-  }
-
-  const onSearchTable = () => {
-    const params = form.getFieldsValue();
-    setTableFormParams(params);
-    getData({ ...params, pageSize: tableInitPageSize }, 2)
-    if (selectMode) {
-      getData(params)
-    }
-  }
-
-  const onResetTable = () => {
-    form.resetFields();
-    setTableFormParams({});
-    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
-  }
-
-  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 (e.target.checked) {
-      // 如果下拉框有所有数据就处理选中所有【items.length === itemsTotal】(最多可选100条)
-      // 如果超过100条 就默认查出所有数据
-      if (items.length < itemsTotal) {
-        const totalPage = Math.ceil(itemsTotal / 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,
-    } = props
-    const heightLightTxt = (text, heightTxt) => {
-      if (heightTxt === '') {
-        return text
-      }
-      // 前面filterOption 不区分大小写，这里用i
-      const regexp = new RegExp(heightTxt, 'gi')
-      return text.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
-    }
-    return (
-      <Tooltip title={text}>
-        <div ref={(nodeElement) => {
-          if (nodeElement) {
-            nodeElement.innerHTML = heightLightTxt(text, filterTxt)
-          }
-        }}
-        />
-      </Tooltip>
-    )
-  }
-
-  // 扁平化二维数组的方法
-  const mapRows = params => {
-    var res = [];
-    for (var i = 0; i < params.length; i++) {
-      if (Array.isArray(params[i])) {
-        // 去重
-        res = _.uniqBy(res.concat(mapRows(params[i])), 'value');
-      } else {
-        res.push(params[i]);
-        // 去重
-        res = _.uniqBy(res, 'value')
-      }
-    }
-    return res.filter(Boolean); //去掉undefined的情况
-  };
-
-  const onChangeSelectedKeys = (selectKeys, selectRows) => {
-    let sksResult = selectRows.map((i) => i.value);
-
-    // 单选 默认直接选中 不需要确定  配置了modalRadioNeedFooter就需要确定
-    if(!selectMode && !modalTableProps?.modalRadioNeedFooter) {
-      handleSelectOver(selectRows)
-      handleCancel();
-    }
-
-    setSelectedRowKeys(sksResult)
-    setSelectedRows(selectRows)
-    setPopValue(selectRows);
-    setIndeterminate(!!selectRows.length && selectRows.length < tablePagination?.total);
-    setCheckedAll(selectRows.length === tablePagination?.total);
-  }
-
-  // 生成唯一值
-  const makeUniqueValue = () => {
-    const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
-    setUniqueValue(generateUnitKey);
-    return generateUnitKey;
-  }
-
-  const rowSelection = {
-    type: selectMode ? 'checkbox' : 'radio',
-    selectedRowKeys,
-    preserveSelectedRowKeys: true,
-    onChange: (sks, srs) => {
-      // 处理翻页后，之前存储的selectedRows变为undefined
-      // selectedRows合并新数组，过滤undefined，过滤留下对应selectedRowKeys的集合
-      let tmpSelectedRows = selectedRows.concat(srs).filter(item => item != undefined);
-      let totalSelectedRows = sks.map(key => tmpSelectedRows.filter(item => item[mappingValueField] == key)[0]).filter(item => item != undefined)
-      onChangeSelectedKeys(sks, totalSelectedRows)
-    },
-    getCheckboxProps: () => {
-      return ({
-        disabled: selectProps?.disabled || props?.disabled || (!items.length && !tableData.length),
-      })
-    },
-  };
-
-  const onDoubleClickSelect = (e, record) => {
-    if (!selectMode && !(selectProps?.disabled || props?.disabled || (!items.length && !tableData.length))) {
-      const srs = [JSON.parse(JSON.stringify(record))]
-      const sks = srs.map((i: any) => i.value)
-      onChangeSelectedKeys(sks, srs)
-    }
-  }
-
-  const themeColor = { color: '#1890ff' }
-
-  const formItem = (list) => {
-    if (isModalVisible && list?.length) {
-      const setDisabled = (name: any) => {
-        if (fixedparamsDisabled && fixedparameter?.length && fixedparameter.find((item: any) => item === name)) {
-          return true
-        } else {
-          return false
-        }
-      };
-      return list.map((i: any) => {
-        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>
-          )
-        }
-
-        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>
-          )
-        }
-
-        if (i?.type === 'businessSearchSelect' || i?.field?.type === 'businessSearchSelect') {
-          return (
-            <div>
-              <Form.Item name={i.name} label={i.label} key={i.name}>
-                <BusinessSearchSelect {...i.field.props} disabled={setDisabled(i.name)} />
-              </Form.Item>
-            </div>
-          )
-        }
-
-        if (i?.type === 'multipleQueryInput' || i?.field?.type === 'multipleQueryInput') {
-          return (
-            <div>
-              <Form.Item name={i.name} label={i.label} key={i.name}>
-                <QueryMutipleInput onValueChange={(value) => {
-                  form.setFieldsValue({
-                    [i.name]: value
-                  })
-                }} />
-              </Form.Item>
-            </div>
-          );
-        }
-
-        // 默认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>
-        )
-      })
-    } else {
-      return null
-    }
-  }
-
-  const maxTagPlaceholder = (selectedValues) => {
-    const onClose = (e: any, item: any) => {
-      e.preventDefault();
-      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value) : JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
-      onChange(newValue);
-    }
-    return (
-      <Tooltip title={selectedValues.map((i: any) => (
-        <Tag
-          closable={true}
-          onClose={(e) => onClose(e, i)}
-          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
-        >
-          {i.label}
-        </Tag>
-      ))}>
-        {`+ ${selectedValues?.length}`}
-      </Tooltip>
-    )
-  }
-
-  const handleSelectOptionsShowValue = (specialBracket: boolean, item: object) => {
-    let showText = Array.isArray(item.textShowText) &&
-      item.textShowText.join('    ') || item.textShowText;
-    return specialBracket 
-      ? `【${item.textShowKey}】${showText}`
-      : `${item.textShowKey}       ${showText}`
-  };
-
-  return (
-    <div className={'search_select'}>
-      {fieldComponent ?
-        (<div onClick={() => {
-          fieldComponent.props?.onClick?.()
-          showModal()
-        }}>{fieldComponent}</div>) :
-        (<div className="search_select_show" 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}
-              </>
-            )}
-            notFoundContent={
-              fetching ? <Spin size="small" /> :
-                <div style={{ textAlign: 'center' }}>
-                  <div style={{ marginBottom: 16 }}>
-                    <CopyOutlined style={{ fontSize: '50px' }} />
-                  </div>
-                  <div>无匹配结果，请更换其他内容再试</div>
-                </div>
-            }
-            onPopupScroll={SelectScroll}
-            style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
-            placeholder="请选择"
-            maxTagPlaceholder={maxTagPlaceholder}
-            {...currentSelectProps}
-            getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
-          >
-            {items.map(item => (
-              <Option key={item.value} label={item.text}>
-                {LightHeightOption({ 
-                  text: handleSelectOptionsShowValue(specialBracket, item), 
-                  filterTxt: searchValue 
-                })}
-              </Option>
-            ))}
-          </Select>
-          {needModalTable && (
-            <Button style={{ width: '30px', padding: '2px', height: 'auto' }} onClick={showModal} type="primary">
-              <SearchOutlined />
-            </Button>
-          )}
-        </div>)}
-      {needModalTable && isModalVisible && (
-        <Modal
-          width='80%'
-          title={modalTableProps?.modalTableTitle}
-          visible={isModalVisible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-          footer={(selectMode || modalTableProps?.modalRadioNeedFooter) ? [
-            <Button key="back" onClick={handleCancel}>
-              取消
-            </Button>,
-            <Button
-              key="submit"
-              type="primary"
-              onClick={handleOk}
-              disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
-            >
-              确定
-            </Button>,
-          ] : null}
-          {...(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={'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>
-              </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 ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} disabled={selectProps?.disabled || props?.disabled} /> 全选所有页面</div> : ''}
-              </div>
-            </div>
-          </div>
-        </Modal>
-      )}
-    </div>
-  );
-});
-
-export default SearchSelect;
+// @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 { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
+import axios from 'axios';
+import { stringify } from 'querystring';
+import _ from "lodash"
+import './index.less';
+import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
+import { handleSourceName }  from './utils';
+
+const { Option } = Select;
+
+const SearchSelect = forwardRef((props: any, ref: any) => {
+  const {
+    value, // 必传
+    onChange,
+    selectProps = {},
+    modalTableProps = {},
+    labelInValue = false,
+    requestConfig,
+    ctx,
+    sourceName,
+    needModalTable = true,
+    getPopupContainer = undefined,
+    fieldComponent,
+    selectBusinessType,
+  } = props;
+  const {
+    url,
+    otherParams,// 默认参数
+    isMap,
+    fixedparameter,
+    fieldValToParam,
+    fixedparamsDisabled = false,
+    mappingTextField = 'name',
+    mappingTextShowKeyField,
+    mappingValueField = 'code',
+    mappingTextShowTextField,
+    init = true,// 是否初始请求
+    extralHeaders = {},// 额外请求头参数
+    specialBracket = false,// 是否使用特殊括弧显示选项 【value】text
+  } = requestConfig || {};
+  const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || 'supplierCode')
+
+  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
+  const initVal = value || (selectMode ? [] : null);
+  const pageSize = 100 // 下拉框默认分页 条数
+  const tableInitPageSize = 10 // 弹框默认分页 条数
+  const currentPage = 1
+  const selectParamsKey = requestConfig?.filter || 'qp-codeAndName-like'
+  const selectParamsInitKey = requestConfig?.filterInit || selectParamsKey
+  const currentSelectProps = {
+    ...selectProps,
+    // 以下属性不可更改----设计配置项
+    showSearch: false,
+    filterOption: false,
+    allowClear: true,
+    listHeight: 160,
+    optionLabelProp: "label",
+    autoClearSearchValue: false
+  }
+  const tableInitPagination = { showQuickJumper: true, total: 0, current: 1, pageSize: tableInitPageSize }
+
+  const [items, setItems] = useState([]);
+  const [scrollPage, setScrollPage] = useState(1);
+  const [itemsTotal, setItemsTotal] = useState(0);
+  const [fetching, setFetching] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [popvalue, setPopValue] = useState(initVal);
+  const [uniqueValue, setUniqueValue] = useState(resultSourceKey)
+  const { run } = useDebounceFn(
+    (v?: any) => {
+      // 优化搜索参数 支持传多个
+      let searchParams = {};
+      if (typeof selectParamsKey === 'string') {
+        let selectParamsInitValue = initVal
+        if (labelInValue) {
+          selectParamsInitValue = Array.isArray(initVal) ? initVal.map((i: any) => i.value || i.key).join(',') : initVal
+        } else {
+          selectParamsInitValue = Array.isArray(initVal) ? initVal.join(',') : initVal
+        }
+        searchParams = v ? { [selectParamsInitKey]: selectParamsInitValue } : { [selectParamsKey]: searchValue }
+      }
+      if (Array.isArray(selectParamsKey)) {
+        selectParamsKey.forEach((i: any) => {
+          searchParams = { ...searchParams, [i]: searchValue }
+        })
+      }
+      // 防抖函数  待定
+      getData(searchParams)
+    },
+    {
+      wait: 1000,
+    },
+  );
+
+  const [form] = Form.useForm();
+  const [caretLeftFlag, setCaretLeftFlag] = useState(true);
+  const [tableData, setTableData] = useState([]);
+  const [tablePagination, setTablePagination] = useState(tableInitPagination)
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [checkedAll, setCheckedAll] = useState(false)
+  const [indeterminate, setIndeterminate] = useState(false)
+  const [tableFormParams, setTableFormParams] = useState({});
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    refreshDataSource: (reset: boolean = false) => {
+      if (reset) {
+        if (init) {
+          run('init');
+        } else {
+          setItems([]);
+          setItemsTotal(0);
+        }
+      } else {
+        run();
+      }
+    },
+    clearDataSource: () => {
+      setItems([]);
+      setItemsTotal(0);
+    },
+    getTableFormRef: () => form,
+    // 解决下拉框数据源的问题
+    getSelectDataSource: () => items,
+    setSelectDataSource: (list: any, listTotal: number) => {
+      setItems(list);
+      setItemsTotal(listTotal);
+    },
+    refreshSelectDataSource: () => {
+      refreshItems()
+    }
+  }))
+
+  // 获取数据源 （type: 1下拉框 2/3弹框  不传值默认为下拉框）
+  const getData = (params = {}, type = 1,callback?: any) => {
+    if (!requestConfig) return;
+
+    setFetching(true)
+
+    // 处理dependence参数
+    const fixedParam = {};
+    if (fixedparameter && fieldValToParam && ctx) {
+      fixedparameter.forEach((item: any, index: any) => {
+        const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
+        if(fixedParamVal) {
+          fixedParam[item] = fixedParamVal;
+          // 解决依赖项在弹窗中回显/更改（如果不能更改，传参fixedparamsDisabled为true即可）
+          if(type == 2 || type == 3) {
+            const fixedChangeParamVal = form.getFieldValue(item);
+            let isDependenceValueChange = false;
+            let dependenceValue = fixedParamVal;
+            // 依赖项在弹窗form中更改--①更换依赖值；②去掉依赖值
+            if(!fixedparamsDisabled) {
+              isDependenceValueChange =
+                (fixedChangeParamVal && fixedChangeParamVal !== fixedParamVal)
+                || (type == 2 && !fixedChangeParamVal);
+              dependenceValue = isDependenceValueChange ? fixedChangeParamVal : fixedParamVal;
+            }
+            fixedParam[item] = dependenceValue;
+            form.setFieldsValue({ ...form?.getFieldsValue(), [item]: dependenceValue })
+            if(isDependenceValueChange) {
+              ctx.form.setFieldValue(fieldValToParam[index],fixedChangeParamVal) // 更改依赖项
+              ctx.form.setFieldValue(resultSourceKey,null) // 同时清空之前依赖项对应的选择项
+              refreshItems()
+            }
+          }
+        }
+      });
+    }
+
+    // 数组对象处理,对带有特殊标记的name进行处理
+    for (const key in params) {
+      if (Object.prototype.hasOwnProperty.call(params, key)) {
+        const element = params[key];
+        if (element && key.indexOf('*number*') >= 0) {
+          const dataParams = key.split('*number*');
+          dataParams.forEach((value, index) => {
+            params[value] = element[index];
+          });
+          delete params[key];
+        } else if (element && key.indexOf('*address*') >= 0) {
+          const dataParams = key.split('*address*');
+          dataParams.forEach((value, index) => {
+            params[value] = element.PCDCode[index];
+          });
+          delete params[key];
+        } else if (element && key.indexOf('*costType*') >= 0) {
+          const dataParams = key.split('*costType*');
+          // eslint-disable-next-line prefer-destructuring
+          params[dataParams[0]] = element[1];
+          delete params[key];
+        } else if (element && key.indexOf('*fullDate*') >= 0) {
+          const dataParams = key.split('*fullDate*');
+          dataParams.forEach((value, index) => {
+            if (index === 0) {
+              params[value] = moment(element[index])
+                .millisecond(0)
+                .second(0)
+                .minute(0)
+                .hour(0)
+                .format('YYYY-MM-DD HH:mm:ss');
+            } else {
+              params[value] = moment(element[index])
+                .millisecond(59)
+                .second(59)
+                .minute(59)
+                .hour(23)
+                .format('YYYY-MM-DD HH:mm:ss');
+            }
+          });
+          delete params[key];
+        } else if (typeof element === 'boolean' && key.indexOf('*checkBox*') >= 0) {
+          const dataParams = key.split('*checkBox*');
+          if (element) {
+            params[dataParams[0]] = 0
+          }
+          delete params[key];
+        } else if (element && key.indexOf('*cascader*') >= 0) {
+          const dataParams = key.split('*cascader*');
+          params[dataParams[0]] = element[element.length - 1]
+          delete params[key];
+        } else if (element && key.indexOf('*date*') >= 0) {
+          const dataParams = key.split('*date*')
+          dataParams.forEach((value, index) => {
+            if (index === 0) {
+              params[value] = moment(element[index])
+                .format('YYYY-MM-DD');
+            } else {
+              params[value] = moment(element[index])
+                .format('YYYY-MM-DD');
+            }
+          });
+          delete params[key];
+        }
+        else if (element && key.indexOf('*') >= 0) {
+          const dataParams = key.split('*');
+          dataParams.forEach((value, index) => {
+            params[value] = element[index].format('YYYY-MM-DD HH:mm:ss');
+          });
+          delete params[key];
+        } else if (element && key.indexOf('_selectNumberRange') >= 0) { // key = xxxxx_selectNumberRange   qp-xxxxx-gt
+          const dataParams = key.split('_selectNumberRange')[0]
+          if (params[key][0] === 'range') {
+            if (params[key][1][0]) {
+              params[`qp-${dataParams}-ge`] = params[key][1][0]
+            }
+            if (params[key][1][1]) {
+              params[`qp-${dataParams}-le`] = params[key][1][1]
+            }
+          } else {
+            params[`qp-${dataParams}-${params[key][0]}`] = params[key][1]
+          }
+          delete params[key]
+        } else if (Array.isArray(element)) {
+          params[key] = element.join(',');
+        } else if (element == null || element === undefined || String(element).trim() === '') {
+          delete params[key]
+        }
+      }
+    }
+
+    const queryParams = {
+      pageSize,
+      currentPage,
+      ...otherParams, // 默认参数
+      ...fixedParam,
+      ...params,
+    }
+
+    axios
+      .get(
+        `${url}?${stringify(queryParams)}`,
+        {
+          headers: { ...extralHeaders }
+        })
+      .then((result: any) => {
+        setFetching(false)
+        result = result.data;
+        if ((result?.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
+          message.error(result.msg);
+          return;
+        }
+        const res = result.data;
+        let source = [];
+        if (isMap) {
+          source = Object.keys(res).map((d, i) => {
+            return {
+              text: Object.values(res)[i],
+              value: d,
+            };
+          });
+        } else {
+          const keys = res.list ? 'list' : 'items';
+          source = res
+            ? res[keys]
+              ? res[keys].map((item: any) => {
+                let textShowText = item[mappingTextField]
+                if (mappingTextShowTextField) {
+                  textShowText = []
+                  if (Array.isArray(mappingTextShowTextField)) {
+                    mappingTextShowTextField.forEach((r: any) => {
+                      textShowText.push(item[r])
+                    })
+                  } else {
+                    textShowText = item[mappingTextShowTextField]
+                  }
+                }
+                return {
+                  ...item,
+                  text: specialBracket 
+                    ? `【${item[mappingValueField]}】${item[mappingTextField]}` 
+                    : item[mappingTextField],
+                  textShowText,
+                  textShowKey: item[mappingTextShowKeyField || mappingValueField],
+                  value: item[mappingValueField],
+                };
+              })
+              : Array.isArray(res) &&
+              res?.map((item: Record<string, any>) => {
+                let textShowText = item[mappingTextField]
+                if (mappingTextShowTextField) {
+                  textShowText = []
+                  if (Array.isArray(mappingTextShowTextField)) {
+                    mappingTextShowTextField.forEach((r: any) => {
+                      textShowText.push(item[r])
+                    })
+                  } else {
+                    textShowText = item[mappingTextShowTextField]
+                  }
+                }
+                return {
+                  ...item,
+                  text: specialBracket 
+                    ? `【${item[mappingValueField]}】${item[mappingTextField]}` 
+                    : item[mappingTextField],
+                  textShowText,
+                  textShowKey: item[mappingTextShowKeyField || mappingValueField],
+                  value: item[mappingValueField],
+                };
+              })
+            : [];
+        }
+        source = Array.isArray(source) ? source : []
+        if(callback) {
+          callback(source)
+        } else {
+          if (type === 1) {
+            ctx?.form?.setFieldSource(resultSourceKey, source)
+            setItems(source)
+            setItemsTotal(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)) })
+          }
+        }
+      })
+      .catch((err) => { setFetching(false) });
+  }
+
+  const SelectScroll = e => {
+    e.persist();
+    const { target } = e;
+    const totalPage = Math.ceil(itemsTotal / pageSize)
+    // 判断是否滑动到底部
+    const isTouchGround = target.scrollTop + target.offsetHeight === target.scrollHeight // >=scrollHeight
+    // 判断数据是否还没有加载到了最后一页
+    const canPageAdd = scrollPage < totalPage
+    if (isTouchGround && canPageAdd) {
+      const nextScrollPage = scrollPage + 1;
+      setScrollPage(nextScrollPage);
+      getData({ currentPage: nextScrollPage }); // 调用api方法
+    }
+
+    //判断是否滑动到顶部
+    const isTouchTop = target.scrollTop === 0  // <=0
+    // 判断数据是否到第一页
+    const canPageJian = scrollPage > 1
+    if (isTouchTop && canPageJian) {
+      const preScrollPage = scrollPage - 1;
+      setScrollPage(preScrollPage);
+      getData({ currentPage: preScrollPage }); // 调用api方法
+    }
+  }
+
+  useEffect(() => {
+    if (init) {
+      run('init')
+    }
+  }, [])
+
+  useEffect(() => {
+    if (value) {
+      setPopValue(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    makeUniqueValue();
+  }, [resultSourceKey])
+
+  useEffect(() => {
+    if (init) {
+      setItems([]);
+      setItemsTotal(0);
+      run('init')
+    }
+  },[selectBusinessType])
+
+  const showModal = () => {
+    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 3)
+    setIsModalVisible(true);
+    // 回显
+    if (value) {
+      if (selectMode) {
+        setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
+        setSelectedRows(labelInValue ? value.map(i => ({ [mappingValueField]: i.key, value: i.key, text: i.label })) : value.map(i => ({ [mappingValueField]: i, value: i })))
+        setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
+        setIndeterminate(!!value.length && value.length < itemsTotal);
+        setCheckedAll(itemsTotal && value.length === itemsTotal);
+      } else {
+        setSelectedRowKeys(labelInValue ? [value.key] : [value])
+        setSelectedRows(labelInValue ? [{ [mappingValueField]: value.key, value: value.key, text: value.label }] : [{ [mappingValueField]: value, value: value }])
+        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
+      }
+    }
+  };
+
+  const handleSelectOver = (selectedValue: any) => {
+    if (selectedValue?.length) {
+      // 解决选择最后1页的sku，返回后，不显示名称问题
+      const source = _.uniqBy(items.concat(selectedValue), 'value')
+      ctx?.form?.setFieldSource(resultSourceKey, source)
+      setItems(source)
+      formaData(selectedValue, source);
+    } else {
+      const formatResult = selectMode ? [] : null
+      onChange(formatResult, selectedValue)
+    }
+  }
+
+  const handleOk = () => {
+    handleSelectOver(popvalue)
+    handleCancel();
+  };
+
+  const formaData = (value: any, source: any) => {
+    if (labelInValue) {
+      const formatResult = value.map((i: any) => ({ key: i[mappingValueField], label: i[mappingTextField], value: i[mappingValueField] }))
+      onChange(selectMode ? formatResult : formatResult[0], value,source)
+    } else {
+      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
+      onChange(formatResult, value,source)
+    }
+  };
+
+  const clearModalTable = () => {
+    form.resetFields();
+    setTableFormParams({});
+    setTableData([]);
+    setTablePagination(tableInitPagination);
+    setSelectedRowKeys([]);
+    setSelectedRows([]);
+    setCheckedAll(false);
+    setIndeterminate(false);
+  };
+
+  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) {
+        run();
+      } else {
+        setItems([]);
+        setItemsTotal(0);
+      }
+    } else {
+      run();
+    }
+  }
+
+  const onSearchChange = (e) => {
+    setSearchValue(e.target.value);
+    refreshItems();
+  }
+
+  const onSearchBlur = () => {
+    setSearchValue('');
+    refreshItems();
+  }
+
+  const onSearchTable = () => {
+    const params = form.getFieldsValue();
+    setTableFormParams(params);
+    getData({ ...params, pageSize: tableInitPageSize }, 2)
+    if (selectMode) {
+      getData(params)
+    }
+  }
+
+  const onResetTable = () => {
+    form.resetFields();
+    setTableFormParams({});
+    getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
+  }
+
+  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 (e.target.checked) {
+      // 如果下拉框有所有数据就处理选中所有【items.length === itemsTotal】(最多可选100条)
+      // 如果超过100条 就默认查出所有数据
+      if (items.length < itemsTotal) {
+        const totalPage = Math.ceil(itemsTotal / 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,
+    } = props
+    const heightLightTxt = (text, heightTxt) => {
+      if (heightTxt === '') {
+        return text
+      }
+      // 前面filterOption 不区分大小写，这里用i
+      const regexp = new RegExp(heightTxt, 'gi')
+      return text.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
+    }
+    return (
+      <Tooltip title={text}>
+        <div ref={(nodeElement) => {
+          if (nodeElement) {
+            nodeElement.innerHTML = heightLightTxt(text, filterTxt)
+          }
+        }}
+        />
+      </Tooltip>
+    )
+  }
+
+  // 扁平化二维数组的方法
+  const mapRows = params => {
+    var res = [];
+    for (var i = 0; i < params.length; i++) {
+      if (Array.isArray(params[i])) {
+        // 去重
+        res = _.uniqBy(res.concat(mapRows(params[i])), 'value');
+      } else {
+        res.push(params[i]);
+        // 去重
+        res = _.uniqBy(res, 'value')
+      }
+    }
+    return res.filter(Boolean); //去掉undefined的情况
+  };
+
+  const onChangeSelectedKeys = (selectKeys, selectRows) => {
+    let sksResult = selectRows.map((i) => i.value);
+
+    // 单选 默认直接选中 不需要确定  配置了modalRadioNeedFooter就需要确定
+    if(!selectMode && !modalTableProps?.modalRadioNeedFooter) {
+      handleSelectOver(selectRows)
+      handleCancel();
+    }
+
+    setSelectedRowKeys(sksResult)
+    setSelectedRows(selectRows)
+    setPopValue(selectRows);
+    setIndeterminate(!!selectRows.length && selectRows.length < tablePagination?.total);
+    setCheckedAll(selectRows.length === tablePagination?.total);
+  }
+
+  // 生成唯一值
+  const makeUniqueValue = () => {
+    const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
+    setUniqueValue(generateUnitKey);
+    return generateUnitKey;
+  }
+
+  const rowSelection = {
+    type: selectMode ? 'checkbox' : 'radio',
+    selectedRowKeys,
+    preserveSelectedRowKeys: true,
+    onChange: (sks, srs) => {
+      // 处理翻页后，之前存储的selectedRows变为undefined
+      // selectedRows合并新数组，过滤undefined，过滤留下对应selectedRowKeys的集合
+      let tmpSelectedRows = selectedRows.concat(srs).filter(item => item != undefined);
+      let totalSelectedRows = sks.map(key => tmpSelectedRows.filter(item => item[mappingValueField] == key)[0]).filter(item => item != undefined)
+      onChangeSelectedKeys(sks, totalSelectedRows)
+    },
+    getCheckboxProps: () => {
+      return ({
+        disabled: selectProps?.disabled || props?.disabled || (!items.length && !tableData.length),
+      })
+    },
+  };
+
+  const onDoubleClickSelect = (e, record) => {
+    if (!selectMode && !(selectProps?.disabled || props?.disabled || (!items.length && !tableData.length))) {
+      const srs = [JSON.parse(JSON.stringify(record))]
+      const sks = srs.map((i: any) => i.value)
+      onChangeSelectedKeys(sks, srs)
+    }
+  }
+
+  const themeColor = { color: '#02B56E' }
+
+  const formItem = (list) => {
+    if (isModalVisible && list?.length) {
+      const setDisabled = (name: any) => {
+        if (fixedparamsDisabled && fixedparameter?.length && fixedparameter.find((item: any) => item === name)) {
+          return true
+        } else {
+          return false
+        }
+      };
+      return list.map((i: any) => {
+        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>
+          )
+        }
+
+        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>
+          )
+        }
+
+        if (i?.type === 'businessSearchSelect' || i?.field?.type === 'businessSearchSelect') {
+          return (
+            <div>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <BusinessSearchSelect {...i.field.props} disabled={setDisabled(i.name)} />
+              </Form.Item>
+            </div>
+          )
+        }
+
+        if (i?.type === 'multipleQueryInput' || i?.field?.type === 'multipleQueryInput') {
+          return (
+            <div>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <QueryMutipleInput onValueChange={(value) => {
+                  form.setFieldsValue({
+                    [i.name]: value
+                  })
+                }} />
+              </Form.Item>
+            </div>
+          );
+        }
+
+        // 默认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>
+        )
+      })
+    } else {
+      return null
+    }
+  }
+
+  const maxTagPlaceholder = (selectedValues) => {
+    const onClose = (e: any, item: any) => {
+      e.preventDefault();
+      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value) : JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
+      onChange(newValue);
+    }
+    return (
+      <Tooltip title={selectedValues.map((i: any) => (
+        <Tag
+          closable={true}
+          onClose={(e) => onClose(e, i)}
+          style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
+        >
+          {i.label}
+        </Tag>
+      ))}>
+        {`+ ${selectedValues?.length}`}
+      </Tooltip>
+    )
+  }
+
+  const handleSelectOptionsShowValue = (specialBracket: boolean, item: object) => {
+    let showText = Array.isArray(item.textShowText) &&
+      item.textShowText.join('    ') || item.textShowText;
+    return specialBracket 
+      ? `【${item.textShowKey}】${showText}`
+      : `${item.textShowKey}       ${showText}`
+  };
+
+  return (
+    <div className={'search_select'}>
+      {fieldComponent ?
+        (<div onClick={() => {
+          fieldComponent.props?.onClick?.()
+          showModal()
+        }}>{fieldComponent}</div>) :
+        (<div className="search_select_show" 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}
+              </>
+            )}
+            notFoundContent={
+              fetching ? <Spin size="small" /> :
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ marginBottom: 16 }}>
+                    <CopyOutlined style={{ fontSize: '50px' }} />
+                  </div>
+                  <div>无匹配结果，请更换其他内容再试</div>
+                </div>
+            }
+            onPopupScroll={SelectScroll}
+            style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
+            placeholder="请选择"
+            maxTagPlaceholder={maxTagPlaceholder}
+            {...currentSelectProps}
+            getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
+          >
+            {items.map(item => (
+              <Option key={item.value} label={item.text}>
+                {LightHeightOption({ 
+                  text: handleSelectOptionsShowValue(specialBracket, item), 
+                  filterTxt: searchValue 
+                })}
+              </Option>
+            ))}
+          </Select>
+          {needModalTable && (
+            <Button style={{ width: '30px', padding: '2px', height: 'auto' }} onClick={showModal} type="primary">
+              <SearchOutlined />
+            </Button>
+          )}
+        </div>)}
+      {needModalTable && isModalVisible && (
+        <Modal
+          width='80%'
+          title={modalTableProps?.modalTableTitle}
+          visible={isModalVisible}
+          onOk={handleOk}
+          onCancel={handleCancel}
+          footer={(selectMode || modalTableProps?.modalRadioNeedFooter) ? [
+            <Button key="back" onClick={handleCancel}>
+              取消
+            </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              onClick={handleOk}
+              disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
+            >
+              确定
+            </Button>,
+          ] : null}
+          {...(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={'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>
+              </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 ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} disabled={selectProps?.disabled || props?.disabled} /> 全选所有页面</div> : ''}
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+});
+
+export default SearchSelect;