|
|
|
|
@ -1,112 +1,155 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 文章列表主卡片组件 -->
|
|
|
|
|
<el-card class="main-card">
|
|
|
|
|
<!-- 页面标题，取自路由名称 -->
|
|
|
|
|
<div class="title">{{ this.$route.name }}</div>
|
|
|
|
|
|
|
|
|
|
<!-- 文章状态筛选菜单 -->
|
|
|
|
|
<div class="article-status-menu">
|
|
|
|
|
<span>状态</span>
|
|
|
|
|
<!-- 全部状态 -->
|
|
|
|
|
<span @click="changeStatus('all')" :class="isActive('all')">全部</span>
|
|
|
|
|
<!-- 公开状态 -->
|
|
|
|
|
<span @click="changeStatus('public')" :class="isActive('public')"> 公开 </span>
|
|
|
|
|
<!-- 私密状态 -->
|
|
|
|
|
<span @click="changeStatus('private')" :class="isActive('private')"> 私密 </span>
|
|
|
|
|
<!-- 草稿箱状态 -->
|
|
|
|
|
<span @click="changeStatus('draft')" :class="isActive('draft')"> 草稿箱 </span>
|
|
|
|
|
<!-- 回收站状态 -->
|
|
|
|
|
<span @click="changeStatus('delete')" :class="isActive('delete')"> 回收站 </span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 操作按钮区域 -->
|
|
|
|
|
<div class="operation-container">
|
|
|
|
|
<!-- 批量删除按钮（非回收站状态） -->
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="isDelete == 0"
|
|
|
|
|
type="danger"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
:disabled="articleIds.length == 0"
|
|
|
|
|
@click="updateIsDelete = true">
|
|
|
|
|
v-if="isDelete == 0"
|
|
|
|
|
type="danger"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
:disabled="articleIds.length == 0"
|
|
|
|
|
@click="updateIsDelete = true">
|
|
|
|
|
批量删除
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 批量彻底删除按钮（回收站状态） -->
|
|
|
|
|
<el-button
|
|
|
|
|
v-else
|
|
|
|
|
type="danger"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
:disabled="articleIds.length == 0"
|
|
|
|
|
@click="remove = true">
|
|
|
|
|
v-else
|
|
|
|
|
type="danger"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
:disabled="articleIds.length == 0"
|
|
|
|
|
@click="remove = true">
|
|
|
|
|
批量删除
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 批量导出按钮 -->
|
|
|
|
|
<el-button
|
|
|
|
|
type="success"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-download"
|
|
|
|
|
:disabled="articleIds.length == 0"
|
|
|
|
|
style="margin-right: 1rem"
|
|
|
|
|
@click="isExport = true">
|
|
|
|
|
type="success"
|
|
|
|
|
size="small"
|
|
|
|
|
icon="el-icon-download"
|
|
|
|
|
:disabled="articleIds.length == 0"
|
|
|
|
|
style="margin-right: 1rem"
|
|
|
|
|
@click="isExport = true">
|
|
|
|
|
批量导出
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 批量导入按钮 -->
|
|
|
|
|
<el-upload
|
|
|
|
|
action="/api/admin/articles/import"
|
|
|
|
|
multiple
|
|
|
|
|
:limit="9"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
:on-success="uploadArticle">
|
|
|
|
|
action="/api/admin/articles/import"
|
|
|
|
|
multiple
|
|
|
|
|
:limit="9"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
:on-success="uploadArticle">
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-upload"> 批量导入 </el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧筛选区域 -->
|
|
|
|
|
<div style="margin-left: auto">
|
|
|
|
|
<!-- 文章类型筛选 -->
|
|
|
|
|
<el-select
|
|
|
|
|
clearable
|
|
|
|
|
v-model="type"
|
|
|
|
|
placeholder="请选择文章类型"
|
|
|
|
|
size="small"
|
|
|
|
|
style="margin-right: 1rem; width: 180px">
|
|
|
|
|
clearable
|
|
|
|
|
v-model="type"
|
|
|
|
|
placeholder="请选择文章类型"
|
|
|
|
|
size="small"
|
|
|
|
|
style="margin-right: 1rem; width: 180px">
|
|
|
|
|
<el-option label="全部" value="" />
|
|
|
|
|
<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
|
|
<!-- 文章分类筛选 -->
|
|
|
|
|
<el-select
|
|
|
|
|
clearable
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="categoryId"
|
|
|
|
|
filterable
|
|
|
|
|
placeholder="请选择分类"
|
|
|
|
|
style="margin-right: 1rem; width: 180px">
|
|
|
|
|
clearable
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="categoryId"
|
|
|
|
|
filterable
|
|
|
|
|
placeholder="请选择分类"
|
|
|
|
|
style="margin-right: 1rem; width: 180px">
|
|
|
|
|
<el-option label="全部" value="" />
|
|
|
|
|
<el-option v-for="item in categories" :key="item.id" :label="item.categoryName" :value="item.id" />
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
|
|
<!-- 文章标签筛选 -->
|
|
|
|
|
<el-select
|
|
|
|
|
clearable
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="tagId"
|
|
|
|
|
filterable
|
|
|
|
|
placeholder="请选择标签"
|
|
|
|
|
style="margin-right: 1rem; width: 180px">
|
|
|
|
|
clearable
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="tagId"
|
|
|
|
|
filterable
|
|
|
|
|
placeholder="请选择标签"
|
|
|
|
|
style="margin-right: 1rem; width: 180px">
|
|
|
|
|
<el-option label="全部" value="" />
|
|
|
|
|
<el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.id" />
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
|
|
<!-- 文章标题搜索框 -->
|
|
|
|
|
<el-input
|
|
|
|
|
clearable
|
|
|
|
|
v-model="keywords"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="请输入文章名"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="searchArticles" />
|
|
|
|
|
clearable
|
|
|
|
|
v-model="keywords"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="请输入文章名"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="searchArticles" />
|
|
|
|
|
|
|
|
|
|
<!-- 搜索按钮 -->
|
|
|
|
|
<el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="searchArticles">
|
|
|
|
|
搜索
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 文章列表表格 -->
|
|
|
|
|
<el-table border :data="articles" @selection-change="selectionChange" v-loading="loading">
|
|
|
|
|
<!-- 选择列 -->
|
|
|
|
|
<el-table-column type="selection" width="55" />
|
|
|
|
|
|
|
|
|
|
<!-- 文章封面列 -->
|
|
|
|
|
<el-table-column prop="articleCover" label="文章封面" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-image
|
|
|
|
|
class="article-cover"
|
|
|
|
|
:src="
|
|
|
|
|
class="article-cover"
|
|
|
|
|
:src="
|
|
|
|
|
scope.row.articleCover
|
|
|
|
|
? scope.row.articleCover
|
|
|
|
|
: 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
|
|
|
|
|
" />
|
|
|
|
|
<!-- 公开状态图标 -->
|
|
|
|
|
<i v-if="scope.row.status == 1" class="iconfont el-icon-mygongkai article-status-icon" />
|
|
|
|
|
<!-- 密码状态图标 -->
|
|
|
|
|
<i v-if="scope.row.status == 2" class="iconfont el-icon-mymima article-status-icon" />
|
|
|
|
|
<!-- 草稿状态图标 -->
|
|
|
|
|
<i v-if="scope.row.status == 3" class="iconfont el-icon-mycaogaoxiang article-status-icon" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 文章标题列 -->
|
|
|
|
|
<el-table-column prop="articleTitle" label="标题" align="center" />
|
|
|
|
|
|
|
|
|
|
<!-- 文章分类列 -->
|
|
|
|
|
<el-table-column prop="categoryName" label="分类" width="110" align="center" />
|
|
|
|
|
|
|
|
|
|
<!-- 文章标签列 -->
|
|
|
|
|
<el-table-column prop="tagDTOs" label="标签" width="170" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag v-for="item of scope.row.tagDTOs" :key="item.tagId" style="margin-right: 0.2rem; margin-top: 0.2rem">
|
|
|
|
|
@ -114,6 +157,8 @@
|
|
|
|
|
</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 浏览量列 -->
|
|
|
|
|
<el-table-column prop="viewsCount" label="浏览量" width="70" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span v-if="scope.row.viewsCount">
|
|
|
|
|
@ -122,6 +167,8 @@
|
|
|
|
|
<span v-else>0</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 文章类型列 -->
|
|
|
|
|
<el-table-column prop="type" label="类型" width="80" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag :type="articleType(scope.row.type).tagType">
|
|
|
|
|
@ -129,74 +176,93 @@
|
|
|
|
|
</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 发表时间列 -->
|
|
|
|
|
<el-table-column prop="createTime" label="发表时间" width="130" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<i class="el-icon-time" style="margin-right: 5px" />
|
|
|
|
|
{{ scope.row.createTime | date }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 置顶状态列 -->
|
|
|
|
|
<el-table-column prop="isTop" label="置顶" width="80" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="scope.row.isTop"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#F4F4F5"
|
|
|
|
|
:disabled="scope.row.isDelete == 1"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
@change="changeTopAndFeatured(scope.row)" />
|
|
|
|
|
v-model="scope.row.isTop"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#F4F4F5"
|
|
|
|
|
:disabled="scope.row.isDelete == 1"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
@change="changeTopAndFeatured(scope.row)" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 推荐状态列 -->
|
|
|
|
|
<el-table-column prop="isFeatured" label="推荐" width="80" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-switch
|
|
|
|
|
v-model="scope.row.isFeatured"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#F4F4F5"
|
|
|
|
|
:disabled="scope.row.isDelete == 1"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
@change="changeTopAndFeatured(scope.row)" />
|
|
|
|
|
v-model="scope.row.isFeatured"
|
|
|
|
|
active-color="#13ce66"
|
|
|
|
|
inactive-color="#F4F4F5"
|
|
|
|
|
:disabled="scope.row.isDelete == 1"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
@change="changeTopAndFeatured(scope.row)" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<!-- 操作列 -->
|
|
|
|
|
<el-table-column label="操作" align="center" width="150">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!-- 编辑按钮（非回收站状态） -->
|
|
|
|
|
<el-button type="primary" size="mini" @click="editArticle(scope.row.id)" v-if="scope.row.isDelete == 0">
|
|
|
|
|
编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 删除按钮（非回收站状态） -->
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
title="确定删除吗？"
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
@confirm="updateArticleDelete(scope.row.id)"
|
|
|
|
|
v-if="scope.row.isDelete == 0">
|
|
|
|
|
title="确定删除吗？"
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
@confirm="updateArticleDelete(scope.row.id)"
|
|
|
|
|
v-if="scope.row.isDelete == 0">
|
|
|
|
|
<el-button size="mini" type="danger" slot="reference"> 删除 </el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
|
|
|
|
|
<!-- 恢复按钮（回收站状态） -->
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
title="确定恢复吗？"
|
|
|
|
|
v-if="scope.row.isDelete == 1"
|
|
|
|
|
@confirm="updateArticleDelete(scope.row.id)">
|
|
|
|
|
title="确定恢复吗？"
|
|
|
|
|
v-if="scope.row.isDelete == 1"
|
|
|
|
|
@confirm="updateArticleDelete(scope.row.id)">
|
|
|
|
|
<el-button size="mini" type="success" slot="reference"> 恢复 </el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
|
|
|
|
|
<!-- 彻底删除按钮（回收站状态） -->
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
v-if="scope.row.isDelete == 1"
|
|
|
|
|
title="确定彻底删除吗？"
|
|
|
|
|
@confirm="deleteArticles(scope.row.id)">
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
v-if="scope.row.isDelete == 1"
|
|
|
|
|
title="确定彻底删除吗？"
|
|
|
|
|
@confirm="deleteArticles(scope.row.id)">
|
|
|
|
|
<el-button size="mini" type="danger" slot="reference"> 删除 </el-button>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<!-- 分页组件 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="pagination-container"
|
|
|
|
|
background
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page="current"
|
|
|
|
|
:page-size="size"
|
|
|
|
|
:total="count"
|
|
|
|
|
:page-sizes="[10, 20]"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" />
|
|
|
|
|
class="pagination-container"
|
|
|
|
|
background
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page="current"
|
|
|
|
|
:page-size="size"
|
|
|
|
|
:total="count"
|
|
|
|
|
:page-sizes="[10, 20]"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" />
|
|
|
|
|
|
|
|
|
|
<!-- 批量删除确认弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="updateIsDelete" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
|
|
|
|
|
<div style="font-size: 1rem">是否删除选中项？</div>
|
|
|
|
|
@ -205,6 +271,8 @@
|
|
|
|
|
<el-button type="primary" @click="updateArticleDelete(null)"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 批量彻底删除确认弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="remove" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
|
|
|
|
|
<div style="font-size: 1rem">是否彻底删除选中项？</div>
|
|
|
|
|
@ -213,6 +281,8 @@
|
|
|
|
|
<el-button type="primary" @click="deleteArticles(null)"> 确 定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 批量导出确认弹窗 -->
|
|
|
|
|
<el-dialog :visible.sync="isExport" width="30%">
|
|
|
|
|
<div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
|
|
|
|
|
<div style="font-size: 1rem">是否导出选中文章？</div>
|
|
|
|
|
@ -226,18 +296,30 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
// 页面创建时执行的钩子函数
|
|
|
|
|
created() {
|
|
|
|
|
// 从状态管理中获取当前页码
|
|
|
|
|
this.current = this.$store.state.pageState.articleList
|
|
|
|
|
// 加载文章列表
|
|
|
|
|
this.listArticles()
|
|
|
|
|
// 加载分类列表
|
|
|
|
|
this.listCategories()
|
|
|
|
|
// 加载标签列表
|
|
|
|
|
this.listTags()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 数据定义
|
|
|
|
|
data: function () {
|
|
|
|
|
return {
|
|
|
|
|
// 上传请求头，包含认证信息
|
|
|
|
|
uploadHeaders: { Authorization: 'Bearer ' + sessionStorage.getItem('token') },
|
|
|
|
|
// 表格加载状态
|
|
|
|
|
loading: true,
|
|
|
|
|
// 批量删除弹窗显示状态
|
|
|
|
|
updateIsDelete: false,
|
|
|
|
|
// 彻底删除弹窗显示状态
|
|
|
|
|
remove: false,
|
|
|
|
|
// 文章类型选项
|
|
|
|
|
types: [
|
|
|
|
|
{
|
|
|
|
|
value: 1,
|
|
|
|
|
@ -252,10 +334,15 @@ export default {
|
|
|
|
|
label: '翻译'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// 当前激活的状态筛选
|
|
|
|
|
activeStatus: 'all',
|
|
|
|
|
// 文章列表数据
|
|
|
|
|
articles: [],
|
|
|
|
|
// 选中的文章ID列表
|
|
|
|
|
articleIds: [],
|
|
|
|
|
// 分类列表数据
|
|
|
|
|
categories: [],
|
|
|
|
|
// 标签列表数据
|
|
|
|
|
tags: [],
|
|
|
|
|
keywords: null,
|
|
|
|
|
type: null,
|
|
|
|
|
|
