ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 房屋基本信息

Browse Source
This commit is contained in:
自带大佬气场
2021-06-22 16:43:40 +08:00
parent 529558e507
commit 38493fba3e
7 changed files with 1507 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)
}
const codes = await getDictData(
// checkbox
checkboxKeys.forEach(key => {
if (houseInfo[key]) {
houseInfo[key] = houseInfo[key].split(',')
}
})
if (houseInfo.insulationMaterial) {
_state.showKeepWarmMaterialText = houseInfo.insulationMaterial.includes('100')
}
}
_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 (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Form {...layout} ref={this.form}>
<Form
{...layout}
ref={this.form}
onValuesChange={(changedValues, allValues) =>
this.onValuesChange(changedValues, allValues)
}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item
@@ -281,7 +350,8 @@ export default class building extends Component {
<Input autoComplete="off" placeholder="请输入坐落地址" />
</Form.Item>
</Col>
<Col span={24}>
</Row>
<Form.Item
label="土地性质"
name={['houseInfo', 'landAttribute']}
@@ -297,16 +367,12 @@ export default class building extends Component {
})}
</Radio.Group>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item className="mb-none" label="地理坐标" required>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name={['houseCode', 'lng']}
rules={[
{ required: true, message: '请在地图上选择坐标' },
]}
rules={[{ required: true, message: '请在地图上选择坐标' }]}
>
<Input
autoComplete="off"
@@ -320,9 +386,7 @@ export default class building extends Component {
<Col span={12}>
<Form.Item
name={['houseCode', 'lat']}
rules={[
{ required: true, message: '请在地图上选择坐标' },
]}
rules={[{ required: true, message: '请在地图上选择坐标' }]}
>
<Input
autoComplete="off"
@@ -359,8 +423,6 @@ export default class building extends Component {
</Button>
)}
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="结构类型"
name={['houseInfo', 'structureType']}
@@ -376,7 +438,7 @@ export default class building extends Component {
})}
</Radio.Group>
</Form.Item>
</Col>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label="抗震等级"
@@ -411,49 +473,39 @@ export default class building extends Component {
</Radio.Group>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="外墙保温材料"
name={['houseInfo', 'insulationMaterial']}
>
</Row>
<Form.Item label="外墙保温材料" name={['houseInfo', 'insulationMaterial']}>
<Checkbox.Group>
{codes.dicHouseInsulationMaterial.map(item => {
return (
<Checkbox
key={item.code}
value={item.code}
className="mb-xs"
>
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
)
})}
<Input
autoComplete="off"
className="w-300"
placeholder="请输入其他外墙保温材料"
/>
</Checkbox.Group>
</Form.Item>
</Col>
<Col span={24}>
{showKeepWarmMaterialText && (
<Form.Item
colon={false}
label=" "
name={['houseInfo', 'keepWarmMaterialText']}
>
<Input.TextArea autoSize placeholder="请输入其他外墙保温材料" />
</Form.Item>
)}
<Form.Item label="外墙墙体材料" name={['houseInfo', 'wallMaterial']}>
<Checkbox.Group>
{codes.dicHouseWallMaterial.map(item => {
return (
<Checkbox
key={item.code}
value={item.code}
className="mb-xs"
>
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
)
})}
</Checkbox.Group>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label={
<span>
@@ -474,8 +526,6 @@ export default class building extends Component {
})}
</Radio.Group>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="建筑幕墙"
name={['houseInfo', 'curtainWall']}
@@ -491,7 +541,7 @@ export default class building extends Component {
})}
</Radio.Group>
</Form.Item>
</Col>
<Row gutter={16}>
<Col span={8}>
<Form.Item
label="有无外墙面砖"
@@ -552,12 +602,15 @@ export default class building extends Component {
</Form.Item>
</Col>
<Col span={8}>
<Row>
<Form.Item label="设计使用年限" required>
<Row align="middle">
<Col flex="1">
<Form.Item
label="设计使用年限"
name={['houseInfo', 'usefulYear']}
rules={[{ required: true, message: '请输入设计使用年限' }]}
rules={[
{ required: true, message: '请输入设计使用年限' },
]}
noStyle
>
<InputNumber
min={0}
@@ -570,14 +623,18 @@ export default class building extends Component {
<span className="yo-addon">年</span>
</Col>
</Row>
</Form.Item>
</Col>
<Col span={8}>
<Row>
<Form.Item label="总建筑面积" required>
<Row align="middle">
<Col flex="1">
<Form.Item
label="总建筑面积"
name={['houseInfo', 'totalArea']}
rules={[{ required: true, message: '请输入总建筑面积' }]}
rules={[
{ required: true, message: '请输入总建筑面积' },
]}
noStyle
>
<InputNumber
min={0}
@@ -590,14 +647,16 @@ export default class building extends Component {
<span className="yo-addon">m²</span>
</Col>
</Row>
</Form.Item>
</Col>
<Col span={8}>
<Row>
<Form.Item label="总户数" required>
<Row align="middle">
<Col flex="1">
<Form.Item
label="总户数"
name={['houseInfo', 'houseHolds']}
rules={[{ required: true, message: '请输入总户数' }]}
noStyle
>
<InputNumber
min={0}
@@ -612,14 +671,18 @@ export default class building extends Component {
<span className="yo-addon">户</span>
</Col>
</Row>
</Form.Item>
</Col>
<Col span={8}>
<Row>
<Form.Item label="房屋单元数" required>
<Row align="middle">
<Col flex="1">
<Form.Item
label="房屋单元数"
name={['houseInfo', 'units']}
rules={[{ required: true, message: '请输入房屋单元数' }]}
rules={[
{ required: true, message: '请输入房屋单元数' },
]}
noStyle
>
<InputNumber
min={0}
@@ -634,16 +697,18 @@ export default class building extends Component {
<span className="yo-addon">单元</span>
</Col>
</Row>
</Form.Item>
</Col>
<Col span={8}>
<Row>
<Form.Item label="每层每单元户数" required>
<Row align="middle">
<Col flex="1">
<Form.Item
label="每层每单元户数"
name={['houseInfo', 'unitFloorHolds']}
rules={[
{ required: true, message: '请输入每层每单元户数' },
]}
noStyle
>
<InputNumber
min={0}
@@ -658,6 +723,7 @@ export default class building extends Component {
<span className="yo-addon">户</span>
</Col>
</Row>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="建设单位" name={['houseInfo', 'buildingUnit']}>
@@ -696,173 +762,120 @@ export default class building extends Component {
</Form.Item>
</Col>
<Col span={24}>
<Form.Item label="建筑层数">
<div className="ant-form-inline">
<Row align="middle">
<Col flex="1">
<Form.Item label="建筑层数" className="mb-none">
<Row>
<Col>
<Form.Item colon={false} label="地上" required>
<Form.Item
colon={false}
label="地上"
name={['houseInfo', 'landFloorCount']}
className="mr-none"
rules={[
{ required: true, message: '请输入地上层' },
]}
noStyle
>
<InputNumber
min={0}
precision={0}
step={1}
className="w-100-p"
className="w-150"
placeholder="请输入地上层"
/>
</Form.Item>
<div className="ant-form-text">层；</div>
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层</span>
</Col>
</Row>
<Row align="middle">
<Col flex="1">
<Form.Item colon={false} label="地下" required>
<Form.Item
colon={false}
label="地下"
name={['houseInfo', 'underFloorCount']}
className="mr-none"
rules={[
{ required: true, message: '请输入地下层' },
]}
noStyle
>
<InputNumber
min={0}
precision={0}
step={1}
className="w-100-p"
className="w-150"
placeholder="请输入地下层"
/>
</Form.Item>
<div className="ant-form-text">层；</div>
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层</span>
</Col>
</Row>
<Row align="middle">
<Col flex="1">
<Form.Item
colon={false}
label="总共"
name={['houseInfo', 'totalFloor']}
className="mr-none"
>
<Form.Item colon={false} label="总共">
<Form.Item name={['houseInfo', 'totalFloor']} noStyle>
<InputNumber
disabled
min={0}
precision={0}
step={1}
className="w-100-p"
disabled
className="w-150"
placeholder="请输入总层数"
/>
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层</span>
<div className="ant-form-text">层</div>
</Form.Item>
</Col>
</Row>
</div>
</Form.Item>
<Form.Item label="其中">
<div className="ant-form-inline">
<Form.Item>
<Row align="middle">
<Col>
<span className="yo-addon">地上第</span>
</Col>
<Col flex="1">
<Form.Item
className="mr-none"
name={['houseInfo', 'landBsFloorStart']}
>
<InputNumber
min={0}
step={1}
placeholder="几"
/>
<Col>
<Form.Item name={['houseInfo', 'landBsFloorStart']} noStyle>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层，至</span>
</Col>
<Col flex="1">
<Form.Item
className="mr-none"
name={['houseInfo', 'landBsFloorEnd']}
>
<InputNumber
min={0}
step={1}
placeholder="几"
/>
<Col>
<Form.Item name={['houseInfo', 'landBsFloorEnd']} noStyle>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层为商业用房</span>
<span className="yo-addon">层为商业用房；</span>
</Col>
</Row>
</Form.Item>
<Form.Item>
<Row align="middle">
<Col>
<span className="yo-addon">地上</span>
</Col>
<Col flex="1">
<Col>
<Form.Item
className="mr-none"
name={['houseInfo', 'landBikeFloorStart']}
noStyle
>
<InputNumber
min={0}
step={1}
placeholder="几"
/>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层为车棚层</span>
<span className="yo-addon">层为车棚层；</span>
</Col>
</Row>
</Form.Item>
<Form.Item>
<Row align="middle">
<Col>
<span className="yo-addon">地上第</span>
</Col>
<Col flex="1">
<Col>
<Form.Item
className="mr-none"
name={['houseInfo', 'landResidenceFloorStart']}
noStyle
>
<InputNumber
min={0}
step={1}
placeholder="几"
/>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
</Col>
<Col>
<span className="yo-addon">层，至</span>
</Col>
<Col flex="1">
<Col>
<Form.Item
className="mr-none"
name={['houseInfo', 'landResidenceFloorEnd']}
noStyle
>
<InputNumber
min={0}
step={1}
placeholder="几"
/>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
</Col>
<Col>
@@ -870,8 +883,6 @@ export default class building extends Component {
</Col>
</Row>
</Form.Item>
</div>
</Form.Item>
</Col>
</Row>
</Form>

163
web-react/src/pages/business/house/info/form/base/drawing.jsx Normal file
View File

@@ -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 (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Form
initialValues={initialValues}
ref={this.form}
{...layout}
onValuesChange={(changedValues, allValues) =>
this.onValuesChange(changedValues, allValues)
}
>
<Form.Item
label="图纸资料存档处"
name={['houseInfo', 'drawingMaterial']}
rules={[{ required: true, message: '请选择图纸资料存档处' }]}
>
<Checkbox.Group>
{codes.dicHouseStorageOfDrawings.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
{showDrawingMaterialText && (
<Form.Item
colon={false}
label=" "
name={['houseInfo', 'drawingMaterialText']}
>
<Input.TextArea autoSize placeholder="请输入其他图纸资料存档处" />
</Form.Item>
)}
</Form>
</Spin>
)
}
}

155
web-react/src/pages/business/house/info/form/base/identification.jsx Normal file
View File

@@ -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 (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Form
initialValues={initialValues}
ref={this.form}
{...layout}
onValuesChange={(changedValues, allValues) =>
this.onValuesChange(changedValues, allValues)
}
>
<Form.Item
label="房屋使用状态"
name={['houseInfo', 'houseUsedStatus']}
rules={[{ required: true, message: '请选择房屋使用状态' }]}
>
<Radio.Group buttonStyle="solid">
{codes.dicHouseUsedStatus.map(item => (
<Radio.Button key={item.code} value={+item.code}>
{item.value}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
<Form.Item
label="综合等级"
name={['houseInfo', 'houseGrade']}
rules={[{ required: true, message: '请选择综合等级' }]}
>
<Radio.Group buttonStyle="solid">
{codes.dicHouseGrade.map(item => (
<Radio.Button key={item.code} value={+item.code}>
{item.value}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
</Form>
</Spin>
)
}
}

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

@@ -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,7 +88,8 @@ export default class index extends Component {
<div className="yo-adorn--house-top" />
<Card className="yo-form-page--body">
{parts.map((part, i) => (
<section key={i} id={`form-${i}-${id}`}>
<React.Fragment key={i}>
<section id={`form-${i}-${id}`}>
{part.title && <h5>{part.title}</h5>}
<Spin
spinning={loading}
@@ -84,6 +105,8 @@ export default class index extends Component {
)}
</Spin>
</section>
{i < parts.length - 1 && <Divider />}
</React.Fragment>
))}
</Card>
</Col>

301
web-react/src/pages/business/house/info/form/base/investigation.jsx Normal file
View File

@@ -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 (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Form
initialValues={initialValues}
ref={this.form}
{...layout}
onValuesChange={(changedValues, allValues) =>
this.onValuesChange(changedValues, allValues)
}
>
<Form.Item
label="房屋场地"
name={['houseInfo', 'houseSite']}
rules={[{ required: true, message: '请选择房屋场地' }]}
>
<Checkbox.Group>
{codes.dicHouseHouseSite.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.Item
label="相邻施工"
name={['houseInfo', 'adjacentConstruction']}
rules={[{ required: true, message: '请选择相邻施工' }]}
>
<Checkbox.Group>
{codes.dicHouseAdjacentConstruction.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.Item
label="化学侵蚀"
name={['houseInfo', 'chemicalErosion']}
rules={[{ required: true, message: '请选择化学侵蚀' }]}
>
<Checkbox.Group>
{codes.dicHouseChemicalErosion.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.Item
label="结构拆改"
name={['houseInfo', 'structuralDismantling']}
rules={[{ required: true, message: '请选择结构拆改' }]}
>
<Radio.Group buttonStyle="solid">
{codes.dicHouseStructuralDismantling.map(item => (
<Radio.Button key={item.code} value={+item.code}>
{item.value}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
<Form.Item
label="加层改造"
name={['houseInfo', 'addingLayer']}
rules={[{ required: true, message: '请选择加层改造' }]}
>
<Radio.Group buttonStyle="solid">
{codes.dicHouseAddingLayer.map(item => (
<Radio.Button key={item.code} value={+item.code}>
{item.value}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
<Form.Item
label="修缮加固"
name={['houseInfo', 'repairAndReinforce']}
rules={[{ required: true, message: '请选择修缮加固' }]}
>
<Checkbox.Group>
{codes.dicHouseRepairAndReinforce.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.Item
label="历史灾害"
name={['houseInfo', 'historicalCalamity']}
rules={[{ required: true, message: '请选择历史灾害' }]}
>
<Checkbox.Group>
{codes.dicHouseHistoricalCalamity.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.Item
label="使用功能变更"
name={['houseInfo', 'functionalChange']}
rules={[{ required: true, message: '请选择使用功能变更' }]}
>
<Checkbox.Group>
{codes.dicHouseFunctionalChange.map(item => (
<Checkbox key={item.code} value={item.code}>
{item.value}
</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
<Form.Item label="其他调查内容" name={['houseInfo', 'otherContents']}>
<Input.TextArea autoSize placeholder="请输入其他调查内容" />
</Form.Item>
</Form>
</Spin>
)
}
}

253
web-react/src/pages/business/house/info/form/base/ownership.jsx Normal file
View File

@@ -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 (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Form
initialValues={initialValues}
ref={this.form}
{...layout}
onValuesChange={(changedValues, allValues) =>
this.onValuesChange(changedValues, allValues)
}
>
<Form.Item label="产权性质" name={['houseInfo', 'propertyRights']}>
<Radio.Group buttonStyle="solid">
{codes.dicHousePropertyRights.map(item => (
<Radio.Button key={item.code} value={item.code}>
{item.value}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
<Form.Item label="房屋包含的住宅总套数" className="mb-none">
<Row>
<Col>
<Form.Item colon={false} label="直管公房" required>
<Form.Item
name={['houseInfo', 'straightHouseCount']}
rules={[{ required: true, message: '请输入直管公房' }]}
noStyle
>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
<Col>
<Form.Item colon={false} label="单位自管公房" required>
<Form.Item
name={['houseInfo', 'selfHouseCount']}
rules={[{ required: true, message: '请输入单位自管公房' }]}
noStyle
>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
<Col>
<Form.Item colon={false} label="其他">
<Form.Item name={['houseInfo', 'otherCount']} noStyle>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<Form.Item colon={false} label="商品房" required>
<Form.Item
name={['houseInfo', 'businessCount']}
rules={[{ required: true, message: '请输入商品房' }]}
noStyle
>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
<Col>
<Form.Item colon={false} label="房改房" required>
<Form.Item
name={['houseInfo', 'changeHouseCount']}
rules={[{ required: true, message: '请输入房改房' }]}
noStyle
>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
<Col>
<Form.Item colon={false} label="拆迁安置房" required>
<Form.Item
name={['houseInfo', 'resettlementHouseCount']}
rules={[{ required: true, message: '请输入拆迁安置房' }]}
noStyle
>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
</Row>
<Row>
<Col>
<Form.Item colon={false} label="私房">
<Form.Item name={['houseInfo', 'privateHouseCount']} noStyle>
<InputNumber min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套；</div>
</Form.Item>
</Col>
<Col>
<Form.Item colon={false} label="总共">
<Form.Item name={['houseInfo', 'houseCount']} noStyle>
<InputNumber disabled min={0} step={1} placeholder="几" />
</Form.Item>
<div className="ant-form-text">套</div>
</Form.Item>
</Col>
</Row>
</Form.Item>
<Form.Item label="产权单位" name={['houseInfo', 'propertyUnit']}>
<Input autoComplete="off" placeholder="请输入产权单位" />
</Form.Item>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="负责人" name={['houseInfo', 'propertyUnitUser']}>
<Input autoComplete="off" placeholder="请输入负责人" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="负责人电话"
name={['houseInfo', 'propertyUnitUserTel']}
>
<Input autoComplete="off" placeholder="请输入负责人电话" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="联系人" name={['houseInfo', 'propertyUnitConent']}>
<Input autoComplete="off" placeholder="请输入联系人" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="联系人电话"
name={['houseInfo', 'propertyUnitConentTel']}
>
<Input autoComplete="off" placeholder="请输入联系人电话" />
</Form.Item>
</Col>
</Row>
</Form>
</Spin>
)
}
}

154
web-react/src/pages/business/house/info/form/base/unit.jsx Normal file
View File

@@ -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 (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Form
initialValues={initialValues}
ref={this.form}
{...layout}
onValuesChange={(changedValues, allValues) =>
this.onValuesChange(changedValues, allValues)
}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label="调查登记机构"
name={['houseInfo', 'investigateAgency']}
rules={[{ required: true, message: '请输入调查登记机构' }]}
>
<Input autoComplete="off" placeholder="请输入调查登记机构" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="调查人员"
name={['houseInfo', 'investigateUser']}
rules={[{ required: true, message: '请输入调查人员' }]}
>
<Input autoComplete="off" placeholder="请输入调查人员" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="审核人员"
name={['houseInfo', 'offlineAuditor']}
rules={[{ required: true, message: '请输入审核人员' }]}
>
<Input autoComplete="off" placeholder="请输入审核人员" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="主管部门"
name={['houseInfo', 'competentDepartment']}
rules={[{ required: true, message: '请输入主管部门' }]}
>
<Input autoComplete="off" placeholder="请输入主管部门" />
</Form.Item>
</Col>
</Row>
</Form>
</Spin>
)
}
}