修改云盘智搜

yz_08

2021-02-10 685c34fa62981ea8867995f75c59e610b53e479a

修改云盘智搜

 src/assets/uploading/GIF.png

Binary files differ

 src/assets/uploading/MP3.png

Binary files differ

 src/assets/uploading/MP4.png

Binary files differ

 src/assets/uploading/SVG.png

Binary files differ

 src/assets/uploading/WebPage.png

Binary files differ

 src/assets/uploading/apk.png

Binary files differ

 src/assets/uploading/csv.png

Binary files differ

 src/assets/uploading/excel.png

Binary files differ

 src/assets/uploading/exe.png

Binary files differ

 src/assets/uploading/folder.png

Binary files differ

 src/assets/uploading/html.png

Binary files differ

 src/assets/uploading/json.png

Binary files differ

 src/assets/uploading/pdf.png

Binary files differ

 src/assets/uploading/pic.png

Binary files differ

 src/assets/uploading/ppt.png

Binary files differ

 src/assets/uploading/rar.png

Binary files differ

 src/assets/uploading/txt.png

Binary files differ

 src/assets/uploading/unknown.png

Binary files differ

 src/assets/uploading/word.png

Binary files differ

 src/assets/uploading/zip.png

Binary files differ

 src/views/dashboard/index.vue

@@ -196,6 +196,7 @@
<style lang="scss" scoped>
.main {
    padding: 20px;
  text-align: center;
    .data-ul {
        margin-right: 40px;
        margin-top: 0px;

 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>