@bit-sun/business-component 1.2.3 → 1.2.4-alpha.1

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

@@ -0,0 +1,962 @@
+// @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 axios from 'axios';
+import { stringify } from 'querystring';
+import _ from "lodash"
+import './index.less';
+import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
+import { Resizable } from 'react-resizable';
+
+const loadSelectSource = (url: string, params?: any) => {
+  return new Promise((resolve, reject) => {
+    axios
+      .get(`${url}?${stringify(params)}`)
+      .then((result: any) => {
+        result = result.data;
+        if ((result?.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
+          message.error(result.msg);
+          return;
+        }
+        resolve(result);
+      })
+      .catch((err) => {
+        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 formatSource = (reData: any, position: number, changePosition: number,changeSearchForm: any,resKeyValue=['code', 'name']) => {
+  const data = reData && reData[position]?.data;
+  const list = Array.isArray(data) ? data :(data?.items || data?.list || data?.children || []);
+  const formatData = list?.length ? list.map((v: any) => ({ text: v[resKeyValue[1]], value: v[resKeyValue[0]] })) : [];
+  changeSearchForm[changePosition] = {...changeSearchForm[changePosition], initialSource: formatData}
+}
+
+// 格式化树选择器数据源
+const mapSearchTree = (treeDataItem: any, resKeyValue: any) => {
+  const haveChildren = Array.isArray(treeDataItem.children) && treeDataItem.children.length > 0;
+  return {
+    title: treeDataItem[resKeyValue[1]],
+    value: treeDataItem[resKeyValue[0]],
+    parentId: treeDataItem.parent,
+    data: { ...treeDataItem },
+    isLeaf: !haveChildren,
+    disabled: haveChildren,
+    children: haveChildren ? treeDataItem.children.map((i: any) => mapSearchTree(i, resKeyValue)) : [],
+  };
+};
+const formatTreeDataSource = (reData: any, position: number, changePosition: number,changeSearchForm: any,resKeyValue=['id', 'name']) => {
+  const data = reData && reData[position]?.data;
+  const formatData = (data &&
+    Array.isArray(data) &&
+    data.length &&
+    data.map((ites: any) => mapSearchTree(ites, resKeyValue))) ||
+  []
+  changeSearchForm[changePosition].field.props.treeData = formatData;
+}
+
+const { Option } = Select;
+
+const AddSelect = (props: any) => {
+  const {
+    value, // 必传
+    onChange,
+    selectProps = {},
+    modalTableProps = {},
+    labelInValue = false,
+    requestConfig,
+    ctx,
+    sourceName,
+    needModalTable = true,
+    getPopupContainer = undefined,
+    onSaveCallback,
+    buttonText = '添加',
+    beforeShowModal
+  } = props;
+  const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField = 'name', mappingTextShowKeyField, mappingValueField = 'code', mappingTextShowTextField } = requestConfig || {};
+  const resultSourceKey = 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 [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(sourceName)
+  const { run } = useDebounceFn(
+    (v?: any) => {
+      // 优化搜索参数 支持传多个
+      let searchParams = {};
+      if (typeof selectParamsKey === 'string') {
+        searchParams = v ? { [selectParamsInitKey]: initVal } : { [selectParamsKey]: searchValue }
+      }
+      if (Array.isArray(selectParamsKey)) {
+        selectParamsKey.forEach((i: any) => {
+          searchParams = { ...searchParams, [i]: searchValue }
+        })
+      }
+      // 防抖函数  待定
+      getData(searchParams)
+    },
+    {
+      wait: 1000,
+    },
+  );
+
+  const [form] = Form.useForm();
+  const [tableSearchForm, setTableSearchForm] = useState(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 [doubleArr, setDoubleArr] = useState([]); // 存放双数组的数组
+  const [checkedAll, setCheckedAll] = useState(false)
+  const [indeterminate, setIndeterminate] = useState(false)
+  const [tableFormParams, setTableFormParams] = useState({});
+  const [tableColumns, setTableColumns] = useState([]);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [confirmContinueLoading, setConfirmContinueLoading] = useState(false);
+
+  useEffect(() => {
+    setTableColumns(
+      modalTableProps?.tableColumns.map((item, index) => {
+        return {
+          ...item,
+          width: item.width || 200,
+          onHeaderCell: (column) => ({
+            ...item,
+            width:
+              typeof column.width === 'number'
+                ? column.width
+                : parseInt(column.width.replace('px', '')),
+            onResize: handleResize(index),
+          })
+        }
+      })
+    )
+  }, [modalTableProps?.tableColumns])
+
+  // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
+  const getData = (params = {}, type = 1) => {
+    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;
+          form.setFieldsValue({ ...form?.getFieldsValue(), [item]: fixedParamVal })
+        }
+      });
+    }
+
+    // 数组对象处理,对带有特殊标记的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)}`)
+      .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: item[mappingTextField],
+                  textShowText,
+                  textShowKey: item[mappingTextShowKeyField || mappingValueField],
+                  value: item[mappingValueField],
+                  baseUnitCode: item?.packingUnitList?.find((item: any) => item.baseUnit === true)?.unitCode
+                };
+              })
+              : 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: item[mappingTextField],
+                  textShowText,
+                  textShowKey: item[mappingTextShowKeyField || mappingValueField],
+                  value: item[mappingValueField],
+                  baseUnitCode: item?.packingUnitList?.find((item: any) => item.baseUnit === true)?.unitCode
+                };
+              })
+            : [];
+        }
+        source = Array.isArray(source) ? source : []
+        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(() => {
+    Promise.all([
+      loadSelectSource(`/items/brand/queryBrandList`, {
+        pageSize: 5000,
+        currentPage: 1,
+        'ctl-withAuth': true
+      }),
+      loadSelectSource(`/items/category/queryCategoryTree`, {
+        pageSize: 5000,
+        currentPage: 1,
+      }),
+    ]).then((x: any)=>{
+      formatSource(x,0, 2, tableSearchForm,['id','name'])
+      formatTreeDataSource(x,1, 3, tableSearchForm)
+    })
+  }, [])
+
+  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 })));
+        setIndeterminate(!!value.length && value.length < itemsTotal);
+        setCheckedAll(itemsTotal && value.length === itemsTotal);
+        // 需清空数据
+        if (!value.length) {
+          setDoubleArr([])
+        }
+      } 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 handleSelectOver = (selectedValue: any) => {
+    if (selectedValue?.length) {
+      formaData(selectedValue);
+      // 解决选择最后1页的sku，返回后，不显示名称问题
+      const source = _.uniqBy(items.concat(selectedValue), 'value')
+      ctx?.form?.setFieldSource(resultSourceKey, source)
+      setItems(source)
+    }
+  }
+
+  const handleLoading = (isContinue,flag) => {
+    isContinue ? setConfirmContinueLoading(flag) : setConfirmLoading(flag);
+  }
+
+  const handleOk = (isContinue) => {
+    if(!popvalue.length)  {
+      message.warning('至少选中一条数据')
+      return;
+    }
+    // handleSelectOver(popvalue)
+    if(onSaveCallback) {
+      handleLoading(isContinue,true)
+      onSaveCallback(popvalue).then(res => {
+        if(true) {
+          message.success('保存成功')
+          deleteSelectRows();
+          document.getElementById('first-query')?.focus()
+        !isContinue && handleCancel();
+        } else {
+        }
+        handleLoading(isContinue,false)
+      }).catch(Error => {
+        message.error(Error);
+        handleLoading(isContinue,false)
+      })
+    } else {
+      !isContinue && handleCancel();
+    }
+  };
+
+  const formaData = (value) => {
+    if (labelInValue) {
+      const formatResult = value.map((i: any) => ({ key: i[mappingValueField], label: i[mappingTextField], value: i[mappingValueField] }))
+      onChange(selectMode ? formatResult : formatResult[0])
+    } else {
+      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
+      onChange(formatResult)
+    }
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    setTableFormParams({});
+    setIsModalVisible(false);
+    setTableData([])
+    // if (selectMode) {
+    //   run();
+    // }
+  };
+
+  const onSearchChange = (e) => {
+    setSearchValue(e.target.value);
+    run();
+  }
+
+  const onSearchBlur = () => {
+    setSearchValue('')
+    run();
+  }
+
+  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 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;
+      }
+    }
+    setPopValue(selectRows);
+    setSelectedRowKeys(selectKeys)
+    // setIndeterminate(!!filterRows.length && filterRows.length < tablePagination?.total);
+    // setCheckedAll(filterRows.length === tablePagination?.total);
+  }
+
+  // 生成唯一值
+  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) => {
+    if (isModalVisible && list?.length) {
+      return list.map((i: any, index) => {
+        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}>
+                {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}></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} />
+              </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 id={index === 0 ? "first-query" : 'index'} style={{ width: '100%' }} onKeyDown={(e) => {
+              if (e.keyCode === 13) {
+                onSearchTable()
+              }
+            }} placeholder='请输入' allowClear maxLength={100}  {...i?.field?.props} />
+          </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 deleteSelectRows = () => {
+    setPopValue([])
+    setSelectedRowKeys([])
+  }
+
+  const deleteRecord = (record) => {
+    setPopValue(popvalue.filter(item => item.skuCode !== record.skuCode))
+    setSelectedRowKeys([...selectedRowKeys.filter(item => item !== record.skuCode)])
+  }
+
+  let inputIndex = 0;
+  let selectColumns = [... 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) {
+
+          }
+          return (
+            <InputNumber
+              defaultValue={text || ''}
+              min={0}
+              autoFocus={record.needFocus}
+              keyboard={false}
+              onChange={(value) => {
+                record[item.dataIndex] = value
+              }}
+              // 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();
+                }
+              }}
+            />
+          );
+        },
+      }
+    }
+
+    return item
+  }), {
+    title: '操作',
+    width: 50,
+    fixed: 'right',
+    render: (text, record, index) => {
+      return (
+        <span style={{cursor: 'pointer', color: '#005CFF' }} onClick={() => {
+          deleteRecord(record)
+        }} type={"text"}>删除</span>
+      )
+    }
+  },]
+
+  const handleResize =
+    (index) =>
+      (e, { size }) => {
+        setTableColumns((columns: any) => {
+          let newColumns = [...columns];
+          newColumns[index] = {
+            ...newColumns[index],
+            width: size.width,
+          };
+          return [...newColumns];
+        });
+      };
+
+  return (
+    <div className={'add_select'}>
+      <div className="add_select_show" id={`add_select_div_${uniqueValue}`}>
+        <Button onClick={handleShowModal} type="primary">
+          {buttonText}
+        </Button>
+      </div>
+      {needModalTable && isModalVisible && (
+        <Modal
+          width='1200px'
+          style={{ top: 20 }}
+          bodyStyle={{ padding: '0px' }}
+          // title={modalTableProps?.modalTableTitle}
+          visible={isModalVisible}
+          closable={false}
+          onCancel={handleCancel}
+          footer={selectMode ? [
+            <Button key="back" onClick={handleCancel}>
+              取消
+            </Button>,
+            <Button
+              key="submit"
+              style={{color: '#005CFF', borderColor: '#005CFF'}}
+              onClick={() => {handleOk(true)}}
+              loading={confirmContinueLoading}
+              disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
+          >
+            保存并继续
+          </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              onClick={() => {handleOk(false)}}
+              loading={confirmLoading}
+              disabled={!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}>{selectedRowKeys?.length || 0}</span>&nbsp;项</span> : ''}</div>
+                  </div>
+                  <Table
+                    size='small'
+                    rowSelection={rowSelection}
+                    columns={tableColumns}
+                    dataSource={tableData}
+                    pagination={tablePagination}
+                    loading={fetching}
+                    onChange={handleTableChange}
+                    rowKey={mappingValueField}
+                    rowClassName={'row-class'}
+                    scroll={{ y: 500 }}
+                    components={{
+                      header: {
+                        cell: ResizeableTitle,
+                      },
+                    }}
+                  />
+                </div>
+              </div>
+              {/* <div>
+                <Table
+                  size='small'
+                  columns={modalTableProps?.tableColumns}
+                  dataSource={mapRows(doubleArr)}
+                  rowKey={mappingValueField}
+                  scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
+                  onRow={record => {
+                    return {
+                      onDoubleClick: event => onDoubleClickSelect(event, record),
+                    };
+                  }}
+                />
+            </div> */}
+            </div>
+            <div className={'add_select_wrapper_select'}>
+              <div className={'select_list_selectTips'}>
+                <div style={{ marginLeft: 8 }}><span>本次已选&nbsp;<span style={themeColor}>{selectedRowKeys?.length || 0}</span>&nbsp;项</span></div>
+                <div style={{ marginRight: 8 }}><span onClick={deleteSelectRows} style={{ ...themeColor, cursor: 'pointer' }}>清空所选商品</span></div>
+              </div>
+              <Table
+                size='small'
+                // rowSelection={rowSelection}
+                columns={selectColumns}
+                dataSource={popvalue}
+                pagination={false}
+                // onChange={handleTableChange}
+                rowKey={mappingValueField}
+                rowClassName={'row-class'}
+                scroll={{ y: 500 }}
+                onRow={record => {
+                  return {
+                    onDoubleClick: event => onDoubleClickSelect(event, record),
+                  };
+                }}
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+export default AddSelect;