NewLabelManager.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div>
  3. <div class="operation">
  4. <el-button type="primary" @click="goAdd" size="mini">添加</el-button>
  5. </div>
  6. <el-table :data="items">
  7. <el-table-column label="标签名称" prop="name"></el-table-column>
  8. <el-table-column label="顺序号" prop="sort"></el-table-column>
  9. <el-table-column label="标签状态">
  10. <template slot-scope="scope">
  11. <template v-if="scope.row.status === 1">
  12. <p class="online">启用</p>
  13. </template>
  14. <template v-else>
  15. <p class="offline">禁用</p>
  16. </template>
  17. </template>
  18. </el-table-column>
  19. <el-table-column label="操作">
  20. <template slot-scope="scope">
  21. <template v-if="scope.row.status == 0">
  22. <el-button type="success" @click="setStatus(scope.row)" size="mini">启用</el-button>
  23. </template>
  24. <template v-else>
  25. <el-button type="danger" @click="setStatus(scope.row)" size="mini">禁用</el-button>
  26. </template>
  27. <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
  28. </template>
  29. </el-table-column>
  30. </el-table>
  31. </div>
  32. </template>
  33. <script>
  34. export default {
  35. data: function() {
  36. return {
  37. items: []
  38. };
  39. },
  40. methods: {
  41. goEdit: function(row) {
  42. this.$router.push({
  43. path: "/editLabel",
  44. query: { id: row.id, type: "new" }
  45. });
  46. },
  47. goAdd: function() {
  48. this.$router.push({ path: "/editLabel", query: { id: 0, type: "new" } });
  49. },
  50. setStatus: function(row) {
  51. var status = row.status === 1 ? 0 : 1;
  52. var msg = status === 1 ? "启用" : "禁用";
  53. this.$confirm(
  54. '您确定要将此新闻标签设置为 "' + msg + '" , 是否继续?',
  55. "提示",
  56. {
  57. confirmButtonText: "确定",
  58. cancelButtonText: "取消",
  59. type: "warning"
  60. }
  61. ).then(() => {
  62. this.$http
  63. .saveNewLabelStatus({ id: row.id, status: status }, this)
  64. .then(res => {
  65. if (res.code === 0) {
  66. this.$message({
  67. message: "操作成功",
  68. type: "success"
  69. });
  70. row.status = status;
  71. }
  72. });
  73. });
  74. }
  75. },
  76. mounted: function() {
  77. this.$http.getAllNewLabels({}, this).then(res => {
  78. if (res.code === 0) {
  79. this.items = res.obj;
  80. }
  81. });
  82. }
  83. };
  84. </script>
  85. <style scoped>
  86. .online {
  87. color: #67c23a;
  88. }
  89. .offline {
  90. color: #f56c6c;
  91. }
  92. .operation {
  93. height: 50px;
  94. border-bottom: 1px solid #e6e6e6;
  95. margin-bottom: 10px;
  96. }
  97. </style>