jiangping
2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea
admin/src/views/contract/components/pendingBills.vue
@@ -10,19 +10,19 @@
            <div class="zd_list">
                <div class="zd_list_row">
                    <span>待收款账单数</span>
                    <span>2</span>
                    <span>{{info.inAmount || 0}}</span>
                </div>
                <div class="zd_list_row">
                    <span>待收款金额</span>
                    <span>¥247.00</span>
                    <span>¥{{info.inFee || 0}}</span>
                </div>
                <div class="zd_list_row">
                    <span>待付款账单数</span>
                    <span>3</span>
                    <span>{{info.payAmount || 0}}</span>
                </div>
                <div class="zd_list_row">
                    <span>待付款金额</span>
                    <span>¥247.00</span>
                    <span>¥{{info.payFee || 0}}</span>
                </div>
            </div>
            <div class="zd_content">
@@ -30,59 +30,93 @@
                    <span>账单</span>
                </div>
                <el-table
                    :data="tableData"
                    :data="info.ywContractBillList"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="账单编号">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="handleDetail(row.id)">{{row.code}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="费用类型">
                        <template slot-scope="{row}">
                            <span v-if="row.costType === 0">租赁费</span>
                            <span v-if="row.costType === 1">物业费</span>
                            <span v-if="row.costType === 2">租赁押金</span>
                            <span v-if="row.costType === 3">物业押金</span>
                            <span v-if="row.costType === 4">水电费</span>
                            <span v-if="row.costType === 5">杂项费</span>
                            <span v-if="row.costType === 6">其他</span>
                            <span v-if="row.costType === 7">保证金</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="计费周期">
                        <template slot-scope="{row}">
                            {{row.startDate}}~{{row.endDate}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        prop="receivableFee"
                        label="应收付金额/原始应收付">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        prop="actReceivableFee"
                        label="实收/付金额">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="需收/付金额">
                        <template slot-scope="{row}">
                            <div style="display: flex; align-items: center;">
                                <el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag>
                                <el-tag type="warning" v-if="row.needReceivableFee < 0">付</el-tag>
                                <span>{{Math.abs(row.needReceivableFee)}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        prop="planPayDate"
                        label="应收/付日期">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!--    账单详情    -->
        <Detail ref="DetailRef" />
    </GlobalWindow>
</template>
<script>
  import GlobalWindow from '@/components/common/GlobalWindow'
  import BaseOpera from '@/components/base/BaseOpera'
  import { getWaitDealList } from '@/api/ywContractBill'
  import Detail from '../../finance/components/bullDetail.vue'
  export default {
    name: 'pendingBills',
    components: {
      GlobalWindow
      GlobalWindow,
      Detail
    },
    extends: BaseOpera,
    data () {
      return {
        tableData: []
        info: []
      }
    },
    methods: {
      open (title, contractId) {
        this.title = title
        getWaitDealList(contractId)
            .then(res => {
              this.info = res
              this.visible = true
            })
      },
      handleDetail (id) {
        this.$refs.DetailRef.open('账单详情', id)
      }
    }
  }
</script>