kts-component-invoice-operate 3.2.174 → 3.2.176

package/src/Invoice/ui/digtal/FreightList/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.freightListState.isRemRow, []);
+
+  /** 是否禁用 */
+  const disabled = controller.useMemo((s) => {
+    if (s.freightListState.selectedGoodIndex.length <= 0) return true;
+    return false;
+  }, []);
+
+  /** 点击了删除 */
+  const onClick = React.useCallback(async () => {
+    const selectedGoodIndex = controller.state.freightListState.selectedGoodIndex.slice();
+    for (let i = 0; i < selectedGoodIndex.length; i++) {
+      await controller.delFreight(selectedGoodIndex[i]);
+    }
+    await controller.run(async s => { s.freightListState.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, isRemRow])
+
+  return { button, menuItem };
+};

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

@@ -0,0 +1,37 @@
+
+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.freightListState.goodsList = [];
+            s.freightListState.goodsMap = new Map();
+            s.freightListState.selectedGoodIndex = [];
+        })
+    }, [controller])
+
+    const button = React.useMemo(() => {
+        if (model === 'readOnly') return <></>;
+        if (model === 'prefab') return <></>;
+        return (
+            <Popconfirm
+                title="将要清空所有项目信息，是否继续"
+                onConfirm={confirm}
+                okText="确定"
+                cancelText="取消"
+            >
+                <Button size='small' >清空重填</Button>
+            </Popconfirm>
+        )
+    }, [model, confirm])
+
+    return { button }
+}

package/src/Invoice/ui/digtal/FreightList/ui/TableRow/index.less

@@ -0,0 +1,29 @@
+.kts-invoice-operate-goods-list-itemName-drag-container-u {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    top       : 0;
+    z-index   : 9999;
+  }
+}
+
+.kts-invoice-operate-goods-list-itemName-drag-container-d {
+  position: relative;
+
+  &::after {
+    content   : " ";
+    width     : 100%;
+    height    : 2px;
+    background: #0074ff;
+    position  : absolute;
+    left      : 0;
+    bottom    : 0;
+    z-index   : 9999;
+  }
+}

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

@@ -0,0 +1,21 @@
+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']
+
+
+
+
+    return <tr
+        {...props}
+        className={classnames(
+            props.className,
+        )}
+    />
+
+}

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

@@ -121,7 +121,6 @@ const Main = decorator<IGoodsListProps, FormComponentProps & IGoodsListProps>(Fo
   React.useEffect(() => {
     controller.pipeline(async s => { s.goodsListState.isSwitchTax = props.isSwitchTax })()
   }, [controller, props.isSwitchTax])
-
   return (
     <div className="kts-invoice-operate-goods-list-digtal" onClick={(e) => { e.stopPropagation() }} >
       <div className="kts-invoice-operate-goods-list-able">

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

@@ -32,7 +32,6 @@ export default function TableRow(props: any) {
         }
     }, [rowKey, goodsMap])
 
-
     return rowKey === current && current
         ? (
             <tr style={{ height: 50, position: 'relative' }} >

package/src/TaxClassificationCodeModal/index.less

@@ -6,13 +6,5 @@
       width: 340px;
       position: absolute;
       right: 30px; 
-      top: 79px;
-      bottom: 50px;
-      min-height: 300px;
-      .taxdesc{  
-        height: calc(100vh - 323px);
-        min-height: 105px;
-        overflow:auto
-      }
     }
   }

package/src/TaxClassificationCodeModal/index.tsx

@@ -79,16 +79,7 @@ export default function TaxClassificationModal(props: TaxClassificationProps) {
       }).catch(errorInfo => {
         console.log('errorInfo', errorInfo);
       }); 
-    }  
-    React.useEffect(() => {
-      form.setFieldsValue({
-        ...form.getFieldsValue(),
-        taxCategoryCode: props?.info?.taxCategoryCode,
-        productName: props?.info?.productName,
-        shorthand: props?.info?.shorthand,
-        taxDesc: props?.info?.taxDesc, 
-      })
-    },[props?.info?.key])
+    } 
     return (
       <Drawer
         title="商品和服务税收分类编码"
@@ -132,8 +123,8 @@ export default function TaxClassificationModal(props: TaxClassificationProps) {
             </Form.Item>
           </Form>  
           <Card className="taxrightbox">  
-            <Form form={form} {...layout} initialValues={props.info} >
-              <Form.Item name={"taxCategoryCode"} label="编码">
+            <Form form={form} key={props?.info?.key} {...layout} initialValues={props.info} >
+              <Form.Item rules={[{ required: true, message: '请勾选税收分类编码' }, ]} initialValue={props.info?.taxCategoryCode} name={"taxCategoryCode"} label="编码">
                   <FormReadOnly />
                 </Form.Item>
                 <Form.Item name={"productName"} label="货物和劳务名称">
@@ -142,7 +133,7 @@ export default function TaxClassificationModal(props: TaxClassificationProps) {
                 <Form.Item name={"shorthand"} label="简称">
                   <FormReadOnly />
                 </Form.Item> 
-                <Form.Item name={"taxDesc"} className="taxdesc" label="说明">
+                <Form.Item name={"desc"} label="说明">
                   <FormReadOnly />
                 </Form.Item> 
               </Form>