|
|
@@ -2,45 +2,98 @@
|
|
|
<div>
|
|
|
<el-form ref="form" :model="form" label-width="100px">
|
|
|
<el-form-item
|
|
|
- prop="name"
|
|
|
- label="伴奏名称"
|
|
|
- :rules="[{required: true, message: '请输入伴奏名称'}]"
|
|
|
+ prop="sysMusicScore.name"
|
|
|
+ label="曲名"
|
|
|
+ :rules="[{required: true, message: '请输入曲名'}]"
|
|
|
>
|
|
|
- <el-input placeholder="请输入伴奏名称" v-model="form.name"/>
|
|
|
+ <el-input placeholder="请输入曲名" v-model="form.sysMusicScore.name"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
- prop="subjectIds"
|
|
|
- label="伴奏声部"
|
|
|
- :rules="[{required: true, message: '请选择伴奏声部'}]"
|
|
|
+ prop="sysMusicScore.musicScoreCategoriesId"
|
|
|
+ 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-cascader v-model="form.sysMusicScore.musicScoreCategoriesId"
|
|
|
+ style="width:100%"
|
|
|
+ :options="tree"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ :props="treeProps"></el-cascader>
|
|
|
+ <!-- <el-select style="width: 100%!important;" v-model="form.sysMusicScore.musicScoreCategoriesId" placeholder="请选择声部">
|
|
|
+ <el-option
|
|
|
+ v-for="item in selects.subjects"
|
|
|
+ :value="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: '请输入伴奏速度'}]"
|
|
|
+ label="原音"
|
|
|
+ prop="sysMusicScore.url"
|
|
|
>
|
|
|
- <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.sysMusicScore.url"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
+ <div class="files" v-for="(song, index) in form.sysMusicScoreAccompaniments" :key="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ :prop="`sysMusicScoreAccompaniments.${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="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :key="item.id"
|
|
|
+ :disabled="hasSubjectId(item.id)"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ :prop="`sysMusicScoreAccompaniments.${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="`sysMusicScoreAccompaniments.${index}.mp3Url`"
|
|
|
+ >
|
|
|
+ <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="`sysMusicScoreAccompaniments.${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(index)" :disabled="form.sysMusicScoreAccompaniments.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 +102,101 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getToken } from "@/utils/auth"
|
|
|
-import { Add, Update } from '../api'
|
|
|
+import { Add, Update, queryPageSysExam, queryTree } from '../api'
|
|
|
export default {
|
|
|
props: ['detail', 'type'],
|
|
|
data() {
|
|
|
return {
|
|
|
- headers: {
|
|
|
- Authorization: getToken()
|
|
|
- },
|
|
|
- filelist: [],
|
|
|
+ tree: [],
|
|
|
form: {
|
|
|
- name: '',
|
|
|
- subjectIds: [],
|
|
|
- speed: '',
|
|
|
- url: ''
|
|
|
+ sysMusicScore: {
|
|
|
+ name: '',
|
|
|
+ url: '',
|
|
|
+ musicScoreCategoriesId: [],
|
|
|
+ },
|
|
|
+ sysMusicScoreAccompaniments: [
|
|
|
+ {
|
|
|
+ subjectId: '',
|
|
|
+ speed: '',
|
|
|
+ mp3Url: '',
|
|
|
+ xmlUrl: ''
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ delExamSongAccompanimentIds: []
|
|
|
+ },
|
|
|
+ treeProps: {
|
|
|
+ value: 'id',
|
|
|
+ label: 'name',
|
|
|
+ children: 'sysMusicScoreCategoriesList',
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ async mounted() {
|
|
|
this.$store.dispatch('setSubjects')
|
|
|
+ await this.FetchTree()
|
|
|
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, 'sysMusicScore', {
|
|
|
+ name: this.detail.name,
|
|
|
url: this.detail.url,
|
|
|
- }]
|
|
|
+ musicScoreCategoriesId: this.detail.categoriesId ? this.formatParentId(this.detail.categoriesId, this.tree) : [],
|
|
|
+ })
|
|
|
+ this.FeatchDetailList()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- remove() {
|
|
|
- this.filelist = []
|
|
|
- this.$set(this.form, 'url', '')
|
|
|
+ formatParentId(id, list, ids = []) {
|
|
|
+ for (const item of list) {
|
|
|
+ if (item.sysMusicScoreCategoriesList) {
|
|
|
+ return this.formatParentId(id, item.sysMusicScoreCategoriesList, [...ids, item.id])
|
|
|
+ }
|
|
|
+ if (item.id === id) {
|
|
|
+ return [...ids, id]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ids
|
|
|
+ },
|
|
|
+ async FetchTree() {
|
|
|
+ try {
|
|
|
+ const res = await queryTree()
|
|
|
+ this.tree = res.data
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async FeatchDetailList() {
|
|
|
+ try {
|
|
|
+ const res = await queryPageSysExam({
|
|
|
+ sysMusicScoreId: this.detail.id
|
|
|
+ })
|
|
|
+ this.$set(this.form, 'sysMusicScoreAccompaniments', res.data)
|
|
|
+ } catch (error) {}
|
|
|
+ },
|
|
|
+ createSys() {
|
|
|
+ this.form.sysMusicScoreAccompaniments.push({
|
|
|
+ subjectId: '',
|
|
|
+ speed: '',
|
|
|
+ mp3Url: '',
|
|
|
+ xmlUrl: ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async removeSys(index) {
|
|
|
+ try {
|
|
|
+ await this.$confirm('是否确认删除此伴奏?', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ if (this.form.sysMusicScoreAccompaniments[index]) {
|
|
|
+ this.form.delExamSongAccompanimentIds.push(this.form.sysMusicScoreAccompaniments[index].id)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.form.sysMusicScoreAccompaniments.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.sysMusicScoreAccompaniments) {
|
|
|
+ ids.push(item.subjectId)
|
|
|
}
|
|
|
+ return ids.includes(id)
|
|
|
},
|
|
|
async submit() {
|
|
|
this.$refs.form.validate(async (valid) => {
|
|
|
@@ -107,16 +204,22 @@ export default {
|
|
|
if (!this.detail) {
|
|
|
await Add({
|
|
|
...this.form,
|
|
|
- subjectIds: this.form.subjectIds.join(','),
|
|
|
- type: 'COMMON',
|
|
|
+ sysMusicScore: {
|
|
|
+ ...this.form.sysMusicScore,
|
|
|
+ type: 'COMMON',
|
|
|
+ musicScoreCategoriesId: (this.form.sysMusicScore.musicScoreCategoriesId || []).pop(),
|
|
|
+ }
|
|
|
})
|
|
|
this.$message.success('提交成功')
|
|
|
} else {
|
|
|
await Update({
|
|
|
...this.form,
|
|
|
- subjectIds: this.form.subjectIds.join(','),
|
|
|
- type: this.detail.type,
|
|
|
- id: this.detail.id
|
|
|
+ sysMusicScore: {
|
|
|
+ ...this.form.sysMusicScore,
|
|
|
+ type: 'COMMON',
|
|
|
+ id: this.detail.id,
|
|
|
+ musicScoreCategoriesId: (this.form.sysMusicScore.musicScoreCategoriesId || []).pop(),
|
|
|
+ }
|
|
|
})
|
|
|
this.$message.success('修改成功')
|
|
|
}
|
|
|
@@ -132,4 +235,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>
|
