admin-cms/src/views/news/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="top">
        <topInfo :topTitle="topTitle" :display="display" @add="add"></topInfo>
      </el-col>
      <el-col :span="24" class="main">
        <el-col :span="24" class="list">
          <newsList :tableData="tableData" :total="total" @deleteRow="deleteRow" @select="select" @publish="publish"></newsList>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import topInfo from '@/layout/custom/topInfo.vue';
  import newsList from '@/layout/news/newsList.vue';
  import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
  const { mapActions: tNewsCenter } = createNamespacedHelpers('tNewsCenter');

  export default {
    name: 'index',
    props: {},
    components: {
      topInfo, //头部导航
      newsList, //列表
    },
    data: () => ({
      topTitle: '新闻中心管理',
      display: 'block',
      tableData: [],
      total: 0,
    }),
    created() {
      this.select();
    },
    computed: {},
    methods: {
      ...tNewsCenter(['create', 'delete', 'update', 'fetch', 'query']),
      async select({ skip = 0, limit = 10, ...info } = {}) {
        const res = await this.query({ skip, limit, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `tableData`, res.data);
          this.$set(this, `total`, res.total);
        }
      },
      add() {
        this.$router.push({ path: '/news/detail' });
      },
      async deleteRow({ id, skip = 0, limit = 10, ...info } = {}) {
        const res = await this.delete(id);
        this.$checkRes(res, '删除成功', '删除失败');
        this.select({ skip, limit, ...info });
      },
      async publish({ row ,skip = 0, limit = 10, ...info } = {}){
        let res = await this.update({id:row.id,publish_state:1,publish_state_description:'已发布',publish_time:new Date().getTime()});
        this.$checkRes(res, '发布成功', '发布失败');
        this.select({ skip, limit, ...info });
      },
    },
  };
</script>

<style lang="less" scoped>
  .top {
    height: 50px;
    margin: 0 0 10px 0;
  }
  .main {
    min-height: 765px;
    background: #ffffff;
  }
  .search {
    width: 97%;
    height: 35px;
    margin: 20px;
  }
  .list {
    padding: 0 20px;
  }
</style>