src/components/contract/contractDetailFee.vue

<template>
  <div class="">
    <div class="flex justify-end">
      <div :span="2" class="padding-right-xs padding-left-xl"></div>
      <div :span="2" class="padding-right-xs padding-right-xl"></div>
      <div :span="8" class="text-right">
        <el-button type="primary" size="small" style="margin-left:10px" @click="_openTempImportContractFeeModal">
          {{ $t('contractDetailFee.temporaryFee') }}
        </el-button>
        <el-button type="primary" size="small" style="margin-left:10px" @click="_openContractCreateFeeAddModal">
          {{ $t('contractDetailFee.createFee') }}
        </el-button>
        <el-button type="primary" size="small" style="margin-left:10px" @click="_toContractOwePayFee">
          {{ $t('contractDetailFee.payArrears') }}
        </el-button>
      </div>
    </div>
    <div class="margin-top">
      <el-table :data="contractDetailFeeInfo.fees" style="width: 100%" border stripe>
        <el-table-column prop="feeName" :label="$t('contractDetailFee.feeItem')" align="center"></el-table-column>
        <el-table-column prop="feeFlagName" :label="$t('contractDetailFee.feeFlag')" align="center"></el-table-column>
        <el-table-column prop="feeTypeCdName" :label="$t('contractDetailFee.feeType')" align="center"></el-table-column>
        <el-table-column prop="amountOwed" :label="$t('contractDetailFee.receivableAmount')"
          align="center"></el-table-column>
        <el-table-column prop="startTime" :label="$t('contractDetailFee.accountingTime')"
          align="center"></el-table-column>
        <el-table-column :label="$t('contractDetailFee.receivablePeriod')" align="center">
          <template slot-scope="scope">
            {{ _getContractEndTime(scope.row) }}~<br />
            {{ _getContractDeadlineTime(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('contractDetailFee.description')" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <div><span>{{ $t('contractDetailFee.previousReading') }}:</span>{{ scope.row.preDegrees }}</div>
              <div><span>{{ $t('contractDetailFee.currentReading') }}:</span>{{ scope.row.curDegrees }}</div>
              <div><span>{{ $t('contractDetailFee.unitPrice') }}:</span>{{ scope.row.mwPrice || scope.row.squarePrice }}
              </div>
              <div><span>{{ $t('contractDetailFee.surcharge') }}:</span>{{ scope.row.additionalAmount }}</div>
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <div><span>{{ $t('contractDetailFee.usage') }}:</span>{{
                _getContractAttrValue(scope.row.feeAttrs, '390006') }}</div>
              <div><span>{{ $t('contractDetailFee.unitPrice') }}:</span>{{ scope.row.squarePrice }}</div>
              <div><span>{{ $t('contractDetailFee.surcharge') }}:</span>{{ scope.row.additionalAmount }}</div>
            </div>
            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
              <div><span>{{ $t('contractDetailFee.algorithm') }}:</span>{{
                _getContractAttrValue(scope.row.feeAttrs, '390005') }}</div>
              <div><span>{{ $t('contractDetailFee.usage') }}:</span>{{
                _getContractAttrValue(scope.row.feeAttrs, '390003') }}</div>
            </div>
            <div v-else-if="scope.row.computingFormula == '4004'">
              <div>{{ $t('contractDetailFee.feeBasedOnActual') }}</div>
            </div>
            <div v-else>
              <div><span>{{ $t('contractDetailFee.unitPrice') }}:</span>{{ scope.row.squarePrice }}</div>
              <div v-if="scope.row.feeFlag == '1003006'"><span>{{ $t('contractDetailFee.surcharge') }}:</span>{{
                scope.row.additionalAmount }}</div>
              <div v-else><span>{{ $t('contractDetailFee.fixedFee') }}:</span>{{ scope.row.additionalAmount }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stateName" :label="$t('contractDetailFee.status')" align="center"></el-table-column>
        <el-table-column :label="$t('contractDetailFee.operation')" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502020082314267912')"
              @click="_payContractFee(scope.row)">
              {{ $t('contractDetailFee.payment') }}
            </el-button>
            <el-button type="text" @click="_payContractFeeHis(scope.row)">
              {{ $t('contractDetailFee.paymentHistory') }}
            </el-button>
            <el-button type="text" v-if="hasPrivilege('502020090604200029')" @click="_deleteContractFee(scope.row)">
              {{ $t('contractDetailFee.cancel') }}
            </el-button>
            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502021070488970005')"
              @click="_finishContractFee(scope.row)">
              {{ $t('contractDetailFee.end') }}
            </el-button>
            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502020090427190001')"
              @click="_editContractFee(scope.row)">
              {{ $t('contractDetailFee.change') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="margin-top">
        <el-col :span="4">
          <div>{{ $t('contractDetailFee.note1') }}</div>
          <div>{{ $t('contractDetailFee.note2') }}</div>
        </el-col>
        <el-col :span="2">
          <span>{{ $t('contractDetailFee.arrearsSubtotal') }}:</span>
          {{ contractDetailFeeInfo.totalAmount }}
        </el-col>
        <el-col :span="6" class="text-right">
          <el-pagination @current-change="handlePageChange" :current-page="pagination.currentPage"
            :page-size="pagination.pageSize" layout="total, prev, pager, next"
            :total="pagination.total"></el-pagination>
        </el-col>
      </el-row>
    </div>
    <temp-import-room-fee ref="tempImportRoomFee" @success="_query"></temp-import-room-fee>
    <contract-create-fee-add ref="contractCreateFeeAdd" @success="_query"></contract-create-fee-add>
    <delete-fee ref="deleteFee" @success="_query"></delete-fee>
    <edit-fee ref="editFee" @success="_query"></edit-fee>
    <finish-fee ref="finishFee" @success="_query"></finish-fee>
  </div>
</template>
<script>
import { listFee } from '@/api/contract/contractDetailFeeApi'
import { getCommunityId } from '@/api/community/communityApi'
import TempImportRoomFee from '@/components/fee/tempImportRoomFee'
import contractCreateFeeAdd from '@/components/fee/contractCreateFeeAdd'
import {dateFormat} from '@/utils/dateUtil'
import DeleteFee from '@/components/fee/deleteFee'
import EditFee from '@/components/fee/editFee'
import FinishFee from '@/components/fee/finishFee'
export default {
  name: 'ContractDetailFee',
  components: {
    TempImportRoomFee,
    contractCreateFeeAdd,
    DeleteFee,
    EditFee,
    FinishFee
  },
  data() {
    return {
      contractDetailFeeInfo: {
        rooms: [],
        contractId: '',
        roomNum: '',
        allOweFeeAmount: '0',
        totalAmount: 0,
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    open(data) {
      this.contractDetailFeeInfo.contractId = data.contractId
      this.contractDetailFeeInfo.contractName = data.contractName
      this._loadContractDetailFeeData(1, this.pagination.pageSize)
    },
    _query() {
      this._loadContractDetailFeeData(1, this.pagination.pageSize)
    },
    async _loadContractDetailFeeData(page, row) {
      const params = {
        page: page || 1,
        row: row || 10,
        communityId: this.communityId,
        payerObjId: this.contractDetailFeeInfo.contractId,
      }
      const res = await listFee(params)
      console.log(res)
      this.contractDetailFeeInfo.total = res.total
      this.contractDetailFeeInfo.records = res.records
      this.contractDetailFeeInfo.fees = res.fees
      this.pagination.total = res.total
      let totalAmount = 0.0
      res.fees.forEach(item => {
        totalAmount += parseFloat(item.amountOwed)
      })
      this.contractDetailFeeInfo.totalAmount = totalAmount.toFixed(2)
    },
    _openTempImportContractFeeModal() {
      this.$refs.tempImportRoomFee.open({
        roomId: this.contractDetailFeeInfo.contractId,
        objType: '7777',
        roomName: this.contractDetailFeeInfo.contractName,
        ownerName: this.contractDetailFeeInfo.ownerName
      })
    },
    _payContractFee(fee) {
      this.$router.push(`/views/fee/payFeeOrder?feeId=${fee.feeId}`)
    },
    _editContractFee(fee) {
      this.$refs.editFee.open(fee)
    },
    _payContractFeeHis(fee) {
      fee.builtUpArea = this.contractDetailFeeInfo.builtUpArea
      this.$router.push(`/views/fee/propertyFee?${this.objToGetParam(fee)}`)
    },
    _deleteContractFee(fee) {
      this.$refs.deleteFee.open({
        communityId: this.communityId,
        feeId: fee.feeId
      })
    },
    _finishContractFee(fee) {
      this.$refs.finishFee.open({
        communityId: this.communityId,
        feeId: fee.feeId
      })
    },
    _toContractOwePayFee() {
      this.$router.push(`/views/fee/owePayFeeOrder?payObjId=${this.contractDetailFeeInfo.contractId}&payObjType=7777&contractName=${this.contractDetailFeeInfo.contractName}`)
    },
    _openContractCreateFeeAddModal() {
      this.$refs.contractCreateFeeAdd.open(this.contractDetailFeeInfo, false)
    },
    _getContractAttrValue(attrs, specCd) {
      let value = ""
      attrs.forEach(item => {
        if (item.specCd == specCd) {
          value = item.value
          return
        }
      })
      return value
    },
    _getContractDeadlineTime(fee) {
      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
        return "-"
      }
      if (fee.state == '2009001') {
        return "-"
      }
      return dateFormat(fee.deadlineTime)
    },
    _getContractEndTime(fee) {
      if (fee.state == '2009001') {
        return "-"
      }
      return dateFormat(fee.endTime)
    },
    handlePageChange(currentPage) {
      this.pagination.currentPage = currentPage
      this._loadContractDetailFeeData(currentPage, this.pagination.pageSize)
    },
    objToGetParam(obj) {
      return Object.keys(obj).map(key => `${key}=${obj[key]}`).join('&')
    }
  },
  created() {
    this.communityId = getCommunityId()
  }
}
</script>
<style scoped>
.margin-top {
  margin-top: 20px;
}
.margin-top-lg {
  margin-top: 30px;
}
.padding-right-xs {
  padding-right: 5px;
}
.padding-left-xl {
  padding-left: 20px;
}
.text-right {
  text-align: right;
}
</style>