kts-component-invoice-operate 3.2.236 → 3.2.238-fuling

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

@@ -1,11 +1,11 @@
 
-import React, { useEffect } from "react";
+import React from "react";
 import { decorator } from 'grey-react-box';
-import { Form, message } from 'kts-components-antd-x3';
+import { Form } from 'kts-components-antd-x3';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
 import Invoice from '../../..';
 import './index.less';
-import { Button, Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
+import { Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
 import moment from "moment";
 
 const { RangePicker } = DatePicker;
@@ -36,219 +36,110 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
 
     const readOnly = React.useMemo(() => model === 'readOnly', [model]);
 
-    const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
-    //outcome-104 任务 https://wiki.dev.kingxunlian.com/pages/viewpage.action?pageId=180355189
-    //商品和服务税收分类合并编码为“3040502020200000000”时，视为停车费业务，针对停车费业务，蓝字发票增加以下判断：
-    // 单位必须为“平方米”；
-    // 项目名称必须为“车辆停放服务”；
-    // 车牌号必填，最多支持填写3个车牌号；除该场景车牌号必须为空；
-    // 租赁期起止格式必须为“yyyy-MM-dd HH:mm（租赁期起）”+“空格”+“yyyy-MM-dd HH:mm（租赁期止）。
-    const isParkFee = React.useCallback((taxClassificationCode?: string) => {
-        if (taxClassificationCode === '3040502020200000000') {
-            return true
-        } else {
-            return false;
-        }
-    }, [])
-
-    const indexRef = React.useRef<any>([]);
-    useEffect(() => {
-        const dd = goodsList?.reduce((acc: any, cur: any) => {
-            if (cur.lineAttribute !== 1) {
-                acc.push(cur.$index)
-            }
-            return acc
-        }, [])
-        indexRef.current = dd;
-    }, [goodsList, indexRef])
     // 注册 form
-
     controller.useForm('realEstateInfo', form);
-    const getList = () => {
-        const decrease = indexRef.current.length > goodsList.length
-        if (decrease) {
-            //已删行列表
-            const diff = indexRef.current.filter((item: any) => !goodsList.find(i => i.$index === item));
-
-            const formData: any[] = form.getFieldValue('realEstateDataDto');
-            if (Array.isArray(formData) && diff.length > 0) {
 
-                const newForm = formData?.filter(item => !diff.find((i: any) => i === item.$index));
-
-                form.setFieldsValue({
-                    realEstateDataDto: newForm
-                });
-            } else {
-                form.setFieldsValue({
-                    realEstateDataDto: undefined
-                });
-            }
-        }
-        return goodsList.filter(item => item.lineAttribute !== 1).map((item, index) => {
-            if (item.lineAttribute !== 1) {
-                const isParkFeeItem = isParkFee(item.taxClassificationCode)
-                return <Row gutter={[17, 0]} >
-                    <Col span={6} >
-                        <Form.Item style={{ display: 'none' }}>
-                            {getFieldDecorator(`realEstateDataDto[${index}].$index`, {
-                                initialValue: item.$index,
-                            })(
-                                <Input />
-                            )}
-                        </Form.Item>
-                        <Form.Item label='不动产地址'>
-                            {getFieldDecorator(`realEstateDataDto[${index}].realEstateAddress`, {
-                                rules: readOnly ? [] : [{ required: true, message: '请选择不动产地址' }]
-                            })(
-                                readOnly
-                                    ? (<MyArrString />)
-                                    : (<Cascader
-                                        style={{ width: '100%' }}
-                                        options={props.realEstateAddressOptions}
-                                        fieldNames={props.realEstateAddressFieldNames}
-                                        placeholder="请选择省市区县"
-                                    />)
-                            )}
-                        </Form.Item>
-                    </Col>
-                    <Col span={6} >
-                        <Form.Item label='详细地址' >
-                            {getFieldDecorator(`realEstateDataDto[${index}].realEstateDetailedAddress`, {
-                                rules: readOnly ? [] : [
-                                    { required: true, message: '请输入详细地址' },
-                                    { max: 120, message: '详细地址最多120个字符' },
-                                    {
-                                        validator: async (_, value, callback) => {
-                                            const pattern = /街|路|村|乡|镇|道|巷|号/;
-                                            if (pattern.test(value)) {
-                                                callback()
-                                            } else {
-                                                callback('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词')
-                                            }
-                                        }
-                                    }
-                                ]
-                            })(
-                                readOnly
-                                    ? <MyDiv />
-                                    : <Input autoComplete='off' placeholder="请输入详细地址" />
-                            )}
-                        </Form.Item>
-                    </Col>
-                    {!isParkFeeItem &&
-                        <Col span={6} >
-                            <Form.Item label='租赁期起止' >
-                                {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
-                                    rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
-                                })(
-                                    readOnly
-                                        ? <MyArrMoment />
-                                        : <RangePicker style={{ width: '100%' }} />
-                                )}
-                            </Form.Item>
-                        </Col>}
-                    {isParkFeeItem &&
-                        <Col span={6} >
-                            <Form.Item label='租赁期起止' >
-                                {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
-                                    rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
-                                })(
-                                    readOnly
-                                        ? <MyArrMomentTime />
-                                        : <RangePicker style={{ width: '100%' }} showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />
-                                )}
-                            </Form.Item>
-                        </Col>
-                    }
-                    <Col span={6} >
-                        <Form.Item label='跨地（市）标志' >
-                            {getFieldDecorator(`realEstateDataDto[${index}].crossCitiesSign`, {
-                                rules: readOnly ? [] : [
-                                    { required: true, message: '请选择跨地（市）标志' }
-                                ]
-                            })(
-                                readOnly
-                                    ? <MyNY />
-                                    : <Select placeholder='请选择' style={{ width: '100%' }} >
-                                        <Select.Option value='Y'>是</Select.Option>
-                                        <Select.Option value='N'>否</Select.Option>
-                                    </Select>
-                            )}
-                        </Form.Item>
-                    </Col>
-                    <Col span={6} >
-                        <Form.Item label='产权证书/不动产权证号' >
-                            {getFieldDecorator(`realEstateDataDto[${index}].realEstateNumber`, {
-                                rules: readOnly ? [] : [
-                                    { required: true, message: '请输入证书编号，若没有证书填写“无”' },
-                                    { max: 40, message: '证书编号最多40个字符' },
-                                ]
-                            })(
-                                readOnly
-                                    ? <MyDiv />
-                                    : <Input autoComplete='off' placeholder="请输入证书编号，若没有证书填写“无”" />
-                            )}
-                        </Form.Item>
-                    </Col>
-                    {!isParkFeeItem &&
-                        <Col span={6} >
-                            <Form.Item label='面积单位' >
-                                {getFieldDecorator(`realEstateDataDto[${index}].realEstateUnit`, {
-                                    rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
-                                })(
-                                    readOnly
-                                        ? <MyDiv />
-                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
-                                            <Select.Option value="平方千米">平方千米</Select.Option>
-                                            <Select.Option value="平方米">平方米</Select.Option>
-                                            <Select.Option value="公顷">公顷</Select.Option>
-                                            <Select.Option value="亩">亩</Select.Option>
-                                            <Select.Option value="h㎡">h㎡</Select.Option>
-                                            <Select.Option value="k㎡">k㎡</Select.Option>
-                                            <Select.Option value="㎡">㎡</Select.Option>
-                                        </Select>
-                                )}
-                            </Form.Item>
-                        </Col>
-                    }
-                    {isParkFeeItem &&
-                        <Col span={6} >
-                            <Form.Item label='面积单位' >
-                                {getFieldDecorator(`realEstateDataDto[${index}].realEstateUnit`, {
-                                    rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
-                                })(
-                                    readOnly
-                                        ? <MyDiv />
-                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
-                                            <Select.Option value="平方米">平方米</Select.Option>
-                                        </Select>
-                                )}
-                            </Form.Item>
-                        </Col>
-                    }
-                    {isParkFeeItem &&
-                        <LicensePlateNumber form={form} index={index} cd={item.cd} readOnly={readOnly} />
-                        // <Col span={6} >
-                        //     <Form.Item label='车牌号' >
-                        //         {getFieldDecorator(`realEstateDataDto[${index}].licensePlateNumber`, {
-                        //             rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
-                        //         })(
-                        //             readOnly
-                        //                 ? <MyDiv />
-                        //                 : <LicensePlateNumber form={form}/>
-                        //         )}
-                        //     </Form.Item>
-                        // </Col>
-                    }
-                </Row>
-            }
-        })
-    }
     return (
         <div className="kts-invoice-operate-real-estate-info-digtal">
-            <div className='real-estate-info-digtal-label' >特定信息-不动产经营租赁服务</div>
-            {getList()}
-
+            <div className='real-estate-info-digtal-label' >特殊信息-不动产经营租赁服务</div>
+            <Row gutter={[17, 0]}>
+                <Col span={6} >
+                    <Form.Item label='不动产地址' >
+                        {getFieldDecorator('realEstateAddress', {
+                            rules: readOnly ? [] : [{ required: true, message: '请选择不动产地址' }]
+                        })(
+                            readOnly
+                                ? (<MyArrString />)
+                                : (<Cascader
+                                    style={{ width: '100%' }}
+                                    options={props.realEstateAddressOptions}
+                                    fieldNames={props.realEstateAddressFieldNames}
+                                    placeholder="请选择省市区县"
+                                />)
+                        )}
+                    </Form.Item>
+                </Col>
+                <Col span={6} >
+                    <Form.Item label='详细地址' >
+                        {getFieldDecorator('realEstateDetailedAddress', {
+                            rules: readOnly ? [] : [
+                                { required: true, message: '请输入详细地址' },
+                                { max: 120, message: '详细地址最多120个字符' },
+                                {
+                                    validator: (_, value) => {
+                                        const pattern = /街|路|村|乡|镇|道|巷|号/;
+                                        return pattern.test(value) ? Promise.resolve() : Promise.reject('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词');
+                                    }
+                                }
+                            ]
+                        })(
+                            readOnly
+                                ? <MyDiv />
+                                : <Input autoComplete='off' placeholder="请输入详细地址" />
+                        )}
+                    </Form.Item>
+                </Col>
+                <Col span={6} >
+                    <Form.Item label='租赁期起止' >
+                        {getFieldDecorator('leaseTerm', {
+                            rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
+                        })(
+                            readOnly
+                                ? <MyArrMoment />
+                                : <RangePicker style={{ width: '100%' }} />
+                        )}
+                    </Form.Item>
+                </Col>
+                <Col span={6} >
+                    <Form.Item label='跨地（市）标志' >
+                        {getFieldDecorator('crossCitiesSign', {
+                            rules: readOnly ? [] : [
+                                { required: true, message: '请选择跨地（市）标志' }
+                            ]
+                        })(
+                            readOnly
+                                ? <MyNY />
+                                : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                    <Select.Option value='Y'>是</Select.Option>
+                                    <Select.Option value='N'>否</Select.Option>
+                                </Select>
+                        )}
+                    </Form.Item>
+                </Col>
+                <Col span={6} >
+                    <Form.Item label='产权证书/不动产权证号' >
+                        {getFieldDecorator('realEstateNumber', {
+                            rules: readOnly ? [] : [
+                                { required: true, message: '请输入证书编号，若没有证书填写“无”' },
+                                { max: 40, message: '证书编号最多40个字符' },
+                            ]
+                        })(
+                            readOnly
+                                ? <MyDiv />
+                                : <Input autoComplete='off' placeholder="请输入证书编号，若没有证书填写“无”" />
+                        )}
+                    </Form.Item>
+                </Col>
+                <Col span={6} >
+                    <Form.Item label='面积单位' >
+                        {getFieldDecorator('realEstateUnit', {
+                            rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
+                        })(
+                            readOnly
+                                ? <MyDiv />
+                                : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                    <Select.Option value="平方千米">平方千米</Select.Option>
+                                    <Select.Option value="平方米">平方米</Select.Option>
+                                    <Select.Option value="公顷">公顷</Select.Option>
+                                    <Select.Option value="亩">亩</Select.Option>
+                                    <Select.Option value="h㎡">h㎡</Select.Option>
+                                    <Select.Option value="k㎡">k㎡</Select.Option>
+                                    <Select.Option value="㎡">㎡</Select.Option>
+                                </Select>
+                        )}
+                    </Form.Item>
+                </Col>
+            </Row>
         </div>
     )
 })
@@ -281,23 +172,12 @@ class MyArrMoment extends React.Component<{ value?: moment.Moment[], style?: Rea
             <div style={this.props.style}>
                 <span>{moment.isMoment(value[0]) && value[0].format('YYYY-MM-DD')}</span>
                 <span style={{ color: '#9F603D', fontWeight: 600 }} > - </span>
-                <span>{moment.isMoment(value[1]) && value[1].format('YYYY-MM-DD')}</span>
-            </div>
-        )
-    }
-}
-class MyArrMomentTime extends React.Component<{ value?: moment.Moment[], style?: React.CSSProperties }> {
-    render(): React.ReactNode {
-        const { value = [] } = this.props
-        return (
-            <div style={this.props.style}>
-                <span>{moment.isMoment(value[0]) && value[0].format('YYYY-MM-DD HH:mm')}</span>
-                <span style={{ color: '#9F603D', fontWeight: 600 }} > - </span>
-                <span>{moment.isMoment(value[1]) && value[1].format('YYYY-MM-DD HH:mm')}</span>
+                <span>{moment.isMoment(value[1]) && value[0].format('YYYY-MM-DD')}</span>
             </div>
         )
     }
 }
+
 class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
     render(): React.ReactNode {
         return (
@@ -309,143 +189,4 @@ class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSPropert
         )
     }
 }
-interface PriceInputProps {
-    // value?: string[];
-    // style?: React.CSSProperties
-    // onChange?: (value: string[]) => void;
-    form: any,
-    index: number
-    cd?: number
-    readOnly: boolean
-}
-const LicensePlateNumber: React.FC<PriceInputProps> = (props) => {
-
-    const { form, readOnly } = props;
-
-    const { getFieldDecorator } = form;
-    const licenceLimit = 3; // 最多支持填写3个车牌号
-    const formData: any[] = form.getFieldValue('realEstateDataDto');
-    const [value, setVal] = React.useState(new Array(props.cd || 1).fill(''));
-    const cd = React.useMemo(() => formData[props.index]?.cd, [formData[props.index]?.cd])
-    // useEffect(() => {
-    //     if (cd) {
-    //         const dd = value.concat(new Array(cd.length-1).fill(''))
-    //         setVal(dd);
-    //     }
-    // }, [cd])
-    const onAdd = () => {
-        if (value.length < licenceLimit) {
-            setVal([...value, '']);
-        }else{
-            message.warn('最多支持填写3个车牌号')
-        }
-    }
-    // 删除车牌号
-    const onDelete = () => {
-        if (value.length > 0) {
-            const dd = value.slice(0, -1)
-            setVal(dd);
-        }
-    }
-
-    return <>
-        {
-            value.length > 0 && value.map((item: string[], key: number) => {
-
-                return <Col span={6} ><Form.Item label='车牌号' key={key}>
-                    {getFieldDecorator(`realEstateDataDto[${props.index}].cphList[${key}]`, {
-                        rules: readOnly ? [] : [{ required: true, message: '请输入车牌号,最多20位' }]
-                    })(
-                        readOnly
-                            ? <MyDiv /> :
-                            <Input style={{ width: '100%' }} maxLength={20} autoComplete='off' placeholder="请输入车牌号" />
-                    )}
-                </Form.Item>
-                </Col>
-            })
-
-
-        }
-        {/* <Col span={6} style={{ display: 'none' }}><Form.Item label='长度' >
-            {getFieldDecorator(`realEstateDataDto[${props.index}].cd`, {
-
-            })(
-                <Select />
-            )}
-        </Form.Item>
-        </Col> */}
-        {!readOnly &&
-            <Col span={6} >
-                <Form.Item >
-                    <div style={{ color: 'white' }}>1</div>
-                    <a style={{ marginRight: 10 }} onClick={onAdd}>添加车牌号</a>
-                    {value.length > 1 && <a onClick={onDelete}>删除</a>}
-                </Form.Item>
-            </Col>
-        }
-    </>
-}
-
-
-// const LicensePlateNumber: React.FC<PriceInputProps> = (props) => {
-
-//     const { form } = props;
-
-//     const { getFieldDecorator } = form;
-//     const licenceLimit = 3; // 最多支持填写3个车牌号
-//     // const { value = [] } = this.props;
-//     const [value, setVal] = React.useState(props.value || ['']);
-//     // const newArr = value.filter(e => !!e);
-//     const newArrLength = value.length;
-//     console.log(value, newArrLength)
-//     // 新增车牌号
-//     const onAdd = () => {
-//         if (newArrLength < licenceLimit) {
-//             setVal([...value, '']);
-//             props.onChange?.([...value, ''])
-//         }
-//     }
-//     // 删除车牌号
-//     const onDelete = () => {
-//         if (newArrLength > 0) {
-//             const dd = value.slice(0, -1)
-//             setVal(dd);
-//             props.onChange?.(dd)
-//         }
-//     }
-//     const onInputChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
-//         console.log(e.target.value);
-//         const dd = value.map((item, i) => {
-//             if (i === index) {
-//                 return e.target.value
-//             }
-//             return item
-//         })
-//         setVal(dd);
-//         props.onChange?.(dd)
-
-
-//     }
-//     return (
-
-//         <>
-//             {newArrLength > 0 && value.map((item, index) => {
-//                 return
-//                 <Form.Item label='车牌号' >
-//                     {getFieldDecorator(`realEstateDataDto[${index}].licensePlateNumber`, {
-//                         rules: [{ required: true, }]
-//                     })(
-//                         <Input onChange={(e) => { onInputChange(e, index) }} key={index} style={{ width: '100%' }} autoComplete='off' placeholder="请输入车牌号" />
-//                     )}
-//                 </Form.Item>
-//                 // <Col span={6} >
-//                 //     <Input onChange={(e) => { onInputChange(e, index) }} key={index} style={{ width: '100%' }} autoComplete='off' placeholder="请输入车牌号" />
-//                 // </Col>
-//             })}
-
-//             <Button type="link" onClick={onAdd}>添加车牌号</Button>
-//             {newArrLength > 1 && <Button type="link" onClick={onDelete}>删除</Button>}
-//         </>
 
-//     )
-// }

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

@@ -30,7 +30,7 @@ const RULES = {
         { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
     ],
     sellerTelPhone: (label: string) => [
-
+       
         { max: 100, message: `${label}内容超长` },
         { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
     ],
@@ -142,16 +142,68 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     }, [props.isExpand])
     const onChangeType = useCallback(
         (value: string) => {
-            console.log(value);
+            const supplierTaxId = form?.getFieldValue("supplierTaxId");
+            const certificateNumber = form?.getFieldValue("certificateNumber");
+            const nationality = form?.getFieldValue("nationality");
             if (value === "201") {
                 // 当“自然人证件类型”选择“201:居民身份证”时，校验是否为“156:中国’
                 form?.setFieldsValue({ nationality: "156" });
-                const supplierTaxId = form?.getFieldValue("supplierTaxId");
-                const certificateNumber = form?.getFieldValue("certificateNumber");
+                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:中国
@@ -169,6 +221,8 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     const validateIDCode = useCallback(
         (_: any, value: string) => {
             if (!value) {
+                setStatus('error');
+                setInfo('请输入正确的证件号码')
                 return Promise.resolve();
             }
 
@@ -199,6 +253,8 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
                     }
 
                 } else {
+                    setStatus('error');
+                    setInfo('请输入正确的证件号码')
                     return Promise.reject("请输入正确的证件号码");
                 }
             } else if (idtype === "237") {
@@ -274,6 +330,8 @@ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.c
     const validateNationality = useCallback(
         (_: any, value: string) => {
             if (!value) {
+                setNationStatue('error');
+                setNation('请选择正确的国籍');
                 return Promise.resolve();
             }
             const idtype = form?.getFieldValue("certificateType");
@@ -675,19 +733,19 @@ function BuyerNameInput(props: InputProps & { fieldName: string; myform: Wrapped
     const onSearch = React.useCallback(async (searchText: string) => {
         await Discontinue.start();
         try {
-            if (fieldName === 'buyerName') {
+            if (fieldName === 'buyerName' ) {
                 if (autoComplete.onBuyerNameSearch) {
                     setOptions(await autoComplete.onBuyerNameSearch(searchText));
                 }
-            } else if (fieldName === 'buyerTaxId') {
+            } else if (fieldName === 'buyerTaxId'  ) {
                 if (autoComplete.onBuyerTaxIdSearch) {
                     setOptions(await autoComplete.onBuyerTaxIdSearch(searchText));
                 }
-            } else if (fieldName === 'supplierName') {
+            }else if(fieldName === 'supplierName'){
                 if (autoComplete.onSupplierNameSearch) {
                     setOptions(await autoComplete.onSupplierNameSearch(searchText));
                 }
-            } else if (fieldName === 'supplierTaxId') {
+            }else if(fieldName === 'supplierTaxId'){
                 if (autoComplete.onSupplierTaxIdSearch) {
                     setOptions(await autoComplete.onSupplierTaxIdSearch(searchText));
                 }
@@ -1022,7 +1080,7 @@ class NationalSelect extends React.Component<any> {
         if (props.readOnly) {
             return <span className='digtal-stakeholder-form-text'>{getLable(props.value)}</span>
         } else {
-            return <Select options={option} {...props} />
+            return <Select style={{ width: 100 }} options={option} {...props} />
         }
     }
 }