sunsail云平台前端项目工程
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
yz_08
2021-02-10 685c34fa62981ea8867995f75c59e610b53e479a 
 src/views/yunpan/zhishou.vue


@@ -5,7 +5,15 @@


        <div class="zs-title">云盘智搜</div>



      </el-col>



      <el-col :span="6" class="search">



        <el-input v-model="fileName" maxlength="20" minlength="1" clearable placeholder="请输入文件名" show-word-limit style="width:200px" />



        <el-input



          v-model="fileName"



          maxlength="20"



          minlength="1"



          clearable



          placeholder="请输入文件名"



          show-word-limit



          style="width:200px"



        />



        <el-button type="primary" @click="findFileByFileName()">查询</el-button>



      </el-col>



    </el-row>



@@ -17,27 +25,43 @@


          title="提示"



          :visible.sync="dialogDelVisible"



          width="20%"



          :before-close="handleClose"



        >



          <span>是否删除此菜单</span>



          <span>是否删除此目录?</span>



          <span slot="footer" class="dialog-footer">



            <el-button @click="dialogDelVisible = false">取 消</el-button>



            <el-button type="primary" @click="delFolder()">确 定</el-button>



          </span>



        </el-dialog>







        <el-dialog title="新增文件夹" :visible.sync="dialogFormVisible" width="25%" class="add-folder">



        <el-dialog



          title="新增文件夹"



          :visible.sync="dialogFormVisible"



          width="25%"



          class="add-folder"



        >



          <el-form ref="folderform" :model="folderform" :rules="rules">



            <el-form-item label="文件夹名称:" :label-width="formLabelWidth" prop="foldername">



            <el-form-item



              label="文件夹名称:"



              :label-width="formLabelWidth"



              prop="foldername"



            >



              <el-input v-model="folderform.foldername" autocomplete="off" />



            </el-form-item>



            <el-form-item label="文件夹排序:" :label-width="formLabelWidth" prop="sort">



              <el-input-number v-model="folderform.sort" :min="0" :max="100" label="排序" @change="handleChange" />



              <el-input-number



                v-model="folderform.sort"



                :min="0"



                :max="100"



                label="排序"



              />



            </el-form-item>



          </el-form>



          <div slot="footer" class="dialog-footer">



            <el-button @click="dialogFormVisible = false">取 消</el-button>



            <el-button type="primary" @click="addFolderForm('folderform')">确 定</el-button>



            <el-button



              type="primary"



              @click="addFolderForm('folderform')"



            >确 定</el-button>



          </div>



        </el-dialog>



        <el-timeline>



@@ -50,7 +74,11 @@


            :size="activity.size"



            placement="bottom"



          >



            <span style="position: relative; top: -5px;" @click="clickTimeline(index,activity.id)">  {{ activity.timestamp }}</span>



            <span



              style="position: relative; top: -5px;"



              @click="clickTimeline(index, activity.id)"



            >



              {{ activity.timestamp }}</span>



          </el-timeline-item>



        </el-timeline>



      </el-aside>



@@ -64,21 +92,42 @@


          </el-row>



          <el-row style="background-color: rgba(0,0,0,0.2);">



            <el-col :span="19">



              <el-checkbox v-model="checkAll" class="myRedCheckBox" style="color: #000; margin-left: 20px;" @change="checkAllMethods()">全选</el-checkbox></el-col>



              <el-checkbox



                v-model="checkAll"



                class="myRedCheckBox"



                style="color: #000; margin-left: 20px;"



                @change="checkAllMethods()"



              >全选</el-checkbox></el-col>



            <el-col :span="5">



              <el-button type="primary" icon="el-icon-download" size="mini">下载</el-button>



              <el-button type="primary" icon="el-icon-search" size="mini">删除</el-button>



              <el-button



                type="primary"



                icon="el-icon-download"



                size="mini"



                @click="download()"



              >下载</el-button>



              <el-button



                type="primary"



                icon="el-icon-search"



                size="mini"



                @click="delFile()"



              >删除</el-button>



            </el-col>



          </el-row>



        </el-header>



        <el-main style="background-color: #fff;">



          <el-row v-for="(data, index) in filesUploadData" :key="index">



            <template v-for="(node, nodeIndex) in data.node">



              <el-col v-if="node.isUpload===false" :key="node.filesid" :span="3">



                <el-card shadow="never" @click.native="clickCard(index*8+nodeIndex)">



                  <img :src="showFileImg(node.filesformat)" class="uploading-image">



              <el-col v-if="node.isUpload === false" :key="node.filesid" :span="3">



                <el-card



                  shadow="never"



                  @click.native="clickCard(index * 8 + nodeIndex)"



                >



                  <img



                    :src="showFileImg(node.filesformat)"



                    class="uploading-image"



                  >



                  <div style="padding-top: 14px;">



                    <el-checkbox v-model="checkedArr[index*8+nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>



                    <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>



                  </div>



                </el-card>



              </el-col>



@@ -86,10 +135,15 @@


                <el-card shadow="never">



                  <el-upload



                    class="avatar-uploader"



                    action="https://jsonplaceholder.typicode.com/posts/"



                    action="/hr/filesUpload"



                    :show-file-list="false"



                    :on-success="handleAvatarSuccess"



                    :before-upload="beforeAvatarUpload"



                    :headers="headers()"



                    :data="fileDate"



                    :on-success="handleAvatarSuccess"



                    :on-error="handleAvatarError"



                    :multiple="true"



                    :limit="10"



                    drag



                  >



                    <i class="el-icon-upload" />



@@ -105,9 +159,14 @@


</template>







<script>



import { getToken } from '@/utils/auth'







export default {



  data() {



    return {



      fileDate: {



        folderid: 0



      },



      dialogDelVisible: false,



      dialogFormVisible: false,



      folderform: {



@@ -118,9 +177,8 @@


        foldername: [



          { required: true, message: '请输入文件夹名称', trigger: 'blur' },



          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }



        ], sort: [



          { required: true, message: '请输入排序', type: 'number', trigger: 'blur' }



        ]



        ],



        sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]



      },



      formLabelWidth: '100px',



      beforeIndex: 0,



@@ -128,19 +186,26 @@


      checkedArr: [],



      checkAll: false,



      activities: [],



      filesUploadData: []



      filesUploadData: [],



      updateNum: 0



    }



  }, mounted() {



  },



  mounted() {



    // 初始加载



    this.initFolder()



  }, methods: {



  },



  methods: {



    async initFolder() {



      await this.$get('hr/folder').then((r) => {



      await this.$get('hr/folder').then(r => {



        this.activities = []



        this.beforeIndex = 0



        r.data.data.forEach((v, i) => {



          if (i === 0) {



            this.activities.push({ timestamp: v.foldername, id: v.folderid, color: '#a32c30' })



            this.activities.push({



              timestamp: v.foldername,



              id: v.folderid,



              color: '#a32c30'



            })



          } else {



            this.activities.push({ timestamp: v.foldername, id: v.folderid })



          }



@@ -154,9 +219,9 @@


      // 文件列表置为空



      this.filesUploadData = []



      this.checkedArr = []



      this.$get('hr/filesUpload', { ...params }).then((r) => {



      this.$get('hr/filesUpload', { ...params }).then(r => {



        r.data.data.forEach((v, i) => {



          this.checkedArr.push({ 'isChecked': false, 'filesid': v.filesid })



          this.checkedArr.push({ isChecked: false, filesid: v.filesid })



          // 一行8个 等于8就换行



          if (i % 8 === 0 && i !== 0) {



            this.filesUploadData.push(node)



@@ -167,20 +232,22 @@


          // 添加



          node.node.push(v)



          // 如果是最后一个元素,需要手动丢到列表里面去



          if (i === (r.data.data.length - 1)) {



          if (i === r.data.data.length - 1) {



            this.filesUploadData.push(node)



          }



        })



        // 如果列表为空,增加一个上传的



        if (this.filesUploadData.length === 0) {



          this.filesUploadData.push({ node: [{ 'isUpload': true }] })



          this.filesUploadData.push({ node: [{ isUpload: true }] })



        } else {



          // 如果不为空,但是这一行刚好满8个了,就将数组,新增一个对象



          if (this.filesUploadData[this.filesUploadData.length - 1].node.length === 8) {



            this.filesUploadData.push({ node: [{ 'isUpload': true }] })



            this.filesUploadData.push({ node: [{ isUpload: true }] })



          } else {



            // 新增一个上传



            this.filesUploadData[this.filesUploadData.length - 1].node.push({ 'isUpload': true })



            this.filesUploadData[this.filesUploadData.length - 1].node.push({



              isUpload: true



            })



          }



        }



      })



@@ -192,7 +259,7 @@


      // 将之前的数组置为空



      this.activities = []



      // 删除之前下标的颜色



      delete (list[this.beforeIndex].color)



      delete list[this.beforeIndex].color



      // 将新下标存储起来



      this.beforeIndex = index



      // 将新下标修改颜色



@@ -205,8 +272,11 @@


        // 生成查询文件的条件



        params = { folderid: this.activities[index].id }



      } else {



      // 生成查询文件的条件



        params = { folderid: this.activities[this.beforeIndex].id, filesname: this.fileName }



        // 生成查询文件的条件



        params = {



          folderid: this.activities[this.beforeIndex].id,



          filesname: this.fileName



        }



      }







      this.initFile(params)



@@ -231,11 +301,14 @@


    },



    findFileByFileName() {



      // 生成查询文件的条件



      var params = { folderid: this.activities[this.beforeIndex].id, filesname: this.fileName }



      var params = {



        folderid: this.activities[this.beforeIndex].id,



        filesname: this.fileName



      }



      this.initFile(params)



    },



    addFolderForm(formName) {



      this.$refs[formName].validate((valid) => {



      this.$refs[formName].validate(valid => {



        if (valid) {



          this.$post('hr/folder', { ...this.folderform }).then(() => {



            this.dialogFormVisible = false



@@ -305,27 +378,118 @@


          return require('../../assets/uploading/word.png')



        case 'zip':



          return require('../../assets/uploading/zip.png')



        case 'jpg':



          return require('../../assets/uploading/jpg.png')



        case 'png':



          return require('../../assets/uploading/png.png')



        default:



          return require('../../assets/uploading/unknown.png')



      }



    },



    beforeAvatarUpload(file) {



      this.fileDate.folderid = this.activities[this.beforeIndex].id



      const isLt50M = file.size / 1024 / 1024 < 50



      if (!isLt50M) {



        this.$message.error('上传文件不能超过 50MB!')



      }



      return isLt50M



    },



    headers() {



      const token = getToken()



      if (token) {



        return {



          Authorization: 'bearer ' + token



        }



      } else {



        return null



      }



    },



    handleAvatarSuccess(response, file, fileList) {



      this.$notify({



        title: '成功',



        message: '上传成功!',



        type: 'success'



      })



      this.updateNum++



      if (this.updateNum === fileList.length) {



        this.updateNum = 0



        // 生成查询文件的条件



        var params = {



          folderid: this.activities[this.beforeIndex].id,



          filesname: this.fileName



        }



        this.initFile(params)



      }



    },



    handleAvatarError() {



      this.updateNum = 0



      this.$notify.error({



        title: '失败',



        message: '上传失败,请联系管理员!'



      })



    },



    download() {



      var checke = []



      this.checkedArr.forEach((v, i) => {



        if (v.isChecked) {



          checke.push(v.filesid)



        }



      })



      if (checke.length <= 0) {



        this.$message({



          message: '请选择需要下载的文件!',



          type: 'warning'



        })



      } else {



        // 生成查询文件的条件



        var params = { fileids: checke.join(',') }



        this.$download('hr/filesUpload/download', { ...params }, new Date().getTime() + '.zip').then(() => {



          this.$message({



            message: '下载成功!',



            type: 'success'



          })



        })



      }



    },



    delFile() {



      var checke = []



      this.checkedArr.forEach((v, i) => {



        if (v.isChecked) {



          checke.push(v.filesid)



        }



      })



      // 生成查询文件的条件



      var params = { fileids: checke.join(',') }



      this.$delete('hr/filesUpload', { ...params }).then(() => {



        this.$message({



          message: '删除成功!',



          type: 'success'



        })



        // 生成查询文件的条件



        var initFileParams = {



          folderid: this.activities[this.beforeIndex].id,



          filesname: this.fileName



        }







        this.initFile(initFileParams)



      })



    }



  }



}



</script>







<style lang="scss">



.clearfix:before,



.clearfix:after {



   display: table;



   content: '';



}







  .clearfix:before,



  .clearfix:after {



      display: table;



      content: "";



  }







  .clearfix:after {



      clear: both



  }



.add-folder{



  text-align: initial;



.clearfix:after {



   clear: both;



}



.add-folder {



   text-align: initial;



}



.zs-main {



   .search-title {



@@ -340,25 +504,26 @@


         top: 40%;



         transform: translateY(-50%);



      }



    .zs-title{



          border-left: 4px solid #a32c30;



    padding-left: 10px;



    font-size: 16px;



    }



      .zs-title {



         border-left: 4px solid #a32c30;



         padding-left: 10px;



         font-size: 16px;



      }



   }



     .add-folder-but{



      margin-bottom: 20px;



    }



   .add-folder-but {



      background: #fff !important;



      color: #a32c30 !important;



      margin-bottom: 20px;



   }



   padding: 0 15px 0 15px;



  .text-header {



   line-height: 60px;



}



  .uploading-image {



    width: 100%;



    height: 100%;



    display: block;



  }







   .text-header {



      line-height: 60px;



   }



   .uploading-image {



      width: 100%;



      height: 100%;



      display: block;



   }



}







.el-timeline-item__timestamp {



@@ -368,65 +533,66 @@






/* 设置带边框的checkbox，选中后边框的颜色 */



.myRedCheckBox.is-bordered.is-checked {



  border-color: #a32c30;



   border-color: #a32c30;



}







/* 设置选中后的文字颜色 */



.myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {



  color: #a32c30;



.myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {



   color: #a32c30;



}







/* 设置选中后对勾框的边框和背景颜色 */



.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {



  border-color: #a32c30;



  background-color:#a32c30;



.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,



.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {



   border-color: #a32c30;



   background-color: #a32c30;



}







/* 设置checkbox获得焦点后，对勾框的边框颜色 */



.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{



  border-color: #a32c30;



.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {



   border-color: #a32c30;



}







/* 设置鼠标经过对勾框，对勾框边框的颜色 */



.myRedCheckBox .el-checkbox__inner:hover{



  border-color: #a32c30;



.myRedCheckBox .el-checkbox__inner:hover {



   border-color: #a32c30;



}







  .avatar-uploader .el-upload {



    border: 1px dashed #d9d9d9;



    border-radius: 6px;



    cursor: pointer;



    position: relative;



    overflow: hidden;



  }



  .avatar-uploader .el-upload:hover {



    border-color: #409EFF;



  }



  .avatar-uploader-icon {



    font-size: 28px;



    color: #8c939d;



    width: 178px;



    height: 178px;



    line-height: 178px;



    text-align: center;



  }



  .avatar {



    width: 178px;



    height: 178px;



    display: block;



  }



 .avatar-uploader .el-upload-dragger .el-icon-upload {



    margin: 20px 0 16px;



.avatar-uploader .el-upload {



   border: 1px dashed #d9d9d9;



   border-radius: 6px;



   cursor: pointer;



   position: relative;



   overflow: hidden;



}



.avatar-uploader .el-upload:hover {



   border-color: #409eff;



}



.avatar-uploader-icon {



   font-size: 28px;



   color: #8c939d;



   width: 178px;



   height: 178px;



   line-height: 178px;



   text-align: center;



}



.avatar {



   width: 178px;



   height: 178px;



   display: block;



}



.avatar-uploader .el-upload-dragger .el-icon-upload {



   margin: 20px 0 16px;



}



.avatar-uploader .el-upload-dragger {



    border: none;



    width: 100px;



    height: 100px;



   border: none;



   width: 100px;



   height: 100px;



}



</style>



<style lang="scss" scoped>



.el-main{



  margin-top: 2%;



.el-main {



   margin-top: 2%;



}



.app-main {



   background-color: #ffffff;



@@ -439,12 +605,12 @@


   outline: none;



}



.zs-main .text-header {



    line-height: 40px;



   line-height: 40px;



}



.el-card {



    border: none;



   border: none;



}



.el-input-number{



  width: 100%;



.el-input-number {



   width: 100%;



}



</style>