kts-component-invoice-operate 3.2.23 → 3.2.24

package/package.json

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

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

@@ -1,10 +1,15 @@
 import React from 'react';
 import Invoice from '../../..';
 import 'antd/dist/antd.css';
+import InvoiceController from '../../../InvoiceController';
 
 export default () => {
+
+    const invoiceController = React.useMemo(() => new MyInvoiceController(), []);
+
     return (
         <Invoice
+            controller={invoiceController}
             invoiceType='digtal'
             invoiceHeader={
                 <Invoice.InvoiceHeaderDigtal
@@ -15,3 +20,66 @@ export default () => {
         />
     )
 };
+
+class MyInvoiceController extends InvoiceController {
+
+    constructor() {
+        super();
+        this.state.autoComplete.onItemNameSearch = async text => {
+            return [
+                {
+                    "itemName": "呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵",
+                    "taxClassificationCode": "1010112070000000000",
+                    "itemModelName": null,
+                    "shorthand": "蔬菜",
+                    "taxRate": undefined
+                },
+                {
+                    "itemName": "稻谷",
+                    "taxClassificationCode": "1010101040000000000",
+                    "itemModelName": null,
+                    "shorthand": "谷物",
+                    "taxRate": 3
+                },
+                {
+                    "itemName": "苹果",
+                    "taxClassificationCode": "1090111090000000000",
+                    "itemModelName": null,
+                    "shorthand": "小型起重设备",
+                    "taxRate": null
+                },
+                {
+                    "itemName": "银丝",
+                    "taxClassificationCode": "1080411120000000000",
+                    "itemModelName": null,
+                    "shorthand": "金属制品",
+                    "taxRate": 3
+                },
+                {
+                    "itemName": "布料",
+                    "taxClassificationCode": "1100101011100000000",
+                    "itemModelName": null,
+                    "shorthand": "发电",
+                    "taxRate": 2
+                },
+                {
+                    "itemName": "苹果",
+                    "taxClassificationCode": "1010115010100000000",
+                    "itemModelName": null,
+                    "shorthand": "水果",
+                    "taxRate": 3
+                }
+            ] as any
+        }
+
+        this.state.autoComplete.onBuyerTaxIdSearch = this.state.autoComplete.onBuyerNameSearch = async test => {
+            return [
+                { buyerName: '测试1', buyerTaxId: 'xxxxx1', buyerPhone:'xxxx1' },
+                { buyerName: '测试2', buyerTaxId: 'xxxxx2', buyerPhone:'xxxx2' },
+                { buyerName: '测试4', buyerTaxId: 'xxxxx4', buyerPhone:'xxxx4' },
+                { buyerName: '测试5', buyerTaxId: 'xxxxx5', buyerPhone:'xxxx5' },
+                { buyerName: '测试6', buyerTaxId: 'xxxxx6', buyerPhone:'xxxx6' },
+            ]
+        }
+    }
+}

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

@@ -4,5 +4,11 @@ import IGood from "../GoodsListState/IGood";
 export default class AutoComplete {
 
     /** 商品名称自动补全 */
-    onItemNameSearch?: (searchText: string) => Promise<IGood[]>
+    onItemNameSearch?: (searchText: string) => Promise<IGood[]>;
+
+    /** 购方名称自动补全 */
+    onBuyerNameSearch?: (searchText: string) => Promise<any[]>;
+
+    /** 统一社会信用代码/纳税人识别号 */
+    onBuyerTaxIdSearch?: (searchText: string) => Promise<any[]>;
 }

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

@@ -0,0 +1,68 @@
+import { dutyFree, format15, updateUnitPriceExcludingTax, updateUnitPriceTax } from '../../ui/default/GoodsList/hook/useColumns/autoFillFn';
+import { InvoiceControllerState, IGood } from '../';
+import evaluate from '../../tools/evaluate';
+import { countAmountIncludeTax } from '../../tools/calculate';
+
+/**
+ * 删除一个货物
+ */
+export default async (s: InvoiceControllerState, record: any, controller:any) => {
+    Object.keys(record).filter(e => !record[e] && record[e] !== 0).forEach(e => { delete record[e] });
+
+    // 没用 被编辑的货物 和 form 就退出
+    if (!s.goodsListState.editGood || !s.goodsListState.form) return;
+
+    // 导入时清空之前输入的值，使用导入的单价和税率(参考税局系统)
+    record.quantity = undefined;
+    record.lineAmountExcludeTax = undefined;
+    record.lineAmountIncludeTax = undefined;
+
+    // 中间数据
+    const between = { ...record };
+    between.itemName = record.itemName;
+    between.itemNameOther = record.itemName;
+
+    // 设置编辑货物
+    const editGood: IGood = s.goodsListState.editGood = { ...s.goodsListState.editGood, ...between };
+
+    if (editGood.taxRate) {
+        editGood.taxRate = dutyFree(controller, editGood.taxRate, s.goodsListState.form, editGood)
+    }
+
+    if (`${editGood.priceIncludeTax}` === '0') {
+        editGood.priceIncludeTax = undefined;
+        editGood.priceExcludeTax = undefined;
+    } else {
+        editGood.priceExcludeTax = getPriceExcludeTax(editGood, record, s.calculatingDigits) as number;
+    }
+
+    if (editGood.quantity && editGood.priceIncludeTax) {
+        editGood.lineAmountIncludeTax = countAmountIncludeTax(editGood.quantity, editGood.priceIncludeTax, s.calculatingDigits);
+    }
+
+    // 导入FORM里
+    if (s.goodsListState.isMyShow) {
+        s.goodsListState.form.setFieldsValue({
+            ...editGood,
+            itemName: editGood.itemNameSelf,
+            itemModelName: editGood.itemModelNameSelf,
+        });
+    } else {
+        s.goodsListState.form.setFieldsValue({
+            ...editGood,
+        });
+    }
+
+    s.goodsListState.importGoods.isVisibleDrawer = false;
+    s.goodsListState.isTaxIncluded
+        ? await updateUnitPriceExcludingTax(controller, s.goodsListState.form, record)
+        : await updateUnitPriceTax(controller, s.goodsListState.form, record)
+}
+
+/** 货物单价，不含税 */
+const getPriceExcludeTax = (s: IGood, record: any, calculatingDigits?: number) => {
+    if ((!s.taxRate && s.taxRate !== 0) || (!record.priceIncludeTax && record.priceIncludeTax !== 0)) return;
+
+    // 单价(含税)/(1+税率) = 单价(不含税)
+    return format15(evaluate(`${record.priceIncludeTax} / (1+${s.taxRate}/100)`), calculatingDigits);
+};

package/src/Invoice/InvoiceController/index.ts

@@ -13,7 +13,8 @@ import saveEditGood from './fns/saveEditGood';
 import getGoodsSearch from './fns/getGoodsSearch';
 import mergeDetails from './fns/mergeDetails';
 import mergeDiscount from './fns/mergeDiscount';
-
+import importGoodsDrawer from './fns/importGoodsDrawer';
+0
 export { default as InvoiceControllerState } from './InvoiceControllerState';
 export { default as IGood } from './InvoiceControllerState/GoodsListState/IGood';
 export { default as LineAttributeType } from './InvoiceControllerState/GoodsListState/LineAttributeType';
@@ -62,6 +63,9 @@ export default class InvoiceController extends InvoiceControllerForm {
   /** 给一组货物添加折扣行 */
   addGoodDiscountV2 = this.pipeline(addGoodDiscountV2);
 
+  /** 导入商品 */
+  importGoodsDrawer = this.pipeline(importGoodsDrawer);
+
   /** 获取 商品 列表 */
   getGoodsList?: (option?: IGetGoodsListOption | undefined) => Promise<any>;
 

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

@@ -2,11 +2,11 @@
 import { Input } from 'kts-components-antd-x3';
 import React, { ChangeEvent } from 'react';
 import { AutoComplete } from 'kts-xui';
-import { countAmountIncludeTax } from '../../../../../../../tools/calculate'
+// import { countAmountIncludeTax } from '../../../../../../../tools/calculate'
 import { IGood, Invoice } from '../../../../../../../..';
 import './index.less';
-import { dutyFree, format15, updateUnitPriceExcludingTax, updateUnitPriceTax } from '../../autoFillFn';
-import evaluate from '../../../../../../../tools/evaluate';
+// import { dutyFree, format15, updateUnitPriceExcludingTax, updateUnitPriceTax } from '../../autoFillFn';
+// import evaluate from '../../../../../../../tools/evaluate';
 
 export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLInputElement>) => void, value?: string, shorthand?: string }) {
 
@@ -37,60 +37,60 @@ export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLIn
         // good && controller.state.goodsListState.form?.setFieldsValue(removeNullUndefined(good));
 
         const record = options.filter(e => e.itemName === itemName)[0] as any;
-        debugger;
         if (!record) return;
-        controller.run(async s => {
-            Object.keys(record).filter(e => !record[e] && record[e] !== 0).forEach(e => { delete record[e] });
-
-            // 没用 被编辑的货物 和 form 就退出
-            if (!s.goodsListState.editGood || !s.goodsListState.form) return;
-
-            // 导入时清空之前输入的值，使用导入的单价和税率(参考税局系统)
-            record.quantity = undefined;
-            record.lineAmountExcludeTax = undefined;
-            record.lineAmountIncludeTax = undefined;
-
-            // 中间数据
-            const between = { ...record };
-            between.itemName = record.itemName;
-            between.itemNameOther = record.itemName;
-
-            // 设置编辑货物
-            const editGood: IGood = s.goodsListState.editGood = { ...s.goodsListState.editGood, ...between };
-
-            if (editGood.taxRate) {
-                editGood.taxRate = dutyFree(controller, editGood.taxRate, s.goodsListState.form, editGood)
-            }
-
-            if (`${editGood.priceIncludeTax}` === '0') {
-                editGood.priceIncludeTax = undefined;
-                editGood.priceExcludeTax = undefined;
-            } else {
-                editGood.priceExcludeTax = getPriceExcludeTax(editGood, record, s.calculatingDigits) as number;
-            }
-
-            if (editGood.quantity && editGood.priceIncludeTax) {
-                editGood.lineAmountIncludeTax = countAmountIncludeTax(editGood.quantity, editGood.priceIncludeTax, s.calculatingDigits);
-            }
-
-            // 导入FORM里
-            if (s.goodsListState.isMyShow) {
-                s.goodsListState.form.setFieldsValue({
-                    ...editGood,
-                    itemName: editGood.itemNameSelf,
-                    itemModelName: editGood.itemModelNameSelf,
-                });
-            } else {
-                s.goodsListState.form.setFieldsValue({
-                    ...editGood,
-                });
-            }
-
-            s.goodsListState.importGoods.isVisibleDrawer = false;
-            s.goodsListState.isTaxIncluded
-                ? await updateUnitPriceExcludingTax(controller, s.goodsListState.form, record)
-                : await updateUnitPriceTax(controller, s.goodsListState.form, record)
-        })
+        controller.importGoodsDrawer(record);
+        // controller.run(async s => {
+        //     Object.keys(record).filter(e => !record[e] && record[e] !== 0).forEach(e => { delete record[e] });
+
+        //     // 没用 被编辑的货物 和 form 就退出
+        //     if (!s.goodsListState.editGood || !s.goodsListState.form) return;
+
+        //     // 导入时清空之前输入的值，使用导入的单价和税率(参考税局系统)
+        //     record.quantity = undefined;
+        //     record.lineAmountExcludeTax = undefined;
+        //     record.lineAmountIncludeTax = undefined;
+
+        //     // 中间数据
+        //     const between = { ...record };
+        //     between.itemName = record.itemName;
+        //     between.itemNameOther = record.itemName;
+
+        //     // 设置编辑货物
+        //     const editGood: IGood = s.goodsListState.editGood = { ...s.goodsListState.editGood, ...between };
+
+        //     if (editGood.taxRate) {
+        //         editGood.taxRate = dutyFree(controller, editGood.taxRate, s.goodsListState.form, editGood)
+        //     }
+
+        //     if (`${editGood.priceIncludeTax}` === '0') {
+        //         editGood.priceIncludeTax = undefined;
+        //         editGood.priceExcludeTax = undefined;
+        //     } else {
+        //         editGood.priceExcludeTax = getPriceExcludeTax(editGood, record, s.calculatingDigits) as number;
+        //     }
+
+        //     if (editGood.quantity && editGood.priceIncludeTax) {
+        //         editGood.lineAmountIncludeTax = countAmountIncludeTax(editGood.quantity, editGood.priceIncludeTax, s.calculatingDigits);
+        //     }
+
+        //     // 导入FORM里
+        //     if (s.goodsListState.isMyShow) {
+        //         s.goodsListState.form.setFieldsValue({
+        //             ...editGood,
+        //             itemName: editGood.itemNameSelf,
+        //             itemModelName: editGood.itemModelNameSelf,
+        //         });
+        //     } else {
+        //         s.goodsListState.form.setFieldsValue({
+        //             ...editGood,
+        //         });
+        //     }
+
+        //     s.goodsListState.importGoods.isVisibleDrawer = false;
+        //     s.goodsListState.isTaxIncluded
+        //         ? await updateUnitPriceExcludingTax(controller, s.goodsListState.form, record)
+        //         : await updateUnitPriceTax(controller, s.goodsListState.form, record)
+        // })
     }, [options, controller])
 
     return (
@@ -117,9 +117,9 @@ export default function ItemNameInput(props: { onChange?: (e: ChangeEvent<HTMLIn
 // }
 
 /** 货物单价，不含税 */
-const getPriceExcludeTax = (s: IGood, record: any, calculatingDigits?: number) => {
-    if ((!s.taxRate && s.taxRate !== 0) || (!record.priceIncludeTax && record.priceIncludeTax !== 0)) return;
+// const getPriceExcludeTax = (s: IGood, record: any, calculatingDigits?: number) => {
+//     if ((!s.taxRate && s.taxRate !== 0) || (!record.priceIncludeTax && record.priceIncludeTax !== 0)) return;
 
-    // 单价(含税)/(1+税率) = 单价(不含税)
-    return format15(evaluate(`${record.priceIncludeTax} / (1+${s.taxRate}/100)`), calculatingDigits);
-};
+//     // 单价(含税)/(1+税率) = 单价(不含税)
+//     return format15(evaluate(`${record.priceIncludeTax} / (1+${s.taxRate}/100)`), calculatingDigits);
+// };

package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/ItemNameInput/index.tsx

@@ -1,24 +1,50 @@
 
-import { Input } from 'kts-xui';
+import { AutoComplete, Input } from 'kts-xui';
 import React, { ChangeEvent } from 'react';
+import { IGood, Invoice } from '../../../../../../../..';
 import './index.less';
 
-export default function ItemNameInput(props: { 
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void, 
-    suffix?: React.ReactNode, 
-    value?: string, 
-    shorthand?: string 
+export default function ItemNameInput(props: {
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void,
+    suffix?: React.ReactNode,
+    value?: string,
+    shorthand?: string
 }) {
 
+    const controller = Invoice.useInvoiceController();
+
+    const autoComplete = controller.useMemo(s => s.autoComplete, [])
+
+    const [options, setOptions] = React.useState<IGood[]>([])
+
     const onChange = React.useCallback((e: ChangeEvent<HTMLInputElement>) => {
         const event = { ...e };
         props.onChange && props.onChange(event);
     }, [])
 
+    const onChangeAutoComplete = React.useCallback(itemName => {
+        const record = options.filter(e => e.itemName === itemName)[0] as any;
+        if (!record) return;
+        controller.importGoodsDrawer(record);
+    }, [options, controller])
+
+    const onSearch = React.useCallback(async (searchText: string) => {
+        try {
+            if (autoComplete.onItemNameSearch) {
+                setOptions(await autoComplete.onItemNameSearch(searchText));
+            }
+        } catch (error) {
+            setOptions([]);
+            throw error;
+        }
+    }, [autoComplete.onItemNameSearch])
+
     return (
         <div className='kts-invoice-operate-goods-list-itemName-input'>
             {props.shorthand && <span style={{ alignSelf: 'center', fontSize: 12 }} >*{props.shorthand}*</span>}
-            <Input style={{ height: '100%' }} value={props.value} onChange={onChange} suffix={props.suffix} />
+            <AutoComplete onSearch={onSearch} options={options.map(e => ({ value: e.itemName }))} onChange={onChangeAutoComplete} >
+                <Input style={{ height: '100%' }} value={props.value} onChange={onChange} suffix={props.suffix} />
+            </AutoComplete>
         </div>
     )
 }

package/src/Invoice/ui/digtal/Stakeholder/index.tsx

@@ -1,10 +1,11 @@
 
-import React from "react";
+import React, { ChangeEvent } from 'react';
 import Icon from '@ant-design/icons';
 import { decorator } from "grey-react-box";
 import { Form } from "kts-components-antd-x3";
-import { Button, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
+import { AutoComplete, Button, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
 import { FormComponentProps } from "kts-components-antd-x3/lib/form";
+import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
 import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
 import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
 import { ReactComponent as PlusSvg } from './svg/plus.svg'
@@ -19,21 +20,21 @@ const RULES = {
         { pattern: /^([A-Za-z（）\u4e00-\u9fa5])*$/g, message: `${label}仅能中文、英文、括号` }
     ],
     companyNameByNormal: (label: string) => [
-      { required: true, message: `${label}必填` },
-      { max: 200, message: `${label}内容超长` }
+        { required: true, message: `${label}必填` },
+        { max: 200, message: `${label}内容超长` }
     ],
     taxId: (label: string) => [
         { max: 20, message: `${label}内容超长` },
         { pattern: /^([a-zA-Z0-9])*$/g, message: `${label}仅能数字、英文` }
     ],
     buyerTelPhone: (label: string) => [
-      { max: 100, message: `${label}内容超长` },
-      { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
     ],
     sellerTelPhone: (label: string) => [
-      { required: true, message: `${label}必填` },
-      { max: 100, message: `${label}内容超长` },
-      { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
+        { required: true, message: `${label}必填` },
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
     ],
     bankName: (label: string) => [
         { max: 100, message: `${label}内容超长` }
@@ -69,7 +70,7 @@ export interface IStakeholder {
 /** 干系人 */
 export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
 
-    const { form, isShowImportButton, onClickImportButton , isVatNormal = false} = props;
+    const { form, isShowImportButton, onClickImportButton, isVatNormal = false } = props;
 
     const [isExpand, setExpand] = React.useState(true);
 
@@ -120,10 +121,12 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
                             <Form.Item label='名称' colon={false}>
                                 {getFieldDecorator('buyerName', {
                                     rules: getRules('buyerName', isVatNormal ?
-                                      RULES.companyNameByNormal('购买方名称') :
-                                      RULES.companyNameBySpecial('购买方名称')),
+                                        RULES.companyNameByNormal('购买方名称') :
+                                        RULES.companyNameBySpecial('购买方名称')),
                                 })(
-                                    <MyInput
+                                    <BuyerNameInput
+                                        myform={form}
+                                        fieldName='buyerName'
                                         readOnly={isReadOnly('buyerName')}
                                         placeholder="请输入"
                                         autoComplete="off"
@@ -145,7 +148,15 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
                             <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
                                 {getFieldDecorator('buyerTaxId', {
                                     rules: getRules('buyerTaxId', [{ required: !isVatNormal, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
-                                })(<MyInput readOnly={isReadOnly('buyerTaxId')} placeholder="请输入" autoComplete="off" />)}
+                                })(
+                                    <BuyerNameInput
+                                        myform={form}
+                                        fieldName='buyerTaxId'
+                                        readOnly={isReadOnly('buyerTaxId')}
+                                        placeholder="请输入"
+                                        autoComplete="off"
+                                    />
+                                )}
                             </Form.Item>
                         </Col>
                         {
@@ -270,6 +281,58 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     )
 })
 
+
+function BuyerNameInput(props: InputProps & { fieldName: string; myform: WrappedFormUtils<any> }) {
+
+    const { fieldName, myform: form } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const autoComplete = controller.useMemo(s => s.autoComplete, [])
+
+    const [options, setOptions] = React.useState<any[]>([])
+
+    const onChangeAutoComplete = React.useCallback(value => {
+        const record = options.filter(e => e[fieldName] === value)[0] as any;
+        if (!record || !form) return;
+
+        form.setFieldsValue(record);
+        setOptions([])
+    }, [options, fieldName, form])
+
+    const onSearch = React.useCallback(async (searchText: string) => {
+        await Discontinue.start();
+        try {
+            if (fieldName === 'buyerName') {
+                if (autoComplete.onBuyerNameSearch) {
+                    setOptions(await autoComplete.onBuyerNameSearch(searchText));
+                }
+            } else if (fieldName === 'buyerTaxId') {
+                if (autoComplete.onBuyerTaxIdSearch) {
+                    setOptions(await autoComplete.onBuyerTaxIdSearch(searchText));
+                }
+            }
+
+        } catch (error) {
+            setOptions([]);
+            throw error;
+        }
+    }, [autoComplete.onBuyerNameSearch, fieldName])
+
+    if (props.readOnly) return <span>{props.value}</span>;
+
+    return (
+        <AutoComplete
+            onSearch={onSearch}
+            options={options.map(e => ({ value: e[fieldName] }))}
+            onChange={onChangeAutoComplete}
+            value={props.value}
+        >
+            <Input {...props} style={{ width: '100%', ...props.style }} />
+        </AutoComplete>
+    )
+}
+
 class MyInput extends React.Component<InputProps>{
     render() {
         const props = this.props;
@@ -280,3 +343,14 @@ class MyInput extends React.Component<InputProps>{
         }
     }
 }
+
+
+class Discontinue {
+
+    private static timer: any;
+
+    static start = (interval = 200) => new Promise<void>(resolve => {
+        clearTimeout(Discontinue.timer);
+        Discontinue.timer = setTimeout(resolve, interval);
+    })
+}