index.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索 -->
  4. <el-form inline size="mini">
  5. <el-form-item label="播客名称:">
  6. <el-input v-model="form.podcastName" placeholder="请输入播客名称" clearable />
  7. </el-form-item>
  8. <el-form-item label="主播名称:">
  9. <el-input v-model="form.podcasterName" placeholder="请输入主播名称" clearable />
  10. </el-form-item>
  11. <el-form-item label="付费类型:">
  12. <el-select v-model="form.payType" placeholder="请选择付费类型" clearable>
  13. <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value"
  14. :label="item.label" />
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="当前状态:">
  18. <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
  19. <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value"
  20. :label="item.label" />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="资源平台:">
  24. <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
  25. <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
  26. :label="item.label" />
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item>
  30. <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
  31. <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
  32. <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
  33. </el-form-item>
  34. </el-form>
  35. <!-- 列表 -->
  36. <el-table :data="tableData" v-loading="loading">
  37. <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
  38. <el-table-column label="播客名称" prop="name" align="center" show-overflow-tooltip />
  39. <el-table-column label="播客封面" align="center" width="100px">
  40. <template slot-scope="scope">
  41. <el-image :src="scope.row.thumb" />
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="播客分类" prop="categoryids" align="center" :formatter="categoryFormatter"
  45. show-overflow-tooltip>
  46. </el-table-column>
  47. <el-table-column label="主播名称" align="center" show-overflow-tooltip>
  48. <template slot-scope="scope">
  49. <span v-for="(item, index) in scope.row.adminPrdCasterResp" :key="item.podcasterId">
  50. {{ item.podcasterName }}{{ index + 1 >= scope.row.adminPrdCasterResp.length ? '' : ',' }}
  51. </span>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="付费类型" prop="charging" align="center" :formatter="chargingFormatter" />
  55. <el-table-column label="节目数量" prop="programCount" align="center" />
  56. <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
  57. <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
  58. <el-table-column label="操作" align="center">
  59. <template slot-scope="scope">
  60. <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
  61. <span v-if="scope.row.status === 2" style="margin: 0 10px">
  62. <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
  63. <el-button type="text" @click="getChange(scope.row, 1)">上架</el-button>
  64. <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
  65. </span>
  66. <el-button v-else type="text" @click="getChange(scope.row, 2)">下架</el-button>
  67. </template>
  68. </el-table-column>
  69. </el-table>
  70. <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
  71. @pagination="getList" />
  72. </div>
  73. </template>
  74. <script>
  75. import { list, change, remove } from '@/api/music/blog'
  76. import { payTypeMixin, onOrOffMixin, platformMixin, classifyMixin } from '@/mixin/index'
  77. export default {
  78. mixins: [payTypeMixin, onOrOffMixin, platformMixin, classifyMixin],
  79. data() {
  80. return {
  81. // 遮罩层
  82. loading: false,
  83. // 表单
  84. form: {
  85. pageNum: 1,
  86. pageSize: 10
  87. },
  88. // 总数据
  89. total: 0,
  90. // 列表
  91. tableData: []
  92. }
  93. },
  94. mounted() {
  95. // 获取资源平台
  96. this.getPlatform(8)
  97. this.getList()
  98. },
  99. methods: {
  100. // 列表
  101. getList() {
  102. this.loading = true
  103. list(this.form).then(res => {
  104. if (res.code === 0) {
  105. this.tableData = res.data.records
  106. this.total = res.data.total
  107. this.loading = false
  108. }
  109. })
  110. },
  111. // 搜索
  112. getSearch() {
  113. this.form.pageNum = 1
  114. this.getList()
  115. },
  116. // 重置
  117. getRefresh() {
  118. this.form = {
  119. pageNum: 1,
  120. pageSize: 10
  121. }
  122. this.getList()
  123. },
  124. // 新增 查看 编辑
  125. getDetail(id, boolean) {
  126. this.$router.push({
  127. path: `/music/blog/detail`,
  128. query: {
  129. id: id,
  130. disabled: boolean
  131. }
  132. })
  133. },
  134. // 上下架
  135. getChange(row, status) {
  136. let title = status === 1 ? '上架' : '下架'
  137. this.$confirm(`是否${title}${row.name}?`, '提示', {
  138. type: 'warning'
  139. }).then(() => {
  140. change(row.id, status).then(res => {
  141. if (res.code === 0) {
  142. this.$message.success(`${title}成功!`)
  143. this.getList()
  144. }
  145. })
  146. }).catch(() => { })
  147. },
  148. // 删除
  149. getDelete(row) {
  150. this.$confirm(`是否删除${row.name}?`, '提示', {
  151. type: 'warning'
  152. }).then(() => {
  153. remove(row.id).then(res => {
  154. if (res.code === 0) {
  155. this.$message.success('删除成功!')
  156. this.getList()
  157. }
  158. })
  159. }).catch(() => { })
  160. },
  161. // 字典翻译
  162. chargingFormatter(row) {
  163. return this.selectDictLabel(this.payTypeOptions, row.charging)
  164. },
  165. statusFormatter(row) {
  166. return this.selectDictLabel(this.onOrOffOptions, row.status)
  167. },
  168. platformFormatter(row) {
  169. return this.selectDictLabel(this.platformOptions, row.platformId)
  170. },
  171. categoryFormatter(row) {
  172. return row.categoryIds.map((item, index) => (this.selectDictLabel(this.classifyOptions, item)) + (index + 1 < row.categoryIds.length ? ',' : ''))
  173. }
  174. }
  175. }
  176. </script>
  177. <style lang="scss" scoped>
  178. </style>