领导日程展示
This commit is contained in:
XaoLi717
parent
7e7e8ec0fa
commit
0413ae4eb2
165
src/views/Home/rcgl/rcglInfo/RcglInfoForm.vue
Normal file
165
src/views/Home/rcgl/rcglInfo/RcglInfoForm.vue
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 70%">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
label-width="110px"
|
||||||
|
v-loading="formLoading"
|
||||||
|
>
|
||||||
|
<el-form-item label="日程标题" prop="title">
|
||||||
|
<el-input v-model="formData.title" placeholder="请输入日程标题" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="日程状态" prop="status">
|
||||||
|
<el-select v-model="formData.status" placeholder="请选择日程状态类型" disabled>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.RCGL_RC_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="是否展示" prop="ispublic">
|
||||||
|
<el-radio-group v-model="formData.ispublic" disabled>
|
||||||
|
<el-radio
|
||||||
|
v-for="dict in getIntDictOptions(DICT_TYPE.RCGL_STATUS)"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>
|
||||||
|
{{ dict.label }}
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="开始日期" prop="date">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.date"
|
||||||
|
type="date"
|
||||||
|
value-format="x"
|
||||||
|
placeholder="选择开始日期"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="预计开始时间" prop="startTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.startTime"
|
||||||
|
type="datetime"
|
||||||
|
value-format="x"
|
||||||
|
placeholder="选择日程开始时间"
|
||||||
|
@change="validateDate"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="预计结束时间" prop="endTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.endTime"
|
||||||
|
type="datetime"
|
||||||
|
value-format="x"
|
||||||
|
placeholder="选择日程结束时间"
|
||||||
|
@change="validateDate"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="日程内容" prop="content">
|
||||||
|
<span style="line-height: 1.4" v-html="formData.content"></span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="相关链接" prop="videoLink">
|
||||||
|
<el-input v-model="formData.videoLink" placeholder="请输入日程相关链接" disabled/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地点" prop="location">
|
||||||
|
<el-input autosize v-model="formData.location" type="textarea" placeholder="请输入日程地点" disabled/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remarks">
|
||||||
|
<el-input autosize v-model="formData.remarks" type="textarea" placeholder="请输入备注" disabled/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||||
|
import { RcglApi } from '@/api/home/rcgl'
|
||||||
|
|
||||||
|
/** 领导日程安排 表单 */
|
||||||
|
defineOptions({ name: 'RcglForm' })
|
||||||
|
|
||||||
|
// const { t } = useI18n() // 国际化
|
||||||
|
// const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
|
const dialogTitle = ref('详情') // 弹窗的标题
|
||||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||||
|
const formData = ref({
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
location: undefined,
|
||||||
|
videoLink: undefined,
|
||||||
|
content: undefined,
|
||||||
|
date: undefined,
|
||||||
|
startTime: undefined,
|
||||||
|
endTime: undefined,
|
||||||
|
status: undefined,
|
||||||
|
remarks: undefined,
|
||||||
|
ispublic: undefined,
|
||||||
|
})
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
// 方法：验证开始时间是否小于结束时间
|
||||||
|
const validateDate = () => {
|
||||||
|
if (formData.value.startTime && formData.value.endTime) {
|
||||||
|
const start = formData.value.startTime
|
||||||
|
const end = formData.value.endTime
|
||||||
|
if (start > end) {
|
||||||
|
formData.value.endTime = undefined
|
||||||
|
message.error('开始时间不能大于结束时间')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = async (id: number) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
resetForm()
|
||||||
|
// 修改时，设置数据
|
||||||
|
if (id) {
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
formData.value = await RcglApi.getRcgl(id)
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = {
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
location: undefined,
|
||||||
|
videoLink: undefined,
|
||||||
|
content: undefined,
|
||||||
|
date: undefined,
|
||||||
|
startTime: undefined,
|
||||||
|
endTime: undefined,
|
||||||
|
status: undefined,
|
||||||
|
remarks: undefined,
|
||||||
|
ispublic: undefined,
|
||||||
|
}
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
175
src/views/Home/rcgl/rcglInfo/index.vue
Normal file
175
src/views/Home/rcgl/rcglInfo/index.vue
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form-item label="领导日程展示" prop="createTime"/>
|
||||||
|
<el-calendar
|
||||||
|
ref="calendar"
|
||||||
|
class="custom-calendar"
|
||||||
|
:model-value="new Date()"
|
||||||
|
>
|
||||||
|
<template #header="{ date }">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24" class="header-date">
|
||||||
|
<span class="cl-title"> {{ date }}</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #date-cell="{ data }">
|
||||||
|
<div
|
||||||
|
class='holiday'
|
||||||
|
>
|
||||||
|
<span style="font-size: 14px">{{ data.date.getDate()}}</span>
|
||||||
|
<br/>
|
||||||
|
<span
|
||||||
|
v-for="item in (holidays2[data.day] || [])"
|
||||||
|
:key="item"
|
||||||
|
class="seSpan"
|
||||||
|
>
|
||||||
|
<span @click="openForm(item.id)">{{item.title}}</span>
|
||||||
|
<br/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</ContentWrap>
|
||||||
|
<!-- 展示表单-->
|
||||||
|
<RcglInfoForm ref="formRef"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CalendarInstance} from 'element-plus';
|
||||||
|
import {RcglApi, RcglVO} from "@/api/home/rcgl";
|
||||||
|
import RcglInfoForm from './RcglInfoForm.vue'
|
||||||
|
|
||||||
|
defineOptions({ name: 'RcInfo' })
|
||||||
|
|
||||||
|
const listRcgl = ref<RcglVO[]>([]) // 列表的数据
|
||||||
|
const holidays2 = reactive({});
|
||||||
|
const queryParamsRcgl = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 50,
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
location: undefined,
|
||||||
|
videoLink: undefined,
|
||||||
|
content: undefined,
|
||||||
|
date: [],
|
||||||
|
startTime: [],
|
||||||
|
endTime: [],
|
||||||
|
status: undefined,
|
||||||
|
remarks: undefined,
|
||||||
|
ispublic: 1,
|
||||||
|
createTime: [] as string[],
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 添加/修改操作 */
|
||||||
|
const formRef = ref()
|
||||||
|
const openForm = (id: number) => {
|
||||||
|
formRef.value.open(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const calendar = ref<CalendarInstance>()
|
||||||
|
|
||||||
|
// 获取当前日期和14天前的日期
|
||||||
|
const endDate2 = new Date();
|
||||||
|
const startDate2 = new Date();
|
||||||
|
startDate2.setDate(endDate2.getDate() - 14); // 设置14天前的日期
|
||||||
|
|
||||||
|
/** 获取数据 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParamsRcgl.pageNo = 1
|
||||||
|
queryParamsRcgl.createTime = [formatDate(startDate2,false),formatDate(endDate2,true)]//设置时间区域
|
||||||
|
getList() //获取数据
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
try {
|
||||||
|
const rcglData = await RcglApi.getRcglPage(queryParamsRcgl)
|
||||||
|
listRcgl.value = rcglData.list
|
||||||
|
for(let item of listRcgl.value){
|
||||||
|
const formattedDate = formatDate2(item.createTime);
|
||||||
|
// 如果 holidays2[formattedDate] 不存在或不是数组，初始化为数组
|
||||||
|
if (!Array.isArray(holidays2[formattedDate])) {
|
||||||
|
holidays2[formattedDate] = [];
|
||||||
|
}
|
||||||
|
// 将 title 添加到数组中
|
||||||
|
holidays2[formattedDate].push({id:item.id,title:item.title});
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取详细日期时间
|
||||||
|
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? '23' : '00';
|
||||||
|
const minutes =time? '59' : '00';
|
||||||
|
const seconds =time? '59' : '00';
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
}
|
||||||
|
// 获取日期
|
||||||
|
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}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(()=> {
|
||||||
|
handleQuery()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
.holiday::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.custom-calendar .is-today {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
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/*这个覆盖了原组件宽度*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.holiday {
|
||||||
|
overflow-x: scroll;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.month-title {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
.cl-title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px
|
||||||
|
}
|
||||||
|
//标题的大小
|
||||||
|
.header-date {
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.seSpan {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
border: 1px solid var(--el-color-primary);
|
||||||
|
border-radius: 2px; /* 可选：添加圆角 */
|
||||||
|
padding: 0 2px 0 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user