feat: 首页日历功能新增。
This commit is contained in:
tianyongbao
@@ -1,57 +1,291 @@
|
||||
<template>
|
||||
<br />
|
||||
<FullCalendar :options="calendarOptions" />
|
||||
<!-- 这里是自定义头部，切换视图类型和切换日期 -->
|
||||
<div class="calendarHeader">
|
||||
<div class="header_left">
|
||||
<h1>{{ type === '3' ? '列表' : calendarTitle }}</h1>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<!-- <span v-if="type!=='3'&&isShowBack" class="blue-color backToday" @click="getToday()">{{ type==='1'?'返回本月':'返回本周' }}</span>
|
||||
<el-select v-model="type" placeholder="视图类型" style="width: 80px" size="small" class="header_select" @change="handleChangeType">
|
||||
<el-option label="月" value="1" />
|
||||
<el-option label="周" value="2" />
|
||||
<el-option label="列" value="3" />
|
||||
</el-select> -->
|
||||
<!-- 选择月份的日期框 -->
|
||||
<el-date-picker
|
||||
v-if="type === '1'"
|
||||
v-model="showMonth"
|
||||
type="month"
|
||||
size="small"
|
||||
:clearable="false"
|
||||
placeholder="请选择日期"
|
||||
style="margin-left: 10px; vertical-align: middle"
|
||||
@change="changeDate"
|
||||
/>
|
||||
<el-button-group v-if="type === '2'" style="margin-left: 10px">
|
||||
<el-button size="small" class="el-icon-arrow-left" @click="getPrev()">上一周</el-button>
|
||||
<el-button size="small" @click="getNext()">下一周<i class="el-icon-arrow-right" /></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 月视图和周视图显示，列视图显示表格形式 -->
|
||||
<div v-show="type !== '3'" ref="fullcalendar" class="card" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
|
||||
import { Calendar } from '@fullcalendar/core'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import listPlugin from '@fullcalendar/list'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import dayjs from 'dayjs'
|
||||
import { getAccountCalendarInfo } from '@/api/invest/accountAnalysis.js'
|
||||
export default {
|
||||
name: 'ListByCalendar',
|
||||
components: { FullCalendar },
|
||||
data() {
|
||||
return {
|
||||
calendarOptions: {
|
||||
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
|
||||
name: 'PlanManagement',
|
||||
components: {},
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance()
|
||||
const state = reactive({
|
||||
calendarTitle: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月', // 日历头部显示文字
|
||||
dialogVisiable: false,
|
||||
showMonth: new Date(), // 显示月份
|
||||
loading: false,
|
||||
isShowBack: false, // 是否显示回到当月或当周
|
||||
planCategoryId: '', // 计划分类Id
|
||||
type: '1',
|
||||
dialogType: '',
|
||||
detailInfo: {},
|
||||
Tcalendar: null,
|
||||
drawerVisiable: false,
|
||||
drawerType: '',
|
||||
colorJSON: {
|
||||
// 我这里有类别的概念，不同的类别又有不同的颜色
|
||||
green: { title: '#00B578', class: 'green' },
|
||||
red: { title: '#FA5151', class: 'red' },
|
||||
orange: { title: '#FF8F1F', class: 'orange' },
|
||||
yellow: { title: '#FFC300', class: 'yellow' },
|
||||
cyan: { title: '#07B9B9', class: 'cyan' },
|
||||
blue: { title: '#3662EC', class: 'blue' },
|
||||
purple: { title: '#8A38F5', class: 'purple' },
|
||||
magenta: { title: '#EB2F96', class: 'magenta' }
|
||||
},
|
||||
fullcalendar: ref(),
|
||||
queryParams: {
|
||||
type: null,
|
||||
time: ''
|
||||
},
|
||||
nowDate: new Date(),
|
||||
infoList: [], // 日历显示的列信息
|
||||
categoryJSON: {} // 计划分类json
|
||||
})
|
||||
onMounted(() => {
|
||||
initCalendar()
|
||||
getCalendarList()
|
||||
})
|
||||
const initCalendar = () => {
|
||||
state.Tcalendar = new Calendar(state.fullcalendar, {
|
||||
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
// themeSystem: 'bootstrap5',
|
||||
// 语言
|
||||
aspectRatio: 2.2,
|
||||
locale: 'zh-cn',
|
||||
// 周起始日
|
||||
firstDay: 1,
|
||||
allDayText: '全天',
|
||||
// 是否可以选中日历格
|
||||
selectable: true,
|
||||
// 周次
|
||||
weekNumbers: true,
|
||||
headerToolbar: {
|
||||
left: 'today',
|
||||
center: 'prevYear,prev title next,nextYear',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listDay'
|
||||
},
|
||||
handleWindowResize: true,
|
||||
editable: true, // 允许编辑表格
|
||||
droppable: true,
|
||||
// height: 'auto',
|
||||
// 显示事件开始时间
|
||||
displayEventTime: false,
|
||||
// 显示事件结束时间
|
||||
displayEventEnd: false,
|
||||
// 关闭全天区域显示
|
||||
allDaySlot: true,
|
||||
// 开始时间段
|
||||
slotMinTime: '00:00:00',
|
||||
// 结束时间段
|
||||
slotMaxTime: '00:00:00',
|
||||
eventOrder: 'type,color,start',
|
||||
eventDurationEditable: true,
|
||||
eventResizableFromStart: true,
|
||||
selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
|
||||
firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
|
||||
unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
|
||||
unselectCancel: '.el-drawer',
|
||||
dayMaxEvents: true,
|
||||
// eventLimit: true,
|
||||
headerToolbar: false,
|
||||
buttonText: {
|
||||
today: '今天',
|
||||
today: '回到今天',
|
||||
month: '月',
|
||||
week: '周',
|
||||
day: '日',
|
||||
list: '列表',
|
||||
prev: '‹',
|
||||
next: '›',
|
||||
prevYear: '«',
|
||||
nextYear: '»'
|
||||
list: '列',
|
||||
day: '日'
|
||||
},
|
||||
allDayText: '全天',
|
||||
events: state.infoList,
|
||||
eventClassNames: function (arg) {
|
||||
// 添加自定义class
|
||||
return [arg.event.extendedProps.class]
|
||||
},
|
||||
eventContent: function (arg) {
|
||||
const italicEl = document.createElement('div')
|
||||
if (arg.event.extendedProps.startDateMinute && state.type === '1') {
|
||||
const childEl = document.createElement('span')
|
||||
childEl.innerHTML = arg.event.extendedProps.startDateMinute
|
||||
italicEl.append(childEl)
|
||||
}
|
||||
italicEl.append(arg.event.title)
|
||||
italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`)
|
||||
return { domNodes: [italicEl] }
|
||||
},
|
||||
eventDrop: function (info) {
|
||||
// 拖拽停止时触发
|
||||
handleDrap(info)
|
||||
},
|
||||
eventClick: function (info) {
|
||||
// 点击查看时触发
|
||||
handleClick(info)
|
||||
},
|
||||
select: function (info) {},
|
||||
eventResize: function (info) {
|
||||
handleEventResize(info)
|
||||
}
|
||||
})
|
||||
state.Tcalendar.render()
|
||||
}
|
||||
// 上一月、周、日
|
||||
const getPrev = () => {
|
||||
state.Tcalendar.prev()
|
||||
state.calendarTitle = state.Tcalendar.view.title
|
||||
getCalendarList()
|
||||
}
|
||||
// 下一月、周、日
|
||||
const getNext = () => {
|
||||
state.Tcalendar.next()
|
||||
state.calendarTitle = state.Tcalendar.view.title
|
||||
getCalendarList()
|
||||
}
|
||||
// 回到今天
|
||||
const getToday = () => {
|
||||
state.Tcalendar.today()
|
||||
state.calendarTitle = state.Tcalendar.view.title
|
||||
state.isShowBack = false
|
||||
state.showMonth = new Date()
|
||||
getCalendarList()
|
||||
}
|
||||
|
||||
const handleSetting = () => {
|
||||
state.dialogCategory = true
|
||||
}
|
||||
const getCalendarList = () => {
|
||||
const currentEnd = dayjs(state.Tcalendar.view.currentEnd).add(-1, 'day')
|
||||
const params = {
|
||||
startTime: dayjs(state.Tcalendar.view.currentStart).format('YYYY-MM-DD'),
|
||||
endTime: dayjs(currentEnd).format('YYYY-MM-DD'),
|
||||
type: state.type
|
||||
}
|
||||
state.loading = true
|
||||
state.Tcalendar.getEventSources().forEach((item) => {
|
||||
item.remove()
|
||||
})
|
||||
|
||||
getAccountCalendarInfo(params).then((res) => {
|
||||
state.loading = false
|
||||
if (res) {
|
||||
state.infoList = res.data
|
||||
state.Tcalendar.addEventSource(state.infoList)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 点击计划查看
|
||||
const handleClick = (info) => {}
|
||||
// 列视图点击查看
|
||||
const handleClickList = (row) => {}
|
||||
const closeDrawer = (val) => {
|
||||
state.drawerVisiable = false
|
||||
if (val) {
|
||||
getCalendarList()
|
||||
}
|
||||
}
|
||||
// 切换视图类型
|
||||
const handleChangeType = (val) => {
|
||||
if (val === '1') {
|
||||
state.Tcalendar.changeView('dayGridMonth')
|
||||
state.showMonth = new Date()
|
||||
} else if (val === '2') {
|
||||
state.Tcalendar.changeView('timeGridWeek')
|
||||
} else {
|
||||
state.Tcalendar.changeView('listMonth')
|
||||
}
|
||||
state.isShowBack = false
|
||||
state.calendarTitle = state.Tcalendar.view.title
|
||||
getToday()
|
||||
}
|
||||
// 切换类型
|
||||
const handleChangePlanId = () => {
|
||||
getCalendarList()
|
||||
}
|
||||
|
||||
// 拖拽计划时触发
|
||||
const handleDrap = (info) => {}
|
||||
// 调整大小时触发
|
||||
const handleEventResize = (info) => {}
|
||||
// 拖拽触发
|
||||
const handleSelectDate = (info) => {}
|
||||
// 切换月份和日期
|
||||
const changeDate = (date) => {
|
||||
state.Tcalendar.gotoDate(date)
|
||||
// 判断不是当前月份，显示返回当前月
|
||||
if (date.getMonth() !== new Date().getMonth() || new Date().getFullYear() !== new Date(date).getFullYear()) {
|
||||
state.isShowBack = true
|
||||
} else {
|
||||
state.isShowBack = false
|
||||
}
|
||||
state.calendarTitle = state.Tcalendar.view.title
|
||||
getCalendarList()
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
changeDate,
|
||||
getPrev,
|
||||
handleDrap,
|
||||
handleClickList,
|
||||
handleEventResize,
|
||||
handleChangePlanId,
|
||||
getNext,
|
||||
getToday,
|
||||
closeDrawer,
|
||||
getCalendarList,
|
||||
handleSetting,
|
||||
handleChangeType,
|
||||
handleClick,
|
||||
handleSelectDate
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(h2) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
<style lang="scss" scoped>
|
||||
.calendarHeader {
|
||||
margin: 20px 30px 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.header_select {
|
||||
margin: 0 0 0 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin: 0 0 0 0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
color: #303133;
|
||||
}
|
||||
// .el-button-group {
|
||||
// vertical-align: top;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user