开发更新

jiangping

2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea

 admin/src/views/finance/components/bullDetail.vue

@@ -1,70 +1,78 @@
<template>
  <GlobalWindow :title="'账单详情'" :visible.sync="visible" :confirm-working="isWorking" @close="close"
  <GlobalWindow :title="'账单详情'" :withFooter="false" :visible.sync="visible" :confirm-working="isWorking" @close="close"
    @confirm="confirm">
    <div class="home_title">
      <div class="left">
        <span class="mr10">付款方：{{info.customerName}}</span>
        <el-tag type="success" v-if="info.status === 0">开启</el-tag>
        <el-tag type="success" v-if="info.status === 1">关闭</el-tag>
      </div>
      <el-button plain type="primary" @click="$refs.flowingWater.open(info.billType === 0 ? '创建收款账单' : '创建付款账单', {
        billType: info.billType,
        billId: info.id,
        costType: info.costType,
        costTypeName: returnText(info.costType),
        contractCode: info.contractCode,
        contractId: info.contractId,
        startDate: info.startDate,
        endDate: info.endDate,
        multifileList: [],
        date: `${info.startDate} ~ ${info.endDate}`,
        companyId: info.companyId,
        companyName: info.companyName,
        actReceivableFee: info.actReceivableFee
      })">新建收支流水</el-button>
    </div>
    <div class="line"></div>
    <div class="main">
      <div class="list" style="background: rgba(0,0,0,0); padding: 0; margin-bottom: 0;">
        <div class="item" style="flex: 1;">
          <div class="la">结清状态</div>
          <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 0">待收款</div>
          <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 1">已结清</div>
          <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 2">部分结清</div>
          <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 3">待付款</div>
          <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 4">待退款</div>
          <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 5">已关闭</div>
    <div style="width: 100%; position: sticky; top: 0; left: 0; z-index: 999; background: #ffffff;">
      <div class="home_title">
        <div class="left">
          <span class="mr10">{{info.billType === 0 ? '收款方' : '付款方'}}：{{info.customerName}}</span>
          <el-tag type="success" v-if="info.status === 0">开启</el-tag>
          <el-tag type="info" v-if="info.status === 1">关闭</el-tag>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">应收金额（元）</div>
          <div class="val" style="margin-top: 10px;">{{info.receivableFee}}</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">实收金额（元）</div>
          <div class="val" style="margin-top: 10px;">{{info.actReceivableFee}}</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">需付金额（元）</div>
          <div class="val" style="margin-top: 10px;">{{info.needReceivableFee}}</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">应收日期</div>
          <div class="val" style="margin-top: 10px;">{{info.planPayDate}}</div>
        <div style="display: flex; align-items: center;">
          <el-button @click="$refs.call.open('发送催缴通知', [info.id])" v-if="info.isOverdue === 1 && info.billType === 0">发送缴费通知</el-button>
          <el-button plain type="primary" v-if="![1].includes(info.payStatus)" @click="$refs.flowingWater.open('创建收支流水', {
            billType: returnBillType(),
            billId: info.id,
            costType: info.costType,
            receivableFee: Math.abs(info.needReceivableFee),
            costTypeName: returnText(info.costType),
            contractCode: info.contractCode,
            contractId: info.contractId,
            startDate: info.startDate,
            endDate: info.endDate,
            multifileList: [],
            date: `${info.startDate} ~ ${info.endDate}`,
            companyId: info.companyId,
            companyName: info.companyName,
            actReceivableFee: Math.abs(info.needReceivableFee),
            needReceivableFeeCopy: info.needReceivableFee
          })">新建收支流水</el-button>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">基础信息</div>
<!--      <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">账单明细</div>-->
      <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div>
      <div class="line"></div>
      <div class="main">
        <div class="list" style="background: rgba(0,0,0,0); padding: 0; margin-bottom: 0;">
          <div class="item" style="flex: 1;">
            <div class="la">结清状态</div>
            <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 0">待收款</div>
            <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 1">已结清</div>
            <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 2">部分结清</div>
            <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 3">待付款</div>
            <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 4">待退款</div>
            <div class="val" style="margin-top: 10px;" v-if="info.payStatus === 5">已关闭</div>
          </div>
          <div class="item" style="flex: 1;">
            <div class="la">应{{info.billType === 0 ? '收' : '付'}}金额（元）</div>
            <div class="val" style="margin-top: 10px;">{{info.receivableFee}}</div>
          </div>
          <div class="item" style="flex: 1;">
            <div class="la">实{{info.billType === 0 ? '收' : '付'}}金额（元）</div>
            <div class="val" style="margin-top: 10px;">{{info.actReceivableFee}}</div>
          </div>
          <div class="item" style="flex: 1;">
            <template v-if="info.billType === 1">
              <div class="la">需付金额（元）</div>
            </template>
            <div class="la" v-else>需{{info.needReceivableFee > 0 ? '收' : '付'}}金额（元）</div>
            <div class="val" style="margin-top: 10px;">{{Math.abs(info.needReceivableFee)}}</div>
          </div>
          <div class="item" style="flex: 1;">
            <div class="la">应{{info.billType === 0 ? '收' : '付'}}日期</div>
            <div class="val" style="margin-top: 10px;">{{info.planPayDate}}</div>
          </div>
        </div>
      </div>
      <div class="tabs">
        <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">基础信息</div>
        <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div>
      </div>
    </div>
    <div class="main">
      <div class="title">基础信息</div>
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <div class="item">
          <div class="la">账单类型</div>
          <div class="val" v-if="info.billType === 0">收款</div>
          <div class="val" v-if="info.billType === 1">付款</div>
          <div class="la">费用类型</div>
          <div class="val">{{returnText(info.costType)}}</div>
        </div>
        <div class="item">
          <div class="la">计费周期</div>
@@ -80,7 +88,7 @@
        </div>
        <div class="item">
          <div class="la">合同编号</div>
          <div class="val">{{info.contractCode}}</div>
          <div class="val" style="color: #2080f7; cursor: pointer;" @click="handleDetail(info.contractId)">{{info.contractCode}}</div>
        </div>
        <div class="item">
          <div class="la">创建时间</div>
@@ -92,7 +100,7 @@
        </div>
        <div class="item">
          <div class="la">经办人</div>
          <div class="val">张三</div>
          <div class="val">{{info.realname}}</div>
        </div>
        <div class="item">
          <div class="la">所属公司</div>
@@ -126,47 +134,13 @@
            </template>
          </el-table-column>
          <el-table-column
            prop="area"
            label="面积">
            <template slot-scope="{row}">
              {{row.area}}㎡
            </template>
          </el-table-column>
        </el-table>
      </div>
<!--      <div class="title">账单明细</div>-->
<!--      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">-->
<!--        <el-table-->
<!--          :data="tableData"-->
<!--          border-->
<!--          style="width: 100%">-->
<!--          <el-table-column-->
<!--            prop="date"-->
<!--            label="费用类型">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="name"-->
<!--            label="应收/付金额">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="实收金额">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="需收金额">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="计费周期">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="应收/付日期">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="备注">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->
      <div class="title">收支流水</div>
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <el-table
@@ -197,7 +171,7 @@
            </template>
          </el-table-column>
          <el-table-column
            prop="payDateEnd"
            prop="actPayDate"
            label="入账日期">
          </el-table-column>
          <el-table-column
@@ -216,7 +190,11 @@
      </div>
    </div>
    <!--  创建流水  -->
    <FlowingWater ref="flowingWater" @success="getDetails" />
    <FlowingWater ref="flowingWater" @success="getDetails" @refresh="Refresh" />
    <!--  合同详情  -->
    <ContractDetail ref="ContractDetailRef" />
    <!--  发送缴费通知  -->
    <Call ref="call" />
  </GlobalWindow>
</template>

@@ -224,11 +202,15 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import FlowingWater from './flowingWater'
import Call from './call'
import ContractDetail from '../../contract/components/contractDetail'
import { getYwContractBillById } from '@/api/contract'
export default {
  components: {
    GlobalWindow,
    FlowingWater
    FlowingWater,
    ContractDetail,
    Call
  },
  extends: BaseOpera,
  data() {
@@ -246,6 +228,9 @@
      this.id = id
      this.getDetails()
    },
    handleDetail (id) {
      this.$refs.ContractDetailRef.open('合同详情', id)
    },
    getDetails () {
      getYwContractBillById(this.id)
        .then(res => {
@@ -253,6 +238,18 @@
          this.visible = true
        })
    },
    returnBillType () {
      if (this.info.payStatus === 0) {
        return 0
      } else if (this.info.payStatus === 2) {
        return this.info.billType
      } else if ([3,4].includes(this.info.payStatus)) {
        return 1
      }
    },
    Refresh () {
      this.$emit('success')
    },
    tabsClick(val) {
      this.activeTabs = val
    },