<template>
|
<div class="classManagePage-box">
|
<div class="classManagePage-nav">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>我的班级</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ classInfo?.name }}</el-breadcrumb-item>
|
<el-breadcrumb-item>班级管理</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="classManagePage-content">
|
<div class="headerBox">
|
<div class="btnBox">
|
<!-- 批量通过按钮 -->
|
<el-button
|
v-if="multipleSelection.length > 0"
|
type="success"
|
size="small"
|
@click="updateStateNormalDatas"
|
>批量通过</el-button
|
>
|
<!-- 批量移除按钮 -->
|
<el-button
|
v-if="multipleSelection.length > 0"
|
type="danger"
|
size="small"
|
@click="removeStudentDatas"
|
>批量移除</el-button
|
>
|
<!-- 批量拒绝 -->
|
<el-button
|
v-if="multipleSelection.length > 0"
|
type="warning"
|
size="small"
|
@click="updateStateRejectDatas"
|
>批量拒绝</el-button
|
>
|
</div>
|
<!-- <div class="searchBox">
|
<el-input v-model="searchKey" clearable @clear="searchData()" placeholder="请输入关键字">
|
<template #append>
|
<el-button type="primary" @click="searchData()" class="searchBtn" :icon="Search" />
|
</template>
|
</el-input>
|
</div> -->
|
</div>
|
<div class="listBox">
|
<el-table
|
:header-cell-style="{ background: '#eee' }"
|
:data="dataList"
|
max-height="600px"
|
style="width: 100%"
|
v-loading="pages.loading"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" :selectable="selectable" width="55" />
|
<el-table-column prop="index" label="序号" width="70" />
|
<el-table-column label="姓名" width="400">
|
<template #default="scope">
|
<div class="userBox">
|
<el-avatar
|
style="margin-right: 10px"
|
v-if="scope.row.appUser.icon"
|
:size="35"
|
:src="scope.row.appUser.icon"
|
/>
|
<el-avatar
|
style="margin-right: 10px"
|
:size="35"
|
v-if="!scope.row.appUser.icon"
|
:icon="UserFilled"
|
/>
|
<span v-if="scope.row.appUser.name">{{ scope.row.appUser.name }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createDate" label="加入班级时间" />
|
<el-table-column label="状态">
|
<template #default="scope">
|
<span v-if="scope.row.state == 'WaitValid'" style="color: #ef9f29"> 审核中 </span>
|
<span v-if="scope.row.state == 'Normal'" style="color: #1dbd11"> 已通过 </span>
|
<span v-if="scope.row.state == 'Reject'" style="color: #fc425d"> 未通过 </span>
|
</template>
|
</el-table-column>
|
<el-table-column label="班级成员身份">
|
<template #default="scope">
|
<span v-if="scope.row.linkType == 'RefCode'"> 学生 </span>
|
<span v-if="scope.row.linkType == 'Teacher'"> 助教 </span>
|
<span v-if="scope.row.linkType == 'Creator'"> 创建人 </span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200">
|
<template #default="scope">
|
<el-button
|
link
|
v-if="scope.row.linkType != 'Creator' && scope.row.state == 'Normal'"
|
type="danger"
|
size="small"
|
@click="removeStudent(scope.row)"
|
>
|
移除
|
</el-button>
|
<el-button link v-if="scope.row.linkType == 'Creator'" type="info" size="small">
|
---
|
</el-button>
|
<el-button
|
link
|
v-if="scope.row.state != 'Normal'"
|
type="success"
|
size="small"
|
@click="selectIdentity(scope.row)"
|
>
|
通过
|
</el-button>
|
<el-button
|
link
|
v-if="scope.row.state != 'Normal' && scope.row.state != 'Reject'"
|
type="warning"
|
size="small"
|
@click="updateStateReject(scope.row)"
|
>
|
拒绝
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="float: right"
|
v-model:current-page="pages.page"
|
:page-size="pages.pageSize"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
<el-dialog v-model="visible" title="选择当前成员身份" width="500" align-center>
|
<el-radio-group v-model="currentLinkType">
|
<el-radio label="RefCode" size="large" border>学生</el-radio>
|
<el-radio label="Teacher" size="large" border>助教</el-radio>
|
</el-radio-group>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancleLinkType"> 取消 </el-button>
|
<el-button type="primary" @click="updateStateNormal"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog v-model="visibleReject" title="拒绝原因" width="500" align-center>
|
<div class="reasonStr">
|
<span style="width: 100px">拒绝原因：</span>
|
<el-input type="textarea" :rows="2" maxlength="100" v-model="reasonStr"></el-input>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancleReject"> 取消 </el-button>
|
<el-button type="primary" @click="updateStateReject"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from 'vue'
|
import type { TableInstance } from 'element-plus'
|
import { useRoute } from 'vue-router'
|
import { Search, ArrowRight, UserFilled } from '@element-plus/icons-vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
|
import moment from 'moment'
|
|
const route: any = useRoute()
|
const MG: any = inject('MG')
|
const classInfo = JSON.parse(route.query.classInfo)
|
|
const searchKey = ref('')
|
const reasonStr = ref('')
|
const dataList = ref([])
|
const visible = ref(false)
|
const currentIdentity = ref()
|
const currentLinkType = ref('RefCode')
|
const visibleReject = ref(false)
|
const rejectData: any = ref()
|
let pages = reactive({
|
page: 1,
|
pageSize: 10,
|
count: 0,
|
loading: false
|
})
|
|
const multipleSelection = ref<any[]>([])
|
|
const selectable = (row: any) => ![1].includes(row.index)
|
|
onMounted(() => {
|
getStudentList()
|
})
|
|
const handleSelectionChange = (val: any) => {
|
multipleSelection.value = val
|
}
|
|
const handleSizeChange = (val: number) => {
|
pages.pageSize = val
|
getStudentList()
|
}
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val
|
getStudentList()
|
}
|
|
const searchData = () => {
|
pages.page = 1
|
pages.pageSize = 10
|
getStudentList()
|
}
|
|
// 获取学生列表
|
const getStudentList = () => {
|
pages.loading = true
|
const data = {
|
start: (pages.page - 1) * pages.pageSize,
|
size: pages.pageSize,
|
groupId: classInfo.id
|
}
|
MG.identity.getGroupUserList(data).then((res: any) => {
|
const { datas } = res
|
pages.loading = false
|
if (datas.length > 0) {
|
dataList.value = datas.map((item: any, index: number) => {
|
if (item.linkType == 'Creator') {
|
const userInfo = item.appUser?.infoList?.find((citem: any) => citem.type == 'teacherInfo')
|
item.appUser.name = userInfo.name
|
item.appUser.icon = userInfo.icon
|
if (userInfo?.data) {
|
const iconData = JSON.parse(userInfo.data)
|
item.appUser.icon = getPublicImage(iconData?.relevantCertificates[0]?.md5, 100) ?? ''
|
}
|
}
|
if (item.linkType == 'RefCode' || item.linkType == 'Teacher') {
|
let userInfo = null
|
const wechatData = item.appUser?.infoList?.find((citem: any) => citem.type == 'WeChat')
|
const defaultData = item.appUser?.infoList?.find((citem: any) => citem.type == 'Default')
|
userInfo = defaultData
|
if (wechatData?.name) {
|
userInfo = wechatData
|
}
|
item.appUser.name = userInfo.name
|
item.appUser.icon = userInfo.icon
|
}
|
return {
|
...item,
|
index: index + 1,
|
createDate: moment(item.createDate).format('YYYY-MM-DD')
|
}
|
})
|
pages.count = dataList.value.length
|
}
|
})
|
}
|
|
// 移除学生
|
const removeStudent = (item: any) => {
|
ElMessageBox.confirm('是否移除选中成员?')
|
.then(() => {
|
const data = {
|
groupId: classInfo.id,
|
appUserIds: [item.appUser.id]
|
}
|
MG.identity.removeAppUserFromGroup(data).then((res: any) => {
|
if (res) {
|
ElMessage({
|
message: '已移除',
|
type: 'success'
|
})
|
getStudentList()
|
}
|
})
|
})
|
.catch(() => {
|
// catch error
|
})
|
}
|
|
// 批量移除学生
|
const removeStudentDatas = () => {
|
ElMessageBox.confirm('是否批量移除选中成员?')
|
.then(() => {
|
const data = {
|
groupId: classInfo.id,
|
appUserIds: multipleSelection.value.map((item) => item.appUser.id)
|
}
|
MG.identity.removeAppUserFromGroup(data).then((res: any) => {
|
if (res) {
|
ElMessage({
|
message: '已移除',
|
type: 'success'
|
})
|
getStudentList()
|
}
|
})
|
})
|
.catch(() => {
|
// catch error
|
})
|
}
|
|
const selectIdentity = (item: any) => {
|
visible.value = true
|
currentIdentity.value = item
|
}
|
|
const cancleLinkType = () => {
|
visible.value = false
|
currentIdentity.value = null
|
currentLinkType.value = 'RefCode'
|
}
|
|
// 更新状态
|
const updateStateNormal = () => {
|
const data = {
|
groupId: classInfo.id,
|
requests: [
|
{
|
linkId: currentIdentity.value.linkId,
|
linkType: currentLinkType.value,
|
state: 'Normal',
|
groupState: 'Normal'
|
}
|
]
|
}
|
MG.identity.updateAppUserGroupLink(data).then((res: any) => {
|
if (res) {
|
visible.value = false
|
ElMessage({
|
message: '已通过',
|
type: 'success'
|
})
|
getStudentList()
|
}
|
})
|
}
|
|
// 批量通过
|
const updateStateNormalDatas = () => {
|
const data = {
|
groupId: classInfo.id,
|
requests: multipleSelection.value.map((item) => {
|
return {
|
linkId: item.linkId,
|
linkType: item.linkType,
|
state: 'Normal',
|
groupState: 'Normal'
|
}
|
})
|
}
|
MG.identity.updateAppUserGroupLink(data).then((res: any) => {
|
if (res) {
|
ElMessage({
|
message: '已通过',
|
type: 'success'
|
})
|
getStudentList()
|
}
|
})
|
}
|
|
// 批量拒绝
|
const updateStateRejectDatas = () => {
|
const data = {
|
groupId: classInfo.id,
|
requests:multipleSelection.value.map((item) => {
|
return {
|
linkId: item.linkId,
|
linkType: item.linkType,
|
state: 'Reject',
|
groupState: 'Reject'
|
}
|
})
|
}
|
MG.identity.updateAppUserGroupLink(data).then((res:any) => {
|
if (res) {
|
ElMessage({
|
message: '已拒绝',
|
type: 'success'
|
})
|
getStudentList()
|
}
|
})
|
}
|
|
const rejectInfo = (item: any) => {
|
visibleReject.value = true
|
rejectData.value = item
|
}
|
|
const cancleReject = () => {
|
visibleReject.value = false
|
reasonStr.value = ''
|
}
|
|
// 更新状态 拒绝
|
const updateStateReject = (item:any) => {
|
const data = {
|
groupId: classInfo.id,
|
requests: [
|
{
|
linkId: item.linkId,
|
linkType: item.linkType,
|
state: 'Reject',
|
groupState: 'Reject'
|
}
|
]
|
}
|
MG.identity.updateAppUserGroupLink(data).then((res: any) => {
|
if (res) {
|
ElMessage({
|
message: '已拒绝',
|
type: 'warning'
|
})
|
cancleReject()
|
getStudentList()
|
}
|
})
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.classManagePage-box {
|
padding: 20px;
|
.classManagePage-nav {
|
padding-bottom: 20px;
|
border-bottom: 1px solid #e6e8ed;
|
}
|
.classManagePage-content {
|
.headerBox {
|
height: 50px;
|
line-height: 50px;
|
overflow: hidden;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.btnBox {
|
flex: 1;
|
}
|
.searchBox {
|
width: 300px;
|
float: right;
|
.searchBtn {
|
background-color: var(--el-color-primary);
|
color: #fff;
|
border-top-left-radius: 0;
|
border-bottom-left-radius: 0;
|
}
|
}
|
}
|
.listBox {
|
.el-radio.is-bordered.el-radio--large {
|
padding: 0px 100px 0 11px;
|
}
|
.userBox {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
.reasonStr {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
}
|
</style>
|
