request.js
<template>
<div class="artical-container">
<!--卡片-->
<el-card class="filter-card">
<div slot="header" class="clearfix">
<!--面包屑导航-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>首页管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!--数据-->
<el-form ref="form" :model="form" label-width="40px" size="mini">
<el-form-item label="状态">
<el-radio-group v-model="status">
<el-radio :label="null">全部</el-radio>
<el-radio :label="0">草稿</el-radio>
<el-radio :label="1">待审核</el-radio>
<el-radio :label="2">审核通过</el-radio>
<el-radio :label="3">审核失败</el-radio>
<el-radio :label="4">已删除</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="频道">
<el-select v-model="channelId" placeholder="请选择频道">
<el-option label="全部" :value="null"></el-option>
<el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
v-model="rangeDate"
type="datetimerange"
placeholder="选择日期时间"
align="right"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" :disabled="loading" @click="loadArticals(1)">查询</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="filter-card">
<div slot="header" class="clearfix">
根据筛选条件有{
{totalCount}}条结果
</div>
<!--数据列表-->
<el-table
:data="articals"
style="width: 100%" stripe size="mini" >
<el-table-column
prop="date"
label="封面"
v-loading="loading"
>
<template slot-scope="scope">
<img v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]" class="artical-cover" alt="">
<img v-else class="artical-cover" src="./pic_bg.png" alt="">
</template>
</el-table-column>
<el-table-column
prop="title"
label="标题"
>
</el-table-column>
<el-table-column
prop="status"
label="状态"
>
<!--如果需要自定义遍历当前数据-->
<template slot-scope="scope">
<el-tag :type="articalsStatus[scope.row.status].type">{
{articalsStatus[scope.row.status].text}}</el-tag>
<!-- <el-tag v-else-if="scope.row.status===1">待审核</el-tag>
<el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
<el-tag v-else-if="scope.row.status===3" type="danger">审核失败</el-tag>
<el-tag v-else-if="scope.row.status===4" type="info">已删除</el-tag>-->
</template>
</el-table-column>
<el-table-column
prop="pubdate"
label="发布时间"
>
</el-table-column>
<el-table-column
prop="cover"
label="操作"
>
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="onDeleteArtical(scope.row.id)" circle></el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination class="list-table"
layout="prev, pager, next"
:total="totalCount" :page-size="pageSize"
:disabled="loading"
@current-change="OnCurrentChange" >
</el-pagination>
</el-card>
</div>
</template>
<script>
import {
getArtical,
deleteArtical,
getArticalChannels
} from '@/api/artical'
export default {
name: 'ArticalIndex',
created () {
this.loadArticals(1)
this.loadChannels()
},
data () {
return {
loading: true,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
status: null, // 状态为空 查询文章的状态
totalCount: 0, // 初始数据
pageSize: 20, // 每页大小
articals: [], // 记录文章的数据
channels: [],
channelId: null, // 文章的频道
rangeDate: null, // 日期数据
articalsStatus: [
{ status: 0, text: '草稿', type: 'info' },
{ status: 1, text: '待审核', type: '' },
{ status: 2, text: '审核通过', type: 'success' },
{ status: 3, text: '审核失败', type: 'warning' },
{ status: 4, text: '已删除', type: 'danger' }
]
}
},
methods: {
// 文章删除
onDeleteArtical (articleId) {
this.$confirm('确认删除吗', '删除提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning