增加日历组件

2023-01-29 20:12:16 +08:00
parent 98c45b3591
commit d1a4e48708
14 changed files with 319 additions and 9 deletions
@@ -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>
-.dashboard {
-  background-color: beige;
+<style lang="scss" scoped>
+.date-cell-holiday {
+  background: #dfd;
+}
+
+.date-cell-event {
+  background: yellow;
 }
 </style>