音频管理 歌曲

src/views/music/list/detail.vue

@@ -1,88 +1,53 @@
 <template>
   <div class="app-container">
-    <el-form model="form" :rules="rules" 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 prop="name" label="歌曲名称：">
-            <el-input v-model="form.name" />
-          </el-form-item>
-          <el-form-item label="歌手名称：">
-            <el-select>
-              <el-option></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="播放时长：">
-            <el-input></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="资源平台：">
-        <el-input disabled />
+    <el-form label-width="100px">
+      <el-form-item label="歌曲名称：">
+        <el-input placeholder="请输入歌曲名称" />
       </el-form-item>
-      <el-form-item label="标签分类：">
-        <el-select>
-          <el-option></el-option>
+      <el-form-item label="歌手名称：">
+        <el-select multiple filterable placeholder="请输入歌手名称">
+          <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="所属专辑：">
-        <!-- 必填 -->
-        <el-select filterable placeholder="请选择所属专辑">
-          <el-option></el-option>
+      <el-form-item label="歌曲语言：">
+        <el-select placeholder="请选择歌曲语言">
+          <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="所属歌单：">
-        <!-- 选填 -->
-        <el-select v-model="value" multiple filterable placeholder="请选择所属歌单">
-          <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button @click="getCancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">提交</el-button>
+      <el-form-item label="音频封面：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+      <el-form-item label="音频文件：">
+        <Upload />
+        <div style="color:#909399">单个上传音频文件不超过100MB</div>
       </el-form-item>
     </el-form>
+    <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 {
-      // 歌单
-      options:[{
-        value: 1,
-        label: '每日精选'
-      },{
-        value: 2,
-        label: '昨日精选'
-      }],
-      value: [],
-      // 表单
-      form: {},
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入歌曲名称",
-            trigger: "blur",
-          },
-        ],
-      },
+
     };
   },
   methods: {
-    getCancel() {
+    cancel() {
       this.$tab.closeOpenPage("/music/musicList");
-      this.$refs.form.resetFields();
     },
   },
 };
@@ -90,6 +55,6 @@ export default {
 
 <style lang="scss" scoped>
 .el-form {
-  width: 600px;
+  width: 500px;
 }
 </style>

src/views/music/list/index.vue

@@ -1,53 +1,50 @@
 <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-input placeholder="请输入歌手名称" />
+      </el-form-item>
       <el-form-item label="资源平台：">
         <el-select placeholder="请选择资源平台">
-          <el-option></el-option>
+          <el-option />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select placeholder="请选择当前状态">
-          <el-option></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="标签分类：">
-        <el-select placeholder="请选择标签分类">
-          <el-option></el-option>
+          <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="歌曲ID：">
-        <el-input placeholder="请输入歌曲ID"></el-input>
-      </el-form-item>
-      <el-form-item label="歌曲名称：">
-        <el-input placeholder="请输入歌曲名称"></el-input>
-      </el-form-item>
-      <el-form-item label="歌手名称：">
-        <el-input placeholder="请输入歌手名称"></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-upload2" 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" icon="el-icon-upload2">批量上传</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>
-      <el-table-column prop="name" label="歌曲名称" align="center"></el-table-column>
-      <el-table-column prop="belong" label="所属音乐" align="center"></el-table-column>
-      <el-table-column prop="titleType" label="标签分类" align="center"></el-table-column>
-      <el-table-column prop="singer" label="歌手名称" align="center"></el-table-column>
-      <el-table-column prop="playDate" 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-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>
+    <el-table>
+      <el-table-column type="selection" align="center" />
+      <el-table-column label="ID"></el-table-column>
+      <el-table-column label="歌曲名称"></el-table-column>
+      <el-table-column label="歌手名称"></el-table-column>
+      <el-table-column label="音频封面"></el-table-column>
+      <el-table-column label="播放时长"></el-table-column>
+      <el-table-column label="当前状态"></el-table-column>
+      <el-table-column label="更新时间"></el-table-column>
+      <el-table-column label="操作">
+        <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>
+          <el-button type="text">试听</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -58,16 +55,7 @@
 export default {
   data() {
     return {
-      tableData:[{
-        id: 1,
-        name: '测试',
-        belong: '测试',
-        titleType: '测试',
-        singer: '周杰伦',
-        playDate: '3分40秒',
-        status: '下架',
-        update: '2022/3/16 14:12:00'
-      }]
+
     };
   },
   methods: {