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

<template>
  <div>
    <div class="operation">
      <el-button type="primary" @click="goAdd" size="mini">添加</el-button>
    </div>
    <el-table :data="items">
      <el-table-column label="标签名称" prop="name"></el-table-column>
      <el-table-column label="顺序号" prop="sort"></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.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>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      items: []
    };
  },
  methods: {
    goEdit: function(row) {
      this.$router.push({ path: "/editLabel", query: { id: row.id } });
    },
    goAdd: function() {
      this.$router.push({ path: "/editLabel", query: { id: 0 } });
    },
    setStatus: function(row) {
      var status = row.status === 1 ? 0 : 1;
      var msg = status === 1 ? "启用" : "禁用";
      this.$confirm(
        '您确定要将此商品标签设置为 "' + msg + '" , 是否继续?',
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http
          .saveLabelStatus({ id: row.id, status: status }, this)
          .then(res => {
            if (res.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              row.status = status;
            }
          });
      });
    }
  },
  mounted: function() {
    this.$http.getSysLabels({}, this).then(res => {
      if (res.code === 0) {
        this.items = res.obj;
      }
    });
  }
};
</script>

<style scoped>
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
.operation {
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}
</style>