音频管理 音乐专辑

src/views/music/album/detail.vue

@@ -5,8 +5,8 @@
         <el-input v-model="form.name" placeholder="请输入专辑名称" />
       </el-form-item>
       <el-form-item label="专辑介绍" prop="description">
-        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10}" maxlength="100" show-word-limit
-          placeholder="请输入专辑介绍" />
+        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
+          maxlength="100" show-word-limit placeholder="请输入专辑介绍" />
       </el-form-item>
       <el-form-item label="专辑类型：" prop="albumType">
         <el-select v-model="form.albumType" placeholder="请选择专辑类型">
@@ -27,10 +27,10 @@
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.payType !== 1" label="原价：" prop="price">
-        <el-input type="number" v-model="form.price" placeholder="请输入原价" />
+        <el-input v-model.number="form.price" placeholder="请输入原价" />
       </el-form-item>
       <el-form-item v-if="form.payType !== 1" label="折扣价：" prop="discount">
-        <el-input type="number" v-model="form.discount" placeholder="请输入折扣价" />
+        <el-input v-model.number="form.discount" placeholder="请输入折扣价" />
       </el-form-item>
       <el-form-item label="专辑封面：" prop="coverUrl">
         <Upload listType="picture-card" :url="form.coverUrl" @upload="upload($event, 'coverUrl')"
@@ -50,7 +50,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>
@@ -90,14 +90,14 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
-        @pagination="getList" />
+      <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
+        :limit.sync="dialogForm.pageSize" @pagination="getList" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { create, edit, detail } from '@/api/music/menu'
+import { submit, detail } from '@/api/music/menu'
 import { list } from '@/api/music/list'
 import { platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin } from '@/mixin/index'
 import Upload from '@/components/Upload/index.vue'
@@ -118,7 +118,7 @@ export default {
       } else if (!str.test(value)) {
         return callback(new Error('小数点后最多输入两位'))
       } else if (this.form.discount) {
-        Number(value) > Number(this.form.discount) ? this.$refs.form.clearValidate('discount') : callback(new Error('原价必须大于折扣价'))
+        Number(value) > Number(this.form.discount) ? callback() : callback(new Error('原价必须大于折扣价'))
       }
     }
     // 判断折扣价是否小于原价
@@ -127,7 +127,7 @@ export default {
         if (!str.test(value)) {
           return callback(new Error('小数点后最多输入两位'))
         } else if (this.form.price) {
-          Number(value) < Number(this.form.price) ? this.$refs.form.clearValidate('price') : callback(new Error('折扣价必须小于原价'))
+          Number(value) < Number(this.form.price) ? callback() : callback(new Error('折扣价必须小于原价'))
         }
       }
     }
@@ -143,8 +143,6 @@ export default {
       },
       // 添加的歌曲Id
       ids: [],
-      // 音频类型
-      audioType: 15,
       // 校验
       rules: {
         name: [{
@@ -198,6 +196,8 @@ export default {
     }
   },
   mounted() {
+    // 获取资源平台
+    this.getPlatform(15)
     if (this.$route.query.id) {
       this.form.id = this.$route.query.id
       this.disabled = Boolean(this.$route.query.disabled)
@@ -274,27 +274,25 @@ export default {
       }
     },
 
+    // 删除已选歌曲
+    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
           this.form_loading = true
-          if (this.form.id) {
-            edit(this.form).then(res => {
-              if (res.code === 0) {
-                this.$message.success('编辑成功！')
-                this.getDetail()
-              }
-            })
-          } else {
-            create(this.form).then(res => {
-              if (res.code === 0) {
-                this.$message.success('新增成功！')
-                this.cancel()
-              }
-            })
-          }
+          let title = this.form.id ? '编辑成功！' : '新增成功！'
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success(`${title}`)
+              this.cancel()
+            }
+          })
         } else {
           return false
         }

src/views/music/album/index.vue

@@ -33,10 +33,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="ids.length === 0" @click="getChange(ids, 1)">批量上架</el-button>
+        <el-button type="primary" :disabled="ids.length === 0" @click="getChange(ids, 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">
@@ -86,11 +89,13 @@ export default {
       total: 0,
       // 列表
       tableData: [],
-      // 音频类型
-      audioType: 15
+      // 批量上下架
+      ids: ''
     }
   },
   mounted() {
+    // 获取资源平台
+    this.getPlatform(15)
     this.getList()
   },
   methods: {
@@ -135,6 +140,7 @@ export default {
 
     // 上下架
     getChange(row, status) {
+      console.log(row);
       let title = status === 1 ? '上架' : '下架'
       this.$confirm(`是否${title}${row.name}?`, '提示', {
         type: 'warning'
@@ -162,6 +168,12 @@ export default {
       }).catch(() => { })
     },
 
+    // 多选
+    handleSelect(e) {
+      this.ids = ''
+      e.map((item, index) => this.ids += item.id + ((index + 1) < e.length ? ',' : ''))
+    },
+
     // 字典翻译
     platformFormatter(row) {
       return this.selectDictLabel(this.platformOptions, row.platformId)