saas_entrepot_admin/src/views/finance/invoiceManage/dialogExamine.vue

<template>
  <div class="">
    <BaseDialog
      width="1000px"
      :isShow.sync="isShow"
      title="审核"
      :isShowFooter="false"
    >
      <div>
        <h2 class="h_top">
          订单详情
          <el-button type="text" style="margin-left: 20px" @click="orderDetail"
            >查看</el-button
          >
        </h2>
        <div class="li_box">
          订单编号：<span>{{ orderInfo.handleOrderSn }}</span
          >商品类型：<span>{{
            orderInfo.goodsType == 1
              ? "课程"
              : orderInfo.goodsType == 2
              ? "题库"
              : ""
          }}</span
          >教育类型：<span>{{ orderInfo.educationName }}</span
          >培训项目：<span>{{
            orderInfo.projectName + " - " + orderInfo.businessName
          }}</span
          ><br />
          <!-- 订购人数：<span>{{ orderInfo.userNum || 0 }} 位</span
          >订购数量：<span>{{ orderInfo.goodsNum }} 个</span> -->
          下单金额：<span>￥{{ orderInfo.orderPrice | formatPrice }}</span
          >退款金额：<span
            >￥<span v-if="orderInfo.refundPrice">{{
              orderInfo.refundPrice | formatPrice
            }}</span
            ><span v-else>0.00</span></span
          >实际金额：<span>￥{{ orderInfo.realPrice | formatPrice }}</span>
        </div>
      </div>
      <div>
        <h2 class="h_top">申请信息</h2>
        <div class="li_box">
          申请时间：<span>{{
            $methodsTools.onlyForma(invoiceInfo.applyTime)
          }}</span
          ><br />发票类型：<span>{{
            invoiceInfo.type == 1
              ? "普通发票"
              : invoiceInfo.type == 2
              ? "增值税专用发票"
              : ""
          }}</span
          >发票主体：<span>{{
            invoiceInfo.subject == 1
              ? "个人"
              : invoiceInfo.subject == 2
              ? "企业"
              : ""
          }}</span>
          {{ invoiceInfo.subject == 1 ? "姓名：" : "企业全称："
          }}<span>{{ invoiceInfo.invoiceTitle }}</span
          >{{ invoiceInfo.subject == 1 ? "身份证号：" : "纳税人号："
          }}<span>{{ invoiceInfo.taxRegistryNumber }}</span
          ><br />开票备注：<span>{{ invoiceInfo.openRemark }}</span
          ><template v-if="checkList.includes('2')">
            收票邮箱：<span>{{ invoiceInfo.email }}</span></template
          >
          <template v-if="checkList.includes('3')">
            收票姓名：<span>{{ invoiceInfo.consignee }}</span
            >收票电话：<span>{{ invoiceInfo.collectionTelephone }}</span
            >收票地址：<span>{{ invoiceInfo.shippingAddress }}</span></template
          >
        </div>
      </div>
      <div>
        <h2 class="h_top">开票信息</h2>
        <div class="li_box">
          <p style="margin-top: 0px">
            本次申请开票金额：<span
              style="color: red; font-weight: bold; font-size: 16px"
              >￥{{ invoiceInfo.amount | formatPrice }}</span
            >
          </p>
          <el-upload
            ref="uploadFile"
            class="upload-demo"
            action="#"
            :http-request="uploadFile"
            :file-list="fileList"
            list-type="picture-card"
            multiple
          >
            <div slot="default">
              <el-button type="text" style="line-height: 22px"
                >+上传发票<br /><span style="color: #999"
                  >支持PNG/JPG/PDF</span
                ></el-button
              >
            </div>
            <!-- <i slot="default" class="el-icon-plus"></i> -->
            <div slot="file" slot-scope="{ file }">
              <div>
                <img
                  v-if="file.name.toLowerCase().split('.').splice(-1)[0] !== 'pdf' "
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    v-if="file.name.toLowerCase().split('.').splice(-1)[0] !== 'pdf'"
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="beforeRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <div
                v-if="file.name.toLowerCase().split('.').splice(-1)[0] == 'pdf'"
                style="text-align: center; line-height: 145px"
              >
                {{ file.name }}
              </div>
            </div>
          </el-upload>
        </div>
      </div>
      <div>
        <h2 class="h_top">收票方式</h2>
        <div class="li_box">
          <el-checkbox-group :value="checkList">
            <el-checkbox label="1">在线下载</el-checkbox>
            <el-checkbox label="2">邮件接收</el-checkbox>
            <el-checkbox label="3">纸质快递</el-checkbox>
          </el-checkbox-group>
          <el-input
            style="margin-top: 14px"
            :rows="4"
            type="textarea"
            v-model="handleRemark"
            placeholder="请输入备注"
          ></el-input>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <el-button size="small" type="primary" @click="submit"
          >审核通过</el-button
        >
        <el-button size="small" type="warning" @click="close"
          >审核不通过</el-button
        >
      </div>
    </BaseDialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <order-detail ref="orderDetail" />
  </div>
</template>

<script>
import orderDetail from "../orderManage/orderDetail.vue";
export default {
  components: { orderDetail },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      isShow: false,
      invoiceInfo: {},
      fileList: [],
      checkList: [],
      handleRemark: "",
      orderInfo: {},
    };
  },

  mounted() {},

  methods: {
    //查看详情
    orderDetail() {
      this.$refs.orderDetail.openBoxs(this.orderInfo.handleOrderSn);
    },
    openBoxs(row) {
      this.invoiceInfo = {};
      this.fileList = [];
      this.checkList = [];
      this.handleRemark = "";
      this.isShow = true;
      this.orderInfo = {};
      this.$api
        .orderhandledetail({ handleOrderSn: row.orderSn })
        .then((res) => {
          this.orderInfo = res.data;
        });
      this.$api.orderinvoicecompanydetail(row.invoiceId).then((res) => {
        this.invoiceInfo = res.data || {};
        this.checkList = res.data.invoiceMode.split(",");
        this.handleRemark = res.data.handleRemark || "";
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadFile(fileObj) {
      let file = fileObj.file;
      var type = file.name.toLowerCase().split(".").splice(-1);
      let typeList = ["jpg", "png", "pdf"];
      if (!typeList.includes(type[0])) {
        this.$message.error("上传格式需为：.jpg/.png/.pdf");
        const idx = this.$refs.uploadFile.uploadFiles.findIndex(
          (item) => item.uid === file.uid
        );
        this.$refs.uploadFile.uploadFiles.splice(idx, 1);
        return;
      }
      if (file.size > 1 * 1024 * 1024) {
        this.$message.error("文件不得大于1MB");
        const idx = this.$refs.uploadFile.uploadFiles.findIndex(
          (item) => item.uid === file.uid
        );
        this.$refs.uploadFile.uploadFiles.splice(idx, 1);
        return;
      }
      this.$upload
        .upload(file, 2)
        .then((res) => {
          this.fileList.push({
            name: file.name,
            uid: file.uid, //带上上传前的uid作为标识
            url: this.$methodsTools.splitImgHost(res),
            deletable: true,
            imageFit: "contain",
            previewSize: 80,
            baseUrl: res,
          });
        })
        .catch(() => {
          this.$message.error("上传失败");
          const idx = this.$refs.uploadFile.uploadFiles.findIndex(
            (item) => item.uid === file.uid
          );
          this.$refs.uploadFile.uploadFiles.splice(idx, 1);
        });
    },
    beforeRemove(file) {
      this.fileList = this.fileList.filter((i) => i.uid != file.uid);
    },
    close() {
      this.$prompt("输入不通过原因", "确定审核不通过吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{1,10000}$/,
        inputErrorMessage: "请输入不通过原因",
      })
        .then(({ value }) => {
          let formData = {
            checkReason: value,
            checkResult: 2,
            invoiceId: this.invoiceInfo.invoiceId,
          };
          this.$api.orderinvoicecompanycheck(formData).then((res) => {
            this.$message.success("操作成功");
            this.isShow = false;
            this.$parent.search();
          });
        })
        .catch(() => {});
    },
    submit() {
      if (this.fileList.length == 0) {
        this.$message.error("请上传发票");
        return;
      }
      this.$confirm("确定审核通过吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let imgList = this.fileList.map((i) => i.baseUrl).join();
          let formData = {
            checkResult: 1,
            handleRemark: this.handleRemark,
            invoiceId: this.invoiceInfo.invoiceId,
            invoiceUrlList: imgList,
          };
          this.$api.orderinvoicecompanycheck(formData).then((res) => {
            this.$message.success("审核成功");
            this.isShow = false;
            this.$parent.search();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 8px 20px !important;
}
.h_top {
  color: #000;
  font-weight: bold;
  font-size: 14px;
}
.li_box {
  padding: 20px;
  background-color: #f9fafb;
  line-height: 28px;
  border-radius: 8px;
  & > span {
    color: #000;
    margin-right: 28px;
  }
}
</style>