运营管理 推荐管理

src/views/operation/recommend/index.vue

@@ -1,31 +1,625 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeTab">
-      <el-tab-pane label="推荐" name="first">
-        <tab1 />
-      </el-tab-pane>
+    <el-tabs v-model="activeTab" @tab-click="handleClick">
+      <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="item.id.toString()" />
     </el-tabs>
+
+    <!-- 内容 -->
+    <div style="display: flex; position: relative">
+      <el-image class="bg" :src="img" />
+      <div :class="['item', active === index ? 'active' : '']"
+        :style="{top: item.top + 'px', height: item.height + 'px'}" v-for="(item, index) in style[tabIndex]"
+        :key="index" @click="getActive(index)" />
+
+      <div class="form">
+        <!-- 标题内容模块 -->
+        <el-form v-if="content()" label-width="auto">
+          <el-form-item label="标题">
+            <el-input v-model="contentForm.name" placeholder="请输入标题" />
+          </el-form-item>
+          <el-form-item label="简介：" v-if="active === 9">
+            <el-input v-model="contentForm.description" type="textarea" rows="4" placeholder="请输入简介" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="getChange">提交</el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- 标签 -->
+        <el-form class="label" v-if="label()">
+          <el-form-item v-for="item in list" :key="item.id">
+            <el-button type="primary">{{ item.title }}</el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- 内容列表模块 -->
+        <div v-else>
+          <el-form label-width="auto" v-for="(item, index) in list" :key="item.id">
+            <el-form-item label-width="0" :label="item.sort.toString()" />
+
+            <el-form-item label="时间：" v-if="time()">
+              <el-date-picker v-model="item.date" type="datetimerange" start-placeholder="开始日期"
+                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-form-item>
+
+            <el-form-item label="标题：" v-if="title()">
+              <el-input v-model="item.title" placeholder="请输入标题" />
+            </el-form-item>
+
+            <el-form-item label="模式：" v-if="model()">
+              <el-select v-model="item.model" placeholder="请选择模式">
+                <el-option v-for="item in dict.type.content_model" :key="item.value" :label="item.label"
+                  :value="Number(item.value)" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="跳转方式：" v-if="forwardType()">
+              <el-select v-model="item.forwardType" placeholder="请选择跳转方式">
+                <el-option v-for="item in dict.type.nav_address_status" :key="item.value" :label="item.label"
+                  :value="Number(item.value)" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="内容：" v-if="contentName(item)">
+              <el-input v-model="item.contentName" prefix-icon="el-icon-search" placeholder="选择内容"
+                @focus="getDialog(index)" />
+            </el-form-item>
+
+            <el-form-item label="简介：" v-if="description(item)">
+              <el-input v-model="item.description" type="textarea" rows="4" placeholder="请输入简介" />
+            </el-form-item>
+
+            <el-form-item label="跳转地址：" v-if="forwardUrl(item)">
+              <el-input v-model="item.forwardUrl" placeholder="请输入跳转地址" />
+            </el-form-item>
+
+            <el-form-item label="封面模式：" v-if="isCustom(item)">
+              <el-select v-model="item.isCustom" placeholder="选择封面模式">
+                <el-option v-for="item in dict.type.is_custom" :key="item.value" :label="item.label"
+                  :value="Number(item.value)" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="图片：" v-if="pic(item)">
+              <Upload listType="picture-card" :url="item.pic" @upload="getUpload($event, index)" />
+            </el-form-item>
+
+            <el-form-item label="列表：" v-if="isList()">
+              <el-button type="primary" @click="getDialog(index)">添加内容</el-button>
+              <el-table :data="item.list">
+                <el-table-column label="电台名称：" prop="contentName" align="center" />
+                <el-table-column label="操作" align="center">
+                  <template>
+                    <el-button type="delete">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button @click="getEmpty(item)">清空</el-button>
+              <el-button type="primary" @click="getSubmit(item)">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" title="添加内容" width="1000px">
+      <el-form inline>
+        <el-form-item label="平台：">
+          <el-select v-model="form.platformId" placeholder="请选择平台">
+            <el-option v-for="item in dict.type.platform_type" :key="item.value" :label="item.label"
+              :value="Number(item.value)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型：">
+          <el-select v-model="form.audioType" placeholder="请选择类型"
+            :disabled="this.tabIndex == 2 && this.active === 1">
+            <el-option v-for="item in dict.type.audio_type" :key="item.value" :label="item.label"
+              :value="Number(item.value)" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData" height="584" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" />
+        <el-table-column label="音频ID" prop="audioId" align="center" />
+        <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+        <el-table-column label="音频封面" align="center" width="100px">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.audioPic" />
+          </template>
+        </el-table-column>
+        <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioFormatter" />
+        <el-table-column label="节目数量" prop="programCount" align="center" />
+        <el-table-column label="付费类型" align="center" :formatter="freeFormatter" width="100px" />
+        <el-table-column label="操作" align="center" v-if="this.tabIndex !== 2 && this.active !== 1">
+          <template slot-scope="scope">
+            <el-button type="text" @click="getSelect(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+        @pagination="getContentList" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import tab1 from './component/tab_1.vue'
+import {
+  listAll,
+  recommendList,
+  moduleDetail,
+  submit,
+  contentList,
+  radioList,
+  moduleContent
+} from '@/api/operation/recommend'
+import Upload from '@/components/Upload/index'
 
 export default {
-  components:{
-    tab1
+  dicts: [
+    'platform_type',
+    'audio_type',
+    'free_yes_no',
+    'is_custom',
+    'nav_address_status',
+    'content_model'
+  ],
+  components: {
+    Upload
   },
   data() {
     return {
-      activeTab: 'first',
+      // 分类列表
+      tabs: [],
+      // 选中分类
+      activeTab: '77',
+      // 分类排序
+      tabIndex: 1,
+      // 模板列表
+      module: [],
+      // 模板图
+      imgOptions: {
+        '0': require('@/assets/images/operation/recommend.svg'),
+        '1': require('@/assets/images/operation/radio.svg'),
+        '2': require('@/assets/images/operation/music.svg'),
+        '3': require('@/assets/images/operation/story.svg'),
+        '4': require('@/assets/images/operation/kid.svg'),
+        '5': require('@/assets/images/operation/other.svg')
+      },
+      img: require('@/assets/images/operation/recommend.svg'),
+      // 选中模块
+      style: {
+        '1': [
+          { top: 150, height: 225 },
+          { top: 380, height: 175 },
+          { top: 560, height: 185 },
+          { top: 750, height: 315 },
+          { top: 1070, height: 645 },
+          { top: 1720, height: 185 },
+          { top: 1910, height: 220 },
+          { top: 2140, height: 315 },
+          { top: 2460, height: 295 },
+          { top: 2760, height: 600 },
+          { top: 3370, height: 260 },
+          { top: 3635, height: 600 }
+        ],
+        '2': [
+          { top: 135, height: 165 },
+          { top: 310, height: 250 },
+          { top: 570, height: 100 },
+          { top: 1465, height: 570 }
+        ],
+        '3': [
+          { top: 150, height: 170 },
+          { top: 385, height: 90 },
+          { top: 480, height: 215 },
+          { top: 700, height: 175 },
+          { top: 880, height: 310 },
+          { top: 1195, height: 300 },
+          { top: 1500, height: 215 },
+          { top: 1720, height: 305 },
+          { top: 2490, height: 210 },
+          { top: 2705, height: 220 },
+        ],
+        '4': [
+          { top: 150, height: 165 },
+          { top: 320, height: 115 },
+          { top: 440, height: 405 },
+          { top: 850, height: 230 },
+          { top: 1085, height: 410 },
+          { top: 1500, height: 130 },
+          { top: 1635, height: 405 },
+          { top: 2045, height: 170 },
+          { top: 2220, height: 405 },
+          { top: 2850, height: 405 },
+          { top: 3260, height: 405 },
+          { top: 3670, height: 620 }
+        ],
+        '5': [
+          { top: 150, height: 180 },
+          { top: 335, height: 120 },
+          { top: 460, height: 425 },
+          { top: 890, height: 125 },
+          { top: 1020, height: 425 },
+          { top: 1450, height: 210 },
+          { top: 1665, height: 425 },
+          { top: 2325, height: 640 }
+        ],
+        '6': [
+          { top: 140, height: 165 },
+          { top: 310, height: 115 },
+          { top: 430, height: 375 },
+          { top: 810, height: 385 },
+          { top: 1200, height: 120 },
+          { top: 1325, height: 390 },
+          { top: 1720, height: 160 },
+          { top: 1885, height: 385 },
+          { top: 2480, height: 390 },
+          { top: 2875, height: 590 }
+        ]
+      },
+      active: 0,
+      // 模块内容
+      contentForm: {},
+      list: [],
+      // 表单
+      form: {},
+
+      // 弹窗
+      dialogVisible: false,
+      form: {
+        audioType: 2,
+        platformId: 1,
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0,
+      index: 0,
+      // 列表
+      tableData: []
     }
   },
+  watch: {
+    'form.audioType'() {
+      this.getContentList()
+    },
+    'form.platformId'() {
+      this.getContentList()
+    },
+  },
+  mounted() {
+    this.getTab()
+  },
   methods: {
+    // 分类列表
+    getTab() {
+      listAll().then(res => {
+        if (res.code === 0) {
+          this.tabs = res.data
+          this.getModule(this.activeTab)
+        }
+      })
+    },
+
+    // 切换分类
+    handleClick(e) {
+      this.activeTab = this.tabs[e.index].id.toString()
+      this.tabIndex = this.tabs[e.index].tabIndex
+      e.index >= 5 ? e.index = 5 : e.index
+      this.img = this.imgOptions[e.index]
+      this.active = 0
+      this.list = []
+      this.getModule(this.activeTab)
+    },
+
+    // 模块列表
+    getModule(id) {
+      recommendList({
+        categoryId: id
+      }).then(res => {
+        if (res.code === 0) {
+          this.module = res.data
+          this.getDetail(res.data[0].id)
+        }
+      })
+    },
+
+    // 选择模块
+    getActive(index) {
+      if (this.active !== index) {
+        this.active = index
+        this.getDetail(this.module[index].id)
+      }
+    },
+
+    // 模块详情
+    getDetail(id) {
+      // 标题模块内容
+      moduleDetail({
+        id: id
+      }).then(res => {
+        if (res.code === 0) {
+          this.contentForm = res.data
+        }
+      })
+
+      // 模块内容列表
+      this.list = []
+      contentList({
+        moduleId: id
+      }).then(res => {
+        if (res.code === 0) {
+          res.data.map(i => {
+            this.list.push({
+              ...i,
+              date: [i.startTime, i.endTime]
+            })
+          })
+        }
+      })
+    },
+
+    // 标题模块提交
+    getChange() {
+      moduleContent(this.contentForm).then(res => {
+        if (res.code === 0) {
+          this.$message.success('提交成功！')
+          this.getDetail(this.contentForm.id)
+        }
+      })
+    },
+
+    // 内容列表提交
+    getSubmit(item) {
+      item.startTime = item.date[0]
+      item.endTime = item.date[1]
+      delete item.date
+      submit(item).then(res => {
+        if (res.code === 0) {
+          this.$message.success('提交成功！')
+          this.getDetail(item.moduleId)
+        }
+      })
+    },
+
+    // 弹窗
+    getDialog(index) {
+      this.dialogVisible = true
+      this.index = index
+      this.list[this.index].list = []
+      this.getContentList()
+    },
+
+    // 内容列表
+    getContentList() {
+      radioList(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    // 选择某一个音频内容
+    getSelect(row) {
+      let e = this.list[this.index]
+      e.contentId = row.audioId
+      e.contentName = row.audioName
+      this.dialogVisible = false
+      this.$message.success('选择成功！')
+    },
 
+    // 批量选择
+    handleSelectionChange(row) {
+      row.map(i => {
+        this.list[this.index].list.push({
+          contentId: i.audioId,
+          contentName: i.audioName
+        })
+      })
+    },
+
+    // 上传图片
+    getUpload(e, index) {
+      this.list[index].pic = e.file
+    },
+
+    // 清空
+    getEmpty(item) {
+      Object.keys(item).map(key => {
+        if (key !== 'id' && key !== 'moduleId') {
+          item[key] = ''
+        }
+      })
+    },
+
+    // 字典翻译
+    audioFormatter(row) {
+      return this.selectDictLabel(this.dict.type.audio_type, row.audioType)
+    },
+    freeFormatter(row) {
+      return this.selectDictLabel(this.dict.type.free_yes_no, row.isFree)
+    },
+
+    // v-if判断
+    // 标题模块
+    content() {
+      let rules = {
+        '1': [3, 4, 8].includes(this.active),
+        '2': [1].includes(this.active),
+        '3': [2].includes(this.active),
+        '4': [2].includes(this.active),
+        '5': [2, 4, 5, 6, 7].includes(this.active),
+        '6': [2, 3, 5, 7, 8, 9].includes(this.active)
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 标签模块
+    label() {
+      let rules = {
+        '2': this.tabIndex === 2 && this.active === 2,
+        '3': this.tabIndex === 3 && this.active === 1,
+        '4': [1, 5].includes(this.active) && this.tabIndex === 4,
+        '5': [1, 3].includes(this.active) && this.tabIndex === 5,
+        '6': [1, 4].includes(this.active) && this.tabIndex === 6
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 时间
+    time() {
+      let rules = {
+        '1': this.active !== 3 && this.active !== 8,
+        '2': [0, 3].includes(this.active),
+        '3': this.active !== 1,
+        '4': this.active !== 1 || this.active !== 5,
+        '5': this.active !== 1 || this.active !== 3,
+        '6': this.active !== 1 || this.active !== 4
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 标题
+    title() {
+      let rules = {
+        '1': this.active === 10,
+        '2': this.active === 1,
+        '3': [3, 5, 9].includes(this.active),
+        '4': [7].includes(this.active),
+        '5': [5].includes(this.active)
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 模式
+    model() {
+      let rules = {
+        '1': [4, 5, 7, 9, 11].includes(this.active),
+        '2': [3].includes(this.active),
+        '3': [4, 7, 8].includes(this.active),
+        '4': [2, 4, 6, 8, 9, 10, 11].includes(this.active),
+        '5': [2, 4, 6, 7].includes(this.active),
+        '6': [2, 3, 5, 7, 8, 9].includes(this.active)
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 跳转方式
+    forwardType() {
+      let rules = {
+        '1': [1, 2].includes(this.active),
+        '2': [0].includes(this.active),
+        '3': [0].includes(this.active),
+        '4': [0, 3].includes(this.active),
+        '5': [0].includes(this.active),
+        '6': [0].includes(this.active)
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 内容
+    contentName(item) {
+      let rules = {
+        '1': [0, 6, 8, 10].includes(this.active),
+        '3': [2, 3, 5, 6, 9].includes(this.active),
+        '4': [7].includes(this.active),
+        '5': [5].includes(this.active),
+        '6': [6].includes(this.active)
+      }
+      return rules[this.tabIndex] || [0, 1].includes(item.forwardType) || item.model === 1
+    },
+
+    // 简介
+    description(item) {
+      let rules = {
+        '1': (this.active === 7 && item.model === 1) || this.active === 10,
+        '3': [3, 5].includes(this.active) || [4, 7, 8].includes(this.active) && item.model === 1,
+        '4': [7].includes(this.active)
+      }
+      return rules[this.tabIndex]
+    },
+
+    // 跳转连接
+    forwardUrl(item) {
+      return [2, 3].includes(item.forwardType)
+    },
+
+    // 封面模式
+    isCustom(item) {
+      let rules = {
+        '1': [0, 8].includes(this.active),
+        '5': [5].includes(this.active)
+      }
+      return rules[this.tabIndex] || item.model === 1
+    },
+
+    // 图片
+    pic(item) {
+      let rules = {
+        '1': [1, 2, 6, 8, 10].includes(this.active),
+        '2': [0, 1].includes(this.active),
+        '3': [0, 2, 3, 5, 6, 9].includes(this.active),
+        '4': [0, 3, 7].includes(this.active),
+        '5': [0, 5].includes(this.active),
+        '6': [0, 6].includes(this.active)
+      }
+      return rules[this.tabIndex] || item.isCustom === 0 || item.model === 1
+    },
+
+    // 列表
+    isList() {
+      return this.tabIndex === 2 && this.active === 1
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.bg {
+  width: 365px;
+  .el-image__error,
+  .el-image__placeholder,
+  .el-image__inner {
+    height: auto;
+  }
+}
+
+.item {
+  position: absolute;
+  left: 0;
+  width: 365px;
+  border: 1px solid yellow;
+}
+
+.active {
+  background: rgba(255, 255, 0, 0.3);
+}
 
+.form {
+  width: calc(100% - 395px);
+
+  .el-form {
+    width: 500px;
+    margin-left: 30px;
+    border: 1px solid #dcdfe6;
+    box-shadow: 5px 5px 5px 0px #dcdfe6;
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+.label {
+  display: flex;
+  flex-wrap: wrap;
+
+  .el-form-item {
+    width: calc(100% / 4);
+    margin: 0;
+    text-align: center;
+  }
+}
 </style>