|  |  | 
 |  |  |                             <el-date-picker | 
 |  |  |                                 v-model="form.btDate" | 
 |  |  |                                 type="date" | 
 |  |  |                                 :picker-options="pickerOptions" | 
 |  |  |                                 @change="changeBtDate" | 
 |  |  |                                 value-format="yyyy-MM-dd" | 
 |  |  |                                 placeholder="请选择"> | 
 |  |  |                             </el-date-picker> | 
 |  |  | 
 |  |  |                         <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip /> | 
 |  |  |                         <el-table-column label="房源名称" show-overflow-tooltip> | 
 |  |  |                             <template slot-scope="{row}"> | 
 |  |  |                                 {{row.buildingName}}/{{row.code}} | 
 |  |  |                                 {{row.buildingName}}/{{row.roomNum}} | 
 |  |  |                             </template> | 
 |  |  |                         </el-table-column> | 
 |  |  |                         <el-table-column label="租赁面积(㎡)" show-overflow-tooltip> | 
 |  |  |                             <template slot-scope="{row}"> | 
 |  |  |                                 {{row.area}}㎡ | 
 |  |  |                                 {{row.rentArea}}㎡ | 
 |  |  |                             </template> | 
 |  |  |                         </el-table-column> | 
 |  |  |                     </el-table> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="title"> | 
 |  |  |                 <span>退租信息</span> | 
 |  |  |                 <span>账单结算</span> | 
 |  |  |                 <div style="display: flex; align-items: center;"> | 
 |  |  |                     <el-button type="primary" @click="$refs.addCollectionBill.open('创建收款账单', { contractCode: info.code, contractId: info.id, renterName: info.renterName, renterId: info.renterId, billType: 0, billTypeCopy: 0, feeType: 0 })">添加收款</el-button> | 
 |  |  |                     <el-button type="primary" @click="$refs.AddPaymentBill.open('创建付款账单', { contractCode: info.code, contractId: info.id, renterName: info.renterName, renterId: info.renterId, billType: 1, billTypeCopy: 1 })">添加付款</el-button> | 
 |  |  |                     <el-button type="primary" @click="addZD">添加收款</el-button> | 
 |  |  |                     <el-button type="primary" @click="addFK">添加付款</el-button> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <el-table | 
 |  |  |                 :data="info.terminateList" | 
 |  |  |                 border | 
 |  |  |                 v-loading="loading" | 
 |  |  |                 style="width: 100%; margin-bottom: 15px;"> | 
 |  |  |                 <el-table-column | 
 |  |  |                     prop="code" | 
 |  |  |                     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.isDele"> | 
 |  |  |                             </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" | 
 |  |  | 
 |  |  |   import AddCollectionBill from './addCollectionBill' | 
 |  |  |   import AddPaymentBill from './addPaymentBill' | 
 |  |  |   import { getUserList } from '@/api/system/user' | 
 |  |  |   import { backRent } from '@/api/contract' | 
 |  |  |   import { backRent, getCanBackBill, findForBills } from '@/api/contract' | 
 |  |  |   import { mapState } from 'vuex' | 
 |  |  |   export default { | 
 |  |  |     name: "terminateLease", | 
 |  |  |     components: { | 
 |  |  |       GlobalWindow, | 
 |  |  |       AddCollectionBill, | 
 |  |  |       AddPaymentBill | 
 |  |  |     }, | 
 |  |  |     computed: { | 
 |  |  |       ...mapState(['userInfo']) | 
 |  |  |     }, | 
 |  |  |     extends: BaseOpera, | 
 |  |  |     data() { | 
 |  |  | 
 |  |  |         }, | 
 |  |  |          | 
 |  |  |         list: [], | 
 |  |  |  | 
 |  |  |         pickerOptions: {}, | 
 |  |  |         agentList: [], | 
 |  |  |  | 
 |  |  |         receivable: '', | 
 |  |  |         meet: '' | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     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 | 
 |  |  |         } | 
 |  |  |         meet: '', | 
 |  |  |          | 
 |  |  |         loading: false | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     methods: { | 
 |  |  |       open (title, info) { | 
 |  |  |         this.title = title | 
 |  |  |         this.info = info | 
 |  |  |         this.pickerOptions = { | 
 |  |  |           disabledDate(time) { | 
 |  |  |             // 如果没有后面的 -8.64e7 就是不可以选择今天的 | 
 |  |  |             const beginDate = new Date(info.startDate).getTime() - 8.64e7 | 
 |  |  |             const endDate = new Date(info.endDate).getTime() | 
 |  |  |             return beginDate > time.getTime() || endDate < time.getTime() | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |         this.form.id = info.id | 
 |  |  |         this.info.billList.forEach(item => { | 
 |  |  |           this.$set(item, 'receivableFeeCopy', item.receivableFee) | 
 |  |  |           if ([2,3,7].includes(item.costType)) { | 
 |  |  |             this.$set(item, 'price', item.actReceivableFee) | 
 |  |  |           } else { | 
 |  |  |             this.$set(item, 'price', item.receivableFee) | 
 |  |  |           } | 
 |  |  |         this.form.btSignDate = this.getDay() | 
 |  |  |         this.form.btUserId = this.userInfo.id | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.form.resetFields() | 
 |  |  |         }) | 
 |  |  |         this.info.terminateList = this.info.canBackRentBills.filter(item => { | 
 |  |  |           if ([0,1,4,5,6].includes(item.costType)) { | 
 |  |  |             item.billTypeCopy = item.billType | 
 |  |  |             return item | 
 |  |  |           } | 
 |  |  |         }) | 
 |  |  |         this.info.depositList = this.info.canBackRentBills.filter(item => { | 
 |  |  |           if ([2,3,7].includes(item.costType)) { | 
 |  |  |             item.billTypeCopy = 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 | 
 |  |  |       }, | 
 |  |  |       getObjS (obj) { | 
 |  |  |         this.info.terminateList.push(obj) | 
 |  |  |         this.info.terminateList.forEach(item => { | 
 |  |  |           item.receivableFee = Number(item.receivableFee) + 1 | 
 |  |  |           item.receivableFee = Number(item.receivableFee) - 1 | 
 |  |  |       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 total1 = 0 | 
 |  |  |         let total2 = 0 | 
 |  |  |         arr.forEach(item => { | 
 |  |  |           if (item.billType === 0) { | 
 |  |  |             total1 += Math.abs(Number(item.price)) | 
 |  |  |           } else if (item.billType === 1) { | 
 |  |  |             total2 += Math.abs(Number(item.price)) | 
 |  |  |           } | 
 |  |  |         }) | 
 |  |  |         this.receivable = total1.toFixed(2) | 
 |  |  |         this.meet = total2.toFixed(2) | 
 |  |  |       }, | 
 |  |  |       getDay () { | 
 |  |  |         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}`; | 
 |  |  |       }, | 
 |  |  |       addZD () { | 
 |  |  |         if (!this.form.btDate) return this.$message.warning('请选择退租日期') | 
 |  |  |         this.$refs.addCollectionBill.open('创建收款账单', { | 
 |  |  |           contractCode: this.info.code, | 
 |  |  |           contractId: this.info.id, | 
 |  |  |           renterName: this.info.renterName, | 
 |  |  |           renterId: this.info.renterId, | 
 |  |  |           billType: 0, | 
 |  |  |           billTypeCopy: 0, | 
 |  |  |           feeType: 0 | 
 |  |  |         }, { startDate: this.info.startDate, endDate: this.form.btDate }) | 
 |  |  |       }, | 
 |  |  |       addFK () { | 
 |  |  |         if (!this.form.btDate) return this.$message.warning('请选择退租日期') | 
 |  |  |         this.$refs.AddPaymentBill.open('创建付款账单', { | 
 |  |  |           contractCode: this.info.code, | 
 |  |  |           contractId: this.info.id, | 
 |  |  |           renterName: this.info.renterName, | 
 |  |  |           renterId: this.info.renterId, | 
 |  |  |           billType: 1, | 
 |  |  |           feeType: 0, | 
 |  |  |           billTypeCopy: 1 | 
 |  |  |         }, { startDate: this.info.startDate, endDate: this.form.btDate }) | 
 |  |  |       }, | 
 |  |  |       changeBtDate (btDate) { | 
 |  |  |         this.loading = true | 
 |  |  |         findForBills({ | 
 |  |  |           id: this.info.id, | 
 |  |  |           btDate | 
 |  |  |         }).then(res => { | 
 |  |  |           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.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 | 
 |  |  |             } | 
 |  |  |           }) | 
 |  |  |           this.countData() | 
 |  |  |         }).finally(() => { | 
 |  |  |           this.loading = false | 
 |  |  |         }) | 
 |  |  |       }, | 
 |  |  |       getObjS (obj) { | 
 |  |  |         obj.startDate = obj.startDate.substring(0, 10) | 
 |  |  |         obj.endDate = obj.endDate.substring(0, 10) | 
 |  |  |         obj.isDele = true | 
 |  |  |         this.info.terminateList.push(obj) | 
 |  |  |         this.countData() | 
 |  |  |       }, | 
 |  |  |       confirm () { | 
 |  |  |         this.$refs.form.validate((valid) => { | 
 |  |  | 
 |  |  |         if (Number(num) > row.receivableFeeCopy) { | 
 |  |  |           row.receivableFee = '' | 
 |  |  |           row.price = 0 | 
 |  |  |           this.countData() | 
 |  |  |           this.$message.warning('不能大于原始应收付金额') | 
 |  |  |         } else { | 
 |  |  |           row.price = Number(num) - row.actReceivableFee | 
 |  |  |           // 收 | 
 |  |  |           if (row.billTypeCopy === 0) { | 
 |  |  |             if (row.price > 0) { | 
 |  |  |               row.billType = 0 | 
 |  |  |             } else if (row.price < 0) { | 
 |  |  |               row.billType = 1 | 
 |  |  |           if (num) { | 
 |  |  |             row.price = Number(num) - row.actReceivableFee | 
 |  |  |             // 收 | 
 |  |  |             if (row.billTypeCopy === 0) { | 
 |  |  |               if (row.price > 0) { | 
 |  |  |                 row.billType = 0 | 
 |  |  |               } else if (row.price < 0) { | 
 |  |  |                 row.billType = 1 | 
 |  |  |               } else { | 
 |  |  |                 row.billType = 0 | 
 |  |  |               } | 
 |  |  |             } else { | 
 |  |  |               row.billType = 0 | 
 |  |  |               if (row.price > 0) { | 
 |  |  |                 row.billType = 1 | 
 |  |  |               } else if (row.price < 0) { | 
 |  |  |                 row.billType = 0 | 
 |  |  |               } else { | 
 |  |  |                 row.billType = 1 | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |           } else { | 
 |  |  |             if (row.price > 0) { | 
 |  |  |               row.billType = 1 | 
 |  |  |             } else if (row.price < 0) { | 
 |  |  |               row.billType = 0 | 
 |  |  |             } else { | 
 |  |  |               row.billType = 1 | 
 |  |  |             } | 
 |  |  |             row.price = 0 | 
 |  |  |             row.billType = row.billTypeCopy | 
 |  |  |           } | 
 |  |  |           // if (row.price > 0) { | 
 |  |  |           //   row.billType = 0 | 
 |  |  |           // } else if (row.price < 0) { | 
 |  |  |           //   row.billType = 1 | 
 |  |  |           // } | 
 |  |  |           row.price = String(row.price) | 
 |  |  |           if (row.price.indexOf('-') > 0) { | 
 |  |  |             row.price = row.price.substring(0, row.price.length) | 
 |  |  |           } | 
 |  |  |           row.price = Math.abs(row.price); | 
 |  |  |           this.countData() | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  | 
 |  |  |             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; |