运营管理 频道管理 内容列表细化

src/views/operation/channel/detail.vue

@@ -28,12 +28,12 @@
         <el-button type="primary" icon="el-icon-plus" @click="getDialog">
           新增内容
         </el-button>
-        <el-table :data="tableData" v-loading="loading">
+        <el-table :data="form.list" v-loading="loading">
           <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
           <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
-          <el-table-column label="音频封面" align="center">
+          <el-table-column label="音频封面" align="center" width="100px">
             <template slot-scope="scope">
-              <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
+              <el-image :src="scope.row.audioPic" />
             </template>
           </el-table-column>
           <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
@@ -67,15 +67,15 @@
               :label="item.label" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="![2, 10, 11].includes(dialogForm.audioType)" label="付费类型：">
-          <el-select v-model="dialogForm.payType" placeholder="请选择付费类型">
-            <el-option v-for="item in [8, 15].includes(dialogForm.audioType) ? payTypeOptions : freeOptions "
-              :key="item.value" :label="item.label" :value="item.value" />
+        <el-form-item label="付费类型：" v-if="![2, 10, 11].includes(dialogForm.audioType)">
+          <el-select 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>
-        <!-- <el-form-item label="内容名称：">
+        <el-form-item label="内容名称：">
           <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
-        </el-form-item> -->
+        </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>
@@ -84,32 +84,20 @@
       <!-- 列表 -->
       <el-table :data="dialogData" ref="table" :row-key="getRowKey" @selection-change="getChange">
         <el-table-column type="selection" align="center" :reserve-selection="true" />
-        <el-table-column label="音频ID" prop="id" align="center" show-overflow-tooltip />
-        <el-table-column label="音频名称" prop="name" align="center" />
+        <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
+        <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
         <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-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 label="付费类型" align="center" v-if="![2, 10, 11].includes(dialogForm.audioType)">
-          <template slot-scope="scope">
-            <span
-              v-if="dialogForm.audioType === 6">{{ selectDictLabel(freeOptions, scope.row.isFree) }}</span>
-            <span
-              v-if="dialogForm.audioType === 8">{{ selectDictLabel(payTypeOptions, scope.row.charging) }}</span>
-            <span
-              v-if="dialogForm.audioType === 15">{{ selectDictLabel(payTypeOptions, scope.row.payType) }}</span>
+            <el-image v-if="scope.row.audioPic" :src="scope.row.audioPic" />
           </template>
         </el-table-column>
+        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
         <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
       </el-table>
-      <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
-        :limit.sync="dialogForm.pageSize" @pagination="getPage" />
       <div slot="footer">
-        <el-button @click="getAdd" type="primary">确定</el-button>
+        <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
+          :limit.sync="dialogForm.pageSize" @pagination="getList" />
+        <!-- <el-button @click="getAdd" type="primary">确定</el-button> -->
       </div>
     </el-dialog>
   </div>
@@ -117,16 +105,11 @@
 
 <script>
 import Upload from '@/components/Upload/index'
-import { channelList, channelDetail, edit, remove, queryList } from '@/api/operation/channel'
-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 { list as listForMusic } from '@/api/music/list'
-import { list as listForMenu } from '@/api/music/menu'
-import { platformMixin, payTypeMixin, isFreeMixin, channelMixin } from '@/mixin/index'
+import { list, channelDetail, edit } from '@/api/operation/channel'
+import { platformMixin, isFreeMixin, channelMixin } from '@/mixin/index'
 export default {
   dicts: ['channels_type'],
-  mixins: [platformMixin, payTypeMixin, isFreeMixin, channelMixin],
+  mixins: [platformMixin, isFreeMixin, channelMixin],
   components: {
     Upload
   },
@@ -136,15 +119,13 @@ export default {
       loading: false,
       // 弹窗
       dialogVisible: false,
-      // 频道内容
-      tableData: [],
+      // 内容列表
       dialogData: [],
-      // 编辑表单
+      // 表单
       form: {},
-      // 频道属性
-      channelId: this.$route.query.channelId,
+      // 频道1 频道2 的频道属性不可修改
       disabled: this.$route.query.index == '0' || this.$route.query.index == '1' ? true : false,
-      // 列表表单
+      // 搜索表单
       dialogForm: {
         pageNum: 1,
         pageSize: 10,
@@ -152,9 +133,7 @@ export default {
         platformId: null,
         audioType: null
       },
-      total: 0,
-      // 添加频道内容
-      ids: []
+      total: 0
     }
   },
   watch: {
@@ -163,11 +142,11 @@ export default {
         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) {
+    async 'dialogForm.audioType'(val) {
       if (this.dialogVisible) {
-        this.getPlatform({
+        await this.getPlatform({
           audioType: val
         })
         this.getRefresh()
@@ -176,13 +155,12 @@ export default {
   },
   mounted() {
     this.getDetail()
-    this.getList()
   },
   methods: {
     // 频道详情
     getDetail() {
       channelDetail({
-        channelId: this.channelId
+        channelId: this.$route.query.channelId
       }).then(res => {
         if (res.code === 0) {
           this.form = res.data
@@ -190,86 +168,29 @@ export default {
       })
     },
 
-    // 频道内容列表
-    getList() {
-      queryList(this.channelId).then(res => {
-        if (res.code === 0) {
-          this.tableData = res.data
-        }
-      })
-    },
-
     // 修改频道属性
     handleChange() {
       let obj = { id: '' }
-      this.tableData.map((i, index) => obj.id += i.id + (index + 1 < this.tableData.length ? ',' : ''))
-      if (obj.id) {
-        this.getDelete(obj)
-      }
+      this.form.list.map((i, index) => obj.id += i.id + (index + 1 < this.form.list.length ? ',' : ''))
     },
 
-    getPage() {
-      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 {
-        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) {
-        this.dialogData = res.data.records
-        this.total = res.data.total
-        if (this.tableData.length > 0) {
-          this.tableData.map(i => {
-            let row = res.data.records.find(j => j.id === i.audioId)
-            if (row) {
-              this.$refs.table.toggleRowSelection(row, true)
-            }
-          })
+    // 内容列表
+    getList() {
+      list(this.dialogForm).then(res => {
+        if (res.code == 0) {
+          this.dialogData = res.data.records
+          this.total = res.data.total
+          if (this.form.list.length > 0) {
+            this.$refs.table.clearSelection()
+            this.form.list.map(i => {
+              let row = this.dialogData.find(j => j.audioId === i.audioId)
+              if (row) {
+                this.$refs.table.toggleRowSelection(row, true)
+              }
+            })
+          }
         }
-      }
+      })
     },
 
     // 上传频道封面
@@ -280,14 +201,14 @@ export default {
     // 打开弹窗
     getDialog() {
       this.dialogVisible = true
-      this.ids = []
-      this.getPage()
+      this.dialogForm.platformId = this.dialogForm.platformId = this.form.channelType === 16 ? 3 : this.form.channelType === 17 ? 2 : this.platformOptions[0].value
+      this.getList()
     },
 
     // 搜索
     getSearch() {
       this.dialogForm.pageNum = 1
-      this.getPage()
+      this.getList()
     },
 
     // 重置
@@ -297,13 +218,20 @@ export default {
         pageSize: 10,
         status: 1,
         audioType: this.dialogForm.audioType,
-        type: this.dialogForm.audioType === 15 ? 1 : this.dialogForm.audioType === 10 ? 2 : ''
+        platformId: this.dialogForm.platformId,
       }
-      this.getPage()
+      this.getList()
     },
 
     // 提交
     submit() {
+      this.form.audioList = []
+      this.form.list.map(i => {
+        this.form.audioList.push({
+          audioId: i.audioId,
+          audioType: i.audioType
+        })
+      })
       edit(this.form).then(res => {
         if (res.code === 0) {
           this.$message.success('修改成功！')
@@ -319,49 +247,32 @@ export default {
 
     // 删除
     getDelete(row) {
-      remove(row.id).then(res => {
-        if (res.code === 0) {
-          this.$message.success('删除成功！')
-          this.getList()
-        }
-      })
+      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
     },
 
     getRowKey(row) {
-      return row.id
+      return row.audioId
     },
 
     // 表格多选
     getChange(row) {
-      this.ids = []
+      this.form.audioList = []
       if (row.length > 0) {
         row.map(i => {
-          if (this.ids.findIndex(j => j === i.id) === -1) {
-            this.ids.push(i.id)
+          if (this.form.list.findIndex(j => j.audioId === i.audioId) === -1) {
+            this.form.list.push(i)
           }
         })
       }
     },
 
-    // 添加频道内容
-    getAdd() {
-      channelList({
-        audioType: this.form.channelType,
-        channelDefaultId: this.channelId,
-        ids: this.ids
-      }).then(res => {
-        if (res.code === 0) {
-          this.$message.success('添加成功！')
-          this.dialogVisible = false
-          this.getList()
-        }
-      })
-    },
-
     // 字典翻译
     platfromFormatter(row) {
       return this.selectDictLabel(this.platformOptions, row.platformId)
     },
+    freeFormatter(row) {
+      return this.selectDictLabel(this.freeOptions, row.isFree)
+    }
   }
 }
 </script>
@@ -375,4 +286,9 @@ export default {
   width: 80px;
   height: 80px;
 }
+
+::v-deep .el-dialog__body {
+  height: 610px;
+  overflow-y: scroll;
+}
 </style>