kts-component-invoice-operate 3.2.216 → 3.2.217

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

@@ -1,77 +1,77 @@
-
-import React from "react";
-import { Form } from 'kts-components-antd-x3';
-import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
-import { decorator } from "grey-react-box";
-import Invoice from "../../../../Invoice";
-import './index.less'
-
-
-export interface IInvoiceHeader {
-    /** 标题 */
-    title?: string;
-
-    /** 标记文字 */
-    defaultTag?: string;
-
-    /** 默认 发票号码 */
-    defaultNo?: string;
-
-    /** 默认 开票日期 */
-    defaultInvoicingDate?: string;
-}
-
-export default decorator<IInvoiceHeader, IInvoiceHeader & FormComponentProps>(Form.create())(props => {
-
-    const { form } = props;
-
-    /** 控制器 */
-    const controller = Invoice.useInvoiceController();
-
-    const title = React.useMemo(() => {
-        if (props.title) {
-            return props.title
-        }
-        return '电子发票(增值税专用发票)'
-    }, [props.title])
-
-    controller.useForm('invoiceHeader', form);
-
-    return (
-        <div className="kts-invoice-operate-invoice-digtal-header" >
-            <div className="digtal-header-title" >{title}</div>
-            {form.getFieldDecorator('tag', { initialValue: props.defaultTag })(<Tag />)}
-            <div className="digtal-header-fields" >
-                {form.getFieldDecorator('no', { initialValue: props.defaultNo })(<Field title="发票号码：" />)}
-                {form.getFieldDecorator('invoicingDate', { initialValue: props.defaultInvoicingDate })(<Field title="开票日期：" />)}
-            </div>
-        </div>
-    )
-})
-
-/** 字段 */
-class Field extends React.Component<{ title: string, value?: string }>{
-    render(): React.ReactNode {
-        const { title, value } = this.props;
-        if (value) {
-            return (
-                <div className="digtal-header-field" >
-                    <div className="digtal-header-field-title" >{title}</div>
-                    <div className="digtal-header-field-value" >{value}</div>
-                </div>
-            )
-        } else {
-            return <></>
-        }
-    }
-}
-
-class Tag extends React.Component<{ value?: string }>{
-    render(): React.ReactNode {
-        return (
-            this.props.value
-                ? <div className="digtal-header-tag" >{this.props.value}</div>
-                : <></>
-        )
-    }
-}
+
+import React from "react";
+import { Form } from 'kts-components-antd-x3';
+import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import { decorator } from "grey-react-box";
+import Invoice from "../../../../Invoice";
+import './index.less'
+
+
+export interface IInvoiceHeader {
+    /** 标题 */
+    title?: string;
+
+    /** 标记文字 */
+    defaultTag?: string;
+
+    /** 默认 发票号码 */
+    defaultNo?: string;
+
+    /** 默认 开票日期 */
+    defaultInvoicingDate?: string;
+}
+
+export default decorator<IInvoiceHeader, IInvoiceHeader & FormComponentProps>(Form.create())(props => {
+
+    const { form } = props;
+
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
+    const title = React.useMemo(() => {
+        if (props.title) {
+            return props.title
+        }
+        return '电子发票(增值税专用发票)'
+    }, [props.title])
+
+    controller.useForm('invoiceHeader', form);
+
+    return (
+        <div className="kts-invoice-operate-invoice-digtal-header" >
+            <div className="digtal-header-title" >{title}</div>
+            {form.getFieldDecorator('tag', { initialValue: props.defaultTag })(<Tag />)}
+            <div className="digtal-header-fields" >
+                {form.getFieldDecorator('no', { initialValue: props.defaultNo })(<Field title="发票号码：" />)}
+                {form.getFieldDecorator('invoicingDate', { initialValue: props.defaultInvoicingDate })(<Field title="开票日期：" />)}
+            </div>
+        </div>
+    )
+})
+
+/** 字段 */
+class Field extends React.Component<{ title: string, value?: string }>{
+    render(): React.ReactNode {
+        const { title, value } = this.props;
+        if (value) {
+            return (
+                <div className="digtal-header-field" >
+                    <div className="digtal-header-field-title" >{title}</div>
+                    <div className="digtal-header-field-value" >{value}</div>
+                </div>
+            )
+        } else {
+            return <></>
+        }
+    }
+}
+
+class Tag extends React.Component<{ value?: string }>{
+    render(): React.ReactNode {
+        return (
+            this.props.value
+                ? <div className="digtal-header-tag" >{this.props.value}</div>
+                : <></>
+        )
+    }
+}

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

@@ -1,15 +1,22 @@
-.kts-invoice-operate-real-estate-info-digtal {
-    padding      : 20px;
-    border-bottom: 2px solid #9F613E;
-    border-left  : 2px solid #9F613E;
-    border-right : 2px solid #9F613E;
-
-    .real-estate-info-digtal-label {
-        color      : #9F613E;
-        font-weight: bold;
-    }
-
-    .ktsAnt3x-row.ktsAnt3x-form-item {
-        margin-bottom: 0;
-    }
+.kts-invoice-operate-real-estate-info-digtal {
+    padding      : 20px;
+    border-bottom: 2px solid #9F613E;
+    border-left  : 2px solid #9F613E;
+    border-right : 2px solid #9F613E;
+
+    .real-estate-info-digtal-label {
+        color      : #9F613E;
+        font-weight: bold;
+    }
+
+    .ktsAnt3x-row.ktsAnt3x-form-item {
+        margin-bottom: 0;
+    }
+    .ktsAntX-row{
+        border-bottom: 1px dashed #9F613E;
+        &:last-child {
+            border-bottom: none;
+          }
+    }
+
 }

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

@@ -1,192 +1,242 @@
-
-import React from "react";
-import { decorator } from 'grey-react-box';
-import { Form } 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 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]);
-
-    // 注册 form
-    controller.useForm('realEstateInfo', form);
-
-    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>
-    )
-})
-
-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[0].format('YYYY-MM-DD')}</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>
-        )
-    }
-}
-
+
+import React, { useEffect } from "react";
+import { decorator } from 'grey-react-box';
+import { Form } 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 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, []);
+    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
+                });
+            }
+        }
+        console.log('goodsList',goodsList)
+        return goodsList.filter(item=>item.lineAttribute !== 1).map((item, index) => {
+            if (item.lineAttribute !== 1) {
+                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>
+                    <Col span={6} >
+                        <Form.Item label='租赁期起止' >
+                            {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
+                                rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
+                            })(
+                                readOnly
+                                    ? <MyArrMoment />
+                                    : <RangePicker style={{ width: '100%' }} />
+                            )}
+                        </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>
+                    <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>
+                </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 MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>
+                {
+                    this.props.value === 'Y' ? '是' : '否'
+                }
+            </div>
+        )
+    }
+}
+