-
+
diff --git a/web-react/src/pages/business/house/code/form/part.jsx b/web-react/src/pages/business/house/code/form/part.jsx
index dd76dec..ed86511 100644
--- a/web-react/src/pages/business/house/code/form/part.jsx
+++ b/web-react/src/pages/business/house/code/form/part.jsx
@@ -1,10 +1,15 @@
import React, { Component } from 'react'
-import { Form, Input, InputNumber, Radio, Spin } from 'antd'
-import { AntIcon, IconSelector } from 'components'
+import { Button, Cascader, Form, Input, InputNumber, Radio, Spin, Select, Row, Col, Tag, Alert, Tooltip } from 'antd'
+import { AntIcon, Auth } from 'components'
import { cloneDeep } from 'lodash'
import getDictData from 'util/dic'
+import { api } from 'common/api'
+import { CITY } from 'util/global'
-const initialValues = {}
+const initialValues = {
+ type: 1,
+ industry: 1
+}
const labelCol = { flex: '150px' }
const wrapperCol = { flex: '1' }
@@ -17,7 +22,15 @@ export default class form extends Component {
codes: {
dicHouseType: [],
dicHouseIndustry: []
- }
+ },
+ options: {
+ areaTree: [],
+ projects: [],
+ zones: []
+ },
+
+ houseCode: '',
+ showIndustry: false
}
// 表单实例
@@ -32,9 +45,16 @@ export default class form extends Component {
* mount后回调
*/
componentDidMount() {
+ if (this.props.onRef) {
+ this.props.onRef(this)
+ }
this.fillData(this.props.param)
}
+ componentWillUnmount() {
+ if (this.map) this.map.destroy()
+ }
+
/**
* 填充数据
* 可以在设置this.record之后对其作出数据结构调整
@@ -45,10 +65,37 @@ export default class form extends Component {
this.record = cloneDeep(params.record)
//#region 从后端转换成前段所需格式
+ await this.initMap()
+ const options = { ...this.state.options }
+ // 有数据
+ if (this.record) {
+ const { type, areaCode } = this.record
+ // areaCode需要从字符串转为数组
+ this.record.areaCode = [
+ areaCode.substr(0, 4),
+ areaCode.substr(0, 6),
+ areaCode.substr(0, 9),
+ areaCode
+ ]
+ // 获取项目和片区列表
+ const data = await this.getProjectsAndZones({
+ areaCode: this.record.areaCode,
+ type
+ })
+ Object.assign(options, data)
+ // 定位
+ const position = [this.record.lng, this.record.lat]
+ this.setMarker(position)
+ this.map.setCenter(position)
+ }
const codes = await getDictData('dic_house_type', 'dic_house_industry')
+ const { data: areaTree } = await api.getAreaTree()
+ options.areaTree = areaTree
this.setState({
- codes
+ codes,
+ options
})
+ this.showHouseCode()
//#endregion
this.form.current.setFieldsValue(this.record)
@@ -73,50 +120,467 @@ export default class form extends Component {
postData.id = this.record.id
}
//#region 从前段转换后端所需格式
+ if (postData.areaCode) {
+ postData.areaCode = postData.areaCode[3]
+ }
//#endregion
return postData
}
}
//#region 自定义方法
+ initMap() {
+
+ // eslint-disable-next-line no-undef
+ const amap = AMap
+
+ return new Promise(resolve => {
+ const city = CITY
+
+ const district = new amap.DistrictSearch({
+ subdistrict: 0,
+ extensions: 'all',
+ level: 'city'
+ })
+
+ district.search(city, (status, result) => {
+ const bounds = result.districtList[0].boundaries,
+ mask = []
+ for (let i = 0; i < bounds.length; i += 1) {
+ mask.push([bounds[i]])
+ }
+
+ const geocoder = new amap.Geocoder({ city })
+ geocoder.getLocation(city, (status, result) => {
+
+ if (status !== 'complete' || !(result.geocodes && result.geocodes.length)) return
+
+ this.citycode = result.geocodes[0].addressComponent.citycode
+
+ this.map = new amap.Map(this.refs.map, {
+ mask,
+ zoom: 12,
+ center: result.geocodes[0].location
+ })
+
+ this.map.on('click', e => {
+ this.setMarker(e.lnglat, geocoder)
+ })
+
+ this.map.on('complete', () => {
+ this.map.setFitView()
+ this.map.setZoom(12)
+
+ for (const path of bounds) {
+ new amap.Polyline({
+ path,
+ strokeColor: '#ccc',
+ strokeWeight: 4,
+ map: this.map
+ })
+ }
+
+ resolve()
+ })
+
+ const auto = new amap.AutoComplete({
+ input: this.refs['map-search'].input,
+ city,
+ citylimit: true
+ })
+
+ const placeSearch = new amap.PlaceSearch({
+ city,
+ citylimit: true,
+ pageSize: 1
+ })
+
+ auto.on('select', ({ poi: { name: keywords, adcode } }) => {
+ placeSearch.search(keywords, async (status, result) => {
+ const {
+ poiList: { pois },
+ } = result
+ for (const poi of pois) {
+ await this.setMarker(poi.location, geocoder)
+ this.map.setCenter(poi.location)
+ }
+ })
+ })
+
+ })
+ })
+ })
+ }
+
+ setMarker(position, geocoder) {
+
+ const set = (position) => {
+ if (this.marker) {
+ this.marker.setPosition(position)
+ } else {
+ this.marker = new amap.Marker({
+ map: this.map,
+ icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+ position,
+ offset: new amap.Pixel(-13, -30),
+ })
+ }
+ }
+
+ // eslint-disable-next-line no-undef
+ const amap = AMap
+
+ return new Promise((resolve, reject) => {
+ if (geocoder) {
+ geocoder.getAddress(position, (status, result) => {
+ if (status === 'complete' && result.regeocode) {
+ if (result.regeocode.addressComponent.citycode !== this.citycode) {
+ // 如果选到了别的城市,则中断
+ return
+ }
+ this.setPosition(result.regeocode.formattedAddress, position)
+
+ set(position)
+ resolve(position)
+
+ } else {
+ console.error('根据经纬度查询地址失败')
+
+ reject()
+ }
+ })
+ } else {
+ set(position)
+ resolve(position)
+ }
+ })
+ }
+
+ setPosition(address, { lng, lat }) {
+ this.form.current.setFieldsValue({
+ address,
+ lng,
+ lat
+ })
+ }
+
+ async getProjectsAndZones({ areaCode, type } = {}, mode = ['projects', 'zones']) {
+ if (!areaCode || !type) {
+ const value = this.form.current.getFieldsValue()
+ areaCode = value.areaCode
+ type = value.type
+ }
+
+ if (!(areaCode && areaCode.length === 4)) return null
+
+ try {
+ const result = {}
+
+ if (mode.includes('projects')) {
+ const { data: projects } = await api.houseProjectList({
+ areaCode: areaCode[3],
+ type
+ })
+ result.projects = projects
+ }
+ if (mode.includes('zones')) {
+ const { data: zones } = await api.houseZoneList({
+ areaCode: areaCode[3]
+ })
+ result.zones = zones
+ }
+
+ return result
+ } catch {
+ return null
+ }
+ }
+
+ async getCodeNo(projectId) {
+ this.setState({ loading: true })
+ const { data: no } = await api.houseCodeNo({ projectId })
+ this.form.current.setFieldsValue({
+ no
+ })
+ this.setState({ loading: false })
+ }
+
+ showHouseCode(values) {
+ if (this.record) {
+ this.setState({
+ houseCode: this.record.houseCode
+ })
+ } else if (values) {
+ const { type, industry, areaCode, projectId, no } = values
+ if (areaCode && areaCode.length === 4 && projectId && no) {
+ let houseCode = areaCode[3]
+ const projectSort = this.state.options.projects.find(p => p.id === projectId).sort
+ houseCode += projectSort.toString().padStart(3, '0')
+ houseCode += no.toString().padStart(3, '0')
+ if (type == 1) {
+ this.setState({ houseCode })
+ } else {
+ if (!industry) {
+ this.setState({ houseCode: '' })
+ } else {
+ const tag = this.state.codes.dicHouseIndustry.find(p => p.code == industry).extCode.tag
+ houseCode += `-${tag}`
+ this.setState({ houseCode })
+ }
+ }
+ } else {
+ this.setState({ houseCode: '' })
+ }
+ }
+ }
+
+ async onValuesChange(changedValues, allValues) {
+ const form = this.form.current
+ // 房屋性质
+ if (changedValues.hasOwnProperty('type')) {
+ this.setState({
+ showIndustry: changedValues.type == 2,
+ loading: true
+ })
+ const data = await this.getProjectsAndZones()
+ form.setFieldsValue({ projectId: undefined })
+ this.setState({
+ options: {
+ ...this.state.options,
+ ...data
+ },
+ loading: false
+ })
+ this.showHouseCode(form.getFieldsValue())
+ }
+
+ // 所属区域
+ else if (changedValues.hasOwnProperty('areaCode')) {
+ this.setState({ loading: true })
+ const data = await this.getProjectsAndZones()
+ form.setFieldsValue({ projectId: undefined, zoneId: undefined })
+ this.setState({
+ options: {
+ ...this.state.options,
+ ...data
+ },
+ loading: false
+ })
+ this.showHouseCode(form.getFieldsValue())
+ }
+
+ // 所属项目
+ else if (changedValues.hasOwnProperty('projectId')) {
+ await this.getCodeNo(changedValues.projectId)
+ this.showHouseCode(form.getFieldsValue())
+ }
+
+ // 所属行业
+ else if (changedValues.hasOwnProperty('industry')) {
+ this.showHouseCode(allValues)
+ }
+
+ // 编号
+ else if (changedValues.hasOwnProperty('no')) {
+ this.showHouseCode(allValues)
+ }
+ }
+
+ async onReloadProjectsOrZones(mode) {
+ this.setState({ loading: true })
+ const data = await this.getProjectsAndZones({}, [mode])
+ this.setState({
+ options: {
+ ...this.state.options,
+ ...data
+ },
+ loading: false
+ })
+ }
//#endregion
render() {
- const { loading, codes } = this.state
+ const { loading, codes, options, showIndustry, houseCode } = this.state
return (