学校根据全年计划上报时间

package.json

@@ -8,6 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fullcalendar/core": "^4.3.1",
+    "@fullcalendar/daygrid": "^4.3.0",
+    "@fullcalendar/interaction": "^4.3.0",
+    "@fullcalendar/vue": "^4.3.1",
     "axios": "^0.19.2",
     "core-js": "^3.4.4",
     "element-ui": "^2.13.0",

src/router/index.js

@@ -10,13 +10,19 @@ const routes = [
     component: () => import('@/views/index.vue'),
     children: [
       {
-        path: '/plan/list',
+        path: '/plan/index',
         name: 'plan_list',
         meta: { title: '计划', sub: '管理' },
         component: () => import('@/views/plan/index.vue'),
       },
       {
-        path: '/teacher/list',
+        path: '/plan/detail',
+        name: 'plan_detail',
+        meta: { title: '计划', sub: '详情' },
+        component: () => import('@/views/plan/detail.vue'),
+      },
+      {
+        path: '/teacher/index',
         name: 'teacher_list',
         meta: { title: '教师', sub: '管理' },
         component: () => import('@/views/teacher/index.vue'),
@@ -28,7 +34,7 @@ const routes = [
         component: () => import('@/views/teacher/detail.vue'),
       },
       {
-        path: '/leave/list',
+        path: '/leave/index',
         name: 'leave_list',
         meta: { title: '请假', sub: '管理' },
         component: () => import('@/views/leave/index.vue'),

src/views/plan/detail.vue

@@ -0,0 +1,286 @@
+<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 } = object;
+      //查重,先查期数一致,再查类型
+      //期数没有,则加入;期数有,则看类型,如果是普通班级,则不加入;如果是特殊班级,则查该期是否有特殊班级的id,没有就加入
+      let data = { term, type, name };
+      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 data = JSON.parse(JSON.stringify(this.selected));
+      //TODO整理数据
+      //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>

src/views/plan/index.vue

@@ -62,7 +62,7 @@ export default {
     },
     toEdit({ data }) {
       //TODO 该把详情做成什么样的比较好,是和大日历在一起选择还是其他形式
-      // this.$router.push({ path: '/plan/detail', query: { id: data.id } });
+      this.$router.push({ path: '/plan/detail', query: { id: data.id } });
     },
 
     async toUpdate({ data }) {