|
|
@@ -5,7 +5,7 @@
|
|
|
<el-button type="primary" icon="el-icon-setting" size="mini" @click="handleWorkDay">设置工作日</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions">
|
|
|
+ <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions" v-loading="loading">
|
|
|
<template v-slot:eventContent="arg">
|
|
|
<div style="width: 100%;font-size: 18px;">
|
|
|
<div style="text-align: center;">{{ arg.event.title }}</div>
|
|
|
@@ -17,7 +17,7 @@
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-import { getWorkDay,setWorkDay } from "@/api/reserveMeeting";
|
|
|
+import { getWorkDay,setWorkDay } from "@/api/personnel/attendance/workday/index";
|
|
|
import FullCalendar from '@fullcalendar/vue'
|
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
|
@@ -29,6 +29,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading:false,
|
|
|
workDateList:[],
|
|
|
dataList:[
|
|
|
{
|
|
|
@@ -202,8 +203,8 @@ export default {
|
|
|
],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
- roomId: 2,
|
|
|
- month: this.nowDate(),
|
|
|
+ // roomId: 2,
|
|
|
+ workMonth: this.nowDate(),
|
|
|
},
|
|
|
calendarApi: null,
|
|
|
calendarOptions: {
|
|
|
@@ -225,7 +226,7 @@ export default {
|
|
|
// center: 'title',
|
|
|
// left: 'dayGridMonth,dayGridWeek,dayGridDay'
|
|
|
},
|
|
|
- // height: 'auto',
|
|
|
+ height: 'auto',
|
|
|
eventTimeFormat: { // 在每个事件上显示的时间的格式
|
|
|
hour: 'numeric',
|
|
|
minute: '2-digit',
|
|
|
@@ -267,13 +268,13 @@ export default {
|
|
|
},
|
|
|
//设置工作日
|
|
|
handleWorkDay() {
|
|
|
- this.$modal.confirm('是否设置该月工作日?').then(function() {
|
|
|
- return setWorkDay(this.getWorkDayList());
|
|
|
- }).then(() => {
|
|
|
+ this.$modal.confirm('是否设置该月工作日?').then(()=>{
|
|
|
+ setWorkDay({dates:this.getWorkDayList()}).then(response => {
|
|
|
this.getList();
|
|
|
this.$modal.msgSuccess("设置成功");
|
|
|
+ });
|
|
|
}).catch(() => {
|
|
|
- this.$modal.msgError("设置失败");
|
|
|
+ this.$modal.msg("取消设置");
|
|
|
});
|
|
|
},
|
|
|
// 获取当前年月
|
|
|
@@ -290,23 +291,25 @@ export default {
|
|
|
return str;
|
|
|
},
|
|
|
getList() {
|
|
|
+ this.loading = true;
|
|
|
this.calendarOptions.events = [];
|
|
|
- // getWorkDay(this.queryParams).then(response => {
|
|
|
- const event = this.dataList // 拿到返回的数据
|
|
|
- event.forEach(item => {
|
|
|
- let obj = {};
|
|
|
- // obj.backgroundColor = '#c6e0b4'; // 该事件的背景颜色
|
|
|
- // obj.borderColor = '#c6e0b4'; // 该事件的边框颜色
|
|
|
- // obj.textColor = '#fff'; // 该事件的文字颜色
|
|
|
- obj.title = '工作日'
|
|
|
- obj.start = item.workDate
|
|
|
- // obj.allDay = true // 是否为全天事件
|
|
|
- this.calendarOptions.events.push(obj) // 使用push方法将事件逐一添加，
|
|
|
+ getWorkDay(this.queryParams).then(response => {
|
|
|
+ const event = response.data; // 拿到返回的数据
|
|
|
+ event.forEach(item => {
|
|
|
+ let obj = {};
|
|
|
+ // obj.backgroundColor = '#c6e0b4'; // 该事件的背景颜色
|
|
|
+ // obj.borderColor = '#c6e0b4'; // 该事件的边框颜色
|
|
|
+ // obj.textColor = '#fff'; // 该事件的文字颜色
|
|
|
+ obj.title = '工作日'
|
|
|
+ obj.start = item.workDate
|
|
|
+ // obj.allDay = true // 是否为全天事件
|
|
|
+ this.calendarOptions.events.push(obj) // 使用push方法将事件逐一添加，
|
|
|
+ });
|
|
|
+ console.log(this.calendarOptions.events)
|
|
|
+ this.calendarApi.refetchEvents()
|
|
|
+ // 重新抓取所有的日程事件源上的日程事件并渲染它们。
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
- console.log(this.calendarOptions.events)
|
|
|
- this.calendarApi.refetchEvents()
|
|
|
- // 重新抓取所有的日程事件源上的日程事件并渲染它们。
|
|
|
- // });
|
|
|
},
|
|
|
formatDate1(cellValue) {
|
|
|
if (cellValue == null || cellValue === "") return "";
|
|
|
@@ -334,7 +337,7 @@ export default {
|
|
|
strArray.push(item.start)
|
|
|
})
|
|
|
let index = strArray.indexOf(thisDate);
|
|
|
- let workMonth = this.queryParams.month;
|
|
|
+ let workMonth = this.queryParams.workMonth;
|
|
|
if(thisDate.substring(0,7)==workMonth){
|
|
|
if (index > -1) {
|
|
|
this.calendarOptions.events.splice(index, 1);
|
|
|
@@ -351,7 +354,7 @@ export default {
|
|
|
this.calendarApi.today() // 将日历移动到当前日期。
|
|
|
this.calendarApi.getDate() // 返回日期的日历的当前日期
|
|
|
const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
- this.queryParams.month = formattedDate;
|
|
|
+ this.queryParams.workMonth = formattedDate;
|
|
|
this.getList();
|
|
|
},
|
|
|
nextClick(mouseEvent, htmlElement) {
|
|
|
@@ -360,7 +363,7 @@ export default {
|
|
|
// 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
|
|
|
// 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
|
|
|
const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
- this.queryParams.month = formattedDate;
|
|
|
+ this.queryParams.workMonth = formattedDate;
|
|
|
this.getList();
|
|
|
},
|
|
|
prevClick(mouseEvent, htmlElement) {
|
|
|
@@ -369,7 +372,7 @@ export default {
|
|
|
// 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
|
|
|
// 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
|
|
|
const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
- this.queryParams.month = formattedDate;
|
|
|
+ this.queryParams.workMonth = formattedDate;
|
|
|
this.getList();
|
|
|
}
|
|
|
}
|
