tjshop/shop/static/manager/src.b/components/page/NewsManager.vue

<template>
  <div>
    <div class="operation">
      <el-input v-model="search" placeholder="请输入新闻名称" size="mini"></el-input>
      <el-select v-model="status" size="mini">
        <el-option value="-1" label="全部"></el-option>
        <el-option value="1" label="启用"></el-option>
        <el-option value="0" label="禁用"></el-option>
      </el-select>
      <div class="btn">
        <el-button type="primary" @click="getItems" size="mini">查询</el-button>
        <el-button type="primary" @click="goAdd" size="mini">添加</el-button>
      </div>
    </div>
    <el-table :data="items">
      <el-table-column label="新闻ID" prop="id"></el-table-column>
      <el-table-column label="新闻图标" width="110px">
        图标
        <template slot-scope="scope">
          <img :src="scope.row.icon" style="width:100px;" />
        </template>
      </el-table-column>
      <el-table-column label="新闻名称" prop="name"></el-table-column>
      <el-table-column label="新闻标题" prop="describe"></el-table-column>
      <el-table-column label="发布时间" prop="time"></el-table-column>
      <el-table-column label="描述" prop="describe"></el-table-column>
      <el-table-column label="阅读数" prop="wacth"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 1">
            <p class="online">启用</p>
          </template>
          <template v-else>
            <p class="offline">禁用</p>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="推荐新闻">
        <template slot-scope="scope">
          <template v-if="scope.row.recommend">
            <p v-on:click="setRecommend(scope.row)" class="online">是</p>
          </template>
          <template v-else>
            <p v-on:click="setRecommend(scope.row)" class="offline">否</p>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250px">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 0">
            <el-button type="success" @click="setStatus(scope.row)" size="mini">启用</el-button>
          </template>
          <template v-else>
            <el-button type="danger" @click="setStatus(scope.row)" size="mini">禁用</el-button>
          </template>
          <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="goEditLabel(scope.row)">标签</el-button>
          <a :href="serverPath + 'new/detail/' + scope.row.id" target="_black">
            <el-button type="text" size="small">预览</el-button>
          </a>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        layout="total, prev, pager, next,jumper"
        @current-change="nextPage"
        :page-size="pageSize"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      items: [],
      totalCount: 0,
      status: "-1",
      search: "",

      serverPath: process.env.SERVER_PATH
    };
  },
  methods: {
    getItems: function() {
      this.$http
        .getNews(
          {
            page: this.page,
            pageSize: this.pageSize,
            status: this.status,
            search: this.search
          },
          this
        )
        .then(data => {
          this.items = data.obj.list;
          this.totalCount = data.obj.totalCount;
        });
    },
    nextPage: function(currentPage) {
      this.page = currentPage;
      this.getItems();
    },
    statusFormater: function(row) {
      if (row.status === 1) {
        return "在线";
      } else {
        return "离线";
      }
    },
    setStatus: function(row) {
      let msg = row.status === 1 ? "禁用" : "启用";

      this.$confirm(
        '您确定要将此商品设置为 "' + msg + '" , 是否继续?',
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http
            .setNewStatus(
              { id: row.id, status: row.status === 1 ? false : true },
              this
            )
            .then(res => {
              if (res.code === 0) {
                row.status = row.status === 1 ? 0 : 1;
                this.$message({
                  message: "操作成功",
                  type: "success"
                });
              }
            });
        })
        .catch(() => {});
    },
    goEdit: function(row) {
      this.$router.push({ path: "/editNew", query: { id: row.id } });
    },
    goAdd: function(row) {
      this.$router.push({ path: "/editNew", query: { id: 0 } });
    },
    goEditLabel: function(row) {
      this.$router.push({ path: "/newTypeManage", query: { id: row.id } });
    },
    setRecommend: function(row) {
      var msg = row.recommend
        ? "您是否要停止推荐此新闻吗？"
        : "您是否要推荐此新闻？";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        this.$http
          .setNewRecommend(
            { id: row.id, recommend: row.recommend ? false : true },
            this
          )
          .then(res => {
            row.recommend = !row.recommend;
          });
      });
    }
  },
  mounted: function() {
    this.getItems();
  }
};
</script>

<style scoped>
.page {
  margin-top: 10px;
}
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
.operation {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}
.operation .btn {
  display: flex;
  height: 28px;
}
.operation .btn,
.operation .el-input,
.operation .el-select {
  width: 150px;
  margin-right: 8px;
}
</style>