日历组件

components/calendar.md

@@ -0,0 +1,12 @@
+# 二次封装fullCalendar组件
+##### props:
+|参数|类型|默认值|是否必填|说明|
+|:-:|:-:|:-:|:-:|:-:|
+|year|String|new Date().getFullYear()|否|日历的当前年|
+|events|Array|-|是|日历上的事件|
+
+##### events:
+|事件名|说明|参数|参数说明|
+|:-:|:-:|:-:|:-:|
+|draft|拖拽事件|object|包含start=>开始时间 Date类型;end=>结束时间 Date类型;startStr=>开始时间字符串形式(年-月-日 0补位);end=>结束时间字符串;allDay:是否全日 Boolean|
+|eventClick|事件点击事件|object|jsview=>回调函数(暂时用不到);event:()=>事件|

components/calendar.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="demo-app">
+    <FullCalendar
+      ref="fullCalendar"
+      locale="zh-cn"
+      firstDay="1"
+      :defaultDate="defaultDate"
+      weekNumberCalculation="ISO"
+      :header="{
+        left: 'prev',
+        center: 'title',
+        right: 'today ,next',
+      }"
+      :button-text="{
+        today: '今天',
+      }"
+      :valid-range="{
+        start: rangeStart,
+        end: rangeEnd,
+      }"
+      :slot-event-overlap="false"
+      defaultView="dayGridMonth"
+      :plugins="calendarPlugins"
+      :selectable="true"
+      :events="events"
+      @select="drawSelect"
+      :eventOrder="`start`"
+      @eventClick="clickEvent"
+    />
+    <el-dialog :visible.sync="dialog" :title="addTitle" center @close="toClose">
+      <el-form :model="form" label-width="80px" size="mini">
+        <el-form-item label="时间"> {{ form.start }} 至 {{ form.end }} </el-form-item>
+        <el-form-item label="期数">
+          <el-input v-model="form.qishu"></el-input>
+        </el-form-item>
+        <el-form-item label="批次">
+          <el-input v-model="form.pici"></el-input>
+        </el-form-item>
+        <el-form-item label="是否全天">
+          <el-checkbox v-model="form.isAllDay"></el-checkbox>
+        </el-form-item>
+        <el-form-item label="上/下午" v-if="!form.isAllDay">
+          <el-radio-group v-model="form.isMorning">
+            <el-radio label="0">上午</el-radio>
+            <el-radio label="1">下午</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="toSave">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import _ from 'lodash';
+export default {
+  props: {
+    year: { type: String, default: `${new Date().getFullYear()}` }, //当前日历的年份
+    events: { type: Array, default: () => [] },
+  },
+  components: {
+    FullCalendar, // make the <FullCalendar> tag available
+  },
+  data: function() {
+    return {
+      form: { isAllDay: true },
+      dialog: false,
+      calendarPlugins: [
+        // plugins must be defined in the JS
+        dayGridPlugin,
+        // timeGridPlugin,
+        interactionPlugin, // needed for dateClick
+      ],
+      // calendarEvents: [],
+      planList: [],
+      addTitle: '',
+    };
+  },
+  methods: {
+    handleDateClick(arg) {
+      console.log(arg);
+      this.dialog = true;
+      // let calendarApi = this.$refs.fullCalendar.getApi();
+    },
+    drawSelect(arg) {
+      // this.dialog = true;
+      // let { startStr, endStr } = arg;
+      // this.form.start = startStr;
+      // this.form.end = endStr;
+      // this.addTitle = '新增计划安排';
+      this.$emit('draft', arg);
+    },
+    toSave() {
+      //处理数据
+      let data = {
+        title: `第${JSON.parse(JSON.stringify(this.form.qishu))}期第${JSON.parse(JSON.stringify(this.form.pici))}批次`,
+        start: JSON.parse(JSON.stringify(this.form.start)),
+        end: JSON.parse(JSON.stringify(this.form.end)),
+        qishu: parseInt(JSON.parse(JSON.stringify(this.form.qishu))),
+        pici: parseInt(JSON.parse(JSON.stringify(this.form.pici))),
+        isAllDay: JSON.parse(JSON.stringify(this.form.isAllDay)),
+      };
+      if (this.form.isMorning) {
+        data.isMorning = JSON.parse(JSON.stringify(this.form.isMorning));
+        JSON.parse(JSON.stringify(this.form.isMorning)) === '0' ? (data.title = `上午 ${data.title}`) : (data.title = `下午 ${data.title}`);
+      }
+      //添加/修改
+      if (!this.form.id) {
+        data.id = new Date().getTime();
+        this.calendarEvents.push(data);
+      } else {
+        data.id = JSON.parse(JSON.stringify(this.form.id));
+        this.$set(
+          this.calendarEvents,
+          _.findIndex(this.calendarEvents, item => item.id == data.id),
+          data
+        );
+      }
+      //先排批次,再排期数=>期数优先级最高,其次是批次
+      //优先级高的后排,低的先排
+      let mid = _.sortBy(this.calendarEvents, item => item.pici);
+      mid = _.sortBy(this.calendarEvents, item => item.qishu);
+      this.$set(this, `calendarEvents`, mid);
+      this.toClose();
+    },
+    toClose() {
+      this.form = { isAllDay: true };
+      this.dialog = false;
+    },
+    clickEvent(arg) {
+      // let event = arg.event;
+      // let arr = this.calendarEvents.filter(fil => fil.id == event.id);
+      // if (arr.length > 0) this.form = arr[0];
+      // else {
+      //   console.warn(`无对应id事件`);
+      //   return;
+      // }
+      // this.dialog = true;
+      // this.addTitle = `修改计划安排`;
+      this.$emit('eventClick', arg);
+    },
+  },
+  computed: {
+    defaultDate() {
+      return `${this.year}-01-01`;
+    },
+    rangeStart() {
+      return `${this.year}-01-01`;
+    },
+    rangeEnd() {
+      return `${this.year}-12-31`;
+    },
+  },
+};
+</script>
+<style lang="less">
+@import '~@fullcalendar/core/main.css';
+@import '~@fullcalendar/daygrid/main.css';
+</style>

components/data-table.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="data-table">
-    <el-table :data="data" border stripe size="small">
+    <el-table :data="data" border stripe size="small" :max-height="height ? height : ''">
       <template v-for="(item, index) in fields">
         <el-table-column :key="index" align="center" :label="item.label" :prop="item.prop" :formatter="toFormatter"></el-table-column>
       </template>
@@ -36,6 +36,7 @@ export default {
     data: { type: Array, required: true },
     opera: { type: Array, default: () => [] },
     toFormat: null,
+    height: null,
   },
   components: {},
   data: () => ({}),

config/menu-config.js

@@ -51,6 +51,11 @@ export const devMenu = [
       },
     ],
   },
+  {
+    path: '/plan/index',
+    name: '计划管理',
+    module: 'center',
+  },
   {
     path: '/teacher/index',
     name: '教师管理',