Merge remote-tracking branch 'origin/master'

孔祥富

2021-03-14 680c4f9e4e8b079593c8e57c100b92890e70960d

 src/views/yunpan/uploadfj.vue

@@ -1,8 +1,8 @@
<template>
  <div class="zs-main">
  <div class="zs-main fj-upload">
    <el-row class="search-title">
      <el-col :span="18" class="title">
        <div class="zs-title">附件管理</div>
        <div class="zs-title">上传附件</div>
      </el-col>
      <el-col :span="6" class="search">
        <el-input
@@ -12,59 +12,15 @@
          clearable
          placeholder="请输入文件名"
          show-word-limit
          style="width:200px"
          style="width:280px;margin-right: 10px"
        />
        <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-button class="add-folder-but" @click="dialogDelVisible = true">删除</el-button>
        <el-dialog
          title="提示"
          :visible.sync="dialogDelVisible"
          width="20%"
        >
          <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-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-aside width="210px" style="background-color: #fff;padding: 0 24px;text-align: center;height: 88vh;overflow: auto">
        <span style="font-size: 18px;font-weight: 700;">{{ rowitem.empName }}：{{ rowitem.deptName }}</span>
        <el-timeline style="margin-top: 10px">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
@@ -76,7 +32,7 @@
          >
            <span
              style="position: relative; top: -5px;"
              @click="clickTimeline(index, activity.id)"
              @click="clickTimeline(index)"
            >
              {{ activity.timestamp }}</span>
          </el-timeline-item>
@@ -87,18 +43,18 @@
          <el-row><el-col :span="24">
            <i
              class="el-icon-bell"
              style=" color: #a32c30; margin-right: 10px;"
              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-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="5">
            <el-col :span="8">
              <el-button
                type="primary"
                icon="el-icon-download"
@@ -107,35 +63,86 @@
              >下载</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" append-to-body width="20%">
          <el-form ref="updateFileName" :model="file" :rules="mvrules">
            <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"
          append-to-body
        >
          <el-form ref="mvlabelfrom" :model="labelfrom" :rules="mvrules">
            <el-form-item
              label="目录名称:"
              :label-width="formLabelWidth"
              prop="labelid"
            >
              <el-select v-model="labelfrom.labelid" placeholder="请选择移动的标签">
                <el-option
                  v-for="item in activities"
                  :key="item.id"
                  :value="item.id"
                  :label="item.timestamp"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="mvdialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="mvlabel('mvlabelfrom')"
            >确 定</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="3">
                <el-card
                  shadow="never"
                  @click.native="clickCard(index * 8 + nodeIndex)"
                >
                  <img
                  <el-image
                    :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>
                    :preview-src-list="srcList"
                    @click="clickImg(node)"
                  />
                  <el-tooltip class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;text-align: center">
                      <el-checkbox v-model="checkedArr[index * 8 + 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="3">
                <el-card shadow="never">
                  <el-upload
                    class="avatar-uploader"
                    :action="filesUploadUrl"
                    :action="uploadSinglePath"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :headers="headers()"
@@ -161,26 +168,43 @@
<script>
import { getToken } from '@/utils/auth'
import { pages } from '@/settings'
import { Loading } from 'element-ui'

export default {
  props: {
    rowitem: {
      type: Object,
      required: true
    },
    tableindex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      filesUploadUrl: pages.filesUploadUrl,
      srcList: [],
      getImg: pages.getAccessoryImage,
      updateFileNameFormVisible: false,
      file: {
        fileName: ''
      },
      mvrules: {
        labelid: [{ required: true, message: '请选择标签', trigger: 'change' }],
        fileName: [
          { required: true, message: '请输入文件名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
      mvdialogFormVisible: false,
      uploadSinglePath: pages.uploadSinglePath,
      labelfrom: {
        labelid: '',
        empId: this.rowitem.empId
      },
      fileDate: {
        folderid: 0
      },
      dialogDelVisible: false,
      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' }]
        labelid: 0,
        empId: this.rowitem.empId
      },
      formLabelWidth: '100px',
      beforeIndex: 0,
@@ -193,27 +217,84 @@
    }
  },
  mounted() {
    // 初始加载
    this.initFolder()
    this.initlabel()
    setTimeout(() => {
      this.clickTimeline(this.tableindex)
    }, 1500)
  },
  methods: {
    async initFolder() {
      await this.$get('hr/folder').then(r => {
    clickImg(node) {
      this.srcList = []
      if ('tif,bmp,jpg,png,gif'.indexOf(node.filesformat) >= 0) {
        this.srcList.push(this.getImg + node.accessoryid)
      }
    },
    updateFileName(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var checke = ''
          debugger
          this.checkedArr.forEach((v, i) => {
            if (v.isChecked) {
              checke = v.accessoryid
            }
          })
          // 生成查询文件的条件
          var params = { accessoryid: checke, filesname: this.file.fileName }
          this.$put('hr/empAccessory', { ...params }).then(() => {
            this.$message({
              message: '重命名成功!',
              type: 'success'
            })
            this.file.fileName = ''
            this.updateFileNameFormVisible = false
            // 生成查询文件的条件
            var initFileParams = {
              labelid: this.activities[this.beforeIndex].id,
              filesname: this.fileName,
              empid: this.rowitem.empId
            }
            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 initlabel() {
      await this.$get('hr/label').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,
              timestamp: v.labelname,
              id: v.labelid,
              color: '#a32c30'
            })
          } else {
            this.activities.push({ timestamp: v.foldername, id: v.folderid })
            this.activities.push({ timestamp: v.labelname, id: v.labelid })
          }
        })
      })
      var params = { folderid: this.activities[0].id }
      var params = { labelid: this.activities[this.beforeIndex].id,
        filesname: this.fileName,
        empid: this.rowitem.empId }
      this.initFile(params)
    },
    initFile(params) {
@@ -221,9 +302,9 @@
      // 文件列表置为空
      this.filesUploadData = []
      this.checkedArr = []
      this.$get('hr/filesUpload', { ...params }).then(r => {
      this.$get('hr/empAccessory', { ...params }).then(r => {
        r.data.data.forEach((v, i) => {
          this.checkedArr.push({ isChecked: false, filesid: v.filesid })
          this.checkedArr.push({ isChecked: false, accessoryid: v.accessoryid })
          // 一行8个 等于8就换行
          if (i % 8 === 0 && i !== 0) {
            this.filesUploadData.push(node)
@@ -254,7 +335,7 @@
        }
      })
    },
    clickTimeline(index, id) {
    clickTimeline(index) {
      // 不这样操作的不会响应式更新
      // 赋值到新的列表
      var list = this.activities
@@ -269,18 +350,12 @@
      // 将修改好的数组放回去
      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
        }
      // 生成查询文件的条件
      var params = {
        labelid: this.activities[this.beforeIndex].id,
        filesname: this.fileName,
        empid: this.rowitem.empId
      }

      this.initFile(params)
    },
    clickCard(index) {
@@ -300,45 +375,6 @@
          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.dialogDelVisible = false
        // 初始加载
        this.initFolder()
      })
    },
    showFileImg(type) {
      switch (type) {
@@ -384,12 +420,20 @@
          return require('../../assets/uploading/jpg.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) {
      this.fileDate.folderid = this.activities[this.beforeIndex].id
      this.fileDate.labelid = this.activities[this.beforeIndex].id
      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isLt50M) {
        this.$message.error('上传文件不能超过 50MB!')
@@ -417,8 +461,9 @@
        this.updateNum = 0
        // 生成查询文件的条件
        var params = {
          folderid: this.activities[this.beforeIndex].id,
          filesname: this.fileName
          labelid: this.activities[this.beforeIndex].id,
          filesname: this.fileName,
          empid: this.rowitem.empId
        }
        this.initFile(params)
      }
@@ -434,7 +479,7 @@
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.filesid)
          checke.push(v.accessoryid)
        }
      })
      if (checke.length <= 0) {
@@ -443,9 +488,11 @@
          type: 'warning'
        })
      } else {
        const loadingInstance = Loading.service({ fullscreen: true })
        // 生成查询文件的条件
        var params = { fileids: checke.join(',') }
        this.$download('hr/filesUpload/download', { ...params }, new Date().getTime() + '.zip').then(() => {
        var params = { accessoryids: checke.join(',') }
        this.$download('hr/empAccessory/download', { ...params }, this.activities[this.beforeIndex].timestamp + '.zip').then(() => {
          loadingInstance.close()
          this.$message({
            message: '下载成功!',
            type: 'success'
@@ -457,24 +504,82 @@
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.filesid)
          checke.push(v.accessoryid)
        }
      })
      // 生成查询文件的条件
      var params = { fileids: checke.join(',') }
      this.$delete('hr/filesUpload', { ...params }).then(() => {
      if (checke.length <= 0) {
        this.$message({
          message: '删除成功!',
          type: 'success'
          message: '请选择需要删除的文件!',
          type: 'warning'
        })
        // 生成查询文件的条件
        var initFileParams = {
          folderid: this.activities[this.beforeIndex].id,
          filesname: this.fileName
        }
      } else {
      // 生成查询文件的条件
        var params = { accessoryids: checke.join(',') }
        this.$delete('hr/empAccessory', { ...params }).then(() => {
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          // 生成查询文件的条件
          var initFileParams = {
            labelid: this.activities[this.beforeIndex].id,
            filesname: this.fileName,
            empid: this.rowitem.empId
          }

        this.initFile(initFileParams)
          this.initFile(initFileParams)
        })
      }
    },
    findFileByFileName() {
      // 生成查询文件的条件
      var params = {
        filesname: this.fileName,
        empid: this.rowitem.empId
      }
      this.initFile(params)
    },
    mvlabel(formName) {
      if (this.labelfrom.labelid === this.activities[this.beforeIndex].id) {
        this.$message({
          message: '文件在同一目录!',
          type: 'warning'
        })
        return
      }
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.accessoryid)
        }
      })
      if (checke.length <= 0) {
        this.$message({
          message: '请选择需要移动的文件!',
          type: 'warning'
        })
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 生成查询文件的条件
            var params = { accessoryids: checke.join(','), labelid: this.labelfrom.labelid, empId: this.labelfrom.empId }
            this.$post('hr/empAccessory/mvFiles', { ...params }).then(() => {
              this.$message({
                message: '移动成功!',
                type: 'success'
              })
              this.mvdialogFormVisible = false
              // 生成查询文件的条件
              var initFileParams = {
                labelid: this.activities[this.beforeIndex].id,
                filesname: this.fileName,
                empid: this.rowitem.empId
              }
              this.initFile(initFileParams)
            })
          }
        })
      }
    }
  }
}
@@ -513,8 +618,8 @@
      }
   }
   .add-folder-but {
      background: #fff !important;
      color: #a32c30 !important;
      background: #a32c30 !important;
      color: #fff !important;
      margin-bottom: 20px;
   }
   padding: 0 15px 0 15px;
@@ -522,12 +627,15 @@
      line-height: 60px;
   }
   .uploading-image {
      width: 100%;
      height: 100%;
      width: 45%;
      height: 45%;
      display: block;
    margin: 0 auto;
   }
}

.fj-upload .el-timeline-item {
  padding-bottom: 1px;
}
.el-timeline-item__timestamp {
   font-size: 15px;
   color: #000;
@@ -558,6 +666,14 @@
/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover {
   border-color: #a32c30;
}
.myRedCheckBox .el-checkbox__label {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.myRedCheckBox .el-checkbox__input {
  vertical-align: text-top;
}

.avatar-uploader .el-upload {
@@ -615,4 +731,8 @@
.el-input-number {
   width: 100%;
}
.pri-del-btn {
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}
</style>