文件上传帮助文档 2022年4月14日 sxm

4 years ago · 7fc9d5404e
4 changed files with 537 additions and 0 deletions
--- a/src/icons/svg/icon-help.svg
+++ b/src/icons/svg/icon-help.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649384332427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5134" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M896 64H234.656C157.728 64 96 128.8 96 208c0 5.472 0.992 10.688 1.536 16H96v576c0 88.032 68.544 160 153.92 160H896V288H234.656C193.792 288 160 252.512 160 208S193.792 128 234.656 128H896V64z m-432 288H640v172.192l-68.192-53.696a31.968 31.968 0 0 0-39.584 0L464 524.192V352z m-229.344 0H400v238.112a32 32 0 0 0 51.808 25.152l100.192-78.912 100.192 78.912A32 32 0 0 0 704 590.112V352h128v544H249.92C200.608 896 160 853.344 160 800V329.024c21.536 14.368 47.04 22.976 74.656 22.976z" p-id="5135"></path><path d="M255.776 176H832v64H255.776z" p-id="5136"></path></svg>
--- a/src/views/modules/common/file-list-view.vue
+++ b/src/views/modules/common/file-list-view.vue
@ -0,0 +1,194 @@
+<template>
+  <div class="mod-oss">
+    <el-dialog
+      title="帮助文档"
+      :visible.sync="visible"
+      width="800px"
+      :append-to-body="true">
+      <el-form :inline="true" >
+        <el-form-item>
+          <el-input v-model="fileMappingDto.fileName"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        :height="tableHeight"
+        v-loading="dataListLoading"
+        style="width: 100%;">
+        <el-table-column
+          prop="fileName"
+          header-align="center"
+          align="left"
+          label="文件名">
+        </el-table-column>
+        <el-table-column
+          prop="createdBy"
+          header-align="center"
+          align="left"
+          width="180"
+          label="创建人">
+        </el-table-column>
+        <el-table-column
+          prop="createDate"
+          header-align="center"
+          align="left"
+          width="180"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <a @click="fileDownload(scope.row)">下载</a>
+            <a @click="filePreview(scope.row)">预览</a>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog append-to-body v-if="pdfVisible" title="预览" :visible.sync="pdfVisible" center width="60%">
+      <iframe :src="this.pdfUrl" frameborder="0" width="100%" height="400px"></iframe>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+import Vue from "vue";
+
+export default {
+  data() {
+    return {
+      menuId: '',
+      uploadShow: false,
+      tableHeight: 365,
+      visible: false,
+      pdfUrl: '',
+      pdfVisible: false,
+      dataForm: {
+        fileName: ''
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 200,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      configVisible: false,
+      uploadVisible: false,
+      fileMappingDto: {
+        fileId: '',
+        fileType: '',
+        orderRef1: '',
+        orderRef2: '',
+        orderRef3: '',
+      }
+    }
+  },
+  components: {
+  },
+  activated() {
+    this.getDataList()
+  },
+  methods: {
+    // 初始化
+    init(val) {
+      this.fileMappingDto = val
+      this.visible = true
+      this.getDataList()
+    },
+    // 预览
+    filePreview(row) {
+      this.pdfVisible = true
+      this.pdfUrl = '/file/' + row.newFileName
+    },
+    // 文件下载
+    fileDownload(row) {
+      axios.get('/api/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,
+          'limit': this.pageSize,
+          'fileName': this.fileMappingDto.fileName,
+          'fileType': this.fileMappingDto.fileType,
+          'orderRef1': this.fileMappingDto.orderRef1,
+          'orderRef2': this.fileMappingDto.orderRef2,
+          'orderRef3': this.fileMappingDto.orderRef3,
+        })
+      }).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()
+    },
+  }
+}
+</script>
--- a/src/views/modules/common/file-list.vue
+++ b/src/views/modules/common/file-list.vue
@ -0,0 +1,242 @@
+<template>
+  <div class="mod-oss">
+    <el-dialog
+      title="帮助文档"
+      :visible.sync="visible"
+      width="800px"
+      :append-to-body="true">
+      <el-form :inline="true" >
+        <el-form-item>
+          <el-input v-model="fileMappingDto.fileName"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="fileUploadInit">上传</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</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
+          prop="fileName"
+          header-align="center"
+          align="left"
+          label="文件名">
+        </el-table-column>
+        <el-table-column
+          prop="createdBy"
+          header-align="center"
+          align="left"
+          width="180"
+          label="创建人">
+        </el-table-column>
+        <el-table-column
+          prop="createDate"
+          header-align="center"
+          align="left"
+          width="180"
+          label="创建时间">
+        </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)">删除</a>
+            <a @click="fileDownload(scope.row)">下载</a>
+            <a @click="filePreview(scope.row)">预览</a>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog append-to-body v-if="pdfVisible" title="预览" :visible.sync="pdfVisible" center width="60%">
+      <iframe :src="this.pdfUrl" frameborder="0" width="100%" height="400px"></iframe>
+    </el-dialog>
+    <FileUpload v-if="uploadShow" ref="fileUpload" @refreshDataList="getDataList"></FileUpload>
+
+  </div>
+</template>
+
+<script>
+
+import FileUpload from './file-upload.vue'
+import axios from "axios";
+import Vue from "vue";
+
+export default {
+  data() {
+    return {
+      menuId: '',
+      uploadShow: false,
+      tableHeight: 365,
+      visible: false,
+      pdfUrl: '',
+      pdfVisible: false,
+      dataForm: {
+        fileName: ''
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 200,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      configVisible: false,
+      uploadVisible: false,
+      fileMappingDto: {
+        fileId: '',
+        fileType: '',
+        orderRef1: '',
+        orderRef2: '',
+        orderRef3: '',
+      }
+    }
+  },
+  components: {
+    FileUpload
+  },
+  activated() {
+    this.getDataList()
+  },
+  methods: {
+    //上传
+    fileUploadInit() {
+      this.uploadShow = true
+      this.$nextTick(() => {
+        this.$refs.fileUpload.init(this.fileMappingDto)
+      })
+    },
+    // 初始化
+    init(val) {
+      this.fileMappingDto = val
+      this.visible = true
+      this.getDataList()
+    },
+    // 预览
+    filePreview(row) {
+      this.pdfVisible = true
+      this.pdfUrl = '/file/' + row.newFileName
+    },
+    // 文件下载
+    fileDownload(row) {
+      axios.get('/api/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,
+          'limit': this.pageSize,
+          'fileName': this.fileMappingDto.fileName,
+          'fileType': this.fileMappingDto.fileType,
+          'orderRef1': this.fileMappingDto.orderRef1,
+          'orderRef2': this.fileMappingDto.orderRef2,
+          'orderRef3': this.fileMappingDto.orderRef3,
+        })
+      }).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(() => {
+      })
+    }
+  }
+}
+</script>
--- a/src/views/modules/common/file-upload.vue
+++ b/src/views/modules/common/file-upload.vue
@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+    title="上传文件"
+    append-to-body
+    width="478px"
+    :close-on-click-modal="false"
+    @close="closeHandle"
+    :visible.sync="visible">
+    <el-upload
+      drag
+      :action="url"
+      :before-upload="beforeUploadHandle"
+      :on-success="successHandle"
+      multiple
+      :file-list="fileList"
+      style="text-align: center;">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__tip" slot="tip">预览只支持jpg、png、gif,pdf格式！</div>
+    </el-upload>
+  </el-dialog>
+</template>
+
+<script>
+import {updateOssRef} from '@/api/oss/oss.js'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      url: '',
+      num: 0,
+      successNum: 0,
+      fileList: [],
+      folder: '系统文件',
+      fileMappingDto: {
+        fileType: '',
+        orderRef1: '',
+        orderRef2: '',
+        orderRef3: '',
+      }
+    }
+  },
+  methods: {
+    init(val) {
+      this.url = this.$http.adornUrl(`/ftp/file/upload?token=${this.$cookie.get('token')}&folder=` + this.folder)
+      this.visible = true
+      this.fileMappingDto = val
+    },
+    // 上传之前
+    beforeUploadHandle(file) {
+      // if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
+      //   this.$message.error('只支持jpg、png、gif格式的图片！')
+      //   return false
+      // }
+      this.num++
+    },
+    // 上传成功
+    successHandle(response, file, fileList) {
+
+      this.fileList = fileList
+      this.successNum++
+      if (response && response.code === 0) {
+        if (this.num === this.successNum) {
+          // 回写文件的订单属性
+          let ossRet = response.ossEntity
+          let ossTo = {
+            id: ossRet.id,
+            fileType: this.fileMappingDto.fileType,
+            orderRef1: this.fileMappingDto.orderRef1,
+            orderRef2: this.fileMappingDto.orderRef2,
+            orderRef3: this.fileMappingDto.orderRef3,
+          }
+          updateOssRef(ossTo).then(({data}) => {
+            if (data.code == 0) {
+              this.$confirm('操作成功, 是否继续操作?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).catch(() => {
+                this.visible = false
+              })
+            }else {
+             this.$message.warning('上传失败,请重新上传')
+            }
+          })
+        }
+      } else {
+        this.$message.error(response.msg)
+      }
+    },
+    // 弹窗关闭时
+    closeHandle() {
+      this.fileList = []
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>