kts-component-invoice-operate 3.1.20 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "3.1.20",
+  "version": "3.2.0",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/Invoice/Invoice-digtal/_test/disabled/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Invoice from '../../..';
+import 'antd/dist/antd.css';
+
+export default () => {
+
+    const controller = React.useMemo(() => new Invoice.InvoiceController(), []);
+
+    React.useEffect(() => {
+        (async () => {
+
+            await controller.run(async s => {
+                s.stakeholder.disableds = [
+                    'buyerName',
+                    'buyerTaxId',
+                    'remark',
+                ]
+            })
+
+            controller.formList.get('stakeholder')?.setFieldsValue({
+                buyerName: 'buyerName',
+                buyerTaxId: 'buyerTaxId',
+            })
+
+            controller.formList.get('sign')?.setFieldsValue({
+                remark: 'remark',
+            })
+        })()
+
+    }, [controller])
+
+    return (
+        <Invoice
+            invoiceType='digtal'
+            controller={controller}
+        />
+    )
+};

package/src/Invoice/Invoice-digtal/_test/easiest/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import Invoice from '../../..';
+import 'antd/dist/antd.css';
+
+export default () => <Invoice invoiceType='digtal' />;

package/src/Invoice/Invoice-digtal/_test/header/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Invoice from '../../..';
+import 'antd/dist/antd.css';
+
+export default () => {
+    return (
+        <Invoice
+            invoiceType='digtal'
+            invoiceHeader={
+                <Invoice.InvoiceHeaderDigtal
+                    defaultNo='2029292029201920291029'
+                    defaultInvoicingDate='2023年7月6日'
+                    defaultTag="成品油"
+                />}
+        />
+    )
+};

package/src/Invoice/Invoice-digtal/_test/readOnly/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Invoice from '../../..';
+import 'antd/dist/antd.css';
+
+export default () => {
+
+    const controller = React.useMemo(() => new Invoice.InvoiceController(), [])
+
+    React.useEffect(() => {
+        (async () => {
+            await controller.run(async s => { s.model = 'readOnly' }); // 设置只读
+            await controller.formList.get('invoiceHeader')?.setFieldsValue({
+                no: '2029292029201920291029',
+                invoicingDate: '2023年7月6日',
+                tag:'成品油',
+            })
+            await controller.formList.get('stakeholder')?.setFieldsValue({
+                buyerName: '购买方名称',
+                buyerTaxId: 'xxxxxxxxxx',
+                buyerAddress: '购买方地址',
+                buyerPhone: '15800000000',
+                buyerBank: '购买方开户银行',
+                buyerAccount: '银行账号',
+
+                supplierName: '销售方名称',
+                supplierTaxId: 'xxxxxxxxxxxx',
+                sellerAddress: '购买方地址',
+                sellerPhone: '15800000000',
+                sellerBank: '购买方开户银行',
+                sellerAccount: '银行账号',
+            })
+            await controller.formList.get('sign')?.setFieldsValue({
+                remark: '备注',
+                issuer: '张自豪',
+            })
+        })()
+    }, [controller])
+
+    return (
+        <Invoice invoiceType='digtal' controller={controller} />
+    )
+};

package/src/Invoice/Invoice-digtal/_test/stakeholder/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Invoice from '../../..';
+import 'antd/dist/antd.css';
+
+export default () => {
+
+    const controller = React.useMemo(() => new Invoice.InvoiceController(), []);
+
+    return (
+        <Invoice controller={controller} invoiceType='digtal' />
+    )
+};

package/src/Invoice/Invoice-digtal/_test/typeSelection/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Invoice from '../../..';
+import 'antd/dist/antd.css';
+
+export default () => {
+
+    const controller = React.useMemo(() => new Invoice.InvoiceController(), []);
+
+    React.useEffect(() => {
+        controller.run(async s => {
+            s.typeModalProps = {
+                businessOptions: [
+                    { label: '成品油', value: '1' }
+                ],
+                invoiceTypeOptions: [
+                    { label: '类型1', value: '1' },
+                    { label: '类型2', value: '2' },
+                    { label: '类型3', value: '3' },
+                    { label: '类型4', value: '4' },
+                ],
+                onOk: (e => { console.log(e) })
+            }
+        })
+    }, [controller])
+
+    return (
+        <Invoice invoiceType='digtal' controller={controller} />
+    )
+};

package/src/Invoice/Invoice-digtal/index.md

@@ -0,0 +1,19 @@
+# 数电
+
+## 简单用法
+<code src="./_test/easiest/index.tsx"></code>
+
+## 只读模式
+<code src="./_test/readOnly/index.tsx"></code>
+
+## 发票号码 & 开票日期 & 标签
+<code src="./_test/header/index.tsx"></code>
+
+## 导入关系人
+<code src="./_test/stakeholder/index.tsx"></code>
+
+## 类型选择
+<code src="./_test/typeSelection/index.tsx"></code>
+
+## 表单禁用
+<code src="./_test/disabled/index.tsx"></code>

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

@@ -0,0 +1,11 @@
+import { ValidationRule } from "kts-components-antd-x3/lib/form";
+
+/** 干系人 */
+export default class Stakeholder {
+
+    /** 禁用字段 */
+    disableds?: string[];
+
+    /** 字段字段规则 */
+    rulesMap?: { [key: string]: ValidationRule[] | undefined }
+}

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

@@ -1,5 +1,7 @@
 import GoodsListState from './GoodsListState';
 import BuyerState from './BuyerState';
+import Stakeholder from './Stakeholder';
+import { IInvoiceTypeModalProps } from '../../../InvoiceTypeModal';
 
 export default class InvoiceControllerState {
 
@@ -31,6 +33,9 @@ export default class InvoiceControllerState {
   /** 购买方 */
   buyerState = new BuyerState();
 
+  /** 干系人 相关-买方、卖方、备注、开票人 */
+  stakeholder = new Stakeholder();
+
   /** 货物信息 */
   goodsListState = new GoodsListState();
 
@@ -45,4 +50,7 @@ export default class InvoiceControllerState {
 
   /** 组件根结构 */
   rootElement?: HTMLDivElement | null = null;
+
+  /** 发票类型选择窗口 */
+  typeModalProps?: IInvoiceTypeModalProps;
 }

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

@@ -26,7 +26,7 @@ export interface IOptions {
 }
 
 /**
- * 设置当前的编辑货物
+ * 给一组货物添加折扣行
  */
 export default async (state: InvoiceControllerState, options?: IOptions) => {
   if (!options) return;

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

@@ -0,0 +1,84 @@
+
+import { v4 as uuidv4 } from 'uuid';
+import { bignumber, chain } from 'mathjs';
+import { InvoiceControllerState, LineAttributeType } from '../';
+import idGenerator from '../../tools/idGenerator';
+
+export interface IOptions {
+    /** 需要添加的索引 */
+    $index: string;
+
+    /** 折扣 金额 */
+    discolineAmountunt: number;
+}
+
+/**
+ * 给一组货物添加折扣行
+ */
+export default async (state: InvoiceControllerState, options?: IOptions[]) => {
+
+    if (!options || options.length <= 0) return;
+
+    const discountGroup = uuidv4();
+
+    options.forEach(e => {
+        const goodsList = state.goodsListState.goodsList;
+        const goodsMap = state.goodsListState.goodsMap;
+        for (let i = 0; i < goodsList.length; i++) {
+            const good = goodsList[i];
+            if (good.$index !== e.$index) continue;
+
+            // 折扣行 税额
+            const lineAmountExcludeTax = getLineAmountExcludeTax(e.discolineAmountunt, good.taxRate);
+            const taxAmount = getTaxAmount(e.discolineAmountunt, lineAmountExcludeTax);
+
+            good.lineAttribute = LineAttributeType.被折扣行;
+            good.discountGroup = discountGroup;
+
+            const newGood = {
+                discountGroup,
+                $index: idGenerator(),
+                lineAttribute: LineAttributeType.折扣行,
+                taxRate: good.taxRate,
+                itemName: good.itemName,
+
+                taxAmount: -1 * taxAmount,
+                lineAmountExcludeTax: -1 * lineAmountExcludeTax,
+                lineAmountIncludeTax: -1 * e.discolineAmountunt,
+
+                taxFreeType: good.taxFreeType,
+                favouredPolicyMark: good.favouredPolicyMark,
+                favouredPolicyName: good.favouredPolicyName,
+            }
+
+            goodsList.splice(i + 1, 0, newGood);
+            goodsMap.set(newGood.$index, newGood);
+        }
+    })
+
+    state.goodsListState.goodsList = [...state.goodsListState.goodsList];
+    state.goodsListState.goodsMap = new Map(state.goodsListState.goodsMap);
+}
+
+/** 金额（不含税） = 含税金额 / (1 + 税率) */
+function getLineAmountExcludeTax(lineAmountIncludeTax: number, taxRate: number = 0) {
+    const biTaxRate = chain(bignumber(taxRate)).divide(bignumber(100)).done();
+    return chain(bignumber(lineAmountIncludeTax))
+        .divide(chain(bignumber(1)).add(biTaxRate).done())
+
+        .multiply(bignumber(100))
+        .floor()
+        .divide(bignumber(100))
+
+        .done()
+        .toNumber()
+}
+
+/** 税额 = 含税金额 - 金额（不含税） */
+function getTaxAmount(lineAmountIncludeTax: number, lineAmountExcludeTax: number) {
+    return chain(bignumber(lineAmountIncludeTax))
+        .subtract(bignumber(lineAmountExcludeTax))
+
+        .done()
+        .toNumber()
+}

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

@@ -2,42 +2,40 @@ import { InvoiceControllerState, IGood } from '../';
 import LineAttributeType from '../../InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';
 
 /**
- * 设置当前的编辑货物
+ * 删除一个货物
  */
 export default async (state: InvoiceControllerState, $index?: string) => {
   if (!$index) return;
 
-  const goods = state.goodsListState.goodsList.filter( (e) => e.$index === $index)[0];
+  // 查下要删除的货物
+  const goods = state.goodsListState.goodsList.filter((e) => e.$index === $index)[0];
   if (!goods) return;
-  if (
-    state.goodsListState.editGood &&
-    state.goodsListState.editGood.$index === $index
-  ) {
+
+  // 如果正在编辑 就取消编辑
+  if (state.goodsListState.editGood && state.goodsListState.editGood.$index === $index) {
     state.goodsListState.editGood = undefined;
   }
 
-  if (goods.lineAttribute === LineAttributeType.正常) {
-    state.goodsListState.selectedGoodIndex =
-      state.goodsListState.selectedGoodIndex.filter((e) => e !== $index);
-    state.goodsListState.goodsList = state.goodsListState.goodsList.filter(
-      (e) => e.$index !== $index,
-    );
-  }
+  const goodsList = state.goodsListState.goodsList;
+  const goodsMap = state.goodsListState.goodsMap;
+
+  goodsMap.delete($index);
+
+  for (let i = 0; i < goodsList.length; i++) {
 
-  if (goods.lineAttribute === LineAttributeType.折扣行) {
-    state.goodsListState.goodsList = state.goodsListState.goodsList.filter(
-      (e) => {
-        if (e.discountGroup !== goods.discountGroup) return true;
-        if (e.lineAttribute === LineAttributeType.折扣行) {
-          state.goodsListState.selectedGoodIndex =
-            state.goodsListState.selectedGoodIndex.filter((e) => e !== $index);
-          return false;
-        }
-        if (e.lineAttribute === LineAttributeType.被折扣行) {
-          e.lineAttribute = LineAttributeType.正常;
-          return true;
-        }
-      },
-    );
+    if (goodsList[i].$index === $index) {
+      const good = goodsList[i];
+
+      if (good.lineAttribute === LineAttributeType.折扣行 && goodsList[i - 1] && goodsList[i - 1].lineAttribute === LineAttributeType.被折扣行) {
+        goodsList[i - 1].lineAttribute = LineAttributeType.正常;
+      }
+
+      goodsList.splice(i, 1);
+
+      break;
+    }
   }
+
+  state.goodsListState.goodsList = [...goodsList];
+  state.goodsListState.goodsMap = new Map(goodsMap);
 };

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

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

package/src/Invoice/InvoiceController/index.ts

@@ -7,6 +7,7 @@ import setEditGood from './fns/setEditGood';
 import setGoods from './fns/setGoods';
 import delGood from './fns/delGood';
 import addGoodDiscount from './fns/addGoodDiscount';
+import addGoodDiscountV2 from './fns/addGoodDiscountV2';
 import addGood from './fns/addGood';
 import saveEditGood from './fns/saveEditGood';
 import getGoodsSearch from './fns/getGoodsSearch';
@@ -50,6 +51,9 @@ export default class InvoiceController extends InvoiceControllerForm {
   /** 给一组货物添加折扣行 */
   addGoodDiscount = this.pipeline(addGoodDiscount);
 
+  /** 给一组货物添加折扣行 */
+  addGoodDiscountV2 = this.pipeline(addGoodDiscountV2);
+
   /** 获取 商品 列表 */
   getGoodsList?: (option?: IGetGoodsListOption | undefined) => Promise<any>;
 

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

@@ -1,6 +1,6 @@
-import { thomsonCrossSectionDependencies } from 'mathjs';
+
 import React from 'react';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 
 export default () => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Invoice from '../../';
+import Invoice from '../..';
 import 'antd/dist/antd.css';
 
 export default () => <Invoice />;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 import idGenerator from '../../../Invoice/tools/idGenerator';
 import { LineAttributeType } from '../../../Invoice/InvoiceController';
 import { Button, Switch } from 'kts-components-antd-x3';
@@ -119,10 +119,10 @@ for (let i = 0; i <= 10000; i++) {
     $index: idGenerator(),
     itemName: `项目名称${i}`,
     lineAttribute: LineAttributeType.正常,
-    lineAmountExcludeTax: 100,
-    lineAmountIncludeTax: 103,
+    lineAmountExcludeTax: 9.99,
+    lineAmountIncludeTax: 10.29,
     taxRate: 3,
-    taxAmount: 3,
+    taxAmount: 0.3,
   });
 }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Menu, Typography } from 'kts-components-antd-x3';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 
 export default () => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 import { IGetBuyerListOption } from '../../../Invoice/InvoiceController/InvoiceControllerState/BuyerState';
 
 export default () => {

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

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { Button } from 'kts-components-antd-x3/lib/radio';
-import { Invoice, IGood } from '../../../';
+import { Invoice, IGood } from '../../../..';
 import { IGetBuyerListOption } from '../../../Invoice/InvoiceController/InvoiceControllerState/BuyerState';
 
 const InvoiceController = Invoice.InvoiceController

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Input } from 'kts-components-antd-x3';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
 
 export default () => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AutoComplete, Input, Icon } from 'kts-components-antd-x3';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 
 export default () => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 
 const InvoiceController = Invoice.InvoiceController;
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Invoice } from '../../../';
+import { Invoice } from '../../../..';
 
 export default () => {
   const controller = React.useMemo(() => new Invoice.InvoiceController(), []);

package/src/Invoice/index.less

@@ -1,5 +1,5 @@
 .kts-invoice-operate {
-  border: 1px solid #dcdcdc;
+  border   : 1px solid #dcdcdc;
   font-size: 12px;
 
   &>* {
@@ -10,3 +10,21 @@
     }
   }
 }
+
+.kts-invoice-operate-digtal {
+
+  font-family: PingFang SC;
+  font-size  : 14px;
+
+  .kts-invoice-operate-digtal-cont {
+    border: 2px solid #9F613E;
+
+    &>* {
+      border-bottom: 2px solid #9F613E;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}

package/src/Invoice/index.md

@@ -1,4 +1,4 @@
-# Invoice
+# 默认
 
 ## 简单用法
 <code src="./_test/easiest/index.tsx"></code>
@@ -46,8 +46,8 @@
 <code src="./_test/endowCode/index.tsx"></code>
 
 <API name="Invoice 发票组件 API" exports='["default"]' src="./index.tsx" ></API>
-<API name="InvoiceHeader 发票头 API" exports='["default"]' src="./ui/InvoiceHeader/index.tsx"></API>
-<API name="GoodsList 商品列表 API" exports='["default"]' src="./ui/GoodsList/index.tsx"></API>
-<API name="Buyer 购买方 API" exports='["default"]' src="./ui/Buyer/index.tsx"></API>
-<API name="Seller 销售方 API" exports='["default"]' src="./ui/Seller/index.tsx"></API>
-<API name="Sign 落款 API" exports='["default"]' src="./ui/Sign/index.tsx"></API>
+<API name="InvoiceHeader 发票头 API" exports='["default"]' src="./ui/default/InvoiceHeader/index.tsx"></API>
+<API name="GoodsList 商品列表 API" exports='["default"]' src="./ui/default/GoodsList/index.tsx"></API>
+<API name="Buyer 购买方 API" exports='["default"]' src="./ui/default/Buyer/index.tsx"></API>
+<API name="Seller 销售方 API" exports='["default"]' src="./ui/default/Seller/index.tsx"></API>
+<API name="Sign 落款 API" exports='["default"]' src="./ui/default/Sign/index.tsx"></API>