kts-component-invoice-operate 3.2.239 → 3.2.241

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

@@ -1,9 +1,9 @@
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import Icon from '@ant-design/icons';
 import { decorator } from "grey-react-box";
 import { Form } from "kts-components-antd-x3";
-import { AutoComplete, Button, Checkbox, Col, Input, InputProps, Select, Row, Tooltip } from 'kts-xui'
+import { AutoComplete, Button, Checkbox, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
 import { CheckboxChangeEvent } from 'kts-components-antd-x4/lib/checkbox';
 import { FormComponentProps } from "kts-components-antd-x3/lib/form";
 import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
@@ -40,12 +40,7 @@ const RULES = {
     bankAccount: (label: string) => [
         { max: 100, message: `${label}内容超长` },
         { pattern: /^([0-9a-zA-Z-\s])*$/g, message: `${label}仅能数字、字母、-、空格` }
-    ],
-    certificateNumber: (label: string) => [
-        { required: true, message: `${label}必填` },
-        { max: 30, message: `${label}内容超长` },
-        { pattern: /^([a-zA-Z0-9])*$/g, message: `${label}仅能数字、英文` }
-    ],
+    ]
 }
 
 const formatCompanyName = (e: any) => {
@@ -98,10 +93,7 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     const disableds = controller.useMemo(s => s.stakeholder.disableds || [], []);
 
     const rulesMap = controller.useMemo(s => s.stakeholder.rulesMap || {}, []);
-    const [validateStatus, setStatus] = React.useState<any>('');
-    const [errorInfo, setInfo] = React.useState('');
-    const [nation, setNationStatue] = React.useState<any>('');
-    const [nationInfo, setNation] = React.useState('');
+
     /** 乐企 */
     const leqispanW = React.useMemo(() => {
         if (props.leqi) {
@@ -140,418 +132,46 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     React.useEffect(() => {
         setExpand(typeof props.isExpand === 'boolean' ? props.isExpand : true);
     }, [props.isExpand])
-    const onChangeType = useCallback(
-        (value: string) => {
-            const supplierTaxId = form?.getFieldValue("supplierTaxId");
-            const certificateNumber = form?.getFieldValue("certificateNumber");
-            const nationality = form?.getFieldValue("nationality");
-            if (value === "201") {
-                // 当“自然人证件类型”选择“201:居民身份证”时，校验是否为“156:中国’
-                form?.setFieldsValue({ nationality: "156" });
-                setNationStatue('');
-                setNation('');
-                if (supplierTaxId !== certificateNumber) {
-                    setStatus('error');
-                    setInfo('证件号码应与销方税号保持一致')
-                }
-            } else if (value === "210") {
-                if (value.startsWith("M")) {
-                    //如果“证件号码”以M开头，"国籍(或地区头，)”必须为“446:中国澳门”;校验证件号码必须以H或M开头
-                    if (nationality !== '446') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-                } else if (value.startsWith("H")) {
-                    //如果“证件号码”以H开国籍(或地区)”必须为“344:中国香港”;
-                    if (nationality !== '344') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-                } else {
-                    setStatus('error');
-                    setInfo('请输入正确的证件号码')
-                }
-            } else if (value === "237") {
-                if (value.startsWith("810000")) {
-                    if (nationality !== '344') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-                } else if (value.startsWith("820000")) {
-                    if (nationality !== '446') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-
-                } else {
-                    setStatus('error');
-                    setInfo('请输入正确的证件号码')
-                    return Promise.reject("请输入正确的证件号码");
-                }
-            } else if (value === "227") {
-
-                // 当“自然人证件类型”选择“227:中华人民共和国护照”时，校验是否为“156:中国
-                form?.setFieldsValue({ nationality: "156" });
-
-            } else if (value === "213" || value === "238") {
-                // 当“自然人证件类型”选择“213:台湾居民来往大陆通行证”时，校验是否为”158:中国台湾”
-                // 当“自然人证件类型”选择“238:中华人民共和国台湾居民居住证”时，校验是否为“ 158:中国台湾”
-                form?.setFieldsValue({ nationality: "158" });
-            }
-        },
-        [form]
-    );
-    /** 校验证件号码*/
-    const validateIDCode = useCallback(
-        (_: any, value: string) => {
-            if (!value) {
-                setStatus('error');
-                setInfo('请输入正确的证件号码')
-                return Promise.resolve();
-            }
-
-            const idtype = form?.getFieldValue("certificateType");
-            const nationality = form?.getFieldValue("nationality");
-            if (idtype === "210") {
-                // 当“自然人证件类型”选择“210:港澳居民来往内地通行证”时，
-
 
-                if (value.startsWith("M")) {
-                    //如果“证件号码”以M开头，"国籍(或地区头，)”必须为“446:中国澳门”;校验证件号码必须以H或M开头
-                    if (nationality !== '446') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-                } else if (value.startsWith("H")) {
-                    //如果“证件号码”以H开国籍(或地区)”必须为“344:中国香港”;
-                    if (nationality !== '344') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-                } else {
-                    setStatus('error');
-                    setInfo('请输入正确的证件号码')
-                    return Promise.reject("请输入正确的证件号码");
-                }
-            } else if (idtype === "237") {
-                //当“自然人证件类型”选择“237:中华人民共和国港澳居民居住证”时，校验证件号码必须以810000或820000开头，如果“证件号码”以810000开头，必须为“344:中国香国籍(或地区))港”;如果“证件号码”以820000开头，国籍(或地区)必须为“446:中国澳门”
-                if (value.startsWith("810000")) {
-                    if (nationality !== '344') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-                } else if (value.startsWith("820000")) {
-                    if (nationality !== '446') {
-                        setNationStatue('error');
-                        setNation('请选择正确的国籍');
-                    } else {
-                        setNationStatue('');
-                        setNation('');
-                    }
-
-
-                } else {
-                    setStatus('error');
-                    setInfo('请输入正确的证件号码')
-                    return Promise.reject("请输入正确的证件号码");
-                }
-            }
-            // 当“销售方自然人证件类型”填写“201:居民身份证”，“销售方纳税人识别号”必须与“销售方自然人证件号码”完全一致
-            if (idtype === "201") {
-                const supplierTaxId = form?.getFieldValue("supplierTaxId");
-                if (value !== supplierTaxId) {
-                    setStatus('error');
-                    setInfo('证件号码应与销方税号保持一致')
-                    return Promise.reject("证件号码应与销方税号保持一致");
-                } else if (value === supplierTaxId) {
-                    setStatus('');
-                    setInfo('')
-                }
-            }
-            setStatus('');
-            setInfo('')
-            return Promise.resolve();
-        },
-        [form]
-    );
-    const validateIDCode2 = useCallback(
-        (e: any) => {
-            const value = e.target.value;
-            // if (!value) {
-            //     setStatus('');
-            //     setInfo('')
-            // }
-
-            const idtype = form?.getFieldValue("certificateType");
-
-            // // 当“销售方自然人证件类型”填写“201:居民身份证”，“销售方纳税人识别号”必须与“销售方自然人证件号码”完全一致
-            if (idtype === "201") {
-                const certificateNumber = form?.getFieldValue("certificateNumber");
-                console.log(value, certificateNumber)
-                if (value !== certificateNumber) {
-                    setStatus('error');
-                    setInfo('证件号码应与销方税号保持一致')
-                } else {
-                    setStatus('');
-                    setInfo('')
-                }
-            }
-        },
-        [form]
-    );
-    const validateNationality = useCallback(
-        (_: any, value: string) => {
-            if (!value) {
-                setNationStatue('error');
-                setNation('请选择正确的国籍');
-                return Promise.resolve();
-            }
-            const idtype = form?.getFieldValue("certificateType");
-            const idcode = form?.getFieldValue("certificateNumber");
-            console.log(value, idtype, idcode)
-            if (idtype === "201" || idtype === "227") {
-                // 当“自然人证件类型”选择“201:居民身份证”时，校验是否为“156:中国’
-                // 当“自然人证件类型”选择“227:中华人民共和国护照”时，校验是否为“156:中国
-                if (value !== "156") {
-                    setNationStatue('error');
-                    setNation('请选择正确的国籍');
-                    return Promise.reject("请选择正确的国籍");
-                }
-            } else if (idtype === "213" || idtype === "238") {
-                // 当“自然人证件类型”选择“213:台湾居民来往大陆通行证”时，校验是否为”158:中国台湾”
-                // 当“自然人证件类型”选择“238:中华人民共和国台湾居民居住证”时，校验是否为“ 158:中国台湾”
-                if (value !== "158") {
-                    setNationStatue('error');
-                    setNation('请选择正确的国籍');
-                    return Promise.reject("请选择正确的国籍");
-                }
-            } else if (idtype === "210") {
-                //当“自然人证件类型”选择“210:港澳居民来往内地通行证”时，如果“证件号码”以H开国籍(或地区)”必须为“344:中国香港”;如果“证件号码”以M开头，"国籍(或地区头，)”必须为“446:中国澳门”;
-                let r = false;
-                if (idcode) {
-                    if (idcode.startsWith("M") && value === "446") {
-                        r = true;
-                    } else if (idcode.startsWith("H") && value === "344") {
-                        r = true;
-                    }
-                } else if (value === "344" || value === "446") {
-                    r = true;
-                }
-                if (!r) {
-                    setNationStatue('error');
-                    setNation('请选择正确的国籍');
-                    return Promise.reject("请选择正确的国籍");
-                }
-            } else if (idtype === "237") {
-                //当“自然人证件类型”选择“237:中华人民共和国港澳居民居住证”时，校验证件号码必须以810000或820000开头，如果“证件号码”以810000开头，必须为“344:中国香国籍(或地区))港”;如果“证件号码”以820000开头，国籍(或地区)必须为“446:中国澳门”
-                let r = false;
-                if (idcode) {
-                    if (idcode.startsWith("820000") && value === "446") {
-                        r = true;
-                    } else if (idcode.startsWith("810000") && value === "344") {
-                        r = true;
-                    }
-                } else if (value === "344" || value === "446") {
-                    r = true;
-                }
-                if (!r) {
-                    setNationStatue('error');
-                    setNation('请选择正确的国籍');
-                    return Promise.reject("请选择正确的国籍");
-                }
-            }
-            setNationStatue('');
-            setNation('');
-            return Promise.resolve();
-        },
-        [form]
-    );
     return (
-        <>
-            <div className={classNames("kts-invoice-operate-invoice-digtal-stakeholder", { readOnly: readOnly })} >
-                <div>
-                    {'销售方信息'.split('').map(e => <span>{e}</span>)}
-                    {
-                        !readOnly &&
-                        <Icon
-                            className="digtal-stakeholder-expand-button"
-                            component={isExpand ? ArrowUpSvg : ArrowDownSvg}
-                            onClick={onExpand}
-                        />
-                    }
-                </div>
-                <div>
-                    <div style={{ marginTop: 20 }} className='natural-person-flag' >
-                        {
-                            props.isNaturalPerson === true &&
-                            <Form.Item colon={false}>
-                                {getFieldDecorator('naturalPersonFlag', {
-                                })(
-                                    <NaturalPersonFlag readOnly={isReadOnly('naturalPersonFlag')} />
-                                )}
-                            </Form.Item>
-                        }
-                    </div>
-                    <Form className="digtal-stakeholder-form" >
-                        <Row gutter={[16, 0]}>
-                            <Col span={24} >
-                                <Form.Item label='名称' colon={false}>
-                                    {getFieldDecorator('supplierName', {
-                                        rules: getRules('supplierName', RULES.companyName('销售方名称')),
-                                        // getValueFromEvent: formatCompanyName
-                                    })
-                                        // (<MyInput readOnly={isReadOnly('supplierName')} placeholder="请输入名称" autoComplete="off" />)
-                                        (
-                                            <BuyerNameInput
-                                                myform={form}
-                                                fieldName='supplierName'
-                                                readOnly={isReadOnly('supplierName')}
-                                                placeholder="请输入名称"
-                                                autoComplete="off"
-                                                suffix={
-                                                    isShowImportButton === true &&
-                                                    <Button
-                                                        type='link'
-                                                        style={{ padding: 0, width: 20, height: '100%' }}
-                                                        icon={<Icon component={PlusSvg} />}
-                                                        onClick={() => { onClickImportButton && onClickImportButton(controller) }}
-                                                    />
-                                                }
-                                            />
-                                        )
-                                    }
-                                </Form.Item>
-                            </Col>
-
-                            <Col span={24} >
-                                <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
-                                    {getFieldDecorator('supplierTaxId', {
-                                        rules: getRules('supplierTaxId', [{ required: true, message: '销售方纳税人识别号必填' }, ...RULES.taxId('销售方纳税人识别号')])
-                                    })
-                                        // (<MyInput readOnly={isReadOnly('supplierTaxId')} placeholder="请输入统一社会信用代码/纳税人识别号" autoComplete="off" />)
-                                        (<BuyerNameInput
-                                            onChange={validateIDCode2}
-                                            myform={form}
-                                            fieldName='supplierTaxId'
-                                            readOnly={isReadOnly('supplierTaxId')}
-                                            placeholder="请输入统一社会信用代码/纳税人识别号"
-                                            autoComplete="off"
-                                        />)
-                                    }
-                                </Form.Item>
-                            </Col>
-
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='销售方地址' colon={false}>
-                                    {getFieldDecorator('sellerAddress', {
-                                        rules: getRules('sellerAddress', [{ max: 300, message: '销售方地址内容超长' }])
-                                    })(<MyInput readOnly={isReadOnly('sellerAddress')} placeholder="请输入销售方地址" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
-
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='电话' colon={false} className='telephone' >
-                                    {getFieldDecorator('sellerPhone', {
-                                        rules: getRules('sellerPhone', RULES.sellerTelPhone('销售方电话'))
-                                    })(<MyInput readOnly={isReadOnly('sellerPhone')} placeholder="请输入电话" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
-
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='销售方开户银行' colon={false}>
-                                    {getFieldDecorator('sellerBank', {
-                                        rules: getRules('sellerBank', RULES.bankName('销售方开户银行'))
-                                    })(<MyInput readOnly={isReadOnly('sellerBank')} placeholder="请输入销售方开户银行" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
-                            {(props.leqi) &&
-                                <Col span={4} style={{ display: isExpand ? undefined : 'none' }}>
-                                    <Form.Item colon={false}>
-                                        {getFieldDecorator('sellerAddressPhoneFlag', {
-                                            valuePropName: 'checked',
-                                        })(<Checkbox onChange={props?.invoiceMarkCallback} disabled={isReadOnly('sellerAddressPhoneFlag')} style={{ whiteSpace: 'nowrap' }}>是否展示</Checkbox>)}
-                                    </Form.Item>
-                                </Col>
-                            }
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='银行账号' colon={false}>
-                                    {getFieldDecorator('sellerAccount', {
-                                        rules: getRules('sellerAccount', RULES.bankAccount('销售方银行账号'))
-                                    })(<MyInput readOnly={isReadOnly('sellerAccount')} placeholder="请输入银行账号" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
-                            {(props.leqi || props.riskData?.code === 'success') &&
-                                <Col span={4} style={{ display: isExpand ? undefined : 'none' }}>
-                                    <Form.Item colon={false}>
-                                        {getFieldDecorator('sellerBankAccountFlag', {
-                                            valuePropName: 'checked',
-                                        })(<Checkbox onChange={props?.invoiceMarkCallback} disabled={isReadOnly('sellerBankAccountFlag')} style={{ whiteSpace: 'nowrap' }}>是否展示</Checkbox>)}
-                                    </Form.Item>
-                                </Col>
-                            }
-                        </Row>
-                    </Form>
-                </div>
-                <div>
-                    {'购买方信息'.split('').map(e => <span>{e}</span>)}
+        <div className={classNames("kts-invoice-operate-invoice-digtal-stakeholder", { readOnly: readOnly })} >
+            <div>
+                {'销售方信息'.split('').map(e => <span>{e}</span>)}
+                {
+                    !readOnly &&
+                    <Icon
+                        className="digtal-stakeholder-expand-button"
+                        component={isExpand ? ArrowUpSvg : ArrowDownSvg}
+                        onClick={onExpand}
+                    />
+                }
+            </div>
+            <div>
+                <div style={{ marginTop: 20 }} className='natural-person-flag' >
                     {
-                        !readOnly &&
-                        <Icon
-                            className="digtal-stakeholder-expand-button"
-                            component={isExpand ? ArrowUpSvg : ArrowDownSvg}
-                            onClick={onExpand}
-                        />
+                        props.isNaturalPerson === true &&
+                        <Form.Item colon={false}>
+                            {getFieldDecorator('naturalPersonFlag', {
+                            })(
+                                <NaturalPersonFlag readOnly={isReadOnly('naturalPersonFlag')} />
+                            )}
+                        </Form.Item>
                     }
                 </div>
-                <div>
-                    {
-                        !readOnly && props.lineCredit &&
-                        <div style={{ marginTop: 20 }} >
-                            <Tooltip trigger="click" title={props.lineCredit} >
-                                <Button type="link" style={{ padding: `0px 8px` }} >查看当前可用授信额度</Button>
-                            </Tooltip>
-                        </div>
-                    }
-
-                    <Form className="digtal-stakeholder-form" >
-                        <Row gutter={[16, 0]}>
-                            <Col span={24} >
-                                <Form.Item label='名称' colon={false}>
-                                    {getFieldDecorator('buyerName', {
-                                        rules: getRules('buyerName', RULES.companyName('购买方名称')),
-                                    })(
+                <Form className="digtal-stakeholder-form" >
+                    <Row gutter={[16, 0]}>
+                        <Col span={24} >
+                            <Form.Item label='名称' colon={false}>
+                                {getFieldDecorator('supplierName', {
+                                    rules: getRules('supplierName', RULES.companyName('销售方名称')),
+                                    // getValueFromEvent: formatCompanyName
+                                })
+                                    // (<MyInput readOnly={isReadOnly('supplierName')} placeholder="请输入名称" autoComplete="off" />)
+                                    (
                                         <BuyerNameInput
                                             myform={form}
-                                            fieldName='buyerName'
-                                            readOnly={isReadOnly('buyerName')}
+                                            fieldName='supplierName'
+                                            readOnly={isReadOnly('supplierName')}
                                             placeholder="请输入名称"
                                             autoComplete="off"
                                             suffix={
@@ -564,119 +184,194 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
                                                 />
                                             }
                                         />
-                                    )}
-                                </Form.Item>
-                            </Col>
+                                    )
+                                }
+                            </Form.Item>
+                        </Col>
 
-                            <Col span={24} >
-                                <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
-                                    {getFieldDecorator('buyerTaxId', {
-                                        rules: getRules('buyerTaxId', [{ required: !isVatNormal, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
-                                    })(
-                                        <BuyerNameInput
-                                            myform={form}
-                                            fieldName='buyerTaxId'
-                                            readOnly={isReadOnly('buyerTaxId')}
-                                            placeholder="请输入统一社会信用代码/纳税人识别号"
-                                            autoComplete="off"
-                                        />
-                                    )}
-                                </Form.Item>
-                            </Col>
+                        <Col span={24} >
+                            <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
+                                {getFieldDecorator('supplierTaxId', {
+                                    rules: getRules('supplierTaxId', [{ required: true, message: '销售方纳税人识别号必填' }, ...RULES.taxId('销售方纳税人识别号')])
+                                })
+                                    // (<MyInput readOnly={isReadOnly('supplierTaxId')} placeholder="请输入统一社会信用代码/纳税人识别号" autoComplete="off" />)
+                                    (<BuyerNameInput
+                                        myform={form}
+                                        fieldName='supplierTaxId'
+                                        readOnly={isReadOnly('supplierTaxId')}
+                                        placeholder="请输入统一社会信用代码/纳税人识别号"
+                                        autoComplete="off"
+                                    />)
+                                }
+                            </Form.Item>
+                        </Col>
 
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='购买方地址' colon={false}>
-                                    {getFieldDecorator('buyerAddress', {
-                                        rules: getRules('buyerAddress', [{ max: 100, message: '购买方地址内容超长' }])
-                                    })(<MyInput readOnly={isReadOnly('buyerAddress')} placeholder="请输入购买方地址" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='销售方地址' colon={false}>
+                                {getFieldDecorator('sellerAddress', {
+                                    rules: getRules('sellerAddress', [{ max: 300, message: '销售方地址内容超长' }])
+                                })(<MyInput readOnly={isReadOnly('sellerAddress')} placeholder="请输入销售方地址" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
 
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='电话' colon={false} className='telephone'>
-                                    {getFieldDecorator('buyerPhone', {
-                                        rules: getRules('buyerPhone', RULES.buyerTelPhone('购买方电话'))
-                                    })(<MyInput readOnly={isReadOnly('buyerPhone')} placeholder="请输入电话" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='购买方开户银行' colon={false}>
-                                    {getFieldDecorator('buyerBank', {
-                                        rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
-                                    })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入购买方开户银行" autoComplete="off" />)}
-                                </Form.Item>
-                            </Col>
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='购买方开户银行' colon={false}>
-                                    {getFieldDecorator('buyerBank', {
-                                        rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
-                                    })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入购买方开户银行" autoComplete="off" />)}
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='电话' colon={false} className='telephone' >
+                                {getFieldDecorator('sellerPhone', {
+                                    rules: getRules('sellerPhone', RULES.sellerTelPhone('销售方电话'))
+                                })(<MyInput readOnly={isReadOnly('sellerPhone')} placeholder="请输入电话" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='销售方开户银行' colon={false}>
+                                {getFieldDecorator('sellerBank', {
+                                    rules: getRules('sellerBank', RULES.bankName('销售方开户银行'))
+                                })(<MyInput readOnly={isReadOnly('sellerBank')} placeholder="请输入销售方开户银行" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+                        {(props.leqi) &&
+                            <Col span={4} style={{ display: isExpand ? undefined : 'none' }}>
+                                <Form.Item colon={false}>
+                                    {getFieldDecorator('sellerAddressPhoneFlag', {
+                                        valuePropName: 'checked',
+                                    })(<Checkbox onChange={props?.invoiceMarkCallback} disabled={isReadOnly('sellerAddressPhoneFlag')} style={{ whiteSpace: 'nowrap' }}>是否展示</Checkbox>)}
                                 </Form.Item>
                             </Col>
-
-                            <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
-                                <Form.Item label='银行账号' colon={false}>
-                                    {getFieldDecorator('buyerAccount', {
-                                        rules: getRules('buyerAccount', RULES.bankAccount('购买方银行账号'))
-                                    })(<MyInput readOnly={isReadOnly('buyerAccount')} placeholder="请输入银行账号" autoComplete="off" />)}
+                        }
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='银行账号' colon={false}>
+                                {getFieldDecorator('sellerAccount', {
+                                    rules: getRules('sellerAccount', RULES.bankAccount('销售方银行账号'))
+                                })(<MyInput readOnly={isReadOnly('sellerAccount')} placeholder="请输入银行账号" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+                        {(props.leqi || props.riskData?.code === 'success') &&
+                            <Col span={4} style={{ display: isExpand ? undefined : 'none' }}>
+                                <Form.Item colon={false}>
+                                    {getFieldDecorator('sellerBankAccountFlag', {
+                                        valuePropName: 'checked',
+                                    })(<Checkbox onChange={props?.invoiceMarkCallback} disabled={isReadOnly('sellerBankAccountFlag')} style={{ whiteSpace: 'nowrap' }}>是否展示</Checkbox>)}
                                 </Form.Item>
                             </Col>
-                            {(props.leqi || props.riskData?.code === 'success') &&
-                                <Col span={4} style={{ display: isExpand ? undefined : 'none' }}>
-                                    <Form.Item colon={false}>
-                                        {getFieldDecorator('buyerBankAccountFlag', {
-                                            valuePropName: 'checked',
-                                        })(<Checkbox onChange={props?.invoiceMarkCallback} disabled={isReadOnly('buyerBankAccountFlag')} style={{ whiteSpace: 'nowrap' }}>是否展示</Checkbox>)}
-                                    </Form.Item>
-                                </Col>
-                            }
-                        </Row>
-                    </Form>
-                </div>
-
+                        }
+                    </Row>
+                </Form>
             </div>
-            <div className='kts-invoice-operate-invoice-digtal-payinfo'>
-                <Form className="digtal-stakeholder-form" style={{ width: '100%' }}>
+            <div>
+                {'购买方信息'.split('').map(e => <span>{e}</span>)}
+                {
+                    !readOnly &&
+                    <Icon
+                        className="digtal-stakeholder-expand-button"
+                        component={isExpand ? ArrowUpSvg : ArrowDownSvg}
+                        onClick={onExpand}
+                    />
+                }
+            </div>
+            <div>
+                {
+                    !readOnly && props.lineCredit &&
+                    <div style={{ marginTop: 20 }} >
+                        <Tooltip trigger="click" title={props.lineCredit} >
+                            <Button type="link" style={{ padding: `0px 8px` }} >查看当前可用授信额度</Button>
+                        </Tooltip>
+                    </div>
+                }
+
+                <Form className="digtal-stakeholder-form" >
                     <Row gutter={[16, 0]}>
-                        <Col span={5} >
-                            <Form.Item label='自然人销售方补充信息' colon={false}  >
+                        <Col span={24} >
+                            <Form.Item label='名称' colon={false}>
+                                {getFieldDecorator('buyerName', {
+                                    rules: getRules('buyerName', RULES.companyName('购买方名称')),
+                                })(
+                                    <BuyerNameInput
+                                        myform={form}
+                                        fieldName='buyerName'
+                                        readOnly={isReadOnly('buyerName')}
+                                        placeholder="请输入名称"
+                                        autoComplete="off"
+                                        suffix={
+                                            isShowImportButton === true &&
+                                            <Button
+                                                type='link'
+                                                style={{ padding: 0, width: 20, height: '100%' }}
+                                                icon={<Icon component={PlusSvg} />}
+                                                onClick={() => { onClickImportButton && onClickImportButton(controller) }}
+                                            />
+                                        }
+                                    />
+                                )}
+                            </Form.Item>
+                        </Col>
+
+                        <Col span={24} >
+                            <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
+                                {getFieldDecorator('buyerTaxId', {
+                                    rules: getRules('buyerTaxId', [{ required: !isVatNormal, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
+                                })(
+                                    <BuyerNameInput
+                                        myform={form}
+                                        fieldName='buyerTaxId'
+                                        readOnly={isReadOnly('buyerTaxId')}
+                                        placeholder="请输入统一社会信用代码/纳税人识别号"
+                                        autoComplete="off"
+                                    />
+                                )}
+                            </Form.Item>
+                        </Col>
 
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='购买方地址' colon={false}>
+                                {getFieldDecorator('buyerAddress', {
+                                    rules: getRules('buyerAddress', [{ max: 100, message: '购买方地址内容超长' }])
+                                })(<MyInput readOnly={isReadOnly('buyerAddress')} placeholder="请输入购买方地址" autoComplete="off" />)}
                             </Form.Item>
                         </Col>
-                        {/* <label>自然人销售方补充信息</label> */}
-                        <Col span={6} >
-                            <Form.Item label='证件类型' colon={false}  >
-                                {getFieldDecorator('certificateType', {
-                                    rules: [{ required: true, message: '数据必填' }]
-                                })(<CardSelect onChange={onChangeType} readOnly={isReadOnly('certificateType')} placeholder="数据必填" autoComplete="off" />)}
+
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='电话' colon={false} className='telephone'>
+                                {getFieldDecorator('buyerPhone', {
+                                    rules: getRules('buyerPhone', RULES.buyerTelPhone('购买方电话'))
+                                })(<MyInput readOnly={isReadOnly('buyerPhone')} placeholder="请输入电话" autoComplete="off" />)}
                             </Form.Item>
                         </Col>
-                        <Col span={7} >
-                            <Form.Item label='证件号码' colon={false} validateStatus={validateStatus} help={errorInfo}>
-                                {getFieldDecorator('certificateNumber', {
-                                    rules: [{ required: true, message: '数据必填' }, { max: 30, message: `内容超长` }, { validator: validateIDCode },]
-                                })(<MyInput readOnly={isReadOnly('certificateNumber')} placeholder="数据必填" autoComplete="off" />)}
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='购买方开户银行' colon={false}>
+                                {getFieldDecorator('buyerBank', {
+                                    rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
+                                })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入购买方开户银行" autoComplete="off" />)}
                             </Form.Item>
                         </Col>
-                        <Col span={6} >
-                            <Form.Item label='国籍(或地区)' colon={false} validateStatus={nation} help={nationInfo}>
-                                {getFieldDecorator('nationality', {
-                                    rules: [{ required: true, message: '数据必填' }, { validator: validateNationality }]
-                                })(<NationalSelect showSearch={true}
-                                    optionFilterProp="children"
-                                    filterOption={(input: any, option: any) => {
-                                        if (option) {
-                                            return option.label?.indexOf(input) >= 0;
-                                        }
-                                        return false;
-                                    }} readOnly={isReadOnly('nationality')} placeholder="数据必填" autoComplete="off" />)}
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='购买方开户银行' colon={false}>
+                                {getFieldDecorator('buyerBank', {
+                                    rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
+                                })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入购买方开户银行" autoComplete="off" />)}
                             </Form.Item>
                         </Col>
+
+                        <Col span={10 + leqispanW} style={{ display: isExpand ? undefined : 'none' }} >
+                            <Form.Item label='银行账号' colon={false}>
+                                {getFieldDecorator('buyerAccount', {
+                                    rules: getRules('buyerAccount', RULES.bankAccount('购买方银行账号'))
+                                })(<MyInput readOnly={isReadOnly('buyerAccount')} placeholder="请输入银行账号" autoComplete="off" />)}
+                            </Form.Item>
+                        </Col>
+                        {(props.leqi || props.riskData?.code === 'success') &&
+                            <Col span={4} style={{ display: isExpand ? undefined : 'none' }}>
+                                <Form.Item colon={false}>
+                                    {getFieldDecorator('buyerBankAccountFlag', {
+                                        valuePropName: 'checked',
+                                    })(<Checkbox onChange={props?.invoiceMarkCallback} disabled={isReadOnly('buyerBankAccountFlag')} style={{ whiteSpace: 'nowrap' }}>是否展示</Checkbox>)}
+                                </Form.Item>
+                            </Col>
+                        }
                     </Row>
                 </Form>
-
             </div>
-        </>
+
+        </div>
     )
 })
 
@@ -783,307 +478,7 @@ class MyInput extends React.Component<InputProps> {
         }
     }
 }
-class CardSelect extends React.Component<any> {
-
-    render() {
-        const props = this.props;
-        const option = [
-
-            { label: "居民身份证", value: "201" },
-            { label: "外国护照", value: "208" },
-            { label: "港澳居民来往内地通行证", value: "210" },
-
-            { label: "台湾居民来往大陆通行证", value: "213" },
-
-            { label: "中国护照", value: "227" },
-
-            { label: "外国人永久居留身份证", value: "233" },
-
-            { label: "中华人民共和国港澳居民居住证", value: "237" },
-            { label: "中华人民共和国台湾居民居住证", value: "238" },
-
-        ];
-        function getLable(value?: string) {
-
-            return option.find(e => e.value === value)?.label || '';
-
-        }
-        if (props.readOnly) {
-            return <span className='digtal-stakeholder-form-text'>{getLable(props.value)}</span>
-        } else {
-            return <Select style={{ width: 200 }} options={option} {...props} />
-        }
-    }
-}
-class NationalSelect extends React.Component<any> {
-
-    render() {
-        const props = this.props;
-        const option = [
-            { value: "156", label: "中国" },
-            { value: "344", label: "中国香港" },
-            { value: "158", label: "中国台湾" },
-            { value: "446", label: "中国澳门" },
-
-            { value: "004", label: "阿富汗" },
-            { value: "008", label: "阿尔巴尼亚" },
-            { value: "010", label: "南极洲" },
-            { value: "012", label: "阿尔及利亚" },
-            { value: "016", label: "美属萨摩亚" },
-            { value: "020", label: "安道尔" },
-            { value: "024", label: "安哥拉" },
-            { value: "028", label: "安提瓜和巴布达" },
-            { value: "031", label: "阿塞拜疆" },
-            { value: "032", label: "阿根廷" },
-            { value: "036", label: "澳大利亚" },
-            { value: "040", label: "奥地利" },
-            { value: "044", label: "巴哈马" },
-            { value: "048", label: "巴林" },
-            { value: "050", label: "孟加拉国" },
-            { value: "051", label: "亚美尼亚" },
-            { value: "052", label: "巴巴多斯" },
-            { value: "056", label: "比利时" },
-            { value: "060", label: "百慕大" },
-            { value: "064", label: "不丹" },
-            { value: "068", label: "玻利维亚" },
-            { value: "070", label: "波黑" },
-            { value: "072", label: "博茨瓦纳" },
-            { value: "074", label: "布维岛" },
-            { value: "076", label: "巴西" },
-            { value: "084", label: "伯利兹" },
-            { value: "086", label: "英属印度洋领地" },
-            { value: "090", label: "所罗门群岛" },
-            { value: "092", label: "英属维尔京群岛" },
-            { value: "096", label: "文莱" },
-            { value: "100", label: "保加利亚" },
-            { value: "104", label: "缅甸" },
-            { value: "108", label: "布隆迪" },
-            { value: "112", label: "白俄罗斯" },
-            { value: "116", label: "柬埔寨" },
-            { value: "120", label: "喀麦隆" },
-            { value: "124", label: "加拿大" },
-            { value: "132", label: "佛得角" },
-            { value: "136", label: "开曼群岛" },
-            { value: "140", label: "中非" },
-            { value: "144", label: "斯里兰卡" },
-            { value: "148", label: "乍得" },
-            { value: "152", label: "智利" },
 
-            { value: "162", label: "圣诞岛" },
-            { value: "166", label: "科科斯（基林）群岛" },
-            { value: "170", label: "哥伦比亚" },
-            { value: "174", label: "科摩罗" },
-            { value: "175", label: "马约特" },
-            { value: "178", label: "刚果（布）" },
-            { value: "180", label: "刚果（金）" },
-            { value: "184", label: "库克群岛" },
-            { value: "188", label: "哥斯达黎加" },
-            { value: "191", label: "克罗地亚" },
-            { value: "192", label: "古巴" },
-            { value: "196", label: "塞浦路斯" },
-            { value: "203", label: "捷克" },
-            { value: "204", label: "贝宁" },
-            { value: "208", label: "丹麦" },
-            { value: "212", label: "多米尼克" },
-            { value: "214", label: "多米尼加" },
-            { value: "218", label: "厄瓜多尔" },
-            { value: "222", label: "萨尔瓦多" },
-            { value: "226", label: "赤道几内亚" },
-            { value: "231", label: "埃塞俄比亚" },
-            { value: "232", label: "厄立特里亚" },
-            { value: "233", label: "爱沙尼亚" },
-            { value: "234", label: "法罗群岛" },
-            { value: "238", label: "福克兰群岛" },
-            { value: "239", label: "南乔治亚岛和南桑德韦奇岛" },
-            { value: "242", label: "斐济" },
-            { value: "246", label: "芬兰" },
-            { value: "250", label: "法国" },
-            { value: "254", label: "法属圭亚那" },
-            { value: "258", label: "法属波利尼西亚" },
-            { value: "260", label: "法属南部领地" },
-            { value: "262", label: "吉布提" },
-            { value: "266", label: "加蓬" },
-            { value: "268", label: "格鲁吉亚" },
-            { value: "270", label: "冈比亚" },
-            { value: "275", label: "巴勒斯坦" },
-            { value: "276", label: "德国" },
-            { value: "288", label: "加纳" },
-            { value: "292", label: "直布罗陀" },
-            { value: "296", label: "基里巴斯" },
-            { value: "300", label: "希腊" },
-            { value: "304", label: "格陵兰" },
-            { value: "308", label: "格林纳达" },
-            { value: "312", label: "瓜德罗普" },
-            { value: "316", label: "关岛" },
-            { value: "320", label: "危地马拉" },
-            { value: "324", label: "几内亚" },
-            { value: "328", label: "圭亚那" },
-            { value: "332", label: "海地" },
-            { value: "334", label: "赫德岛和麦克唐纳岛" },
-            { value: "336", label: "梵蒂冈" },
-            { value: "340", label: "洪都拉斯" },
-
-            { value: "348", label: "匈牙利" },
-            { value: "352", label: "冰岛" },
-            { value: "356", label: "印度" },
-            { value: "360", label: "印度尼西亚" },
-            { value: "364", label: "伊朗" },
-            { value: "368", label: "伊拉克" },
-            { value: "372", label: "爱尔兰" },
-            { value: "376", label: "以色列" },
-            { value: "380", label: "意大利" },
-            { value: "384", label: "科特迪瓦" },
-            { value: "388", label: "牙买加" },
-            { value: "392", label: "日本" },
-            { value: "398", label: "哈萨克斯坦" },
-            { value: "400", label: "约旦" },
-            { value: "404", label: "肯尼亚" },
-            { value: "408", label: "朝鲜" },
-            { value: "410", label: "韩国" },
-            { value: "414", label: "科威特" },
-            { value: "417", label: "吉尔吉斯斯坦" },
-            { value: "418", label: "老挝" },
-            { value: "422", label: "黎巴嫩" },
-            { value: "426", label: "莱索托" },
-            { value: "428", label: "拉脱维亚" },
-            { value: "430", label: "利比里亚" },
-            { value: "434", label: "利比亚" },
-            { value: "438", label: "列支敦士登" },
-            { value: "440", label: "立陶宛" },
-            { value: "442", label: "卢森堡" },
-
-            { value: "450", label: "马达加斯加" },
-            { value: "454", label: "马拉维" },
-            { value: "458", label: "马来西亚" },
-            { value: "462", label: "马尔代夫" },
-            { value: "466", label: "马里" },
-            { value: "470", label: "马耳他" },
-            { value: "474", label: "马提尼克" },
-            { value: "478", label: "毛里塔尼亚" },
-            { value: "480", label: "毛里求斯" },
-            { value: "484", label: "墨西哥" },
-            { value: "492", label: "摩纳哥" },
-            { value: "496", label: "蒙古" },
-            { value: "498", label: "摩尔多瓦" },
-            { value: "499", label: "黑山" },
-            { value: "500", label: "蒙特塞拉特" },
-            { value: "504", label: "摩洛哥" },
-            { value: "508", label: "莫桑比克" },
-            { value: "512", label: "阿曼" },
-            { value: "516", label: "纳米比亚" },
-            { value: "520", label: "瑙鲁" },
-            { value: "524", label: "尼泊尔" },
-            { value: "528", label: "荷兰" },
-            { value: "530", label: "荷属安的列斯" },
-            { value: "533", label: "阿鲁巴" },
-            { value: "540", label: "新喀里多尼亚" },
-            { value: "548", label: "瓦努阿图" },
-            { value: "554", label: "新西兰" },
-            { value: "558", label: "尼加拉瓜" },
-            { value: "562", label: "尼日尔" },
-            { value: "566", label: "尼日利亚" },
-            { value: "570", label: "纽埃" },
-            { value: "574", label: "诺福克岛" },
-            { value: "578", label: "挪威" },
-            { value: "580", label: "北马里亚纳" },
-            { value: "581", label: "美国本土外小岛屿" },
-            { value: "583", label: "密克罗尼西亚联邦" },
-            { value: "584", label: "马绍尔群岛" },
-            { value: "585", label: "帕劳" },
-            { value: "586", label: "巴基斯坦" },
-            { value: "591", label: "巴拿马" },
-            { value: "598", label: "巴布亚新几内亚" },
-            { value: "600", label: "巴拉圭" },
-            { value: "604", label: "秘鲁" },
-            { value: "608", label: "菲律宾" },
-            { value: "612", label: "皮特凯恩" },
-            { value: "616", label: "波兰" },
-            { value: "620", label: "葡萄牙" },
-            { value: "624", label: "几内亚比绍" },
-            { value: "626", label: "东帝汶" },
-            { value: "630", label: "波多黎各" },
-            { value: "634", label: "卡塔尔" },
-            { value: "638", label: "留尼汪" },
-            { value: "642", label: "罗马尼亚" },
-            { value: "643", label: "俄罗斯联邦" },
-            { value: "646", label: "卢旺达" },
-            { value: "654", label: "圣赫勒拿" },
-            { value: "659", label: "圣基茨和尼维斯" },
-            { value: "660", label: "安圭拉" },
-            { value: "662", label: "圣卢西亚" },
-            { value: "666", label: "圣皮埃尔和密克隆" },
-            { value: "670", label: "圣文森特和格林纳丁斯" },
-            { value: "674", label: "圣马力诺" },
-            { value: "678", label: "圣多美和普林西比" },
-            { value: "682", label: "沙特阿拉伯" },
-            { value: "686", label: "塞内加尔" },
-            { value: "688", label: "塞尔维亚" },
-            { value: "690", label: "塞舌尔" },
-            { value: "694", label: "塞拉利昂" },
-            { value: "702", label: "新加坡" },
-            { value: "703", label: "斯洛伐克" },
-            { value: "704", label: "越南" },
-            { value: "705", label: "斯洛文尼亚" },
-            { value: "706", label: "索马里" },
-            { value: "710", label: "南非" },
-            { value: "716", label: "津巴布韦" },
-            { value: "724", label: "西班牙" },
-            { value: "728", label: "南苏丹" },
-            { value: "732", label: "西撒哈拉" },
-            { value: "736", label: "苏丹" },
-            { value: "740", label: "苏里南" },
-            { value: "744", label: "斯瓦尔巴岛和扬马延岛" },
-            { value: "748", label: "斯威士兰" },
-            { value: "752", label: "瑞典" },
-            { value: "756", label: "瑞士" },
-            { value: "760", label: "叙利亚" },
-            { value: "762", label: "塔吉克斯坦" },
-            { value: "764", label: "泰国" },
-            { value: "768", label: "多哥" },
-            { value: "772", label: "托克劳" },
-            { value: "776", label: "汤加" },
-            { value: "780", label: "特立尼达和多巴哥" },
-            { value: "784", label: "阿联酋" },
-            { value: "788", label: "突尼斯" },
-            { value: "792", label: "土耳其" },
-            { value: "795", label: "土库曼斯坦" },
-            { value: "796", label: "特克斯和凯科斯群岛" },
-            { value: "798", label: "图瓦卢" },
-            { value: "800", label: "乌干达" },
-            { value: "804", label: "乌克兰" },
-            { value: "807", label: "前南马其顿" },
-            { value: "818", label: "埃及" },
-            { value: "826", label: "英国" },
-            { value: "831", label: "根西岛" },
-            { value: "832", label: "泽西岛" },
-            { value: "833", label: "马恩岛" },
-            { value: "834", label: "坦桑尼亚" },
-            { value: "840", label: "美国" },
-            { value: "850", label: "美属维尔京群岛" },
-            { value: "854", label: "布基纳法索" },
-            { value: "858", label: "乌拉圭" },
-            { value: "860", label: "乌兹别克斯坦" },
-            { value: "862", label: "委内瑞拉" },
-            { value: "876", label: "瓦利斯和富图纳" },
-            { value: "882", label: "萨摩亚" },
-            { value: "887", label: "也门" },
-            { value: "891", label: "南斯拉夫" },
-            { value: "894", label: "赞比亚" },
-            { value: "A00", label: "科索沃" }
-        ];
-
-        function getLable(value?: string) {
-
-            return option.find(e => e.value === value)?.label || '';
-
-        }
-        if (props.readOnly) {
-            return <span className='digtal-stakeholder-form-text'>{getLable(props.value)}</span>
-        } else {
-            return <Select style={{ width: 100 }} options={option} {...props} />
-        }
-    }
-}
 class Discontinue {
 
     private static timer: any;