|
|
@@ -1,721 +0,0 @@
|
|
|
-<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: (_, done) => {
|
|
|
- done();
|
|
|
- this.editCategory({ id, name });
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "删除",
|
|
|
- "suffix-icon": "el-icon-delete",
|
|
|
- callback: (_, 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: (_, done) => {
|
|
|
- this.selectFile(data);
|
|
|
- done();
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "删除",
|
|
|
- "suffix-icon": "el-icon-delete",
|
|
|
- callback: (_, 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>
|
icssoa