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

<template>
 <div style="font-size: 12px;" v-if="settleBillItem">

  <div style="margin-bottom:20px" >
    <el-descriptions  :title="$t('销账申请信息')"  size="mini"  :column="4">
        <el-descriptions-item label="收款方式">
          <dict-tag :options="dict.type.emis_settlebill_pay_type" :value="settleBillItem.payType"/>
        </el-descriptions-item>
        <el-descriptions-item label="销账金额">￥{{ settleBillItem.writeoffAmount }}</el-descriptions-item>
        <el-descriptions-item label="收款人" :span="2" > {{ settleBillItem.recipient }}
        </el-descriptions-item>
       
        <el-descriptions-item label="交易时间">{{ settleBillItem.tradeDate }}</el-descriptions-item>
        <el-descriptions-item label="申请说明">{{ settleBillItem.applyMemo }}</el-descriptions-item>
        <el-descriptions-item label="图片" :span="2">
          <CancelAccountPicList :dataList="settleBillItem.imageList" />
        </el-descriptions-item>
      </el-descriptions>
  </div>

 <div>
  <CancelAccountBillList :settleBillNo="settleBillNo" :emisSettlePayRecordList="settleBillItem.detailList" />
 </div>


 </div>
</template>

<script>
import { getWriteoffApply } from "@/api/emis/emisSettleCancelAccount";
import PayRecordList from '@/views/emis/emisSettlePayRecord/panel/PayRecordList.vue';
import PayRecordSubBillRelList from '@/views/emis/emisSettlePayRecord/panel/PayRecordSubBillRelList.vue';


import InvoiceRecordList from '@/views/emis/emisSettleInvoiceRecord/panel/InvoiceRecordList.vue';
import InvoiceSubBillRelList from '@/views/emis/emisSettleInvoiceRel/InvoiceSubBillRelList.vue';

import SubBillListReadOnly from '@/views/emis/emisSettleSubBill/SubBillListReadOnly.vue';
import InvoiceChRecordListReadOnly from '@/views/emis/emisSettleInvoiceChRecord/InvoiceChRecordListReadOnly.vue';
import CancelAccountPicList from '@/views/emis/emisSettleBill/panel/CancelAccountPicList.vue';
import CancelAccountBillList from "@/views/emis/emisSettleBill/panel/CancelAccountBillList.vue";
export default {
  name: "BillDetailPanel",
  props:{
    settleBillNo:{
        type:String
    },
    applyId:{
        type:Number
    },
  },
  components: {
    PayRecordList,
    PayRecordSubBillRelList,
    InvoiceRecordList,
    InvoiceSubBillRelList,

    SubBillListReadOnly,
    InvoiceChRecordListReadOnly,
    CancelAccountPicList,
    CancelAccountBillList,
 },
  dicts: [ 'emis_settlebill_pay_type'],
  data() {
    return {
      loading: false,
      settleBillItem:null,
    };
  },
  watch: {
      "settleBillNo": {
        handler (newValue, oldValue) {
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },
  methods: {
    initData(){
      this.loading = true;
      getWriteoffApply(this.applyId).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>