You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
607 lines
18 KiB
607 lines
18 KiB
3 years ago
|
<template>
|
||
|
<div>
|
||
|
<div class="dialog-h-content scroll-h">
|
||
|
<el-form ref="ref_form"
|
||
|
:inline="true"
|
||
|
:model="dataForm"
|
||
|
:rules="dataRule"
|
||
|
:disabled="formType === 'detail'"
|
||
|
class="form">
|
||
|
|
||
|
<el-form-item label="所属网格"
|
||
|
prop="gridId" label-width="150px">
|
||
|
<el-select
|
||
|
v-model.trim="gridId"
|
||
|
placeholder="请选择"
|
||
|
clearable
|
||
|
@change="handleChangeGrid"
|
||
|
>
|
||
|
<el-option
|
||
|
v-for="item in optionsG"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
>
|
||
|
</el-option>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="所属房屋" label-width="150px" prop="villageId">
|
||
|
<div class="resi-cell-value">
|
||
|
<div class="resi-cell-col">
|
||
|
<el-form-item prop="villageId">
|
||
|
<el-select
|
||
|
v-model.trim="villageId"
|
||
|
placeholder="请选择小区"
|
||
|
clearable
|
||
|
@clear="handleClearVillage"
|
||
|
@change="handleChangeV"
|
||
|
>
|
||
|
<el-option
|
||
|
v-for="item in optionsV"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
>
|
||
|
</el-option>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
<el-form-item prop="buildId">
|
||
|
<el-select
|
||
|
v-model.trim="buildId"
|
||
|
placeholder="楼号"
|
||
|
clearable
|
||
|
style="width: 120px;"
|
||
|
:disabled="changeVDisabled"
|
||
|
@clear="handleClearBuild"
|
||
|
@change="handleChangeB"
|
||
|
>
|
||
|
<el-option
|
||
|
v-for="item in optionsB"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
>
|
||
|
</el-option>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
<el-form-item prop="unitId">
|
||
|
<el-select
|
||
|
v-model.trim="unitId"
|
||
|
:disabled="changeBDisabled"
|
||
|
placeholder="单元"
|
||
|
clearable
|
||
|
style="width: 120px;"
|
||
|
@click="handleClearDan"
|
||
|
@change="handleChangeD"
|
||
|
>
|
||
|
<el-option
|
||
|
v-for="item in optionsD"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
>
|
||
|
</el-option>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
<el-form-item prop="homeId">
|
||
|
<el-select
|
||
|
v-model.trim="homeId"
|
||
|
:disabled="changeDDisabled"
|
||
|
placeholder="房号"
|
||
|
clearable
|
||
|
style="width: 120px;"
|
||
|
@change="homeIdHandleChange"
|
||
|
>
|
||
|
<el-option
|
||
|
v-for="item in optionsH"
|
||
|
:key="item.value"
|
||
|
:label="item.label"
|
||
|
:value="item.value"
|
||
|
>
|
||
|
</el-option>
|
||
|
</el-select>
|
||
|
</el-form-item>
|
||
|
</div>
|
||
|
</div>
|
||
|
</el-form-item>
|
||
|
|
||
|
|
||
|
<!--<el-form-item label="房屋类型"-->
|
||
|
<!--prop="houseType"-->
|
||
|
<!--label-width="150px"-->
|
||
|
<!--style="display: block">-->
|
||
|
<!--<el-radio-group v-model="houseType">-->
|
||
|
|
||
|
<!--<el-radio :label="'1'">楼房</el-radio>-->
|
||
|
<!--<el-radio :label="'2'">平房</el-radio>-->
|
||
|
<!--<el-radio :label="'3'">别墅</el-radio>-->
|
||
|
<!--</el-radio-group>-->
|
||
|
<!--</el-form-item>-->
|
||
|
|
||
|
<!--<el-form-item label="房屋用途"-->
|
||
|
<!--prop="purpose"-->
|
||
|
<!--label-width="150px"-->
|
||
|
<!--style="display: block">-->
|
||
|
<!--<el-radio-group v-model="purpose">-->
|
||
|
|
||
|
<!--<el-radio :label="'1'">住宅</el-radio>-->
|
||
|
<!--<el-radio :label="'2'">商业</el-radio>-->
|
||
|
<!--<el-radio :label="'3'">办公</el-radio>-->
|
||
|
<!--<el-radio :label="'4'">工业</el-radio>-->
|
||
|
<!--<el-radio :label="'5'">仓储</el-radio>-->
|
||
|
<!--<el-radio :label="'6'">商住混用</el-radio>-->
|
||
|
<!--<el-radio :label="'7'">其他</el-radio>-->
|
||
|
<!--</el-radio-group>-->
|
||
|
<!--</el-form-item>-->
|
||
|
|
||
|
<el-form-item label="房屋状态"
|
||
|
prop="rentFlag"
|
||
|
label-width="150px"
|
||
|
style="display: block">
|
||
|
<el-radio-group v-model="rentFlag">
|
||
|
|
||
|
<el-radio :label="1">出租</el-radio>
|
||
|
<el-radio :label="2">闲置</el-radio>
|
||
|
<el-radio :label="0">自住</el-radio>
|
||
|
|
||
|
</el-radio-group>
|
||
|
</el-form-item>
|
||
|
|
||
|
<el-form-item label="房主姓名"
|
||
|
prop="ownerName"
|
||
|
label-width="150px"
|
||
|
style="display: block">
|
||
|
<el-input class="item_width_1"
|
||
|
placeholder="请输入房主姓名"
|
||
|
v-model="dataForm.ownerName">
|
||
|
</el-input>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="房主电话"
|
||
|
prop="ownerPhone"
|
||
|
label-width="150px"
|
||
|
style="display: block">
|
||
|
<el-input class="item_width_1"
|
||
|
type='number'
|
||
|
placeholder="请输入房主电话"
|
||
|
v-model="dataForm.ownerPhone">
|
||
|
</el-input>
|
||
|
</el-form-item>
|
||
|
<el-form-item label="房主身份证"
|
||
|
prop="ownerIdCard"
|
||
|
label-width="150px"
|
||
|
style="display: block">
|
||
|
<el-input class="item_width_1"
|
||
|
placeholder="请输入房主身份证"
|
||
|
v-model="dataForm.ownerIdCard">
|
||
|
</el-input>
|
||
|
</el-form-item>
|
||
|
<el-form-item label=" " prop="needUpdate" label-width="150px">
|
||
|
<el-checkbox v-model="dataForm.needUpdate">更新房屋信息</el-checkbox>
|
||
|
</el-form-item>
|
||
|
</el-form>
|
||
|
|
||
|
</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, requestGet } from '@/js/dai/request'
|
||
|
|
||
|
|
||
|
let loading // 加载动画
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
formType: 'add', //表单操作类型 add新增,edit编辑,detail详情
|
||
|
btnDisable: false,
|
||
|
unitList: [],
|
||
|
|
||
|
houseId: '', //房屋ID
|
||
|
houseType: '1',
|
||
|
purpose: '1',
|
||
|
rentFlag: 1,
|
||
|
dataForm: {
|
||
|
neighborHoodId: '', // 所属小区ID
|
||
|
buildingId: '',//所属楼栋ID
|
||
|
buildingUnitId: '',//所属单元ID
|
||
|
doorName: '',//门牌号
|
||
|
houseType: '',//房屋类型【楼房,平房,别墅】
|
||
|
purpose: '',//房屋用途【住宅,商业,办公,工业,仓储,商住混用,其他】
|
||
|
rentFlag: 1,//房屋状态【是:1,否:0】 出租1、闲置2、自住 0
|
||
|
ownerPhone: '', //房主电话
|
||
|
ownerName: '', //房主名字
|
||
|
ownerIdCard: '', //房主身份证
|
||
|
needUpdate: false
|
||
|
|
||
|
},
|
||
|
|
||
|
keyWords: '',
|
||
|
agencyObj: {},
|
||
|
|
||
|
optionsV: [],
|
||
|
optionsB: [],
|
||
|
optionsH: [],
|
||
|
optionsD: [],
|
||
|
optionsG: [],
|
||
|
|
||
|
gridId: '',
|
||
|
villageId: '',
|
||
|
buildId: '',
|
||
|
unitId: '',
|
||
|
homeId: '',
|
||
|
|
||
|
}
|
||
|
},
|
||
|
components: {},
|
||
|
mounted () {
|
||
|
|
||
|
},
|
||
|
created () {
|
||
|
this.getGridList()
|
||
|
this.getValiheList()
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
handleCancle () {
|
||
|
this.resetData()
|
||
|
this.$emit('dialogCancle')
|
||
|
|
||
|
},
|
||
|
async initForm (type, row, agencyObj) {
|
||
|
|
||
|
this.$refs.ref_form.resetFields();
|
||
|
// this.agencyObj = agencyObj
|
||
|
this.formType = type
|
||
|
// if (row) {
|
||
|
//
|
||
|
// this.houseId = row.houseId
|
||
|
// await this.loadHouseInfo()
|
||
|
//
|
||
|
// } else {
|
||
|
//
|
||
|
// this.dataForm.neighborHoodId = this.agencyObj.neighborHoodId
|
||
|
// this.dataForm.buildingId = this.agencyObj.id
|
||
|
// }
|
||
|
|
||
|
|
||
|
// await this.loadUnitList()
|
||
|
|
||
|
},
|
||
|
|
||
|
async loadHouseInfo () {
|
||
|
|
||
|
const url = "/gov/org/ichouse/" + this.houseId
|
||
|
|
||
|
const { data, code, msg } = await requestGet(url)
|
||
|
|
||
|
if (code === 0) {
|
||
|
// debugger
|
||
|
this.dataForm = { ...data }
|
||
|
|
||
|
this.houseType = this.dataForm.houseType
|
||
|
this.purpose = this.dataForm.purpose
|
||
|
this.rentFlag = parseInt(this.dataForm.rentFlag)
|
||
|
|
||
|
|
||
|
} else {
|
||
|
this.$message.error(msg)
|
||
|
}
|
||
|
|
||
|
},
|
||
|
|
||
|
//加载单元
|
||
|
// async loadUnitList () {
|
||
|
// const url = '/gov/org/building/buildingunitlist'
|
||
|
//
|
||
|
// let params = {
|
||
|
// buildingId: this.dataForm.buildingId
|
||
|
// }
|
||
|
//
|
||
|
// const { data, code, msg } = await requestPost(url, params)
|
||
|
//
|
||
|
// if (code === 0) {
|
||
|
// this.unitList = data
|
||
|
// } else {
|
||
|
// this.$message.error(msg)
|
||
|
// }
|
||
|
// },
|
||
|
|
||
|
handleClearVillage() {
|
||
|
this.buildId = ''
|
||
|
this.homeId = ''
|
||
|
},
|
||
|
handleClearBuild() {
|
||
|
this.buildId = ''
|
||
|
this.unitId = ''
|
||
|
this.homeId = ''
|
||
|
},
|
||
|
handleClearDan() {
|
||
|
this.unitId = ''
|
||
|
this.homeId = ''
|
||
|
},
|
||
|
handleChangeGrid(val) {
|
||
|
console.log('val', val)
|
||
|
this.villageId = ''
|
||
|
this.buildId = ''
|
||
|
this.unitId = ''
|
||
|
this.homeId = ''
|
||
|
this.getValiheList()
|
||
|
},
|
||
|
getGridList() {
|
||
|
const { user } = this.$store.state
|
||
|
this.$http
|
||
|
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'query' })
|
||
|
.then(({ data: res }) => {
|
||
|
if (res.code !== 0) {
|
||
|
return this.$message.error(res.msg)
|
||
|
} else {
|
||
|
console.log('获取查询详情成功', res.data)
|
||
|
this.optionsG = res.data
|
||
|
}
|
||
|
})
|
||
|
.catch(() => {
|
||
|
return this.$message.error('网络错误')
|
||
|
})
|
||
|
},
|
||
|
getValiheList() {
|
||
|
const { user } = this.$store.state
|
||
|
this.$http
|
||
|
.post('/gov/org/icneighborhood/neighborhoodoption', {
|
||
|
gridId: this.gridId,
|
||
|
agencyId: ''
|
||
|
// agencyId: user.agencyId
|
||
|
})
|
||
|
.then(({ data: res }) => {
|
||
|
if (res.code !== 0) {
|
||
|
return this.$message.error(res.msg)
|
||
|
} else {
|
||
|
console.log('获取查询详情成功', res.data)
|
||
|
this.optionsV = res.data
|
||
|
}
|
||
|
})
|
||
|
.catch(() => {
|
||
|
return this.$message.error('网络错误')
|
||
|
})
|
||
|
},
|
||
|
getBuildList() {
|
||
|
this.$http
|
||
|
.post('/gov/org/icbuilding/buildingoption', {
|
||
|
neighborHoodId: this.villageId
|
||
|
})
|
||
|
.then(({ data: res }) => {
|
||
|
if (res.code !== 0) {
|
||
|
return this.$message.error(res.msg)
|
||
|
} else {
|
||
|
console.log('获取查询详情成功', res.data)
|
||
|
this.optionsB = res.data
|
||
|
}
|
||
|
})
|
||
|
.catch(() => {
|
||
|
return this.$message.error('网络错误')
|
||
|
})
|
||
|
},
|
||
|
getUniList() {
|
||
|
this.$http
|
||
|
.post('/gov/org/icbuildingunit/unitoption', {
|
||
|
buildingId: this.buildId
|
||
|
})
|
||
|
.then(({ data: res }) => {
|
||
|
if (res.code !== 0) {
|
||
|
return this.$message.error(res.msg)
|
||
|
} else {
|
||
|
console.log('获取查询详情成功', res.data)
|
||
|
this.optionsD = res.data
|
||
|
}
|
||
|
})
|
||
|
.catch(() => {
|
||
|
return this.$message.error('网络错误')
|
||
|
})
|
||
|
},
|
||
|
getHouseList() {
|
||
|
this.$http
|
||
|
.post('/gov/org/ichouse/houseoption', { unitId: this.unitId })
|
||
|
.then(({ data: res }) => {
|
||
|
if (res.code !== 0) {
|
||
|
return this.$message.error(res.msg)
|
||
|
} else {
|
||
|
console.log('获取查询详情成功', res.data)
|
||
|
this.optionsH = res.data
|
||
|
}
|
||
|
})
|
||
|
.catch(() => {
|
||
|
return this.$message.error('网络错误')
|
||
|
})
|
||
|
},
|
||
|
handleChangeV(val) {
|
||
|
console.log('val', val)
|
||
|
this.buildId = ''
|
||
|
this.unitId = ''
|
||
|
this.homeId = ''
|
||
|
this.getBuildList()
|
||
|
},
|
||
|
handleChangeB(val) {
|
||
|
console.log('val', val)
|
||
|
this.unitId = ''
|
||
|
this.homeId = ''
|
||
|
this.getUniList()
|
||
|
},
|
||
|
handleChangeD(val) {
|
||
|
console.log('val', val)
|
||
|
this.homeId = ''
|
||
|
this.getHouseList()
|
||
|
},
|
||
|
homeIdHandleChange(val){
|
||
|
this.houseId = val
|
||
|
this.loadHouseInfo()
|
||
|
},
|
||
|
|
||
|
async handleComfirm () {
|
||
|
this.btnDisable = true
|
||
|
setTimeout(() => {
|
||
|
this.btnDisable = false
|
||
|
}, 10000)
|
||
|
|
||
|
this.dataForm.houseType = this.houseType
|
||
|
this.dataForm.purpose = this.purpose
|
||
|
this.dataForm.rentFlag = this.rentFlag
|
||
|
|
||
|
// 小区到房号赋值
|
||
|
this.dataForm.gridId = this.gridId
|
||
|
this.dataForm.villageId = this.villageId
|
||
|
this.dataForm.buildId = this.buildId
|
||
|
this.dataForm.unitId = this.unitId
|
||
|
this.dataForm.homeId = this.homeId
|
||
|
|
||
|
this.$refs['ref_form'].validate((valid, messageObj) => {
|
||
|
if (!valid) {
|
||
|
this.btnDisable = false
|
||
|
app.util.validateRule(messageObj)
|
||
|
} else {
|
||
|
this.addRoom()
|
||
|
}
|
||
|
|
||
|
})
|
||
|
},
|
||
|
|
||
|
async addRoom () {
|
||
|
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
|
||
|
if (this.dataForm.ownerIdCard && regCard.test(this.dataForm.ownerIdCard) === false) {
|
||
|
this.btnDisable = false
|
||
|
this.$message({
|
||
|
type: 'warning',
|
||
|
message: '请输入正确的身份证号码'
|
||
|
})
|
||
|
return false;
|
||
|
}
|
||
|
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
|
||
|
if (this.dataForm.ownerPhone && regPhone.test(this.dataForm.ownerPhone) === false) {
|
||
|
this.btnDisable = false
|
||
|
this.$message({
|
||
|
type: 'warning',
|
||
|
message: '请输入正确的手机号码'
|
||
|
})
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
let url = ''
|
||
|
|
||
|
if (this.formType === 'add') {
|
||
|
url = '/pli/power/rentHouse/'
|
||
|
} else {
|
||
|
url = '/gov/org/house/houseupdate'
|
||
|
this.dataForm.houseId = this.houseId
|
||
|
}
|
||
|
|
||
|
const { data, code, msg } = await requestPost(url, this.dataForm)
|
||
|
this.btnDisable = false
|
||
|
if (code === 0) {
|
||
|
this.$message({
|
||
|
type: 'success',
|
||
|
message: '操作成功'
|
||
|
})
|
||
|
this.resetData()
|
||
|
this.$emit('dialogOk')
|
||
|
|
||
|
} else {
|
||
|
|
||
|
this.$message.error(msg)
|
||
|
}
|
||
|
|
||
|
},
|
||
|
|
||
|
handleCancle () {
|
||
|
this.resetData()
|
||
|
this.$emit('dialogCancle')
|
||
|
|
||
|
},
|
||
|
|
||
|
resetData () {
|
||
|
this.houseId = '' //房屋ID
|
||
|
this.houseType = '1'
|
||
|
this.purpose = '1'
|
||
|
this.rentFlag = 1
|
||
|
this.dataForm = {
|
||
|
neighborHoodId: '', // 所属小区ID
|
||
|
buildingId: '',//所属楼栋ID
|
||
|
buildingUnitId: '',//所属单元ID
|
||
|
doorName: '',//门牌号
|
||
|
houseType: '1',//房屋类型【楼房,平房,别墅】
|
||
|
purpose: '1',//房屋用途【住宅,商业,办公,工业,仓储,商住混用,其他】
|
||
|
rentFlag: 0,//是否出租【是:1,否:0】
|
||
|
ownerPhone: '', //房主电话
|
||
|
ownerName: '', //房主名字
|
||
|
ownerIdCard: '' //房主身份证
|
||
|
}
|
||
|
|
||
|
},
|
||
|
// 开启加载动画
|
||
|
startLoading () {
|
||
|
loading = Loading.service({
|
||
|
lock: true, // 是否锁定
|
||
|
text: '正在加载……', // 加载中需要显示的文字
|
||
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
||
|
})
|
||
|
},
|
||
|
// 结束加载动画
|
||
|
endLoading () {
|
||
|
// clearTimeout(timer);
|
||
|
if (loading) {
|
||
|
loading.close()
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
dataRule () {
|
||
|
return {
|
||
|
buildingUnitId: [
|
||
|
{ required: true, message: '所属单元不能为空', trigger: 'blur' },
|
||
|
],
|
||
|
doorName: [
|
||
|
{ required: true, message: '门牌号不能为空', trigger: 'blur' }
|
||
|
],
|
||
|
houseType: [
|
||
|
{ required: true, message: '房屋类型不能为空', trigger: 'blur' }
|
||
|
],
|
||
|
purpose: [
|
||
|
{ required: true, message: '房屋用途不能为空', trigger: 'blur' }
|
||
|
],
|
||
|
rentFlag: [
|
||
|
{ required: true, message: '是否出租不能为空', trigger: 'blur' }
|
||
|
],
|
||
|
ownerPhone: [
|
||
|
{ required: false }
|
||
|
],
|
||
|
ownerName: [
|
||
|
{ required: false }
|
||
|
],
|
||
|
ownerIdCard: [
|
||
|
{ required: false }
|
||
|
],
|
||
|
villageId: [
|
||
|
{ required: true, message: '所属房屋不能为空', trigger: 'blur' }
|
||
|
],
|
||
|
gridId: [
|
||
|
{ required: true, message: '所属网格不能为空', trigger: 'blur' }
|
||
|
],
|
||
|
}
|
||
|
},
|
||
|
|
||
|
},
|
||
|
props: {}
|
||
|
}
|
||
|
</script>
|
||
|
<style lang="scss" scoped >
|
||
|
@import "@/assets/scss/modules/visual/communityManageForm.scss";
|
||
|
</style>
|