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

<template>
  <div class="app-container">
    <el-form class="form" label-width="100px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="播客封面：">
            <Upload listType="picture-card" @upload="getUpload" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="播客名称：">
            <el-input placeholder="请输入播客名称" />
          </el-form-item>
          <el-form-item label="播客分类：">
            <el-select placeholder="请选择播客分类">
              <el-option />
            </el-select>
          </el-form-item>
          <el-form-item label="资源平台：">
            <el-input disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="音乐简介：">
        <el-input type="textarea" rows="4" placeholder="请输入音乐简介" />
      </el-form-item>
      <el-form-item label="付费类型：">
        <el-select placeholder="请选择付费类型">
          <el-option />
        </el-select>
      </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 label="标签分类：">
        <el-select placeholder="请选择标签分类">
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item label="关联节目：" style="width: 1000px">
        <el-button type="primary" @click="getPage">关联</el-button>
        <el-button @click="getDelete">解除关联</el-button>
        <el-table :data="tableData1" height="229px" :row-key="getRowKey"
          @selection-change="selectionChangeDelete">
          <el-table-column type="selection" align="center" />
          <el-table-column prop="id" label="节目ID" align="center" width="150px" />
          <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
          <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
          <el-table-column prop="status" label="当前状态" align="center" width="100px"
            :formatter="statusFormatter" />
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button @click="getCancel">取消</el-button>
        <el-button type="primary" @click="getSubmit">提交</el-button>
      </el-form-item>
    </el-form>

    <!-- 关联弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1000px">
      <el-form :model="programmeForm" inline size="mini">
        <el-form-item label="节目ID：">
          <el-input v-model="programmeForm.id" placeholder="请输入节目ID" />
        </el-form-item>
        <el-form-item label="节目名称：">
          <el-input v-model="programmeForm.name" placeholder="请输入节目名称" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="programmeTable" ref="programmeTable" v-loading="loading" :row-key="getRowKey"
        @selection-change="selectionChangeAdd">
        <el-table-column type="selection" reserve-selection align="center" />
        <el-table-column prop="id" label="节目ID" align="center" width="150px" />
        <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
        <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
        <el-table-column prop="status" label="当前状态" align="center" width="100px"
          :formatter="statusFormatter" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="programmeForm.pageNum"
        :limit.sync="programmeForm.pageSize" @pagination="getPage" />
    </el-dialog>
  </div>
</template>

<script>
import { getProgrammePage } from '@/api/music/blog'
import { statusMixin } from '../mixin/index'
import Upload from "@/components/Upload/index";
export default {
  mixins: [statusMixin],
  components: {
    Upload,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单
      programmeForm: {
        pageNum: 1,
        pageSize: 10
      },
      // 弹窗
      dialogVisible: false,
      // 选择的节目列表
      tableData1: [],
      // 解除关联
      delete_list: [],
      flag: false,
      // 节目总列表
      programmeTable: [],
      total: 0,
    };
  },
  methods: {
    // 上传封面
    getUpload(e){
      
    },

    // 关联
    getPage() {
      this.loading = true
      this.dialogVisible = true,
        getProgrammePage(this.programmeForm).then(res => {
          if (res.code === 0) {
            this.programmeTable = res.data.records
            this.total = res.data.total
            this.loading = false
          }
        })
    },

    // 多选
    selectionChangeDelete(e) {
      this.delete_list = e
    },

    selectionChangeAdd(e) {
      if(this.flag) return
      this.tableData1 = e
    },

    getRowKey(row) {
      return row.id;
    },

    // 解除关联
    getDelete() {
      this.flag = true
      this.delete_list.forEach(i => {
        this.tableData1.splice(i, 1)
        this.$refs.programmeTable.toggleRowSelection(i)
      })
      this.flag = false
    },

    // 搜索
    getSearch() {
      this.programmeForm.pageNum = 1
      this.getPage()
    },

    // 重置
    getRefresh() {
      this.programmeForm = {
        pageNum: 1,
        pageSize: 10
      }
      this.getPage()
    },

    getCancel() {
      this.$tab.closeOpenPage("/music/blog");
    },
    getSubmit() { },

    // 字典翻译
    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    }
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 600px;
}
</style>