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

update 复杂的form表单

Browse Source
This commit is contained in:
自带大佬气场
2021-06-21 10:22:00 +08:00
parent ae85cb9ad3
commit 0056eb58b4
7 changed files with 873 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -3,13 +3,30 @@
.width-height (@i) when (@i <=20) { .width-height (@i) when (@i <=20) {
@n : @i * 50; @n : @i * 50;
@px : @n * 1px;
.w-@{n} { .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} { .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 { .w-@{n}-p {

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

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

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

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

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

@@ -1,47 +1,30 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import ReactDOM from 'react-dom' 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 { defaultsDeep } from 'lodash'
import { ComponentDynamic, Container } from 'components' import { AntIcon, ComponentDynamic, Container } from 'components'
const parts = [ const parts = [
{ {
title: '建筑物基本信息', title: '建筑物基本信息',
component: () => import('./building'), 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 { export default class index extends Component {
container = window 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 return this.container
} }
setContainer = (container) => { setContainer = container => {
this.container = (ReactDOM.findDOMNode(container) || {}).parentNode 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() { render() {
const { id, loading } = this.props
return ( return (
<Container mode="fluid" ref={this.setContainer}> <Container mode="fluid" ref={this.setContainer}>
<Row gutter={16} type="flex"> <Row gutter={16} type="flex">
<Col flex="1"> <Col flex="1">
<br /> <br />
<div className="yo-adorn--house-top" />
<Card className="yo-form-page--body"> <Card className="yo-form-page--body">
{ {parts.map((part, i) => (
parts.map((part, i) => { <section key={i} id={`form-${i}-${id}`}>
return ( {part.title && <h5>{part.title}</h5>}
<section key={i} id={`form-${i}-${this.props.id}`}> <Spin
{part.title && <h5>{part.title}</h5>} spinning={loading}
<ComponentDynamic is={part.component} {...this.props} onRef={c => this.forms.push(c)} /> indicator={<AntIcon type="loading" />}
</section> wrapperClassName="h-400-min"
) >
}) {!loading && (
} <ComponentDynamic
is={part.component}
{...this.props}
onRef={c => this.children.push(c)}
/>
)}
</Spin>
</section>
))}
</Card> </Card>
</Col> </Col>
<Col flex="240px"> <Col flex="240px">
<Anchor <Anchor
getContainer={this.getContainer} getContainer={this.getContainer}
offsetTop={24} offsetTop={24}
targetOffset={48} targetOffset={100}
wrapperStyle={{ backgroundColor: 'transparent' }} 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> </Anchor>
</Col> </Col>
</Row> </Row>

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

@@ -1,7 +1,8 @@
import React, { Component } from 'react' 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 = [ const tabs = [
{ {
@@ -48,97 +49,151 @@ const tabs = [
] ]
export default class index extends Component { export default class index extends Component {
state = { 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 = []
formData = {}
shouldComponentUpdate(props, state) {
return !isEqual(this.state, state)
}
componentDidMount() {
const { taskId } = this.props.param
if (taskId) {
api.houseInfoGetByTaskId({ taskId }).then(({ data }) => {
this.setState({
record: data,
loading: false,
})
})
}
}
async onSubmit() {
for (const child of this.children) {
try { try {
const data = await form.onGetData() const data = await child.getData()
formData = defaultsDeep(formData, data) this.formData = {
} catch (err) { ...this.formData,
if (err) { ...data,
err.errorFields.forEach(p => {
message.error(p.errors[0])
})
} }
flag = false } catch (e) {
return e
} }
} }
if (!flag) { console.log(this.formData)
return
}
console.log(formData) Message.success('提交成功')
message.success('提交成功')
} }
render() { render() {
const { loading, record } = this.state
return ( return (
<div className="yo-form-page"> <div className="yo-form-page">
<div className="yo-form-page-layout"> <div className="yo-form-page-layout">
{/* 底部工具栏(需放在前面) */} {/* 底部工具栏(需放在前面) */}
<div className="yo-form-page--bar yo-form-page--bar--with-tab"> <div className="yo-form-page--bar yo-form-page--bar--with-tab">
<Container> <Container mode="fluid">
<div className="yo-form-page--bar-inner"> <div className="yo-form-page--bar-inner">
<span>{/* 可以在工具栏中增加其他控件(只能在一行内) */}</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> </span>
</div> </div>
</Container> </Container>
</div> </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"> <div className="yo-tab-external-mount">
<Tabs <Tabs
activeKey={this.state.actived} activeKey={this.state.actived}
animated={false} 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) {
if (tab.show) { return (
return ( <Tabs.TabPane
<Tabs.TabPane key={i}
key={i} forceRender={false}
forceRender={false} tab={tab.title}
tab={tab.title} ></Tabs.TabPane>
></Tabs.TabPane> )
) }
} return <></>
return <></> })}
})
}
</Tabs> </Tabs>
<div className="yo-tab-external-mount-content"> <div className="yo-tab-external-mount-content">
{ {tabs.map((tab, i) => {
tabs.map((tab, i) => { if (tab.show) {
if (tab.show) { return (
return ( <div
<div key={i}
key={i} className={
className={ (this.state.actived === i.toString()
(this.state.actived === i.toString() ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive') + ' yo-tab-external-tabpane' ? '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)} /> }
</div> >
) <ComponentDynamic
} is={tab.component}
return <></> {...this.props}
}) record={record}
} loading={loading}
onRef={c => this.children.push(c)}
/>
</div>
)
}
return <></>
})}
</div> </div>
</div> </div>
</div> </div>

265
web-react/src/pages/business/house/task/index.jsx Normal file
View File

@@ -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>
)
}
}