@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

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

@@ -0,0 +1,771 @@
+// @ts-nocheck
+import { Button, message, Input, InputNumber, Tooltip, Table, Popover, Select } from 'antd';
+import React, { useState, useRef, useEffect } from 'react';
+import { SearchOutlined, CopyOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { stringify } from 'querystring';
+import './index.less';
+import request from '@/utils/request';
+import { Resizable } from 'react-resizable';
+import { checkQuantityAccuracy, precisionQuantity } from '@/utils/checkUtils';
+import { tableColumnsImage } from '@/components/Business/BsSulaQueryTable/utils';
+import { getSkuImg } from '@/utils/TableUtils';
+import TableColumnSetting from '@/plugin/TableColumnSetting';
+import { setInitialShowColumn } from '@/plugin/TableColumnSetting/utils';
+import { getItemDefaultWidth, noEmptyArray } from '@/components/Business/columnSettingTable/utils';
+import { handleAntdColumnsSpecialParams, parseWidth } from '@/utils/utils';
+import { judgeIsRequestSuccess, judgeIsRequestError } from '@/utils/requestUtils';
+
+const InputElement = ({
+  record, text, currentIndex, inputLength, index, setData, data, item, callSelectItem
+}: {
+  record: any, text: string, currentIndex: any, inputLength: any, index: any, setData: any, data: any, item: any, callSelectItem: any
+}) => {
+  const [hoverVisibled, updateHoverVisibled] = useState(false);
+  const [searchData, updateSearchData] = useState([]);
+  const tableRef = useRef(null);
+  const [value, setValue] = useState(text)
+  const inputRef = useRef(false);
+
+  const onSerchdata = (name: any) => {
+    request
+      .get(`/items/sku/pager/v2?${stringify({ 'skuCodeAndSkuName': name, 'pageSize': 100, 'qp-combination-eq': false, 'qp-approveStatus-eq': 1, 'qp-status-eq': 1 })}`)
+      .then(({ data, status }: any) => {
+        if (status === 200 || status == 0) { //status = 0 兼容
+          if (judgeIsRequestSuccess(data)) {
+            const resultData = data.data.items.map((item: any, index: any) => ({
+              ...item,
+              index
+            }));
+            if (resultData.length === 1) {
+              callSelectItem({ ...resultData[0], needFocus: true })
+              setValue(resultData[0][item.dataIndex])
+            } else {
+              updateHoverVisibled(true)
+              updateSearchData(resultData)
+            }
+          } else {
+            updateSearchData([])
+          }
+        }
+      })
+  }
+
+  const onCallback = (itemData: any) => {
+    updateHoverVisibled(false)
+    if (itemData) {
+      callSelectItem({ ...itemData, needFocus: true })
+      setValue(itemData[item.dataIndex])
+    } else {
+      callSelectItem(null)
+    }
+  }
+
+  const SearchDataTable = (hoverVisibled: any) => {
+    const [selectIndex, setSelectIndex] = useState(0);
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+      if (searchData.length && hoverVisibled) {
+        let dom = tableRef?.current?.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0]
+        if (dom) {
+          dom.style.background = '#005CFF30'
+        }
+      }
+    }, [hoverVisibled, tableRef?.current])
+
+    useEffect(() => {
+      const inter = setInterval(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+        }
+      }, 500)
+
+      return () => {
+        clearInterval(inter);
+      }
+    })
+
+    if (!hoverVisibled) return <></>
+
+    return <div className={'add_select_wrapper_select'} style={{ width: '800px', height: '400px', overflow: 'auto', position: 'relative' }}>
+      <Input placeholder='请输入skucode或者sku名称' ref={inputRef} style={{ position: 'absolute', zIndex: '-100', height: '22px' }} onKeyDown={(e) => {
+        let currentIndex = selectIndex
+        if (e.keyCode === 27) {
+          e.stopPropagation();
+          e.preventDefault();
+          setSelectIndex(0);
+          onCallback(null)
+        }
+        if (e.keyCode === 13) { // enter
+          onCallback(searchData[currentIndex])
+          setSelectIndex(0);
+        }
+
+        if (e.keyCode === 40) {  // 向下
+          let dom = tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex + 1]
+          if (dom) {
+            tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex].style.background = ''
+            setSelectIndex(currentIndex + 1)
+            dom.style.background = '#005CFF30'
+            dom.scrollIntoViewIfNeeded(false)
+          }
+        } else if (e.keyCode === 38) {
+          let dom = tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex - 1]
+          if (dom) {
+            tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[currentIndex].style.background = ''
+            setSelectIndex(currentIndex - 1)
+            dom.style.background = '#005CFF30'
+            dom.scrollIntoViewIfNeeded(false)
+          }
+        }
+      }} />
+      <Table
+        ref={tableRef}
+        pagination={false}
+        // components={
+        //   {
+        //     body: {
+        //       cell: ({index, record, ...props}) => {
+        //         debugger
+        //         return <td {...props} style={selectIndex === record?.index ? {background: '#005CFF30'} : {} } />
+        //       }
+        //     }
+        //   }
+        // }
+        onRow={(record, index) => {
+          return {
+            onClick: ((record, index, event) => {
+              let dom = tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[index]
+              if (dom) {
+                [...(tableRef.current.getElementsByTagName('tbody')[0].getElementsByTagName('tr'))].map(item => {
+                  item.style.background = ''
+                })
+                dom.style.background = '#005CFF30'
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              setSelectIndex(index)
+            }).bind(this, record, index), // 点击行
+          }
+        }}
+        rowClassName={'row-class'}
+        columns={[{
+          title: 'SKU编码',
+          width: 150,
+          dataIndex: 'skuCode',
+        },
+        {
+          title: 'SKU名称',
+          width: 200,
+          ellipsis: {
+            showTitle: false,
+          },
+          render: (text: any) => (
+            <Tooltip placement="topLeft" title={text}>
+              {text}
+            </Tooltip>
+          ),
+          dataIndex: 'name',
+        },
+        // {
+        //   title: '图片',
+        //   dataIndex: 'itemUrl',
+        //   width: 200,
+        //   ellipsis: {
+        //     showTitle: false,
+        //   },
+        //   render: (text: any,record: any) => (
+        //     <Tooltip placement="topLeft" title={text}>
+        //       {tableColumnsImage(getSkuImg(record),{ width: 28, height: 28 })}
+        //     </Tooltip>
+        //   ),
+        // },
+        {
+          title: '国际条码',
+          width: 100,
+          ellipsis: {
+            showTitle: false,
+          },
+          dataIndex: 'barCode',
+          render: (text: any) => (
+            <Tooltip placement="topLeft" title={text}>
+              {text}
+            </Tooltip>
+          ),
+        },
+        {
+          title: '所属SPU名称',
+          width: 100,
+          ellipsis: {
+            showTitle: false,
+          },
+          dataIndex: 'itemName',
+          render: (text: any) => (
+            <Tooltip placement="topLeft" title={text}>
+              {text}
+            </Tooltip>
+          ),
+        },
+        {
+          title: '所属SPU编码',
+          width: 100,
+          ellipsis: {
+            showTitle: false,
+          },
+          dataIndex: 'itemCode',
+          render: (text: any) => (
+            <Tooltip placement="topLeft" title={text}>
+              {text}
+            </Tooltip>
+          ),
+        },
+        {
+          title: '外部编码',
+          width: 100,
+          ellipsis: {
+            showTitle: false,
+          },
+          render: (text: any) => (
+            <Tooltip placement="topLeft" title={text}>
+              {text}
+            </Tooltip>
+          ),
+          dataIndex: 'externalCode',
+        }]} dataSource={searchData} />
+    </div>
+  }
+
+  let precisionObj={};
+  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 newData = data.map((i: any, innerIndex: number) => {
+            if(innerIndex == index) {
+              i[item.dataIndex] =  record[item.dataIndex]
+            }
+            return i
+          })
+          setData(newData)
+        }
+      }
+      // precision: unitAccuracy
+    }
+  }
+
+  return (
+    <Popover placement="bottomLeft" destroyTooltipOnHide={{ keepParent: false }} title="" trigger="" content={SearchDataTable(hoverVisibled)} visible={hoverVisibled} onVisibleChange={(disabled) => { updateHoverVisibled(disabled) }}>
+      {item.isPrimaryInput ?
+        <Input
+          value={value}
+          ref={inputRef}
+          placeholder='skucode / sku名称'
+          keyboard={false}
+          autoFocus={record.autoFocus}
+          onChange={(value) => {
+            record[item.dataIndex] = value.currentTarget.value
+            setValue(value.currentTarget.value)
+            // setData(data);
+          }}
+          // onFocus={(e)=> {
+          //   let dom1 = e.currentTarget;
+          //   dom1.setSelectionRange(100, 0);
+          //   dom1.select(text);
+          // }}
+          onKeyDown={(e) => {
+            const currentLineDom = e.target?.parentNode?.parentNode;
+            if (e.keyCode === 8 && e.ctrlKey && index) {
+              message.success('删除当前行')
+              e.stopPropagation();
+              e.preventDefault();
+              let dom = currentLineDom?.getElementsByTagName('input')?.[currentIndex]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+              setData(data.filter((item, innerIndex) => innerIndex !== index))
+            }
+            if (e.keyCode === 13) { // enter
+              if (item.isPrimaryInput) {
+                if (e.currentTarget.value.length < 2) {
+                  message.warning('至少输入两个字符');
+                } else {
+                  onSerchdata(e.currentTarget.value)
+                }
+              }
+            }
+            if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
+              e.stopPropagation();
+              e.preventDefault();
+              let dom = currentLineDom?.getElementsByTagName('input')[currentIndex - 1]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+            }
+            if (e.keyCode === 39 && e.shiftKey) {  //  右滑
+              e.stopPropagation();
+              e.preventDefault();
+              let dom = currentLineDom?.getElementsByTagName('input')[currentIndex + 1]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+            }
+            if (e.keyCode === 40) {  // 向下
+              e.stopPropagation();
+              e.preventDefault();
+              let parentDom = currentLineDom?.parentNode;
+              let dom = parentDom?.children?.[index + 2]?.getElementsByTagName('input')[currentIndex]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+            } else if (e.keyCode === 38) {
+              e.stopPropagation();
+              e.preventDefault();
+              let parentDom = currentLineDom?.parentNode;
+              let dom1 = parentDom?.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 && currentIndex === inputLength - 1 && index === data.length - 1) {
+              setData([...data, {}])
+            }
+          }}
+        />
+        :
+        <InputNumber
+          // onBlur={() => {updateHoverVisibled(false)}}
+          value={text || ''}
+          min={0}
+          keyboard={false}
+          {...precisionObj}
+          onChange={(value) => {
+            record[item.dataIndex] = value
+            const newData = data.map((i: any, innerIndex: number) => {
+              if(innerIndex == index) {
+                i[item.dataIndex] =  record[item.dataIndex]
+              }
+              return i
+            })
+            setData(newData)
+          }}
+          onKeyDown={(e) => {
+            const currentLineDom = e.target?.parentNode?.parentNode?.parentNode?.parentNode;
+            if (e.keyCode === 8 && e.ctrlKey && index) {
+              message.success('删除当前行')
+              e.stopPropagation();
+              e.preventDefault();
+              let dom = currentLineDom?.getElementsByTagName('input')?.[currentIndex]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+              setData(data.filter((item, innerIndex) => innerIndex !== index))
+            }
+            if (e.keyCode === 37 && e.shiftKey) {   // 左滑动
+              e.stopPropagation();
+              e.preventDefault();
+              let dom = currentLineDom?.getElementsByTagName('input')[currentIndex - 1]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+            }
+            if (e.keyCode === 39 && e.shiftKey) {  //  右滑
+              e.stopPropagation();
+              e.preventDefault();
+              let dom = currentLineDom?.getElementsByTagName('input')[currentIndex + 1]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+            }
+            if (e.keyCode === 40) {  // 向下
+              e.stopPropagation();
+              e.preventDefault();
+              let parentDom = currentLineDom?.parentNode;
+              let dom = parentDom?.children?.[index + 2]?.getElementsByTagName('input')[currentIndex]
+              if (dom) {
+                dom.select();
+                dom.focus();
+                dom.scrollIntoViewIfNeeded(false)
+              }
+              dom = null
+            } else if (e.keyCode === 38) {
+              e.stopPropagation();
+              e.preventDefault();
+              let parentDom = currentLineDom?.parentNode;
+              let dom1 = parentDom?.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 && currentIndex === inputLength - 1 && index === data.length - 1) {
+              e.stopPropagation();
+              e.preventDefault();
+            } else if (e.keyCode === 13 && currentIndex === inputLength - 1 && index === data.length - 1 && record['skuCode']) {
+              setData([...data, { autoFocus: true }])
+            }
+          }}
+        />
+      }
+
+    </Popover>
+  )
+}
+
+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 BillEntry: React.FC = ({ onSaveCallback, validDataUrl="/items/sku/import/check", isBrandAuth=true, isCheckStockNum=true, tableCode='skuBillEntry-tableSelectedItemPartCode' }) => {
+  const columns = [
+    {
+      title: 'SKU编码',
+      width: 150,
+      dataIndex: 'skuCode',
+      isInputItem: true,
+      isPrimaryInput: true
+    },
+    {
+      title: 'SKU名称',
+      width: 200,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+      dataIndex: 'name',
+    },
+    // {
+    //   title: '图片',
+    //   dataIndex: 'itemUrl',
+    //   width: 200,
+    //   ellipsis: {
+    //     showTitle: false,
+    //   },
+    //   render: (text: any,record: any) => (
+    //     <Tooltip placement="topLeft" title={text}>
+    //       {tableColumnsImage(getSkuImg(record),{ width: 28, height: 28 })}
+    //     </Tooltip>
+    //   ),
+    // },
+    {
+      title: '单位',
+      dataIndex: 'selectUnitCode',
+      width: 100,
+      render: (text: any, record: any) => {
+        if (record?.packingUnitList?.length) {
+          const basePackUnit = record?.packingUnitList[0]
+          record.selectUnitCode = basePackUnit.unitCode
+          return basePackUnit.name || basePackUnit.unitCode
+        }
+
+
+        return <></>
+      },
+    },
+    {
+      title: '数量',
+      width: 100,
+      isInputItem: true,
+      dataIndex: 'count',
+    },
+    {
+      title: '所属SPU编码',
+      width: 100,
+      ellipsis: {
+        showTitle: false,
+      },
+      dataIndex: 'itemCode',
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '规格',
+      width: 200,
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (text: any) => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
+      dataIndex: 'propertyNameAndValue',
+    }
+  ]
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [data, setData] = useState([{ hovered: false }]);
+  const tableRef = useRef(null)
+  const codeSelected = tableCode;
+
+  const [loading, setLoading] = useState(false);
+  const [selectColumns, setSelectColumns] = useState([]);
+  const [showColumns, setShowColumns] = useState([]);
+
+  useEffect(() => {
+    setSelectColumns([...columns.map(item => {
+      const inputLength = columns.filter(item => item.isInputItem || item.isSelectItem).length
+      const currentIndex = inputIndex
+      if (item.isInputItem) {
+        inputIndex++;
+        return {
+          ...item,
+          render: (text, record, index) => {
+            return (
+              <InputElement setData={setData} callSelectItem={callSelectItem.bind(this, index)} item={item} isPrimaryInput={item.isPrimaryInput} record={record} text={text} data={data} index={index} inputLength={inputLength} currentIndex={currentIndex} />
+            );
+          },
+        }
+      } else if (item.isSelectItem) {
+        inputIndex++;
+      }
+
+      return item
+    }), {
+      title: '操作',
+      width: 50,
+      render: (text, record, index) => {
+        if (index !== 0) {
+          return (
+            <span style={{ cursor: 'pointer', color: '#005CFF' }} onClick={() => {
+              deleteRecord(record)
+            }}>删除</span>
+          )
+        }
+      }
+    }])
+  },[data])
+
+  useEffect(() => {
+    setInitialShowColumn(codeSelected,selectColumns,(res) => {
+      console.log(res,'---res')
+      setShowColumnsCallback(res)
+    })
+  },[selectColumns])
+
+  const callSelectItem = (index, item) => {
+    if (item) {
+      let newData = [].concat(data)
+      newData[index] = { ...data[index], ...item }
+      setData(newData)
+    }
+    let dom = tableRef?.current?.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[index + 1]
+    if (dom) {
+      setTimeout(() => {
+        dom.getElementsByTagName('input')[item ? 1 : 0]?.select()
+        dom.getElementsByTagName('input')[item ? 1 : 0]?.focus()
+      }, 200)
+    }
+  }
+
+  const deleteRecord = (record) => {
+    setData(data.filter(item => item.skuCode !== record.skuCode))
+  }
+
+  let inputIndex = 0;
+
+  const isSkuCanEntry = (resultData) => {
+    // 处理业务参数
+    let otherParams={}
+    if(isBrandAuth){
+      otherParams = { brandAuth: 'ctl-withAuth' }
+    }
+    return request
+      .post(validDataUrl, {
+        ...otherParams,
+        columns: ["skuCode", "quantity"],
+        data: resultData.map((i:any) => ({ skuCode: i.skuCode, quality: i.count })),
+        checkStockNum: isCheckStockNum,
+      })
+      .then((result) => {
+        result = result.data;
+        if (judgeIsRequestError(result)) {
+          message.error(result.msg);
+          return { flag: false }
+        } else {
+          let res = result.data || [];
+          const errorList = res.filter((i: any) => !i.flag);
+          return  { flag: !errorList?.length, errorList }
+        }
+      }).catch(() => {
+        return { flag:false }
+      })
+  }
+
+  const handleSubmit = async () => {
+    // 加校验逻辑
+    if (!data?.length) {
+      message.warning('至少录入一条数据');
+      return;
+    }
+    if (!data?.every((d: any) => d.skuCode && d.name)) {
+      message.warning('录入商品不存在');
+      return;
+    }
+    if (!data?.every((d: any) => d.count)) {
+      message.warning('请填写商品数量！');
+      return;
+    }
+    const canEntryObject = await isSkuCanEntry(data)
+    if(canEntryObject?.flag === false) {
+      const messageInfo = canEntryObject?.errorList?.length && canEntryObject?.errorList.map((i: any) => <div>{i.skuCode}校验失败：{i.checkResults}</div>)
+        messageInfo && message.warning({ content: messageInfo, duration: 6 });
+      return;
+    }
+
+    setLoading(true)
+    onSaveCallback(data).then(res => {
+      if(true) {
+        let initSuccessMessage = '保存成功'
+        const rmsbi = res?.messageSuccessBackInfo || {};
+        if(rmsbi && Object.keys(rmsbi)?.length){
+          rmsbi?.needThrowSuccess ? message.success(rmsbi?.successMessage || initSuccessMessage) : null
+        } else {
+          message.success(initSuccessMessage)
+        }
+      }
+      setLoading(false)
+    }).catch(Error => {
+      message.error(Error);
+      setLoading(false)
+    })
+  }
+
+  const setShowColumnsCallback = (newColumns: Array<any>) => {
+    setShowColumns([...newColumns])
+  }
+
+  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 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
+          : parseWidth(column.width),
+          onResize: handleResize(arr,indexArrInside, callback),
+        });
+      }
+    })
+  };
+  let showSelectedCol = showColumns.map((item: any) => {
+    handleAntdColumnsSpecialParams(item);
+    return ({ ...item })
+  })
+  handleColumns(showSelectedCol, [],(res)=> setShowColumnsCallback(res));
+
+  return (
+      <div className='add_select'>
+        <div className='add_select_quick_header'>
+          <div className='add_select_quick_header_title'><div>快速录入</div><Button type="primary" onClick={() => handleSubmit()} loading={loading}>提交</Button></div>
+          <span><span>*</span> &nbsp;快捷键：【Tab】-跳格切换；【Shift+←、→】-当前行左、右移动；【  ↑、↓】-当前列上、下移动；【ctrl+Delete】-删除当前行；</span>
+          <span style={{ marginRight: 8, float: 'right' }}>
+            <TableColumnSetting
+              setShowColumns={setShowColumnsCallback}
+              showColumns={showColumns}
+              datasource={selectColumns || []}
+              tableCode={codeSelected}
+              settingImgAttribute={{ width: 24, style: { marginTop: 2 } }}
+            />
+          </span>
+        </div>
+        <div className={'add_select_wrapper_select add_select_wrapper_select_quick'}>
+          <Table
+            size='small'
+            scroll={{ y: 240 }}
+            ref={tableRef}
+            dataSource={data}
+            key={data.length}
+            columns={showSelectedCol}
+            pagination={false}
+            rowClassName={'row-class'}
+            rowClassName={(record: object | null | undefined, index: number) =>
+              index % 2 === 0 ? 'table_base row-class' : 'table_odd row-class'
+            }
+            components={{
+              header: {
+                cell: ResizeableTitle,
+              },
+            }}
+          />
+        </div>
+
+      </div>
+  );
+};
+
+export default BillEntry;