update 复杂的form表单

web-react/src/assets/style/lib/form-page.less

@@ -12,8 +12,9 @@
     height: 100%;
 
     >.ant-tabs {
-      >.ant-tabs-bar {
+      >.ant-tabs-nav {
         margin-bottom: 0;
+        padding: 0 @padding-md;
 
         background-color: @white;
 

web-react/src/assets/style/lib/width-height.less

@@ -3,13 +3,30 @@
 .width-height (@i) when (@i <=20) {
 
   @n : @i * 50;
+  @px : @n * 1px;
 
   .w-@{n} {
-    width: @n * 1px !important;
+    width: @px !important;
+  }
+
+  .w-@{n}-min {
+    min-width: @px !important;
+  }
+
+  .w-@{n}-max {
+    max-width: @px !important;
   }
 
   .h-@{n} {
-    height: @n * 1px !important;
+    height: @px !important;
+  }
+
+  .h-@{n}-min {
+    min-height: @px !important;
+  }
+
+  .h-@{n}-max {
+    max-height: @px !important;
   }
 
   .w-@{n}-p {

web-react/src/pages/business/house/code/form/index.jsx

@@ -4,14 +4,15 @@ import { ComponentDynamic, Container } from 'components'
 import { isEqual } from 'lodash'
 import { api } from 'common/api'
 
-const parts = [{
+const parts = [
-    component: () => import('./part')
+    {
-}]
+        component: () => import('./part'),
+    },
+]
 
 export default class index extends Component {
-
     state = {
-        saving: false
+        saving: false,
     }
 
     children = []
@@ -28,10 +29,10 @@ export default class index extends Component {
                 const data = await child.getData()
                 this.formData = {
                     ...this.formData,
-                    ...data
+                    ...data,
                 }
-            } catch {
+            } catch (e) {
-                return
+                return e
             }
         }
 
@@ -44,12 +45,10 @@ export default class index extends Component {
                     Message.success('保存成功')
                     Modal.confirm({
                         content: '已添加成功，是否继续添加？',
-                        onOk: () => {
+                        onOk: () => {},
-
-                        },
                         onCancel: () => {
                             window.closeContentWindow()
-                        }
+                        },
                     })
                 }
             } finally {
@@ -69,7 +68,6 @@ export default class index extends Component {
     }
 
     render() {
-
         const { id, param } = this.props
 
         return (
@@ -78,14 +76,16 @@ export default class index extends Component {
                     <br />
                     <div className="yo-adorn--house-top" />
                     <Card className="yo-form-page--body">
-                        {
+                        {parts.map((item, i) => (
-                            parts.map((item, i) => (
                             <section key={i} id={`form-${i}-${id}`}>
                                 {item.title && <h5>{parts.title}</h5>}
-                                    <ComponentDynamic is={item.component} param={param} onRef={(r) => this.children.push(r)} />
+                                <ComponentDynamic
+                                    is={item.component}
+                                    param={param}
+                                    onRef={r => this.children.push(r)}
+                                />
                             </section>
-                            ))
+                        ))}
-                        }
                     </Card>
                 </Container>
                 <div className="yo-form-page--bar">
@@ -94,7 +94,13 @@ export default class index extends Component {
                             <span></span>
                             <span>
                                 <Button>取消</Button>
-                                <Button type="primary" onClick={() => this.onSubmit()} loading={this.state.saving}>保存</Button>
+                                <Button
+                                    type="primary"
+                                    onClick={() => this.onSubmit()}
+                                    loading={this.state.saving}
+                                >
+                                    保存
+                                </Button>
                             </span>
                         </div>
                     </Container>

web-react/src/pages/business/house/info/form/base/building.jsx

@@ -2,72 +2,62 @@ import React, { Component } from 'react'
 import { Row, Col, Form, Input, InputNumber, Radio, Checkbox, Switch, DatePicker, Spin } from 'antd'
 import { cloneDeep, isEqual } from 'lodash'
 import { api } from 'common/api'
+import { AntIcon } from 'components'
+import getDictData from 'util/dic'
+import moment from 'moment'
 
 const layout = {
     labelCol: { flex: '150px' },
-    wrapperCol: { flex: '1' }
+    wrapperCol: { flex: '1' },
 }
 
 export default class building extends Component {
-
     state = {
         loading: true,
         codes: {
-            landAttribute: [],
+            dicLandAttribute: [],
-            houseStructureType: [],
+            dicHouseStructureType: [],
-            houseSseismicGrade: [],
+            dicHouseAseismicGrade: [],
-            houseBaseInfo: [],
+            dicHouseBaseInfo: [],
-            houseInsulationMaterial: [],
+            dicHouseInsulationMaterial: [],
-            houseWallMaterial: [],
+            dicHouseWallMaterial: [],
-            houseFireproofGrade: [],
+            dicHouseFireproofGrade: [],
-            houseBuildingCurtainWall: [],
+            dicHouseBuildingCurtainWall: [],
-            houseElevator: [],
+            dicHouseElevator: [],
-        }
+        },
     }
+
     form = React.createRef()
 
-    constructor(props) {
-        super(props)
-
-        // 使父组件获取到当前组件实例
-        if (props.onRef) {
-            props.onRef(this)
-        }
-    }
-
     shouldComponentUpdate(props, state) {
-        // 在上级页签切换时,阻止当前组件渲染,以保证性能
         return !isEqual(this.state, state)
     }
 
     componentDidMount() {
-        this.onFillData()
+        if (this.props.onRef) {
+            this.props.onRef(this)
         }
-
+        this.fillData({
-    onFillData = async () => {
+            record: this.props.record,
-        await this.loadCodes()
-        this.setState({
-            loading: false
         })
     }
 
-    onGetData = () => {
+    /**
-        return new Promise((resolve, reject) => {
+     * 填充数据
-            this.form.current.validateFields()
+     * 可以在设置this.record之后对其作出数据结构调整
-                .then(values => {
+     * [异步,必要]
-                    const record = cloneDeep(values)
+     * @param {*} params
-
+     */
-                    resolve(record)
+    async fillData(params) {
-                }).catch(err => {
+        this.record = cloneDeep(params.record)
-                    reject(err)
+        //#region 从后端转换成前段所需格式
-                })
+        if (this.record) {
-        })
+            const { completedDate } = this.record.houseInfo
+            this.record.houseInfo.completedDate = completedDate
+                ? moment(completedDate)
+                : completedDate
         }
-
+        const codes = await getDictData(
-    loadCodes = async () => {
-        await api
-            .sysDictTypeDropDowns({
-                code: [
             'dic_land_attribute',
             'dic_house_structure_type',
             'dic_house_aseismic_grade',
@@ -76,80 +66,95 @@ export default class building extends Component {
             'dic_house_wall_material',
             'dic_house_fireproof_grade',
             'dic_house_building_curtain_wall',
-                    'dic_house_elevator',
+            'dic_house_elevator'
-                ],
-            })
-            .then(
-                ({
-                    data: {
-                        dic_land_attribute,
-                        dic_house_structure_type,
-                        dic_house_aseismic_grade,
-                        dic_house_base_info,
-                        dic_house_insulation_material,
-                        dic_house_wall_material,
-                        dic_house_fireproof_grade,
-                        dic_house_building_curtain_wall,
-                        dic_house_elevator,
-                    },
-                }) => {
-                    this.setState({
-                        codes: {
-                            landAttribute: dic_land_attribute,
-                            houseStructureType: dic_house_structure_type,
-                            houseSseismicGrade: dic_house_aseismic_grade,
-                            houseBaseInfo: dic_house_base_info,
-                            houseInsulationMaterial: dic_house_insulation_material,
-                            houseWallMaterial: dic_house_wall_material,
-                            houseFireproofGrade: dic_house_fireproof_grade,
-                            houseBuildingCurtainWall: dic_house_building_curtain_wall,
-                            houseElevator: dic_house_elevator,
-                        }
-                    })
-                }
         )
+        this.setState({
+            codes,
+        })
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+        this.setState({
+            loading: false,
+        })
     }
 
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            //#region 从前段转换后端所需格式
+            if (postData.houseInfo.completedDate) {
+                postData.houseInfo.completedDate =
+                    postData.houseInfo.completedDate.format('YYYY-MM-DD')
+            }
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
     render() {
         return (
-            <Spin spinning={this.state.loading}>
+            <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
-                <Form
+                <Form {...layout} ref={this.form}>
-                    {...layout}
+                    <Row gutter={16}>
-                    ref={this.form}
-                >
-                    <Row gutter={16} type="flex">
                         <Col span={12}>
-                            <Form.Item name={['houseInfo', 'buildingName']} label="幢名称" rules={[{ required: true, message: '请输入幢名称', trigger: 'blur' }]}>
+                            <Form.Item
+                                name={['houseInfo', 'buildingName']}
+                                label="幢名称"
+                                rules={[{ required: true, message: '请输入幢名称' }]}
+                            >
                                 <Input autoComplete="off" placeholder="请输入幢名称" />
                             </Form.Item>
                         </Col>
                         <Col span={12}>
-                            <Form.Item name={['houseCode', 'address']} label="坐落地址">
+                            <Form.Item
+                                label="坐落地址"
+                                name={['houseCode', 'address']}
+                                rules={[{ required: true, message: '请输入坐落地址' }]}
+                            >
                                 <Input autoComplete="off" placeholder="请输入坐落地址" />
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item label="土地性质" name="houseInfo.landAttribute">
+                            <Form.Item
+                                label="土地性质"
+                                name={['houseInfo', 'landAttribute']}
+                                rules={[{ required: true, message: '请选择土地性质' }]}
+                            >
                                 <Radio.Group buttonStyle="solid">
-                                    {
+                                    {this.state.codes.dicLandAttribute.map(item => {
-                                        this.state.codes.landAttribute.map(item => {
                                         return (
-                                                <Radio.Button
+                                            <Radio.Button key={item.code} value={+item.code}>
-                                                    key={item.code}
+                                                {item.value}
-                                                    value={+item.code}
+                                            </Radio.Button>
-                                                >{item.value}</Radio.Button>
                                         )
-                                        })
+                                    })}
-                                    }
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item className="mb-none" label="地理坐标">
+                            <Form.Item className="mb-none" label="地理坐标" required>
                                 <Row gutter={16}>
                                     <Col span={12}>
-                                        <Form.Item name={['houseCode', 'lng']}>
+                                        <Form.Item
-                                            <Input autoComplete="off"
+                                            name={['houseCode', 'lng']}
+                                            rules={[
+                                                { required: true, message: '请在地图上选择坐标' },
+                                            ]}
+                                        >
+                                            <Input
+                                                autoComplete="off"
                                                 className="yo-input-prefix-2"
                                                 disabled
                                                 placeholder="请在地图上选择坐标"
@@ -158,8 +163,14 @@ export default class building extends Component {
                                         </Form.Item>
                                     </Col>
                                     <Col span={12}>
-                                        <Form.Item name={['houseCode', 'lat']}>
+                                        <Form.Item
-                                            <Input autoComplete="off"
+                                            name={['houseCode', 'lat']}
+                                            rules={[
+                                                { required: true, message: '请在地图上选择坐标' },
+                                            ]}
+                                        >
+                                            <Input
+                                                autoComplete="off"
                                                 className="yo-input-prefix-2"
                                                 disabled
                                                 placeholder="请在地图上选择坐标"
@@ -172,81 +183,87 @@ export default class building extends Component {
                             <Form.Item colon={false} label={true}>
                                 <div className="yo-map-container">
                                     <div className="yo-map--search">
-                                        <Input.Search autoComplete="off" allow-clear placeholder="请输入关键字" ref="map-search" />
+                                        <Input.Search
+                                            autoComplete="off"
+                                            allowClear
+                                            placeholder="请输入关键字"
+                                            ref="map-search"
+                                        />
                                     </div>
                                     <div className="h-500" ref="map"></div>
                                 </div>
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item label="结构类型" name="houseInfo.structureType">
+                            <Form.Item
-                                <Radio.Group
+                                label="结构类型"
-                                    buttonStyle="solid"
+                                name={['houseInfo', 'structureType']}
-                                    placeholder="请选择结构类型"
+                                rules={[{ required: true, message: '请选择结构类型' }]}
                             >
-                                    {
+                                <Radio.Group buttonStyle="solid" placeholder="请选择结构类型">
-                                        this.state.codes.houseStructureType.map(item => {
+                                    {this.state.codes.dicHouseStructureType.map(item => {
                                         return (
-                                                <Radio.Button
+                                            <Radio.Button key={item.code} value={+item.code}>
-                                                    key={item.code}
+                                                {item.value}
-                                                    value={+item.code}
+                                            </Radio.Button>
-                                                >{item.value}</Radio.Button>
                                         )
-                                        })
+                                    })}
-                                    }
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={12}>
-                            <Form.Item label="抗震等级" name="houseInfo.seismicGrade">
+                            <Form.Item
-                                <Radio.Group buttonStyle="solid" >
+                                label="抗震等级"
-                                    {
+                                name={['houseInfo', 'seismicGrade']}
-                                        this.state.codes.houseSseismicGrade.map(item => {
+                                rules={[{ required: true, message: '请选择抗震等级' }]}
+                            >
+                                <Radio.Group buttonStyle="solid">
+                                    {this.state.codes.dicHouseAseismicGrade.map(item => {
                                         return (
-                                                <Radio.Button
+                                            <Radio.Button key={item.code} value={+item.code}>
-                                                    key={item.code}
+                                                {item.value}
-                                                    value={+item.code}
+                                            </Radio.Button>
-                                                >{item.value}</Radio.Button>
                                         )
-                                        })
+                                    })}
-                                    }
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={12}>
-                            <Form.Item label="基础情况" name="houseInfo.baseInfo">
+                            <Form.Item
-                                <Radio.Group buttonStyle="solid" >
+                                label="基础情况"
-                                    {
+                                name={['houseInfo', 'baseInfo']}
-                                        this.state.codes.houseBaseInfo.map(item => {
+                                rules={[{ required: true, message: '请选择基础情况' }]}
+                            >
+                                <Radio.Group buttonStyle="solid">
+                                    {this.state.codes.dicHouseBaseInfo.map(item => {
                                         return (
-                                                <Radio.Button
+                                            <Radio.Button key={item.code} value={+item.code}>
-                                                    key={item.code}
+                                                {item.value}
-                                                    value={+item.code}
+                                            </Radio.Button>
-                                                >{item.value}</Radio.Button>
                                         )
-                                        })
+                                    })}
-                                    }
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={24}>
                             <Form.Item
                                 label="外墙保温材料"
-                                name="houseInfo.insulationMaterial"
+                                name={['houseInfo', 'insulationMaterial']}
                             >
                                 <Checkbox.Group>
-                                    {
+                                    {this.state.codes.dicHouseInsulationMaterial.map(item => {
-                                        this.state.codes.houseInsulationMaterial.map(item => {
                                         return (
                                             <Checkbox
                                                 key={item.code}
                                                 value={item.code}
                                                 className="mb-xs"
-                                                >{item.value}</Checkbox>
+                                            >
+                                                {item.value}
+                                            </Checkbox>
                                         )
-                                        })
+                                    })}
-                                    }
+                                    <Input
-                                    <Input autoComplete="off"
+                                        autoComplete="off"
                                         className="w-300"
                                         placeholder="请输入其他外墙保温材料"
                                     />
@@ -254,131 +271,156 @@ export default class building extends Component {
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item label="外墙墙体材料" name="houseInfo.wallMaterial">
+                            <Form.Item label="外墙墙体材料" name={['houseInfo', 'wallMaterial']}>
                                 <Checkbox.Group>
-                                    {
+                                    {this.state.codes.dicHouseWallMaterial.map(item => {
-                                        this.state.codes.houseWallMaterial.map(item => {
                                         return (
                                             <Checkbox
                                                 key={item.code}
                                                 value={item.code}
                                                 className="mb-xs"
-                                                >{item.value}</Checkbox>
+                                            >
+                                                {item.value}
+                                            </Checkbox>
                                         )
-                                        })
+                                    })}
-                                    }
                                 </Checkbox.Group>
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item name="houseInfo.fireproofGrade" label={<span>外墙外保温材料<br />防火等级</span>}>
+                            <Form.Item
-                                <Radio.Group buttonStyle="solid">
+                                label={
-                                    {
+                                    <span>
-                                        this.state.codes.houseFireproofGrade.map(item => {
+                                        外墙外保温材料
-                                            return (
+                                        <br />
-                                                <Radio.Button
+                                        防火等级
-                                                    key={item.code}
+                                    </span>
-                                                    value={item.code}
-                                                >{item.value}</Radio.Button>
-                                            )
-                                        })
                                 }
+                                name={['houseInfo', 'fireproofGrade']}
+                            >
+                                <Radio.Group buttonStyle="solid">
+                                    {this.state.codes.dicHouseFireproofGrade.map(item => {
+                                        return (
+                                            <Radio.Button key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Radio.Button>
+                                        )
+                                    })}
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item label="建筑幕墙" name="houseInfo.curtainWall">
+                            <Form.Item
+                                label="建筑幕墙"
+                                name={['houseInfo', 'curtainWall']}
+                                rules={[{ required: true, message: '请选择建筑幕墙' }]}
+                            >
                                 <Radio.Group buttonStyle="solid">
-                                    {
+                                    {this.state.codes.dicHouseBuildingCurtainWall.map(item => {
-                                        this.state.codes.houseBuildingCurtainWall.map(item => {
                                         return (
-                                                <Radio.Button
+                                            <Radio.Button key={item.code} value={+item.code}>
-                                                    key={item.code}
+                                                {item.value}
-                                                    value={+item.code}
+                                            </Radio.Button>
-                                                >{item.value}</Radio.Button>
                                         )
-                                        })
+                                    })}
-                                    }
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="有无外墙面砖" name="houseInfo.faceBrick">
+                            <Form.Item label="有无外墙面砖" name={['houseInfo', 'faceBrick']}>
                                 <Switch />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="有无外墙粉刷" name="houseInfo.whiteWash">
+                            <Form.Item label="有无外墙粉刷" name={['houseInfo', 'whiteWash']}>
                                 <Switch />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="有无外墙涂料" name="houseInfo.coating">
+                            <Form.Item label="有无外墙涂料" name={['houseInfo', 'coating']}>
                                 <Switch />
                             </Form.Item>
                         </Col>
                         <Col span={24}>
-                            <Form.Item label="电梯" name="houseInfo.elevator">
+                            <Form.Item
+                                label="电梯"
+                                name={['houseInfo', 'elevator']}
+                                rules={[{ required: true, message: '请选择电梯' }]}
+                            >
                                 <Radio.Group buttonStyle="solid">
-                                    {
+                                    {this.state.codes.dicHouseElevator.map(item => {
-                                        this.state.codes.houseElevator.map(item => {
                                         return (
-                                                <Radio.Button
+                                            <Radio.Button key={item.code} value={item.code}>
-                                                    key={item.code}
+                                                {item.value}
-                                                    value={+item.code}
+                                            </Radio.Button>
-                                                >{item.value}</Radio.Button>
                                         )
-                                        })
+                                    })}
-                                    }
-
                                 </Radio.Group>
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="竣工日期" name="houseInfo.completedDate">
+                            <Form.Item
+                                label="竣工日期"
+                                name={['houseInfo', 'completedDate']}
+                                rules={[{ required: true, message: '请选择竣工日期' }]}
+                            >
                                 <DatePicker
-                                    onChange={(date) => { /*$root.transfer.completedYear = date.format('YYYY') */ }}
+                                    onChange={date => {
+                                        /*$root.transfer.completedYear = date.format('YYYY') */
+                                    }}
                                     className="w-100-p"
                                     placeholder="请选择竣工日期"
                                 />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="设计使用年限" name="houseInfo.usefulYear">
+                            <Row>
-                                <Row type="flex">
                                 <Col flex="1">
+                                    <Form.Item
+                                        label="设计使用年限"
+                                        name={['houseInfo', 'usefulYear']}
+                                        rules={[{ required: true, message: '请输入设计使用年限' }]}
+                                    >
                                         <InputNumber
                                             min={0}
                                             className="w-100-p"
                                             placeholder="请输入设计使用年限"
                                         />
+                                    </Form.Item>
                                 </Col>
                                 <Col>
                                     <span className="yo-addon">年</span>
                                 </Col>
                             </Row>
-                            </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="总建筑面积" name="houseInfo.totalArea">
+                            <Row>
-                                <Row type="flex">
                                 <Col flex="1">
+                                    <Form.Item
+                                        label="总建筑面积"
+                                        name={['houseInfo', 'totalArea']}
+                                        rules={[{ required: true, message: '请输入总建筑面积' }]}
+                                    >
                                         <InputNumber
                                             min={0}
                                             className="w-100-p"
                                             placeholder="请输入总建筑面积"
                                         />
+                                    </Form.Item>
                                 </Col>
                                 <Col>
                                     <span className="yo-addon">m²</span>
                                 </Col>
                             </Row>
-                            </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="总户数" name="houseInfo.houseHolds">
+                            <Row>
-                                <Row type="flex">
                                 <Col flex="1">
+                                    <Form.Item
+                                        label="总户数"
+                                        name={['houseInfo', 'houseHolds']}
+                                        rules={[{ required: true, message: '请输入总户数' }]}
+                                    >
                                         <InputNumber
                                             min={0}
                                             precision={0}
@@ -386,17 +428,21 @@ export default class building extends Component {
                                             className="w-100-p"
                                             placeholder="请输入总户数"
                                         />
+                                    </Form.Item>
                                 </Col>
                                 <Col>
                                     <span className="yo-addon">户</span>
                                 </Col>
                             </Row>
-                            </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="房屋单元数" name="houseInfo.units">
+                            <Row>
-                                <Row type="flex">
                                 <Col flex="1">
+                                    <Form.Item
+                                        label="房屋单元数"
+                                        name={['houseInfo', 'units']}
+                                        rules={[{ required: true, message: '请输入房屋单元数' }]}
+                                    >
                                         <InputNumber
                                             min={0}
                                             precision={0}
@@ -404,17 +450,23 @@ export default class building extends Component {
                                             className="w-100-p"
                                             placeholder="请输入房屋单元数"
                                         />
+                                    </Form.Item>
                                 </Col>
                                 <Col>
                                     <span className="yo-addon">单元</span>
                                 </Col>
                             </Row>
-                            </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="每层每单元户数" name="houseInfo.unitFloorHolds">
+                            <Row>
-                                <Row type="flex">
                                 <Col flex="1">
+                                    <Form.Item
+                                        label="每层每单元户数"
+                                        name={['houseInfo', 'unitFloorHolds']}
+                                        rules={[
+                                            { required: true, message: '请输入每层每单元户数' },
+                                        ]}
+                                    >
                                         <InputNumber
                                             min={0}
                                             precision={0}
@@ -422,53 +474,63 @@ export default class building extends Component {
                                             className="w-100-p"
                                             placeholder="请输入每层每单元户数"
                                         />
+                                    </Form.Item>
                                 </Col>
                                 <Col>
                                     <span className="yo-addon">户</span>
                                 </Col>
                             </Row>
-                            </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="建设单位" name="houseInfo.buildingUnit">
+                            <Form.Item label="建设单位" name={['houseInfo', 'buildingUnit']}>
                                 <Input autoComplete="off" placeholder="请输入建设单位" />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="建设单位联系人" name="houseInfo.buildingUnitUser">
+                            <Form.Item
+                                label="建设单位联系人"
+                                name={['houseInfo', 'buildingUnitUser']}
+                            >
                                 <Input autoComplete="off" placeholder="请输入建设单位联系人" />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="建设单位联系电话" name="houseInfo.buildingUnitTel">
+                            <Form.Item
+                                label="建设单位联系电话"
+                                name={['houseInfo', 'buildingUnitTel']}
+                            >
                                 <Input autoComplete="off" placeholder="请输入建设单位联系电话" />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="设计单位" name="houseInfo.desingerUnit">
+                            <Form.Item label="设计单位" name={['houseInfo', 'desingerUnit']}>
                                 <Input autoComplete="off" placeholder="请输入设计单位" />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="施工单位" name="houseInfo.constructionUnit">
+                            <Form.Item label="施工单位" name={['houseInfo', 'constructionUnit']}>
                                 <Input autoComplete="off" placeholder="请输入施工单位" />
                             </Form.Item>
                         </Col>
                         <Col span={8}>
-                            <Form.Item label="监理单位" name="houseInfo.monitorUnit">
+                            <Form.Item label="监理单位" name={['houseInfo', 'monitorUnit']}>
                                 <Input autoComplete="off" placeholder="请输入监理单位" />
                             </Form.Item>
                         </Col>
                         <Col span={24}>
                             <Form.Item label="建筑层数">
                                 <div className="ant-form-inline">
+                                    <Row align="middle">
+                                        <Col flex="1">
                                             <Form.Item
                                                 colon={false}
                                                 label="地上"
-                                        name="houseInfo.landFloorCount"
+                                                name={['houseInfo', 'landFloorCount']}
+                                                className="mr-none"
+                                                rules={[
+                                                    { required: true, message: '请输入地上层' },
+                                                ]}
                                             >
-                                        <Row type="flex" align="middle">
-                                            <Col flex="1">
                                                 <InputNumber
                                                     min={0}
                                                     precision={0}
@@ -476,19 +538,24 @@ export default class building extends Component {
                                                     className="w-100-p"
                                                     placeholder="请输入地上层"
                                                 />
+                                            </Form.Item>
                                         </Col>
                                         <Col>
                                             <span className="yo-addon">层</span>
                                         </Col>
                                     </Row>
-                                    </Form.Item>
+
+                                    <Row align="middle">
+                                        <Col flex="1">
                                             <Form.Item
                                                 colon={false}
                                                 label="地下"
-                                        name="houseInfo.underFloorCount"
+                                                name={['houseInfo', 'underFloorCount']}
+                                                className="mr-none"
+                                                rules={[
+                                                    { required: true, message: '请输入地下层' },
+                                                ]}
                                             >
-                                        <Row type="flex" align="middle">
-                                            <Col flex="1">
                                                 <InputNumber
                                                     min={0}
                                                     precision={0}
@@ -496,19 +563,21 @@ export default class building extends Component {
                                                     className="w-100-p"
                                                     placeholder="请输入地下层"
                                                 />
+                                            </Form.Item>
                                         </Col>
                                         <Col>
                                             <span className="yo-addon">层</span>
                                         </Col>
                                     </Row>
-                                    </Form.Item>
+
+                                    <Row align="middle">
+                                        <Col flex="1">
                                             <Form.Item
                                                 colon={false}
                                                 label="总共"
-                                        name="houseInfo.totalFloor"
+                                                name={['houseInfo', 'totalFloor']}
+                                                className="mr-none"
                                             >
-                                        <Row type="flex" align="middle">
-                                            <Col flex="1">
                                                 <InputNumber
                                                     min={0}
                                                     precision={0}
@@ -517,23 +586,26 @@ export default class building extends Component {
                                                     disabled
                                                     placeholder="请输入总层数"
                                                 />
+                                            </Form.Item>
                                         </Col>
                                         <Col>
                                             <span className="yo-addon">层</span>
                                         </Col>
                                     </Row>
-                                    </Form.Item>
                                 </div>
                             </Form.Item>
                             <Form.Item label="其中">
                                 <div className="ant-form-inline">
                                     <Form.Item>
-                                        <Row type="flex" align="middle">
+                                        <Row align="middle">
                                             <Col>
                                                 <span className="yo-addon">地上第</span>
                                             </Col>
                                             <Col flex="1">
-                                                <Form.Item className="mr-none" name="houseInfo.landBsFloorStart">
+                                                <Form.Item
+                                                    className="mr-none"
+                                                    name={['houseInfo', 'landBsFloorStart']}
+                                                >
                                                     <InputNumber
                                                         min={0}
                                                         step={1}
@@ -545,7 +617,10 @@ export default class building extends Component {
                                                 <span className="yo-addon">层，至</span>
                                             </Col>
                                             <Col flex="1">
-                                                <Form.Item className="mr-none" name="houseInfo.landBsFloorEnd">
+                                                <Form.Item
+                                                    className="mr-none"
+                                                    name={['houseInfo', 'landBsFloorEnd']}
+                                                >
                                                     <InputNumber
                                                         min={0}
                                                         step={1}
@@ -559,12 +634,15 @@ export default class building extends Component {
                                         </Row>
                                     </Form.Item>
                                     <Form.Item>
-                                        <Row type="flex" align="middle">
+                                        <Row align="middle">
                                             <Col>
                                                 <span className="yo-addon">地上</span>
                                             </Col>
                                             <Col flex="1">
-                                                <Form.Item className="mr-none" name="houseInfo.landBikeFloorStart">
+                                                <Form.Item
+                                                    className="mr-none"
+                                                    name={['houseInfo', 'landBikeFloorStart']}
+                                                >
                                                     <InputNumber
                                                         min={0}
                                                         step={1}
@@ -578,12 +656,15 @@ export default class building extends Component {
                                         </Row>
                                     </Form.Item>
                                     <Form.Item>
-                                        <Row type="flex" align="middle">
+                                        <Row align="middle">
                                             <Col>
                                                 <span className="yo-addon">地上第</span>
                                             </Col>
                                             <Col flex="1">
-                                                <Form.Item className="mr-none" name="houseInfo.landResidenceFloorStart">
+                                                <Form.Item
+                                                    className="mr-none"
+                                                    name={['houseInfo', 'landResidenceFloorStart']}
+                                                >
                                                     <InputNumber
                                                         min={0}
                                                         step={1}
@@ -595,7 +676,10 @@ export default class building extends Component {
                                                 <span className="yo-addon">层，至</span>
                                             </Col>
                                             <Col flex="1">
-                                                <Form.Item className="mr-none" name="houseInfo.landResidenceFloorEnd">
+                                                <Form.Item
+                                                    className="mr-none"
+                                                    name={['houseInfo', 'landResidenceFloorEnd']}
+                                                >
                                                     <InputNumber
                                                         min={0}
                                                         step={1}

web-react/src/pages/business/house/info/form/base/index.jsx

@@ -1,47 +1,30 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import { Row, Col, Card, Anchor } from 'antd'
+import { Row, Col, Card, Anchor, Spin } from 'antd'
 import { defaultsDeep } from 'lodash'
-import { ComponentDynamic, Container } from 'components'
+import { AntIcon, ComponentDynamic, Container } from 'components'
 
 const parts = [
     {
         title: '建筑物基本信息',
         component: () => import('./building'),
     },
-    {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
-    },
-    {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
-    },
-    {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
-    },
-    {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
-    },
-    {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
-    },
 ]
 
 export default class index extends Component {
-
     container = window
-    forms = []
 
-    constructor(props) {
+    children = []
-        super(props)
 
-        // 使父组件获取到当前组件实例
+    formData = {}
-        if (props.onRef) {
+
-            props.onRef(this)
+    shouldComponentUpdate(props) {
+        return this.props.loading !== props.loading
+    }
+
+    componentDidMount() {
+        if (this.props.onRef) {
+            this.props.onRef(this)
         }
     }
 
@@ -49,68 +32,63 @@ export default class index extends Component {
         return this.container
     }
 
-    setContainer = (container) => {
+    setContainer = container => {
         this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
     }
 
-    onGetData = () => {
+    async getData() {
-        return new Promise(async (resolve, reject) => {
+        for (const child of this.children) {
-            let formData = {},
+            const data = await child.getData()
-                flag = true
+            this.formData = {
-            for (let i = 0; i < this.forms.length; i++) {
+                ...this.formData,
-                const form = this.forms[i]
+                ...data,
-                try {
-                    const data = await form.onGetData()
-                    formData = defaultsDeep(formData, data)
-                } catch (err) {
-                    flag = false
-                    reject(err)
             }
         }
-            if (flag) {
+
-                resolve(formData)
+        return this.formData
-            }
-        })
     }
 
     render() {
+        const { id, loading } = this.props
+
         return (
             <Container mode="fluid" ref={this.setContainer}>
                 <Row gutter={16} type="flex">
                     <Col flex="1">
                         <br />
+                        <div className="yo-adorn--house-top" />
                         <Card className="yo-form-page--body">
-                            {
+                            {parts.map((part, i) => (
-                                parts.map((part, i) => {
+                                <section key={i} id={`form-${i}-${id}`}>
-                                    return (
-                                        <section key={i} id={`form-${i}-${this.props.id}`}>
                                     {part.title && <h5>{part.title}</h5>}
-                                            <ComponentDynamic is={part.component} {...this.props} onRef={c => this.forms.push(c)} />
+                                    <Spin
+                                        spinning={loading}
+                                        indicator={<AntIcon type="loading" />}
+                                        wrapperClassName="h-400-min"
+                                    >
+                                        {!loading && (
+                                            <ComponentDynamic
+                                                is={part.component}
+                                                {...this.props}
+                                                onRef={c => this.children.push(c)}
+                                            />
+                                        )}
+                                    </Spin>
                                 </section>
-                                    )
+                            ))}
-                                })
-                            }
                         </Card>
                     </Col>
                     <Col flex="240px">
                         <Anchor
                             getContainer={this.getContainer}
                             offsetTop={24}
-                            targetOffset={48}
+                            targetOffset={100}
                             wrapperStyle={{ backgroundColor: 'transparent' }}
-                            onClick={(e) => e.preventDefault()}
+                            onClick={e => e.preventDefault()}
                         >
-                            {
+                            {parts.map((part, i) => (
-                                parts.map((part, i) => {
+                                <Anchor.Link key={i} href={`#form-${i}-${id}`} title={part.title} />
-                                    return (
+                            ))}
-                                        <Anchor.Link
-                                            key={i}
-                                            href={`#form-${i}-${this.props.id}`}
-                                            title={part.title}
-                                        />
-                                    )
-                                })
-                            }
                         </Anchor>
                     </Col>
                 </Row>

web-react/src/pages/business/house/info/form/index.jsx

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
-import { Tabs, Button, message } from 'antd'
+import { Button, Descriptions, message as Message, Spin, Tabs } from 'antd'
-import { defaultsDeep } from 'lodash'
+import { defaultsDeep, isEqual } from 'lodash'
-import { ComponentDynamic, Container } from 'components'
+import { AntIcon, ComponentDynamic, Container } from 'components'
+import { api } from 'common/api'
 
 const tabs = [
     {
@@ -48,66 +49,114 @@ const tabs = [
 ]
 
 export default class index extends Component {
-
     state = {
-        actived: '0'
+        actived: '0',
-    }
-    forms = []
 
-    onSubmit = async () => {
+        loading: true,
-        let formData = {},
+        record: null,
-            flag = true
+    }
-        for (let i = 0; i < this.forms.length; i++) {
+
-            const form = this.forms[i]
+    children = []
-            try {
+
-                const data = await form.onGetData()
+    formData = {}
-                formData = defaultsDeep(formData, data)
+
-            } catch (err) {
+    shouldComponentUpdate(props, state) {
-                if (err) {
+        return !isEqual(this.state, state)
-                    err.errorFields.forEach(p => {
+    }
-                        message.error(p.errors[0])
+
+    componentDidMount() {
+        const { taskId } = this.props.param
+
+        if (taskId) {
+            api.houseInfoGetByTaskId({ taskId }).then(({ data }) => {
+                this.setState({
+                    record: data,
+                    loading: false,
+                })
             })
         }
-                flag = false
+    }
+
+    async onSubmit() {
+        for (const child of this.children) {
+            try {
+                const data = await child.getData()
+                this.formData = {
+                    ...this.formData,
+                    ...data,
+                }
+            } catch (e) {
+                return e
             }
         }
 
-        if (!flag) {
+        console.log(this.formData)
-            return
-        }
 
-        console.log(formData)
+        Message.success('提交成功')
-
-        message.success('提交成功')
     }
 
     render() {
+        const { loading, record } = this.state
+
         return (
             <div className="yo-form-page">
                 <div className="yo-form-page-layout">
                     {/* 底部工具栏(需放在前面) */}
                     <div className="yo-form-page--bar yo-form-page--bar--with-tab">
-                        <Container>
+                        <Container mode="fluid">
                             <div className="yo-form-page--bar-inner">
+                                <span>{/* 可以在工具栏中增加其他控件(只能在一行内) */}</span>
                                 <span>
-                                    {/* 可以在工具栏中增加其他控件(只能在一行内) */}
+                                    <Button onClick={() => window.closeContentWindow()}>
-                                </span>
+                                        取消
-                                <span>
+                                    </Button>
-                                    <Button onClick={() => window.closeContentWindow()}>取消</Button>
+                                    <Button onClick={() => this.onSubmit()} type="primary">
-                                    <Button onClick={this.onSubmit} type="primary">保存</Button>
+                                        保存
+                                    </Button>
                                 </span>
                             </div>
                         </Container>
                     </div>
-                    <div className="yo-form-page--header"></div>
+                    <div className="yo-form-page--header" style={{ paddingBottom: 0 }}>
+                        <Container mode="fluid">
+                            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                                <Descriptions column={4}>
+                                    <Descriptions.Item label="区县（市）">
+                                        {record && record.houseCode.areaName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="街道（乡镇）">
+                                        {record && record.houseCode.roadName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="社区">
+                                        {record && record.houseCode.commName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="片区">
+                                        {record && record.houseCode.zoneName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="2" label="编号">
+                                        {record &&
+                                            `${record.houseCode.areaName}-${
+                                                record.houseCode.roadName
+                                            }-${record.houseCode.commName}-${
+                                                record.houseCode.projectFullName
+                                            }-${record.houseCode.no.toString().padStart(3, '0')}`}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="2" label="编码">
+                                        {record && record.houseCode.houseCode}
+                                    </Descriptions.Item>
+                                </Descriptions>
+                            </Spin>
+                        </Container>
+                    </div>
                     <div className="yo-tab-external-mount">
                         <Tabs
                             activeKey={this.state.actived}
                             animated={false}
-                            onChange={(activeKey) => { this.setState({ actived: activeKey }) }}
+                            onChange={activeKey => {
+                                this.setState({ actived: activeKey })
+                            }}
                         >
-                            {
+                            {tabs.map((tab, i) => {
-                                tabs.map((tab, i) => {
                                 if (tab.show) {
                                     return (
                                         <Tabs.TabPane
@@ -118,27 +167,33 @@ export default class index extends Component {
                                     )
                                 }
                                 return <></>
-                                })
+                            })}
-                            }
                         </Tabs>
                         <div className="yo-tab-external-mount-content">
-                            {
+                            {tabs.map((tab, i) => {
-                                tabs.map((tab, i) => {
                                 if (tab.show) {
                                     return (
                                         <div
                                             key={i}
                                             className={
-                                                    (this.state.actived === i.toString() ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive') + ' yo-tab-external-tabpane'
+                                                (this.state.actived === i.toString()
+                                                    ? 'yo-tab-external-tabpane-active'
+                                                    : 'yo-tab-external-tabpane-inactive') +
+                                                ' yo-tab-external-tabpane'
                                             }
                                         >
-                                                <ComponentDynamic is={tab.component} {...this.props} onRef={c => this.forms.push(c)} />
+                                            <ComponentDynamic
+                                                is={tab.component}
+                                                {...this.props}
+                                                record={record}
+                                                loading={loading}
+                                                onRef={c => this.children.push(c)}
+                                            />
                                         </div>
                                     )
                                 }
                                 return <></>
-                                })
+                            })}
-                            }
                         </div>
                     </div>
                 </div>

web-react/src/pages/business/house/task/index.jsx

@@ -0,0 +1,265 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm, Radio, Select, Tag } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.houseTaskPage,
+}
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = 'houseTask'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            dicHouseType: [],
+            dicHouseIndustry: [],
+        },
+
+        type: '',
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = [
+        {
+            title: '房屋编码',
+            dataIndex: 'houseCode',
+            sorter: true,
+            width: 300,
+            render: (text, record) => (
+                <>
+                    {`${record.areaName}-${record.roadName}-${record.commName}-${
+                        record.note
+                    }-${record.no.toString().padStart(3, '0')}`}
+                    <br />
+                    <Tag color="purple">{text}</Tag>
+                </>
+            ),
+        },
+        {
+            title: '房屋性质及行业',
+            dataIndex: 'type',
+            sorter: true,
+            width: 150,
+            render: text => this.bindCodeValue(text, 'dic_house_type'),
+        },
+        {
+            title: '地址',
+            dataIndex: 'address',
+            sorter: true,
+        },
+        {
+            title: '任务截止时间',
+            dataIndex: 'endTime',
+            sorter: true,
+            width: 150,
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ houseInfo: 'getByTaskId' })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth={{ houseInfo: 'getByTaskId' }}>
+                            <a onClick={() => this.onOpen(record.id)}>登记</a>
+                        </Auth>
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('dic_house_type', 'dic_house_industry').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
+    onOpen(taskId) {
+        window.openContentWindow({
+            title: '房屋登记',
+            path: 'business/house/info/form',
+            param: {
+                taskId,
+            },
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        const { codes, type } = this.state
+
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        queryInitialValues={{
+                            type: '',
+                        }}
+                        onQueryChange={values => {
+                            if (values.hasOwnProperty('type')) {
+                                this.setState({ type: values.type })
+                            }
+                        }}
+                        query={
+                            <Auth auth={{ [authName]: 'page' }}>
+                                <Form.Item label="房屋性质" name="type">
+                                    <Radio.Group buttonStyle="solid">
+                                        <Radio.Button value="">全部</Radio.Button>
+                                        {codes.dicHouseType.map(item => (
+                                            <Radio.Button key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Radio.Button>
+                                        ))}
+                                    </Radio.Group>
+                                </Form.Item>
+                                {type == 2 && (
+                                    <Form.Item label="行业" name="industry">
+                                        <Select
+                                            allowClear
+                                            className="w-150"
+                                            placeholder="请选择行业"
+                                        >
+                                            {codes.dicHouseIndustry.map(item => (
+                                                <Select.Option key={item.code} value={item.code}>
+                                                    {item.value}
+                                                </Select.Option>
+                                            ))}
+                                        </Select>
+                                    </Form.Item>
+                                )}
+                                <Form.Item label="地址" name="address">
+                                    <Input autoComplete="off" placeholder="请输入地址" />
+                                </Form.Item>
+                                <Form.Item label="房屋唯一编码" name="houseCode">
+                                    <Input autoComplete="off" placeholder="请输入房屋唯一编码" />
+                                </Form.Item>
+                            </Auth>
+                        }
+                    />
+                </Card>
+            </Container>
+        )
+    }
+}