update

src/views/train-plan/parts/lesson-table.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="lesson-table">
+    <data-form :data="form" :fields="fields" :rules="{}" @save="handleSave" :needSave="false" :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'">
+          1
+          <!-- <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 == 'name'">
+          <el-input v-model="form.name" :readonly="true" placeholder="点击选择教师" @click.native="toChooseTeacher"></el-input>
+        </template>
+      </template>
+    </data-form>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import dataForm from '@frame/components/form';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'lesson-table',
+  props: {
+    data: { type: Object, default: () => {} },
+  },
+  components: { dataForm },
+  data: function() {
+    var that = this;
+    return {
+      form: _.cloneDeep(that.data),
+      fields: [
+        { label: '日期', model: 'date', 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: 'name', custom: true, display: (fields, form) => that.fieldDisplay(fields, form) },
+      ],
+      dayType: [{ label: '活动' }, { label: '课程' }],
+      actList: [
+        { label: '--' },
+        { label: '报道+开班仪式' },
+        { label: '午餐+休息' },
+        { label: '晚餐' },
+        { label: '团队组建' },
+        { label: '拓展交流' },
+        { label: '课程作业小组展示' },
+        { label: '课程作业' },
+        { label: '礼仪课小组面试' },
+        { label: '结业仪式' },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    handleSave({ data }) {
+      console.log(data);
+    },
+    //field的显示
+    fieldDisplay(f, form) {
+      if (f.model == 'name' || f.model == 'subid') {
+        return form.type == '课程';
+      } else return form.type == '活动';
+    },
+    //修改类型清除数据
+    radioClearForm(data) {
+      if (data == '活动') {
+        delete this.form.subid;
+        this.form.subname = '--';
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/train-plan/parts/term-lesson-form.vue

@@ -0,0 +1,83 @@
+<template>
+  <div id="term-lesson-form">
+    <el-tabs v-model="active" style="padding:10px">
+      <el-tab-pane v-for="(i, index) in form" :key="index" :label="`${i.class_num}班`" :name="`${i.class_num}`">
+        <lt :ref="`lt${index}`" :data="i" @save="toSave"></lt>
+      </el-tab-pane>
+      <el-row type="flex" align="middle" justify="center">
+        <el-col :span="2">
+          <el-button type="primary" size="mini" @click="getSaveData">保存</el-button>
+        </el-col>
+      </el-row>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import lt from './lesson-table';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'term-lesson-form',
+  props: {
+    data: { type: Object, default: () => {} },
+  },
+  components: { lt },
+  data: function() {
+    return {
+      active: '1',
+      form: [],
+    };
+  },
+  created() {},
+  methods: {
+    setData(val) {
+      let { batch, date, is_last, subname, subid, type: dataType, ...others } = val;
+      let obj = { batch, date, is_last, subname, subid, dataType };
+      obj.type = subid ? '课程' : '活动';
+      let keys = Object.keys(others);
+      let indexs = _.uniq(keys.map(key => key.match(/\d+(.\d+)?/g)[0]));
+      let arr = indexs.map(i => {
+        let gks = keys.filter(f => f.includes(i));
+        gks = gks.map(gk => {
+          let o = [];
+          o.push(gk.split('_')[0]);
+          o.push(others[gk]);
+          return o;
+        });
+        let res = _.fromPairs(gks);
+        res = { ...res, ...obj, class_num: i };
+        return res;
+      });
+      this.$set(this, `form`, arr);
+    },
+    toSave(data) {
+      console.log('in function:toSave');
+      console.log(data);
+    },
+    getSaveData() {
+      console.log('in function:getSaveData to get data witch need to submit');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.setData(val);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/train-plan/parts/term-lesson-table.vue

@@ -1,6 +1,15 @@
 <template>
   <div id="term-lesson-table">
-    <el-table :data="list" size="mini" tooltip-effect="dark" border stripe :cell-style="{ height: '50px' }" :span-method="data => spanTable(data, 't1')">
+    <el-table
+      :data="list"
+      size="mini"
+      @cell-click="cellClick"
+      tooltip-effect="dark"
+      border
+      stripe
+      :cell-style="{ height: '50px' }"
+      :span-method="data => spanTable(data, 't1')"
+    >
       <el-table-column align="center" label="日期" prop="date" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column align="center" label="星期" :show-overflow-tooltip="true">
         <template v-slot="{ row, $index }">
@@ -10,8 +19,8 @@
         </template>
       </el-table-column>
       <el-table-column align="center" label="课程内容" prop="subname" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column align="center" label="1班" prop="teaname_1" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column align="center" label="2班" prop="teaname_2" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column align="center" label="1班" prop="name_1" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column align="center" label="2班" prop="name_2" :show-overflow-tooltip="true"></el-table-column>
     </el-table>
   </div>
 </template>
@@ -56,10 +65,29 @@ export default {
       }
       return res;
     },
+    cellClick(row, column) {
+      let keys = Object.keys(row);
+      if (keys.length <= 0) return;
+      let prop = _.get(column, 'property');
+      let type = _.get(row, `type`);
+      if ((prop && prop.includes('name')) || type == 'allday') {
+        let obj = { ...row, batch: this.batch };
+        if (type == 'lesson') {
+          let arr = this.data;
+          let fr = arr.filter(f => moment(f.date).isValid() && Object.keys(f).length > 0);
+          obj.is_last = _.isEqualWith(_.last(fr), row, (ob, ot) => ob.date == ot.date);
+          this.$emit('lesson', obj);
+        } else this.$emit('other', obj);
+      } else {
+        this.$message.warning('此项不允许更改');
+      }
+      // console.log(row);
+      // console.log(column);
+    },
   },
   filters: {
     getWeekDay(date) {
-      if (date && moment.isMoment(moment(date)) && moment(date).isValid()) return moment(date).format('dddd');
+      if (date && moment(date).isValid() && moment.isMoment(moment(date))) return moment(date).format('dddd');
     },
   },
   computed: {

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

@@ -1,18 +1,16 @@
 <template>
   <div id="term-lesson">
     <detail-frame :title="pageTitle" returns="/train/plan/lesson">
-      <el-row type="flex">
-        <el-col :span="8" v-if="t1.length > 0">
-          <lesson-table :data="t1" batch="1"></lesson-table>
-        </el-col>
-        <el-col :span="8">
-          <lesson-table :data="t2" batch="2"></lesson-table>
-        </el-col>
-        <el-col :span="8">
-          <lesson-table :data="t3" batch="3"></lesson-table>
+      <el-row type="flex" v-loading="loading" style="min-height:500px">
+        <el-col :span="8" v-for="(i, index) in list" :key="index">
+          <lesson-table :data="i" :batch="`${index + 1}`" @lesson="toLesson" @other="toOther"></lesson-table>
         </el-col>
       </el-row>
     </detail-frame>
+    <el-drawer title="课程安排" :visible.sync="lDrawer">
+      <lesson-form :data="form"></lesson-form>
+    </el-drawer>
+    <el-drawer title="其他安排" :visible.sync="oDrawer"></el-drawer>
   </div>
 </template>
 
@@ -22,6 +20,7 @@ import axios from 'axios';
 const moment = require('moment');
 moment.locale('zh-cn');
 import lessonTable from './parts/term-lesson-table';
+import lessonForm from './parts/term-lesson-form';
 import detailFrame from '@frame/layout/admin/detail-frame';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: lesson } = createNamespacedHelpers('lesson');
@@ -37,15 +36,17 @@ const { mapActions: director } = createNamespacedHelpers('director');
 export default {
   name: 'term-lesson',
   props: {},
-  components: { detailFrame, lessonTable },
+  components: { detailFrame, lessonTable, lessonForm },
   data: function() {
     return {
+      loading: true,
+      lDrawer: false,
+      oDrawer: false,
+      form: {},
       options: {},
       list: [],
-      t1: [],
-      t2: [],
-      t3: [],
       classList: [],
+      lessonList: [],
 
       locationList: [],
       lyTeacherList: [],
@@ -67,12 +68,16 @@ export default {
     ...mapDept({ getDept: 'query' }),
     ...teaplan(['findTeacher']),
     async search() {
+      this.loading = true;
       let termid = _.get(this.defaultOption, `termid`);
       if (!termid) return;
       let lessonList = [];
       let classList = [];
       let lessons = await this.getLesson({ termid });
-      if (this.$checkRes(lessons)) lessonList = lessons.data;
+      if (this.$checkRes(lessons)) {
+        lessonList = lessons.data;
+        this.$set(this, `lessonList`, lessonList);
+      }
       let classes = await this.getClass({ termid });
       if (this.$checkRes(classes)) {
         classList = classes.data;
@@ -97,31 +102,28 @@ export default {
           )
         )
       ).filter(f => _.isArray(f));
-      arr.map((i, index) => {
+      arr = arr.map((i, index) => {
         // 先转换lessons,此表的情况是:小批次下的班级都是一样的课程,只有教师,教室不一样
         let a = this.changeLesson(i);
-        let ht = this.setTeacher(a, 'headteacher');
-        let lyt = this.setTeacher(a, 'lyteacher');
-        let js = this.setTeacher(a, 'jslocation');
+        let last = this.setAllday(_.last(a));
+        let ht = this.setProp(a, 'headteacher');
+        let lyt = this.setProp(a, 'lyteacher');
+        let js = this.setProp(a, 'jslocation');
         for (let ind = 0; ind < index; ind++) {
           a.unshift({});
-          // console.log(`ind`);
-          // console.log(ind);
-          // console.log(`index`);
-          // console.log(index);
-          // const element = array[index];
         }
         //找到该班额班主任和礼仪课教师
         a.push(ht);
         a.push(lyt);
         a.push(js);
-        for (let ind = 2; ind >= index; ind--) {
+        for (let ind = 2; ind > index; ind--) {
           a.push({});
         }
-        this.$set(this, `t${index + 1}`, a);
+        a.push(last);
+        return a;
       });
-      // this.$set(this, `list`, arr);
-      // this.getX();
+      this.$set(this, `list`, arr);
+      this.loading = false;
     },
     //课程数据=>页面数据形式
     changeLesson(array) {
@@ -151,8 +153,8 @@ export default {
           if (r) {
             let { subname, subid, teaid, teaname, _id: lessonid, date } = r;
             obj = { subname, subid };
-            obj[`teaid_${index + 1}`] = teaid;
-            obj[`teaname_${index + 1}`] = teaname;
+            obj[`id_${index + 1}`] = teaid;
+            obj[`name_${index + 1}`] = teaname;
             obj[`lessonid_${index + 1}`] = lessonid;
             obj[`date`] = date;
           } else {
@@ -163,11 +165,10 @@ export default {
           }
           obj.batch = i.batch;
           obj[`classid_${index + 1}`] = i._id;
+          obj['type'] = 'lesson';
           return obj;
         });
         return t;
-        // console.log(t);
-        //按照例子处理数据
       });
       let l = _.get(_.head(res), 'length');
       let arr = [];
@@ -181,7 +182,7 @@ export default {
       return arr;
     },
     //班主任/礼仪课老师=>页面数据形式
-    setTeacher(data, type) {
+    setProp(data, type) {
       let head = _.head(data);
       let res = { type };
       res.date = type == 'headteacher' ? '班主任' : type == 'lyteacher' ? '礼仪课教师' : '教室';
@@ -191,13 +192,49 @@ export default {
         let i = key.match(/\d+(.\d+)?/g)[0];
         let r = this.classList.find(f => f._id == cla_id);
         if (r) {
-          res[`teaid_${i}`] = _.get(r, `${type}id`);
-          res[`teaname_${i}`] = _.get(r, `${type}name`);
+          res[`id_${i}`] = _.get(r, `${type}id`);
+          res[`name_${i}`] = _.get(r, `${type}name`);
           res[key] = cla_id;
         }
       }
       return res;
     },
+    setAllday(data) {
+      let ckeys = Object.keys(data).filter(f => f.includes('classid'));
+      let lkeys = Object.keys(data).filter(f => f.includes('lessonid'));
+      let arr = [];
+      for (let i = 0; i < ckeys.length; i++) {
+        if (data[`${ckeys[i]}`] && data[`${lkeys[i]}`]) {
+          let cla = this.classList.find(f => f._id == data[ckeys[i]]);
+          if (cla) {
+            let { lessons } = cla;
+            let r = lessons.find(f => f._id == data[lkeys[i]]);
+            if (r) {
+              let o = {};
+              o[ckeys[i]] = data[ckeys[i]];
+              o[`day`] = _.get(r, 'day');
+              arr.push(o);
+            }
+          }
+        }
+      }
+      let obj = { type: 'allday' };
+      let r = arr.every(f => f.day == '0');
+      if (r) obj.date = '全天';
+      else {
+        r = arr.every(f => f.day == '1');
+        if (r) obj.date = '半天';
+        else {
+          let str = '';
+          arr.map((i, index) => {
+            str += i.day == '0' ? '全天' : '半天';
+            if (index != arr.length - 1) str += '/';
+          });
+          obj.date = str;
+        }
+      }
+      return obj;
+    },
     async getSettingLists() {
       let res;
       let arr = [];
@@ -264,25 +301,16 @@ export default {
       //   arr.push(this.modelFetch({ model: 'director', id: _.get(obj, 'jslocationid') }));
       // }
     },
-    //x轴:日期,查询出所有班级的日期为X轴
-    getX() {
-      let duplicate = _.cloneDeep(this.list);
-      let arr = _.flatten(_.toPairs(_.groupBy(duplicate, `batch`))).filter(f => _.isArray(f));
-      let { startdate: start } = _.head(_.head(arr));
-      let { enddate: end } = _.last(_.last(arr));
-      let day = moment(start)
-        .from(moment(end))
-        .match(/\d+(.\d+)?/g)[0];
-      let res = [start];
-      for (let i = 1; i < day; i++) {
-        res.push(
-          moment(start)
-            .add(i, 'd')
-            .format('YYYY-MM-DD')
-        );
-      }
-      res.push(end);
-      this.$set(this, `x`, res);
+    toLesson(data) {
+      console.log(`in lesson`);
+      this.$set(this, `form`, data);
+      this.lDrawer = true;
+    },
+    toOther(data) {
+      console.log(`in other`);
+      console.log(data);
+      this.$set(this, `form`, data);
+      this.oDrawer = true;
     },
   },
   watch: {