init
This commit is contained in:
weicw
289
src/views/extension/file.vue
Normal file
289
src/views/extension/file.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0, minHeight: '520px'}">
|
||||
<div style="padding: 16px 16px 0 16px;">
|
||||
<!-- 工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<div class="ele-table-tool-title">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:showUploadList="false"
|
||||
:customRequest="doUpload">
|
||||
<a-button type="primary">上传</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary">新建文件夹</a-button>
|
||||
<a-button danger type="primary">删除</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 搜索框 -->
|
||||
<div style="max-width: 240px;">
|
||||
<a-input-search
|
||||
v-model:value="search"
|
||||
placeholder="搜索您的文件"/>
|
||||
</div>
|
||||
<!-- 显示方式切换 -->
|
||||
<menu-outlined
|
||||
v-if="grid"
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
<appstore-outlined
|
||||
v-else
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
</div>
|
||||
<!-- 文件目录面包屑 -->
|
||||
<div class="ele-file-breadcrumb-group ele-cell">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<div
|
||||
v-if="directory.length"
|
||||
class="ele-file-breadcrumb-back ele-text-primary"
|
||||
@click="back">返回上一级
|
||||
</div>
|
||||
<div class="ele-file-breadcrumb-list ele-cell-content ele-cell">
|
||||
<div
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': directory.length}]"
|
||||
@click="listAll">
|
||||
<div class="ele-file-breadcrumb-item-title">全部文件</div>
|
||||
<right-outlined v-if="directory.length"/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item,index) in directory"
|
||||
:key="index"
|
||||
@click="listDir(index)"
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': index!==directory.length-1}]">
|
||||
<div class="ele-file-breadcrumb-item-title">{{ item }}</div>
|
||||
<right-outlined v-if="index!==directory.length-1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>已全部加载，共 {{ data.length }} 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 文件展示列表 -->
|
||||
<ele-file-list
|
||||
:data="data"
|
||||
v-model:checked="checked"
|
||||
:grid="grid"
|
||||
:sort="sort"
|
||||
:order="order"
|
||||
@item-click="onItemClick"
|
||||
@sort-change="onSortChange">
|
||||
</ele-file-list>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleFileList from 'ele-admin-pro/packages/ele-file-list';
|
||||
import {
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionFile',
|
||||
components: {
|
||||
EleFileList,
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: true,
|
||||
// 是否网格展示
|
||||
grid: true,
|
||||
// 文件列表数据
|
||||
data: [],
|
||||
// 选中数据
|
||||
checked: [],
|
||||
// 文件目录面包屑数据
|
||||
directory: [],
|
||||
// 搜索
|
||||
search: '',
|
||||
// 排序字段
|
||||
sort: '',
|
||||
// 排序方式
|
||||
order: '',
|
||||
// 图片预览文件
|
||||
currentImage: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 图片预览列表
|
||||
previewList() {
|
||||
return this.data.filter(d => d.thumbnail).map(d => d.url);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 查询文件列表 */
|
||||
query() {
|
||||
this.checked = [];
|
||||
this.loading = true;
|
||||
this.$http.get('/file/list', {
|
||||
params: {
|
||||
directory: this.directory.join('/'),
|
||||
sort: this.sort,
|
||||
order: this.order
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
res.data.data.forEach(d => {
|
||||
// 文件地址加baseURL
|
||||
if (d.url) {
|
||||
d.url = this.$http.defaults.baseURL + '/' + d.url;
|
||||
}
|
||||
if (d.thumbnail) {
|
||||
d.thumbnail = this.$http.defaults.baseURL + '/' + d.thumbnail;
|
||||
}
|
||||
// 文件大小格式化
|
||||
if (d.isDirectory) {
|
||||
d.length = '-';
|
||||
} else {
|
||||
d.length = this.getFileSize(d.length);
|
||||
}
|
||||
// 修改时间格式化
|
||||
if (d.updateTime) {
|
||||
d.updateTime = this.$util.toDateString(d.updateTime);
|
||||
}
|
||||
});
|
||||
this.data = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* item点击事件 */
|
||||
onItemClick(item) {
|
||||
if (item.isDirectory) { // 文件夹
|
||||
this.directory.push(item.name);
|
||||
this.query();
|
||||
} /*else if (item.thumbnail) {
|
||||
this.currentImage = item.url;
|
||||
}*/ else if (this.checked.indexOf(item) !== -1) {
|
||||
this.checked.splice(this.checked.indexOf(item), 1);
|
||||
} else {
|
||||
this.checked.push(item);
|
||||
}
|
||||
},
|
||||
/* 返回上级 */
|
||||
back() {
|
||||
this.directory.splice(this.directory.length - 1, 1);
|
||||
this.query();
|
||||
},
|
||||
/* 全部文件 */
|
||||
listAll() {
|
||||
if (!this.directory.length) {
|
||||
return;
|
||||
}
|
||||
this.directory = [];
|
||||
this.query();
|
||||
},
|
||||
/* 回到指定目录 */
|
||||
listDir(index) {
|
||||
if (index === this.directory.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.directory.splice(index, this.directory.length - index);
|
||||
this.query();
|
||||
},
|
||||
/* 文件大小格式化 */
|
||||
getFileSize(value) {
|
||||
if (value < 1024) {
|
||||
return value + 'B';
|
||||
} else if (value < 1024 * 1024) {
|
||||
return (value / 1024).toFixed(1) + 'KB';
|
||||
} else if (value < 1024 * 1024 * 1024) {
|
||||
return (value / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (value / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
/* 文件列表排序方式改变 */
|
||||
onSortChange(obj) {
|
||||
this.order = obj.order;
|
||||
this.sort = obj.sort;
|
||||
this.query();
|
||||
},
|
||||
/* 查看文件 */
|
||||
view(item) {
|
||||
if (item.isDirectory) {
|
||||
this.onItemClick(item);
|
||||
} else if (item.url) {
|
||||
window.open(item.url);
|
||||
}
|
||||
},
|
||||
/* 上传 */
|
||||
doUpload({file}) {
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const hide = this.$message.loading('上传中..', 0);
|
||||
this.$http.post('/file/upload', formData).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.directory = [res.data.dir.replace(/\//, '')];
|
||||
this.query();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 图标按钮 */
|
||||
.ele-file-tool-btn {
|
||||
font-size: 20px;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 文件目录面包屑 */
|
||||
.ele-file-breadcrumb-group {
|
||||
margin-bottom: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back {
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid hsla(0, 0%, 60%, .3);
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back:hover,
|
||||
.ele-file-breadcrumb-item.ele-text-primary:hover > .ele-file-breadcrumb-item-title {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-item .anticon {
|
||||
margin: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-table-tool > .ele-table-tool-title + div,
|
||||
.ele-file-breadcrumb-group > .ele-cell-content + div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user