yos_web/src/components/uploadBindMediaStock/modules/list.vue

<template>
  <div> 
    <div  class="flex-align-center flex-between border-bottom container normal-panel">
      <div class="flex-align-center">
        <slot name="upload"></slot>
      </div>
      <div class="flex-align-center">
        <el-input size="small" style="width:160px;margin-right:16px" prefix-icon="el-icon-search" v-model="params.content.where.condition" @keyup.enter.native="queryAttachment(params.content.pageNumber = 1)" @clear="queryAttachment(params.content.pageNumber = 1)" placeholder="搜索全部" clearable></el-input>
        <sort :sort="sort" @onSort="onSort"></sort>
        <i class="el-icon-refresh" style="margin-left:16px" @click="queryAttachment(params.content.where.condition = '')"></i>
      </div>
    </div>
    <div ref="ele" style="height:calc(100vh - 405px);overflow-y:scroll" class="container normal-panel">
      <el-row :gutter="10" class="folder-list">
        <el-col :span="3" v-for="folder in list" :key="folder.id">
          <div class="folder-item" :class="folder.ischeck?'checked':''">
            <el-checkbox v-show="folder.postfix !== 'FOLDER'" class="folder-checkbox" v-model="folder.ischeck" @change="onChange(folder)"></el-checkbox>
            <div @click.stop="folderDetails(folder)" class="img-panel">
              <img v-if="folder.postfix === 'DOC' || folder.postfix === 'DOCX'"  src="../../../assets/file_icons/word.png" alt="">
              <img v-else-if="folder.postfix === 'PDF'"  src="../../../assets/file_icons/PDF.png" alt="">
              <img v-else-if="folder.postfix === 'MP4' || folder.postfix === 'AVI'"  src="../../../assets/file_icons/video.png" alt="">
              <img v-else-if="folder.postfix === 'XLS' || folder.postfix === 'XLSX'"  src="../../../assets/file_icons/excel.png" alt="">
              <img v-else-if="folder.postfix === 'PNG' || folder.postfix === 'JPG'|| folder.postfix === 'JPEG'"  src="../../../assets/file_icons/image.png" alt="">
              <img v-else-if="folder.postfix === 'PPT' || folder.postfix === 'PPTX'"  src="../../../assets/file_icons/PPT.png" alt="">
              <img v-else-if="folder.postfix === 'FOLDER'"  src="../../../assets/file_icons/folder.png" alt="">
              <img v-else  src="../../../assets/file_icons/unknow.png" alt="">
            </div>
            <input v-if="folder.newfolder" type="text" v-model="folder.document" autofocus size="mini" @blur="changeFolderName(folder)">
            <p v-else>{{folder.document}}</p>
          </div>
        </el-col>
      </el-row>
      <div v-if="list.length === 0" class="flex-align-center" style="height:calc(100vh - 200px);justify-content:space-around">
        <el-empty description="暂无文件,请点击左上角的“上传”按钮添加"></el-empty>
      </div>
    </div>
    <div style="margin:16px 0;text-align:right">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="params.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:['accept'],
  data () {
    return {
      params:{
        "classname": "system.attachment.MediaCenter",
        "method": "queryAttachment",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition":"",
            "parentid":''
          }
        }
      },
      list:[],
      sort:[],
      total:0,
      currentPage:0,
    }
  },
  methods:{
    // 排序
    onSort (sort) {
      this.params.content.sort = [sort]
      this.queryAttachment(this.params.content.where.parentid)
    },
    async queryAttachment (id) {
      this.params.content.where.parentid = id?id:0
      this.params.content.where.postfixs = this.accept?this.accept.split(","):[]
      const res = await this.$api.requested(this.params)
      res.data.map(e=>{
        e.postfix  = e.postfix.toUpperCase()
        e.ischeck = false
      })
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      this.sort = res.sort
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.queryAttachment(this.params.content.where.parentid)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.queryAttachment(this.params.content.where.parentid)
    },
    changeFolderName (folder) {
      this.$emit('onNameChange',folder)
    },
    onChange (folder) {
      let checkArray = []
      this.list.forEach((e,index)=>{
        if (e.ischeck === true) {
          checkArray.push(e)
        }
      })
      this.$emit('folderChecked',checkArray)
    },
    async folderDetails (folder) {
      event.stopPropagation();
      if (folder.postfix === 'FOLDER') {
        this.$emit('toFolderDetail',folder.attachmentid)
      }
    },
    restChecked () {
      this.list.forEach((e,index)=>{
        e.ischeck = false
      })
    }
  },
  mounted () {
    // 根据容器高度计算需要的数据条数
    var heightCss = window.getComputedStyle(this.$refs.ele).height
    this.params.content.pageSize = Math.ceil((heightCss.match(/\d+/g) / 114)) *12
    this.queryAttachment()
  },
  watch:{
    $route () {
      this.queryAttachment()
      // 路由发生变化的时候初始化选择数组
      this.$emit('folderChecked',[])
    }
  }
}

</script>
<style>
.folder-item {
  position: relative;
  padding:10px 5px;
  text-align: center;
  color:#333;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
  /* min-height: 110px; */
}

.folder-item p{
  line-height: 25px;
  width: calc(100% - 20px);
  padding: 0 10px;
  /* margin-top:10px; */
  word-break: break-all;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 1; /* 这里是超出几行省略 */

  overflow: hidden;
}
.folder-item input{
  width: calc(100% - 8px);
  padding: 2px;
  margin-top:10px;
}
.img-panel {
  width: 64px;
  /* height: 64px; */
  margin:0 auto;
  text-align: center;
}
.img-panel > img{
  width: 80%;
}
.folder-checkbox{
  display: none;
  position: absolute;
  top:10px;
  left: 10px;
}
.checked{
  background: #f1f2f3;
  border-radius: 3px;
}
.checked .folder-checkbox {
  display: block;
}
.folder-item:hover .folder-checkbox {
  display: block;
}
.folder-item:hover {
  background: #f1f2f3;
  border-radius: 3px;
}
</style>
<style scoped>
.border-bottom{
  border-bottom: 1px solid #f1f2f3;
}
</style>