音频管理 播客专辑

src/views/music/blog/detail.vue

@@ -1,28 +1,24 @@
 <template>
   <div class="app-container">
-    <el-form class="form" label-width="100px" size="small">
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="播客封面：">
-            <Upload listType="picture-card" @upload="getUpload" />
-          </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-input type="textarea" rows="5" 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="请选择付费类型">
@@ -35,162 +31,50 @@
       <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="关联节目：" style="width: 1000px">
-        <el-button type="primary" @click="getPage">关联</el-button>
-        <el-button @click="getDelete">解除关联</el-button>
-        <el-table :data="tableData1" height="229px" :row-key="getRowKey"
-          @selection-change="selectionChangeDelete">
+      <el-form-item label="关联节目：">
+        <el-button type="primary">关联节目</el-button>
+        <el-button>解除关联</el-button>
+      </el-form-item>
+      <el-form-item style="width: 1000px">
+        <el-table>
           <el-table-column type="selection" align="center" />
-          <el-table-column prop="id" label="节目ID" align="center" width="150px" />
-          <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
-          <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
-          <el-table-column prop="status" label="当前状态" align="center" width="100px"
-            :formatter="statusFormatter" />
+          <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>
       </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 :model="programmeForm" inline size="mini">
-        <el-form-item label="节目ID：">
-          <el-input v-model="programmeForm.id" placeholder="请输入节目ID" />
-        </el-form-item>
-        <el-form-item label="节目名称：">
-          <el-input v-model="programmeForm.name" placeholder="请输入节目名称" />
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table :data="programmeTable" ref="programmeTable" v-loading="loading" :row-key="getRowKey"
-        @selection-change="selectionChangeAdd">
-        <el-table-column type="selection" reserve-selection align="center" />
-        <el-table-column prop="id" label="节目ID" align="center" width="150px" />
-        <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
-        <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
-        <el-table-column prop="status" label="当前状态" align="center" width="100px"
-          :formatter="statusFormatter" />
-      </el-table>
-      <pagination v-show="total>0" :total="total" :page.sync="programmeForm.pageNum"
-        :limit.sync="programmeForm.pageSize" @pagination="getPage" />
-    </el-dialog>
+    <div class="form-btn">
+      <el-button>取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
   </div>
 </template>
 
 <script>
-import { getProgrammePage } from '@/api/music/blog'
-import { statusMixin } from '../mixin/index'
-import Upload from "@/components/Upload/index";
+import Upload from '@/components/Upload/index.vue'
 export default {
-  mixins: [statusMixin],
   components: {
-    Upload,
+    Upload
   },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 表单
-      programmeForm: {
-        pageNum: 1,
-        pageSize: 10
-      },
-      // 弹窗
-      dialogVisible: false,
-      // 选择的节目列表
-      tableData1: [],
-      // 解除关联
-      delete_list: [],
-      flag: false,
-      // 节目总列表
-      programmeTable: [],
-      total: 0,
-    };
-  },
-  methods: {
-    // 上传封面
-    getUpload(e){
-      
-    },
-
-    // 关联
-    getPage() {
-      this.loading = true
-      this.dialogVisible = true,
-        getProgrammePage(this.programmeForm).then(res => {
-          if (res.code === 0) {
-            this.programmeTable = res.data.records
-            this.total = res.data.total
-            this.loading = false
-          }
-        })
-    },
-
-    // 多选
-    selectionChangeDelete(e) {
-      this.delete_list = e
-    },
-
-    selectionChangeAdd(e) {
-      if(this.flag) return
-      this.tableData1 = e
-    },
-
-    getRowKey(row) {
-      return row.id;
-    },
-
-    // 解除关联
-    getDelete() {
-      this.flag = true
-      this.delete_list.forEach(i => {
-        this.tableData1.splice(i, 1)
-        this.$refs.programmeTable.toggleRowSelection(i)
-      })
-      this.flag = false
-    },
-
-    // 搜索
-    getSearch() {
-      this.programmeForm.pageNum = 1
-      this.getPage()
-    },
 
-    // 重置
-    getRefresh() {
-      this.programmeForm = {
-        pageNum: 1,
-        pageSize: 10
-      }
-      this.getPage()
-    },
-
-    getCancel() {
-      this.$tab.closeOpenPage("/music/blog");
-    },
-    getSubmit() { },
-
-    // 字典翻译
-    statusFormatter(row) {
-      return this.selectDictLabel(this.statusOptions, row.status)
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.form {
-  width: 600px;
+.el-form {
+  width: 500px;
+}
+
+.form-btn {
+  margin-top: 20px;
 }
 </style>

src/views/music/blog/index.vue

@@ -1,151 +1,77 @@
 <template>
   <div class="app-container">
     <!-- 搜索 -->
-    <el-form inline label-width="100px" size="mini">
+    <el-form inline size="mini">
       <el-form-item label="播客名称：">
-        <el-input v-model="form.name" placeholder="请输入播客名称" />
+        <el-input placeholder="请输入播客名称" />
       </el-form-item>
-      <el-form-item label="播客分类：">
-        <el-select v-model="form.category_id" placeholder="请选择播客分类">
-          <el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id" />
+      <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="请选择资源平台">
+          <el-option />
         </el-select>
       </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 label="播客封面" align="center" width="100px">
-        <template slot-scope="scope">
-          <el-image :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="categoryName" label="播客分类" align="center" />
-      <el-table-column label="主播" align="center" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span v-for="item in scope.row.podcasters" :key="item.id">{{ item.nickname }} </span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="charging" label="付费类型" align="center" :formatter="chargingFormatter" />
-      <el-table-column prop="programCount" label="节目数量" align="center" />
-      <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter" />
+    <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>
-          <el-button v-if="scope.row.status === 1" type="text">上架</el-button>
-          <el-button v-else type="text">下架</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="delete">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <!-- 分页 -->
-    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
-      @pagination="getList" />
   </div>
 </template>
 
 <script>
-import { getPage, getCategories } from '@/api/music/blog'
 export default {
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 列表
-      tableData: [],
-      // 表单
-      form: {
-        pageNum: 1,
-        pageSize: 10
-      },
-      total: 0,
-      // 付费类型
-      chargingOptions: [{
-        value: 1,
-        label: '免费'
-      }, {
-        value: 2,
-        label: '全本购买'
-      }, {
-        value: 3,
-        label: '单集购买'
-      }, {
-        value: 4,
-        label: 'VIP专享'
-      }],
-      // 播客分类
-      categoryOptions: [],
-      // 当前状态
-      statusOptions: [{
-        value: 1,
-        label: '上架'
-      }, {
-        value: 2,
-        label: '下架'
-      }]
-    };
-  },
-  created() {
-    getCategories().then(res => {
-      if (res.code === 0) {
-        this.categoryOptions = res.data
-      }
-    })
-  },
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    // 列表
-    getList() {
-      this.loading = true
-      getPage(this.form).then(res => {
-        if (res.code === 0) {
-          this.tableData = res.data.records
-          this.total = res.data.total
-          this.loading = false
-        }
-      })
-    },
-
-    // 搜索
-    getSearch() {
-      this.form.pageNum = 1
-      this.getList()
-    },
-
-    // 重置
-    getRefresh() {
-      this.form = {
-        pageNum: 1,
-        pageSize: 10
-      }
-      this.getList()
-    },
-
-    // 新增 / 查看 / 编辑
-    getDetail(id) {
-      this.$router.push({
-        path: `/music/blog/detail`,
-        query: {
-          id: id,
-        },
-      });
-    },
 
-    // 字典翻译
-    chargingFormatter(row) {
-      return this.selectDictLabel(this.chargingOptions, row.charging)
-    },
-    statusFormatter(row) {
-      return this.selectDictLabel(this.statusOptions, row.status)
     }
   },
-};
-</script>
+  methods:{
+    getDetail() {
+      this.$router.push({
+        path: `/music/blog/detail`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>