train-school/src/views/plan/detail.vue

<template>
  <div id="detail">
    <detail-frame :title="mainTitle" returns="/plan/index">
      <el-row :gutter="10" type="flex">
        <el-col :span="12">
          <el-card header="全年计划信息">
            <el-form :model="info" label-width="60px" size="small" @submit.native.prevent>
              <el-form-item label="年份">
                {{ info.year }}
              </el-form-item>
              <el-form-item label="标题" prop="title">
                {{ info.title }}
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="info.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
              </el-form-item>

              <el-collapse v-model="collapse" accordion>
                <el-collapse-item title="上报可行时间列表" name="1">
                  <data-table :fields="fields" :data="selected" :opera="opera" @delete="toDelete" :height="heights"></data-table>
                </el-collapse-item>
              </el-collapse>
              <el-form-item>
                <el-row type="flex" align="middle" justify="space-around" style="margin-top:20px">
                  <el-col :span="6">
                    <el-button type="primary" @click="savePlan">上报选择时间</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="16" :style="`width:${widths}px`">
          <el-card ref="card">
            <calendar :useDraft="false" @eventClick="eventClick" :events="events"></calendar>
          </el-card>
        </el-col>
      </el-row>
    </detail-frame>
  </div>
</template>

<script>
import detailFrame from '@frame/layout/admin/detail-frame';
import calendar from '@frame/components/calendar';
import dataTable from '@frame/components/data-table';
import _ from 'lodash';
import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo: { title: '计划详情' },
  name: 'detail',
  props: {},
  components: { detailFrame, calendar, dataTable },
  data: () => ({
    info: {
      year: '',
      termnum: {
        batchnum: [],
      },
    },

    form: {},
    events: [],
    collapse: '1',
    fields: [
      { label: '期数', prop: 'term' },
      { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
    ],
    opera: [
      {
        label: '删除',
        icon: 'el-icon-delete',
        method: 'delete',
        confirm: true,
      },
    ],
    heights: 250,
    selected: [],
    axiosData: {
      termnum: [
        {
          term: '1',
          batchnum: [
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '0',
              number: '56',
              color: '#0BEB95',
              batch: '1',
              class: '1',
              title: '第1期第1批次',
              id: 'p1580869239498',
            },
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '1',
              number: '56',
              color: '#409EFF',
              name: '第一期特殊1班',
              title: '第一期特殊1班',
              id: 'p1580869422722',
            },
          ],
          classnum: 2,
        },
        {
          term: '2',
          batchnum: [
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '0',
              number: '56',
              color: '#0BEB95',
              batch: '1',
              class: '1',
              title: '第2期第1批次',
              id: 'p1580869239490',
            },
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '1',
              number: '56',
              color: '#409EFF',
              name: '第二期特殊1班',
              title: '第二期特殊1班',
              id: 'p1580869422723',
            },
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '1',
              number: '56',
              color: '#409EFF',
              name: '第二期特殊2班',
              title: '第二期特殊2班',
              id: 'p1580869422726',
            },
          ],
          classnum: 3,
        },
        {
          term: '3',
          batchnum: [
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '0',
              number: '56',
              color: '#ff4444',
              batch: '1',
              class: '1',
              title: '第3期第1批次',
              id: 'p1580869239499',
            },
          ],
          classnum: 1,
        },
      ],
      title: 'test',
      year: 2020,
    },
  }),
  created() {
    if (this.isNew) this.$set(this.info, `year`, new Date().getFullYear());
  },
  mounted() {},
  methods: {
    // ...mapClass(['fetch', 'create', 'update']),
    //查询计划
    async search() {
      // const res = await this.fetch(this.id);
      // if (this.$checkRes(res)) this.$set(this, `info`, res.data);
      // this.loading = false;
      let events = [];
      events = _.flatten(
        this.axiosData.termnum.map(item => {
          item.batchnum.map(i => {
            i.term = item.term;
            return i;
          });
          return item.batchnum;
        })
      );
      let { termnum, year, title } = this.axiosData;
      this.$set(this, `events`, events);
      this.$set(this, `info`, { title, year });
    },
    //日历事件点击事件
    eventClick({ event }) {
      let arr = this.events.filter(fil => fil.id == event.id);
      let object = {};
      if (arr.length > 0) object = arr[0];
      else {
        console.warn(`无对应id事件`);
        return;
      }
      let { term, type, name, termid, number } = object;
      //查重,先查期数一致,再查类型
      //期数没有,则加入;期数有,则看类型,如果是普通班级,则不加入;如果是特殊班级,则查该期是否有特殊班级的id,没有就加入
      let data = object;
      let re = () => {
        this.$notify({
          title: '重复添加该期',
        });
      };
      let push = data => {
        this.selected.push(data);
        this.$notify({
          title: '已添加',
        });
      };
      if (_.findIndex(this.selected, i => i.term === term) >= 0) {
        //重复加入
        if (type === '0') re();
        else {
          // TODO此处需要根据实际有没有id可以区分开每期特殊班和特殊班,目前用name来区分
          let res = _.findIndex(this.selected, i => {
            if (i.name) return i.name === name;
            else return false;
          });
          //特殊班重复加入
          if (res > 0) re();
          else push(data); //加入
        }
      } else push(data);
    },
    //列表删除事件
    toDelete({ data, index }) {
      this.selected.splice(index, 1);
    },
    //保存计划事件
    savePlan() {
      // 获取已选择的时间
      let arr = JSON.parse(JSON.stringify(this.selected));
      //TODO整理数据
      let data = { ...this.info };
      arr = arr.map(i => {
        return { termnum: i.termnum, termid: i.id, number: '未计算,使用实际数据计算' };
      });
      data.term = arr;
      //最后加入schoolId
      //TODO 连接接口
    },
    setHeight() {
      let heights = this.$refs.card.$el.clientHeight * 0.63;
      this.$set(this, `heights`, heights);
    },
  },
  watch: {
    isNew: {
      immediate: true,
      handler(val) {
        if (val) this.loading = false;
        else this.search();
      },
    },
  },
  computed: {
    widths() {
      let width = (document.body.clientWidth - 200) * 0.5;
      return width > 400 ? width : 400;
    },
    id() {
      return this.$route.query.id;
    },
    isNew() {
      return this.$route.query.id ? true : false; //false : true;
    },
    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>
/deep/.el-divider--horizontal {
  margin: 5px 0;
}
</style>