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-model-item :label="$t('department')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-tree-select
                tree-node-filter-prop="title"
                v-model="queryParam.responsibleDepartment"
                :maxTagCount="1"
                :show-search="true"
                :filterTreeNode="filterTreeOption"
                :getPopupContainer="triggerNode=> triggerNode.parentNode"
                class="box-input"
                style="width: 100%"
                :tree-data="departList"
                :placeholder="$t('pleaseSelect') + $t('department')"
              />
            </a-form-model-item>
          </a-col>
          <!--姓名-->
          <a-col :md="6" :sm="12">
            <a-form-item :label="$t('userSelect.name')">
              <j-input :placeholder="$t('pleaseEnter') + $t('userSelect.name')" v-model="queryParam.workNumber"></j-input>
            </a-form-item>
          </a-col>
          <!--工号-->
          <a-col :md="6" :sm="12">
            <a-form-item :label="$t('user.workNo')">
              <j-input :placeholder="$t('pleaseEnter') + $t('user.workNo')" v-model="queryParam.workNumber"></j-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">{{ text }}</div>
        </template>

        <template v-slot:file="{text, record}">
          <a-tooltip overlay-class-name="tooltip-style">
            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
            <div class="table-text can-click-table-text" v-if="text || text === 0" @click="handlePreview(record)">{{ text }}</div>
            <div v-else class="table-text">{{ global.emptyLine }}</div>
          </a-tooltip>
        </template>
      </j-table>
    </div>

    <div id="images">
      <div class="image" v-viewer="{movable: false}">
        <img v-show="image" :src="imageUrl" alt="">
      </div>
    </div>
  </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 { Base64 } from 'js-base64'
import { kkFilePreview } from '../../../../utils/kkFilePreview'

export default {
  name: 'BasisDescriptionModal',
  components: { 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: '1',
          title: this.$t('userSelect.name'),
          width: 100
        },
        // 工号
        {
          dataIndex: '2',
          title: this.$t('user.workNo'),
          width: 100
        },
        // 部门
        {
          dataIndex: '3',
          title: this.$t('department'),
          width: 100
        },
        // 车型
        {
          dataIndex: '4',
          title: this.$t('projectLibrary.specialProjectLibrary.vehicleModel'),
          width: 100
        },
        // 依据描述
        {
          dataIndex: 'nameWorkNo',
          title: this.$t('projectLibrary.specialProjectLibrary.basisDescription'),
          width: 250,
          scopedSlots: { customRender: 'basisDescription' }
        },
        // 佐证材料
        {
          dataIndex: '5',
          title: this.$t('projectLibrary.specialProjectLibrary.supportingMaterial'),
          width: 120
        }
      ],
      image: false,
      imageUrl: null
    }
  },
  methods: {
    open () {
      this.visible = true
      this.getDepartTreeList()
      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)
    }
  }
}
</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>