feat: 添加组员

src/views/CoursePage/CourseDetail.vue

@@ -117,7 +117,7 @@
           <div v-if="isCourseSelected">
             <div v-if="tabName==='group'">
               <el-button v-if="tabName==='group'&&isRuleExisted!==null"
-                         plain type="primary" :disabled="isGroupExisted" @click="CreateTeam">
+                         plain type="primary" :disabled="isGroupExisted" @click="createGroup">
                 {{ isGroupExisted ? '队伍已创建' : '创建队伍' }}
               </el-button>
             </div>
@@ -262,6 +262,23 @@
               </div>
             </div>
           </div>
+          <div v-if="isCourseSelected" class="course-tab-content">
+            <div v-if="tabName==='group' && isGroupExisted">
+              <el-table :data="groupTableData" style="width: 100%">
+                <el-table-column prop="name" label="组名" width="150"></el-table-column>
+                <el-table-column prop="groupLeader" label="组长" width="120"></el-table-column>
+                <el-table-column prop="groupMembers" label="组员" width="200"></el-table-column>
+                <el-table-column fixed="right" label="操作" width="120">
+                <template #default>
+                  <el-button link type="primary" size="small" @click="addMember"
+                  >添加组员</el-button>
+                </template>
+                </el-table-column>
+              </el-table>
+
+            </div>
+          </div>
+
         </div>
       </el-card>
     </div>
@@ -305,17 +322,31 @@
       </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-dialog v-model="createGroupDialog" :before-close="beforeGroupFormClose" :title="createGroupForm.dialogTitle">
+    <el-form ref="createGroupFormRef" :model="createGroupForm" label-position="right" label-width="150px">
       <el-form-item label="组名" prop="name">
-        <el-input v-model="createTeamForm.name" placeholder="输入组名" maxlength="5"></el-input>
+        <el-input v-model="createGroupForm.name" placeholder="输入组名" maxlength="5"></el-input>
+<!--        //todo 最大长度-->
       </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="primary" @click="create_Group">确认</el-button>
         <el-button plain type="danger" @click="beforeGroupFormClose">我再想想</el-button>
       </div>
     </el-dialog>
+
+<!--    添加组员-->
+    <el-dialog v-model="addMemberDialog"  :title="addMemberForm.dialogTitle">
+      <el-form ref="addMemberFormRef" :model="addMemberForm" label-position="right" label-width="150px">
+        <el-form-item label="组员手机号" prop="phoneNumber">
+          <el-input v-model="addMemberForm.phoneNumber" placeholder="输入组员手机号" maxlength="11"></el-input>
+        </el-form-item>
+      </el-form>
+      <div style="margin: auto;width: fit-content">
+        <el-button plain type="primary" @click="add_Member">确认</el-button>
+        <el-button plain type="danger" @click="closeAddMemberDialog">我再想想</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -371,8 +402,15 @@ export default {
       isGroupExisted: null,
       ruleFormDialog: false,
       createGroupDialog: false,
+      addMemberDialog: false,
       maxSize: null,
       maxNameLen: null,
+
+      groupTableData:[ {
+        name: "组1",
+        groupLeader: "组长1",
+        groupMembers: "组员1、组员2、组员3"
+      }],
       ruleForm: {
         dialogTitle: "制定组队规则",
         courseVO: null,
@@ -388,11 +426,15 @@ export default {
           required: true, message: "请选择组名最大长度", trigger: "change",
         }
       },
-      createTeamForm: {
+      createGroupForm: {
         dialogTitle: "队伍信息",
         courseId: null,
         name: null,
       },
+      addMemberForm: {
+        dialogTitle: "组员信息",
+        phoneNumber: null,
+      },
       //
       commentContent: "",
       commentTree: [],
@@ -603,11 +645,15 @@ export default {
       this.ruleFormDialog = true;
     },
 
-    CreateTeam() {
+    createGroup() {
       this.createGroupDialog = true;
       this.getRule();
     },
 
+    addMember() {
+      this.addMemberDialog = true;
+    },
+
 
 
     beforeFormClose() {
@@ -681,12 +727,17 @@ export default {
             this.$refs.createGroupFormRef.resetFields();
           });
     },
-    createTeam() {
+
+    closeAddMemberDialog() {
+      this.addMemberDialog=false;
+    },
+
+    create_Group() {
       this.$refs.createGroupFormRef.validate((valid) => {
         if (valid) {
           let GroupVO = {
             courseId: this.courseInfo.id,
-            name: this.createTeamForm.name,
+            name: this.createGroupForm.name,
           };
           console.log(GroupVO);
           this.$apis.createGroup(GroupVO)
@@ -703,6 +754,28 @@ export default {
         }
       });
     },
+
+    add_Member() {
+      this.$refs.addMemberFormRef.validate((valid) => {
+        if (valid) {
+          let GroupMemberVO = {
+            courseId: this.courseInfo.id,
+            phoneNumber: this.addMemberForm.phoneNumber,
+          };
+          this.$apis.addGroupMember(GroupMemberVO)
+              .then(res => {
+                if (res.data.code) {
+                  ElMessage.error(res.data.message);
+                } else {
+                  this.addMemberDialog = false;
+                  this.$refs.addMemberFormRef.resetFields();
+                  ElMessage.success("添加组员成功");
+                }
+              });
+        }
+      });
+
+    },
     // announcement
     handlePublishAnnouncement() {
       const _this = this;
@@ -897,6 +970,9 @@ export default {
         case "group":
           const res = (await this.$apis.findGroupRule(this.courseInfo.id)).data;
           this.isRuleExisted = !res.code;
+          const res1 = (await  this.$apis.findGroup(this.courseInfo.id)).data;
+          console.log(res1);
+          this.isGroupExisted = !res1.code;
           break;
       }
     },