train-center/src/views/train-plan/parts/class-table.vue

<template>
  <div id="class-table">
    <el-card>
      <template #header>
        <el-row type="flex" align="middle" justify="space-between">
          <el-col :span="4">课程安排</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini" @click="drawerTime = true">添加时间段</el-button>
          </el-col>
        </el-row>
      </template>
      <el-table :data="lessonList" border stripe @cell-click="cellClick">
        <el-table-column align="center" label="时间" prop="time"></el-table-column>
        <el-table-column align="center" v-for="(i, index) in dateList" :key="index" :label="i" :prop="`subname_day${index + 1}`">
          <template v-slot="{ row, $index }">
            <el-row>
              <el-col :span="24">{{ getProp(row, `subname_day${index + 1}`) }}</el-col>
              <el-col :span="24" v-if="getProp(row, `teaname_day${index + 1}`)">
                <p>{{ getProp(row, `teaname_day${index + 1}`) }}</p>
                <p>{{ getPhone(row, `teaid_day${index + 1}`) }}</p>
              </el-col>
              <el-col :span="24">
                <el-link :type="wordColor(getNoticeResult(getProp(row, `teaid_day${index + 1}`)))">
                  {{ getNoticeResult(getProp(row, `teaid_day${index + 1}`)) }}
                </el-link>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer :visible.sync="drawer" direction="rtl" title="课程安排" @close="toClose">
      <data-form :data="form" :fields="resetForm()" :rules="{}" @save="handleSave" :reset="false">
        <template #radios="{item, form}">
          <template v-if="item.model == 'type'">
            <el-radio @change="radioClearForm" v-for="(i, index) in dayType" :key="index" :label="i.label">{{ i.label }}</el-radio>
          </template>
        </template>
        <template #options="{item, form}">
          <template v-if="item.model == 'subname'">
            <el-option v-for="(i, index) in actList" :key="index" :label="i.label" :value="i.label"></el-option>
          </template>
          <template v-if="item.model == 'subid'">
            <el-option v-for="(i, index) in subjectList" :key="index" :label="i.name" :value="i.id"></el-option>
          </template>
        </template>

        <template #custom="{item, form}">
          <template v-if="item.model == 'teaname'">
            <el-input v-model="form.teaname" :readonly="true" placeholder="点击选择教师" @click.native="toChooseTeacher"></el-input>
            <!-- <el-input v-model="form.reason" v-if="needReason()" placeholder="请填写修改教师原因"></el-input> -->
          </template>
        </template>
      </data-form>
    </el-drawer>
    <el-drawer :visible.sync="drawerTime" direction="rtl" title="课程时间安排" @close="toClose">
      <el-form :model="form" size="mini" style="padding:20px">
        <el-form-item label="时间">
          <el-time-picker
            v-model="form.time"
            placeholder="请选择时间"
            :is-range="true"
            value-format="HH:mm"
            :picker-options="{ format: 'HH:mm' }"
          ></el-time-picker>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="4">
              <el-button type="primary" plain @click="hsavetime('save')">保存</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="danger" plain v-if="form && form.index >= 0" @click="hsavetime('delete')">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog title="选择教师" :visible.sync="dialog" :destroy-on-close="true">
      <teacher-select :schoolList="schoolList" :subjectList="subjectList" :subjectid="form.subid" @selTea="selTea"> </teacher-select>
    </el-dialog>
  </div>
</template>

<script>
var moment = require('moment');
import _ from 'lodash';
import dataForm from '@frame/components/form';
import teacherSelect from './teacher.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: lesson } = createNamespacedHelpers('lesson');
const { mapActions: mapUtil } = createNamespacedHelpers('util');
const { mapActions: subject } = createNamespacedHelpers('subject');
const { mapActions: teacher } = createNamespacedHelpers('teacher');
const { mapActions: school } = createNamespacedHelpers('school'); //给选老师组件使用.这个页面请求完就不销毁了

// 本页的组合数据,变量用x表示: _id_day[x];subname_day[x];subid_day[x];teaid_day[x];teaname_day:[x]
export default {
  name: 'class-table',
  props: {
    classInfo: { type: Object, default: () => {} },
  },
  components: { dataForm, teacherSelect },
  data: function() {
    var that = this;
    return {
      oLessonList: [],
      lessonInfo: {},
      lessonList: [],
      dateList: [],
      timeList: [],
      subjectList: [],
      teacherList: [],
      schoolList: [], //给选老师组件用
      drawer: false,
      drawerTime: false,
      dialog: false,
      form: {},
      fields: [
        { label: '日期', model: 'date', type: 'text' },
        { label: '时间', model: 'time', type: 'text' },
        { label: '类型', model: 'type', type: 'radio' },
        { label: '课程安排', model: 'subid', type: 'select', display: (fields, form) => that.fieldDisplay(fields, form) },
        { label: '活动安排', model: 'subname', type: 'select', display: (fields, form) => that.fieldDisplay(fields, form) },
        { label: '教师', model: 'teaname', custom: true, display: (fields, form) => that.fieldDisplay(fields, form) },
      ],
      dayType: [{ label: '活动' }, { label: '课程' }],
      actList: [
        { label: '--' },
        { label: '报道+开班仪式' },
        { label: '午餐+休息' },
        { label: '晚餐' },
        { label: '团队组建' },
        { label: '拓展交流' },
        { label: '课程作业小组展示' },
        { label: '课程作业' },
        { label: '礼仪课小组面试' },
        { label: '结业仪式' },
      ],
      noticeList: [],
    };
  },
  created() {
    this.getOtherList();
  },
  methods: {
    ...mapUtil(['fetch']),
    ...lesson(['query', 'create', 'update']),
    ...subject({ getSubject: 'query' }),
    ...teacher({ getTeacher: 'query', lessonteafetch: 'lessonteafetch' }),
    ...school({ getSchool: 'query' }),
    async search() {
      let res = await this.fetch({ model: 'lesson', classid: _.get(this.classInfo, '_id') });
      if (this.$checkRes(res)) {
        if (!_.get(res.data, 'lessons') || res.data.lessons.length <= 0) {
          this.$message.warning('请先将本期的课程按模板进行初始化');
          return;
        }
        this.$set(this, `lessonInfo`, _.omit(res.data, ['lessons']));
        let arr = _.get(res.data, `lessons`, []);
        this.$set(this, `oLessonList`, _.cloneDeep(arr));
        this.seachTeacher();
        let x = this.getX(JSON.parse(JSON.stringify(arr)));
        this.getY(JSON.parse(JSON.stringify(arr)));
        this.$set(this, `dateList`, x);
        arr = this.aData(arr);
        this.$set(this, `lessonList`, arr);
        this.getTeacherNotice();
      }
    },
    async toSave() {
      //整理成原数据形式,提交
      let data = JSON.parse(JSON.stringify(this.lessonList));
      data = this.returnData(data);
      let lesson = JSON.parse(JSON.stringify(this.lessonInfo));
      lesson.lessons = data;
      let res = await this.update(lesson);
      if (this.$checkRes(res, null, res.errmsg || '课程表保存失败')) {
        this.$emit('saveResult', { from: 'lesson', result: true });
      }
    },
    //点击单元格事件
    cellClick(row, column) {
      let prop = _.get(column, 'property');
      if (prop != 'time') {
        let date = _.get(column, 'label');
        let time = _.get(row, 'time');
        let num = _.get(column, 'property').match(/\d+(.\d+)?/g)[0];
        let obj = this.getOrderDate(row, num);
        obj.type = obj.subid ? '课程' : '活动';
        this.$set(this, `form`, { date, time, ...obj });
        this.drawer = true;
      } else {
        let obj = _.cloneDeep(row);
        let index = this.lessonList.findIndex(f => f.time == obj.time);
        obj.time = obj.time.split('-');
        obj.index = index;
        this.$set(this, `form`, obj);
        this.drawerTime = true;
      }
    },
    //抽屉保存
    handleSave({ data }) {
      let num = _.get(data, 'index');
      let type = _.get(data, `type`);
      let time = _.get(data, `time`);
      let yIndex = this.lessonList.findIndex(f => f.time == time);
      let obj = {};
      if (type == '课程') {
        obj = _.pick(data, ['subid', 'teaid', 'teaname', '_id', 'reason']);
        let r = this.subjectList.find(f => f.id == obj.subid);
        if (r) obj.subname = r.name;
      } else {
        obj = _.pick(data, ['subname', '_id']);
      }
      obj = this.resetData(obj, num);
      this.$set(this.lessonList, yIndex, { ...this.lessonList[yIndex], ...obj });
      this.setSubTea();
      this.drawer = false;
    },
    //提交整理数据
    returnData(data) {
      let returnArr = [];
      data.map(i => {
        let keys = Object.keys(i);
        let time = _.get(i, `time`);
        let arr = _.compact(_.uniq(_.flatten(keys.map(i => i.match(/\d+(.\d+)?/g)))));
        arr.map(index => {
          let obj = this.getOrderDate(i, index, true);
          obj.time = time;
          obj.day = '0';
          returnArr.push(obj);
        });
      });
      let r = returnArr.filter(f => f.date == _.last(this.dateList));
      let allday = '0';
      let res = r.find(f => {
        //TODO 根据开始时间不超过12点判断是 整天还是半天
        if (f.subname != '--') {
          let ts = f.time.split('-');
          let time = moment(`${f.date} ${ts[0]}`).format('X');
          let twl = moment(`${f.date} 12:00`).format('X');
          return twl <= time;
        }
      });
      if (res) allday = '1';
      returnArr = returnArr.map(i => {
        if (i.date == _.last(this.dateList)) i.allday = allday;
        else i.allday = '0';
        return i;
      });
      return returnArr;
    },
    //field的显示
    fieldDisplay(f, form) {
      if (f.model == 'teaname' || f.model == 'subid') {
        return form.type == '课程';
      } else return form.type == '活动';
    },
    //请求后整理数据方法
    aData(data) {
      let duplicate = JSON.parse(JSON.stringify(data));
      //按时间分组
      duplicate = _.flatten(_.toPairs(_.groupBy(data, 'time'))).filter(f => _.isArray(f));
      let r = duplicate.map(i => {
        //按日期排序
        let aa = i.sort((a, b) => moment(a.date).format('X') - moment(b.date).format('X'));
        //组合数据:{time,day1,id_day1,subid_day1}
        let object = { time: _.get(i[0], 'time') };
        aa.map(a => {
          let index = this.dateList.findIndex(f => f == a.date);
          if (index >= 0) {
            index = index + 1;
          }
          let obj = this.resetData(a, index);
          object = { ...object, ...obj };
        });
        return object;
      });
      r = this.getOrderForTime(r);
      return r;
    },
    //获取指定数据
    getOrderDate(data, index, needDate = false) {
      let obj = { index: index };
      if (_.get(data, `_id_day${index}`)) obj[`_id`] = _.get(data, `_id_day${index}`);
      obj[`subname`] = _.get(data, `subname_day${index}`, `--`);
      if (_.get(data, `subid_day${index}`)) obj[`subid`] = _.get(data, `subid_day${index}`);
      if (_.get(data, `teaid_day${index}`)) obj[`teaid`] = _.get(data, `teaid_day${index}`);
      if (_.get(data, `teaname_day${index}`)) obj[`teaname`] = _.get(data, `teaname_day${index}`);
      if (_.get(data, `reason${index}`)) obj[`reason`] = _.get(data, `reason${index}`);
      if (needDate) {
        //所有的数据都还原了,没必要要index了
        delete obj.index;
        obj.date = this.dateList[index - 1];
      }
      return obj;
    },
    //整理,匹配数据是哪天,该显示在哪
    resetData(data, index) {
      let obj = {};
      if (_.get(data, '_id')) obj[`_id_day${index}`] = _.get(data, '_id');
      obj[`subname_day${index}`] = _.get(data, 'subname', '--');
      if (_.get(data, 'subid')) obj[`subid_day${index}`] = _.get(data, 'subid');
      if (_.get(data, 'teaid')) obj[`teaid_day${index}`] = _.get(data, 'teaid');
      if (_.get(data, 'teaname')) obj[`teaname_day${index}`] = _.get(data, 'teaname');
      if (_.get(data, 'reason')) obj[`reason${index}`] = _.get(data, 'reason');
      return obj;
    },
    //修改:选择科目/教师后,将次科目的所有数据统一
    setSubTea() {
      let duplicate = _.cloneDeep(this.lessonList);
      let arr = this.returnData(duplicate);
      let teaList = arr.filter(f => f.teaid);
      let res = arr.map(i => {
        let r = teaList.find(f => f.subid == i.subid);
        if (r) {
          i.teaid = r.teaid;
          i.teaname = r.teaname;
        }
        return i;
      });
      res = this.aData(res);
      this.$set(this, 'lessonList', res);
    },
    //根据时间排序
    getOrderForTime(data) {
      let duplicate = JSON.parse(JSON.stringify(data));
      duplicate = duplicate.sort((a, b) => {
        let a_arr = a.time.split('-');
        let b_arr = b.time.split('-');
        let at = moment(`${moment().format('YYYY-MM-DD')} ${a_arr[0]}`).format('X');
        let bt = moment(`${moment().format('YYYY-MM-DD')} ${b_arr[0]}`).format('X');
        return at - bt;
      });
      return duplicate;
    },
    //整理出标头,根据日期排序
    getX(data) {
      let r = _.uniqBy(data, 'date').map(i => i.date);
      r = r.sort((a, b) => moment(a).format('X') - moment(b).format('X'));
      return r;
    },
    //获得时间列表
    getY(data) {
      let duplicate = JSON.parse(JSON.stringify(data));
      let arr = _.uniqBy(
        duplicate.map(i => _.pick(i, ['time'])),
        'time'
      );
      arr = this.getOrderForTime(arr);
      this.$set(
        this,
        `timeList`,
        arr.map(i => i.time)
      );
    },
    //课程列表
    async getOtherList() {
      let res = await this.getSubject();
      if (this.$checkRes(res)) this.$set(this, `subjectList`, res.data);
      // res = await this.getTeacher({ status: '4' });
      // if (this.$checkRes(res)) this.$set(this, `teacherList`, res.data);
    },
    // 教师列表
    async seachTeacher() {
      let arr = this.oLessonList.filter(item => item.teaid != null);
      let NewArr = _.uniqBy(arr, 'teaid');
      var ids = NewArr.map(item => item.teaid);
      let res = await this.lessonteafetch(ids);
      if (this.$checkRes(res)) this.$set(this, `teacherList`, res.data);
      res = await this.fetch({ model: 'notice', classid: this.classInfo.id, type: '4', planid: this.classInfo.planid, termid: this.classInfo.termid });
      if (this.$checkRes(res)) this.$set(this, `noticeList`, res.data);
    },
    //关闭抽屉
    toClose() {
      this.drawer = false;
      this.drawerTime = false;
      this.form = {};
    },
    //修改类型清除数据
    radioClearForm(data) {
      if (data == '活动') {
        delete this.form.subid;
        this.form.subname = '--';
      }
    },
    //打开选择教师的dialog
    async toChooseTeacher() {
      this.dialog = true;
      if (this.schoolList.length <= 0) {
        let res = await this.getSchool();
        if (this.$checkRes(res)) this.$set(this, `schoolList`, res.data);
      }
    },
    //选择教师
    selTea(data) {
      this.dialog = false;
      this.$set(this, `form`, { ...this.form, ...data });
    },
    //显示
    getProp(data, prop) {
      return _.get(data, prop);
    },
    // 手机号
    getPhone(data, prop) {
      let teacher = this.teacherList.find(f => f.id == _.get(data, prop));
      if (teacher) return teacher.phone;
    },
    //时间处理
    hsavetime(type) {
      let { index } = this.form;
      if (type == 'delete') this.lessonList.splice(index, 1);
      else {
        let data = _.cloneDeep(this.form);
        data.time = data.time.join('-');
        if (index != undefined && index >= 0) this.$set(this.lessonList, index, data);
        else this.lessonList.push(data);
      }
      this.toClose();
      //重新排序
      this.$set(this, `lessonList`, this.getOrderForTime(this.lessonList));
    },
    //判断是否修改教师,需要填写修改教师的原因
    needReason() {
      if (this.form.reason) return true;
      else {
        let { _id, teaid } = this.form;
        let r = this.oLessonList.find(f => f._id == _id);
        if (r) {
          if (_.get(r, 'teaid')) return _.isEqual(teaid, r.teaid);
          else return false;
        } else return false;
        // teaid
      }
    },
    resetForm() {
      let res = this.needReason();
      let fields = _.cloneDeep(this.fields);
      if (res) {
        fields.push({ label: '修改教师原因', model: 'reason', required: true });
      }
      return fields;
    },
    toConfirm() {
      this.$emit('toConfirm', _.get(this.lessonInfo, `_id`));
    },
    getNoticeResult(teaid) {
      let word = '';
      if (teaid) {
        const { notified } = this.noticeList;
        const r = notified.find(f => f.notifiedid == teaid);
        if (!r) word = '未绑定微信';
        else {
          word = r.status == '0' ? '未确认' : '已确认';
        }
      }
      return word;
    },
    wordColor(word) {
      let type = 'danger';
      if (word == '未确认') type = 'warning';
      if (word == '已确认') type = 'success';
      return type;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  watch: {
    classInfo: {
      handler(val) {
        let id = _.get(val, '_id');
        if (id) this.search();
      },
      immediate: true,
      deep: true,
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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