音频管理 节目

src/views/music/program/detail.vue

@@ -1,33 +1,40 @@
 <template>
   <div class="app-container">
-    <el-form label-width="100px" size="small">
+    <el-form label-width="100px">
       <el-form-item label="节目名称：">
-        <el-input></el-input>
+        <el-input placeholder="请输入节目名称" />
       </el-form-item>
-      <el-form-item label="播客专辑：">
-        <el-input disabled></el-input>
+      <el-form-item label="节目介绍：">
+        <el-input placeholder="请输入节目介绍" />
       </el-form-item>
-      <el-form-item label="资源平台：">
-        <el-input disabled></el-input>
+      <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 placeholder="请选择资源平台">
+          <el-option />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：">
-        <el-select>
-          <el-option></el-option>
+        <el-select placeholder="请选择付费类型">
+          <el-option />
         </el-select>
       </el-form-item>
       <el-form-item label="原价：">
-        <el-input></el-input>
+        <el-input placeholder="请输入原价" />
       </el-form-item>
       <el-form-item label="折扣价：">
-        <el-input></el-input>
+        <el-input placeholder="请输入折扣价" />
+      </el-form-item>
+      <el-form-item label="节目封面：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+      <el-form-item label="音频文件：">
+        <Upload />
+        <div style="color:#909399">单个上传音频文件不超过500MB</div>
       </el-form-item>
       <el-form-item>
-        <el-button @click="getCancel">取消</el-button>
+        <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="getSubmit">提交</el-button>
       </el-form-item>
     </el-form>
@@ -35,16 +42,18 @@
 </template>
 
 <script>
+import Upload from "@/components/Upload/index";
 export default {
+  components: {
+    Upload,
+  },
   data() {
     return {};
   },
   methods: {
-    getCancel() {
+    cancel() {
       this.$tab.closeOpenPage("/music/program");
-      this.$refs.form.resetFields();
     },
-    getSubmit() {},
   },
 };
 </script>

src/views/music/program/index.vue

@@ -1,52 +1,51 @@
 <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 placeholder="请选择资源平台">
-          <el-option></el-option>
+          <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="当前状态：">
-        <el-select 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 placeholder="请选择标签分类">
+      <el-form-item label="当前状态：">
+        <el-select placeholder="请选择当前状态">
           <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>
         <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" 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="tableDate">
-      <el-table-column prop="id" label="节目ID" align="center" width="80px"></el-table-column>
-      <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="blog" label="播客专辑" align="center" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="title" label="标签分类" align="center"></el-table-column>
-      <el-table-column prop="pay" label="付费类型" align="center" width="80px"></el-table-column>
-      <el-table-column prop="origin" label="原价" align="center" width="80px"></el-table-column>
-      <el-table-column prop="discount" label="折扣价" align="center" width="80px"></el-table-column>
-      <el-table-column prop="plat" label="资源平台" align="center"></el-table-column>
-      <el-table-column prop="status" label="当前状态" align="center" width="80px"></el-table-column>
-      <el-table-column prop="update" label="更新时间" align="center" show-overflow-tooltip></el-table-column>
+      <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 label="付费类型" align="center" />
+      <el-table-column label="原价" align="center" width="80px"></el-table-column>
+      <el-table-column label="折扣价" align="center" width="80px"></el-table-column>
+      <el-table-column label="资源平台" align="center"></el-table-column>
+      <el-table-column label="当前状态" align="center" width="80px"></el-table-column>
+      <el-table-column label="更新时间" align="center" show-overflow-tooltip></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-button type="text">上架</el-button>
-          <!-- <el-button type="text">下架</el-button> -->
+          <el-button type="text">下架</el-button>
           <el-button type="text">试听</el-button>
         </template>
       </el-table-column>
@@ -58,18 +57,7 @@
 export default {
   data() {
     return {
-        tableDate:[{
-            id: '1',
-            name: '测试',
-            blog: '测试',
-            title: '测试',
-            pay: '免费',
-            origin: '100',
-            discount: '70',
-            plat: 'QQ音乐',
-            status: '下架',
-            update: '2022/3/16 15:47:00'
-        }]
+      tableDate: []
     };
   },
   methods: {