yudao-team/oa-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

领导日程展示会议信息展示 更新 悬浮显示 更新切换时间

Browse Source
This commit is contained in:
XaoLi717 2024-11-19 10:03:50 +08:00
parent 3f5f154ea1
commit ea48f387b8
2 changed files with 137 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/Home/hygl/hyinfo/index.vue
View File

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

75
src/views/Home/rcgl/rcglInfo/index.vue
View File

@ -1,21 +1,27 @@
<template> <template>
<ContentWrap> <ContentWrap>
<el-button-group style="display: flex; justify-content: space-between;"> <el-form-item
<el-button size="large" @click="selectDate(-1)">上月</el-button> label="领导日程展示"
<el-button size="large" @click="today()">今天</el-button> prop="createTime"
<el-button size="large" @click="selectDate(1)">下月</el-button> class="custom-label"
</el-button-group> />
<el-form-item label="领导日程展示" prop="createTime"/>
<el-calendar <el-calendar
ref="calendar" ref="calendar"
class="custom-calendar" class="custom-calendar"
:model-value="new Date(currentYear,currentMonth,currentDay)" :model-value="new Date(currentYear,currentMonth,currentDay)"
> >
<template #header="{ date }"> <template #header="{ date }">
<el-row> <el-row style="width: 100%;">
<el-col :span="24" class="header-date"> <el-col :span="12" class="header-date">
<span class="cl-title"> {{ date }}</span> <span class="cl-title"> {{ date }}</span>
</el-col> </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> </el-row>
</template> </template>
@ -30,9 +36,19 @@
:key="item" :key="item"
class="seSpan" class="seSpan"
> >
<span @click="openForm(item.id)">{{item.title}}</span> <el-popover placement="right" :width="500">
<br/> <template #reference>
</span> <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> </div>
</template> </template>
</el-calendar> </el-calendar>
@ -45,6 +61,7 @@
import { CalendarInstance} from 'element-plus'; import { CalendarInstance} from 'element-plus';
import {RcglApi, RcglVO} from "@/api/home/rcgl"; import {RcglApi, RcglVO} from "@/api/home/rcgl";
import RcglInfoForm from './RcglInfoForm.vue' import RcglInfoForm from './RcglInfoForm.vue'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
defineOptions({ name: 'RcInfo' }) defineOptions({ name: 'RcInfo' })
@ -76,7 +93,6 @@ const selectDate = (val:number) => {
return return
} }
currentMonth.value+=val currentMonth.value+=val
console.log("today",currentYear.value,currentMonth.value,currentDay.value)
} }
//回到今天 //回到今天
const today = () => { const today = () => {
@ -114,11 +130,27 @@ const getList = async () => {
holidays2[formattedDate] = []; holidays2[formattedDate] = [];
} }
// 将 title 添加到数组中 // 将 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 { } 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) { function formatDate(date: Date,time:boolean) {
@ -131,7 +163,7 @@ function formatDate(date: Date,time:boolean) {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} }
// 获取日期 // 获取日期
function formatDate2(dat: number) { function formatDate2(dat:number|Date) {
const date = new Date(dat) const date = new Date(dat)
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1 const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
@ -164,6 +196,10 @@ onMounted(()=> {
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep(.custom-label .el-form-item__label) {
font-size: 20px;
font-weight: bold;
}
.holiday { .holiday {
overflow-x: scroll; overflow-x: scroll;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -177,13 +213,13 @@ onMounted(()=> {
} }
.cl-title { .cl-title {
display: inline-block; display: inline-block;
font-size: 12px font-size: 16px
} }
//标题的大小 //标题的大小
.header-date { .header-date {
height: 40px; height: 40px;
text-align: center; text-align: left;
font-size: 16px; font-size: 22px;
} }
.seSpan { .seSpan {
font-size: 14px; font-size: 14px;
@ -192,4 +228,9 @@ onMounted(()=> {
border-radius: 2px; /* 可选：添加圆角 */ border-radius: 2px; /* 可选：添加圆角 */
padding: 0 2px 0 2px; padding: 0 2px 0 2px;
} }
.el-descriptions-item__content {
white-space: normal !important; /* 允许换行 */
word-wrap: break-word; /* 长单词换行 */
word-break: break-word; /* 强制换行 */
}
</style> </style>