emis-frontend/src/views/emis/emisSettleInvoiceRecord/OpenBillForm.vue

<template>
  <div >
    <div style="margin-bottom: 20px;">
      <el-descriptions title="开票申请信息" size="mini" border :column="4" v-if="emisSettleInvoiceRecord">
            <!-- <el-descriptions-item label="申请序号">{{ emisSettleInvoiceRecord.applySeqNo }}</el-descriptions-item> -->
            <el-descriptions-item label="账单名称">{{ emisSettleInvoiceRecord.settleBillName }}</el-descriptions-item>
            <el-descriptions-item label="申请时间">{{ emisSettleInvoiceRecord.applyDate }}</el-descriptions-item>
            <el-descriptions-item label="申请人" :span="2">{{ emisSettleInvoiceRecord.createByName }}</el-descriptions-item>
            <!-- <el-descriptions-item label="账单编号">{{ emisSettleInvoiceRecord.settleBillNo }}</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.companyAddress }} {{ emisSettleInvoiceRecord.companyTel }}</el-descriptions-item>
            <el-descriptions-item label="开户银行">{{ emisSettleInvoiceRecord.bankName }} {{ emisSettleInvoiceRecord.bankAccNo }}</el-descriptions-item>
            <el-descriptions-item label="开票类型" :span="1">
              <span v-if="emisSettleInvoiceRecord.invoiceType==1"> 增值税电子普通发票</span>
              <span v-if="emisSettleInvoiceRecord.invoiceType==2"> 增值税普通发票(纸质发票)</span>
              <span v-if="emisSettleInvoiceRecord.invoiceType==3"> 增值税专用发票(纸质发票)</span>
              <span v-if="emisSettleInvoiceRecord.invoiceType==9"> 其它手工开票</span>
            </el-descriptions-item>
            <el-descriptions-item label="开票金额" :span="1">￥{{ emisSettleInvoiceRecord.applyMoney }}</el-descriptions-item>
            <el-descriptions-item label="开票备注" :span="3">{{ emisSettleInvoiceRecord.remark }}</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="开票状态" :span="1">
              <span v-if="emisSettleInvoiceRecord.invoiceStatus==0"> 未开票</span>
              <span v-if="emisSettleInvoiceRecord.invoiceStatus==1"> 开票中</span>
              <span v-if="emisSettleInvoiceRecord.invoiceStatus==2"> 已开票</span>
              <span v-if="emisSettleInvoiceRecord.invoiceStatus==3"> 开票失败</span>
            </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.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>

    </div>

    <div>
        <div>开票单号</div>
        <div v-if="emisSettleInvoiceRecord!=null">
          <ApplyInvoiceSubBillRelList :applySeqNo="emisSettleInvoiceRecord.applySeqNo" > </ApplyInvoiceSubBillRelList>
        </div>
    </div>

    <div>
        <div>发票列表</div>
        <div v-if="emisSettleInvoiceRecord!=null">
          <InvoiceChRecordList :applyId="emisSettleInvoiceRecord.id" :applySeqNo="emisSettleInvoiceRecord.applySeqNo"></InvoiceChRecordList>
        </div>
    </div>


  </div>
</template>

<script>
import { listEmisSettleInvoiceRel, getEmisSettleInvoiceRel, delEmisSettleInvoiceRel, addEmisSettleInvoiceRel, updateEmisSettleInvoiceRel } from "@/api/emis/emisSettleInvoiceRel";
import { listEmisSettleInvoiceRecord, getEmisSettleInvoiceRecord, delEmisSettleInvoiceRecord, addEmisSettleInvoiceRecord, updateEmisSettleInvoiceRecord } from "@/api/emis/emisSettleInvoiceRecord";
import CustomerInvoiceInfoPicker from '@/views/emis/EmisBaseTools/CustomerInvoiceInfoPicker.vue';
import { parseTime,genJsSeqNo } from "@/utils/custom";
import InvoiceChRecordList from '@/views/emis/emisSettleInvoiceChRecord/InvoiceChRecordList.vue';
import InvoiceSubBillRelList from '@/views/emis/emisSettleInvoiceChRecord/InvoiceSubBillRelList.vue';
import ApplyInvoiceSubBillRelList from '@/views/emis/emisSettleInvoiceRel/ApplyInvoiceSubBillRelList.vue';

export default {
  name: "emisSettleInvoiceRecordForm",
  props:{
    id:{
        type:[Number,Array]
    },
    isManual:{
        type:[Boolean]
    }
  },

  components: { CustomerInvoiceInfoPicker,InvoiceChRecordList,InvoiceSubBillRelList,ApplyInvoiceSubBillRelList },
  dicts: [
  ],
  data() {
    return {
      emisSettleInvoiceRecord:null,
      emisSettleInvoiceRecordOptions: [],
      emisSettleInvoiceRelList:[],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "id不能为空", trigger: "blur" }
        ],
        delFlag: [
          { required: true, message: "删除标志（0代表存在不能为空", trigger: "blur" }
        ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      },
      "isManual": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      },
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {
        if(this.id !=null) {
          this.loading = true;
          getEmisSettleInvoiceRecord(this.id).then(response => {
            this.emisSettleInvoiceRecord = response.data;
            this.getInvoiceRelList(this.emisSettleInvoiceRecord.applySeqNo);
            this.loading = false;
          });
        }
    },
    getInvoiceRelList(applySeqNo) {
      let qParams={
        pageNum:1,
        pageSize:2000,
        applySeqNo:applySeqNo
      }
      listEmisSettleInvoiceRel(qParams).then(response => {
        this.emisSettleInvoiceRelList = response.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },


  }
};
</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions-item__content {
    max-width: 205px;  // 如果下方最大宽度不起效果，就加上此样式
  }
}
.my-label {
  width: 200px;
  color: #999;
  font-weight: normal;
  background: #fff;
}
.my-class {
  max-width: 295px; // 给内容增加最大宽度
  word-break: break-all; // 让内容超出列宽时自动换行显示
  word-wrap: break-word;
}
</style>