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

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
      <el-form-item label="歌单名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入歌单名称" show-word-limit />
      </el-form-item>
      <el-form-item label="歌单介绍：" prop="description">
        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" maxlength="100"
          show-word-limit placeholder="请输入歌单介绍" />
      </el-form-item>
      <el-form-item label="创建者：" prop="avatarNickName">
        <el-input v-model="form.avatarNickName" placeholder="请输入歌单创建者名称" />
      </el-form-item>
      <el-form-item label="资源平台：" prop="platformId">
        <el-select v-model="form.platformId" placeholder="请选择资源平台" :disabled="disabledPlatformId(form.platformId)">
          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label"
            :disabled="disabledJoinType(item.joinType)" />
        </el-select>
      </el-form-item>
      <el-form-item label="歌单封面：" prop="coverUrl">
        <Upload listType="picture-card" :url="form.coverUrl" @upload="upload($event, 'coverUrl')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="头像：" prop="avatarNickHead">
        <Upload listType="picture-card" :url="form.avatarNickHead" @upload="upload($event, 'avatarNickHead')"
          :disabled="disabled" />
      </el-form-item>
      <el-form-item label="歌曲列表：" style="width: 100%;">
        <el-button type="primary" icon="el-icon-plus" @click="getDialog">添加歌曲</el-button>
        <el-table class="table" :data="form.programList" height="329px" v-loading="form_loading">
          <el-table-column label="ID" prop="id" align="center" />
          <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
          <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
          <el-table-column label="播放时长" prop="playTime" align="center" />
          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <Audio :src="scope.row.progaramUrl" />
              <el-button type="delete" @click="getDelete(scope.$index)">删除</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="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="添加歌曲" width="1100px">
      <el-form inline size="mini" style="width: 100%">
        <el-form-item label="歌曲名称：">
          <el-input v-model="dialogForm.name" placeholder="请输入歌曲名称" clearable />
        </el-form-item>
        <el-form-item label="歌手名称：">
          <el-input v-model="dialogForm.singerName" placeholder="请输入歌手名称" clearable />
        </el-form-item>
        <el-form-item label="资源平台：">
          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
            <el-option v-for="item in platformOptions.filter(i => !i.joinType.includes('1'))" :key="item.value"
              :value="item.value" :label="item.label" />
          </el-select>
        </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-form-item>
      </el-form>
      <el-table :data="tableData" v-loading="loading">
        <el-table-column label="ID" prop="id" align="center" />
        <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
        <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
        <el-table-column label="播放时长" prop="playTime" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="getChecked(scope.row)" :disabled="disabledList()">
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
        @pagination="getList" />
    </el-dialog>
  </div>
</template>

<script>
import { submit, detail } from '@/api/music/menu'
import { list } from '@/api/music/list'
import { platformMixin, onOrOffMixin } from '@/mixin/index'
import Audio from '@/components/Audio/index.vue'
export default {
  mixins: [platformMixin, onOrOffMixin],
  components: {
    Audio
  },
  data() {
    return {
      // 遮罩层
      form_loading: false,
      loading: false,
      // 表单
      form: {
        programList: [], // 歌曲列表
        status: 1,
        type: 2
      },
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入歌单名称', trigger: 'blur'
        }],
        description: [{
          required: true, message: '请输入歌单介绍', trigger: 'blur'
        }],
        avatarNickName: [{
          required: true, message: '请输入歌单创建者名称', trigger: 'blur'
        }],
        platformId: [{
          required: true, message: '请选择资源平台', trigger: 'change'
        }],
        coverUrl: [{
          required: true, message: '请上传歌单封面', trigger: 'change'
        }],
        avatarNickHead: [{
          required: true, message: '请上传创建者头像', trigger: 'change'
        }]
      },
      // 弹窗
      dialogVisible: false,
      // 弹窗表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        platformId: null
      },
      // 总数据
      total: 0,
      // 弹窗列表
      tableData: [],
      // 只读
      disabled: false,
      // 是否已选
      disabledChecked: false
    }
  },
  mounted() {
    // 获取资源平台
    this.getPlatform({
      audioType: 10
    })
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.disabled = Boolean(this.$route.query.disabled)
      this.getDetail()
    }
  },
  methods: {
    // 详情
    getDetail() {
      this.form_loading = true
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.form.programList = res.data.programList === null ? [] : res.data.programList
          this.form_loading = false
        }
      })
    },
    // 上传
    upload(e, key) {
      this.form[key] = e.file
    },

    // 添加歌曲
    getDialog() {
      this.dialogVisible = true
      this.dialogForm.platformId = this.platformOptions.filter(i => !i.joinType.includes('1'))[0].value
      this.getList()
    },

    // 列表
    getList() {
      this.loading = true
      list(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.dialogForm.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.dialogForm = {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        platformId: this.platformOptions[0].value
      }
      this.getList()
    },

    // 选择
    getChecked(row) {
      this.form.programList.push({
        id: row.id,
        name: row.name,
        singerName: row.singerName,
        playTime: row.playTime,
        status: row.status,
        progaramUrl: row.progaramUrl
      })
      this.$message.success('添加成功！')
    },

    // 删除已选歌曲
    getDelete(index) {
      this.form.programList.splice(index, 1)
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let arr = []
          this.form.programList.map(i => {
            arr.push(i.id)
          })
          this.form.programList = arr
          this.form_loading = true
          let title = this.form.id ? '编辑成功！' : '新增成功！'
          submit(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success(`${title}`)
              if (this.form.id) {
                this.getDetail()
              } else {
                this.cancel()
              }
            }
          })
        } else {
          return false
        }
      })
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/music/musicMenu");
    },

    // 字典翻译
    statusFormatter(row) {
      return this.selectDictLabel(this.onOrOffOptions, row.status)
    },

    // 已有的歌曲不可重复选择
    disabledList() {
      if (this.form.programList.length > 0) {
        return this.form.programList.findIndex(i => i.id === scope.row.id) === -1 ? false : true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 500px;
}
</style>