<template>
|
<view class="container">
|
<u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
<view class="basic-info">
|
<u-form-item @click="showSelectBus(dataList.relation, '租客关系', 'relationName', 'relation')"
|
class="form-item" labelWidth="100" label="租客关系" required prop="relation">
|
<u--input border="none" v-model="relationName" disabled disabledColor="#ffffff" placeholder="请选择">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item @click="showSelectBus(dataList.houseType, '房屋状态', 'houseTypeName', 'houseType')"
|
class="form-item" labelWidth="100" label="房屋状态:" required prop="houseTypeName">
|
<u--input border="none" v-model="houseTypeName" disabled disabledColor="#ffffff" placeholder="请选择">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item @click="showSelectBus(dataList.rentalUse, '租房用途', 'rentalUseName', 'rentalUse')"
|
class="form-item" labelWidth="100" label="租房用途:" required prop="rentalUseName">
|
<u--input border="none" v-model="rentalUseName" disabled disabledColor="#ffffff" placeholder="请选择">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item @click="rentTimeClick" class="form-item" labelWidth="100" label="租房时间:" required
|
prop="rentTime">
|
<u--input border="none" v-model="form.rentTime" disabled disabledColor="#ffffff" placeholder="请选择">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item @click="dueTimeClick" class="form-item" labelWidth="100" label="到期时间:" required
|
prop="dueTime">
|
<u--input border="none" v-model="form.dueTime" disabled disabledColor="#ffffff" placeholder="请选择">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<view class="pic">
|
<view class="title">合同上传</view>
|
<u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
uploadIcon="/static/icon/upload.png" :maxCount="uploadConfig.maxCount"
|
:capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
|
</u-upload>
|
</view>
|
</view>
|
<view class="rent-info">
|
<view v-for="(item, index) in rentFormNum" :key="item" class="rent-box">
|
<view class="box-title">
|
<view class="flex a-i-c" style="width:100%;">
|
<view class="l">
|
<view class="line"></view>
|
<view class="title">{{ '租客信息-#' + (index + 1) }}</view>
|
</view>
|
<!-- #ifdef MP-WEIXIN -->
|
<ocr-navigator @onSuccess="recognizeSuccess($event,index)" certificateType="idCard"
|
:opposite="false">
|
<view class="recognize-btn flex a-i-c">
|
<u-icon name="scan" color="#fff" size="24"></u-icon>
|
<text class="f-26 c-ff" style="margin-left: 10rpx;">身份证信息识别</text>
|
</view>
|
</ocr-navigator>
|
<!-- #endif -->
|
</view>
|
<view class="r" v-if="(index+1) > 1">
|
<u-icon name="trash-fill" color="#ff0000" size="20" @click="decRentForm(index)"></u-icon>
|
</view>
|
</view>
|
<rentForm ref="rentform" />
|
</view>
|
<!-- <view class="addPerson-box">
|
<u-button class="btn-item" color="#2CD5C0" plain style="width: 300rpx;"
|
@click="addRentForm">再加一人</u-button>
|
</view> -->
|
</view>
|
</u-form>
|
<!-- 事件类型下拉框 -->
|
<!-- <select-bus v-if="typeShow" :show="typeShow" v-model="form[selectBusModel]" type="radio"
|
:popupTitle="selectBusTitle" :dataLists="selectBusList" @cancel="typeShow = false" @submit="typeSelect">
|
</select-bus> -->
|
<u-picker :defaultIndex="[selectDefaultIndex[selectBusKey]]" :closeOnClickOverlay="true" v-if="typeShow"
|
:show="typeShow" :columns="[selectBusList]" @close="typeShow = false" @cancel="typeShow = false"
|
keyName="name" @confirm="typeSelect"></u-picker>
|
<!--出租时间选择-->
|
<u-datetime-picker v-model="currentTime" v-if="rentTimeShow" :closeOnClickOverlay="true"
|
@close="rentTimeShow = false" :show="rentTimeShow" mode="date" @confirm="rentTimeConfirm"
|
@cancel="rentTimeShow = false"></u-datetime-picker>
|
<u-datetime-picker v-model="currentTime" v-if="dueTimeShow" :closeOnClickOverlay="true"
|
@close="dueTimeShow = false" :show="dueTimeShow" mode="date" @confirm="dueTimeConfirm"
|
@cancel="dueTimeShow = false"></u-datetime-picker>
|
|
<view class="bottom-tools">
|
<u-button class="btn-item" color="#2CD5C0" plain style="width: 300rpx;" @click="addRentForm">再加一人</u-button>
|
<u-button class="btn-item" type="error" @click="isModelShow = true" v-if="btnControls.deleteBtn">删除
|
</u-button>
|
<u-button class="btn-item" type="success" @click="verifyConfirm" v-if="btnControls.verifyBtn">确认</u-button>
|
<u-button class="btn-item" color="linear-gradient(to right, #06B0FD, #027BFE)" @click="saveOrUpdate">
|
{{ rentId === '' ? "保存" : "确认修改" }}</u-button>
|
</view>
|
<u-modal :show="isModelShow" width="auto" :showCancelButton="true" title="提示" content="请确认是否删除当前租户信息"
|
@cancel="isModelShow = false" @confirm="deleteRent"></u-modal>
|
<u-picker v-if="isAuditShow" :closeOnClickOverlay="true" @close="isAuditShow = false" :columns="auditColumns"
|
:show="isAuditShow" @confirm="verifyConfirm" keyName="name" @cancel="isAuditShow = false"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import selectBus from "@/components/my-components/selectBus.vue"
|
import rentForm from '../components/form/rentForm.vue'
|
import uploadMixin from "@/mixin/uploadMixin";
|
import {
|
uploadFile,
|
getHouseRentInfo,
|
} from "@/api/doorplateAddress/doorplateAddress";
|
import {
|
addHouseRental,
|
updateRetalInfo,
|
deleteRentalInfo,
|
confirmHouseRental
|
} from '@/api/houseRental/houseRental.js'
|
import {
|
data
|
} from "uview-ui/libs/mixin/mixin";
|
import {
|
update
|
} from "../../../api/system/role";
|
import {
|
minioBaseUrl
|
} from '@/common/setting'
|
import {
|
bizDictionary
|
} from '@/api/system/dict.js'
|
export default {
|
mixins: [uploadMixin],
|
components: {
|
selectBus,
|
rentForm
|
},
|
data() {
|
return {
|
currentRole: '',
|
form: {
|
relation: "",
|
rentTime: "",
|
houseTypeName: "",
|
rentalUseName: "",
|
dueTime: "",
|
fileUrls: "",
|
images: []
|
},
|
imagesList: [],
|
rules: {
|
relation: [{
|
required: true,
|
message: '请选择租客关系'
|
}],
|
houseTypeName: [{
|
required: true,
|
message: '请选择房屋状态'
|
}],
|
rentalUseName: [{
|
required: true,
|
message: '请选择房屋用途'
|
}],
|
rentTime: [{
|
required: true,
|
message: '请选择租房时间'
|
}],
|
dueTime: [{
|
required: true,
|
message: '请选择到期时间'
|
}]
|
},
|
rentTimeShow: false,
|
dueTimeShow: false,
|
rentFormNum: 1,
|
relationName: "",
|
houseTypeName: "",
|
rentalUseName: "",
|
dataList: {
|
relation: [{
|
name: "同一户",
|
value: "1"
|
},
|
{
|
name: "不同户",
|
value: "2"
|
}
|
],
|
houseType: [{
|
name: "部分出租",
|
value: "1"
|
},
|
{
|
name: "全部出租",
|
value: "2"
|
}
|
],
|
rentalUse: [{
|
name: "仓库",
|
value: "1"
|
},
|
{
|
name: "办公",
|
value: "2"
|
},
|
{
|
name: "商用",
|
value: "3"
|
},
|
{
|
name: "居住",
|
value: "4"
|
}
|
]
|
},
|
isAuditShow: false,
|
auditColumns: [
|
[{
|
name: "待确认",
|
status: 0
|
},
|
{
|
name: "已确认",
|
status: 1
|
},
|
]
|
],
|
selectBusList: [],
|
selectBusTitle: '',
|
selectBusModel: '',
|
selectBusKey: '',
|
typeShow: false,
|
houseCode: '',
|
rentId: '',
|
auditStatus: null,
|
currentTime: Number(new Date()),
|
isModelShow: false,
|
btnControls: {
|
deleteBtn: false,
|
verifyBtn: false
|
},
|
selectDefaultIndex: {
|
rentalUse: 0,
|
relation: 0,
|
houseType: 0
|
},
|
|
genderList: [{ //性别
|
value: 1,
|
name: '男',
|
},
|
{
|
value: 0,
|
name: '女',
|
}
|
],
|
|
nationList: [] //民族
|
}
|
},
|
onLoad(option) {
|
const {
|
id,
|
houseCode
|
} = option
|
this.houseCode = houseCode
|
this.currentRole = uni.getStorageSync("activeRole")
|
this.getAllBizDict()
|
// 使用id来判断是不是修改
|
if (id !== void 0) {
|
this.rentId = id
|
|
this.getCurrentRentInfo()
|
}
|
},
|
methods: {
|
|
async getAllBizDict() {
|
// 获取民族
|
await this.getBizDict('nationType', this.nationList);
|
},
|
|
// 获取业务字典
|
async getBizDict(code, list) {
|
const param = {
|
code: code
|
}
|
const res = await bizDictionary(param)
|
res.data.forEach(e => {
|
list.push({
|
name: e.dictValue,
|
value: Number(e.dictKey)
|
})
|
})
|
},
|
|
|
showSelectBus(data, title, model, key) {
|
this.selectBusList = data
|
this.selectBusTitle = title
|
this.selectBusModel = model
|
this.selectBusKey = key
|
this.typeShow = true
|
},
|
//类型选择确认
|
typeSelect(e) {
|
const [result] = e.value;
|
this[this.selectBusModel] = result.name
|
this.form[this.selectBusKey] = result.value
|
this.selectDefaultIndex[this.selectBusKey] = e.indexs[0];
|
this.typeShow = !this.typeShow
|
},
|
rentTimeClick() {
|
this.currentTime = Number(new Date(this.form.rentTime)) || Number(new Date())
|
this.rentTimeShow = true
|
},
|
rentTimeConfirm(e) {
|
const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
this.form.rentTime = time
|
this.rentTimeShow = false
|
},
|
dueTimeClick() {
|
this.currentTime = Number(new Date(this.form.dueTime)) || Number(new Date())
|
this.dueTimeShow = true
|
},
|
dueTimeConfirm(e) {
|
const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
this.form.dueTime = time
|
this.dueTimeShow = false
|
},
|
addRentForm() {
|
this.rentFormNum++
|
},
|
decRentForm(i) {
|
try {
|
let formData = []
|
this.$refs.rentform.forEach(vc => {
|
formData.push(vc.form)
|
})
|
formData.splice(i, 1)
|
formData.forEach((sform, i) => {
|
this.$refs.rentform[i].form = sform
|
})
|
this.rentFormNum > 1 && this.rentFormNum--
|
uni.showToast({
|
title: "删除成功",
|
icon: "success",
|
duration: 1500
|
})
|
} catch (e) {
|
uni.showToast({
|
title: "删除失败",
|
icon: "error",
|
duration: 1500
|
})
|
}
|
},
|
saveOrUpdate() {
|
this.form.houseTypeName = this.houseTypeName
|
this.form.rentalUseName = this.rentalUseName
|
this.$refs.form.validate().then(res => {
|
let rentFormValidGroup = []
|
this.$refs.rentform.forEach(item => {
|
rentFormValidGroup.push(item.$refs.refForm.validate());
|
})
|
Promise.all(rentFormValidGroup).then(result => {
|
if (this.rentId === '') {
|
this.save()
|
return
|
}
|
this.update()
|
})
|
})
|
},
|
// 新增操作
|
async save() {
|
let householdVOList = []
|
this.$refs.rentform.forEach(item => {
|
householdVOList.push(item.form)
|
})
|
if (this.form.images.length > 0) {
|
let urls = []
|
this.form.images.forEach(e => {
|
urls.push(e.name)
|
})
|
this.form.fileUrls = urls.join(",")
|
}
|
const relationIndex = this.dataList.relation.findIndex(item => item.name === this.relationName)
|
const statusIndex = this.dataList.houseType.findIndex(item => item.name === this.houseTypeName)
|
const rentalIndex = this.dataList.rentalUse.findIndex(item => item.name === this.rentalUseName)
|
let params = {
|
audit_status: this.currentRole.roleAlias === 'inhabitant' ? 0 : 1,
|
houseCode: this.houseCode,
|
tenantRelationship: this.dataList.relation[relationIndex].value,
|
rentalTime: this.form.rentTime,
|
dueTime: this.form.dueTime,
|
houseStatus: this.dataList.houseType[statusIndex].value,
|
rentalUse: this.dataList.rentalUse[rentalIndex].value,
|
fileUrls: this.form.fileUrls,
|
householdVOList,
|
roleName: uni.getStorageSync("activeRole").roleName
|
}
|
const {
|
code,
|
data
|
} = await addHouseRental(params)
|
if (code !== 200) {
|
uni.showToast({
|
title: "添加租户信息失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
uni.showToast({
|
title: "添加租户信息成功",
|
icon: "success",
|
duration: 1500,
|
success: () => {
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}
|
})
|
},
|
// 确认操作
|
verify() {
|
this.isAuditShow = true
|
},
|
verifyConfirm() {
|
// const auditStatus = e.value[0].status
|
|
|
|
uni.showModal({
|
title: "提示",
|
content: "是否确认该租户？",
|
success: (res) => {
|
if (res.confirm) {
|
this.confirmRequest();
|
}
|
}
|
})
|
|
|
},
|
|
confirmRequest() {
|
confirmHouseRental({
|
id: this.rentId,
|
auditStatus: 1
|
}).then(res => {
|
const {
|
code,
|
data
|
} = res
|
if (code !== 200) {
|
this.$showTips("确认失败", 'error')
|
return
|
}
|
this.$showTips("确认成功", 'success')
|
// this.isAuditShow = false
|
this.getCurrentRentInfo()
|
})
|
},
|
|
|
// 更新操作
|
async update() {
|
let householdVOList = []
|
this.$refs.rentform.forEach(item => {
|
householdVOList.push(item.form)
|
})
|
if (this.form.images.length > 0) {
|
let urls = []
|
this.form.images.forEach(e => {
|
urls.push(e.name)
|
})
|
this.form.fileUrls = urls.join(",")
|
}
|
const relationIndex = this.dataList.relation.findIndex(item => item.name === this.relationName)
|
const statusIndex = this.dataList.houseType.findIndex(item => item.name === this.houseTypeName)
|
const rentalIndex = this.dataList.rentalUse.findIndex(item => item.name === this.rentalUseName)
|
let data = {
|
id: this.rentId,
|
houseCode: this.houseCode,
|
tenantRelationship: this.dataList.relation[relationIndex].value,
|
rentalTime: this.form.rentTime,
|
dueTime: this.form.dueTime,
|
houseStatus: this.dataList.houseType[statusIndex].value,
|
rentalUse: this.dataList.rentalUse[rentalIndex].value,
|
fileUrls: this.form.fileUrls,
|
householdVOList
|
}
|
const res = await updateRetalInfo(data)
|
if (res.code !== 200) {
|
uni.showToast({
|
title: "修改租户信息失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
uni.showToast({
|
title: "修改租户信息成功",
|
icon: "success",
|
duration: 1500,
|
success: () => {
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}
|
})
|
},
|
findObjValue(value, obj) {
|
// const res = obj.find(item => {
|
// return item.value == value
|
// })
|
// return res.name
|
|
let data = {
|
index: "",
|
name: ""
|
}
|
for (let i = 0, ii = obj.length; i < ii; i++) {
|
if (value == obj[i].value) {
|
data.index = i;
|
data.name = obj[i].name;
|
}
|
}
|
return data;
|
|
|
},
|
// 获取租赁相关信息
|
async getCurrentRentInfo() {
|
const {
|
code,
|
data: {
|
houseRentalList
|
}
|
} = await getHouseRentInfo(this.houseCode)
|
this.auditStatus = houseRentalList[0].auditStatus
|
console.log(this.auditStatus);
|
const images = []
|
const {
|
houseStatus,
|
tenantRelationship,
|
rentalUse,
|
rentalTime,
|
dueTime,
|
householdVOList,
|
fileUrls
|
} = houseRentalList.find(item => item.id === this.rentId)
|
// 合同展示处理
|
if (fileUrls != null && fileUrls.length > 0) {
|
const urls = fileUrls.split(',')
|
// 遍历
|
urls.forEach(e => {
|
images.push({
|
url: minioBaseUrl + e,
|
name: e
|
})
|
})
|
}
|
this.form = {
|
relation: tenantRelationship,
|
rentTime: rentalTime,
|
dueTime: dueTime,
|
houseTypeName: houseStatus,
|
rentalUseName: rentalUse,
|
images: images
|
}
|
// this.rentalUseName = this.findObjValue(rentalUse, this.dataList.rentalUse)
|
// this.relationName = this.findObjValue(tenantRelationship, this.dataList.relation)
|
// this.houseTypeName = this.findObjValue(houseStatus, this.dataList.houseType)
|
|
this.rentalUseName = this.findObjValue(rentalUse, this.dataList.rentalUse).name
|
this.selectDefaultIndex.rentalUse = this.findObjValue(rentalUse, this.dataList.rentalUse).index;
|
this.relationName = this.findObjValue(tenantRelationship, this.dataList.relation).name
|
this.selectDefaultIndex.relation = this.findObjValue(tenantRelationship, this.dataList.relation).index;
|
this.houseTypeName = this.findObjValue(houseStatus, this.dataList.houseType).name
|
this.selectDefaultIndex.houseType = this.findObjValue(houseStatus, this.dataList.houseType).index
|
|
this.rentFormNum = householdVOList.length
|
this.$nextTick(() => {
|
householdVOList.forEach((item, index) => {
|
if (item.ethnicity) {
|
let obj = this.$getIndex(this.$refs.rentform[0].nationTypeList, item
|
.ethnicity,
|
"value", "name")
|
this.$refs.rentform[index].nationValue = obj.name;
|
this.$refs.rentform[index].nationTypeIndex = obj.index;
|
}
|
if (typeof(item.gender) == 'number') {
|
let obj = this.$getIndex(this.$refs.rentform[index]
|
.gender, item.gender, "value", "name")
|
this.$refs.rentform[index].genderValue = obj.name;
|
this.$refs.rentform[index].genderIndex = obj.index;
|
}
|
this.$refs.rentform[index].form = item
|
})
|
})
|
this.btnControls = {
|
deleteBtn: this.rentId !== '',
|
// verifyBtn: !this.auditStatus && !!this.rentId && this.currentRole.roleAlias === 'wgy'
|
verifyBtn: !this.auditStatus && !!this.rentId
|
}
|
},
|
async deleteRent() {
|
const {
|
code,
|
data
|
} = await deleteRentalInfo(this.rentId)
|
if (code !== 200) {
|
uni.showToast({
|
title: "删除失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
this.isModelShow = false
|
uni.showToast({
|
title: '删除成功',
|
icon: 'success',
|
duration: 1000,
|
complete: () => {
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1000)
|
}
|
})
|
},
|
|
//识别成功
|
recognizeSuccess(e, index) {
|
let {
|
detail: {
|
name,
|
id,
|
address,
|
gender,
|
nationality
|
}
|
} = e;
|
|
this.$refs.rentform[index].form.name = name.text; //姓名
|
this.$refs.rentform[index].form.hukouRegistration = address.text; //地址
|
this.$refs.rentform[index].form.idCard = id.text; //身份证号
|
this.$refs.rentform[index].genderValue = gender.text; //性别
|
this.$refs.rentform[index].nationValue = `${nationality.text}族`; //民族
|
this.$refs.rentform[index].form.gender = this.getValue(this.genderList, gender.text).value;
|
this.$refs.rentform[index].form.ethnicity = this.getValue(this.nationList, `${nationality.text}族`).value;
|
this.$refs.rentform[index].gender = [this.getValue(this.genderList, gender.text).index];
|
this.$refs.rentform[index].nationTypeIndex = [this.getValue(this.nationList, `${nationality.text}族`)
|
.index
|
];
|
},
|
|
getValue(arr, name) {
|
for (let i = 0, ii = arr.length; i < ii; i++) {
|
if (arr[i].name == name) {
|
return {
|
index: i,
|
value: arr[i].value
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #F5F5F5;
|
}
|
</style>
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
padding: 20rpx 30rpx;
|
padding-bottom: 200rpx;
|
|
.basic-info {
|
background-color: #ffffff;
|
padding: 30rpx;
|
border-radius: 8rpx;
|
|
|
|
.pic {
|
|
|
// padding: 40rpx 30rpx;
|
.title {
|
font-size: 30rpx;
|
margin: 20rpx 0;
|
}
|
|
/deep/ .u-upload__button {
|
border: 1rpx solid #EEEEEE;
|
background-color: #fff;
|
}
|
}
|
}
|
|
.rent-info {
|
.addPerson-box {
|
margin-top: 30rpx;
|
}
|
|
.rent-box {
|
padding: 30rpx;
|
background-color: #ffffff;
|
margin-top: 30rpx;
|
border-radius: 8rpx;
|
|
.box-title {
|
display: flex;
|
justify-content: space-between;
|
|
.l {
|
display: flex;
|
align-items: center;
|
|
.line {
|
width: 6rpx;
|
// height: 60%;
|
height: 28rpx;
|
margin-right: 10rpx;
|
background-color: #017BFC;
|
}
|
|
.title {
|
font-size: 30rpx;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
}
|
|
|
.btn-group {
|
padding: 30rpx;
|
position: absolute;
|
bottom: 28rpx;
|
width: calc(100% - 60rpx);
|
|
.btn {
|
margin-bottom: 30rpx;
|
}
|
}
|
|
.bottom-tools {
|
display: flex;
|
background-color: #ffffff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: calc(100% - 40rpx);
|
// border-top: 1rpx solid #e4e4e4;
|
z-index: 999;
|
padding: 20rpx;
|
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
|
/deep/ .u-button {
|
color: #ffffff;
|
font-weight: 700;
|
border: 0;
|
margin-left: 30rpx;
|
|
&:first-child {
|
margin-left: 0rpx;
|
}
|
}
|
}
|
}
|
|
/deep/ .u-form-item {
|
padding: 5rpx 20rpx;
|
border-bottom: 1px solid #eff1f3;
|
}
|
|
.recognize-btn {
|
padding: 12rpx;
|
border-radius: 6rpx;
|
background-color: #3c9cff;
|
margin-left: 30rpx;
|
}
|
</style>
|
