修改样式

yz_08

2021-05-02 86504480d7d0d4aba2e9dadd104719383390e0bc

 src/views/yunpan/zhishou.vue

@@ -1,606 +1,924 @@
<template>

  <div class="zs-main">

    <el-row class="search-title">

      <el-col :span="18" class="title">

        <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-button type="primary" @click="findFileByFileName()">查询</el-button>

      </el-col>

    </el-row>

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

      <el-aside width="210px" style="background-color: #fff;text-align: center;">

        <el-button class="add-folder-but" @click="dialogFormVisible = true">新增</el-button>

        <el-popconfirm title="是否删除此目录?">

          <el-button class="add-folder-but" @click="delFolder()">删除</el-button>

        </el-popconfirm>

        <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-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="排序"

              />

            </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>

          </div>

        </el-dialog>

        <el-timeline>

          <el-timeline-item

            v-for="(activity, index) in activities"

            :key="index"

            :icon="activity.icon"

            :type="activity.type"

            :color="activity.color"

            :size="activity.size"

            placement="bottom"

          >

            <span

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

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

            >

              {{ activity.timestamp }}</span>

          </el-timeline-item>

        </el-timeline>

      </el-aside>

      <el-container>

        <el-header class="text-header">

          <el-row><el-col :span="24">

            <i

              class="el-icon-bell"

              style=" color: #a32c30; margin-right: 10px;"

            />提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>

          </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-col :span="5">

              <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"

                  >

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

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

                  </div>

                </el-card>

              </el-col>

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

                <el-card shadow="never">

                  <el-upload

                    class="avatar-uploader"

                    :action="filesUploadUrl"

                    :show-file-list="false"

                    :before-upload="beforeAvatarUpload"

                    :headers="headers()"

                    :data="fileDate"

                    :on-success="handleAvatarSuccess"

                    :on-error="handleAvatarError"

                    :multiple="true"

                    :limit="10"

                    drag

                  >

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

                  </el-upload>

                </el-card>

              </el-col>

            </template>

          </el-row>

        </el-main>

      </el-container>

    </el-container>

  </div>

</template>



<script>

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

import { pages } from '@/settings'



export default {

  data() {

    return {

      filesUploadUrl: pages.filesUploadUrl,

      fileDate: {

        folderid: 0

      },

      dialogFormVisible: false,

      folderform: {

        foldername: '',

        sort: 0

      },

      rules: {

        foldername: [

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

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

        ],

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

      },

      formLabelWidth: '100px',

      beforeIndex: 0,

      fileName: '',

      checkedArr: [],

      checkAll: false,

      activities: [],

      filesUploadData: [],

      updateNum: 0

    }

  },

  mounted() {

    // 初始加载

    this.initFolder()

  },

  methods: {

    async initFolder() {

      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'

            })

          } else {

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

          }

        })

      })

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

      this.initFile(params)

    },

    initFile(params) {

      var node = { node: [] }

      // 文件列表置为空

      this.filesUploadData = []

      this.checkedArr = []

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

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

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

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

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

            this.filesUploadData.push(node)

            node = { node: [] }

          }

          // 添加一个新的元素判断是否是上传用的

          this.$set(v, 'isUpload', false)

          // 添加

          node.node.push(v)

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

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

            this.filesUploadData.push(node)

          }

        })

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

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

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

        } else {

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

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

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

          } else {

            // 新增一个上传

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

              isUpload: true

            })

          }

        }

      })

    },

    clickTimeline(index, id) {

      // 不这样操作的不会响应式更新

      // 赋值到新的列表

      var list = this.activities

      // 将之前的数组置为空

      this.activities = []

      // 删除之前下标的颜色

      delete list[this.beforeIndex].color

      // 将新下标存储起来

      this.beforeIndex = index

      // 将新下标修改颜色

      list[index]['color'] = '#a32c30'

      // 将修改好的数组放回去

      this.activities = list

      this.checkAll = false

      var params

      if (this.fileName === '') {

        // 生成查询文件的条件

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

      } else {

        // 生成查询文件的条件

        params = {

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

          filesname: this.fileName

        }

      }



      this.initFile(params)

    },

    clickCard(index) {

      if (this.checkedArr[index].isChecked) {

        this.$set(this.checkedArr[index], 'isChecked', false)

      } else {

        this.$set(this.checkedArr[index], 'isChecked', true)

      }

    },

    checkAllMethods() {

      if (this.checkAll) {

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

          this.$set(v, 'isChecked', true)

        })

      } else {

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

          this.$set(v, 'isChecked', false)

        })

      }

    },

    findFileByFileName() {

      // 生成查询文件的条件

      var params = {

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

        filesname: this.fileName

      }

      this.initFile(params)

    },

    addFolderForm(formName) {

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

        if (valid) {

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

            this.dialogFormVisible = false

            this.$message({

              message: this.$t('tips.createSuccess'),

              type: 'success'

            })

            this.folderform.fileName = ''

            this.folderform.sort = 0

            // 初始加载

            this.initFolder()

          })

        }

      })

    },

    delFolder() {

      // 生成查询文件的条件

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

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

        this.dialogFormVisible = false

        this.$message({

          message: this.$t('tips.deleteSuccess'),

          type: 'success'

        })

        // 初始加载

        this.initFolder()

      })

    },

    showFileImg(type) {

      switch (type) {

        case 'txt':

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

        case 'apk':

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

        case 'csv':

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

        case 'excel':

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

        case 'exe':

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

        case 'folder':

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

        case 'gif':

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

        case 'html':

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

        case 'json':

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

        case 'mp3':

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

        case 'mp4':

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

        case 'pdf':

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

        case 'pic':

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

        case 'ppt':

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

        case 'rar':

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

        case 'svg':

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

        case 'webpage':

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

        case 'word':

          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:after {

   clear: both;

}

.add-folder {

   text-align: initial;

}

.zs-main {

   .search-title {

      height: 50px;

      .search {

         position: relative;

         top: 50%;

         transform: translateY(-50%);

      }

      .title {

         position: relative;

         top: 40%;

         transform: translateY(-50%);

      }

      .zs-title {

         border-left: 4px solid #a32c30;

         padding-left: 10px;

         font-size: 16px;

      }

   }

   .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;

   }

}



.el-timeline-item__timestamp {

   font-size: 15px;

   color: #000;

}



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

.myRedCheckBox.is-bordered.is-checked {

   border-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;

}



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

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

   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-dragger {

   border: none;

   width: 100px;

   height: 100px;

}

</style>

<style lang="scss" scoped>

.el-main {

   margin-top: 2%;

}

.app-main {

   background-color: #ffffff;

}

.el-button,

.el-button--primary {

   background: #a32c30;

   border-color: #a32c30;

   color: #fff;

   outline: none;

}

.zs-main .text-header {

   line-height: 40px;

}

.el-card {

   border: none;

}

.el-input-number {

   width: 100%;

}

</style>

<template>
  <div class="zs-main" style="background-color: #fff">
    <el-row class="search-title">
      <el-col :span="18" class="title">
        <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-button type="primary" @click="findFileByFileName()">查询</el-button>
      </el-col>
    </el-row>
    <el-container style="background-color: #fff;">
      <el-aside width="210px" style="background-color: #fff;text-align: center;height: 100%;">
        <el-button class="add-folder-but" @click="dialogFormVisible = true">新增</el-button>
        <el-popconfirm title="是否删除目录？" @onConfirm="delFolder()">
          <el-button slot="reference" class="pri-del-btn" type="primary">删除</el-button>
        </el-popconfirm>
        <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-input v-model="folderform.foldername" autocomplete="off" />
            </el-form-item>

            <el-form-item label="上级文件夹:" :label-width="formLabelWidth" prop="parentId">
              <treeselect
                v-model="folderform.parentId"
                :multiple="false"
                :options="activitiesTree"
                :clear-value-text="$t('common.clear')"
                placeholder=" "
                style="width:100%"
              />
            </el-form-item>
            <el-form-item label="文件夹排序:" :label-width="formLabelWidth" prop="sort">
              <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>
          </div>
        </el-dialog>
        <el-tree
          ref="deptTree"
          :data="activitiesTree"
          :check-strictly="false"
          accordion
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          highlight-current
          :filter-node-method="filterNode"
          @node-click="nodeClick"
        />
        <!-- <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            placement="bottom"
          >
            <span
              style="position: relative; top: -5px;"
              @click="clickTimeline(index, activity.id)"
            >
              {{ activity.timestamp }}</span>
          </el-timeline-item>
        </el-timeline>-->
      </el-aside>
      <el-container>
        <el-header class="text-header">
          <el-row><el-col :span="24">
            <i
              class="el-icon-bell"
              style=" color: #a32c30; margin-right: 10px;"
            />提示：文件不要超过10个，单个文件大小不超过200M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
          </el-row>
          <el-row style="background-color: rgba(0,0,0,0.2);">
            <el-col :span="16">
              <el-checkbox
                v-model="checkAll"
                class="myRedCheckBox"
                style="color: #000; margin-left: 20px;"
                @change="checkAllMethods()"
              >全选</el-checkbox></el-col>
            <el-col :span="8">
              <el-button
                type="primary"
                icon="el-icon-download"
                size="mini"
                @click="download()"
              >下载</el-button>
              <el-button
                type="primary"
                class="pri-del-btn"
                icon="el-icon-search"
                size="mini"
                @click="delFile()"
              >删除</el-button>
              <el-popconfirm title="是否移动文件？" @onConfirm="mvdialogFormVisible = true">
                <el-button slot="reference" type="danger">转存</el-button>
              </el-popconfirm>
              <el-button type="warning" @click="openUpdateFileName()">重命名</el-button>
            </el-col>
          </el-row>
        </el-header>

        <el-dialog title="修改文件名" :visible.sync="updateFileNameFormVisible" width="20%">
          <el-form ref="updateFileName" :model="file" :rules="rules">
            <el-form-item label="文件名" :label-width="formLabelWidth" prop="fileName">
              <el-input v-model="file.fileName" autocomplete="off" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateFileNameFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateFileName('updateFileName')">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog
          title="移动文件"
          :visible.sync="mvdialogFormVisible"
          width="25%"
          class="add-label"
        >
          <el-form ref="mvfolderform" :model="mvfolderform">
            <el-form-item
              label="目录名称:"
              :label-width="formLabelWidth"
              prop="folderid"
            >
              <treeselect
                v-model="mvfolderform.folderid"
                :multiple="false"
                :options="activitiesTree"
                :clear-value-text="$t('common.clear')"
                placeholder=" "
                style="width:100%"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="mvdialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="mvfolder()"
            >确 定</el-button>
          </div>
        </el-dialog>
        <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="2">
                <el-card
                  shadow="never"
                >
                  <el-image
                    v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) == -1"
                    :src="showFileImg(node.filesformat)"
                    class="uploading-image"
                    :preview-src-list="srcList"
                    @click="clickImg(node)"
                  />
                  <el-tooltip v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) == -1" class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                      <el-checkbox v-model="checkedArr[index * rowCount + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                    </div>
                  </el-tooltip>
                  <el-tooltip v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) != -1" class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                      <el-image
                        style="width: 100px; height: 80px;margin-top: -10px;"
                        :src="getImg+node.filesid"
                        :preview-src-list="srcList"
                        @click="clickImg(node)"
                      />
                      <el-checkbox v-model="checkedArr[index * rowCount + nodeIndex].isChecked" class="myRedCheckBox">

                        {{ node.filesname }}
                      </el-checkbox>
                    </div>
                  </el-tooltip>
                </el-card>
              </el-col>
              <el-col v-if="node.isUpload" :key="node.filesid" :span="2">
                <el-card shadow="never">
                  <el-upload
                    class="avatar-uploader"
                    :action="filesUploadUrl"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :headers="headers()"
                    :data="fileDate"
                    :on-success="handleAvatarSuccess"
                    :on-error="handleAvatarError"
                    :multiple="true"
                    :limit="20"
                    drag
                  >
                    <i class="el-icon-upload" />
                  </el-upload>
                </el-card>
              </el-col>
            </template>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { pages } from '@/settings'
import { Loading } from 'element-ui'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      activitiesTree: [],
      srcList: [],
      getImg: pages.getFilesUploadImage,
      updateFileNameFormVisible: false,
      file: {
        fileName: ''
      },
      rowCount: 12,
      mvrules: {
        folderid: [{ required: true, message: '请选择目录', trigger: 'blur' }]
      },
      filesUploadUrl: pages.filesUploadUrl,
      fileDate: {
        folderid: 0
      },
      mvdialogFormVisible: false,
      dialogDelVisible: false,
      dialogFormVisible: false,
      folderform: {
        parentId: '',
        folderid: '',
        foldername: '',
        sort: 0
      },
      mvfolderform: {
        folderid: ''
      },
      rules: {
        foldername: [
          { required: true, message: '请输入文件夹名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        fileName: [
          { required: true, message: '请输入文件名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
      },
      formLabelWidth: '120px',
      beforeIndex: 0,
      fileName: '',
      checkedArr: [],
      checkAll: false,
      activities: [],
      filesUploadData: [],
      updateNum: 0,
      folderid: ''
    }
  },
  mounted() {
    // 初始加载
    this.initFolder()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick(data) {
      this.folderform.parentId = data.parentId
      if (this.folderform.parentId === '0') {
        this.folderform.parentId = null
      }
      this.folderform.sort = data.orderNum
      this.folderform.foldername = data.label
      this.folderform.folderid = data.id
      // eslint-disable-next-line no-unused-vars
      var params = {}
      this.folderid = data.id
      params = {
        folderid: data.id,
        filesname: this.fileName
      }
      this.initFile(params)
    },
    clickImg(node) {
      this.srcList = []
      if ('tif,bmp,jpg,png,gif'.indexOf(node.filesformat) >= 0) {
        this.srcList.push(this.getImg + node.filesid)
      }
    },
    updateFileName(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var checke = ''
          this.checkedArr.forEach((v, i) => {
            if (v.isChecked) {
              checke = v.filesid
            }
          })
          // 生成查询文件的条件
          var params = { filesid: checke, filesname: this.file.fileName }
          this.$put('hr/filesUpload', { ...params }).then(() => {
            this.$message({
              message: '重命名成功!',
              type: 'success'
            })
            this.updateFileNameFormVisible = false
            this.file.fileName = ''
            var folderid = this.activities[0].id
            if (this.folderform.folderid !== '' && this.folderform.folderid !== null) {
              folderid = this.folderform.folderid
            }
            // 生成查询文件的条件
            var initFileParams = {
              folderid: folderid,
              filesname: this.fileName
            }
            this.initFile(initFileParams)
          })
        }
      })
    },
    openUpdateFileName() {
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.filesid)
        }
      })

      if (checke.length <= 0) {
        this.$message({
          message: '请选择一个需要重命名的文件!',
          type: 'warning'
        })
      } else {
        this.updateFileNameFormVisible = true
      }
    },
    async initFolder() {
      await this.$get('hr/folder/treeList').then(r => {
        this.activities = []
        this.beforeIndex = 0
        this.activitiesTree = r.data.data.rows
        r.data.data.rows.forEach((v, i) => {
          if (i === 0) {
            this.activities.push({
              timestamp: v.label,
              id: v.id,
              color: '#a32c30'
            })
          } else {
            this.activities.push({ timestamp: v.label, id: v.id })
          }
        })
      })
      var params = { folderid: this.activities[0].id }
      this.initFile(params)
    },
    initFile(params) {
      var node = { node: [] }
      // 文件列表置为空
      this.filesUploadData = []
      this.checkedArr = []
      this.$get('hr/filesUpload', { ...params }).then(r => {
        r.data.data.forEach((v, i) => {
          this.checkedArr.push({ isChecked: false, filesid: v.filesid })
          // 一行12个 等于12就换行
          if (i % this.rowCount === 0 && i !== 0) {
            this.filesUploadData.push(node)
            node = { node: [] }
          }
          // 添加一个新的元素判断是否是上传用的
          this.$set(v, 'isUpload', false)
          // 添加
          node.node.push(v)
          // 如果是最后一个元素,需要手动丢到列表里面去
          if (i === r.data.data.length - 1) {
            this.filesUploadData.push(node)
          }
        })
        // 如果列表为空,增加一个上传的
        if (this.filesUploadData.length === 0) {
          this.filesUploadData.push({ node: [{ isUpload: true }] })
        } else {
          // 如果不为空,但是这一行刚好满12个了,就将数组,新增一个对象
          if (this.filesUploadData[this.filesUploadData.length - 1].node.length === this.rowCount) {
            this.filesUploadData.push({ node: [{ isUpload: true }] })
          } else {
            // 新增一个上传
            this.filesUploadData[this.filesUploadData.length - 1].node.push({
              isUpload: true
            })
          }
        }
      })
    },
    clickTimeline(index, id) {
      // 不这样操作的不会响应式更新
      // 赋值到新的列表
      var list = this.activities
      // 将之前的数组置为空
      this.activities = []
      // 删除之前下标的颜色
      delete list[this.beforeIndex].color
      // 将新下标存储起来
      this.beforeIndex = index
      // 将新下标修改颜色
      list[index]['color'] = '#a32c30'
      // 将修改好的数组放回去
      this.activities = list
      this.checkAll = false
      var params
      if (this.fileName === '') {
        // 生成查询文件的条件
        params = { folderid: this.activities[index].id }
      } else {
        // 生成查询文件的条件
        params = {
          folderid: this.activities[this.beforeIndex].id,
          filesname: this.fileName
        }
      }

      this.initFile(params)
    },
    clickCard(index) {
      if (this.checkedArr[index].isChecked) {
        this.$set(this.checkedArr[index], 'isChecked', false)
      } else {
        this.$set(this.checkedArr[index], 'isChecked', true)
      }
    },
    checkAllMethods() {
      if (this.checkAll) {
        this.checkedArr.forEach((v, i) => {
          this.$set(v, 'isChecked', true)
        })
      } else {
        this.checkedArr.forEach((v, i) => {
          this.$set(v, 'isChecked', false)
        })
      }
    },
    findFileByFileName() {
      // 生成查询文件的条件
      var params = {
        folderid: this.activities[this.beforeIndex].id,
        filesname: this.fileName
      }
      this.initFile(params)
    },
    addFolderForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post('hr/folder', { ...this.folderform }).then(() => {
            this.dialogFormVisible = false
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.folderform.filename = ''
            this.folderform.sort = 0
            // 初始加载
            this.initFolder()
          })
        }
      })
    },
    delFolder() {
      // 生成查询文件的条件
      var params = { folderid: this.folderid }
      this.$delete('hr/folder', { ...params }).then(() => {
        this.dialogFormVisible = false
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.dialogDelVisible = false
        // 初始加载
        this.initFolder()
      })
    },
    showFileImg(type) {
      switch (type) {
        case 'txt':
          return require('../../assets/uploading/txt.png')
        case 'xls':
          return require('../../assets/uploading/xls.png')
        case 'xlsx':
          return require('../../assets/uploading/xls.png')
        case 'apk':
          return require('../../assets/uploading/apk.png')
        case 'csv':
          return require('../../assets/uploading/csv.png')
        case 'excel':
          return require('../../assets/uploading/excel.png')
        case 'exe':
          return require('../../assets/uploading/exe.png')
        case 'folder':
          return require('../../assets/uploading/folder.png')
        case 'gif':
          return require('../../assets/uploading/gif.png')
        case 'html':
          return require('../../assets/uploading/html.png')
        case 'json':
          return require('../../assets/uploading/json.png')
        case 'mp3':
          return require('../../assets/uploading/mp3.png')
        case 'mp4':
          return require('../../assets/uploading/mp4.png')
        case 'pdf':
          return require('../../assets/uploading/pdf.png')
        case 'pic':
          return require('../../assets/uploading/pic.png')
        case 'ppt':
          return require('../../assets/uploading/ppt.png')
        case 'rar':
          return require('../../assets/uploading/rar.png')
        case 'svg':
          return require('../../assets/uploading/svg.png')
        case 'webpage':
          return require('../../assets/uploading/webpage.png')
        case 'word':
          return require('../../assets/uploading/word.png')
        case 'zip':
          return require('../../assets/uploading/zip.png')
        case 'png':
          return require('../../assets/uploading/png.png')
        case 'doc':
          return require('../../assets/uploading/doc.png')
        case 'docx':
          return require('../../assets/uploading/docx.png')
        case 'tif':
          return require('../../assets/uploading/tif.png')
        case 'wps':
          return require('../../assets/uploading/wps.png')
        default:
          return require('../../assets/uploading/unknown.png')
      }
    },
    beforeAvatarUpload(file) {
      if (this.folderform.folderid === '' || this.folderform.folderid === null) {
        this.fileDate.folderid = this.activities[0].id
      } else {
        this.fileDate.folderid = this.folderform.folderid
      }

      const isLt50M = file.size / 1024 / 1024 < 200
      if (!isLt50M) {
        this.$message.error('上传文件不能超过 200MB!')
      }
      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 folderid = this.activities[0].id
        if (this.folderform.folderid !== '' && this.folderform.folderid !== null) {
          folderid = this.folderform.folderid
        }

        // 生成查询文件的条件
        var params = {
          folderid: folderid,
          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 filename = '下载文件'
        if (this.folderform.folderid === '' || this.folderform.folderid === null) {
          filename = this.activities[0].timestamp
        } else {
          filename = this.folderform.foldername
        }

        const loadingInstance = Loading.service({ fullscreen: true })
        // 生成查询文件的条件
        var params = { fileids: checke.join(',') }
        this.$download('hr/filesUpload/download', { ...params }, filename + '.zip').then(() => {
          loadingInstance.close()
          this.$message({
            message: '下载成功!',
            type: 'success'
          })
        })
      }
    },
    delFile() {
      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.$delete('hr/filesUpload', { ...params }).then(() => {
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          // 生成查询文件的条件
          var initFileParams = {
            folderid: this.activities[this.beforeIndex].id,
            filesname: this.fileName
          }

          this.initFile(initFileParams)
        })
      }
    },
    mvfolder(formName) {
      // if (this.mvfolderform.folderid === this.activities[this.beforeIndex].id) {
      //   this.$message({
      //     message: '文件在同一目录!',
      //     type: 'warning'
      //   })
      //   return
      // }
      if (this.mvfolderform.folderid === '') {
        this.$message({
          message: '选择文件夹!',
          type: 'warning'
        })
        return
      }
      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(','), folderid: this.mvfolderform.folderid }
        this.$post('hr/filesUpload/mvFiles', { ...params }).then(() => {
          this.$message({
            message: '移动成功!',
            type: 'success'
          })
          this.mvdialogFormVisible = false
          this.mvfolderform.folderid = ''
          // 生成查询文件的条件
          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:after {
   clear: both;
}
.add-folder {
   text-align: initial;
}
.zs-main {
   .search-title {
      height: 50px;
      .search {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
      }
      .title {
         position: relative;
         top: 40%;
         transform: translateY(-50%);
      }
      .zs-title {
         border-left: 4px solid #a32c30;
         padding-left: 10px;
         font-size: 16px;
      }
   }
   .add-folder-but {
      background: #a32c30 !important;
      color: #fff !important;
      margin-bottom: 20px;
   }
   padding: 0 15px 0 15px;
   .text-header {
      line-height: 60px;
   }
   .uploading-image {
      width: 70%;
      height: 70%;
      display: block;
    margin-left: 30px;
   }
}

.el-timeline-item__timestamp {
   font-size: 15px;
   color: #000;
}

/* 设置带边框的checkbox，选中后边框的颜色 */
.myRedCheckBox.is-bordered.is-checked {
   border-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;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
   border-color: #a32c30;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover {
   border-color: #a32c30;
}

.myRedCheckBox .el-checkbox__label {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.myRedCheckBox {
  margin-left: -10px;
}
.myRedCheckBox .el-checkbox__input {
  vertical-align: text-top;
}
.avatar-uploader{
  .el-upload-dragger{
    width: 75px !important;
    height: 75px !important;
    .el-icon-upload{
      font-size: 40px;
      color: #8c939d;
      line-height: 30px;
    }
  }
}
// .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;
}

.zs-main  {
  .el-tree .el-tree-node__content{
    font-size:16px;
    color: #333;
    height: 35px;
    line-height: 35px;
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #e8f2fd;
    border-radius: 4px;
  }
}
</style>
<style lang="scss" scoped>
.el-main {
   margin-top: 2%;
}
.app-main {
   background-color: #ffffff;
}
.el-button,
.el-button--primary {
   background: #a32c30;
   border-color: #a32c30;
   color: #fff;
   outline: none;
}
.zs-main .text-header {
   line-height: 40px;
}
.el-card {
   border: none;
}
.el-input-number {
   width: 100%;
}
.pri-del-btn {
  background-color: rgb(64, 158, 255) !important;
  border-color: rgb(64, 158, 255) !important;
}
</style>