音频管理 广播电台

src/views/music/radio/detail.vue

@@ -1,171 +1,141 @@
 <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="电台封面：">
-            <Upload listType="picture-card" @upload="getUpload" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="电台名称：">
-            <el-input placeholder="请输入电台名称" />
-          </el-form-item>
-          <el-form-item label="电台分类：">
-            <el-select placeholder="请选择电台分类">
-              <el-option></el-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 :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
+      <el-form-item label="电台名称：" prop="name">
+        <el-input v-model="form.name" placeholder="请输入电台名称" />
       </el-form-item>
-      <el-form-item label="标签分类：">
-        <el-select placeholder="请选择标签分类">
-          <el-option></el-option>
+      <el-form-item label="地域分类：" prop="addressClassifyId">
+        <el-select v-model="form.addressClassifyId" placeholder="请选择地域分类">
+          <el-option v-for="item in addressOptions" :key="item.id" :value="item.id.toString()" :label="item.name" />
         </el-select>
       </el-form-item>
-      <el-form-item label="付费类型：">
-        <el-select placeholder="请选择付费类型">
-          <el-option></el-option>
+      <el-form-item label="内容分类：" prop="contentClassifyId">
+        <el-select v-model="form.contentClassifyId" placeholder="请选择内容分类">
+          <el-option v-for="item in contentOptions" :key="item.id" :value="item.id.toString()" :label="item.name" />
         </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 label="电台简介：" prop="description">
+        <el-input v-model="form.description" type="textarea" rows="5" maxlength="300" show-word-limit
+          placeholder="请输入电台简介" />
       </el-form-item>
-      <!-- 海外电台显示 -->
-      <el-form-item label="电台链接：">
-        <el-input placeholder="请输入电台链接"></el-input>
+      <el-form-item label="资源平台：" prop="platformId">
+        <el-select v-model="form.platformId" placeholder="请选择资源平台">
+          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </el-select>
       </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 label="电台链接：" prop="fullUrl">
+        <el-input v-model="form.fullUrl" placeholder="请输入电台链接" />
       </el-form-item>
-      <el-form-item>
-        <el-button @click="getCancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">提交</el-button>
+      <el-form-item label="电台封面：" prop="thumb">
+        <Upload listType="picture-card" :url="form.thumb" @upload="upload" :disabled="disabled" />
       </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 class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
+    </div>
   </div>
 </template>
 
 <script>
 import Upload from "@/components/Upload/index";
+import { create, edit, detail } from '@/api/music/radio'
+import { platformMixin, addressMixin, contentMixin } from '@/mixin/index'
 export default {
-  dicts: ["sys_week_list"],
+  mixins: [platformMixin, addressMixin, contentMixin],
   components: {
     Upload,
   },
   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,
-    };
+      // 音频类型
+      audioType: 2,
+      // 表单
+      form: {
+        status: 1
+      },
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入电台名称', trigger: 'blur'
+        }, {
+          max: 20, message: '字符不超过20个', trigger: 'blur'
+        }],
+        addressClassifyId: [{
+          required: true, message: '请选择地域分类', trigger: 'change'
+        }],
+        contentClassifyId: [{
+          required: true, message: '请选择内容分类', trigger: 'change'
+        }],
+        description: [{
+          required: true, message: '请输入电台简介', trigger: 'blur'
+        }],
+        platformId: [{
+          required: true, message: '请选择资源平台', trigger: 'change'
+        }],
+        thumb: [{
+          required: true, message: '请上传电台封面', trigger: 'change'
+        }]
+      },
+      // 只读
+      disabled: false
+    }
+  },
+  mounted() {
+    if (this.$route.query.id) {
+      this.form.id = this.$route.query.id
+      this.disabled = Boolean(this.$route.query.disabled)
+      this.getList()
+    }
   },
   methods: {
-    getAdd() {
-      this.tableData.push({
-        name: "",
-        radio: "",
-        start: "",
-        end: "",
-      });
+    // 详情
+    getList() {
+      detail(this.form.id).then(res => {
+        if (res.code === 0) {
+          this.form = res.data
+        }
+      })
     },
-
-    // 上传封面
-    getUpload(){
-      
+    // 上传
+    upload(e) {
+      this.form.thumb = e.file
+    },
+    // 确定
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.id) {
+            edit(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('编辑成功！')
+                this.cancel()
+              }
+            })
+          } else {
+            create(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('新增成功！')
+                this.cancel()
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    // 取消
+    cancel() {
+      this.$tab.closeOpenPage('/music/radio')
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.form {
-  width: 600px;
+.el-form {
+  width: 500px;
 }
 </style>

src/views/music/radio/index.vue

@@ -1,91 +1,99 @@
 <template>
   <div class="app-container">
     <!-- 搜索 -->
-    <el-form inline label-width="100px" size="mini">
+    <el-form inline size="mini">
+      <el-form-item label="电台名称：">
+        <el-input v-model="form.name" placeholder="请输入电台名称" />
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-select v-model="form.platformId" placeholder="请选择资源平台">
+          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="地域分类：">
-        <el-select v-model="form.category_id" placeholder="请选择地域分类">
-          <el-option v-for="item in cityOptions" :key="item.id" :label="item.title" :value="item.id" />
+        <el-select v-model="form.addressClassifyId" placeholder="请选择地域分类">
+          <el-option v-for="item in addressOptions" :key="item.id" :value="item.id" :label="item.name" />
         </el-select>
       </el-form-item>
       <el-form-item label="内容分类：">
-        <el-select v-model="form.contentCategoryId" placeholder="请选择内容分类">
-          <el-option v-for="item in contentOptions" :key="item.id" :label="item.title" :value="item.id" />
+        <el-select v-model="form.contentClassifyId" placeholder="请选择内容分类">
+          <el-option v-for="item in contentOptions" :key="item.id" :value="item.id" :label="item.name" />
         </el-select>
       </el-form-item>
-      <el-form-item label="电台名称：">
-        <el-input v-model="form.name" placeholder="请输入电台名称" />
+      <el-form-item label="当前状态：">
+        <el-select v-model="form.status" placeholder="请选择当前状态">
+          <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </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-upload2" plain>上传音频文件</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
-      <el-table-column prop="id" label="电台ID" align="center" show-overflow-tooltip/>
-      <el-table-column prop="title" label="电台名称" align="center" show-overflow-tooltip />
+      <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
+      <el-table-column label="电台名称" prop="name" align="center" show-overflow-tooltip />
       <el-table-column label="电台封面" align="center" width="100px">
         <template slot-scope="scope">
-          <el-image :src="scope.row.thumbs.medium_thumb"
-            :preview-src-list="[scope.row.thumbs.medium_thumb]" />
-        </template>
-      </el-table-column>
-      <el-table-column label="电台分类" align="center" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span v-for="item in scope.row.categories" :key="item.id">{{ item.title }} </span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="description" label="电台描述" align="center" show-overflow-tooltip />
-      <el-table-column label="试听" align="center" width="400px">
-        <template slot-scope="scope">
-          <audio :src="scope.row.playUrl" controls />
+          <el-image v-if="scope.row.thumb" :src="scope.row.thumb" />
         </template>
       </el-table-column>
+      <el-table-column label="地域分类" prop="addressClassifyName" align="center" />
+      <el-table-column label="内容分类" prop="contentClassifyName" align="center" />
+      <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
+      <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id)">查看</el-button>
-          <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
-          <!-- <el-button type="text">上架</el-button> -->
-          <!-- <el-button type="text">下架</el-button> -->
+          <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
+          <span v-if="scope.row.status === 2" style="margin: 0 10px">
+            <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
+            <el-button type="text" @click="getChange(scope.row, 1)">上架</el-button>
+            <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+          </span>
+          <el-button v-else type="text" @click="getChange(scope.row, 2)">下架</el-button>
+          <Audio :src="scope.row.fullUrl" />
         </template>
       </el-table-column>
     </el-table>
-    <!-- 分页 -->
     <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
       @pagination="getList" />
   </div>
 </template>
 
 <script>
-import { getPage, getCategories } from '@/api/music/radio'
+import { platformMixin, onOrOffMixin, addressMixin, contentMixin } from '@/mixin/index'
+import { list, change, remove } from '@/api/music/radio'
+import Audio from '@/components/Audio/index.vue'
 export default {
+  name: 'Radio',
+  mixins: [platformMixin, onOrOffMixin, addressMixin, contentMixin],
+  components: {
+    Audio
+  },
   data() {
     return {
       // 遮罩层
       loading: false,
-      // 地域分类
-      cityOptions: [],
-      // 内容分类
-      contentOptions: [],
-      // 列表
-      tableData: [],
       // 表单
       form: {
         pageNum: 1,
         pageSize: 10
       },
-      total: 0
-    };
-  },
-  created() {
-    // 地域分类 内容分类
-    getCategories().then(res => {
-      if (res.code === 0) {
-        res.data.filter(i => i.name === 'regions').map(j => this.cityOptions = j.records)
-        res.data.filter(i => i.name === 'content').map(j => this.contentOptions = j.records)
-      }
-    })
+      // 总数据
+      total: 0,
+      // 音频类型
+      audioType: 2,
+      // 列表
+      tableData: [],
+      // 内容分类
+      contentOptions: [],
+      // 地域分类
+      addressOptions: []
+    }
   },
   mounted() {
     this.getList()
@@ -94,7 +102,7 @@ export default {
     // 列表
     getList() {
       this.loading = true
-      getPage(this.form).then(res => {
+      list(this.form).then(res => {
         if (res.code === 0) {
           this.tableData = res.data.records
           this.total = res.data.total
@@ -103,16 +111,6 @@ export default {
       })
     },
 
-    // 编辑 / 查看
-    getDetail(id) {
-      this.$router.push({
-        path: `/music/radio/detail`,
-        query: {
-          id: id,
-        },
-      });
-    },
-
     // 搜索
     getSearch() {
       this.form.pageNum = 1
@@ -126,7 +124,60 @@ export default {
         pageSize: 10
       }
       this.getList()
+    },
+
+    // 新增 / 查看 / 编辑
+    getDetail(id, boolean) {
+      this.$router.push({
+        path: `/music/radio/detail`,
+        query: {
+          id: id,
+          disabled: boolean
+        }
+      })
+    },
+
+    // 上下架
+    getChange(row, status) {
+      let title = status === 1 ? '上架' : '下架'
+      this.$confirm(`是否${title}${row.name}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        change(row.id, status).then(res => {
+          if (res.code === 0) {
+            this.$message.success(`${title}成功！`)
+            this.getList()
+          }
+        })
+      }).catch(() => { })
+    },
+
+
+    // 删除
+    getDelete(row) {
+      this.$confirm(`是否删除${row.name}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        remove(row.id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      }).catch(() => { })
+    },
+
+    // 字典翻译
+    platformFormatter(row) {
+      return this.selectDictLabel(this.platformOptions, row.platformId)
+    },
+
+    statusFormatter(row) {
+      return this.selectDictLabel(this.onOrOffOptions, row.status)
     }
   },
-};
-</script>
+}
+</script>
+
+<style lang="scss" scoped>
+</style>