add react版前端
This commit is contained in:
619
web-react/src/pages/business/house/info/form/base/building.jsx
Normal file
619
web-react/src/pages/business/house/info/form/base/building.jsx
Normal file
@@ -0,0 +1,619 @@
|
||||
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'
|
||||
|
||||
const layout = {
|
||||
labelCol: { flex: '150px' },
|
||||
wrapperCol: { flex: '1' }
|
||||
}
|
||||
|
||||
export default class building extends Component {
|
||||
|
||||
state = {
|
||||
loading: true,
|
||||
codes: {
|
||||
landAttribute: [],
|
||||
houseStructureType: [],
|
||||
houseSseismicGrade: [],
|
||||
houseBaseInfo: [],
|
||||
houseInsulationMaterial: [],
|
||||
houseWallMaterial: [],
|
||||
houseFireproofGrade: [],
|
||||
houseBuildingCurtainWall: [],
|
||||
houseElevator: [],
|
||||
}
|
||||
}
|
||||
form = React.createRef()
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
// 使父组件获取到当前组件实例
|
||||
if (props.onRef) {
|
||||
props.onRef(this)
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(props, state) {
|
||||
// 在上级页签切换时,阻止当前组件渲染,以保证性能
|
||||
return !isEqual(this.state, state)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.onFillData()
|
||||
}
|
||||
|
||||
onFillData = async () => {
|
||||
await this.loadCodes()
|
||||
this.setState({
|
||||
loading: false
|
||||
})
|
||||
}
|
||||
|
||||
onGetData = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.form.current.validateFields()
|
||||
.then(values => {
|
||||
const record = cloneDeep(values)
|
||||
|
||||
resolve(record)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
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,
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Spin spinning={this.state.loading}>
|
||||
<Form
|
||||
{...layout}
|
||||
ref={this.form}
|
||||
>
|
||||
<Row gutter={16} type="flex">
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseInfo', 'buildingName']} label="幢名称" rules={[{ required: true, message: '请输入幢名称', trigger: 'blur' }]}>
|
||||
<Input autoComplete="off" placeholder="请输入幢名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseCode', 'address']} label="坐落地址">
|
||||
<Input autoComplete="off" placeholder="请输入坐落地址" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="土地性质" name="houseInfo.landAttribute">
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.landAttribute.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="地理坐标">
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseCode', 'lng']}>
|
||||
<Input autoComplete="off"
|
||||
className="yo-input-prefix-2"
|
||||
disabled
|
||||
placeholder="请在地图上选择坐标"
|
||||
prefix="经度"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item name={['houseCode', 'lat']}>
|
||||
<Input autoComplete="off"
|
||||
className="yo-input-prefix-2"
|
||||
disabled
|
||||
placeholder="请在地图上选择坐标"
|
||||
prefix="纬度"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<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" />
|
||||
</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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="外墙保温材料"
|
||||
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"
|
||||
className="w-300"
|
||||
placeholder="请输入其他外墙保温材料"
|
||||
/>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="houseInfo.fireproofGrade" label={<span>外墙外保温材料<br />防火等级</span>}>
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.houseFireproofGrade.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">
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.houseBuildingCurtainWall.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">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="有无外墙粉刷" name="houseInfo.whiteWash">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="有无外墙涂料" name="houseInfo.coating">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item label="电梯" name="houseInfo.elevator">
|
||||
<Radio.Group buttonStyle="solid">
|
||||
{
|
||||
this.state.codes.houseElevator.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">
|
||||
<DatePicker
|
||||
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">
|
||||
<InputNumber
|
||||
min={0}
|
||||
className="w-100-p"
|
||||
placeholder="请输入设计使用年限"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">年</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="总建筑面积" name="houseInfo.totalArea">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<InputNumber
|
||||
min={0}
|
||||
className="w-100-p"
|
||||
placeholder="请输入总建筑面积"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">m²</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="总户数" name="houseInfo.houseHolds">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
step={1}
|
||||
className="w-100-p"
|
||||
placeholder="请输入总户数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">户</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="房屋单元数" name="houseInfo.units">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
step={1}
|
||||
className="w-100-p"
|
||||
placeholder="请输入房屋单元数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">单元</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="每层每单元户数" name="houseInfo.unitFloorHolds">
|
||||
<Row type="flex">
|
||||
<Col flex="1">
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
step={1}
|
||||
className="w-100-p"
|
||||
placeholder="请输入每层每单元户数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">户</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="建设单位" name="houseInfo.buildingUnit">
|
||||
<Input autoComplete="off" placeholder="请输入建设单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="建设单位联系人" name="houseInfo.buildingUnitUser">
|
||||
<Input autoComplete="off" placeholder="请输入建设单位联系人" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="建设单位联系电话" name="houseInfo.buildingUnitTel">
|
||||
<Input autoComplete="off" placeholder="请输入建设单位联系电话" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="设计单位" name="houseInfo.desingerUnit">
|
||||
<Input autoComplete="off" placeholder="请输入设计单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="施工单位" name="houseInfo.constructionUnit">
|
||||
<Input autoComplete="off" placeholder="请输入施工单位" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<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">
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
step={1}
|
||||
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">
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
step={1}
|
||||
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">
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={0}
|
||||
step={1}
|
||||
className="w-100-p"
|
||||
disabled
|
||||
placeholder="请输入总层数"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item label="其中">
|
||||
<div className="ant-form-inline">
|
||||
<Form.Item>
|
||||
<Row type="flex" align="middle">
|
||||
<Col>
|
||||
<span className="yo-addon">地上第</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landBsFloorStart">
|
||||
<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="几"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层为商业用房</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Row type="flex" align="middle">
|
||||
<Col>
|
||||
<span className="yo-addon">地上</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landBikeFloorStart">
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
placeholder="几"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层为车棚层</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Row type="flex" align="middle">
|
||||
<Col>
|
||||
<span className="yo-addon">地上第</span>
|
||||
</Col>
|
||||
<Col flex="1">
|
||||
<Form.Item className="mr-none" name="houseInfo.landResidenceFloorStart">
|
||||
<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.landResidenceFloorEnd">
|
||||
<InputNumber
|
||||
min={0}
|
||||
step={1}
|
||||
placeholder="几"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<span className="yo-addon">层为住宅</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Spin>
|
||||
)
|
||||
}
|
||||
}
|
||||
122
web-react/src/pages/business/house/info/form/base/index.jsx
Normal file
122
web-react/src/pages/business/house/info/form/base/index.jsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Row, Col, Card, Anchor } from 'antd'
|
||||
import { defaultsDeep } from 'lodash'
|
||||
import Components from 'components'
|
||||
|
||||
const { ComponentDynamic, Container } = 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)
|
||||
|
||||
// 使父组件获取到当前组件实例
|
||||
if (props.onRef) {
|
||||
props.onRef(this)
|
||||
}
|
||||
}
|
||||
|
||||
getContainer = () => {
|
||||
return this.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)
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
resolve(formData)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container mode="fluid" ref={this.setContainer}>
|
||||
<Row gutter={16} type="flex">
|
||||
<Col flex="1">
|
||||
<br />
|
||||
<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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Card>
|
||||
</Col>
|
||||
<Col flex="240px">
|
||||
<Anchor
|
||||
getContainer={this.getContainer}
|
||||
offsetTop={24}
|
||||
targetOffset={48}
|
||||
wrapperStyle={{ backgroundColor: 'transparent' }}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
{
|
||||
parts.map((part, i) => {
|
||||
return (
|
||||
<Anchor.Link
|
||||
key={i}
|
||||
href={`#form-${i}-${this.props.id}`}
|
||||
title={part.title}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Anchor>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
150
web-react/src/pages/business/house/info/form/index.jsx
Normal file
150
web-react/src/pages/business/house/info/form/index.jsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Tabs, Button, message } from 'antd'
|
||||
import { defaultsDeep } from 'lodash'
|
||||
import Components from 'components'
|
||||
|
||||
const { ComponentDynamic, Container } = Components
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: '房屋基本情况',
|
||||
component: () => import('./base'),
|
||||
active: true,
|
||||
show: true,
|
||||
},
|
||||
// {
|
||||
// title: '幕墙信息',
|
||||
// name: 'curtainWall',
|
||||
// path: 'curtainWall',
|
||||
// active: false,
|
||||
// show: false,
|
||||
// },
|
||||
// {
|
||||
// title: '面砖信息',
|
||||
// name: 'faceBrick',
|
||||
// path: 'faceBrick',
|
||||
// active: false,
|
||||
// show: false,
|
||||
// },
|
||||
// {
|
||||
// title: '墙面粉刷信息',
|
||||
// name: 'whiteWash',
|
||||
// path: 'whiteWash',
|
||||
// active: false,
|
||||
// show: false,
|
||||
// },
|
||||
// {
|
||||
// title: '墙面涂料信息',
|
||||
// name: 'coating',
|
||||
// path: 'coating',
|
||||
// active: false,
|
||||
// show: false,
|
||||
// },
|
||||
// {
|
||||
// title: '巡查登记',
|
||||
// name: 'patrol',
|
||||
// path: 'patrol',
|
||||
// active: false,
|
||||
// show: true,
|
||||
// },
|
||||
]
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
actived: '0'
|
||||
}
|
||||
forms = []
|
||||
|
||||
onSubmit = async () => {
|
||||
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) {
|
||||
if (err) {
|
||||
err.errorFields.forEach(p => {
|
||||
message.error(p.errors[0])
|
||||
})
|
||||
}
|
||||
flag = false
|
||||
}
|
||||
}
|
||||
|
||||
if (!flag) {
|
||||
return
|
||||
}
|
||||
|
||||
console.log(formData)
|
||||
|
||||
message.success('提交成功')
|
||||
}
|
||||
|
||||
render() {
|
||||
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>
|
||||
<div className="yo-form-page--bar-inner">
|
||||
<span>
|
||||
{/* 可以在工具栏中增加其他控件(只能在一行内) */}
|
||||
</span>
|
||||
<span>
|
||||
<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-tab-external-mount">
|
||||
<Tabs
|
||||
activeKey={this.state.actived}
|
||||
animated={false}
|
||||
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>
|
||||
<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 <></>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
15
web-react/src/pages/business/house/info/index.jsx
Normal file
15
web-react/src/pages/business/house/info/index.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Button } from 'antd'
|
||||
|
||||
export default class index extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => window.openContentWindow({
|
||||
title: '房屋表单',
|
||||
path: 'business/house/info/form',
|
||||
})}>打开表单</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
70
web-react/src/pages/home/index.jsx
Normal file
70
web-react/src/pages/home/index.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Row, Col, Divider } from 'antd'
|
||||
import { isEqual } from 'lodash'
|
||||
import store from 'store'
|
||||
import Components from 'components'
|
||||
import moment from 'moment'
|
||||
import './index.less'
|
||||
|
||||
const { getState, subscribe } = store
|
||||
|
||||
const { Container, Image, AntIcon } = Components
|
||||
|
||||
const storePath = 'user'
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
[storePath]: getState(storePath)
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.unsubscribe = subscribe(storePath, () => {
|
||||
this.setState(getState(storePath))
|
||||
})
|
||||
}
|
||||
|
||||
shouldComponentUpdate(props, state) {
|
||||
return !isEqual(this.state, state)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unsubscribe()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<div className="home-header">
|
||||
<Container mode="fluid">
|
||||
<Row align="middle" justify="space-between" type="flex">
|
||||
<Col>
|
||||
<div className="home-header-row">
|
||||
<div className="home-header-avatar">
|
||||
<Image id={this.state.user.avatar} size={64} icon={<AntIcon type="UserOutlined" />} type="avatar" />
|
||||
</div>
|
||||
<div className="home-header-content">
|
||||
<h4>
|
||||
{moment().format('A')}好，<span>{this.state.user.nickName || this.state.user.name}</span>，欢迎您登录系统！
|
||||
</h4>
|
||||
<div>
|
||||
<span>上次IP：{this.state.user.lastLoginIp}</span>
|
||||
<Divider type="vertical" />
|
||||
<span>上次登录时间：{this.state.user.lastLoginTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<AntIcon type="MailOutlined" style={{ fontSize: '20px', color: '#f80000' }} className="mr-xs" />
|
||||
您有<a href="/">0</a>封未读邮件，请尽快查收！
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
40
web-react/src/pages/home/index.less
Normal file
40
web-react/src/pages/home/index.less
Normal file
@@ -0,0 +1,40 @@
|
||||
@import (reference) 'assets/style/app.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row-flex {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user