Przeglądaj źródła

添加待办登记页面,内容待完善

lm 1 miesiąc temu
rodzic
commit
9e1b1afe98

+ 120 - 0
src/views/appointmentAndTodo/toDoRegister/index.vue

@@ -0,0 +1,120 @@
+<template>
+    <div>
+        <SearchBlock :searchList="blockSearchList"></SearchBlock>
+
+        <el-calendar  v-model="selectedCalendarTime"  ref="calendar">
+            <!-- 自定义日历头 -->
+            <template #header="{ date }">
+                <i></i>
+            </template>
+
+            <!-- 自定义日期单元格 -->
+            <template #date-cell="{ data}">
+                <span class="has_things">
+                    {{ data.day.split('-').pop() }}
+                </span>
+            </template>
+        </el-calendar>
+
+
+
+    </div>
+</template>   
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import {blockSearchList} from './searchBlock'
+
+
+const selectedCalendarTime = defineModel('selectedCalendarTime')
+const calendar = ref()
+const selectDate = (val) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+:deep(.el-calendar){
+    .el-calendar__header{
+        padding:0;
+        border: none;
+    }
+
+    .el-calendar__body{
+        padding:24px 0 8px 0;
+        border-bottom: 1px solid #F3F3F3;
+        font-size: 14px;
+        .el-calendar-table{
+            tr td{
+                border:none;
+                &.is-today{
+                    color: #2E64FA;
+                }
+                &.prev .el-calendar-day span.has_things{
+                    &::after{
+                        background-color: #a8abb2;
+                    }
+                }
+                &.is-selected{
+                    background-color: transparent;
+                    .el-calendar-day{
+                        span{
+                            background-color: #2E64FA;
+                            color: #FFFFFF;
+                            &:hover{
+                                background-color: #2E64FA;
+                            }
+
+                            &.has_things::after{
+                                    background-color: #fff;
+                            }
+                        }
+                    }
+                }
+                .el-calendar-day{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 48px;
+                    padding:0;
+                    &:hover{
+                        background-color: transparent;
+                    }
+                    span{
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        line-height: 1;
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+
+                        &.has_things{
+                            position: relative;
+                            &::after{
+                                position: absolute;
+                                bottom: 3px;
+                                content: '';
+                                display: block;
+                                width: 4px;
+                                height: 4px;
+                                border-radius: 50%;
+                                background-color: #2E64FA;
+                            }
+                        }
+                        &:hover{
+                            background-color: rgba(46, 100, 250,0.1);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

+ 18 - 0
src/views/appointmentAndTodo/toDoRegister/searchBlock.ts

@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+export const blockSearchList = ref([
+  {
+    label: '人员',
+    key: 'toDoUser',
+    type: 'single', 
+    defaultValue: 'zhang_zexi',
+    options: [
+      { label: '章泽析', value: 'zhang_zexi' },
+      { label: '朱云', value: 'zhu_yun' },
+      { label: '陈思怡', value: 'chen_siyi' },
+      { label: '陈雅琪', value: 'chen_yaqi' },
+      { label: '付文杰', value: 'fu_wenjie' },
+      { label: '刘懂', value: 'liu_dong' }
+    ]
+  },
+]);