Merge remote-tracking branch 'origin/master'

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

@@ -1,29 +1,34 @@
 <template>
   <ContentWrap>
-    <el-button-group style="display: flex; justify-content: space-between;">
-      <el-button size="large" @click="selectDate(-1)">上月</el-button>
-      <el-button size="large" @click="today()">今天</el-button>
-      <el-button size="large" @click="selectDate(1)">下月</el-button>
-    </el-button-group>
-    <el-form-item label="会议申请历史" prop="createTime"/>
+    <el-form-item
+      label="会议申请历史"
+      prop="createTime"
+      class="custom-label"
+    />
+<!--    日历组件然后自定义需要内容 这里绑定的v-model是自定义的时间-->
       <el-calendar
         ref="calendar"
         class="custom-calendar"
         :model-value="new Date(currentYear,currentMonth,currentDay)"
       >
+<!--        组件头 内部有日期 还有按钮-->
         <template #header="{ date }">
-          <el-row>
-            <el-col :span="24" class="header-date">
+          <el-row style="width: 100%;">
+            <el-col :span="12" class="header-date">
               <span class="cl-title"> {{ date }}</span>
             </el-col>
+            <el-col :span="12" class="header-date">
+              <el-button-group style="display: flex; justify-content: space-between;">
+                <el-button size="large" @click="selectDate(-1)">上月</el-button>
+                <el-button size="large" @click="today()">今天</el-button>
+                <el-button size="large" @click="selectDate(1)">下月</el-button>
+              </el-button-group>
+            </el-col>
           </el-row>
         </template>
-
+<!--        自定义展示内容 根据需要自定义就好了-->
         <template #date-cell="{ data }">
-<!--            style="height: 100%; overflow-x: scroll; width: 100%;text-overflow: ellipsis;white-space: nowrap;"-->
-          <div
-            class='holiday'
-          >
+          <div class='holiday'>
             <span style="font-size: 14px">{{ data.date.getDate()}}</span>
             <br/>
             <span
@@ -31,14 +36,28 @@
               :key="item"
               class="seSpan"
             >
-              <span @click="getHygl(item.id)">{{item.title}}</span>
+  <!--              悬浮展示的组件根据内容自定义-->
+              <el-popover placement="right" :width="500">
+  <!--              绑定span标签为展示对象-->
+                <template #reference>
+                  <span @click="getHygl(item.id)">{{item.title}}</span>
+                </template>
+  <!--              描述列表也可以自定义的组件-->
+                <el-descriptions :title="item.title" :column="2">
+                  <el-descriptions-item label="申请时间">{{item.time}}</el-descriptions-item>
+                  <el-descriptions-item label="会议主题">{{item.theme}}</el-descriptions-item>
+                  <el-descriptions-item label="会议类型">{{item.type}}</el-descriptions-item>
+                  <el-descriptions-item label="组织者">{{item.organizer}}</el-descriptions-item>
+                  <el-descriptions-item label="参会人数">{{item.number}}</el-descriptions-item>
+                </el-descriptions>
+              </el-popover>
               <br/>
             </span>
           </div>
         </template>
       </el-calendar>
   </ContentWrap>
-  <!-- 表单弹窗：查看 -->
+  <!-- 详情表单弹窗：查看 -->
   <HyInfoForm ref="formRef"/>
 </template>
 
@@ -46,30 +65,32 @@
 import { CalendarInstance} from 'element-plus';
 import { HyglApi, HyglVO } from '@/api/home/hygl'
 import HyInfoForm from "@/views/Home/hygl/hyinfo/HyInfoForm.vue";
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
 
 defineOptions({ name: 'HyInfo' })
-
+//获取年月日自定义当前时间
 const currentDay = ref(new Date().getDate()) // 获取当前天份
 const currentMonth = ref(new Date().getMonth()) // 获取当前年份
 const currentYear = ref(new Date().getFullYear()) // 获取当前年份
-//改变月份
+//改变根据相应按钮传过来的值改变月份
 const selectDate = (val:number) => {
   if (!val){
     return
   }
   currentMonth.value+=val
-  console.log("today",currentYear.value,currentMonth.value,currentDay.value)
 }
-//回到今天
+//年日是不变的只改变月 所以我只需要拿到今天月的信息就好了
 const today = () => {
-  currentMonth.value = new Date().getMonth() // 获取当前月份
+  currentMonth.value = new Date().getMonth() // 获取当前的月份
 }
+
 /** 添加/修改操作 */
 const formRef = ref()
-//根据id获取数据
+//根据id打开详情表单获取数据查看详情
 const getHygl = async (id:number)=>{
   formRef.value.open(id)
 }
+//日历组件对应的数据对象
 const calendar = ref<CalendarInstance>()
 
 // 获取当前日期和14天前的日期
@@ -77,7 +98,7 @@ const endDate2 = new Date();
 const startDate2 = new Date();
 startDate2.setDate(endDate2.getDate() - 14); // 设置14天前的日期
 
-//获取详细日期时间
+//获取详细日期时间 年月日时分秒
 function formatDate(date: Date,time:boolean) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
@@ -87,25 +108,16 @@ function formatDate(date: Date,time:boolean) {
   const seconds =time? '59' : '00';
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
-// 获取日期
-function formatDate2(dat: number) {
+// 获取日期时间 年月日
+function formatDate2(dat: number|Date) {
   const date = new Date(dat)
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
   const day = String(date.getDate()).padStart(2, '0');
   return `${year}-${month}-${day}`;
 }
-// function formatDate(date: Date,time:boolean) {
-//   const year = date.getFullYear();
-//   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
-//   const day = String(date.getDate()).padStart(2, '0');
-//   const hours =time? String(date.getHours()).padStart(2, '0') : '00';
-//   const minutes =time? String(date.getMinutes()).padStart(2, '0') : '00';
-//   const seconds =time? String(date.getSeconds()).padStart(2, '0') : '00';
-//   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-// }
 
-/** 获取数据 */
+/** 获取数据 我默认设置获取50条数据 不够可以调整 */
 const handleQuery = () => {
   queryParamsHygl.pageNo = 1
   queryParamsHygl.createTime = [formatDate(startDate2,false),formatDate(endDate2,true)]//设置时间区域
@@ -113,6 +125,7 @@ const handleQuery = () => {
 }
 
 const listHygl = ref<HyglVO[]>([]) // 列表的数据
+//对应的搜索模型
 const queryParamsHygl = reactive({
   pageNo: 1,
   pageSize: 50,
@@ -142,6 +155,7 @@ const queryParamsHygl = reactive({
   processInstanceId: undefined,
   createTime: [] as string[],
 })
+//储存获取到的数值信息
 const holidays2 = reactive({});
 /** 查询列表 */
 const getList = async () => {
@@ -155,14 +169,32 @@ const getList = async () => {
         if (!Array.isArray(holidays2[formattedDate])) {
           holidays2[formattedDate] = [];
         }
-        // 将 title 添加到数组中
-        holidays2[formattedDate].push({id:item.id,title:item.title});
+        // 将自己想要的或去掉的数据有的内容 添加到数组中 最好添加处理好的数值 不要再渲染时去处理
+        holidays2[formattedDate].push({
+          id:item.id,
+          title:item.title,
+          time:formatDate2(item.time),
+          theme:item.theme,
+          type:getStatus(item.type),
+          organizer:item.organizer,
+          number:item.number,
+          }
+        );
       }
       // console.log("holidays2",holidays2)
     } finally {
     }
   }
-
+//获取字典值的方法 看看这样获取到的值的内容就知道了
+const getStatus = (status:number)=>{
+  const dict = getIntDictOptions(DICT_TYPE.HYGL_TYPE);
+  for (let item of dict){
+    if (item.value === status){
+      return item.label
+    }
+  }
+}
+//初始化拿一下数据列表的值来渲染日历表
 onMounted(()=> {
   handleQuery()
 })
@@ -177,6 +209,7 @@ onMounted(()=> {
   height: 100%;
   font-size: 16px;
 }
+/*设置日历表最大使用边框 还有来个小圆角*/
 .custom-calendar {
   width: 100%;
   height: 100%;
@@ -188,6 +221,12 @@ onMounted(()=> {
 }
 </style>
 <style scoped lang="scss">
+/*设置标题大小 使用 ::v-deep深度覆盖原本的样式*/
+::v-deep(.custom-label .el-form-item__label) {
+  font-size: 20px;
+  font-weight: bold;
+}
+/*设置日历格子内 超出内容不换行 超出内容显示为省略 内容超出大小是可以滚动*/
 .holiday {
   overflow-x: scroll;
   text-overflow: ellipsis;
@@ -208,14 +247,15 @@ onMounted(()=> {
 }
 .cl-title {
   display: inline-block;
-  font-size: 12px
+  font-size: 16px
 }
 //标题的大小
 .header-date {
   height: 40px;
-  text-align: center;
-  font-size: 16px;
+  text-align: left;
+  font-size: 22px;
 }
+//
 .seSpan {
   font-size: 14px;
   color: var(--el-color-primary);

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

@@ -1,21 +1,27 @@
 <template>
   <ContentWrap>
-    <el-button-group style="display: flex; justify-content: space-between;">
-      <el-button size="large" @click="selectDate(-1)">上月</el-button>
-      <el-button size="large" @click="today()">今天</el-button>
-      <el-button size="large" @click="selectDate(1)">下月</el-button>
-    </el-button-group>
-    <el-form-item label="领导日程展示" prop="createTime"/>
+    <el-form-item
+      label="领导日程展示"
+      prop="createTime"
+      class="custom-label"
+    />
     <el-calendar
       ref="calendar"
       class="custom-calendar"
       :model-value="new Date(currentYear,currentMonth,currentDay)"
     >
       <template #header="{ date }">
-        <el-row>
-          <el-col :span="24" class="header-date">
+        <el-row style="width: 100%;">
+          <el-col :span="12" class="header-date">
             <span class="cl-title"> {{ date }}</span>
           </el-col>
+          <el-col :span="12" class="header-date">
+            <el-button-group style="display: flex; justify-content: space-between;">
+              <el-button size="large" @click="selectDate(-1)">上月</el-button>
+              <el-button size="large" @click="today()">今天</el-button>
+              <el-button size="large" @click="selectDate(1)">下月</el-button>
+            </el-button-group>
+          </el-col>
         </el-row>
       </template>
 
@@ -30,9 +36,19 @@
             :key="item"
             class="seSpan"
           >
-              <span @click="openForm(item.id)">{{item.title}}</span>
-              <br/>
-            </span>
+            <el-popover placement="right" :width="500">
+              <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-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/>
+          </span>
         </div>
       </template>
     </el-calendar>
@@ -45,6 +61,7 @@
 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' })
 
@@ -76,7 +93,6 @@ const selectDate = (val:number) => {
     return
   }
   currentMonth.value+=val
-  console.log("today",currentYear.value,currentMonth.value,currentDay.value)
 }
 //回到今天
 const today = () => {
@@ -114,11 +130,27 @@ const getList = async () => {
         holidays2[formattedDate] = [];
       }
       // 将 title 添加到数组中
-      holidays2[formattedDate].push({id:item.id,title:item.title});
+      holidays2[formattedDate].push({
+          id:item.id,
+          title:item.title,
+          endTime:formatDate2(item.endTime),
+          status:getStatus(item.status),
+          location:item.location,
+          remarks:item.remarks
+        }
+      );
     }
   } 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) {
@@ -131,7 +163,7 @@ function formatDate(date: Date,time:boolean) {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 // 获取日期
-function formatDate2(dat: number) {
+function formatDate2(dat:number|Date) {
   const date = new Date(dat)
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
@@ -164,6 +196,10 @@ onMounted(()=> {
 }
 </style>
 <style scoped lang="scss">
+::v-deep(.custom-label .el-form-item__label) {
+  font-size: 20px;
+  font-weight: bold;
+}
 .holiday {
   overflow-x: scroll;
   text-overflow: ellipsis;
@@ -177,13 +213,13 @@ onMounted(()=> {
 }
 .cl-title {
   display: inline-block;
-  font-size: 12px
+  font-size: 16px
 }
 //标题的大小
 .header-date {
   height: 40px;
-  text-align: center;
-  font-size: 16px;
+  text-align: left;
+  font-size: 22px;
 }
 .seSpan {
   font-size: 14px;
@@ -192,4 +228,9 @@ onMounted(()=> {
   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>