tjshop/shop/static/manager/src.b/components/page/faq/FAQManage.vue

<template>
  <div>
    <div class="operation">
      <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="问题" prop="question"></el-table-column>
      <el-table-column label="答案" prop="answer"></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">
          <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
        </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 {
      items: [],
      status: "-1",
      page: 1,
      pageSize: 2,
      totalCount: 0
    };
  },
  methods: {
    goAdd: function() {
      var row = { id: 0 };
      this.goEdit(row);
    },
    getItems: function() {
      this.$http
        .getAllFaq(
          { status: this.status, page: this.page, pageSize: this.pageSize },
          this
        )
        .then(res => {
          if (res.code === 0) {
            this.items = res.obj.list;
            this.totalCount = res.obj.totalCount;
          }
        });
    },
    nextPage: function(currentPage) {
      this.page = currentPage;
      this.getItems();
    },
    goEdit: function(row) {
      this.$router.push({ path: "/editFAQ", query: { id: row.id } });
    }
  },
  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>