音频管理 播客专辑 添加上下架功能

src/views/music/blog/detail.vue

@@ -6,7 +6,7 @@
       </el-form-item>
       <el-form-item label="主播名称：" prop="podcasterIds">
         <el-select v-model="form.podcasterIds" multiple filterable remote reserve-keyword
-          placeholder="请输入主播名称" :remote-method="getSelect">
+          placeholder="请输入主播名称" :remote-method="getSelect" no-data-text="请新增主播">
           <el-option v-for="item in anchorOptions" :key="item.value" :value="item.value"
             :label="item.label" />
         </el-select>
@@ -44,10 +44,11 @@
       </el-form-item>
       <el-form-item label="关联节目：" prop="adminPodCastProgramDetailResp">
         <el-button type="primary" @click="getDialog">关联节目</el-button>
-        <el-button>解除关联</el-button>
+        <el-button @click="getDelete" :disabled="ids.length > 0 ? false : true">解除关联</el-button>
       </el-form-item>
       <el-form-item style="width: 1000px">
-        <el-table :data="form.adminPodCastProgramDetailResp" height="497">
+        <el-table :data="form.adminPodCastProgramDetailResp" height="497" @selection-change="handleSelect">
+          <el-table-column type="selection" align="center" />
           <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="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
@@ -81,13 +82,16 @@
         </el-form-item>
       </el-form>
       <el-table :data="dialogTableData" v-loading="loading">
-        <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
+        <el-table-column label="ID" prop="id" align="center" />
         <el-table-column label="节目名称" prop="name" align="center" show-overflow-tooltip />
         <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
         <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="getChecked(scope.row)">选择</el-button>
+            <el-button type="text" @click="getChecked(scope.row)"
+              :disabled="form.adminPodCastProgramDetailResp.findIndex(i => i.id === scope.row.id) === -1 ? false : true">
+              选择
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -102,7 +106,7 @@ import Upload from '@/components/Upload/index.vue'
 import { classifyMixin, platformMixin, payTypeMixin, onOrOffMixin } from '@/mixin/index'
 import { selectAnchor } from '@/api/music/anchor'
 import { list } from '@/api/music/program'
-import { detail, submit } from '@/api/music/blog'
+import { detail, submit, relieve } from '@/api/music/blog'
 export default {
   mixins: [classifyMixin, platformMixin, payTypeMixin, onOrOffMixin],
   components: {
@@ -187,12 +191,16 @@ export default {
         adminPodCastProgramDetailResp: [{
           required: true, message: '请关联节目', trigger: 'change'
         }]
-      }
+      },
+      // 解除关联
+      ids: []
     }
   },
   mounted() {
     // 获取资源平台
     this.getPlatform(8)
+    // 分类
+    this.getClassify(8)
     if (this.$route.query.id) {
       this.form.id = this.$route.query.id
       this.disabled = Boolean(this.$route.query.disabled)
@@ -205,6 +213,7 @@ export default {
       detail(this.form.id).then(res => {
         if (res.code === 0) {
           this.form = res.data
+          this.anchorOptions = []
           res.data.adminPrdCasterResp.map(i => {
             this.anchorOptions.push({
               value: i.podcasterId,
@@ -274,11 +283,20 @@ export default {
 
     // 选择
     getChecked(row) {
-      if (this.form.adminPodCastProgramDetailResp.findIndex(i => i.id === row.id) === -1) {
-        this.form.adminPodCastProgramDetailResp.push(row)
-      } else {
-        this.$message.error('您已添加过该节目！')
-      }
+      this.form.adminPodCastProgramDetailResp.push(row)
+    },
+
+    // 解除关联
+    getDelete() {
+      relieve({
+        id: this.form.id,
+        podcastProgramIds: this.ids
+      }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('解除成功！')
+          this.getDetail()
+        }
+      })
     },
 
     // 确定
@@ -286,6 +304,7 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           let title = this.form.id ? '编辑成功！' : '新增成功！'
+          this.form.podcastProgramIds = []
           this.form.adminPodCastProgramDetailResp.map(i => {
             this.form.podcastProgramIds.push(i.id)
           })
@@ -293,14 +312,23 @@ export default {
           submit(this.form).then(res => {
             if (res.code === 0) {
               this.$message.success(`${title}`)
-              this.cancel()
+              if (this.form.id) {
+                this.getDetail()
+              } else {
+                this.cancel()
+              }
             }
           })
         } else {
           return false
         }
       })
+    },
 
+    // 多选
+    handleSelect(e) {
+      this.ids = []
+      e.map(i => this.ids.push(i.id))
     },
 
     // 取消

src/views/music/blog/index.vue

@@ -30,10 +30,13 @@
         <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-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 1)">批量上架</el-button>
+        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 2)">批量下架</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" v-loading="loading">
+    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelect">
+      <el-table-column type="selection" align="center" />
       <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">
@@ -89,12 +92,19 @@ export default {
       // 总数据
       total: 0,
       // 列表
-      tableData: []
+      tableData: [],
+      // 批量上下架
+      obj: {
+        id: '',
+        name: '已选数据'
+      }
     }
   },
   mounted() {
     // 获取资源平台
     this.getPlatform(8)
+    // 获取分类
+    this.getClassify(8)
     this.getList()
   },
   methods: {
@@ -165,6 +175,12 @@ export default {
       }).catch(() => { })
     },
 
+    // 多选
+    handleSelect(e) {
+      this.obj.id = ''
+      e.map((item, index) => this.obj.id += item.id + ((index + 1) < e.length ? ',' : ''))
+    },
+
     // 字典翻译
     chargingFormatter(row) {
       return this.selectDictLabel(this.payTypeOptions, row.charging)