提交

MrShi

2024-11-28 7470ad6bfa2f7d7be9c7d1e2d9c991094a3ad367

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

@@ -3,39 +3,59 @@
    @confirm="confirm">
    <div class="home_title">
      <div class="left">
        <span class="mr10">付款方：xxx</span>
        <el-tag type="success">status</el-tag>
        <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('创建收支流水')">新建收支流水</el-button>
      <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;">已结清</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">应收金额（元）</div>
          <div class="val" style="margin-top: 10px;">1,000.00</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;">1,000.00</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;">1,000.00</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;">2024-11-16</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 == 1 }" @click="tabsClick(1)">账单明细</div>
<!--      <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">账单明细</div>-->
      <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div>
    </div>
    <div class="main">
@@ -43,31 +63,32 @@
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <div class="item">
          <div class="la">账单类型</div>
          <div class="val">租金</div>
          <div class="val" v-if="info.billType === 0">收款</div>
          <div class="val" v-if="info.billType === 1">付款</div>
        </div>
        <div class="item">
          <div class="la">计费周期</div>
          <div class="val">2024-11-17 ~ 2025-11-17</div>
          <div class="val">{{info.startDate}} ~ {{info.endDate}}</div>
        </div>
        <div class="item">
          <div class="la">账单金额(元)</div>
          <div class="val">10000.00</div>
          <div class="val">{{info.totleFee}}</div>
        </div>
        <div class="item">
          <div class="la">账单编号</div>
          <div class="val">ZD20241117-0002</div>
          <div class="val">{{info.code}}</div>
        </div>
        <div class="item">
          <div class="la">合同编号</div>
          <div class="val">202411-0017</div>
          <div class="val">{{info.contractCode}}</div>
        </div>
        <div class="item">
          <div class="la">创建时间</div>
          <div class="val">2024-11-16 15:17:01</div>
          <div class="val">{{info.createDate}}</div>
        </div>
        <div class="item">
          <div class="la">付款方</div>
          <div class="val">XX公司</div>
          <div class="val">{{info.customerName}}</div>
        </div>
        <div class="item">
          <div class="la">经办人</div>
@@ -75,11 +96,11 @@
        </div>
        <div class="item">
          <div class="la">所属公司</div>
          <div class="val">XXX有限公司</div>
          <div class="val">{{info.companyName}}</div>
        </div>
        <div class="item">
          <div class="la">账单备注</div>
          <div class="val">这是备注内容</div>
          <div class="val">{{info.remark}}</div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
@@ -87,95 +108,108 @@
      <div class="title">房源信息</div>
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <el-table
          :data="tableData"
          :data="info.ywContractRoomList"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            prop="projectName"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="name"
            prop="floorName"
            label="楼宇名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="楼层/房号">
            <template slot-scope="{row}">
              {{row.buildingName}}/{{row.roomName}}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            prop="area"
            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
          :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-->
<!--          :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
          :data="tableData"
          :data="info.ywContractRevenueList"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="流水类型">
            <template slot-scope="{row}">
              <span v-if="row.revenueType === 0">收入</span>
              <span v-if="row.revenueType === 1">支出</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            prop="customerName"
            label="对方单位名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="费用类型">
            <template slot-scope="{row}">
              <span v-if="row.payType === 0">现金</span>
              <span v-if="row.payType === 1">网银转账</span>
              <span v-if="row.payType === 2">POS机</span>
              <span v-if="row.payType === 3">支付宝</span>
              <span v-if="row.payType === 4">微信</span>
              <span v-if="row.payType === 5">转账支票</span>
              <span v-if="row.payType === 6">其他</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            prop="payDateEnd"
            label="入账日期">
          </el-table-column>
          <el-table-column
            prop="address"
            prop="actReceivableFee"
            label="发生额">
          </el-table-column>
          <el-table-column
            prop="address"
            prop="createDate"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="address"
            prop="remark"
            label="备注">
          </el-table-column>
        </el-table>
@@ -190,6 +224,7 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import FlowingWater from './flowingWater'
import { getYwContractBillById } from '@/api/contract'
export default {
  components: {
    GlobalWindow,
@@ -206,11 +241,39 @@
    }
  },
  methods: {
    open (title, id) {
      this.title = title
      this.id = id
      this.getDetails()
    },
    getDetails () {
      getYwContractBillById(this.id)
        .then(res => {
          this.info = res
          this.visible = true
        })
    },
    tabsClick(val) {
      this.activeTabs = val
    },
    getDetail() {

    returnText (e) {
      if (e === 0) {
        return '租赁费'
      } else if (e === 1) {
        return '物业费'
      } else if (e === 2) {
        return '租赁押金'
      } else if (e === 3) {
        return '物业押金'
      } else if (e === 4) {
        return '水电费'
      } else if (e === 5) {
        return '杂项费'
      } else if (e === 6) {
        return '其他'
      } else if (e === 7) {
        return '保证金'
      }
    }
  }
}