xujiecloud-vue/src/views/modules/oss/oss.vue

<template>
  <div class="mod-oss">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-input v-model="dataForm.fileName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()"> {{ buttons.search || '查询' }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">
          {{ buttons.deleteList || '批量删除' }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :footer="exportFooter"
          :defaultValue="exportDefaultValue"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ buttons.download || '导出' }}
        </download-excel>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openMenuList()">{{ buttons.upload || '上传' }}<i
          class="el-icon-upload el-icon--right"></i></el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      :height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
        :prop="item.columnProp"
        header-align="center"
        :align="item.align"
        :label="item.columnLabel">
      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="deleteHandle(scope.row.id)">{{ buttons.delete || '删除' }}</a>
          <a @click="fileDownload(scope.row)">下载</a>
          <a v-if="isAuth('sys:oss:all')" type="text" size="small" @click="helpFileList(scope.row.orderRef1)">
            {{ buttons.helpFileList || '帮助文档' }}</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100 , 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <FileList ref="helpFileList" v-if="helpFileVisible"></FileList>
    <FileMenu ref="fileMenuList"></FileMenu>
  </div>
</template>

<script>

import FileList from '../common/file-list'
import FileMenu from './file-menu.vue'
import axios from "axios";
import Vue from "vue";
import {
  searchFunctionButtonList,
} from "@/api/sysLanguage.js"

export default {
  data() {
    return {
      uploadShow: false,
      fileMenuVisible: false,
      tableHeight: 0,
      helpFileVisible: false,
      dataForm: {
        fileName: ''
      },
      buttons: {
        download: '导出',
        search: '查询',
        cz: '操作',
        upload: '上传',
        delete: '删除',
        fileDownload: '下载',
        deleteList: '批量删除',
        helpFileList: '帮助文档',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      configVisible: false,
      uploadVisible: false,
      columnList: [
        {
          tableId: this.$route.meta.menuId + "OSSHELP",
          tableName: "OSSHELP",
          columnProp: "fileName",
          columnLabel: "文件名",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: 'center'
        },
        {
          tableId: this.$route.meta.menuId + "OSSHELP",
          tableName: "OSSHELP",
          columnProp: "orderInfo",
          columnLabel: "功能名称",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: 'center'
        },
        {
          tableId: this.$route.meta.menuId + "OSSHELP",
          tableName: "OSSHELP",
          columnProp: "orderRef1",
          columnLabel: "功能编码",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: 'center'
        },
        {
          tableId: this.$route.meta.menuId + "OSSHELP",
          tableName: "OSSHELP",
          columnProp: "url",
          columnLabel: "URL地址",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: 'center'
        },
        {
          tableId: this.$route.meta.menuId + "OSSHELP",
          tableName: "OSSHELP",
          columnProp: "createdBy",
          columnLabel: "创建人",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: 'center'
        },
        {
          tableId: this.$route.meta.menuId + "OSSHELP",
          tableName: "OSSHELP",
          columnProp: "createDate",
          columnLabel: "创建时间",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: 'center'
        },
      ],
      // 导出 start
      exportData: [],
      exportName: "帮助文件列表" + this.dayjs().format('YYYYMMDDHHmmss'),
      //exportHeader: ["帮助文件列表"],
      exportFooter: [],
      exportDefaultValue: "这一行这一列没有数据",
      // 导出 end
    }
  },
  components: {
    FileList,
    FileMenu
  },
  activated() {
    this.getDataList()

  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 166;
    })
  },
  methods: {
    // 获取button的词典
    getFunctionButtonList() {
      let queryButton = {
        functionId: this.$route.meta.menuId,
        tableId: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.code == 0 && data.data) {
          this.buttons = data.data
        }
      })
    },
    // 打开上传功能列表
    openMenuList() {
      this.$nextTick(() => {
        this.$refs.fileMenuList.init()
      })

    },
    // 帮助文档列表
    helpFileList(val) {
      let fileMappingDto = {
        fileId: '',
        fileTypeCode: 1,
        orderRef1: val,
        orderRef2: '*',
        orderRef3: '*',
      }
      this.helpFileVisible = true;
      this.$nextTick(() => {
        this.$refs.helpFileList.init(fileMappingDto)
      })
    },
    // 文件下载
    fileDownload(row) {
      //'/proxyApi/ftp/file/downFtpFile/'
      axios.get('/proxyApi/ftp/file/downFtpFile/' + row.id, {
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json',
          'token': Vue.cookie.get('token')
        }
      }).then(({data}) => {
        // 不限制文件下载类型
        const blob = new Blob([data], {type: "application/octet-stream"})
        // 下载文件名称
        const fileName = row.fileName
        // a标签下载
        const linkNode = document.createElement('a')
        linkNode.download = fileName // a标签的download属性规定下载文件的名称
        linkNode.style.display = 'none'
        linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
        // if(val == 'Y'){
        //   this.pdfVisible = true
        //   this.pdfUrl = linkNode.href
        // }else {
        document.body.appendChild(linkNode)
        linkNode.click() // 模拟在按钮上的一次鼠标单击
        URL.revokeObjectURL(linkNode.href) // 释放URL 对象
        document.body.removeChild(linkNode)
        // }
      })
    },

    downloadFile(fileName, data) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sys/oss/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'fileTypeCode': 1,
          'limit': this.pageSize,
          'fileName': this.dataForm.fileName
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/oss/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
            this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 导出
    fields() {
      let json = "{"
      this.columnList.forEach((item, index) => {
        if (index == this.columnList.length - 1) {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
        } else {
          json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
        }
      })
      json += "}"
      let s = eval("(" + json + ")")
      return s
    },
    createExportData() {
      // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
      return this.dataList;
    },
    startDownload() {
    },
    finishDownload() {
    }
  },
  created() {
    this.getFunctionButtonList()
  }
}
</script>