eta_front/src/views/report_manage/cloudDisk.vue

<template>
  <div id="cloud-disk-container">
    <div class="top-zone">
      <div class="button-zone" v-show="tableSelection && tableSelection.length!=0">
        <el-button v-permission="permissionBtn.cloudDisk.cloudDisk_download"
            class="download-button" @click="downloadBatch">{{$t('ReportManage.CloudPage.column_download_btn')}}</el-button>
        <el-button v-permission="permissionBtn.cloudDisk.cloudDisk_del"
            type="danger" style="min-width: 112px;" @click="removeBatch" v-if="buttonPermission.batchDelete">{{$t('ReportManage.CloudPage.column_delete_btn')}}</el-button>
      </div>
      <div class="button-zone" v-show="(!tableSelection || tableSelection.length==0) && keyword==''">
        <el-button type="primary" v-permission="permissionBtn.cloudDisk.cloudDisk_newDir"
            @click="newFloder" v-if="buttonPermission.createMenuAuth">{{ $t('ReportManage.CloudPage.folder_btn') }}</el-button>
        <template v-if="buttonPermission.uploadResourceAuth">
          <el-button v-permission="permissionBtn.cloudDisk.cloudDisk_uploadFile"
          type="primary" style="min-width: 112px;" 
          @click="uploadFilePre" :loading="isUploading">{{ $t('ReportManage.CloudPage.upload_btn') }}</el-button>
          <el-upload
            action="#"
            ref="upload"
            style="height: 0;width: 0;"
            multiple
            :show-file-list="false"
            :auto-upload="false"
            :on-change="fileChange">
          </el-upload>
        </template>
      </div>
      <div class="search-zone">
        <el-input v-model.trim="keyword" prefix-icon="el-icon-search"
        style="width: 317px;" :placeholder="$t('ReportManage.CloudPage.input_content')" clearable @input="getFileList(null,0)" ></el-input>
      </div>
    </div>
    <div class="table-zone" >
      <div class="bread-crumb-row" v-show="keyword==''">
        <el-breadcrumb>
          <el-breadcrumb-item class="bread-crumb-item" v-for="item in breadCrumbsList" :key="item.name">
            <span @click="breadcrumbsNavigate(item)">{{ item.MenuName }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="table-item">
        <el-table :data="tableData" max-height="700" ref="tableRef" header-row-class-name="custom-table-header"
        @selection-change="selectionChange" @sort-change="sortChange" :select-on-indeterminate="false" 
        @row-click="tableRowClick" :row-class-name="setRowClass">
          <el-table-column
            type="selection" class="select-column"
            width="37" align="right">
          </el-table-column>
          <el-table-column prop="ItemName" show-overflow-tooltip >
            <template slot="header" slot-scope="scope">
              {{ tableSelection.length>0?/* `已选中${tableSelection.length}个文件/文件夹` */$t('ReportManage.CloudPage.selected_msg',{num:tableSelection.length}):$t('ReportManage.CloudPage.column_name') }}
            </template>
            <template slot-scope="{row}">
              <div class="file-name">
                <img :src="iconGetMap(row)" />
                <span class="active-file-name">{{ row.ItemName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('ReportManage.CloudPage.column_author')" prop="AdminName" width="112" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{ row.AdminName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('ReportManage.CloudPage.column_creation_time')" prop="CreateTime" sortable="custom" width="190">
            <template slot-scope="{row}">
              {{ row.CreateTime }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('ReportManage.CloudPage.column_font')" prop="SizeName" width="140" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              {{ keyword==''? $t('ReportManage.CloudPage.column_font'):'所在目录' }}
            </template>
            <template slot-scope="{row}">
              <span v-show="keyword==''">{{row.SizeName}}</span>
              <span v-show="keyword!=''" @click="navigateFolder(row)" class="file-parent-menu" >{{row.ParentName || '--'}}</span>
            </template>
          </el-table-column>
          <el-table-column width="40">
            <template slot-scope="{row}" >
              <el-dropdown v-if="isDropDownShow"
                @command="(type)=>handleCommand(type,row)" class="more-operation" >
                <span class="el-dropdown-link" @click="(e)=> e.stopPropagation()">
                  <i class="el-icon-more el-icon--right" style="font-size: 24px;cursor: pointer;"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="rename" v-permission="permissionBtn.cloudDisk.cloudDisk_rename"
                    v-if="row.ButtonAuth.RenameAuth">{{$t('ReportManage.CloudPage.column_rename_btn')}}</el-dropdown-item>
                  <el-dropdown-item command="download" v-permission="permissionBtn.cloudDisk.cloudDisk_download"
                    >{{$t('ReportManage.CloudPage.column_download_btn')}}</el-dropdown-item>
                  <el-dropdown-item command="remove" v-permission="permissionBtn.cloudDisk.cloudDisk_del"
                    ><span style="color:#D1433A ;" v-if="row.ButtonAuth.DelAuth" >{{$t('ReportManage.CloudPage.column_delete_btn')}}</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <template slot="empty" >
            <div style="padding: 140px 0">
              <tableNoData :text="$t('ReportManage.CloudPage.table_no_file')"/>
            </div>
          </template>
        </el-table>
      </div>
    </div>
    <!-- 新建文件夹、重命名弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="newDialogShow" :close-on-click-modal="false" 
    :modal-append-to-body="false" @closed="closeNewDialog" width="408px" id="newOrRename">
      <el-form :model="newOrRenameForm" ref="newOrRenameForm">
        <el-form-item prop="itemValue" :rules="{required:true,message:$t('ReportManage.CloudPage.rules_prompt'),trigger:'blur'}">
          <el-input v-model="newOrRenameForm.itemValue" :placeholder="$t('ReportManage.CloudPage.input_file_name')" style="width: 100%;"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="newDialogShow=false" size="small">{{$t('Dialog.cancel_btn')}}</el-button>
        <el-button type="primary" @click="newOrRenameConFirm" size="small" style="margin-left: 4px;" >
          {{ dialogTitle==$t('ReportManage.CloudPage.folder_btn')?$t('ReportManage.CloudPage.create_btn') :$t('Dialog.confirm_btn')}}
        </el-button>
      </template>
    </el-dialog>
    <!-- 选择文件夹弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="chooseFolderDiaShow" :close-on-click-modal="false" top="5vh"
    append-to-body width="640px" @closed="closeChooseFolderDia" >
      <div class="choose-folder-box" id="choose-folder-box">
        <div class="folder-item">
          {{$t('ReportManage.CloudPage.folder_location')}}：<span>{{ folderPath || '--' }}</span>
        </div>
        <el-scrollbar style="height:470px;overflow-x: hidden;width: 100%;">
          <el-tree :data="treeData" icon-class="none" @node-click="chooseFolder"
          :props="{label:'MenuName',value:'MenuId',children:'Children'}" :indent="42" node-key="id" v-if="chooseFolderDiaShow">  
            <div slot-scope="{ node, data }" class="folder-tree-item">
              <div class="folder-tree-name">
                <img src="../../assets/icons/folder.svg" />
                <span :style="{'color':node.isCurrent?'#409EFF':'unset'}">{{ node.label}}</span>
              </div>
              <i class="el-icon-caret-bottom" style="color: #C0C4CC;transition: all .3s ease-in;" 
              :style="{'transform':node.expanded?'rotate(180deg)':''}"
              v-show="node.childNodes.length>0"></i>
            </div>
          </el-tree>
        </el-scrollbar>
      </div>
      <div class="choose-dialog-footer">
        <el-button type="primary" @click="chooseFolderconFirm" size="medium" style="margin-left: 26px;width: 100px;">{{$t('Dialog.confirm_btn')}}</el-button>
        <el-button @click="chooseFolderDiaShow=false" size="medium" style="width: 100px;">{{$t('Dialog.cancel_btn')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {cloudDiskInterface} from '@/api/api.js'
import {downloadByFlow} from '@/utils/common.js'
import {downloadFileByUrl} from '@/api/http.js'
import streamSaver from 'streamsaver'
import 'streamsaver/examples/zip-stream'
  export default {
    name:"cloudDisk",
    watch:{
      currentMenuId(value){
        // 保存目录ID
        sessionStorage.setItem('cloudDiskMenuId',value)
      }
    },
    data() {
      return {
        keyword:'',
        currentMenuId:0,
        // 上传的目录ID
        uploadMenuId:0,
        sortType:0,
        tableData:[],
        // 操作按钮权限
        buttonPermission:{
          createMenuAuth:false,
          uploadResourceAuth:false,
          batchDelete:false
        },
        treeData:[],
        breadCrumbsList:[],
        tableSelection:[],
        currentRow:{},
        // 是否需要重新请求树形文件夹数据
        shouldRequestTree:false,
        // -----------------------------------------------------弹窗
        // 弹窗标题 会用来判断是 重命名 还是 新建文件夹
        dialogTitle:'',
        // -----------新建文件夹、重命名弹窗
        newDialogShow:false,
        newOrRenameForm:{
          itemValue:''
        },
        //-------上传
        timer:null,
        // 是否在上传中
        isUploading:false,
        folderPath:'',
        // 选择文件弹窗
        chooseFolderDiaShow:false,

        staticFileIco: require('@/assets/img/cloudDisk/file_icon.png'),
        staticImageIco: require('@/assets/img/cloudDisk/img_icon.png'),
        staticWordIco: require('@/assets/img/cloudDisk/word_icon.png'),
        staticExcelIco: require('@/assets/img/cloudDisk/excel_icon.png'),
        staticPptIco: require('@/assets/img/cloudDisk/ppt_icon.png'),
        staticPdfIco: require('@/assets/img/cloudDisk/pdf_icon.png'),
        staticVideoIco: require('@/assets/img/cloudDisk/video_icon.png'),
        staticAudioIco: require('@/assets/img/cloudDisk/audio_icon.png'),
        staticConfigIco: require('@/assets/img/cloudDisk/config_icon.png'),
      }
    },
    watch:{
      shouldRequestTree(value){
        if(value){
          // 重新请求树形文件夹数据
          this.getMenuTree()
          this.shouldRequestTree=false
        }
      }
    },
    computed:{
        //是否展示el-dropdown
        isDropDownShow(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.cloudDisk.cloudDisk_rename
            )||this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.cloudDisk.cloudDisk_download
            )||this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.cloudDisk.cloudDisk_del
            )
        }
    },
    methods:{
      // 获取文件夹dom树
      getMenuTree(){
        cloudDiskInterface.fileTreeList().then(res=>{
          if(res.Ret == 200){
            this.treeData = res.Data || []
          }
        })
      },
      // 获取文件列表
      getFileList(menuId,sortType){
        this.sortType=(sortType || sortType==0)?sortType:this.sortType
        this.currentMenuId=(menuId || menuId==0)?menuId:this.currentMenuId
        let params={
          Keyword:this.keyword,
          SortType:this.sortType,
          MenuId:this.currentMenuId
        }
        cloudDiskInterface.filelist(params).then(res=>{
          if(res.Ret == 200){
            this.tableData = res.Data.List || []
            this.buttonPermission.createMenuAuth = res.Data.CreateMenuAuth
            this.buttonPermission.uploadResourceAuth = res.Data.UploadResourceAuth
            this.buttonPermission.batchDelete = res.Data.BatchDelAuth
            let temArr = res.Data.ListPath || []
            this.breadCrumbsList = res.Data.ListPath?[{MenuId:0,MenuName:this.$t('ReportManage.CloudPage.everything'),Selected:false,Sort:0}].concat(temArr):[]
          }
        })
      },
      // 刷新列表 - 节流 
      refreshFileList:_.throttle(function(){
        this.getFileList(null,0)
        this.$refs.tableRef.clearSort()
      }, 500,{
        leading: false,
        trailing: true
      }),
      // 面包屑跳转
      breadcrumbsNavigate(item){
        if(item.Selected){
          return 
        }
        this.$refs.tableRef.clearSort()
        this.getFileList(item.MenuId,0)
      },
      // 新建文件夹
      newFloder(){
        this.dialogTitle= this.$t('ReportManage.CloudPage.folder_btn')
        this.newDialogShow=true
        this.newOrRenameForm.itemValue=""
      },
      // 上传文件
      uploadFilePre(){
        if(this.currentMenuId == 0){
          this.dialogTitle= this.$t('ReportManage.CloudPage.select_folder_title')
          this.chooseFolderDiaShow=true
        }else{
          this.uploadMenuId = this.currentMenuId
          this.$refs.upload.$el.getElementsByTagName('input')[0].click()
        }
      },
      chooseFolder(data,Node){
        // console.log(Node);
        let pathArray = []
        const getPath=(Node)=>{
          pathArray.unshift(Node.data.MenuName)
          if(Node.parent && Node.parent.level!=0){
            getPath(Node.parent)
          }
        }
        getPath(Node)
        this.folderPath=pathArray.join(' / ')
        this.uploadMenuId = Node.data.MenuId
      }, 
      // 选择文件夹确认
      chooseFolderconFirm(){
        if(!this.uploadMenuId || this.uploadMenuId==0){
          this.$message.error( this.$t('ReportManage.CloudPage.upload_folder_error_msg'))
          return 
        }
        this.$refs.upload.$el.getElementsByTagName('input')[0].click()
      },
      closeChooseFolderDia(){
        this.folderPath=''
        this.uploadMenuId=0
      }, 
      //上传文件 - 文件改变 - 收集所有上传的文件
      fileChange(fileList){
        let realFileList = fileList
        if(!Array.isArray(fileList)){
          realFileList=[fileList]
        }
        this.checkFileRepeat(realFileList)
      },
      // 检测文件是否重复
      checkFileRepeat(fileList){
        if (this.timer) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        this.timer = setTimeout(() => {
          // 上传之前先检验
          let fileNames = fileList.map(it => it.name)
          cloudDiskInterface.checkFileNamesIsRepeat({MenuId:parseInt(this.uploadMenuId),FileNames:fileNames}).then(res=>{
            // 文件名列表中只要有重名的，提示重名
            if(res.Ret == 200){
              let result = res.Data || []
              let haveRepeatFiles = result.filter(item => {
                if(item.IsRepeat){
                  return item
                }
              })
              // console.log(haveRepeatFiles);
              if(haveRepeatFiles && haveRepeatFiles.length>0){
                // 有重复
                this.$confirm(haveRepeatFiles.map(it => it.OriginName).join('，')+this.$t('ReportManage.CloudPage.upload_please_error_msg'), this.$t('Confirm.prompt'),{
                  type:'warning',
                  confirmButtonText: this.$t('ReportManage.CloudPage.upload_confirm_btn'),
                }).then(res=>{
                  this.uploadFiles(fileList,result)
                }).catch(() => { 
                  this.$refs.upload.clearFiles() 
                  this.chooseFolderDiaShow=false
                })
              }else{
                this.uploadFiles(fileList,result)
              }
            }
          })
        }, 500);
      },
      // 上传文件
      uploadFiles(files,nameList){
        this.isUploading=true
        let uploadLoading=this.$message({
          type:"info",
          message:/* '上传中，请稍后······' */this.$t('ReportManage.CloudPage.upload_msg'),
          duration:0,
          iconClass:'el-icon-loading'
        })
        let uploadNumber = 0
        files.map((item,index) =>{
          let formData = new FormData()
          formData.append('file',item.raw)
          formData.append('MenuId',this.uploadMenuId)
          formData.append('OriginName',nameList[index].AvailableName)
          cloudDiskInterface.uploadFile(formData).then(res=>{
            if(res.Ret == 200){
              this.$message.success(`${res.Data.ResourceName}${res.Data.ResourceSuffix}` + this.$t('ReportManage.CloudPage.upload_success_msg') )
              this.refreshFileList()
            }
          }).finally(()=>{
            uploadNumber++
            if(uploadNumber == files.length){
              uploadLoading.close()
              this.isUploading=false
              this.chooseFolderDiaShow=false
              this.$refs.upload.clearFiles()
            }
          })
        })
      },
      // 重命名
      renameFile(row){
        this.currentRow=row
        this.dialogTitle=this.$t('ReportManage.CloudPage.column_rename_btn')
        this.newDialogShow=true
        let realName;
        if(row.ItemType == 1){
          // 文件夹
          realName=row.ItemName
        }else if(row.ItemType == 2){
          // 文件 - 去掉后缀
          let lastIndex = row.ItemName.lastIndexOf('.')
          realName = row.ItemName.substring(0,lastIndex)
        }
        this.newOrRenameForm.itemValue=realName
      },
      // 去对应文件夹
      navigateFolder(row){
        window.event.stopPropagation()
        this.keyword=''
        this.getFileList(row.ParentId,0)
      },
      // 下载文件夹 - 压缩包
      downloadFloder(zipName = '新建文件夹.zip',files){
        const that=this;
        return new Promise((resolve,reject)=>{
          try {
            const zipFileOutputStream = streamSaver.createWriteStream(zipName); 
            const fileIterator = files.values();   
            const readableZipStream = new ZIP({  
              async pull(ctrl) {  
                const fileInfo = fileIterator.next();  
                if (fileInfo.done) {//迭代终止  
                    ctrl.close();  
                } else {  
                  const {ResourceName, ResourceUrl} = fileInfo.value;  
                  return fetch(ResourceUrl).then(res => {  
                    ctrl.enqueue({  
                        name:ResourceName,  
                        stream: () => res.body  
                    });  
                  }).catch((err)=>{
                    that.$message.error(err.message)
                    reject(err.message)
                  })
                }
              }
            })
            if (window.WritableStream && readableZipStream.pipeTo) {  
              // 开始下载  
              readableZipStream  
                .pipeTo(zipFileOutputStream)  
                .then(() => {
                  resolve()
                });  
            }else{
              this.$message.error(/* '浏览器不支持' */this.$t('MsgPrompt.browser_not_support'))
              reject('浏览器不支持')
            }
          } catch (error) {
            this.$message.error(error.message)
            reject(error.message)
          }
        })
      },
      // 下载文件
      downloadFile(row){
        if(row.Size === 0) return this.$message.warning(this.$t('ReportManage.CloudPage.download_msg'))
        let downloadHint = this.$message({
          type:"info",
          message:row.ItemName+/* '开始下载,请勿重复下载' */this.$t('ReportManage.CloudPage.download_info_msg'),
          duration:0,
          iconClass:'el-icon-loading'
        })
        if(row.ItemType==1){
          // 下载压缩包
          cloudDiskInterface.getFilesByMenuId({MenuId:row.ItemId}).then(res=>{
            if(res.Ret == 200){
              this.downloadFloder(row.ItemName+'.zip',res.Data || []).then(res=>{
                this.$message.success(row.ItemName + this.$t('ReportManage.CloudPage.download_success_msg') )
              }).finally(()=>{
                downloadHint.close()
              })
            }
          }).catch(()=>{
            downloadHint.close()
          })
        }else if(row.ItemType==2){
          this.handleDownloadResource(row.ResourceUrl,row.ItemName,()=>{
            this.$message.success(row.ItemName + this.$t('ReportManage.CloudPage.download_success_msg'))
            downloadHint.close()
          },()=>{
            this.$message.error(row.ItemName + /* '下载失败' */this.$t('ReportManage.CloudPage.download_fail_msg'))
            downloadHint.close()
          })
        }
      },
      downloadBatch(){
        if(!this.tableSelection || this.tableSelection.length==0){
          this.$message.warning(/* '请至少选择一个文件/文件夹' */ this.$t('ReportManage.CloudPage.download_banch_msg'))
          return
        }
        let emptyFolders=this.tableSelection.filter(it => it.Size==0)
        let downloadHint = this.$message({
          type:"info",
          message:this.$t('ReportManage.CloudPage.download_info_msg'),
          duration:0,
          iconClass:'el-icon-loading'
        })
        setTimeout(()=>{
          if(emptyFolders.length==0) return 
          if(emptyFolders.length == this.tableSelection.length){
            downloadHint.close()
            this.$refs.tableRef.clearSelection()
          }
          this.$message.warning(`【${emptyFolders.map(it => it.ItemName).join('、')}】`+/* '文件夹为空，暂不支持下载' */this.$t('ReportManage.CloudPage.download_msg'))
        },0)
        let downNumber = 0
        let selectLength = this.tableSelection.length-emptyFolders.length
        this.tableSelection.map(item=>{
          if(item.Size == 0) return 
          if(item.ItemType==1){
            // 下载压缩包
            cloudDiskInterface.getFilesByMenuId({MenuId:item.ItemId}).then(res=>{
              if(res.Ret == 200){
                this.downloadFloder(item.ItemName+'.zip',res.Data || []).then(res=>{
                  this.$message.success(item.ItemName + this.$t('ReportManage.CloudPage.download_success_msg'))
                }).finally(()=>{
                  downNumber++
                  // 请求下载的数量等于所选的数组长度时，去掉loading
                  if(downNumber == selectLength){
                    downloadHint.close()
                    this.$refs.tableRef.clearSelection()
                  }
                })
              }else{
                downNumber++
              }
            }).catch(()=>{
              downNumber++
              // 请求下载的数量等于所选的数组长度时，去掉loading
              if(downNumber == selectLength){
                downloadHint.close()
                this.$refs.tableRef.clearSelection()
              }
            })
          }else if(item.ItemType==2){
            // 下载文件
            
            const that = this
            this.handleDownloadResource(item.ResourceUrl,item.ItemName,()=>{
                this.$message.success(item.ItemName + this.$t('ReportManage.CloudPage.download_success_msg'))
                downloadHint.close()
                downNumber++
                if(downNumber == selectLength){
                    downloadHint.close()
                    that.$refs.tableRef.clearSelection()
                }
            },()=>{
                this.$message.error(item.ItemName + /* '下载失败' */this.$t('ReportManage.CloudPage.download_fail_msg'))
                downloadHint.close()
                downNumber++
                if(downNumber == selectLength){
                    downloadHint.close()
                    that.$refs.tableRef.clearSelection()
                }
            })
          }
        })
      }, 
      // 删除文件
      removeFile(row){
        let prop = row.ItemType==1?'removeFolder':'removeFile'
        let params=row.ItemType==1?{MenuId:row.ItemId}:{ResourceId:row.ItemId}
        this.$confirm(this.$t('MsgPrompt.delete_info_msg'),this.$t('ReportManage.CloudPage.column_delete_btn'),{
          type:'warning'
        }).then(res=>{
          cloudDiskInterface[prop](params).then(res=>{
            if(res.Ret == 200){
              this.$message.success(this.$t('ReportManage.CloudPage.delete_success_msg'))
              this.shouldRequestTree=true
              this.getFileList()
            }
          })
        }).catch(() => {})
      },
      removeBatch(){
        if(!this.tableSelection || this.tableSelection.length==0){
          this.$message.warning(/* '请至少选择一个文件/文件夹' */this.$t('ReportManage.CloudPage.download_banch_msg'))
          return
        }
        this.$confirm(this.$t('MsgPrompt.delete_info_msg'),this.$t('ReportManage.CloudPage.column_delete_btn'),{
          type:'warning'
        }).then(res=>{
          let MenuIdsArr=[]
          let ResourceIdsArr=[]
          // 分类文件夹和文件的Id
          this.tableSelection.map(it =>{
            if(it.ItemType==1){
              MenuIdsArr.push(it.ItemId)
            }else if(it.ItemType==2){
              ResourceIdsArr.push(it.ItemId)
            }
          })
          let params={
            MenuId:parseInt(this.currentMenuId),
            MenuIds:MenuIdsArr.join(','),
            ResourceIds:ResourceIdsArr.join(','),
          }
          cloudDiskInterface.removeFolderBatch(params).then(res=>{
            if(res.Ret == 200){
              this.$message.success(this.$t('ReportManage.CloudPage.delete_success_msg'))
              this.shouldRequestTree=true
              this.getFileList()
            }
          })
        }).catch(() => {})
      },
      // 新建、重命名弹窗关闭回调
      closeNewDialog(){
        this.newOrRenameForm.itemValue=''
        this.$refs.newOrRenameForm.clearValidate()
      },
      // 新建、重命名-确认
      newOrRenameConFirm(){
        this.$refs.newOrRenameForm.validate((valid)=>{
          if(valid){
            if(this.dialogTitle == this.$t('ReportManage.CloudPage.folder_btn')){
              // 新建
              cloudDiskInterface.addFolder({
                ParentId:this.currentMenuId,
                MenuName:this.newOrRenameForm.itemValue
              }).then(res=>{
                if(res.Ret == 200){
                  this.$message.success(this.$t('ReportManage.CloudPage.folder_success_msg'))
                  this.shouldRequestTree=true
                  this.newDialogShow=false
                  this.$refs.tableRef.clearSort()
                  this.getFileList(null,0)
                }
              })
            }else if(this.dialogTitle == this.$t('ReportManage.CloudPage.column_rename_btn')){
              if(this.currentRow.ItemName == this.newOrRenameForm.itemValue){
                this.newDialogShow=false
                return
              } 
              // 重命名 1 - 文件夹 2 - 文件
              let prop = this.currentRow.ItemType == 1?'renameFolder':'renameFile'
              let params=this.currentRow.ItemType == 1?{
                MenuId:this.currentRow.ItemId,
                MenuName:this.newOrRenameForm.itemValue
              }:{
                ResourceId:this.currentRow.ItemId,
                ResourceName:this.newOrRenameForm.itemValue
              }
              cloudDiskInterface[prop](params).then(res=>{
                if(res.Ret == 200){
                  this.$message.success(this.$t('ReportManage.CloudPage.rename_dialog_success_msg'))
                  this.shouldRequestTree=true
                  this.newDialogShow=false
                  this.getFileList()
                }
              })
            }
          }
        })
      },
      // 设置选中行的样式
      setRowClass({row}){
        // console.log(row,this.tableSelection);
        if(this.tableSelection.some(item => item.ItemId == row.ItemId)){
          return "hover-row-actice"
        }
        return ''
      },
      // 排序
      sortChange({order}){
        this.sortType = order == 'descending'?1:order == 'ascending'?2:0
        this.getFileList()
      },
      // 复选框变化
      selectionChange(value){
        this.tableSelection=value
      },
      // 表格行点击事件 
      tableRowClick(row){
        if(row.ItemType == 1){
          this.currentMenuId = row.ItemId
          this.keyword=''
          this.getFileList(row.ItemId,0)
        }else if(row.ItemType == 2){
          // 预览文件
          let href;
          if(row.ResourceUrl.endsWith('.doc') || row.ResourceUrl.endsWith('.docx')||row.ResourceUrl.endsWith('.ppt')||
          row.ResourceUrl.endsWith('.pptx') || row.ResourceUrl.endsWith('.xls')||row.ResourceUrl.endsWith('.xlsx')){
            //是否是 ppt、doc、xls
            href = 'https://view.officeapps.live.com/op/view.aspx?src='+row.ResourceUrl
          }else{
            href=row.ResourceUrl
          }
          window.open(href, "_blank")
        }
      },
      handleCommand(type,row){
        if(type=='rename'){
          this.renameFile(row)
        }else if(type == 'remove'){
          this.removeFile(row)
        }else{
          this.downloadFile(row)
        }
        // console.log(type,row);
      },

      //静态icon资源
      iconGetMap(item) {

        //文件夹icon
        if(item.ItemIcon.includes('file_type_menu')) return this.staticFileIco
        //img icon
        if(item.ItemIcon.includes('file_type_pic')) return this.staticImageIco
        //其他icon
        if(item.ItemIcon.includes('file_type_unknown')) return this.staticConfigIco
        //音频icon
        if(item.ItemIcon.includes('file_type_audio')) return this.staticAudioIco
        //视频icon
        if(item.ItemIcon.includes('file_type_video')) return this.staticVideoIco
        //word icon
        if(item.ItemIcon.includes('file_type_docx')) return this.staticWordIco
        //excel icon
        if(item.ItemIcon.includes('file_type_xlsx')) return this.staticExcelIco
        //ppt icon
        if(item.ItemIcon.includes('file_type_ppt')) return this.staticPptIco
        //pdf icon
        if(item.ItemIcon.includes('file_type_pdf')) return this.staticPdfIco

      }
    },
    created(){
      this.currentMenuId=sessionStorage.getItem('cloudDiskMenuId') || 0
      this.getFileList()
      this.getMenuTree()
    }
  }
</script>

<style lang="scss" scoped>
  #cloud-disk-container{
    min-height: calc(100vh - 120px);
    box-sizing: border-box;
    .top-zone{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20px 30px;
      margin-bottom: 20px;
      background-color: white;
      .button-zone{
        .download-button{
          min-width: 112px;
          background: #ECF5FF;
          border: 1px solid #95C8FF;
          color: #409EFF;
        }
      }
    }
    .table-zone{
      background-color: white;
      padding: 6px 10px 20px;
      min-height: 700px;
      box-sizing: border-box;
      .bread-crumb-row{
        padding:14px 10px 20px 50px;
        border-bottom: solid 1px #DCDFE6;
        .bread-crumb-item{
          cursor: pointer;
          font-size: 14px;
          &:last-child{
            cursor: text;
            span{
              color: #409EFF;  
            }
          }
        }
      }
      .table-item{
        padding-left: 10px;
        .file-name{
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          img{
            height: 32px;
            width: 32px;
            margin-right: 10px;
          }
          span{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .more-operation{
          visibility: hidden;
        }
      }
    }
  }
// 上传文件弹窗
.choose-folder-box{
  min-height: 500px;
  padding: 0 80px;
  .folder-item{
    font-size: 16px;
    color: #333333;
    margin-bottom: 6px;
  }
  .folder-tree-item{
    border-bottom: 1px solid #DCDFE6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:15px 8px 15px 0;
    overflow: hidden;
    .folder-tree-name{
      overflow: hidden;
      display: flex;
      align-items: center;
      color: #333333;
      span{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      img{
        height: 32px;
        width: 32px;
        margin-right: 10px;
      }
    }
  }
}
.choose-dialog-footer{
  padding: 40px 0;
  text-align: center;
}
</style>
<style lang="scss">
#cloud-disk-container{
  .el-table{
    .custom-table-header{
      th{
        background-color: white!important;
        font-weight: 400;
        padding:7px 0;
      }
    }
    .el-table__body{
      .hover-row-actice{
        background-color: #F0F4FF;
        .active-file-name{
          color: #409EFF;
        }
        .file-parent-menu{
          text-decoration: underline;
        }
        .more-operation{
          visibility: visible;
        }
      }
      tr{
        cursor: pointer;
      }
    }
    tr{
      th,td{
        &:first-child{
          border: none;
        }
      }
    }
    .cell{
      color: #333333;
      padding-left: 0;
      padding-right: 10px;
    }
  }
  .el-table--enable-row-hover{
    .el-table__body{
      tr:hover{
        td{
          background-color: #F0F4FF;
        }
        .active-file-name{
          color: #409EFF;
        }
        .file-parent-menu{
          text-decoration: underline;
        }
        .more-operation{
          visibility: visible;
        }
      }
    }
  }
  // 新建/重命名弹窗
  #newOrRename{
    .el-dialog__footer{
      box-shadow: inset 0px 1px 0px #F0F0F0;
      padding-bottom: 10px;
    }
  }
}
#choose-folder-box{
  .el-scrollbar__wrap{
    overflow: auto;
  }
  .el-tree-node__content{
    height: unset;
    .el-tree-node__expand-icon{
      padding: 0;
    }
  }
}

</style>