ha-mes-vue/src/views/modules/taskmanage/task-file-upload-list.vue

<template>
  <div>
    <el-dialog v-drag
      :title="'附件列表'"
      :close-on-click-modal="false"
      width="666px"
      :visible.sync="visible">
      <el-form :model="dataForm" :inline="true" label-position="top" ref="dataForm"
               label-width="80px">
        <el-row style="margin-top: -5px">
          <el-col :span="24">
            <!--            <el-form-item label="附件">-->
            <!--              <el-input style="width: 305px; color: red" readonly v-model="dataForm.fileName"></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item style="margin-top: 10px">
              <ftp-upload @childByValue="childByValue"></ftp-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span style="font-size: 12px">附件清单</span>
            <el-table
              :data="fileList"
              border
              :height="height"
              highlight-current-row
              style="width: 100%;">
              <el-table-column
                v-for="(item,index) in columnList" :key="index"
                :sortable="item.columnSortable"
                :prop="item.columnProp"
                :header-align="'center'"
                :show-overflow-tooltip="item.showOverflowTooltip"
                :align="item.align"
                :fixed="item.fixed==''?false:item.fixed"
                :width="item.columnWidth"
                :label="item.columnLabel">
                <template slot-scope="scope">
                  <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
                  <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                     style="width: 100px; height: 80px"/></span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="80"
                label="操作">
                <template slot-scope="scope">
                  <el-link type="text" size="small" @click="downFtpFile(scope.row)"> 下载 </el-link>
                  <el-link type="text" size="small" @click="deleteHandle(scope.row.id)">| 删除</el-link>
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">取消</el-button>
    </span>
    </el-dialog>

  </div>

</template>

<script>
  import {ossList,downFtpFileNotFtp} from '@/api/ftp/oss.js'
  import Vue from "vue";
  import FtpUpload from '@/views/modules/common/ftp-upload.vue'
  import axios from "axios";

  export default {
    data() {
      return {
        visible: false,
        height: 200,
        // 展示列集
        columnList: [
          {
            columnProp: "businessType",
            columnLabel: "附件类型",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            columnProp: "fileName",
            columnLabel: "文件名",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            columnProp: "fileType",
            columnLabel: "文件类型",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 80,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            columnProp: "createdBy",
            columnLabel: "上传人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 100,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            columnProp: "createDate",
            columnLabel: "上传时间",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 130,
            format: null,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          }

        ],
        dataListSelections: [],
        dataForm: {},
        fileList: []
      }
    },
    components: {
      FtpUpload
    },
    methods: {
      init(val) {
        this.dataForm = val
        this.visible = true
        this.getDataList()
      },
      childByValue(childValue) {
        // childValue就是子组件传过来的值
        this.dataForm.fileName = childValue.fileName
        this.fileList.push(childValue)
        // 回写关键字段
        let dto = {
          id: childValue.id,
          orderRef1: this.dataForm.orderRef3,
          orderRef2: this.dataForm.orderRef3,
          orderRef3: this.dataForm.orderRef3,
          fileTypeCode: this.dataForm.fileTypeCode,
          businessType: '任务附件',
        }
        this.updateOrderRef(dto)
      },
      // 附件列表
      getDataList() {
        ossList(this.dataForm).then(({data}) => {
          if (data && data.code == 0) {
            this.fileList = data.data
          } else {
            this.fileList = []
          }
        })
      },
      // 回写关键字段
      updateOrderRef(val) {
        this.$http({
          url: this.$http.adornUrl('/sys/oss/uploadSysOss'),
          method: 'post',
          data: this.$http.adornData(val, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
            this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 下载附件
      downFtpFile(row) {
        // axios.get('/api/ftp/file/downFtpFile/' + row.id, {
        //   responseType: 'blob',
        //   headers: {
        //     'Content-Type': 'application/json',
        //     'token': Vue.cookie.get('token')
        //   }
        // }).then(({data}) => {
        downFtpFileNotFtp(row)
          .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
          document.body.appendChild(linkNode)
          linkNode.click() // 模拟在按钮上的一次鼠标单击
          URL.revokeObjectURL(linkNode.href) // 释放URL 对象
          document.body.removeChild(linkNode)
          // }
        })
      },
      // 删除
      deleteHandle(id) {
        let ids = [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(() => {
        })
      }
    },
    created() {

    }
  }
</script>