<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%"
|
:before-close="handleClose"
|
>
|
<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="排序" @change="handleChange" />
|
</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">下载</el-button>
|
<el-button type="primary" icon="el-icon-search" size="mini">删除</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="https://jsonplaceholder.typicode.com/posts/"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
drag
|
>
|
<i class="el-icon-upload" />
|
</el-upload>
|
</el-card>
|
</el-col>
|
</template>
|
</el-row>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
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: []
|
}
|
}, 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')
|
default:
|
return require('../../assets/uploading/unknown.png')
|
}
|
}
|
}
|
}
|
</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{
|
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>
|
