feat(Calendar): 新增日历插件

package.json

@@ -13,6 +13,11 @@
     "cz": "npm run log && git add . && git cz"
   },
   "dependencies": {
+    "@fullcalendar/core": "^4.4.0",
+    "@fullcalendar/daygrid": "^4.4.0",
+    "@fullcalendar/interaction": "^4.4.0",
+    "@fullcalendar/resource-timeline": "^4.4.0",
+    "@fullcalendar/vue": "^4.4.0",
     "axios": "0.19.0",
     "chart.js": "^2.8.0",
     "clipboard": "^2.0.4",

src/components/Calendar/Calendar.vue

@@ -0,0 +1,87 @@
+<!--
+ * @file: 日历插件
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年02月27 10:51:24
+ -->
+<!-- 组件说明 -->
+<template>
+  <div>
+    <FullCalendar locale="zh-cn"
+                  style="background:white"
+                  ref="fullCalendar"
+                  @eventClick="handleEventClick"
+                  @dateClick="handleDateClick"
+                  :events="events"
+                  selectable
+                  :header="{
+        left: 'prev,next today',
+        center: 'title',
+        right: 'dayGridMonth,dayGridWeek,dayGridDay'
+      }"
+                  :buttonText="buttonText"
+                  defaultView="dayGridMonth"
+                  :plugins="calendarPlugins" />
+    <GenerateFormDialog ref="dialog"
+                        @afterSave="refreshCalendar"
+                        tableName="workcalendar">
+
+    </GenerateFormDialog>
+  </div>
+
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import GenerateFormDialog from '@/components/BaseDialog/GenerateFormDialog';
+
+export default {
+  name: 'Calendar',
+  components: {
+    FullCalendar,
+    GenerateFormDialog,
+  },
+  data() {
+    return {
+      calendarPlugins: [dayGridPlugin, interactionPlugin],
+      buttonText: {
+        today: '今天',
+        month: '月',
+        week: '周',
+        day: '天',
+      },
+      events: [],
+    };
+  },
+  created() {
+    this.initEvents();
+  },
+  computed: {},
+  methods: {
+    initEvents() {
+      // 初始化日历event
+    },
+    handleDateClick(arg) {
+      this.$refs.dialog.showDialog({}, 0, {
+        start: arg.dateStr,
+        userid: this.$store.getters.userid,
+      });
+    },
+    handleEventClick(info) {
+      this.$refs.dialog.showDialog(
+        {},
+        1,
+        this.events.find(item => item.id === info.event.id),
+      );
+    },
+    async refreshCalendar() {
+      await this.initEvents();
+    },
+  },
+};
+</script>
+
+<style lang='scss' scoped>
+</style>