kts-component-invoice-operate 3.2.21 → 3.2.24

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);
+    })
+}