|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="title"> | 
|---|
|  |  |  | <span>退租信息</span> | 
|---|
|  |  |  | <span>账单结算</span> | 
|---|
|  |  |  | <div style="display: flex; align-items: center;"> | 
|---|
|  |  |  | <el-button type="primary" @click="addZD">添加收款</el-button> | 
|---|
|  |  |  | <el-button type="primary" @click="addFK">添加付款</el-button> | 
|---|
|  |  |  | 
|---|
|  |  |  | label="账单编号"> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | width="100" | 
|---|
|  |  |  | label="费用类型"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | <span v-if="row.costType === 0">租赁费</span> | 
|---|
|  |  |  | <span v-if="row.costType === 1">物业费</span> | 
|---|
|  |  |  | <span v-if="row.costType === 4">水电费</span> | 
|---|
|  |  |  | <span v-if="row.costType === 5">杂项费</span> | 
|---|
|  |  |  | <span v-if="row.costType === 6">其他</span> | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <div style="display: flex; align-items: center;"> | 
|---|
|  |  |  | <span v-if="scope.row.costType === 0">租赁费</span> | 
|---|
|  |  |  | <span v-if="scope.row.costType === 1">物业费</span> | 
|---|
|  |  |  | <span v-if="scope.row.costType === 4">水电费</span> | 
|---|
|  |  |  | <span v-if="scope.row.costType === 5">杂项费</span> | 
|---|
|  |  |  | <span v-if="scope.row.costType === 6">其他</span> | 
|---|
|  |  |  | <i class="el-icon-delete" | 
|---|
|  |  |  | style="color: red; margin-left: 10px; font-size: 18px; cursor: pointer;" | 
|---|
|  |  |  | @click="deleRow(scope.$index)" | 
|---|
|  |  |  | v-if="scope.row.date && scope.row.date.length !==0"> | 
|---|
|  |  |  | </i> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | 
|---|
|  |  |  | label="应收付金额/原始应收付"> | 
|---|
|  |  |  | <template v-slot="{row}"> | 
|---|
|  |  |  | <div style="display: flex; align-items: center;"> | 
|---|
|  |  |  | <el-input v-model="row.receivableFee" @input="changeReceivableFee($event, row)" placeholder="请输入内容" style="width: 90px;"></el-input> | 
|---|
|  |  |  | <el-input v-model="row.receivableFee" @input="changeReceivableFee($event, row)" placeholder="请输入内容" style="flex: 1;"></el-input> | 
|---|
|  |  |  | <span style="margin: 0 10px;">/</span> | 
|---|
|  |  |  | {{row.receivableFeeCopy}} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | width="120" | 
|---|
|  |  |  | prop="actReceivableFee" | 
|---|
|  |  |  | label="实收/付金额"> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div style="display: flex; align-items: center;"> | 
|---|
|  |  |  | <el-tag type="success" v-if="row.billType === 0">收</el-tag> | 
|---|
|  |  |  | <el-tag type="warning" v-if="row.billType === 1">付</el-tag> | 
|---|
|  |  |  | <span style="margin-left: 10px;">{{row.price}}</span> | 
|---|
|  |  |  | <span style="margin-left: 10px;">{{Math.abs(row.price)}}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | 
|---|
|  |  |  | {{row.startDate}} ~ {{row.endDate}} | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <!--                prop="receivableFee"--> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="receivableFee" | 
|---|
|  |  |  | label="应收金额"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | 0 | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="actReceivableFee" | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | <div class="footer"> | 
|---|
|  |  |  | 合计应收:<span>{{receivable.toFixed(2)}}</span>元, 合计应付:<span>{{meet.toFixed(2)}}</span>元 | 
|---|
|  |  |  | 合计应收:<span>{{receivable}}</span>元, 合计应付:<span>{{meet}}</span>元 | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <!--    创建收款账单    --> | 
|---|
|  |  |  | 
|---|
|  |  |  | import AddCollectionBill from './addCollectionBill' | 
|---|
|  |  |  | import AddPaymentBill from './addPaymentBill' | 
|---|
|  |  |  | import { getUserList } from '@/api/system/user' | 
|---|
|  |  |  | import { backRent, getCanBackBill } from '@/api/contract' | 
|---|
|  |  |  | import { backRent, getCanBackBill, findForBills } from '@/api/contract' | 
|---|
|  |  |  | import { mapState } from 'vuex' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: "terminateLease", | 
|---|
|  |  |  | 
|---|
|  |  |  | loading: false | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | watch: { | 
|---|
|  |  |  | // info: { | 
|---|
|  |  |  | //   deep: true, | 
|---|
|  |  |  | //   immediate: true, | 
|---|
|  |  |  | //   handler(news, olds) { | 
|---|
|  |  |  | //     const arr = [...this.info.terminateList, ...this.info.depositList] | 
|---|
|  |  |  | //     let total1 = 0 | 
|---|
|  |  |  | //     let total2 = 0 | 
|---|
|  |  |  | //     arr.forEach(item => { | 
|---|
|  |  |  | //       if (item.billType === 0) { | 
|---|
|  |  |  | //         total1 += Number(item.price) | 
|---|
|  |  |  | //       } else if (item.billType === 1) { | 
|---|
|  |  |  | //         total2 += Number(item.price) | 
|---|
|  |  |  | //       } | 
|---|
|  |  |  | //     }) | 
|---|
|  |  |  | //     this.receivable = total1 | 
|---|
|  |  |  | //     this.meet = total2 | 
|---|
|  |  |  | //   } | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | open (title, info) { | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.info = info | 
|---|
|  |  |  | this.form.id = info.id | 
|---|
|  |  |  | this.form.btSignDate = this.getDay() | 
|---|
|  |  |  | console.log(this.userInfo) | 
|---|
|  |  |  | this.form.btUserId = this.userInfo.id | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.form.resetFields() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.info.canBackRentBills.forEach(item => { | 
|---|
|  |  |  | this.$set(item, 'receivableFeeCopy', item.receivableFee) | 
|---|
|  |  |  | this.$set(item, 'receivableFee', item.needReceivableFee) | 
|---|
|  |  |  | if ([2,3,7].includes(item.costType)) { | 
|---|
|  |  |  | this.$set(item, 'billType', 1) | 
|---|
|  |  |  | this.$set(item, 'price', item.actReceivableFee) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.$set(item, 'price', item.needReceivableFee) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.info.terminateList = this.info.canBackRentBills.filter(item => { | 
|---|
|  |  |  | if ([0,1,4,5,6].includes(item.costType)) { | 
|---|
|  |  |  | item.billTypeCopy = JSON.parse(JSON.stringify(item.billType)) | 
|---|
|  |  |  | return item | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.info.depositList = this.info.canBackRentBills.filter(item => { | 
|---|
|  |  |  | if ([2,3,7].includes(item.costType)) { | 
|---|
|  |  |  | item.billTypeCopy = JSON.parse(JSON.stringify(item.billType)) | 
|---|
|  |  |  | return item | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.info.terminateList = [] | 
|---|
|  |  |  | this.info.depositList = [] | 
|---|
|  |  |  | this.form.btDate = this.getDay() | 
|---|
|  |  |  | this.countData() | 
|---|
|  |  |  | this.getUser() | 
|---|
|  |  |  | this.changeBtDate(this.form.btDate) | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | deleRow(index) { | 
|---|
|  |  |  | this.info.terminateList.splice(index, 1) | 
|---|
|  |  |  | this.countData() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getDayTime () { | 
|---|
|  |  |  | const today = new Date(); | 
|---|
|  |  |  | const year = today.getFullYear(); | 
|---|
|  |  |  | const month = today.getMonth() + 1; | 
|---|
|  |  |  | const day = today.getDate(); | 
|---|
|  |  |  | return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | countData () { | 
|---|
|  |  |  | const arr = [...this.info.terminateList, ...this.info.depositList] | 
|---|
|  |  |  | 
|---|
|  |  |  | let total2 = 0 | 
|---|
|  |  |  | arr.forEach(item => { | 
|---|
|  |  |  | if (item.billType === 0) { | 
|---|
|  |  |  | total1 += Number(item.price) | 
|---|
|  |  |  | total1 += Math.abs(Number(item.price)) | 
|---|
|  |  |  | } else if (item.billType === 1) { | 
|---|
|  |  |  | total2 += Number(item.price) | 
|---|
|  |  |  | total2 += Math.abs(Number(item.price)) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.receivable = total1 | 
|---|
|  |  |  | this.meet = total2 | 
|---|
|  |  |  | this.receivable = total1.toFixed(2) | 
|---|
|  |  |  | this.meet = total2.toFixed(2) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getDay () { | 
|---|
|  |  |  | const today = new Date(); | 
|---|
|  |  |  | const year = today.getFullYear(); | 
|---|
|  |  |  | const month = today.getMonth() + 1; // 月份是从 0 开始的,因此需要加 1 | 
|---|
|  |  |  | const month = today.getMonth() + 1; | 
|---|
|  |  |  | const day = today.getDate(); | 
|---|
|  |  |  | return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | billTypeCopy: 1 | 
|---|
|  |  |  | }, { startDate: this.info.startDate, endDate: this.form.btDate }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeBtDate (planPayDateEnd) { | 
|---|
|  |  |  | changeBtDate (btDate) { | 
|---|
|  |  |  | this.loading = true | 
|---|
|  |  |  | getCanBackBill({ | 
|---|
|  |  |  | contractId: this.info.id, | 
|---|
|  |  |  | planPayDateEnd | 
|---|
|  |  |  | findForBills({ | 
|---|
|  |  |  | id: this.info.id, | 
|---|
|  |  |  | btDate | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | res.forEach(item => { | 
|---|
|  |  |  | this.$set(item, 'receivableFeeCopy', item.receivableFee) | 
|---|
|  |  |  | this.$set(item, 'receivableFee', item.needReceivableFee) | 
|---|
|  |  |  | this.$set(item, 'price', item.needReceivableFee) | 
|---|
|  |  |  | res.canBackRentBills.forEach(item => { | 
|---|
|  |  |  | if ([2,3,7].includes(item.costType)) { | 
|---|
|  |  |  | this.$set(item, 'billType', 1) | 
|---|
|  |  |  | this.$set(item, 'price', item.actReceivableFee) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.$set(item, 'receivableFeeCopy', item.receivableFee) | 
|---|
|  |  |  | this.$set(item, 'receivableFee', item.needReceivableFee) | 
|---|
|  |  |  | this.$set(item, 'price', (item.needReceivableFee - item.actReceivableFee).toFixed(2)) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.info.terminateList = res.filter(item => { | 
|---|
|  |  |  | this.info.terminateList = res.canBackRentBills.filter(item => { | 
|---|
|  |  |  | if ([0,1,4,5,6].includes(item.costType)) { | 
|---|
|  |  |  | item.billTypeCopy = JSON.parse(JSON.stringify(item.billType)) | 
|---|
|  |  |  | if (Number(item.price) < 0) { | 
|---|
|  |  |  | item.billType = 1 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return item | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.info.depositList = res.canBackRentBills.filter(item => { | 
|---|
|  |  |  | if ([2,3,7].includes(item.costType)) { | 
|---|
|  |  |  | item.billTypeCopy = JSON.parse(JSON.stringify(item.billType)) | 
|---|
|  |  |  | return item | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getObjS (obj) { | 
|---|
|  |  |  | console.log(obj) | 
|---|
|  |  |  | obj.startDate = obj.startDate.substring(0, 10) | 
|---|
|  |  |  | obj.endDate = obj.endDate.substring(0, 10) | 
|---|
|  |  |  | this.info.terminateList.push(obj) | 
|---|
|  |  |  | // this.info.terminateList.forEach(item => { | 
|---|
|  |  |  | //   item.receivableFee = Number(item.receivableFee) + 1 | 
|---|
|  |  |  | //   item.receivableFee = Number(item.receivableFee) - 1 | 
|---|
|  |  |  | // }) | 
|---|
|  |  |  | this.countData() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | border-bottom: 1px solid #ececec; | 
|---|
|  |  |  | margin-bottom: 15px; | 
|---|
|  |  |  | position: sticky; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | z-index: 999; | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | span { | 
|---|
|  |  |  | color: black; | 
|---|
|  |  |  | font-size: 16px; | 
|---|