<template>
|
<div class="zs-main fj-upload">
|
<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: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;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"
|
:icon="activity.icon"
|
:type="activity.type"
|
:color="activity.color"
|
:size="activity.size"
|
placement="bottom"
|
>
|
<span
|
style="position: relative; top: -5px;"
|
@click="clickTimeline(index)"
|
>
|
{{ activity.timestamp }}</span>
|
</el-timeline-item>
|
</el-timeline>
|
</el-aside>
|
<el-container style="height: 88vh;">
|
<el-header class="text-header">
|
<el-row><el-col :span="24">
|
<i
|
class="el-icon-bell"
|
style="color: #a32c30; margin-right: 10px;"
|
/>提示：文件不要超过10个，单个文件大小不超过100M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</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" 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.accessoryid" :span="3">
|
<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;text-align: center">
|
<el-checkbox v-model="checkedArr[index * 8 + 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.accessoryid"
|
:preview-src-list="srcList"
|
@click="clickImg(node)"
|
/>
|
<br>
|
<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="uploadSinglePath"
|
: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'
|
import { Loading } from 'element-ui'
|
|
export default {
|
props: {
|
rowitem: {
|
type: Object,
|
required: true
|
},
|
tableindex: {
|
type: Number,
|
required: true
|
}
|
},
|
data() {
|
return {
|
srcList: [],
|
getImg: pages.getAccessoryImage,
|
updateFileNameFormVisible: false,
|
file: {
|
fileName: ''
|
},
|
mvrules: {
|
labelid: [{ required: true, message: '请选择标签', trigger: 'change' }],
|
fileName: [
|
{ required: true, message: '请输入文件名称', trigger: 'blur' },
|
{ min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
|
]
|
},
|
mvdialogFormVisible: false,
|
uploadSinglePath: pages.uploadSinglePath,
|
labelfrom: {
|
labelid: '',
|
empId: this.rowitem.empId
|
},
|
fileDate: {
|
labelid: 0,
|
empId: this.rowitem.empId
|
},
|
formLabelWidth: '100px',
|
beforeIndex: 0,
|
fileName: '',
|
checkedArr: [],
|
checkAll: false,
|
activities: [],
|
filesUploadData: [],
|
updateNum: 0
|
}
|
},
|
mounted() {
|
this.initlabel()
|
setTimeout(() => {
|
this.clickTimeline(this.tableindex)
|
}, 1500)
|
},
|
methods: {
|
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 = ''
|
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.labelname,
|
id: v.labelid,
|
color: '#a32c30'
|
})
|
} else {
|
this.activities.push({ timestamp: v.labelname, id: v.labelid })
|
}
|
})
|
})
|
var params = { labelid: this.activities[this.beforeIndex].id,
|
filesname: this.fileName,
|
empid: this.rowitem.empId }
|
this.initFile(params)
|
},
|
initFile(params) {
|
var node = { node: [] }
|
// 文件列表置为空
|
this.filesUploadData = []
|
this.checkedArr = []
|
this.$get('hr/empAccessory', { ...params }).then(r => {
|
r.data.data.forEach((v, i) => {
|
this.checkedArr.push({ isChecked: false, accessoryid: v.accessoryid })
|
// 一行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) {
|
// 不这样操作的不会响应式更新
|
// 赋值到新的列表
|
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 = {
|
labelid: this.activities[this.beforeIndex].id,
|
filesname: this.fileName,
|
empid: this.rowitem.empId
|
}
|
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)
|
})
|
}
|
},
|
showFileImg(type) {
|
switch (type) {
|
case 'xls':
|
return require('../../assets/uploading/xls.png')
|
case 'xlsx':
|
return require('../../assets/uploading/xls.png')
|
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')
|
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.labelid = this.activities[this.beforeIndex].id
|
const isLt50M = file.size / 1024 / 1024 < 100
|
if (!isLt50M) {
|
this.$message.error('上传文件不能超过 100MB!')
|
}
|
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 = {
|
labelid: this.activities[this.beforeIndex].id,
|
filesname: this.fileName,
|
empid: this.rowitem.empId
|
}
|
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.accessoryid)
|
}
|
})
|
if (checke.length <= 0) {
|
this.$message({
|
message: '请选择需要下载的文件!',
|
type: 'warning'
|
})
|
} else {
|
const loadingInstance = Loading.service({ fullscreen: true })
|
// 生成查询文件的条件
|
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'
|
})
|
})
|
}
|
},
|
delFile() {
|
var checke = []
|
this.checkedArr.forEach((v, i) => {
|
if (v.isChecked) {
|
checke.push(v.accessoryid)
|
}
|
})
|
if (checke.length <= 0) {
|
this.$message({
|
message: '请选择需要删除的文件!',
|
type: 'warning'
|
})
|
} 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)
|
})
|
}
|
},
|
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)
|
})
|
}
|
})
|
}
|
}
|
}
|
}
|
</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: 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;
|
}
|
|
/* 设置带边框的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 .el-checkbox__input {
|
vertical-align: text-top;
|
}
|
|
.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;
|
}
|
|
.el-image .el-image-viewer__mask {
|
background-color: #fff !important;
|
opacity: 1;
|
}
|
</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);
|
border-color: rgb(64, 158, 255);
|
}
|
|
</style>
|
