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.
1235 lines
44 KiB
1235 lines
44 KiB
<template>
|
|
<el-dialog class="rent" width="80%" top="5vh" :visible.sync="visible" :title="dataForm.flag === 'edit' ? '修改' : '新增'" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm"
|
|
@keyup.enter.native="dataFormSubmitHandle()" label-width="100px">
|
|
<div style="margin-left: 30px;height: 30px;font-weight: bold;">房屋信息</div>
|
|
<el-form-item label="所属社区" prop="gridName">
|
|
<el-select v-model.trim="dataForm.communityId"
|
|
placeholder="请选择"
|
|
clearable
|
|
@change="handleChangeAgency">
|
|
<el-option v-for="item in agencyOptions"
|
|
:key="item.orgId"
|
|
:label="item.orgName"
|
|
:value="item.orgId">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="所属网格" label-width="100px" prop="gridId">
|
|
<el-select v-model.trim="dataForm.gridId"
|
|
:disabled="changeCDisabled"
|
|
placeholder="请选择"
|
|
clearable
|
|
@change="handleChangeGrid">
|
|
<el-option v-for="item in gridOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item label="所属房屋" label-width="100px" prop="homeId">
|
|
<div class="resi-cell-value">
|
|
<div class="resi-cell-col">
|
|
<el-form-item prop="villageId" class="cell-item-new2">
|
|
<el-select v-model.trim="dataForm.villageId"
|
|
:disabled="changeGDisabled"
|
|
placeholder="请选择小区"
|
|
clearable
|
|
@clear="handleClearVillage"
|
|
@change="handleChangeV">
|
|
<el-option v-for="item in villageOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="buildId" class="cell-item-new">
|
|
<el-select v-model.trim="dataForm.buildId"
|
|
:disabled="changeVDisabled"
|
|
placeholder="楼号"
|
|
clearable
|
|
style="width: 120px;"
|
|
@clear="handleClearBuild"
|
|
@change="handleChangeB">
|
|
<el-option v-for="item in buildingOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="unitId" class="cell-item-new">
|
|
<el-select v-model.trim="dataForm.unitId"
|
|
:disabled="changeBDisabled"
|
|
placeholder="单元"
|
|
clearable
|
|
style="width: 120px;"
|
|
@click="handleClearDan"
|
|
@change="handleChangeD">
|
|
<el-option v-for="item in unitOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="homeId" class="cell-item-new">
|
|
<el-select v-model.trim="dataForm.homeId"
|
|
:disabled="changeDDisabled"
|
|
placeholder="房号"
|
|
clearable
|
|
style="width: 120px;"
|
|
@change="handleChangeH">
|
|
<el-option v-for="item in houseOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item label="房主姓名" prop="ownerName">
|
|
<el-input v-model="dataForm.ownerName" placeholder="房主姓名" style="width: 210px;"></el-input>
|
|
</el-form-item>
|
|
|
|
<div style="margin-left: 30px;height: 30px;font-weight: bold;">合同信息</div>
|
|
<div style="margin-left: 50px;height: 30px;">出租人信息</div>
|
|
<el-form-item label="出租人姓名" prop="lessorName" label-width="140px">
|
|
<el-input v-model="dataForm.lessorName" placeholder="出租人姓名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="出租人证件号" prop="lessorIdCard" label-width="140px">
|
|
<el-input v-model="dataForm.lessorIdCard" placeholder="出租人证件号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="出租人手机" prop="lessorMobile" label-width="140px">
|
|
<el-input v-model="dataForm.lessorMobile" placeholder="出租人手机"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="与房主关系" prop="lessorRelation" label-width="140px">
|
|
<!--<el-input v-model="dataForm.lessorRelation" placeholder="与房主关系"></el-input>-->
|
|
<el-select v-model="dataForm.lessorRelation" placeholder="与房主关系">
|
|
<el-option v-for="item in lessorRelationArr_" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="出租人现居住地" prop="lessorLiveAddress" label-width="140px">
|
|
<el-input v-model="dataForm.lessorLiveAddress" placeholder="出租人现居住地" ></el-input>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item label="中介合同附件" prop="agencyImgList" v-if="dataForm.lessorRelation ==='中介'" label-width="140px">
|
|
<template>
|
|
<upload-image :defaultFileList="dataForm.agencyImgList" :limit="6" @change="onChangeAgencyImgList"></upload-image>
|
|
</template>
|
|
</el-form-item>
|
|
<br/>
|
|
|
|
<div style="margin-left: 50px;height: 30px;">承租人信息</div>
|
|
<el-form-item label="承租人姓名" prop="lesseeName" label-width="140px">
|
|
<el-input v-model="dataForm.lesseeName" placeholder="承租人姓名" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="承租人证件号" prop="lesseeIdCard" label-width="140px">
|
|
<el-input v-model="dataForm.lesseeIdCard" placeholder="承租人证件号" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="承租人手机" prop="lesseeMobile" label-width="140px">
|
|
<el-input v-model="dataForm.lesseeMobile" placeholder="承租人手机" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="工作单位" prop="lesseeUnit" label-width="140px">
|
|
<el-input v-model="dataForm.lesseeUnit" placeholder="工作单位" ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="承租人户籍地" label-width="140px">
|
|
<el-input v-model="dataForm.lesseeHouseAddress" placeholder="承租人户籍地" ></el-input>
|
|
</el-form-item>
|
|
<br/>
|
|
<div style="padding:20px 30px">
|
|
<div style="font-weight: bold;">居住成员信息</div>
|
|
<br/>
|
|
<el-button @click="addMember()" type="primary">添加成员</el-button>
|
|
<div><br/></div>
|
|
<div class="add-member" v-for="(item, index) in dataForm.tenantList" :key="index">
|
|
<el-form-item label="姓名" :prop="'tenantList['+ index +'].name'" :rules="tip" label-width="150px">
|
|
<el-input v-model="dataForm.tenantList[index].name" placeholder="请输入" ></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="手机" :prop="'tenantList['+ index +'].mobile'" :rules="tip" label-width="150px">
|
|
<el-input v-model="dataForm.tenantList[index].mobile" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="证件号" :prop="'tenantList['+index+'].idCard'" :rules="tip" label-width="150px">
|
|
<el-input v-model="dataForm.tenantList[index].idCard" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="户籍地" :prop="'tenantList['+index+'].hjszd'" :rules="tip" label-width="150px">
|
|
<el-input v-model="dataForm.tenantList[index].hjszd" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="工作单位" :prop="'tenantList['+index+'].unit'" :rules="tip" label-width="150px">
|
|
<el-input v-model="dataForm.tenantList[index].unit" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="与户主关系" :prop="'tenantList['+index+'].yfzgx'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].yfzgx" placeholder="请选择">
|
|
<el-option v-for="item in lessorRelationArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="政治面貌" :prop="'tenantList['+index+'].politicalStatus'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].politicalStatus" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in zzmmOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="是否服过兵役" :prop="'tenantList['+index+'].isMilitary'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].isMilitary" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in shifouOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="国籍" :prop="'tenantList['+index+'].nation'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].nation" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in nationOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br/>
|
|
|
|
<el-form-item label="证件照片" label-width="150px">
|
|
<template>
|
|
<upload-image
|
|
:defaultFileList="dataForm.tenantList[index].idCardImgList"
|
|
:limit="2"
|
|
:rowIndex="index"
|
|
@change="onChangeTenantListIdImgList"></upload-image>
|
|
</template>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="照片" label-width="150px">
|
|
<template>
|
|
<upload-image
|
|
:defaultFileList="dataForm.tenantList[index].imgList"
|
|
:limit="3"
|
|
:rowIndex="index"
|
|
@change="onChangeImgList"></upload-image>
|
|
</template>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item label="民族" :prop="'tenantList['+index+'].mz'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].mz" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in mzOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
|
|
<!-- <el-form-item label="性别" :prop="'tenantList['+index+'].gender'" required :show-message="false">
|
|
<el-select v-model="dataForm.tenantList[index].gender" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in genderOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
|
|
|
|
<!-- <el-form-item label="出生日期" :prop="'tenantList['+index+'].birthday'" required :show-message="false" label-width="150px">
|
|
<el-date-picker
|
|
v-model="dataForm.tenantList[index].birthday"
|
|
type="date"
|
|
clearable
|
|
placeholder="选择日期时间"
|
|
value-format="yyyy-MM-dd"
|
|
style="width: 200px; margin-right: 20px"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="是否接种" :prop="'tenantList['+index+'].isVaccination'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].isVaccination" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in isVaccinationOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item v-if="dataForm.tenantList[index].isVaccination === '1'" label="第一次接种时间" :prop="'tenantList['+index+'].firstVacTime'" :rules="tip_select" label-width="150px">
|
|
<el-date-picker
|
|
v-model="dataForm.tenantList[index].firstVacTime"
|
|
type="date"
|
|
clearable
|
|
placeholder="选择日期时间"
|
|
value-format="yyyy-MM-dd"
|
|
style="width: 200px; margin-right: 20px"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="dataForm.tenantList[index].isVaccination === '1'" label="第一次接种地点" :prop="'tenantList['+index+'].firstVacSite'" :rules="tip_select" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].firstVacSite" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in vacSiteOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item v-if="dataForm.tenantList[index].isVaccination === '1'" label="第二次接种时间" label-width="150px">
|
|
<el-date-picker
|
|
v-model="dataForm.tenantList[index].secondVacTime"
|
|
type="date"
|
|
clearable
|
|
placeholder="选择日期时间"
|
|
value-format="yyyy-MM-dd"
|
|
style="width: 200px; margin-right: 20px"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="dataForm.tenantList[index].isVaccination === '1'" label="第二次接种地点" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].secondVacSite" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in vacSiteOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br/>
|
|
<el-form-item v-if="dataForm.tenantList[index].isVaccination === '1'" label="第三次接种时间" :show-message="false" label-width="150px">
|
|
<el-date-picker
|
|
v-model="dataForm.tenantList[index].thirdVacTime"
|
|
type="date"
|
|
clearable
|
|
placeholder="选择日期时间"
|
|
value-format="yyyy-MM-dd"
|
|
style="width: 200px; margin-right: 20px"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="dataForm.tenantList[index].isVaccination === '1'" label="第三次接种地点" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].thirdVacSite" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in vacSiteOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<br/>
|
|
|
|
<el-form-item label="原因" :show-message="false" label-width="150px">
|
|
<el-select v-model="dataForm.tenantList[index].reason" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in reasonOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="备注" :show-message="false" label-width="150px">
|
|
<el-input
|
|
type="textarea"
|
|
maxlength="500"
|
|
show-word-limit
|
|
:rows="3"
|
|
placeholder="请输入备注，不超过500字"
|
|
v-model="dataForm.tenantList[index].note"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button style="float: right" type="primary" size="small" @click="deleteMember(index)">删除</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div style="margin-left: 30px;height: 30px;font-weight: bold;">合同内容</div>
|
|
<el-form-item label="签署日期" prop="signDate" label-width="140px">
|
|
<!--<el-input v-model="dataForm.signDate" placeholder="签署日期" ></el-input>-->
|
|
<el-date-picker v-model="dataForm.signDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
format="yyyy-MM-dd"
|
|
placeholder="选择签署日期"
|
|
style="width:280px">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="合同开始日期" prop="startDate" label-width="140px">
|
|
<!--<el-input v-model="dataForm.startDate" placeholder="合同开始日期" ></el-input>-->
|
|
<el-date-picker v-model="dataForm.startDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
format="yyyy-MM-dd"
|
|
placeholder="选择合同开始日期"
|
|
style="width:280px">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="合同结束日期" prop="endDate" label-width="140px">
|
|
<!--<el-input v-model="dataForm.endDate" placeholder="合同结束日期" ></el-input>-->
|
|
<el-date-picker v-model="dataForm.endDate"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
format="yyyy-MM-dd"
|
|
placeholder="选择合同结束日期"
|
|
style="width:280px">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<br/>
|
|
|
|
<el-form-item label="合同照片" label-width="140px">
|
|
<template>
|
|
<upload-image :defaultFileList="dataForm.fileList" :limit="6" @change="onChangeFileList"></upload-image>
|
|
</template>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="合同附件" label-width="140px">
|
|
<template>
|
|
<el-upload
|
|
class="upload-demo"
|
|
multiple
|
|
:action="uploadUrl"
|
|
:data="{ customerId: customerId }"
|
|
:limit="limit"
|
|
:headers="$getElUploadHeaders()"
|
|
:on-success="(res, file) => handleFlieSuccess(res, file)"
|
|
:on-error="(res, file) => handleFlieError(res, file)"
|
|
:on-remove="(res) => handleFlieRemove(res)"
|
|
:on-exceed="(res) => handleFlieExceed(res)"
|
|
:before-upload="(file) => beforeFlieUpload(file)"
|
|
:on-preview="handlePreview"
|
|
:file-list="dataForm.docList">
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
<div slot="tip" class="el-upload__tip">只能上传合同文件</div>
|
|
</el-upload>
|
|
</template>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-form>
|
|
<template slot="footer">
|
|
<div class="resi-btns">
|
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
|
|
<el-button @click="dataFormSubmitHandle" type="primary">提交</el-button>
|
|
</div>
|
|
</template>
|
|
<el-dialog :visible.sync="dialogVisible" :modal="false">
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import UploadImage from './upload-image.vue'
|
|
import debounce from 'lodash/debounce'
|
|
export default {
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
dataForm: {
|
|
id: '',
|
|
flag: '', // 新增，修改
|
|
communityId: '',
|
|
communityName: '',
|
|
gridId: '',
|
|
gridName: '',
|
|
villageId: '',
|
|
villageName: '',
|
|
buildId: '',
|
|
buildName: '',
|
|
unitId: '',
|
|
unitName: '',
|
|
homeId: '',
|
|
homeName: '',
|
|
ownerName: '',
|
|
state: '',
|
|
lessorName: '',
|
|
lessorIdCard: '',
|
|
lessorMobile: '',
|
|
lessorRelation: '',
|
|
lessorLiveAddress: '',
|
|
lesseeName: '',
|
|
lesseeIdCard: '',
|
|
lesseeMobile: '',
|
|
lesseeUnit: '',
|
|
lesseeHouseAddress: '',
|
|
signDate: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
tenantList: [{
|
|
id: '',
|
|
name: '',
|
|
idCard: '',
|
|
mobile: '',
|
|
yfzgx: '',
|
|
type: 1,
|
|
politicalStatus: '',
|
|
mz:'',
|
|
gender:'',
|
|
birthday:'',
|
|
isVaccination:'1',
|
|
isMilitary: '',
|
|
nation: '',
|
|
imgList: [],
|
|
idCardImgList: [],
|
|
unit: '',
|
|
firstVacTime: '',
|
|
firstVacSite:'',
|
|
secondVacTime:'',
|
|
secondVacSite:'',
|
|
thirdVacTime:'',
|
|
thirdVacSite:'',
|
|
reason:'',
|
|
note:'',
|
|
}],
|
|
fileList: [],
|
|
docList: []
|
|
},
|
|
zzmmOptions: [
|
|
{ name: '党员', value: '党员' },
|
|
{ name: '群众', value: '群众' }
|
|
],
|
|
shifouOptions: [
|
|
{ name: '是', value: '是' },
|
|
{ name: '否', value: '否' }
|
|
],
|
|
nationOptions: [
|
|
{ name: '中国', value: '中国' },
|
|
{ name: '其他', value: '其他' }
|
|
],
|
|
mzOptions:[],
|
|
isVaccinationOption: [
|
|
{ value: '0', label: '否' },
|
|
{ value: '1', label: '是' },
|
|
],
|
|
vacSiteOption: [
|
|
{ value: '本街道内接种', label: '本街道内接种' },
|
|
{ value: '区内其他街道接种', label: '区内其他街道接种' },
|
|
{ value: '区外其他地区接种', label: '区外其他地区接种' },
|
|
],
|
|
reasonOption: [
|
|
{ value: '禁忌症', label: '禁忌症' },
|
|
{ value: '拒绝接种', label: '拒绝接种' },
|
|
{ value: '其他原因', label: '其他原因' },
|
|
],
|
|
genderOptions:[{label: "男", value: "1"}, {label: "女", value: "2"}],
|
|
dataListLoading: false,
|
|
dialogVisible: false,
|
|
dialogImageUrl: '',
|
|
lessorRelationArr: [
|
|
{ dictValue: '本人', dictName: '本人' },
|
|
{ dictValue: '配偶', dictName: '配偶' },
|
|
{ dictValue: '子女', dictName: '子女' },
|
|
{ dictValue: '父母', dictName: '父母' },
|
|
{ dictValue: '岳父母或公婆', dictName: '岳父母或公婆' },
|
|
{ dictValue: '祖父母', dictName: '祖父母' },
|
|
{ dictValue: '媳婿', dictName: '媳婿' },
|
|
{ dictValue: '孙子女', dictName: '孙子女' },
|
|
{ dictValue: '兄弟姐妹', dictName: '兄弟姐妹' },
|
|
{ dictValue: '其他', dictName: '其他' }
|
|
],
|
|
lessorRelationArr_: [
|
|
{ dictValue: '本人', dictName: '本人' },
|
|
{ dictValue: '配偶', dictName: '配偶' },
|
|
{ dictValue: '子女', dictName: '子女' },
|
|
{ dictValue: '父母', dictName: '父母' },
|
|
{ dictValue: '岳父母或公婆', dictName: '岳父母或公婆' },
|
|
{ dictValue: '祖父母', dictName: '祖父母' },
|
|
{ dictValue: '媳婿', dictName: '媳婿' },
|
|
{ dictValue: '孙子女', dictName: '孙子女' },
|
|
{ dictValue: '兄弟姐妹', dictName: '兄弟姐妹' },
|
|
{ dictValue: '中介', dictName: '中介' }
|
|
],
|
|
checkVisible: false,
|
|
disabledBtn: false,
|
|
gridOptions: [],
|
|
villageOptions: [],
|
|
buildingOptions: [],
|
|
unitOptions: [],
|
|
houseOptions: [],
|
|
agencyOptions: [],
|
|
uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`,
|
|
customerId: localStorage.getItem("customerId"),
|
|
limit: 3,
|
|
tip: { required: true, message: '必填项不能为空', trigger: 'blur' },
|
|
tip_select: { required: true, message: '必填项不能为空', trigger: 'change' }
|
|
}
|
|
},
|
|
computed: {
|
|
dataRule () {
|
|
return {
|
|
gridId: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
gridName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
buildId: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
buildName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
unitId: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
unitName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
homeId: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
homeName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
ownerName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
state: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lessorName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lessorIdCard: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lessorMobile: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lesseeName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lesseeIdCard: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lesseeMobile: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lessorRelation: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lessorLiveAddress: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
lesseeUnit: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
// lesseeHouseAddress: [
|
|
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
// ],
|
|
signDate: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
startDate: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
endDate: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
// fileList: [
|
|
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
// ],
|
|
// agencyImgList: [
|
|
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
// ]
|
|
}
|
|
},
|
|
changeCDisabled() {
|
|
return !this.dataForm.communityId
|
|
},
|
|
changeGDisabled() {
|
|
return !this.dataForm.gridId
|
|
},
|
|
changeVDisabled() {
|
|
return !this.dataForm.villageId
|
|
},
|
|
changeBDisabled() {
|
|
return !this.dataForm.buildId
|
|
},
|
|
changeDDisabled() {
|
|
return !this.dataForm.unitId
|
|
}
|
|
},
|
|
methods: {
|
|
dataFormReset() {
|
|
this.dataForm = {
|
|
id: this.dataForm.flag == 'edit' ? this.dataForm.id : '',
|
|
flag: this.dataForm.flag == 'edit' ? this.dataForm.flag : '',
|
|
communityId: '',
|
|
communityName: '',
|
|
gridId: '',
|
|
gridName: '',
|
|
villageId: '',
|
|
villageName: '',
|
|
buildId: '',
|
|
buildName: '',
|
|
unitId: '',
|
|
unitName: '',
|
|
homeId: '',
|
|
homeName: '',
|
|
ownerName: '',
|
|
state: '',
|
|
lessorName: '',
|
|
lessorIdCard: '',
|
|
lessorMobile: '',
|
|
lessorRelation: '',
|
|
lessorLiveAddress: '',
|
|
lesseeName: '',
|
|
lesseeIdCard: '',
|
|
lesseeMobile: '',
|
|
lesseeUnit: '',
|
|
lesseeHouseAddress: '',
|
|
signDate: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
tenantList: [{
|
|
id: '',
|
|
name: '',
|
|
idCard: '',
|
|
mobile: '',
|
|
yfzgx: '',
|
|
type: 1,
|
|
politicalStatus: '',
|
|
mz: '',
|
|
gender:'',
|
|
birthday:'',
|
|
isVaccination:'1',
|
|
isMilitary: '',
|
|
nation: '',
|
|
imgList: [],
|
|
idCardImgList: [],
|
|
unit: '',
|
|
firstVacTime:'',
|
|
firstVacSite:'',
|
|
secondVacTime:'',
|
|
secondVacSite:'',
|
|
thirdVacTime:'',
|
|
thirdVacSite:'',
|
|
reason:'',
|
|
note:'',
|
|
}],
|
|
fileList: [],
|
|
docList: [],
|
|
agencyImgList: []
|
|
}
|
|
},
|
|
init () {
|
|
this.visible = true
|
|
this.getMz()
|
|
this.$nextTick(() => {
|
|
this.$refs['dataForm'].resetFields()
|
|
this.dataFormReset()
|
|
if (this.dataForm.id) {
|
|
this.getInfo()
|
|
} else {
|
|
this.getAgencyList()
|
|
}
|
|
})
|
|
},
|
|
renderHeader(h, params) {
|
|
const label = params.column.label
|
|
return (
|
|
<div>
|
|
<span style="font-size:12px; color: #ff0000;">*</span>
|
|
<span>{label}</span>
|
|
</div>
|
|
)
|
|
},
|
|
onChangeTenantListIdImgList (e, rowIndex=0) {
|
|
console.log('onChangeTenantListIdImgList', e)
|
|
if (e.length > 0) {
|
|
this.dataForm.tenantList[rowIndex].idCardImgList = []
|
|
e.forEach(item => {
|
|
let ob = {
|
|
fileType: '3',
|
|
fileUrl: item.response ? item.response.data.url : item.url
|
|
}
|
|
this.dataForm.tenantList[rowIndex].idCardImgList.push(ob)
|
|
})
|
|
}
|
|
},
|
|
onChangeImgList (e, rowIndex=0) {
|
|
console.log('onChangeImgList', e)
|
|
if (e.length > 0) {
|
|
this.dataForm.tenantList[rowIndex].imgList = []
|
|
e.forEach(item => {
|
|
let ob = {
|
|
fileType: '0',
|
|
fileUrl: item.response ? item.response.data.url : item.url
|
|
}
|
|
this.dataForm.tenantList[rowIndex].imgList.push(ob)
|
|
})
|
|
}
|
|
},
|
|
onChangeFileList (e, rowIndex=0) {
|
|
console.log('onChangeFileList', e)
|
|
if (e.length > 0) {
|
|
this.dataForm.fileList = []
|
|
e.forEach(item => {
|
|
let ob = {
|
|
fileType: '0',
|
|
fileUrl: item.response.data.url
|
|
}
|
|
this.dataForm.fileList.push(ob)
|
|
})
|
|
}
|
|
},
|
|
onChangeAgencyImgList (e, rowIndex=0) {
|
|
console.log('onChangeAgencyImgList', e)
|
|
if (e.length > 0) {
|
|
this.dataForm.agencyImgList = []
|
|
e.forEach(item => {
|
|
let ob = {
|
|
fileType: '0',
|
|
fileUrl: item.response.data.url
|
|
}
|
|
this.dataForm.agencyImgList.push(ob)
|
|
})
|
|
}
|
|
},
|
|
deleteMember(index){
|
|
if (this.dataForm.tenantList.length > 1) {
|
|
this.dataForm.tenantList.splice(index, 1)
|
|
} else {
|
|
this.$message.error('成员人数不能少于1人')
|
|
}
|
|
},
|
|
addMember () {
|
|
let ob = {
|
|
id: '',
|
|
name: '',
|
|
idCard: '',
|
|
mobile: '',
|
|
yfzgx: '',
|
|
type: 1,
|
|
politicalStatus: '',
|
|
mz: '',
|
|
gender:'',
|
|
birthday:'',
|
|
isVaccination: '1',
|
|
isMilitary: '',
|
|
nation: '',
|
|
imgList: [],
|
|
idCardImgList: [],
|
|
unit: '',
|
|
firstVacTime:'',
|
|
firstVacSite:'',
|
|
secondVacTime:'',
|
|
secondVacSite:'',
|
|
thirdVacTime:'',
|
|
thirdVacSite:'',
|
|
reason:'',
|
|
note:'',
|
|
}
|
|
this.dataForm.tenantList.push(ob)
|
|
},
|
|
// 查看大图
|
|
imgShow(url){
|
|
this.dialogImageUrl = url
|
|
this.dialogVisible = true
|
|
},
|
|
|
|
handleClearVillage() {
|
|
this.dataForm.buildId = ''
|
|
this.dataForm.homeId = ''
|
|
},
|
|
handleClearBuild() {
|
|
this.dataForm.buildId = ''
|
|
this.dataForm.unitId = ''
|
|
this.dataForm.homeId = ''
|
|
},
|
|
handleClearDan() {
|
|
this.dataForm.unitId = ''
|
|
this.dataForm.homeId = ''
|
|
},
|
|
handleChangeH (val) {
|
|
this.dataForm.homeName = this.getOptionsName(val, this.houseOptions)
|
|
this.getOwnerInfo()
|
|
},
|
|
handleChangeD(val) {
|
|
this.dataForm.homeId = ''
|
|
this.dataForm.unitName = this.getOptionsName(val, this.unitOptions)
|
|
this.getHouseList()
|
|
},
|
|
handleChangeB(val) {
|
|
this.dataForm.unitId = ''
|
|
this.dataForm.homeId = ''
|
|
this.dataForm.buildName = this.getOptionsName(val, this.buildingOptions)
|
|
this.getUniList()
|
|
},
|
|
handleChangeV(val) {
|
|
this.dataForm.buildId = ''
|
|
this.dataForm.unitId = ''
|
|
this.dataForm.homeId = ''
|
|
this.dataForm.villageName = this.getOptionsName(val, this.villageOptions)
|
|
this.getBuildList()
|
|
},
|
|
handleChangeGrid(val) {
|
|
this.dataForm.villageId = ''
|
|
this.dataForm.buildId = ''
|
|
this.dataForm.unitId = ''
|
|
this.dataForm.homeId = ''
|
|
this.dataForm.gridName = this.getOptionsName(val, this.gridOptions)
|
|
this.getVillageList()
|
|
},
|
|
handleChangeAgency (val) {
|
|
this.dataForm.gridId = ''
|
|
this.dataForm.villageId = ''
|
|
this.dataForm.buildId = ''
|
|
this.dataForm.unitId = ''
|
|
this.dataForm.homeId = ''
|
|
this.dataForm.communityName = this.getOptionsName(val, this.agencyOptions, 'orgName', 'orgId')
|
|
this.getGridList()
|
|
},
|
|
getOptionsName (value, options, labelKey='label', valueKey='value') {
|
|
let optionsName = ''
|
|
if (options.length > 0) {
|
|
options.forEach(item => {
|
|
if (item[valueKey] == value) {
|
|
optionsName = item[labelKey]
|
|
}
|
|
})
|
|
}
|
|
return optionsName
|
|
},
|
|
async editModeGetList () {
|
|
await this.getAgencyList()
|
|
await this.getGridList()
|
|
await this.getVillageList()
|
|
await this.getBuildList()
|
|
await this.getUniList()
|
|
await this.getHouseList()
|
|
await this.getOwnerInfo()
|
|
},
|
|
getAgencyList() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.post('/gov/org/customeragency/getCurrentUserCommunityInfo')
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
} else {
|
|
console.log('获取查询详情成功', res.data)
|
|
this.agencyOptions = res.data
|
|
resolve(true)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
reject(false)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
})
|
|
},
|
|
getGridList() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.post('/gov/org/customergrid/gridoption', { agencyId: this.dataForm.communityId, purpose: 'query' })
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
} else {
|
|
console.log('获取查询详情成功', res.data)
|
|
this.gridOptions = res.data
|
|
resolve(true)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
reject(false)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
})
|
|
},
|
|
getVillageList() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.post('/gov/org/icneighborhood/neighborhoodoption', {
|
|
gridId: this.dataForm.gridId,
|
|
agencyId: ''
|
|
// agencyId: user.agencyId
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
} else {
|
|
console.log('获取查询详情成功', res.data)
|
|
this.villageOptions = res.data
|
|
resolve(true)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
reject(false)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
})
|
|
},
|
|
getBuildList() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.post('/gov/org/icbuilding/buildingoption', {
|
|
neighborHoodId: this.dataForm.villageId
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
} else {
|
|
console.log('获取查询详情成功', res.data)
|
|
this.buildingOptions = res.data
|
|
resolve(true)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
reject(false)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
})
|
|
},
|
|
getUniList() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.post('/gov/org/icbuildingunit/unitoption', {
|
|
buildingId: this.dataForm.buildId
|
|
})
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
} else {
|
|
console.log('获取查询详情成功', res.data)
|
|
this.unitOptions = res.data
|
|
resolve(true)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
reject(false)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
})
|
|
},
|
|
getHouseList() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId })
|
|
.then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
} else {
|
|
console.log('获取查询详情成功', res.data)
|
|
this.houseOptions = res.data
|
|
resolve(true)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
reject(false)
|
|
return this.$message.error('网络错误')
|
|
})
|
|
})
|
|
},
|
|
// 获取房主姓名
|
|
getOwnerInfo () {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.get(`/gov/org/ichouse/${this.dataForm.homeId}`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
reject(false)
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.dataForm.ownerName = res.data.ownerName
|
|
this.dataForm.lessorName = res.data.ownerName
|
|
this.dataForm.lessorIdCard = res.data.ownerIdCard
|
|
this.dataForm.lessorMobile = res.data.ownerPhone
|
|
resolve(true)
|
|
}).catch(() => {})
|
|
})
|
|
},
|
|
// 获取信息
|
|
getInfo () {
|
|
this.$http.get(`/pli/power/rentContractInfo/${this.dataForm.id}`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.dataForm = {
|
|
...this.dataForm,
|
|
...res.data,
|
|
}
|
|
this.editModeGetList()
|
|
}).catch(() => {})
|
|
},
|
|
getMz() {
|
|
this.$http.post(`/sys/dict/data/nation`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.mzOptions = res.data
|
|
console.log(res)
|
|
}).catch(() => {})
|
|
},
|
|
handleFlieSuccess(res, file) {
|
|
if (res.code === 0 && res.msg === "success") {
|
|
let ob = {
|
|
fileType: '0',
|
|
fileUrl: file.response.data.url,
|
|
name: file.response.data.fileName
|
|
}
|
|
this.dataForm.docList.push(ob)
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
},
|
|
handleFlieError(res, file) {
|
|
console.log(res)
|
|
},
|
|
handleFlieRemove(res) {
|
|
// console.log(JSON.stringify(res))
|
|
const delFile = res.fileUrl
|
|
this.dataForm.docList.forEach((item, key) => {
|
|
if (delFile == item.fileUrl) {
|
|
this.dataForm.docList.splice(key, 1)
|
|
}
|
|
})
|
|
},
|
|
handleFlieExceed(res) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: `文件数量最多不超过${this.limit}个`,
|
|
})
|
|
},
|
|
beforeFlieUpload(file) {
|
|
console.log(file)
|
|
},
|
|
handlePreview(file) {
|
|
window.open(file.fileUrl)
|
|
// console.log(JSON.stringify(file));
|
|
},
|
|
// 表单提交
|
|
dataFormSubmitHandle: debounce(function () {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (!valid) {
|
|
return false
|
|
}
|
|
// const isUploadIdCardImgList = this.dataForm.tenantList.some(item => {
|
|
// return item.idCardImgList.length == 0
|
|
// })
|
|
// if (isUploadIdCardImgList) {
|
|
// this.$message.error('请上传成员证件照片')
|
|
// return
|
|
// }
|
|
// const isUploadImgList = this.dataForm.tenantList.some(item => {
|
|
// return item.imgList.length == 0
|
|
// })
|
|
// if (isUploadImgList) {
|
|
// this.$message.error('请上传成员照片')
|
|
// return
|
|
// }
|
|
if (this.dataForm.lessorRelation == '中介') {
|
|
if (this.dataForm.agencyImgList.length == 0) {
|
|
this.$message.error('请上传中介委托照片')
|
|
return
|
|
}
|
|
}
|
|
const url = this.dataForm.flag == 'edit' ? '/pli/power/rentContractInfo/updatePc' : '/pli/power/rentContractInfo/savePc'
|
|
this.$http['post'](url, this.dataForm).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.$message({
|
|
message: this.$t('prompt.success'),
|
|
type: 'success',
|
|
duration: 500,
|
|
onClose: () => {
|
|
this.visible = false
|
|
this.$emit('refreshDataList')
|
|
}
|
|
})
|
|
}).catch(() => {})
|
|
})
|
|
}, 1000, { 'leading': true, 'trailing': false })
|
|
},
|
|
components: {
|
|
UploadImage
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.resi-btns {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.rent {
|
|
.el-form--inline .el-form-item__content {
|
|
// width: 280px;
|
|
}
|
|
.el-table .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.add-member{
|
|
border-bottom: 1px dashed #dcdfe6;
|
|
margin-bottom: 20px;
|
|
.el-form-item {
|
|
.el-form-item__content{
|
|
width: 190px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
|
|
display: none !important;
|
|
}
|
|
.div_btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.resi-cell-col {
|
|
width: 750px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.cell-item-new {
|
|
width: 120px;
|
|
}
|
|
|
|
.cell-item-new2 {
|
|
width: 200px;
|
|
}
|
|
|
|
.margin_left10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
</style>
|
|
|