income_payments_client/src/views/projectManagement/modules/LookVoucherModal.vue

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <div class="project-name">
        <!--<div>{{ model.chargeProject }}</div>-->
        <div>{{ model.chargeCompanyTemporaryName }}</div>
      </div>
      <h3 class="title">凭证信息</h3>
      <div class="basic-info-div">
        <!--其他项目的显示 -->
        <template >
          <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <div>{{ proofInfo.amountReceived }}元</div>
          </a-form-item>
        </template>
        <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <div>{{ proofInfo.paymentDate }}</div>
        </a-form-item>
        <a-form-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <div>{{ proofInfo.applicantName }}</div>
        </a-form-item>
        <a-form-item v-if="proofType!=='pdf'" class="proof-form-item" :label="'缴费凭证'" :labelCol="labelCol"
                     :wrapperCol="wrapperCol">
          <div class="proof-img" v-if="proofType === 'img'">
            <template v-if="proofInfo.proof && proofInfo.proof !== ''">
              <div class="proof-img-item" v-for="(item, index) in proofInfo.proof.split(',')" :key="index">
                <img :src="proofSrc(item)" @click="previewImg(item)">
              </div>
            </template>
          </div>
          <span v-if="proofType==='none'">无</span>
        </a-form-item>
      </div>
    </a-spin>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <!--<a-button type="primary" @click="handleOk" v-preventclick>确定</a-button>-->
    </template>

    <!--    缴费凭证预览-->
    <preview-img-modal ref="previewImg"></preview-img-modal>
  </j-modal>
</template>

<script>
import { getAction } from '../../../api/manage'
import PreviewImgModal from '@/components/PreviewImgModal'

const labelCol = {
  xs: {span: 24},
  sm: {span: 3}
}
const wrapperCol = {
  xs: {span: 24},
  sm: {span: 21}
}

export default {
  name: 'LookVoucherModal',
  components: {PreviewImgModal},
  data() {
    return {
      title: '查看凭证',
      width: 600,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      labelCol,
      wrapperCol,
      labelPayCol: {
        xs: {span: 24},
        sm: {span: 8}
      },
      wrapperPayCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      url: {
        // 工作组-确认查看凭证
        confirmVoucher: '/project/payWorkingGroupSubitem/confirmVoucher',
        // 获取最新一条缴费凭证
        getLastProof: '/paymentCheck/payPaymentCheck/getLastProof',
      },
      // 项目缴费凭证信息
      proofInfo: {},
      // 是否显示说明
      showInstructions: false,
      // 缴费凭证的类型，默认为img，标协会员、证书根据paymentMethod字段决定：1--图片；2--pdf；3--没有凭证
      proofType: 'img'
    }
  },
  methods: {
    /**
     * 打开弹框， 需要调用 查看凭证的方法
     * @param record-项目的record
     */
    open(record) {
      this.model = Object.assign({}, record)
      // 获取最新一条缴费凭证
      this.getLastProof(record.id)
      // 调用接口
      this.lookVoucher(record.id)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.model = {}
    },
    handleCancel() {
      this.close()
      this.$emit('ok')
    },
    // 调用查看凭证的接口，更新列表页的状态
    lookVoucher(id) {
      getAction(this.url.confirmVoucher, {id: id}).then((res) => {
        if (res.success) {
          // this.$message.success(res.message)
        } else {
          if (res.message.indexOf('<br/>') > -1) {
            this.messageLineFeed('查看凭证失败', res.message)
          } else {
            this.$message.warning(res.message)
          }
        }
      })
    },
    /**
     * 获取最新一条缴费凭证
     * @param id-项目ID
     */
    getLastProof(id) {
      this.confirmLoading = true
      let param = {
        projectId: id
      }
      getAction(this.url.getLastProof, param).then((res) => {
        if (res.success && res.result !== '无数据') {
          this.proofInfo = res.result || {}
        } else {
          this.proofInfo = {}
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    /**
     * 缴费凭证 src
     */
    proofSrc(imgId) {
      return `${window._CONFIG['domianURL']}/sys/common/download/${imgId}`
    },
    /**
     * 预览缴费凭证
     */
    previewImg(imgId) {
      this.$refs.previewImg.title = '缴费凭证'
      this.$refs.previewImg.imgId = imgId
      this.$refs.previewImg.visible = true
    },
    /**
     * 获取缴费凭证类型
     * @param record
     */
    getProofType(record) {
      if (record.projectType && (record.projectType.toString() === '6')) {
        if (this.proofInfo.paymentMethod.toString() === '1' || this.proofInfo.paymentMethod.toString() === '3') {
          this.proofType = 'img'
          return
        }
        if (this.proofInfo.paymentMethod.toString() === '2') {
          this.proofType = 'pdf'
          return
        }
        if (this.proofInfo.paymentMethod.toString() === '3') {
          this.proofType = 'none'
          return
        }
      } else {
        this.proofType = 'img'
      }
    },
  }
}
</script>

<style scoped lang="less">
.ant-form-item {
  margin-bottom: 10px;
}

.project-name {
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  padding-bottom: 10px;
}

h3 {
  position: relative;
}

h3.title::before {
  position: absolute;
  top: 4px;
  left: -10px;
  content: "";
  height: 20px;
  width: 2px;
  background: #069f99;
}

.info-item {
  display: flex;
  padding: 5px 0;

  label {
    color: #666666;
    flex-shrink: 0;
    display: inline-block;
    width: 4.5rem;
    text-align: right;
  }

  div {
    color: black;
  }
}

// 将缴费凭证的图片部分提出
.proof-img {
  display: flex;
  width: calc(100% - 4rem);

  &-item {
    width: 21%;

    img {
      max-width: 100%;
      max-height: 150px;
      cursor: pointer;
    }
  }
}

// 修改缴费基础信息的样式
.basic-info-div {
  /deep/ .ant-form-item:not(.proof-form-item) {
    margin-bottom: 0;
  }
}
</style>