kts-component-invoice-operate 3.2.214 → 3.2.216

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

@@ -1,39 +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;
-  }
+.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/default/GoodsList/ui/TableVirtual/index.tsx

@@ -1,131 +1,131 @@
-
-import React from "react";
-import Invoice from '../../../../..';
-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 controller = Invoice.useInvoiceController();
-
-    const expandedRowKeys = controller.useMemo(s => s.goodsListState.expandedRowKeys, []);
-
-    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 33;
-
-        const td = self.querySelector('.ktsAntX-table-tbody .ktsAntX-table-row');
-        if (!td) return 33;
-
-        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]);
-
-    /** 处理扩展行 */
-    const goodsList = React.useMemo(() => {
-        if (!props.dataSource) return [];
-        const gl: any[] = props.dataSource.map(e => ({ ...e, level: 0 }));
-
-        for (let i = 0; i < gl.length; i++) {
-            const e = gl[i];
-            if (expandedRowKeys.includes(e.$index) && e.children) {
-                let c = e.children.map((t: any) => ({ ...t, level: 1 }));
-                gl.splice(i + 1, 0, ...c);
-            }
-        }
-
-        return gl;
-    }, [props.dataSource, expandedRowKeys])
-
-    // 设置占位dom的搞
-    const placeholderHeight = React.useMemo(() => {
-        if (!self || !rowHeight || !goodsList || !placeholder) return;
-        const placeholderHeight = rowHeight * goodsList.length;
-        placeholder.style.height = `${placeholderHeight}px`;
-        return placeholderHeight;
-    }, [self, rowHeight, goodsList, placeholder]);
-
-    /** 可以容纳的行数 */
-    const rowSize = React.useMemo(() => {
-        if (!tableBody! || !rowHeight) return 0;
-        return Math.ceil(tableBody.clientHeight / rowHeight);
-    }, [tableBody, rowHeight, placeholderHeight]);
-
-    // 计算渲染的行
-    const dataSource = React.useMemo(() => {
-        if (goodsList.length < 10) return goodsList;
-
-        if (!rowSize) return [goodsList[0]];
-        return goodsList?.slice(pointer, pointer + 2 * rowSize);
-    }, [pointer, rowSize, goodsList]);
-
-    // 监听滚动
-    React.useEffect(() => {
-        if (!self || !placeholder || !goodsList || !rowHeight || !tableBody)
-            return;
-
-        const onScroll = () => {
-            if (!goodsList || !tableBody) return;
-            setPointer(Math.floor((goodsList.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
-        };
-        onScroll();
-
-        tableBody.addEventListener('scroll', onScroll);
-        return () => {
-            tableBody.removeEventListener('scroll', onScroll);
-        };
-    }, [self, placeholder, goodsList, 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])
-
-    // console.log('===> pointer', pointer, dataSource);
-
-    return (
-        <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
-            <TableManual
-                {...props}
-                dataSource={dataSource}
-                // 新版本Table会有输入框无法连续输入的问题，先兼容老版本
-                tableComponent={Table as any}
-            />
-        </span>
-    )
+
+import React from "react";
+import Invoice from '../../../../..';
+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 controller = Invoice.useInvoiceController();
+
+    const expandedRowKeys = controller.useMemo(s => s.goodsListState.expandedRowKeys, []);
+
+    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 33;
+
+        const td = self.querySelector('.ktsAntX-table-tbody .ktsAntX-table-row');
+        if (!td) return 33;
+
+        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]);
+
+    /** 处理扩展行 */
+    const goodsList = React.useMemo(() => {
+        if (!props.dataSource) return [];
+        const gl: any[] = props.dataSource.map(e => ({ ...e, level: 0 }));
+
+        for (let i = 0; i < gl.length; i++) {
+            const e = gl[i];
+            if (expandedRowKeys.includes(e.$index) && e.children) {
+                let c = e.children.map((t: any) => ({ ...t, level: 1 }));
+                gl.splice(i + 1, 0, ...c);
+            }
+        }
+
+        return gl;
+    }, [props.dataSource, expandedRowKeys])
+
+    // 设置占位dom的搞
+    const placeholderHeight = React.useMemo(() => {
+        if (!self || !rowHeight || !goodsList || !placeholder) return;
+        const placeholderHeight = rowHeight * goodsList.length;
+        placeholder.style.height = `${placeholderHeight}px`;
+        return placeholderHeight;
+    }, [self, rowHeight, goodsList, placeholder]);
+
+    /** 可以容纳的行数 */
+    const rowSize = React.useMemo(() => {
+        if (!tableBody! || !rowHeight) return 0;
+        return Math.ceil(tableBody.clientHeight / rowHeight);
+    }, [tableBody, rowHeight, placeholderHeight]);
+
+    // 计算渲染的行
+    const dataSource = React.useMemo(() => {
+        if (goodsList.length < 10) return goodsList;
+
+        if (!rowSize) return [goodsList[0]];
+        return goodsList?.slice(pointer, pointer + 2 * rowSize);
+    }, [pointer, rowSize, goodsList]);
+
+    // 监听滚动
+    React.useEffect(() => {
+        if (!self || !placeholder || !goodsList || !rowHeight || !tableBody)
+            return;
+
+        const onScroll = () => {
+            if (!goodsList || !tableBody) return;
+            setPointer(Math.floor((goodsList.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
+        };
+        onScroll();
+
+        tableBody.addEventListener('scroll', onScroll);
+        return () => {
+            tableBody.removeEventListener('scroll', onScroll);
+        };
+    }, [self, placeholder, goodsList, 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])
+
+    // console.log('===> pointer', pointer, dataSource);
+
+    return (
+        <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
+            <TableManual
+                {...props}
+                dataSource={dataSource}
+                // 新版本Table会有输入框无法连续输入的问题，先兼容老版本
+                tableComponent={Table as any}
+            />
+        </span>
+    )
 }

package/src/Invoice/ui/default/GoodsList/ui/TableVirtual.o/index.less

@@ -1,44 +1,44 @@
-.kts-invoice-operate-goods-table-virtual {
-  .ktsAnt3x-table-placeholder {
-    position: absolute;
-    top: 50px;
-    left: 0;
-    width: 100%;
-    border: none;
-  }
-
-  .ktsAnt3x-table {
-    font-size: 12px;
-    border: none;
-    border-radius: 0;
-
-    .ktsAnt3x-table-content {
-      border-right: none;
-
-      .ktsAnt3x-table-body {
-        margin: 0;
-
-        table {
-          position: absolute;
-          top: 0;
-          left: 0;
-          border-bottom: 1px solid #e8e8e8;
-
-          tr {
-            height: 32px;
-          }
-
-          tr:hover {
-            td{
-              background: none;
-            }
-          }
-        }
-      }
-    }
-
-    .ktsAnt3x-table-thead>tr {
-      background-color: #f6f7f9;
-    }
-  }
-}
+.kts-invoice-operate-goods-table-virtual {
+  .ktsAnt3x-table-placeholder {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    border: none;
+  }
+
+  .ktsAnt3x-table {
+    font-size: 12px;
+    border: none;
+    border-radius: 0;
+
+    .ktsAnt3x-table-content {
+      border-right: none;
+
+      .ktsAnt3x-table-body {
+        margin: 0;
+
+        table {
+          position: absolute;
+          top: 0;
+          left: 0;
+          border-bottom: 1px solid #e8e8e8;
+
+          tr {
+            height: 32px;
+          }
+
+          tr:hover {
+            td{
+              background: none;
+            }
+          }
+        }
+      }
+    }
+
+    .ktsAnt3x-table-thead>tr {
+      background-color: #f6f7f9;
+    }
+  }
+}

package/src/Invoice/ui/default/GoodsList/ui/TableVirtual.o/index.tsx

@@ -1,96 +1,96 @@
-import React from 'react';
-import { Table } from 'kts-components-antd-x3';
-import { TableProps } from 'kts-components-antd-x3/lib/table/interface';
-import './index.less';
-
-export default function <T = any>(props: TableProps<T>) {
-  const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
-
-  const tableBody = React.useMemo(() => {
-    if (!self) return;
-    return self.querySelector('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body') as HTMLDivElement;
-  }, [self]);
-
-  /** 显示指针 */
-  const [pointer, setPointer] = React.useState(0);
-
-  /** 行高 */
-  const rowHeight = React.useMemo(() => {
-    if (!self) return 33;
-
-    const td = self.querySelector('.ktsAnt3x-table-tbody td');
-    if (!td) return 33;
-
-    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('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body table') as HTMLDivElement;
-    if (!table) return;
-
-    table.style.top = `${pointer * rowHeight}px`;
-  }, [pointer, self, rowHeight]);
-
-  return (
-    <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
-      <Table {...props} dataSource={dataSource} />
-    </span>
-  );
-}
+import React from 'react';
+import { Table } from 'kts-components-antd-x3';
+import { TableProps } from 'kts-components-antd-x3/lib/table/interface';
+import './index.less';
+
+export default function <T = any>(props: TableProps<T>) {
+  const [self, setSelf] = React.useState<HTMLSpanElement | null>(null);
+
+  const tableBody = React.useMemo(() => {
+    if (!self) return;
+    return self.querySelector('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body') as HTMLDivElement;
+  }, [self]);
+
+  /** 显示指针 */
+  const [pointer, setPointer] = React.useState(0);
+
+  /** 行高 */
+  const rowHeight = React.useMemo(() => {
+    if (!self) return 33;
+
+    const td = self.querySelector('.ktsAnt3x-table-tbody td');
+    if (!td) return 33;
+
+    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('.ktsAnt3x-table .ktsAnt3x-table-content .ktsAnt3x-table-body table') as HTMLDivElement;
+    if (!table) return;
+
+    table.style.top = `${pointer * rowHeight}px`;
+  }, [pointer, self, rowHeight]);
+
+  return (
+    <span className="kts-invoice-operate-goods-table-virtual" ref={(e) => { setSelf(e) }} >
+      <Table {...props} dataSource={dataSource} />
+    </span>
+  );
+}