频道管理 定制频道 接口联调

src/views/channel/custom/detail.vue

@@ -5,37 +5,41 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="频道名称：">
-            <el-input placeholder="请输入频道名称" />
+            <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
           </el-form-item>
           <el-form-item label="频道属性：">
-            <el-select>
-              <el-option />
+            <el-select v-model="form.channelType" placeholder="请选择频道属性">
+              <el-option v-for="item in dict.type.channels_type" :key="item.value" :value="Number(item.value)"
+                :label="item.label" />
             </el-select>
           </el-form-item>
           <el-form-item label="频道封面：">
-            <Upload listType="picture-card" />
+            <Upload listType="picture-card" :url="form.pic" @upload="getUpload" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="频道简介：">
-            <Editor :height="174" />
+            <Editor :height="174" v-model="form.description" />
           </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-button type="primary" icon="el-icon-plus" @click="dialogVisible = true, getPage()">新增内容
+        </el-button>
         <el-table :data="tableData" height="381" v-loading="loading">
-          <el-table-column label="内容ID" prop="id" align="center" />
+          <el-table-column label="内容ID" prop="audioId" 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="付费" prop="isFree" align="center" width="100px" :formatter="freeFormatter" />
+          <el-table-column label="来源" prop="source" align="center" width="100px" />
           <el-table-column label="操作" align="center" width="100px">
-            <el-button type="delete">删除</el-button>
+            <template slot-scope="scope">
+              <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+            </template>
           </el-table-column>
         </el-table>
       </el-form-item>
@@ -43,37 +47,43 @@
     <!-- 按钮 -->
     <div class="form-btn">
       <el-button @click="cancel">取消</el-button>
-      <el-button type="primary">提交</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
     </div>
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="新增内容">
+    <el-dialog :visible.sync="dialogVisible" title="新增内容" width="1000px">
       <!-- 搜索 -->
       <el-form inline size="mini">
         <el-form-item label="内容名称：">
-          <el-input placeholder="请输入内容名称" />
+          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" />
         </el-form-item>
         <el-form-item label="分类：">
-          <el-select placeholder="请选择分类">
-            <el-option />
+          <el-select v-model="dialogForm.classifyId" 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-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="getRefresh">重置</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 :data="dialogData" height="476" ref="table" :row-key="rowKey" @selection-change="getChange">
+        <el-table-column type="selection" />
+        <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="audioTypeText" align="center" />
-        <el-table-column label="节目数量" prop="audioOrder" align="center" />
-        <el-table-column label="付费类型" align="center" />
+        <el-table-column label="付费" prop="isFree" align="center" width="100px" :formatter="freeFormatter" />
+        <el-table-column label="来源" prop="source" align="center" width="100px" />
       </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
+        :limit.sync="dialogForm.pageSize" @pagination="getPage" />
+      <div slot="footer">
+        <el-button @click="getAdd" type="primary">确定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -81,9 +91,9 @@
 <script>
 import Upload from '@/components/Upload/index'
 import Editor from '@/components/Editor/index'
-import { getChannelAudioPage } from '@/api/channel/custom'
+import { channelList, channelTemplate, channelDetail, edit, list, remove, queryList } from '@/api/channel/custom'
 export default {
-  dicts: ['free_yes_no'],
+  dicts: ['free_yes_no', 'channels_type'],
   components: {
     Upload,
     Editor
@@ -95,34 +105,146 @@ export default {
       // 弹窗
       dialogVisible: false,
       // 频道内容
-      tableData: []
+      tableData: [],
+      dialogData: [],
+      // 编辑表单
+      form: {},
+      // 接口表单
+      data: {
+        channelId: this.$route.query.channelId,
+        audioType: this.$route.query.audioType
+      },
+      // 列表表单
+      dialogForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0,
+
+      // 添加频道内容
+      ids: [],
     }
   },
   mounted() {
+    this.getDetail()
     this.getList()
   },
   methods: {
-    // 频道内容
+    // 频道详情
+    getDetail() {
+      channelDetail({
+        channelId: this.data.channelId
+      }).then(res => {
+        if (res.code === 0) {
+          this.form = res.data
+        }
+      })
+    },
+
+    // 频道内容列表
     getList() {
-      this.loading = true
-      getChannelAudioPage({
-        pageNum: 1,
-        pageSize: 10,
-        channelId: this.$route.query.channelId
+      queryList(this.data.channelId).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data
+        }
+      })
+    },
+
+    // 可选全部频道内容列表
+    getPage() {
+      // 分类
+      channelTemplate(this.data).then(res => {
+        console.log(res);
+      })
+
+      channelList({
+        ...this.data,
+        ...this.dialogForm
       }).then(res => {
         if (res.code == 0) {
-          this.tableData = res.data.records
-          this.loading = false
+          this.dialogData = res.data[0].pageData.records
+          this.total = res.data[0].pageData.total
+          this.$nextTick(() => {
+            this.tableData.map(i => {
+              let row = res.data[0].pageData.records.find(j => j.id === i.audioId)
+              this.$refs.table.toggleRowSelection(row)
+            })
+          })
         }
       })
     },
+
+    // 上传频道封面
+    getUpload(e) {
+      this.form.pic = e.file
+    },
+
+    // 搜索
+    getSearch() {
+      this.dialogForm.pageNum = 1
+      this.getPage()
+    },
+    // 重置
+    getRefresh() {
+      this.dialogForm = {
+        pageNum: 1,
+        pageSize: 10,
+        ...this.data
+      }
+      this.getPage()
+    },
+
+    // 提交
+    submit() {
+      edit(this.form).then(res => {
+        if (res.code === 0) {
+          this.$message.success('修改成功！')
+        }
+      })
+    },
+
     // 取消
     cancel() {
       this.$tab.closeOpenPage('/channel/custom')
     },
-    // 字典
+
+    // 删除
+    getDelete(row) {
+      remove(row.id).then(res => {
+        if (res.code === 0) {
+          this.$message.success('删除成功！')
+          this.getList()
+        }
+      })
+    },
+
+    rowKey(row) {
+      return row.id
+    },
+    // 表格多选
+    getChange(row) {
+      this.ids = []
+      row.map(i => this.ids.push(i.id))
+    },
+
+    // 添加频道内容
+    getAdd() {
+      list({
+        audioType: this.data.audioType,
+        channelDefaultId: this.data.channelId,
+        ids: this.ids
+      }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('添加成功！')
+          this.dialogVisible = false
+          this.getList()
+        }
+      })
+    },
+
+    // 字典翻译
     freeFormatter(row) {
-      return this.selectDictLabel(this.dict.type.free_yes_no, row.free)
+      return this.selectDictLabel(this.dict.type.free_yes_no, row.isFree)
     }
   }
 }

src/views/channel/custom/index.vue

@@ -1,29 +1,31 @@
 <template>
   <div class="app-container">
     <!-- 新增 -->
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog('新增')">
+    <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" type="index" />
       <el-table-column label="规则名称" prop="name" align="center" />
       <el-table-column label="部署形式" prop="type" align="center" :formatter="typeFormatter" />
-      <el-table-column label="设备" prop="deviceIds" align="center" />
+      <el-table-column label="设备" prop="deviceIds" align="center" :formatter="devFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDialog('编辑', scope.row.id)">编辑</el-button>
+          <el-button type="text" @click="getDialog(scope.row, scope.$index)">编辑</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-form-item v-if="index !== 1" label="规则名称：" style="width: 300px">
           <el-input v-model="dialogForm.name" placeholder="请输入规则名称" />
         </el-form-item>
-        <el-form-item label="关联设备：">
-          <el-select v-model="dialogForm.deviceIds" multiple placeholder="请选择关联设备">
-            <el-option v-for="item in devOptions" :key="item.name" :value="item.clientTypeId" :label="item.name" />
+        <el-form-item v-if="index !== 1" label="关联设备：">
+          <el-select v-model="ids" multiple placeholder="请选择关联设备">
+            <el-option v-for="item in devOptions" :key="item.label" :value="item.value.toString()"
+              :label="item.label" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="title === '编辑'" label="内容列表：">
@@ -44,7 +46,7 @@
           </el-table>
         </el-form-item>
       </el-form>
-      <div slot="footer">
+      <div slot="footer" v-if="index !== 1">
         <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="getSubmit">确定</el-button>
       </div>
@@ -53,7 +55,7 @@
 </template>
 
 <script>
-import { channelPage, page, create } from '@/api/channel/custom'
+import { channelPage, page, create, editPage } from '@/api/channel/custom'
 import { devList } from '@/api/device/list'
 export default {
   dicts: ['deployment_form'],
@@ -75,13 +77,20 @@ export default {
       },
       // 关联设备列表
       devOptions: [],
-      dialogForm: {}
+      index: 0,
+      dialogForm: {},
+      ids: []
     };
   },
   mounted() {
     devList().then(res => {
       if (res.code === 0) {
-        this.devOptions = res.data
+        res.data.map(i => {
+          this.devOptions.push({
+            value: i.clientTypeId,
+            label: i.name
+          })
+        })
       }
     })
     this.getList()
@@ -89,10 +98,11 @@ export default {
   methods: {
     // 列表
     getList() {
+      this.loading = true
       page(this.form).then(res => {
-        console.log(res);
         if (res.code === 0) {
           this.tableData = res.data
+          this.loading = false
         }
       })
     },
@@ -102,38 +112,66 @@ export default {
       this.$router.push({
         path: `/channel/custom/detail`,
         query: {
-          channelId: row.channelId
+          channelId: row.id,
+          audioType: row.channelType
         }
       })
     },
 
     // 弹窗
-    getDialog(key, id) {
+    getDialog(row, index) {
       this.dialogVisible = true
-      this.title = key
-      this.dialog_loading = true
-      channelPage().then(res => {
-        if (res.code === 0) {
-          this.list = res.data
-          this.dialog_loading = false
+      this.index = index + 1
+      if (row) {
+        this.title = '编辑'
+        this.dialogForm = row
+        if (this.index !== 1) {
+          this.ids = this.dialogForm.deviceIds.split(',')
         }
-      })
+        channelPage().then(res => {
+          if (res.code === 0) {
+            this.list = res.data
+            this.dialog_loading = false
+          }
+        })
+      } else {
+        this.dialogForm = {}
+        this.title = '新增'
+      }
     },
 
     // 创建
     getSubmit() {
-      let ids = this.dialogForm.deviceIds.join(',')
-      create({
-        name: this.dialogForm.name,
-        deviceIds: ids
-      }).then(res => {
-        console.log(res);
-      })
+      this.dialogForm.deviceIds = this.ids.join(',')
+      if (this.title = '编辑') {
+        editPage(this.dialogForm).then(res => {
+          if (res.code === 0) {
+            this.$message.success('修改成功！')
+            this.dialogVisible = false
+            this.getList()
+          }
+        })
+      } else {
+        create({
+          name: this.dialogForm.name,
+          deviceIds: this.dialogForm.deviceIds,
+          type: 1
+        }).then(res => {
+          if (res.code === 0) {
+            this.$message.success('新增成功！')
+            this.dialogVisible = false
+            this.getList()
+          }
+        })
+      }
     },
 
     // 字典翻译
     typeFormatter(row) {
       return this.selectDictLabel(this.dict.type.deployment_form, row.type)
+    },
+    devFormatter(row) {
+      return row.deviceIds ? row.deviceIds.split(',').map(i => this.selectDictLabel(this.devOptions, i)).join(',') : ''
     }
   },
 };