commit
a376f33c9e
@ -0,0 +1,219 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import { Input,Checkbox,Table, Pagination, Modal,Menu ,Spin, Tooltip , Badge, Popconfirm } from "antd";
|
||||
import axios from 'axios'
|
||||
|
||||
import { WordsBtn, trigger, on, off, getUrl, downloadFile , sortDirections } from 'educoder'
|
||||
import ClipboardJS from 'clipboard'
|
||||
|
||||
/**
|
||||
角色数组, CREATOR: 创建者, PROFESSOR: 教师, ASSISTANT_PROFESSOR: 助教, STUDENT: 学生
|
||||
course_members_count: 0
|
||||
id: 2441
|
||||
invite_code: "WUNX9K"
|
||||
member_manager: "全部教师"
|
||||
name: "e'e'e"
|
||||
*/
|
||||
|
||||
const clipboardMap = {}
|
||||
function CourseGroupListTable(props) {
|
||||
const [serachValue, setSerachValue] = useState('')
|
||||
|
||||
const courseId = props.match.params.coursesId
|
||||
|
||||
useEffect(() => {
|
||||
const course_groups = props.course_groups
|
||||
if (!course_groups) {
|
||||
return;
|
||||
}
|
||||
course_groups.forEach((record) => {
|
||||
const id = record.id
|
||||
debugger;
|
||||
let _clipboard = new ClipboardJS(`.copyBtn_${id}`);
|
||||
_clipboard.on('success', (e) => {
|
||||
props.showNotification('复制成功')
|
||||
});
|
||||
clipboardMap[id] = _clipboard
|
||||
})
|
||||
return () => {
|
||||
course_groups.forEach((record) => {
|
||||
const id = record.id
|
||||
|
||||
if (clipboardMap[id]) {
|
||||
clipboardMap[id].destroy();
|
||||
clipboardMap[id] = null;
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [props.course_groups])
|
||||
function buildColumns() {
|
||||
const columns=[{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align:'center',
|
||||
width:"5%",
|
||||
className:"color-grey-6",
|
||||
render: (id, record, index) => {
|
||||
return index + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '分班名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align:'center',
|
||||
width:"25%",
|
||||
className:"color-grey-6",
|
||||
render: (name, record, index) => {
|
||||
return <WordsBtn title={name.length > 11 ? name : ''} onClick={() => onGoDetail(record)} style={''}
|
||||
className="overflowHidden1" style2={{maxWidth: '180px', verticalAlign: 'bottom'}}>
|
||||
{name}</WordsBtn>
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '学生成员',
|
||||
dataIndex: 'course_members_count',
|
||||
key: 'course_members_count',
|
||||
align:'center',
|
||||
width:"8%",
|
||||
className:"color-grey-6",
|
||||
render: (course_members_count, record, index) => {
|
||||
return course_members_count
|
||||
}
|
||||
}
|
||||
];
|
||||
if (!isNotMember) {
|
||||
columns.push({
|
||||
title: '管理教师',
|
||||
dataIndex: 'member_manager',
|
||||
key: 'member_manager',
|
||||
align:'center',
|
||||
width:"27%",
|
||||
className:"color-grey-6",
|
||||
render: (member_manager, record, index) => {
|
||||
return <span className=""
|
||||
title={record.subStringOfMember_manager ? member_manager : ''}
|
||||
>{record.subStringOfMember_manager || member_manager}</span>
|
||||
}
|
||||
})
|
||||
const aCol = (isAdmin ? {
|
||||
title: '邀请码',
|
||||
dataIndex: 'invite_code',
|
||||
key: 'invite_code',
|
||||
align:'center',
|
||||
width:"10%",
|
||||
className:"color-grey-6",
|
||||
render: (invite_code, record, index) => {
|
||||
return invite_code
|
||||
}
|
||||
} : {
|
||||
title: '你当前所在分班',
|
||||
dataIndex: 'group',
|
||||
key: 'group',
|
||||
align:'center',
|
||||
width:"20%",
|
||||
className:"color-grey-6",
|
||||
render: (invite_code, record, index) => {
|
||||
return props.current_group_id == record.id && <Badge status="processing" text="" />
|
||||
}
|
||||
})
|
||||
columns.push( aCol );
|
||||
}
|
||||
|
||||
columns.push({
|
||||
title: '操作',
|
||||
dataIndex: 'setting',
|
||||
key: 'setting',
|
||||
align:'center',
|
||||
width:"25%",
|
||||
className:"color-grey-6",
|
||||
render: (none, record, index) => {
|
||||
return <React.Fragment>
|
||||
{!isCourseEnd && isAdmin && <WordsBtn style2={{ marginRight: '12px' }} onClick={() => onDelete(record)} style={'grey'}>删除分班</WordsBtn>}
|
||||
{isAdmin && <WordsBtn style2={{ marginRight: '12px' }} data-clipboard-text={record.invite_code}
|
||||
className={`copyBtn_${record.id}`} style={''}>复制邀请码</WordsBtn> }
|
||||
{isStudent && <WordsBtn style2={{ marginRight: '12px' }} onClick={() => addToDir(record)} style={''}>加入分班</WordsBtn>}
|
||||
<WordsBtn style2={{ marginRight: '12px' }} onClick={() => onGoDetail(record)} style={''}>查看</WordsBtn>
|
||||
</React.Fragment>
|
||||
}
|
||||
})
|
||||
|
||||
return columns
|
||||
}
|
||||
const addToDir = async (record) => {
|
||||
const courseId = props.match.params.coursesId
|
||||
const url = `/courses/${courseId}/join_course_group.json`
|
||||
const course_group_id = record.id
|
||||
|
||||
const response = await axios.post(url, {
|
||||
course_group_id
|
||||
})
|
||||
if (response && response.data.status == 0) {
|
||||
props.showNotification('加入成功')
|
||||
props.updataleftNavfun()
|
||||
props.onOperationSuccess && props.onOperationSuccess()
|
||||
}
|
||||
}
|
||||
|
||||
function onDelete(record) {
|
||||
props.confirm({
|
||||
content: <div>
|
||||
<div>该分班的学生将被移动到“未分班”</div>
|
||||
<div>是否确认删除?</div>
|
||||
</div>,
|
||||
onOk: () => {
|
||||
// const cid = this.props.match.params.coursesId
|
||||
|
||||
const url = `/course_groups/${record.id}.json`
|
||||
axios.delete(url)
|
||||
.then((response) => {
|
||||
if (response.data.status == 0) {
|
||||
props.showNotification('删除成功')
|
||||
props.onOperationSuccess && props.onOperationSuccess()
|
||||
// props.history.push(response.data.right_url)
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
function onGoDetail(record) {
|
||||
props.history.push(`/courses/${courseId}/course_groups/${record.id}`)
|
||||
}
|
||||
const isAdmin = props.isAdmin();
|
||||
const isSuperAdmin = props.isSuperAdmin();
|
||||
const isStudent = props.isStudent()
|
||||
const isNotMember = props.isNotMember()
|
||||
|
||||
|
||||
const isParent = true;
|
||||
const isCourseEnd= props.isCourseEnd();
|
||||
|
||||
const course_groups = props.course_groups
|
||||
const columns = buildColumns()
|
||||
const dataSource = course_groups.map(item => {
|
||||
return {
|
||||
...item,
|
||||
subStringOfMember_manager : item.member_manager.length > 92
|
||||
? item.member_manager.substring(0, 92) + '...' : null
|
||||
}
|
||||
})
|
||||
return (
|
||||
<React.Fragment>
|
||||
<style>{`
|
||||
.groupListTable .ant-badge-status-processing {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
`}</style>
|
||||
{/* onChange={onTableChange} */}
|
||||
<Table columns={columns} dataSource={dataSource} pagination={false} className="groupListTable"></Table>
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
export default CourseGroupListTable
|
||||
@ -1,3 +1,4 @@
|
||||
.stu_table .ant-table-thead > tr > th, .stu_table .ant-table-tbody > tr > td {
|
||||
.stu_table .ant-table-thead > tr > th, .stu_table .ant-table-tbody > tr > td,
|
||||
.courseGroupList .ant-table-thead > tr > th, .courseGroupList .ant-table-tbody > tr > td {
|
||||
padding: 14px 6px;
|
||||
}
|
||||
Loading…
Reference in new issue