新增音乐管理功能，包括音乐列表查询、分类绑定音乐及前端页面的实现，优化了分类管理界面。

2025-07-26 22:06:46 +08:00
parent 6fecee904b
commit cd75149bd0
4 changed files with 185 additions and 30 deletions
--- a/ruoyi-ui/src/api/content/music.js
+++ b/ruoyi-ui/src/api/content/music.js
@@ -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' // 使用指定的服务器地址
+  })
+} 
--- a/ruoyi-ui/src/api/playlist/normal.js
+++ b/ruoyi-ui/src/api/playlist/normal.js
@@ -24,8 +24,6 @@ export function addNormalSong(data) {
  formData.append('producer', data.producer)
  formData.append('fileType', data.fileType)
  formData.append('permission', data.permission)
-  formData.append('categoryConfig', data.categoryConfig)
-  formData.append('category', data.category)
  formData.append('tags', JSON.stringify(data.tags))
  formData.append('status', data.status)
  formData.append('audioType', data.audioType)
@@ -53,8 +51,6 @@ export function updateNormalSong(data) {
  formData.append('producer', data.producer)
  formData.append('fileType', data.fileType)
  formData.append('permission', data.permission)
-  formData.append('categoryConfig', data.categoryConfig)
-  formData.append('category', data.category)
  formData.append('tags', JSON.stringify(data.tags))
  formData.append('status', data.status)
  formData.append('audioType', data.audioType)
--- a/ruoyi-ui/src/views/content/category/index.vue
+++ b/ruoyi-ui/src/views/content/category/index.vue
@@ -31,7 +31,7 @@

    <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
      <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="backImg" width="100">
        <template slot-scope="scope">
@@ -50,6 +50,13 @@
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <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
            size="mini"
            type="text"
@@ -102,11 +109,72 @@
        <el-button @click="cancel">取 消</el-button>
      </div>
    </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>
 </template>

 <script>
 import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/content/category";
+import { listMusic, bindMusicToCategory, getCategoryBoundMusic } from "@/api/content/music";
 import { getImageUrl } from "@/utils/image.js";

 export default {
@@ -144,7 +212,20 @@ export default {
        name: [
          { 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() {
@@ -288,6 +369,81 @@ export default {
        return false;
      }
      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();
    }
  }
 };
--- a/ruoyi-ui/src/views/playlist/normal/index.vue
+++ b/ruoyi-ui/src/views/playlist/normal/index.vue
@@ -144,16 +144,6 @@
            <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-select>
-        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="form.tags" multiple placeholder="请添加标签 (可多选)" style="width: 100%">
            <el-option
@@ -164,16 +154,6 @@
            />
          </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="audioType" required>
          <el-select v-model="form.audioType" placeholder="请选择音频类型" style="width: 100%">
            <el-option label="普通歌曲" value="普通歌曲" />
@@ -249,8 +229,6 @@ export default {
        producer: [{ required: true, message: "制作人不能为空", trigger: "blur" }],
        fileType: [{ 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" }]
      },
      categoryOptions: [
@@ -303,8 +281,6 @@ export default {
        uploadTime: null,
        fileType: null,
        permission: 0,
-        categoryConfig: null,
-        category: null,
        tags: [],
        status: 1,
        audioType: '普通歌曲',