From 38493fba3eb71da5325d62157064bcb0c66e8671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?= <188633308@qq.com> Date: Tue, 22 Jun 2021 16:43:40 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E6=88=BF=E5=B1=8B=E5=9F=BA=E6=9C=AC?= =?UTF-8?q?=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../house/info/form/base/building.jsx | 869 +++++++++--------- .../business/house/info/form/base/drawing.jsx | 163 ++++ .../house/info/form/base/identification.jsx | 155 ++++ .../business/house/info/form/base/index.jsx | 59 +- .../house/info/form/base/investigation.jsx | 301 ++++++ .../house/info/form/base/ownership.jsx | 253 +++++ .../business/house/info/form/base/unit.jsx | 154 ++++ 7 files changed, 1507 insertions(+), 447 deletions(-) create mode 100644 web-react/src/pages/business/house/info/form/base/drawing.jsx create mode 100644 web-react/src/pages/business/house/info/form/base/identification.jsx create mode 100644 web-react/src/pages/business/house/info/form/base/investigation.jsx create mode 100644 web-react/src/pages/business/house/info/form/base/ownership.jsx create mode 100644 web-react/src/pages/business/house/info/form/base/unit.jsx diff --git a/web-react/src/pages/business/house/info/form/base/building.jsx b/web-react/src/pages/business/house/info/form/base/building.jsx index cb66545..52264fe 100644 --- a/web-react/src/pages/business/house/info/form/base/building.jsx +++ b/web-react/src/pages/business/house/info/form/base/building.jsx @@ -12,7 +12,7 @@ import { DatePicker, Spin, } from 'antd' -import { cloneDeep, isEqual } from 'lodash' +import { cloneDeep, first, isEqual, last, sortBy } from 'lodash' import { AntIcon } from 'components' import getDictData from 'util/dic' import moment from 'moment' @@ -23,6 +23,8 @@ const layout = { wrapperCol: { flex: '1' }, } +const checkboxKeys = ['insulationMaterial', 'wallMaterial'] + export default class building extends Component { state = { loading: true, @@ -39,6 +41,7 @@ export default class building extends Component { }, showMap: false, + showKeepWarmMaterialText: false, } form = React.createRef() @@ -67,14 +70,26 @@ export default class building extends Component { */ async fillData(params) { this.record = cloneDeep(params.record) + const _state = { loading: false } //#region 从后端转换成前段所需格式 if (this.record) { - const { completedDate } = this.record.houseInfo - this.record.houseInfo.completedDate = completedDate - ? moment(completedDate) - : completedDate + const { houseInfo } = this.record + if (houseInfo.completedDate) { + houseInfo.completedDate = moment(houseInfo.completedDate) + } + + // checkbox + checkboxKeys.forEach(key => { + if (houseInfo[key]) { + houseInfo[key] = houseInfo[key].split(',') + } + }) + + if (houseInfo.insulationMaterial) { + _state.showKeepWarmMaterialText = houseInfo.insulationMaterial.includes('100') + } } - const codes = await getDictData( + _state.codes = await getDictData( 'dic_land_attribute', 'dic_house_structure_type', 'dic_house_aseismic_grade', @@ -85,13 +100,11 @@ export default class building extends Component { 'dic_house_building_curtain_wall', 'dic_house_elevator' ) - this.setState({ - codes, - }) + //#endregion this.form.current.setFieldsValue(this.record) - this.setState({ loading: false }) + this.setState(_state) this.call() } @@ -108,15 +121,47 @@ export default class building extends Component { if (valid) { const postData = form.getFieldsValue() //#region 从前段转换后端所需格式 - if (postData.houseInfo.completedDate) { - postData.houseInfo.completedDate = - postData.houseInfo.completedDate.format('YYYY-MM-DD') + const { houseInfo } = postData + if (houseInfo.completedDate) { + houseInfo.completedDate = houseInfo.completedDate.format('YYYY-MM-DD') } + + // checkbox + checkboxKeys.forEach(key => { + if (houseInfo[key]) { + houseInfo[key] = sortBy(houseInfo[key], p => +p).join(',') + } + }) //#endregion return postData } } + onValuesChange(changedValues, allValues) { + const form = this.form.current + const { houseInfo } = changedValues + if ( + houseInfo.hasOwnProperty('landFloorCount') || + houseInfo.hasOwnProperty('underFloorCount') + ) { + const { + houseInfo: { landFloorCount, underFloorCount }, + } = allValues + form.setFieldsValue({ + houseInfo: { + totalFloor: +landFloorCount + +underFloorCount, + }, + }) + } + + if (houseInfo.hasOwnProperty('insulationMaterial')) { + const value = this.checkedNone(houseInfo.insulationMaterial, 'insulationMaterial') + this.setState({ + showKeepWarmMaterialText: value.includes('100'), + }) + } + } + //#region 自定义方法 onShowMap() { this.setState({ showMap: true }, async () => { @@ -254,14 +299,38 @@ export default class building extends Component { setPosition(address, { lng, lat }) { this.form.current.setFieldsValue({ houseCode: { address, lng, lat } }) } + + checkedNone(value, key) { + const form = this.form.current + if (first(value) == 0 && value.length > 1) { + // 在'无'之后选中其他值 + value.shift() + form.setFieldsValue({ + houseInfo: { [key]: value }, + }) + } else if (last(value) == 0 && value.length > 1) { + // 在其他值之后选中'无' + value = ['0'] + form.setFieldsValue({ + houseInfo: { [key]: value }, + }) + } + return value + } //#endregion render() { - const { loading, codes, showMap } = this.state + const { loading, codes, showMap, showKeepWarmMaterialText } = this.state return ( }> -
+ + this.onValuesChange(changedValues, allValues) + } + > - - + + + + {codes.dicLandAttribute.map(item => { + return ( + + {item.value} + + ) + })} + + + + + + + + + + + + + + + + + + {showMap ? ( +
+
+ +
+
+
+ ) : ( + - )} - - - - - - {codes.dicHouseStructureType.map(item => { - return ( - - {item.value} - - ) - })} - - - + 查看地图 + + )} + + + + {codes.dicHouseStructureType.map(item => { + return ( + + {item.value} + + ) + })} + + + - - - - {codes.dicHouseInsulationMaterial.map(item => { - return ( - - {item.value} - - ) - })} - - - - - - - - {codes.dicHouseWallMaterial.map(item => { - return ( - - {item.value} - - ) - })} - - - - - - 外墙外保温材料 -
- 防火等级 - - } - name={['houseInfo', 'fireproofGrade']} - > - - {codes.dicHouseFireproofGrade.map(item => { - return ( - - {item.value} - - ) - })} - - - - - - - {codes.dicHouseBuildingCurtainWall.map(item => { - return ( - - {item.value} - - ) - })} - - - + + + + + {codes.dicHouseInsulationMaterial.map(item => { + return ( + + {item.value} + + ) + })} + + + {showKeepWarmMaterialText && ( + + + + )} + + + {codes.dicHouseWallMaterial.map(item => { + return ( + + {item.value} + + ) + })} + + + + 外墙外保温材料 +
+ 防火等级 + + } + name={['houseInfo', 'fireproofGrade']} + > + + {codes.dicHouseFireproofGrade.map(item => { + return ( + + {item.value} + + ) + })} + + + + + {codes.dicHouseBuildingCurtainWall.map(item => { + return ( + + {item.value} + + ) + })} + + + - - - - - - - - 年 - - + + + + + + + + + 年 + + + - - - - - - - - m² - - + + + + + + + + + m² + + + - - - - - - - - 户 - - + + + + + + + + + 户 + + + - - - - - - - - 单元 - - + + + + + + + + + 单元 + + + - - - - - - - - 户 - - + + + + + + + + + 户 + + + @@ -696,181 +762,126 @@ export default class building extends Component { - -
- - + + + + - - - 层 - - - - - +
层；
+ + + + - - - 层 - - - - - - +
层；
+ + + + + - - - 层 - - -
+
层
+ + + -
- - - - 地上第 - - - - - - - - 层，至 - - - - - - - - 层为商业用房 - - - - - - - 地上 - - - - - - - - 层为车棚层 - - - - - - - 地上第 - - - - - - - - 层，至 - - - - - - - - 层为住宅 - - - -
+ + + 地上第 + + + + + + + + 层，至 + + + + + + + + 层为商业用房； + + + 地上 + + + + + + + + 层为车棚层； + + + 地上第 + + + + + + + + 层，至 + + + + + + + + 层为住宅 + + diff --git a/web-react/src/pages/business/house/info/form/base/drawing.jsx b/web-react/src/pages/business/house/info/form/base/drawing.jsx new file mode 100644 index 0000000..7654f80 --- /dev/null +++ b/web-react/src/pages/business/house/info/form/base/drawing.jsx @@ -0,0 +1,163 @@ +import React, { Component } from 'react' +import { Checkbox, Col, Form, Input, Row, Spin } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep, isEqual, sortBy } from 'lodash' +import getDictData from 'util/dic' + +const initialValues = {} + +const layout = { + labelCol: { flex: '150px' }, + wrapperCol: { flex: '1' }, +} + +export default class drawing extends Component { + state = { + loading: true, + codes: { + dicHouseStorageOfDrawings: [], + }, + options: {}, + + showDrawingMaterialText: false, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @param {*} props + * @param {*} state + * @returns + */ + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + /** + * DOM加载完成钩子,绑定数据 + */ + componentDidMount() { + this.fillData({ + record: this.props.record, + }) + } + + /** + * 加载完成,通知父级组件并传递自身 + */ + call() { + const { onRef } = this.props + if (onRef) onRef(this) + } + + /** + * 填充数据 + * 可以在设置this.record之后对其作出数据结构调整 + * [异步,必要] + * @param {*} params + */ + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + if (this.record) { + const { houseInfo } = this.record + // checkbox + if (houseInfo.drawingMaterial) { + houseInfo.drawingMaterial = houseInfo.drawingMaterial.split(',') + } + this.setState({ showDrawingMaterialText: houseInfo.drawingMaterial.includes('100') }) + } + const codes = await getDictData('dic_house_storage_of_drawings') + this.setState({ codes }) + //#endregion + this.form.current.setFieldsValue(this.record) + + this.setState({ loading: false }) + this.call() + } + + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + //#region 从前段转换后端所需格式 + const { houseInfo } = postData + // checkbox + if (houseInfo.drawingMaterial) { + houseInfo.drawingMaterial = sortBy(houseInfo.drawingMaterial, p => +p).join(',') + } + //#endregion + return postData + } + } + + //#region 自定义方法 + /** + * 表单change事件处理,包括了所有字段的change + * [异步,非必要] + * @param {*} changedValues + * @param {*} allValues + */ + async onValuesChange(changedValues, allValues) { + const { houseInfo } = changedValues + if (houseInfo.hasOwnProperty('drawingMaterial')) { + this.setState({ showDrawingMaterialText: houseInfo.drawingMaterial.includes('100') }) + } + } + //#endregion + + render() { + const { loading, codes, showDrawingMaterialText } = this.state + + return ( + }> + + this.onValuesChange(changedValues, allValues) + } + > + + + {codes.dicHouseStorageOfDrawings.map(item => ( + + {item.value} + + ))} + + + {showDrawingMaterialText && ( + + + + )} + +
+ ) + } +} diff --git a/web-react/src/pages/business/house/info/form/base/identification.jsx b/web-react/src/pages/business/house/info/form/base/identification.jsx new file mode 100644 index 0000000..9950546 --- /dev/null +++ b/web-react/src/pages/business/house/info/form/base/identification.jsx @@ -0,0 +1,155 @@ +import React, { Component } from 'react' +import { Form, Radio, Spin } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep, isEqual } from 'lodash' +import getDictData from 'util/dic' + +const initialValues = {} + +const layout = { + labelCol: { flex: '150px' }, + wrapperCol: { flex: '1' }, +} + +export default class identification extends Component { + state = { + loading: true, + codes: { + dicHouseIdentification: [], + dicHouseGovernment: [], + dicHouseUsedStatus: [], + dicHouseGrade: [], + }, + options: {}, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @param {*} props + * @param {*} state + * @returns + */ + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + /** + * DOM加载完成钩子,绑定数据 + */ + componentDidMount() { + this.fillData({ + record: this.props.record, + }) + } + + /** + * 加载完成,通知父级组件并传递自身 + */ + call() { + const { onRef } = this.props + if (onRef) onRef(this) + } + + /** + * 填充数据 + * 可以在设置this.record之后对其作出数据结构调整 + * [异步,必要] + * @param {*} params + */ + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + const codes = await getDictData( + 'dic_house_identification', + 'dic_house_government', + 'dic_house_used_status', + 'dic_house_grade' + ) + this.setState({ codes }) + //#endregion + this.form.current.setFieldsValue(this.record) + + this.setState({ loading: false }) + this.call() + } + + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + + //#region 自定义方法 + /** + * 表单change事件处理,包括了所有字段的change + * [异步,非必要] + * @param {*} changedValues + * @param {*} allValues + */ + async onValuesChange(changedValues, allValues) {} + //#endregion + + render() { + const { loading, codes } = this.state + + return ( + }> +
+ this.onValuesChange(changedValues, allValues) + } + > + + + {codes.dicHouseUsedStatus.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseGrade.map(item => ( + + {item.value} + + ))} + + +
+ + ) + } +} diff --git a/web-react/src/pages/business/house/info/form/base/index.jsx b/web-react/src/pages/business/house/info/form/base/index.jsx index f83000d..c191016 100644 --- a/web-react/src/pages/business/house/info/form/base/index.jsx +++ b/web-react/src/pages/business/house/info/form/base/index.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom' -import { Row, Col, Card, Anchor, Spin } from 'antd' -import { defaultsDeep, merge } from 'lodash' +import { Row, Col, Card, Anchor, Spin, Divider } from 'antd' +import { merge } from 'lodash' import { AntIcon, ComponentDynamic, Container } from 'components' const parts = [ @@ -9,6 +9,22 @@ const parts = [ title: '建筑物基本信息', component: () => import('./building'), }, + { + title: '权属情况', + component: () => import('./ownership'), + }, + { + title: '调查情况', + component: () => import('./investigation'), + }, + { + title: '鉴定治理', + component: () => import('./identification'), + }, + { + title: '图纸资料存档处', + component: () => import('./drawing'), + }, { title: '相关附件资料', component: () => import('./attachments'), @@ -17,6 +33,10 @@ const parts = [ title: '建筑概貌', component: () => import('./aspect'), }, + { + title: '调查单位', + component: () => import('./unit'), + }, ] export default class index extends Component { @@ -68,22 +88,25 @@ export default class index extends Component {
{parts.map((part, i) => ( -
- {part.title &&
{part.title}
} - } - wrapperClassName={loading && 'h-400-min'} - > - {!loading && ( - this.call(child, i)} - /> - )} - -
+ +
+ {part.title &&
{part.title}
} + } + wrapperClassName={loading && 'h-400-min'} + > + {!loading && ( + this.call(child, i)} + /> + )} + +
+ {i < parts.length - 1 && } + ))} diff --git a/web-react/src/pages/business/house/info/form/base/investigation.jsx b/web-react/src/pages/business/house/info/form/base/investigation.jsx new file mode 100644 index 0000000..d400a38 --- /dev/null +++ b/web-react/src/pages/business/house/info/form/base/investigation.jsx @@ -0,0 +1,301 @@ +import React, { Component } from 'react' +import { Checkbox, Form, Input, Radio, Spin } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep, first, isEqual, last, sortBy } from 'lodash' +import getDictData from 'util/dic' + +const initialValues = {} + +const layout = { + labelCol: { flex: '150px' }, + wrapperCol: { flex: '1' }, +} + +const checkboxKeys = [ + 'houseSite', + 'adjacentConstruction', + 'chemicalErosion', + 'repairAndReinforce', + 'historicalCalamity', + 'functionalChange', +] + +export default class investigation extends Component { + state = { + loading: true, + codes: { + dicHouseHouseSite: [], + dicHouseAdjacentConstruction: [], + dicHouseChemicalErosion: [], + dicHouseStructuralDismantling: [], + dicHouseAddingLayer: [], + dicHouseRepairAndReinforce: [], + dicHouseHistoricalCalamity: [], + dicHouseFunctionalChange: [], + }, + options: {}, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @param {*} props + * @param {*} state + * @returns + */ + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + /** + * DOM加载完成钩子,绑定数据 + */ + componentDidMount() { + this.fillData({ + record: this.props.record, + }) + } + + /** + * 加载完成,通知父级组件并传递自身 + */ + call() { + const { onRef } = this.props + if (onRef) onRef(this) + } + + /** + * 填充数据 + * 可以在设置this.record之后对其作出数据结构调整 + * [异步,必要] + * @param {*} params + */ + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + if (this.record) { + const { houseInfo } = this.record + // checkbox + checkboxKeys.forEach(key => { + if (houseInfo[key]) { + houseInfo[key] = houseInfo[key].split(',') + } + }) + } + const codes = await getDictData( + 'dic_house_house_site', + 'dic_house_adjacent_construction', + 'dic_house_chemical_erosion', + 'dic_house_structural_dismantling', + 'dic_house_adding_layer', + 'dic_house_repair_and_reinforce', + 'dic_house_historical_calamity', + 'dic_house_functional_change' + ) + this.setState({ codes }) + //#endregion + this.form.current.setFieldsValue(this.record) + + this.setState({ loading: false }) + this.call() + } + + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + //#region 从前段转换后端所需格式 + const { houseInfo } = postData + // checkbox + checkboxKeys.forEach(key => { + if (houseInfo[key]) { + houseInfo[key] = sortBy(houseInfo[key], p => +p).join(',') + } + }) + //#endregion + return postData + } + } + + //#region 自定义方法 + /** + * 表单change事件处理,包括了所有字段的change + * [异步,非必要] + * @param {*} changedValues + * @param {*} allValues + */ + async onValuesChange(changedValues, allValues) { + const { houseInfo } = changedValues + const key = Object.keys(houseInfo).shift() + if ( + [ + 'adjacentConstruction', + 'chemicalErosion', + 'repairAndReinforce', + 'historicalCalamity', + 'functionalChange', + ].includes(key) + ) { + this.checkedNone(houseInfo[key], key) + } + } + + checkedNone(value, key) { + const form = this.form.current + if (first(value) == 0 && value.length > 1) { + // 在'无'之后选中其他值 + value.shift() + form.setFieldsValue({ + houseInfo: { [key]: value }, + }) + } else if (last(value) == 0 && value.length > 1) { + // 在其他值之后选中'无' + value = ['0'] + form.setFieldsValue({ + houseInfo: { [key]: value }, + }) + } + return value + } + //#endregion + + render() { + const { loading, codes } = this.state + + return ( + }> +
+ this.onValuesChange(changedValues, allValues) + } + > + + + {codes.dicHouseHouseSite.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseAdjacentConstruction.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseChemicalErosion.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseStructuralDismantling.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseAddingLayer.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseRepairAndReinforce.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseHistoricalCalamity.map(item => ( + + {item.value} + + ))} + + + + + {codes.dicHouseFunctionalChange.map(item => ( + + {item.value} + + ))} + + + + + +
+ + ) + } +} diff --git a/web-react/src/pages/business/house/info/form/base/ownership.jsx b/web-react/src/pages/business/house/info/form/base/ownership.jsx new file mode 100644 index 0000000..cbc48c0 --- /dev/null +++ b/web-react/src/pages/business/house/info/form/base/ownership.jsx @@ -0,0 +1,253 @@ +import React, { Component } from 'react' +import { Col, Form, Input, InputNumber, Radio, Row, Spin } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep, isEqual } from 'lodash' +import getDictData from 'util/dic' + +const initialValues = {} + +const layout = { + labelCol: { flex: '150px' }, + wrapperCol: { flex: '1' }, +} + +export default class ownership extends Component { + state = { + loading: true, + codes: { + dicHousePropertyRights: [], + }, + options: {}, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @param {*} props + * @param {*} state + * @returns + */ + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + /** + * DOM加载完成钩子,绑定数据 + */ + componentDidMount() { + this.fillData({ + record: this.props.record, + }) + } + + /** + * 加载完成,通知父级组件并传递自身 + */ + call() { + const { onRef } = this.props + if (onRef) onRef(this) + } + + /** + * 填充数据 + * 可以在设置this.record之后对其作出数据结构调整 + * [异步,必要] + * @param {*} params + */ + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + const codes = await getDictData('dic_house_property_rights') + this.setState({ codes }) + //#endregion + this.form.current.setFieldsValue(this.record) + + this.setState({ loading: false }) + this.call() + } + + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + + //#region 自定义方法 + /** + * 表单change事件处理,包括了所有字段的change + * [异步,非必要] + * @param {*} changedValues + * @param {*} allValues + */ + async onValuesChange(changedValues, allValues) {} + //#endregion + + render() { + const { loading, codes } = this.state + + return ( + }> +
+ this.onValuesChange(changedValues, allValues) + } + > + + + {codes.dicHousePropertyRights.map(item => ( + + {item.value} + + ))} + + + + + + + + + +
套；
+ + + + + + + +
套；
+ + + + + + + +
套；
+ + + + + + + + + +
套；
+ + + + + + + +
套；
+ + + + + + + +
套；
+ + + + + + + + + +
套；
+ + + + + + + +
套
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + ) + } +} diff --git a/web-react/src/pages/business/house/info/form/base/unit.jsx b/web-react/src/pages/business/house/info/form/base/unit.jsx new file mode 100644 index 0000000..b04f5ed --- /dev/null +++ b/web-react/src/pages/business/house/info/form/base/unit.jsx @@ -0,0 +1,154 @@ +import React, { Component } from 'react' +import { Col, Form, Input, Row, Spin } from 'antd' +import { AntIcon } from 'components' +import { cloneDeep, isEqual } from 'lodash' + +const initialValues = {} + +const layout = { + labelCol: { flex: '150px' }, + wrapperCol: { flex: '1' }, +} + +export default class unit extends Component { + state = { + loading: true, + codes: {}, + options: {}, + } + + // 表单实例 + form = React.createRef() + + // 初始化数据 + record = {} + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @param {*} props + * @param {*} state + * @returns + */ + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + /** + * DOM加载完成钩子,绑定数据 + */ + componentDidMount() { + this.fillData({ + record: this.props.record, + }) + } + + /** + * 加载完成,通知父级组件并传递自身 + */ + call() { + const { onRef } = this.props + if (onRef) onRef(this) + } + + /** + * 填充数据 + * 可以在设置this.record之后对其作出数据结构调整 + * [异步,必要] + * @param {*} params + */ + async fillData(params) { + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + //#endregion + this.form.current.setFieldsValue(this.record) + + this.setState({ loading: false }) + this.call() + } + + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + + //#region 自定义方法 + /** + * 表单change事件处理,包括了所有字段的change + * [异步,非必要] + * @param {*} changedValues + * @param {*} allValues + */ + async onValuesChange(changedValues, allValues) {} + //#endregion + + render() { + const { loading } = this.state + + return ( + }> +
+ this.onValuesChange(changedValues, allValues) + } + > + + + + + + + + + + + + + + + + + + + + + + +
+ + ) + } +}