laws-sinotruk-client/src/views/projectLibrary/specialProjectLibrary/modules/BasisDescriptionModal.vue

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <!--查询区域-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--姓名-->
          <a-col :md="6" :sm="12">
            <a-form-item :label="$t('userSelect.name')">
              <a-input :placeholder="$t('pleaseEnter') + $t('userSelect.name')" v-model="queryParam.realName"></a-input>
            </a-form-item>
          </a-col>
          <!--工号-->
          <a-col :md="6" :sm="12">
            <a-form-item :label="$t('user.workNo')">
              <a-input :placeholder="$t('pleaseEnter') + $t('user.workNo')" v-model="queryParam.userName"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchReset" icon="reload" ghost>{{ $t('reset') }}</a-button>
              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px" v-has="'vehicleItemLibrary:search'">
                {{ $t('query') }}
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <j-table
        :columns="columns"
        :dataSource="dataSource"
        :can-drag="true"
        rowKey="id"
        :row-selection="null"
        :pagination="ipagination"
        :scroll="{x: '100%', y: 'calc(100vh - 200px - 56px - 56px - 75px - 64px - 48px)'}"
        @change="handleTableChange">

        <template v-slot:basisDescription="{text}">
          <div class="basis-description" v-if="text || text === 0">{{ text }}</div>
          <div v-else class="table-text">{{ global.emptyLine }}</div>
        </template>

        <!--佐证材料-->
        <template v-slot:file="{text}">
          <a-button class="table-text" v-if="!!text" type="primary" ghost @click="displayFile(text)">{{ $t('view') }}</a-button>
          <div class="table-text" v-else>{{ global.emptyLine }}</div>
        </template>
      </j-table>
    </div>

    <!--佐证材料回显-->
    <upload-file ref="fileDisplayModal" disabled />
  </j-modal>
</template>

<script>
import { JeroListMixin } from '../../../../mixins/JeroListMixin'
import { queryDepartTreeList } from '../../../../api/api'
import JTable from '../../../../components/jero/JTable'
import Vue from 'vue'
import { ACCESS_TOKEN } from '../../../../store/mutation-types'
import { downloadFile, getFileAccessHttpUrl } from '../../../../api/manage'
import { previewPdf } from '../../../../utils/previewPdf'
import { kkFilePreview } from '../../../../utils/kkFilePreview'
import UploadFile from '../../../../components/UploadFile'

export default {
  name: 'BasisDescriptionModal',
  components: { UploadFile, JTable },
  mixins: [JeroListMixin],
  data () {
    return {
      title: this.$t('projectLibrary.specialProjectLibrary.basisDescription'),
      width: 1000,
      visible: false,
      confirmLoading: false,
      disableMixinCreated: true,
      departList: [],
      columns: [
        // 序号
        {
          title: this.$t('serialNumber'),
          key: 'rowIndex',
          width: 80,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        // 姓名
        {
          dataIndex: 'designEngineer_dictText',
          title: this.$t('userSelect.name'),
          width: 100
        },
        // 车型
        {
          dataIndex: 'modelSeries_dictText',
          title: this.$t('projectLibrary.specialProjectLibrary.vehicleModel'),
          width: 100
        },
        // 依据描述
        {
          dataIndex: 'description',
          title: this.$t('projectLibrary.specialProjectLibrary.basisDescription'),
          width: 250,
          scopedSlots: { customRender: 'basisDescription' }
        },
        // 佐证材料
        {
          dataIndex: 'fileId',
          title: this.$t('projectLibrary.specialProjectLibrary.supportingMaterial'),
          width: 120,
          scopedSlots: { customRender: 'file' }
        }
      ],
      image: false,
      imageUrl: null,
      url: {
        list: '/process/projectStandard/getTermUserList'
      }
    }
  },
  methods: {
    open (processTermId) {
      this.visible = true
      this.getDepartTreeList()
      this.filters = {
        termId: processTermId
      }
      this.loadData(1)
    },
    handleOk () {
      this.close()
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.visible = false
    },
    getDepartTreeList () {
      queryDepartTreeList().then((res) => {
        if (res.success) {
          this.departList = res.result
        } else {
          this.departList = []
        }
      })
    },
    handlePreview (file) {
      if (!file || !file.url) {
        return
      }
      // 截取文件后缀名
      const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
      const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix.toLowerCase() === tt)
      // 判断是否为可预览格式的文件
      if (!canPreview) {
        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
          this.handleDownload(file)
        })
        return
      }
      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${file.id}?at=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
      // 图片预览，使用自己添加的组件
      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
        this.imageUrl = getFileAccessHttpUrl(file.id)
        // 获取viewer实例
        const viewer = this.$el.querySelector('.image').$viewer
        // 调用show方法进行显示预览图
        viewer.show()
        // this.$refs.imagePreviewModal.open(file)
        return
      }
      // pdf预览
      if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
        const url = previewPdf(file.id)
        window.open(url)
        return
      }
      // word用KKfile预览
      if (canPreview && (fileSuffix === 'doc' || fileSuffix === 'docx')) {
        kkFilePreview(fileFullUrl)
        return
      }
      // 如果都不能预览就下载
      downloadFile(`/sys/common/download/${file.id}`, file.fileName)
    },
    displayFile (text) {
      this.$refs.fileDisplayModal.open(text)
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
  min-width: 50px;
}

.basis-description {

}
</style>