孔祥富
2021-03-18 2402f7902663a20fe1b66f4305abb5ba05d7016f
src/views/yunpan/zhishou.vue
@@ -37,6 +37,17 @@
            >
              <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"
@@ -54,7 +65,19 @@
            >确 定</el-button>
          </div>
        </el-dialog>
        <el-timeline>
        <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"
@@ -70,7 +93,7 @@
            >
              {{ activity.timestamp }}</span>
          </el-timeline-item>
        </el-timeline>
        </el-timeline>-->
      </el-aside>
      <el-container>
        <el-header class="text-header">
@@ -128,27 +151,27 @@
          width="25%"
          class="add-label"
        >
          <el-form ref="mvfolderform" :model="folderform" :rules="mvrules">
          <el-form ref="mvfolderform" :model="mvfolderform">
            <el-form-item
              label="目录名称:"
              :label-width="formLabelWidth"
              prop="folderid"
            >
              <el-select v-model="folderform.folderid" placeholder="请选择移动的目录">
                <el-option
                  v-for="item in activities"
                  :key="item.id"
                  :value="item.id"
                  :label="item.timestamp"
                />
              </el-select>
              <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('mvfolderform')"
              @click="mvfolder()"
            >确 定</el-button>
          </div>
        </el-dialog>
@@ -160,14 +183,29 @@
                  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 class="item" effect="dark" :content="node.filesname" placement="bottom">
                  <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>
@@ -203,10 +241,16 @@
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,
@@ -215,7 +259,7 @@
      },
      rowCount: 12,
      mvrules: {
        folderid: [{ required: true, message: '请选择目录', trigger: 'change' }]
        folderid: [{ required: true, message: '请选择目录', trigger: 'blur' }]
      },
      filesUploadUrl: pages.filesUploadUrl,
      fileDate: {
@@ -225,9 +269,13 @@
      dialogDelVisible: false,
      dialogFormVisible: false,
      folderform: {
        parentId: '',
        folderid: '',
        foldername: '',
        sort: 0
      },
      mvfolderform: {
        folderid: ''
      },
      rules: {
        foldername: [
@@ -240,14 +288,15 @@
        ],
        sort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }]
      },
      formLabelWidth: '100px',
      formLabelWidth: '120px',
      beforeIndex: 0,
      fileName: '',
      checkedArr: [],
      checkAll: false,
      activities: [],
      filesUploadData: [],
      updateNum: 0
      updateNum: 0,
      folderid: ''
    }
  },
  mounted() {
@@ -255,6 +304,27 @@
    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) {
@@ -279,9 +349,13 @@
            })
            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: this.activities[this.beforeIndex].id,
              folderid: folderid,
              filesname: this.fileName
            }
            this.initFile(initFileParams)
@@ -307,18 +381,19 @@
      }
    },
    async initFolder() {
      await this.$get('hr/folder').then(r => {
      await this.$get('hr/folder/treeList').then(r => {
        this.activities = []
        this.beforeIndex = 0
        r.data.data.forEach((v, i) => {
        this.activitiesTree = r.data.data.rows
        r.data.data.rows.forEach((v, i) => {
          if (i === 0) {
            this.activities.push({
              timestamp: v.foldername,
              id: v.folderid,
              timestamp: v.label,
              id: v.id,
              color: '#a32c30'
            })
          } else {
            this.activities.push({ timestamp: v.foldername, id: v.folderid })
            this.activities.push({ timestamp: v.label, id: v.id })
          }
        })
      })
@@ -437,7 +512,7 @@
    },
    delFolder() {
      // 生成查询文件的条件
      var params = { folderid: this.activities[this.beforeIndex].id }
      var params = { folderid: this.folderid }
      this.$delete('hr/folder', { ...params }).then(() => {
        this.dialogFormVisible = false
        this.$message({
@@ -453,6 +528,10 @@
      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':
@@ -489,8 +568,6 @@
          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')
        case 'doc':
@@ -506,10 +583,15 @@
      }
    },
    beforeAvatarUpload(file) {
      this.fileDate.folderid = this.activities[this.beforeIndex].id
      const isLt50M = file.size / 1024 / 1024 < 50
      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('上传文件不能超过 50MB!')
        this.$message.error('上传文件不能超过 200MB!')
      }
      return isLt50M
    },
@@ -532,9 +614,14 @@
      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: this.activities[this.beforeIndex].id,
          folderid: folderid,
          filesname: this.fileName
        }
        this.initFile(params)
@@ -560,10 +647,17 @@
          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 }, this.activities[this.beforeIndex].timestamp + '.zip').then(() => {
        this.$download('hr/filesUpload/download', { ...params }, filename + '.zip').then(() => {
          loadingInstance.close()
          this.$message({
            message: '下载成功!',
@@ -603,9 +697,16 @@
      }
    },
    mvfolder(formName) {
      if (this.folderform.folderid === this.activities[this.beforeIndex].id) {
      // if (this.mvfolderform.folderid === this.activities[this.beforeIndex].id) {
      //   this.$message({
      //     message: '文件在同一目录!',
      //     type: 'warning'
      //   })
      //   return
      // }
      if (this.mvfolderform.folderid === '') {
        this.$message({
          message: '文件在同一目录!',
          message: '选择文件夹!',
          type: 'warning'
        })
        return
@@ -622,24 +723,21 @@
          type: 'warning'
        })
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 生成查询文件的条件
            var params = { fileids: checke.join(','), folderid: this.folderform.folderid }
            this.$post('hr/filesUpload/mvFiles', { ...params }).then(() => {
              this.$message({
                message: '移动成功!',
                type: 'success'
              })
              this.mvdialogFormVisible = false
              // 生成查询文件的条件
              var initFileParams = {
                folderid: this.activities[this.beforeIndex].id,
                filesname: this.fileName
              }
              this.initFile(initFileParams)
            })
        // 生成查询文件的条件
        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)
        })
      }
    }
@@ -741,8 +839,8 @@
}
.avatar-uploader{
  .el-upload-dragger{
    width: 65px !important;
    height: 65px !important;
    width: 75px !important;
    height: 75px !important;
    .el-icon-upload{
      font-size: 40px;
      color: #8c939d;
@@ -781,6 +879,19 @@
   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 {