ohplay_system/src/views/operation/recommend/index.vue

<template>
  <div class="app-container">
    <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; align-items: flex-start">
      <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="tabIndex === 1 && active === 8">
            <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 size="mini">
        <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-item label="内容：">
          <el-input v-model="form.keyword" placeholder="请输入内容关键词" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        </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 {
  listAll,
  recommendList,
  moduleDetail,
  submit,
  contentList,
  radioList,
  moduleContent
} from '@/api/operation/recommend'
import Upload from '@/components/Upload/index'

export default {
  dicts: [
    'platform_type',
    'audio_type',
    'free_yes_no',
    'is_custom',
    'nav_address_status',
    'content_model'
  ],
  components: {
    Upload
  },
  data() {
    return {
      // 分类列表
      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: []
    }
  },
  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()
    },

    // 搜索
    getSearch(){
      this.form.pageNum = 1
      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
      e.platformId = row.platformId
      e.contentType = row.audioType
      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, 5, 6, 8].includes(this.active),
        '2': [1, 3].includes(this.active),
        '3': [2, 4, 6, 7, 8, 9].includes(this.active),
        '4': [2, 4, 6, 8, 9, 10, 11].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
    },

    // 列表
    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>