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

<template>
  <div class="app-container">
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true">新增</el-button>
    <!-- 列表 -->
    <el-table :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column width="80px" />
      <el-table-column label="排序" align="center" prop="sort"></el-table-column>
      <el-table-column label="导航名称" align="center" prop="tabName"></el-table-column>
      <el-table-column label="模板名称" align="center" prop="mouldName"></el-table-column>
      <el-table-column label="模板数量" align="center" prop="number"></el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip />
      <el-table-column label="当前状态" align="center" prop="status"></el-table-column>
      <el-table-column label="生效时间" align="center" prop="time" show-overflow-tooltip />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type === 2" type="text" @click="getDetail">新增</el-button>
          <el-button v-if="scope.row.type === 1" type="text" @click="getDialog()">历史记录</el-button>
          <span v-else style="margin-left: 10px">
            <el-button type="text">查看</el-button>
            <el-button type="text" @click="getDetail">编辑</el-button>
            <el-button type="delete">删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="新增" width="500px">
      <el-form label-width="100px">
        <el-form-item label="导航名称：">
          <el-select v-model="dialogForm.tabName" placeholder="请选择导航">
            <el-option v-for="item in tabOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板名称：">
          <el-input v-model="dialogForm.mouldName" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="模板类型：">
          <el-select placeholder="请选择模板类型">
            <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input-number v-model="dialogForm.id" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>

    <!-- 历史记录 -->
    <el-dialog :visible.sync="dialogVisible_list" title="历史记录" width="1000px">
      <el-form inline size="mini">
        <el-form-item label="">
          <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="模块名称：">
          <el-input placeholder="请输入模块名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table>
        <el-table-column label="模块名称" align="center" />
        <el-table-column label="模块类型" align="center" />
        <el-table-column label="模块数量" align="center" />
        <el-table-column label="有效时间" align="center" />
        <el-table-column label="当前状态" align="center" />
        <el-table-column label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        tabName: '推荐',
        type: 1,
        children: [{
          id: 1.1,
          tabName: '推荐',
          mouldName: '场景电台',
          number: 1,
          type: 2,
          sort: 1,
          children: [{
            id: '1.1.1',
            tabName: '推荐',
            mouldName: '场景电台',
            createTime: '2023-04-09 00:00:00',
            time: '2023-04-10 00:00:00 至 2023-04-20 00:00:00',
            number: 4,
            type: 3,
            status: '生效中'
          }, {
            id: '1.1.2',
            tabName: '推荐',
            mouldName: '场景电台',
            createTime: '2023-04-09 00:00:00',
            time: '2023-04-21 00:00:00 至 2023-04-29 00:00:00',
            number: 4,
            type: 3,
            status: '未生效'
          }]
        }]
      }, {
        id: 2,
        tabName: '电台',
        type: 1,
        children: [{
          id: 2.1,
          tabName: '电台',
          mouldName: '四宫格',
          number: 1,
          type: 2,
          sort: 1,
          children: [{
            id: '2.1.1',
            tabName: '电台',
            mouldName: '四宫格',
            createTime: '2023-04-09 00:00:00',
            time: '2023-04-10 00:00:00 至 2023-04-20 00:00:00',
            number: 4,
            type: 3,
            status: '生效中'
          }, {
            id: '2.1.2',
            tabName: '电台',
            mouldName: '四宫格',
            createTime: '2023-04-09 00:00:00',
            time: '2023-04-21 00:00:00 至 2023-04-29 00:00:00',
            number: 4,
            type: 3,
            status: '未生效'
          }]
        }]
      }],
      // 弹窗
      dialogVisible: false,
      dialogVisible_list: false,
      // 弹窗表单
      dialogForm: {},
      dialogForm_list: {},
      // 导航栏
      tabOptions: [{
        value: 1,
        label: '推荐'
      }, {
        value: 2,
        label: '电台'
      }, {
        value: 3,
        label: 'QQ音乐'
      }, {
        value: 4,
        label: '酷狗音乐'
      }],
      // 模板类型
      typeOptions: [{
        value: 1,
        label: '轮播图'
      }, {
        value: 2,
        label: '轮播图（排序）'
      }, {
        value: 3,
        label: '场景模式'
      }, {
        value: 4,
        label: '个性推荐'
      }, {
        value: 5,
        label: '个性推荐（排序）'
      }, {
        value: 6,
        label: '歌单'
      }, {
        value: 7,
        label: '歌单（标题）'
      }, {
        value: 8,
        label: '歌单（排序）'
      }, {
        value: 9,
        label: '音乐随心听'
      }, {
        value: 10,
        label: '精选音乐电台'
      }]
    }
  },
  mounted() {

  },
  methods: {
    // 新增模板
    getDetail() {
      this.$router.push({
        path: `/operation/recommend/detail`
      })
    },

    // 历史记录
    getDialog() {
      this.dialogVisible_list = true
    }
  }
}
</script>

<style lang="scss" scoped></style>