|
|
@@ -0,0 +1,914 @@
|
|
|
+<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">
|
|
|
+ <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">
|
|
|
+ <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 type="primary" @click="updateGroup" 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 && groupJson.islock == 2">
|
|
|
+ 添加组员
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: ['cid', 'dialogVisibleGroup', 'classList', 'courseDetail', 'userid'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ groupJson2: {},
|
|
|
+ classid: "1",
|
|
|
+ groupid: "",
|
|
|
+ gid: "",
|
|
|
+ groupJson: {
|
|
|
+ group: [],
|
|
|
+ number: undefined,
|
|
|
+ islock: 1,
|
|
|
+ },
|
|
|
+ timer: null,
|
|
|
+ groupStudent: {},
|
|
|
+ groupStudentUid: {},
|
|
|
+ dialogVisibleGroup2: false,
|
|
|
+ checkDeleteGroup: [],
|
|
|
+ deleteGroupUser: [],
|
|
|
+ deleteGroupArray: [],
|
|
|
+ dialogVisibleDeleteGroup: false,
|
|
|
+ checkChair: "",
|
|
|
+ updateGroupArray: [],
|
|
|
+ updateGroupUser: {},
|
|
|
+ dialogVisibleUpdateGroup: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose2(done) {
|
|
|
+ this.$emit('update:dialogVisibleGroup', false)
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ setClassid(cid) {
|
|
|
+ this.classid = cid
|
|
|
+ this.groupid = ''
|
|
|
+ this.groupJson = {
|
|
|
+ group: [],
|
|
|
+ number: undefined,
|
|
|
+ islock: 1,
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ 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));
|
|
|
+ this.groupJson2.islock = this.groupJson2.islock == 1 ? 2 : 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].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.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.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.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.getCourseGroup();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("网络不佳");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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.getCourseGroup();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("网络不佳"); s
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dialogVisibleGroup(newValue, oldValue) {
|
|
|
+ if (this.classList.length) {
|
|
|
+ this.classid = this.classList[0].id
|
|
|
+ } else {
|
|
|
+ this.classid = '1'
|
|
|
+ }
|
|
|
+ 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: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
