ohplay_system/src/views/music/list/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="请输入歌曲名称" />
      </el-form-item>
      <el-form-item label="歌手名称：" prop="singerId">
        <el-select
          v-model="form.singerId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入歌手名称"
          :remote-method="getSelect"
          no-data-text="请新增歌手"
        >
          <el-option
            v-for="item in singerOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="歌曲语言：" prop="lanuage">
        <el-select v-model="form.lanuage" placeholder="请选择歌曲语言">
          <el-option
            v-for="item in languageOptions"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </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="thumbUrl">
        <Upload
          listType="picture-card"
          :url="form.thumbUrl"
          @upload="upload($event, 'thumbUrl')"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="音频文件：" prop="realName">
        <el-input v-model="form.realName" readonly>
          <template slot="suffix">
            <Upload
              listType="audio"
              :size="100"
              @upload="upload($event, 'progaramUrl')"
            />
          </template>
        </el-input>
        <div style="color: #909399">单个上传音频文件不超过100MB</div>
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="getSubmit" v-if="!disabled"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { detail, submit } from "@/api/music/list";
import { selectSinger } from "@/api/music/singer";
import { languageMixin, platformMixin } from "@/mixin/index";
export default {
  // name:"musicListDetail",
  mixins: [platformMixin, languageMixin],
  data() {
    return {
      // 歌手
      singerOptions: [],
      // 表单
      form: {
        status: 1,
        realName: "",
      },
      // 是否只读
      disabled: false,
      // 校验
      rules: {
        name: [
          {
            required: true,
            message: "请输入歌曲名称",
            trigger: "blur",
          },
        ],
        singerId: [
          {
            required: true,
            message: "请输入歌手名称",
            trigger: "blur",
          },
        ],
        lanuage: [
          {
            required: true,
            message: "请选择歌曲语言",
            trigger: "blur",
          },
        ],
        platformId: [
          {
            required: true,
            message: "请选择资源平台",
            trigger: "change",
          },
        ],
        thumbUrl: [
          {
            required: true,
            message: "请上传音频封面",
            trigger: "change",
          },
        ],
        realName: [
          {
            required: true,
            message: "请上传音频文件",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    // 获取资源平台
    this.getPlatform({
      audioType: 11,
    });
    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.form.singerId = res.data.singerId.split(",");
          res.data.singerResp.map((i) => {
            this.singerOptions.push({
              value: i.singerId,
              label: i.singerName,
            });
          });
        }
      });
    },

    // 查询歌手
    getSelect(e) {
      if (e) {
        setTimeout(() => {
          this.singerOptions = [];
          selectSinger(e).then((res) => {
            if (res.code === 0) {
              res.data.map((i) => {
                this.singerOptions.push({
                  value: i.id,
                  label: i.name,
                });
              });
            }
          }, 500);
        });
      }
    },

    // 上传
    upload(e, key) {
      if (key === "thumbUrl") {
        this.form.thumbUrl = e.file;
      } else {
        this.form.progaramUrl = e.file.url;
        this.form.playTime = e.file.time;
        this.form.realName = e.file.realName;
      }
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.singerId = this.form.singerId.join(",");
          submit(this.form).then((res) => {
            if (res.code === 0) {
              this.$message.success("提交成功！");
              this.cancel();
            }
          });
        } else {
          return false;
        }
      });
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/music/musicList");
    },
  },
};
</script>

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

::v-deep .el-input__suffix {
  right: 0;
}
</style>