559 lines
22 KiB
Vue
559 lines
22 KiB
Vue
<template>
|
||
<div style="position: relative;">
|
||
<div class="back_box">
|
||
<el-button type="text" @click="goBack">返回</el-button>
|
||
</div>
|
||
<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>
|
||
<QueryListPage
|
||
ref="classQueryListPage"
|
||
:query-form="classQueryForm"
|
||
:pager-config="pagerConfig"
|
||
:query-list="classQueryList"
|
||
style="width:80%;margin: 0 auto;"
|
||
/>
|
||
</div>
|
||
<div v-if="defaultActive === '2-1'">
|
||
<QueryListPage
|
||
ref="lessonQueryListPage"
|
||
:query-form="lessonQueryForm"
|
||
:pager-config="pagerConfig"
|
||
:query-list="lessonQueryList"
|
||
style="width:80%;margin: 0 auto;"
|
||
/>
|
||
</div>
|
||
<div v-if="defaultActive === '2-2'">
|
||
<QueryListPage
|
||
ref="draftLessonQueryListPage"
|
||
:query-form="draftLessonQueryForm"
|
||
:pager-config="pagerConfig"
|
||
:query-list="draftLessonQueryList"
|
||
style="width:80%;margin: 0 auto;"
|
||
/>
|
||
</div>
|
||
<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>
|
||
<create-by-published ref="createByPublished" @refresh="draftLessonRefresh" />
|
||
<edit-lesson-info ref="editLessonInfo" @refresh="lessonRefresh" />
|
||
<publish-lesson ref="publishLesson" @refresh="draftLessonRefresh" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
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 { getLessonDraftListNoMapId } from '@/api/jmap/lessondraft';
|
||
import { getLessonListSystem, forceDeleteLesson } from '@/api/jmap/lesson';
|
||
import { getClassListPage } from '@/api/company';
|
||
import CreateByPublished from './createByPublished';
|
||
import EditLessonInfo from './editLessonInfo';
|
||
import { getPublishMapListOnline, getPublishMapInfo } from '@/api/jmap/map';
|
||
import { delLesson } from '@/api/jmap/lessondraft';
|
||
import PublishLesson from './publishLesson';
|
||
|
||
export default {
|
||
name: 'Organization',
|
||
components: {
|
||
CreateByPublished,
|
||
EditLessonInfo,
|
||
PublishLesson
|
||
},
|
||
data() {
|
||
return {
|
||
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' }],
|
||
mapIdList: [],
|
||
lineCode: '',
|
||
classFormModel: {
|
||
className: ''
|
||
},
|
||
lessonFormModel: {
|
||
academicYear: '',
|
||
semester: ''
|
||
},
|
||
examFormModel: {
|
||
academicYear: '',
|
||
semester: ''
|
||
},
|
||
ruleFormModel: {
|
||
academicYear: '',
|
||
semester: ''
|
||
},
|
||
pagerConfig: {
|
||
pageSize: 'pageSize',
|
||
pageIndex: 'pageNum'
|
||
},
|
||
classQueryForm: {
|
||
|
||
},
|
||
classQueryList: {
|
||
query: this.getAllClassList,
|
||
selectCheckShow: false,
|
||
indexShow: true,
|
||
columns: [
|
||
{
|
||
title: '班级名称',
|
||
prop: 'name',
|
||
width: '200'
|
||
},
|
||
{
|
||
title: '课程地图',
|
||
prop: 'mapId',
|
||
type: 'tag',
|
||
width: '250',
|
||
columnValue: (row) => {
|
||
return this.$convertField(row.mapId, this.mapIdList, ['id', 'name']);
|
||
},
|
||
tagType: (row) => { return 'success'; }
|
||
},
|
||
{
|
||
title: this.$t('lesson.courseDescription'),
|
||
prop: 'remarks'
|
||
},
|
||
{
|
||
type: 'button',
|
||
title: this.$t('global.operate'),
|
||
width: '200',
|
||
buttons: [
|
||
{
|
||
name: '导入学生',
|
||
handleClick: this.handleEditLessonInfo,
|
||
type: 'primary'
|
||
},
|
||
{
|
||
name: '查看名册',
|
||
handleClick: this.handleEditLessonInfo,
|
||
type: 'primary'
|
||
},
|
||
{
|
||
name: '评价查询',
|
||
handleClick: this.handleEditLessonInfo,
|
||
type: 'primary'
|
||
},
|
||
{
|
||
name: '删除',
|
||
handleClick: this.handleDeleteLesson,
|
||
type: 'danger'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
lessonQueryForm: {
|
||
// leftSpan: 16,
|
||
// offsetSpan: 17
|
||
show: false
|
||
},
|
||
lessonQueryList: {
|
||
query: getLessonListSystem,
|
||
selectCheckShow: false,
|
||
indexShow: true,
|
||
columns: [
|
||
{
|
||
title: this.$t('lesson.courseName'),
|
||
prop: 'name',
|
||
width: '200'
|
||
},
|
||
{
|
||
title: '课程地图',
|
||
prop: 'mapId',
|
||
type: 'tag',
|
||
width: '250',
|
||
columnValue: (row) => {
|
||
return this.$convertField(row.mapId, this.mapIdList, ['id', 'name']);
|
||
},
|
||
tagType: (row) => { return 'success'; }
|
||
},
|
||
{
|
||
title: this.$t('lesson.courseDescription'),
|
||
prop: 'remarks'
|
||
},
|
||
{
|
||
type: 'button',
|
||
title: this.$t('global.operate'),
|
||
width: '200',
|
||
buttons: [
|
||
{
|
||
name: '修改课程',
|
||
handleClick: this.handleEditLessonInfo,
|
||
type: 'primary'
|
||
},
|
||
{
|
||
name: '删除',
|
||
handleClick: this.handleDeleteLesson,
|
||
type: 'danger'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
draftLessonQueryForm: {
|
||
leftSpan: 16,
|
||
offsetSpan: 17
|
||
},
|
||
draftLessonQueryList: {
|
||
query: getLessonDraftListNoMapId,
|
||
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.goLessonDetail,
|
||
type: 'primary',
|
||
showControl: (row) => {
|
||
return row.status !== '1';
|
||
}
|
||
},
|
||
{
|
||
name: this.$t('lesson.contentSorting'),
|
||
handleClick: this.treeSortLesson,
|
||
type: 'primary',
|
||
showControl: (row) => {
|
||
return row.status !== '1';
|
||
}
|
||
},
|
||
{
|
||
name: this.$t('global.release'),
|
||
handleClick: this.publishLesson,
|
||
type: 'primary',
|
||
showControl: (row) => {
|
||
return row.status === '0';
|
||
}
|
||
},
|
||
{
|
||
name: this.$t('global.delete'),
|
||
handleClick: this.deleteLesson,
|
||
type: 'danger'
|
||
}
|
||
]
|
||
}
|
||
],
|
||
actions: [
|
||
{ text: '从发布课程新建', handler: this.lessonCreateByOld },
|
||
{ text: '新建课程', handler: this.lessonCreate }
|
||
]
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
mounted() {
|
||
this.academicYearList = [];
|
||
const nowYear = new Date().getFullYear();
|
||
for (let i = 2020; i < nowYear + 1; i++) {
|
||
this.academicYearList.push({ label: `${i}-${i + 1}学年`, value: i });
|
||
}
|
||
this.mapIdList = [];
|
||
getPublishMapListOnline().then(response => {
|
||
this.mapIdList = response.data;
|
||
});
|
||
this.lessonQuery();
|
||
|
||
},
|
||
methods:{
|
||
handleOpen(val) {
|
||
},
|
||
handleClose(val) {
|
||
},
|
||
clickMenu(val) {
|
||
this.defaultActive = val.index;
|
||
if (val.index === '2-1') {
|
||
this.lessonRefresh();
|
||
} else if (val.index === '2-2') {
|
||
this.draftLessonRefresh();
|
||
}
|
||
},
|
||
getAllClassList(params) {
|
||
return getClassListPage(this.$store.state.user.companyId, params);
|
||
},
|
||
publishLesson(index, row) {
|
||
console.log(row, '==');
|
||
this.$refs.publishLesson.doShow(row);
|
||
},
|
||
goBack() {
|
||
this.$router.go(-1);
|
||
},
|
||
classQuery() {
|
||
|
||
},
|
||
classCreate() {
|
||
|
||
},
|
||
lessonQuery(nums = [2, 3, 4, 5, 6], target = 11) {
|
||
let mapData = {};
|
||
nums.some((item, index, array) =>{
|
||
let result = target - item;
|
||
if (mapData[item] || mapData[item] === 0) {
|
||
mapData = [mapData[item], index];
|
||
return true;
|
||
} else {
|
||
mapData[result] = index;
|
||
}
|
||
result = target - array[array.length - index - 1];
|
||
if (mapData[array[array.length - index - 1]] || mapData[array[array.length - index - 1]] === 0) {
|
||
mapData = [mapData[array[array.length - index - 1]], array.length - index - 1];
|
||
return true;
|
||
} else {
|
||
mapData[result] = array.length - index - 1;
|
||
}
|
||
});
|
||
return mapData;
|
||
},
|
||
lessonCreate() {
|
||
this.$router.push({ path: `/info/createLesson` });
|
||
},
|
||
lessonCreateByOld() {
|
||
this.$refs.createByPublished.doShow();
|
||
},
|
||
examQuery() {
|
||
|
||
},
|
||
examCreate() {
|
||
|
||
},
|
||
ruleQuery() {
|
||
|
||
},
|
||
ruleCreate() {
|
||
|
||
},
|
||
goLessonDetail(index, row) {
|
||
getPublishMapInfo(row.mapId).then(resp => {
|
||
this.lineCode = resp.data.lineCode;
|
||
this.$router.push({ path: '/info/editLesson', query: { lessonId: row.id, mapId: row.mapId, prdType: row.prdType, lineCode: this.lineCode } });
|
||
});
|
||
},
|
||
treeSortLesson(index, row) {
|
||
this.$router.push({ path: '/info/sortLesson', query: { lessonId: row.id } });
|
||
},
|
||
deleteLesson(index, row) {
|
||
this.$confirm('此操作将删除草稿课程，且无法恢复，是否继续？', this.$t('global.tips'), {
|
||
confirmButtonText: this.$t('global.confirm'),
|
||
cancelButtonText: this.$t('global.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
delLesson(row).then(response => {
|
||
this.$message.success(this.$t('tip.successfullyDelete'));
|
||
this.draftLessonRefresh();
|
||
}).catch(() => {
|
||
this.$messageBox(this.$t('tip.failDelete'));
|
||
});
|
||
}).catch(() => { });
|
||
},
|
||
handleDeleteLesson(index, row) {
|
||
this.$confirm('此操作将删除课程及所有对应的试卷，且无法恢复，是否继续？', this.$t('global.tips'), {
|
||
confirmButtonText: this.$t('global.confirm'),
|
||
cancelButtonText: this.$t('global.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
forceDeleteLesson(row.id).then(response => {
|
||
this.$message.success(this.$t('publish.deleteSuccess'));
|
||
this.lessonRefresh();
|
||
}).catch((error) => {
|
||
this.$messageBox(this.$t('error.deleteFailed') + ':' + error.message);
|
||
this.lessonRefresh();
|
||
});
|
||
}).catch(() => { });
|
||
},
|
||
handleEditLessonInfo(index, row) {
|
||
this.$refs.editLessonInfo.doShow(row);
|
||
},
|
||
lessonRefresh() {
|
||
this.$nextTick(() => {
|
||
this.$refs.lessonQueryListPage.refresh(true);
|
||
});
|
||
},
|
||
draftLessonRefresh() {
|
||
this.$nextTick(() => {
|
||
this.$refs.draftLessonQueryListPage.refresh(true);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.back_box {
|
||
height: 20px;
|
||
z-index: 36;
|
||
width: 40px;
|
||
text-align: center;
|
||
position: absolute;
|
||
right: 20px;
|
||
top: -20px;
|
||
}
|
||
</style>
|