123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <template>
- <div class="app-container">
- <!-- 搜索 -->
- <el-form inline size="mini">
- <el-form-item label="播客名称:">
- <el-input v-model="form.podcastName" placeholder="请输入播客名称" clearable />
- </el-form-item>
- <el-form-item label="主播名称:">
- <el-input v-model="form.podcasterName" placeholder="请输入主播名称" clearable />
- </el-form-item>
- <el-form-item label="付费类型:">
- <el-select v-model="form.payType" placeholder="请选择付费类型" clearable>
- <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value"
- :label="item.label" />
- </el-select>
- </el-form-item>
- <el-form-item label="当前状态:">
- <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
- <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value"
- :label="item.label" />
- </el-select>
- </el-form-item>
- <el-form-item label="资源平台:">
- <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
- <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
- :label="item.label" />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
- <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
- </el-form-item>
- </el-form>
- <!-- 列表 -->
- <el-table :data="tableData" v-loading="loading">
- <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
- <el-table-column label="播客名称" prop="name" align="center" show-overflow-tooltip />
- <el-table-column label="播客封面" align="center" width="100px">
- <template slot-scope="scope">
- <el-image :src="scope.row.thumb" />
- </template>
- </el-table-column>
- <el-table-column label="播客分类" prop="categoryids" align="center" :formatter="categoryFormatter"
- show-overflow-tooltip>
- </el-table-column>
- <el-table-column label="主播名称" align="center" show-overflow-tooltip>
- <template slot-scope="scope">
- <span v-for="(item, index) in scope.row.adminPrdCasterResp" :key="item.podcasterId">
- {{ item.podcasterName }}{{ index + 1 >= scope.row.adminPrdCasterResp.length ? '' : ',' }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="付费类型" prop="charging" align="center" :formatter="chargingFormatter" />
- <el-table-column label="节目数量" prop="programCount" align="center" />
- <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
- <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
- <el-table-column label="操作" align="center">
- <template slot-scope="scope">
- <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
- <span v-if="scope.row.status === 2" style="margin: 0 10px">
- <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
- <el-button type="text" @click="getChange(scope.row, 1)">上架</el-button>
- <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
- </span>
- <el-button v-else type="text" @click="getChange(scope.row, 2)">下架</el-button>
- </template>
- </el-table-column>
- </el-table>
- <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
- @pagination="getList" />
- </div>
- </template>
- <script>
- import { list, change, remove } from '@/api/music/blog'
- import { payTypeMixin, onOrOffMixin, platformMixin, classifyMixin } from '@/mixin/index'
- export default {
- mixins: [payTypeMixin, onOrOffMixin, platformMixin, classifyMixin],
- data() {
- return {
- // 遮罩层
- loading: false,
- // 表单
- form: {
- pageNum: 1,
- pageSize: 10
- },
- // 总数据
- total: 0,
- // 列表
- tableData: []
- }
- },
- mounted() {
- // 获取资源平台
- this.getPlatform(8)
- this.getList()
- },
- methods: {
- // 列表
- getList() {
- this.loading = true
- list(this.form).then(res => {
- if (res.code === 0) {
- this.tableData = res.data.records
- this.total = res.data.total
- this.loading = false
- }
- })
- },
- // 搜索
- getSearch() {
- this.form.pageNum = 1
- this.getList()
- },
- // 重置
- getRefresh() {
- this.form = {
- pageNum: 1,
- pageSize: 10
- }
- this.getList()
- },
- // 新增 查看 编辑
- getDetail(id, boolean) {
- this.$router.push({
- path: `/music/blog/detail`,
- query: {
- id: id,
- disabled: boolean
- }
- })
- },
- // 上下架
- getChange(row, status) {
- let title = status === 1 ? '上架' : '下架'
- this.$confirm(`是否${title}${row.name}?`, '提示', {
- type: 'warning'
- }).then(() => {
- change(row.id, status).then(res => {
- if (res.code === 0) {
- this.$message.success(`${title}成功!`)
- this.getList()
- }
- })
- }).catch(() => { })
- },
- // 删除
- getDelete(row) {
- this.$confirm(`是否删除${row.name}?`, '提示', {
- type: 'warning'
- }).then(() => {
- remove(row.id).then(res => {
- if (res.code === 0) {
- this.$message.success('删除成功!')
- this.getList()
- }
- })
- }).catch(() => { })
- },
- // 字典翻译
- chargingFormatter(row) {
- return this.selectDictLabel(this.payTypeOptions, row.charging)
- },
- statusFormatter(row) {
- return this.selectDictLabel(this.onOrOffOptions, row.status)
- },
- platformFormatter(row) {
- return this.selectDictLabel(this.platformOptions, row.platformId)
- },
- categoryFormatter(row) {
- return row.categoryIds.map((item, index) => (this.selectDictLabel(this.classifyOptions, item)) + (index + 1 < row.categoryIds.length ? ',' : ''))
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|