<template>
|
<div class="upload-wrap activity-album">
|
<div class="upload-wrap-inline mb16 d-b-c">
|
<!-- <div class="d-s-c">
|
<el-button size="small" icon="el-icon-upload" type="primary" @click="uploadModal">点击上传</el-button>
|
<el-button size="small" type="danger" icon="el-icon-delete" @click="deleteFileFunc(false)">批量删除</el-button>
|
</div> -->
|
<el-input
|
v-model="formData.keyword"
|
@keyup.enter.native="getData()"
|
placeholder="请输入文件名称搜索"
|
style="width: 230px;"
|
size="small"
|
>
|
<el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getData()" />
|
</el-input>
|
</div>
|
|
<!--我的资源库-->
|
<div class="file-container">
|
<!-- <div class="file-type">
|
<ul>
|
<li :class="activeType==item.group_id?'item active':'item'" v-for="(item,index) in typeList" :key="index"
|
@click="selectTypeFunc(item.group_id)">
|
{{item.group_name}}
|
<div class="operation" @click.stop v-if="item.group_id!=null">
|
<p @click="editCategoryFunc(item)"><i class="el-icon-edit"></i></p>
|
<p @click="deleteCategoryFunc(item.group_id)"><i class="el-icon-delete"></i></p>
|
</div>
|
</li>
|
</ul>
|
</div> -->
|
<div class="file-content">
|
<ul class="file-containerUI clearfix">
|
<li class="file" v-for="(item, index) in fileList.data" :key="index">
|
<div v-if="item.selected==true" class="selectedIcon"><i class="el-icon-check"></i></div>
|
<el-image class="img" v-if="this_config.file_type == 'image'" :src="item.file_path" fit="contain" />
|
<video v-if="this_config.file_type == 'video'" height="138" width="138" :src="item.file_path" :autoplay="false">
|
您的浏览器不支持 video 标签
|
</video>
|
<p class="desc">{{ item.real_name }}</p>
|
<div class="bottom-shade" @click.stop>
|
<!-- <a href="javascript:void(0)" @click="deleteFileFunc(item)">删除</a> -->
|
<!-- <el-popover
|
placement="top"
|
width="400"
|
trigger="click">
|
<el-input size="small" type="text" v-model="new_name">
|
<el-button slot="append" @click="handleEdit">确定</el-button>
|
</el-input>
|
<el-button type="text" slot="reference" @click="new_name=item.real_name">重命名</el-button>
|
</el-popover> -->
|
<a href="javascript:void(0)" @click="viewFileFunc(index, item)">查看</a>
|
</div>
|
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<!--分页-->
|
<div class="pagination">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
background
|
:current-page="curPage"
|
:page-size="pageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="totalDataNumber"
|
></el-pagination>
|
</div>
|
<!-- 图片预览 -->
|
<el-image-viewer
|
v-if="showViewer"
|
:on-close="closeViewer"
|
:url-list="viewerList"
|
:initial-index="viewer_index"
|
style="z-index: 3008;"
|
/>
|
<!-- 上传 -->
|
<Upload ref="upload" :activity_id="activity_id" :config="this_config" :isIframe="false" @uploadSuccess="uploadSuccess"></Upload>
|
<!-- 视频预览 -->
|
<PreviewVideo ref="previewVideo" :videoData="videoData" @close="closePreviewVideo"></PreviewVideo>
|
<!--图片类别-->
|
<!-- <AddCategory v-if="isShowCategory" :category="category" :file_type="this_config.file_type" @closeCategory="closeCategoryFunc"></AddCategory> -->
|
</div>
|
</template>
|
|
<script>
|
import FileApi from '@/api/file.js';
|
import BranchApi from '@/api/branch.js';
|
// import AddCategory from './part/AddCategory'
|
import elImageViewer from "element-ui/packages/image/src/image-viewer";
|
import Upload from './upload.vue';
|
import PreviewVideo from './previewVideo.vue';
|
export default {
|
components: {
|
// AddCategory,
|
elImageViewer,
|
Upload,
|
PreviewVideo
|
},
|
data() {
|
return {
|
/*宽度*/
|
dialogWidth: '910px',
|
/*类别*/
|
activeType: null,
|
/*图片类别*/
|
typeList: [],
|
/*图标路径*/
|
imageUrl: null,
|
/*弹窗显示*/
|
dialogVisible: true,
|
/*文件列表*/
|
fileList: [],
|
/*分类添加loading*/
|
addLoading: false,
|
/*默认值*/
|
this_config: {
|
/*上传个数*/
|
total: 50,
|
file_type: 'image'
|
},
|
/*记录选中的个数*/
|
record: 0,
|
/*是否加载完成*/
|
loading: true,
|
/*列表数据*/
|
tableData: [],
|
/*一页多少条*/
|
pageSize: 12,
|
/*一共多少条数据*/
|
totalDataNumber: 0,
|
/*当前是第几页*/
|
curPage: 1,
|
/*是否显示图片类别编辑框*/
|
isShowCategory: false,
|
/*当前类别model*/
|
category:null,
|
/*选中图片*/
|
fileIds:[],
|
accept:'',
|
formData: {
|
keyword: '',
|
},
|
new_name: '',
|
viewer_index: 0,
|
showViewer: false,
|
/*图片预览列表*/
|
viewerList: [],
|
videoData: {},
|
};
|
},
|
props: ['config', 'activity_id'],
|
created() {
|
/*覆盖默认值*/
|
if(Object.prototype.toString.call(this.config).toLowerCase() === '[object object]'){
|
for(let key in this.config){
|
this.this_config[key]=this.config[key];
|
}
|
if(this.this_config['file_type'] == 'image'){
|
this.accept = 'image/jpeg,image/png,image/jpg';
|
}else{
|
this.accept = 'video/mp4';
|
}
|
}
|
|
// this.getFileCategory();
|
this.getData();
|
},
|
methods: {
|
/*获取图片列表数据*/
|
getData: function() {
|
let self = this;
|
let param = {
|
page: self.curPage,
|
list_rows: self.pageSize,
|
// group_id: self.activeType,
|
type: self.this_config.file_type,
|
activity_id: self.activity_id,
|
keyword: self.formData.keyword
|
}
|
BranchApi.activityFileList(param, true).then(res => {
|
self.loading = false;
|
self.fileList = res.data.list;
|
// 整理图片预览列表
|
self.getViewerList();
|
self.totalDataNumber = self.fileList.total;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
// 整理图片预览列表
|
getViewerList() {
|
let self = this;
|
if (self.this_config.file_type != 'image') {
|
return;
|
}
|
self.viewerList = [];
|
self.fileList.data.forEach((el) => {
|
self.viewerList.push(el.file_path);
|
});
|
},
|
|
// 点击上传
|
uploadModal() {
|
this.$refs.upload.uploadModal = true;
|
},
|
|
uploadSuccess() {
|
this.curPage = 1;
|
this.formData.keyword = '';
|
setTimeout(() => {
|
this.getData();
|
}, 500);
|
},
|
|
// 关闭视频预览
|
closePreviewVideo() {
|
this.$refs.previewVideo.openModal = false;
|
},
|
/*获取图片类别*/
|
getFileCategory() {
|
let self = this;
|
FileApi.fileCategory({
|
type: self.this_config.file_type
|
}, true)
|
.then(data => {
|
let type = [{
|
group_id: null,
|
group_name: '全部'
|
}];
|
self.typeList = type.concat(data.data.group_list);
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
/*添加图片类别*/
|
addCategory() {
|
this.isShowCategory = true;
|
},
|
|
/*修改类别*/
|
editCategoryFunc(item){
|
this.isShowCategory = true;
|
this.category=item;
|
},
|
|
/*关闭类别层*/
|
closeCategoryFunc(e) {
|
if (e != null) {
|
this.getFileCategory();
|
}
|
this.isShowCategory = false;
|
},
|
|
/*删除类别提示*/
|
deleteCategoryFunc(e) {
|
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.deleteCategory(e);
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
/*删除类别*/
|
deleteCategory(e) {
|
let self = this;
|
FileApi.deleteCategory({
|
group_id: e
|
}, ).then(data => {
|
self.$message({
|
message: '删除成功',
|
type: 'success'
|
});
|
self.getFileCategory();
|
})
|
.catch(error => {
|
self.$message.error('删除失败');
|
});
|
},
|
|
/*选择类别*/
|
selectTypeFunc(id) {
|
this.activeType = id;
|
this.curPage = 1;
|
this.getData();
|
},
|
|
/*选择第几页*/
|
handleCurrentChange(val) {
|
this.curPage = val;
|
this.getData();
|
},
|
|
/*每页多少条*/
|
handleSizeChange(val) {
|
this.curPage = 1;
|
this.pageSize = val;
|
this.getData();
|
},
|
|
/*图片移动到某个类别*/
|
moveTypeFunc(e){
|
let self = this;
|
let fileIds=[];
|
self.fileList.data.forEach(item =>
|
{
|
if (item.selected) {
|
fileIds.push(item.file_id);
|
}
|
});
|
if(fileIds.length==0){
|
self.$message({
|
message: '请选择文件',
|
type: 'warning'
|
});
|
return ;
|
}
|
self.$confirm('确定移动选中的文件吗？, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
FileApi.moveFile({
|
group_id:e,
|
fileIds:fileIds,
|
}, true).then(data => {
|
self.$message({
|
message: '移动成功',
|
type: 'success'
|
});
|
self.getFileCategory();
|
self.getData();
|
}).catch(error => {
|
});
|
}).catch(() => {
|
|
});
|
},
|
|
/*选择上传图片*/
|
fileChange(e) {
|
console.log(e);
|
},
|
|
/*选择图片之前*/
|
onBeforeUploadImage(file) {
|
return true;
|
},
|
|
/*选择图片*/
|
selectFileFunc(item, index) {
|
if (item.selected) {
|
item.selected = false;
|
this.record--;
|
} else {
|
item.selected = true;
|
this.record++;
|
/* if (this.record >= this.this_config.total) {
|
this.$message({
|
message: '本次最多只能上传 ' + this.this_config.total + ' 个文件',
|
type: 'warning'
|
});
|
return;
|
} else {
|
item.selected = true;
|
this.record++;
|
} */
|
}
|
this.$set(this.fileList.data, index, item);
|
},
|
|
/*删除图片*/
|
deleteFileFunc(e) {
|
let self = this;
|
self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const loading = self.$loading({
|
lock: true,
|
text: '正在删除',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
let temp_list=[];
|
if(e){
|
temp_list.push(e.file_id);
|
}else{
|
for (let i = 0; i < self.fileList.data.length; i++) {
|
let item = self.fileList.data[i];
|
if (item.selected) {
|
temp_list.push(item.file_id);
|
}
|
}
|
}
|
BranchApi.deleteActivityFile({
|
fileIds: temp_list
|
}, true)
|
.then(data => {
|
loading.close();
|
self.$message({
|
message: '删除成功',
|
type: 'success'
|
});
|
self.getData();
|
})
|
.catch(error => {
|
loading.close();
|
});
|
}).catch(() => {
|
loading.close();
|
self.$message({
|
message: '删除失败',
|
type: 'warning'
|
});
|
});
|
},
|
|
/*选择图片确认*/
|
confirmFunc() {
|
let list = [];
|
let leng=0;
|
for (let i = 0; i < this.fileList.data.length; i++) {
|
let item = this.fileList.data[i];
|
if (item.selected) {
|
let obj = {
|
file_id: item.file_id,
|
file_path: item.file_path
|
}
|
list.push(obj);
|
leng++;
|
}
|
if(leng>this.this_config.total){
|
break;
|
}
|
}
|
this.$emit('returnImgs', list);
|
},
|
|
/*取消*/
|
cancelFunc() {
|
this.$emit('returnImgs', null);
|
},
|
|
// 编辑文件名称
|
handleEdit(item) {
|
if (!this.new_name.trim()) {
|
this.$message.warning("请先输入名称");
|
return;
|
}
|
// picNameEditApi(item.attachment_id, {
|
// attachment_name: item.attachment_name
|
// }).then((res) =>{
|
// item.isEdit = false;
|
// this.$message.success(res.message);
|
// }).catch((error) => {
|
// this.$message.error(error.message);
|
// });
|
},
|
|
// 预览
|
viewFileFunc(index, item) {
|
if (this.this_config.file_type == 'image') {
|
this.viewer_index = index;
|
this.showViewer = true;
|
} else {
|
this.videoData = item;
|
this.$refs.previewVideo.openModal = true;
|
}
|
},
|
|
closeViewer() {
|
this.showViewer = false;
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.activity-album {
|
.upload-wrap-inline .leval-item {
|
display: inline-block;
|
}
|
|
.upload-wrap-inline .upload-btn {
|
float: right;
|
}
|
|
.file-container {
|
position: relative;
|
// padding-left: 120px;
|
}
|
|
.file-container .file-type {
|
position: absolute;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
overflow-y: auto;
|
width: 120px;
|
}
|
|
.file-container .file-type li {
|
padding: 10px 0;
|
cursor: pointer;
|
text-align: center;
|
padding-right: 20px;
|
min-height: 20px;
|
position: relative;
|
}
|
|
.file-container .file-type li.active {
|
background: #b4b4b4;
|
color: #FFFFFF
|
}
|
|
.file-container .file-type li .operation {
|
display: none;
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
width: 20px;
|
}
|
|
.file-container .file-type li:hover .operation {
|
display: block;
|
}
|
|
.file-container .file-content {
|
min-height: 300px;
|
text-align: center;
|
overflow: hidden;
|
padding: 10px;
|
margin: 0;
|
// overflow-y: auto;
|
border: 1px solid #c6c6c6;
|
}
|
|
.file-container li.file {
|
float: left;
|
margin: 10px 9px 0px;
|
position: relative;
|
width: 138px;
|
}
|
|
.file-container li.file .img {
|
display: inline-block;
|
width: 138px;
|
height: 138px;
|
cursor: pointer;
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center;
|
background-color: #fff;
|
position: relative;
|
}
|
.file-container li.file .img:after {
|
position: absolute;
|
content: " ";
|
width: 138px;
|
height: 138px;
|
border: 1px solid #eee;
|
top: 0;
|
left: 0;
|
}
|
|
.file-container li.file p.desc {
|
font-size: 12px;
|
height: 32px;
|
line-height: 32px;
|
overflow: hidden;
|
width: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-wrap: break-word;
|
}
|
|
.file-container li.file:hover .bottom-shade {
|
display: block;
|
}
|
|
.file-container .bottom-shade {
|
position: absolute;
|
bottom: 35px;
|
left: 0;
|
background: rgba(0, 0, 0, 0.7);
|
height: 26px;
|
line-height: 26px;
|
width: 100%;
|
display: none;
|
transform: all 0.2s ease-out 0s;
|
color: #FFFFFF;
|
}
|
.file-container .bottom-shade a {
|
color:#FFFFFF;
|
margin: 0 5px;
|
}
|
|
.file-container .bottom-shade .el-button--text, .file-container .bottom-shade .el-button--text:focus, .file-container .bottom-shade .el-button--text:hover {
|
color: #ffffff;
|
line-height: 0;
|
}
|
|
.file-container .selectedIcon {
|
width: 20px;
|
height: 20px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background: #ff9900;
|
z-index: 1;
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
|
.move-type{ max-height: 200px; overflow-y: auto;}
|
.move-type li{ padding: 0 10px; height:30px; line-height: 30px; cursor:pointer;}
|
.move-type li:hover{ background: #c6e2ff;}
|
}
|
|
|
</style>
|
