课程管理-视频库 类别调整

src/views/course/videoResource/index.vue

@@ -20,12 +20,22 @@
         />
       </el-form-item>
       <el-form-item label="分类" prop="typeId">
-        <el-select v-model="queryParams.typeId" clearable placeholder="请选择分类">
+        <el-select v-model="queryParams.typeId" clearable placeholder="请选择分类" @change="changeCateType">
           <el-option
-            v-for="item in typeList"
-            :key="item.cateId"
-            :label="item.cateName"
-            :value="item.cateId">
+            v-for="item in rootTypeList"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="子分类" prop="typeSubId">
+        <el-select v-model="queryParams.typeSubId" clearable placeholder="请选择子分类">
+          <el-option
+            v-for="item in subTypeList"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue">
           </el-option>
         </el-select>
       </el-form-item>
@@ -74,16 +84,24 @@
                 {{ scope.$index + 1 }}
               </template>
             </el-table-column>
-      <el-table-column label="主键ID" align="center">
+      <el-table-column label="主键ID" align="center" width="80">
         <template slot-scope="scope">
           <a @click="copy(scope.row.id)" style="color: #409EFF;">ID</a>
         </template>
       </el-table-column>
-      <el-table-column label="素材名称" align="center" prop="resourceName" />
-      <el-table-column label="文件名称" align="center" prop="fileName" />
-      <el-table-column label="分类" align="center" prop="typeName">
+      <el-table-column label="素材名称" align="center" :show-overflow-tooltip="true" prop="resourceName" width="300"/>
+      <el-table-column label="文件名称" align="center" :show-overflow-tooltip="true" prop="fileName" width="300"/>
+      <el-table-column label="分类" align="center" width="120">
+        <template slot-scope="scope">
+          <span v-if="scope.row.typeId">{{ getTypeName(scope.row.typeId) }}</span>
+        </template>
       </el-table-column>
-      <el-table-column label="视频文件" align="center">
+      <el-table-column label="子分类" align="center" width="120">
+        <template slot-scope="scope">
+          <span v-if="scope.row.typeSubId">{{ getTypeName(scope.row.typeSubId) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="视频文件" align="center" width="120">
         <template slot-scope="scope">
           <a
             @click="handleVideoPreview(scope.row.videoUrl)"
@@ -92,7 +110,7 @@
           </a>
         </template>
       </el-table-column>
-      <el-table-column label="CDN" align="center">
+      <el-table-column label="CDN" align="center" width="120">
         <template slot-scope="scope">
           <a
             @click="copy(scope.row.videoUrl)"
@@ -101,7 +119,7 @@
           </a>
         </template>
       </el-table-column>
-      <el-table-column label="关联题目" align="center">
+      <el-table-column label="关联题目" align="center" width="150">
         <template slot-scope="scope">
           <a
             @click="handleViewProject(scope.row)"
@@ -130,12 +148,12 @@
           </a>
         </template>
       </el-table-column>
-      <el-table-column label="视频时长" align="center">
+      <el-table-column label="视频时长" align="center" width="150">
         <template slot-scope="scope">
           <div style="padding: 4px 12px;background: linear-gradient(to right, rgb(196 219 255), #409EFF)">{{ formatDuration(scope.row.duration) }}</div>
         </template>
       </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" width="120" fixed="right">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -175,12 +193,23 @@
         </el-form-item>
 
         <el-form-item label="分类" prop="typeId">
-          <el-select v-model="form.typeId" placeholder="请选择分类" style="width: 100%">
+          <el-select v-model="form.typeId" placeholder="请选择分类" style="width: 100%" @change="changeCateType">
             <el-option
-              v-for="item in typeList"
-              :key="item.cateId"
-              :label="item.cateName"
-              :value="item.cateId">
+              v-for="item in rootTypeList"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="子分类" prop="typeSubId">
+          <el-select v-model="form.typeSubId" clearable placeholder="请选择子分类" style="width: 100%">
+            <el-option
+              v-for="item in subTypeList"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue">
             </el-option>
           </el-select>
         </el-form-item>
@@ -378,12 +407,23 @@
         class="upload-dialog">
         <el-form :model="batchUploadForm" ref="batchUploadForm" label-width="80px">
           <el-form-item style="margin-top: 20px" label="分类" prop="typeId" :rules="[{ required: true, message: '请选择分类', trigger: 'blur' }]">
-            <el-select v-model="batchUploadForm.typeId" placeholder="请选择分类" style="width: 100%">
+            <el-select v-model="batchUploadForm.typeId" placeholder="请选择分类" style="width: 100%" @change="changeCateType">
+              <el-option
+                v-for="item in rootTypeList"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="子分类" prop="typeSubId" :rules="[{ required: true, message: '请选择子分类', trigger: 'blur' }]">
+            <el-select v-model="batchUploadForm.typeSubId" clearable placeholder="请选择子分类" style="width: 100%">
               <el-option
-                v-for="item in typeList"
-                :key="item.cateId"
-                :label="item.cateName"
-                :value="item.cateId">
+                v-for="item in subTypeList"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue">
               </el-option>
             </el-select>
           </el-form-item>
@@ -415,7 +455,7 @@
               :on-change="handleBatchFileChange"
               multiple
               accept=".mp4">
-              <el-button type="primary" :disabled="batchUploadForm.typeId === null">选择文件</el-button>
+              <el-button type="primary" :disabled="batchUploadForm.typeSubId === null">选择文件</el-button>
               <div slot="tip" class="el-upload__tip">选择分类后才可以上传视频</div>
             </el-upload>
           </el-form-item>
@@ -604,7 +644,7 @@ import {
   updateVideoResource,
   batchAddVideoResource
 } from '@/api/course/videoResource'
-import {listUserCourseCategory} from '@/api/course/userCourseCategory'
+import {listUserCourseCategory,getCatePidList,getCateListByPid} from '@/api/course/userCourseCategory'
 import {getByIds, listCourseQuestionBank} from '@/api/course/courseQuestionBank'
 import {getThumbnail} from "@/api/course/userVideo";
 import {uploadObject} from "@/utils/cos.js";
@@ -654,6 +694,7 @@ export default {
         fileKey: null,
         videoUrl: null,
         typeId: null,
+        typeSubId: null,
         projectIds: []
       },
       // 表单校验
@@ -667,6 +708,9 @@ export default {
         typeId: [
           { required: true, message: "请选择分类", trigger: "change" }
         ],
+        typeSubId: [
+          { required: true, message: "请选择子分类", trigger: "change" }
+        ],
         videoUrl: [
           { required: true, message: "请上传视频", trigger: "change" }
         ]
@@ -676,6 +720,8 @@ export default {
       projectShowList: [],
       // 分类
       typeList: [],
+      rootTypeList: [],
+      subTypeList: [],
       // 视频上传
       videoDisabled: false,
       videoPreviewVisible: false,
@@ -741,6 +787,7 @@ export default {
   },
   created() {
     this.getTypeList();
+    this.getRootTypeList()
     this.getList();
   },
   methods: {
@@ -773,6 +820,7 @@ export default {
       this.$refs.videoUpload.clearFiles()
       this.open = false;
       this.reset();
+      this.changeCateType(this.queryParams.typeId)
     },
     // 表单重置
     reset() {
@@ -820,6 +868,7 @@ export default {
 
       // 先重置表单
       this.reset();
+      this.subTypeList = []
 
       // 重置上传组件
       if (this.$refs.videoUpload) {
@@ -838,12 +887,14 @@ export default {
 
       // 先重置表单
       this.reset();
+      this.subTypeList = []
 
       const id = row.id
 
       // 获取数据并设置表单
       getVideoResource(id).then(response => {
         this.form = response.data;
+        this.changeCateType(this.form.typeId)
 
         // 处理projectIds，确保是数组格式
         if (this.form.projectIds && typeof this.form.projectIds === 'string') {
@@ -926,6 +977,20 @@ export default {
         this.typeList = response.data;
       });
     },
+    getRootTypeList() {
+      getCatePidList().then(response => {
+        this.rootTypeList = response.data
+      });
+    },
+    changeCateType(val) {
+      if (!val) {
+        this.subTypeList = []
+        return
+      }
+      getCateListByPid(val).then(response => {
+        this.subTypeList = response.data
+      })
+    },
     /** 预览视频 */
     handleVideoPreview(url) {
       this.videoPreviewVisible = true;
@@ -1067,6 +1132,7 @@ export default {
         type: 'warning'
         }).then(() => {
           this.batchAddVisible = false
+          this.changeCateType(this.queryParams.typeId)
       }).catch(() => {
       });
     },
@@ -1103,6 +1169,7 @@ export default {
     /** 编辑视频信息 */
     handleEditVideo(row) {
       this.batchEditDialog.form = Object.assign({}, row)
+      this.changeCateType(row.typeId)
       this.batchEditDialog.open = true
     },
     batchEditCancel() {
@@ -1144,10 +1211,12 @@ export default {
       this.showUpload = true;
       this.batchUploadForm = {
         typeId: null,
+        typeSubId: null,
         projectIds: [],
         files: []
       };
       this.batchFileList = [];
+      this.subTypeList = []
       if (this.$refs.batchVideoUpload) {
         this.$refs.batchVideoUpload.clearFiles();
       }
@@ -1174,6 +1243,7 @@ export default {
         fileKey: null,
         videoUrl: null,
         typeId: this.batchUploadForm.typeId, // 使用选择的分类
+        typeSubId: this.batchUploadForm.typeSubId, // 使用选择的子分类
         projectIds: this.batchUploadForm.projectIds, // 使用选择的项目
         progress: 0, // 上传进度
         file: file // 保存文件引用
@@ -1372,7 +1442,7 @@ export default {
       this.projectListDialogVisible = true;
     },
     /** 初始化分类树 */
-    initCategoryTree(name) {
+    initCategoryTree() {
       // 获取分类列表
       listUserCourseCategory().then(response => {
         const treeDate = this.handleTree(response.data, "cateId", "pid");