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

<template>
  <div>
    <div class="operation">
      <el-button type="primary" @click="goAddMUser" size="mini">添加管理用户</el-button>
    </div>
    <el-table :data="items">
      <el-table-column label="用户名称" prop="uname"></el-table-column>
      <el-table-column label="用户手机号" prop="uphone"></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="创建者" prop="cuname"></el-table-column>
      <el-table-column label="操作">
        <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>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    getMUsers: function() {
      this.$http.queryAllMUsers({}, this).then(res => {
        if (res.code == 0) {
          this.items = res.obj;
        }
      });
    },
    setStatus: function(row) {
      var status = row.status === 1 ? 0 : 1;
      this.$http
        .setMUserStatus({ id: row.id, status: status }, this)
        .then(res => {
          if (res.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            row.status = status;
          }
        });
    },
    goAddMUser() {
      this.$router.push("/addManageUser");
    }
  },
  mounted: function() {
    this.getMUsers();
  }
};
</script>
<style scoped>
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
.operation {
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}
</style>