音频管理 歌手

src/views/music/singer/detail.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-form-item label="歌手名称：">
+        <el-input placeholder="请输入歌手名称" /> <!-- 字符不超过10个 -->
+      </el-form-item>
+      <el-form-item label="歌手性别：">
+        <el-select placeholder="请选择歌手性别">
+          <el-option v-for="item in sexOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属地区：">
+        <el-select placeholder="请选择歌手所属地区">
+          <el-option v-for="item in regionOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="歌手简介：">
+        <el-input type="textarea" rows="5" placeholder="请输入歌手简介" />
+      </el-form-item>
+      <el-form-item label="歌手头像：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+    </el-form>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {sexMixin, regionMixin } from '@/mixin/index'
+import Upload from '@/components/Upload/index.vue'
+export default {
+  components: {
+    Upload
+  },
+  mixins: [sexMixin, regionMixin],
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    // 取消
+    cancel(){
+      this.$tab.closeOpenPage("/music/singer");
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 500px;
+}
+</style>

src/views/music/singer/index.vue

@@ -1,99 +1,72 @@
 <template>
   <div class="app-container">
     <!-- 搜索 -->
-    <el-form inline label-width="100px" size="mini">
+    <el-form inline size="mini">
+      <el-form-item label="歌手名称：">
+        <el-input placeholder="请输入歌手名称" />
+      </el-form-item>
       <el-form-item label="资源平台：">
         <el-select placeholder="请选择资源平台">
           <el-option />
         </el-select>
       </el-form-item>
-      <el-form-item label="歌手名称：">
-        <el-input placeholder="请输入歌手名称" />
+      <el-form-item label="歌手性别：">
+        <el-select placeholder="请选择歌手性别">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属地区：">
+        <el-select placeholder="请选择所属地区">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <el-select placeholder="请选择当前状态">
+          <el-option />
+        </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail">新增</el-button>
       </el-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>
+      <el-table-column label="ID" align="center" />
+      <el-table-column label="歌手名称" align="center" />
+      <el-table-column label="歌手头像" align="center"></el-table-column>
+      <el-table-column label="歌手性别" align="center" />
+      <el-table-column label="所属地区" align="center" />
+      <el-table-column label="资源平台" align="center" />
+      <el-table-column label="当前状态" align="center" />
       <el-table-column label="操作" align="center">
-        <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>
+        <template>
+          <el-button type="text">查看</el-button>
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">上架</el-button>
+          <el-button type="text">下架</el-button>
           <el-button type="delete">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <!-- 弹窗 -->
-    <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) {
-      }
-    },
+    // 新增 编辑
+    getDetail() {
+      this.$router.push({
+        path: `/music/singer/detail`
+      })
+    }
   },
 };
 </script>