emis-frontend/src/views/emis/emisSettleInvoiceRecord/panel/InvoiceDetailPanel.vue

<template>
 <div>
    <!-- border-right: 1px solid #f3f3f3; -->
    <el-row v-if="emisSettleInvoiceRecord"
    :gutter="0" style="display: flex;flex-wrap: wrap; overflow: hidden;">
          <el-col :span="6" style="padding-right: 5px;">
              <el-descriptions title="" border :column="4">
                    <el-descriptions-item label="申请序号">{{ emisSettleInvoiceRecord.applySeqNo }}</el-descriptions-item>
                    <el-descriptions-item label="申请时间">{{ emisSettleInvoiceRecord.applyDate }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="审核人">{{ emisSettleInvoiceRecord.applyManCode }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="审核站点">{{ emisSettleInvoiceRecord.applySiteCode }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="客户编码">{{ emisSettleInvoiceRecord.customerCode }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="客户名称">{{ emisSettleInvoiceRecord.customerName }}</el-descriptions-item> -->
                    <el-descriptions-item label="账单编号">{{ emisSettleInvoiceRecord.settleBillNo }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="账单名称">{{ emisSettleInvoiceRecord.settleBillName }}</el-descriptions-item> -->
                    <el-descriptions-item label="申请开票金额">{{ emisSettleInvoiceRecord.applyMoney }}</el-descriptions-item>
                    <el-descriptions-item label="开票类型">{{ emisSettleInvoiceRecord.invoiceType }}</el-descriptions-item>
                    <el-descriptions-item label="开票抬头">{{ emisSettleInvoiceRecord.companyName }}</el-descriptions-item>
                    <el-descriptions-item label="开票税号">{{ emisSettleInvoiceRecord.companyTaxNo }}</el-descriptions-item>
                    <el-descriptions-item label="开票电话">{{ emisSettleInvoiceRecord.companyTel }}</el-descriptions-item>
                    <el-descriptions-item label="开票地址">{{ emisSettleInvoiceRecord.companyAddress }}</el-descriptions-item>
                    <el-descriptions-item label="开户行">{{ emisSettleInvoiceRecord.bankName }}</el-descriptions-item>
                    <el-descriptions-item label="开户账号">{{ emisSettleInvoiceRecord.bankAccNo }}</el-descriptions-item>
                    <el-descriptions-item label="联系人">{{ emisSettleInvoiceRecord.contact }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ emisSettleInvoiceRecord.phone }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="税类型">{{ emisSettleInvoiceRecord.realTaxType }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="开票上限">{{ emisSettleInvoiceRecord.openMoneyMax }}</el-descriptions-item> -->
                    <el-descriptions-item label="开票金额">{{ emisSettleInvoiceRecord.openMoney }}</el-descriptions-item>
                    <el-descriptions-item label="发票号">{{ emisSettleInvoiceRecord.invoiceNo }}</el-descriptions-item>
                    <el-descriptions-item label="开票状态">{{ emisSettleInvoiceRecord.invoiceStatus }}</el-descriptions-item>
                    <el-descriptions-item label="开票异常描述">{{ emisSettleInvoiceRecord.invoiceStatusDesc }}</el-descriptions-item>
                    <el-descriptions-item label="纸质发票邮寄地址">{{ emisSettleInvoiceRecord.recieveAddress }}</el-descriptions-item>
                    <el-descriptions-item label="邮箱">{{ emisSettleInvoiceRecord.email }}</el-descriptions-item>
                    <el-descriptions-item label="发票下载路径">{{ emisSettleInvoiceRecord.filePath }}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{ emisSettleInvoiceRecord.remark }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="审核状态">{{ emisSettleInvoiceRecord.blAudit }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="审核日期">{{ emisSettleInvoiceRecord.auditDate }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="审核人">{{ emisSettleInvoiceRecord.auditManCode }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="审核站点">{{ emisSettleInvoiceRecord.auditSiteCode }}</el-descriptions-item> -->
                    <el-descriptions-item label="操作人">{{ emisSettleInvoiceRecord.opManCode }}</el-descriptions-item>
                    <el-descriptions-item label="操作时间">{{ emisSettleInvoiceRecord.opDate }}</el-descriptions-item>
                    <el-descriptions-item label="操作站点">{{ emisSettleInvoiceRecord.opSiteCode }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="开票渠道编号">{{ emisSettleInvoiceRecord.openChId }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="开票渠道状态">{{ emisSettleInvoiceRecord.openChStatus }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="开票渠道描述">{{ emisSettleInvoiceRecord.openChStatusDesc }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="使用的开票企业代码">{{ emisSettleInvoiceRecord.openComCode }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="删除标志（0代表存在">{{ emisSettleInvoiceRecord.delFlag }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="创建者">{{ emisSettleInvoiceRecord.createBy }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="创建时间">{{ emisSettleInvoiceRecord.createTime }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="更新者">{{ emisSettleInvoiceRecord.updateBy }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="更新时间">{{ emisSettleInvoiceRecord.updateTime }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="创建站点">{{ emisSettleInvoiceRecord.createSite }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="更新站点">{{ emisSettleInvoiceRecord.updateSite }}</el-descriptions-item> -->

              </el-descriptions>

          </el-col>
          <el-col :span="18" 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;">{{ dataItem.recMoney }}</span>,已收:<span style="color:blue;font-weight:500;">{{ dataItem.recdMoney }}</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;">{{ dataItem.recMoney }}</span>,已开票:<span style="color:blue;font-weight:500;">{{ dataItem.recdMoney }}</span></div>
                  <div>
                    <InvoiceRecordList :settleBillNo="settleBillNo"> </InvoiceRecordList>
                  </div>
              </div> -->
          </el-col>
        </el-row>
 </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:{
    id:{
        type:Number
    }
  },
  components: {
    PayRecordList,
    InvoiceRecordList
 },
  dicts: [
  ],
  data() {
    return {
      loading: false,
      emisSettleInvoiceRecord:null,
    };
  },
  watch: {
      "settleBillNo": {
        handler (newValue, oldValue) {
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },
  methods: {
    initData(){
      this.loading = true;
      if(this.id !=null) {
          this.loading = true;
          getEmisSettleInvoiceRecord(this.id).then(response => {
            this.emisSettleInvoiceRecord = response.data;
            this.loading = false;
          });
      }

    },
  }
};
</script>

<style lang="scss" scoped>

</style>