音频管理 场景歌单

src/views/music/playlist/detail.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="app-container">
+    <el-form class="form" label-width="120px">
+      <el-form-item label="封面图：(750*1334)">
+        <Upload listType="picture-card" />
+      </el-form-item>
+      <el-form-item label="场景模式：">
+        <el-input disabled />
+      </el-form-item>
+      <el-form-item label="歌曲/节目列表：" style="width: 1000px">
+        <el-button type="primary" @click="dialogVisible_program = true" style="margin-right: 10px">关联节目</el-button>
+        <Upload multiple title="上传歌曲" />
+        <el-tabs type="card" v-model="tabActive" addable closable @tab-add="dialogVisible = true"
+          @tab-remove="getRemove">
+          <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.label" :name="item.value">
+            <el-table :data="tableData" height="342">
+              <el-table-column label="序号" type="index" align="center" />
+              <el-table-column label="歌曲/节目ID" align="center" />
+              <el-table-column label="名称" align="center" />
+              <el-table-column label="操作" align="center">
+                <template>
+                  <el-button type="delete">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+        <!-- <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+          @pagination="getPage" /> -->
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 增加歌单 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
+      <el-form label-width="100px">
+        <el-form-item label="分页名称：">
+          <el-input v-model="name" placeholder="请输入分页名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="getAdd">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 关联节目 -->
+    <el-dialog title="关联节目" :visible.sync="dialogVisible_program">
+      <el-table>
+        <el-table-column label="节目ID" align="center" />
+        <el-table-column label="节目名称" align="center" />
+        <el-table-column label="操作" align="center">
+          <template>
+            <el-button type="text">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Upload from '@/components/Upload/index'
+export default {
+  components: {
+    Upload
+  },
+  data() {
+    return {
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 歌曲/节目列表分页
+      tabList: [{
+        id: 0,
+        label: '默认',
+        value: '1'
+      }],
+      tabActive: '1',
+      // 列表
+      tableData:[],
+      total: 0,
+      // 弹窗
+      dialogVisible: false,
+      dialogVisible_program: false,
+      // 分页名称
+      name: ''
+    }
+  },
+  mounted(){
+
+  },
+  methods: {
+    // 添加分页
+    getAdd() {
+      this.tabList.push({
+        id: `${this.tabList.length}`,
+        label: this.name,
+        value: `${this.tabList.length + 1}`
+      })
+      this.dialogVisible = false
+    },
+    // 删除分页
+    getRemove(e) {
+      this.tabList.splice(e - 1, 1)
+      console.log(this.tabList);
+    },
+    // 取消
+    cancel(){
+      this.$tab.closeOpenPage("/music/playlist");
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.form {
+  width: 500px;
+}
+
+.el-tabs__nav .el-tabs__item:nth-child(1) span {
+  display: none;
+}
+</style>

src/views/music/playlist/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <el-table :data="tableData">
+      <el-table-column label="场景ID" align="center" />
+      <el-table-column label="场景模式" align="center" />
+      <el-table-column label="场景封面" align="center">
+        <template>
+          <el-image />
+        </template>
+      </el-table-column>
+      <el-table-column label="歌曲、节目数量" align="center" />
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button type="text">查看</el-button>
+          <el-button type="text">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData:[]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>