|
@@ -1,28 +1,24 @@
|
|
<template>
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
- <el-form class="form" label-width="100px" size="small">
|
|
|
|
- <el-row>
|
|
|
|
- <el-col :span="12">
|
|
|
|
- <el-form-item label="播客封面:">
|
|
|
|
- <Upload listType="picture-card" @upload="getUpload" />
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="12">
|
|
|
|
- <el-form-item label="播客名称:">
|
|
|
|
- <el-input placeholder="请输入播客名称" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="播客分类:">
|
|
|
|
- <el-select placeholder="请选择播客分类">
|
|
|
|
- <el-option />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="资源平台:">
|
|
|
|
- <el-input disabled />
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- <el-form-item label="音乐简介:">
|
|
|
|
- <el-input type="textarea" rows="4" placeholder="请输入音乐简介" />
|
|
|
|
|
|
+ <el-form label-width="100px">
|
|
|
|
+ <el-form-item label="播客名称:">
|
|
|
|
+ <el-input placeholder="请输入播客名称" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="主播名称:">
|
|
|
|
+ <el-input placeholder="请输入主播名称" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="播客分类:">
|
|
|
|
+ <el-select placeholder="请选择播客分类">
|
|
|
|
+ <el-option />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="播客介绍:">
|
|
|
|
+ <el-input type="textarea" rows="5" placeholder="请输入播客介绍" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="资源平台:">
|
|
|
|
+ <el-select placeholder="请选择资源平台">
|
|
|
|
+ <el-option />
|
|
|
|
+ </el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="付费类型:">
|
|
<el-form-item label="付费类型:">
|
|
<el-select placeholder="请选择付费类型">
|
|
<el-select placeholder="请选择付费类型">
|
|
@@ -35,162 +31,50 @@
|
|
<el-form-item label="折扣价:">
|
|
<el-form-item label="折扣价:">
|
|
<el-input placeholder="请输入折扣价" />
|
|
<el-input placeholder="请输入折扣价" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="标签分类:">
|
|
|
|
- <el-select placeholder="请选择标签分类">
|
|
|
|
- <el-option />
|
|
|
|
- </el-select>
|
|
|
|
|
|
+ <el-form-item label="播客封面">
|
|
|
|
+ <Upload listType="picture-card" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="关联节目:" style="width: 1000px">
|
|
|
|
- <el-button type="primary" @click="getPage">关联</el-button>
|
|
|
|
- <el-button @click="getDelete">解除关联</el-button>
|
|
|
|
- <el-table :data="tableData1" height="229px" :row-key="getRowKey"
|
|
|
|
- @selection-change="selectionChangeDelete">
|
|
|
|
|
|
+ <el-form-item label="关联节目:">
|
|
|
|
+ <el-button type="primary">关联节目</el-button>
|
|
|
|
+ <el-button>解除关联</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item style="width: 1000px">
|
|
|
|
+ <el-table>
|
|
<el-table-column type="selection" align="center" />
|
|
<el-table-column type="selection" align="center" />
|
|
- <el-table-column prop="id" label="节目ID" align="center" width="150px" />
|
|
|
|
- <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
|
|
|
|
- <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
|
|
|
|
- <el-table-column prop="status" label="当前状态" align="center" width="100px"
|
|
|
|
- :formatter="statusFormatter" />
|
|
|
|
|
|
+ <el-table-column label="ID" align="center" />
|
|
|
|
+ <el-table-column label="节目名称" align="center" />
|
|
|
|
+ <el-table-column label="资源平台" align="center" />
|
|
|
|
+ <el-table-column label="当前状态" align="center" />
|
|
</el-table>
|
|
</el-table>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item>
|
|
|
|
- <el-button @click="getCancel">取消</el-button>
|
|
|
|
- <el-button type="primary" @click="getSubmit">提交</el-button>
|
|
|
|
- </el-form-item>
|
|
|
|
</el-form>
|
|
</el-form>
|
|
-
|
|
|
|
- <!-- 关联弹窗 -->
|
|
|
|
- <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1000px">
|
|
|
|
- <el-form :model="programmeForm" inline size="mini">
|
|
|
|
- <el-form-item label="节目ID:">
|
|
|
|
- <el-input v-model="programmeForm.id" placeholder="请输入节目ID" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="节目名称:">
|
|
|
|
- <el-input v-model="programmeForm.name" placeholder="请输入节目名称" />
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item>
|
|
|
|
- <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
|
|
|
|
- <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- <el-table :data="programmeTable" ref="programmeTable" v-loading="loading" :row-key="getRowKey"
|
|
|
|
- @selection-change="selectionChangeAdd">
|
|
|
|
- <el-table-column type="selection" reserve-selection align="center" />
|
|
|
|
- <el-table-column prop="id" label="节目ID" align="center" width="150px" />
|
|
|
|
- <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
|
|
|
|
- <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
|
|
|
|
- <el-table-column prop="status" label="当前状态" align="center" width="100px"
|
|
|
|
- :formatter="statusFormatter" />
|
|
|
|
- </el-table>
|
|
|
|
- <pagination v-show="total>0" :total="total" :page.sync="programmeForm.pageNum"
|
|
|
|
- :limit.sync="programmeForm.pageSize" @pagination="getPage" />
|
|
|
|
- </el-dialog>
|
|
|
|
|
|
+ <div class="form-btn">
|
|
|
|
+ <el-button>取消</el-button>
|
|
|
|
+ <el-button type="primary">确定</el-button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { getProgrammePage } from '@/api/music/blog'
|
|
|
|
-import { statusMixin } from '../mixin/index'
|
|
|
|
-import Upload from "@/components/Upload/index";
|
|
|
|
|
|
+import Upload from '@/components/Upload/index.vue'
|
|
export default {
|
|
export default {
|
|
- mixins: [statusMixin],
|
|
|
|
components: {
|
|
components: {
|
|
- Upload,
|
|
|
|
|
|
+ Upload
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- // 遮罩层
|
|
|
|
- loading: true,
|
|
|
|
- // 表单
|
|
|
|
- programmeForm: {
|
|
|
|
- pageNum: 1,
|
|
|
|
- pageSize: 10
|
|
|
|
- },
|
|
|
|
- // 弹窗
|
|
|
|
- dialogVisible: false,
|
|
|
|
- // 选择的节目列表
|
|
|
|
- tableData1: [],
|
|
|
|
- // 解除关联
|
|
|
|
- delete_list: [],
|
|
|
|
- flag: false,
|
|
|
|
- // 节目总列表
|
|
|
|
- programmeTable: [],
|
|
|
|
- total: 0,
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- // 上传封面
|
|
|
|
- getUpload(e){
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 关联
|
|
|
|
- getPage() {
|
|
|
|
- this.loading = true
|
|
|
|
- this.dialogVisible = true,
|
|
|
|
- getProgrammePage(this.programmeForm).then(res => {
|
|
|
|
- if (res.code === 0) {
|
|
|
|
- this.programmeTable = res.data.records
|
|
|
|
- this.total = res.data.total
|
|
|
|
- this.loading = false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 多选
|
|
|
|
- selectionChangeDelete(e) {
|
|
|
|
- this.delete_list = e
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- selectionChangeAdd(e) {
|
|
|
|
- if(this.flag) return
|
|
|
|
- this.tableData1 = e
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- getRowKey(row) {
|
|
|
|
- return row.id;
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 解除关联
|
|
|
|
- getDelete() {
|
|
|
|
- this.flag = true
|
|
|
|
- this.delete_list.forEach(i => {
|
|
|
|
- this.tableData1.splice(i, 1)
|
|
|
|
- this.$refs.programmeTable.toggleRowSelection(i)
|
|
|
|
- })
|
|
|
|
- this.flag = false
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 搜索
|
|
|
|
- getSearch() {
|
|
|
|
- this.programmeForm.pageNum = 1
|
|
|
|
- this.getPage()
|
|
|
|
- },
|
|
|
|
|
|
|
|
- // 重置
|
|
|
|
- getRefresh() {
|
|
|
|
- this.programmeForm = {
|
|
|
|
- pageNum: 1,
|
|
|
|
- pageSize: 10
|
|
|
|
- }
|
|
|
|
- this.getPage()
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- getCancel() {
|
|
|
|
- this.$tab.closeOpenPage("/music/blog");
|
|
|
|
- },
|
|
|
|
- getSubmit() { },
|
|
|
|
-
|
|
|
|
- // 字典翻译
|
|
|
|
- statusFormatter(row) {
|
|
|
|
- return this.selectDictLabel(this.statusOptions, row.status)
|
|
|
|
}
|
|
}
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.form {
|
|
|
|
- width: 600px;
|
|
|
|
|
|
+.el-form {
|
|
|
|
+ width: 500px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.form-btn {
|
|
|
|
+ margin-top: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|