yfadmin_web/src/views/content/Article.vue

<style lang="scss">
.apply {
  .filter {
    background: #fff;
    padding: 20px 20px 10px;
    border: 1px solid #ededed;
    border-radius: 2px;
    margin-bottom: 10px;
    margin-top: 10px;
    .el-form-item {
      margin-bottom: 10px;
    }
    .el-input,
    .el-select {
      width: 150px;
    }
  }
  thead {
    th {
      background: #eee;
    }
  }
}
</style>
<template>
  <section class="apply">
    <p>内容管理 > 文章管理</p>
    <div class="filter">
      <el-form label-width="80px" :inline="true" size="small">
        <el-form-item label="文章标题">
          <el-input placeholder="请输入文章标题" clearable v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getData" type="primary" icon="el-icon-search">搜索</el-button>
          <el-button @click="$router.push({path:'/addArticle'})" type="primary">新增文章</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="table" :data="list" border style="width: 100%" v-loading='loading'>
      <!-- <el-table-column type="selection" fixed="left" width="55"></el-table-column> -->
      <el-table-column prop="title" label="文章标题"></el-table-column>
      <el-table-column prop="ctime" label="创建时间"></el-table-column>
      <el-table-column prop="zip" width="400" label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="success">查看</el-button> -->
          <el-button
            @click="$router.push({path:'/addArticle',query:{id:scope.row.id}})"
            size="mini"
            type="warning"
          >编辑</el-button>
          <el-button @click="del(scope.row.id)" size="mini"  type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page ref="pageButton" :total="total" @pageChange="gopage" />
  </section>
</template>
<script>
import Page from "../../components/Page";
export default {
  name: "articles",
  components: {
    Page
  },
  data() {
    return {
      form: { title: "" ,page:1,page_size:20},
      total: 1,
      list: [],
      loading:false,
    };
  },
  methods: {
    gopage(size){
          if(size){
              this.form.page_size=size
          }
            this.form.page=this.$refs.pageButton.page
            this.getData()
      },
    getData() {
      this.loading=true
      let parm=this.form
      this.$api.getArticleList(parm).then(res => {
        this.loading=false
        if (res.status == 200) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    del(id){
            this.$confirm('确定删除吗', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.delArticle({id:id}).then((res)=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getData()
                })
            })
      },
  },
  created() {
    this.getData();
  }
};
</script>