Compare commits
No commits in common. "b5040cf42c1d6547cd7d65ea5755fec3dd0ced95" and "40679d3acb4260a3f2eada9225540daed0863b3e" have entirely different histories.
b5040cf42c
...
40679d3acb
@ -1,34 +1,29 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form-item
|
||||
label="会议申请历史"
|
||||
prop="createTime"
|
||||
class="custom-label"
|
||||
/>
|
||||
<!-- 日历组件然后自定义需要内容 这里绑定的v-model是自定义的时间-->
|
||||
<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-calendar
|
||||
ref="calendar"
|
||||
class="custom-calendar"
|
||||
:model-value="new Date(currentYear,currentMonth,currentDay)"
|
||||
>
|
||||
<!-- 组件头 内部有日期 还有按钮-->
|
||||
<template #header="{ date }">
|
||||
<el-row style="width: 100%;">
|
||||
<el-col :span="12" class="header-date">
|
||||
<el-row>
|
||||
<el-col :span="24" 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 }">
|
||||
<div class='holiday'>
|
||||
<!-- style="height: 100%; overflow-x: scroll; width: 100%;text-overflow: ellipsis;white-space: nowrap;"-->
|
||||
<div
|
||||
class='holiday'
|
||||
>
|
||||
<span style="font-size: 14px">{{ data.date.getDate()}}</span>
|
||||
<br/>
|
||||
<span
|
||||
@ -36,28 +31,14 @@
|
||||
:key="item"
|
||||
class="seSpan"
|
||||
>
|
||||
<!-- 悬浮展示的组件根据内容自定义-->
|
||||
<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>
|
||||
<span @click="getHygl(item.id)">{{item.title}}</span>
|
||||
<br/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</ContentWrap>
|
||||
<!-- 详情表单弹窗：查看 -->
|
||||
<!-- 表单弹窗：查看 -->
|
||||
<HyInfoForm ref="formRef"/>
|
||||
</template>
|
||||
|
||||
@ -65,32 +46,30 @@
|
||||
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天前的日期
|
||||
@ -98,7 +77,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
|
||||
@ -108,16 +87,25 @@ function formatDate(date: Date,time:boolean) {
|
||||
const seconds =time? '59' : '00';
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
// 获取日期时间 年月日
|
||||
function formatDate2(dat: number|Date) {
|
||||
// 获取日期
|
||||
function formatDate2(dat: number) {
|
||||
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)]//设置时间区域
|
||||
@ -125,7 +113,6 @@ const handleQuery = () => {
|
||||
}
|
||||
|
||||
const listHygl = ref<HyglVO[]>([]) // 列表的数据
|
||||
//对应的搜索模型
|
||||
const queryParamsHygl = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
@ -155,7 +142,6 @@ const queryParamsHygl = reactive({
|
||||
processInstanceId: undefined,
|
||||
createTime: [] as string[],
|
||||
})
|
||||
//储存获取到的数值信息
|
||||
const holidays2 = reactive({});
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
@ -169,32 +155,14 @@ const getList = async () => {
|
||||
if (!Array.isArray(holidays2[formattedDate])) {
|
||||
holidays2[formattedDate] = [];
|
||||
}
|
||||
// 将自己想要的或去掉的数据有的内容 添加到数组中 最好添加处理好的数值 不要再渲染时去处理
|
||||
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,
|
||||
}
|
||||
);
|
||||
// 将 title 添加到数组中
|
||||
holidays2[formattedDate].push({id:item.id,title:item.title});
|
||||
}
|
||||
// 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()
|
||||
})
|
||||
@ -209,7 +177,6 @@ onMounted(()=> {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
/*设置日历表最大使用边框 还有来个小圆角*/
|
||||
.custom-calendar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -221,12 +188,6 @@ 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;
|
||||
@ -247,15 +208,14 @@ onMounted(()=> {
|
||||
}
|
||||
.cl-title {
|
||||
display: inline-block;
|
||||
font-size: 16px
|
||||
font-size: 12px
|
||||
}
|
||||
//标题的大小
|
||||
.header-date {
|
||||
height: 40px;
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
//
|
||||
.seSpan {
|
||||
font-size: 14px;
|
||||
color: var(--el-color-primary);
|
||||
|
||||
@ -1,27 +1,21 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form-item
|
||||
label="领导日程展示"
|
||||
prop="createTime"
|
||||
class="custom-label"
|
||||
/>
|
||||
<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-calendar
|
||||
ref="calendar"
|
||||
class="custom-calendar"
|
||||
:model-value="new Date(currentYear,currentMonth,currentDay)"
|
||||
>
|
||||
<template #header="{ date }">
|
||||
<el-row style="width: 100%;">
|
||||
<el-col :span="12" class="header-date">
|
||||
<el-row>
|
||||
<el-col :span="24" 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>
|
||||
|
||||
@ -36,19 +30,9 @@
|
||||
:key="item"
|
||||
class="seSpan"
|
||||
>
|
||||
<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>
|
||||
<span @click="openForm(item.id)">{{item.title}}</span>
|
||||
<br/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
@ -61,7 +45,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' })
|
||||
|
||||
@ -93,6 +76,7 @@ const selectDate = (val:number) => {
|
||||
return
|
||||
}
|
||||
currentMonth.value+=val
|
||||
console.log("today",currentYear.value,currentMonth.value,currentDay.value)
|
||||
}
|
||||
//回到今天
|
||||
const today = () => {
|
||||
@ -130,27 +114,11 @@ const getList = async () => {
|
||||
holidays2[formattedDate] = [];
|
||||
}
|
||||
// 将 title 添加到数组中
|
||||
holidays2[formattedDate].push({
|
||||
id:item.id,
|
||||
title:item.title,
|
||||
endTime:formatDate2(item.endTime),
|
||||
status:getStatus(item.status),
|
||||
location:item.location,
|
||||
remarks:item.remarks
|
||||
}
|
||||
);
|
||||
holidays2[formattedDate].push({id:item.id,title:item.title});
|
||||
}
|
||||
} 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) {
|
||||
@ -163,7 +131,7 @@ function formatDate(date: Date,time:boolean) {
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
// 获取日期
|
||||
function formatDate2(dat:number|Date) {
|
||||
function formatDate2(dat: number) {
|
||||
const date = new Date(dat)
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||
@ -196,10 +164,6 @@ 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;
|
||||
@ -213,13 +177,13 @@ onMounted(()=> {
|
||||
}
|
||||
.cl-title {
|
||||
display: inline-block;
|
||||
font-size: 16px
|
||||
font-size: 12px
|
||||
}
|
||||
//标题的大小
|
||||
.header-date {
|
||||
height: 40px;
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.seSpan {
|
||||
font-size: 14px;
|
||||
@ -228,9 +192,4 @@ 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user