新增频道管理 和 音频管理

src/api/device/function.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 查询权限列表
+export function functionList(query) {
+  return request({
+    url: `/device/manage/function/list`,
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增权限
+export function functionAdd(data) {
+  return request({
+    url: `/device/manage/function/add`,
+    method: 'post',
+    data: data
+  })
+}
+
+// 编辑权限
+export function functionEdit(data) {
+  return request({
+    url: `/device/manage/function/edit`,
+    method: 'post',
+    data: data
+  })
+}

src/api/device/list.js

@@ -51,11 +51,3 @@ export function modeList() {
     method: 'get'
   })
 }
-
-// 查询权限列表
-export function functionList() {
-  return request({
-    url: `/device/manage/function/list`,
-    method: 'get'
-  })
-}

src/common/main.scss

@@ -18,11 +18,17 @@
 .el-button--delete.is-active,
 .el-button--delete:active,
 .el-button--delete:focus,
-.el-button--delete:hover {
+.el-button--delete:hover{
   background: none;
   color: #f56c6c;
 }
 
+.el-button.is-disabled, 
+.el-button.is-disabled:hover, 
+.el-button.is-disabled:focus{
+  background: none;
+}
+
 /* 分页透明样式 */ 
 .el-pagination{
   text-align: center;
@@ -77,12 +83,4 @@
   width: 178px !important;
   height: 178px;
   display: block;
-}
-
-/* 详情页表单按钮 */
-.form-btn{
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  padding-left: 100px;
 }

src/router/index.js

@@ -30,220 +30,271 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [{
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [{
-      path: '/redirect/:path(.*)',
-      component: () => import('@/views/redirect')
-    }]
-  },
-  {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
-  },
-  {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
-  },
-  {
-    path: '/404',
-    component: () => import('@/views/error/404'),
-    hidden: true
-  },
-  {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
-  },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [{
-      path: 'index',
-      component: () => import('@/views/index'),
-      name: 'Index',
-      meta: {
-        title: '首页',
-        icon: 'dashboard',
-        affix: true
-      }
-    }]
-  },
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [{
-      path: 'profile',
-      component: () => import('@/views/system/user/profile/index'),
-      name: 'Profile',
-      meta: {
-        title: '个人中心',
-        icon: 'user'
-      }
-    }]
-  }
-]
+  path: '/redirect',
+  component: Layout,
+  hidden: true,
+  children: [{
+    path: '/redirect/:path(.*)',
+    component: () => import('@/views/redirect')
+  }]
+},
+{
+  path: '/login',
+  component: () => import('@/views/login'),
+  hidden: true
+},
+{
+  path: '/register',
+  component: () => import('@/views/register'),
+  hidden: true
+},
+{
+  path: '/404',
+  component: () => import('@/views/error/404'),
+  hidden: true
+},
+{
+  path: '/401',
+  component: () => import('@/views/error/401'),
+  hidden: true
+},
+{
+  path: '',
+  component: Layout,
+  redirect: 'index',
+  children: [{
+    path: 'index',
+    component: () => import('@/views/index'),
+    name: 'Index',
+    meta: {
+      title: '首页',
+      icon: 'dashboard',
+      affix: true
+    }
+  }]
+},
+{
+  path: '/user',
+  component: Layout,
+  hidden: true,
+  redirect: 'noredirect',
+  children: [{
+    path: 'profile',
+    component: () => import('@/views/system/user/profile/index'),
+    name: 'Profile',
+    meta: {
+      title: '个人中心',
+      icon: 'user'
+    }
+  }]
+}]
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [{
-    path: '/system/user-auth',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:user:edit'],
-    children: [{
-      path: 'role/:userId(\\d+)',
-      component: () => import('@/views/system/user/authRole'),
-      name: 'AuthRole',
-      meta: {
-        title: '分配角色',
-        activeMenu: '/system/user'
-      }
-    }]
-  },
-  {
-    path: '/system/role-auth',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:role:edit'],
-    children: [{
-      path: 'user/:roleId(\\d+)',
-      component: () => import('@/views/system/role/authUser'),
-      name: 'AuthUser',
-      meta: {
-        title: '分配用户',
-        activeMenu: '/system/role'
-      }
-    }]
-  },
-  {
-    path: '/system/dict-data',
-    component: Layout,
-    hidden: true,
-    permissions: ['system:dict:list'],
-    children: [{
-      path: 'index/:dictId(\\d+)',
-      component: () => import('@/views/system/dict/data'),
-      name: 'Data',
-      meta: {
-        title: '字典数据',
-        activeMenu: '/system/dict'
-      }
-    }]
-  },
-  {
-    path: '/monitor/job-log',
-    component: Layout,
-    hidden: true,
-    permissions: ['monitor:job:list'],
-    children: [{
-      path: 'index',
-      component: () => import('@/views/monitor/job/log'),
-      name: 'JobLog',
-      meta: {
-        title: '调度日志',
-        activeMenu: '/monitor/job'
-      }
-    }]
-  },
-  {
-    path: '/tool/gen-edit',
-    component: Layout,
-    hidden: true,
-    permissions: ['tool:gen:edit'],
-    children: [{
-      path: 'index/:tableId(\\d+)',
-      component: () => import('@/views/tool/gen/editTable'),
-      name: 'GenEdit',
-      meta: {
-        title: '修改生成配置',
-        activeMenu: '/tool/gen'
-      }
-    }]
-  },
-  {
-    path: '/content',
-    component: Layout,
-    hidden: true,
-    permissions: ['content:banner:list'],
-    children: [{
-      path: 'banner/:id(\\d+)',
-      component: () => import('@/views/content/banner/detail'),
-      name: 'detail',
-      meta: {
-        title: '详情页',
-        activeMenu: '/content/banner'
-      }
-    }]
-  },
-  // 设备管理
-  // 设备初始化
-  {
-    path: '/device',
-    component: Layout,
-    hidden: true,
-    permissions: ['device:init:list'],
-    children: [{
-      path: 'init/detail',
-      component: () => import('@/views/device/init/detail'),
-      name: 'detail',
-      meta: {
-        title: '详情页',
-        activeMenu: '/device/init'
-      }
-    }]
-  },
-  { // 设备类型
-    path: '/device',
-    component: Layout,
-    hidden: true,
-    permissions: ['device:list:list'],
-    children: [{
-      path: 'list/detail',
-      component: () => import('@/views/device/list/detail'),
-      name: 'detail',
-      meta: {
-        title: '详情页',
-        activeMenu: '/device/list'
-      }
-    }]
-  },
-  { // 设备升级
-    path: '/device',
-    component: Layout,
-    hidden: true,
-    permissions: ['device:version:list'],
-    children: [{
-      path: 'version/detail',
-      component: () => import('@/views/device/version/detail'),
-      name: 'detail',
-      meta: {
-        title: '详情页',
-        activeMenu: '/device/version'
-      }
-    }]
-  },
-  { // 设备页面
-    path: '/device',
-    component: Layout,
-    hidden: true,
-    permissions: ['device:pages:list'],
-    children: [{
-      path: 'pages/detail',
-      component: () => import('@/views/device/pages/detail'),
-      name: 'detail',
-      meta: {
-        title: '详情页',
-        activeMenu: '/device/pages'
-      }
-    }]
-  },
-]
+  path: '/system/user-auth',
+  component: Layout,
+  hidden: true,
+  permissions: ['system:user:edit'],
+  children: [{
+    path: 'role/:userId(\\d+)',
+    component: () => import('@/views/system/user/authRole'),
+    name: 'AuthRole',
+    meta: {
+      title: '分配角色',
+      activeMenu: '/system/user'
+    }
+  }]
+},
+{
+  path: '/system/role-auth',
+  component: Layout,
+  hidden: true,
+  permissions: ['system:role:edit'],
+  children: [{
+    path: 'user/:roleId(\\d+)',
+    component: () => import('@/views/system/role/authUser'),
+    name: 'AuthUser',
+    meta: {
+      title: '分配用户',
+      activeMenu: '/system/role'
+    }
+  }]
+},
+{
+  path: '/system/dict-data',
+  component: Layout,
+  hidden: true,
+  permissions: ['system:dict:list'],
+  children: [{
+    path: 'index/:dictId(\\d+)',
+    component: () => import('@/views/system/dict/data'),
+    name: 'Data',
+    meta: {
+      title: '字典数据',
+      activeMenu: '/system/dict'
+    }
+  }]
+},
+{
+  path: '/monitor/job-log',
+  component: Layout,
+  hidden: true,
+  permissions: ['monitor:job:list'],
+  children: [{
+    path: 'index',
+    component: () => import('@/views/monitor/job/log'),
+    name: 'JobLog',
+    meta: {
+      title: '调度日志',
+      activeMenu: '/monitor/job'
+    }
+  }]
+},
+{
+  path: '/tool/gen-edit',
+  component: Layout,
+  hidden: true,
+  permissions: ['tool:gen:edit'],
+  children: [{
+    path: 'index/:tableId(\\d+)',
+    component: () => import('@/views/tool/gen/editTable'),
+    name: 'GenEdit',
+    meta: {
+      title: '修改生成配置',
+      activeMenu: '/tool/gen'
+    }
+  }]
+},
+{
+  path: '/content',
+  component: Layout,
+  hidden: true,
+  permissions: ['content:banner:list'],
+  children: [{
+    path: 'banner/:id(\\d+)',
+    component: () => import('@/views/content/banner/detail'),
+    name: 'detail',
+    meta: {
+      title: '详情页',
+      activeMenu: '/content/banner'
+    }
+  }]
+},
+// 设备管理
+// 设备类型
+{
+  path: '/device',
+  component: Layout,
+  hidden: true,
+  permissions: ['device:list:list'],
+  children: [{
+    path: 'list/detail',
+    component: () => import('@/views/device/list/detail'),
+    name: 'detail',
+    meta: {
+      title: '详情页',
+      activeMenu: '/device/list'
+    }
+  }]
+},
+// 音频管理
+// 音乐专辑
+{
+  path: '/music',
+  component: Layout,
+  hidden: true,
+  permissions: ['music:album:list'],
+  children: [{
+    path: 'album/detail',
+    component: () => import('@/views/music/album/detail'),
+    name: 'detail',
+    meta: {
+      title: '详情页',
+      activeMenu: '/music/album'
+    }
+  }]
+},
+// 歌曲列表
+{
+  path: '/music',
+  component: Layout,
+  hidden: true,
+  permissions: ['music:list:list'],
+  children: [{
+    path: 'list/detail',
+    component: () => import('@/views/music/list/detail'),
+    name: 'detail',
+    meta: {
+      title: `详情页`,
+      activeMenu: '/music/list'
+    }
+  }]
+},
+// 播客专辑
+{
+  path: '/music',
+  component: Layout,
+  hidden: true,
+  permissions: ['music:blog:list'],
+  children: [{
+    path: 'blog/detail',
+    component: () => import('@/views/music/blog/detail'),
+    name: 'detail',
+    meta: {
+      title: `详情页`,
+      activeMenu: '/music/blog'
+    }
+  }]
+},
+// 节目列表
+{
+  path: '/music',
+  component: Layout,
+  hidden: true,
+  permissions: ['music:program:list'],
+  children: [{
+    path: 'program/detail',
+    component: () => import('@/views/music/program/detail'),
+    name: 'detail',
+    meta: {
+      title: `详情页`,
+      activeMenu: '/music/program'
+    }
+  }]
+},
+// 广播电台
+{
+  path: '/music',
+  component: Layout,
+  hidden: true,
+  permissions: ['music:radio:list'],
+  children: [{
+    path: 'radio/detail',
+    component: () => import('@/views/music/radio/detail'),
+    name: 'detail',
+    meta: {
+      title: `详情页`,
+      activeMenu: '/music/radio'
+    }
+  }]
+},
+// 频道管理
+// 官方推荐
+{
+  path: '/channel',
+  component: Layout,
+  hidden: true,
+  permissions: ['channel:official:list'],
+  children: [{
+    path: 'official/detail',
+    component: () => import('@/views/channel/official/detail'),
+    name: 'detail',
+    meta: {
+      title: `详情页`,
+      activeMenu: '/channel/official'
+    }
+  }]
+}]
 
 export default new Router({
   mode: 'history', // 去掉url中的#

src/views/channel/list/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="app-container">
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="内容名称：">
+        <el-input placeholder="请输入内容名称" />
+      </el-form-item>
+      <el-form-item label="内容类型：">
+        <el-select placeholder="请选择内容类型" />
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择平台" />
+      </el-form-item>
+      <el-form-item label="标签分类：">
+        <el-select placeholder="请选择标签分类" />
+      </el-form-item>
+      <el-form-item label="内容ID：">
+        <el-input placeholder="请输入内容ID" />
+      </el-form-item>
+      <el-form-item label="状态：">
+        <el-select placeholder="请选择当前状态" />
+      </el-form-item>
+      <el-form-item label="编号：">
+        <el-input placeholder="请输入编号" />
+      </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="danger" icon="el-icon-delete">批量删除</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" v-loading="loading">
+        <el-table-column type="selection" />
+        <el-table-column label="编号"></el-table-column>
+        <el-table-column label="封面">
+            <template>
+                <el-image />
+            </template>
+        </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-button>查看</el-button>
+            <el-button>编辑</el-button>
+            <el-button>试听</el-button>
+            <el-button>删除</el-button>
+        </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            // 遮罩层
+            loading: false,
+            // 表格
+            tableData:[]
+        }
+    }
+};
+</script>
+
+<style>
+</style>

src/views/channel/official/detail.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="app-container">
+    <el-form class="form" label-width="100px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="频道封面：">
+            <imageUpload />
+          </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-col>
+      </el-row>
+      <el-form-item label="频道简介：">
+        <el-input type="textarea" rows="4" placeholder="请输入频道简介" />
+      </el-form-item>
+      <el-form-item label="频道详情：">
+        <el-table>
+          <el-table-column label="ID" align="center"></el-table-column>
+          <el-table-column label="名称" align="center"></el-table-column>
+          <el-table-column label="状态" align="center"></el-table-column>
+          <el-table-column label="资源平台" align="center"></el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot="header">
+              <el-button type="text" @click="dialogVisible = true">关联</el-button>
+            </template>
+            <template>
+              <el-button type="text">选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <el-button>取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 弹窗 -->
+    <el-dialog title="关联" :visible.sync="dialogVisible" width="1600px">
+      <el-form inline label-width="100px" size="mini">
+        <el-form-item label="资源平台：">
+          <el-input disabled />
+        </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-select>
+        </el-form-item>
+        <el-form-item label="ID：">
+          <el-input placeholder="请输入ID" />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary">搜索</el-button>
+          <el-button icon="el-icon-refresh">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table>
+        <el-table-column type="selection" align="center"></el-table-column>
+        <el-table-column label="ID" align="center"></el-table-column>
+        <el-table-column label="名称" align="center"></el-table-column>
+        <el-table-column label="资源平台" align="center"></el-table-column>
+        <el-table-column label="状态" align="center"></el-table-column>
+      </el-table>
+      <div slot="footer">
+        <el-button>取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import imageUpload from "@/components/Upload/index";
+export default {
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form {
+  width: 600px;
+}
+</style>

src/views/channel/official/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <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-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-tabs v-model="tabActive" editable type="card" @edit="handleTabsEdit">
+      <el-tab-pane v-for="item in tabOptions" :key="item.value" :label="item.label" :name="item.value">
+        <el-form label-width="100px">
+          <el-form-item label="关联设备：">
+            <el-select v-model="value" multiple placeholder="请选择需要关联的设备">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-table :data="tableData">
+          <el-table-column type="index" label="序号" align="center"></el-table-column>
+          <el-table-column prop="name" label="频道名称" align="center"></el-table-column>
+          <el-table-column prop="img" label="频道封面" align="center"></el-table-column>
+          <el-table-column prop="title" label="频道简介" align="center"></el-table-column>
+          <el-table-column label="频道详情" align="center">
+            <template slot-scope="scope">
+              <el-button type="text">查看</el-button>
+              <el-button type="text" @click="getEdit(scope.row.id)">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- 弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
+      <el-form label-width="100px">
+        <el-form-item label="列表名称：">
+          <el-input v-model="listName" placeholder="请输入列表名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button>取消</el-button>
+        <el-button type="primary" @click="getAdd">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "野性mini",
+        },
+        {
+          value: "2",
+          label: "小王子",
+        },
+        {
+          value: "3",
+          label: "原子唱机",
+        },
+        {
+          value: "4",
+          label: "mate系列",
+        },
+        {
+          value: "5",
+          label: "小确幸",
+        },
+        {
+          value: "6",
+          label: "灵感手表",
+        },
+        {
+          value: "7",
+          label: "机械光域",
+        },
+      ],
+      value: [],
+      tableData: [
+        {
+          name: "",
+          img: "",
+          title: "",
+        },
+      ],
+      //   标签页
+      tabOptions: [
+        {
+          label: "默认频道",
+          value: "1",
+        },
+      ],
+      tabActive: "1",
+      listName: "",
+      //  弹窗
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    getEdit(id) {
+      this.$router.push({
+        path: `/channel/official/detail`,
+        query: {
+          id: id,
+        },
+      });
+    },
+    // 操作列表
+    handleTabsEdit(targetName, action) {
+      console.log(action);
+      if (action === "add") {
+        this.dialogVisible = true;
+      }
+    },
+    // 新建列表
+    getAdd() {
+      let index = this.tabOptions.length;
+      this.tabOptions.push({
+        label: this.listName,
+        value: ++index,
+      });
+      this.dialogVisible = false
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/device/category/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <!--  -->
+    <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini" @submit.native.prevent>
       <el-form-item>
         <el-button type="primary" icon="el-icon-plus" plain @click="getChange()">新增</el-button>
@@ -16,8 +16,6 @@
           <dict-tag :options="dict.type.dev_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <!-- <el-table-column label="更新时间" align="center" />
-      <el-table-column label="创建时间" align="center" /> -->
       <el-table-column>
         <template slot-scope="scope">
           <el-button type="text" @click="getChange(scope.row)">编辑</el-button>
@@ -25,16 +23,14 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
-      @pagination="getList" /> -->
 
     <!-- 新增弹窗 -->
     <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="getCancel">
-      <el-form label-width="100px">
-        <el-form-item label="分类名称：">
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="分类名称：" prop="name">
           <el-input v-model="form.name" placeholder="请输入分类名称" />
         </el-form-item>
-        <el-form-item label="启用状态：">
+        <el-form-item label="启用状态：" prop="status">
           <el-radio-group v-model="form.status">
             <el-radio :label="1">正常</el-radio>
             <el-radio :label="2">停用</el-radio>
@@ -50,15 +46,15 @@
 </template>
 
 <script>
-import { 
+import {
   categoryList,
   categoryAdd,
   categoryEdit,
-  categoryDelete 
-} from '@/api/device/category'
+  categoryDelete,
+} from "@/api/device/category";
 
 export default {
-  dicts: ['dev_normal_disable'],
+  dicts: ["dev_normal_disable"],
   data() {
     return {
       // 遮罩层
@@ -67,80 +63,102 @@ export default {
       tableData: [],
       // 弹窗
       dialogVisible: false,
-      title: '',
+      title: "",
       // 提交表单
-      form: {}
-    }
+      form: {},
+      // 表单验证
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入分类名称",
+            trigger: "blur",
+          },
+        ],
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "change",
+          },
+        ],
+      },
+    };
   },
   mounted() {
-    this.getList()
+    this.getList();
   },
   methods: {
     // 分类列表
     getList() {
-      this.loading = true
-      categoryList().then(res => {
+      this.loading = true;
+      categoryList().then((res) => {
         if (res.data.code === 0) {
-          this.tableData = res.data.data
-          this.loading = false
+          this.tableData = res.data.data;
+          this.loading = false;
         }
-      })
+      });
     },
 
     // 新增 / 编辑按钮
     getChange(row) {
-      this.dialogVisible = true
-      if (row) {
-        this.form = row
-        this.title = '编辑'
-      } else {
-        this.title = '新增'
-      }
+      this.dialogVisible = true;
+      this.form = row ? row : {};
+      this.title = row ? "编辑" : "新增";
+    },
+
+    // 取消
+    getCancel() {
+      this.$refs.form.resetFields();
+      this.dialogVisible = false;
     },
 
     // 确定
     getAdd() {
-      if (this.form.id) {
-        categoryEdit(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('修改成功！')
-            this.dialogVisible = false
-            this.getList()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.id) {
+            // 编辑
+            categoryEdit(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("修改成功！");
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          } else {
+            // 新增
+            categoryAdd(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("创建成功！");
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
           }
-        })
-      } else {
-        // 新增
-        categoryAdd(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('创建成功！')
-            this.dialogVisible = false
-            this.getList()
-          }
-        })
-      }
-    },
-
-    // 取消
-    getCancel() {
-      this.dialogVisible = false
-      this.form = {}
+        } else {
+          return false;
+        }
+      });
     },
 
     // 删除
     getDelete(id) {
-      this.$confirm('确定要删除?', {
-        type: 'warning'
-      }).then(() => {
-        categoryDelete(id).then(res => {
-          if (res.data.code === 0) {
-            this.getList()
-            this.$message.success('删除成功！')
-          }
+      this.$confirm("确定要删除?", {
+        type: "warning",
+      })
+        .then(() => {
+          categoryDelete(id).then((res) => {
+            if (res.data.code === 0) {
+              this.getList();
+              this.$message.success("删除成功！");
+            }
+          });
         })
-      }).catch(() => { })
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/device/function/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini" @submit.native.prevent>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 表格 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="ID" prop="id" align="center" />
+      <el-table-column label="功能名称" prop="name" align="center" />
+      <el-table-column label="功能分类" prop="type" align="center"></el-table-column>
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column>
+        <template slot-scope="scope">
+          <el-button type="text" @click="getChange(scope.row)">编辑</el-button>
+          <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 新增弹窗 -->
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="getCancel">
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="功能名称：" prop="name">
+          <el-input v-model="form.name" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="功能分类：" prop="type">
+          <el-input-number v-model="form.type" />
+        </el-form-item>
+        <el-form-item label="启用状态：" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="0">正常</el-radio>
+            <el-radio :label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button size="mini" @click="getCancel">取消</el-button>
+        <el-button type="primary" size="mini" @click="getAdd">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { functionList, functionAdd, functionEdit } from "@/api/device/function";
+export default {
+  dicts: ["sys_normal_disable"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 表格数据
+      tableData: [],
+      // 弹窗
+      dialogVisible: false,
+      title: "",
+      form: {},
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入功能名称",
+            trigger: "blur",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: "请选择功能分类",
+            trigger: "change",
+          },
+        ],
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    // 权限列表
+    getList() {
+      this.loading = true;
+      functionList({ isDelete: 0 }).then((res) => {
+        if (res.data.code === 0) {
+          console.log(res);
+          this.tableData = res.data.data;
+          this.loading = false;
+        }
+      });
+    },
+
+    // 新增 / 编辑按钮
+    getChange(row) {
+      this.dialogVisible = true;
+      this.form = row ? row : {};
+      this.title = row ? "编辑" : "新增";
+    },
+
+    // 取消
+    getCancel() {
+      this.$refs.form.resetFields();
+      this.dialogVisible = false;
+    },
+
+    // 确定
+    getAdd() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.id) {
+            //   编辑
+            functionEdit(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("修改成功！");
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          } else {
+            // 新增
+            functionAdd(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("创建成功！");
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+
+    // 删除
+    getDelete(row) {
+      this.form = row;
+      this.form.isDelete = 1;
+      functionEdit(this.form).then((res) => {
+        if (res.code === 0) {
+          this.$message.success("已删除！");
+          this.getList();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/device/init/detail.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form label-width="100px" size="small">
-      <!-- 宣传位新增 -->
-      <div v-if="isShow === 'first'">
-        <el-form-item label="展示类型：">
-          <el-select v-model="form.type" placeholder="请选择展示类型" />
-        </el-form-item>
-        <el-form-item label="图片/视频：">
-          <el-upload class="avatar-uploader" :multiple="false" :show-file-list="false" action="">
-            <el-image v-if="form.img" :src="form.img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-      </div>
-      <!-- 商品管理新增 -->
-      <div v-else>
-        <el-form-item label="商品名称：">
-          <el-input v-model="form.name" placeholder="请输入商品名称" />
-        </el-form-item>
-        <el-form-item label="网址：">
-          <el-input v-model="form.url" placeholder="请输入网址" />
-        </el-form-item>
-        <el-form-item label="图片/视频：">
-          <el-upload class="avatar-uploader" :multiple="false" :show-file-list="false" action="">
-            <el-image v-if="form.img" :src="form.img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="上线时间：">
-          <el-date-picker v-model="form.onlineTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
-        </el-form-item>
-      </div>
-      <!-- 按钮 -->
-      <el-form-item>
-        <el-button @click="getCancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">提交</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      isShow: '',
-      form: {}
-    }
-  },
-  mounted() {
-    this.isShow = this.$route.query.active
-  },
-  methods: {
-    // 取消
-    getCancel() {
-      this.$message.info('已取消！')
-      this.$tab.closeOpenPage('/device/init')
-    },
-
-    // 提交
-    getSubmit() {
-      this.$message.success('提交成功！')
-      this.$tab.closeOpenPage('/device/init')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-form {
-  width: 500px;
-}
-</style>

src/views/device/init/index.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-tabs v-model="tabActive">
-      <!-- 宣传位管理页 -->
-      <el-tab-pane label="宣传位管理" name="first">
-        <!-- 搜索 -->
-        <el-form inline label-width="100px" size="mini">
-          <el-form-item label="展示类型：">
-            <el-select v-model="searchFrom.type" clearable />
-          </el-form-item>
-          <el-form-item label="创建时间：">
-            <el-date-picker v-model="searchFrom.date" type="date" placeholder="选择创建时间" clearable />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search">搜索</el-button>
-            <el-button icon="el-icon-plus" @click="getDetail">新增</el-button>
-          </el-form-item>
-        </el-form>
-        <!-- 表格 -->
-        <el-table :data="tableData.first" v-loading="loading">
-          <el-table-column label="ID" prop="id" align="center" />
-          <el-table-column label="宣传图" align="center">
-            <template slot-scope="scope">
-              <el-image :src="scope.row.img" :preview-src-list="[scope.row.img]" />
-            </template>
-          </el-table-column>
-          <el-table-column label="展示类型" prop="type" align="center" />
-          <el-table-column label="展示状态" align="center">
-            <template slot-scope="scope">
-              <span>{{ state.first[scope.row.state] }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" prop="createDate" align="center" />
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-button v-if="scope.row.state === 0" type="text" @click="getChange(scope.row)">停用</el-button>
-              <div v-else>
-                <el-button type="text" @click="getChange(scope.row)">启用</el-button>
-                <el-button type="delete" @click="getDelete">删除</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-
-      <!-- 商品管理页 -->
-      <el-tab-pane label="商品管理" name="second">
-        <!-- 搜索表单 -->
-        <el-form inline label-width="100px" size="mini">
-          <el-form-item label="商品名称：">
-            <el-select v-model="searchFrom.name" clearable />
-          </el-form-item>
-          <el-form-item label="展示状态：">
-            <el-select v-model="searchFrom.state" clearable />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search">搜索</el-button>
-            <el-button icon="el-icon-plus" @click="getDetail">新增</el-button>
-          </el-form-item>
-        </el-form>
-        <!-- 表格 -->
-        <el-table :data="tableData.second" v-loading="loading">
-          <el-table-column label="ID" prop="id" align="center" />
-          <el-table-column label="商品名称" prop="name" align="center" />
-          <el-table-column label="商品图" align="center">
-            <template slot-scope="scope">
-              <el-image :src="scope.row.img" :preview-src-list="[scope.row.img]" />
-            </template>
-          </el-table-column>
-          <el-table-column label="网址" align="center" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <el-link :href="scope.row.url" :underline="false">{{ scope.row.url }}</el-link>
-            </template>
-          </el-table-column>
-          <el-table-column label="展示状态" align="center">
-            <template slot-scope="scope">
-              <span>{{ state.second[scope.row.state] }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="上线时间" prop="onlineTime" align="center" show-overflow-tooltip />
-          <el-table-column label="创建时间" prop="createDate" align="center" />
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <div v-if="scope.row.state === 1">
-                <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
-                <el-button type="text">上线</el-button>
-                <el-button type="delete">删除</el-button>
-              </div>
-              <div v-else>
-                <el-button type="text">下线</el-button>
-                <el-button v-if="scope.row.top" type="text">取消置顶</el-button>
-                <el-button v-else type="text">置顶</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中的标签页
-      tabActive: 'first',
-      // 表格数据
-      tableData: {
-        'first': [{
-          id: 419448339824642,
-          img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-          type: '图片',
-          state: 1,
-          createDate: '2020-09-14 15:27:15'
-        }],
-        'second': [{
-          id: 429999083749378,
-          name: '原子唱机',
-          img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-          url: 'https://item.m.jd.com/product/100002126446.html',
-          state: 1,
-          top: true,
-          onlineTime: ['2021-12-24 11:24:24', '2023-01-04 11:24:24'],
-          createDate: '2021-12-24 11:25:29'
-        }]
-      },
-      // 展示状态
-      state: {
-        'first': {
-          0: '已启用',
-          1: '已停用',
-        },
-        'second': {
-          0: '已上线',
-          1: '已下线'
-        }
-      },
-      // 搜索表单
-      searchFrom: {
-        type: '',
-        date: '',
-        name: '',
-        state: ''
-      }
-    }
-  },
-  mounted() {
-    this.loading = false
-    this.getList()
-  },
-  methods: {
-    // 新增 / 编辑
-    getDetail(id){
-      this.$router.push({
-        path: `/device/init/detail`,
-        query:{
-          id: id,
-          active: this.tabActive
-        }
-      })
-    },
-    // 启用 / 停用
-    getChange(row) {
-      const title = row.state == 0 ? '停用' : '启用'
-      this.$confirm(`确定要${title}?`, {
-        type: 'warning'
-      }).then(() => {
-
-      }).catch(() => { })
-    },
-    // 删除
-    getDelete() {
-      this.$confirm('确定要删除?', {
-        type: 'warning'
-      }).then(() => {
-
-      }).catch(() => { })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-image {
-  width: 120px;
-}
-</style>

src/views/device/list/detail.vue

@@ -1,239 +1,388 @@
 <template>
   <div class="app-container">
-    <el-form :model="form" label-width="100px" size="small">
-      <el-form-item label="设备型号：">
+    <el-form :model="form" :rules="rules" ref="form" label-width="110px" size="small">
+      <el-form-item label="设备型号：" prop="clientType">
         <el-input v-model="form.clientType" placeholder="请输入设备型号" />
       </el-form-item>
-      <el-form-item label="设备名称：">
+      <el-form-item label="设备名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入设备名称" />
       </el-form-item>
-      <el-form-item label="初始版本号：">
+      <el-form-item label="初始版本号：" prop="firstVersion">
         <el-input v-model="form.firstVersion" placeholder="请输入初始版本号" />
       </el-form-item>
-      <el-form-item label="升级方式：">
+      <el-form-item label="升级方式：" prop="upgradeType">
         <el-select v-model="form.upgradeType" placeholder="请选择升级方式">
-          <el-option v-for="item in upgradeTypeOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <el-option v-for="item in upgradeTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
-      <el-form-item label="设备过滤：">
+      <el-form-item label="设备过滤：" prop="filter">
         <el-input v-model="form.filter" placeholder="请输入设备过滤内容"></el-input>
       </el-form-item>
-      <el-form-item label="引导页：">
-        <el-input v-model="form.guideUrl" placeholder="请输入IOS设备H5引导页" />
+      <el-form-item label="引导页：" prop="guideUrl">
+        <el-input v-model="form.guideUrl" placeholder="请输入引导页网址" />
       </el-form-item>
-      <el-form-item label="设备制造商：">
+      <el-form-item label="设备制造商：" prop="manufacturer">
         <el-input v-model="form.manufacturer" placeholder="请输入设备制造商" />
       </el-form-item>
-      <el-form-item label="使用分类：">
+      <el-form-item label="使用分类：" prop="deviceType">
         <el-select v-model="form.deviceType">
-          <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
-      <el-form-item label="设备分类：">
+      <el-form-item label="设备分类：" prop="categoryId">
         <el-select v-model="form.categoryId">
           <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item label="设备图片：">
+      <el-form-item label="设备图片：" prop="img">
         <imageUpload :url="form.img" @success="handleUploadImg" @delete="handleUploadImg" />
       </el-form-item>
       <!-- 子表单 -->
-      <div style="position: relative">
-        <el-button class="sub-add" v-if="form.typeList.length < 4" type="primary" icon="el-icon-plus"
-          @click="getAdd">新建</el-button>
+      <div label-width="100px" style="position: relative">
+        <el-button class="sub-add" v-if="form.typeList.length < 4" type="primary" icon="el-icon-plus" @click="getAdd">新建</el-button>
         <div class="sub-form" v-for="(item, index) in form.typeList" :key="item.id">
-          <el-form-item label="设备类型：">
-            <el-select v-model="item.type" placeholder="请选择设备类型" @change="getTypeChange">
-              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"
-                :disabled="item.disabled" />
+          <el-form-item
+            label="设备类型："
+            :prop="`typeList.${index}.type`"
+            :rules="{
+              required: true,
+              message: '请选择设备类型',
+              trigger: 'change',
+            }"
+          >
+            <el-select v-model="item.type" placeholder="请选择设备类型" @change="getTypeChange($event, index)">
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item label="功能权限：">
+          <el-form-item
+            label="功能权限："
+            :prop="`typeList.${index}.functionList`"
+            :rules="{type: 'array', required: true, message: '请选择功能权限', trigger: 'change'}"
+          >
             <el-select v-model="item.functionList" placeholder="请选择功能权限" multiple>
-              <el-option v-for="item in functionOptions" :key="item.id" :label="item.name"
-                :value="item.type" />
+              <el-option v-for="item in functionOptions" :key="item.id" :label="item.name" :value="item.type" />
             </el-select>
           </el-form-item>
-          <el-form-item label="连接方式：">
+          <el-form-item
+            label="连接方式："
+            :prop="`typeList.${index}.connectType`"
+            :rules="{required: true, message:'请选择连接方式', trigger: 'change'}"
+          >
             <el-select v-model="item.connectType" placeholder="请选择连接方式">
-              <el-option v-for="item in connectTypeOptions" :key="item.value" :label="item.label"
-                :value="item.value" />
+              <el-option v-for="item in connectTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
-          <el-form-item label="设备图标：">
-            <el-row>
-              <el-col :span="12">
-                <imageUpload :url="item.icon1" @success="handleUploadIcon($event, index, 'icon1')"
-                  @delete="handleUploadIcon($event, index, 'icon1')" />
-              </el-col>
-              <el-col :span="12">
-                <imageUpload :url="item.icon2" @success="handleUploadIcon($event, index, 'icon2')"
-                  @delete="handleUploadIcon($event, index, 'icon2')" />
-              </el-col>
-            </el-row>
-          </el-form-item>
-          <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
-            @click="getDelete(item.type, index)" />
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="设备图标："
+                :prop="`typeList.${index}.icon1`"
+                :rules="{required:true, message:'请上传设备图标', trigger:'change'}"
+              >
+                <imageUpload
+                  :url="item.icon1"
+                  @success="handleUploadIcon($event, index, 'icon1')"
+                  @delete="handleUploadIcon($event, index, 'icon1')"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label-width="auto"
+                style="float:right"
+                :prop="`typeList.${index}.icon2`"
+                :rules="{required:true, message:'请上传设备图标', trigger:'change'}"
+              >
+                <imageUpload
+                  :url="item.icon2"
+                  @success="handleUploadIcon($event, index, 'icon2')"
+                  @delete="handleUploadIcon($event, index, 'icon2')"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-link
+            class="el-icon-close"
+            v-if="form.typeList.length > 1"
+            :underline="false"
+            @click="getDelete(item.type, index)"
+          />
         </div>
       </div>
+      <el-form-item>
+        <el-button size="mini" @click="getCancel">取消</el-button>
+        <el-button size="mini" type="primary" @click="getSubmit">提交</el-button>
+      </el-form-item>
     </el-form>
-    <div class="form-btn">
-      <el-button size="mini" @click="getCancel">取消</el-button>
-      <el-button size="mini" type="primary" @click="getSubmit">
-        提交
-      </el-button>
-    </div>
   </div>
 </template>
 
 <script>
-import { deviceAdd, deviceDetail, deviceEdit, functionList } from '@/api/device/list'
-import { categoryList } from '@/api/device/category'
-import imageUpload from '@/components/Upload/index'
-import mixin from './mixin/index'
+import { deviceAdd, deviceDetail, deviceEdit } from "@/api/device/list";
+import { categoryList } from "@/api/device/category";
+import { functionList } from "@/api/device/function";
+import imageUpload from "@/components/Upload/index";
+import mixin from "./mixin/index";
 
 export default {
   mixins: [mixin],
   components: {
-    imageUpload
+    imageUpload,
   },
   data() {
     return {
       // 设备类型列表
-      typeOptions: [{
-        value: 1,
-        label: '蓝牙'
-      }, {
-        value: 2,
-        label: 'WiFi'
-      }, {
-        value: 3,
-        label: '传统蓝牙'
-      }, {
-        value: 4,
-        label: '4G'
-      }],
+      typeOptions: [
+        {
+          value: 1,
+          label: "蓝牙",
+        },
+        {
+          value: 2,
+          label: "WiFi",
+        },
+        {
+          value: 3,
+          label: "传统蓝牙",
+        },
+        {
+          value: 4,
+          label: "4G",
+        },
+      ],
       // 升级方式列表
-      upgradeTypeOptions: [{
-        value: 1,
-        label: '强制'
-      }, {
-        value: 2,
-        label: '指定'
-      }],
+      upgradeTypeOptions: [
+        {
+          value: 1,
+          label: "强制",
+        },
+        {
+          value: 2,
+          label: "指定",
+        },
+      ],
       // 连接方式列表
-      connectTypeOptions: [{
-        value: 0,
-        label: 'bt'
-      }, {
-        value: 1,
-        label: 'ble'
-      }, {
-        value: 2,
-        label: 'upnp'
-      }, {
-        value: 3,
-        label: 'mqtt'
-      }],
+      connectTypeOptions: [
+        {
+          value: 0,
+          label: "bt",
+        },
+        {
+          value: 1,
+          label: "ble",
+        },
+        {
+          value: 2,
+          label: "upnp",
+        },
+        {
+          value: 3,
+          label: "mqtt",
+        },
+      ],
       // 分类列表
       categoryOptions: [],
       functionOptions: [],
       // 表单
       form: {
-        typeList: [{}]
-      }
-    }
+        typeList: [
+          {
+            type: "",
+            functionList: [],
+            connectType: "",
+            icon1: "",
+            icon2: "",
+          },
+        ],
+      },
+      // 表单验证
+      rules: {
+        clientType: [
+          {
+            required: true,
+            message: "请输入设备型号",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入设备名称",
+            trigger: "blur",
+          },
+        ],
+        firstVersion: [
+          {
+            required: true,
+            message: "请输入初始版本号",
+            trigger: "blur",
+          },
+        ],
+        upgradeType: [
+          {
+            required: true,
+            message: "请选择升级方式",
+            trigger: "change",
+          },
+        ],
+        filter: [
+          {
+            required: true,
+            message: "请输入设备过滤内容",
+            trigger: "blur",
+          },
+        ],
+        guideUrl: [
+          {
+            required: true,
+            message: "请输入引导页网址",
+            trigger: "blur",
+          },
+        ],
+        manufacturer: [
+          {
+            required: true,
+            message: "请输入设备制造商",
+            trigger: "blur",
+          },
+        ],
+        deviceType: [
+          {
+            required: true,
+            message: "请选择使用分类",
+            trigger: "change",
+          },
+        ],
+        categoryId: [
+          {
+            required: true,
+            message: "请选择设备分类",
+            trigger: "change",
+          },
+        ],
+        img: [
+          {
+            required: true,
+            message: "请上传设备图片",
+            trigger: "change",
+          },
+        ],
+      },
+    };
   },
   created() {
     // 分类列表
     categoryList({
-      status: 1
-    }).then(res => {
+      status: 1,
+    }).then((res) => {
       if (res.data.code === 0) {
-        this.categoryOptions = res.data.data
+        this.categoryOptions = res.data.data;
       }
-    })
+    });
     // 权限列表
-    functionList().then(res => {
+    functionList().then((res) => {
       if (res.data.code === 0) {
-        this.functionOptions = res.data.data
+        this.functionOptions = res.data.data;
       }
-    })
+    });
   },
   mounted() {
-    this.getList()
+    this.getList();
   },
   methods: {
     // 详情
     getList() {
       if (this.$route.query.id) {
         deviceDetail({
-          id: this.$route.query.id
-        }).then(res => {
+          id: this.$route.query.id,
+        }).then((res) => {
           if (res.data.code === 0) {
-            this.form = res.data.data
+            this.form = res.data.data;
           }
-        })
+        });
       }
     },
 
     // 上传设备图片
     handleUploadImg(e) {
-      this.form.img = e
+      this.form.img = e;
     },
 
     // 上传设备图标
     handleUploadIcon(e, index, obj) {
-      this.form.typeList[index][obj] = e
+      this.form.typeList[index][obj] = e;
     },
 
     // 选中一个设备类型就从数组中去掉
     getTypeChange(e) {
-      this.typeOptions[e - 1].disabled = true
+      for (let i in this.typeOptions) {
+        this.typeOptions[i].disabled = false;
+      }
+      this.typeOptions[e - 1].disabled = true;
     },
 
     // 新建
     getAdd() {
-      this.form.typeList.push({})
+      this.form.typeList.push({
+        type: "",
+        functionList: [],
+        connectType: "",
+        icon1: "",
+        icon2: "",
+      });
     },
 
     // 删除子表单
     getDelete(e, index) {
-      this.form.typeList.splice(index, 1)
-      this.typeOptions[e - 1].disabled = false
+      this.form.typeList.splice(index, 1);
+      this.typeOptions[e - 1].disabled = false;
     },
 
     // 取消
     getCancel() {
-      this.$tab.closeOpenPage('/device/list')
+      this.$tab.closeOpenPage("/device/list");
+      this.$refs.form.resetFields();
     },
 
-    // 提交 / 编辑
+    // 提交
     getSubmit() {
-      if (this.$route.query.id) {
-        deviceEdit(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('提交成功！')
-            this.$tab.closeOpenPage('/device/list')
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.$route.query.id) {
+            // 编辑
+            deviceEdit(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("修改成功！");
+                this.$tab.closeOpenPage("/device/list");
+              } else {
+                this.$message.error("修改失败");
+              }
+            });
           } else {
-            this.$message.error('提交失败')
+            // 新建
+            deviceAdd(this.form).then((res) => {
+              if (res.code === 0) {
+                this.$message.success("提交成功！");
+                this.$tab.closeOpenPage("/device/list");
+              } else {
+                this.$message.error("提交失败");
+              }
+            });
           }
-        })
-      } else {
-        deviceAdd(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('提交成功！')
-            this.$tab.closeOpenPage('/device/list')
-          } else {
-            this.$message.error('提交失败')
-          }
-        })
-      }
-    }
-  }
-}
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/device/pages/index.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form>
-      <el-form-item>
-        <el-button icon="el-icon-plus">新增分类</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table>
-      <el-table-column label="ID" align="center" />
-      <el-table-column label="名称" align="center" />
-      <el-table-column label="操作">
-        <template>
-          <el-button type="text">编辑</el-button>
-          <el-button type="text">关联设备</el-button>
-          <el-button type="delete">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/device/version/detail.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form label-width="100px" size="small">
-      <el-form-item label="产品型号：">
-        <el-input></el-input>
-      </el-form-item>
-      <el-form-item label="版本号：">
-        <el-input></el-input>
-      </el-form-item>
-      <el-form-item label="上传类型：">
-        <el-select></el-select>
-      </el-form-item>
-      <el-form-item label="下载路径：">
-        <el-row>
-          <el-col :span="18">
-            <el-input></el-input>
-          </el-col>
-          <el-col :span="6">
-            <el-upload action="" multiple limit="1" style="float:right">
-              <el-button type="primary">上传文件</el-button>
-            </el-upload>
-          </el-col>
-        </el-row>
-      </el-form-item>
-      <el-form-item label="升级标题：">
-        <el-input></el-input>
-      </el-form-item>
-      <el-form-item label="升级描述：">
-        <el-input type="textarea" :rows="4" placeholder="请输入描述信息" />
-      </el-form-item>
-      <el-form-item label="强制升级：">
-        <el-radio>是</el-radio>
-        <el-radio>否</el-radio>
-      </el-form-item>
-      <el-form-item label="同步推送：">
-        <el-radio>是</el-radio>
-        <el-radio>否</el-radio>
-      </el-form-item>
-      <el-form-item label="升级对象：">
-        <el-select></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>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    // 取消
-    getCancel() {
-      this.$message.info('已取消！')
-      this.$tab.closeOpenPage('/device/types')
-    },
-
-    // 提交
-    getSubmit() {
-      this.$message.success('提交成功！')
-      this.$tab.closeOpenPage('/device/types')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-form {
-  width: 500px;
-}
-</style>

src/views/device/version/index.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索 -->
-    <el-form inline label-width="100px" size="mini">
-      <el-form-item label="升级标题：">
-        <el-input />
-      </el-form-item>
-      <el-form-item label="产品型号：">
-        <el-select />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        <el-button icon="el-icon-plus" @click="getDetail">新增</el-button>
-      </el-form-item>
-    </el-form>
-    <!-- 表格 -->
-    <el-table :data="tableData" v-loading="loading">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="升级标题" align="center" prop="title" />
-      <el-table-column label="产品型号" align="center" prop="type" />
-      <el-table-column label="版本号" align="center" prop="version" />
-      <el-table-column label="下载路径" align="center" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <el-link :href="scope.row.url" :underline="false">{{ scope.row.url }}</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="升级对象" align="center" prop="obj" />
-      <el-table-column label="升级方式" align="center" prop="mode" />
-      <el-table-column label="编辑时间" align="center" prop="editDate" />
-      <el-table-column label="操作" align="center">
-        <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
-          <el-button type="delete">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [{
-        id: 431453440573442,
-        title: 'WIFI固件新版本升级',
-        type: 'MW-M3(WIFI)',
-        version: '1.3.4',
-        url: 'http://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/device/20220308/33bf0fb619104ed9312bb9e11a21127f.bin',
-        obj: '全部',
-        mode: '低于版本',
-        editDate: '2022-02-26 16:31:00'
-      }]
-    }
-  },
-  methods: {
-    // 新增 / 编辑
-    getDetail(id) {
-      console.log(id);
-      this.$router.push({
-        path: `/device/version/detail`,
-        query:{
-          id: id
-        }
-      })
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/device/yxw/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form inline label-width="100px" size="mini">
-      <el-form-item label="设备号：">
-        <el-input></el-input>
-      </el-form-item>
-      <el-form-item label="型号：">
-        <el-input></el-input>
-      </el-form-item>
-      <el-form-item label="类型：">
-        <el-select></el-select>
-      </el-form-item>
-      <el-form-item label="状态：">
-        <el-select></el-select>
-      </el-form-item>
-      <el-form-item label="生成时间：">
-        <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
-      </el-form-item>
-      <el-form-item label="分配时间：">
-        <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-download">导出设备号</el-button>
-        <el-button type="primary" icon="el-icon-download">导出数据</el-button>
-        <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        <el-button icon="el-icon-plus">新增设备号</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/music/album/detail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="app-container">
+    <el-form 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 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-item>
+      <el-form-item label="付费类型：">
+        <el-select placeholder="请选择付费类型">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <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-button type="primary" @click="dialogVisible = true">关联</el-button>
+        <el-button disabled>解除关联</el-button>
+        <el-table>
+          <el-table-column label="ID" align="center"></el-table-column>
+          <el-table-column label="歌曲名称" align="center"></el-table-column>
+          <el-table-column label="当前状态" align="center"></el-table-column>
+          <el-table-column label="操作" align="center">
+            <template>
+              <el-button>解除关联</el-button>
+            </template>
+          </el-table-column>
+        </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 inline size="mini">
+        <el-form-item label="ID：">
+          <el-input placeholder="请输入节目ID" />
+        </el-form-item>
+        <el-form-item label="歌曲名称：">
+          <el-input placeholder="请输入节目名称" />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table>
+        <el-table-column type="selection" />
+        <el-table-column label="ID" align="center" />
+        <el-table-column label="歌曲名称" align="center" />
+        <el-table-column label="当前状态" align="center" />
+      </el-table>
+      <!-- <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="form.pageNum"
+        :limit.sync="form.pageSize"
+        @pagination="getList"
+      />-->
+      <div slot="footer">
+        <el-button>取消</el-button>
+        <el-button type="primary">关联</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import imageUpload from "@/components/Upload/index";
+export default {
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      // 弹窗
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    // 取消
+    getCancel() {
+      this.$tab.closeOpenPage("/music/album");
+      this.$refs.form.resetFields();
+    },
+    // 提交
+    getSubmit() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 600px;
+}
+</style>

src/views/music/album/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索框 -->
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="资源平台：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="音乐类型：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="付费类型：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="上架状态：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标签分类：">
+        <el-select>
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="音乐ID：">
+        <el-input />
+      </el-form-item>
+      <el-form-item label="音乐名称：">
+        <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-plus" plain @click="getDetail()">新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain>快捷新增(上传压缩包)</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 prop="img" label="音乐封面" align="center"></el-table-column>
+      <el-table-column prop="musicType" label="音乐类型" align="center"></el-table-column>
+      <el-table-column prop="payType" label="付费类型" align="center"></el-table-column>
+      <el-table-column prop="titleType" label="标签分类" align="center"></el-table-column>
+      <el-table-column prop="number" 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">编辑</el-button>
+          <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: [
+        {
+          id: 1,
+          name: '测试',
+          img: '',
+          musicType: '测试',
+          payType: '免费',
+          titleType: '测试',
+          number: '2',
+          status: '下架',
+          update: '2022/3/16 11:33:00'
+        },
+      ],
+    };
+  },
+  methods: {
+    // 查看 / 编辑
+    getDetail(id) {
+      this.$router.push({
+        path: `/music/album/detail`,
+        query: {
+          id: id,
+        },
+      });
+    },
+    // 搜索
+    getSearch() {},
+    // 重置
+    getRefresh() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/music/anchor/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option></el-option>
+        </el-select>
+      </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-plus" plain @click="getDetail()">新增</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 prop="img" label="主播头像" align="center"></el-table-column>
+      <el-table-column prop="platform" label="资源平台" align="center" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDetail(scope.row.id, 0)">查看</el-button>
+          <el-button type="text" @click="getDetail(scope.row.id, 1)">编辑</el-button>
+          <el-button type="delete">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="600px">
+      <el-form label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="主播头像：">
+              <imageUpload />
+            </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-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="主播简介：">
+          <el-input type="textarea" placeholder="请输入主播简介" rows="4"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="getCancel">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import imageUpload from "@/components/Upload/index";
+export default {
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      // 列表
+      tableData: [
+        {
+          id: 1,
+          name: "德云社",
+          img: "",
+          platform: "官方电台",
+        },
+      ],
+      //   弹窗
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    getDetail() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/music/blog/detail.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px" size="small">
+      <div>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="播客封面：">
+              <imageUpload />
+            </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-item>
+        <el-form-item label="付费类型：">
+          <el-select placeholder="请选择付费类型">
+            <el-option />
+          </el-select>
+        </el-form-item>
+        <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-button type="primary" @click="dialogVisible = true">关联</el-button>
+          <el-button disabled>解除关联</el-button>
+          <el-table>
+            <el-table-column label="ID" align="center"></el-table-column>
+            <el-table-column label="节目名称" align="center"></el-table-column>
+            <el-table-column label="当前状态" align="center"></el-table-column>
+            <el-table-column label="操作" align="center">
+              <template>
+                <el-button>解除关联</el-button>
+              </template>
+            </el-table-column>
+          </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>
+      </div>
+    </el-form>
+
+    <!-- 关联弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1000px">
+      <el-form inline size="mini">
+        <el-form-item label="ID：">
+          <el-input placeholder="请输入节目ID" />
+        </el-form-item>
+        <el-form-item label="节目名称：">
+          <el-input placeholder="请输入节目名称" />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table>
+        <el-table-column type="selection" />
+        <el-table-column label="ID" align="center" />
+        <el-table-column label="节目名称" align="center" />
+        <el-table-column label="当前状态" align="center" />
+      </el-table>
+      <!-- <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="form.pageNum"
+        :limit.sync="form.pageSize"
+        @pagination="getList"
+      />-->
+      <div slot="footer">
+        <el-button>取消</el-button>
+        <el-button type="primary">关联</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import imageUpload from "@/components/Upload/index";
+export default {
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      //   弹窗
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    getCancel() {
+      this.$tab.closeOpenPage("/music/blog");
+      this.$refs.form.resetFields();
+    },
+    getSubmit() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 600px;
+}
+</style>

src/views/music/blog/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <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-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-select>
+      </el-form-item>
+      <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-form-item>
+      <el-form-item label="播客名称：">
+        <el-input placeholder="请输入播客名称" />
+      </el-form-item>
+      <el-form-item label="主播名称：">
+        <el-input placeholder="请输入主播名称" />
+      </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-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="img" label="播客封面" align="center"></el-table-column>
+      <el-table-column prop="blogType" label="播客分类" align="center"></el-table-column>
+      <el-table-column prop="anchor" label="主播" align="center"></el-table-column>
+      <el-table-column prop="payType" label="付费类型" align="center"></el-table-column>
+      <el-table-column prop="labelType" label="标签分类" align="center"></el-table-column>
+      <el-table-column prop="number" 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">编辑</el-button>
+          <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:[{
+        id: '1',
+        name: '测试',
+        img: '',
+        blogType: '测试分类',
+        anchor: '测试主播',
+        payType: '免费',
+        labelType: '测试',
+        number: '2',
+        status: '下架',
+        update: '2022/3/16 11:25:00'
+      }]
+    };
+  },
+  methods: {
+    getDetail(id) {
+      this.$router.push({
+        path: `/music/blog/detail`,
+        query: {
+          id: id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/music/list/detail.vue

@@ -0,0 +1,95 @@
+<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-item>
+      <el-form-item label="标签分类：">
+        <el-select>
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属专辑：">
+        <!-- 必填 -->
+        <el-select filterable placeholder="请选择所属专辑">
+          <el-option></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-select>
+      </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>
+  </div>
+</template>
+
+<script>
+import imageUpload from "@/components/Upload/index";
+export default {
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      // 歌单
+      options:[{
+        value: 1,
+        label: '每日精选'
+      },{
+        value: 2,
+        label: '昨日精选'
+      }],
+      value: [],
+      // 表单
+      form: {},
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入歌曲名称",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getCancel() {
+      this.$tab.closeOpenPage("/music/list");
+      this.$refs.form.resetFields();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 600px;
+}
+</style>

src/views/music/list/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <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-select>
+      </el-form-item>
+      <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 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 @click="getDetail()">上传音频文件</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">编辑</el-button>
+          <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:[{
+        id: 1,
+        name: '测试',
+        belong: '测试',
+        titleType: '测试',
+        singer: '周杰伦',
+        playDate: '3分40秒',
+        status: '下架',
+        update: '2022/3/16 14:12:00'
+      }]
+    };
+  },
+  methods: {
+    getDetail(id) {
+      this.$router.push({
+        path: `/music/list/detail`,
+        query: {
+          id: id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/music/platform/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <el-table :data="tableData">
+      <el-table-column type="index" label="序号" align="center" />
+      <el-table-column prop="platform" label="资源平台" align="center"></el-table-column>
+      <el-table-column prop="type" label="平台类型" align="center"></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" :disabled="scope.row.type !== '猫王'" @click="getEdit(scope.row)">编辑</el-button>
+          <el-button type="delete" :disabled="scope.row.type !== '猫王'">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗 -->
+    <el-dialog title="编辑" :visible.sync="dialogVisible" width="500px">
+      <el-form :model="form" label-width="100px">
+        <el-form-item prop="platform" label="资源平台：">
+          <el-input v-model="form.platform" placeholder="请输入资源平台" />
+        </el-form-item>
+        <el-form-item prop="type" label="平台类型：">
+          <el-input v-model="form.type" disabled />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button>取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 列表
+      tableData: [
+        {
+          platform: "QQ音乐",
+          type: "第三方",
+        },
+        {
+          platform: "猫王官方",
+          type: "猫王",
+        },
+      ],
+      //   弹窗
+      dialogVisible: false,
+      form: {
+        platform: "",
+        type: "猫王",
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    getEdit(row) {
+      this.dialogVisible = true;
+      this.form = row;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/music/program/detail.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px" size="small">
+      <el-form-item label="节目名称：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="播客专辑：">
+        <el-input disabled></el-input>
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-input disabled></el-input>
+      </el-form-item>
+      <el-form-item label="标签分类：">
+        <el-select>
+          <el-option></el-option>
+        </el-select>
+      </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-form-item label="折扣价：">
+        <el-input></el-input>
+      </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>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    getCancel() {
+      this.$tab.closeOpenPage("/music/program");
+      this.$refs.form.resetFields();
+    },
+    getSubmit() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 500px;
+}
+</style>

src/views/music/program/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <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-select>
+      </el-form-item>
+      <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 @click="getDetail()">上传音频文件</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 label="操作" align="center">
+        <template slot-scope="scope">
+          <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>
+    </el-table>
+  </div>
+</template>
+
+<script>
+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'
+        }]
+    };
+  },
+  methods: {
+    getDetail(id) {
+      this.$router.push({
+        path: `/music/program/detail`,
+        query: {
+          id: id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/music/radio/detail.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="app-container">
+    <el-form class="form" label-width="100px" size="small">
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="电台封面：">
+            <imageUpload />
+          </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-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="资源平台：">
+            <el-input disabled></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="电台简介：">
+        <el-input type="textarea" rows="4" placeholder="请输入电台简介" />
+      </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-select>
+      </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 label="电台链接：">
+        <el-input placeholder="请输入电台链接"></el-input>
+      </el-form-item>
+      <!-- 海外电台不显示 -->
+      <el-form-item label="电台节目：" style="width: 700px">
+        <el-tabs>
+          <el-tab-pane v-for="item in dict.type.sys_week_list" :key="item.value" :label="item.label" :naem="item.value">
+            <el-table :data="tableData1">
+              <el-table-column type="index" label="序号" align="center" />
+              <el-table-column prop="radio" label="电台名称" align="center" show-overflow-tooltip />
+              <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip></el-table-column>
+              <el-table-column prop="type" label="电台分类" align="center" show-overflow-tooltip></el-table-column>
+              <el-table-column prop="date" label="时间段" align="center" show-overflow-tooltip></el-table-column>
+              <el-table-column align="center">
+                <template slot="header" slot-scope="scope">
+                  <el-button icon="el-icon-plus" type="text" @click="dialogVisible = true">新增关联</el-button>
+                </template>
+                <template>
+                  <el-button type="delete">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </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 title="关联电台" :visible.sync="dialogVisible" width="1000px">
+      <!-- 搜索 -->
+      <el-form inline size="mini">
+        <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-select>
+        </el-form-item>
+        <el-form-item label="节目名称：">
+          <el-input placeholder="请输入节目名称" />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary">搜索</el-button>
+          <el-button icon="el-icon-refresh">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 列表 -->
+      <el-table :data="tableData2">
+        <el-table-column prop="id" label="ID" align="center" width="100px" />
+        <el-table-column prop="radio" label="电台名称" align="center" />
+        <el-table-column prop="name" label="节目名称" align="center" />
+        <el-table-column prop="type" label="电台分类" align="center" />
+        <el-table-column prop="date" 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 imageUpload from "@/components/Upload/index";
+export default {
+  dicts: ["sys_week_list"],
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      // 列表
+      tableData1: [
+        {
+          radio: "CNR中国之声",
+          name: "档案揭秘",
+          type: "国家台，咨询台",
+          date: "00:00:00 00:00:00",
+        },
+      ],
+      tableData2: [
+        {
+          id: 1,
+          radio: "CNR中国之声",
+          name: "档案揭秘",
+          type: "国家台，咨询台",
+          date: "00:00:00 00:00:00",
+        },
+      ],
+      // 弹窗
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    getAdd() {
+      this.tableData.push({
+        name: "",
+        radio: "",
+        start: "",
+        end: "",
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form {
+  width: 600px;
+}
+</style>

src/views/music/radio/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <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-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-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 @click="getDetail()">上传音频文件</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table :data="tableData">
+      <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="img" label="电台封面" align="center"></el-table-column>
+      <el-table-column prop="radio" 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"></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="platform" label="资源平台" align="center"></el-table-column>
+      <el-table-column prop="status" label="当前状态" align="center" width="80px"></el-table-column>
+      <el-table-column prop="date" 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">编辑</el-button>
+          <el-button type="text">上架</el-button>
+          <!-- <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:[{
+        id:'1',
+        name: 'CNR中国之声',
+        img:'',
+        radio: '国家台，咨询台',
+        title: '测试',
+        pay: '免费',
+        origin: '0',
+        discount: '0',
+        platform: '官方平台',
+        status: '下架',
+        date: '2022/3/17 09:54:00'
+      }]
+    };
+  },
+  methods: {
+    getDetail(id) {
+      this.$router.push({
+        path: `/music/radio/detail`,
+        query: {
+          id: id,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/music/singer/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="歌手名称：">
+        <el-input placeholder="请输入歌手名称" />
+      </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-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="img" label="歌手头像" align="center"></el-table-column>
+      <el-table-column prop="platform" 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, 0)">查看</el-button>
+          <el-button type="text" @click="getDetail(scope.row.id, 1)">编辑</el-button>
+          <el-button type="delete">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="600px">
+      <el-form label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="歌手头像：">
+              <imageUpload />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="歌手名称：">
+              <el-input placeholder="请输入歌手名称"></el-input>
+            </el-form-item>
+            <el-form-item label="资源平台：">
+              <el-select placeholder="请选择资源平台">
+                <el-option></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="歌手简介：">
+          <el-input type="textarea" placeholder="请输入歌手简介" rows="4"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="getCancel">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import imageUpload from "@/components/Upload/index";
+export default {
+  components: {
+    imageUpload,
+  },
+  data() {
+    return {
+      // 列表
+      tableData: [
+        {
+          id: "1",
+          name: "周杰伦",
+          img: "",
+          platform: "官方平台",
+        },
+      ],
+      // 弹窗
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    // 搜索
+    getSearch() {},
+    // 重置
+    getRefresh() {},
+    // 新增 / 编辑 / 查看
+    getDetail(id) {
+      this.dialogVisible = true;
+      if (id) {
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>