kts-component-invoice-operate 3.2.213 → 3.2.215

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

@@ -1,53 +1,53 @@
-import React from "react";
-import Invoice from '../../../../..';
-import { LineAttributeType } from '../../../../../InvoiceController'
-import classnames from 'classnames'
-import './index.less'
-
-export default function TableRow(props: any) {
-
-    const rowKey = props['data-row-key']
-
-    const controller = Invoice.useInvoiceController();
-
-    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
-
-    /** 当前拖动中的货品索引 */
-    const site = controller.useMemo(s => s.goodsListState.drag.site, [])
-
-    const current = controller.useMemo(s => s.goodsListState.drag.current, [])
-
-    const container = controller.useMemo(s => s.goodsListState.drag.container, [])
-
-    const discount = React.useMemo(() => {
-        const i = goodsMap.get(rowKey);
-        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;
-        }
-    }, [rowKey, goodsMap])
-
-    return rowKey === current && current
-        ? (
-            <tr style={{ height: 50, position: 'relative' }} >
-                <div style={{ height: 0.5, width: '100%', background: '#E6E6E6', position: 'absolute', bottom: 0 }} />
-            </tr>
-        ) : (
-            // <tr {...props} className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : '')} />
-            <tr
-                {...props}
-                className={classnames(
-                    props.className,
-                    discount,
-                    (rowKey === container && current)
-                        ? 'kts-invoice-operate-goods-list-itemName-drag-container-' + site
-                        : undefined
-                )}
-            />
-        )
+import React from "react";
+import Invoice from '../../../../..';
+import { LineAttributeType } from '../../../../../InvoiceController'
+import classnames from 'classnames'
+import './index.less'
+
+export default function TableRow(props: any) {
+
+    const rowKey = props['data-row-key']
+
+    const controller = Invoice.useInvoiceController();
+
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, [])
+
+    /** 当前拖动中的货品索引 */
+    const site = controller.useMemo(s => s.goodsListState.drag.site, [])
+
+    const current = controller.useMemo(s => s.goodsListState.drag.current, [])
+
+    const container = controller.useMemo(s => s.goodsListState.drag.container, [])
+
+    const discount = React.useMemo(() => {
+        const i = goodsMap.get(rowKey);
+        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;
+        }
+    }, [rowKey, goodsMap])
+
+    return rowKey === current && current
+        ? (
+            <tr style={{ height: 50, position: 'relative' }} >
+                <div style={{ height: 0.5, width: '100%', background: '#E6E6E6', position: 'absolute', bottom: 0 }} />
+            </tr>
+        ) : (
+            // <tr {...props} className={classnames(props.className, discount, (rowKey === container && current) ? 'kts-invoice-operate-goods-list-itemName-drag-container' : '')} />
+            <tr
+                {...props}
+                className={classnames(
+                    props.className,
+                    discount,
+                    (rowKey === container && current)
+                        ? 'kts-invoice-operate-goods-list-itemName-drag-container-' + site
+                        : undefined
+                )}
+            />
+        )
 }

package/src/Invoice/ui/digtal/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/digtal/GoodsList/ui/TableVirtual/index.tsx

@@ -1,109 +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 || props.dataSource.length < 10)
-            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>
-    )
+
+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 || props.dataSource.length < 10)
+            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>
+    )
 }

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

@@ -1,32 +1,32 @@
-
-import React from 'react';
-import { Switch } from 'kts-xui';
-import Invoice from '../../../../..';
-import { onChangeSwitchTax } from '../../hook/useColumns/autoFillFn';
-
-export default () => {
-
-    const controller = Invoice.useInvoiceController();
-
-    /** 是否含税 */
-    const isTaxIncluded = controller.useMemo(e => e.goodsListState.isTaxIncluded, []);
-
-    /** 是否可以切换(含税/不含税)状态 */
-    const isSwitchTax = controller.useMemo(e => e.goodsListState.isSwitchTax, []);
-
-    const onChange = React.useCallback(async e => {
-        onChangeSwitchTax(controller, e);
-    }, [])
-
-    return (
-        <span>
-            <label style={{ marginRight: 2 }}>含税</label>
-            <Switch
-                disabled={isSwitchTax === false}
-                checked={isTaxIncluded}
-                defaultChecked
-                onChange={onChange}
-            />
-        </span>
-    )
+
+import React from 'react';
+import { Switch } from 'kts-xui';
+import Invoice from '../../../../..';
+import { onChangeSwitchTax } from '../../hook/useColumns/autoFillFn';
+
+export default () => {
+
+    const controller = Invoice.useInvoiceController();
+
+    /** 是否含税 */
+    const isTaxIncluded = controller.useMemo(e => e.goodsListState.isTaxIncluded, []);
+
+    /** 是否可以切换(含税/不含税)状态 */
+    const isSwitchTax = controller.useMemo(e => e.goodsListState.isSwitchTax, []);
+
+    const onChange = React.useCallback(async e => {
+        onChangeSwitchTax(controller, e);
+    }, [])
+
+    return (
+        <span>
+            <label style={{ marginRight: 2 }}>含税</label>
+            <Switch
+                disabled={isSwitchTax === false}
+                checked={isTaxIncluded}
+                defaultChecked
+                onChange={onChange}
+            />
+        </span>
+    )
 }

package/src/Invoice/ui/digtal/InvoiceHeader/index.less

@@ -1,58 +1,58 @@
-.kts-invoice-operate-invoice-digtal-header {
-  height    : 121px;
-  text-align: center;
-  position  : relative;
-
-
-  .digtal-header-title {
-    font-size  : 28px;
-    color      : #9F603D;
-    width      : 100%;
-    position   : absolute;
-    top        : 21px;
-    font-weight: 400;
-
-    &::after,
-    &::before {
-      content      : "";
-      position     : absolute;
-      width        : 330px;
-      border-bottom: 2px solid #9F613E;
-      left         : 50%;
-      bottom       : -4px;
-      transform    : translateX(-50%);
-    }
-
-    &::after {
-      bottom: -8px;
-    }
-  }
-
-  .digtal-header-tag {
-    position     : absolute;
-    top          : 47px;
-    left         : 157px;
-    padding      : 2px 8px;
-    border-radius: 4px;
-    border       : 1px solid #0074FF;
-    color        : #0074FF;
-    background   : rgba(0, 116, 255, 0.20);
-  }
-
-  .digtal-header-fields {
-    display       : flex;
-    flex-direction: column;
-    position      : absolute;
-    right         : 40px;
-    top           : 23px;
-
-    .digtal-header-field {
-      display    : flex;
-      font-weight: bold;
-
-      .digtal-header-field-title {
-        color: #9F613E;
-      }
-    }
-  }
+.kts-invoice-operate-invoice-digtal-header {
+  height    : 121px;
+  text-align: center;
+  position  : relative;
+
+
+  .digtal-header-title {
+    font-size  : 28px;
+    color      : #9F603D;
+    width      : 100%;
+    position   : absolute;
+    top        : 21px;
+    font-weight: 400;
+
+    &::after,
+    &::before {
+      content      : "";
+      position     : absolute;
+      width        : 330px;
+      border-bottom: 2px solid #9F613E;
+      left         : 50%;
+      bottom       : -4px;
+      transform    : translateX(-50%);
+    }
+
+    &::after {
+      bottom: -8px;
+    }
+  }
+
+  .digtal-header-tag {
+    position     : absolute;
+    top          : 47px;
+    left         : 157px;
+    padding      : 2px 8px;
+    border-radius: 4px;
+    border       : 1px solid #0074FF;
+    color        : #0074FF;
+    background   : rgba(0, 116, 255, 0.20);
+  }
+
+  .digtal-header-fields {
+    display       : flex;
+    flex-direction: column;
+    position      : absolute;
+    right         : 40px;
+    top           : 23px;
+
+    .digtal-header-field {
+      display    : flex;
+      font-weight: bold;
+
+      .digtal-header-field-title {
+        color: #9F613E;
+      }
+    }
+  }
 }