ZhaoTongYao
3 years ago
4 changed files with 1119 additions and 157 deletions
@ -0,0 +1,386 @@ |
|||
<template> |
|||
<el-dialog class="rent" :visible.sync="visible" :title="dataForm.flag === '1' ? '查看详情' : '审核'" :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="140px"> |
|||
<div v-if="dataForm.flag === '2'"> |
|||
<div style="margin-left: 50px;height: 30px;font-weight: bold;">房屋信息</div> |
|||
<el-form-item label="所属社区" prop="gridName"> |
|||
<el-input v-model="dataForm.gridName" placeholder="网格" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="所属网格" prop="gridName"> |
|||
<el-input v-model="dataForm.gridName" placeholder="所属网格" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="房屋" prop="homeName"> |
|||
<el-input v-model="dataForm.homeName" placeholder="房屋" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房主姓名" prop="ownerName"> |
|||
<el-input v-model="dataForm.ownerName" placeholder="房主姓名" disabled></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="padding:20px 30px"> |
|||
<div style="height: 30px;font-weight: bold;">居住成员信息</div> |
|||
<el-table v-loading="dataListLoading" :data="dataForm.tenantList" border 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="name" label="姓名" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="yfzgx" label="与户主关系" header-align="center" align="center" width="120"></el-table-column> |
|||
<el-table-column prop="mobile" label="手机" header-align="center" align="center" width="120"></el-table-column> |
|||
<el-table-column prop="idCard" label="身份证号" header-align="center" align="center" width="180"></el-table-column> |
|||
<el-table-column prop="unit" label="工作单位" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="politicalStatus" label="政治面貌" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="isMilitary" label="是否服过兵役" header-align="center" align="center" width="120"></el-table-column> |
|||
<el-table-column prop="nation" label="国籍" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="idCardImgList" label="身份证照片" header-align="center" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div v-for="(item,index) in scope.row.idCardImgList" :key="index"> |
|||
<img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="40" height="40" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="imgList" label="照片" header-align="center" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div v-for="(item,index) in scope.row.imgList" :key="index"> |
|||
<img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="40" height="40" /> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div style="margin-left: 50px;height: 30px;font-weight: bold;">合同信息</div> |
|||
<div style="margin-left: 50px;height: 30px;">出租人信息</div> |
|||
<el-form-item label="出租人姓名" prop="lessorName"> |
|||
<el-input v-model="dataForm.lessorName" placeholder="出租人姓名" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="出租人身份证" prop="lessorIdCard"> |
|||
<el-input v-model="dataForm.lessorIdCard" placeholder="出租人身份证" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="出租人手机" prop="lessorMobile"> |
|||
<el-input v-model="dataForm.lessorMobile" placeholder="出租人手机" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="与房主关系" prop="lessorRelation"> |
|||
<!--<el-input v-model="dataForm.lessorRelation" placeholder="与房主关系"></el-input>--> |
|||
<el-select v-model="dataForm.lessorRelation" placeholder="与房主关系" :disabled="dataForm.state !== '0'"> |
|||
<el-option v-for="item in lessorRelationArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="出租人现居住地" prop="lessorLiveAddress"> |
|||
<el-input v-model="dataForm.lessorLiveAddress" placeholder="出租人现居住地" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="中介合同附件" prop="agencyImgList" v-if="dataForm.lessorRelation ==='中介'"> |
|||
<template> |
|||
<label v-for="(item,index) in dataForm.agencyImgList" :key="index"> |
|||
<img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="100" height="100" /> |
|||
</label> |
|||
</template> |
|||
</el-form-item> |
|||
<br/> |
|||
|
|||
<div style="margin-left: 50px;height: 30px;">承租人信息</div> |
|||
<el-form-item label="承租人姓名" prop="lesseeName"> |
|||
<el-input v-model="dataForm.lesseeName" placeholder="承租人姓名" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="承租人身份证" prop="lesseeIdCard"> |
|||
<el-input v-model="dataForm.lesseeIdCard" placeholder="承租人身份证" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="承租人手机" prop="lesseeMobile"> |
|||
<el-input v-model="dataForm.lesseeMobile" placeholder="承租人手机" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="工作单位" prop="lesseeUnit"> |
|||
<el-input v-model="dataForm.lesseeUnit" placeholder="工作单位" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="承租人户籍地" prop="lesseeHouseAddress"> |
|||
<el-input v-model="dataForm.lesseeHouseAddress" placeholder="承租人户籍地" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
|
|||
|
|||
<div style="margin-left: 50px;height: 30px;font-weight: bold;">合同内容</div> |
|||
<el-form-item label="签署日期" prop="signDate"> |
|||
<el-input v-model="dataForm.signDate" placeholder="签署日期" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="合同开始日期" prop="startDate"> |
|||
<el-input v-model="dataForm.startDate" placeholder="合同开始日期" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="合同结束日期" prop="endDate"> |
|||
<el-input v-model="dataForm.endDate" placeholder="合同结束日期" disabled></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
|
|||
<el-form-item label="合同附件" prop="fileList"> |
|||
<template> |
|||
<label v-for="(item,index) in dataForm.fileList" :key="index"> |
|||
<img :src="item.fileUrl" @click="imgShow(item.fileUrl)" width="100" height="100" /> |
|||
</label> |
|||
</template> |
|||
</el-form-item> |
|||
<el-form-item label="审核原因" prop="reason" v-if="dataForm.flag === '1' && dataForm.state === '2'"> |
|||
<el-input v-model="dataForm.reason" placeholder="审核原因" disabled></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<template slot="footer"> |
|||
<div class="resi-btns"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button v-if="dataForm.state === '0'" type="danger" @click="openCheckReasonDialog">{{ $t('checkBTGBtn') }}</el-button> |
|||
<el-button v-if="dataForm.state === '0'" type="primary" @click="checkHandle('1')">{{ $t('checkTGBtn') }}</el-button> |
|||
</div> |
|||
</template> |
|||
<el-dialog :visible.sync="dialogVisible" :modal="false"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
<el-dialog |
|||
title="审核不通过原因" |
|||
:visible.sync="checkVisible" |
|||
width="30%" |
|||
append-to-body> |
|||
<el-input v-model="checkReason" placeholder="请输入审核不通过原因"></el-input> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="checkVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="dialogCheckHandle" :disabled="disabledBtn">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
id: '', |
|||
flag: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
buildId: '', |
|||
buildName: '', |
|||
unitId: '', |
|||
unitName: '', |
|||
homeId: '', |
|||
homeName: '', |
|||
ownerName: '', |
|||
state: '', |
|||
lessorName: '', |
|||
lessorIdCard: '', |
|||
lessorMobile: '', |
|||
lessorRelation: '', |
|||
lessorLiveAddress: '', |
|||
lesseeName: '', |
|||
lesseeIdCard: '', |
|||
lesseeMobile: '', |
|||
lesseeUnit: '', |
|||
lesseeHouseAddress: '', |
|||
signDate: '', |
|||
startDate: '', |
|||
endDate: '' |
|||
}, |
|||
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: '中介' } |
|||
], |
|||
checkReason: '', |
|||
checkVisible: false, |
|||
disabledBtn: false |
|||
} |
|||
}, |
|||
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' } |
|||
], |
|||
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' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 查看大图 |
|||
imgShow(url){ |
|||
this.dialogImageUrl = url |
|||
this.dialogVisible = true |
|||
}, |
|||
// 获取信息 |
|||
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 |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
// 打开审核不通过对话框 |
|||
openCheckReasonDialog(){ |
|||
this.checkVisible = true |
|||
this.checkReason = '' |
|||
this.disabledBtn = false |
|||
}, |
|||
// 不通过审核意见提交 |
|||
dialogCheckHandle(){ |
|||
if(this.checkReason === ''){ |
|||
return this.$message.error('请填写不通过原因') |
|||
} |
|||
this.checkHandle('2') |
|||
this.disabledBtn = true |
|||
}, |
|||
// 审核提交方法 |
|||
checkHandle: function (type) { |
|||
const params = { |
|||
id: this.dataForm.id, |
|||
state: type, |
|||
homeId: this.dataForm.homeId, |
|||
lessorRelation: this.dataForm.lessorRelation, |
|||
reason: this.checkReason |
|||
} |
|||
this.$http.post('/pli/power/rentContractInfo/review', params).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
// 调用文件下发权限接口 |
|||
this.fileJurisdiction(params) |
|||
}).catch(() => {}) |
|||
}, |
|||
// 文件下发权限接口 |
|||
fileJurisdiction (params) { |
|||
this.$http.post('/pli/power/rentContractInfo/send', params).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.disabledBtn = false |
|||
this.checkVisible = false |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/pli/power/rentContractInfo/', 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 }) |
|||
} |
|||
} |
|||
</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; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<div class="upload-image"> |
|||
<el-upload list-type="picture-card" |
|||
:action="uploadUrl" |
|||
:data="{ customerId: customerId }" |
|||
:file-list="fileList" |
|||
:limit="limit" |
|||
:on-success="(res, file) => handleImgSuccess(res, file)" |
|||
:on-error="(res, file) => handleImgError(res, file)" |
|||
:on-remove="(res) => handleImgRemove(res)" |
|||
:on-exceed="(res) => handleImgExceed(res)" |
|||
:before-upload="(file) => beforeImgUpload(file)"> |
|||
<i slot="default" class="el-icon-plus"></i> |
|||
<div slot="file" slot-scope="{file}"> |
|||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> |
|||
<span class="el-upload-list__item-actions"> |
|||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> |
|||
<i class="el-icon-zoom-in"></i> |
|||
</span> |
|||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> |
|||
<i class="el-icon-delete"></i> |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</el-upload> |
|||
<el-dialog :visible.sync="dialogVisible"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
limit: { |
|||
type: Number, |
|||
default: 3 |
|||
}, |
|||
rowIndex: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
defaultFileList: { |
|||
type: Array |
|||
} |
|||
}, |
|||
watch: { |
|||
defaultFileList: { |
|||
handler (newVal) { |
|||
newVal.forEach(item => { |
|||
item.url = item.fileUrl |
|||
}) |
|||
this.fileList = newVal |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
} |
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
disabled: false, |
|||
uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`, |
|||
customerId: localStorage.getItem("customerId"), |
|||
fileList: [], |
|||
imageUrls: [] |
|||
} |
|||
}, |
|||
created() { |
|||
console.log('xxxxxx', this.rowIndex) |
|||
}, |
|||
methods: { |
|||
handleRemove(file) { |
|||
const delFile = file.url |
|||
this.fileList.forEach((item, key) => { |
|||
if (delFile == item.url) { |
|||
this.fileList.splice(key, 1) |
|||
} |
|||
}) |
|||
}, |
|||
handlePictureCardPreview(file) { |
|||
this.dialogImageUrl = file.url |
|||
this.dialogVisible = true |
|||
}, |
|||
beforeImgUpload(file) { |
|||
// console.log(file) |
|||
}, |
|||
handleImgExceed(res) { |
|||
console.log(res) |
|||
this.$message({ |
|||
type: "warning", |
|||
message: `文件数量最多不超过${this.limit}个`, |
|||
}) |
|||
}, |
|||
handleImgRemove(file) { |
|||
console.log("handleImgRemove", file) |
|||
}, |
|||
handleImgSuccess(res, file) { |
|||
// console.log("handleImgSuccess", res, file) |
|||
if (res.code === 0 && res.msg === "success") { |
|||
this.fileList.push(file) |
|||
this.$emit('change', this.fileList, this.rowIndex) |
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
}, |
|||
|
|||
handleImgError(res, file) { |
|||
console.log(res) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.upload-image { |
|||
// min-width: 120px; |
|||
// height: 80px; |
|||
} |
|||
/deep/ .el-upload--picture-card { |
|||
width: 60px; |
|||
height: 60px; |
|||
line-height: 70px; |
|||
} |
|||
/deep/ .el-upload-list--picture-card .el-upload-list__item { |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue