wanggongfeng
3 years ago
6 changed files with 1101 additions and 52 deletions
@ -0,0 +1,606 @@ |
|||||
|
<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> |
||||
Loading…
Reference in new issue