| | |
|---|
| | | <template>
|
|---|
| | | <view class="container">
|
|---|
| | | <u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
|---|
| | | <view class="box-title">
|
|---|
| | | <box-title title="基础信息"></box-title>
|
|---|
| | | </view>
|
|---|
| | | <view class="basic-info">
|
|---|
| | | <u-form-item @click="showSelectBus(dataList.relation, '租客关系', 'relationName','relation')"
|
|---|
| | | <u-form-item @click="showSelectBus(dataList.relation, '租客关系', 'relationName', 'relation')"
|
|---|
| | | class="form-item" labelWidth="100" label="租客关系" required prop="type">
|
|---|
| | | <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')"
|
|---|
| | | <u-form-item @click="showSelectBus(dataList.houseType, '房屋状态', 'houseTypeName', 'houseType')"
|
|---|
| | | class="form-item" labelWidth="100" label="房屋状态:" required prop="type">
|
|---|
| | | <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')"
|
|---|
| | | <u-form-item @click="showSelectBus(dataList.rentalUse, '租房用途', 'rentalUseName', 'rentalUse')"
|
|---|
| | | class="form-item" labelWidth="100" label="租房用途:" required prop="type">
|
|---|
| | | <u--input border="none" v-model="rentalUseName" disabled disabledColor="#ffffff" placeholder="请选择">
|
|---|
| | | </u--input>
|
|---|
| | |
|---|
| | | </u--input>
|
|---|
| | | <u-icon slot="right" name="arrow-right"></u-icon>
|
|---|
| | | </u-form-item>
|
|---|
| | | <u-form-item @click="dueTimeShow = true" class="form-item" labelWidth="100" label="到期时间:" required
|
|---|
| | | prop="type">
|
|---|
| | | <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="imagesList" :previewFullImage="uploadConfig.previewFullImage"
|
|---|
| | | :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
|---|
| | | :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"
|
|---|
| | | @delete="deletePic">
|
|---|
| | | </u-upload>
|
|---|
| | | </view>
|
|---|
| | | </view>
|
|---|
| | | <view class="box-title">
|
|---|
| | | <box-title title="合同上传"></box-title>
|
|---|
| | | </view>
|
|---|
| | |
|
|---|
| | | <view class="pic">
|
|---|
| | |
|
|---|
| | | <u-upload :fileList="imagesList"
|
|---|
| | | :previewFullImage="uploadConfig.previewFullImage" :accept="uploadConfig.acceptImg"
|
|---|
| | | :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
|---|
| | | @afterRead="afterReadImg" @delete="deletePic">
|
|---|
| | | </u-upload>
|
|---|
| | | </view>
|
|---|
| | |
|
|---|
| | | <view class="rent-info">
|
|---|
| | | <view v-for="item in rentFormNum" :key="item">
|
|---|
| | | <view v-for="(item, index) in rentFormNum" :key="item" class="rent-box">
|
|---|
| | | <view class="box-title">
|
|---|
| | | <box-title :title="'租客信息-#'+item">
|
|---|
| | | <template #titleMore v-if="item !== 1">
|
|---|
| | | <u-icon size="25" name="trash" color='#EF0724'></u-icon>
|
|---|
| | | </template>
|
|---|
| | | </box-title>
|
|---|
| | | <view class="l">
|
|---|
| | | <view class="line"></view>
|
|---|
| | | <view class="title">{{ '租客信息-#' + item }}</view>
|
|---|
| | | </view>
|
|---|
| | | <view class="r" v-if="index === 1">
|
|---|
| | | <u-icon name="trash-fill" color="#ff0000" size="20" @click="decRentForm"></u-icon>
|
|---|
| | | </view>
|
|---|
| | | </view>
|
|---|
| | | <rentForm ref="rentform" />
|
|---|
| | | </view>
|
|---|
| | |
|---|
| | | :popupTitle="selectBusTitle" :dataLists="selectBusList" @cancel="typeShow = false" @submit="typeSelect">
|
|---|
| | | </select-bus>
|
|---|
| | | <!--出租时间选择-->
|
|---|
| | | <u-datetime-picker :show="rentTimeShow" v-model="form.rentTime" mode="date"
|
|---|
| | | @confirm="rentTimeShow = false"></u-datetime-picker>
|
|---|
| | |
|
|---|
| | | <u-datetime-picker :show="rentTimeShow" mode="date" @confirm="rentTimeConfirm"
|
|---|
| | | @cancel="rentTimeShow = false"></u-datetime-picker>
|
|---|
| | | <u-datetime-picker :show="dueTimeShow" mode="date" @confirm="dueTimeConfirm"
|
|---|
| | | @cancel="dueTimeShow = false"></u-datetime-picker>
|
|---|
| | |
|
|---|
| | | <view class="bottom-tools">
|
|---|
| | | <u-button plain class="btn-item" type="success" @click="addRentForm">再加一人</u-button>
|
|---|
| | | <u-button class="btn-item" type="error" @click="decRentForm">删除</u-button>
|
|---|
| | | <u-button class="btn-item" type="primary" @click="save">保存</u-button>
|
|---|
| | | <u-button class="btn-item" @click="addRentForm">再加一人</u-button>
|
|---|
| | | <u-button class="btn-item" @click="saveOrUpdate">{{ rentId === '' ? "保存" : "确认修改" }}</u-button>
|
|---|
| | | </view>
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | </view>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | |
|---|
| | | import rentForm from '../components/form/rentForm.vue'
|
|---|
| | | import uploadMixin from "@/mixin/uploadMixin";
|
|---|
| | | import {
|
|---|
| | | uploadFile, |
|---|
| | | addHouseRental
|
|---|
| | | uploadFile,
|
|---|
| | | addHouseRental,
|
|---|
| | | getHouseRentInfo,
|
|---|
| | | } from "@/api/doorplateAddress/doorplateAddress";
|
|---|
| | | import {
|
|---|
| | | updateRetalInfo
|
|---|
| | | } from '@/api/houseRental/houseRental.js'
|
|---|
| | | import {
|
|---|
| | | data
|
|---|
| | | } from "uview-ui/libs/mixin/mixin";
|
|---|
| | | import {
|
|---|
| | | update
|
|---|
| | | } from "../../../api/system/role";
|
|---|
| | | export default {
|
|---|
| | | mixins: [uploadMixin],
|
|---|
| | | components: {
|
|---|
| | |
|---|
| | | form: {
|
|---|
| | | relation: "",
|
|---|
| | | rentTime: "",
|
|---|
| | | dueTime: "",
|
|---|
| | | },
|
|---|
| | | imagesList: [],
|
|---|
| | | rules: {},
|
|---|
| | | rentTimeShow: false,
|
|---|
| | | dueTimeShow: false,
|
|---|
| | | rentFormNum: 1,
|
|---|
| | | relationName: "",
|
|---|
| | | houseTypeName: "",
|
|---|
| | |
|---|
| | | selectBusModel: '',
|
|---|
| | | selectBusKey: '',
|
|---|
| | | typeShow: false,
|
|---|
| | | houseCode: ''
|
|---|
| | | houseCode: '',
|
|---|
| | | rentId: ''
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | created() {
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | onLoad(option) {
|
|---|
| | | this.houseCode = option.houseCode
|
|---|
| | | },
|
|---|
| | | onShow() {
|
|---|
| | | const {
|
|---|
| | | id,
|
|---|
| | | houseCode
|
|---|
| | | } = option
|
|---|
| | | this.houseCode = houseCode
|
|---|
| | | // 使用id来判断是不是修改
|
|---|
| | | if (id !== void 0) {
|
|---|
| | | this.rentId = id
|
|---|
| | | this.getCurrentRentInfo()
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | |
|---|
| | | this.form[this.selectBusKey] = item.value
|
|---|
| | | this.typeShow = !this.typeShow
|
|---|
| | | },
|
|---|
| | | rentTimeConfirm(e) {
|
|---|
| | | const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
|---|
| | | this.form.rentTime = time
|
|---|
| | | this.rentTimeShow = false
|
|---|
| | | },
|
|---|
| | | dueTimeConfirm(e) {
|
|---|
| | | const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
|---|
| | | this.form.dueTime = time
|
|---|
| | | this.dueTimeShow = false
|
|---|
| | | },
|
|---|
| | | beforeUpload(e) {
|
|---|
| | | console.log(e)
|
|---|
| | | return false
|
|---|
| | |
|---|
| | | decRentForm() {
|
|---|
| | | this.rentFormNum > 1 && this.rentFormNum--
|
|---|
| | | },
|
|---|
| | | saveOrUpdate() {
|
|---|
| | | if (this.rentId === '') {
|
|---|
| | | this.save()
|
|---|
| | | return
|
|---|
| | | }
|
|---|
| | | this.update()
|
|---|
| | | },
|
|---|
| | | async save() {
|
|---|
| | | let houseTenantVOList = []
|
|---|
| | | this.$refs.rentform.forEach(item => {
|
|---|
| | | houseTenantVOList.push(item.form)
|
|---|
| | | }) |
|---|
| | | const relationIndex = this.dataList.relation.findIndex(item => item.name === this.relationName) |
|---|
| | | const statusIndex = this.dataList.houseType.findIndex(item => item.name === this.houseTypeName) |
|---|
| | | })
|
|---|
| | | 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 = {
|
|---|
| | | houseCode: this.houseCode,
|
|---|
| | | tenantRelationship: this.dataList.relation[relationIndex].value,
|
|---|
| | | rentalTime: this.form.rentalTime,
|
|---|
| | | rentalTime: this.form.rentTime,
|
|---|
| | | dueTime: this.form.dueTime,
|
|---|
| | | houseStatus: this.dataList.houseType[statusIndex].value,
|
|---|
| | | rentalUse: this.dataList.rentalUse[rentalIndex].value,
|
|---|
| | | houseTenantVOList
|
|---|
| | | } |
|---|
| | | |
|---|
| | | const res = await addHouseRental(params) |
|---|
| | | console.log(res) |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | const res = await addHouseRental(params)
|
|---|
| | | },
|
|---|
| | | async update() {
|
|---|
| | | let houseTenantVOList = []
|
|---|
| | | this.$refs.rentform.forEach(item => {
|
|---|
| | | houseTenantVOList.push(item.form)
|
|---|
| | | })
|
|---|
| | | 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,
|
|---|
| | | houseTenantVOList
|
|---|
| | | }
|
|---|
| | | const res = await updateRetalInfo(data)
|
|---|
| | | },
|
|---|
| | | findObjValue(value, obj) {
|
|---|
| | | const res = obj.find(item => {
|
|---|
| | | return item.value == value
|
|---|
| | | })
|
|---|
| | | return res.name
|
|---|
| | | },
|
|---|
| | | async getCurrentRentInfo() {
|
|---|
| | | const {
|
|---|
| | | code,
|
|---|
| | | data: {
|
|---|
| | | houseRentalList
|
|---|
| | | }
|
|---|
| | | } = await getHouseRentInfo(this.houseCode)
|
|---|
| | | const {
|
|---|
| | | houseStatus,
|
|---|
| | | tenantRelationship,
|
|---|
| | | rentalUse,
|
|---|
| | | rentalTime,
|
|---|
| | | dueTime,
|
|---|
| | | houseTenantVOList
|
|---|
| | | } = houseRentalList.find(item => item.id === this.rentId)
|
|---|
| | | this.form = {
|
|---|
| | | relation: tenantRelationship,
|
|---|
| | | rentTime: rentalTime,
|
|---|
| | | dueTime: dueTime,
|
|---|
| | | }
|
|---|
| | | 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.rentFormNum = houseTenantVOList.length
|
|---|
| | | this.$nextTick(() => { |
|---|
| | | houseTenantVOList.forEach((item, index) => { |
|---|
| | | this.$refs.rentform[index].form = item |
|---|
| | | }) |
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|---|
| | | <style scoped lang="scss">
|
|---|
| | | .container {
|
|---|
| | | position: relative;
|
|---|
| | | width: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | flex-direction: column;
|
|---|
| | | background: #F9F9FA;
|
|---|
| | | background: #F8F8F9;
|
|---|
| | | padding: 20rpx 30rpx;
|
|---|
| | | padding-bottom: 200rpx;
|
|---|
| | |
|
|---|
| | | .box-title {
|
|---|
| | | padding: 10px 0;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .basic-info {
|
|---|
| | | background-color: #ffffff;
|
|---|
| | | padding: 20rpx;
|
|---|
| | |
|
|---|
| | | .form-item {
|
|---|
| | | background-color: #ffffff;
|
|---|
| | | padding: 5rpx 20rpx;
|
|---|
| | | border-bottom: 1px solid #eff1f3;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .pic {
|
|---|
| | |
|
|---|
| | | // padding: 40rpx 30rpx;
|
|---|
| | | .title {
|
|---|
| | | font-size: 30rpx;
|
|---|
| | | margin: 20rpx 0;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .pic {
|
|---|
| | | background-color: #ffffff;
|
|---|
| | | padding: 40rpx 30rpx;
|
|---|
| | | .rent-info {
|
|---|
| | | .rent-box {
|
|---|
| | | padding: 20rpx;
|
|---|
| | | background-color: #ffffff;
|
|---|
| | | margin-top: 30rpx;
|
|---|
| | |
|
|---|
| | | .box-title {
|
|---|
| | | display: flex;
|
|---|
| | | justify-content: space-between;
|
|---|
| | |
|
|---|
| | | .l {
|
|---|
| | | display: flex;
|
|---|
| | |
|
|---|
| | | .line {
|
|---|
| | | width: 8rpx;
|
|---|
| | | margin-right: 10rpx;
|
|---|
| | | background-color: #2978FF;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .title {
|
|---|
| | | font-size: 30rpx;
|
|---|
| | | font-weight: 700;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .btn-group {
|
|---|
| | | padding: 30rpx;
|
|---|
| | |
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|
|---|
| | |
|
|---|
| | | .bottom-tools {
|
|---|
| | | display: flex;
|
|---|
| | | background-color: #ffffff;
|
|---|
| | | position: fixed;
|
|---|
| | | bottom: 0;
|
|---|
| | | left: 0;
|
|---|
| | | width: 100%;
|
|---|
| | | border-top: 1rpx solid #e4e4e4;
|
|---|
| | | // border-top: 1rpx solid #e4e4e4;
|
|---|
| | | z-index: 999;
|
|---|
| | |
|
|---|
| | | .btn-item {
|
|---|
| | | margin: 40rpx;
|
|---|
| | | color: #ffffff;
|
|---|
| | | font-weight: 700;
|
|---|
| | | border: 0;
|
|---|
| | |
|
|---|
| | | &:nth-child(1) {
|
|---|
| | | flex: 1;
|
|---|
| | | background-color: #2CD5C0;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &:nth-child(2) {
|
|---|
| | | flex: 3;
|
|---|
| | | background: linear-gradient(to right, #06B0FD, #027BFE);
|
|---|
| | | margin-left: 0rpx;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
