kts-component-invoice-operate 3.2.244 → 3.2.246

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

@@ -1,451 +1,451 @@
-
-import React, { useEffect } from "react";
-import { decorator } from 'grey-react-box';
-import { Form, message } 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 moment from "moment";
-
-const { RangePicker } = DatePicker;
-
-export interface RealEstateInfoProps {
-    /**
-     * 不动产地址数据
-     */
-    realEstateAddressOptions?: any[];
-
-    /**
-     * 不动产地址数据字段名
-     */
-    realEstateAddressFieldNames?: any;
-}
-
-/** 特殊信息-不动产经营租赁服务 */
-export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInfoProps>(Form.create())(props => {
-
-    /** 控制器 */
-    const controller = Invoice.useInvoiceController();
-
-    const { form } = props;
-
-    const { getFieldDecorator } = form;
-
-    const model = controller.useMemo(s => s.model, []);
-
-    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>
-    )
-})
-
-class MyDiv extends React.Component<{ value?: string, style?: React.CSSProperties }> {
-    render(): React.ReactNode {
-        return (
-            <div style={this.props.style}>{this.props.value}</div>
-        )
-    }
-}
-
-class MyArrString extends React.Component<{ value?: string[], style?: React.CSSProperties }> {
-    render(): React.ReactNode {
-        return (
-            <div style={this.props.style}>
-                {
-                    this.props.value?.filter(e => !!e)
-                        .join(',')
-                }
-            </div>
-        )
-    }
-}
-
-class MyArrMoment 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')}</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>
-            </div>
-        )
-    }
-}
-class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
-    render(): React.ReactNode {
-        return (
-            <div style={this.props.style}>
-                {
-                    this.props.value === 'Y' ? '是' : '否'
-                }
-            </div>
-        )
-    }
-}
-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>}
-//         </>
-
-//     )
-// }
+
+import React, { useEffect } from "react";
+import { decorator } from 'grey-react-box';
+import { Form, message } 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 moment from "moment";
+
+const { RangePicker } = DatePicker;
+
+export interface RealEstateInfoProps {
+    /**
+     * 不动产地址数据
+     */
+    realEstateAddressOptions?: any[];
+
+    /**
+     * 不动产地址数据字段名
+     */
+    realEstateAddressFieldNames?: any;
+}
+
+/** 特殊信息-不动产经营租赁服务 */
+export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInfoProps>(Form.create())(props => {
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    const { form } = props;
+
+    const { getFieldDecorator } = form;
+
+    const model = controller.useMemo(s => s.model, []);
+
+    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>
+    )
+})
+
+class MyDiv extends React.Component<{ value?: string, style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>{this.props.value}</div>
+        )
+    }
+}
+
+class MyArrString extends React.Component<{ value?: string[], style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>
+                {
+                    this.props.value?.filter(e => !!e)
+                        .join(',')
+                }
+            </div>
+        )
+    }
+}
+
+class MyArrMoment 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')}</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>
+            </div>
+        )
+    }
+}
+class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>
+                {
+                    this.props.value === 'Y' ? '是' : '否'
+                }
+            </div>
+        )
+    }
+}
+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>}
+//         </>
+
+//     )
+// }