@bit-sun/business-component 3.1.5 → 3.1.6

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

@@ -1,1065 +1,1065 @@
-// @ts-nocheck
-import React, { useState, useEffect } from 'react';
-import { useDebounceFn } from 'ahooks';
-import { Input, Button, Modal, Select, InputNumber, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag } from 'antd';
-import { SearchOutlined, CopyOutlined, CloseCircleOutlined } from '@ant-design/icons';
-import request from '@/utils/request';
-import { stringify } from 'querystring';
-import _ from "lodash"
-import './index.less';
-import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { Resizable } from 'react-resizable';
-import { checkQuantityAccuracy, precisionQuantity } from '@/utils/checkUtils';
-import TableColumnSetting from '@/plugin/TableColumnSetting';
-import { setInitialShowColumn } from '@/plugin/TableColumnSetting/utils';
-import { handleAntdColumnsSpecialParams, uuid } from '@/utils/utils';
-import { judgeIsRequestError } from '@/utils/requestUtils';
-import { getItemDefaultWidth, noEmptyArray } from '@/components/Business/columnSettingTable/utils';
-import { getSelectDataList, loadSelectSource, formatFormSourceList } from './helps';
-
-interface SearchFormItem {
-  name: string;
-  label: string;
-  filterFormItem?: FormItemProps;
-  initialSource?: any[];
-  field: any;
-  type?: string;
-  [formItemProps: string]: any;
-}
-
-const checkSpuMatchCode = (data: any) => {
-  return new Promise((resolve, reject) => {
-      request.post(`/stock/rwFrontRecordSkcDetail/checkSpuMatchCode`,data)
-        .then((result: any) => {
-          result = result.data;
-          if (judgeIsRequestError(result)) {
-            message.error(result.msg);
-            reject(false);
-            return;
-          }
-          resolve(result);
-        })
-        .catch((err: any) => {
-          reject(err);
-        });
-    })
-}
-
-const ResizeableTitle = (props) => {
-  const { onResize, width, ...restProps } = props;
-
-  if (!width) {
-    return <th {...restProps} />;
-  }
-  return (
-    <Resizable
-      width={width}
-      height={0}
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
-    >
-      <th {...restProps} />
-    </Resizable>
-  );
-};
-
-const initTableCode = {
-  'sku': ['skuSelect-tableOptionsToChoosePartCode','skuSelect-tableSelectedItemPartCode'],
-  'skc': ['skcSelect-tableOptionsToChoosePartCode','skcSelect-tableSelectedItemPartCode'],
-  'spu': ['spuSelect-tableOptionsToChoosePartCode','spuSelect-tableSelectedItemPartCode']
-}
-
-const { Option } = Select;
-
-const AddSelect = (props: any) => {
-  const {
-    value, // 必传
-    selectProps = {},
-    modalTableProps = {},
-    labelInValue = false,
-    requestConfig,
-    sourceName,
-    onSaveCallback,
-    onCancelCallback,
-    buttonText = '添加',
-    buttonProps = {},
-    beforeShowModal,
-    tableCodeList = [], // 非必填 默认取组件定义code,如需自定义----数组第一位为供选择商品的table的code,第二位为已选择商品的table的code
-    businessType = 'sku',
-    isAllowRepeatedSelect = false,
-    clearTitle
-  } = props;
-  const { url, otherParams, isMap, mappingValueField = 'code' } = requestConfig || {};
-  const realButtonProps = {type: "primary", ...buttonProps};
-  const selectRowKey = isAllowRepeatedSelect ? 'uuid' : mappingValueField
-
-  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
-  const initVal = value || (selectMode ? [] : null);
-  const pageSize = 100 // 下拉框默认分页 条数
-  const tableInitPageSize = 10 // 弹框默认分页 条数
-  const currentPage = 1
-
-  const [fetching, setFetching] = useState(false);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [popvalue, setPopValue] = useState(initVal);
-  const [uniqueValue, setUniqueValue] = useState(sourceName)
-
-  const [form] = Form.useForm();
-  const [tableSearchForm, setTableSearchForm] = useState<Array<SearchFormItem>>(modalTableProps?.tableSearchForm)
-  const [caretLeftFlag, setCaretLeftFlag] = useState(true);
-  const [tableData, setTableData] = useState([]);
-  const [tablePagination, setTablePagination] = useState({ total: 0, size: "small", current: 1, pageSize: tableInitPageSize })
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [tableFormParams, setTableFormParams] = useState({});
-  const [confirmLoading, setConfirmLoading] = useState(false);
-  const [confirmContinueLoading, setConfirmContinueLoading] = useState(false);
-
-  const [selectColumns, setSelectColumns] = useState([]);
-  const [showColumns, setShowColumns] = useState([]);
-  const [tableColumns, setTableColumns] = useState([]);
-  const [showToChooseColumns, setShowToChooseColumns] = useState([]);
-  const codeToChoose = tableCodeList[0] || initTableCode[businessType][0];
-  const codeSelected = tableCodeList[1] || initTableCode[businessType][1];
-
-  // FIXME: 特殊业务逻辑
-  const checkSelectChange = async (bType: string, tList: any, recordKey: string, recordItem: any, selectItem: any, changeValue: string) => {
-    if(bType == 'skc' && tList.some((i: any) => i[recordKey] == recordItem[recordKey] && i[selectItem.dataIndex] == changeValue)) {
-      message.warning('相同skc配码不可设置相同哦')
-      return false
-    }
-    if(bType == 'spu') {
-      if(selectItem.dataIndex == 'colorName' && tList.some((i: any) => i[recordKey] == recordItem[recordKey] && i.selectPropertyGroupCode == recordItem.selectPropertyGroupCode && i[selectItem.dataIndex] == changeValue)){
-        message.warning('相同商品相同配码颜色不可设置相同哦')
-        return false
-      }
-      if(selectItem.dataIndex == 'selectPropertyGroupCode' && !recordItem.colorName) {
-        message.warning('请先选择颜色！')
-        return false
-      }
-      if(selectItem.dataIndex == 'selectPropertyGroupCode'&& tList.some((i: any) => i[recordKey] == recordItem[recordKey] && i.colorName == recordItem.colorName && i[selectItem.dataIndex] == changeValue)){
-        message.warning('相同商品相同颜色配码不可设置相同哦')
-        return false
-      }
-      if(selectItem.dataIndex == 'selectPropertyGroupCode') {
-        let result = true
-        try {
-          result = await checkSpuMatchCode({ skcCode: recordItem[recordKey], matchingCode: changeValue, ext1: recordItem.colorName });
-          result = true
-        }  catch (e) {
-          result = typeof e == 'boolean' ? e : false
-        }
-        return result
-      }
-    }
-    return true
-  }
-  const setBusinessDefaultValue = (list: any, recordList: any) => {
-    let result = list;
-    // FIXME: 特殊业务逻辑
-    if(businessType == 'spu' && (recordList?.some((i: any) => i?.colorValues?.length == 1) || recordList?.some((i: any) => i?.defaultMatchingCode))) {
-      result = list.map((i: any) => {
-        recordList.forEach((record: any) => {
-          if(i.uuid == record?.uuid) {
-            if(record.colorValues?.length == 1) {
-              i.colorName = record.colorValues[0]?.value;
-            }
-            i.selectPropertyGroupCode = record?.defaultMatchingCode;
-          }
-        })
-        return i
-      })
-    }
-    return result
-  }
-
-  useEffect(() => {
-    setTableColumns(modalTableProps?.tableColumns)
-  }, [modalTableProps?.tableColumns])
-
-  useEffect(() => {
-    setSelectColumns([... modalTableProps.selectColumn.map(item => {
-      const inputLength = modalTableProps.selectColumn.filter(item => item.isInputItem).length
-      const currentIndex = inputIndex
-
-      if (item.isInputItem) {
-        inputIndex++;
-        return {
-          ...item,
-          render: (text, record, index) => {
-            // let
-            if(record.needFocus === true && currentIndex === 0) {
-
-            }
-            // FIXME: 特殊业务逻辑
-            let precisionObj=businessType == 'skc'?{
-              precision: 0
-            }:{};
-            const unitAccuracy = record.packingUnitList?.[0]?.unitAccuracy
-            const isCountUnitAccuracyCheck = item.dataIndex =='count' && unitAccuracy !== undefined
-            if(isCountUnitAccuracyCheck) {
-              precisionObj = {
-                onBlur: (e: any) => {
-                  const { target: { value } } = e;
-                  if(!checkQuantityAccuracy(value,Number(unitAccuracy))) {
-                    record[item.dataIndex] = precisionQuantity(value,Number(unitAccuracy))
-                    const newPopValue = popvalue.map((i: any, innerIndex: number) => {
-                      if(innerIndex == index) {
-                        i[item.dataIndex] =  record[item.dataIndex]
-                      }
-                      return i
-                    })
-                    setPopValue(newPopValue)
-                  }
-                }
-                // precision: unitAccuracy
-              }
-            }
-            return (
-              <InputNumber
-                {...item.inputProps}
-                value={text || ''}
-                min={0}
-                autoFocus={record.needFocus}
-                keyboard={false}
-                {...precisionObj}
-                onChange={(value) => {
-                  record[item.dataIndex] = value
-                  editRecord(record)
-                }}
-                // onFocus={(e)=> {
-                //   let dom1 = e.currentTarget;
-                //   dom1.setSelectionRange(100, 0);
-                //   dom1.select(text);
-                // }}
-                onKeyDown={(e) => {
-                  if(e.keyCode === 13 && e.ctrlKey) {
-                    handleOk(true)
-                    document.getElementById("first-query")?.focus()
-                  }
-                  if(e.keyCode === 8 && e.ctrlKey) {
-                    message.success('删除当前行')
-                    e.stopPropagation();
-                    e.preventDefault();
-                    let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
-                    if (dom) {
-                      dom.select();
-                      dom.focus();
-                      dom.scrollIntoView(false)
-                    }
-                    dom = null
-                    deleteRecord(record, popvalue);
-                  }
-                  if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
-                    e.stopPropagation();
-                    e.preventDefault();
-                    let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex - 1]
-                    if (dom) {
-                      dom.select();
-                      dom.focus();
-                      dom.scrollIntoView(false)
-                    }
-                    dom = null
-                  }
-                  if (e.keyCode === 39 && e.shiftKey) {  //  右滑
-                    e.stopPropagation();
-                    e.preventDefault();
-                    let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex + 1]
-                    if (dom) {
-                      dom.select();
-                      dom.focus();
-                      dom.scrollIntoView(false)
-                    }
-                    dom = null
-                  }
-                  if (e.keyCode === 40) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
-                    if (dom) {
-                      dom.select();
-                      dom.focus();
-                      dom.scrollIntoView(false)
-                    }
-                    dom = null
-                  } else if (e.keyCode === 38) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    let dom1 = e.nativeEvent.path[5].children[index]?.getElementsByTagName('input')[currentIndex]
-                    if (dom1) {
-                      // dom1.value=""
-                      // dom1.setSelectionRange(100, 0);
-                      dom1.select();
-                      dom1.focus();
-                      dom1.scrollIntoViewIfNeeded(false)
-                      // dom1.value=record['count']
-                    }
-                    dom1 = null
-                  } else if (e.keyCode === 9 && index === selectedRowKeys.length - 1 && currentIndex === inputLength - 1) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                  }
-                }}
-              />
-            );
-          },
-        }
-      }
-
-      const selectLength = modalTableProps.selectColumn.filter(item => item.isSelectItem).length
-      const currentSelectIndex = selectIndex
-      if(item.isSelectItem) {
-        selectIndex++;
-        return {
-          ...item,
-          render: (text, record, index) => {
-            if (item?.dataSource?.length || item?.dataSourceCode) {
-              const selectKey = item?.dataSourceMapping?.[0] || 'code';
-              const selectText = item?.dataSourceMapping?.[1] || 'name';
-              const dataSourceList = getSelectDataList(record,item,selectKey);
-              return (
-                <Select
-                  {...item.selectProps}
-                  value={text || null}
-                  onChange={async (value) => {
-                    const dataSourceSelectItem = dataSourceList?.find(d => d[selectKey] == value)||{}
-                    if(item?.selectChangeCallback) {
-                      // 由使用者定义下拉框改变如何处理数据
-                      await item?.selectChangeCallback?.(popvalue,setPopValue,{ record, index, item, oldValue:text, changeValue:value, dataSourceSelectItem, editRecord })
-                    } else {
-                      // 更新当前行数据函数
-                      const changeValue = (v,dSSItem) => {
-                        record[item.dataIndex] = v
-                        // 下拉框带出需要回填的数据
-                        if(item?.dataSourceSelectBackData?.length) {
-                          item?.dataSourceSelectBackData.forEach(s => {
-                            record[s] = dSSItem ? dSSItem[s] : null;
-                          })
-                        }
-                      }
-
-                      // 处理校验，默认不校验
-                      let isCheckPass = true; 
-                      try {
-                        if(item?.selectCheckCallback) {
-                          isCheckPass = await item?.selectCheckCallback(popvalue,{ record, index, item, oldValue:text, changeValue:value, dataSourceSelectItem })
-                        } else {
-                          // 兼容老代码
-                          const isConformToTheRules = await checkSelectChange(businessType,popvalue,mappingValueField,record,item,value)
-                          isCheckPass = !isConformToTheRules;
-                        }
-                      } catch (error) {
-                        
-                      }
-
-                      if(isCheckPass) {
-                        changeValue(value,dataSourceSelectItem)
-                      } else {
-                        changeValue(null)
-                      }
-
-                      // 更新已选表格函数
-                      editRecord(record)
-                    }
-                  }}
-                  style={{width: `${item?.width && (item?.width -20) || '160'}px`}}
-                >
-                  {dataSourceList?.map((item: any) => {
-                    return <Select.Option value={item[selectKey]}>{item[selectText]}</Select.Option>
-                  })}
-                </Select>
-              )
-            }
-            return <></>
-          },
-        }
-      }
-
-      return item
-    }), {
-      title: '操作',
-      width: 50,
-      dataIndex: 'operation',
-      fixed: 'right',
-      render: (text, record, index) => {
-        return (
-          <span style={{cursor: 'pointer', color: '#005CFF' }} onClick={() => {
-            deleteRecord(record)
-          }} type={"text"}>删除</span>
-        )
-      }
-    },])
-  }, [modalTableProps?.selectColumn,popvalue])
-
-  // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
-  const getData = (params = {}, type = 1) => {
-    if (!requestConfig) return;
-
-    setFetching(true)
-
-    // 处理dependence参数
-    const fixedParam = {};
-
-    // 数组对象处理,对带有特殊标记的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('*multiInput') >= 0) {
-        let name = '',
-          value = element['value'];
-        if (value.indexOf(',') >= 0) {
-          name = `qp-${element['name']}-in`;
-        } else {
-          name = `qp-${element['name']}-like`;
-        }
-        params[name] = value;
-        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,
-    }
-    //todo 为了满足单个使用like查询，多个含，的使用in查询
-    if(!queryParams.unConvert){
-      Object.keys(queryParams).forEach(key =>{
-        if(String(queryParams[key]).includes(',')){
-          if(key.includes('like')){
-            queryParams[key.replace('like','in')]=queryParams[key];
-            delete queryParams[key];
-          }
-        }
-      })
-    }
-    request
-      .get(`${url}${url.includes("?")?"&":"?"}${stringify(queryParams)}`)
-      .then((result: any) => {
-        setFetching(false)
-        result = result.data;
-        if (judgeIsRequestError(result)) {
-          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) => {
-                return {
-                  ...item,
-                  value: item[mappingValueField],
-                  baseUnitCode: item?.packingUnitList?.find((item: any) => item.baseUnit === true)?.unitCode
-                };
-              })
-              : Array.isArray(res) &&
-              res?.map((item: Record<string, any>) => {
-                return {
-                  ...item,
-                  value: item[mappingValueField],
-                  baseUnitCode: item?.packingUnitList?.find((item: any) => item.baseUnit === true)?.unitCode
-                };
-              })
-            : [];
-        }
-        source = Array.isArray(source) ? source : []
-     
-        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: any) => { setFetching(false) });
-  }
-
-  useEffect(() => {
-    const pList = modalTableProps?.promiseLoadList || []
-    if(!pList?.length) return;
-    const list = pList.map((i: any) => {
-      return loadSelectSource(i.url, i.params)
-    });
-    Promise.all(list).then((x: any)=>{
-      formatFormSourceList(x,pList,tableSearchForm)
-    })
-  }, [businessType])
-
-  useEffect(() => {
-    if (value) {
-      setPopValue(value);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    makeUniqueValue();
-  }, [sourceName])
-
-  const showModal = () => {
-    // getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
-    setIsModalVisible(true);
-    // 回显
-    if (value) {
-      if (selectMode) {
-        setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
-        setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
-      } else {
-        setSelectedRowKeys(labelInValue ? [value.key] : [value])
-        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
-      }
-    }
-
-    setTimeout(() => {
-      document.getElementById("first-query")?.focus()
-    }, 50)
-  };
-
-  const handleShowModal = () => {
-    if(beforeShowModal) {
-      beforeShowModal(popvalue).then(res => {
-        showModal()
-      }).catch(Error => {
-        message.warning(Error)
-      })
-    } else {
-      showModal()
-    }
-  }
-
-  const handleLoading = (isContinue,flag) => {
-    isContinue ? setConfirmContinueLoading(flag) : setConfirmLoading(flag);
-  }
-
-  const handleOk = (isContinue) => {
-    if(!popvalue.length)  {
-      message.warning('至少选中一条数据')
-      return;
-    }
-
-    if(onSaveCallback) {
-      handleLoading(isContinue,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)
-          }
-          deleteSelectRows();
-          document.getElementById('first-query')?.focus()
-        !isContinue && handleCancel();
-        } else {
-        }
-        handleLoading(isContinue,false)
-      }).catch(Error => {
-        if(typeof Error === 'object') {
-          !Error.needThrowError ? null : message.error(Error.message)
-        } else {
-          message.error(Error);
-        }
-        handleLoading(isContinue,false)
-      })
-    } else {
-      !isContinue && handleCancel();
-    }
-  };
-
-  const handleCancel = () => {
-    form.resetFields();
-    setTableFormParams({});
-    setIsModalVisible(false);
-    setTableData([])
-    onCancelCallback && onCancelCallback();
-    // if (selectMode) {
-    //   run();
-    // }
-  };
-
-  const onSearchTable = () => {
-    form.validateFields()
-    .then(() => {
-      const params = form.getFieldsValue();
-      setTableFormParams(params);
-      getData({ ...params, pageSize: tableInitPageSize }, 2)
-    })
-  }
-
-  const onResetTable = () => {
-    form.resetFields();
-    setTableFormParams({});
-    form.validateFields()
-    .then(() => {
-      getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
-    })
-    .catch(() => {
-      setTableData([]);
-    })
-  }
-
-  const handleTableChange = (pagination) => {
-    getData({ ...tableFormParams, pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
-  }
-
-  // 扁平化二维数组的方法
-  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) => {
-    if(selectKeys.length - selectedRowKeys.length > 0) {
-      if (selectKeys.length - selectedRowKeys.length === 1) {
-        selectRows[selectRows.length -1]['needFocus'] = true;
-      } else {
-        selectRows[selectedRowKeys.length]['needFocus'] = true;
-      }
-    }
-    if(isAllowRepeatedSelect) {
-      const handleSelectRows = selectRows.map((i: any) => {
-        const newUuid = uuid();
-        return {...i, uuid: newUuid}
-      })
-      const list = popvalue.concat(handleSelectRows);
-      const recordList = handleSelectRows
-      setPopValue(setBusinessDefaultValue(list,recordList));
-      setSelectedRowKeys([])
-    } else {
-      setPopValue(selectRows);
-      setSelectedRowKeys(selectKeys)
-    }
-  }
-
-  // 生成唯一值
-  const makeUniqueValue = () => {
-    const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
-    setUniqueValue(generateUnitKey);
-    return generateUnitKey;
-  }
-
-  const rowSelection = {
-    type: 'checkbox',
-    selectedRowKeys,
-    preserveSelectedRowKeys: true,
-    onChange: (sks, srs) => {
-      onChangeSelectedKeys(sks, srs)
-    },
-    getCheckboxProps: () => ({
-      disabled: selectProps?.disabled || props?.disabled,
-    }),
-  };
-
-  const onDoubleClickSelect = (e, record) => {
-    if (!selectMode) {
-      const srs = [JSON.parse(JSON.stringify(record))]
-      const sks = srs.map((i: any) => i.value)
-      onChangeSelectedKeys(sks, srs)
-    }
-  }
-
-  const themeColor = { color: '#005CFF' }
-
-  const formItem = (list: Array<SearchFormItem>) => {
-    if (isModalVisible && list?.length) {
-      return list.map((i: SearchFormItem, index) => {
-        const {name, label, field, type='', filterFormItem, initialSource=[], ...restProps} = i;
-
-        if (type === 'custom_filter_form_item') return filterFormItem;
-
-        if (type === 'select' || field?.type === 'select') {
-          return (
-            <Form.Item name={name} label={label} key={name} {...restProps}>
-              <Select style={{ width: '100%' }} placeholder='请选择' {...field?.props}>
-                {initialSource.length && initialSource.map((m: any) => (
-                  <Option value={m.value} key={m.value}>{m.text}</Option>
-                ))}
-              </Select>
-            </Form.Item>
-          )
-        }
-
-        if (type === 'treeSelect' || field?.type === 'treeSelect') {
-          return (
-            <Form.Item name={name} label={label} key={name} {...restProps}>
-              <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...field?.props}></TreeSelect>
-            </Form.Item>
-          )
-        }
-
-        if (type === 'BusinessSearchSelect' || field?.type === 'BusinessSearchSelect') {
-          return (
-            <div>
-              <Form.Item name={name} label={label} key={name} {...restProps}>
-                <BusinessSearchSelect {...field?.props} />
-              </Form.Item>
-            </div>
-          )
-        }
-
-        if (type === 'multipleQueryInput' || field?.type === 'multipleQueryInput') {
-          return (
-            <div>
-              <Form.Item name={name} label={label} key={name} {...restProps}>
-                <QueryMutipleInput onValueChange={(value) => {
-                  form.setFieldsValue({
-                    [name]: value
-                  })
-                }} />
-              </Form.Item>
-            </div>
-          );
-        }
-
-        // 默认type是input
-        return (
-          <Form.Item name={name} label={label} key={name} {...restProps}>
-            <Input id={index === 0 ? "first-query" : 'index'} style={{ width: '100%' }} onKeyDown={(e) => {
-              if (e.keyCode === 13) {
-                onSearchTable()
-              }
-            }} placeholder='请输入' allowClear maxLength={100}  {...field?.props} />
-          </Form.Item>
-        )
-      })
-    } else {
-      return null
-    }
-  }
-
-  const deleteSelectRows = () => {
-    setPopValue([])
-    setSelectedRowKeys([])
-  }
-
-  const deleteRecord = (record) => {
-    if(isAllowRepeatedSelect) {
-      setPopValue(popvalue.filter(item => item.uuid !== record.uuid))
-      setSelectedRowKeys([])
-    } else {
-      setPopValue(popvalue.filter(item => item[selectRowKey] !== record[selectRowKey]))
-      setSelectedRowKeys([...selectedRowKeys.filter(item => item !== record[selectRowKey])])
-    }
-  }
-
-  const editRecord = (record) => {
-    const newPopValue = [...popvalue]
-    const index = newPopValue.findIndex(item => record[selectRowKey] == item[selectRowKey]);
-    const item = newPopValue[index]
-    newPopValue.splice(index, 1, {
-      ...item,
-      ...record
-    })
-    setPopValue([...newPopValue])
-  }
-
-  let inputIndex = 0;
-  let selectIndex = 0;
-
-  useEffect(() => {
-    setInitialShowColumn(codeSelected,selectColumns,(res) => {
-      setShowColumnsCallback(res)
-    })
-  },[selectColumns])
-  useEffect(() => {
-    setInitialShowColumn(codeToChoose,tableColumns,(res) => {
-      setShowToChooseColumnsCallback(res)
-    })
-  },[tableColumns])
-
-  const handleResize = (arr,index: any, callback) => (_: any, { size }: any) => {
-    let newColumns = arr.map((col: any) => ({ ...col }));
-    const handleIndex = (arr: any, indexArr: any) => {
-      let i = indexArr.shift();
-      if (indexArr.length > 0) {
-        handleIndex(arr[i].children, indexArr);
-      } else {
-        arr[i] = {
-          ...arr[i],
-          width: size.width,
-        };
-        handleAntdColumnsSpecialParams(arr[i]);
-      }
-    };
-    handleIndex(newColumns, [...index]);
-    callback(newColumns)
-  };
-
-  const setShowColumnsCallback = (newColumns: Array<any>) => {
-    setShowColumns([...newColumns])
-  }
-  const setShowToChooseColumnsCallback = (newColumns: Array<any>) => {
-    setShowToChooseColumns([...newColumns])
-  }
-
-  const handleColumns = (arr: any, indexArr: any[], callback: any) => {
-    arr.forEach((item: any, index: any) => {
-      let indexArrInside = [...indexArr, index].filter((i: any) => i || i === 0)
-      if (noEmptyArray(item.children)) {
-        handleColumns(item.children, indexArrInside);
-      } else {
-        item.width = item.width || getItemDefaultWidth(item);
-        item.onHeaderCell = (column: any) => ({
-          ...item,
-          width:
-            typeof column.width === 'number'
-              ? column.width
-              : parseInt(column.width.replace('px', '')),
-          onResize: handleResize(arr,indexArrInside, callback),
-        });
-      }
-    })
-  };
-  let showToChooseCol = showToChooseColumns.map((item: any) => {
-    handleAntdColumnsSpecialParams(item);
-    return ({ ...item })
-  })
-  handleColumns(showToChooseCol, [],(res)=> setShowToChooseColumnsCallback(res));
-  let showSelectedCol = showColumns.map((item: any) => {
-    handleAntdColumnsSpecialParams(item);
-    return ({ ...item })
-  })
-  handleColumns(showSelectedCol, [],(res)=> setShowColumnsCallback(res));
-
-  const selectLength = isAllowRepeatedSelect ? (popvalue?.length || 0) : (selectedRowKeys?.length || 0)
-  return (
-    <div className={'add_select'}>
-      <div className="add_select_show" id={`add_select_div_${uniqueValue}`}>
-        <Button onClick={handleShowModal} {...realButtonProps}>
-          {buttonText}
-        </Button>
-      </div>
-      {isModalVisible && (
-        <Modal
-          width='1200px'
-          style={{ top: 20 }}
-          bodyStyle={{ padding: '0px' }}
-          visible={isModalVisible}
-          closable={false}
-          onCancel={handleCancel}
-          footer={selectMode ? [
-            <Button key="back" onClick={handleCancel}>
-              取消
-            </Button>,
-            <Button
-              key="save-and-continue"
-              style={{color: '#005CFF', borderColor: '#005CFF'}}
-              onClick={() => {handleOk(true)}}
-              loading={confirmContinueLoading}
-              disabled={confirmLoading || !tableData.length || (selectProps?.disabled || props?.disabled)}
-          >
-            保存并继续
-          </Button>,
-            <Button
-              key="submit"
-              type="primary"
-              onClick={() => {handleOk(false)}}
-              loading={confirmLoading}
-              disabled={confirmContinueLoading || !tableData.length || (selectProps?.disabled || props?.disabled)}
-            >
-              确定
-            </Button>,
-          ] : null}
-        >
-          <div>
-            <div className='add_select_header'>
-              {modalTableProps?.modalTableTitle}
-              <span><span>*</span> &nbsp;快捷键：【Tab】-跳格切换；【Shift+←、→】-当前行左、右移动；【  ↑、↓】-当前列上、下移动；【ctrl+Enter】-保存并继续；【ctrl+Delete】-删除当前行；</span>
-              <span className='add_select_header_close'><CloseCircleOutlined style={{fontSize: '20px'}} onClick={handleCancel} /></span>
-            </div>
-            <div className={'add_select_wrapper'}>
-              <div className={caretLeftFlag ? 'add_select_wrapper_left' : 'add_select_wrapper_left1'}>
-                <div className={'select_list_columns'}>
-                  <div className={'select_list_columns_formItems'}>
-                    <Form form={form} layout='vertical' key='modalForm'>
-                      {formItem(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 ? 'add_select_wrapper_right' : 'add_select_wrapper_right1'}>
-                <div>
-                  <div className={'select_list_selectTips'}>
-                    <div style={{ marginLeft: 8 }}>搜索结果共&nbsp;<span style={themeColor}>{tablePagination?.total || 0}</span>&nbsp;项{selectMode ? <span>， 本次已选&nbsp;<span style={themeColor}>{selectLength}</span>&nbsp;项</span> : ''}</div>
-                    <div>
-                      <span style={{ marginRight: 8 }}>
-                        <TableColumnSetting
-                          setShowColumns={setShowToChooseColumnsCallback}
-                          showColumns={showToChooseColumns}
-                          datasource={tableColumns || []}
-                          tableCode={codeToChoose}
-                          settingImgAttribute={{ width: 20, style: { marginTop: -2 } }}
-                        />
-                      </span>
-                    </div>
-                  </div>
-                  <Table
-                    size='small'
-                    rowSelection={rowSelection}
-                    columns={showToChooseCol}
-                    dataSource={tableData}
-                    pagination={tablePagination}
-                    loading={fetching}
-                    onChange={handleTableChange}
-                    rowKey={mappingValueField}
-                    rowClassName={'row-class'}
-                    scroll={{ y: 500 }}
-                    components={{
-                      header: {
-                        cell: ResizeableTitle,
-                      },
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className={'add_select_wrapper_select'}>
-              <div className={'select_list_selectTips'}>
-                <div style={{ marginLeft: 8 }}><span>本次已选&nbsp;<span style={themeColor}>{selectLength}</span>&nbsp;项</span></div>
-                <div style={{ display: 'flex' }}>
-                  <span style={{ marginRight: 8 }}>
-                    <TableColumnSetting
-                      setShowColumns={setShowColumnsCallback}
-                      showColumns={showColumns}
-                      datasource={selectColumns || []}
-                      tableCode={codeSelected}
-                      settingImgAttribute={{ width: 20, style: { marginTop: -2 } }}
-                    />
-                  </span>
-                  <div style={{ marginRight: 8 }}><span onClick={deleteSelectRows} style={{ ...themeColor, cursor: 'pointer' }}>{clearTitle??'清空所选商品'}</span></div>
-                </div>
-              </div>
-              <Table
-                size='small'
-                columns={showSelectedCol}
-                dataSource={popvalue}
-                pagination={false}
-                rowKey={selectRowKey}
-                rowClassName={'row-class'}
-                scroll={{ y: 500 }}
-                onRow={record => {
-                  return {
-                    onDoubleClick: event => onDoubleClickSelect(event, record),
-                  };
-                }}
-                components={{
-                  header: {
-                    cell: ResizeableTitle,
-                  },
-                }}
-              />
-            </div>
-          </div>
-        </Modal>
-      )}
-    </div>
-  );
-};
-
-export default AddSelect;
+// @ts-nocheck
+import React, { useState, useEffect } from 'react';
+import { useDebounceFn } from 'ahooks';
+import { Input, Button, Modal, Select, InputNumber, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag } from 'antd';
+import { SearchOutlined, CopyOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import request from '@/utils/request';
+import { stringify } from 'querystring';
+import _ from "lodash"
+import './index.less';
+import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
+import { Resizable } from 'react-resizable';
+import { checkQuantityAccuracy, precisionQuantity } from '@/utils/checkUtils';
+import TableColumnSetting from '@/plugin/TableColumnSetting';
+import { setInitialShowColumn } from '@/plugin/TableColumnSetting/utils';
+import { handleAntdColumnsSpecialParams, uuid } from '@/utils/utils';
+import { judgeIsRequestError } from '@/utils/requestUtils';
+import { getItemDefaultWidth, noEmptyArray } from '@/components/Business/columnSettingTable/utils';
+import { getSelectDataList, loadSelectSource, formatFormSourceList } from './helps';
+
+interface SearchFormItem {
+  name: string;
+  label: string;
+  filterFormItem?: FormItemProps;
+  initialSource?: any[];
+  field: any;
+  type?: string;
+  [formItemProps: string]: any;
+}
+
+const checkSpuMatchCode = (data: any) => {
+  return new Promise((resolve, reject) => {
+      request.post(`/stock/rwFrontRecordSkcDetail/checkSpuMatchCode`,data)
+        .then((result: any) => {
+          result = result.data;
+          if (judgeIsRequestError(result)) {
+            message.error(result.msg);
+            reject(false);
+            return;
+          }
+          resolve(result);
+        })
+        .catch((err: any) => {
+          reject(err);
+        });
+    })
+}
+
+const ResizeableTitle = (props) => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+const initTableCode = {
+  'sku': ['skuSelect-tableOptionsToChoosePartCode','skuSelect-tableSelectedItemPartCode'],
+  'skc': ['skcSelect-tableOptionsToChoosePartCode','skcSelect-tableSelectedItemPartCode'],
+  'spu': ['spuSelect-tableOptionsToChoosePartCode','spuSelect-tableSelectedItemPartCode']
+}
+
+const { Option } = Select;
+
+const AddSelect = (props: any) => {
+  const {
+    value, // 必传
+    selectProps = {},
+    modalTableProps = {},
+    labelInValue = false,
+    requestConfig,
+    sourceName,
+    onSaveCallback,
+    onCancelCallback,
+    buttonText = '添加',
+    buttonProps = {},
+    beforeShowModal,
+    tableCodeList = [], // 非必填 默认取组件定义code,如需自定义----数组第一位为供选择商品的table的code,第二位为已选择商品的table的code
+    businessType = 'sku',
+    isAllowRepeatedSelect = false,
+    clearTitle
+  } = props;
+  const { url, otherParams, isMap, mappingValueField = 'code' } = requestConfig || {};
+  const realButtonProps = {type: "primary", ...buttonProps};
+  const selectRowKey = isAllowRepeatedSelect ? 'uuid' : mappingValueField
+
+  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
+  const initVal = value || (selectMode ? [] : null);
+  const pageSize = 100 // 下拉框默认分页 条数
+  const tableInitPageSize = 10 // 弹框默认分页 条数
+  const currentPage = 1
+
+  const [fetching, setFetching] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [popvalue, setPopValue] = useState(initVal);
+  const [uniqueValue, setUniqueValue] = useState(sourceName)
+
+  const [form] = Form.useForm();
+  const [tableSearchForm, setTableSearchForm] = useState<Array<SearchFormItem>>(modalTableProps?.tableSearchForm)
+  const [caretLeftFlag, setCaretLeftFlag] = useState(true);
+  const [tableData, setTableData] = useState([]);
+  const [tablePagination, setTablePagination] = useState({ total: 0, size: "small", current: 1, pageSize: tableInitPageSize })
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [tableFormParams, setTableFormParams] = useState({});
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [confirmContinueLoading, setConfirmContinueLoading] = useState(false);
+
+  const [selectColumns, setSelectColumns] = useState([]);
+  const [showColumns, setShowColumns] = useState([]);
+  const [tableColumns, setTableColumns] = useState([]);
+  const [showToChooseColumns, setShowToChooseColumns] = useState([]);
+  const codeToChoose = tableCodeList[0] || initTableCode[businessType][0];
+  const codeSelected = tableCodeList[1] || initTableCode[businessType][1];
+
+  // FIXME: 特殊业务逻辑
+  const checkSelectChange = async (bType: string, tList: any, recordKey: string, recordItem: any, selectItem: any, changeValue: string) => {
+    if(bType == 'skc' && tList.some((i: any) => i[recordKey] == recordItem[recordKey] && i[selectItem.dataIndex] == changeValue)) {
+      message.warning('相同skc配码不可设置相同哦')
+      return false
+    }
+    if(bType == 'spu') {
+      if(selectItem.dataIndex == 'colorName' && tList.some((i: any) => i[recordKey] == recordItem[recordKey] && i.selectPropertyGroupCode == recordItem.selectPropertyGroupCode && i[selectItem.dataIndex] == changeValue)){
+        message.warning('相同商品相同配码颜色不可设置相同哦')
+        return false
+      }
+      if(selectItem.dataIndex == 'selectPropertyGroupCode' && !recordItem.colorName) {
+        message.warning('请先选择颜色！')
+        return false
+      }
+      if(selectItem.dataIndex == 'selectPropertyGroupCode'&& tList.some((i: any) => i[recordKey] == recordItem[recordKey] && i.colorName == recordItem.colorName && i[selectItem.dataIndex] == changeValue)){
+        message.warning('相同商品相同颜色配码不可设置相同哦')
+        return false
+      }
+      if(selectItem.dataIndex == 'selectPropertyGroupCode') {
+        let result = true
+        try {
+          result = await checkSpuMatchCode({ skcCode: recordItem[recordKey], matchingCode: changeValue, ext1: recordItem.colorName });
+          result = true
+        }  catch (e) {
+          result = typeof e == 'boolean' ? e : false
+        }
+        return result
+      }
+    }
+    return true
+  }
+  const setBusinessDefaultValue = (list: any, recordList: any) => {
+    let result = list;
+    // FIXME: 特殊业务逻辑
+    if(businessType == 'spu' && (recordList?.some((i: any) => i?.colorValues?.length == 1) || recordList?.some((i: any) => i?.defaultMatchingCode))) {
+      result = list.map((i: any) => {
+        recordList.forEach((record: any) => {
+          if(i.uuid == record?.uuid) {
+            if(record.colorValues?.length == 1) {
+              i.colorName = record.colorValues[0]?.value;
+            }
+            i.selectPropertyGroupCode = record?.defaultMatchingCode;
+          }
+        })
+        return i
+      })
+    }
+    return result
+  }
+
+  useEffect(() => {
+    setTableColumns(modalTableProps?.tableColumns)
+  }, [modalTableProps?.tableColumns])
+
+  useEffect(() => {
+    setSelectColumns([... modalTableProps.selectColumn.map(item => {
+      const inputLength = modalTableProps.selectColumn.filter(item => item.isInputItem).length
+      const currentIndex = inputIndex
+
+      if (item.isInputItem) {
+        inputIndex++;
+        return {
+          ...item,
+          render: (text, record, index) => {
+            // let
+            if(record.needFocus === true && currentIndex === 0) {
+
+            }
+            // FIXME: 特殊业务逻辑
+            let precisionObj=businessType == 'skc'?{
+              precision: 0
+            }:{};
+            const unitAccuracy = record.packingUnitList?.[0]?.unitAccuracy
+            const isCountUnitAccuracyCheck = item.dataIndex =='count' && unitAccuracy !== undefined
+            if(isCountUnitAccuracyCheck) {
+              precisionObj = {
+                onBlur: (e: any) => {
+                  const { target: { value } } = e;
+                  if(!checkQuantityAccuracy(value,Number(unitAccuracy))) {
+                    record[item.dataIndex] = precisionQuantity(value,Number(unitAccuracy))
+                    const newPopValue = popvalue.map((i: any, innerIndex: number) => {
+                      if(innerIndex == index) {
+                        i[item.dataIndex] =  record[item.dataIndex]
+                      }
+                      return i
+                    })
+                    setPopValue(newPopValue)
+                  }
+                }
+                // precision: unitAccuracy
+              }
+            }
+            return (
+              <InputNumber
+                {...item.inputProps}
+                value={text || ''}
+                min={0}
+                autoFocus={record.needFocus}
+                keyboard={false}
+                {...precisionObj}
+                onChange={(value) => {
+                  record[item.dataIndex] = value
+                  editRecord(record)
+                }}
+                // onFocus={(e)=> {
+                //   let dom1 = e.currentTarget;
+                //   dom1.setSelectionRange(100, 0);
+                //   dom1.select(text);
+                // }}
+                onKeyDown={(e) => {
+                  if(e.keyCode === 13 && e.ctrlKey) {
+                    handleOk(true)
+                    document.getElementById("first-query")?.focus()
+                  }
+                  if(e.keyCode === 8 && e.ctrlKey) {
+                    message.success('删除当前行')
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                    deleteRecord(record, popvalue);
+                  }
+                  if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex - 1]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                  }
+                  if (e.keyCode === 39 && e.shiftKey) {  //  右滑
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 1]?.getElementsByTagName('input')[currentIndex + 1]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                  }
+                  if (e.keyCode === 40) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom = e.nativeEvent.path[5].children[index + 2]?.getElementsByTagName('input')[currentIndex]
+                    if (dom) {
+                      dom.select();
+                      dom.focus();
+                      dom.scrollIntoView(false)
+                    }
+                    dom = null
+                  } else if (e.keyCode === 38) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let dom1 = e.nativeEvent.path[5].children[index]?.getElementsByTagName('input')[currentIndex]
+                    if (dom1) {
+                      // dom1.value=""
+                      // dom1.setSelectionRange(100, 0);
+                      dom1.select();
+                      dom1.focus();
+                      dom1.scrollIntoViewIfNeeded(false)
+                      // dom1.value=record['count']
+                    }
+                    dom1 = null
+                  } else if (e.keyCode === 9 && index === selectedRowKeys.length - 1 && currentIndex === inputLength - 1) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                  }
+                }}
+              />
+            );
+          },
+        }
+      }
+
+      const selectLength = modalTableProps.selectColumn.filter(item => item.isSelectItem).length
+      const currentSelectIndex = selectIndex
+      if(item.isSelectItem) {
+        selectIndex++;
+        return {
+          ...item,
+          render: (text, record, index) => {
+            if (item?.dataSource?.length || item?.dataSourceCode) {
+              const selectKey = item?.dataSourceMapping?.[0] || 'code';
+              const selectText = item?.dataSourceMapping?.[1] || 'name';
+              const dataSourceList = getSelectDataList(record,item,selectKey);
+              return (
+                <Select
+                  {...item.selectProps}
+                  value={text || null}
+                  onChange={async (value) => {
+                    const dataSourceSelectItem = dataSourceList?.find(d => d[selectKey] == value)||{}
+                    if(item?.selectChangeCallback) {
+                      // 由使用者定义下拉框改变如何处理数据
+                      await item?.selectChangeCallback?.(popvalue,setPopValue,{ record, index, item, oldValue:text, changeValue:value, dataSourceSelectItem, editRecord })
+                    } else {
+                      // 更新当前行数据函数
+                      const changeValue = (v,dSSItem) => {
+                        record[item.dataIndex] = v
+                        // 下拉框带出需要回填的数据
+                        if(item?.dataSourceSelectBackData?.length) {
+                          item?.dataSourceSelectBackData.forEach(s => {
+                            record[s] = dSSItem ? dSSItem[s] : null;
+                          })
+                        }
+                      }
+
+                      // 处理校验，默认不校验
+                      let isCheckPass = true; 
+                      try {
+                        if(item?.selectCheckCallback) {
+                          isCheckPass = await item?.selectCheckCallback(popvalue,{ record, index, item, oldValue:text, changeValue:value, dataSourceSelectItem })
+                        } else {
+                          // 兼容老代码
+                          const isConformToTheRules = await checkSelectChange(businessType,popvalue,mappingValueField,record,item,value)
+                          isCheckPass = !isConformToTheRules;
+                        }
+                      } catch (error) {
+                        
+                      }
+
+                      if(isCheckPass) {
+                        changeValue(value,dataSourceSelectItem)
+                      } else {
+                        changeValue(null)
+                      }
+
+                      // 更新已选表格函数
+                      editRecord(record)
+                    }
+                  }}
+                  style={{width: `${item?.width && (item?.width -20) || '160'}px`}}
+                >
+                  {dataSourceList?.map((item: any) => {
+                    return <Select.Option value={item[selectKey]}>{item[selectText]}</Select.Option>
+                  })}
+                </Select>
+              )
+            }
+            return <></>
+          },
+        }
+      }
+
+      return item
+    }), {
+      title: '操作',
+      width: 50,
+      dataIndex: 'operation',
+      fixed: 'right',
+      render: (text, record, index) => {
+        return (
+          <span style={{cursor: 'pointer', color: '#005CFF' }} onClick={() => {
+            deleteRecord(record)
+          }} type={"text"}>删除</span>
+        )
+      }
+    },])
+  }, [modalTableProps?.selectColumn,popvalue])
+
+  // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
+  const getData = (params = {}, type = 1) => {
+    if (!requestConfig) return;
+
+    setFetching(true)
+
+    // 处理dependence参数
+    const fixedParam = {};
+
+    // 数组对象处理,对带有特殊标记的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('*multiInput') >= 0) {
+        let name = '',
+          value = element['value'];
+        if (value.indexOf(',') >= 0) {
+          name = `qp-${element['name']}-in`;
+        } else {
+          name = `qp-${element['name']}-like`;
+        }
+        params[name] = value;
+        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,
+    }
+    //todo 为了满足单个使用like查询，多个含，的使用in查询
+    if(!queryParams.unConvert){
+      Object.keys(queryParams).forEach(key =>{
+        if(String(queryParams[key]).includes(',')){
+          if(key.includes('like')){
+            queryParams[key.replace('like','in')]=queryParams[key];
+            delete queryParams[key];
+          }
+        }
+      })
+    }
+    request
+      .get(`${url}${url.includes("?")?"&":"?"}${stringify(queryParams)}`)
+      .then((result: any) => {
+        setFetching(false)
+        result = result.data;
+        if (judgeIsRequestError(result)) {
+          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) => {
+                return {
+                  ...item,
+                  value: item[mappingValueField],
+                  baseUnitCode: item?.packingUnitList?.find((item: any) => item.baseUnit === true)?.unitCode
+                };
+              })
+              : Array.isArray(res) &&
+              res?.map((item: Record<string, any>) => {
+                return {
+                  ...item,
+                  value: item[mappingValueField],
+                  baseUnitCode: item?.packingUnitList?.find((item: any) => item.baseUnit === true)?.unitCode
+                };
+              })
+            : [];
+        }
+        source = Array.isArray(source) ? source : []
+     
+        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: any) => { setFetching(false) });
+  }
+
+  useEffect(() => {
+    const pList = modalTableProps?.promiseLoadList || []
+    if(!pList?.length) return;
+    const list = pList.map((i: any) => {
+      return loadSelectSource(i.url, i.params)
+    });
+    Promise.all(list).then((x: any)=>{
+      formatFormSourceList(x,pList,tableSearchForm)
+    })
+  }, [businessType])
+
+  useEffect(() => {
+    if (value) {
+      setPopValue(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    makeUniqueValue();
+  }, [sourceName])
+
+  const showModal = () => {
+    // getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
+    setIsModalVisible(true);
+    // 回显
+    if (value) {
+      if (selectMode) {
+        setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
+        setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
+      } else {
+        setSelectedRowKeys(labelInValue ? [value.key] : [value])
+        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
+      }
+    }
+
+    setTimeout(() => {
+      document.getElementById("first-query")?.focus()
+    }, 50)
+  };
+
+  const handleShowModal = () => {
+    if(beforeShowModal) {
+      beforeShowModal(popvalue).then(res => {
+        showModal()
+      }).catch(Error => {
+        message.warning(Error)
+      })
+    } else {
+      showModal()
+    }
+  }
+
+  const handleLoading = (isContinue,flag) => {
+    isContinue ? setConfirmContinueLoading(flag) : setConfirmLoading(flag);
+  }
+
+  const handleOk = (isContinue) => {
+    if(!popvalue.length)  {
+      message.warning('至少选中一条数据')
+      return;
+    }
+
+    if(onSaveCallback) {
+      handleLoading(isContinue,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)
+          }
+          deleteSelectRows();
+          document.getElementById('first-query')?.focus()
+        !isContinue && handleCancel();
+        } else {
+        }
+        handleLoading(isContinue,false)
+      }).catch(Error => {
+        if(typeof Error === 'object') {
+          !Error.needThrowError ? null : message.error(Error.message)
+        } else {
+          message.error(Error);
+        }
+        handleLoading(isContinue,false)
+      })
+    } else {
+      !isContinue && handleCancel();
+    }
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    setTableFormParams({});
+    setIsModalVisible(false);
+    setTableData([])
+    onCancelCallback && onCancelCallback();
+    // if (selectMode) {
+    //   run();
+    // }
+  };
+
+  const onSearchTable = () => {
+    form.validateFields()
+    .then(() => {
+      const params = form.getFieldsValue();
+      setTableFormParams(params);
+      getData({ ...params, pageSize: tableInitPageSize }, 2)
+    })
+  }
+
+  const onResetTable = () => {
+    form.resetFields();
+    setTableFormParams({});
+    form.validateFields()
+    .then(() => {
+      getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
+    })
+    .catch(() => {
+      setTableData([]);
+    })
+  }
+
+  const handleTableChange = (pagination) => {
+    getData({ ...tableFormParams, pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
+  }
+
+  // 扁平化二维数组的方法
+  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) => {
+    if(selectKeys.length - selectedRowKeys.length > 0) {
+      if (selectKeys.length - selectedRowKeys.length === 1) {
+        selectRows[selectRows.length -1]['needFocus'] = true;
+      } else {
+        selectRows[selectedRowKeys.length]['needFocus'] = true;
+      }
+    }
+    if(isAllowRepeatedSelect) {
+      const handleSelectRows = selectRows.map((i: any) => {
+        const newUuid = uuid();
+        return {...i, uuid: newUuid}
+      })
+      const list = popvalue.concat(handleSelectRows);
+      const recordList = handleSelectRows
+      setPopValue(setBusinessDefaultValue(list,recordList));
+      setSelectedRowKeys([])
+    } else {
+      setPopValue(selectRows);
+      setSelectedRowKeys(selectKeys)
+    }
+  }
+
+  // 生成唯一值
+  const makeUniqueValue = () => {
+    const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
+    setUniqueValue(generateUnitKey);
+    return generateUnitKey;
+  }
+
+  const rowSelection = {
+    type: 'checkbox',
+    selectedRowKeys,
+    preserveSelectedRowKeys: true,
+    onChange: (sks, srs) => {
+      onChangeSelectedKeys(sks, srs)
+    },
+    getCheckboxProps: () => ({
+      disabled: selectProps?.disabled || props?.disabled,
+    }),
+  };
+
+  const onDoubleClickSelect = (e, record) => {
+    if (!selectMode) {
+      const srs = [JSON.parse(JSON.stringify(record))]
+      const sks = srs.map((i: any) => i.value)
+      onChangeSelectedKeys(sks, srs)
+    }
+  }
+
+  const themeColor = { color: '#005CFF' }
+
+  const formItem = (list: Array<SearchFormItem>) => {
+    if (isModalVisible && list?.length) {
+      return list.map((i: SearchFormItem, index) => {
+        const {name, label, field, type='', filterFormItem, initialSource=[], ...restProps} = i;
+
+        if (type === 'custom_filter_form_item') return filterFormItem;
+
+        if (type === 'select' || field?.type === 'select') {
+          return (
+            <Form.Item name={name} label={label} key={name} {...restProps}>
+              <Select style={{ width: '100%' }} placeholder='请选择' {...field?.props}>
+                {initialSource.length && initialSource.map((m: any) => (
+                  <Option value={m.value} key={m.value}>{m.text}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )
+        }
+
+        if (type === 'treeSelect' || field?.type === 'treeSelect') {
+          return (
+            <Form.Item name={name} label={label} key={name} {...restProps}>
+              <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...field?.props}></TreeSelect>
+            </Form.Item>
+          )
+        }
+
+        if (type === 'BusinessSearchSelect' || field?.type === 'BusinessSearchSelect') {
+          return (
+            <div>
+              <Form.Item name={name} label={label} key={name} {...restProps}>
+                <BusinessSearchSelect {...field?.props} />
+              </Form.Item>
+            </div>
+          )
+        }
+
+        if (type === 'multipleQueryInput' || field?.type === 'multipleQueryInput') {
+          return (
+            <div>
+              <Form.Item name={name} label={label} key={name} {...restProps}>
+                <QueryMutipleInput onValueChange={(value) => {
+                  form.setFieldsValue({
+                    [name]: value
+                  })
+                }} />
+              </Form.Item>
+            </div>
+          );
+        }
+
+        // 默认type是input
+        return (
+          <Form.Item name={name} label={label} key={name} {...restProps}>
+            <Input id={index === 0 ? "first-query" : 'index'} style={{ width: '100%' }} onKeyDown={(e) => {
+              if (e.keyCode === 13) {
+                onSearchTable()
+              }
+            }} placeholder='请输入' allowClear maxLength={100}  {...field?.props} />
+          </Form.Item>
+        )
+      })
+    } else {
+      return null
+    }
+  }
+
+  const deleteSelectRows = () => {
+    setPopValue([])
+    setSelectedRowKeys([])
+  }
+
+  const deleteRecord = (record) => {
+    if(isAllowRepeatedSelect) {
+      setPopValue(popvalue.filter(item => item.uuid !== record.uuid))
+      setSelectedRowKeys([])
+    } else {
+      setPopValue(popvalue.filter(item => item[selectRowKey] !== record[selectRowKey]))
+      setSelectedRowKeys([...selectedRowKeys.filter(item => item !== record[selectRowKey])])
+    }
+  }
+
+  const editRecord = (record) => {
+    const newPopValue = [...popvalue]
+    const index = newPopValue.findIndex(item => record[selectRowKey] == item[selectRowKey]);
+    const item = newPopValue[index]
+    newPopValue.splice(index, 1, {
+      ...item,
+      ...record
+    })
+    setPopValue([...newPopValue])
+  }
+
+  let inputIndex = 0;
+  let selectIndex = 0;
+
+  useEffect(() => {
+    setInitialShowColumn(codeSelected,selectColumns,(res) => {
+      setShowColumnsCallback(res)
+    })
+  },[selectColumns])
+  useEffect(() => {
+    setInitialShowColumn(codeToChoose,tableColumns,(res) => {
+      setShowToChooseColumnsCallback(res)
+    })
+  },[tableColumns])
+
+  const handleResize = (arr,index: any, callback) => (_: any, { size }: any) => {
+    let newColumns = arr.map((col: any) => ({ ...col }));
+    const handleIndex = (arr: any, indexArr: any) => {
+      let i = indexArr.shift();
+      if (indexArr.length > 0) {
+        handleIndex(arr[i].children, indexArr);
+      } else {
+        arr[i] = {
+          ...arr[i],
+          width: size.width,
+        };
+        handleAntdColumnsSpecialParams(arr[i]);
+      }
+    };
+    handleIndex(newColumns, [...index]);
+    callback(newColumns)
+  };
+
+  const setShowColumnsCallback = (newColumns: Array<any>) => {
+    setShowColumns([...newColumns])
+  }
+  const setShowToChooseColumnsCallback = (newColumns: Array<any>) => {
+    setShowToChooseColumns([...newColumns])
+  }
+
+  const handleColumns = (arr: any, indexArr: any[], callback: any) => {
+    arr.forEach((item: any, index: any) => {
+      let indexArrInside = [...indexArr, index].filter((i: any) => i || i === 0)
+      if (noEmptyArray(item.children)) {
+        handleColumns(item.children, indexArrInside);
+      } else {
+        item.width = item.width || getItemDefaultWidth(item);
+        item.onHeaderCell = (column: any) => ({
+          ...item,
+          width:
+            typeof column.width === 'number'
+              ? column.width
+              : parseInt(column.width.replace('px', '')),
+          onResize: handleResize(arr,indexArrInside, callback),
+        });
+      }
+    })
+  };
+  let showToChooseCol = showToChooseColumns.map((item: any) => {
+    handleAntdColumnsSpecialParams(item);
+    return ({ ...item })
+  })
+  handleColumns(showToChooseCol, [],(res)=> setShowToChooseColumnsCallback(res));
+  let showSelectedCol = showColumns.map((item: any) => {
+    handleAntdColumnsSpecialParams(item);
+    return ({ ...item })
+  })
+  handleColumns(showSelectedCol, [],(res)=> setShowColumnsCallback(res));
+
+  const selectLength = isAllowRepeatedSelect ? (popvalue?.length || 0) : (selectedRowKeys?.length || 0)
+  return (
+    <div className={'add_select'}>
+      <div className="add_select_show" id={`add_select_div_${uniqueValue}`}>
+        <Button onClick={handleShowModal} {...realButtonProps}>
+          {buttonText}
+        </Button>
+      </div>
+      {isModalVisible && (
+        <Modal
+          width='1200px'
+          style={{ top: 20 }}
+          bodyStyle={{ padding: '0px' }}
+          visible={isModalVisible}
+          closable={false}
+          onCancel={handleCancel}
+          footer={selectMode ? [
+            <Button key="back" onClick={handleCancel}>
+              取消
+            </Button>,
+            <Button
+              key="save-and-continue"
+              style={{color: '#005CFF', borderColor: '#005CFF'}}
+              onClick={() => {handleOk(true)}}
+              loading={confirmContinueLoading}
+              disabled={confirmLoading || !tableData.length || (selectProps?.disabled || props?.disabled)}
+          >
+            保存并继续
+          </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              onClick={() => {handleOk(false)}}
+              loading={confirmLoading}
+              disabled={confirmContinueLoading || !tableData.length || (selectProps?.disabled || props?.disabled)}
+            >
+              确定
+            </Button>,
+          ] : null}
+        >
+          <div>
+            <div className='add_select_header'>
+              {modalTableProps?.modalTableTitle}
+              <span><span>*</span> &nbsp;快捷键：【Tab】-跳格切换；【Shift+←、→】-当前行左、右移动；【  ↑、↓】-当前列上、下移动；【ctrl+Enter】-保存并继续；【ctrl+Delete】-删除当前行；</span>
+              <span className='add_select_header_close'><CloseCircleOutlined style={{fontSize: '20px'}} onClick={handleCancel} /></span>
+            </div>
+            <div className={'add_select_wrapper'}>
+              <div className={caretLeftFlag ? 'add_select_wrapper_left' : 'add_select_wrapper_left1'}>
+                <div className={'select_list_columns'}>
+                  <div className={'select_list_columns_formItems'}>
+                    <Form form={form} layout='vertical' key='modalForm'>
+                      {formItem(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 ? 'add_select_wrapper_right' : 'add_select_wrapper_right1'}>
+                <div>
+                  <div className={'select_list_selectTips'}>
+                    <div style={{ marginLeft: 8 }}>搜索结果共&nbsp;<span style={themeColor}>{tablePagination?.total || 0}</span>&nbsp;项{selectMode ? <span>， 本次已选&nbsp;<span style={themeColor}>{selectLength}</span>&nbsp;项</span> : ''}</div>
+                    <div>
+                      <span style={{ marginRight: 8 }}>
+                        <TableColumnSetting
+                          setShowColumns={setShowToChooseColumnsCallback}
+                          showColumns={showToChooseColumns}
+                          datasource={tableColumns || []}
+                          tableCode={codeToChoose}
+                          settingImgAttribute={{ width: 20, style: { marginTop: -2 } }}
+                        />
+                      </span>
+                    </div>
+                  </div>
+                  <Table
+                    size='small'
+                    rowSelection={rowSelection}
+                    columns={showToChooseCol}
+                    dataSource={tableData}
+                    pagination={tablePagination}
+                    loading={fetching}
+                    onChange={handleTableChange}
+                    rowKey={mappingValueField}
+                    rowClassName={'row-class'}
+                    scroll={{ y: 500 }}
+                    components={{
+                      header: {
+                        cell: ResizeableTitle,
+                      },
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className={'add_select_wrapper_select'}>
+              <div className={'select_list_selectTips'}>
+                <div style={{ marginLeft: 8 }}><span>本次已选&nbsp;<span style={themeColor}>{selectLength}</span>&nbsp;项</span></div>
+                <div style={{ display: 'flex' }}>
+                  <span style={{ marginRight: 8 }}>
+                    <TableColumnSetting
+                      setShowColumns={setShowColumnsCallback}
+                      showColumns={showColumns}
+                      datasource={selectColumns || []}
+                      tableCode={codeSelected}
+                      settingImgAttribute={{ width: 20, style: { marginTop: -2 } }}
+                    />
+                  </span>
+                  <div style={{ marginRight: 8 }}><span onClick={deleteSelectRows} style={{ ...themeColor, cursor: 'pointer' }}>{clearTitle??'清空所选商品'}</span></div>
+                </div>
+              </div>
+              <Table
+                size='small'
+                columns={showSelectedCol}
+                dataSource={popvalue}
+                pagination={false}
+                rowKey={selectRowKey}
+                rowClassName={'row-class'}
+                scroll={{ y: 500 }}
+                onRow={record => {
+                  return {
+                    onDoubleClick: event => onDoubleClickSelect(event, record),
+                  };
+                }}
+                components={{
+                  header: {
+                    cell: ResizeableTitle,
+                  },
+                }}
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+export default AddSelect;