emis-frontend/src/views/emis/emisSettleBill/ChargeBillMoneyList.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" class="center-tabs" @tab-click="handleTabsClick">
      <el-tab-pane label="现金账单列表" name="billList" >
        <ChargeBillMoneyPanel @onSelect="onSelectBill"> </ChargeBillMoneyPanel>
      </el-tab-pane>
      <el-tab-pane label="收款/开票" name="dtlList" >
        <!-- border-right: 1px solid #f3f3f3; -->
        <el-row :gutter="0" style="display: flex;flex-wrap: wrap; overflow: hidden;">
          <el-col :span="7" style="padding-right: 5px;">
              <el-descriptions title="" border :column="1">
                <el-descriptions-item label="账单名称">{{ form.settleBillName }}</el-descriptions-item>
                <el-descriptions-item label="账单编号">{{ form.settleBillNo }}</el-descriptions-item>
                <el-descriptions-item label="账单月份">{{ form.billMonth }}</el-descriptions-item>
                <el-descriptions-item label="应收金额">{{ form.recMoney }}</el-descriptions-item>
                <el-descriptions-item label="总票数">{{ form.sendPieceSum }}</el-descriptions-item>
                <el-descriptions-item label="总件数">{{ form.pieceNumber }}</el-descriptions-item>
                <el-descriptions-item label="结算重量">{{ form.feeWeight }}</el-descriptions-item>
                <el-descriptions-item label="月结编号" v-if="form.settleType==2">{{ form.custNo }}</el-descriptions-item>
                <el-descriptions-item label="月结客户" v-if="form.settleType==2">{{ form.custName }}</el-descriptions-item>
                <el-descriptions-item label="账单类型" >
                  <span v-if="form.settleType==1">现金账单</span>
                  <span v-if="form.settleType==2">月结账单</span>
                </el-descriptions-item>

              </el-descriptions>

          </el-col>
          <el-col :span="17" style="padding: 10px;font-size: 14px;">
             <div style="margin-bottom:20px">
                  <div style="font-weight:500;margin-bottom:20px">收款状态:<span>未收款</span></div>
                  <div>总应收:<span style="color:red;font-weight:500;">{{ form.recMoney }}</span>,已收:<span style="color:blue;font-weight:500;">{{ form.recdMoney }}</span></div>
                  <div>
                    <PayRecordList :queryObj="queryObj"> </PayRecordList>
                  </div>
              </div>
              <div style="margin-bottom:20px">
                  <div style="font-weight:500;margin-bottom:20px">开票状态:<span>未开票</span></div>
                  <div>最高可开票金额:<span style="color:red;font-weight:500;">{{ form.recMoney }}</span>,已开票:<span style="color:blue;font-weight:500;">{{ form.recdMoney }}</span></div>
                  <div>
                    <InvoiceRecordList :queryObj="queryObj"> </InvoiceRecordList>
                  </div>
              </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import ChargeBillMoneyPanel from '@/views/emis/emisSettleBill/panel/ChargeBillMoneyPanel.vue';
import PayRecordList from '@/views/emis/emisSettlePayRecord/panel/PayRecordList.vue';
import InvoiceRecordList from '@/views/emis/emisSettleInvoiceRecord/panel/InvoiceRecordList.vue';

export default {
  name: "SettleMainBillMonthList",
  components: {
    ChargeBillMoneyPanel,
    PayRecordList,
    InvoiceRecordList
 },
  dicts: [
  ],
  data() {
    return {
      activeTab:'billList',
      queryObj:null,
      form: {},
    };
  },
  created() {
  },
  methods: {
    handleTabsClick(){

    },
    onSelectBill(item) {
      this.queryObj=item;
      this.form=item;
      this.activeTab="dtlList";
   },

  }
};
</script>

<style>
.el-descriptions-item__label {
  width: 80px;
}

.el-descriptions-item__cell {
    font-weight: 500!important;
    color: black;
}
</style>