音频管理 歌单 添加批量上下架功能

src/views/music/menu/detail.vue

@@ -39,7 +39,7 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <Audio :src="scope.row.progaramUrl" />
-          <el-button type="delete" :disabled="disabled">删除</el-button>
+          <el-button type="delete" :disabled="disabled" @click="getDelete(scope.$index)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -75,7 +75,10 @@
         <el-table-column label="播放时长" prop="playTime" align="center" />
         <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.programList.findIndex(i => i.id === scope.row.id) === -1 ? false : true">
+              选择
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -108,8 +111,6 @@ export default {
         status: 1,
         type: 2
       },
-      // 添加的歌曲Id
-      ids: [],
       // 校验
       rules: {
         name: [{
@@ -164,9 +165,6 @@ export default {
       detail(this.form.id).then(res => {
         if (res.code === 0) {
           this.form = res.data
-          res.data.programList.map(i => {
-            this.ids.push(i.id)
-          })
           this.form_loading = false
         }
       })
@@ -211,33 +209,41 @@ export default {
 
     // 选择
     getChecked(row) {
-      if (this.form.programList.findIndex(i => i.id === row.id) === -1) {
-        this.form.programList.push({
-          id: row.id,
-          name: row.name,
-          singerName: row.singerName,
-          playTime: row.playTime,
-          status: row.status,
-          progaramUrl: row.progaramUrl
-        })
-        this.ids.push(row.id)
-        this.$message.success('添加成功！')
-      } else {
-        this.$message.error('您已添加过该歌曲！')
-      }
+      this.form.programList.push({
+        id: row.id,
+        name: row.name,
+        singerName: row.singerName,
+        playTime: row.playTime,
+        status: row.status,
+        progaramUrl: row.progaramUrl
+      })
+      this.$message.success('添加成功！')
+    },
+
+    // 删除已选歌曲
+    getDelete(index) {
+      this.form.programList.splice(index, 1)
     },
 
     // 确定
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
+          let arr = []
+          this.form.programList.map(i => {
+            arr.push(i.id)
+          })
+          this.form.programList = arr
           this.form_loading = true
-          this.form.programList = this.ids
           let title = this.form.id ? '编辑成功！' : '新增成功！'
           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 {

src/views/music/menu/index.vue

@@ -21,10 +21,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">
+    <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">
@@ -77,6 +80,11 @@ export default {
       total: 0,
       // 列表
       tableData: [],
+      // 批量上下架
+      obj: {
+        id: '',
+        name: '已选数据'
+      }
     };
   },
   mounted() {
@@ -153,6 +161,12 @@ export default {
       }).catch(() => { })
     },
 
+    // 多选
+    handleSelect(e) {
+      this.obj.id = ''
+      e.map((item, index) => this.obj.id += item.id + ((index + 1) < e.length ? ',' : ''))
+    },
+
     // 字典翻译
     platformFormatter(row) {
       return this.selectDictLabel(this.platformOptions, row.platformId)