mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 22:20:27 +08:00
722 lines
14 KiB
Vue
722 lines
14 KiB
Vue
<template>
|
|
<div class="cl-upload-space__wrap">
|
|
<slot>
|
|
<el-button v-if="showButton" size="mini" @click="open">点击上传</el-button>
|
|
</slot>
|
|
|
|
<!-- 弹框 -->
|
|
<cl-dialog :visible.sync="visible" v-bind="props" :op-list="['close']">
|
|
<div class="cl-upload-space">
|
|
<!-- 类目 -->
|
|
<div class="cl-upload-space__category">
|
|
<div class="cl-upload-space__category-search">
|
|
<el-button type="primary" size="mini" @click="editCategory()"
|
|
>添加分类</el-button
|
|
>
|
|
|
|
<el-input
|
|
v-model="category.keyword"
|
|
placeholder="输入关键字过滤"
|
|
size="mini"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="cl-upload-space__category-list">
|
|
<ul>
|
|
<li
|
|
v-for="(item, index) in categoryList"
|
|
:key="index"
|
|
:class="{
|
|
'is-active': item.id == category.current.id
|
|
}"
|
|
@click="selectCategory(item)"
|
|
@contextmenu.stop.prevent="openCategoryContextMenu($event, item)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="cl-upload-space__content">
|
|
<!-- 操作栏 -->
|
|
<div class="cl-upload-space__opbar">
|
|
<el-button
|
|
type="success"
|
|
size="mini"
|
|
:disabled="selection.length === 0"
|
|
@click="confirmFile()"
|
|
>使用选中文件</el-button
|
|
>
|
|
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
:disabled="selection.length === 0"
|
|
@click="deleteFile()"
|
|
>删除选中文件</el-button
|
|
>
|
|
|
|
<cl-upload
|
|
style="margin-left: 10px"
|
|
list-type="slot"
|
|
:action="action"
|
|
:accept="accept"
|
|
:limit-size="limitSize"
|
|
:show-file-list="false"
|
|
:headers="headers"
|
|
:data="data"
|
|
:disabled="disabled"
|
|
:rename="rename"
|
|
:on-success="onSuccess"
|
|
:on-progress="onProgress"
|
|
:before-upload="beforeUpload"
|
|
>
|
|
<el-button size="mini" type="primary">点击上传</el-button>
|
|
</cl-upload>
|
|
</div>
|
|
|
|
<!-- 文件区域 -->
|
|
<div
|
|
class="cl-upload-space__file"
|
|
v-loading="file.loading"
|
|
element-loading-text="拼命加载中"
|
|
>
|
|
<!-- 文件列表 -->
|
|
<el-row v-if="file.list.length > 0">
|
|
<el-col :span="6" v-for="item in file.list" :key="item.id">
|
|
<file-item
|
|
:value="item"
|
|
:element-loading-text="item.progress"
|
|
v-loading="item.loading"
|
|
></file-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 空态 -->
|
|
<div class="cl-upload-space__file-empty" v-else>
|
|
<cl-upload
|
|
drag
|
|
:action="action"
|
|
:accept="accept"
|
|
:limit-size="limitSize"
|
|
:headers="headers"
|
|
:data="data"
|
|
:disabled="disabled"
|
|
:rename="rename"
|
|
:on-success="onSuccess"
|
|
:on-progress="onProgress"
|
|
:before-upload="beforeUpload"
|
|
>
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">
|
|
将文件拖到此处，或<em>点击上传</em>
|
|
</div>
|
|
</cl-upload>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
background
|
|
:page-size="file.pagination.size"
|
|
:current-page="file.pagination.page"
|
|
:total="file.pagination.total"
|
|
@current-change="onCurrentChange"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
</cl-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { last, isEmpty } from "cl-admin/utils";
|
|
|
|
export default {
|
|
name: "cl-upload-space",
|
|
|
|
componentName: "UploadSpace",
|
|
|
|
props: {
|
|
// 上传的地址
|
|
action: String,
|
|
// 选择图片的长度
|
|
limit: {
|
|
type: Number,
|
|
default: 8
|
|
},
|
|
// 最大允许上传文件大小(MB)
|
|
limitSize: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
// 是否禁用
|
|
disabled: Boolean,
|
|
// 是否以 uuid 重命名
|
|
rename: Boolean,
|
|
// 设置上传的请求头部
|
|
headers: Object,
|
|
// 上传时附带的额外参数
|
|
data: Object,
|
|
// 上传的文件类型
|
|
accept: String,
|
|
// 是否返回详细数据
|
|
detailData: Boolean,
|
|
// 是否显示按钮
|
|
showButton: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
|
|
components: {
|
|
fileItem: {
|
|
props: {
|
|
value: Object
|
|
},
|
|
|
|
computed: {
|
|
parent() {
|
|
let parent = this;
|
|
|
|
while (parent.$options.componentName != "UploadSpace") {
|
|
parent = parent.$parent;
|
|
}
|
|
|
|
return parent;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onSelect() {
|
|
this.parent.selectFile(this.value);
|
|
},
|
|
|
|
onContextMenu(e) {
|
|
this.parent.openFileContextMenu(e, this.value);
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
|
|
render() {
|
|
if (!this.value) {
|
|
return null;
|
|
}
|
|
|
|
let itemEl = null;
|
|
|
|
const { url, type, selected, id } = this.value;
|
|
const fileType = (type || "").split("/")[0];
|
|
|
|
switch (fileType) {
|
|
case "image":
|
|
itemEl = <el-image fit="cover" src={url} lazy></el-image>;
|
|
break;
|
|
|
|
case "video":
|
|
itemEl = (
|
|
<video
|
|
controls
|
|
src={url}
|
|
style={{
|
|
"max-height": "100%",
|
|
"max-width": "100%"
|
|
}}></video>
|
|
);
|
|
break;
|
|
|
|
default:
|
|
itemEl = <span>{url}</span>;
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class={["cl-upload-space__file-item", `is-${fileType}`]}
|
|
on-click={this.onSelect}
|
|
on-contextmenu={this.onContextMenu}>
|
|
{itemEl}
|
|
|
|
<div class="cl-upload-space__file-size"></div>
|
|
|
|
{selected && (
|
|
<div class="cl-upload-space__file-mask">
|
|
<i class="el-icon-success"></i>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
props: {
|
|
title: "文件空间",
|
|
props: {
|
|
"close-on-click-modal": false,
|
|
"append-to-body": true,
|
|
width: "1000px"
|
|
}
|
|
},
|
|
category: {
|
|
list: [],
|
|
current: {},
|
|
keyword: ""
|
|
},
|
|
file: {
|
|
list: [],
|
|
pagination: {
|
|
page: 1,
|
|
size: 12,
|
|
total: 0
|
|
},
|
|
loading: false
|
|
}
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(["token"]),
|
|
|
|
categoryList() {
|
|
return this.category.list.filter((e) => e.name.includes(this.category.keyword));
|
|
},
|
|
|
|
selection() {
|
|
return this.file.list.filter((e) => e.selected);
|
|
}
|
|
},
|
|
|
|
filters: {
|
|
file_name(url) {
|
|
return last(url.split("."));
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.refreshCategory().then(() => {
|
|
this.category.current = this.category.list[0];
|
|
this.refreshFile();
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
open(key) {
|
|
this.visible = true;
|
|
},
|
|
|
|
close() {
|
|
this.visible = false;
|
|
|
|
this.$nextTick(() => {
|
|
this.file.list.map((e) => {
|
|
this.$set(e, "selected", false);
|
|
});
|
|
});
|
|
},
|
|
|
|
// 上传成功
|
|
onSuccess(res, file) {
|
|
let item = this.file.list.find((e) => file.uid == e.uid);
|
|
|
|
if (item) {
|
|
item.url = res.data;
|
|
|
|
this.$service.space.info
|
|
.add({
|
|
url: res.data,
|
|
type: item.type,
|
|
classifyId: item.classifyId
|
|
})
|
|
.then((res) => {
|
|
item.loading = false;
|
|
item.id = res.id;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
},
|
|
|
|
// 上传前，添加文件
|
|
beforeUpload({ tempFilePath, type, uid }) {
|
|
this.file.list.unshift({
|
|
url: tempFilePath,
|
|
type,
|
|
uid,
|
|
classifyId: this.category.current.id,
|
|
loading: true,
|
|
progress: "0%"
|
|
});
|
|
},
|
|
|
|
// 上传进度
|
|
onProgress({ percent }, file) {
|
|
let item = this.file.list.find(({ uid }) => uid == file.uid);
|
|
|
|
if (item) {
|
|
item.progress = percent + "%";
|
|
}
|
|
},
|
|
|
|
// 刷新资源文件
|
|
refreshFile(params) {
|
|
this.file.loading = true;
|
|
|
|
this.$service.space.info
|
|
.page({
|
|
...this.file.pagination,
|
|
...params,
|
|
classifyId: this.category.current.id,
|
|
type: this.accept
|
|
})
|
|
.then((res) => {
|
|
this.file.pagination = res.pagination;
|
|
this.file.list = res.list;
|
|
})
|
|
.done(() => {
|
|
this.file.loading = false;
|
|
});
|
|
},
|
|
|
|
// 刷新分类
|
|
refreshCategory() {
|
|
return this.$service.space.type.list().then((res) => {
|
|
res.unshift({
|
|
name: "全部文件",
|
|
id: null
|
|
});
|
|
this.category.list = res;
|
|
});
|
|
},
|
|
|
|
// 编辑分类
|
|
editCategory(item = {}) {
|
|
this.$crud.openForm({
|
|
title: "添加分类",
|
|
width: "400px",
|
|
items: [
|
|
{
|
|
label: "分类名称",
|
|
prop: "name",
|
|
value: item.name,
|
|
component: {
|
|
name: "el-input",
|
|
attrs: {
|
|
placeholder: "请填写分类名称"
|
|
}
|
|
},
|
|
rules: {
|
|
required: true,
|
|
message: "分类名称不能为空"
|
|
}
|
|
}
|
|
],
|
|
on: {
|
|
submit: (data, { done, close }) => {
|
|
let next = null;
|
|
|
|
if (!item.id) {
|
|
next = this.$service.space.type.add(data);
|
|
} else {
|
|
next = this.$service.space.type.update({
|
|
...data,
|
|
id: item.id
|
|
});
|
|
}
|
|
|
|
next.then(() => {
|
|
this.refreshCategory();
|
|
close();
|
|
}).catch((err) => {
|
|
this.$message.error(err);
|
|
done();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 选择类目
|
|
selectCategory(item) {
|
|
this.category.current = item;
|
|
this.file.pagination = {
|
|
page: 1,
|
|
size: 12,
|
|
total: 0
|
|
};
|
|
this.refreshFile({
|
|
classifyId: item.id
|
|
});
|
|
},
|
|
|
|
// 打开类目列表右键菜单
|
|
openCategoryContextMenu(e, { id, name }) {
|
|
if (!id) {
|
|
return false;
|
|
}
|
|
this.$crud.openContextMenu(e, {
|
|
list: [
|
|
{
|
|
label: "编辑",
|
|
"suffix-icon": "el-icon-edit",
|
|
callback: (item, done) => {
|
|
done();
|
|
this.editCategory({ id, name });
|
|
}
|
|
},
|
|
{
|
|
label: "删除",
|
|
"suffix-icon": "el-icon-delete",
|
|
callback: (item, done) => {
|
|
done();
|
|
|
|
this.$confirm(`此操作将删除【${name}】下的文件, 是否继续?`, "提示", {
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
this.$service.space.type
|
|
.delete({
|
|
ids: id
|
|
})
|
|
.then(() => {
|
|
this.$message.success("删除成功");
|
|
this.refreshCategory();
|
|
|
|
// 删除当前类目时，重置选择
|
|
if (id == this.category.current.id) {
|
|
this.category.current = this.category.list[0];
|
|
this.refreshFile();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
this.$message.error(err);
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
}
|
|
]
|
|
});
|
|
},
|
|
|
|
// 打开文件列表右键菜单
|
|
openFileContextMenu(e, data) {
|
|
this.$crud.openContextMenu(e, {
|
|
list: [
|
|
{
|
|
label: data.selected ? "取消选中" : "选中",
|
|
"suffix-icon": data.selected ? "el-icon-close" : "el-icon-check",
|
|
callback: (item, done) => {
|
|
this.selectFile(data);
|
|
done();
|
|
}
|
|
},
|
|
{
|
|
label: "删除",
|
|
"suffix-icon": "el-icon-delete",
|
|
callback: (item, done) => {
|
|
this.deleteFile(data);
|
|
done();
|
|
}
|
|
}
|
|
]
|
|
});
|
|
},
|
|
|
|
// 确认选中文件
|
|
confirmFile() {
|
|
const selection = this.selection.filter((e, i) => i < this.limit);
|
|
const urls = selection.map((e) => e.url).join(",");
|
|
|
|
this.$emit("input", urls);
|
|
this.$emit("confirm", this.detailData ? selection : urls);
|
|
|
|
this.close();
|
|
},
|
|
|
|
// 选择文件
|
|
selectFile(item) {
|
|
this.$set(item, "selected", !item.selected);
|
|
},
|
|
|
|
// 删除选中文件
|
|
deleteFile(...selection) {
|
|
if (isEmpty(selection)) {
|
|
selection = this.selection;
|
|
}
|
|
|
|
this.$confirm("此操作将删除文件, 是否继续?", "提示", {
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
this.$message.success("删除成功");
|
|
|
|
this.file.list = this.file.list.filter(
|
|
(e) => !selection.map((e) => e.id).includes(e.id)
|
|
);
|
|
|
|
this.$service.space.info
|
|
.delete({
|
|
ids: selection.map((e) => e.id).join(",")
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
|
|
// 选择页
|
|
onCurrentChange(i) {
|
|
this.refreshFile({
|
|
page: i
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cl-upload-space {
|
|
display: flex;
|
|
min-height: 520px;
|
|
|
|
&__category {
|
|
width: 250px;
|
|
margin-right: 20px;
|
|
|
|
&-search {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
|
|
.el-button {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
&-list {
|
|
overflow: hidden auto;
|
|
|
|
ul {
|
|
li {
|
|
list-style: none;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-bottom: 1px dashed #eee;
|
|
padding: 0 5px;
|
|
cursor: pointer;
|
|
|
|
&.is-active {
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex: 1;
|
|
}
|
|
|
|
&__opbar {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&__file {
|
|
height: calc(100% - 80px);
|
|
overflow: hidden auto;
|
|
margin-bottom: 10px;
|
|
|
|
/deep/.cl-upload-space__file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 160px;
|
|
width: 160px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #eee;
|
|
margin: 5px 0;
|
|
|
|
&.is-image {
|
|
overflow: hidden;
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&.is-video {
|
|
video {
|
|
max-height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.cl-upload-space__file-size {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.cl-upload-space__file-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
i {
|
|
font-size: 30px;
|
|
color: #67c23a;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 100px;
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
height: 180px;
|
|
width: 360px;
|
|
|
|
i {
|
|
font-size: 67px;
|
|
color: #c0c4cc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|