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

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="110px" :disabled="disabled">
      <el-form-item label="电台名称：" prop="name">
        <el-input v-model="form.name" 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="cascader">
        <el-cascader v-model="form.cascader" :options="mapOptions" placeholder="请选择省市区" clearable
          :props="{ value: 'id', label: 'name', children: 'childList', checkStrictly: true }" style="width: 100%" />
      </el-form-item>
      <el-form-item v-if="form.platformId !== 4" label="地域分类：" prop="addressClassifyId">
        <el-select v-model="form.addressClassifyId" placeholder="请选择地域分类">
          <el-option v-for="item in addressOptions" :key="item.value" :value="item.value.toString()"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="广播分类：" prop="contentClassifyId">
        <el-select v-model="form.contentClassifyId" placeholder="请选择广播分类">
          <el-option v-for="item in contentOptions" :key="item.value" :value="item.value.toString()"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="电台简介：" prop="description">
        <el-input v-model="form.description" type="textarea" rows="5" maxlength="300" show-word-limit
          placeholder="请输入电台简介" />
      </el-form-item>
      <el-form-item label="非加速链接：" prop="noStreamUrl">
        <el-input v-model="form.noStreamUrl" placeholder="请输入非加速链接" />
      </el-form-item>
      <el-form-item label="加速链接：" prop="fullUrl">
        <el-input v-model="form.fullUrl" placeholder="请输入加速链接" />
      </el-form-item>
      <el-form-item label="电台封面：" prop="thumb">
        <Upload listType="picture-card" :url="form.thumb" @upload="upload" :disabled="disabled" />
      </el-form-item>
    </el-form>
    <div style="margin-left: 110px">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { submit, detail } from '@/api/music/radio'
import { platformMixin, addressMixin, contentMixin, mapMixin } from '@/mixin/index'
export default {
  mixins: [platformMixin, addressMixin, contentMixin, mapMixin],
  data() {
    return {
      // 表单
      form: {
        addressClassifyId: null,
        status: 1
      },
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入电台名称', trigger: 'blur'
        }],
        cascader: [{
          type: 'array', required: true, message: '请选择省市区', trigger: 'change'
        }],
        addressClassifyId: [{
          required: true, message: '请选择地域分类', trigger: 'change'
        }],
        contentClassifyId: [{
          required: true, message: '请选择广播分类', trigger: 'change'
        }],
        description: [{
          required: true, message: '请输入电台简介', trigger: 'blur'
        }],
        platformId: [{
          required: true, message: '请选择资源平台', trigger: 'change'
        }],
        thumb: [{
          required: true, message: '请上传电台封面', trigger: 'change'
        }]
      },
      // 只读
      disabled: false
    }
  },
  mounted() {
    // 获取资源平台
    this.getPlatform({
      audioType: 2
    })
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.disabled = Boolean(this.$route.query.disabled)
      this.getList()
    }
  },
  methods: {
    // 详情
    getList() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.$set(this.form, 'cascader', [res.data.province])
          if (res.data.city) {
            this.form.cascader[1] = res.data.city
          }
          if (res.data.area) {
            this.form.cascader[2] = res.data.area
          }
        }
      })
    },

    // 上传
    upload(e) {
      this.form.thumb = e.file
    },

    // 确定
    getSubmit() {
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.province = this.form.cascader[0]
          this.form.city = this.form.cascader[1] ? this.form.cascader[1] : null
          this.form.area = this.form.cascader[2] ? this.form.cascader[2] : null
          submit(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success(`提交成功！`)
              this.cancel()
            }
          })
        } else {
          return false
        }
      })
    },
    // 取消
    cancel() {
      this.$tab.closeOpenPage('/music/radio')
    }
  }
};
</script>

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