更改信息展示

src/views/Home/hygl/hyinfo/index.vue

@@ -9,7 +9,7 @@
       <el-calendar
         ref="calendar"
         class="custom-calendar"
-        :model-value="new Date(currentYear,currentMonth,currentDay)"
+        :model-value="new Date(currentYear,currentMonth)"
       >
 <!--        组件头 内部有日期 还有按钮-->
         <template #header="{ date }">
@@ -29,7 +29,9 @@
 <!--        自定义展示内容 根据需要自定义就好了-->
         <template #date-cell="{ data }">
           <div class='holiday'>
-            <span style="font-size: 14px">{{ data.date.getDate()}}</span>
+            <span style="font-size: 14px">
+              {{ data.date.getDate() === currentDay? data.date.getDate()+'(今天)':data.date.getDate() }}
+            </span>
             <br/>
             <span
               v-for="item in (holidays2[data.day] || [])"
@@ -204,18 +206,21 @@ onMounted(()=> {
 .holiday::-webkit-scrollbar {
   display: none;
 }
+/*今天显示为其他颜色*/
 .custom-calendar .is-today {
   width: 100%;
   height: 100%;
+  background-color: #FFE6E6;
   font-size: 16px;
 }
-/*设置日历表最大使用边框 还有来个小圆角*/
+/*设置日历组件边框大小圆角*/
 .custom-calendar {
   width: 100%;
   height: 100%;
   border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
   border-radius: 5px; /* 可选：添加圆角 */
 }
+/*每个小各自大小*/
 .el-calendar-table .el-calendar-day {
   height: 105px/*这个覆盖了原组件宽度*/
 }
@@ -255,12 +260,17 @@ onMounted(()=> {
   text-align: left;
   font-size: 22px;
 }
-//
+//border: 1px solid var(--el-color-primary);
 .seSpan {
   font-size: 14px;
   color: var(--el-color-primary);
-  border: 1px solid var(--el-color-primary);
   border-radius: 2px; /* 可选：添加圆角 */
   padding: 0 2px 0 2px;
 }
+//悬浮信息展示的数据
+.el-descriptions-item__content {
+  white-space: normal !important; /* 允许换行 */
+  word-wrap: break-word; /* 长单词换行 */
+  word-break: break-word; /* 强制换行 */
+}
 </style>

src/views/Home/rcgl/RcglForm.vue

@@ -110,6 +110,7 @@ const formData = ref({
 const formRules = reactive({
   title: [{ required: true, message: '日程标题不能为空', trigger: 'blur' }],
   startTime: [{ required: true, message: '日程开始时间不能为空', trigger: 'blur' }],
+  location: [{ required: true, message: '地点不能为空', trigger: 'blur' }],
   ispublic: [{ required: true, message: '日程是否公开不能为空', trigger: 'blur' }],
   endTime: [{ required: true, message: '日程结束时间不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '日程状态不能为空', trigger: 'blur' }],

src/views/Home/rcgl/rcglInfo/index.vue

@@ -8,7 +8,7 @@
     <el-calendar
       ref="calendar"
       class="custom-calendar"
-      :model-value="new Date(currentYear,currentMonth,currentDay)"
+      :model-value="new Date(currentYear,currentMonth)"
     >
       <template #header="{ date }">
         <el-row style="width: 100%;">
@@ -29,7 +29,9 @@
         <div
           class='holiday'
         >
-          <span style="font-size: 14px">{{ data.date.getDate()}}</span>
+          <span style="font-size: 14px">
+            {{ data.date.getDate() === currentDay? data.date.getDate()+'(今天)':data.date.getDate() }}
+          </span>
           <br/>
           <span
             v-for="item in (holidays2[data.day] || [])"
@@ -40,11 +42,10 @@
               <template #reference>
                 <span @click="openForm(item.id)">{{item.title}}</span>
               </template>
-              <el-descriptions :title="item.title" :column="2" border>
-                <el-descriptions-item label="状态">{{item.status}}</el-descriptions-item>
+              <el-descriptions :title="item.title" :column="2">
+                <el-descriptions-item label="开始时间">{{item.startTime}}</el-descriptions-item>
                 <el-descriptions-item label="结束时间">{{item.endTime}}</el-descriptions-item>
                 <el-descriptions-item label="地点">{{item.location}}</el-descriptions-item>
-                <el-descriptions-item label="备注">{{item.remarks}}</el-descriptions-item>
               </el-descriptions>
             </el-popover>
             <br/>
@@ -61,7 +62,6 @@
 import { CalendarInstance} from 'element-plus';
 import {RcglApi, RcglVO} from "@/api/home/rcgl";
 import RcglInfoForm from './RcglInfoForm.vue'
-import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
 
 defineOptions({ name: 'RcInfo' })
 
@@ -103,7 +103,7 @@ const formRef = ref()
 const openForm = (id: number) => {
   formRef.value.open(id)
 }
-
+//自定义头部需要使用
 const calendar = ref<CalendarInstance>()
 
 // 获取当前日期和14天前的日期
@@ -133,8 +133,8 @@ const getList = async () => {
       holidays2[formattedDate].push({
           id:item.id,
           title:item.title,
+          startTime:formatDate2(item.startTime),
           endTime:formatDate2(item.endTime),
-          status:getStatus(item.status),
           location:item.location,
           remarks:item.remarks
         }
@@ -143,14 +143,6 @@ const getList = async () => {
   } finally {
   }
 }
-const getStatus = (status:number)=>{
-  const dict = getIntDictOptions(DICT_TYPE.RCGL_RC_STATUS);
-  for (let item of dict){
-    if (item.value === status){
-      return item.label
-    }
-  }
-}
 
 //获取详细日期时间
 function formatDate(date: Date,time:boolean) {
@@ -180,17 +172,21 @@ onMounted(()=> {
 .holiday::-webkit-scrollbar {
   display: none;
 }
+/*今天显示为其他颜色*/
 .custom-calendar .is-today {
   width: 100%;
   height: 100%;
+  background-color: #FFE6E6 ;
   font-size: 16px;
 }
+/*设置日历组件边框大小圆角*/
 .custom-calendar {
   width: 100%;
   height: 100%;
   border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
   border-radius: 5px; /* 可选：添加圆角 */
 }
+/*每个小各自大小*/
 .el-calendar-table .el-calendar-day {
   height: 105px/*这个覆盖了原组件宽度*/
 }
@@ -200,6 +196,7 @@ onMounted(()=> {
   font-size: 20px;
   font-weight: bold;
 }
+//每个各自展示的内容
 .holiday {
   overflow-x: scroll;
   text-overflow: ellipsis;
@@ -221,13 +218,15 @@ onMounted(()=> {
   text-align: left;
   font-size: 22px;
 }
+//border: 1px solid var(--el-color-primary);
+//展示的小标题样式
 .seSpan {
   font-size: 14px;
   color: var(--el-color-primary);
-  border: 1px solid var(--el-color-primary);
   border-radius: 2px; /* 可选：添加圆角 */
   padding: 0 2px 0 2px;
 }
+//悬浮信息展示的数据
 .el-descriptions-item__content {
   white-space: normal !important; /* 允许换行 */
   word-wrap: break-word; /* 长单词换行 */