运营管理 定制频道 频道顺序可修改 文案修改

src/views/operation/channel/detail.vue

@@ -8,7 +8,8 @@
             <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
           </el-form-item>
           <el-form-item label="频道属性：">
-            <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled">
+            <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled"
+              @change="handleChange">
               <el-option v-for="item in dict.type.channels_type" :key="item.value" :value="Number(item.value)"
                 :label="item.label" />
             </el-select>
@@ -28,16 +29,16 @@
           新增内容
         </el-button>
         <el-table :data="tableData" v-loading="loading">
-          <el-table-column label="内容ID" prop="audioId" align="center" />
-          <el-table-column label="音频名称" prop="audioName" align="center" />
+          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
+          <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
           <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="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-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
+          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
+          <el-table-column label="操作" align="center">
             <template slot-scope="scope">
               <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
             </template>
@@ -54,14 +55,25 @@
     <el-dialog :visible.sync="dialogVisible" title="新增内容" width="1000px">
       <!-- 搜索 -->
       <el-form inline size="mini" @submit.native.prevent>
-        <el-form-item label="内容名称：">
-          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
+        <el-form-item label="资源平台：">
+          <el-select v-model="dialogForm.platformId">
+            <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="dialogForm.classifyId" placeholder="请选择分类" clearable>
-            <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value="item.id" />
+        <el-form-item v-if="![2, 7].includes(form.channelType)" label="付费类型：">
+          <el-select v-if="form.channelType === 6" v-model="dialogForm.isFree" placeholder="请选择付费类型">
+            <el-option v-for="item in freeOptions" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+          <el-select v-else v-model="dialogForm.payType">
+            <el-option v-for="item in payTypeOptions" :key="item.value" :label="item.label"
+              :value="item.value" />
           </el-select>
         </el-form-item>
+        <el-form-item label="内容名称：">
+          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
+        </el-form-item>
         <el-form-item>
           <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
           <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
@@ -71,15 +83,17 @@
       <el-table :data="dialogData" height="476" ref="table" :row-key="getRowKey"
         @selection-change="getChange">
         <el-table-column type="selection" align="center" :reserve-selection="true" />
-        <el-table-column label="内容ID" prop="id" align="center" />
-        <el-table-column label="音频名称" prop="audioName" align="center" />
-        <el-table-column label="音频封面" align="center">
+        <el-table-column label="音频ID" prop="id" align="center" show-overflow-tooltip />
+        <el-table-column label="音频名称" prop="name" align="center" />
+        <el-table-column label="音频封面" align="center" width="100px">
           <template slot-scope="scope">
-            <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
+            <el-image v-if="scope.row.cover" :src="scope.row.cover" />
+            <el-image v-else :src="scope.row.thumb" />
           </template>
         </el-table-column>
-        <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 v-if="![2, 7].includes(form.channelType)" label="付费类型" prop="isFree" align="center"
+          :formatter="freeFormatter" />
+        <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
       </el-table>
       <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
         :limit.sync="dialogForm.pageSize" @pagination="getPage" />
@@ -92,11 +106,14 @@
 
 <script>
 import Upload from '@/components/Upload/index'
-import { channelList, channelTemplate, channelDetail, edit, list, remove, queryList } from '@/api/operation/channel'
-import { isFreeMixin } from '@/mixin/index'
+import { channelList, channelDetail, edit, remove, queryList } from '@/api/operation/channel'
+import { list as listForRadio } from '@/api/music/radio'
+import { list as listForProgram } from '@/api/music/program'
+import { list as listForBlog } from '@/api/music/blog'
+import { platformMixin, payTypeMixin, isFreeMixin } from '@/mixin/index'
 export default {
   dicts: ['channels_type'],
-  mixins: [isFreeMixin],
+  mixins: [platformMixin, payTypeMixin, isFreeMixin],
   components: {
     Upload
   },
@@ -137,6 +154,9 @@ export default {
       }).then(res => {
         if (res.code === 0) {
           this.form = res.data
+          this.getPlatform({
+            audioType: res.data.channelType
+          })
         }
       })
     },
@@ -150,33 +170,50 @@ export default {
       })
     },
 
+    // 修改频道属性
+    handleChange(e) {
+      let type = e === 7 ? 2 : e === 11 ? 8 : e
+      this.getPlatform({
+        audioType: type
+      })
+      let obj = {
+        id: ''
+      }
+      this.tableData.map((i, index) => obj.id += i.id + (index + 1 < this.tableData.length ? ',' : ''))
+      this.getDelete(obj)
+    },
+
     // 可选全部频道内容列表
     getPage() {
-      channelTemplate({
-        audioType: this.form.channelType
-      }).then(res => {
-        if (res.code === 0) {
-          this.classifyOptions = res.data
-        }
-      })
-      channelList({
-        channelId: this.channelId,
-        audioType: this.form.channelType,
-        ...this.dialogForm
-      }).then(res => {
-        if (res.code == 0) {
-          this.dialogData = res.data[0].pageData.records
-          this.total = res.data[0].pageData.total
-          if (this.tableData.length > 0) {
-            this.tableData.map(i => {
-              let row = res.data[0].pageData.records.find(j => j.id === i.audioId)
-              if (row) {
-                this.$refs.table.toggleRowSelection(row, true)
-              }
-            })
-          }
+      if ([2, 7].includes(this.form.channelType)) {
+        listForRadio(this.dialogForm).then(res => {
+          this.getRes(res)
+        })
+      } else if (this.form.channelType === 6) {
+        listForProgram(this.dialogForm).then(res => {
+          this.getRes(res)
+        })
+      } else {
+        listForBlog(this.dialogForm).then(res => {
+          this.getRes(res)
+        })
+      }
+    },
+
+    // 抽离方法
+    getRes(res) {
+      if (res.code == 0) {
+        this.dialogData = res.data.records
+        this.total = res.data.total
+        if (this.tableData.length > 0) {
+          this.tableData.map(i => {
+            let row = res.data.records.find(j => j.id === i.audioId)
+            if (row) {
+              this.$refs.table.toggleRowSelection(row, true)
+            }
+          })
         }
-      })
+      }
     },
 
     // 上传频道封面
@@ -249,7 +286,7 @@ export default {
 
     // 添加频道内容
     getAdd() {
-      list({
+      channelList({
         audioType: this.form.channelType,
         channelDefaultId: this.channelId,
         ids: this.ids
@@ -264,7 +301,11 @@ export default {
 
     // 字典翻译
     freeFormatter(row) {
-      return this.selectDictLabel(this.freeOptions, row.isFree)
+      return this.selectDictLabel(this.form.channelType === 6 ? this.freeOptions : this.payTypeOptions, row.isFree)
+    },
+
+    platfromFormatter(row) {
+      return this.selectDictLabel(this.platformOptions, row.platformId)
     }
   }
 }

src/views/operation/channel/index.vue

@@ -36,9 +36,9 @@
           </el-select>
         </el-form-item>
         <el-form-item v-if="title === '编辑'" label="内容列表：">
-          <el-table :data="list" v-loading="dialog_loading" height="489" lazy>
-            <el-table-column label="序号" type="index" align="center" />
-            <el-table-column label="频道名称" prop="aliasName" align="center" />
+          <el-table :data="list" v-loading="dialog_loading" lazy :default-sort="{prop: 'sort'}">
+            <el-table-column label="序号" prop="sort" align="center" width="100px" />
+            <el-table-column label="频道名称" prop="aliasName" align="center" show-overflow-tooltip />
             <el-table-column label="频道封面" align="center" width="100px">
               <template slot-scope="scope">
                 <el-image :src="scope.row.pic"></el-image>
@@ -48,6 +48,10 @@
             <el-table-column label="操作" align="center">
               <template slot-scope="scope">
                 <el-button type="text" @click="edit(scope)">编辑</el-button>
+                <el-button v-if="scope.row.sort > 3" type="text" icon="el-icon-caret-top"
+                  @click="getChange(scope.row.id, scope.row.sort - 1)" />
+                <el-button v-if="scope.row.sort > 2" type="text" icon="el-icon-caret-bottom"
+                  @click="getChange(scope.row.id, scope.row.sort + 1)" />
               </template>
             </el-table-column>
           </el-table>
@@ -62,7 +66,7 @@
 </template>
 
 <script>
-import { channelPage, page, create, editPage, getRemove, devList } from '@/api/operation/channel'
+import { channelPage, page, create, editPage, getRemove, devList, change } from '@/api/operation/channel'
 export default {
   name: 'Channel',
   dicts: ['deployment_form'],
@@ -87,7 +91,9 @@ export default {
       },
       index: 0,
       dialogForm: {},
-      ids: []
+      ids: [],
+      // 频道规则Id
+      obj: {}
     };
   },
   watch: {
@@ -157,7 +163,7 @@ export default {
     getDialog(row, index) {
       this.dialogVisible = true
       this.index = index + 1
-
+      this.obj = row
       // 新增 / 编辑时的设备
       let type = row ? 1 : 0
       devList(type).then(res => {
@@ -178,12 +184,7 @@ export default {
         if (this.index !== 1) {
           this.ids = this.dialogForm.deviceIds.split(',')
         }
-        channelPage(row.id).then(res => {
-          if (res.code === 0) {
-            this.list = res.data
-            this.dialog_loading = false
-          }
-        })
+        this.getPage(row)
       } else {
         this.ids = []
         this.dialogForm = {}
@@ -191,6 +192,16 @@ export default {
       }
     },
 
+    // 十二频道
+    getPage(row) {
+      channelPage(row.id).then(res => {
+        if (res.code === 0) {
+          this.list = res.data
+          this.dialog_loading = false
+        }
+      })
+    },
+
     // 创建
     getSubmit() {
       if (this.title === '编辑') {
@@ -216,6 +227,19 @@ export default {
       }
     },
 
+    // 排序
+    getChange(id, sort) {
+      change({
+        id: id,
+        sort: sort
+      }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('修改成功！')
+          this.getPage(this.obj)
+        }
+      })
+    },
+
     // 取消
     cancel() {
       this.dialogVisible = false