vue 拖拽文件、文件夹上传 vue-simple-uploader插件

<!-- 拖拽文件上传 -->
<template lang="html">
  <div class="upload-container">
    <uploader :options="options" :fileStatusText="fileStatusText" @dragenter="dragEnter" @file-progress="onFileProgress" @file-added="onFileAdded" @files-added="onFilesAdded" @complete="onComplete">
      <!-- <uploader-unsupport></uploader-unsupport> -->
      <uploader-drop>
      <!-- <uploader-list></uploader-list> -->
        <!-- <div v-show="showMask" style="position: fixed;width:100%;background-color:rgba(220,220,220,.6);z-index:2042;" :style="{height: height + 72 +'px'}">
          <div style="position:absolute;left:40%;top:50%;text-align:center;margin:-46px 0 0 -48px;">
            <img :src="require('@/assets/images/common/openfile.png')" style="margin-bottom:10px;"/>
            <p style="font-size:16PX;color:#666666;">即将打开文件</p>
          </div>
        </div> -->
        <div class="upload-toolbox">
          <div style="display:inline;">
            <button v-if="!isSee" class="btn-upload ivu-btn" @mouseover="uploadMouseOver" @mouseleave="uploadMouseLeave" @click="uploadClick">
              上传
            </button>
            <div class="panel-upload" v-show="panelShow" @mouseover="uploadMouseOver" @mouseleave="uploadMouseLeave">
              <uploader-btn ref="btnUpload">上传文件</uploader-btn>
              <uploader-btn :directory="true">上传文件夹</uploader-btn>
            </div>
            <!-- <button class="btn-newFolder ivu-btn">新建文件夹</button> -->
            <div class="toolbox-contain">
              <button class="btn-download ivu-btn" @click="multiDownload">下载</button>
              <button v-if="!isSee" class="btn-delete ivu-btn" @click="multiDelete">删除</button>
              <!-- <button class="btn-rename ivu-btn">重命名</button> -->
              <!-- <button class="btn-copy ivu-btn">复制到</button>
              <button class="btn-move ivu-btn">移动到</button> -->
            </div>
          </div>
          <div style="float:right;display:inline-flex;">
            <Input search clearable enter-button v-model="fileInput" placeholder="当前目录搜索文件/文件夹" @on-search="inputSearch" style="width:220px;vertical-align:bottom;margin-right:10px;" class="input-search"/>
            <span class="btn-change" @click="changeMode">
              <icon-svg :name="mode == 'list' ? 'list' : 'grid'" style="font-size:19px;cursor:pointer;"></icon-svg>
            </span>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="upload-contain">
          <div class="contain-head">
            <div class="contain-head-link">
              <span v-if="linkIds.length == 1">全部文件</span>
              <div v-else >
                <div v-for="(item, index) in linkIds" :key="item.id" v-if="index !== linkIds.length - 1" style="display:inline-block;">
                  <a @click="linkTo(item.id)" class="linkIds">{{item.name}}</a>
                  <span style="margin:0 5px;">></span>
                </div>
                <span>{{linkIds[linkIds.length - 1].name}}</span>
              </div>
            </div>
            <div class="contain-head-num">已选中{{selectItems.length}}个文件/文件夹，共{{listData.length}}个</div>
            <div style="clear:both;"></div>
          </div>
          <div class="contain-body">
            <div v-if="mode == 'list'">
              <div class="panel-list" style="position:relative;" :style="{height: height +'px'}">
                <Table ref="tables" v-if="listData.length" :columns="columns" :data="listData" :height="height" :no-data-text="''" @on-selection-change="selectChange"></Table>
                <div v-else style="position:absolute;left:50%;top:50%;text-align:center;margin:-43px 0 0 -36px;">
                  <img style="margin-bottom:10px;" :src="require('@/assets/images/common/nodata.png')">
                  <p style="letter-spacing:1px;">亲，没有你想要的数据</p>
                </div>
              </div>
            </div>
            <div v-if="mode == 'grid'">
              <div v-if="listData.length">
                <div style="border-bottom:1px solid #dcdee2;">
                  <Checkbox v-model="selectAll" class="grid-check" @on-change="gridSelectAll">全选</Checkbox>
                </div>
                <div class="panel-grid" style="overflow-y:auto;" :style="{height: height - 30 +'px'}">
                  <div v-for="item in listData" :key="item.id" class="grid-content" :class="{ actived: item._checked}"
                    @click="/\.pdf|\.png|\.jpg|\.jpeg|\.bmp/.test(item.filePath.toLowerCase()) ? filePreview(item.filePath.replace('c:/tomcat/static', '')) : reloadGridById(item.id, item.fileType, item.fileType === '1' ? item.fileName : item.docName, item.filePath)"
                    @mouseover="mouseoverGrid($event)" @mouseout="mouseoutGrid($event)" >
                    <img class="panel-img1" draggable="false" v-if="/\.png|\.jpg|\.jpeg|\.bmp/.test(item.filePath.toLowerCase())" :src="item.filePath.replace('c:/tomcat/static', fileShowUrl)">
                    <img class="panel-img" draggable="false" v-else :src="item.fileType === '1' ? (/\.pdf/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/pdf.png') : (/\.doc|\.docx/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/doc.png') : (/\.xls|\.xlsx/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/xls.png') : (/\.zip|\.rar|\.7z/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/zip.png') : (/\.ppt/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/ppt.png') : (/\.txt/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/txt.png') : (/\.avi|\.mov|\.qt|\.asf|\.rm|\.navi|\.divx|\.mpeg|\.mpg|\.dat|\.mp4/.test(item.filePath.toLowerCase()) ? require('@/assets/images/common/video.png') : require('@/assets/images/common/file.png')))))))) : require('@/assets/images/common/folder.png')">
                    <div class="panel-title" :title="item.fileType === '1' ? item.fileName : item.docName">{{item.fileType === '1' ? item.fileName : item.docName}}</div>
                    <img class="select-img" @click.stop="panelSelect(item)" :src="require('@/assets/images/common/cloudSelect.png')">
                  </div>
                  <div style="clear:both;"></div>
                </div>
              </div>
              <div v-else style="position:relative;" :style="{height: height +'px'}">
                <div style="position:absolute;left:50%;top:50%;text-align:center;margin:-43px 0 0 -36px;">
                  <img style="margin-bottom:10px;" :src="require('@/assets/images/common/nodata.png')">
                  <p style="letter-spacing:1px;">亲，没有你想要的数据</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Modal ref="mmodal" v-model="isshow" :transfer="false" :title="'上传列表'" :scrollable="true" :mask="false" :footer-hide="true" width="600" :class-name="'modalContain'">
          <!-- <div slot="title">
          </div> -->
          <div slot="close">
            <Icon :type="isMin ? 'md-square-outline' : 'md-remove'" @click.stop="minOrMax" style="font-size:15px;color:#FFF;"/>
            <Icon type="md-close" style="font-size:16px;color:#FFF;"/>
          </div>
          <uploader-list></uploader-list>
        </Modal>
      </uploader-drop>
    </uploader>
    <Modal v-model="deleteModel" title="确认删除操作" @on-ok="handleDelete">
      <p>确定删除选中的文件/文件夹</p>
    </Modal>
    <Dialog ref="dialog" :isPdf="true" :url="diaPath" :defaultHeight="diaHeight"></Dialog>
  </div>
</template>

<script>
import { yunFileDownload, yunMultiFileDownload, yunFileDelete } from '@/api//api-base'
import Dialog from '@/view/modules/common/dialog'
export default {
  data() {
    return {
      listData: [], // 数据
      mode: 'list', // 展示模式
      fileInput: '', // 查询栏值
      selectAll: false, // 是否全选
      selectItems: [], // 已选择的条目
      panelShow: false, // 上传按钮区域是否显示
      linkIds: [{id: '1', name: '全部文件'}], // 导航id
      percent: 0, // 下载进度条
      isshow: false, // 上传进度页面是否显示
      isMin: false, // 上传进度页面是否最小化
      deleteModel: false, // 删除提示框隐藏
      fileShowUrl: window.SITE_CONFIG.fileShowURL,
      diaPath: null, // 预览文件路径
      diaHeight: 500, // 预览文件高度
      isTip: true, // 控制是否提示用户无权限
      fileStatusText: { // 上传列表状态提示
        success: '成功',
        error: '失败',
        uploading: '上传中',
        paused: '暂停',
        waiting: '排队中'
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '文件名',
          key: 'fileName',
          sortable: true,
          sortMethod: (a, b, type) => type === 'asc' ? (a === null ? -1 : (b === null ? 1 : (a > b ? 1 : -1))) : (a === null ? -1 : (b === null ? 1 : (a < b ? 1 : -1))),
          ellipsis: true,
          render: (h, params) => {
            let id = params.row.id
            let fileType = params.row.fileType
            let filePath = params.row.filePath
            if(fileType === '1') { // 普通文件
              let value = params.row.fileName
              if (typeof (value) === 'undefined' || value === null || value === '') {
                value = '--'
              }
              return h('a', {
                attrs: {
                  class: 'link ' + (/\.avi|\.mov|\.qt|\.asf|\.rm|\.navi|\.divx|\.mpeg|\.mpg|\.dat|\.mp4/.test(filePath.toLowerCase()) ? 'video-link' : (/\.ppt/.test(filePath.toLowerCase()) ? 'ppt-link' : (/\.txt/.test(filePath.toLowerCase()) ? 'txt-link' : (/\.png|\.jpg|\.jpeg|\.bmp/.test(filePath.toLowerCase()) ? 'picture-link' : (/\.pdf/.test(filePath.toLowerCase()) ? 'pdf-link' : (/\.doc|\.docx/.test(filePath.toLowerCase()) ? 'doc-link' : (/\.xls|\.xlsx/.test(filePath.toLowerCase()) ? 'xls-link' : (/\.zip|\.rar|\.7z/.test(filePath.toLowerCase()) ? 'zip-link' : 'file-link'))))))))
                },
                domProps: {
                  title: value,
                  innerHTML: value
                },
                on: {
                  click: () => {
                    if(/\.pdf|\.png|\.jpg|\.jpeg|\.bmp/.test(filePath.toLowerCase())) {
                      this.filePreview(filePath.replace('c:/tomcat/static', ''))
                    }else {
                      this.downloadFile(filePath, value, 'file')
                    }
                  }
                }
              })
            }else if(fileType === '2') { // 文件夹
              let value = params.row.docName
              if (typeof (value) === 'undefined' || value === null || value === '') {
                value = '--'
              }
              return h('a', {
                attrs: {
                  class: 'link folder-link'
                },
                domProps: {
                  title: value,
                  innerHTML: value
                },
                on: {
                  click: () => {
                    this.reloadById(id, value)
                  }
                }
              })
            }
          }
        },
        {
          title: '大小',
          sortable: true,
          key: 'fileSize',
          sortMethod: (a, b, type) => type === 'asc' ? (parseInt(a) > parseInt(b) ? 1 : -1) : (parseInt(a) < parseInt(b) ? 1 : -1),
          render: (h, params) => {
            let fileSize = params.row.fileSize
            let value = '--'
            if (typeof (fileSize) === 'undefined' || fileSize === null || fileSize === '') {
            }else {
              fileSize = parseInt(fileSize)
              if(fileSize < 1024) {
                value = fileSize + 'B'
              }else if(fileSize >= 1024 && fileSize < 1024 * 1024) {
                fileSize = parseFloat(fileSize / 1024).toFixed(1)
                value = fileSize + 'KB'
              }else if(fileSize >= 1024 * 1024 && fileSize < 1024 * 1024 * 1024) {
                fileSize = parseFloat(fileSize / (1024 * 1024)).toFixed(1)
                value = fileSize + 'MB'
              }else if(fileSize >= 1024 * 1024 * 1024 && fileSize < 1024 * 1024 * 1024 * 1024) {
                fileSize = parseFloat(fileSize / (1024 * 1024 * 1024)).toFixed(1)
                value = fileSize + 'GB'
              }
            }
            return h('span', value + '')
          }
        },
        {
          title: '修改日期',
          sortable: true,
          key: 'createTime'
        }
      ],
      options: {
        target: 'url',
        headers: {
          token: this.$cookie.get('token')
        },
        allowDuplicateUploads: true,
        query: {
          flag: this.flag
        },
        parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
          return parsedTimeRemaining
            .replace(/\syears?/, '年')
            .replace(/\days?/, '天')
            .replace(/\shours?/, '小时')
            .replace(/\sminutes?/, '分钟')
            .replace(/\sseconds?/, '秒')
        },
        chunkSize: 1024 * 1024 * 1024 * 1024,
        testChunks: false
      }
    }
  },
  components: {
    Dialog
  },
  props: {
    height: {
      type: Number,
      default: 500
    },
    flag: {
      type: String,
      default: ''
    },
    isSee: { // 是否有操作权限
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  created() {
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight
      },
      set(val) {
        this.$store.commit('common/updateDocumentClientHeight', val)
      }
    }
  },
  methods: {
    // 初始化预览框高度
    initDialogHeight() {
      this.diaHeight = this.documentClientHeight
    },
    // 改变页面布局
    changeMode() {
      if(this.mode === 'list') {
        this.mode = 'grid'
      }else if(this.mode === 'grid') {
        this.mode = 'list'
      }
    },
    // 列表某一项改变时触发
    selectChange(selection) {
      this.selectItems = selection
    },
    dragEnter(e) {
      if(this.isTip) {
        if(this.isSee) {
          this.$Message.error('您没有上传权限')
        }
        this.isTip = false
        setTimeout(() => {
          this.isTip = true
        }, 3000)
      }
    },
    // 文件上传验证
    onFileAdded(file) {
      if(file.ignored) {
      }else if(this.isSee) {
        file.ignored = true
      }else {
        this.isshow = true
      }
    },
    // 文件夹/多文件上传验证
    onFilesAdded(files, fileList) {
      if(this.isSee) {
        files.ignored = true
      }else {
        this.isshow = true
      }
    },
    onFileProgress() {
      // 上传时自动弹出
      this.isMin = false
      this.isshow = true
    },
    // 文件上传成功
    onComplete() {
      // this.$Message.success('上传完毕')
      this.fileInput = ''
      const _this = this
      _this.$emit('reloadList', {
        id: '1',
        fileName: this.fileInput
      })
      this.linkIds = [{id: '1', name: '全部文件'}]
      setTimeout(() => {
        _this.isMin = true
      }, 1000)
    },
    inputSearch(value) {
      this.$emit('reloadList', {
        id: this.linkIds[this.linkIds.length - 1].id,
        fileName: value
      })
    },
    // 下载按钮
    multiDownload() {
      if(this.selectItems.length === 0) {
        this.$Message.warning('请选择至少一个文件或文件夹')
      }else {
        let url = ''
        let fileName = ''
        if(this.selectItems.length === 1) {
          let item = this.selectItems[0]
          url = item.filePath
          fileName = item.fileType === '2' ? (item.docName + '.zip') : item.fileName
          this.downloadFile(url, fileName, item.fileType === '2' ? 'folder' : 'file')
        }else {
          this.selectItems.forEach((item, index) => {
            url += item.filePath + ','
          })
          this.downloadMultiFile(url, '批量下载.zip')
        }
      }
    },
    multiDelete() {
      if(this.selectItems.length === 0) {
        this.$Message.warning('请选择至少一个文件或文件夹')
      }else {
        this.deleteModel = true
      }
    },
    handleDelete() {
      if(this.selectItems.length === 0) {
        this.$Message.warning('请选择至少一个文件或文件夹')
      }else {
        let ids = ''
        this.selectItems.forEach(item => {
          ids += item.id + ','
        })
        let params = {
          ids: ids,
          flag: this.flag
        }
        yunFileDelete(params).then(res => {
          if (res.status) {
            // 删除成功状态
            this.selectItems = []
            this.$Message.success('成功删除信息')
            // 刷新数据
            this.$emit('reloadList', {
              id: this.linkIds[this.linkIds.length - 1].id,
              fileName: this.fileInput
            })
          }
        })
      }
    },
    filePreview(url) {
      this.diaPath = url // 附件路径
      this.$refs.dialog.open()
    },
    // 导航跳转
    linkTo(id) {
      this.fileInput = ''
      this.$emit('reloadList', { // 刷新数据
        id: id,
        fileName: this.fileInput
      })
      this.selectItems = [] // 清空已选择文件
      for(let i = 0; i < this.linkIds.length; i++) {
        if(this.linkIds[i].id === id) {
          this.linkIds.splice(i + 1, this.linkIds.length - 1 - i)
          break
        }
      }
    },
    // 文件层级跳转 及拼接导航
    reloadById(id, name) {
      this.linkIds.push({'id': id, 'name': name})
      this.selectItems = [] // 清空已选择文件
      this.fileInput = ''
      this.$emit('reloadList', { // 刷新数据
        id: id,
        fileName: this.fileInput
      })
    },
    reloadGridById(id, type, name, path) {
      if(type === '1') { // 文件下载
        this.downloadFile(path, name, 'file')
      }else if(type === '2') { // 文件夹下载
        this.reloadById(id, name)
      }
    },
    // 平铺面板的移入移出事件
    mouseoverGrid(e) {
      // e.target.$el.addClass('abc')
      e.currentTarget.className += ' isMove'
    },
    mouseoutGrid(e) {
      // e.target.$el.addClass('abc')
      e.currentTarget.className = e.currentTarget.className.replace(/ isMove/g, '')
    },
    // 平铺面板的选中/取消事件
    panelSelect(item) {
      item._checked = !item._checked
      if(item._checked) {
        this.selectItems.push(item)
      }else {
        for(let i = 0; i < this.selectItems.length; i++) {
          if(this.selectItems[i].id === item.id) {
            this.selectItems.splice(i, 1)
            break
          }
        }
      }
    },
    // 平铺面板全选按钮事件
    gridSelectAll(bool) {
      if(bool) {
        this.selectItems = JSON.parse(JSON.stringify(this.listData))
      }else {
        this.selectItems = []
      }
    },
    minOrMax() {
      this.isMin = !this.isMin
    },
    // 上传列表最大最小化公共方法
    minChange() {
      if(this.isMin) {
        this.$refs.mmodal.$el.children[0].children[0].style.top = this.height + 168 + 'px'
        // this.$refs.mmodal.$children[2].$el.style.height = '0px'
        // this.$refs.mmodal.$children[2].$el.parentElement.style.padding = '0px'
      }else {
        this.$refs.mmodal.$el.children[0].children[0].style.top = (this.height + 168) * 0.6 + 'px'
        // this.$refs.mmodal.$children[2].$el.style.height = (this.height + 190) * 0.4 - 76 + 'px'
        // this.$refs.mmodal.$children[2].$el.parentElement.style.padding = '0.21333rem'
      }
      this.$refs.mmodal.$children[2].$el.style.height = (this.height + 168) * 0.4 - 27 + 'px'
    },
    // 模拟上传文件按钮
    uploadClick() {
      this.$refs.btnUpload.$el.click()
    },
    uploadMouseOver() {
      this.panelShow = true
    },
    uploadMouseLeave() {
      this.panelShow = false
    },
    // 仅用于单个文件下载
    downloadFile(url, fileName, flag) {
      const _this = this
      _this.percent = 0
      _this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Progress', {
              style: {
                width: '300px'
              },
              props: {
                percent: _this.percent
              }
            }, fileName.slice(0, 10) + '...' + fileName.slice(-10) + '下载中...' + _this.percent + '%')
          ])
        }
      })
      if (/\.pdf|\.PDF/.test(url)) {
        const interval = setInterval(() => {
          if (_this.percent === 10) {
            _this.downloadMethod(url, fileName, flag)
          }
          if (_this.percent >= 80) {
            clearInterval(interval)
            return
          }
          _this.percent += 10
        }, 500)
      } else {
        const interval = setInterval(() => {
          if (_this.percent === 50) {
            _this.downloadMethod(url, fileName, flag)
          }
          if (_this.percent >= 50) {
            clearInterval(interval)
            return
          }
          _this.percent += 10
        }, 100)
      }
    },
    downloadMethod(url, fileName, flag) {
      const _this = this
      url = url.replace(/\\/g, '/')
      // 下载pdf
      let params = {
        path: url,
        flag: flag
      }
      yunFileDownload(params).then(res => {
        _this.closeProgress()
        let blob = new Blob([res.data])
        let objectUrl = URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.href = objectUrl
        link.setAttribute('download', fileName) // 下载文件的名字
        document.body.appendChild(link)
        link.style.display = 'none'
        link.click()
        document.body.removeChild(link)
      })
    },
    closeProgress() {
      const _this = this
      const interval = setInterval(() => {
        if (_this.percent >= 100) {
          clearInterval(interval)
          _this.$Message.success('文件下载成功')
          _this.$Spin.hide()
          return
        }
        _this.percent += 10
      }, 100)
    },
    // 仅用于多个文件下载
    downloadMultiFile(url, fileName) {
      const _this = this
      _this.percent = 0
      _this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Progress', {
              style: {
                width: '300px'
              },
              props: {
                percent: _this.percent
              }
            }, fileName.slice(0, 10) + '...' + fileName.slice(-10) + '下载中...' + _this.percent + '%')
          ])
        }
      })
      const interval = setInterval(() => {
        if (_this.percent === 10) {
          _this.downloadMultiMethod(url, fileName)
        }
        if (_this.percent >= 80) {
          clearInterval(interval)
          return
        }
        _this.percent += 10
      }, 500)
    },
    downloadMultiMethod(url, fileName) {
      const _this = this
      url = url.replace(/\\/g, '/')
      // 下载pdf
      let params = {
        paths: url
      }
      yunMultiFileDownload(params).then(res => {
        _this.closeProgress()
        let blob = new Blob([res.data])
        let objectUrl = URL.createObjectURL(blob)
        let link = document.createElement('a')
        link.href = objectUrl
        link.setAttribute('download', fileName) // 下载文件的名字
        document.body.appendChild(link)
        link.style.display = 'none'
        link.click()
        document.body.removeChild(link)
      })
    }
    // 23232
    // initDragEvent() {
    //   window.ondragleave = (e) => {
    //     e.preventDefault()
    //   }
    //   window.ondrop = (e) => {
    //     this.uploadFunc(e)
    //   }
    //   window.ondragenter = (e) => {
    //     e.preventDefault() // 阻止拖入时的浏览器默认行为
    //   }
    //   window.ondragover = (e) => {
    //     e.preventDefault() // 阻止拖来拖去的浏览器默认行为
    //   }
    // },
    // uploadFunc(event) {
    //   event.preventDefault()
    //   let files = []
    //   if (event.type === 'drop') {
    //     let fileList = event.dataTransfer.files
    //     let len = fileList.length
    //     for (let i = 0; i < len; i++) {
    //       files[i] = fileList[i]
    //     }
    //     if (files.length) {
    //       let items = event.dataTransfer.items
    //       if (items && items.length && items[0].webkitGetAsEntry != null) {
    //         console.log(1)
    //         this.addFilesItems(items)
    //       }
    //     }
    //   }
    // },
    // addFilesItems(items) {
    //   var ret = []
    //   for (var i = 0; i < items.length; i++) {
    //     var item = items[i]
    //     var entry
    //     if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
    //       console.log(entry)
    //       if (entry.isFile) {
    //         // 把文件对象放到结果数组中  这里的addFile方法要单独写 我没有写上 这个不是重点
    //         ret.push(this.addFile(item.getAsFiles()))
    //       } else if (entry.isDirectory) {
    //         ret.push(this.addFilesFormDirectory(entry, entry.name))
    //       }
    //     }
    //   }
    //   console.log(ret)
    // },
    // addFile(xx) {},
    // // 读取文件夹下的文件
    // addFilesFormDirectory(directory, path) {
    //   const dirReader = directory.createReader()
    //   const readEntries = () => {
    //     return dirReader.readEntries((entries) => {
    //       entries.forEach((entry) => {
    //         console.log(entry)
    //         if (entry.isFile) {
    //           // 如果是文件
    //           entry.file((file) => {
    //             file.fullPath = path + '/' + file.name
    //             console.log(path + '/' + file.name)
    //             // 那么暴露出去的就是'文件夹/q.jpg'这种形式
    //             return this.addFile(file)
    //           })
    //           // return this.addFile(file)
    //         } else if (entry.isDirectory) {
    //           // 递归处理
    //           this.addFilesFormDirectory(entry, path + '/' + entry.name)
    //         }
    //       })
    //     })
    //   }
    //   return readEntries()
    // },
  },
  watch: {
    'dataList': function() {
      this.listData = this.dataList
    },
    'selectItems': function(array) {
      if(this.listData.length > 0) {
        this.listData.forEach(item => {
          item._checked = false
          for(let i = 0; i < array.length; i++) {
            if(item.id === array[i].id) {
              item._checked = true
            }
          }
        })
        if(this.listData.length === array.length) {
          this.selectAll = true
        }else {
          this.selectAll = false
        }
      }
    },
    'height': function(h) {
      this.minChange()
    },
    'isMin': function() {
      this.minChange()
    },
    'documentClientHeight': function() {
      this.initDialogHeight()
    }
  },
  mounted() {
    this.listData = this.dataList
    this.minChange()
    this.initDialogHeight()
    // this.initDragEvent()
  }
}
</script>

<style lang="less" scoped>
.upload-container {
  .uploader-drop {
    padding: 0;
    border: none;
    background-color: inherit;
  }
  .upload-toolbox {
    padding: 10px 20px 10px 10px;
    position: relative;
    .btn-upload {
      color: #FFF;
      background-color: #00A0E9;
      width: 78PX;
    }
    .panel-upload {
      position: absolute;
      top: 53px;
      left: 10px;
      z-index: 1000;
      background-color: #FFF;
      border: 1px solid #00A0E9;
      width: 78PX;
      text-align: center;
      .uploader-btn {
        display: block;
        color: #00A0E9;
        border: none;
        padding: 6px 8px;
        &:hover {
          background-color: #e0e8f3;
        }
      }
    }
    .btn-newFolder {
      color: #00A0E9;
    }
    .toolbox-contain {
      display: inline-block;
      button {
        color: #00A0E9;
      }
    }
    .btn-change {
      // float: right;
      padding-top: 2px;
    }
    .input-search {
      /deep/.ivu-input-icon {
        right: 40PX;
      }
      /deep/.ivu-input {
        padding-right: 23PX;
      }
    }
  }
  .upload-contain {
    .contain-head {
      padding: 3px 20px 5px 10px;
      .contain-head-link {
        float: left;
      }
      .contain-head-num {
        float: right;
      }
    }
    .contain-body {
      .panel-list {
        /deep/.ivu-table-wrapper {
          border: 0px solid #dcdee2;
          .ivu-table th {
            background-color: #FFF;
          }
          .ivu-table td {
            height: 55px;
            position: relative;
          }
          .ivu-table:after {
            width: 0;
          }
        }
      }
      .grid-check {
        margin: 7px 0 7px 25PX;
        /deep/.ivu-checkbox {
          margin-right: 5px;
        }
      }
      .panel-grid {
        .grid-content {
          height: 129PX;
          width: 123PX;
          float: left;
          display: block;
          margin: 1px;
          padding-top: 20px;
          cursor: pointer;
          border-radius: 8px;
          position: relative;
          z-index: 200;
          border: 1px solid #FFF;
          .panel-img {
            display: block;
            width: 70px;
            height: 70px;
            margin: 15PX auto 16PX;
          }
          .panel-img1 {
            display: block;
            width: 90px;
            height: 100px;
            margin: 0px auto 10px;
          }
          .panel-title {
            display: block;
            // width: 100%;
            margin: 0 10px;
            text-align: center;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &:hover {
            background-color: #f6f6f6;
            .panel-title {
              color: #00A0E9;
            }
          }
          .select-img {
            position: absolute;
            left: 8PX;
            top: 8PX;
            width: 22PX;
            height: 22PX;
            z-index: 300;
            display: none;
          }
        }
        .isMove {
          .select-img {
            opacity: .4;
            display: block;
            &:hover {
              opacity: .5;
            }
          }
        }
        .actived {
          border: 1px solid #00A0E9;
          background-color: #f6f6f6;
          .select-img {
            opacity: 1;
            display: block;
            &:hover {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
/deep/.ivu-table-sort {
  width: 15PX;
  height: 12PX;
  i {
    font-size: 14PX;
  }
}
/deep/.ivu-checkbox-inner {
  width: 11px;
}
/deep/.link {
  color: #666666;
  cursor: pointer;
  padding-left: 30PX;
  &:hover {
    color: #00A0E9 !important;
  }
}
/deep/.file-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/file.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.picture-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/picture.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.doc-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/doc.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.xls-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/xls.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.pdf-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/pdf.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.zip-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/zip.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.ppt-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/ppt.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.txt-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/txt.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.video-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/video.png');
    background-size: 24PX 24PX;
    width: 24PX;
    height: 24PX;
    position: absolute;
    margin-left: -32PX;
    margin-top: -6PX;
  }
}
/deep/.folder-link {
  &::before {
    content: '';
    background-image: url('~assets/images/common/folder.png');
    background-size: 26PX 26PX;
    width: 26PX;
    height: 26PX;
    position: absolute;
    margin-left: -34PX;
    margin-top: -6PX;
  }
}
.linkIds {
  color: #00A0E9 !important;
  cursor: pointer;
}
/deep/.ivu-progress-outer{
  margin-bottom: 5px;
}
/deep/.modalContain{
  overflow: hidden;
  .ivu-modal {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    margin: 0 40px 0 0;
    float: right;
    .ivu-modal-content{
      box-shadow: 0 0px 10px rgba(0,0,0,.15);
      border-radius: 6px 6px 0 0;
      .ivu-modal-header {
        background-color: #00A0E9;
        border-radius: 6px 6px 0 0;
        .ivu-modal-header-inner {
          color: #FFF;
        }
      }
      .ivu-modal-body {
        .uploader-list {
          overflow-y: auto;
        }
      }
    }
  }
}
</style>