jiangyy
3 years ago
3 changed files with 723 additions and 62 deletions
@ -0,0 +1,90 @@ |
|||
|
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
|
|||
|
|||
.m-edit{ |
|||
|
|||
.m-form{ |
|||
padding-left:20px; |
|||
padding-right:25px; |
|||
} |
|||
|
|||
|
|||
/deep/ .el-form .el-form-item{ |
|||
border: 1px solid #D3DCE6; |
|||
margin-bottom: 0; |
|||
margin-top:2px; |
|||
height:47px; |
|||
// line-height: 40px; |
|||
} |
|||
|
|||
|
|||
.item-map{ |
|||
/deep/ .el-form-item{ |
|||
height:350px; |
|||
// line-height: 40px; |
|||
} |
|||
} |
|||
|
|||
.item-textarea{ |
|||
/deep/ .el-form-item{ |
|||
height:89px; |
|||
// line-height: 40px; |
|||
} |
|||
|
|||
/deep/ .el-input__countx { |
|||
background:none; |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-form-item__label{ |
|||
background: #D6E2F8; |
|||
height:100%; |
|||
line-height: 40px; |
|||
} |
|||
/deep/ .el-form-item__content{ |
|||
width:660px; |
|||
margin:5px 6px; |
|||
background: #F6F6F6; |
|||
padding:0 16px; |
|||
line-height: 36px |
|||
} |
|||
/deep/ .el-input__inner{ |
|||
width:100%; |
|||
background-color: #F6F6F6; |
|||
border:0px; |
|||
line-height: 26px; |
|||
padding:0px; |
|||
} |
|||
/deep/ .el-textarea__inner { |
|||
|
|||
width:100%; |
|||
background-color: #F6F6F6; |
|||
border:0px; |
|||
line-height: 26px; |
|||
padding:0px; |
|||
} |
|||
/deep/ .el-input__icon{ |
|||
// line-height: 5px |
|||
} |
|||
|
|||
/deep/ .el-input .el-input__count .el-input__count-inner { |
|||
background:none; |
|||
} |
|||
|
|||
} |
|||
|
|||
.edit_item_width_1{ |
|||
width:100%; |
|||
} |
|||
//带着按钮 |
|||
.edit_item_btn_width_1{ |
|||
width:550px; |
|||
} |
|||
|
|||
.edit-btn-1{ |
|||
float:right; |
|||
margin-right:10px; |
|||
} |
|||
|
|||
@ -0,0 +1,575 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div v-show="!propertyFormShow"> |
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="所属组织" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{ dataForm.agencyName }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="所属网格" |
|||
prop="gridId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_1" |
|||
v-model="dataForm.gridId" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in gridList" |
|||
:key="item.gridId" |
|||
:label="item.gridName" |
|||
:value="item.gridId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="小区名称" |
|||
prop="neighborHoodName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入小区名称" |
|||
v-model="dataForm.neighborHoodName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="小区编码" |
|||
prop="coding" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
maxlength="50" |
|||
placeholder="请输入楼栋编码" |
|||
v-model="dataForm.coding"> |
|||
|
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleCode">生成</el-button> |
|||
</el-form-item> |
|||
|
|||
<div v-if="dataForm.qrcodeUrl" |
|||
style="display: flex;flex-direction: column;"> |
|||
<img style="margin-left: 70px;width: 200px;" |
|||
:src="dataForm.qrcodeUrl"> |
|||
<a style="margin-left: 80px" |
|||
:href="dataForm.qrcodeUrl" |
|||
target="_blank">下载</a> |
|||
</div> |
|||
<el-form-item label="关联物业" |
|||
prop="propertyId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_2" |
|||
v-model="dataForm.propertyId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="item in propertyList" |
|||
:key="item.propertyId" |
|||
:label="item.propertyName" |
|||
:value="item.propertyId"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleAddProperty">添加物业</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="实有楼栋" |
|||
style="display: block" |
|||
prop="realBuilding" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_4" |
|||
v-model="dataForm.realBuilding" |
|||
:min="0" |
|||
:max="9999" |
|||
label="总户数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="地图位置" |
|||
prop="longitude" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div style="width: 500px"> |
|||
<el-select v-model="searchValue" |
|||
filterable |
|||
style="width: 500px" |
|||
remote |
|||
:reserve-keyword="true" |
|||
placeholder="请输入关键词" |
|||
:remote-method="remoteMethod" |
|||
:loading="loading"> |
|||
<el-option v-for="(item,index) in searchOptions" |
|||
@click.native="handleClickKey(index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<div id="app_community" |
|||
class="div_map"></div> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="详细地址" |
|||
prop="address" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="50" |
|||
show-word-limit |
|||
placeholder="请输入详细地址" |
|||
v-model="dataForm.address"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过500字" |
|||
v-model="dataForm.remark"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div v-show="propertyFormShow"> |
|||
<el-form :inline="false" |
|||
:model="propertyForm" |
|||
:rules="propertyRule" |
|||
class="form"> |
|||
<el-form-item label="物业名称" |
|||
prop="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="10" |
|||
placeholder="请输入小区名称" |
|||
v-model="propertyForm.name"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import daiMap from "@/utils/dai-map"; |
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
searchOptions: [], |
|||
searchValue: '', |
|||
resultList: [], |
|||
loading: false, |
|||
|
|||
|
|||
gridList: [], |
|||
propertyList: [], |
|||
btnDisable: false, |
|||
|
|||
neighborHoodId: '', //小区ID |
|||
dataForm: { |
|||
neighborHoodName: '', // 小区名称【不超过50字】 |
|||
agencyId: '', // 所属组织ID |
|||
agencyName: '', |
|||
gridId: '', //所属网格ID |
|||
propertyId: '', //关联物业 |
|||
address: '', //详细地址 |
|||
remark: '', //备注【最大500字】 |
|||
location: '', //坐标位置 |
|||
longitude: '', //经度 |
|||
latitude: '', //纬度 |
|||
realBuilding: 0, |
|||
coding: '', |
|||
sysCoding: '' |
|||
}, |
|||
|
|||
propertyFormShow: false, |
|||
propertyForm: { |
|||
name: '' |
|||
}, |
|||
|
|||
keyWords: '', |
|||
agencyObj: {} |
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async initForm (type, row, agencyObj) { |
|||
this.$refs.ref_form.resetFields(); |
|||
this.agencyObj = agencyObj |
|||
let { latitude, longitude } = this.$store.state.user; |
|||
this.formType = type |
|||
if (row) { |
|||
this.dataForm = JSON.parse(JSON.stringify(row)) |
|||
this.dataForm.neighborHoodId = this.dataForm.id |
|||
this.neighborHoodId = this.dataForm.neighborHoodId |
|||
|
|||
} else { |
|||
this.dataForm.latitude = latitude |
|||
this.dataForm.longitude = longitude |
|||
} |
|||
if (!map) { |
|||
this.initMap(this.dataForm.latitude, this.dataForm.longitude); |
|||
} else { |
|||
map.setCenter(this.dataForm.latitude, this.dataForm.longitude); |
|||
map.setMarker(this.dataForm.latitude, this.dataForm.longitude); |
|||
} |
|||
await this.loadAgency() |
|||
await this.loadGrid() |
|||
await this.loadProperty() |
|||
}, |
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap (latitude, longitude) { |
|||
|
|||
map = new daiMap( |
|||
document.getElementById("app_community"), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45, // 设置地图旋转角度 |
|||
} |
|||
); |
|||
|
|||
// 监听地图平移结束 |
|||
map.on("dragend", (e) => { |
|||
this.handleMoveCenter(e); |
|||
}); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const { lat, lng } = map.getCenter(); |
|||
this.dataForm.latitude = lat; |
|||
this.dataForm.longitude = lng; |
|||
map.setMarker(lat, lng); |
|||
|
|||
let { msg, data } = await map.getAddress(lat, lng); |
|||
if (msg == "success") { |
|||
this.dataForm.address = data.address |
|||
this.searchValue = data.address |
|||
this.searchOptions = [] |
|||
|
|||
} |
|||
}, |
|||
|
|||
async remoteMethod (query) { |
|||
|
|||
if (query !== '') { |
|||
this.loading = true; |
|||
|
|||
const { msg, data } = await map.searchNearby(query); |
|||
this.loading = false; |
|||
this.resultList = [] |
|||
|
|||
if (msg == "success" && data.resultList && data.resultList.length > 0) { |
|||
|
|||
if (data.resultList && data.resultList.length > 0) { |
|||
this.resultList = data.resultList |
|||
this.searchOptions = this.resultList.map(item => { |
|||
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; |
|||
|
|||
}); |
|||
} |
|||
} else { |
|||
this.searchOptions = [ |
|||
{ |
|||
value: '0', |
|||
label: '未检索到结果' |
|||
} |
|||
] |
|||
} |
|||
} else { |
|||
this.searchOptions = []; |
|||
} |
|||
}, |
|||
|
|||
handleClickKey (index) { |
|||
let selPosition = this.resultList[index] |
|||
let lonlat = selPosition.lonlat.split(" ") |
|||
map.setCenter(lonlat[1], lonlat[0]); |
|||
map.setMarker(lonlat[1], lonlat[0]); |
|||
this.dataForm.latitude = lonlat[1]; |
|||
this.dataForm.longitude = lonlat[0]; |
|||
this.dataForm.address = selPosition.address + selPosition.name |
|||
}, |
|||
|
|||
|
|||
async handleCode () { |
|||
if (!this.dataForm.gridId) return this.$message.error('请选择网格') |
|||
const { data, code, msg } = await requestPost( |
|||
"/gov/org/houseInformation/getNeighborHoodCoding/" + this.dataForm.gridId); |
|||
if (msg == "success" && code == 0) { |
|||
this.dataForm.coding = data.coding |
|||
this.dataForm.sysCoding = data.sysCoding |
|||
|
|||
} |
|||
}, |
|||
//加载组织 |
|||
async loadAgency () { |
|||
const url = '/epmetuser/customerstaff/staffbasicinfo' |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.dataForm.agencyId = data.agencyId |
|||
this.dataForm.agencyName = data.agencyName |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载网格 |
|||
async loadGrid () { |
|||
const url = '/gov/org/grid/allgridsnopermission ' |
|||
// const url = "https://epmet-dev.elinkservice.cn:7082/api/apimock-v2/95518686fa128a53f64c678906848062/gov/org/grid/allgrids" |
|||
let params = { |
|||
agencyId: this.dataForm.agencyId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.gridList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载物业 |
|||
async loadProperty () { |
|||
const url = '/gov/org/propertymanagement/list' |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/list" |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.propertyList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleAddProperty () { |
|||
this.propertyForm.name = '' |
|||
this.propertyFormShow = true |
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
|
|||
if (this.propertyFormShow) { |
|||
|
|||
this.addProperty() |
|||
|
|||
} else { |
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 10000) |
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
this.btnDisable = false |
|||
} else { |
|||
this.addCommunity() |
|||
} |
|||
|
|||
}) |
|||
|
|||
} |
|||
}, |
|||
async addCommunity () { |
|||
|
|||
let url = '' |
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/neighborhood/neighborhoodadd' |
|||
// url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd" |
|||
} else { |
|||
url = '/gov/org/neighborhood/neighborhoodupdate' |
|||
|
|||
this.dataForm.neighborHoodId = this.neighborHoodId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.dataForm) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
this.btnDisable = false |
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
async addProperty () { |
|||
if (!this.propertyForm.name || this.propertyForm.name === '') { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: '物业名称不能为空' |
|||
}) |
|||
return false |
|||
} |
|||
const url = '/gov/org/propertymanagement/add' |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/add" |
|||
let params = { |
|||
name: this.propertyForm.name |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.dataForm.propertyId = data.propertyId |
|||
this.propertyForm.name = '' |
|||
this.propertyFormShow = false |
|||
this.loadProperty() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
handleCancle () { |
|||
if (this.propertyFormShow) { |
|||
this.propertyForm.name = '' |
|||
this.propertyFormShow = false |
|||
} else { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
} |
|||
}, |
|||
resetData () { |
|||
this.searchValue = '' |
|||
this.searchOptions = [] |
|||
this.resultList = [] |
|||
this.neighborHoodId = '' //小区ID |
|||
this.dataForm = { |
|||
neighborHoodName: '', // 小区名称【不超过50字】 |
|||
agencyId: '', // 所属组织ID |
|||
agencyName: '', |
|||
gridId: '', //所属网格ID |
|||
propertyId: '', //关联物业 |
|||
address: '', //详细地址 |
|||
remark: '', //备注【最大500字】 |
|||
location: '', //坐标位置 |
|||
longitude: '', //经度 |
|||
latitude: '', //纬度 |
|||
realBuilding: 0, |
|||
coding: '', |
|||
sysCoding: '' |
|||
} |
|||
this.propertyFormShow = false |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
neighborHoodName: [ |
|||
{ required: true, message: '小区名称不能为空', trigger: 'blur' }, |
|||
{ |
|||
min: 1, |
|||
max: 50, |
|||
message: '小区名称长度在 1 到 50个字符', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
agencyId: [ |
|||
{ required: true, message: '所属组织不能为空', trigger: 'blur' } |
|||
], |
|||
gridId: [ |
|||
{ required: true, message: '所属网格不能为空', trigger: 'blur' } |
|||
], |
|||
coding: [ |
|||
{ required: true, message: '小区编码不能为空', trigger: 'blur' } |
|||
], |
|||
address: [ |
|||
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
|||
], |
|||
longitude: [ |
|||
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
propertyRule () { |
|||
name: [ |
|||
{ required: true, message: '物业名称不能为空', trigger: 'blur' } |
|||
// { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
|||
</style> |
|||
|
|||
|
|||
|
|||
Loading…
Reference in new issue