boss/pages/main/index/invoice_audit.vue

<template>
  <div>
    <div class="t-title">
      <span>验证发票</span>
    </div>
    <div class="t-title">
      <span>发票图片</span> <span>  <el-link  @click="downloadIamge(invoiceRow.invoice_url,'invoice')" type="primary">下载发票原件</el-link></span>
    </div>
    <div>
      <el-image
        style="width: 700px; height: 350px"
        :src="invoiceRow.invoice_url"
        :preview-src-list="srcList">
      </el-image>
    </div>
    <div class="t-title">
      <span>审核金额：{{invoiceRow.amount}}</span>
    </div>
    <div>
      <div class="t-title">
        <span>发票图片审核 </span>
        <span v-if="invoiceRow.picture_verify_status === '0'"><el-tag type="info">待审核</el-tag></span>
        <span v-else-if="invoiceRow.picture_verify_status === '1'" style="color: green"> <el-tag type="success">审核通过</el-tag></span>
        <span v-else-if="invoiceRow.picture_verify_status === '2'" style="color: red"> <el-tag type="danger">审核不通过</el-tag> </span>
        <span v-else>--</span>
      </div>
      <div v-if="invoiceRow.paper_verify_status == '0'">
        <el-button type="primary" @click="onPictureAudit(true)" v-if="invoiceRow.picture_verify_status === '0'">验证通过
        </el-button>
        <el-button type="danger" @click="onAudit('picture')">验证不通过</el-button>
      </div>
    </div>
    <div v-if="invoiceRow.picture_verify_status === '1'">
      <div class="t-title">
        <span>纸质发票审核 </span>
        <span v-if="invoiceRow.paper_verify_status === '0'"> <el-tag type="info">待审核</el-tag></span>
        <span v-else-if="invoiceRow.paper_verify_status === '1'" style="color: green"> <el-tag type="success">审核通过</el-tag></span>
        <span v-else-if="invoiceRow.paper_verify_status === '2'" style="color: red"> <el-tag type="danger">审核不通过</el-tag></span>
        <span v-else>--</span>
      </div>
      <div v-if="invoiceRow.paper_verify_status == '0'">
        <el-button type="primary" @click="onPaperAudit(true)">验证通过</el-button>
        <el-button type="danger" @click="onAudit('paper')">验证不通过</el-button>
      </div>
    </div>
    <div>
      <div class="t-title">
        <span>审核记录 </span>
      </div>
      <div style="margin-top:5px" v-for="item in auditData">
        <el-card shadow="never">
          <el-row>
            <el-col :span="12" >
              <div :style="{'font-weight':700,'color':(item.status_name==='审核通过'?'green':'red')}" >{{item.status_name}}</div>
            </el-col>
            <el-col :span="10" :offset="2">
              <div><span class="lblue point" @click="openUser(item.audit_uid)">{{item.nickname}}</span> {{item.audit_date}}</div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="12" v-if="item.audit_data">
              <div style="font-weight: 700">消息通知:</div>
              <div style="padding: 5px">
                &nbsp;&nbsp;{{item.audit_data.reason || ''}}
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>

    <el-dialog
      title="请输入发票图片审核不通过的原因"
      :visible.sync="pictureAuditModel"
      width="30%"
    >
      <div>
        <el-input v-model="pictureReason"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="pictureAuditModel = false">取 消</el-button>
          <el-button type="primary" @click="onPictureAudit(false)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="请输入纸质发票审核不通过的原因"
      :visible.sync="paperAuditModel"
      width="30%"
    >
      <div>
        <el-input v-model="paperReason"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="paperAuditModel = false">取 消</el-button>
          <el-button type="primary" @click="onPaperAudit(false)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "invoice_audit",
    data() {
      return {
        ids: 0,
        srcList: [],
        invoiceRow: {},
        paperReason: '',
        pictureReason: '',
        paperAuditModel: false,
        pictureAuditModel: false,
        auditData: []
      };
    },
    mounted() {
      this.getInvoiceDetail();
    },
    methods: {
      async getInvoiceDetail() {
        let id = this.ids;
        if (id === 0) {
          this.$message.error('id不存在');
          return false;
        }
        let res = await this.$post("/api/admin/kaifabao/getInvoiceAuditInfo", {id: id});
        if (res && res.status === 1) {
          this.invoiceRow = res.data.invoice;
          this.srcList = [res.data.invoice.invoice_url];
          this.auditData = res.data.auditData || [];
          this.auditData.audit_data = res.data.auditData.audit_data || {};
        }
      },
      onAudit(action) {
        //图片发票  纸质发票
        if (action === 'picture') {
          this.pictureAuditModel = true;
        } else if (action === 'paper') {

          this.paperAuditModel = true;
        }
      },
      //图片
      async onPictureAudit(isTrue) {
        let data = {};
        //图片审核
        if (isTrue) {
          data = {
            invoiceId: this.ids,
            action: 'approve'
          };
        } else {
          if (!this.pictureReason) {
            this.$message.error('原因不能为空');
            return false;
          }
          data = {
            invoiceId: this.ids,
            action: 'reject',
            reason: this.pictureReason
          };
        }
        let res = await this.$post("/api/admin/kaifabao/auditInvoiceWithdrawalPicture", data);
        if (res && res.status === 1) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.pictureAuditModel = false;
          this.getInvoiceDetail();
        }
      },
      //纸质
      async onPaperAudit(isTrue) {
        let data = {};
        //纸质发票审核
        if (isTrue) {
          data = {
            invoiceId: this.ids,
            action: 'approve'
          };
        } else {
          if (!this.paperReason) {
            this.$message.error('原因不能为空');
            return false;
          }
          data = {
            invoiceId: this.ids,
            action: 'reject',
            reason: this.paperReason
          };
        }
        let res = await this.$post("/api/admin/kaifabao/auditInvoiceWithdrawalPaper", data);
        if (res && res.status === 1) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.paperAuditModel = false;
          this.getInvoiceDetail();
        }
      },
      getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return decodeURI(r[2]);
        return null; //返回参数值
      },
      downloadIamge(imgsrc, name) {//下载图片地址和图片名
        var a = document.createElement('a')
        a.download = name || 'pic';
        // 设置图片地址
        a.href = imgsrc;
        a.click();

      },
      openUser(uid){
        window.open(
          this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`
        );
      }
    },
    created() {
      this.ids = this.getUrlParam("id");
    }
  }
</script>

<style scoped>
  .t-title {
    font-size: 20px;
    font-weight: 500;
    margin: 10px 0 5px 0;
  }

  .image {
    width: 100%;
    height: 100%;
    /*display: block;*/
  }

  .box-card {
    width: 480px;
    height: 300px;
  }
</style>