音频管理 音乐专辑

src/views/music/album/detail.vue

@@ -1,28 +1,21 @@
 <template>
   <div class="app-container">
-    <el-form label-width="100px" size="small">
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="音乐封面：">
-            <imageUpload />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="音乐名称：">
-            <el-input placeholder="请输入音乐名称" />
-          </el-form-item>
-          <el-form-item label="音乐类型：">
-            <el-select placeholder="请选择音乐类型">
-              <el-option />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="资源平台：">
-            <el-input disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="音乐简介：">
-        <el-input type="textarea" rows="4" placeholder="请输入音乐简介" />
+    <el-form label-width="100px">
+      <el-form-item label="专辑名称：">
+        <el-input placeholder="请输入专辑名称" />
+      </el-form-item>
+      <el-form-item label="专辑介绍：">
+        <el-input placeholder="请输入专辑介绍" />
+      </el-form-item>
+      <el-form-item label="专辑类型：">
+        <el-select placeholder="请选择传记类型">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option />
+        </el-select>
       </el-form-item>
       <el-form-item label="付费类型：">
         <el-select placeholder="请选择付费类型">
@@ -35,90 +28,61 @@
       <el-form-item label="折扣价：">
         <el-input placeholder="请输入折扣价" />
       </el-form-item>
-      <el-form-item label="标签分类：">
-        <el-select placeholder="请选择标签分类">
-          <el-option />
-        </el-select>
+      <el-form-item label="专辑封面：">
+        <Upload listType="picture-card" />
       </el-form-item>
-      <el-form-item label="关联歌曲：">
-        <el-button type="primary" @click="dialogVisible = true">关联</el-button>
-        <el-button disabled>解除关联</el-button>
-        <el-table>
-          <el-table-column label="ID" align="center"></el-table-column>
-          <el-table-column label="歌曲名称" align="center"></el-table-column>
-          <el-table-column label="当前状态" align="center"></el-table-column>
+      <el-form-item label="歌曲列表：" style="width: 1000px">
+        <el-button type="primary" icon="el-icon-plus">添加歌曲</el-button>
+        <!-- 列表 -->
+        <el-table :data="tableData">
+          <el-table-column type="index" label="序号" align="center" />
+          <el-table-column label="ID" align="center" />
+          <el-table-column label="歌曲名称" align="center" />
+          <el-table-column label="歌手名称" align="center" />
+          <el-table-column label="播放时长" align="center" />
+          <el-table-column label="当前状态" align="center" />
           <el-table-column label="操作" align="center">
             <template>
-              <el-button>解除关联</el-button>
+              <el-button type="text">试听</el-button>
+              <el-button type="delete">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
-      <el-form-item>
-        <el-button @click="getCancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">提交</el-button>
-      </el-form-item>
     </el-form>
-    <!-- 关联弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="关联歌曲" width="1000px">
-      <el-form inline size="mini">
-        <el-form-item label="ID：">
-          <el-input placeholder="请输入节目ID" />
-        </el-form-item>
-        <el-form-item label="歌曲名称：">
-          <el-input placeholder="请输入节目名称" />
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="el-icon-search" type="primary">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table>
-        <el-table-column type="selection" />
-        <el-table-column label="ID" align="center" />
-        <el-table-column label="歌曲名称" align="center" />
-        <el-table-column label="当前状态" align="center" />
-      </el-table>
-      <!-- <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="form.pageNum"
-        :limit.sync="form.pageSize"
-        @pagination="getList"
-      />-->
-      <div slot="footer">
-        <el-button>取消</el-button>
-        <el-button type="primary">关联</el-button>
-      </div>
-    </el-dialog>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
   </div>
 </template>
 
 <script>
-import imageUpload from "@/components/Upload/index";
+import Upload from "@/components/Upload/index";
 export default {
   components: {
-    imageUpload,
+    Upload
   },
   data() {
     return {
-      // 弹窗
-      dialogVisible: false,
+      tableData: []
     };
   },
   methods: {
     // 取消
-    getCancel() {
+    cancel() {
       this.$tab.closeOpenPage("/music/album");
-      this.$refs.form.resetFields();
     },
-    // 提交
-    getSubmit() {},
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .el-form {
-  width: 600px;
+  width: 500px;
+}
+
+.form-btn {
+  margin-top: 20px;
 }
 </style>

src/views/music/album/index.vue

@@ -1,62 +1,57 @@
 <template>
   <div class="app-container">
-    <!-- 搜索框 -->
-    <el-form inline label-width="100px" size="mini">
+    <!-- 搜索 -->
+    <el-form inline size="mini">
+      <el-form-item label="专辑名称：">
+        <el-input placeholder="请输入专辑名称" />
+      </el-form-item>
       <el-form-item label="资源平台：">
-        <el-select>
+        <el-select placeholder="请选择资源平台">
           <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="音乐类型：">
-        <el-select>
+      <el-form-item label="专辑类型：">
+        <el-select placeholder="请选择专辑类型">
           <el-option />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：">
-        <el-select>
-          <el-option />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="上架状态：">
-        <el-select>
+        <el-select placeholder="请选择付费类型">
           <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="标签分类：">
-        <el-select>
+      <el-form-item label="当前状态：">
+        <el-select placeholder="请选择当前状态">
           <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="音乐ID：">
-        <el-input />
-      </el-form-item>
-      <el-form-item label="音乐名称：">
-        <el-input />
-      </el-form-item>
       <el-form-item>
-        <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" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
-        <el-button type="primary" icon="el-icon-plus" plain>快捷新增(上传压缩包)</el-button>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
+        <el-button type="primary">批量上架</el-button>
+        <el-button type="primary">批量下架</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData">
-      <el-table-column prop="id" label="音乐ID" align="center" />
-      <el-table-column prop="name" label="音乐名称" align="center" />
-      <el-table-column prop="img" label="音乐封面" align="center"></el-table-column>
-      <el-table-column prop="musicType" label="音乐类型" align="center"></el-table-column>
-      <el-table-column prop="payType" label="付费类型" align="center"></el-table-column>
-      <el-table-column prop="titleType" label="标签分类" align="center"></el-table-column>
-      <el-table-column prop="number" label="歌曲数量" align="center"></el-table-column>
-      <el-table-column prop="status" label="上架状态" align="center"></el-table-column>
-      <el-table-column prop="update" label="更新时间" align="center"></el-table-column>
+    <el-table>
+      <el-table-column type="selection" align="center" />
+      <el-table-column label="ID" align="center" />
+      <el-table-column label="专辑名称" align="center" />
+      <el-table-column label="专辑封面" align="center"></el-table-column>
+      <el-table-column label="专辑类型" align="center" />
+      <el-table-column label="付费类型" align="center" />
+      <el-table-column label="歌曲数量" align="center" />
+      <el-table-column label="当前状态" align="center" />
+      <el-table-column label="资源平台" align="center" />
+      <el-table-column label="更新时间" align="center" />
       <el-table-column label="操作" align="center">
-        <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id)">查看</el-button>
-          <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
+        <template>
+          <el-button type="text">查看</el-button>
+          <el-button type="text">编辑</el-button>
           <el-button type="text">上架</el-button>
-          <!-- <el-button type="text">下架</el-button> -->
+          <el-button type="text">下架</el-button>
+          <el-button type="delete">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -67,19 +62,7 @@
 export default {
   data() {
     return {
-      tableData: [
-        {
-          id: 1,
-          name: "测试",
-          img: "",
-          musicType: "测试",
-          payType: "免费",
-          titleType: "测试",
-          number: "2",
-          status: "下架",
-          update: "2022/3/16 11:33:00",
-        },
-      ],
+
     };
   },
   methods: {
@@ -89,13 +72,9 @@ export default {
         path: `/music/album/detail`,
         query: {
           id: id,
-        },
-      });
-    },
-    // 搜索
-    getSearch() {},
-    // 重置
-    getRefresh() {},
-  },
-};
+        }
+      })
+    }
+  }
+}
 </script>