kts-component-invoice-operate 3.2.153 → 3.2.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "3.2.153",
+  "version": "3.2.154",
   "scripts": {
     "dev": "dumi dev --max-old-space-size=6096",
     "start": "dumi dev",

package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood/index.ts

@@ -4,6 +4,9 @@ export default interface IGood {
   /** 数据索引 */
   $index: string;
 
+  /** 级别 */
+  level?: number;
+
   /** 序号 */
   serialNo?: number;
 
@@ -75,4 +78,7 @@ export default interface IGood {
 
   /** 税收分类名称 */
   productName?: string;
+
+  /** 孩子 */
+  children?: IGood[];
 }

package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/index.ts

@@ -74,6 +74,9 @@ export default class GoodsListState {
   /** 货物字典 */
   goodsMap = new Map<string, IGood>();
 
+  /** 子级展开的货物 */
+  expandedRowKeys: string[] = [];
+
   /** 货物菜单扩展 */
   goodsMenuExpand: ((index: string, controller: InvoiceController) => React.ReactNode)[] = [];
 

package/src/Invoice/InvoiceController/fns/saveEditGood.ts

@@ -4,7 +4,7 @@ import { InvoiceControllerState } from '../';
  * 保存正在编辑的货物
  */
 export default async (state: InvoiceControllerState) => {
-
+  
   const editGood = state.goodsListState.editGood;
   const form = state.goodsListState.form;
   

package/src/Invoice/_test/children/index.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { Invoice } from '../../..';
+import 'antd/dist/antd.css';
+import { LineAttributeType } from '@/Invoice/InvoiceController';
+import idGenerator from '@/Invoice/tools/idGenerator';
+
+export default () => {
+
+    const invoiceController = React.useMemo(() => new Invoice.InvoiceController(), [])
+
+    React.useEffect(() => {
+        setTimeout(() => {
+            invoiceController.run(async s => {
+                s.goodsListState.goodsList = lines.map(e => ({ $index: idGenerator(), ...e }));
+            })
+        }, 1000)
+    }, [])
+
+    return (
+        <Invoice controller={invoiceController} />
+    )
+};
+
+const children = []
+for (let i = 0; i <= 10; i++) {
+    children.push({
+        itemName: `项目名称${i}`,
+        lineAttribute: LineAttributeType.正常,
+        lineAmountExcludeTax: 9.99,
+        lineAmountIncludeTax: 10.29,
+        taxRate: 3,
+        taxAmount: 0.3,
+    });
+}
+
+
+const lines: any[] = [
+    {
+        "serialNumber": "1714491422279110656",
+        "lineNumber": 1,
+        "taxCode": "3070401000000000000",
+        "taxName": "信息技术服务",
+        "specification": null,
+        "itemName": "技术服务费",
+        "itemCode": "z",
+        "unit": "套",
+        "quantity": 1.0000000000001,
+        "taxRate": 0.06,
+        "priceExcludeTax": 0.0000000000001,
+        "priceIncludeTax": 2.12,
+        "amountTax": 0.3,
+        "lineAmountExcludeTax": 5,
+        "lineAmountIncludeTax": 5.3,
+        "lineAttribute": LineAttributeType.正常,
+        "discountGroup": "1714491422291693568",
+        "favouredPolicyMark": false,
+        "favouredPolicyName": null,
+        "zeroTaxRateFlag": null,
+        "referenceLines": null,
+        "version": 0,
+        "taxAmount": 1
+    },
+    {
+        "serialNumber": "1714491422279110656",
+        "lineNumber": 2,
+        "taxCode": "3070401000000000000",
+        "taxName": "信息技术服务",
+        "specification": "",
+        "itemName": "技术服务费",
+        "itemCode": "z",
+        "unit": "",
+        "quantity": -1,
+        "taxRate": 0.06,
+        "priceExcludeTax": null,
+        "priceIncludeTax": null,
+        "amountTax": -0.06,
+        "lineAmountExcludeTax": 2,
+        "lineAmountIncludeTax": 2.3,
+        "lineAttribute": LineAttributeType.正常,
+        "discountGroup": "1714491422291693568",
+        "favouredPolicyMark": false,
+        "favouredPolicyName": null,
+        "zeroTaxRateFlag": null,
+        "referenceLines": null,
+        "version": 0,
+        "taxAmount": 1,
+        "children": children.map(e => ({ ...e, $index: idGenerator(), }))
+    },
+    {
+        "serialNumber": "1714491422279110656",
+        "lineNumber": 3,
+        "taxCode": "3070401000000000000",
+        "taxName": "信息技术服务",
+        "specification": null,
+        "itemName": "技术服务费",
+        "itemCode": "z",
+        "unit": "套",
+        "quantity": 1,
+        "taxRate": 0.06,
+        "priceExcludeTax": 2,
+        "priceIncludeTax": 2.12,
+        "amountTax": 0.12,
+        "lineAmountExcludeTax": 5,
+        "lineAmountIncludeTax": 5.3,
+        "lineAttribute": LineAttributeType.正常,
+        "discountGroup": null,
+        "favouredPolicyMark": false,
+        "favouredPolicyName": null,
+        "zeroTaxRateFlag": null,
+        "referenceLines": null,
+        "version": 0,
+        "taxAmount": 1
+    },
+    {
+        "serialNumber": "1714491422279110656",
+        "lineNumber": 3,
+        "taxCode": "3070401000000000000",
+        "taxName": "信息技术服务",
+        "specification": null,
+        "itemName": "技术服务费",
+        "itemCode": "z",
+        "unit": "套",
+        "quantity": 1,
+        "taxRate": 0.06,
+        "priceExcludeTax": 2,
+        "priceIncludeTax": 2.12,
+        "amountTax": 0.12,
+        "lineAmountExcludeTax": 5,
+        "lineAmountIncludeTax": 5.3,
+        "lineAttribute": LineAttributeType.正常,
+        "discountGroup": null,
+        "favouredPolicyMark": false,
+        "favouredPolicyName": null,
+        "zeroTaxRateFlag": null,
+        "referenceLines": null,
+        "version": 0,
+        "taxAmount": 1,
+        "children": children.map(e => ({ ...e, $index: idGenerator(), }))
+    },
+    {
+        "serialNumber": "1714491422279110656",
+        "lineNumber": 3,
+        "taxCode": "3070401000000000000",
+        "taxName": "信息技术服务",
+        "specification": null,
+        "itemName": "技术服务费",
+        "itemCode": "z",
+        "unit": "套",
+        "quantity": 1,
+        "taxRate": 0.06,
+        "priceExcludeTax": 2,
+        "priceIncludeTax": 2.12,
+        "amountTax": 0.12,
+        "lineAmountExcludeTax": 5,
+        "lineAmountIncludeTax": 5.3,
+        "lineAttribute": LineAttributeType.正常,
+        "discountGroup": null,
+        "favouredPolicyMark": false,
+        "favouredPolicyName": null,
+        "zeroTaxRateFlag": null,
+        "referenceLines": null,
+        "version": 0,
+        "taxAmount": 1
+    },
+    {
+        "serialNumber": "1714491422279110656",
+        "lineNumber": 3,
+        "taxCode": "3070401000000000000",
+        "taxName": "信息技术服务",
+        "specification": null,
+        "itemName": "技术服务费",
+        "itemCode": "z",
+        "unit": "套",
+        "quantity": 1,
+        "taxRate": 0.06,
+        "priceExcludeTax": 2,
+        "priceIncludeTax": 2.12,
+        "amountTax": 0.12,
+        "lineAmountExcludeTax": 5,
+        "lineAmountIncludeTax": 5.3,
+        "lineAttribute": LineAttributeType.正常,
+        "discountGroup": null,
+        "favouredPolicyMark": false,
+        "favouredPolicyName": null,
+        "zeroTaxRateFlag": null,
+        "referenceLines": null,
+        "version": 0,
+        "shorthand": "布料",
+        "taxAmount": 1
+    }
+]
+
+for (let i = 0; i <= 100; i++) {
+    lines.push({
+        $index: idGenerator(),
+        itemName: `项目名称${100 + i}`,
+        lineAttribute: LineAttributeType.正常,
+        lineAmountExcludeTax: 9.99,
+        lineAmountIncludeTax: 10.29,
+        taxRate: 3,
+        taxAmount: 0.3,
+    });
+}

package/src/Invoice/index.md

@@ -24,6 +24,9 @@
 ## 替换发票头 UI
 <code src="./_test/replaceHead/index.tsx" title="其他UI的替换类型,请查看API" ></code>
 
+## 子表格
+<code src="./_test/children/index.tsx" title="其他UI的替换类型,请查看API" ></code>
+
 ## 销售方 预设、自动补全、禁用
 <code src="./_test/seller/index.tsx"></code>
 

package/src/Invoice/ui/default/GoodsList/hook/useColumns/index.tsx

@@ -21,6 +21,7 @@ import {
 import { getItemNameWithShorthand } from '../../../../../tools/itemName';
 import Drag from './ui/Drag';
 import { nonScientificNotation } from '../../../../../tools/calculate';
+import Expand from './ui/Expand';
 
 export default (form: WrappedFormUtils) => {
   const { getFieldDecorator, getFieldValue } = form;
@@ -47,6 +48,9 @@ export default (form: WrappedFormUtils) => {
   /** 正在编辑的货物 */
   const editGood = controller.useMemo((e) => e.goodsListState.editGood, []);
 
+  /** 正在编辑的货物 */
+  const goodsList = controller.useMemo((e) => e.goodsListState.goodsList, []);
+
   /** 商品表格隐藏列 */
   const columnshide = controller.useMemo((e) => e.goodsListState.columnshide, []);
 
@@ -96,6 +100,13 @@ export default (form: WrappedFormUtils) => {
         align: 'center',
         render: (_: any, record: IGood) => <Drag record={record} />
       },
+      {
+        title: ' ',
+        key: 'expand',
+        width: 40,
+        align: 'center',
+        render: (_: any, record: IGood) => <Expand record={record} />
+      },
       {
         title: '序号',
         key: 'serialNo',
@@ -584,6 +595,8 @@ export default (form: WrappedFormUtils) => {
       })
       // 是否启动拖拽
       .filter(e => e.key !== 'drag' || isStart)
+      // 是否启动展开
+      .filter(e => e.key === 'expand' ? goodsList.some(e => !!e.children) : true)
       // 只读
       .filter(e => {
         if (model === 'readOnly') {
@@ -598,7 +611,7 @@ export default (form: WrappedFormUtils) => {
           ellipsis: true,
         };
       }) as any[];
-  }, [isTaxIncluded, editGood, controller, changeField, deduction, isMyShow, searchValue, model, columnsReplenish, columnshide, isStart]);
+  }, [isTaxIncluded, editGood, goodsList, controller, changeField, deduction, isMyShow, searchValue, model, columnsReplenish, columnshide, isStart]);
   return columns;
 };
 

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/Expand/index.tsx

@@ -0,0 +1,53 @@
+
+
+import React from 'react';
+import { Button } from 'kts-xui';
+import Icon from '@ant-design/icons';
+import { ReactComponent as I001Svg } from './svg/I001.svg';
+import { ReactComponent as I002Svg } from './svg/I002.svg';
+import { IGood, Invoice } from '../../../../../../../..';
+
+export interface IExpandProps {
+    record: IGood
+}
+
+export default function Expand(props: IExpandProps) {
+
+    const { record } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const goodsMap = controller.useMemo(s => s.goodsListState.goodsMap, []);
+
+    const expandedRowKeys = controller.useMemo(s => s.goodsListState.expandedRowKeys, []);
+
+    if (goodsMap.get(record.$index)?.children) {
+        if (expandedRowKeys.includes(record.$index)) {
+            return (
+                <Button
+                    type='text'
+                    style={{ width: 'auto', color: "#0074ff" }}
+                    icon={<Icon component={I002Svg} />}
+                    onClick={controller.pipeline(async (s, e) => {
+                        e?.stopPropagation()
+                        s.goodsListState.expandedRowKeys = s.goodsListState.expandedRowKeys.filter(e => e !== record.$index)
+                    })}
+                />
+            )
+        } else {
+            return (
+                <Button
+                    type='text'
+                    style={{ width: 'auto', color: "#0074ff" }}
+                    icon={<Icon component={I001Svg} />}
+                    onClick={controller.pipeline(async (s, e) => {
+                        e?.stopPropagation()
+                        s.goodsListState.expandedRowKeys = [...s.goodsListState.expandedRowKeys, record.$index]
+                    })}
+                />
+            )
+        }
+    } else {
+        return <></>
+    }
+} 

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/Expand/svg/I001.svg

@@ -0,0 +1 @@
+<svg t="1719031046892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5456" width="200" height="200"><path d="M879.9725037 997.08776297H146.45475555c-67.23508148 0-122.2125037-54.97742222-122.2125037-122.21250372V141.23614815c0-67.23508148 54.97742222-122.2125037 122.2125037-122.2125037h733.63911112c67.23508148 0 122.2125037 54.97742222 122.2125037 122.2125037V874.87525925c0 67.11371852-54.97742222 122.2125037-122.33386667 122.21250372zM146.45475555 80.06921482c-36.65161482 0-61.16693333 24.39395555-61.16693333 61.16693333V874.87525925c0 36.65161482 24.39395555 61.16693333 61.16693333 61.16693334h733.63911112c36.65161482 0 61.16693333-24.39395555 61.16693333-61.16693334V141.23614815c0-36.65161482-24.39395555-61.16693333-61.16693333-61.16693333H146.45475555z m0 0" p-id="5457"></path><path d="M757.76 538.57848889h-489.09274075c-18.32580741 0-30.58346667-12.25765925-30.58346666-30.58346667s12.25765925-30.58346667 30.58346666-30.58346667h489.09274075c18.32580741 0 30.58346667 12.25765925 30.58346667 30.58346667s-12.25765925 30.58346667-30.58346667 30.58346667z m0 0" p-id="5458"></path><path d="M513.21362963 783.12485925c-18.32580741 0-30.58346667-12.25765925-30.58346666-30.58346666v-489.09274074c0-18.32580741 12.25765925-30.58346667 30.58346666-30.58346667s30.58346667 12.25765925 30.58346667 30.58346667v489.09274074c0 18.32580741-12.25765925 30.58346667-30.58346667 30.58346666z m0 0" p-id="5459"></path></svg>

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/Expand/svg/I002.svg

@@ -0,0 +1 @@
+<svg t="1719031078613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5605" width="200" height="200"><path d="M879.9725037 997.08776297H146.45475555c-67.23508148 0-122.2125037-54.97742222-122.2125037-122.21250372V141.23614815c0-67.23508148 54.97742222-122.2125037 122.2125037-122.2125037h733.63911112c67.23508148 0 122.2125037 54.97742222 122.2125037 122.2125037V874.87525925c0 67.11371852-54.97742222 122.2125037-122.33386667 122.21250372zM146.45475555 80.06921482c-36.65161482 0-61.16693333 24.39395555-61.16693333 61.16693333V874.87525925c0 36.65161482 24.39395555 61.16693333 61.16693333 61.16693334h733.63911112c36.65161482 0 61.16693333-24.39395555 61.16693333-61.16693334V141.23614815c0-36.65161482-24.39395555-61.16693333-61.16693333-61.16693333H146.45475555z m0 0" p-id="5606"></path><path d="M757.76 538.57848889h-489.09274075c-18.32580741 0-30.58346667-12.25765925-30.58346666-30.58346667s12.25765925-30.58346667 30.58346666-30.58346667h489.09274075c18.32580741 0 30.58346667 12.25765925 30.58346667 30.58346667s-12.25765925 30.58346667-30.58346667 30.58346667z m0 0" p-id="5607"></path></svg>

package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/index.tsx

@@ -80,6 +80,7 @@ export default (props: { goods: IGood }) => {
     )
   }, [itemList])
 
+  if (props.goods.level && props.goods.level > 0) { return <></> }
   if (itemList.length === 0) { return (<></>) }
 
   return (

package/src/Invoice/ui/default/GoodsList/hook/useOnRow/index.tsx

@@ -16,6 +16,7 @@ export default () => {
   const onClick = React.useCallback(
     async (record: IGood) => {
       // if (model === 'prefab') return;
+      if (record.level && record.level > 0) return;
       if (model === 'readOnly') return;
 
       const editGood = controller.state.goodsListState.editGood;

package/src/Invoice/ui/default/GoodsList/hook/useRowSelection/index.tsx

@@ -74,7 +74,7 @@ export default () => {
                 onChange={onClickSelectAll}
                 indeterminate={indeterminate}
                 checked={isAll}
-            ></Checkbox>
+            />
         )
     }, [goodsList, selectedRowKeys, onClickSelectAll, isAll, indeterminate])
 
@@ -85,7 +85,6 @@ export default () => {
             s.goodsListState.selectedGoodIndex.forEach($index => {
                 const goods = s.goodsListState.goodsMap.get($index);
 
-
                 if (!goods || (goods.lineAttribute !== LineAttributeType.折扣行 && goods.lineAttribute !== LineAttributeType.被折扣行)) return;
 
                 // 数组位置
@@ -111,5 +110,12 @@ export default () => {
         columnTitle,
         onSelect,
         selectedRowKeys,
+        getCheckboxProps: (record: any) => {
+            console.log('===> getCheckboxProps', record, record.level)
+            return {
+                disabled: record.level > 0,
+                style: record.level > 0 ? { display: 'none' } : undefined
+            }
+        },
     }
 }

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

@@ -43,6 +43,7 @@
   }
 
   .ktsAntX-table {
+
     .ktsAntX-table-row.kts-invoice-operate-goods-be-discount .ktsAntX-table-cell,
     .ktsAntX-table-row.kts-invoice-operate-goods-discount .ktsAntX-table-cell {
       background: #f5f5f5;
@@ -172,8 +173,14 @@
     height: 10px;
   }
 }
+
 .kts-invoice-operate-goods-list-table {
+  .ktsAntX-table-row-indent+.ktsAntX-table-row-expand-icon {
+    display: none;
+  }
+
   .ktsAnt3x-form-item-control.has-error {
     border: 1px solid #f00;
   }
-}
+
+}

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

@@ -1,11 +1,17 @@
 
 import React from "react";
+import Invoice from '../../../../..';
 import { TableManual, TableProps } from "kts-xui";
 import { Table } from 'kts-components-antd-x4-v4';
 import './index.less';
+import { e } from "mathjs";
 
 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(() => {
@@ -38,13 +44,29 @@ export default function <T extends object = any>(props: TableProps<T>) {
         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 || !props.dataSource || !placeholder) return;
-        const placeholderHeight = rowHeight * props.dataSource.length;
+        if (!self || !rowHeight || !goodsList || !placeholder) return;
+        const placeholderHeight = rowHeight * goodsList.length;
         placeholder.style.height = `${placeholderHeight}px`;
         return placeholderHeight;
-    }, [self, rowHeight, props.dataSource, placeholder]);
+    }, [self, rowHeight, goodsList, placeholder]);
 
     /** 可以容纳的行数 */
     const rowSize = React.useMemo(() => {
@@ -54,21 +76,20 @@ export default function <T extends object = any>(props: TableProps<T>) {
 
     // 计算渲染的行
     const dataSource = React.useMemo(() => {
-        if (!props.dataSource) return [];
-        if (props.dataSource.length < 10) return props.dataSource;
+        if (goodsList.length < 10) return goodsList;
 
-        if (!rowSize) return [props.dataSource[0]];
-        return props.dataSource?.slice(pointer, pointer + 2 * rowSize);
-    }, [props.dataSource, pointer, rowSize]);
+        if (!rowSize) return [goodsList[0]];
+        return goodsList?.slice(pointer, pointer + 2 * rowSize);
+    }, [pointer, rowSize, goodsList]);
 
     // 监听滚动
     React.useEffect(() => {
-        if (!self || !placeholder || !props.dataSource || !rowHeight || !tableBody)
+        if (!self || !placeholder || !goodsList || !rowHeight || !tableBody)
             return;
 
         const onScroll = () => {
-            if (!props.dataSource || !tableBody) return;
-            setPointer(Math.floor((props.dataSource.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
+            if (!goodsList || !tableBody) return;
+            setPointer(Math.floor((goodsList.length - rowSize) * (tableBody.scrollTop / (placeholder.clientHeight - tableBody.clientHeight))));
         };
         onScroll();
 
@@ -76,7 +97,7 @@ export default function <T extends object = any>(props: TableProps<T>) {
         return () => {
             tableBody.removeEventListener('scroll', onScroll);
         };
-    }, [self, placeholder, props.dataSource, rowHeight, rowSize]);
+    }, [self, placeholder, goodsList, rowHeight, rowSize]);
 
     // 移动列表
     React.useEffect(() => {
@@ -96,6 +117,8 @@ export default function <T extends object = any>(props: TableProps<T>) {
         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