kts-component-invoice-operate 4.0.2 → 4.0.3

package/src/Invoice/Invoice-digtal/_test/realEstateSales/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import Invoice from '../../..';
+import moment from 'moment';
+import 'antd/dist/antd.css';
+import { Button } from 'kts-components-antd-x3';
+import idGenerator from '../../../../Invoice/tools/idGenerator';
+export default () => {
+
+    const controller = React.useMemo(() => new Invoice.InvoiceController(), []);
+    const a = [
+        {
+            "lineNumber": 1,
+            "realEstateAddress": [
+                "安徽省合肥市庐江县"
+            ],
+            "realEstateDetailedAddress": "安徽省合肥市庐江县周瑜大道1号",
+            leaseTerm: [moment('20250205'), moment('20250228')],
+            "leaseTermStart": "20250205",
+            "leaseTermEnd": "20250228",
+            "crossCitiesSign": "N",
+            "realEstateNumber": "BDCZL100001",
+            "unit": "平方米",
+            "$index": 0,
+            "realEstateUnit": "平方米"
+        }
+    ]
+    const b: any = [
+        {
+            $index: idGenerator(),
+            "serialNumber": "1886972176113950720",
+            "lineNumber": 1,
+            "taxCode": "3040501030000000000",
+            "taxName": "融资租赁",
+            "specification": "",
+            "itemName": "不动产租赁服务",
+            "unit": "幢",
+            "quantity": "1",
+            "taxRate": 0.09,
+            "priceExcludeTax": "9174.31",
+            "priceIncludeTax": "10000",
+            "amountTax": 825.69,
+            "amountExcludeTax": 9174.31,
+            "amountIncludeTax": 10000,
+            "lineAttribute": 0,
+            "favouredPolicyMark": false,
+            "ticketLineNumber": "1"
+        }
+    ]
+    React.useEffect(() => {
+        // controller.run(async s => {
+        //     s.goodsListState.goodsList = b;
+
+        // })
+        // controller.run(async s => {
+        //     window.setTimeout(() => {
+        //         controller.formList.get('realEstateInfo')?.setFieldsValue({
+        //             realEstateDataDto: a
+        //         })
+        //     }, 1000)
+
+        // })
+    }, [])
+    const onSave = async () => {
+        const formValues = await controller.validateFields();
+        console.log(formValues)
+    }
+    return (
+        <>
+            <Button onClick={onSave}>输出表单内容</Button>
+            <Invoice
+                invoiceType='digtal'
+                controller={controller}
+                specialInfor={<Invoice.RealEstateSales />}
+            />
+        </>
+    )
+};

package/src/Invoice/Invoice-digtal/index.md

@@ -3,8 +3,12 @@
 <!-- ## 简单用法
 <code src="./_test/easiest/index.tsx"></code> -->
 
-## 不动产经营租赁服务
-<code src="./_test/realEstateInfo/index.tsx"></code>
+<!-- ## 不动产经营租赁服务
+<code src="./_test/realEstateInfo/index.tsx"></code> -->
+
+## 不动产销售
+<code src="./_test/realEstateSales/index.tsx"></code>
+
 
 <!-- ## 建筑服务
 <code src="./_test/architecture/index.tsx"></code> -->

package/src/Invoice/index.tsx

@@ -19,6 +19,7 @@ import StakeFarmerholder from './ui/digtal/StakeFarmerholder';
 import SignDigtal from './ui/digtal/Sign';
 import GoodsListDigtal from './ui/digtal/GoodsList';
 import RealEstateInfo from './ui/digtal/RealEstateInfo';
+import RealEstateSales from './ui/digtal/RealEstateSales';
 import Architecture from './ui/digtal/Architecture';
 import FreightList from './ui/digtal/FreightList';
 
@@ -105,6 +106,9 @@ export default class Invoice extends React.PureComponent<IInvoiceProps> {
   /** 特殊信息-不动产经营租赁服务(数电) */
   static readonly RealEstateInfo = RealEstateInfo;
 
+  /** 特殊信息-不动产销售(数电) */
+  static readonly RealEstateSales = RealEstateSales;
+
   /** 特殊信息-建筑服务(数电) */
   static readonly Architecture = Architecture;
 

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

@@ -48,6 +48,7 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
         indexRef.current = dd;
     }, [goodsList, indexRef])
     // 注册 form
+   
     controller.useForm('realEstateInfo', form);
     const getList = () => {
         const decrease = indexRef.current.length > goodsList.length
@@ -69,7 +70,8 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
                 });
             }
         }
-        console.log(goodsList)
+        console.log(form.getFieldsValue())
+        console.log('goodsList',goodsList)
         return goodsList.map((item, index) => {
             if (item.lineAttribute === 0) {
                 return <Row gutter={[17, 0]} >

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

@@ -0,0 +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;
+    }
+    .ktsAntX-row{
+        border-bottom: 1px dashed #9F613E;
+        &:last-child {
+            border-bottom: none;
+          }
+    }
+
+}

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

@@ -0,0 +1,301 @@
+
+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 === 0) {
+                acc.push(cur.$index)
+            }
+            return acc
+        }, [])
+        indexRef.current = dd;
+    }, [goodsList, indexRef])
+    // 注册 form
+
+    controller.useForm('realEstateSales', 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.map((item, index) => {
+            if (item.lineAttribute === 0) {
+                return <Row gutter={[17, 0]} >
+                    <Col span={6} >
+                        <Form.Item label='不动产单元代码' >
+                            {getFieldDecorator(`realEstateDataDto[${index}].unitCode`, {
+                                rules: readOnly ? [] : []
+                            })(
+                                readOnly
+                                    ? <MyNY />
+                                    : <Input autoComplete='off' />
+                            )}
+                        </Form.Item>
+                    </Col>
+                    <Col span={6} >
+                        <Form.Item label='网签合同备案编号' >
+                            {getFieldDecorator(`realEstateDataDto[${index}].contractNumber`, {
+                                rules: readOnly ? [] : []
+                            })(
+                                readOnly
+                                    ? <MyNY />
+                                    : <Input autoComplete='off' />
+                            )}
+                        </Form.Item>
+                    </Col>
+                    <Col span={6} >
+                        <Form.Item style={{ display: 'none' }}>
+                            {getFieldDecorator(`realEstateDataDto[${index}].$index`, {
+                                initialValue: item.$index,
+                            })(
+                                <Input />
+                            )}
+                        </Form.Item>
+                        {/* <Col span={6} >
+                            <Form.Item label='不动产单元代码/网签合同备案编号' >
+                                {getFieldDecorator(`realEstateDataDto[${index}].type`, {
+                                    rules: readOnly ? [] : []
+                                })(
+                                    readOnly
+                                        ? <MyNY />
+                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                            <Select.Option value='unitCode'>不动产单元代码</Select.Option>
+                                            <Select.Option value='contractNumber'>网签合同备案编号</Select.Option>
+                                        </Select>
+                                )}
+                            </Form.Item>
+                        </Col> */}
+
+                        <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}].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}].landTaxProjNo`, {
+                                rules: readOnly ? [] : []
+                            })(
+                                readOnly
+                                    ? <MyArrMoment />
+                                    : <Input autoComplete='off' />
+                            )}
+                        </Form.Item>
+                    </Col>
+                    <Col span={6} >
+                        <Form.Item label='核定计税价格' >
+                            {getFieldDecorator(`realEstateDataDto[${index}].approvedTaxableAmount`, {
+                                rules: readOnly ? [] : []
+                            })(
+                                readOnly
+                                    ? <MyArrMoment />
+                                    : <Input autoComplete='off' type="number" />
+                            )}
+                        </Form.Item>
+                    </Col>
+                    <Col span={6} >
+                        <Form.Item label='实际成交含税金额' >
+                            {getFieldDecorator(`realEstateDataDto[${index}].tradedIncludeAmount`, {
+                                rules: readOnly ? [] : []
+                            })(
+                                readOnly
+                                    ? <MyArrMoment />
+                                    : <Input autoComplete='off' type="number" />
+                            )}
+                        </Form.Item>
+                    </Col>
+
+                    <Col span={6} >
+                        <Form.Item label='房屋产权证书/不动产权证号' >
+                            {getFieldDecorator(`realEstateDataDto[${index}].realEstateNumber`, {
+                                rules: readOnly ? [] : [
+
+                                    { max: 40, message: '证书编号最多40个字符' },
+                                ]
+                            })(
+                                readOnly
+                                    ? <MyDiv />
+                                    : <Input autoComplete='off' />
+                            )}
+                        </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[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>
+        )
+    }
+}
+