|
|
@@ -1,124 +0,0 @@
|
|
|
-<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)
|
|
|
- },
|
|
|
- // 取消
|
|
|
- cancel(){
|
|
|
- this.$tab.closeOpenPage("/music/playlist");
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.form {
|
|
|
- width: 500px;
|
|
|
-}
|
|
|
-</style>
|
