运营管理 推荐管理 首页添加时间段定制

src/views/operation/recommend/index.vue

@@ -27,6 +27,35 @@
           </el-form-item>
         </el-form>
 
+        <!-- 推荐时间段配置 -->
+        <div v-if="tabIndex === 1 && active === 0" style="float: left">
+          <el-form label-width="auto" v-for="(item, index) in timeList" :key="item.id">
+            <el-form-item label-width="0">
+              <span style="font-weight: bold">场景电台时间设置</span>
+              <el-link icon="el-icon-close" :underline="false" style="float:right"
+                @click="getChangeTime(item.id, 2)" />
+            </el-form-item>
+            <el-form-item label="时间段：">
+              <el-date-picker v-model="item.date" type="datetimerange" start-placeholder="开始日期"
+                format="HH:mm:ss" value-format="HH:mm:ss" end-placeholder="结束日期" />
+            </el-form-item>
+            <el-form-item label="时间段文案：">
+              <el-input v-model="item.name" placeholder="请输入文案" />
+            </el-form-item>
+            <el-form-item label="时间段Icon：">
+              <Upload listType="picture-card" :url="item.pic" @upload="uploadIcon($event, index)" />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="getEmpty(item)">清空</el-button>
+              <el-button type="primary" @click="getSubmitTime(item)">提交</el-button>
+              <el-button v-if="item.status === 0" type="primary" plain @click="getChangeTime(item.id, 1)">上架
+              </el-button>
+              <el-button v-else type="primary" plain @click="getChangeTime(item.id, 0)">下架</el-button>
+            </el-form-item>
+          </el-form>
+          <el-button type="primary" style="margin-left: 30px" @click="getAdd">新增</el-button>
+        </div>
+
         <!-- 标签 -->
         <el-form class="label" v-if="label()">
           <el-form-item v-for="item in list" :key="item.id">
@@ -35,7 +64,7 @@
         </el-form>
 
         <!-- 内容列表模块 -->
-        <div v-else>
+        <div v-else :style="{'display': tabIndex === 1 && active === 0 ? 'inline-block' : 'block'}">
           <el-form label-width="auto" v-for="(item, index) in list" :key="item.id">
             <el-form-item label-width="0" :label="item.sort.toString()" />
 
@@ -180,7 +209,10 @@ import {
   contentList,
   radioList,
   moduleContent,
-  upOrDown
+  upOrDown,
+  timeList,
+  submitTime,
+  changeTime
 } from '@/api/operation/recommend'
 import Upload from '@/components/Upload/index'
 import { isFreeMixin, audioMixin, platformMixin, onOrOffMixin } from '@/mixin/index'
@@ -290,6 +322,8 @@ export default {
       // 模块内容
       contentForm: {},
       list: [],
+      // 时间段列表
+      timeList: [],
       // 弹窗
       dialogVisible: false,
       form: {
@@ -334,24 +368,14 @@ export default {
     }
   },
   watch: {
-    'form.audioType': {
-      handler(val) {
-        this.$nextTick(() => {
-          this.getPlatform({
-            audioType: val
-          })
+    'form.audioType'(val) {
+      this.$nextTick(() => {
+        this.getPlatform({
+          audioType: val
         })
-        this.form.platformId = this.platformOptions[0].value
-        this.getContentList()
-      },
-      deep: true
+      })
+      this.form.platformId = this.platformOptions[0].value
     },
-    'form.platformId': {
-      handler() {
-        this.getContentList()
-      },
-      deep: true
-    }
   },
   mounted() {
     this.getTab()
@@ -363,6 +387,7 @@ export default {
         if (res.code === 0) {
           this.tabs = res.data
           this.getModule(this.activeTab)
+          this.getTimeList()
         }
       })
     },
@@ -399,6 +424,9 @@ export default {
         this.getModuleDetail(this.module[index].id)
         this.getContentDetail(this.module[index].id)
       }
+      if (this.tabIndex === 1 && this.active === 0) {
+        this.getTimeList()
+      }
     },
 
     // 模块详情
@@ -412,6 +440,21 @@ export default {
       })
     },
 
+    // 时间段列表
+    getTimeList() {
+      this.timeList = []
+      timeList().then(res => {
+        if (res.code === 0) {
+          res.data.map(i => {
+            this.timeList.push({
+              ...i,
+              date: [i.startTime, i.endTime]
+            })
+          })
+        }
+      })
+    },
+
     // 模块内容列表
     getContentDetail(id) {
       this.list = []
@@ -473,12 +516,11 @@ export default {
         if (res.code === 0) {
           this.tableData = res.data.records
           this.total = res.data.total
-          this.$refs.tableData.clearSelection()
           if (this.tableData.length > 0) {
             this.list[this.index].childList.map(i => {
               let row = res.data.records.find(j => j.audioId === i.contentId)
               if (row) {
-                this.$refs.tableData.toggleRowSelection(row)
+                this.$refs.tableData.toggleRowSelection(row, true)
               }
             })
           }
@@ -535,7 +577,7 @@ export default {
     // 清空
     getEmpty(item) {
       Object.keys(item).map(key => {
-        if (key !== 'id' && key !== 'moduleId' && key !== 'sort') {
+        if (!['id', 'moduleId', 'sort', 'status'].includes(key)) {
           item[key] = key === 'childList' ? [] : ''
         }
       })
@@ -558,6 +600,44 @@ export default {
       }).catch(() => { })
     },
 
+    // 提交场景电台时间段
+    getSubmitTime(item) {
+      item.startTime = item.date[0]
+      item.endTime = item.date[1]
+      delete item.date
+      submitTime(item).then(res => {
+        if(res.code === 0) {
+          this.$message.success('提交成功！')
+          this.getTimeList()
+        }
+      })
+    },
+
+    // 上传icon
+    uploadIcon(e, index) {
+      this.timeList[index].pic = e.file
+    },
+
+    // 新增时间段
+    getAdd() {
+      this.timeList.push({})
+    },
+
+    // 上下架 / 删除 时间段
+    getChangeTime(id, status) {
+      let title = status === 0 ? '下架' : status === 1 ? '上架' : '删除'
+      this.$confirm(`是否${title}?`, '提醒', {
+        type: 'warning'
+      }).then(() => {
+        changeTime(id, status).then(res => {
+          if(res.code === 0) {
+            this.$message.success(`${title}成功！`)
+            this.getTimeList()
+          }
+        })
+      })
+    },
+
     // 字典翻译
     audioFormatter(row) {
       return this.selectDictLabel(this.audioOptions, row.audioType)