城阳pc工作端前端代码
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

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>