市北互联平台前端仓库
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.
 
 
 
 

394 lines
15 KiB

<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-rent__rentContractInfo}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="所属网格" label-width="100px"
prop="gridId">
<el-select
v-model.trim="dataForm.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="100px">
<div class="resi-cell-value">
<div class="resi-cell-col">
<el-form-item prop="villageId">
<el-select
v-model.trim="dataForm.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="dataForm.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="dataForm.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="dataForm.homeId"
:disabled="changeDDisabled"
placeholder="房号"
clearable
style="width: 120px;"
>
<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="scanFlag" label-width="100px">
<el-select v-model="dataForm.state" placeholder="审核状态" clearable>
<el-option v-for="item in stateArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="承租人身份证" label-width="100px">
<el-input v-model="dataForm.lesseeIdCard" placeholder='承租人身份证' clearable @keyup.native="btKeyUpLesseeIdCard"></el-input>
</el-form-item>
<el-form-item label="承租人手机号" label-width="100px">
<el-input v-model="dataForm.lesseeMobile" placeholder='承租人手机号' clearable @keyup.native="btKeyUpLesseeMobile"></el-input>
</el-form-item>
<br/>
<el-form-item label="承租人" label-width="100px">
<el-input v-model="dataForm.lesseeName" placeholder='承租人' clearable @keyup.native="btKeyUpLesseeName"></el-input>
</el-form-item>
<el-form-item label="审核时间" prop="startTime" label-width="100px">
<el-date-picker v-model="dataForm.startTime"
type="date"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间"
style="width:200px" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item label="至" prop="endTime">
<el-date-picker v-model="dataForm.endTime"
type="date"
:picker-options="pickerBeginDateAfter"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间"
style="width:200px" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="false" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
<el-table-column label="序号" header-align="center" align="center" width="50px">
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column prop="gridName" label="网格" header-align="center" align="center"></el-table-column>
<el-table-column prop="buildName" label="楼号" header-align="center" align="center"></el-table-column>
<el-table-column prop="unitName" label="单元" header-align="center" align="center"></el-table-column>
<el-table-column prop="homeName" label="房屋" header-align="center" align="center"></el-table-column>
<el-table-column prop="lessorName" label="出租人姓名" header-align="center" align="center"></el-table-column>
<el-table-column prop="lessorMobile" label="出租人手机" header-align="center" align="center"></el-table-column>
<el-table-column prop="lesseeName" label="承租人姓名" header-align="center" align="center"></el-table-column>
<el-table-column prop="lesseeMobile" label="承租人手机" header-align="center" align="center"></el-table-column>
<el-table-column prop="signDate" label="签署日期" header-align="center" align="center"></el-table-column>
<el-table-column prop="startDate" label="合同开始日期" header-align="center" align="center"></el-table-column>
<el-table-column prop="endDate" label="合同结束日期" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('checkBtn') }}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './rentcontractinfo-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/pli/power/rentContractInfo/page',
getDataListIsPage: true,
deleteURL: '/pli/power/rentContractInfo',
deleteIsBatch: true
},
optionsV: [],
optionsB: [],
optionsH: [],
optionsD: [],
optionsG: [],
dataForm: {
id: '',
gridId: '',
villageId: '',
buildId: '',
unitId: '',
homeId: '',
lesseeIdCard: '',
state: '',
lesseeMobile: '',
lesseeName: '',
startTime: '',
endTime: ''
},
stateArr: [
{ dictValue: '0', dictName: '未审核' },
{ dictValue: '1', dictName: '审核通过' },
{ dictValue: '2', dictName: '审核不通过' }
],
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.endTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let EndDateVal = this.dataForm.startTime
if (EndDateVal) {
return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
}
}
}
}
},
components: {
AddOrUpdate
},
created () {
this.getGridList()
this.getValiheList()
},
computed: {
changeVDisabled() {
return !this.dataForm.villageId
},
changeBDisabled() {
return !this.dataForm.buildId
},
changeDDisabled() {
return !this.dataForm.unitId
}
},
methods: {
btKeyUpLesseeIdCard (e) {
e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~!#¥%……&*()={}|《》?:“”【】\\[\]、;‘’,。、\s+]/g, '')
this.dataForm.lesseeIdCard = e.target.value
},
btKeyUpLesseeMobile (e) {
e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~!#¥%……&*()={}|《》?:“”【】\\[\]、;‘’,。、\s+]/g, '')
this.dataForm.lesseeMobile = e.target.value
},
btKeyUpLesseeName (e) {
e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~!#¥%……&*()={}|《》?:“”【】\\[\]、;‘’,。、\s+]/g, '')
this.dataForm.lesseeName = e.target.value
},
handleClearVillage() {
this.dataForm.buildId = ''
this.dataForm.homeId = ''
},
handleClearBuild() {
this.dataForm.buildId = ''
this.dataForm.unitId = ''
this.dataForm.homeId = ''
},
handleClearDan() {
this.dataForm.unitId = ''
this.dataForm.homeId = ''
},
handleChangeGrid(val) {
console.log('val', val)
this.dataForm.villageId = ''
this.dataForm.buildId = ''
this.dataForm.unitId = ''
this.dataForm.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.dataForm.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.dataForm.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.dataForm.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.dataForm.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.dataForm.buildId = ''
this.dataForm.unitId = ''
this.dataForm.homeId = ''
this.getBuildList()
},
handleChangeB(val) {
console.log('val', val)
this.dataForm.unitId = ''
this.dataForm.homeId = ''
this.getUniList()
},
handleChangeD(val) {
console.log('val', val)
this.dataForm.homeId = ''
this.getHouseList()
},
},
}
</script>