index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索 -->
  4. <el-form inline label-width="100px" size="mini">
  5. <el-form-item label="项目名称:">
  6. <el-input v-model="form.name" placeholder="请输入项目名称" />
  7. </el-form-item>
  8. <el-form-item label="当前状态:">
  9. <el-select v-model="form.status" placeholder="请选择当前状态">
  10. <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item>
  14. <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
  15. <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
  16. <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
  17. </el-form-item>
  18. </el-form>
  19. <!-- 列表 -->
  20. <el-table :data="tableData">
  21. <el-table-column prop="name" label="项目名称" align="center" />
  22. <el-table-column label="图标" align="center" width="150px">
  23. <template slot-scope="scope">
  24. <el-image :src="scope.row.pic" />
  25. </template>
  26. </el-table-column>
  27. <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter" />
  28. <el-table-column label="操作" align="center">
  29. <template slot-scope="scope">
  30. <el-button type="text" @click="getDetail(scope.row, 'edit')">管理</el-button>
  31. <el-button v-if="scope.row.status === 1" type="text" @click="getChange(scope.row, '上架')">上架</el-button>
  32. <el-button v-else type="text" @click="getChange(scope.row, '下架')">下架</el-button>
  33. </template>
  34. </el-table-column>
  35. </el-table>
  36. <!-- 分页 -->
  37. <pagination
  38. v-show="total>0"
  39. :total="total"
  40. :page.sync="form.pageNum"
  41. :limit.sync="form.pageSize"
  42. @pagination="getList"
  43. />
  44. </div>
  45. </template>
  46. <script>
  47. import { page, edit } from "@/api/project/list";
  48. export default {
  49. data() {
  50. return {
  51. // 遮罩层
  52. loading: false,
  53. // 表单
  54. form: {
  55. pageNum: 1,
  56. pageSize: 10,
  57. },
  58. total: 0,
  59. // 列表
  60. tableData: [],
  61. statusOptions: [
  62. {
  63. value: 0,
  64. label: "上架",
  65. },
  66. {
  67. value: 1,
  68. label: "下架",
  69. },
  70. ],
  71. };
  72. },
  73. mounted() {
  74. this.getList();
  75. },
  76. methods: {
  77. // 列表
  78. getList() {
  79. this.loading = true
  80. page(this.form).then((res) => {
  81. if (res.code === 0) {
  82. this.tableData = res.data.records;
  83. this.total = res.data.total;
  84. this.loading = false
  85. }
  86. });
  87. },
  88. // 搜索
  89. getSearch() {
  90. this.form.pageNum = 1;
  91. this.getList();
  92. },
  93. // 重置
  94. getRefresh() {
  95. this.form = {
  96. pageNum: 1,
  97. pageSize: 10,
  98. };
  99. this.getList();
  100. },
  101. // 新增 / 管理
  102. getDetail(row, key) {
  103. this.$router.push({
  104. path: `/project/list/detail`,
  105. query: {
  106. row: JSON.stringify(row),
  107. key: key,
  108. },
  109. });
  110. },
  111. getChange(row, key) {
  112. row.status = key === "上架" ? 0 : 1;
  113. edit(row).then((res) => {
  114. if (res.code === 0) {
  115. this.$message.success("修改成功!");
  116. this.getList()
  117. }
  118. });
  119. },
  120. statusFormatter(row) {
  121. return this.selectDictLabel(this.statusOptions, row.status);
  122. },
  123. },
  124. };
  125. </script>
  126. <style lang="scss" scoped>
  127. .el-image {
  128. border-radius: 20px;
  129. }
  130. </style>