index.vue 7.7 KB

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