emis-frontend/src/views/emis/emisSettleBill/panel/BillDetailPanelReadOnly.vue

<template>
 <div>

  <div style="margin-bottom:20px">
  <el-descriptions  :title="$t('账单信息')"  size="mini"  :column="4">
      <el-descriptions-item label="账单名称">{{ settleBillItem.settleBillName }}</el-descriptions-item>
      <el-descriptions-item label="账单编号">{{ settleBillItem.settleBillNo }}</el-descriptions-item>
      <el-descriptions-item label="账单月份">{{ settleBillItem.billMonth }}</el-descriptions-item>
      <el-descriptions-item label="应收金额">{{ settleBillItem.recMoney }}</el-descriptions-item>
      <el-descriptions-item label="总票数">{{ settleBillItem.sendPieceSum }}</el-descriptions-item>
      <el-descriptions-item label="总件数">{{ settleBillItem.pieceNumber }}</el-descriptions-item>
      <el-descriptions-item label="结算重量">{{ settleBillItem.feeWeight }}</el-descriptions-item>
      <el-descriptions-item label="月结编号" v-if="settleBillItem.settleType==2">{{ settleBillItem.custNo }}</el-descriptions-item>
      <el-descriptions-item label="月结客户" v-if="settleBillItem.settleType==2">{{ settleBillItem.custName }}</el-descriptions-item>
      <el-descriptions-item label="账单类型" >
        <span v-if="settleBillItem.settleType==1">现金账单</span>
        <span v-if="settleBillItem.settleType==2">月结账单</span>
      </el-descriptions-item>
      <el-descriptions-item label="销售联系人">{{ settleBillItem.salesmen }}</el-descriptions-item>
      <el-descriptions-item label="回款联系人">{{ settleBillItem.payee }}</el-descriptions-item>

    </el-descriptions>
  </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;">{{ settleBillItem.recMoney }}</span>,已收:<span style="color:blue;font-weight:500;">{{ settleBillItem.recedMoney }}</span></div>
                  <div>
                    <PayRecordList :settleBillNo="settleBillNo"> </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;">{{ settleBillItem.recMoney }}</span>,已开票:<span style="color:blue;font-weight:500;"></span></div>
                  <div>
                    <InvoiceRecordList :settleBillNo="settleBillNo"> </InvoiceRecordList>
                  </div>
              </div>


 </div>
</template>

<script>
import { getInfoBySettleBillNo } from "@/api/emis/emisSettleBill";
import PayRecordList from '@/views/emis/emisSettlePayRecord/panel/PayRecordList.vue';
import InvoiceRecordList from '@/views/emis/emisSettleInvoiceRecord/panel/InvoiceRecordList.vue';

export default {
  name: "BillDetailPanel",
  props:{
    settleBillNo:{
        type:String
    }
  },
  components: {
    PayRecordList,
    InvoiceRecordList
 },
  dicts: [
  ],
  data() {
    return {
      loading: false,
      settleBillItem:null,
    };
  },
  watch: {
      "settleBillNo": {
        handler (newValue, oldValue) {
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },
  methods: {
    initData(){
      this.loading = true;
      getInfoBySettleBillNo(this.settleBillNo).then(response => {
        this.settleBillItem = response.data;
       this.loading = false;
      });
    },
  }
};
</script>

<style lang="scss" scoped>

  .el-descriptions-item__content{
    font-weight:bold;
    color: #000;
  }

  .el-form-item__label {
      color: #000;
  }

  .el-input-group__append {
      padding: 0 4px;
  }

  .el-row{
        display:flex;
        flex-wrap: wrap;
        // padding-right: 10px;
  }

  .el-form-item__label {
    font-size: 12px!important;
  }


  .platform-auto-complete {
    .el-autocomplete-suggestion__wrap {
      padding: 5px 0;
      ul li {
        pointer-events: none; // 阻止可点击事件
        .default {
          text-align: center;
          color: #999;
        }
        &:hover {
          background-color: #fff;
        }
      }
    }
  }

  .el-collapse {
      border-top: none!important;
      border-bottom: none!important;
  }

  .el-table .el-table__cell:first-child .cell {
    padding: 0px;
  }

  .el-table .cell {
      padding: 0px;
  }

  .cargoList{
    .el-input__inner {
        height: 28px;
        line-height: 28px;
        border: none;
        background: #ffffcd;
        font-size: 10px;
        padding: 0px;
        text-align: center;
    }
  }

  .el-descriptions__title{
    font-size: 12px;
  }

  .el-collapse-item__content {
      padding-bottom: 0px;
  }
  .el-collapse-item__header{
    pointer-events: none;
  }

  .el-collapse-item__arrow {
    pointer-events: auto;
  }

</style>