From 3339cd48d37e3fe1b0dd7f4ea313c0cf2a8c0623 Mon Sep 17 00:00:00 2001
From: yz <yz_0812@outlook.com>
Date: 星期四, 18 二月 2021 04:58:55 +0800
Subject: [PATCH] 标签管理
---
src/views/yunpan/zhishou.vue | 1228 +++++++++++++++++++++++++++++----------------------------
1 files changed, 622 insertions(+), 606 deletions(-)
diff --git a/src/views/yunpan/zhishou.vue b/src/views/yunpan/zhishou.vue
index 2580ee3..797a339 100644
--- a/src/views/yunpan/zhishou.vue
+++ b/src/views/yunpan/zhishou.vue
@@ -1,606 +1,622 @@
-<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">
+ <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-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-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
+ },
+ 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' }]
+ },
+ 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.dialogDelVisible = false
+ // 初始加载
+ 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 }, this.activities[this.beforeIndex].timestamp + '.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>
+
--
Gitblit v1.8.0