rt-sim-training-client/src/views/organization/index.vue

425 lines
17 KiB
Vue
Raw Normal View History

2020-12-31 09:32:25 +08:00
<template>
2021-03-11 18:09:26 +08:00
<div style="position: relative;">
2021-01-05 13:56:51 +08:00
<div class="back_box">
<el-button type="text" @click="goBack">返回</el-button>
</div>
2021-03-11 18:09:26 +08:00
<div style="width: 100%;margin: 20px 0 50px;text-align: center;font-size: 28px;font-weight: bold;">{{ $store.state.user.companyName + '教学管理' }}</div>
<div style="width: 80%;margin: 0 auto;overflow: hidden;">
<el-menu
default-active="1"
style="width: 200px;float: left;"
active-text-color="#00BFFF"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="1" @click="clickMenu">
<img :src="classIcon" style="width: 20px;height: 20px;margin-right: 10px;">
<span style="font-size: 20px;">班级管理</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<img :src="lessonIcon" style="width: 20px;height: 20px;margin-right: 10px;">
<span style="font-size: 20px;">课程管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1" style="font-size: 18px;" @click="clickMenu">发布课程管理</el-menu-item>
<el-menu-item index="2-2" style="font-size: 18px;" @click="clickMenu">草稿课程管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="3" @click="clickMenu">
<img :src="examIcon" style="width: 20px;height: 20px;margin-right: 10px;">
<span slot="title" style="font-size: 20px;">考试管理</span>
</el-menu-item>
<el-menu-item index="4" @click="clickMenu">
<img :src="ruleIcon" style="width: 20px;height: 20px;margin-right: 10px;">
<span slot="title" style="font-size: 20px;">评价管理</span>
</el-menu-item>
</el-menu>
<div style="width: calc(100% - 200px);margin-left: 200px;">
<div v-if="defaultActive === '1'">
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
<el-form :inline="true" :model="classFormModel" size="small">
<el-form-item label="班级名称:">
<el-input v-model="classFormModel.className" placeholder="班级名称" />
</el-form-item>
<el-form-item>
<el-button @click="classQuery">班级查询</el-button>
</el-form-item>
</el-form>
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="classCreate">新建班级</el-button>
</div>
<el-table :data="classData" border style="width: 80%;margin: 0 auto;">
<el-table-column prop="name" label="班级" />
<el-table-column prop="num" label="人数" />
<el-table-column prop="createDate" label="创建日期" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">导入学生</el-button>
<el-button type="text" size="small">查看名册</el-button>
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small"> 评价查询</el-button>
</template>
</el-table-column>
</el-table>
2021-01-07 15:14:58 +08:00
</div>
2021-03-11 18:09:26 +08:00
<div v-if="defaultActive === '2-1'">
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
<el-form :inline="true" :model="lessonFormModel" size="small">
<el-form-item label="学年:">
<el-select v-model="lessonFormModel.academicYear" placeholder="请选择" :clearable="true">
<el-option
v-for="item in academicYearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="学期:">
<el-select v-model="lessonFormModel.semester" placeholder="请选择" :clearable="true">
<el-option
v-for="item in semesterList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="lessonQuery">课程查询</el-button>
</el-form-item>
</el-form>
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="lessonCreate">新建课程</el-button>
</div>
<el-table :data="lessonData" border style="width: 80%;margin: 0 auto;">
<el-table-column prop="name" label="课程名称" />
<el-table-column prop="className" label="授课班级" />
<el-table-column prop="createDate" label="创建日期" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">修改课程</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="defaultActive === '2-2'">
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
<el-form :inline="true" :model="lessonFormModel" size="small">
<el-form-item label="学年:">
<el-select v-model="lessonFormModel.academicYear" placeholder="请选择" :clearable="true">
<el-option
v-for="item in academicYearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="学期:">
<el-select v-model="lessonFormModel.semester" placeholder="请选择" :clearable="true">
<el-option
v-for="item in semesterList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="lessonQuery">课程查询</el-button>
</el-form-item>
</el-form>
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="lessonCreate">新建课程</el-button>
</div>
<QueryListPage
ref="queryListPage"
:query-form="draftLessonQueryForm"
:pager-config="pagerConfig"
:query-list="draftLessonQueryList"
style="width:80%;margin: 0 auto;"
2021-01-06 13:23:16 +08:00
/>
</div>
2021-03-11 18:09:26 +08:00
<div v-if="defaultActive === '3'">
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
<el-form :inline="true" :model="examFormModel" size="small">
<el-form-item label="学年:">
<el-select v-model="examFormModel.academicYear" placeholder="请选择" :clearable="true">
<el-option
v-for="item in academicYearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="学期:">
<el-select v-model="examFormModel.semester" placeholder="请选择" :clearable="true">
<el-option
v-for="item in semesterList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="examQuery">考试查询</el-button>
</el-form-item>
</el-form>
<el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="examCreate">新建考试</el-button>
</div>
<el-table :data="examData" border style="width: 80%;margin: 0 auto;">
<el-table-column prop="name" label="试卷名称" />
<el-table-column prop="className" label="考试班级" />
<el-table-column prop="createDate" label="创建日期" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">成绩查询</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="defaultActive === '4'">
<div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
<el-form :inline="true" :model="ruleFormModel" size="small">
<el-form-item label="学年:">
<el-select v-model="ruleFormModel.academicYear" placeholder="请选择" :clearable="true">
<el-option
v-for="item in academicYearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="学期:">
<el-select v-model="ruleFormModel.semester" placeholder="请选择" :clearable="true">
<el-option
v-for="item in semesterList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="ruleQuery">规则查询</el-button>
</el-form-item>
</el-form>
<el-button type="primary" size="small" style="width: 100px;height: 32px;" @click="ruleCreate">新建评价规则</el-button>
</div>
<el-table :data="ruleData" border style="width: 80%;margin: 0 auto;">
<el-table-column type="index" width="50" />
<el-table-column prop="content" label="规则内容" />
<el-table-column prop="createDate" label="创建日期" />
<el-table-column prop="className" label="适用班级" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
2020-12-31 09:32:25 +08:00
</template>
<script>
2021-03-11 18:09:26 +08:00
import ClassIcon from '@/assets/teachManage/class.png';
import LessonIcon from '@/assets/teachManage/lesson.png';
import ExamIcon from '@/assets/teachManage/exam.png';
import RuleIcon from '@/assets/teachManage/rule.png';
import ConstConfig from '@/scripts/ConstConfig';
import { getLessonDrftList } from '@/api/jmap/lessondraft';
2020-12-31 09:32:25 +08:00
export default {
name: 'Organization',
data() {
return {
2021-03-11 18:09:26 +08:00
classIcon: ClassIcon,
lessonIcon: LessonIcon,
examIcon: ExamIcon,
ruleIcon: RuleIcon,
defaultActive: '1',
classData: [{ name: '测试班级', num: 30, createDate: '2021.03.11' }],
lessonData: [{ name: '测试课程', className: '测试班级', createDate: '2021.03.11' }],
examData: [{ name: '测试课程', className: '测试班级', createDate: '2021.03.11' }],
ruleData: [{ content: '平时考勤30%考试成绩70%', createDate: '2021.03.11', className: '测试班级' }],
academicYearList: [],
semesterList: [{ label: '上学期', value: 'top' }, { label: '下学期', value: 'down' }],
classFormModel: {
className: ''
},
lessonFormModel: {
academicYear: '',
semester: ''
2021-01-07 15:14:58 +08:00
},
2021-03-11 18:09:26 +08:00
examFormModel: {
academicYear: '',
semester: ''
},
ruleFormModel: {
academicYear: '',
semester: ''
},
pagerConfig: {
pageSize: 'pageSize',
pageIndex: 'pageNum'
},
draftLessonQueryForm: {
show: false
},
draftLessonQueryList: {
query: getLessonDrftList,
selectCheckShow: false,
indexShow: true,
columns: [
{
title: this.$t('lesson.courseName'),
prop: 'name'
},
{
title: this.$t('lesson.courseDescription'),
prop: 'remarks'
},
{
title: this.$t('global.status'),
prop: 'status',
type: 'tag',
columnValue: (row) => {
return this.$convertField(row.status, ConstConfig.ConstSelect.releaseReview, ['value', 'label']);
},
tagType: (row) => { return 'success'; }
},
{
type: 'button',
title: this.$t('global.operate'),
width: '400',
buttons: [
{
name: this.$t('lesson.courseDetails'),
handleClick: this.goDetail,
type: 'primary',
showControl: (row) => {
return row.status !== '1';
}
},
{
name: this.$t('lesson.contentSorting'),
handleClick: this.treeSort,
type: 'primary',
showControl: (row) => {
return row.status !== '1';
}
},
{
name: this.$t('global.release'),
handleClick: this.publish,
type: 'primary',
showControl: (row) => {
return row.status === '0' && this.hasRelease;
}
},
{
name: this.$t('lesson.applicationForRelease'),
handleClick: this.publish,
type: 'primary',
showControl: (row) => {
return row.status === '0' && !this.hasRelease;
}
},
{
name: this.$t('lesson.review'),
handleClick: this.review,
type: 'primary',
showControl: (row) => {
return row.status === '1';
}
},
{
name: this.$t('global.delete'),
handleClick: this.deleteLesson,
type: 'danger',
showControl: (row) => {
return row.status !== '1';
}
},
{
name: this.$t('lesson.withdraw'),
handleClick: this.revertLesson,
type: 'danger',
showControl: (row) => {
return row.status === '1';
}
}
]
}
]
}
2020-12-31 09:32:25 +08:00
};
},
2021-01-06 13:23:16 +08:00
computed: {
2021-03-11 18:09:26 +08:00
2021-01-06 13:23:16 +08:00
},
mounted() {
2021-03-11 18:09:26 +08:00
this.academicYearList = [];
const nowYear = new Date().getFullYear();
for (let i = 2020; i < nowYear + 1; i++) {
this.academicYearList.push({ label: `${i}-${i + 1}学年`, value: i });
}
2021-01-06 13:23:16 +08:00
},
2021-03-11 18:09:26 +08:00
methods:{
handleOpen(val) {
console.log(val, '1111');
2021-01-07 15:14:58 +08:00
},
2021-03-11 18:09:26 +08:00
handleClose(val) {
console.log(val, '2222');
2021-01-06 13:23:16 +08:00
},
2021-03-11 18:09:26 +08:00
clickMenu(val) {
this.defaultActive = val.index;
2021-01-06 13:23:16 +08:00
},
2021-03-11 18:09:26 +08:00
goBack() {
this.$router.go(-1);
2021-01-06 13:23:16 +08:00
},
2021-03-11 18:09:26 +08:00
classQuery() {
2021-01-06 13:23:16 +08:00
},
2021-03-11 18:09:26 +08:00
classCreate() {
2021-01-07 15:14:58 +08:00
},
2021-03-11 18:09:26 +08:00
lessonQuery() {
2021-01-07 15:14:58 +08:00
},
2021-03-11 18:09:26 +08:00
lessonCreate() {
2021-01-07 15:14:58 +08:00
},
2021-03-11 18:09:26 +08:00
examQuery() {
2021-01-06 13:23:16 +08:00
},
2021-03-11 18:09:26 +08:00
examCreate() {
2021-01-05 13:56:51 +08:00
},
2021-03-11 18:09:26 +08:00
ruleQuery() {
2021-01-05 13:56:51 +08:00
},
2021-03-11 18:09:26 +08:00
ruleCreate() {
2020-12-31 09:32:25 +08:00
}
}
};
</script>
<style scoped>
2021-01-05 13:56:51 +08:00
.back_box {
2021-03-11 18:09:26 +08:00
height: 20px;
2021-01-05 13:56:51 +08:00
z-index: 36;
2021-01-12 10:19:43 +08:00
width: 40px;
2021-01-05 13:56:51 +08:00
text-align: center;
position: absolute;
2021-03-11 18:09:26 +08:00
right: 20px;
top: -20px;
2021-01-06 13:23:16 +08:00
}
2020-12-31 09:32:25 +08:00
</style>