update 复杂的form表单
This commit is contained in:
@@ -12,8 +12,9 @@
|
||||
height: 100%;
|
||||
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
background-color: @white;
|
||||
|
||||
|
||||
@@ -3,13 +3,30 @@
|
||||
.width-height (@i) when (@i <=20) {
|
||||
|
||||
@n : @i * 50;
|
||||
@px : @n * 1px;
|
||||
|
||||
.w-@{n} {
|
||||
width: @n * 1px !important;
|
||||
width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-min {
|
||||
min-width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-max {
|
||||
max-width: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n} {
|
||||
height: @n * 1px !important;
|
||||
height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-min {
|
||||
min-height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-max {
|
||||
max-height: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-p {
|
||||
|
||||
@@ -4,14 +4,15 @@ import { ComponentDynamic, Container } from 'components'
|
||||
import { isEqual } from 'lodash'
|
||||
import { api } from 'common/api'
|
||||
|
||||
const parts = [{
|
||||
component: () => import('./part')
|
||||
}]
|
||||
const parts = [
|
||||
{
|
||||
component: () => import('./part'),
|
||||
},
|
||||
]
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
saving: false
|
||||
saving: false,
|
||||
}
|
||||
|
||||
children = []
|
||||
@@ -28,10 +29,10 @@ export default class index extends Component {
|
||||
const data = await child.getData()
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
...data
|
||||
...data,
|
||||
}
|
||||
} catch {
|
||||
return
|
||||
} catch (e) {
|
||||
return e
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,12 +45,10 @@ export default class index extends Component {
|
||||
Message.success('保存成功')
|
||||
Modal.confirm({
|
||||
content: '已添加成功，是否继续添加？',
|
||||
onOk: () => {
|
||||
|
||||
},
|
||||
onOk: () => {},
|
||||
onCancel: () => {
|
||||
window.closeContentWindow()
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
@@ -69,7 +68,6 @@ export default class index extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { id, param } = this.props
|
||||
|
||||
return (
|
||||
@@ -78,14 +76,16 @@ export default class index extends Component {
|
||||
<br />
|
||||
<div className="yo-adorn--house-top" />
|
||||
<Card className="yo-form-page--body">
|
||||
{
|
||||
parts.map((item, i) => (
|
||||
<section key={i} id={`form-${i}-${id}`}>
|
||||
{item.title && <h5>{parts.title}</h5>}
|
||||
<ComponentDynamic is={item.component} param={param} onRef={(r) => this.children.push(r)} />
|
||||
</section>
|
||||
))
|
||||
}
|
||||
{parts.map((item, i) => (
|
||||
<section key={i} id={`form-${i}-${id}`}>
|
||||
{item.title && <h5>{parts.title}</h5>}
|
||||
<ComponentDynamic
|
||||
is={item.component}
|
||||
param={param}
|
||||
onRef={r => this.children.push(r)}
|
||||
/>
|
||||
</section>
|
||||
))}
|
||||
</Card>
|
||||
</Container>
|
||||
<div className="yo-form-page--bar">
|
||||
@@ -94,7 +94,13 @@ export default class index extends Component {
|
||||
<span></span>
|
||||
<span>
|
||||
<Button>取消</Button>
|
||||
<Button type="primary" onClick={() => this.onSubmit()} loading={this.state.saving}>保存</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => this.onSubmit()}
|
||||
loading={this.state.saving}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -2,154 +2,159 @@ import React, { Component } from 'react'
|
||||
import { Row, Col, Form, Input, InputNumber, Radio, Checkbox, Switch, DatePicker, Spin } from 'antd'
|
||||
import { cloneDeep, isEqual } from 'lodash'
|
||||
import { api } from 'common/api'
|
||||
import { AntIcon } from 'components'
|
||||
import getDictData from 'util/dic'
|
||||
import moment from 'moment'
|
||||
|
||||
const layout = {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' }
|
||||
wrapperCol: { flex: '1' },
|
||||
}
|
||||
|
||||
export default class building extends Component {
|
||||
|
||||
state = {
|
||||
loading: true,
|
||||
codes: {
|
||||
landAttribute: [],
|
||||
houseStructureType: [],
|
||||
houseSseismicGrade: [],
|
||||
houseBaseInfo: [],
|
||||
houseInsulationMaterial: [],
|
||||
houseWallMaterial: [],
|
||||
houseFireproofGrade: [],
|
||||
houseBuildingCurtainWall: [],
|
||||
houseElevator: [],
|
||||
}
|
||||
dicLandAttribute: [],
|
||||
dicHouseStructureType: [],
|
||||
dicHouseAseismicGrade: [],
|
||||
dicHouseBaseInfo: [],
|
||||
dicHouseInsulationMaterial: [],
|
||||
dicHouseWallMaterial: [],
|
||||
dicHouseFireproofGrade: [],
|
||||
dicHouseBuildingCurtainWall: [],
|
||||
dicHouseElevator: [],
|
||||
},
|
||||
}
|
||||
|
||||
form = React.createRef()
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
// 使父组件获取到当前组件实例
|
||||
if (props.onRef) {
|
||||
props.onRef(this)
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(props, state) {
|
||||
// 在上级页签切换时,阻止当前组件渲染,以保证性能
|
||||
return !isEqual(this.state, state)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.onFillData()
|
||||
if (this.props.onRef) {
|
||||
this.props.onRef(this)
|
||||
}
|
||||
this.fillData({
|
||||
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({
|
||||
loading: false
|
||||
codes,
|
||||
})
|
||||
//#endregion
|
||||
this.form.current.setFieldsValue(this.record)
|
||||
this.setState({
|
||||
loading: false,
|
||||
})
|
||||
}
|
||||
|
||||
onGetData = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.form.current.validateFields()
|
||||
.then(values => {
|
||||
const record = cloneDeep(values)
|
||||
/**
|
||||
* 获取数据
|
||||
* 可以对postData进行数据结构调整
|
||||
* [异步,必要]
|
||||
* @returns
|
||||
*/
|
||||
async getData() {
|
||||
const form = this.form.current
|
||||
|
||||
resolve(record)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
const valid = await form.validateFields()
|
||||
if (valid) {
|
||||
const postData = form.getFieldsValue()
|
||||
//#region 从前段转换后端所需格式
|
||||
if (postData.houseInfo.completedDate) {
|
||||
postData.houseInfo.completedDate =
|
||||
postData.houseInfo.completedDate.format('YYYY-MM-DD')
|
||||
}
|
||||
//#endregion
|
||||
return postData
|
||||
}
|
||||
}
|
||||
|
||||
loadCodes = async () => {
|
||||
await api
|
||||
.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,
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
//#region 自定义方法
|
||||
//#endregion
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Spin spinning={this.state.loading}>
|
||||
<Form
|
||||
{...layout}
|
||||
ref={this.form}
|
||||
>
|
||||
<Row gutter={16} type="flex">
|
||||
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
|
||||
<Form {...layout} ref={this.form}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseInfo', 'buildingName']} label="幢名称" rules={[{ required: true, message: '请输入幢名称', trigger: 'blur' }]}>
|
||||
<Form.Item
|
||||
name={['houseInfo', 'buildingName']}
|
||||
label="幢名称"
|
||||
rules={[{ required: true, message: '请输入幢名称' }]}
|
||||
>
|
||||
<Input autoComplete="off" placeholder="请输入幢名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseCode', 'address']} label="坐落地址">
|
||||
<Form.Item
|
||||
label="坐落地址"
|
||||
name={['houseCode', 'address']}
|
||||
rules={[{ required: true, message: '请输入坐落地址' }]}
|
||||
>
|
||||
<Input autoComplete="off" placeholder="请输入坐落地址" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="土地性质" name="houseInfo.landAttribute">
|
||||
<Form.Item
|
||||
label="土地性质"
|
||||
name={['houseInfo', 'landAttribute']}
|
||||
rules={[{ required: true, message: '请选择土地性质' }]}
|
||||
>
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.landAttribute.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={+item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
{this.state.codes.dicLandAttribute.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={+item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item className="mb-none" label="地理坐标">
|
||||
<Form.Item className="mb-none" label="地理坐标" required>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseCode', 'lng']}>
|
||||
<Input autoComplete="off"
|
||||
<Form.Item
|
||||
name={['houseCode', 'lng']}
|
||||
rules={[
|
||||
{ required: true, message: '请在地图上选择坐标' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
autoComplete="off"
|
||||
className="yo-input-prefix-2"
|
||||
disabled
|
||||
placeholder="请在地图上选择坐标"
|
||||
@@ -158,8 +163,14 @@ export default class building extends Component {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseCode', 'lat']}>
|
||||
<Input autoComplete="off"
|
||||
<Form.Item
|
||||
name={['houseCode', 'lat']}
|
||||
rules={[
|
||||
{ required: true, message: '请在地图上选择坐标' },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
autoComplete="off"
|
||||
className="yo-input-prefix-2"
|
||||
disabled
|
||||
placeholder="请在地图上选择坐标"
|
||||
@@ -172,81 +183,87 @@ export default class building extends Component {
|
||||
<Form.Item colon={false} label={true}>
|
||||
<div className="yo-map-container">
|
||||
<div className="yo-map--search">
|
||||
<Input.Search autoComplete="off" allow-clear placeholder="请输入关键字" ref="map-search" />
|
||||
<Input.Search
|
||||
autoComplete="off"
|
||||
allowClear
|
||||
placeholder="请输入关键字"
|
||||
ref="map-search"
|
||||
/>
|
||||
</div>
|
||||
<div className="h-500" ref="map"></div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="结构类型" name="houseInfo.structureType">
|
||||
<Radio.Group
|
||||
buttonStyle="solid"
|
||||
placeholder="请选择结构类型"
|
||||
>
|
||||
{
|
||||
this.state.codes.houseStructureType.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={+item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Form.Item
|
||||
label="结构类型"
|
||||
name={['houseInfo', 'structureType']}
|
||||
rules={[{ required: true, message: '请选择结构类型' }]}
|
||||
>
|
||||
<Radio.Group buttonStyle="solid" placeholder="请选择结构类型">
|
||||
{this.state.codes.dicHouseStructureType.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={+item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="抗震等级" name="houseInfo.seismicGrade">
|
||||
<Radio.Group buttonStyle="solid" >
|
||||
{
|
||||
this.state.codes.houseSseismicGrade.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={+item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Form.Item
|
||||
label="抗震等级"
|
||||
name={['houseInfo', 'seismicGrade']}
|
||||
rules={[{ required: true, message: '请选择抗震等级' }]}
|
||||
>
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{this.state.codes.dicHouseAseismicGrade.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={+item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="基础情况" name="houseInfo.baseInfo">
|
||||
<Radio.Group buttonStyle="solid" >
|
||||
{
|
||||
this.state.codes.houseBaseInfo.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={+item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Form.Item
|
||||
label="基础情况"
|
||||
name={['houseInfo', 'baseInfo']}
|
||||
rules={[{ required: true, message: '请选择基础情况' }]}
|
||||
>
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{this.state.codes.dicHouseBaseInfo.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={+item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="外墙保温材料"
|
||||
name="houseInfo.insulationMaterial"
|
||||
name={['houseInfo', 'insulationMaterial']}
|
||||
>
|
||||
<Checkbox.Group>
|
||||
{
|
||||
this.state.codes.houseInsulationMaterial.map(item => {
|
||||
return (
|
||||
<Checkbox
|
||||
key={item.code}
|
||||
value={item.code}
|
||||
className="mb-xs"
|
||||
>{item.value}</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Input autoComplete="off"
|
||||
{this.state.codes.dicHouseInsulationMaterial.map(item => {
|
||||
return (
|
||||
<Checkbox
|
||||
key={item.code}
|
||||
value={item.code}
|
||||
className="mb-xs"
|
||||
>
|
||||
{item.value}
|
||||
</Checkbox>
|
||||
)
|
||||
})}
|
||||
<Input
|
||||
autoComplete="off"
|
||||
className="w-300"
|
||||
placeholder="请输入其他外墙保温材料"
|
||||
/>
|
||||
@@ -254,131 +271,156 @@ export default class building extends Component {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="外墙墙体材料" name="houseInfo.wallMaterial">
|
||||
<Form.Item label="外墙墙体材料" name={['houseInfo', 'wallMaterial']}>
|
||||
<Checkbox.Group>
|
||||
{
|
||||
this.state.codes.houseWallMaterial.map(item => {
|
||||
return (
|
||||
<Checkbox
|
||||
key={item.code}
|
||||
value={item.code}
|
||||
className="mb-xs"
|
||||
>{item.value}</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
{this.state.codes.dicHouseWallMaterial.map(item => {
|
||||
return (
|
||||
<Checkbox
|
||||
key={item.code}
|
||||
value={item.code}
|
||||
className="mb-xs"
|
||||
>
|
||||
{item.value}
|
||||
</Checkbox>
|
||||
)
|
||||
})}
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<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">
|
||||
{
|
||||
this.state.codes.houseFireproofGrade.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
{this.state.codes.dicHouseFireproofGrade.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="建筑幕墙" name="houseInfo.curtainWall">
|
||||
<Form.Item
|
||||
label="建筑幕墙"
|
||||
name={['houseInfo', 'curtainWall']}
|
||||
rules={[{ required: true, message: '请选择建筑幕墙' }]}
|
||||
>
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.houseBuildingCurtainWall.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={+item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
{this.state.codes.dicHouseBuildingCurtainWall.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={+item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="有无外墙面砖" name="houseInfo.faceBrick">
|
||||
<Form.Item label="有无外墙面砖" name={['houseInfo', 'faceBrick']}>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="有无外墙粉刷" name="houseInfo.whiteWash">
|
||||
<Form.Item label="有无外墙粉刷" name={['houseInfo', 'whiteWash']}>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="有无外墙涂料" name="houseInfo.coating">
|
||||
<Form.Item label="有无外墙涂料" name={['houseInfo', 'coating']}>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="电梯" name="houseInfo.elevator">
|
||||
<Form.Item
|
||||
label="电梯"
|
||||
name={['houseInfo', 'elevator']}
|
||||
rules={[{ required: true, message: '请选择电梯' }]}
|
||||
>
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.houseElevator.map(item => {
|
||||
return (
|
||||
<Radio.Button
|
||||
key={item.code}
|
||||
value={+item.code}
|
||||
>{item.value}</Radio.Button>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{this.state.codes.dicHouseElevator.map(item => {
|
||||
return (
|
||||
<Radio.Button key={item.code} value={item.code}>
|
||||
{item.value}
|
||||
</Radio.Button>
|
||||
)
|
||||
})}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="竣工日期" name="houseInfo.completedDate">
|
||||
<Form.Item
|
||||
label="竣工日期"
|
||||
name={['houseInfo', 'completedDate']}
|
||||
rules={[{ required: true, message: '请选择竣工日期' }]}
|
||||
>
|
||||
<DatePicker
|
||||
onChange={(date) => { /*$root.transfer.completedYear = date.format('YYYY') */ }}
|
||||
onChange={date => {
|
||||
/*$root.transfer.completedYear = date.format('YYYY') */
|
||||
}}
|
||||
className="w-100-p"
|
||||
placeholder="请选择竣工日期"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="设计使用年限" name="houseInfo.usefulYear">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
label="设计使用年限"
|
||||
name={['houseInfo', 'usefulYear']}
|
||||
rules={[{ required: true, message: '请输入设计使用年限' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
className="w-100-p"
|
||||
placeholder="请输入设计使用年限"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">年</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">年</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="总建筑面积" name="houseInfo.totalArea">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
label="总建筑面积"
|
||||
name={['houseInfo', 'totalArea']}
|
||||
rules={[{ required: true, message: '请输入总建筑面积' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
className="w-100-p"
|
||||
placeholder="请输入总建筑面积"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">m²</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">m²</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="总户数" name="houseInfo.houseHolds">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
label="总户数"
|
||||
name={['houseInfo', 'houseHolds']}
|
||||
rules={[{ required: true, message: '请输入总户数' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
@@ -386,17 +428,21 @@ export default class building extends Component {
|
||||
className="w-100-p"
|
||||
placeholder="请输入总户数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">户</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">户</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="房屋单元数" name="houseInfo.units">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
label="房屋单元数"
|
||||
name={['houseInfo', 'units']}
|
||||
rules={[{ required: true, message: '请输入房屋单元数' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
@@ -404,17 +450,23 @@ export default class building extends Component {
|
||||
className="w-100-p"
|
||||
placeholder="请输入房屋单元数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">单元</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">单元</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="每层每单元户数" name="houseInfo.unitFloorHolds">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
label="每层每单元户数"
|
||||
name={['houseInfo', 'unitFloorHolds']}
|
||||
rules={[
|
||||
{ required: true, message: '请输入每层每单元户数' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
@@ -422,53 +474,63 @@ export default class building extends Component {
|
||||
className="w-100-p"
|
||||
placeholder="请输入每层每单元户数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">户</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">户</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="建设单位" name="houseInfo.buildingUnit">
|
||||
<Form.Item label="建设单位" name={['houseInfo', 'buildingUnit']}>
|
||||
<Input autoComplete="off" placeholder="请输入建设单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="建设单位联系人" name="houseInfo.buildingUnitUser">
|
||||
<Form.Item
|
||||
label="建设单位联系人"
|
||||
name={['houseInfo', 'buildingUnitUser']}
|
||||
>
|
||||
<Input autoComplete="off" placeholder="请输入建设单位联系人" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="建设单位联系电话" name="houseInfo.buildingUnitTel">
|
||||
<Form.Item
|
||||
label="建设单位联系电话"
|
||||
name={['houseInfo', 'buildingUnitTel']}
|
||||
>
|
||||
<Input autoComplete="off" placeholder="请输入建设单位联系电话" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="设计单位" name="houseInfo.desingerUnit">
|
||||
<Form.Item label="设计单位" name={['houseInfo', 'desingerUnit']}>
|
||||
<Input autoComplete="off" placeholder="请输入设计单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="施工单位" name="houseInfo.constructionUnit">
|
||||
<Form.Item label="施工单位" name={['houseInfo', 'constructionUnit']}>
|
||||
<Input autoComplete="off" placeholder="请输入施工单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="监理单位" name="houseInfo.monitorUnit">
|
||||
<Form.Item label="监理单位" name={['houseInfo', 'monitorUnit']}>
|
||||
<Input autoComplete="off" placeholder="请输入监理单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="建筑层数">
|
||||
<div className="ant-form-inline">
|
||||
<Form.Item
|
||||
colon={false}
|
||||
label="地上"
|
||||
name="houseInfo.landFloorCount"
|
||||
>
|
||||
<Row type="flex" align="middle">
|
||||
<Col flex="1">
|
||||
<Row align="middle">
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
colon={false}
|
||||
label="地上"
|
||||
name={['houseInfo', 'landFloorCount']}
|
||||
className="mr-none"
|
||||
rules={[
|
||||
{ required: true, message: '请输入地上层' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
@@ -476,19 +538,24 @@ export default class building extends Component {
|
||||
className="w-100-p"
|
||||
placeholder="请输入地上层"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
colon={false}
|
||||
label="地下"
|
||||
name="houseInfo.underFloorCount"
|
||||
>
|
||||
<Row type="flex" align="middle">
|
||||
<Col flex="1">
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row align="middle">
|
||||
<Col flex="1">
|
||||
<Form.Item
|
||||
colon={false}
|
||||
label="地下"
|
||||
name={['houseInfo', 'underFloorCount']}
|
||||
className="mr-none"
|
||||
rules={[
|
||||
{ required: true, message: '请输入地下层' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
@@ -496,19 +563,21 @@ export default class building extends Component {
|
||||
className="w-100-p"
|
||||
placeholder="请输入地下层"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
colon={false}
|
||||
label="总共"
|
||||
name="houseInfo.totalFloor"
|
||||
>
|
||||
<Row type="flex" align="middle">
|
||||
<Col flex="1">
|
||||
</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"
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
@@ -517,23 +586,26 @@ export default class building extends Component {
|
||||
disabled
|
||||
placeholder="请输入总层数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item label="其中">
|
||||
<div className="ant-form-inline">
|
||||
<Form.Item>
|
||||
<Row type="flex" align="middle">
|
||||
<Row align="middle">
|
||||
<Col>
|
||||
<span className="yo-addon">地上第</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landBsFloorStart">
|
||||
<Form.Item
|
||||
className="mr-none"
|
||||
name={['houseInfo', 'landBsFloorStart']}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
@@ -545,7 +617,10 @@ export default class building extends Component {
|
||||
<span className="yo-addon">层，至</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landBsFloorEnd">
|
||||
<Form.Item
|
||||
className="mr-none"
|
||||
name={['houseInfo', 'landBsFloorEnd']}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
@@ -559,12 +634,15 @@ export default class building extends Component {
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Row type="flex" align="middle">
|
||||
<Row align="middle">
|
||||
<Col>
|
||||
<span className="yo-addon">地上</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landBikeFloorStart">
|
||||
<Form.Item
|
||||
className="mr-none"
|
||||
name={['houseInfo', 'landBikeFloorStart']}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
@@ -578,12 +656,15 @@ export default class building extends Component {
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Row type="flex" align="middle">
|
||||
<Row align="middle">
|
||||
<Col>
|
||||
<span className="yo-addon">地上第</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landResidenceFloorStart">
|
||||
<Form.Item
|
||||
className="mr-none"
|
||||
name={['houseInfo', 'landResidenceFloorStart']}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
@@ -595,7 +676,10 @@ export default class building extends Component {
|
||||
<span className="yo-addon">层，至</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landResidenceFloorEnd">
|
||||
<Form.Item
|
||||
className="mr-none"
|
||||
name={['houseInfo', 'landResidenceFloorEnd']}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
|
||||
@@ -1,47 +1,30 @@
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Row, Col, Card, Anchor } from 'antd'
|
||||
import { Row, Col, Card, Anchor, Spin } from 'antd'
|
||||
import { defaultsDeep } from 'lodash'
|
||||
import { ComponentDynamic, Container } from 'components'
|
||||
import { AntIcon, ComponentDynamic, Container } from 'components'
|
||||
|
||||
const parts = [
|
||||
{
|
||||
title: '建筑物基本信息',
|
||||
component: () => import('./building'),
|
||||
},
|
||||
{
|
||||
title: '建筑物基本信息',
|
||||
component: () => import('./building'),
|
||||
},
|
||||
{
|
||||
title: '建筑物基本信息',
|
||||
component: () => import('./building'),
|
||||
},
|
||||
{
|
||||
title: '建筑物基本信息',
|
||||
component: () => import('./building'),
|
||||
},
|
||||
{
|
||||
title: '建筑物基本信息',
|
||||
component: () => import('./building'),
|
||||
},
|
||||
{
|
||||
title: '建筑物基本信息',
|
||||
component: () => import('./building'),
|
||||
},
|
||||
]
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
container = window
|
||||
forms = []
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
children = []
|
||||
|
||||
// 使父组件获取到当前组件实例
|
||||
if (props.onRef) {
|
||||
props.onRef(this)
|
||||
formData = {}
|
||||
|
||||
shouldComponentUpdate(props) {
|
||||
return this.props.loading !== props.loading
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.onRef) {
|
||||
this.props.onRef(this)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,68 +32,63 @@ export default class index extends Component {
|
||||
return this.container
|
||||
}
|
||||
|
||||
setContainer = (container) => {
|
||||
setContainer = container => {
|
||||
this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
|
||||
}
|
||||
|
||||
onGetData = () => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let formData = {},
|
||||
flag = true
|
||||
for (let i = 0; i < this.forms.length; i++) {
|
||||
const form = this.forms[i]
|
||||
try {
|
||||
const data = await form.onGetData()
|
||||
formData = defaultsDeep(formData, data)
|
||||
} catch (err) {
|
||||
flag = false
|
||||
reject(err)
|
||||
}
|
||||
async getData() {
|
||||
for (const child of this.children) {
|
||||
const data = await child.getData()
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
...data,
|
||||
}
|
||||
if (flag) {
|
||||
resolve(formData)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return this.formData
|
||||
}
|
||||
|
||||
render() {
|
||||
const { id, loading } = this.props
|
||||
|
||||
return (
|
||||
<Container mode="fluid" ref={this.setContainer}>
|
||||
<Row gutter={16} type="flex">
|
||||
<Col flex="1">
|
||||
<br />
|
||||
<div className="yo-adorn--house-top" />
|
||||
<Card className="yo-form-page--body">
|
||||
{
|
||||
parts.map((part, i) => {
|
||||
return (
|
||||
<section key={i} id={`form-${i}-${this.props.id}`}>
|
||||
{part.title && <h5>{part.title}</h5>}
|
||||
<ComponentDynamic is={part.component} {...this.props} onRef={c => this.forms.push(c)} />
|
||||
</section>
|
||||
)
|
||||
})
|
||||
}
|
||||
{parts.map((part, i) => (
|
||||
<section key={i} id={`form-${i}-${id}`}>
|
||||
{part.title && <h5>{part.title}</h5>}
|
||||
<Spin
|
||||
spinning={loading}
|
||||
indicator={<AntIcon type="loading" />}
|
||||
wrapperClassName="h-400-min"
|
||||
>
|
||||
{!loading && (
|
||||
<ComponentDynamic
|
||||
is={part.component}
|
||||
{...this.props}
|
||||
onRef={c => this.children.push(c)}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</section>
|
||||
))}
|
||||
</Card>
|
||||
</Col>
|
||||
<Col flex="240px">
|
||||
<Anchor
|
||||
getContainer={this.getContainer}
|
||||
offsetTop={24}
|
||||
targetOffset={48}
|
||||
targetOffset={100}
|
||||
wrapperStyle={{ backgroundColor: 'transparent' }}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
onClick={e => e.preventDefault()}
|
||||
>
|
||||
{
|
||||
parts.map((part, i) => {
|
||||
return (
|
||||
<Anchor.Link
|
||||
key={i}
|
||||
href={`#form-${i}-${this.props.id}`}
|
||||
title={part.title}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
{parts.map((part, i) => (
|
||||
<Anchor.Link key={i} href={`#form-${i}-${id}`} title={part.title} />
|
||||
))}
|
||||
</Anchor>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Tabs, Button, message } from 'antd'
|
||||
import { defaultsDeep } from 'lodash'
|
||||
import { ComponentDynamic, Container } from 'components'
|
||||
import { Button, Descriptions, message as Message, Spin, Tabs } from 'antd'
|
||||
import { defaultsDeep, isEqual } from 'lodash'
|
||||
import { AntIcon, ComponentDynamic, Container } from 'components'
|
||||
import { api } from 'common/api'
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
@@ -48,97 +49,151 @@ const tabs = [
|
||||
]
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
actived: '0'
|
||||
}
|
||||
forms = []
|
||||
actived: '0',
|
||||
|
||||
onSubmit = async () => {
|
||||
let formData = {},
|
||||
flag = true
|
||||
for (let i = 0; i < this.forms.length; i++) {
|
||||
const form = this.forms[i]
|
||||
loading: true,
|
||||
record: null,
|
||||
}
|
||||
|
||||
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 {
|
||||
const data = await form.onGetData()
|
||||
formData = defaultsDeep(formData, data)
|
||||
} catch (err) {
|
||||
if (err) {
|
||||
err.errorFields.forEach(p => {
|
||||
message.error(p.errors[0])
|
||||
})
|
||||
const data = await child.getData()
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
...data,
|
||||
}
|
||||
flag = false
|
||||
} catch (e) {
|
||||
return e
|
||||
}
|
||||
}
|
||||
|
||||
if (!flag) {
|
||||
return
|
||||
}
|
||||
console.log(this.formData)
|
||||
|
||||
console.log(formData)
|
||||
|
||||
message.success('提交成功')
|
||||
Message.success('提交成功')
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loading, record } = this.state
|
||||
|
||||
return (
|
||||
<div className="yo-form-page">
|
||||
<div className="yo-form-page-layout">
|
||||
{/* 底部工具栏(需放在前面) */}
|
||||
<div className="yo-form-page--bar yo-form-page--bar--with-tab">
|
||||
<Container>
|
||||
<Container mode="fluid">
|
||||
<div className="yo-form-page--bar-inner">
|
||||
<span>{/* 可以在工具栏中增加其他控件(只能在一行内) */}</span>
|
||||
<span>
|
||||
{/* 可以在工具栏中增加其他控件(只能在一行内) */}
|
||||
</span>
|
||||
<span>
|
||||
<Button onClick={() => window.closeContentWindow()}>取消</Button>
|
||||
<Button onClick={this.onSubmit} type="primary">保存</Button>
|
||||
<Button onClick={() => window.closeContentWindow()}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => this.onSubmit()} type="primary">
|
||||
保存
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<div className="yo-form-page--header"></div>
|
||||
<div className="yo-form-page--header" style={{ paddingBottom: 0 }}>
|
||||
<Container mode="fluid">
|
||||
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
|
||||
<Descriptions column={4}>
|
||||
<Descriptions.Item label="区县（市）">
|
||||
{record && record.houseCode.areaName}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="街道（乡镇）">
|
||||
{record && record.houseCode.roadName}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="社区">
|
||||
{record && record.houseCode.commName}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="片区">
|
||||
{record && record.houseCode.zoneName}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item span="2" label="编号">
|
||||
{record &&
|
||||
`${record.houseCode.areaName}-${
|
||||
record.houseCode.roadName
|
||||
}-${record.houseCode.commName}-${
|
||||
record.houseCode.projectFullName
|
||||
}-${record.houseCode.no.toString().padStart(3, '0')}`}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item span="2" label="编码">
|
||||
{record && record.houseCode.houseCode}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Spin>
|
||||
</Container>
|
||||
</div>
|
||||
<div className="yo-tab-external-mount">
|
||||
<Tabs
|
||||
activeKey={this.state.actived}
|
||||
animated={false}
|
||||
onChange={(activeKey) => { this.setState({ actived: activeKey }) }}
|
||||
onChange={activeKey => {
|
||||
this.setState({ actived: activeKey })
|
||||
}}
|
||||
>
|
||||
{
|
||||
tabs.map((tab, i) => {
|
||||
if (tab.show) {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
key={i}
|
||||
forceRender={false}
|
||||
tab={tab.title}
|
||||
></Tabs.TabPane>
|
||||
)
|
||||
}
|
||||
return <></>
|
||||
})
|
||||
}
|
||||
{tabs.map((tab, i) => {
|
||||
if (tab.show) {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
key={i}
|
||||
forceRender={false}
|
||||
tab={tab.title}
|
||||
></Tabs.TabPane>
|
||||
)
|
||||
}
|
||||
return <></>
|
||||
})}
|
||||
</Tabs>
|
||||
<div className="yo-tab-external-mount-content">
|
||||
{
|
||||
tabs.map((tab, i) => {
|
||||
if (tab.show) {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={
|
||||
(this.state.actived === i.toString() ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive') + ' yo-tab-external-tabpane'
|
||||
}
|
||||
>
|
||||
<ComponentDynamic is={tab.component} {...this.props} onRef={c => this.forms.push(c)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <></>
|
||||
})
|
||||
}
|
||||
{tabs.map((tab, i) => {
|
||||
if (tab.show) {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={
|
||||
(this.state.actived === i.toString()
|
||||
? 'yo-tab-external-tabpane-active'
|
||||
: 'yo-tab-external-tabpane-inactive') +
|
||||
' yo-tab-external-tabpane'
|
||||
}
|
||||
>
|
||||
<ComponentDynamic
|
||||
is={tab.component}
|
||||
{...this.props}
|
||||
record={record}
|
||||
loading={loading}
|
||||
onRef={c => this.children.push(c)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <></>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
265
web-react/src/pages/business/house/task/index.jsx
Normal file
265
web-react/src/pages/business/house/task/index.jsx
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user