rainbowfast/muscipro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

p配置

Browse Source
This commit is contained in:
menxipeng
2025-08-01 17:35:08 +08:00
parent 0c82bef933
commit 75069d5653
8 changed files with 333 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ruoyi-ui/src/api/playlist/normal.js
View File

@@ -12,7 +12,10 @@ export function listNormalSong(query) {
// 查询普通歌曲详细
export function getNormalSong(id) {
return request({
url: '/back/normal/' + id,
url: '/back/music/list/',
params: {
musicId: id
},
method: 'get'
})
}
@@ -20,7 +23,7 @@ export function getNormalSong(id) {
// 新增普通歌曲
export function addNormalSong(data) {
return request({
url: '/back/normal/add',
url: '/back/music/addMusic',
method: 'post',
data: data
})
@@ -29,8 +32,8 @@ export function addNormalSong(data) {
// 修改普通歌曲
export function updateNormalSong(data) {
return request({
url: '/back/normal/update',
method: 'post',
url: '/back/music/',
method: 'put',
data: data
})
}
@@ -38,7 +41,7 @@ export function updateNormalSong(data) {
// 删除普通歌曲
export function delNormalSong(id) {
return request({
url: '/back/normal/' + id,
url: '/back/music/' + id,
method: 'delete'
})
}

4
ruoyi-ui/src/api/playlist/remix.js
View File

@@ -36,7 +36,7 @@ export function addRemixSong(data) {
formData.append('status', data.status)
formData.append('selectedSongs', JSON.stringify(data.selectedSongs))
return request({
url: '/back/remix/add',
url: '/back/music/add/mixMusic',
method: 'post',
data: formData,
headers: {
@@ -69,7 +69,7 @@ export function updateRemixSong(data) {
// 删除混音歌曲
export function delRemixSong(id) {
return request({
url: '/back/remix/' + id,
url: '/back/music/' + id,
method: 'delete'
})
}

85
ruoyi-ui/src/views/playlist/normal/index.vue
View File

@@ -154,21 +154,34 @@
</el-select>
</el-form-item>
<el-form-item label="标签" prop="label">
<el-input v-model="form.label" placeholder="请输入标签，多个标签用分号分隔" />
<el-select
v-model="selectedTags"
multiple
filterable
placeholder="请选择标签"
style="width: 100%"
@change="handleTagsChange">
<el-option
v-for="item in tagOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="音乐图片" prop="imgAddr">
<image-upload
v-model="form.imgAddr"
:limit="1"
:file-type="['jpg', 'jpeg', 'png', 'gif']"
<image-upload
v-model="form.imgAddr"
:limit="1"
:file-type="['jpg', 'jpeg', 'png', 'gif']"
action="/back/upload/musicImg/file"
/>
</el-form-item>
<el-form-item label="音乐文件" prop="musicAddr">
<file-upload
v-model="form.musicAddr"
:limit="1"
:file-type="['mp3', 'wav', 'flac']"
<file-upload
v-model="form.musicAddr"
:limit="1"
:file-type="['mp3', 'wav', 'flac']"
action="/back/upload/music/file"
/>
</el-form-item>
@@ -183,6 +196,7 @@
<script>
import { listNormalSong, getNormalSong, delNormalSong, addNormalSong, updateNormalSong } from "@/api/playlist/normal";
import { listTags } from "@/api/playlist/tag";
export default {
name: "Normal",
@@ -194,6 +208,8 @@ export default {
playlistList: [],
title: "",
open: false,
tagOptions: [], // 标签选项列表
selectedTags: [], // 已选择的标签
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -219,6 +235,9 @@ export default {
],
musicType: [
{ required: true, message: "音乐类型不能为空", trigger: "change" }
],
imgAddr: [
{ required: true, message: "音乐图片不能为空", trigger: "change" }
]
}
};
@@ -236,6 +255,39 @@ export default {
this.loading = false;
});
},
// 获取标签列表
getTagList() {
listTags().then(response => {
this.tagOptions = response.rows || [];
// 如果正在编辑，解析已有的标签
if (this.form.label) {
this.parseTagsFromString(this.form.label);
}
});
},
// 处理标签选择变化
handleTagsChange(value) {
// 将标签ID数组转换为标签名称数组
const selectedTagNames = value.map(id => {
const tag = this.tagOptions.find(item => item.id === id);
return tag ? tag.name : '';
}).filter(name => name !== '');
// 用分号连接并更新表单
this.form.label = selectedTagNames.join(';');
},
// 从字符串解析标签
parseTagsFromString(tagString) {
if (!tagString) {
this.selectedTags = [];
return;
}
const tagNames = tagString.split(';');
this.selectedTags = this.tagOptions
.filter(tag => tagNames.includes(tag.name))
.map(tag => tag.id);
},
// 取消按钮
cancel() {
this.open = false;
@@ -255,6 +307,7 @@ export default {
musicType: "ordinary",
label: null
};
this.selectedTags = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
@@ -270,15 +323,21 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.getTagList(); // 获取标签列表
this.open = true;
this.title = "添加普通歌曲";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
const id = row.musicId || this.ids;
this.getTagList(); // 获取标签列表
getNormalSong(id).then(response => {
this.form = response.data;
// 解析已有的标签
if (this.form.label && this.tagOptions.length > 0) {
this.parseTagsFromString(this.form.label);
}
this.open = true;
this.title = "修改普通歌曲";
});
@@ -287,6 +346,12 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
// 检查音乐图片是否已上传
if (!this.form.imgAddr) {
this.$message.error("请上传音乐图片");
return;
}
if (this.form.id != null) {
updateNormalSong(this.form).then(response => {
this.$modal.msgSuccess("修改成功");

373
ruoyi-ui/src/views/playlist/remix/index.vue
View File

@@ -59,40 +59,49 @@
<el-table v-loading="loading" :data="playlistList">
<el-table-column label="序号" align="center" type="index" width="60" />
<el-table-column label="混音名称" align="center" prop="remixName" :show-overflow-tooltip="true" />
<el-table-column label="二类音乐名称" align="center" prop="secondMusicName" :show-overflow-tooltip="true" />
<el-table-column label="制作时间" align="center" prop="productionTime" width="120" />
<el-table-column label="文件类型" align="center" prop="fileType" width="120" />
<el-table-column label="权限" align="center" prop="permission" width="80">
<el-table-column label="混音名称" align="center" prop="name" :show-overflow-tooltip="true" />
<!-- <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />-->
<el-table-column label="音乐场景" align="center" prop="musicScene" width="200">
<template slot-scope="scope">
<span>{{ scope.row.permission === 1 ? 'VIP' : '免费' }}</span>
<el-tag
v-for="scene in getScenes(scope.row)"
:key="scene.sceneId"
type="primary"
size="mini"
style="margin-right: 5px; margin-bottom: 5px;"
>
{{ scene.scene }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="分类" align="center" prop="category" width="100">
<el-table-column label="VIP权限" align="center" prop="vip" width="80">
<template slot-scope="scope">
<el-tag type="primary" size="mini">{{ scope.row.category }}</el-tag>
<el-tag :type="scope.row.vip === '1' ? 'warning' : 'success'" size="mini">
{{ scope.row.vip === '1' ? 'VIP' : '免费' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="标签" align="center" prop="tags" width="150">
<el-table-column label="标签" align="center" prop="label" width="150">
<template slot-scope="scope">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
type="warning"
size="mini"
style="margin-right: 5px;"
<el-tag
v-for="tag in scope.row.label ? scope.row.label.split(';') : []"
:key="tag"
type="info"
size="mini"
style="margin-right: 5px; margin-bottom: 5px;"
>
{{ tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="80">
<el-table-column label="上架状态" align="center" prop="shelf" width="80">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="mini">
{{ scope.row.status === 1 ? '上架' : '下架' }}
<el-tag :type="scope.row.shelf === '1' ? 'success' : 'danger'" size="mini">
{{ scope.row.shelf === '1' ? '上架' : '下架' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="120" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
<template slot-scope="scope">
<el-button
@@ -112,7 +121,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@@ -124,105 +133,85 @@
<!-- 添加或修改混音歌曲对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="混音名称" prop="remixName" required>
<el-input v-model="form.remixName" placeholder="请输入音乐名称" />
<el-form-item label="音乐名称" prop="name" required>
<el-input v-model="form.name" placeholder="请输入音乐名称" />
</el-form-item>
<el-form-item label="权限" prop="permission" required>
<el-select v-model="form.permission" placeholder="请选择权限" style="width: 100%">
<el-form-item label="作者" prop="author" required>
<el-input v-model="form.author" placeholder="请输入作者" />
</el-form-item>
<el-form-item label="VIP权限" prop="vip" required>
<el-select v-model="form.vip" placeholder="请选择VIP权限" style="width: 100%">
<el-option label="免费" :value="0" />
<el-option label="VIP" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="分类配置" prop="categoryConfig" required>
<el-select v-model="form.categoryConfig" placeholder="请选择分类" style="width: 100%">
<el-option
v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-form-item label="上架状态" prop="shelf" required>
<el-select v-model="form.shelf" placeholder="请选择上架状态" style="width: 100%">
<el-option label="上架" :value="1" />
<el-option label="下架" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="标签" prop="tags">
<el-select v-model="form.tags" multiple placeholder="请添加标签 (可多选)" style="width: 100%">
<el-form-item label="标签" prop="label">
<el-select
v-model="selectedTags"
multiple
filterable
placeholder="请选择标签"
style="width: 100%"
@change="handleTagsChange">
<el-option
v-for="item in tagOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分类" prop="category" required>
<el-select v-model="form.category" placeholder="请选择分类" style="width: 100%">
<el-option
v-for="item in categoryOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="上架状态" prop="status" required>
<el-switch v-model="form.status" active-value="1" inactive-value="0" />
</el-form-item>
<el-form-item label="添加场景音乐" required>
<el-form-item label="音乐场景" prop="musicScenes" required>
<div class="scene-music-container">
<div
v-for="(item, index) in 3"
:key="index"
<div
v-for="(scene, index) in availableScenes"
:key="scene.sceneId"
class="scene-music-item"
@click="selectSceneMusic(index)"
>
<div v-if="form.selectedSongs[index]" class="selected-music">
<img :src="form.selectedSongs[index].coverUrl" class="music-cover">
<span class="music-name">{{ form.selectedSongs[index].musicName }}</span>
<i class="el-icon-close remove-btn" @click.stop="removeSceneMusic(index)"></i>
</div>
<div v-else class="add-music-btn">
<i class="el-icon-plus"></i>
</div>
<el-checkbox
v-model="selectedScenes"
:label="scene.sceneId"
@change="handleSceneChange"
>
{{ scene.scene }}
</el-checkbox>
</div>
</div>
</el-form-item>
<el-form-item label="音乐图片" prop="imgAddr">
<image-upload
v-model="form.imgAddr"
:limit="1"
:file-type="['jpg', 'jpeg', 'png', 'gif']"
action="/back/upload/musicImg/file"
/>
</el-form-item>
<el-form-item label="音乐文件" prop="musicAddr">
<file-upload
v-model="form.musicAddr"
:limit="1"
:file-type="['mp3', 'wav', 'flac']"
action="/back/upload/music/file"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 选择场景音乐对话框 -->
<el-dialog title="选择场景音乐" :visible.sync="musicSelectOpen" width="800px" append-to-body>
<el-table :data="musicList" @selection-change="handleMusicSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column label="音乐名称" prop="musicName" />
<el-table-column label="制作人" prop="producer" />
<el-table-column label="分类" prop="category" />
<el-table-column label="标签" prop="tags">
<template slot-scope="scope">
<el-tag
v-for="tag in scope.row.tags"
:key="tag"
type="warning"
size="mini"
style="margin-right: 5px;"
>
{{ tag }}
</el-tag>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmMusicSelection">确 定</el-button>
<el-button @click="musicSelectOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listRemixSong, getRemixSong, delRemixSong, addRemixSong, updateRemixSong, getMusicList } from "@/api/playlist/remix";
import { listTags } from "@/api/playlist/tag";
export default {
name: "RemixSong",
@@ -234,27 +223,27 @@ export default {
playlistList: [],
title: "",
open: false,
musicSelectOpen: false,
currentMusicIndex: 0,
selectedTags: [], // 已选择的标签
selectedScenes: [], // 已选择的场景
availableScenes: [], // 可用的场景列表
musicList: [],
selectedMusic: null,
queryParams: {
pageNum: 1,
pageSize: 10,
musicName: null,
category: null,
tag: null,
status: null,
permission: null
},
form: {
selectedSongs: []
shelf: null,
vip: null,
musicType: 'mixing'
},
form: {},
rules: {
remixName: [{ required: true, message: "混音名称不能为空", trigger: "blur" }],
permission: [{ required: true, message: "权限不能为空", trigger: "change" }],
categoryConfig: [{ required: true, message: "分类配置不能为空", trigger: "change" }],
category: [{ required: true, message: "分类不能为空", trigger: "change" }]
name: [{ required: true, message: "音乐名称不能为空", trigger: "blur" }],
author: [{ required: true, message: "作者不能为空", trigger: "blur" }],
vip: [{ required: true, message: "VIP权限不能为空", trigger: "change" }],
shelf: [{ required: true, message: "上架状态不能为空", trigger: "change" }],
imgAddr: [{ required: true, message: "音乐图片不能为空", trigger: "change" }]
},
categoryOptions: [
{ label: '热门', value: '热门' },
@@ -263,17 +252,7 @@ export default {
{ label: '古典', value: '古典' },
{ label: '爵士', value: '爵士' }
],
tagOptions: [
{ label: '流行', value: '流行' },
{ label: '摇滚', value: '摇滚' },
{ label: '古典', value: '古典' },
{ label: '爵士', value: '爵士' },
{ label: '电子', value: '电子' },
{ label: '民谣', value: '民谣' },
{ label: '电音', value: '电音' },
{ label: '混音', value: '混音' },
{ label: '睡眠', value: '睡眠' }
],
tagOptions: [],
statusOptions: [
{ label: '下架', value: 0 },
{ label: '上架', value: 1 }
@@ -302,6 +281,75 @@ export default {
this.musicList = response.rows || [];
});
},
// 获取音乐场景数据
getScenes(row) {
if (row.musicScene && row.musicScene.musicScenes && row.musicScene.musicScenes.length > 0) {
return row.musicScene.musicScenes;
}
return [];
},
// 获取场景列表
getSceneList() {
// 这里应该调用获取场景列表的API，这里模拟一些数据
this.availableScenes = [
{ sceneId: '1', scene: '下雨' },
{ sceneId: '2', scene: '打雷' },
{ sceneId: '3', scene: '海浪' },
{ sceneId: '4', scene: '森林' }
];
},
// 获取标签列表
getTagList() {
listTags().then(response => {
this.tagOptions = response.rows || [];
// 如果正在编辑，解析已有的标签
if (this.form.label) {
this.parseTagsFromString(this.form.label);
}
});
},
// 处理标签选择变化
handleTagsChange(value) {
// 将标签ID数组转换为标签名称数组
const selectedTagNames = value.map(id => {
const tag = this.tagOptions.find(item => item.id === id);
return tag ? tag.name : '';
}).filter(name => name !== '');
// 用分号连接并更新表单
this.form.label = selectedTagNames.join(';');
},
// 从字符串解析标签
parseTagsFromString(tagString) {
if (!tagString) {
this.selectedTags = [];
return;
}
const tagNames = tagString.split(';');
this.selectedTags = this.tagOptions
.filter(tag => tagNames.includes(tag.name))
.map(tag => tag.id);
},
// 处理场景选择变化
handleSceneChange() {
if (this.form.musicScene) {
this.form.musicScene.sceneIds = this.selectedScenes.join(',');
} else {
this.form.musicScene = {
sceneIds: this.selectedScenes.join(',')
};
}
},
// 从字符串解析场景
parseSceneIdsFromString(sceneIdsString) {
if (!sceneIdsString) {
this.selectedScenes = [];
return;
}
this.selectedScenes = sceneIdsString.split(',');
},
cancel() {
this.open = false;
this.reset();
@@ -309,14 +357,21 @@ export default {
reset() {
this.form = {
id: null,
remixName: null,
permission: 0,
categoryConfig: null,
category: null,
tags: [],
status: 1,
selectedSongs: []
musicId: null,
name: null,
author: null,
vip: 0,
shelf: 1,
imgAddr: null,
musicAddr: null,
musicType: "mixing",
label: null,
musicScene: {
sceneIds: ""
}
};
this.selectedTags = [];
this.selectedScenes = [];
this.resetForm("form");
},
handleQuery() {
@@ -329,14 +384,29 @@ export default {
},
handleAdd() {
this.reset();
this.getTagList(); // 获取标签列表
this.getSceneList(); // 获取场景列表
this.open = true;
this.title = "新增混音歌曲";
},
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
this.getTagList(); // 获取标签列表
this.getSceneList(); // 获取场景列表
const id = row.id || this.ids;
getRemixSong(id).then(response => {
this.form = response.data;
// 解析已有的标签
if (this.form.label && this.tagOptions.length > 0) {
this.parseTagsFromString(this.form.label);
}
// 解析已有的场景
if (this.form.musicScene && this.form.musicScene.sceneIds) {
this.parseSceneIdsFromString(this.form.musicScene.sceneIds);
}
this.open = true;
this.title = "编辑混音歌曲";
});
@@ -368,25 +438,6 @@ export default {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
selectSceneMusic(index) {
this.currentMusicIndex = index;
this.musicSelectOpen = true;
},
handleMusicSelectionChange(selection) {
if (selection.length > 0) {
this.selectedMusic = selection[0];
}
},
confirmMusicSelection() {
if (this.selectedMusic) {
this.$set(this.form.selectedSongs, this.currentMusicIndex, this.selectedMusic);
this.musicSelectOpen = false;
this.selectedMusic = null;
}
},
removeSceneMusic(index) {
this.$delete(this.form.selectedSongs, index);
}
}
};
@@ -395,58 +446,24 @@ export default {
<style scoped>
.scene-music-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.scene-music-item {
width: 120px;
height: 120px;
min-width: 120px;
padding: 10px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.scene-music-item:hover {
border-color: #409EFF;
}
.add-music-btn {
font-size: 28px;
color: #8c939d;
}
.selected-music {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.music-cover {
width: 60px;
height: 60px;
border-radius: 4px;
margin-bottom: 5px;
}
.music-name {
font-size: 12px;
color: #606266;
text-align: center;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.remove-btn {
position: absolute;
top: 5px;
right: 5px;
color: #f56c6c;
cursor: pointer;
}
.el-tag {
border-radius: 12px;
margin-bottom: 5px;
}
</style>