kts-component-invoice-operate 3.1.19 → 3.2.0

package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useDelRowButton/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Invoice from '../../../../../../..';
+import { Button, Menu } from 'kts-xui';
+
+export default () => {
+
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  const isRemRow = controller.useMemo(s => s.goodsListState.isRemRow, []);
+
+  /** 是否禁用 */
+  const disabled = controller.useMemo((s) => {
+    if (s.goodsListState.selectedGoodIndex.length <= 0) return true;
+    return false;
+  }, []);
+
+  /** 点击了删除 */
+  const onClick = React.useCallback(async () => {
+    const selectedGoodIndex = controller.state.goodsListState.selectedGoodIndex.slice();
+    for (let i = 0; i < selectedGoodIndex.length; i++) {
+      await controller.delGood(selectedGoodIndex[i]);
+    }
+    await controller.run(async s => { s.goodsListState.selectedGoodIndex = [] });
+  }, [])
+
+  const menuItem = React.useMemo(() => {
+
+    if (model === 'prefab') return <></>;
+    if (model === 'readOnly') return <></>;
+
+    return (
+      <Menu.Item key="1" onClick={onClick} disabled={disabled}> 删除行 </Menu.Item>
+    )
+  }, [model, onClick, disabled])
+
+  const button = React.useMemo(() => {
+
+    if (isRemRow === false) return <></>;
+    if (model === 'prefab') return <></>;
+    if (model === 'readOnly') return <></>;
+
+    return (
+      <Button size='small' onClick={onClick} disabled={disabled} >删除</Button>
+    )
+  }, [model, onClick, disabled])
+
+  return { button, menuItem };
+};

package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useEmptyRefill/index.tsx

@@ -0,0 +1,35 @@
+
+import Invoice from '../../../../../../..';
+import { Button, Popconfirm } from "kts-xui"
+import React from "react"
+
+/** 清空重填 */
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, []);
+
+    const confirm = React.useCallback(() => {
+        controller.run(async s => {
+            s.goodsListState.goodsList = [];
+            s.goodsListState.goodsMap = new Map();
+        })
+    }, [controller])
+
+    const button = React.useMemo(() => {
+        if (model === 'readOnly') return <></>;
+        return (
+            <Popconfirm
+                title="将要清空所有项目信息，是否继续"
+                onConfirm={confirm}
+                okText="确定"
+                cancelText="取消"
+            >
+                <Button size='small' >清空重填</Button>
+            </Popconfirm>
+        )
+    }, [model, confirm])
+
+    return { button }
+}

package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useEndowCodeButton/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import Invoice from '../../../../../../..';
+import { message, Menu, Button } from 'kts-xui';
+import coolingFn from '../../../../../../../tools/coolingFn';
+import { IGood, LineAttributeType } from '../../../../../../../InvoiceController';
+
+export default () => {
+
+  const controller = Invoice.useInvoiceController();
+
+  const model = controller.useMemo(s => s.model, []);
+
+  /** 是否禁用 */
+  const disabled = controller.useMemo((s) => s.goodsListState.selectedGoodIndex.length <= 0, []);
+
+  const onClick = React.useCallback(async () => {
+    await controller.saveEditGood();
+    await controller.wait();
+    await controller.pipeline(async s => {
+
+      // 不能给正在编辑的货物赋码
+      let mv = '不能给正在编辑的货物赋码';
+      if (s.goodsListState.editGood && s.goodsListState.selectedGoodIndex.indexOf(s.goodsListState.editGood.$index) >= 0) {
+        coolingFn(mv, 3000, () => { message.error(mv) });
+        return;
+      }
+
+      // 税率不一样不能批量赋码
+      mv = '商品税率不一致不能操作批量赋码';
+      if (s.goodsListState.selectedGoodIndex.map(e => s.goodsListState.goodsMap.get(e)).some((e, _, arr) => e?.taxRate !== arr[0]?.taxRate)) {
+        coolingFn(mv, 3000, () => { message.error(mv) });
+        return;
+      }
+
+      // 校验 折扣行和被折扣行是否同时勾选 
+      mv = '请同时勾选“折扣行与被折扣行”';
+      if (verifyDiscountLine(s.goodsListState.selectedGoodIndex.map(e => s.goodsListState.goodsMap.get(e) as IGood).filter(e => !!e))) {
+        coolingFn(mv, 3000, () => { message.error(mv) });
+        return;
+      }
+
+      // 设置赋码
+      s.goodsListState.endowCode.endowcodeGoodIndex = s.goodsListState.selectedGoodIndex;
+    })();
+  }, [controller]);
+
+  const menuItem = React.useMemo(() => {
+    if (model === 'readOnly') return <></>;
+    return (
+      <Menu.Item key="2" onClick={onClick} disabled={disabled}>
+        批量赋码
+      </Menu.Item>
+    )
+  }, [onClick, disabled, model])
+
+  const button = React.useMemo(() => {
+    if (model === 'readOnly') return <></>;
+    return (
+      <Button onClick={onClick} disabled={disabled} size='small'>
+        赋码
+      </Button>
+    )
+  }, [onClick, disabled, model])
+
+  return { menuItem, button };
+};
+
+/** 
+ * 校验 折扣行和被折扣行是否同时勾选 
+ * */
+function verifyDiscountLine(selectedGood: IGood[]) {
+  selectedGood = selectedGood.sort((a, b) => (a.serialNo || 0) - (b.serialNo || 0));
+  for (let i = 0; i < selectedGood.length; i++) {
+    const good = selectedGood[i];
+    if (good.lineAttribute === LineAttributeType.折扣行)
+      return true;
+
+    if (good.lineAttribute === LineAttributeType.被折扣行 && selectedGood[++i].lineAttribute === LineAttributeType.折扣行)
+      continue;
+  }
+  return false;
+}

package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useReselectInvoiceType/index.tsx

@@ -0,0 +1,56 @@
+
+
+import { Button } from "kts-xui";
+import React from "react";
+import Invoice from '../../../../../../..';
+import InvoiceTypeModal from "../../../../../../../../InvoiceTypeModal";
+import { e } from "mathjs";
+
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, [])
+
+    const typeModalProps = controller.useMemo(s => s.typeModalProps, []);
+
+    const [open, setOpen] = React.useState(false);
+
+    const onOpen = React.useCallback(() => { setOpen(true) }, [])
+
+    const onClose = React.useCallback(() => { setOpen(false) }, [])
+
+    const onOk = React.useCallback(e => {
+        try {
+            typeModalProps?.onOk && typeModalProps.onOk(e);
+        } catch (error) {
+            console.error(error);
+        }
+        onClose();
+    }, [onClose, typeModalProps?.onOk]);
+
+    const isEnable = React.useMemo(()=>{
+        if (model === 'readOnly') return false;
+        return true;
+    }, [model])
+
+    const button = React.useMemo(() => {
+        if (isEnable === false) return <></>;
+        return (
+            <>
+                <Button size='small' onClick={onOpen} >重选发票类型</Button>
+                <InvoiceTypeModal
+                    {...typeModalProps}
+                    open={open}
+                    onCancel={onClose}
+                    onOk={onOk}
+                />
+            </>
+        )
+    }, [open, onClose, onOpen, typeModalProps, isEnable])
+
+    return {
+        button,
+    }
+}
+

package/src/Invoice/ui/digtal/GoodsList/ui/DescribeSwitch/index.tsx

@@ -0,0 +1,37 @@
+
+import React from 'react';
+import { Switch, Icon, Tooltip } from 'kts-components-antd-x3';
+import Invoice from '../../../../..';
+
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    const productComparison = controller.useMemo(s => s.goodsListState.productComparison, [])
+
+    const isMyShow = controller.useMemo(s => s.goodsListState.isMyShow, []);
+
+    const onChange = React.useCallback(e => {
+        controller.run(async s => s.goodsListState.isMyShow = !s.goodsListState.isMyShow)
+    }, [])
+
+    if (!productComparison.onComply) return <></>;
+
+    return (
+        <span>
+            <label style={{ marginRight: 2 }} >
+                <Tooltip title="蓝色代表我方商品描述，黑色代表对方的商品描述。">
+                    <Icon style={{ marginRight: 3 }} type="info-circle" />
+                </Tooltip>
+                使用哪方商品描述:
+            </label>
+            <Switch
+                checked={isMyShow}
+                checkedChildren="我方"
+                unCheckedChildren="对方"
+                defaultChecked
+                onChange={onChange}
+            />
+        </span>
+    )
+}

package/src/Invoice/ui/digtal/GoodsList/ui/Search/icon/magnifier.svg

@@ -0,0 +1 @@
+<svg t="1656901778998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9253" width="200" height="200"><path d="M985.781333 918.594133 820.773333 765.5264c27.3728-32.973867 49.6544-69.5776 66.436267-109.258667 22.933333-54.218667 34.561067-111.7952 34.561067-171.1296 0-59.333333-11.627733-116.910933-34.561067-171.1296-22.142933-52.354133-53.837867-99.365333-94.200533-139.729067S705.633067 102.222933 653.28 80.08c-54.218667-22.933333-111.7952-34.561067-171.1296-34.561067S365.240533 57.147733 311.021867 80.08c-52.354133 22.142933-99.365333 53.8368-139.729067 94.200533s-72.0576 87.374933-94.200533 139.729067c-22.932267 54.218667-34.56 111.7952-34.56 171.1296 0 59.3344 11.627733 116.910933 34.56 171.1296 22.144 52.354133 53.837867 99.365333 94.200533 139.729067s87.374933 72.0576 139.729067 94.200533c54.218667 22.932267 111.7952 34.56 171.1296 34.56s116.910933-11.627733 171.1296-34.56c45.352533-19.181867 86.686933-45.543467 123.172267-78.487467L942.256 965.514667c6.16 5.714133 13.966933 8.539733 21.755733 8.539733 8.593067 0 17.163733-3.441067 23.467733-10.237867C999.4976 950.8608 998.738133 930.612267 985.781333 918.594133zM482.151467 860.7584c-207.117867 0-375.620267-168.5024-375.620267-375.620267 0-207.1168 168.5024-375.6192 375.620267-375.6192S857.770667 278.021333 857.770667 485.138133C857.770667 692.256 689.268267 860.7584 482.151467 860.7584z" p-id="9254"></path></svg>

package/src/Invoice/ui/digtal/GoodsList/ui/Search/index.less

@@ -0,0 +1,12 @@
+.kts-invoice-operate-goods-list-able {
+  .kts-invoice-operate-goods-list-search {
+    width: 350px;
+    border-radius: 999px;
+
+    input {
+      border-radius: 999px;
+      border-color : #b8b8b8;
+      font-size    : 12px;
+    }
+  }
+}

package/src/Invoice/ui/digtal/GoodsList/ui/Search/index.tsx

@@ -0,0 +1,50 @@
+
+import React from "react";
+import { Icon } from "kts-components-antd-x3";
+import { Input, message } from "kts-xui";
+import { ReactComponent as MagnifierSvg } from './icon/magnifier.svg';
+import Invoice from '../../../../..';
+import './index.less';
+
+export default function Search() {
+
+    const controller = Invoice.useInvoiceController();
+
+    const [value, setValue] = React.useState('');
+
+    const readOnly = controller.useMemo(s => !!s.goodsListState.editGood, [])
+
+    /** 是否含税 */
+    const isTaxIncluded = controller.useMemo(s => s.goodsListState.isTaxIncluded, [])
+
+    const onClick = React.useCallback(async () => {
+        await controller.saveEditGood();
+        await controller.wait();
+        if (controller.state.goodsListState.editGood) {
+            message.error({
+                content: '你正在编辑一个货物',
+                key: '你正在编辑一个货物',
+            });
+            return;
+        }
+    }, [])
+
+    React.useEffect(() => {
+        controller.run(async s => {
+            s.goodsListState.searchValue = value.trim();
+        })
+    }, [value, controller])
+
+    return (
+        <Input
+            readOnly={readOnly}
+            value={value}
+            className="kts-invoice-operate-goods-list-search"
+            placeholder={`请您输入项目名称、规格型号、金额(${isTaxIncluded ? '含税' : '不含税'})搜索`}
+            prefix={<Icon component={MagnifierSvg} style={{ color: "#b8b8b8" }} />}
+            onChange={e => { setValue(e.target.value); }}
+            onClick={onClick}
+        />
+    )
+}
+

package/src/Invoice/ui/digtal/GoodsList/ui/Statistics/index.less

@@ -0,0 +1,54 @@
+// .kts-invoice-operate-goods-list-statistics {
+//   // background: #fafafa;
+//   overflow-y: scroll;
+
+//   .kts-invoice-operate-goods-list-statistics-row {
+//     height       : 30px;
+//     line-height  : 30px;
+//     border-bottom: 2px solid #e8e8e8;
+//     display      : flex;
+
+//     &>div {
+//       border-right: 2px solid #e8e8e8;
+
+//       label {
+//         padding: 0 10px;
+//       }
+//     }
+//   }
+// }
+
+.kts-invoice-operate-goods-list-statistics-digtal {
+
+  overflow-y: scroll;
+
+  /* 设置滚动条滑块颜色 */
+  &::-webkit-scrollbar-track {
+    background-color: #f1f1f1;
+  }
+
+  .statistics-digtal-total-tax,
+  .statistics-digtal-total {
+    height     : 42px;
+    display    : flex;
+    align-items: center;
+
+    &>div:first-child {
+      width          : 225px;
+      color          : #9F613E;
+      font-family    : PingFang SC;
+      height         : 100%;
+      display        : flex;
+      align-items    : center;
+      justify-content: center;
+    }
+  }
+
+  .statistics-digtal-total-tax {
+    border-top: 2px solid #9F613E;
+
+    &>div:first-child {
+      border-right: 2px solid #9F613E;
+    }
+  }
+}

package/src/Invoice/ui/digtal/GoodsList/ui/Statistics/index.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import Icon from '@ant-design/icons';
+import { } from 'kts-components-antd-x3';
+import { ReactComponent as ForkSvg } from './svg/fork.svg';
+import { chain, bignumber } from 'mathjs';
+import Invoice from '../../../../..';
+import './index.less';
+
+const nzhcn = require('nzh').cn;
+
+export default () => {
+  const controller = Invoice.useInvoiceController();
+
+  /** 是否不含税） */
+  const isTaxIncluded = controller.useMemo(s => s.goodsListState.isTaxIncluded, []);
+
+  /** 金额（含税） */
+  const lineAmountIncludeTax = controller.useMemo((s) => {
+    if (typeof s.goodsListState.amountIncludeTax === 'number') {
+      return s.goodsListState.amountIncludeTax
+    }
+
+    let sum = chain(bignumber(0));
+    const editGood = s.goodsListState.editGood; // 正在编辑的货物
+    const err = s.goodsListState.form?.getFieldsError() ?? {};
+
+    s.goodsListState.goodsList.forEach((e) => {
+      if (e.$index === editGood?.$index) {
+        if (!err.lineAmountIncludeTax) {
+          sum = sum.add(bignumber(editGood.lineAmountIncludeTax || 0));
+        }
+      } else {
+        sum = sum.add(bignumber(e.lineAmountIncludeTax || 0));
+      }
+    });
+    return sum.done().toNumber();
+  }, []);
+
+  /** 金额（不含税） */
+  const lineAmountExcludeTax = controller.useMemo((s) => {
+    if (typeof s.goodsListState.amountExcludeTax === 'number') {
+      return s.goodsListState.amountExcludeTax
+    }
+
+    let sum = chain(bignumber(0));
+    const editGood = s.goodsListState.editGood; // 正在编辑的货物
+    const err = s.goodsListState.form?.getFieldsError() ?? {};
+
+    s.goodsListState.goodsList.forEach((e) => {
+      if (e.$index === editGood?.$index) {
+        if (!err.lineAmountExcludeTax) {
+          sum = sum.add(bignumber(editGood.lineAmountExcludeTax || 0));
+        }
+      } else {
+        sum = sum.add(bignumber(e.lineAmountExcludeTax || 0));
+      }
+    });
+    return sum.done().toNumber();
+  }, []);
+
+  /** 税额 */
+  const taxAmount = controller.useMemo((s) => {
+    if (typeof s.goodsListState.amountTax === 'number') {
+      return s.goodsListState.amountTax;
+    }
+
+    let sum = chain(bignumber(0));
+    const editGood = s.goodsListState.editGood; // 正在编辑的货物
+    s.goodsListState.goodsList.forEach((e) => {
+      if (e.$index === editGood?.$index) {
+        sum = sum.add(bignumber(editGood.taxAmount || 0));
+      } else {
+        sum = sum.add(bignumber(e.taxAmount || 0));
+      }
+    });
+    return sum.done().toNumber();
+  }, []);
+
+  return (
+    <div className='kts-invoice-operate-goods-list-statistics-digtal' >
+      <div className='statistics-digtal-total' >
+        <div>合计</div>
+        <div style={{ flex: 1 }} />
+        <div style={{ width: 119, textAlign: 'right', paddingRight: 15 }} >¥{parseFloat(isTaxIncluded ? lineAmountIncludeTax : lineAmountExcludeTax).toFixed(2)}</div>
+        <div style={{ width: 119, textAlign: 'right', paddingRight: 15 }} >¥{parseFloat(taxAmount).toFixed(2)}</div>
+      </div>
+      <div className='statistics-digtal-total-tax' >
+        <div>价税合计（大写）</div>
+        <div style={{ paddingLeft: 30 }} >
+          <Icon component={ForkSvg} />
+          <span style={{ fontWeight: 'bold', marginLeft: 4 }} >{nzhcn.toMoney(lineAmountIncludeTax, { outSymbol: false })}</span>
+        </div>
+        <div style={{ flex: 1 }} />
+        <div style={{ width: 90, color: '#9F613E' }} >（小写）</div>
+        <div style={{ width: 119 }} >¥{parseFloat(lineAmountIncludeTax).toFixed(2)}</div>
+      </div>
+    </div >
+  );
+};

package/src/Invoice/ui/digtal/GoodsList/ui/Statistics/svg/fork.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_695_1221)">
+    <path d="M7.99978 0.888916C4.08867 0.888916 0.888672 4.08892 0.888672 8.00003C0.888672 11.9111 4.08867 15.1111 7.99978 15.1111C11.9109 15.1111 15.1109 11.9111 15.1109 8.00003C15.1109 4.08892 11.9109 0.888916 7.99978 0.888916ZM7.99978 14.2222C4.53312 14.2222 1.77756 11.4667 1.77756 8.00003C1.77756 4.53336 4.53312 1.7778 7.99978 1.7778C11.4664 1.7778 14.222 4.53336 14.222 8.00003C14.222 11.4667 11.4664 14.2222 7.99978 14.2222Z" fill="#333333"/>
+    <path d="M10.7019 11.3288L4.72949 5.35818L5.35794 4.72974L11.3295 10.7004L10.7019 11.3288Z" fill="#333333"/>
+    <path d="M4.66895 10.7023L10.6396 4.73071L11.2681 5.35916L5.29739 11.3307L4.66895 10.7023Z" fill="#333333"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_695_1221">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/Invoice/ui/digtal/GoodsList/ui/TableRow/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Invoice from '../../../../..';
+import { LineAttributeType } from '../../../../../InvoiceController'
+import classnames from 'classnames'
+
+export default function TableRow(props: any) {
+
+    const controller = Invoice.useInvoiceController();
+
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
+
+    const discount = React.useMemo(() => {
+        const i = goodsMap.get(props['data-row-key']);
+        if (!i) return undefined;
+
+        if (i.lineAttribute === LineAttributeType.折扣行) {
+            return 'kts-invoice-operate-goods-be-discount'
+        } else if (i.lineAttribute === LineAttributeType.被折扣行) {
+            return 'kts-invoice-operate-goods-discount'
+        } else {
+            return undefined;
+        }
+    }, [props['data-row-key'], goodsMap])
+
+    return (
+        <tr {...props} className={classnames(props.className, discount)} />
+    )
+}

package/src/Invoice/ui/digtal/GoodsList/ui/TableVirtual/index.less

@@ -0,0 +1,39 @@
+.kts-invoice-operate-goods-table-virtual {
+
+  .ktsAntX-table-body {
+    height: 280px;
+  }
+
+  .ktsAntX-table.ktsAntX-table-bordered>.ktsAntX-table-container>.ktsAntX-table-header>table>thead>tr>th {
+    padding   : 0 10px;
+    height    : 32px;
+    background: #f4f4f4;
+  }
+
+  .ktsAntX-table.ktsAntX-table-bordered>.ktsAntX-table-container>.ktsAntX-table-body>table>tbody>tr>td {
+    padding: 0;
+    height : 32px;
+  }
+
+  .ktsAntX-table .ktsAntX-table-body {
+    position: relative;
+  }
+
+  .ktsAntX-table .ktsAntX-table-body>table {
+    position: absolute;
+    left    : 0;
+    top     : 0;
+  }
+
+  .ktsAntX-table .ktsAntX-table-tbody {
+    position: relative;
+  }
+
+  .ktsAntX-checkbox-wrapper .ktsAntX-checkbox-inner {
+    width        : 16px;
+    height       : 16px;
+    border       : 1px solid #d9d9d9;
+    border-radius: 2px;
+    top          : 1px;
+  }
+}

package/src/Invoice/ui/digtal/GoodsList/ui/TableVirtual/index.tsx

@@ -0,0 +1,109 @@
+
+import React from "react";
+import { TableManual, TableProps } from "kts-xui";
+import { Table } from 'kts-components-antd-x4-v4';
+import './index.less';
+
+export default function <T extends object = any>(props: TableProps<T>) {
+
+    const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
+
+    const tableBody = React.useMemo(() => {
+        if (!self) return;
+        return self.querySelector('.ktsAntX-table-body') as HTMLDivElement;
+    }, [self]);
+
+    /** 显示指针 */
+    const [pointer, setPointer] = React.useState(0);
+
+    /** 行高 */
+    const rowHeight = React.useMemo(() => {
+        if (!self) return 50;
+
+        const td = self.querySelector('.ktsAntX-table-tbody .ktsAntX-table-row');
+        if (!td) return 50;
+
+        return td.clientHeight;
+    }, [self, props.dataSource]);
+
+    /** 间隔容器 */
+    const placeholder = React.useMemo(() => {
+        if (!self || !tableBody) return;
+        let placeholder = tableBody.querySelector('.table-virtual-placeholder') as HTMLDivElement;
+        if (!placeholder) {
+            placeholder = document.createElement('div');
+            placeholder.className = 'table-virtual-placeholder';
+            tableBody.appendChild(placeholder);
+        }
+        return placeholder;
+    }, [self, tableBody]);
+
+    // 设置占位dom的搞
+    const placeholderHeight = React.useMemo(() => {
+        if (!self || !rowHeight || !props.dataSource || !placeholder) return;
+        const placeholderHeight = rowHeight * props.dataSource.length;
+        placeholder.style.height = `${placeholderHeight}px`;
+        return placeholderHeight;
+    }, [self, rowHeight, props.dataSource, placeholder]);
+
+    /** 可以容纳的行数 */
+    const rowSize = React.useMemo(() => {
+        if (!tableBody! || !rowHeight) return 0;
+        return Math.ceil(tableBody.clientHeight / rowHeight);
+    }, [tableBody, rowHeight, placeholderHeight]);
+
+    // 计算渲染的行
+    const dataSource = React.useMemo(() => {
+        if (!props.dataSource) return [];
+        if (props.dataSource.length < 10) return props.dataSource;
+
+        if (!rowSize) return [props.dataSource[0]];
+        return props.dataSource?.slice(pointer, pointer + 2 * rowSize);
+    }, [props.dataSource, pointer, rowSize]);
+
+    // 监听滚动
+    React.useEffect(() => {
+        if (!self || !placeholder || !props.dataSource || !rowHeight || !tableBody)
+            return;
+
+        const onScroll = () => {
+            if (!props.dataSource || !tableBody) return;
+            setPointer(Math.floor((props.dataSource.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
+        };
+        onScroll();
+
+        tableBody.addEventListener('scroll', onScroll);
+        return () => {
+            tableBody.removeEventListener('scroll', onScroll);
+        };
+    }, [self, placeholder, props.dataSource, rowHeight, rowSize]);
+
+    // 移动列表
+    React.useEffect(() => {
+        if (!self) return;
+
+        const table = self.querySelector('.ktsAntX-table .ktsAntX-table-body>table') as HTMLDivElement;
+        if (!table) return;
+
+        table.style.top = `${pointer * rowHeight}px`;
+    }, [pointer, self, rowHeight]);
+
+    React.useEffect(() => {
+        if (!self) return;
+        const cont = self.querySelector('.kts-invoice-operate-goods-table-virtual .ktsAntX-table-body');
+        if (!cont) return;
+
+        cont.scrollTop = 0;
+    }, [props.dataSource?.length])
+
+    return (
+        <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
+            <TableManual
+                {...props}
+                dataSource={dataSource}
+                // 新版本Table会有输入框无法连续输入的问题，先兼容老版本
+                tableComponent={Table as any}
+            />
+        </span>
+    )
+}