blog/template/admin/user/index.html

123 lines
4.8 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">
<link href="/assets/input.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/tinymce5/js/tinymce/tinymce.min.js"></script>
<script src="/assets/axios/axios.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app"></div>
</body>
<script type="text/x-template" id="app-template">
<v-app id="inspire">
#{ render "common/bar-admin.html" . }
<v-main class="grey lighten-3">
<v-container style="height: 100%">
<v-row style="height: 100%">
<v-col cols="12" sm="4">
<v-sheet min-height="100%">
<v-data-table class="elevation-1"
:headers="userHeaders"
:items="userList"
height="600px"
:page.sync="pageable.page"
:items-per-page="pageable.itemsPerPage"
:loading="loading"
loading-text="数据加载中"
hide-default-footer>
<template #item.lastLoginTime="{ item }">
{{item.lastLoginTime?moment(item.createTime).format('YYYY/MM/DD HH:mm:ss'):''}}
</template>
<template #item.actions="{ item }">
<v-btn text color="primary" @click="publishArticle(item)"
v-if="item.state=='draft'">权限
</v-btn>
<v-btn text color="error" @click="delArticle(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="8">
<v-sheet min-height="100%">
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</script>
<script>
var editor;
new Vue({
el: '#app',
template: '#app-template',
data: {
group: null,
drawer: false,
loading: false,
pageable: {
page: 1,
itemsPerPage: 10,
totalElements: 0,
totalPages: 1
},
userHeaders: [
{text: '昵称', value: 'nickname', align: 'start', sortable: false},
{text: '账户名', value: 'username', align: 'start', sortable: false},
{text: '上一次登陆时间', value: 'lastLoginTime', align: 'start', sortable: false},
{text: '操作', value: 'actions', align: 'center', sortable: false},
],
userList: [],
},
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()
},
},
mounted() {
},
vuetify: new Vuetify(),
})
</script>
</html>