equipment/src/views/document/index.vue

<template>
  <div class="app-container">
    <!--头部选项-->
    <div class="head-container">
      <div class="searchBox">
        <el-input
          v-model="query.filename"
          placeholder="请输入文件名称"
          style="width: 200px"
          class="filter-item"
          clearable
          @keyup.enter.native="crud.toQuery"
        />
        <query :crud="crud" />
        <el-upload
          ref="upload"
          slot="right"
          class="upload-demo"
          :show-file-list="false"
          :before-upload="beforeUpload"
          accept=".pdf"
          action=""
        >
          <el-button slot="trigger" size="middle" type="primary">
            上传文件
          </el-button>
        </el-upload>
      </div>
    </div>
    <!--表格内容-->
    <CustomTable
      ref="customTable"
      :col-configs="colConfigs"
      :columns="columns"
      :crud="crud"
    >
      <el-table-column
        slot="operation"
        align="center"
        width="200"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="downLoad(scope.row)">
            预览
          </el-button>
          <el-button type="text" @click="downLoadFn(scope.row)">
            下载
          </el-button>
          <el-button type="text" @click="checkHistory(scope.row)">
            历史
          </el-button>
        </template>
      </el-table-column>
    </CustomTable>
    <pagination />
    <el-dialog title="查看历史版本" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column :formatter="formatterFlowName" property="flowName" label="操作环节" width="80" />
        <el-table-column property="filename" label="文件名称" />
        <el-table-column :formatter="formatter.getChineseName" property="createBy" label="创建人" width="100" />
        <el-table-column property="createTime" label="创建时间" width="150" />
        <el-table-column label="操作" width="80">
          <template v-slot="scope">
            <el-button v-if="scope.row.flowName !== 0" type="text" @click="viewHistoryFile(scope.row)">
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="params.pageSize"
        layout="total,prev, pager, next"
        :total="subTotal"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { header, presenter } from '@/components/Crud/crud'
import Query from '@/components/Crud/Query'
import CustomTable from '@/components/Crud/Table'
import Pagination from '@/components/Crud/Pagination'
import CrudDocumentArchives from '@/api/document_archives'
import { uploadFileFn, updateInspectionSystemFile } from '@/api/common'
import { downloadFileUrl } from '@/utils'
import preview from '@/utils/preview'

// crud交由presenter持有
const defaultCrud = presenter(
  CRUD({
    title: '检验机构体系文件管理',
    url: '/inspectionSystemFile/list',
    orderBy: ['id desc'],
    api: preview,
    crudMethod: { ...CrudDocumentArchives }
  })
)

export default {
  name: 'DocumentArchivesList',
  components: { Pagination, Query, CustomTable },
  mixins: [defaultCrud, header()],
  data() {
    return {
      action: this.preview.baseURL + '/inspectionSystemFile',
      fileList: [],
      colConfigs: [
        { prop: 'filename', label: '文件名', align: 'center' },
        { prop: 'createBy', label: '创建人', align: 'center', formatter: this.formatter.getChineseName },
        { prop: 'createTime', label: '创建时间', align: 'center' },
        { prop: 'updateBy', label: '更新人', align: 'center', formatter: this.formatter.getChineseName },
        {
          prop: 'updateTime',
          label: '更新时间',
          align: 'center',
          formatter: this.formatter.formatterDepartmentName
        },
        { slot: 'operation' }
      ],
      permission: {
        add: ['documentArchives:add'],
        edit: ['documentArchives:update'],
        del: ['documentArchives:delete']
      },
      dialogTableVisible: false,
      params: {
        inspectionSystemFileId: '',
        pageNum: 1,
        pageSize: 10
      },
      gridData: [],
      subTotal: 0,
      url: process.env.VUE_APP_PREVIEW_API + process.env.VUE_APP_PROJECT_NAME + '/inspectionSystemFile'
    }
  },
  mounted() {
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    checkHistory(row) {
      this.dialogTableVisible = true
      this.params.inspectionSystemFileId = row.id
      this.getSubList()
    },
    getSubList() {
      this.preview({
        url: '/inspectionSystemFileLog/list',
        method: 'get',
        params: this.params
      }).then(res => {
        this.gridData = res.list
        this.subTotal = res.total
      })
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getSubList()
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    // EXCEL上传方法
    beforeUpload(file) {
      if (this.$refs.customTable.$refs.table.selection.length > 1) {
        this.$notify.warning('请选择单份体系文件进行更新上传！')
        return false
      }
      const fd = new FormData()
      fd.append('file', file)
      if (this.$refs.customTable.$refs.table.selection.length) {
        fd.append('id', this.$refs.customTable.$refs.table.selection[0].id)
        updateInspectionSystemFile(fd).then(() => {
          this.$notify.success('体系更新成功。')
          this.crud.toQuery()
        })
      } else {
        uploadFileFn(fd).then(() => {
          this.$notify.success('体系上传成功。')
          this.crud.toQuery()
        })
      }
      return false
    },
    downLoad(item) {
      window.open(this.url + '/' + item.id + item.suffix)
    },
    viewHistoryFile(item) {
      downloadFileUrl(this.url + '/' + item.inspectionSystemFileId + '_' + item.id + item.suffix, item.filename, item.suffix)
    },
    downLoadFn(item) {
      downloadFileUrl(this.url + '/' + item.id + item.suffix, item.filename, item.suffix)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    closeReportDialog() {
      this.$refs['reportForm'].resetFields()
    },
    formatterFlowName(row, column, cellValue) {
      switch (cellValue) {
        case 0:
          return '保存'
        case 1:
          return '更新'
        case 2:
          return '删除'
        default:
          break
      }
    }
  }
}
</script>
<style scoped>
.searchBox{
  margin-bottom: 20px;
  display: flex;
}
.upload-demo{
  margin-left: 20px;
  width: 200px;
}
</style>