频道管理 定制频道

src/views/channel/custom/detail.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="app-container">
+    <!-- 表单 -->
+    <el-form class="form" label-width="100px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="频道名称：">
+            <el-input placeholder="请输入频道名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="频道属性：">
+            <el-select>
+              <el-option />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="频道封面：">
+            <Upload listType="picture-card" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="频道简介：">
+            <Editor :min-height="100" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="频道内容：">
+        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">新增内容</el-button>
+        <el-table :data="tableData" height="381" v-loading="loading">
+          <el-table-column label="内容ID" prop="id" align="center" />
+          <el-table-column label="音频名称" prop="audioName" align="center" />
+          <el-table-column label="音频封面" align="center">
+            <template slot-scope="scope">
+              <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
+            </template>
+          </el-table-column>
+          <el-table-column label="付费" prop="free" align="center" width="100px" :formatter="freeFormatter" />
+          <el-table-column label="来源" prop="audioTypeText" align="center" width="100px" />
+          <el-table-column label="操作" align="center" width="100px">
+            <el-button type="delete">删除</el-button>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <!-- 按钮 -->
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary">提交</el-button>
+    </div>
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" title="新增内容">
+      <!-- 搜索 -->
+      <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>
+          <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 label="内容ID" align="center" />
+        <el-table-column label="音频名称" align="center" />
+        <el-table-column label="音频封面" align="center">
+
+        </el-table-column>
+        <el-table-column label="分类" prop="audioTypeText" align="center" />
+        <el-table-column label="节目数量" prop="audioOrder" align="center" />
+        <el-table-column label="付费类型" align="center" />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Upload from '@/components/Upload/index'
+import Editor from '@/components/Editor/index'
+import { getChannelAudioPage } from '@/api/channel/custom'
+export default {
+  dicts:['free_yes_no'],
+  components: {
+    Upload,
+    Editor
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 弹窗
+      dialogVisible: false,
+      // 频道内容
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // 频道内容
+    getList() {
+      this.loading = true
+      getChannelAudioPage({
+        pageNum: 1,
+        pageSize: 10,
+        channelId: this.$route.query.channelId
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.loading = false
+        }
+      })
+    },
+    // 取消
+    cancel() {
+      this.$tab.closeOpenPage('/channel/custom')
+    },
+    // 字典
+    freeFormatter(row){
+      return  this.selectDictLabel(this.dict.type.free_yes_no, row.free)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.form {
+  width: 1000px;
+}
+
+.el-image{
+  width: 80px;
+  height: 80px;
+}
+</style>

src/views/channel/custom/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="app-container">
+    <!-- 新增 -->
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog('新增')">
+      新增频道
+    </el-button>
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading">
+      <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="getDialog('编辑', scope.row.id)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" :title="title" width="950px">
+      <el-form label-width="100px">
+        <el-form-item label="规则名称：" style="width: 300px">
+          <el-input placeholder="请输入规则名称" />
+        </el-form-item>
+        <el-form-item label="关联设备：">
+          <el-select placeholder="请选择关联设备">
+            <el-option />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="title === '编辑'" label="内容列表：">
+          <el-table :data="list" v-loading="dialog_loading" height="489">
+            <el-table-column label="序号" type="index" align="center" />
+            <el-table-column label="频道名称" prop="aliasName" align="center" />
+            <el-table-column label="频道封面" align="center" width="100px">
+              <template slot-scope="scope">
+                <el-image :src="scope.row.pic"></el-image>
+              </template>
+            </el-table-column>
+            <el-table-column label="频道简介" prop="description" align="center" show-overflow-tooltip />
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getChannelPage } from '@/api/channel/custom'
+export default {
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      dialog_loading: false,
+      // 列表
+      tableData: [{
+        value: 1
+      }],
+      list: [],
+      // 弹窗
+      dialogVisible: false,
+      title: ''
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    edit(row) {
+      this.$router.push({
+        path: `/channel/custom/detail`,
+        query: {
+          channelId: row.channelId
+        }
+      })
+    },
+    getDialog(key, id) {
+      this.dialogVisible = true
+      this.title = key
+      this.dialog_loading = true
+      getChannelPage().then(res => {
+        if (res.code === 0) {
+          this.list = res.data
+          this.dialog_loading = false
+        }
+      })
+    }
+  },
+};
+</script>
+
+<style>
+</style>