音频管理 音乐专辑 添加批量上下架

src/views/music/album/detail.vue

@@ -86,7 +86,9 @@
         <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>
@@ -141,8 +143,6 @@ export default {
         status: 1,
         type: 1
       },
-      // 添加的歌曲Id
-      ids: [],
       // 校验
       rules: {
         name: [{
@@ -190,9 +190,7 @@ export default {
       // 弹窗列表
       tableData: [],
       // 只读
-      disabled: false,
-      // 专辑类型
-
+      disabled: false
     }
   },
   mounted() {
@@ -211,9 +209,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
         }
       })
@@ -258,39 +253,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)
-      this.ids.splice(index, 1)
     },
 
     // 确定
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.form.programList = this.ids
+          let arr = []
+          this.form.programList.map(i => {
+            arr.push(i.id)
+          })
+          this.form.programList = arr
           this.form_loading = true
           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.cancel()
+              } else {
+                this.getDetail()
+              }
             }
           })
         } else {

src/views/music/album/index.vue

@@ -33,8 +33,8 @@
         <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="ids.length === 0" @click="getChange(ids, 1)">批量上架</el-button>
-        <el-button type="primary" :disabled="ids.length === 0" @click="getChange(ids, 2)">批量下架</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>
     <!-- 列表 -->
@@ -47,12 +47,16 @@
           <el-image v-if="scope.row.coverUrl" :src="scope.row.coverUrl" />
         </template>
       </el-table-column>
-      <el-table-column label="专辑类型" prop="avatarNickName" align="center" show-overflow-tooltip />
-      <el-table-column label="付费类型" align="center" width="100px" />
+      <el-table-column label="专辑类型" prop="albumType" align="center" :formatter="typeFormatter" show-overflow-tooltip />
+      <el-table-column label="付费类型" prop="payType" align="center" :formatter="payTypeFormatter" />
       <el-table-column label="歌曲数量" prop="programCount" align="center" />
       <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
       <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
-      <el-table-column label="更新时间" prop="" align="center" />
+      <el-table-column label="更新时间" prop="updateTime" align="center">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
@@ -90,7 +94,10 @@ export default {
       // 列表
       tableData: [],
       // 批量上下架
-      ids: ''
+      obj: {
+        id: '',
+        name: '已选数据'
+      }
     }
   },
   mounted() {
@@ -170,8 +177,8 @@ export default {
 
     // 多选
     handleSelect(e) {
-      this.ids = ''
-      e.map((item, index) => this.ids += item.id + ((index + 1) < e.length ? ',' : ''))
+      this.obj.id = ''
+      e.map((item, index) => this.obj.id += item.id + ((index + 1) < e.length ? ',' : ''))
     },
 
     // 字典翻译
@@ -181,6 +188,14 @@ export default {
 
     statusFormatter(row) {
       return this.selectDictLabel(this.onOrOffOptions, row.status)
+    },
+
+    typeFormatter(row) {
+      return this.selectDictLabel(this.albumTypeOptions, row.albumType)
+    },
+
+    payTypeFormatter(row) {
+      return this.selectDictLabel(this.payTypeOptions, row.payType)
     }
   },
 };