开发更新

jiangping

2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea

 admin/src/views/contract/components/terminateLease.vue

@@ -27,6 +27,7 @@
                            <el-date-picker
                                v-model="form.btDate"
                                type="date"
                                :picker-options="pickerOptions"
                                @change="changeBtDate"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择">
@@ -56,19 +57,19 @@
                        <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="addZD">添加收款</el-button>
                    <el-button type="primary" @click="addFK">添加付款</el-button>
@@ -84,13 +85,21 @@
                    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
@@ -103,13 +112,14 @@
                    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>
@@ -119,7 +129,7 @@
                        <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>
@@ -153,9 +163,12 @@
                        {{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"
@@ -179,7 +192,7 @@
                </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>
        <!--    创建收款账单    -->
@@ -195,7 +208,7 @@
  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",
@@ -238,7 +251,7 @@
        },
        
        list: [],

        pickerOptions: {},
        agentList: [],

        receivable: '',
@@ -247,62 +260,42 @@
        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.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.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]
@@ -310,18 +303,18 @@
        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}`;
      },
@@ -349,19 +342,33 @@
          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
            }
@@ -372,11 +379,10 @@
        })
      },
      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.info.terminateList.forEach(item => {
        //   item.receivableFee = Number(item.receivableFee) + 1
        //   item.receivableFee = Number(item.receivableFee) - 1
        // })
        this.countData()
      },
      confirm () {
@@ -477,6 +483,11 @@
            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;