rt-sim-training-client/src/views/organization/index.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>