ohplay_system/src/views/music/blog/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline label-width="100px" size="mini">
      <el-form-item label="资源平台：">
        <el-select placeholder="请选择资源平台">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="播客分类：">
        <el-select placeholder="请选择播客分类">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付费类型：">
        <el-select placeholder="请选择付费类型">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select placeholder="请选择当前状态">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签分类：">
        <el-select placeholder="请选择标签分类">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="播客ID：">
        <el-input placeholder="请输入播客ID" />
      </el-form-item>
      <el-form-item label="播客名称：">
        <el-input placeholder="请输入播客名称" />
      </el-form-item>
      <el-form-item label="主播名称：">
        <el-input placeholder="请输入主播名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
        <el-button type="primary" icon="el-icon-plus" plain>快捷新增(上传压缩包)</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData">
      <el-table-column prop="id" label="播客ID" align="center"></el-table-column>
      <el-table-column prop="name" label="播客名称" align="center"></el-table-column>
      <el-table-column prop="img" label="播客封面" align="center"></el-table-column>
      <el-table-column prop="blogType" label="播客分类" align="center"></el-table-column>
      <el-table-column prop="anchor" label="主播" align="center"></el-table-column>
      <el-table-column prop="payType" label="付费类型" align="center"></el-table-column>
      <el-table-column prop="labelType" label="标签分类" align="center"></el-table-column>
      <el-table-column prop="number" label="节目数量" align="center"></el-table-column>
      <el-table-column prop="status" label="当前状态" align="center"></el-table-column>
      <el-table-column prop="update" label="更新时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getDetail(scope.row.id)">查看</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text">上架</el-button>
          <!-- <el-button type="text">下架</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 列表
      tableData:[{
        id: '1',
        name: '测试',
        img: '',
        blogType: '测试分类',
        anchor: '测试主播',
        payType: '免费',
        labelType: '测试',
        number: '2',
        status: '下架',
        update: '2022/3/16 11:25:00'
      }]
    };
  },
  methods: {
    getDetail(id) {
      this.$router.push({
        path: `/music/blog/detail`,
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style>
</style>