micro_vue/src/scrm_pages/article/articleList.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="AddArticle()">添加文章</el-button>
    </div>
    <div class="app-container">
          <div style="margin-bottom: 10px">
            <el-row :gutter="24">
              <el-col :span="8">
                  <el-input style="width: 300px" v-model="keyword"  placeholder="请输入您需要搜索的内容"></el-input>
                  <el-button type="primary"  icon="el-icon-search" @click="changeKey()">搜索</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">标签</span>:</label>
             <div class="time">
                <ul class="">
                  <li :class="0==tagType?'active':''" @click="selectsign(0)">全部</li>
                  <li :class="item.id==tagType?'active':''"  v-for="item in tagOptions" :key="item.id" @click="selectsign(item.id)">{{item.name}}</li>
                </ul>
             </div>
          </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">状态:</span></label>
            <div class="time">
              <ul class="">
                 <li :class="{ active: selecting_status == 0 }" @click="changeSelectingStatus(0)">全部</li>
                 <li :class="{ active: selecting_status == 1 }" @click="changeSelectingStatus(1)">已发布</li>
                 <li :class="{ active: selecting_status == 2 }" @click="changeSelectingStatus(2)">草稿箱</li>
                 <li :class="{ active: selecting_status == 3 }" @click="changeSelectingStatus(3)">未通过</li>
              </ul>
            </div>
          </div>
          <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" @click="openDeletearticles">批量删除</el-button>
          </div>
          <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="articsData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;"  @selection-change="handleSelectionChange">
              <el-table-column
                align="center" 
                type="selection"
                width="55">
              </el-table-column> 
             <el-table-column label="文章图片" align="center">
               <template slot-scope="scope">
                  <div class="parent">
                 <span class="text">已发布</span>  
                 <div class="triangle-topleft">
                       
                 </div>
                <img :src="memberAvatar(scope.row)" style="width:100%;height:100%">
          </div>     
               </template>
             </el-table-column>
            <el-table-column label="文章标题" align="center">
              <template slot-scope="scope">
                  {{scope.row.title}}
              </template>
            </el-table-column>
            <el-table-column label="阅读量" align="center">
              <template slot-scope="scope">
                 {{scope.row.real_read_num}}
              </template>
            </el-table-column>
            <el-table-column label="评论数" align="center">
              <template slot-scope="scope">
                  {{scope.row.comment_num}}
              </template>
            </el-table-column>
            <el-table-column label="点赞数" align="center">
              <template slot-scope="scope">
                  {{scope.row.star_num}}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="$router.push('/articles/editArticle/'+scope.row.id)">
                  </el-button>
                </el-tooltip>
                 <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button size="mini" type="danger" icon="el-icon-delete"  @click="openDelete(scope.row,scope.$index)" ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            background
            style="margin-top:20px;float: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  import { GetAllArticles,openDelete} from '@/api/act/submitinfo'
  export default {
    name: 'commentList',
    components:{
      BreadCrumb
    },
    inject:['reload'],
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/articleList', name: '文章列表' }
        ],
        time: '',
        active: true,
        tagType: 0,
        tagOptions:[],
        listQuery:{
            page:1,
            limit:10,
            classid:'',
            name:'',
        },
        articsData:[],
        total:0,
        selecting_status:'',
        keyword:'',
        dialogVisible: false,
         checkAllStatus:false,
      }
    },
    methods:{
         GetAllArticles(){
              GetAllArticles(this.listQuery,this.selecting_status,this.keyword,this.listQuery.classid).then(response=>{
                     if(response.data.state === 1){
                        this.articsData = response.data.data.articles  
                        this.total = response.data.data.total
                        console.log("文章列表",this.articsData)
                        console.log("total",this.total)                                                   
                     }
                     if(typeof(response.data.data.category != 'undefined')){
                       this.tagOptions = response.data.data.category
                        console.log("分类列表",this.tagOptions)                      
                     }
              })
         },
         selectsign(id){
           console.log("id",id)
            this.listQuery.classid = id;
            this.listQuery.name = name;
            this.tagType = id;
            this.GetAllArticles();
         },
          handleSizeChange(limit) {
            this.listQuery.limit = limit;
            this.GetAllAritcles();
        },
         handleCurrentChange(page) {
            this.listQuery.page = page;
            this.GetAllAritcles();
        },
        changeKey(){
           this.GetAllArticles();
        },
        memberAvatar(row){
             return row.imgs
        },
        AddArticle(){
           this.$router.push({path:'/articles/createArticle'})
        },
        changeSelectingStatus(status){
          this.selecting_status = status;
          this.GetAllArticles();
        },
        openDelete(row,index){
             var  id = row.id;
            this.$confirm('确认要删除该信息吗?删除后将无法恢复!',{
              dangerouslyUseHTMLString:true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning' 
            }).then(()=>{
                var ids = [];
                ids.push(row.id);
                openDelete({ids:ids}).then(response=>{
                    this.articsData.splice(index,1);
                    this.$message.success("删除成功");
                }).catch(e=>{});       
          }).catch(e=>{});
        },
         
          handleSelectionChange(val){
             this.selectedArticles = val;
         },
         changeCheck(){
          this.$refs.multipleTable.clearSelection();
           if (this.checkAllStatus) {
            this.$refs.multipleTable.toggleAllSelection();
            }
          },

          openDeletearticles(){
            if (this.selectedArticles.length==0) {
              this.$message.error("请选择要删除的信息");
            return false;
           } 
           this.$confirm('确定要删除吗?删除后信息将无法恢复!','删除提示',{
               dangerouslyUseHTMLString:true,
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
           }).then(()=>{
                var ids = [];
                var idMap = {};
                for (const index in this.selectedArticles) {
                ids.push(this.selectedArticles[index].id);
                idMap[this.selectedArticles[index].id] = this.selectedArticles[index].id;
            }
               openDelete({ids:ids}).then(response=>{
                   if(response.data.state == 1){
                         var articsDatalength = this.articsData.length;
                     for (let index = articsDatalength-1; index >= 0; index--) {
                    if(this.articsData[index].id in idMap) {
                    this.articsData.splice(index, 1);
                   }                  
                 }
                  this.$message.success("删除成功");   
                }else{
                   this.$message.success("删除失败");   
                 }
               }).catch(e=>{});
           }).catch(() => {
              return false        
           }); 
          }
    },
    created(){
      this.GetAllArticles()
    }
  }
</script>

<style scoped>
      .parent{
        position: relative;
        width: 160px;
        height: 120px;
        left: 20px;
    }
    .parent .text{
        display: inline-block;
        transform: rotate(-45deg);
        padding: 20px;
        color:red;
        position: relative;
        left: -60px;
    }
   .triangle-topleft{
        width: 0;
        height: 0;
        border-top: 70px solid yellow;
        border-right: 70px solid transparent;
        position: relative;
        margin-top: -140px;       
    }
</style>