116 lines
3.7 KiB
Vue
116 lines
3.7 KiB
Vue
<template>
|
|
<div class="admin-module">
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="addNewBlogClick">新增文章</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
:data="blogStore.blogList"
|
|
border stripe
|
|
:header-cell-style="tableHeaderStyle()"
|
|
:cell-style="tableCellStyle()"
|
|
:row-style="tableRowStyle()"
|
|
class="card-item">
|
|
<el-table-column type="index" align="center" width="50" />
|
|
<el-table-column prop="title" label="标题" align="center" min-width="15%"/>
|
|
<el-table-column prop="category" label="类别" align="center" min-width="10%" />
|
|
<el-table-column label="精品" align="center" min-width="5%">
|
|
<template #default="scope">
|
|
<el-tag type="success" v-if="scope.row.isGreat">是</el-tag>
|
|
<el-tag type="danger" v-else>否</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="置顶" align="center" min-width="5%">
|
|
<template #default="scope">
|
|
<el-tag type="success" v-if="scope.row.topValue > 1">是</el-tag>
|
|
<el-tag type="danger" v-else>否</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="wordCount" label="字数" align="center" min-width="10%" />
|
|
<el-table-column prop="visitCount" label="阅读次数" align="center" min-width="10%" />
|
|
<el-table-column label="是否发布" align="center" min-width="10%">
|
|
<template #default="scope">
|
|
<el-tag type="success" v-if="scope.row.isApproved">已发布</el-tag>
|
|
<el-tag type="danger" v-else>草稿</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" align="center" width="300">
|
|
<template #default="scope">
|
|
<el-button type="primary" @click="previewBlogClick(scope.row)">预览</el-button>
|
|
<el-button type="primary" @click="editBlogClick(scope.row)">编辑</el-button>
|
|
<el-button type="danger" @click="deleteBlogClick(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
v-model:current-page="blogStore.pageInfo.currentPage"
|
|
:page-size="blogStore.pageInfo.pageSize"
|
|
:total="blogStore.pageInfo.totalSize"
|
|
layout="total, prev, pager, next"
|
|
@change="changePageClick"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted } from 'vue'
|
|
import { useBlogStore } from '@/store/blog.ts'
|
|
import { IBlog } from '@/types/blog.ts'
|
|
import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const blogStore = useBlogStore()
|
|
|
|
onMounted(async () => {
|
|
await blogStore.queryBlogList()
|
|
})
|
|
|
|
/**
|
|
* 点击切换博客页数按钮
|
|
* @param page 页码
|
|
* @param pageSize 每页大小
|
|
*/
|
|
const changePageClick = async (page: number, pageSize: number) => {
|
|
blogStore.pageInfo.currentPage = page
|
|
blogStore.pageInfo.pageSize = pageSize
|
|
await blogStore.queryBlogList()
|
|
}
|
|
|
|
/**
|
|
* 点击新增博客按钮
|
|
*/
|
|
const addNewBlogClick = () => {
|
|
router.push({ name: 'BlogDetailId', params: { id: 0 } })
|
|
}
|
|
|
|
/**
|
|
* 点击预览博客按钮
|
|
* @param blog 博客
|
|
*/
|
|
const previewBlogClick = async (blog: IBlog) => {
|
|
await router.push({ name: 'BlogPreviewId', params: { id: blog.id } })
|
|
}
|
|
|
|
/**
|
|
* 点击编辑博客按钮
|
|
* @param blog 博客
|
|
*/
|
|
const editBlogClick = async (blog: IBlog) => {
|
|
await router.push({ name: 'BlogDetailId', params: { id: blog.id } })
|
|
}
|
|
|
|
/**
|
|
* 点击删除博客按钮
|
|
* @param blog 博客
|
|
*/
|
|
const deleteBlogClick = (blog: IBlog) => {
|
|
blogStore.blogApiType = 'DELETE'
|
|
|
|
commonElMessageBox('是否确认删除该博客?').then(() => {
|
|
blogStore.handleBlogApi(blog.id)
|
|
})
|
|
}
|
|
</script>
|