kts-component-invoice-operate 3.2.244 → 3.2.246

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

@@ -1,1096 +1,1102 @@
-
-import React, { useCallback } 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 { 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';
-import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
-import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
-import { ReactComponent as PlusSvg } from './svg/plus.svg'
-import InvoiceController from "../../../InvoiceController";
-import Invoice from "../../..";
-import './index.less';
-import classNames from 'classnames';
-
-const RULES = {
-    companyName: (label: string) => [
-        { required: true, message: `${label}必填` },
-        { max: 100, message: `${label}内容超长` }
-    ],
-    taxId: (label: string) => [
-        { max: 20, message: `${label}内容超长` },
-        { pattern: /^([a-zA-Z0-9])*$/g, message: `${label}仅能数字、英文` }
-    ],
-    buyerTelPhone: (label: string) => [
-        { required: true, message: `${label}必填` },
-        { max: 100, message: `${label}内容超长` },
-        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
-    ],
-    sellerTelPhone: (label: string) => [
-
-        { max: 100, message: `${label}内容超长` },
-        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
-    ],
-    bankName: (label: string) => [
-        { max: 100, message: `${label}内容超长` }
-    ],
-    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) => {
-    const value = e?.target?.value;
-    if (value) {
-        return value.replace('(', '（').replace(')', '）').replace(' ', '');
-    }
-}
-
-export interface IStakeholder {
-
-    /** 是否显示导入按钮 */
-    isShowImportButton?: boolean;
-
-    /** 点击了 */
-    onClickImportButton?: (e: InvoiceController) => void
-
-    /** 查看当前可用授信额度 */
-    lineCredit?: React.ReactNode;
-
-    /** 票种类型 */
-    isVatNormal?: boolean;
-
-    /** 是否可以选择自然人 */
-    isNaturalPerson?: boolean;
-
-    /** 是否展开 */
-    isExpand?: boolean;
-
-    leqi?: boolean;
-
-    riskData?: any;
-
-    invoiceMarkCallback?: (value: any) => void;
-}
-
-/** 农产品干系人 */
-export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
-
-    const { form, isShowImportButton, onClickImportButton, isVatNormal = false } = props;
-
-    const [isExpand, setExpand] = React.useState(typeof props.isExpand === 'boolean' ? props.isExpand : true);
-
-    const { getFieldDecorator } = form;
-
-    const controller = Invoice.useInvoiceController();
-
-    const model = controller.useMemo(s => s.model, []);
-
-    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) {
-            return 0;
-        } else {
-            return 2;
-        }
-    }, [props.leqi, props.riskData]);
-    /** 直连 */
-    const riskspanW = React.useMemo(() => {
-        if (props.riskData?.code === 'success') {
-            return 0;
-        } else {
-            return 2;
-        }
-    }, [props.leqi, props.riskData]);
-
-    const readOnly = React.useMemo(() => {
-        if (model === 'readOnly') return true;
-        if (model === 'prefab') return true;
-        return false;
-    }, [model]);
-
-    const onExpand = React.useCallback(() => { setExpand(e => !e) }, []);
-
-    const isReadOnly = React.useCallback(field => readOnly || disableds.indexOf(field) >= 0, [disableds, readOnly]);
-
-    const getRules = React.useCallback((field, defaultRules) => {
-        if (isReadOnly(field)) return [];
-        return rulesMap[field] || defaultRules;
-    }, [rulesMap, isReadOnly, isReadOnly]);
-
-    controller.useForm('stakeholder', form);
-
-    // props.isExpand 变化的时候更新
-    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>)}
-                    {
-                        !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={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>
-
-                            <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" />)}
-                                </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>
-            <div className='kts-invoice-operate-invoice-digtal-payinfo'>
-                <Form className="digtal-stakeholder-form" style={{ width: '100%' }}>
-                    <Row gutter={[16, 0]}>
-                        <Col span={5} >
-                            <Form.Item label='自然人销售方补充信息' colon={false}  >
-
-                            </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" />)}
-                            </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" />)}
-                            </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" />)}
-                            </Form.Item>
-                        </Col>
-                    </Row>
-                </Form>
-
-            </div>
-        </>
-    )
-})
-
-function NaturalPersonFlag(props: {
-    // NATURAL("自然人"),  COMPANY("非自然人");
-    value?: 'COMPANY' | 'NATURAL',
-    onChange?: (e: 'COMPANY' | 'NATURAL') => void
-    readOnly?: boolean;
-}) {
-
-    const [value, setValue] = React.useState(props.value || 'COMPANY');
-
-    const onChange = React.useCallback((e: CheckboxChangeEvent) => {
-        if (props.readOnly) return;
-        setValue(e.target.checked ? 'NATURAL' : 'COMPANY');
-        props.onChange && props.onChange(e.target.checked ? 'NATURAL' : 'COMPANY');
-    }, [props.onChange, props.readOnly])
-
-    React.useEffect(() => {
-        setValue(props.value || 'COMPANY')
-    }, [props.value])
-
-    return (
-        <Checkbox
-            disabled={props.readOnly}
-            checked={value === 'NATURAL'}
-            onChange={onChange}
-        >
-            是否开票给自然人
-        </Checkbox>
-    )
-}
-
-function BuyerNameInput(props: InputProps & { fieldName: string; myform: WrappedFormUtils<any> }) {
-
-    const { fieldName, myform: form } = props;
-
-    const controller = Invoice.useInvoiceController();
-
-    const rootElement = controller.useMemo(s => s.rootElement, []);
-
-    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));
-                }
-            } else if (fieldName === 'supplierName') {
-                if (autoComplete.onSupplierNameSearch) {
-                    setOptions(await autoComplete.onSupplierNameSearch(searchText));
-                }
-            } else if (fieldName === 'supplierTaxId') {
-                if (autoComplete.onSupplierTaxIdSearch) {
-                    setOptions(await autoComplete.onSupplierTaxIdSearch(searchText));
-                }
-            }
-
-        } catch (error) {
-            setOptions([]);
-            throw error;
-        }
-    }, [autoComplete.onBuyerNameSearch, fieldName])
-
-    if (props.readOnly) return <span className='digtal-stakeholder-form-text'>{props.value}</span>;
-
-    return (
-        <AutoComplete
-            onSearch={onSearch}
-            options={options.map(e => ({ value: e[fieldName] }))}
-            onChange={onChangeAutoComplete}
-            value={props.value}
-            getPopupContainer={() => rootElement || document.body}
-            style={{ width: '100%' }}
-        >
-            <Input {...props} style={{ width: '100%', ...props.style }} />
-        </AutoComplete>
-    )
-}
-
-class MyInput extends React.Component<InputProps> {
-    render() {
-        const props = this.props;
-        if (props.readOnly) {
-            return <span className='digtal-stakeholder-form-text'>{props.value}</span>
-        } else {
-            return <Input {...props} />
-        }
-    }
-}
-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;
-
-    static start = (interval = 200) => new Promise<void>(resolve => {
-        clearTimeout(Discontinue.timer);
-        Discontinue.timer = setTimeout(resolve, interval);
-    })
-}
-
+
+import React, { useCallback } 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 { 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';
+import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
+import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
+import { ReactComponent as PlusSvg } from './svg/plus.svg'
+import InvoiceController from "../../../InvoiceController";
+import Invoice from "../../..";
+import './index.less';
+import classNames from 'classnames';
+
+const RULES = {
+    companyName: (label: string) => [
+        { required: true, message: `${label}必填` },
+        { max: 100, message: `${label}内容超长` }
+    ],
+    taxId: (label: string) => [
+        { max: 20, message: `${label}内容超长` },
+        { pattern: /^([a-zA-Z0-9])*$/g, message: `${label}仅能数字、英文` }
+    ],
+    buyerTelPhone: (label: string) => [
+        { required: true, message: `${label}必填` },
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
+    ],
+    sellerTelPhone: (label: string) => [
+
+        { max: 100, message: `${label}内容超长` },
+        { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
+    ],
+    bankName: (label: string) => [
+        { max: 100, message: `${label}内容超长` }
+    ],
+    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) => {
+    const value = e?.target?.value;
+    if (value) {
+        return value.replace('(', '（').replace(')', '）').replace(' ', '');
+    }
+}
+
+export interface IStakeholder {
+
+    /** 是否显示导入按钮 */
+    isShowImportButton?: boolean;
+
+    /** 点击了 */
+    onClickImportButton?: (e: InvoiceController) => void
+
+    /** 查看当前可用授信额度 */
+    lineCredit?: React.ReactNode;
+
+    /** 票种类型 */
+    isVatNormal?: boolean;
+
+    /** 是否可以选择自然人 */
+    isNaturalPerson?: boolean;
+
+    /** 是否显示自然人销售方补充信息 */
+    isShowNaturalPersonInfo?: boolean;
+
+    /** 是否展开 */
+    isExpand?: boolean;
+
+    leqi?: boolean;
+
+    riskData?: any;
+
+    invoiceMarkCallback?: (value: any) => void;
+}
+
+/** 农产品干系人 */
+export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
+
+    const { form, isShowImportButton, onClickImportButton, isVatNormal = false, isShowNaturalPersonInfo = true } = props;
+
+    const [isExpand, setExpand] = React.useState(typeof props.isExpand === 'boolean' ? props.isExpand : true);
+
+    const { getFieldDecorator } = form;
+
+    const controller = Invoice.useInvoiceController();
+
+    const model = controller.useMemo(s => s.model, []);
+
+    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) {
+            return 0;
+        } else {
+            return 2;
+        }
+    }, [props.leqi, props.riskData]);
+    /** 直连 */
+    const riskspanW = React.useMemo(() => {
+        if (props.riskData?.code === 'success') {
+            return 0;
+        } else {
+            return 2;
+        }
+    }, [props.leqi, props.riskData]);
+
+    const readOnly = React.useMemo(() => {
+        if (model === 'readOnly') return true;
+        if (model === 'prefab') return true;
+        return false;
+    }, [model]);
+
+    const onExpand = React.useCallback(() => { setExpand(e => !e) }, []);
+
+    const isReadOnly = React.useCallback(field => readOnly || disableds.indexOf(field) >= 0, [disableds, readOnly]);
+
+    const getRules = React.useCallback((field, defaultRules) => {
+        if (isReadOnly(field)) return [];
+        return rulesMap[field] || defaultRules;
+    }, [rulesMap, isReadOnly, isReadOnly]);
+
+    controller.useForm('stakeholder', form);
+
+    // props.isExpand 变化的时候更新
+    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>)}
+                    {
+                        !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={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>
+
+                            <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" />)}
+                                </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>
+
+            {
+                isShowNaturalPersonInfo &&
+                <div className='kts-invoice-operate-invoice-digtal-payinfo'>
+                    <Form className="digtal-stakeholder-form" style={{ width: '100%' }}>
+                        <Row gutter={[16, 0]}>
+                            <Col span={5} >
+                                <Form.Item label='自然人销售方补充信息' colon={false}  >
+
+                                </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" />)}
+                                </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" />)}
+                                </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" />)}
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Form>
+                </div>
+            }
+        </>
+    )
+})
+
+function NaturalPersonFlag(props: {
+    // NATURAL("自然人"),  COMPANY("非自然人");
+    value?: 'COMPANY' | 'NATURAL',
+    onChange?: (e: 'COMPANY' | 'NATURAL') => void
+    readOnly?: boolean;
+}) {
+
+    const [value, setValue] = React.useState(props.value || 'COMPANY');
+
+    const onChange = React.useCallback((e: CheckboxChangeEvent) => {
+        if (props.readOnly) return;
+        setValue(e.target.checked ? 'NATURAL' : 'COMPANY');
+        props.onChange && props.onChange(e.target.checked ? 'NATURAL' : 'COMPANY');
+    }, [props.onChange, props.readOnly])
+
+    React.useEffect(() => {
+        setValue(props.value || 'COMPANY')
+    }, [props.value])
+
+    return (
+        <Checkbox
+            disabled={props.readOnly}
+            checked={value === 'NATURAL'}
+            onChange={onChange}
+        >
+            是否开票给自然人
+        </Checkbox>
+    )
+}
+
+function BuyerNameInput(props: InputProps & { fieldName: string; myform: WrappedFormUtils<any> }) {
+
+    const { fieldName, myform: form } = props;
+
+    const controller = Invoice.useInvoiceController();
+
+    const rootElement = controller.useMemo(s => s.rootElement, []);
+
+    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));
+                }
+            } else if (fieldName === 'supplierName') {
+                if (autoComplete.onSupplierNameSearch) {
+                    setOptions(await autoComplete.onSupplierNameSearch(searchText));
+                }
+            } else if (fieldName === 'supplierTaxId') {
+                if (autoComplete.onSupplierTaxIdSearch) {
+                    setOptions(await autoComplete.onSupplierTaxIdSearch(searchText));
+                }
+            }
+
+        } catch (error) {
+            setOptions([]);
+            throw error;
+        }
+    }, [autoComplete.onBuyerNameSearch, fieldName])
+
+    if (props.readOnly) return <span className='digtal-stakeholder-form-text'>{props.value}</span>;
+
+    return (
+        <AutoComplete
+            onSearch={onSearch}
+            options={options.map(e => ({ value: e[fieldName] }))}
+            onChange={onChangeAutoComplete}
+            value={props.value}
+            getPopupContainer={() => rootElement || document.body}
+            style={{ width: '100%' }}
+        >
+            <Input {...props} style={{ width: '100%', ...props.style }} />
+        </AutoComplete>
+    )
+}
+
+class MyInput extends React.Component<InputProps> {
+    render() {
+        const props = this.props;
+        if (props.readOnly) {
+            return <span className='digtal-stakeholder-form-text'>{props.value}</span>
+        } else {
+            return <Input {...props} />
+        }
+    }
+}
+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;
+
+    static start = (interval = 200) => new Promise<void>(resolve => {
+        clearTimeout(Discontinue.timer);
+        Discontinue.timer = setTimeout(resolve, interval);
+    })
+}
+