train-center/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" :rules="rules" label-width="60px" size="small" @submit.native.prevent>
              <el-form-item label="年份">
                {{ info.year }}
              </el-form-item>
              <el-form-item label="标题" prop="title" required>
                <el-input v-model="info.title"></el-input>
              </el-form-item>

              <el-collapse v-model="collapse" accordion>
                <el-collapse-item title="计划简表" name="1">
                  <data-table :fields="fields" :data="events" :opera="opera" @edit="toEdit" @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 @draft="selectDate" @eventClick="eventClick" :events="events"></calendar>
          </el-card>
        </el-col>
      </el-row>
    </detail-frame>
    <el-drawer :visible.sync="drawer" direction="rtl" title="安排计划" @close="toClose">
      <el-form :model="form" ref="form" :rules="formRules" label-width="80px" size="small" @submit.native.prevent style="padding: 15px;">
        <el-form-item label="开始时间" prop="start" required>
          <el-date-picker v-model="form.start" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end" required>
          <el-date-picker v-model="form.end" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="期数" prop="term" required> <el-input v-model="form.term"></el-input> </el-form-item>
        <el-form-item label="班级类型" prop="type" required>
          <el-radio-group v-model="form.type">
            <el-radio label="0">正常班级</el-radio>
            <el-radio label="1">特殊班级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="批次" prop="batch" v-if="form.type === '0'"> <el-input v-model="form.batch"></el-input> </el-form-item>
        <el-form-item label="班级数量" prop="class" v-if="form.type === '0'"> <el-input v-model="form.class"></el-input> </el-form-item>
        <el-form-item label="每班人数" prop="number" required> <el-input v-model="form.number"></el-input> </el-form-item>
        <el-form-item label="班级名称" prop="name" v-if="form.type === '1'"> <el-input v-model="form.name"></el-input> </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-color-picker v-model="form.color" :predefine="predefineColors" size="mini"></el-color-picker>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" align="middle" justify="space-around">
            <el-col :span="6">
              <el-button type="primary" @click="saveForm">保存</el-button>
            </el-col>
            <el-col :span="6">
              <el-button @click="resetForm">重置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-drawer>
  </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: { color: '#409EFF' },
    rules: {
      title: [{ required: true, message: '请输入标题' }],
    },
    formRules: {
      start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
      end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
      term: [{ required: true, message: '请输入期数' }],
      number: [{ required: true, message: '请输入每班人数' }],
      type: [{ required: true, message: '请选择班级类型' }],
    },
    drawer: false,
    events: [],
    predefineColors: ['#409EFF'],
    collapse: '',
    fields: [
      { label: '开始时间', prop: 'start' },
      { label: '结束时间', prop: 'end' },
      { label: '期数', prop: 'term' },
      { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
    ],
    opera: [
      {
        label: '编辑',
        icon: 'el-icon-edit',
        method: 'edit',
      },
      {
        label: '删除',
        icon: 'el-icon-delete',
        method: 'delete',
        confirm: true,
      },
    ],
    heights: 250,
    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: 'p1580869422724',
            },
          ],
          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: 'p1580869422726',
            },
            {
              start: '2020-01-01',
              end: '2020-01-09',
              type: '1',
              number: '56',
              color: '#409EFF',
              name: '第二期特殊2班',
              title: '第二期特殊2班',
              id: 'p1580869422725',
            },
          ],
          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 });
    },
    //拖拽选择事件
    selectDate(object) {
      this.$set(this.form, `start`, JSON.parse(JSON.stringify(object.startStr)));
      this.$set(this.form, `end`, JSON.parse(JSON.stringify(object.endStr)));
      this.drawer = true;
    },
    //日历事件点击事件
    eventClick({ event }) {
      let arr = this.events.filter(fil => fil.id == event.id);
      if (arr.length > 0) this.form = arr[0];
      else {
        console.warn(`无对应id事件`);
        return;
      }
      this.drawer = true;
    },
    //列表编辑事件
    toEdit({ data, index }) {
      this.$set(this, `form`, JSON.parse(JSON.stringify(data)));
      this.drawer = true;
    },
    //列表删除事件
    toDelete({ data, index }) {
      this.events.splice(index, 1);
    },
    //保存计划事件
    savePlan() {
      //全年计划内容
      let data = JSON.parse(JSON.stringify(this.info));
      data.year = this.year;
      let termnum = [];
      //1,获取所有期数
      //2,按期数将events内数据分组
      termnum = _.uniq(this.events.map(item => item.term)).map(i => {
        let object = { term: i };
        object.batchnum = this.events.filter(fil => fil.term === i).map(b => _.pickBy(b, (val, key) => key !== 'term'));
        object.classnum = object.batchnum.reduce((pre, cur) => {
          if (cur.type === '0') return pre + parseInt(cur.class);
          else return pre + 1;
        }, 0);
        return object;
      });
      data.termnum = termnum;
      //TODO 连接接口
    },
    //保存表单函数
    saveForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.setEvent();
          this.resetForm();
        } else {
          console.warn('form validate error!!!');
        }
      });
    },
    //重置表单函数
    resetForm() {
      this.$refs.form.resetFields();
      this.setHeight();
    },
    //添加/修改函数
    setEvent() {
      //TODO 需要根据班级类型把数据分开
      let data = JSON.parse(JSON.stringify(this.form));
      let { start, end, term, type, number, color, id } = data;
      let object = {};
      if (data.type === '0') {
        // 正常班级
        let { batch, class: classes } = data;
        object = { start, end, term, type, number, color, batch, class: classes };
        object.title = `第${JSON.parse(JSON.stringify(term))}期第${JSON.parse(JSON.stringify(batch))}批次`;
      } else {
        let { name } = data;
        object = { start, end, term, type, number, color, name, title: name };
      }
      if (!id) {
        object.id = `p${new Date().getTime()}`;
        this.events.push(object);
      } else {
        object.id = id;
        this.$set(
          this.events,
          _.findIndex(this.events, item => item.id == object.id),
          object
        );
        this.drawer = false;
      }
      if (_.findIndex(this.predefineColors, item => item == data.color) < 0) this.predefineColors.push(data.color);
    },
    //关闭抽屉函数
    toClose() {
      this.drawer = false;
      this.resetForm();
    },
    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>