新增音乐管理功能,包括音乐列表查询、分类绑定音乐及前端页面的实现,优化了分类管理界面。
This commit is contained in:
27
ruoyi-ui/src/api/content/music.js
Normal file
27
ruoyi-ui/src/api/content/music.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询音乐列表
|
||||||
|
export function listMusic(query) {
|
||||||
|
return request({
|
||||||
|
url: '/back/music/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取分类已绑定的音乐
|
||||||
|
export function getCategoryBoundMusic(categoryId) {
|
||||||
|
return request({
|
||||||
|
url: `/back/category/cate/music/${categoryId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绑定音乐到分类
|
||||||
|
export function bindMusicToCategory(categoryId, musicIds) {
|
||||||
|
return request({
|
||||||
|
url: `/back/category/bind/${categoryId}/${musicIds.join(',')}`,
|
||||||
|
method: 'put',
|
||||||
|
baseURL: 'http://60.205.107.210:8080' // 使用指定的服务器地址
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -24,8 +24,6 @@ export function addNormalSong(data) {
|
|||||||
formData.append('producer', data.producer)
|
formData.append('producer', data.producer)
|
||||||
formData.append('fileType', data.fileType)
|
formData.append('fileType', data.fileType)
|
||||||
formData.append('permission', data.permission)
|
formData.append('permission', data.permission)
|
||||||
formData.append('categoryConfig', data.categoryConfig)
|
|
||||||
formData.append('category', data.category)
|
|
||||||
formData.append('tags', JSON.stringify(data.tags))
|
formData.append('tags', JSON.stringify(data.tags))
|
||||||
formData.append('status', data.status)
|
formData.append('status', data.status)
|
||||||
formData.append('audioType', data.audioType)
|
formData.append('audioType', data.audioType)
|
||||||
@@ -53,8 +51,6 @@ export function updateNormalSong(data) {
|
|||||||
formData.append('producer', data.producer)
|
formData.append('producer', data.producer)
|
||||||
formData.append('fileType', data.fileType)
|
formData.append('fileType', data.fileType)
|
||||||
formData.append('permission', data.permission)
|
formData.append('permission', data.permission)
|
||||||
formData.append('categoryConfig', data.categoryConfig)
|
|
||||||
formData.append('category', data.category)
|
|
||||||
formData.append('tags', JSON.stringify(data.tags))
|
formData.append('tags', JSON.stringify(data.tags))
|
||||||
formData.append('status', data.status)
|
formData.append('status', data.status)
|
||||||
formData.append('audioType', data.audioType)
|
formData.append('audioType', data.audioType)
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
<el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column label="分类ID" align="center" prop="id" />
|
<el-table-column label="分类ID" align="center" prop="categoryId" />
|
||||||
<el-table-column label="分类名称" align="center" prop="name" />
|
<el-table-column label="分类名称" align="center" prop="name" />
|
||||||
<el-table-column label="分类图片" align="center" prop="backImg" width="100">
|
<el-table-column label="分类图片" align="center" prop="backImg" width="100">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -50,6 +50,13 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-link"
|
||||||
|
@click="handleBindMusic(scope.row)"
|
||||||
|
v-hasPermi="['content:category:bind']"
|
||||||
|
>绑定音乐</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="text"
|
type="text"
|
||||||
@@ -102,11 +109,72 @@
|
|||||||
<el-button @click="cancel">取 消</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 绑定音乐对话框 -->
|
||||||
|
<el-dialog title="绑定音乐" :visible.sync="bindMusicOpen" width="800px" append-to-body>
|
||||||
|
<el-table
|
||||||
|
ref="musicTable"
|
||||||
|
v-loading="musicLoading"
|
||||||
|
:data="musicList"
|
||||||
|
@selection-change="handleMusicSelectionChange"
|
||||||
|
height="400"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<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="musicType" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.musicType === 'ordinary' ? 'primary' : 'success'" size="mini">
|
||||||
|
{{ scope.row.musicType === 'ordinary' ? '普通歌曲' : '混音歌曲' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="权限" align="center" prop="vip" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.vip === 1 ? 'VIP' : '免费' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" align="center" prop="shelf" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<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="label" width="150">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag
|
||||||
|
v-for="tag in scope.row.label ? scope.row.label.split(';') : []"
|
||||||
|
:key="tag"
|
||||||
|
type="warning"
|
||||||
|
size="mini"
|
||||||
|
style="margin-right: 5px;"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="musicTotal>0"
|
||||||
|
:total="musicTotal"
|
||||||
|
:page.sync="musicQueryParams.pageNum"
|
||||||
|
:limit.sync="musicQueryParams.pageSize"
|
||||||
|
@pagination="handleMusicPagination"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitBindMusic" :loading="bindLoading">确 定</el-button>
|
||||||
|
<el-button @click="bindMusicOpen = false">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/content/category";
|
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/content/category";
|
||||||
|
import { listMusic, bindMusicToCategory, getCategoryBoundMusic } from "@/api/content/music";
|
||||||
import { getImageUrl } from "@/utils/image.js";
|
import { getImageUrl } from "@/utils/image.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -144,7 +212,20 @@ export default {
|
|||||||
name: [
|
name: [
|
||||||
{ required: true, message: "分类名称不能为空", trigger: "blur" }
|
{ required: true, message: "分类名称不能为空", trigger: "blur" }
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
// 绑定音乐相关
|
||||||
|
bindMusicOpen: false,
|
||||||
|
musicLoading: false,
|
||||||
|
musicList: [],
|
||||||
|
musicTotal: 0,
|
||||||
|
selectedMusicIds: [],
|
||||||
|
boundMusicIds: [], // 已绑定的音乐ID列表
|
||||||
|
musicQueryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
musicType: null
|
||||||
|
},
|
||||||
|
bindLoading: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -288,6 +369,81 @@ export default {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
},
|
||||||
|
// 绑定音乐
|
||||||
|
handleBindMusic(row) {
|
||||||
|
this.musicQueryParams.categoryId = row.categoryId;
|
||||||
|
this.selectedMusicIds = []; // 重置选中的音乐
|
||||||
|
this.boundMusicIds = []; // 重置已绑定的音乐ID
|
||||||
|
this.getBoundMusic(row.categoryId); // 先获取已绑定的音乐
|
||||||
|
this.getMusicList();
|
||||||
|
this.bindMusicOpen = true;
|
||||||
|
},
|
||||||
|
/** 获取分类已绑定的音乐 */
|
||||||
|
getBoundMusic(categoryId) {
|
||||||
|
getCategoryBoundMusic(categoryId).then(response => {
|
||||||
|
// 假设返回的数据结构包含musicId字段
|
||||||
|
if (response.data && Array.isArray(response.data)) {
|
||||||
|
this.boundMusicIds = response.data.map(item => item.musicId || item.id);
|
||||||
|
} else if (response.rows && Array.isArray(response.rows)) {
|
||||||
|
this.boundMusicIds = response.rows.map(item => item.musicId || item.id);
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.boundMusicIds = [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 查询音乐列表 */
|
||||||
|
getMusicList() {
|
||||||
|
this.musicLoading = true;
|
||||||
|
listMusic(this.musicQueryParams).then(response => {
|
||||||
|
this.musicList = response.rows;
|
||||||
|
this.musicTotal = response.total;
|
||||||
|
this.musicLoading = false;
|
||||||
|
// 在数据加载完成后,设置默认勾选
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setDefaultSelection();
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.musicLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 设置默认勾选已绑定的音乐 */
|
||||||
|
setDefaultSelection() {
|
||||||
|
if (this.$refs.musicTable && this.boundMusicIds.length > 0) {
|
||||||
|
this.musicList.forEach((row, index) => {
|
||||||
|
if (this.boundMusicIds.includes(row.musicId)) {
|
||||||
|
this.$refs.musicTable.toggleRowSelection(row, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 音乐多选框选中数据
|
||||||
|
handleMusicSelectionChange(selection) {
|
||||||
|
this.selectedMusicIds = selection.map(item => item.musicId);
|
||||||
|
},
|
||||||
|
/** 提交绑定音乐 */
|
||||||
|
submitBindMusic() {
|
||||||
|
if (!this.selectedMusicIds || this.selectedMusicIds.length === 0) {
|
||||||
|
this.$message.warning('请选择要绑定的音乐');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.bindLoading = true;
|
||||||
|
bindMusicToCategory(this.musicQueryParams.categoryId, this.selectedMusicIds).then(response => {
|
||||||
|
this.$modal.msgSuccess("音乐绑定成功");
|
||||||
|
this.bindMusicOpen = false;
|
||||||
|
this.bindLoading = false;
|
||||||
|
this.getList(); // 刷新分类列表
|
||||||
|
}).catch(() => {
|
||||||
|
this.bindLoading = false;
|
||||||
|
// 失败时不关闭弹窗,只提示错误
|
||||||
|
this.$message.error('绑定失败,请重试');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 音乐分页 */
|
||||||
|
handleMusicPagination(val) {
|
||||||
|
this.musicQueryParams.pageNum = val.pageNum;
|
||||||
|
this.musicQueryParams.pageSize = val.pageSize;
|
||||||
|
this.getMusicList();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -144,16 +144,6 @@
|
|||||||
<el-option label="VIP" :value="1" />
|
<el-option label="VIP" :value="1" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</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-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="标签" prop="tags">
|
<el-form-item label="标签" prop="tags">
|
||||||
<el-select v-model="form.tags" multiple placeholder="请添加标签 (可多选)" style="width: 100%">
|
<el-select v-model="form.tags" multiple placeholder="请添加标签 (可多选)" style="width: 100%">
|
||||||
<el-option
|
<el-option
|
||||||
@@ -164,16 +154,6 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</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="audioType" required>
|
<el-form-item label="音频类型" prop="audioType" required>
|
||||||
<el-select v-model="form.audioType" placeholder="请选择音频类型" style="width: 100%">
|
<el-select v-model="form.audioType" placeholder="请选择音频类型" style="width: 100%">
|
||||||
<el-option label="普通歌曲" value="普通歌曲" />
|
<el-option label="普通歌曲" value="普通歌曲" />
|
||||||
@@ -249,8 +229,6 @@ export default {
|
|||||||
producer: [{ required: true, message: "制作人不能为空", trigger: "blur" }],
|
producer: [{ required: true, message: "制作人不能为空", trigger: "blur" }],
|
||||||
fileType: [{ required: true, message: "文件类型不能为空", trigger: "change" }],
|
fileType: [{ required: true, message: "文件类型不能为空", trigger: "change" }],
|
||||||
permission: [{ required: true, message: "权限不能为空", trigger: "change" }],
|
permission: [{ required: true, message: "权限不能为空", trigger: "change" }],
|
||||||
categoryConfig: [{ required: true, message: "分类配置不能为空", trigger: "change" }],
|
|
||||||
category: [{ required: true, message: "分类不能为空", trigger: "change" }],
|
|
||||||
audioType: [{ required: true, message: "音频类型不能为空", trigger: "change" }]
|
audioType: [{ required: true, message: "音频类型不能为空", trigger: "change" }]
|
||||||
},
|
},
|
||||||
categoryOptions: [
|
categoryOptions: [
|
||||||
@@ -303,8 +281,6 @@ export default {
|
|||||||
uploadTime: null,
|
uploadTime: null,
|
||||||
fileType: null,
|
fileType: null,
|
||||||
permission: 0,
|
permission: 0,
|
||||||
categoryConfig: null,
|
|
||||||
category: null,
|
|
||||||
tags: [],
|
tags: [],
|
||||||
status: 1,
|
status: 1,
|
||||||
audioType: '普通歌曲',
|
audioType: '普通歌曲',
|
||||||
|
|||||||
Reference in New Issue
Block a user