train-center/src/views/plan/lesson-plan.vue

<template>
  <div id="lesson-plan">
    <el-collapse v-model="activeName" accordion v-if="views === 'setting'">
      <template v-if="classList.length > 0">
        <el-collapse-item v-for="(item, index) in classList" :key="`coli${index}`" :name="`${index}`">
          <template slot="title">
            <span style="font-size:24px">{{ item.name }}</span>
          </template>
          <data-table style="padding:10px" ref="table" :fields="fields" :data="item.lessons" :opera="opera" @edit="toEdit"></data-table>
          <el-form :inline="true" size="mini" label-width="120px" @submit.native.prevent>
            <el-form-item label="班主任">
              <el-select v-model="item.headteacherid" placeholder="请选择班主任">
                <el-option-group v-for="group in directorList" :key="group.label" :label="group.label">
                  <el-option v-for="item in group.options" :key="item._id" :label="`${item.name}${item.status === '0' ? '(已上报)' : ''}`" :value="item._id">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>

            <el-form-item label="礼仪课教师">
              <el-select v-model="item.lyteacherid" placeholder="请选择礼仪课教师">
                <el-option v-for="(tea, index) in lyTeacherList" :key="`lytea${index}`" :label="tea.name" :value="tea.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="教室地点">
              <el-select v-model="item.jslocationid" placeholder="请选择教室地点">
                <el-option v-for="(place, index) in locationList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="开班地点">
              <el-select v-model="item.kbyslocationid" placeholder="请选择开班地点">
                <el-option v-for="(place, index) in locationList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="拓展训练地点">
              <el-select v-model="item.kzjhlocationid" placeholder="请选择拓展训练地点">
                <el-option v-for="(place, index) in locationList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="用餐地点">
              <el-select v-model="item.yclocationid" placeholder="请选择用餐地点">
                <el-option v-for="(place, index) in locationList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
              </el-select>
            </el-form-item>
            <el-row type="flex" justify="center" align="middle">
              <el-col :span="5">
                <el-button type="primary" @click="saveLessson(item.classid)" size="mini">保存班级课程</el-button>
              </el-col>
              <el-col :span="5">
                <el-button type="primary" @click="toPreview(item.classid)" plain size="mini">课表预览</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </template>
      <template v-else>
        <el-collapse-item title="该批次未分班,无法继续排课!" name="none"></el-collapse-item>
      </template>
    </el-collapse>
    <cards title="课表预览" :returns="toReturns" v-else>
      <time-table :data="previews"></time-table>
    </cards>
    <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl" @close="drawerClose">
      <el-tabs>
        <el-tab-pane style="padding:10px">
          <template #label>
            <span style="zoom:1.3">{{ form.name }}</span>
          </template>
          <el-form ref="form" :model="form" label-width="120px" size="mini" :rules="rules" @submit.native.prevent>
            <el-form-item label="时间" prop="date">
              {{ form.date }}
            </el-form-item>
            <el-form-item label="星期" prop="week">
              {{ form.week }}
            </el-form-item>
            <el-form-item label="所授科目" prop="subid">
              <el-select v-model="form.subid">
                <el-option v-for="(item, index) in subjectList" :key="`subject${index}`" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任课教师" prop="teaid">
              <el-input v-model="form.teaname" :readonly="true" placeholder="点击选择教师" @click.native="toChooseTeacher"></el-input>
            </el-form-item>
            <el-form-item label="时长" prop="day" required>
              <el-radio-group v-model="form.day" @change="$forceUpdate()">
                <el-radio v-for="(i, index) in dayList" :key="`day${index}`" :label="i.label"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="toSaveDrawer">保存</el-button>
              <el-button @click="resetDrawer">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <el-dialog :visible.sync="dialog" title="选择教师" center @close="toClose">
      <el-tabs v-model="teaTab">
        <el-tab-pane style="padding:10px" label="申请授课教师" name="apply">
          <el-form :model="applyTeacherListPag" :inline="true">
            <el-form-item label="姓名">
              <el-input v-model="applyTeacherListPag.name" size="mini" placeholder="请输入要查询的教师姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="changePage(null, 'apply')">查询</el-button>
            </el-form-item>
          </el-form>
          <data-table style="padding:10px" :fields="teaFields" :data="applyTeacherList" :opera="teaOpera" @seletTea="setTea" :height="300"></data-table>
        </el-tab-pane>
        <el-tab-pane style="padding:10px" label="可授课教师" name="list">
          <el-form :model="teacherListPag" :inline="true">
            <el-form-item label="姓名">
              <el-input v-model="teacherListPag.name" size="mini" placeholder="请输入要查询的教师姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="changePage(null, 'teacher')">查询</el-button>
            </el-form-item>
          </el-form>
          <data-table style="padding:10px" :fields="teaFields" :data="teacherList" :opera="teaOpera" @seletTea="setTea" :height="300"></data-table>
          <el-row type="flex" align="middle" justify="end">
            <el-col :span="24" style="text-align:right;">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :total="teacherListPag.total"
                :page-size="5"
                :current-page.sync="teacherListPag.currentPage"
                @current-change="cur => changePage(cur, 'teacher')"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import timeTable from '@frame/parts/time-table';
import cards from '@frame/parts/cards';
import dataTable from '@frame/components/data-table';
import { createNamespacedHelpers } from 'vuex';
const { mapActions: location } = createNamespacedHelpers('location'); //地点
const { mapActions: subject } = createNamespacedHelpers('subject'); //科目
const { mapActions: teacher } = createNamespacedHelpers('teacher'); //教师
const { mapActions: teaPlan } = createNamespacedHelpers('teaPlan'); //教师申请
const { mapActions: dept } = createNamespacedHelpers('dept'); //配合教师表使用的部门表
const { mapActions: dirPlan } = createNamespacedHelpers('dirPlan'); //班主任不能上课的列表

export default {
  name: 'lesson-plan',
  props: {
    startDate: { type: String, required: true },
    endDate: { type: String, required: true },
    classes: { type: Array, default: () => [] },
    trainplanid: { type: String },
    batchid: { type: String },
  },
  components: { dataTable, timeTable, cards },
  data: () => ({
    start: '',
    end: '',
    views: 'setting',
    activeName: '0',
    drawer: false,
    dialog: false,
    teaTab: 'apply',
    dateList: [],
    classList: [],
    fields: [
      { label: '日期', prop: 'date' },
      { label: '星期', prop: 'week' },
      { label: '课程', prop: 'subname' },
      { label: '任课教师', prop: 'teaname' },
    ],
    opera: [
      {
        label: '安排课程及教师',
        icon: 'el-icon-edit',
        method: 'edit',
      },
    ],
    teaOpera: [
      {
        label: '选择教师',
        icon: 'el-icon-check',
        method: 'seletTea',
      },
    ],
    teaFields: [
      { label: '姓名', prop: 'name' },
      { label: '学校', prop: 'schname' },
      { label: '资料评分', prop: 'zlscore' },
      { label: '面试评分', prop: 'msscore' },
    ],
    dayList: [{ label: '一天' }, { label: '半天' }],
    rules: {
      day: [{ required: true, message: '请选择时长' }],
    },
    form: {},
    locationList: [],
    subjectList: [],
    lyTeacherList: [],
    teacherList: [],
    applyTeacherList: [],
    directorList: [],
    deptList: [],
    teacherListPag: {
      total: 0,
      cur: 1,
    },
    applyTeacherListPag: {},
    previews: {},
  }),
  created() {
    this.setDateList();
    this.setClasses();
    this.getOtherList();
  },
  methods: {
    ...dirPlan({ dirQuery: 'getDirTeacher' }),
    ...location({ getLocationList: 'query' }),
    ...subject({ getSubjectList: 'query' }),
    ...teacher({ getTeacherList: 'query' }),
    ...teaPlan({ getApplyTeacherList: 'applyQuery' }),
    ...dept({ getDeptList: 'query' }),
    setDateList() {
      let start = new Date(this.startDate);
      let end = new Date(this.endDate);
      this.$set(this, `start`, this.$fullDateString(new Date(start)));
      let day = (end.getTime() - start.getTime()) / (1 * 24 * 60 * 60 * 1000);
      let endDate = this.$fullDateString(new Date(new Date(start).setDate(new Date(start).getDate() + day - 1)));
      this.$set(this, `end`, endDate);
      let arr = [];
      for (let index = 0; index < day; index++) {
        let s = new Date(JSON.parse(JSON.stringify(start)));
        let i = s.setDate(s.getDate() + index);
        i = this.$fullDateString(new Date(i));
        let object = {
          date: i,
          week: new Date(i).getDay() === 0 ? 7 : new Date(i).getDay(),
        };
        arr.push(object);
      }
      this.$set(this, `dateList`, arr);
    },
    setClasses() {
      let classes = JSON.parse(JSON.stringify(this.classes));
      classes.map(i => {
        i.lessons
          ? i.lessons.map(i => {
              i.week = new Date(i.date).getDay() === 0 ? 7 : new Date(i.date).getDay();
            })
          : (i.lessons = JSON.parse(JSON.stringify(this.dateList)));
        return i;
      });
      this.$set(this, `classList`, classes);
    },
    toEdit({ data }) {
      //班级信息
      let sClass = JSON.parse(JSON.stringify(this.classes[this.activeName]));
      //点击的日期,星期
      let arrange = data;
      //让用户选择课程=>根据选择的课程查询可以教课的老师,根据老师的评分排序(不一定谁做)
      // 1先查询课程列表
      // 2先查询arr中,是否有选择的课程,有则查询教师列表
      this.$set(this, `form`, { ...sClass, ...arrange });
      this.form.day ? '' : (this.form.day = '一天');
      this.drawer = true;
    },
    resetDrawer() {
      this.$set(this.form, `subid`);
      this.$set(this.form, `subname`);
      this.$set(this.form, `teaid`);
      this.$set(this.form, `teaname`);
      delete this.form.teaid, this.form.teaname, this.form.subid, this.form.subname;
    },
    toChooseTeacher() {
      if (this.form.subid) {
        this.dialog = true;
        this.toGetTeacherList({});
      } else this.$message.warning('请选择所授科目');
    },
    setTea({ data }) {
      let { id, name } = data;
      this.$set(this.form, `teaid`, id);
      this.$set(this.form, `teaname`, name);
      this.toClose();
    },
    toClose() {
      this.dialog = false;
    },
    drawerClose() {
      this.drawer = false;
      this.form = {};
      this.$refs.form.resetFields();
    },
    toSaveDrawer() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.subjectList.find(f => f._id === this.form.subid)) {
            this.form.subname = this.subjectList.find(f => f._id === this.form.subid).name;
          }
          let form = JSON.parse(JSON.stringify(this.form));
          let lesson = _.pick(form, ['day', 'subname', 'teaname', 'subid', 'teaid', 'date', 'week']);
          // 整理列表所需要的数据
          let res = this.classList.find(f => f.classid === form.classid);
          let classIndex = this.classList.findIndex(f => f.classid === form.classid);
          let index = res.lessons.findIndex(f => f.date === form.date);
          this.$set(this.classList[classIndex].lessons, index, lesson);
          this.drawerClose();
        } else {
          console.warn('form validate error!!!');
          return false;
        }
      });
    },
    //选项列表请求
    async getOtherList() {
      let res;
      res = await this.getLocationList();
      if (this.$checkRes(res)) this.$set(this, `locationList`, res.data);
      res = await this.getSubjectList();
      if (this.$checkRes(res)) this.$set(this, `subjectList`, res.data);
      //TODO 班主任表中的人员也可以成为礼仪老师,现在应该没有
      // TODO派生:涉及之后回显问题,是要将这个人在教师/班主任表中都查然后获得到
      res = await this.getTeacherList({ islyteacher: '1' });
      if (this.$checkRes(res)) this.$set(this, `lyTeacherList`, res.data);
      res = await this.getDeptList();
      if (this.$checkRes(res)) this.$set(this, `deptList`, res.data);
      res = await this.dirQuery({ batchid: this.batchid });
      if (this.$checkRes(res)) {
        let arr = res.data;
        arr = arr.map(i => {
          let dept = this.deptList.find(f => f._id === i.department);
          if (res) i.dept_name = dept.name;
          else i.dept_name = '无所属部门';
          return i;
        });
        let last = this.deptList.map(i => {
          let options = arr.filter(f => f.department === i._id);
          let label = i.name;
          return { options, label };
        });
        this.$set(this, `directorList`, last);
      }
    },
    //教师列表请求
    async toGetTeacherList({ query = {}, type } = {}) {
      query.subid = this.form.subid;
      query.termid = this.form.termid;
      query.status = '4';
      let setTeacher = async query => {
        let res = await this.getTeacherList(query);
        if (this.$checkRes(res)) {
          this.$set(this, `teacherList`, res.data);
          this.$set(this.teacherListPag, `total`, res.total);
        }
      };
      let setApply = async query => {
        let res = await this.getApplyTeacherList(query);
        if (this.$checkRes(res)) {
          this.$set(this, `applyTeacherList`, res.data ? res.data : []);
        }
      };
      if (!type) {
        //都查
        setTeacher(query);
        setApply(query);
      } else if (type === 'teacher') {
        //查教师
        setTeacher(query);
      } else if (type === 'apply') {
        //查申请授课
        setApply(query);
      }
    },
    changePage(page = 1, type) {
      let query = { skip: (page - 1) * 5 < 0 ? 0 : (page - 1) * 5, limit: 5 };
      if (type === 'teacher') {
        this.teacherListPag.name && this.teacherListPag.name !== '' ? (query.name = this.teacherListPag.name) : '';
      } else {
        this.applyTeacherListPag.name && this.applyTeacherListPag.name !== '' ? (query.name = this.applyTeacherListPag.name) : '';
      }
      this.toGetTeacherList({ query, type });
    },
    saveLessson(id) {
      let tcc = this.classList.find(f => f.classid === id);
      // // 礼仪课,开班地点,教师地点,拓展训练地点修改班级表
      this.$emit(`save`, tcc);
    },
    toPreview(id) {
      console.log(id);
      let tcc = this.classList.find(f => f.classid === id);
      console.log(this.classList);
      let numArr = tcc.name.match(/\d+/g);
      let term = numArr[0];
      let classes = numArr[2];
      let headteacher = {};
      this.directorList.map(f => (headteacher = f.options.find(ff => ff.id === tcc.headteacherid)));
      let lyTeacher = this.lyTeacherList.find(f => f.id === tcc.lyteacherid);
      let js = this.locationList.find(f => f.id === tcc.jslocationid);
      let kbys = this.locationList.find(f => f.id === tcc.kbyslocationid);
      let tzxl = this.locationList.find(f => f.id === tcc.kzjhlocationid);
      let yc = this.locationList.find(f => f.id === tcc.yclocationid);
      let object = { term, class: classes, start: this.start, end: this.end, lessons: tcc.lessons, headteacher, lyTeacher, js, kbys, tzxl, yc };
      this.$set(this, `previews`, object);
      this.views = 'table';
    },
    toReturns() {
      this.views = 'setting';
    },
  },
  computed: {
    mainTitle() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      let sub = meta.sub || '';
      return `${main}${sub}`;
    },
    keyWord() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      return main;
    },
  },
};
</script>

<style lang="less" scoped></style>