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

<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item
        prop="name"
        label="伴奏名称"
        :rules="[{required: true, message: '请输入伴奏名称'}]"
      >
        <el-input placeholder="请输入伴奏名称" v-model="form.name"/>
      </el-form-item>
      <el-form-item
        prop="subjectIds"
        label="伴奏声部"
        :rules="[{required: true, message: '请选择伴奏声部'}]"
      >
        <el-select style="width: 100%!important;" collapse-tags multiple v-model="form.subjectIds" placeholder="请选择伴奏声部">
          <el-option v-for="item in selects.subjects" :value="String(item.id)" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="speed"
        label="伴奏速度"
        :rules="[{required: true, message: '请输入伴奏速度'}]"
      >
        <el-input type="number" placeholder="请输入伴奏速度" v-model="form.speed"/>
      </el-form-item>
      <el-form-item
        label="伴奏文件"
        prop="url"
        :rules="[{required: true, message: '请选择伴奏文件'}]"
      >
        <el-upload
          action="/api-web/uploadFile"
          :headers="headers"
          :on-success="success"
          :on-remove="remove"
          :limit="1"
          :file-list="filelist"
          accept=".mp3, .aac">
          <el-button size="small" type="primary" plain>点击上传</el-button>
          <div slot="tip" class="el-upload__tip">仅支持上传 mp3/aac 格式音频文件</div>
        </el-upload>
      </el-form-item>
      <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 { getToken } from "@/utils/auth"
import { Add, Update } from '../api'
export default {
  props: ['detail', 'type'],
  data() {
    return {
      headers: {
        Authorization: getToken()
      },
      filelist: [],
      form: {
        name: '',
        subjectIds: [],
        speed: '',
        url: ''
      }
    }
  },
  mounted() {
    this.$store.dispatch('setSubjects')
    if (this.detail) {
      for (const key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          if (key === 'subjectIds') {
            this.$set(this.form, 'subjectIds', (this.detail[key] || '').split(','))
          } else {
            this.$set(this.form, key, this.detail[key])
          }
        }
      }
      this.filelist = [{
        name: this.detail.url,
        url: this.detail.url,
      }]
    }
  },
  methods: {
    remove() {
      this.filelist = []
      this.$set(this.form, 'url', '')
    },
    success(res) {
      if (res.code == 200) {
        this.filelist = [{
          name: res.data.url,
          url: res.data.url,
        }]
        this.$set(this.form, 'url', res.data.url)
      } else {
        this.$message.error(res.msg || '上传失败')
      }
    },
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.detail) {
            await Add({
              ...this.form,
              subjectIds: this.form.subjectIds.join(','),
              type: 'COMMON',
            })
            this.$message.success('提交成功')
          } else {
            await Update({
              ...this.form,
              subjectIds: this.form.subjectIds.join(','),
              type: this.detail.type,
              id: this.detail.id
            })
            this.$message.success('修改成功')
          }
          this.$listeners.close()
          this.$listeners.submited()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .btns{
    text-align: right;
  }
</style>