kts-component-invoice-operate 3.1.19 → 3.2.0

package/src/Invoice/index.tsx

@@ -1,109 +1,164 @@
-import './index.less';
-import React from 'react';
-import InvoiceController from './InvoiceController';
-import InvoiceHeader from './ui/InvoiceHeader';
-import GoodsList from './ui/GoodsList';
-import useToGenerateId from './ui/GoodsList/hook/useToGenerateId';
-import Seller from './ui/Seller';
-import Sign from './ui/Sign';
-import Buyer from './ui/Buyer';
-import ImportBuyerDrawer from './ui/ImportBuyerDrawer';
-import ImportGoodsDrawer from './ui/ImportGoodsDrawer';
-import EndowCodeDrawer from './ui/EndowCodeDrawer';
-import AddComparisonDrawer from './ui/AddComparisonDrawer';
-import idGenerator from './tools/idGenerator';
-import * as calculator from './tools/calculate';
-
-
-/** 发票组件的上下文 */
-export const InvoiceContext = React.createContext<InvoiceController>(
-  undefined as any,
-);
-
-export interface IInvoiceProps {
-  /** 发票数据控制器 */
-  controller?: InvoiceController;
-
-  /** 发票头UI */
-  invoiceHeader?: React.ReactNode;
-
-  /** 货物列表UI */
-  goodsList?: React.ReactNode;
-
-  /** 购买方UI */
-  buyer?: React.ReactNode;
-
-  /** 销售方UI */
-  seller?: React.ReactNode;
-
-  /** 落款UI */
-  sign?: React.ReactNode;
-
-  /** 底部扩展UI */
-  footExpand?: React.ReactNode;
-}
-
-export default class Invoice extends React.PureComponent<IInvoiceProps> {
-  /** 控制器 */
-  static readonly InvoiceController = InvoiceController;
-
-  /** 发票头 */
-  static readonly InvoiceHeader = InvoiceHeader;
-
-  /** 货物列表 */
-  static readonly GoodsList = GoodsList;
-
-  /** 销售方 */
-  static readonly Seller = Seller;
-
-  /** 落款 */
-  static readonly Sign = Sign;
-
-  /** 购买方 */
-  static readonly Buyer = Buyer;
-
-  /** 货物索引生成器 */
-  static idGenerator = idGenerator;
-
-  /** 金额计算方法 */
-  static calculator = calculator;
-
-  /** 获取控制器钩子 */
-  static useInvoiceController = () => { return React.useContext(InvoiceContext) };
-
-  render() {
-    return <Main {...this.props}></Main>;
-  }
-}
-
-const Main = (props: IInvoiceProps) => {
-
-  const controller = React.useMemo(() => props.controller || new InvoiceController(), [props.controller]);
-
-  const [key, setKey] = React.useState(0);
-
-  useToGenerateId(controller);
-
-  React.useEffect(() => { setKey(key + 1) }, [controller]);
-
-  return (
-    <InvoiceContext.Provider key={key} value={controller}>
-
-      <div className="kts-invoice-operate" ref={controller.pipeline<HTMLDivElement | null>(async (s, e) => { s.rootElement = e })} >
-        {props.invoiceHeader || <InvoiceHeader /> /**    发票头 */}
-        {props.buyer || <Buyer /> /**                    购买方 */}
-        {props.goodsList || <GoodsList /> /**            货物列表 */}
-        {props.seller || <Seller /> /**                  销售方 */}
-        {props.sign || <Sign /> /**                      落款 */}
-        {props.footExpand}
-      </div>
-
-      <ImportBuyerDrawer />{/*         导入购买方的抽屉 */}
-      <ImportGoodsDrawer />{/*         导入货品的抽屉 */}
-      <EndowCodeDrawer />{/*           给货品赋码的抽屉 */}
-      <AddComparisonDrawer />{/*       添加商品对照的抽屉 */}
-    </InvoiceContext.Provider>
-  );
-};
-
-
+import './index.less';
+import React from 'react';
+import InvoiceController from './InvoiceController';
+import useToGenerateId from './tools/useToGenerateId';
+import idGenerator from './tools/idGenerator';
+import * as calculator from './tools/calculate';
+
+import InvoiceHeader from './ui/default/InvoiceHeader';
+import GoodsList from './ui/default/GoodsList';
+import Seller from './ui/default/Seller';
+import Buyer from './ui/default/Buyer';
+import Sign from './ui/default/Sign';
+
+import InvoiceHeaderDigtal from './ui/digtal/InvoiceHeader';
+import Stakeholder from './ui/digtal/Stakeholder';
+import SignDigtal from './ui/digtal/Sign';
+import GoodsListDigtal from './ui/digtal/GoodsList';
+
+import ImportBuyerDrawer from './ui/default/ImportBuyerDrawer';
+import ImportGoodsDrawer from './ui/default/ImportGoodsDrawer';
+import EndowCodeDrawer from './ui/default/EndowCodeDrawer';
+import AddComparisonDrawer from './ui/default/AddComparisonDrawer';
+
+
+/** 发票组件的上下文 */
+export const InvoiceContext = React.createContext<InvoiceController>(
+  undefined as any,
+);
+
+export interface IInvoiceProps {
+  /** 发票数据控制器 */
+  controller?: InvoiceController;
+
+  /** 发票头UI */
+  invoiceHeader?: React.ReactNode;
+
+  /** 货物列表UI */
+  goodsList?: React.ReactNode;
+
+  /** 购买方UI （invoiceType为default时生效） */
+  buyer?: React.ReactNode;
+
+  /** 销售方UI （invoiceType为default时生效）*/
+  seller?: React.ReactNode;
+
+  /** 干系人（购买方&销售方） （invoiceType为digtal时生效） */
+  stakeholder?: React.ReactNode;
+
+  /** 落款UI */
+  sign?: React.ReactNode;
+
+  /** 底部扩展UI */
+  footExpand?: React.ReactNode;
+
+  /** 发票种类： default-默认，digtal-数电 */
+  invoiceType?: 'default' | 'digtal';
+}
+
+export default class Invoice extends React.PureComponent<IInvoiceProps> {
+  /** 控制器 */
+  static readonly InvoiceController = InvoiceController;
+
+  /** 发票头(默认) */
+  static readonly InvoiceHeader = InvoiceHeader;
+
+  /** 货物列表(默认) */
+  static readonly GoodsList = GoodsList;
+
+  /** 销售方(默认) */
+  static readonly Seller = Seller;
+
+  /** 落款(默认) */
+  static readonly Sign = Sign;
+
+  /** 购买方(默认) */
+  static readonly Buyer = Buyer;
+
+  /** 发票头(数电) */
+  static readonly InvoiceHeaderDigtal = InvoiceHeaderDigtal;
+
+  /** 干系人(数电) */
+  static readonly Stakeholder = Stakeholder;
+
+  /** 落款(数电) */
+  static readonly SignDigtal = SignDigtal;
+
+  /** 货物列表(数电) */
+  static readonly GoodsListDigtal = GoodsListDigtal;
+
+  /** 货物索引生成器 */
+  static idGenerator = idGenerator;
+
+  /** 金额计算方法 */
+  static calculator = calculator;
+
+  /** 获取控制器钩子 */
+  static useInvoiceController = () => { return React.useContext(InvoiceContext) };
+
+  render() {
+    if (this.props.invoiceType === 'digtal') {
+      return <Digtal {...this.props}></Digtal>;
+    } else {
+      return <Main {...this.props}></Main>;
+    }
+  }
+}
+
+/** 默认 */
+const Main = (props: IInvoiceProps) => {
+
+  const controller = React.useMemo(() => props.controller || new InvoiceController(), [props.controller]);
+
+  const [key, setKey] = React.useState(0);
+
+  useToGenerateId(controller);
+
+  React.useEffect(() => { setKey(key + 1) }, [controller]);
+  
+  return (
+    <InvoiceContext.Provider key={key} value={controller}>
+
+      <div className="kts-invoice-operate" ref={controller.pipeline<HTMLDivElement | null>(async (s, e) => { s.rootElement = e })} >
+        {props.invoiceHeader || <InvoiceHeader /> /**    发票头 */}
+        {props.buyer || <Buyer /> /**                    购买方 */}
+        {props.goodsList || <GoodsList /> /**            货物列表 */}
+        {props.seller || <Seller /> /**                  销售方 */}
+        {props.sign || <Sign /> /**                      落款 */}
+        {props.footExpand}
+      </div>
+
+      <ImportBuyerDrawer />{/*         导入购买方的抽屉 */}
+      <ImportGoodsDrawer />{/*         导入货品的抽屉 */}
+      <EndowCodeDrawer />{/*           给货品赋码的抽屉 */}
+      <AddComparisonDrawer />{/*       添加商品对照的抽屉 */}
+    </InvoiceContext.Provider>
+  );
+};
+
+/** 数电 */
+const Digtal = (props: IInvoiceProps) => {
+
+  const controller = React.useMemo(() => props.controller || new InvoiceController(), [props.controller]);
+
+  const [key, setKey] = React.useState(0);
+
+  useToGenerateId(controller);
+
+  React.useEffect(() => { setKey(key + 1) }, [controller]);
+
+  return (
+    <InvoiceContext.Provider key={key} value={controller}>
+      <div className="kts-invoice-operate-digtal" ref={controller.pipeline<HTMLDivElement | null>(async (s, e) => { s.rootElement = e })} >
+        {props.invoiceHeader || <InvoiceHeaderDigtal /> /** 发票头 */}
+        <div className='kts-invoice-operate-digtal-cont' >
+          {props.stakeholder || <Stakeholder />  /** 干系人 */}
+          {props.goodsList || <GoodsListDigtal  /** 货物列表 */ />}
+        </div>
+        {props.sign || <SignDigtal />   /** 落款 */}
+      </div>
+
+      <EndowCodeDrawer />{/* 给货品赋码的抽屉 */}
+    </InvoiceContext.Provider>
+  )
+}

package/src/Invoice/tools/calculate/index.ts

@@ -1,112 +1,112 @@
-
-import { chain, bignumber } from 'mathjs';
-
-
-/** 格式化 保留2位小数 */
-export const format2 = (value: number | string) => {
-    if (value === Infinity) return '';
-    if (`${value}` === 'NaN') return '';
-    if (typeof value === 'string') value = parseFloat(value);
-    return parseFloat(value.toFixed(2));
-};
-
-
-/** 格式化 保留15位数字 */
-export const format15 = (value: number | string, defaultFractionDigits: number = 8) => {
-    if (value === Infinity) return '';
-    if (`${value}` === 'NaN') return '';
-    if (typeof value === 'string') value = parseFloat(value);
-
-    const fractionDigits = 15 - `${value || 0}`.indexOf('.');
-    return parseFloat(value.toFixed(fractionDigits > defaultFractionDigits ? defaultFractionDigits : fractionDigits));
-};
-
-
-/**
- * 金额(含税) = 数量 * 单价(含税) 
- * @param quantity 数量
- * @param priceIncludeTax 单价(含税) 
- * @returns 金额(含税)
- */
-export function countAmountIncludeTax(quantity?: number | string, priceIncludeTax?: number | string, calculatingDigits?: number): number | undefined {
-    if (!quantity && quantity !== 0) return undefined;
-    if (!priceIncludeTax && priceIncludeTax !== 0) return undefined;
-
-    quantity = format15(quantity, calculatingDigits);
-    priceIncludeTax = format15(priceIncludeTax, calculatingDigits);
-
-    return parseFloat(chain(bignumber(priceIncludeTax)).multiply(bignumber(quantity)).done().toNumber().toFixed(2));
-    // return parseFloat(evaluate(`${priceIncludeTax} * ${quantity}`).toFixed(2));
-}
-
-/**
- * 不含税金额 = 含税金额-税额
- * @param amountIncludeTax 含税金额
- * @param taxAmount 税额
- * @returns 不含税金额
- */
-export function countAmountExcludeTax(amountIncludeTax: string | number, taxAmount: number): number | undefined {
-    if (!amountIncludeTax && amountIncludeTax !== 0) return undefined;
-    if (!taxAmount && taxAmount !== 0) return undefined;
-
-    return chain(bignumber(amountIncludeTax)).subtract(bignumber(taxAmount)).done().toNumber();
-}
-
-/**
- * 税额 = (含税金额-扣除额)/(1+税率)*税率 
- * @param amountIncludeTax 含税金额
- * @param deduction 扣除额
- * @param taxRate 税率
- * @returns 税额
- */
-export function countTaxAmount(amountIncludeTax: string | number, deduction: number, taxRate: number): number | undefined {
-    
-    if (!amountIncludeTax && amountIncludeTax !== 0) return undefined;
-    if (!deduction && deduction !== 0) return undefined;
-    if (!taxRate && taxRate !== 0) return undefined;
-
-    const taxRateBu = chain(bignumber(taxRate)).divide(bignumber(100)).done();
-
-    return parseFloat(chain(bignumber(amountIncludeTax))
-        .subtract(bignumber(deduction))
-        .divide(chain(bignumber(1)).add(taxRateBu).done())
-        .multiply(taxRateBu)
-        .done()
-        .toNumber()
-        .toFixed(2))
-}
-
-/**
- * 单价 = 金额/数量
- * @param amount 金额
- * @param quantity 数量
- * @returns 单价
- */
-export function countPrice(amount: string | number, quantity: string | number, calculatingDigits?: number): number | undefined | '' {
-    if (!amount && amount !== 0) return undefined;
-    if (!quantity && quantity !== 0) return undefined;
-
-    return format15(chain(bignumber(amount)).divide(bignumber(quantity))
-        .done()
-        .toNumber(), calculatingDigits)
-}
-
-
-/**
- * 数量 = 金额/单价
- * @param amount 金额
- * @param price 单价
- * @returns 数量
- */
-export function countQuantity(amount: string | number, price: string | number, calculatingDigits?: number): number | undefined | '' {
-    if (!amount && amount !== 0) return undefined;
-    if (!price && price !== 0) return undefined;
-
-    return format15(chain(bignumber(amount)).divide(bignumber(price))
-        .done()
-        .toNumber(), calculatingDigits)
-}
-
-
-
-
+
+import { chain, bignumber } from 'mathjs';
+
+
+/** 格式化 保留2位小数 */
+export const format2 = (value: number | string) => {
+    if (value === Infinity) return '';
+    if (`${value}` === 'NaN') return '';
+    if (typeof value === 'string') value = parseFloat(value);
+    return parseFloat(value.toFixed(2));
+};
+
+
+/** 格式化 保留15位数字 */
+export const format15 = (value: number | string, defaultFractionDigits: number = 8) => {
+    if (value === Infinity) return '';
+    if (`${value}` === 'NaN') return '';
+    if (typeof value === 'string') value = parseFloat(value);
+
+    const fractionDigits = 15 - `${value || 0}`.indexOf('.');
+    return parseFloat(value.toFixed(fractionDigits > defaultFractionDigits ? defaultFractionDigits : fractionDigits));
+};
+
+
+/**
+ * 金额(含税) = 数量 * 单价(含税) 
+ * @param quantity 数量
+ * @param priceIncludeTax 单价(含税) 
+ * @returns 金额(含税)
+ */
+export function countAmountIncludeTax(quantity?: number | string, priceIncludeTax?: number | string, calculatingDigits?: number): number | undefined {
+    if (!quantity && quantity !== 0) return undefined;
+    if (!priceIncludeTax && priceIncludeTax !== 0) return undefined;
+
+    quantity = format15(quantity, calculatingDigits);
+    priceIncludeTax = format15(priceIncludeTax, calculatingDigits);
+
+    return parseFloat(chain(bignumber(priceIncludeTax)).multiply(bignumber(quantity)).done().toNumber().toFixed(2));
+    // return parseFloat(evaluate(`${priceIncludeTax} * ${quantity}`).toFixed(2));
+}
+
+/**
+ * 不含税金额 = 含税金额-税额
+ * @param amountIncludeTax 含税金额
+ * @param taxAmount 税额
+ * @returns 不含税金额
+ */
+export function countAmountExcludeTax(amountIncludeTax: string | number, taxAmount: number): number | undefined {
+    if (!amountIncludeTax && amountIncludeTax !== 0) return undefined;
+    if (!taxAmount && taxAmount !== 0) return undefined;
+
+    return chain(bignumber(amountIncludeTax)).subtract(bignumber(taxAmount)).done().toNumber();
+}
+
+/**
+ * 税额 = (含税金额-扣除额)/(1+税率)*税率 
+ * @param amountIncludeTax 含税金额
+ * @param deduction 扣除额
+ * @param taxRate 税率
+ * @returns 税额
+ */
+export function countTaxAmount(amountIncludeTax: string | number, deduction: number, taxRate: number): number | undefined {
+    
+    if (!amountIncludeTax && amountIncludeTax !== 0) return undefined;
+    if (!deduction && deduction !== 0) return undefined;
+    if (!taxRate && taxRate !== 0) return undefined;
+
+    const taxRateBu = chain(bignumber(taxRate)).divide(bignumber(100)).done();
+
+    return parseFloat(chain(bignumber(amountIncludeTax))
+        .subtract(bignumber(deduction))
+        .divide(chain(bignumber(1)).add(taxRateBu).done())
+        .multiply(taxRateBu)
+        .done()
+        .toNumber()
+        .toFixed(2))
+}
+
+/**
+ * 单价 = 金额/数量
+ * @param amount 金额
+ * @param quantity 数量
+ * @returns 单价
+ */
+export function countPrice(amount: string | number, quantity: string | number, calculatingDigits?: number): number | undefined | '' {
+    if (!amount && amount !== 0) return undefined;
+    if (!quantity && quantity !== 0) return undefined;
+
+    return format15(chain(bignumber(amount)).divide(bignumber(quantity))
+        .done()
+        .toNumber(), calculatingDigits)
+}
+
+
+/**
+ * 数量 = 金额/单价
+ * @param amount 金额
+ * @param price 单价
+ * @returns 数量
+ */
+export function countQuantity(amount: string | number, price: string | number, calculatingDigits?: number): number | undefined | '' {
+    if (!amount && amount !== 0) return undefined;
+    if (!price && price !== 0) return undefined;
+
+    return format15(chain(bignumber(amount)).divide(bignumber(price))
+        .done()
+        .toNumber(), calculatingDigits)
+}
+
+
+
+

package/src/Invoice/tools/coolingFn/index.ts

@@ -1,18 +1,18 @@
-
-
-const keys: { [key: string]: any } = {}
-
-/**
- * 有冷却时间的函数
- * @param fn 方法
- * @param key 方法key
- * @param delayed 冷却时间
- */
-export default (key: string = 'default', delayed: number = 200, fn: Function) => {
-    if (keys[key]) {
-        return;
-    } else {
-        fn();
-        keys[key] = setTimeout(() => { delete keys[key] }, delayed);
-    }
+
+
+const keys: { [key: string]: any } = {}
+
+/**
+ * 有冷却时间的函数
+ * @param fn 方法
+ * @param key 方法key
+ * @param delayed 冷却时间
+ */
+export default (key: string = 'default', delayed: number = 200, fn: Function) => {
+    if (keys[key]) {
+        return;
+    } else {
+        fn();
+        keys[key] = setTimeout(() => { delete keys[key] }, delayed);
+    }
 }

package/src/Invoice/tools/evaluate/index.ts

@@ -1,7 +1,7 @@
-import { create, all } from 'mathjs';
-
-const math = create(all, { number: 'BigNumber', precision: 20 }) as any;
-
-export default (expr: any, fractionDigits = 20) => {
-  return parseFloat(math.evaluate(expr).toFixed(fractionDigits));
-};
+import { create, all } from 'mathjs';
+
+const math = create(all, { number: 'BigNumber', precision: 20 }) as any;
+
+export default (expr: any, fractionDigits = 20) => {
+  return parseFloat(math.evaluate(expr).toFixed(fractionDigits));
+};

package/src/Invoice/tools/idGenerator/index.ts

@@ -1,3 +1,3 @@
-
-import { v4 as uuidv4 } from 'uuid';
+
+import { v4 as uuidv4 } from 'uuid';
 export default () => uuidv4();