learning-system-portal/src/components/FileCloud/index.vue

<template>
  <div style="min-width: 700px;">
    <el-dialog title="选择图片" :close-on-click-modal="false"  :visible.sync="show" width="60%" :show-close="false"  :modal="false" custom-class="g-dialog">
        <div style="margin: -10px;">
          <div style="display: flex;justify-content: space-between;padding: 5px;border-bottom: 1px solid #e0e0e0;">
            <div style="padding-top: 10px;">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a @click.stop="toRootPath">根目录</a></el-breadcrumb-item>
                <el-breadcrumb-item v-for="(fpath,fidx) in folderPath" :key="fidx">
                  <a @click.stop="toPath(fpath)">{{fpath.name}}</a>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div>
              <el-input placeholder="文件名" style="width: 200px;" clearable v-model="findName" class="input-find">
                  <el-button slot="append" @click="findByName()" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </div>
          <div style="margin-top: 5px;height: 500px;overflow: auto;position: relative;">
            <div class="fitem" :class="item.id == sub.id ? 'fitem_tips':''" v-for="(item,idx) in folderData" :key="idx" >
              <div v-if="!item.folder" class="fitem-image" @click.stop="chooseItem(item)">
                <img fit="scale-down" class="fitem-image" v-if="!item.folder" :src="fileBasePath+item.path">
                <div class="fitem-buttons" v-if="itemChecked.id==item.id">
                    <i style="font-size: 30px;cursor: pointer;color: #0055ff;" class="el-icon-success"></i>
                </div>
              </div>
              <div v-else class="fitem-image" style="padding-left: 50px;" @click.stop="clickFolder(item)">
                <i class="ft" :class="[item.icon==''? 'ft_null':'ft_'+item.icon]"></i>
              </div>
              <div class="fitem-name">
                <span  :title="item.name">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button :disabled="btnDisabled" type="primary" @click="saveChoose()">确认</el-button>
          <el-button  @click="chose()">取消</el-button>

        </div>
    </el-dialog>
  </div>
</template>
<script>
  import apiFilecloud from '@/api/modules/filecloud'
  export default{
    props:{
      show: {
        type: Boolean,
        default:false,
      },
    },
    data(){
        return {
          ys1:true,
          ys2:false,
          sub:{},
          findName:'',
          btnDisabled:true,
          folderPath:[],
          folderData:[],
          loading:false,
          fileBasePath:process.env.VUE_APP_FILE_BASE_URL,
          itemChecked:{}
        }
      },
      mounted:function(){
      	this.loadFolderData();
      },
      methods:{
      	getCurrentFloderId(){
      		var len=this.folderPath.length;
      		var folderId='0';
      		if(len>0){
           	folderId=this.folderPath[len-1].id;
        	}
      		return folderId;
      	},
        loadFolderData(){
          if(this.loading){
            return;
          }
          this.loading=true;
        	var $vue=this;
        	var folderId=this.getCurrentFloderId();
          if(folderId=='-1'){
            return;
          }
        	apiFilecloud.list(folderId).then(rs=>{
        		if(rs.status==200){
              $vue.folderData=rs.result;
        		}else{
        			this.$message.error(rs.message);
        		}
            this.loading=false;
        	});
        },
        findByName(){
          // if(this.findName==''){
          //   return;
          // }
          let $vue=this;
          var folderId=0;
          apiFilecloud.findByName(this.findName).then(rs=>{
          	if(rs.status==200){
              $vue.folderPath=[{id:'-1',name:this.findName+' 搜索结果（'+rs.result.length+'）'}];
          		$vue.folderData=rs.result;
          	}else{
          		this.$message.error(rs.message);
          	}
          });
          //直接查询，填充查询列表内容
        },
        toRootPath(){
        	if(this.folderPath.length>0){
        		this.folderPath=[];
        		this.loadFolderData();
        	}
        },
        toPath(pathInfo){
        	var newPaths=[];
        	this.folderPath.some(function(p){
        		newPaths.push(pathInfo);
        		if(p.id==pathInfo.id){
        			return true;
        		}else{
        			return false;
        		}
        	});
        	this.folderPath=newPaths;
        	this.loadFolderData();
        },
        clickFolder(row){
          this.sub = row;
          if(this.loading){
            return;
          }
          let pathLen=this.folderPath.length;
          if(pathLen>0){
            if(this.folderPath[pathLen-1].id!=row.id){
              this.folderPath.push({
              	id:row.id,
              	name:row.name
              });
            }
          }else{
            this.folderPath.push({
            	id:row.id,
            	name:row.name
            });
          }

        	this.loadFolderData();
        },
        chooseItem(item){
          this.itemChecked=item;
          this.btnDisabled=false;

        },
        chose(){
          this.$emit("close");
        },
        saveChoose(){
          //选择当前选中的
          this.$emit("choose",this.itemChecked);
          this.itemChecked={};
        }
      }
    }
</script>

<style lang="scss" scoped>
  @import url('../../assets/styles/filetypes.css');
  .filebtn{
    position: absolute;
    bottom: 20px;
    left: 80%;
  }
  .xpage{
    padding: 10px;
  }
  .fl-header{
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 10px;
  }
  .input-find{
    margin-right: 10px;
  }
  .fitem{
    text-align: center;
    position: relative;
    padding: 5px;
    width: 170px;
    height: 130px;
    display: inline-block;
    margin: 5px;
    .fitem-image{
      width: 160px;
      height:90px;
      line-height: 90px;
      .fitem-buttons{
        position: absolute;
        height: 45px;
        display: block;
        top:0px;
        left: 0px;
        line-height: 45px;
        text-align: center;
        width: 100%;
      }
    }
    .fitem-name{
      text-align: center;padding: 5px;
      white-space:nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
    }
  }
  .fitem_tips{

     border: 1px solid #dadada;
    background-color: #edf6ff;
  }
  .fitem:hover{
    border: 1px solid #dadada;
    background-color: #edf6ff;
  }
  .table{
    width: 100%;
    th{
      line-height: 30px;
    }
    td{
      padding: 5px;
      line-height: 30px;
      border-bottom: 1px solid #ececec;
    }
  }
</style>