refactor(admin): 重构歌单管理功能提升代码质量
- 移除未使用的 computed 导入语句 - 添加错误处理工具 showErrorOnce 的导入 - 新增 playlistMusics 响应式变量存储歌单音乐数据 - 优化歌单详情加载逻辑,完善异常情况的数据重置 - 在音乐添加和移除操作后同步更新歌单列表数据 - 添加统一的错误处理机制替代原有 console.error - 重构歌单权限校验逻辑,提取为独立的验证方法 - 增强管理员权限支持,允许后台管理员维护用户歌单
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getPlaylistList, getPlaylistById, addPlaylist as apiAddPlaylist, updatePlaylist as apiUpdatePlaylist, deletePlaylist as apiDeletePlaylist } from '../../api/playlist'
|
||||
import { getPlaylistTypeList } from '../../api/playlistType'
|
||||
import { processMusicUrl } from '../../api/music'
|
||||
import { showErrorOnce } from '../../utils/errorHandler'
|
||||
|
||||
// 歌单列表
|
||||
const playlistList = ref([])
|
||||
@@ -251,6 +252,7 @@ const musicDialogVisible = ref(false)
|
||||
const currentPlaylistId = ref(null)
|
||||
const currentPlaylistName = ref('')
|
||||
const musicList = ref([])
|
||||
const playlistMusics = ref([])
|
||||
const selectedMusicIds = ref([])
|
||||
const musicSearchKeyword = ref('')
|
||||
const musicLoading = ref(false)
|
||||
@@ -278,10 +280,17 @@ const fetchPlaylistMusic = async (playlistId) => {
|
||||
try {
|
||||
const res = await getPlaylistById(playlistId)
|
||||
if (res.code === 200 && res.data.musics) {
|
||||
playlistMusics.value = res.data.musics
|
||||
selectedMusicIds.value = res.data.musics.map(m => m.id)
|
||||
} else {
|
||||
playlistMusics.value = []
|
||||
selectedMusicIds.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取歌单音乐失败:', error)
|
||||
playlistMusics.value = []
|
||||
selectedMusicIds.value = []
|
||||
showErrorOnce(error, '获取歌单音乐失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -290,6 +299,8 @@ const managePlaylistMusic = async (row) => {
|
||||
currentPlaylistId.value = row.id
|
||||
currentPlaylistName.value = row.name
|
||||
musicSearchKeyword.value = ''
|
||||
playlistMusics.value = []
|
||||
selectedMusicIds.value = []
|
||||
musicDialogVisible.value = true
|
||||
|
||||
// 加载音乐列表和已选音乐
|
||||
@@ -305,13 +316,16 @@ const addMusicToPlaylistLocal = async (musicId) => {
|
||||
const res = await addMusicToPlaylist(currentPlaylistId.value, musicId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('添加成功')
|
||||
await fetchPlaylistMusic(currentPlaylistId.value)
|
||||
await Promise.all([
|
||||
fetchPlaylistMusic(currentPlaylistId.value),
|
||||
fetchPlaylistList()
|
||||
])
|
||||
} else {
|
||||
ElMessage.error(res.message || '添加失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加音乐失败:', error)
|
||||
ElMessage.error('添加失败')
|
||||
showErrorOnce(error, '添加失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -321,13 +335,16 @@ const removeMusicFromPlaylistLocal = async (musicId) => {
|
||||
const res = await removeMusicFromPlaylist(currentPlaylistId.value, musicId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('移除成功')
|
||||
await fetchPlaylistMusic(currentPlaylistId.value)
|
||||
await Promise.all([
|
||||
fetchPlaylistMusic(currentPlaylistId.value),
|
||||
fetchPlaylistList()
|
||||
])
|
||||
} else {
|
||||
ElMessage.error(res.message || '移除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('移除音乐失败:', error)
|
||||
ElMessage.error('移除失败')
|
||||
showErrorOnce(error, '移除失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -737,7 +754,7 @@ import { addMusicToPlaylist, removeMusicFromPlaylist } from '../../api/playlist'
|
||||
<div class="selected-music-container">
|
||||
<h3>已添加的音乐</h3>
|
||||
<el-table
|
||||
:data="musicList.filter(m => selectedMusicIds.includes(m.id))"
|
||||
:data="playlistMusics"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
empty-text="暂无音乐"
|
||||
|
||||
Reference in New Issue
Block a user