运营管理 定制频道 关联内容添加音频类型搜索

src/views/operation/channel/detail.vue

@@ -55,19 +55,26 @@
     <el-dialog :visible.sync="dialogVisible" title="新增内容" width="1000px">
       <!-- 搜索 -->
       <el-form inline size="mini" @submit.native.prevent>
+        <el-form-item label="音频类型：">
+          <el-select v-model="dialogForm.audioType">
+            <el-option v-for="item in channelOptions[this.form.channelType]" :key="item.value"
+              :value="item.value" :label="item.label" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="资源平台：">
           <el-select v-model="dialogForm.platformId" :disabled="[16, 17].includes(form.channelType)">
             <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
               :label="item.label" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="![2, 17].includes(form.channelType)" label="付费类型：">
-          <el-select v-if="form.channelType === 6" v-model="dialogForm.isFree" placeholder="请选择付费类型">
-            <el-option v-for="item in freeOptions" :key="item.value" :label="item.label"
+        <el-form-item v-if="![2, 11, 17].includes(dialogForm.audioType)" label="付费类型：">
+          <el-select v-if="[10, 15].includes(dialogForm.audioType)" v-model="dialogForm.payType"
+            placeholder="请选择付费类型">
+            <el-option v-for="item in payTypeOptions" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
-          <el-select v-else v-model="dialogForm.payType">
-            <el-option v-for="item in payTypeOptions" :key="item.value" :label="item.label"
+          <el-select v-else v-model="dialogForm.isFree" placeholder="请选择付费类型">
+            <el-option v-for="item in freeOptions" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
         </el-form-item>
@@ -88,11 +95,15 @@
         <el-table-column label="音频封面" align="center" width="100px">
           <template slot-scope="scope">
             <el-image v-if="scope.row.cover" :src="scope.row.cover" />
-            <el-image v-else :src="scope.row.thumb" />
+            <el-image v-if="scope.row.coverUrl" :src="scope.row.coverUrl" />
+            <el-image v-if="scope.row.thumb" :src="scope.row.thumb" />
+            <el-image v-if="scope.row.thumbUrl" :src="scope.row.thumbUrl" />
           </template>
         </el-table-column>
-        <el-table-column v-if="![2, 17].includes(form.channelType)" label="付费类型" prop="isFree" align="center"
-          :formatter="freeFormatter" />
+        <el-table-column v-if="![2, 10, 11, 15, 17].includes(dialogForm.audioType)" label="付费类型" prop="isFree"
+          align="center" :formatter="freeFormatter" />
+        <el-table-column v-if="[10, 15].includes(dialogForm.audioType)" label="付费类型" prop="payType"
+          align="center" :formatter="payFormatter" />
         <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
       </el-table>
       <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
@@ -110,10 +121,12 @@ import { channelList, channelDetail, edit, remove, queryList } from '@/api/opera
 import { list as listForRadio } from '@/api/music/radio'
 import { list as listForProgram } from '@/api/music/program'
 import { list as listForBlog } from '@/api/music/blog'
-import { platformMixin, payTypeMixin, isFreeMixin } from '@/mixin/index'
+import { list as listForMusic } from '@/api/music/list'
+import { list as listForMenu } from '@/api/music/menu'
+import { platformMixin, payTypeMixin, isFreeMixin, channelMixin } from '@/mixin/index'
 export default {
   dicts: ['channels_type'],
-  mixins: [platformMixin, payTypeMixin, isFreeMixin],
+  mixins: [platformMixin, payTypeMixin, isFreeMixin, channelMixin],
   components: {
     Upload
   },
@@ -135,17 +148,32 @@ export default {
       dialogForm: {
         pageNum: 1,
         pageSize: 10,
-        status: 1
+        status: 1,
+        platformId: null,
+        audioType: null
       },
       total: 0,
       classifyOptions: [],
       // 添加频道内容
-      ids: [],
+      ids: []
     }
   },
   watch: {
     'form.channelType'(val) {
+      console.log(val);
+      this.getPlatform({
+        audioType: this.channelOptions[val][0].value
+      })
+      this.dialogForm.audioType = this.channelOptions[val][0].value
       this.dialogForm.platformId = val === 16 ? 3 : val === 17 ? 2 : ''
+    },
+    'dialogForm.audioType'(val) {
+      if (this.dialogVisible) {
+        this.getPlatform({
+          audioType: val
+        })
+        this.getPage()
+      }
     }
   },
   mounted() {
@@ -160,9 +188,6 @@ export default {
       }).then(res => {
         if (res.code === 0) {
           this.form = res.data
-          this.getPlatform({
-            audioType: res.data.channelType
-          })
         }
       })
     },
@@ -177,11 +202,7 @@ export default {
     },
 
     // 修改频道属性
-    handleChange(e) {
-      let type = e === 17 ? 2 : e === 16 ? 8 : e
-      this.getPlatform({
-        audioType: type
-      })
+    handleChange() {
       let obj = { id: '' }
       this.tableData.map((i, index) => obj.id += i.id + (index + 1 < this.tableData.length ? ',' : ''))
       if (obj.id) {
@@ -189,23 +210,54 @@ export default {
       }
     },
 
-    // 可选全部频道内容列表
     getPage() {
-      if ([2, 17].includes(this.form.channelType)) {
-        listForRadio(this.dialogForm).then(res => {
-          this.getRes(res)
-        })
-      } else if (this.form.channelType === 6) {
-        listForProgram(this.dialogForm).then(res => {
-          this.getRes(res)
-        })
+      if (this.dialogForm.audioType === 2) {
+        this.getListForRadio()
+      } else if (this.dialogForm.audioType === 6) {
+        this.getlistForProgram()
+      } else if (this.dialogForm.audioType === 11) {
+        this.getListForMusic()
+      } else if (this.dialogForm.audioType === 8) {
+        this.getListForBlog()
       } else {
-        listForBlog(this.dialogForm).then(res => {
-          this.getRes(res)
-        })
+        this.getListForMenu()
       }
     },
 
+    // 节目
+    getlistForProgram() {
+      listForProgram(this.dialogForm).then(res => {
+        this.getRes(res)
+      })
+    },
+    // 歌曲
+    getListForMusic() {
+      listForMusic(this.dialogForm).then(res => {
+        this.getRes(res)
+      })
+    },
+    // 广播电台
+    getListForRadio() {
+      listForRadio(this.dialogForm).then(res => {
+        this.getRes(res)
+      })
+    },
+    // 播客专辑
+    getListForBlog() {
+      listForBlog(this.dialogForm).then(res => {
+        this.getRes(res)
+      })
+    },
+    // 歌单
+    getListForMenu() {
+      let type = this.dialogForm.audioType === 15 ? 1 : 2
+      listForMenu({
+        ...this.dialogForm, type
+      }).then(res => {
+        this.getRes(res)
+      })
+    },
+
     // 抽离方法
     getRes(res) {
       if (res.code == 0) {
@@ -239,14 +291,13 @@ export default {
       this.dialogForm.pageNum = 1
       this.getPage()
     },
+
     // 重置
     getRefresh() {
-      this.dialogForm = {
-        pageNum: 1,
-        pageSize: 10,
-        status: 1,
-        platformId: [16, 17].includes(this.form.channelType) ? this.dialogForm.platformId : ''
-      }
+      this.dialogForm.pageNum = 1
+      this.dialogForm.pageSize = 10
+      this.dialogForm.status = 1
+      this.dialogForm.name = ''
       this.getPage()
     },
 
@@ -313,6 +364,10 @@ export default {
 
     platfromFormatter(row) {
       return this.selectDictLabel(this.platformOptions, row.platformId)
+    },
+
+    payFormatter(row) {
+      return this.selectDictLabel(this.payTypeOptions, row.payType)
     }
   }
 }