增加日历组件

mock/calendar.ts

@@ -0,0 +1,30 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+export default [
+  {
+    url: '/calendar/api/v1/event',
+    method: 'get',
+    response: () => {
+      return [
+        {
+          date: '2023-01-09',
+          title: '春游',
+          eventInfo: '春节不觉晓，处处闻啼鸟，夜来风雨声，花落知多少',
+        },
+        {
+          date: '2023-01-30',
+          title: '月底发工资',
+          eventInfo: '发了工资少一半，还了信用卡再少一半，试问如何攒下钱，只有两个字：做梦',
+        }
+      ]
+    }
+  },
+  {
+    url: '/calendar/api/v1/event',
+    method: 'put',
+    response: () => {
+      return {
+      }
+    }
+  },
+] as MockMethod[]

mock/onenote.ts

@@ -0,0 +1,28 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+export default [
+  {
+    url: '/onenote/api/v1/one_note',
+    method: 'get',
+    response: () => {
+      return [
+        {
+          section_id: 'x111',
+          section_name: 'A',
+          page_list: [
+            {
+              page_id: 'y111',
+              section_id: 'x111',
+              page_name: 'B',
+            },
+            {
+              page_id: 'y222',
+              section_id: 'x111',
+              page_name: 'C',
+            },
+          ]
+        }
+      ]
+    }
+  }
+] as MockMethod[]

src/api/calendar.ts

@@ -0,0 +1,21 @@
+import { service } from '../utils/request'
+
+const put_event = (data: Object) => {
+  return service({
+    url: '/calendar/api/v1/event',
+    method: 'PUT',
+    data: data
+  })
+}
+
+const get_event = () => {
+  return service({
+    url: '/calendar/api/v1/event',
+    method: 'GET',
+  })
+}
+
+export {
+  get_event,
+  put_event,
+}

src/components/layout/Layout.vue

@@ -82,13 +82,16 @@ iniPage()
 
 .el-main {
   padding: 16px;
+  overflow: hidden;
 }
 
 .el-aside {
   margin-left: -10px;
+  background: #191a23;
 }
 
 .el-footer {
+  margin-top: 20px;
   display: flex;
   justify-content: space-around;
 }

src/components/layout/MainApp.vue

@@ -1,10 +1,14 @@
 <template>
-  <section class="section-main">
+  <section class="section-main" v-loading="usesSttingsStore.isLoading" element-loading-text="页面加载中……"
-    <router-view />
+    element-loading-background="rgba(0, 0, 0, 0.1)">
+    <router-view v-if="usesSttingsStore.isRouterAlive" />
   </section>
 </template>
 
 <script setup lang='ts'>
+import { settingsStore } from "@/store/modules/settings"
+const usesSttingsStore = settingsStore()
+
 </script>
 
 <style>

src/components/layout/NavBar.vue

@@ -17,6 +17,9 @@
     </el-col>
     <el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
       <div class="right-box">
+        <el-icon class="dashboard-icon" @click="open">
+          <avatar />
+        </el-icon>
         <!-- <Search /> -->
         <el-dropdown>
           <div class="dp-flex justify-content-center align-items height-full width-full">
@@ -58,6 +61,7 @@
 import CustomPic from "@/components/customPic/index.vue";
 import { tenantStore } from '@/store/modules/tenant'
 import { settingsStore } from '@/store/modules/settings'
+import { Action, ElMessage, ElMessageBox } from "element-plus";
 
 // -- IMPORT --
 const useTenantStore = tenantStore()
@@ -71,6 +75,19 @@ const useSettingsStore = settingsStore()
 const toPerson = () => {
 
 }
+const open = () => {
+  ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
+    confirmButtonText: 'OK',
+    callback: (action: Action) => {
+      ElMessage({
+        type: 'info',
+        message: `action: ${action}`,
+      })
+    },
+  })
+}
 
 useTenantStore.reflush()
 

src/entity/index.ts

@@ -19,4 +19,10 @@ type DataTimeline = {
   message: string,
 }
 
-export { Tenant, Theme, DataTimeline }
+type Event = {
+  date: string,
+  title: string,
+  eventInfo: string,
+}
+
+export { Tenant, Theme, DataTimeline, Event }

src/router/index.ts

@@ -82,6 +82,13 @@ const routes: Array<RouteRecordRaw> = [
           name: 'CTA策略'
         }
       },
+      {
+        path: '/settings',
+        component: () => import('../view/settings/index.vue'),
+        meta: {
+          name: '设置'
+        }
+      },
     ]
   },
   {

src/service/calendar.ts

@@ -0,0 +1,14 @@
+import axios from 'axios'
+
+const service = axios.create()
+
+const get_holiday = () => {
+  return service({
+    url: 'https://holidays-jp.github.io/api/v1/2023/date.json',
+    method: 'GET'
+  })
+}
+
+export {
+  get_holiday
+}

src/store/modules/settings.ts

@@ -6,15 +6,21 @@ export const settingsStore = defineStore('settings', () => {
   const settings = ref({
     sideMode: '#191a23',
     isMobile: false,
+    isRouterAlive: true,
+    isLoading: false
   })
 
   const sideMode = computed(() => settings.value.sideMode)
   const isMobile = computed(() => settings.value.isMobile)
+  const isRouterAlive = computed(() => settings.value.isRouterAlive)
+  const isLoading = computed(() => settings.value.isLoading)
 
   return {
     settings,
     sideMode,
     isMobile,
+    isRouterAlive,
+    isLoading,
   }
 })
 

src/utils/date.ts

@@ -1,3 +1,5 @@
+import { addZero } from "./number"
+
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
@@ -30,6 +32,12 @@ const formatTimeToStr = (times: any, pattern: string) => {
   return date.toLocaleString()
 }
 
-export {
+// 2023-01-03
-  formatTimeToStr
+const toLocalDate = (date: Date) => {
+  return date.getFullYear() + '-' + addZero(date.getMonth() + 1) + '-' + addZero(date.getDate())
+}
+
+export {
+  formatTimeToStr,
+  toLocalDate,
 }

src/utils/number.ts

@@ -2,4 +2,14 @@ const toPercent = (num: number) => {
   return (num * 100).toFixed(2) + "%"
 }
 
-export { toPercent }
+const addZero = (num: number) => {
+  if (num > 10) {
+    return num
+  }
+  return '0' + num
+}
+
+export {
+  toPercent,
+  addZero
+}

src/view/calendar/index.vue

@@ -1,12 +1,142 @@
 <template>
-  <div class="dashboard">感悟这个东西，暂时没有什么太多想法，以后会被删掉把</div>
+  <el-calendar v-model="value">
+    <template #dateCell="{ data }">
+      <div class="date-cell-holiday" v-if="Object.keys(holidays).includes(toLocalDate(data.date))">
+        <span style="color: red;" @click="onclick(data.date)"> {{ data.date.getDate() }}</span><br>
+        <span>{{ holidays[toLocalDate(data.date)] }}</span>
+      </div>
+      <div class="date-cell" v-else>
+        <span style="color: red;" v-if="data.date.getDay() == 0 || data.date.getDay() == 6" @click="onclick(data.date)">
+          {{
+            data.date.getDate()
+          }}</span>
+        <span v-else @click="onclick(data.date)"> {{ data.date.getDate() }}</span>
+      </div>
+      <div class="date-cell-event" v-if="Object.keys(eventDataObject).includes(toLocalDate(data.date))">
+        <span>{{ eventDataObject[toLocalDate(data.date)] }}</span>
+      </div>
+    </template>
+  </el-calendar>
+  <span>待办事项</span>
+  <el-table :data="eventDataList">
+    <el-table-column property="date" label="Date" width="150" />
+    <el-table-column property="title" label="title" width="200" />
+    <el-table-column property="eventInfo" label="eventInfo" />
+  </el-table>
+
+  <el-dialog v-model="dialogFormVisible" title="待办事项">
+    <el-form :model="form">
+      <el-form-item label="日期" :label-width="formLabelWidth">
+        <span>{{ form.date }}</span>
+      </el-form-item>
+      <el-form-item label="title" :label-width="formLabelWidth">
+        <el-input v-model="form.title" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="eventInfo" :label-width="formLabelWidth">
+        <el-input v-model="form.eventInfo" autocomplete="off" type="textarea" />
+      </el-form-item>
+      <el-form-item label="alert" :label-width="formLabelWidth">
+        <el-checkbox-group v-model="checkedalerts" :min="0" :max="2">
+          <el-checkbox v-for="city in alerts" :key="city" :label="city">{{
+            city
+          }}</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="confirm">
+          Confirm
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
+import { nextTick, reactive, ref } from 'vue'
+import { get_holiday } from '@/service/calendar'
+import { toLocalDate } from '@/utils/date'
+import { get_event, put_event } from "@/api/calendar"
+import { Event } from "@/entity/index"
+import { settingsStore } from "@/store/modules/settings";
+
+
+// -- IMPORT --
+const useSettingsStore = settingsStore()
+
+// -- REACTIVE OBJECT --
+const holidays = reactive<any>({})
+
+const eventDataList = reactive<Event[]>([])
+const eventDataObject = reactive<any>({})
+const form = reactive({
+  date: '',
+  title: '',
+  eventInfo: '',
+})
+// -- REF OBJECT --
+const value = ref(new Date())
+const dialogFormVisible = ref(false)
+const formLabelWidth = '140px'
+
+const checkedalerts = ref([])
+const alerts = ['email', 'messageBox', '手机短信', '微信通知']
+
+// -- EVENT DEFINITION
+const onclick = (date: Date) => {
+  form.date = toLocalDate(date)
+  dialogFormVisible.value = true
+}
+
+const confirm = async () => {
+  await put_event(form).then(() => {
+
+  })
+  dialogFormVisible.value = false
+  handleCommand('refresh')
+}
+
+const handleCommand = (command: string) => {
+  if (command === 'refresh') {
+    useSettingsStore.settings.isLoading = true
+    useSettingsStore.settings.isRouterAlive = false
+    nextTick(() => {
+      useSettingsStore.settings.isRouterAlive = true
+      useSettingsStore.settings.isLoading = false
+    })
+  } else if (command === 'closeOther') {
+    // useSettingsStore.closeOther()
+  } else {
+    // useSettingsStore.closeLeftOrRight(command)
+  }
+}
+
+/**
+ * AUTO INVOKE FUNCTION
+ */
+get_holiday().then((resp) => {
+  Object.keys(resp.data).forEach(element => {
+    holidays[element] = resp.data[element]
+  })
+})
+get_event().then((response) => {
+  eventDataList.length = 0
+  response.data.forEach((record: Event) => {
+    eventDataList.push(record)
+    eventDataObject[record.date] = record.title
+  })
+})
+
 </script>
 
-<style>
+<style lang="scss" scoped>
-.dashboard {
+.date-cell-holiday {
-  background-color: beige;
+  background: #dfd;
+}
+
+.date-cell-event {
+  background: yellow;
 }
 </style>

src/view/settings/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-button text @click="open">Click to open the Message Box</el-button>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { Action } from 'element-plus'
+
+const open = () => {
+  ElMessageBox.alert('This is a message', 'Title', {
+    // if you want to disable its autofocus
+    // autofocus: false,
+    confirmButtonText: 'OK',
+    callback: (action: Action) => {
+      ElMessage({
+        type: 'info',
+        message: `action: ${action}`,
+      })
+    },
+  })
+}
+</script>
+
+<style>
+
+</style>