pbl-student-table/src/components/group/group.vue

<template>
    <div>
        <el-dialog title="分组设置" :visible.sync="dialogVisibleGroup" :append-to-body="true" width="95%"
            :before-close="handleClose2" class="dialog_diy">
            <div v-if="dialogVisibleGroup">
                <div class="g_d_btnBox">
                    <div class="btn_left" v-if="type == 1 || type == 4">
                        <div @click="setClassid('1')" :class="{ active: classid == '1' }" v-if="!classList.length">全部</div>
                        <div @click="setClassid(item.id)" :class="{ active: classid == item.id }"
                            v-for="(item, index) in classList" :key="index">{{ item.name }}</div>
                    </div>
                    <div class="btn_left" v-if="type == 2">
                        <div @click="setClassid('1')" :class="{ active: classid == '1' }" v-if="!classList.length">全部</div>
                        <div @click="setClassid(item.id)" :class="{ active: classid == item.id }"
                            v-for="(item, index) in classList" :key="index">{{ item.name }}</div>
                    </div>
                    <div class="btn_right"
                        v-if="courseDetail.userid == userid || (courseDetail.course_teacher && courseDetail.course_teacher.indexOf(userid) != -1)">
                        <div style="color: rgb(171 171 171); margin: 0 10px 0 0">
                            提示：开启【开放选座】，学生能够自由加入和退出小组。
                        </div>
                        <!-- 开放选座 -->
                        <!-- <div type="primary" v-if="groupJson.islock == 1 && groupJson.group.length" class="returnBtn"
                            style="background-color: #225bc7" @click="lockChair">
                            锁定位置
                        </div>
                        <div type="primary" v-else-if="groupJson.group.length" class="returnBtn"
                            style="background-color: #225bc7" @click="lockChair">
                            解锁位置
                        </div> -->
                        <div class="group_switch">
                            <span>开放选座</span>
                            <el-switch v-model="islock" active-text="" class="switchCss" @change="lockChair"></el-switch>
                        </div>
                        <!-- <div class="group_switch">
                            <span>开启分组</span>
                            <el-switch v-model="isopen" class="switchCss" @change="openChair"></el-switch>
                        </div> -->
                        <div type="primary" @click="updateGroup" class="returnBtn" style="background-color: #225bc7">
                            分组设置
                        </div>
                        <div type="primary" @click="deleteCourseGroup" class="returnBtn" style="background-color: #225bc7">
                            删除分组
                        </div>
                    </div>
                </div>
                <div>
                    <div class="g_d_box" v-if="groupJson.group.length">
                        <div class="g_d_group" v-for="(g, gindex) in groupJson.group" :key="gindex">
                            <div class="g_d_group_chair">
                                <div v-if="groupJson.number > 1">
                                    <span :class="{
                                        isChair:
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][0],
                                        updateChair:
                                            courseDetail.userid == userid &&
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][0] &&
                                            groupJson.islock == 2,
                                    }"><span class="updateChairBtn"
                                            @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][0])">修改</span></span><span>{{
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][0]
                                                ? groupStudent[g.id] &&
                                                groupStudent[g.id][0].name
                                                : "空位置" }}</span>
                                </div>
                                <div v-if="groupJson.number > 4">
                                    <span :class="{
                                        isChair:
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][4],
                                        updateChair:
                                            courseDetail.userid == userid &&
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][4] &&
                                            groupJson.islock == 2,
                                    }"><span class="updateChairBtn"
                                            @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][4])">修改</span></span><span>{{
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][4]
                                                ? groupStudent[g.id] &&
                                                groupStudent[g.id][4].name
                                                : "空位置" }}</span>
                                </div>
                                <div v-if="groupJson.number > 8">
                                    <span :class="{
                                        isChair:
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][8],
                                        updateChair:
                                            courseDetail.userid == userid &&
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][8] &&
                                            groupJson.islock == 2,
                                    }"><span class="updateChairBtn"
                                            @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][8])">修改</span></span><span>{{
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][8]
                                                ? groupStudent[g.id] &&
                                                groupStudent[g.id][8].name
                                                : "空位置" }}</span>
                                </div>
                            </div>
                            <div class="g_d_group_tableBox">
                                <div class="g_d_group_chair2">
                                    <div v-if="groupJson.number > 2">
                                        <span :class="{
                                            isChair:
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][2],
                                            updateChair:
                                                courseDetail.userid == userid &&
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][2] &&
                                                groupJson.islock == 2,
                                        }"><span class="updateChairBtn"
                                                @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][2])">修改</span></span><span>{{
                                                    groupStudent[g.id] &&
                                                    groupStudent[g.id][2]
                                                    ? groupStudent[g.id] &&
                                                    groupStudent[g.id][2].name
                                                    : "空位置" }}</span>
                                    </div>
                                    <div v-if="groupJson.number > 6">
                                        <span :class="{
                                            isChair:
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][6],
                                            updateChair:
                                                courseDetail.userid == userid &&
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][6] &&
                                                groupJson.islock == 2,
                                        }"><span class="updateChairBtn"
                                                @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][6])">修改</span></span><span>{{
                                                    groupStudent[g.id] &&
                                                    groupStudent[g.id][6]
                                                    ? groupStudent[g.id] &&
                                                    groupStudent[g.id][6].name
                                                    : "空位置" }}</span>
                                    </div>
                                </div>
                                <div class="g_d_group_table">
                                    <div>
                                        {{ g.name }}
                                    </div>
                                    <div>
                                        <div v-if="courseDetail.userid == userid && groupJson.islock == 2"
                                            @click="deleteGroupChair(g.id, gindex)">
                                            移除组员
                                        </div>
                                        <div @click="selectGroup(g.id)"
                                            v-else-if="groupStudentUid && groupStudentUid[g.id].indexOf(userid) == -1">
                                            加入分组
                                        </div>
                                        <div @click="
                                            exitGroup(groupStudent[g.id] &&
                                                groupStudent[g.id][
                                                    groupStudentUid[g.id].indexOf(userid)
                                                ].id)
                                            "
                                            v-else-if="groupStudentUid && groupStudentUid[g.id].indexOf(userid) != -1">
                                            退出分组
                                        </div>
                                        <div style="margin-top:10px"
                                            v-if="(courseDetail.userid == userid || (courseDetail.course_teacher && courseDetail.course_teacher.indexOf(userid) != -1)) && groupStudent[g.id].length < groupJson.number"
                                            @click="addGroupStudent(g.id)">
                                            添加组员
                                        </div>
                                    </div>
                                </div>
                                <div class="g_d_group_chair2">
                                    <div v-if="groupJson.number > 3">
                                        <span :class="{
                                            isChair:
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][3],
                                            updateChair:
                                                courseDetail.userid == userid &&
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][3] &&
                                                groupJson.islock == 2,
                                        }"><span class="updateChairBtn"
                                                @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][3])">修改</span></span><span>{{
                                                    groupStudent[g.id] &&
                                                    groupStudent[g.id][3]
                                                    ? groupStudent[g.id] &&
                                                    groupStudent[g.id][3].name
                                                    : "空位置" }}</span>
                                    </div>
                                    <div v-if="groupJson.number > 7">
                                        <span :class="{
                                            isChair:
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][7],
                                            updateChair:
                                                courseDetail.userid == userid &&
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][7] &&
                                                groupJson.islock == 2,
                                        }"><span class="updateChairBtn"
                                                @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][7])">修改</span></span><span>{{
                                                    groupStudent[g.id] &&
                                                    groupStudent[g.id][7]
                                                    ? groupStudent[g.id] &&
                                                    groupStudent[g.id][7].name
                                                    : "空位置" }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="g_d_group_chair">
                                <div v-if="groupJson.number > 1">
                                    <span :class="{
                                        isChair:
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][1],
                                        updateChair:
                                            courseDetail.userid == userid &&
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][1] &&
                                            groupJson.islock == 2,
                                    }"><span class="updateChairBtn"
                                            @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][1])">修改</span></span><span>{{
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][1]
                                                ? groupStudent[g.id] &&
                                                groupStudent[g.id][1].name
                                                : "空位置" }}</span>
                                </div>
                                <div v-if="groupJson.number > 5">
                                    <span :class="{
                                        isChair:
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][5],
                                        updateChair:
                                            courseDetail.userid == userid &&
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][5] &&
                                            groupJson.islock == 2,
                                    }"><span class="updateChairBtn"
                                            @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][5])">修改</span></span><span>{{
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][5]
                                                ? groupStudent[g.id] &&
                                                groupStudent[g.id][5].name
                                                : "空位置" }}</span>
                                </div>
                                <div v-if="groupJson.number > 9">
                                    <span :class="{
                                        isChair:
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][9],
                                        updateChair:
                                            courseDetail.userid == userid &&
                                            groupStudent[g.id] &&
                                            groupStudent[g.id][9] &&
                                            groupJson.islock == 2,
                                    }"><span class="updateChairBtn"
                                            @click="updateGroupChair(groupStudent[g.id] && groupStudent[g.id][9])">修改</span></span><span>{{
                                                groupStudent[g.id] &&
                                                groupStudent[g.id][9]
                                                ? groupStudent[g.id] &&
                                                groupStudent[g.id][9].name
                                                : "空位置" }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="text-align: center;">{{ courseDetail.userid == userid ? "暂无分组，请点击右上角设置分组" :
                        "老师暂未添加分组" }}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
        <el-dialog title="分组设置" :visible.sync="dialogVisibleGroup2" :append-to-body="true" width="650px"
            :before-close="handleClose" class="dialog_diy">
            <div class="groupBox">
                <div v-if="groupJson2.group" class="groupContent">
                    <div class="groupTitle">请设置小组数量</div>
                    <div v-for="(item, index) in groupJson2.group" :key="index" class="groupName">
                        <span class="groupn">组{{ index + 1 }}名称:</span>
                        <el-input v-model="item.name" placeholder="请输入名称..." style="width: 250px"></el-input>
                        <div class="groupBtn">
                            <el-button type="primary" size="small" @click="addGroup(index)">
                                添加</el-button>
                            <el-button type="primary" size="small" @click="deleteGroup(index)"
                                v-if="groupJson2.group && groupJson2.group.length > 1">删除</el-button>
                        </div>
                    </div>
                </div>
                <div class="groupContent">
                    <div class="groupTitle">请设置每组人数数量</div>
                    <el-input-number v-model="groupJson2.number" :controls="false" :min="2" :max="10"
                        placeholder="2-10人以内"></el-input-number>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleGroup2 = false">取 消</el-button>
                <el-button type="primary" @click="updateGroupJson">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="移除组员" :visible.sync="dialogVisibleDeleteGroup" :append-to-body="true" width="350px"
            :before-close="handleClose" class="dialog_diy">
            <div>
                <h2>
                    {{ this.deleteGroupArray.name }}
                </h2>
                <div style="color: rgb(171 171 171); margin-top: 10px">
                    请选择要删除的组员
                </div>
                <el-checkbox-group v-model="checkDeleteGroup">
                    <el-checkbox style="display: block; margin-top: 20px" v-for="(item, index) in deleteGroupUser"
                        :label="item.userid" :key="index">{{ item.name }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleDeleteGroup = false">取 消</el-button>
                <el-button type="primary" @click="deleteChair">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改分组" :visible.sync="dialogVisibleUpdateGroup" :append-to-body="true" width="350px"
            :before-close="handleClose" class="dialog_diy">
            <div>
                <h2>
                    {{ this.updateGroupUser.name }}
                </h2>
                <div style="color: rgb(171 171 171); margin-top: 10px">
                    请选择要进入的分组
                </div>
                <el-radio-group v-model="checkChair">
                    <el-radio style="display: block; margin-top: 20px" v-for="(item, index) in updateGroupArray"
                        :label="item.id" :key="index">{{ item.name }}</el-radio>
                </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleUpdateGroup = false">取 消</el-button>
                <el-button type="primary" @click="updateChair">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加学生" :visible.sync="dialogVisibleMember" :append-to-body="true" width="540px" height="80%"
            :before-close="handleClose" class="addNewPP">
            <div class="people">
                <div class="people_top">
                    <div class="people_top_right">
                        <div class="people_search">
                            <el-input placeholder="搜索学生的姓名" v-model="searchTN" @keyup.enter.native="getStudent"></el-input>
                            <div class="search_img" @click="getStudent">
                                <img src="../../assets/icon/search.png" alt />
                            </div>
                        </div>
                    </div>
                    <div class="people_nav">选择成员</div>
                </div>
                <!-- <div class="t_j_box" style="
                            padding: 20px 0 0 25px;
                            width: calc(100% - 55px);
                            margin-left: 25px;
                          ">
                    <span>姓名</span>
                    <span>账号</span>
                </div> -->
                <!-- <el-checkbox-group v-model="checkboxList3" class="people_name" v-if="classJuri.length">
                    <el-checkbox v-for="item in classJuri" :key="item.userid" :label="item.userid">
                        <div class="t_j_box">
                            <el-tooltip placement="top" :content="item.name ? item.name : '暂无姓名'">
                                <span>{{ item.name ? item.name : "暂无姓名" }}</span>
                            </el-tooltip>
                            <el-tooltip placement="top" :content="item.username">
                                <span>{{ item.username }}</span>
                            </el-tooltip>
                        </div>
                    </el-checkbox>
                </el-checkbox-group> -->
                <div class="i_box_login2" v-if="classJuri.length">
                    <div :class="{ active: checkboxList3.indexOf(item.userid) != -1 }" v-for="item in classJuri"
                        :key="item.userid" :label="item.userid" @click="addGroupUser(item.userid)">
                        <el-tooltip placement="top" :content="item.name ? item.name : '暂无姓名'">
                            <span>{{ item.name ? item.name : "暂无姓名" }}</span>
                        </el-tooltip>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
            </div>
            <!-- <div style="margin-top: 10px;">
                <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
                    v-if="page && classJuri.length" style="padding-bottom: 20px"
                    @current-change="handleCurrentChange"></el-pagination>
            </div> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleMember = false">取 消</el-button>
                <el-button type="primary" @click="joinGroup2">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['cid', 'dialogVisibleGroup', 'classList', 'courseDetail', 'userid', "type", "classId", "oid"],
    data() {
        return {
            groupJson2: {},
            classid: "1",
            groupid: "",
            gid: "",
            groupJson: {
                group: [],
                number: undefined,
                islock: 1,
            },
            islock: false,
            isopen:true,
            timer: null,
            groupStudent: {},
            groupStudentUid: {},
            allGroupStudentUid: [],
            dialogVisibleGroup2: false,
            checkDeleteGroup: [],
            deleteGroupUser: [],
            deleteGroupArray: [],
            dialogVisibleDeleteGroup: false,
            checkChair: "",
            updateGroupArray: [],
            updateGroupUser: {},
            dialogVisibleUpdateGroup: false,
            classJuri: [],
            checkboxList3: [],
            pageSize: 20,
            total: 0,
            page: 1,
            dialogVisibleMember: false,
            searchTN: "",
        }
    },
    methods: {
        handleClose2(done) {
            this.$emit('update:dialogVisibleGroup', false)
            done();
        },
        handleClose(done) {
            done();
        },
        getStudent() {
            this.page = 1
            this.selectCStudent();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.selectCStudent();
        },
        selectCStudent() {
            let params = {
                cid: this.classid,
                oid: this.oid,
                cn: this.searchTN,
            };
            this.ajax
                .get(this.$store.state.api + "selectSnameByCidGroup", params)
                .then((res) => {
                    if (res.data && res.data[0].length) {
                        this.classJuri = res.data[0].filter((el) => {
                            return this.allGroupStudentUid.indexOf(el.userid) == -1
                        });
                    }
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        setClassid(cid) {
            this.classid = cid
            this.groupid = ''
            this.groupJson = {
                group: [],
                number: undefined,
                islock: 1,
            }
            this.islock = false
            this.isopen = true
            this.getCourseGroup();
        },
        guid() {
            var _num,
                i,
                _guid = "";
            for (i = 0; i < 32; i++) {
                _guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
                _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
                if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
                    //会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
                    _guid += "-";
                }
            }
            return _guid;
        },
        updateGroup() {
            this.groupJson2 = JSON.parse(JSON.stringify(this.groupJson));
            if (!this.groupJson2.group.length) {
                this.groupJson2.group.push({
                    name: "第" + (this.groupJson2.group.length + 1) + "组",
                    id: this.guid()
                });
            }
            this.dialogVisibleGroup2 = true;
        },
        deleteCourseGroup() {
            this.$confirm(
                // "您确定要删除该分组吗? 分组删除后将被清空并且无法恢复。",
                "是否确定删除已有分组？删除后分组数据将被清空！",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    let params = [{
                        gid: this.groupid,
                    }];
                    this.ajax
                        .post(this.$store.state.api + "deleteCourseGroup", params)
                        .then((res) => {
                            this.groupJson = {
                                group: [],
                                number: undefined,
                                islock: 1,
                            }
                            this.islock = false
                            this.isopen = true
                            this.$message.success("操作成功");
                            this.getCourseGroup();
                            this.$forceUpdate()
                        })
                        .catch((err) => {
                            console.error(err);
                        });
                })
                .catch(() => { });
        },
        addGroup() {
            this.groupJson2.group.push({
                name: "第" + (this.groupJson2.group.length + 1) + "组",
                id: this.guid()
            });
        },
        deleteGroup(i) {
            this.groupJson2.group.splice(i, 1);
        },
        lockChair() {
            this.groupJson2 = JSON.parse(JSON.stringify(this.groupJson));
            if(this.groupJson2.isopen == 2){
                this.$message.error("请开启分组后才能开放选座")
                this.islock = false
                return
            }else{
                this.groupJson2.islock = this.groupJson2.islock == 1 ? 2 : 1;
            }
            this.updateGroupJson();
        },
        openChair() {
            this.groupJson2 = JSON.parse(JSON.stringify(this.groupJson));
            if(!this.groupJson2.isopen){
                this.groupJson2.isopen = 2;
            }else{
                this.groupJson2.isopen = this.groupJson2.isopen == 1 ? 2 : 1;
            }
            if(this.groupJson2.isopen == 2){
                this.groupJson2.islock = 2
            }else{
                this.groupJson2.islock = 1
            }
            this.updateGroupJson();
        },
        updateGroupJson() {
            for (var i = 0; i < this.groupJson2.group.length; i++) {
                if (!this.groupJson2.group[i].name) {
                    this.$message.error("请将信息填写完整！");
                    return;
                }
            }
            if (!this.groupJson2.number) {
                this.$message.error("请将信息填写完整！");
                return;
            }
            for (var i = 0; i < this.groupJson2.group.length; i++) {
                if (
                    this.groupStudentUid[this.groupJson2.group[i].id] && this.groupStudentUid[this.groupJson2.group[i].id].length >
                    this.groupJson2.number
                ) {
                    this.$message.error("已经有小组比你设置的人数多，请重新设置");
                    return;
                }
            }
            let params = [
                {
                    cid: this.cid,
                    group: JSON.stringify(this.groupJson2).replaceAll(/%/g, "%25"),
                    classid: this.classid,
                },
            ];
            this.ajax
                .post(this.$store.state.api + "setCourseGroup", params)
                .then((res) => {
                    this.$message.success("设置成功");
                    this.dialogVisibleGroup2 = false;
                    this.groupJson2 = {};
                    this.getCourseGroup();
                    this.$forceUpdate();
                })
                .catch((err) => {
                    this.$message.error("网络不佳");
                    console.error(err);
                });
        },
        getCourseGroup(gid) {
            let params = {
                cid: this.cid,
                classid: this.classid,
            };
            this.ajax
                .get(this.$store.state.api + "getCourseGroup", params)
                .then((res) => {
                    if (res.data && res.data[0].length) {
                        this.groupJson = JSON.parse(res.data[0][0].group);
                        this.islock = this.groupJson.islock == 1 ? true : false;
                        if(!this.groupJson.isopen){
                            this.isopen = true
                        }else{
                            this.isopen = this.groupJson.isopen == 1 ? true : false;
                        }
                        this.groupid = res.data[0][0].id;
                        let groupPerson = res.data[1]
                        let group = JSON.parse(res.data[0][0].group).group
                        let groupStudent = {}
                        let groupStudentUid = {}
                        for (var i = 0; i < group.length; i++) {
                            groupStudent[group[i].id] = []
                            groupStudentUid[group[i].id] = []
                            for (var j = 0; j < groupPerson.length; j++) {
                                if (groupPerson[j].groupCid == group[i].id) {
                                    groupStudent[group[i].id].push(groupPerson[j])
                                    groupStudentUid[group[i].id].push(groupPerson[j].userid)
                                }
                            }
                        }
                        this.allGroupStudentUid = []
                        for (var j = 0; j < groupPerson.length; j++) {
                            this.allGroupStudentUid.push(groupPerson[j].userid)
                        }
                        this.groupStudent = groupStudent
                        this.groupStudentUid = groupStudentUid
                        this.$forceUpdate();
                        if (gid) {
                            this.joinGroup(gid)
                        }
                    }
                })
                .catch((err) => {
                    this.$message.error("网络不佳");
                    console.error(err);
                });
        },
        updateGroupChair(user) {
            this.updateGroupArray = this.groupJson.group.filter((el, index) => {
                el.label = index;
                return el.id != user.groupCid;
            });
            this.updateGroupUser = user;
            this.dialogVisibleUpdateGroup = true;
        },
        updateChair() {
            if (
                this.groupStudent[this.checkChair].length >
                this.groupJson.number ||
                this.groupStudent[this.checkChair].length ==
                this.groupJson.number
            ) {
                this.$message.error("位置已满，无法加入");
                return;
            }
            let params = [
                {
                    gid: this.groupid,
                    g: this.checkChair,
                    uid: this.updateGroupUser.userid,
                },
            ];
            this.ajax
                .post(this.$store.state.api + "joinCourseGroup", params)
                .then((res) => {
                    this.$message.success("修改成功");
                    this.updateGroupUser = {};
                    this.checkChair = "";
                    this.updateGroupArray = {};
                    this.dialogVisibleUpdateGroup = false;
                    this.getCourseGroup();
                })
                .catch((err) => {
                    this.$message.error("网络不佳");
                    console.error(err);
                });
        },
        deleteGroupChair(gid, gindex) {
            this.checkDeleteGroup = [];
            this.deleteGroupUser = JSON.parse(
                JSON.stringify(this.groupStudent[gid])
            );
            this.deleteGroupArray = this.groupJson.group[gindex];
            this.gid = gid;
            this.dialogVisibleDeleteGroup = true;
        },
        async deleteChair() {
            for (let i = 0; i < this.checkDeleteGroup.length; i++) {
                const gid =
                    this.groupStudent[this.gid][
                    this.groupStudentUid[this.gid].indexOf(
                        this.checkDeleteGroup[i]
                    )
                    ];
                let params = [
                    {
                        gid: gid.id,
                    },
                ];
                var a = await this.deleteChairA(params);
                if (i == this.checkDeleteGroup.length - 1) {
                    this.$message.success("退出成功");
                    this.dialogVisibleDeleteGroup = false;
                    this.deleteGroupUser = [];
                    this.deleteGroupArray = {};
                    this.gid = "";
                    this.checkDeleteGroup = [];
                    this.getCourseGroup();
                }
            }
        },
        deleteChairA(params) {
            return new Promise((resolve, reject) => {
                this.ajax
                    .post(this.$store.state.api + "exitCourseGroup", params)
                    .then((res) => {
                        resolve(1);
                    })
                    .catch((err) => {
                        this.$message.error("网络不佳");
                        console.error(err);
                    });
            });
        },
        selectGroup(gid) {
            this.getCourseGroup(gid)
        },
        joinGroup(gid) {
            if (this.groupJson.islock == 2) {
                this.$message.error("位置已被锁定，无法加入");
                return;
            }
            if (
                this.groupStudent[gid].length >
                this.groupJson.number ||
                this.groupStudent[gid].length == this.groupJson.number
            ) {
                this.$message.error("位置已满，无法加入");
                return;
            }
            let params = [
                {
                    gid: this.groupid,
                    g: gid,
                    uid: this.userid,
                },
            ];
            this.ajax
                .post(this.$store.state.api + "joinCourseGroup", params)
                .then((res) => {
                    this.$message.success("加入成功");
                    this.$emit('getGroup')
                    this.getCourseGroup();
                })
                .catch((err) => {
                    this.$message.error("网络不佳");
                    console.error(err);
                });
        },
        addGroupUser(uid) {
            if (this.checkboxList3.indexOf(uid) == -1) {
                this.checkboxList3.push(uid)
            } else {
                this.checkboxList3.splice(this.checkboxList3.indexOf(uid), 1)
            }
        },
        async joinGroup2() {
            if (
                this.groupStudent[this.gid].length + this.checkboxList3.length >
                this.groupJson.number
            ) {
                this.$message.error("位置已满，无法加入");
                return;
            }
            for (let i = 0; i < this.checkboxList3.length; i++) {
                let params = [
                    {
                        gid: this.groupid,
                        g: this.gid,
                        uid: this.checkboxList3[i],
                    },
                ];
                const res = await this.ajax.post(this.$store.state.api + "joinCourseGroup", params)
                if (i == this.checkboxList3.length - 1) {
                    this.$message.success("加入成功");
                    this.dialogVisibleMember = false
                    this.getCourseGroup();
                }
            }
        },
        exitGroup(id) {
            if (this.groupJson.islock == 2) {
                this.$message.error("位置已被锁定，无法退出");
                return;
            }
            let params = [
                {
                    gid: id,
                },
            ];
            this.ajax
                .post(this.$store.state.api + "exitCourseGroup", params)
                .then((res) => {
                    this.$message.success("退出成功");
                    this.$emit('getGroup')
                    this.getCourseGroup();
                })
                .catch((err) => {
                    this.$message.error("网络不佳"); s
                    console.error(err);
                });
        },
        addGroupStudent(groupid) {
            this.gid = groupid
            this.page = 1
            this.searchTN = ""
            this.checkboxList3 = []
            this.selectCStudent()
            this.getCourseGroup();
            this.dialogVisibleMember = true
        }
    },
    watch: {
        dialogVisibleGroup(newValue, oldValue) {
            if (this.classList.length) {
                if (this.type == 2) {
                    this.classList = this.classList.filter(el => {
                        return this.classId.indexOf(el.id) != -1
                    })
                    this.classid = this.classList[0].id
                } else {
                    this.classid = this.classList[0].id
                }
            } else {
                this.classid = '1'
            }
            this.setClassid(this.classid)
            this.getCourseGroup();
            if (this.dialogVisibleGroup) {
                this.getCourseGroup();
                this.timer = setInterval(() => {
                    this.getCourseGroup();
                }, 5000)
            } else {
                clearInterval(this.timer)
                this.timer = null
            }
        }
    },
    beforeDestory() {
        clearInterval(this.timer)
        this.timer = null
    },
    mounted() {
    }
}
</script>

<style scoped>
.dialog_diy>>>.el-dialog {
    margin-top: 10vh !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}



.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.group_workBox {}

.group_workBox+.group_workBox {
    margin-top: 20px;
}

.group_box {
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.group_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.group_name {
    background-image: url(../../assets/icon/groupN.png);
    width: 220px;
    background-size: 100% 100%;
    height: 67px;
    padding: 0 20px 0 43px;
    box-sizing: border-box;
    line-height: 63px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group_work {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.g_d_box {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
}

.g_d_box .isChair {
    background-image: url(../../assets/avatar.png) !important;
}

.g_d_group {
    width: 500px;
    margin-bottom: 80px;
}

.g_d_group_chair {
    display: flex;
    align-items: center;
    justify-content: center;
}

.g_d_group_chair>div+div {
    margin-left: 30px;
}

.g_d_group_chair>div,
.g_d_group_chair2>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g_d_group_chair>div>span:nth-child(1),
.g_d_group_chair2>div>span:nth-child(1) {
    background-image: url(../../assets/icon/chair.png);
    width: 50px;
    height: 50px;
    display: block;
    background-size: 100% 100%;
}

.g_d_group_tableBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.g_d_group_chair2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.g_d_group_chair2>div+div {
    margin-top: 10px;
}

.g_d_group_table {
    background-image: url(../../assets/icon/groupBg.png);
    width: 354px;
    height: 196px;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}

.g_d_group_table>div:nth-child(1) {
    font-size: 24px;
    margin-bottom: 5px;
}

.g_d_group_table>div:nth-child(2) div {
    cursor: pointer;
    background: #2e77bf;
    padding: 4px 10px;
    border-radius: 5px;
}

.groupBox {}

.groupContent+.groupContent {
    margin-top: 30px;
}

.groupTitle {
    font-size: 24px;
    color: rgb(80, 80, 80);
    margin-bottom: 20px;
}

.groupName {
    display: flex;
    align-items: center;
}

.groupn {
    font-size: 15px;
    margin-right: 10px;
}

.groupName+.groupName {
    margin-top: 15px;
}

.groupBtn {
    margin-left: 10px;
}

.groupContent>>>.el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}

.g_d_btnBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.btn_left {
    display: flex;
    margin-top: 20px;
    padding: 0px 0 0 30px;
}

.btn_left>div {
    cursor: pointer;
}

.btn_left>div+div {
    margin-left: 10px;
}

.btn_left .active {
    color: #3e88f4;
    border-bottom: 2px solid #2f80f3;
    padding: 0 0 5px;
}

.btn_right {
    display: flex;
    align-items: center;
}

.updateChair {
    position: relative;
}

.updateChairBtn {
    position: absolute;
    width: 50px;
    height: 50px;
    overflow: hidden;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    background: #00000087;
    color: #fff;
    border-radius: 50px;
    display: none;
    cursor: pointer;
}

.updateChair:hover .updateChairBtn {
    display: flex;
}

.returnBtn {
    background: #499eef;
    width: 65px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
}

.addNewPP>>>.el-dialog__body {
    padding: 5px 20px;
}

.people {
    border: 1px solid rgb(229 229 229);
    height: 495px;
    border-radius: 5px;
    width: 100%;
    overflow: auto;
}

.people_top {
    display: flex;
    width: 100%;
    /* justify-content: space-between; */
    /* align-items: center; */
    flex-direction: column;
    padding: 10px 25px 0;
    box-sizing: border-box;
}

.people_nav,
.people_top_right {
    /* padding: 20px 0 0 20px; */
}

.people_top_right {
    height: 40px;
    margin-bottom: 10px;
}

.people_search {
    display: flex;
    position: relative;
}

.people_search>>>.el-input__inner {
    /* height: 25px; */
    width: 100%;
}

.search_img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.search_img>img {
    width: 100%;
    height: 100%;
}

.people_name {
    display: flex;
    justify-content: flex-start;
    padding: 10px 0 0 25px;
    flex-direction: column;
    flex-wrap: nowrap;
    height: calc(100% - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
}

.people_name>>>.el-checkbox {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.people_name>>>.el-checkbox__label {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

.t_j_box {
    display: flex;
}

.t_j_box span:nth-child(1) {
    width: 50%;
    overflow: hidden;
    margin-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t_j_box span:nth-child(2) {
    width: 50%;
    overflow: hidden;
    margin-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.i_box_login2 {
    height: calc(100% - 80px);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    padding-bottom: 10px;
    box-sizing: border-box;
    align-content: flex-start;
    padding: 10px 25px 0;
}

.i_box_login2>div {
    cursor: pointer;
    width: 80px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    overflow: hidden;
    background: rgb(225, 237, 255);
    margin: 10px calc((100% - (80px*5)) / 4) 0 0;
    color: rgb(37 124 255);
    border-radius: 5px;
    box-sizing: border-box;
}

.i_box_login2>div:nth-child(5n) {
    margin: 10px 0 0 0;
}

.i_box_login2>.active {
    background: rgb(92, 157, 255);
    color: #fff;
}

.i_box_login2>div>span {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.group_switch {
    margin-right: 10px;
    height: 30px;
    display: flex;
    align-items: center;
}

.group_switch>span {
    margin-right: 5px;
}
</style>