feat: 课程目录新增绑定看课标签

src/api/course/userCourseVideo.js

@@ -39,6 +39,15 @@ export function addUserCourseVideo(data) {
   })
 }
 
+// 更新课程小节
+export function updateUserCourseVideoUpdate(data) {
+  return request({
+    url: '/course/userCourseVideo/update',
+    method: 'post',
+    data: data
+  })
+}
+
 // 修改课堂视频
 export function updateUserCourseVideo(data) {
   return request({

src/views/components/course/userCourseCatalogDetails.vue

@@ -33,6 +33,9 @@
       <el-table-column label="上传时间" align="center" prop="createTime" />
       <el-table-column label="默认红包" align="center" prop="redPacketMoney" />
       <el-table-column label="公司红包" align="center" prop="companyRedPacketMoney" />
+      <el-table-column label="标签组名称" align="center" prop="tagGroupName" />
+      <el-table-column label="看课标签" align="center" prop="watchingTagName" />
+      <el-table-column label="完课标签" align="center" prop="watchedTagName" />
 
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -49,12 +52,10 @@
             @click="updateMoney(scope.row)"
           >设置红包金额</el-button>
 
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            @click="openDialog(scope.row)"-->
-<!--            v-hasPermi="['course:courseLink:create']"-->
-<!--          >生成应急短链</el-button>-->
+          <el-button size="mini"
+                     type="text" @click="openTagDialog(scope.row)">
+            绑定看课标签
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -72,6 +73,7 @@
       :visible.sync="open" append-to-body>
       <userCourseVideoDetails  ref="userCourseVideoDetails" />
     </el-drawer>
+
     <el-dialog title="设置红包金额" :visible.sync="moneyOpen" width="600px" append-to-body>
       <el-form ref="form"  label-width="100px">
         <el-form-item label="红包金额" prop="corpId">
@@ -108,34 +110,107 @@
         <el-button type="primary" @click="confirm">确认</el-button>
       </div>
     </el-dialog>
-<!--    <el-dialog title="设置红包金额" :visible.sync="moneyOpen" width="600px" append-to-body>-->
-<!--      <el-form ref="form"  label-width="100px">-->
-<!--        <el-form-item label="红包金额" prop="corpId">-->
-<!--          <el-input-number v-model="redPacketMoneyForm.redPacketMoney" :min="0.1" :max="200" :step="0.1" ></el-input-number>-->
-<!--        </el-form-item>-->
-<!--      </el-form>-->
-<!--      <div slot="footer" class="dialog-footer">-->
-<!--        <el-button @click="cancel">取 消</el-button>-->
-<!--      </div>-->
-<!--    </el-dialog>-->
+
+    <!-- 弹框 -->
+    <el-dialog
+      title="绑定看课标签"
+      :visible.sync="tagDialogVisible"
+      width="500px"
+      @closed="resetDialog"
+      append-to-body
+    >
+      <el-form :model="tagDialog" label-width="120px">
+        <!-- 标签组选择 -->
+        <el-form-item label="标签组" required>
+          <el-select
+            v-model="tagDialog.groupId"
+            placeholder="请选择标签组"
+            @change="onGroupChange"
+            filterable
+          >
+            <el-option
+              v-for="group in tagGroups"
+              :key="group.groupId"
+              :label="group.name"
+              :value="group.groupId"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 看课标签选择 -->
+        <el-form-item label="看课标签" required>
+          <el-select
+            v-model="tagDialog.watchTagId"
+            placeholder="请选择看课标签"
+            :disabled="!tagDialog.groupId"
+            @change="handleWatchingChange"
+            filterable
+          >
+            <el-option
+              v-for="tag in tagsInGroup"
+              :key="tag.tagId"
+              :label="tag.name"
+              :value="tag.tagId"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 完课标签选择 -->
+        <el-form-item label="完课标签" required>
+          <el-select
+            v-model="tagDialog.finishTagId"
+            placeholder="请选择完课标签"
+            :disabled="!tagDialog.groupId"
+            @change="handleWatchedChange"
+            filterable>
+            <el-option
+              v-for="tag in tagsInGroup"
+              :key="tag.tagId"
+              :label="tag.name"
+              :value="tag.tagId"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancelDialog">取消</el-button>
+        <el-button type="primary" @click="submitTagBinding">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { updatePacketMoney,getSort,getVideoListByCourseId,delUserCourseVideo,getUserCourseVideo,addUserCourseVideo,updateUserCourseVideo } from "@/api/course/userCourseVideo";
+import {getVideoListByCourseId, updatePacketMoney, updateUserCourseVideoUpdate} from "@/api/course/userCourseVideo";
 import userCourseVideoDetails from '../../components/course/userCourseVideoDetails.vue';
-import { createLinkUrl } from "@/api/course/sopCourseLink";
-import { userList } from "@/api/qw/user";
+import {createLinkUrl} from "@/api/course/sopCourseLink";
+import {listTagGroup} from "@/api/qw/tagGroup";
 
-import request from '@/utils/request'
-
-  export default {
+export default {
     name: "userCourseCatalog",
     components: {
       userCourseVideoDetails
     },
+    props: {
+      video: {
+        type: Object,
+        required: true,
+      },
+    },
     data() {
       return {
+        currentRow: null,
+        // 假设这里有当前课程小节的数据传入，里面含id等
+        tagDialogVisible: false,
+        tagGroups: [],
+        tagsInGroup: [],
+        tagDialog: {
+          videoId: null,
+          groupId: null,
+          watchTagId: null,
+          finishTagId: null,
+          tgId: null,
+          watchingTgId: null,
+          watchedTgId: null
+        },
         linkForm:{
           days:null,
           courseId:null,
@@ -218,6 +293,90 @@ import request from '@/utils/request'
       });
     },
     methods: {
+      handleWatchingChange(tagId){
+        this.tagDialog.watchingTgId = this.tagsInGroup.find(e => e.tagId === tagId)?.id;
+      },
+      handleWatchedChange(tagId){
+        this.tagDialog.watchedTgId = this.tagsInGroup.find(e => e.tagId === tagId)?.id;
+      },
+      openTagDialog(row) {
+        this.currentRow = row;
+        this.tagDialogVisible = true;
+        this.tagDialog.videoId = row.videoId;
+        this.tagDialog.groupId = this.currentRow.tagGroupId;
+        this.tagDialog.watchTagId = this.currentRow.watchingTagId;
+        this.tagDialog.finishTagId = this.currentRow.watchedTagId;
+
+
+        // 查询所有的标签组
+        listTagGroup({
+          pageNum: 1,
+          pageSize: 1000
+        }).then((res) => {
+          if(res.code === 200) {
+            this.tagGroups = res.rows;
+
+            let tagGroup = this.tagGroups.find(e=>e.groupId === this.currentRow.tagGroupId);
+            this.tagsInGroup = tagGroup.tag || [];
+          }
+        });
+      },
+      updateTagsInGroup(groupId) {
+        let tagGroup = this.tagGroups.find(e=> e.groupId === groupId);
+
+        this.tagsInGroup = tagGroup.tag || [];
+        // 切换组时清空标签选择
+        this.tagDialog.watchTagId = null;
+        this.tagDialog.finishTagId = null;
+        this.tagDialog.tgId = tagGroup.id;
+      },
+      onGroupChange(groupId) {
+        this.updateTagsInGroup(groupId);
+      },
+      cancelDialog() {
+        this.tagDialogVisible = false;
+        this.resetDialog();
+      },
+      resetDialog() {
+        this.tagDialog = {
+          videoId: null,
+          groupId: null,
+          watchTagId: null,
+          finishTagId: null,
+        };
+        this.tagGroups = [];
+        this.tagsInGroup = [];
+      },
+      submitTagBinding() {
+        // 使用表单校验
+        if(!this.tagDialog.groupId){
+          this.$message.warning("标签组必选!");
+          return;
+        }
+        if(!this.tagDialog.watchTagId){
+          this.$message.warning("看课标签必选!");
+          return;
+        }
+        if(!this.tagDialog.finishTagId){
+          this.$message.warning("完课标签必选!");
+          return;
+        }
+        this.currentRow.tagGroupId = this.tagDialog.groupId;
+        this.currentRow.watchingTagId = this.tagDialog.watchTagId;
+        this.currentRow.watchedTagId = this.tagDialog.finishTagId;
+
+        this.currentRow.watchingTgId = this.tagDialog.watchingTgId;
+        this.currentRow.watchedTgId = this.tagDialog.watchedTgId;
+        this.currentRow.tgId = this.tagDialog.tgId;
+
+        updateUserCourseVideoUpdate(this.currentRow).then(res=>{
+          this.$message.success("绑定成功");
+          this.resetDialog();
+          this.currentRow = null;
+          this.tagDialogVisible = false;
+          this.getList();
+        })
+      },
       // 打开弹框
       openDialog(row) {
         this.linkForm.courseId = row.courseId;