286 lines
11 KiB
HTML
286 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Admin Console</title>
|
|
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
|
|
<link rel="bookmark" href="/assets/favicon.ico" type="image/x-icon" />
|
|
<link href="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.css" rel="stylesheet" />
|
|
<link href="/assets/vuetify-v2.6.9/materialdesignicons.min.css" rel="stylesheet">
|
|
|
|
<script src="/assets/vue/vue.min.js"></script>
|
|
<script src="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.js"></script>
|
|
<script src="/assets/axios/axios.min.js"></script>
|
|
<script src="/assets/moment/moment.js"></script>
|
|
<script src="/assets/qs/qs.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
|
|
<style>
|
|
.over-display {
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app"></div>
|
|
</body>
|
|
<script type="text/x-template" id="app-template">
|
|
<v-app id="inspire">
|
|
#{ render "common/bar-admin.html" . }
|
|
<!-- <#include "../../common/drawer-admin.ftl"> -->
|
|
|
|
<v-dialog v-model="dialog.show" width="500" v-if="dialog.obj">
|
|
<v-card>
|
|
<v-card-title class="text-h5 grey lighten-2">{{dialog.title}}</v-card-title>
|
|
<v-card-text>{{dialog.context}}</v-card-text>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-btn text @click="dialog.show = false">取消</v-btn>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" text @click="confirm">确认</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
|
|
<v-main class="grey lighten-3">
|
|
<v-container style="height: 100%">
|
|
<v-row style="height: 100%">
|
|
<v-col cols="12" sm="2" class="">
|
|
<v-sheet min-height="100%">
|
|
<v-btn class="ma-2 white--text" :loading="uploading" :disabled="uploading" color="blue-grey" @click="upload">
|
|
上传
|
|
<v-icon right dark>mdi-cloud-upload</v-icon>
|
|
</v-btn>
|
|
<v-form ref="fileForm">
|
|
<v-file-input show-size counter multiplelabel="请选择文件" v-model="fileInfo" ref="file"></v-file-input>
|
|
</v-form >
|
|
<v-alert color="error" type="error" color="red lighten-2" v-if="errorMsg">
|
|
{{errorMsg}}
|
|
</v-alert>
|
|
</v-sheet>
|
|
</v-col>
|
|
|
|
<v-col cols="12" sm="12" md="10">
|
|
<v-sheet min-height="100%">
|
|
|
|
<v-data-table class="elevation-1"
|
|
:headers="headers"
|
|
:items="itemList"
|
|
:height="tableHeight"
|
|
:page.sync="pageable.page"
|
|
fixed-header="true"
|
|
:items-per-page="pageable.itemsPerPage"
|
|
:loading="loading"
|
|
loading-text="数据加载中"
|
|
hide-default-footer>
|
|
<template #item.createTime="{ item }">
|
|
{{item.createTime?moment(item.createTime).format('YYYY/MM/DD HH:mm:ss'):''}}
|
|
</template>
|
|
<template #item.fileName="{ item }">
|
|
<span class="over-display">{{item.fileName}}</span>
|
|
</template>
|
|
<template #item.fileSize="{ item }">
|
|
{{new Number(item.fileSize/(1024*1024)).toFixed(3)}}MB
|
|
</template>
|
|
|
|
<template #item.actions="{ item }">
|
|
<v-btn text color="primary" :href="`/file/${item.id}`" target="_blank">下载</v-btn>
|
|
<v-btn text color="error" @click="delFile(item)">删除</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
<div class="pt-2 float-right" style="display: flex">
|
|
<v-pagination v-model="pageable.page" :length="pageable.totalPages" :total-visible="7"
|
|
style="min-width: 200px;" @previous="previousPage" @next="nextPage"
|
|
@input="goPage"></v-pagination>
|
|
<v-select :items="[5,10,20,50,100]" label="分页大小" style="width: 100px"
|
|
v-model="pageable.itemsPerPage" outlined dense
|
|
@input="pageSizeChange"></v-select>
|
|
</div>
|
|
</v-sheet>
|
|
</v-col>
|
|
|
|
<!-- <v-col cols="12" sm="2">
|
|
<v-sheet min-height="100%">
|
|
</v-sheet>
|
|
</v-col> -->
|
|
|
|
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</script>
|
|
|
|
|
|
<script>
|
|
var qs = Qs
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
template: '#app-template',
|
|
computed: {
|
|
// tableHeight: {
|
|
// get() {
|
|
// if (window.innerHeight > 1000) {
|
|
// return window.innerHeight - 120
|
|
// }
|
|
// return window.innerHeight - 300
|
|
// }
|
|
// }
|
|
|
|
},
|
|
data: {
|
|
tableHeight: 0,
|
|
drawer: false,
|
|
loading: false,
|
|
uploading: false,
|
|
fileInfo: null,
|
|
errorMsg: null,
|
|
dialog: {
|
|
show: false,
|
|
title: '',
|
|
context: '',
|
|
obj: null
|
|
},
|
|
pageable: {
|
|
page: 1,
|
|
itemsPerPage: 20,
|
|
totalElements: 0,
|
|
totalPages: 1
|
|
},
|
|
param: {
|
|
id: null,
|
|
title: null,
|
|
subTitle: null,
|
|
},
|
|
|
|
headers: [
|
|
{ text: 'ID', value: 'id', align: 'start', sortable: false },
|
|
{ text: '文件名', value: 'fileName', align: 'start', sortable: false },
|
|
{ text: '文件大小', value: 'fileSize', align: 'start', sortable: false },
|
|
{ text: '上传人', value: 'createBy', align: 'start', sortable: false },
|
|
{ text: '上传时间', value: 'createTime', align: 'start', sortable: false },
|
|
{ text: '操作', value: 'actions', align: 'center', sortable: false },
|
|
],
|
|
itemList: [],
|
|
},
|
|
methods: {
|
|
pageSizeChange(size) {
|
|
this.pageable.page = 1
|
|
this.list()
|
|
},
|
|
nextPage() {
|
|
this.pageable.page = this.pageable.page + 1
|
|
// this.list()
|
|
},
|
|
previousPage() {
|
|
this.pageable.page = this.pageable.page - 1
|
|
// this.list()
|
|
},
|
|
goPage(num) {
|
|
this.pageable.page = num
|
|
this.list()
|
|
},
|
|
list() {
|
|
let ths = this;
|
|
this.loading = true;
|
|
let { page, itemsPerPage } = this.pageable;
|
|
let pageQuery = qs.stringify({ page, itemsPerPage, ...this.param }, { skipNulls: true });
|
|
// let paramQuery = qs.stringify(this.param, {skipNulls: true});
|
|
axios.get('/admin/file/list?' + pageQuery).then(function (response) {
|
|
// console.log(response);
|
|
let data = response.data;
|
|
ths.itemList = data.content;
|
|
ths.pageable.totalElements = data.totalElements
|
|
ths.pageable.totalPages = data.totalPages
|
|
ths.pageable.page = data.number
|
|
|
|
ths.loading = false;
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
ths.loading = false;
|
|
});
|
|
},
|
|
|
|
delFile(item) {
|
|
// console.log(id);
|
|
let ths = this;
|
|
let id = item.id
|
|
this.dialog.obj = item
|
|
this.dialog.title = '删除文件'
|
|
this.dialog.context = `确认要删除名为《${item.fileName}》的文章吗?`
|
|
this.dialog.show = true;
|
|
|
|
this.confirm = () => {
|
|
ths.dialog.show = false;
|
|
axios.delete(`/admin/file/del/${id}`).then(res => {
|
|
let data = res.data
|
|
if (data.code === 200) {
|
|
ths.list()
|
|
return
|
|
}
|
|
}).catch(err => {
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
upload() {
|
|
let ths = this;
|
|
if (!this.fileInfo) {
|
|
console.log("请选择文件");
|
|
return
|
|
}
|
|
|
|
|
|
let formData = new FormData();
|
|
formData.append("file", this.fileInfo);
|
|
this.uploading = true
|
|
axios.post('/admin/file/upload', formData, { headers: { "Content-Type": "multipart/form-data" } }).then(res => {
|
|
let data = res.data
|
|
console.log(data)
|
|
// location.href = '/diary'
|
|
ths.uploading = false
|
|
if (data.success === 1) {
|
|
ths.$refs.fileForm.reset()
|
|
ths.list()
|
|
ths.errorMsg = null
|
|
return
|
|
}
|
|
ths.errorMsg = data.message
|
|
}).catch(err => {
|
|
console.error(err)
|
|
ths.uploading = false
|
|
ths.errorMsg = err
|
|
});
|
|
}
|
|
|
|
|
|
},
|
|
mounted() {
|
|
this.list();
|
|
let ths = this
|
|
function resize(){
|
|
if (window.innerHeight > 900) {
|
|
ths.tableHeight = window.innerHeight - 150
|
|
} else {
|
|
ths.tableHeight = window.innerHeight - 300
|
|
}
|
|
}
|
|
window.addEventListener("resize", resize)
|
|
resize()
|
|
},
|
|
|
|
vuetify: new Vuetify(),
|
|
})
|
|
|
|
</script>
|
|
|
|
</html> |