dy-admin-manager/src/views/accompaniment/modals/form.vue

<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item
        prop="sysExamSong.name"
        label="曲名"
        :rules="[{required: true, message: '请输入曲名'}]"
      >
        <el-input placeholder="请输入曲名" v-model="form.sysExamSong.name"/>
      </el-form-item>
      <el-form-item
        label="原音"
        prop="sysExamSong.url"
        :rules="[{required: true, message: '请选择原音'}]"
      >
        <singe-file-upload
          tips="仅支持上传 mp3/aac 格式音频文件"
          accept=".mp3, .aac"
          v-model="form.sysExamSong.url"
        />
      </el-form-item>
      <div class="files" v-for="(song, index) in form.sysExamSongAccompaniments" :key="index">
        <el-row>
          <el-col :span="12">
            <el-form-item
              :prop="`sysExamSongAccompaniments.${index}.subjectId`"
              label="声部"
              :rules="[{required: true, message: '请选择声部'}]"
            >
              <el-select style="width: 100%!important;" v-model="song.subjectId" placeholder="请选择声部">
                <el-option
                  v-for="item in selects.subjects"
                  :value="String(item.id)"
                  :label="item.name"
                  :key="item.id"
                  :disabled="hasSubjectId(String(item.id))"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :prop="`sysExamSongAccompaniments.${index}.speed`"
              label="速度"
              :rules="[{required: true, message: '请输入速度'}]"
            >
              <el-input type="number" placeholder="请输入速度" v-model="song.speed"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="mp3文件"
              :prop="`sysExamSongAccompaniments.${index}.mp3Url`"
              :rules="[{required: true, message: '请选择mp3文件'}]"
            >
              <singe-file-upload
                tips="仅支持上传 mp3/aac 格式音频文件"
                accept=".mp3, .aac"
                v-model="song.mp3Url"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="MusicXML"
              :prop="`sysExamSongAccompaniments.${index}.xmlUrl`"
              :rules="[{required: true, message: '请选择MusicXML文件'}]"
            >
              <singe-file-upload
                tips="仅支持上传 xml 格式文件"
                accept=".xml"
                v-model="song.xmlUrl"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-button class="file-remove" type="text" @click="removeSys" :disabled="form.sysExamSongAccompaniments.length == 1">删除</el-button>
      </div>
      <el-button @click="createSys" type="info" style="width: 100%;margin-bottom: 20px;" plain>添加伴奏</el-button>
      <div class="btns">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="$listeners.close">取消</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { Add, Update, queryPageSysExam } from '../api'
export default {
  props: ['detail', 'type'],
  data() {
    return {
      form: {
        sysExamSong: {
          name: '',
          url: '',
        },
        sysExamSongAccompaniments: [
          {
            subjectId: '',
            speed: '',
            mp3Url: '',
            xmlUrl: ''
          },
        ],
        delExamSongAccompanimentIds: []
      }
    }
  },
  mounted() {
    this.$store.dispatch('setSubjects')
    if (this.detail) {
      this.$set(this.form, 'sysExamSong', {
        name: this.detail.name,
        url: this.detail.url,
      })
      this.FeatchDetailList()
    }
  },
  methods: {
    async FeatchDetailList() {
      try {
        const res = await queryPageSysExam({
          sysExamSongId: this.detail.id
        })
        this.$set(this.form, 'sysExamSongAccompaniments', res.data.rows.map(item => {
          item.subjectId = String(item.subjectId)
          return item
        }))
      } catch (error) {}
    },
    createSys() {
      this.form.sysExamSongAccompaniments.push({
        subjectId: '',
        speed: '',
        mp3Url: '',
        xmlUrl: ''
      })
    },
    async removeSys(index) {
      try {
        await this.$confirm('是否确认删除此伴奏?', '提示', {
          type: 'warning'
        })
        if (this.form.sysExamSongAccompaniments[index]) {
          this.form.delExamSongAccompanimentIds.push(this.form.sysExamSongAccompaniments[index].id)
        }
        this.form.sysExamSongAccompaniments.splice(index, 1)
      } catch (error) {}
    },
    hasSubjectId(id) {
      const ids = []
      for (const item of this.form.sysExamSongAccompaniments) {
        ids.push(item.subjectId)
      }
      return ids.includes(id)
    },
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.detail) {
            await Add({
              ...this.form,
              sysExamSong: {
                ...this.form.sysExamSong,
                type: 'COMMON',
              }
            })
            this.$message.success('提交成功')
          } else {
            await Update({
              ...this.form,
              sysExamSong: {
                ...this.form.sysExamSong,
                type: 'COMMON',
                id: this.detail.id
              }
            })
            this.$message.success('修改成功')
          }
          this.$listeners.close()
          this.$listeners.submited()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .btns{
    text-align: right;
  }
  .files{
    background-color: #f8f8f8;
    padding: 20px 0;
    padding-right: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    position: relative;
    .file-remove{
      position: absolute;
      right: 20px;
      bottom: 10px;
    }
  }
</style>