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

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

@@ -1,11 +1,11 @@
 
-import React from "react";
+import React, { useEffect } from "react";
 import { decorator } from 'grey-react-box';
-import { Form } from 'kts-components-antd-x3';
+import { Form, message } from 'kts-components-antd-x3';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
 import Invoice from '../../..';
 import './index.less';
-import { Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
+import { Button, Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
 import moment from "moment";
 
 const { RangePicker } = DatePicker;
@@ -36,110 +36,219 @@ 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>
-            <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 className='real-estate-info-digtal-label' >特定信息-不动产经营租赁服务</div>
+            {getList()}
+
         </div>
     )
 })
@@ -172,12 +281,23 @@ 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[0].format('YYYY-MM-DD')}</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 (
@@ -189,4 +309,143 @@ 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>}
+//         </>
 
+//     )
+// }