ohplay_system/src/views/operation/channels/detail.vue

<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form class="form" label-width="100px" :disabled="isRead">
      <el-row>
        <el-col :span="12">
          <el-form-item label="频道名称：">
            <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
          </el-form-item>
          <el-form-item label="频道属性：">
            <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled" @change="handleChange">
              <el-option v-for="item in channelTypeOptions" :key="item.value" :value="Number(item.value)"
                :label="item.label" :disabled="channelDisabled(item.value)" />
            </el-select>
          </el-form-item>
          <el-form-item label="频道封面：">
            <Upload listType="picture-card" :url="form.pic" @upload="getUpload" :disabled="isRead" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="频道简介：">
            <el-input v-model="form.description" type="textarea" rows="12" placeholder="请输入频道简介" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="频道内容：">
        <el-button type="primary" icon="el-icon-plus" @click="getDialog">
          新增内容
        </el-button>
        <el-table :data="form.list" v-loading="loading">
          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
          <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="音频作者" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{ scope.row.singerName ? scope.row.singerName : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{ scope.row.songName ? scope.row.songName : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
          <el-table-column label="当前状态" align="center" :formatter="statusFormatter" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!isRead" type="primary" @click="submit">提交</el-button>
    </div>
    <!-- 弹窗 -->
    <Dialog :visible="dialogVisible" :data="form.list" :channelType="form.channelType" @close="close" />
  </div>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'
import { channelDetail, channeledit } from '@/api/operation/channels'
import { platformMixin, isFreeMixin, disabledMixin } from '@/mixin/index'
export default {
  mixins: [platformMixin, isFreeMixin, disabledMixin],
  components: {
    Dialog
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹窗
      dialogVisible: false,
      // 表单
      form: {},
      // 频道1 频道2 的频道属性不可修改
      disabled: this.$route.query.index == '1' ? true : false,
      channelTypeOptions: [
        { value: 2, label: '广播' },
        { value: 6, label: '节目' },
        { value: 8, label: '专辑' }
      ],
      // 只读
      isRead: Boolean(this.$route.query.boolean)
    }
  },
  mounted() {
    this.getDetail()
    this.getPlatform({})
  },
  methods: {
    // 频道详情
    getDetail() {
      channelDetail({
        channelId: this.$route.query.channelId
      }).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 修改频道属性
    handleChange() {
      this.form.list = this.form.audioList = []
    },

    // 上传频道封面
    getUpload(e) {
      this.form.pic = e.file
    },

    // 打开弹窗
    getDialog() {
      this.dialogVisible = true
    },

    // 关闭弹窗
    close() {
      this.dialogVisible = false
    },

    // 删除
    getDelete(row) {
      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
    },

    // 提交
    submit() {
      this.form.audioList = []
      this.form.list.map(i => {
        this.form.audioList.push({
          audioId: i.audioId,
          audioType: i.audioType
        })
      })
      channeledit(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.getDetail()
        }
      })
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage('/operation/channels')
    },

    // 除了2频道都不可以选猫王精选电台
    channelDisabled(e){
      return this.$route.query.index !== '1' ? e == 17 ? true : false : false
    },

    // 字典翻译
    platfromFormatter(row) {
      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
    },
    freeFormatter(row) {
      return this.selectDictLabel(this.freeOptions, row.isFree)
    },
    statusFormatter(row) {
      return this.selectDictLabel(this.disabledOptions, row.status)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-image {
  width: 80px;
  height: 80px;
}

::v-deep .el-dialog__body {
  height: 610px;
  overflow-y: scroll;
}
</style>