laws-sinotruk-client/src/views/enterpriseStandardLibrary/check/modules/CheckReportModal.vue

<template>
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="800"
    :closable="true"
    @cancel="handleCancel"
    :footer="false"
    :visible="visible">

    <a-spin :spinning="confirmLoading">
      <p>{{ $t('enterpriseStandardLibrary.check.checkBasedEnterpriseStandard') }}{{model.standardName}}</p>
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        rowKey="id"
        @change="handleTableChange">

        <template slot="text" slot-scope="text">
          <a-tooltip overlay-class-name="tooltip-style">
            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
            <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
          </a-tooltip>
        </template>

        <!--    附件   -->
        <template v-slot:relatedMaterial="{text, record}">
          <a-tooltip overlay-class-name="tooltip-style">
            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
            <a class="link-a" @click="handleRelatedMaterialClick(record)">{{ text }}</a>
          </a-tooltip>
        </template>
      </a-table>
    </a-spin>

  </a-modal>
</template>

<script>
import Vue from 'vue'
import { getFileAccessHttpUrl } from '@/api/manage'
import { previewPdf } from '@/utils/previewPdf'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getCheckReportById } from '@/api/enterpriseStandardLibraryApi'

const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_PDF = 'pdf'
const Base64 = require('js-base64').Base64

export default {
  name: 'CheckReportModal',
  data () {
    return {
      title: this.$t('enterpriseStandardLibrary.check.checkReport'),
      visible: false,
      confirmLoading: false,
      model: {},
      columns: [
        {
          title: this.$t('serialNumber'),
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: this.$t('enterpriseStandardLibrary.check.basedClause'),
          align: 'center',
          width: 180,
          dataIndex: 'basedClause',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('enterpriseStandardLibrary.check.standardContent'),
          align: 'center',
          width: 180,
          dataIndex: 'standardContent',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('enterpriseStandardLibrary.check.executiveCondition'),
          align: 'center',
          width: 180,
          dataIndex: 'executiveCondition',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('enterpriseStandardLibrary.check.file'),
          align: 'center',
          width: 180,
          dataIndex: 'file',
          scopedSlots: { customRender: 'file' }
        },
        {
          title: this.$t('enterpriseStandardLibrary.check.score'),
          align: 'center',
          width: 180,
          dataIndex: 'score',
          scopedSlots: { customRender: 'text' }
        }
      ],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }
    }
  },
  methods: {
    open (record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.initData()
    },
    initData () {
      getCheckReportById({ id: this.model.id }).then(res => {
        if (res.success) {
          this.dataSource = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 点击附件
    handleRelatedMaterialClick (record) {
      // 截取文件后缀名
      const fileSuffix = record.declareFileName ? record.declareFileName.split('.')[record.declareFileName.split('.').length - 1] : ''
      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${record.declareFile}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${record.declareFileName}`
      // 图片预览，使用自己添加的组件
      if (FILE_TYPE_IMGS.includes(fileSuffix)) {
        this.imageUrl = getFileAccessHttpUrl(record.declareFile)
        // 获取viewer实例
        const viewer = this.$el.querySelector('.image').$viewer
        // 调用show方法进行显示预览图
        viewer.show()
        // this.$refs.imagePreviewModal.open(file)
        return
      }
      // pdf预览
      if (FILE_TYPE_PDF.includes(fileSuffix)) {
        const url = previewPdf(record.declareFile)
        window.open(url)
        return
      }
      // 其余可预览文件仍使用KKFile进行预览
      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
      window.open(url)
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.visible = false
      this.dataSource = []
      this.model = {}
    }
  }
}
</script>

<style scoped>

</style>