feat: 创建队伍

src/views/CoursePage/CourseDetail.vue

@@ -113,7 +113,17 @@
               <el-button plain type="primary">上传课件</el-button>
             </el-upload>
           </div>
+          <!--组队-->
+          <div v-if="isCourseSelected">
+            <div v-if="tabName==='group'">
+              <el-button v-if="tabName==='group'&&isRuleExisted!==null"
+                         plain type="primary" :disabled="isGroupExisted" @click="CreateTeam">
+                {{ isGroupExisted ? '队伍已创建' : '创建队伍' }}
+              </el-button>
+            </div>
+          </div>
         </div>
+
         <!--tab内容-->
         <div v-if="isCreator || isCourseSelected" class="course-tab-content">
           <div v-if="tabName==='task'">
@@ -294,6 +304,18 @@
         <el-button plain type="danger" @click="beforeRuleFormClose">我再想想</el-button>
       </div>
     </el-dialog>
+    <!--组队信息-->
+    <el-dialog v-model="createGroupDialog" :before-close="beforeGroupFormClose" :title="createTeamForm.dialogTitle">
+    <el-form ref="createGroupFormRef" :model="createTeamForm" label-position="right" label-width="150px">
+      <el-form-item label="组名" prop="name">
+        <el-input v-model="createTeamForm.name" placeholder="输入组名" maxlength="5"></el-input>
+      </el-form-item>
+    </el-form>
+      <div style="margin: auto;width: fit-content">
+        <el-button plain type="primary" @click="createTeam">确认</el-button>
+        <el-button plain type="danger" @click="beforeGroupFormClose">我再想想</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -302,7 +324,6 @@ import NoticeItem from "./components/NoticeItem";
 import FileEntry from "./components/FileEntry";
 import {ElMessageBox, ElMessage} from "element-plus";
 import variables from "@/utils/variables";
-import { ref } from "vue";
 
 export default {
   name: "CourseDetail",
@@ -347,7 +368,11 @@ export default {
       announcementList: [],
       // group
       isRuleExisted: null,
+      isGroupExisted: null,
       ruleFormDialog: false,
+      createGroupDialog: false,
+      maxSize: null,
+      maxNameLen: null,
       ruleForm: {
         dialogTitle: "制定组队规则",
         courseVO: null,
@@ -363,6 +388,11 @@ export default {
           required: true, message: "请选择组名最大长度", trigger: "change",
         }
       },
+      createTeamForm: {
+        dialogTitle: "队伍信息",
+        courseId: null,
+        name: null,
+      },
       //
       commentContent: "",
       commentTree: [],
@@ -448,7 +478,7 @@ export default {
       return function (senderId) {
         return senderId === Number(_this.$store.state.user.id);
       };
-    }
+    },
   },
   mounted() {
     switch (this.$route.params.jump_from_message) {
@@ -472,9 +502,6 @@ export default {
       });
   },
   methods: {
-    handleChange(value) {
-      console.log(value);
-    },
     //
     timestampToTime(timestamp) {
       const date = new Date(timestamp);
@@ -576,6 +603,13 @@ export default {
       this.ruleFormDialog = true;
     },
 
+    CreateTeam() {
+      this.createGroupDialog = true;
+      this.getRule();
+    },
+
+
+
     beforeFormClose() {
       ElMessageBox.confirm("是否确认退出？退出后将不保存表格信息。", "提示", {
         confirmButtonText: "确认退出",
@@ -625,6 +659,50 @@ export default {
         }
       });
     },
+    getRule() {
+      this.$apis.findGroupRule(this.courseInfo.id)
+          .then(res =>{
+            this.maxSize=res.data.data.maxSize;
+            console.log(this.maxSize);
+            this.maxNameLen=res.data.data.maxNameLen;
+            console.log(this.maxNameLen);
+          });
+    },
+
+    beforeGroupFormClose() {
+      ElMessageBox.confirm("是否确认退出？退出后将不保存队伍信息。", "提示", {
+        confirmButtonText: "确认退出",
+        cancelButtonText: "我再想想",
+        type: "warning",
+        center: true,
+      })
+          .then(() => {
+            this.createGroupDialog = false;
+            this.$refs.createGroupFormRef.resetFields();
+          });
+    },
+    createTeam() {
+      this.$refs.createGroupFormRef.validate((valid) => {
+        if (valid) {
+          let GroupVO = {
+            courseId: this.courseInfo.id,
+            name: this.createTeamForm.name,
+          };
+          console.log(GroupVO);
+          this.$apis.createGroup(GroupVO)
+              .then(res => {
+                if (res.data.code) {
+                  ElMessage.error(res.data.message);
+                } else {
+                  this.isGroupExisted = true;
+                  this.createGroupDialog = false;
+                  this.$refs.createGroupFormRef.resetFields();
+                  ElMessage.success("创建队伍成功");
+                }
+              });
+        }
+      });
+    },
     // announcement
     handlePublishAnnouncement() {
       const _this = this;