292 lines
9.3 KiB
Vue
292 lines
9.3 KiB
Vue
<template>
|
||
<!-- 这里是自定义头部，切换视图类型和切换日期 -->
|
||
<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 { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
|
||
import { Calendar } from '@fullcalendar/core'
|
||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||
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: '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',
|
||
aspectRatio: 2.2,
|
||
locale: 'zh-cn',
|
||
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: '回到今天',
|
||
month: '月',
|
||
week: '周',
|
||
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 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>
|