后台伴奏修改

src/components/install.js

@@ -17,6 +17,7 @@ import empty from '@/components/empty'
 import autoHeight from '@/components/auto-height'
 import auth from '@/components/Auth'
 import filterSearch from '@/components/filter-search'
+import singeFileUpload from '@/components/singe-file-upload'
 
 export default {
   install(Vue) {
@@ -34,5 +35,6 @@ export default {
     Vue.component(autoHeight.name, autoHeight)
     Vue.component(auth.name, auth)
     Vue.component(filterSearch.name, filterSearch)
+    Vue.component(singeFileUpload.name, singeFileUpload)
   }
 }

src/components/singe-file-upload/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-upload
+    action="/api-web/uploadFile"
+    :headers="headers"
+    :on-success="success"
+    :on-remove="remove"
+    :on-error="error"
+    :limit="1"
+    :file-list="filelist"
+    :accept="accept">
+    <el-button size="small" type="primary" plain>点击上传</el-button>
+    <div slot="tip" v-if="tips" class="el-upload__tip">{{tips}}</div>
+  </el-upload>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+export default {
+  name: 'singe-file-upload',
+  props: {
+    tips: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    accept: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    value() {
+      this.filelist = [{
+        name: this.value,
+        url: this.value,
+      }]
+    }
+  },
+  data() {
+    return {
+      filelist: [],
+      headers: {
+        Authorization: getToken()
+      },
+    }
+  },
+  methods: {
+    remove() {
+      this.filelist = []
+      this.$emit('update:value', '')
+      this.$emit('input', '')
+    },
+    error() {
+      this.remove()
+    },
+    success(res) {
+      if (res.code == 200) {
+        this.filelist = [{
+          name: res.data.url,
+          url: res.data.url,
+        }]
+        this.$emit('update:value', res.data.url)
+        this.$emit('input', res.data.url)
+      } else {
+        this.remove()
+        this.$message.error(res.msg || '上传失败')
+      }
+    },
+  }
+}
+</script>

src/views/accompaniment/api.js

@@ -27,6 +27,14 @@ export const Update = data => {
   })
 }
 
+export const queryPageSysExam = data => {
+  return request({
+    url: '/api-web/sysExamSongAccompaniment/queryPage',
+    method: 'get',
+    params: data,
+  })
+}
+
 export const Del = id => {
   return request({
     url: '/api-web/sysExamSong/del/' + id,

src/views/accompaniment/index.vue

@@ -132,7 +132,7 @@
     <el-dialog
       :title="title"
       :visible.sync="visible"
-      width="500px"
+      width="700px"
     >
       <submit-form
         v-if="visible"

src/views/accompaniment/modals/form.vue

@@ -2,45 +2,81 @@
   <div>
     <el-form ref="form" :model="form" label-width="100px">
       <el-form-item
-        prop="name"
-        label="伴奏名称"
-        :rules="[{required: true, message: '请输入伴奏名称'}]"
+        prop="sysExamSong.name"
+        label="曲名"
+        :rules="[{required: true, message: '请输入曲名'}]"
       >
-        <el-input placeholder="请输入伴奏名称" v-model="form.name"/>
+        <el-input placeholder="请输入曲名" v-model="form.sysExamSong.name"/>
       </el-form-item>
       <el-form-item
-        prop="subjectIds"
-        label="伴奏声部"
-        :rules="[{required: true, message: '请选择伴奏声部'}]"
+        label="原音"
+        prop="sysExamSong.url"
+        :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>
+        <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>
@@ -49,57 +85,75 @@
   </div>
 </template>
 <script>
-import { getToken } from "@/utils/auth"
-import { Add, Update } from '../api'
+import { Add, Update, queryPageSysExam } from '../api'
 export default {
   props: ['detail', 'type'],
   data() {
     return {
-      headers: {
-        Authorization: getToken()
-      },
-      filelist: [],
       form: {
-        name: '',
-        subjectIds: [],
-        speed: '',
-        url: ''
+        sysExamSong: {
+          name: '',
+          url: '',
+        },
+        sysExamSongAccompaniments: [
+          {
+            subjectId: '',
+            speed: '',
+            mp3Url: '',
+            xmlUrl: ''
+          },
+        ],
+        delExamSongAccompanimentIds: []
       }
     }
   },
   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,
+      this.$set(this.form, 'sysExamSong', {
+        name: this.detail.name,
         url: this.detail.url,
-      }]
+      })
+      this.FeatchDetailList()
     }
   },
   methods: {
-    remove() {
-      this.filelist = []
-      this.$set(this.form, 'url', '')
+    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) {}
     },
-    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 || '上传失败')
+    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) => {
@@ -107,16 +161,20 @@ export default {
           if (!this.detail) {
             await Add({
               ...this.form,
-              subjectIds: this.form.subjectIds.join(','),
-              type: 'COMMON',
+              sysExamSong: {
+                ...this.form.sysExamSong,
+                type: 'COMMON',
+              }
             })
             this.$message.success('提交成功')
           } else {
             await Update({
               ...this.form,
-              subjectIds: this.form.subjectIds.join(','),
-              type: this.detail.type,
-              id: this.detail.id
+              sysExamSong: {
+                ...this.form.sysExamSong,
+                type: 'COMMON',
+                id: this.detail.id
+              }
             })
             this.$message.success('修改成功')
           }
@@ -132,4 +190,17 @@ export default {
   .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>

vue.config.js

@@ -21,7 +21,7 @@ const name = defaultSettings.title || '管乐迷后台管理系统' // page titl
 // let target = 'http://192.168.3.139:8000' // 箭河
 // let target = 'http://192.168.3.38:8000' //邹璇
 // let target = 'http://192.168.3.57:8000' //勇哥
-let target = 'http://dev.dayaedu.com' // 测试服
+let target = 'http://192.168.3.148:8000' // 测试服
 // let target = 'http://192.168.3.134' // 乔
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {