751 lines
16 KiB
Vue
751 lines
16 KiB
Vue
<template>
|
|
|
|
<tabler-header v-if="!fulldis" @updatedcount="get_user"></tabler-header>
|
|
<FullCalendar ref="fullCalendar" :options='calendarOptions' >
|
|
<!-- <template v-slot:eventContent='arg'>
|
|
<b>{{ arg.timeText }}</b>
|
|
<i>{{ arg.event.title }}</i>
|
|
</template> -->
|
|
</FullCalendar>
|
|
<tabler-footer v-if="!fulldis"></tabler-footer>
|
|
|
|
|
|
|
|
|
|
<div v-if="set_item_flag" class="modal modal-blur fade show" style="display: block;" >
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{event_id==0?"正在添加日程":"正在修改 "+event_username+" 创建的日程"}}</h5>
|
|
<button type="button" class="btn-close" @click="set_item_close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<div class="mb-3">
|
|
|
|
|
|
<view class="date-seles">
|
|
<!-- <datetime-picker v-model="range" type="daterange" /> -->
|
|
<datatime-picker-for-fullCalendar :value="range" :title="title" :color_sele="color_sele" @update="update_date"></datatime-picker-for-fullCalendar>
|
|
|
|
|
|
</view>
|
|
|
|
<div>
|
|
|
|
<uni-easyinput class="input" type="text" placeholder="输入日程内容" v-model="title" ></uni-easyinput>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<radio-group class="color_box" @change="change_color">
|
|
<div class="color_box_item" v-for="(item, index) in radio_colors" :key="item">
|
|
<label class="form-colorinput">
|
|
<radio :value="item.color" :checked="item.color === this.color_sele" :color="item.color" :background-color="item.color"/>
|
|
{{item.text}}
|
|
</label>
|
|
</div>
|
|
|
|
</radio-group>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn me-auto" @click="set_item_close">Close</button>
|
|
<button type="button" class="btn" @click="copy_item">复制</button>
|
|
<button type="button" class="btn" :disabled="!copy_color" @click="pise_item">粘贴</button>
|
|
|
|
<button v-if="event_id==0" type="button" class="btn btn-primary" @click="add_even">添加日程</button>
|
|
|
|
<button v-if="event_id!=0" type="button" class="btn btn-danger" @click="del_even">删除日程</button>
|
|
<button v-if="event_id!=0" type="button" class="btn btn-primary" @click="change_even">修改日程</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<view>
|
|
<!-- 提示信息弹窗 -->
|
|
<uni-popup ref="message" type="message">
|
|
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { public_func } from '@/public_js.js';
|
|
|
|
import FullCalendar from '@fullcalendar/vue3'
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
import timeGridPlugin from '@fullcalendar/timegrid'
|
|
import interactionPlugin from "@fullcalendar/interaction"//拖动插件 需要用npm安装
|
|
import screenfull from 'screenfull'
|
|
|
|
export default {
|
|
components: {
|
|
FullCalendar // make the <FullCalendar> tag available
|
|
},
|
|
onReady() {
|
|
console.log("onReady")
|
|
},
|
|
mounted() {
|
|
console.log("mounted")
|
|
//实例被创建
|
|
//console.log(FullCalendar)
|
|
|
|
this.get_evensts();
|
|
|
|
|
|
|
|
//
|
|
|
|
},
|
|
onLoad() {
|
|
console.log("onLoad");
|
|
clearTimeout(this.auto_get_event_time);
|
|
this.auto_get_event_time=null;
|
|
this.auto_get_event_time=setInterval(this.get_evensts, 5000);
|
|
|
|
},
|
|
onUnload() {
|
|
console.log("onUnload");
|
|
clearTimeout(this.auto_get_event_time);
|
|
this.auto_get_event_time=null;
|
|
},
|
|
onHide() {
|
|
console.log("onHide");
|
|
|
|
|
|
},
|
|
onShow() {
|
|
console.log("onshow")
|
|
},
|
|
methods:{
|
|
// 进入全屏
|
|
enterFullscreen(element)
|
|
{
|
|
screenfull.request();
|
|
},
|
|
|
|
// 退出全屏
|
|
exitFullscreen()
|
|
{
|
|
screenfull.exit();
|
|
},
|
|
|
|
test(){
|
|
|
|
},
|
|
handleDatesRender(arg)
|
|
{
|
|
console.log(arg.currentStart)
|
|
console.log(arg.currentEnd)
|
|
},
|
|
pise_item(){
|
|
this.color_sele=this.copy_color;
|
|
this.title=this.copy_title;
|
|
},
|
|
copy_item(){
|
|
this.copy_color=this.color_sele;
|
|
this.copy_title=this.title;
|
|
},
|
|
change_even(){
|
|
var that = this;
|
|
|
|
uni.request({
|
|
header: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
url:public_func.baseUrl+"api/?ac=ma&do=change",
|
|
method:'POST',
|
|
data:{
|
|
user_id:this.user.id,
|
|
user_pass:this.user.pass,
|
|
id:this.event_id,
|
|
stad_date:this.range[0],
|
|
end_date:this.range[1],
|
|
title:this.title,
|
|
color_sele:this.color_sele,
|
|
type:"events",
|
|
allday:1,
|
|
|
|
},
|
|
timeout:10000,
|
|
success(res) {
|
|
console.log(res.data);
|
|
if(res.data['error_code']==0)
|
|
{
|
|
that.set_item_close();
|
|
that.messageToggle('success',"已修改加日程");
|
|
that.get_evensts();
|
|
|
|
}else
|
|
{
|
|
that.messageToggle('error',res.data['error_msg']);
|
|
return ;
|
|
}
|
|
|
|
|
|
},
|
|
fail() {
|
|
that.messageToggle('error',"网络错误");
|
|
}
|
|
|
|
});
|
|
},
|
|
del_even(){
|
|
var that = this;
|
|
uni.request({
|
|
header: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
url:public_func.baseUrl+"api/?ac=ma&do=del",
|
|
method:'POST',
|
|
data:{
|
|
user_id:this.user.id,
|
|
user_pass:this.user.pass,
|
|
id:this.event_id,
|
|
|
|
|
|
},
|
|
timeout:10000,
|
|
success(res) {
|
|
console.log(res.data);
|
|
if(res.data['error_code']==0)
|
|
{
|
|
that.set_item_close();
|
|
that.messageToggle('success',"已删除");
|
|
that.get_evensts();
|
|
|
|
}else
|
|
{
|
|
that.messageToggle('error',res.data['error_msg']);
|
|
return ;
|
|
}
|
|
|
|
|
|
},
|
|
fail() {
|
|
that.messageToggle('error',"网络错误");
|
|
}
|
|
|
|
});
|
|
},
|
|
get_evensts(){
|
|
//console.log("get_evensts");
|
|
var user=this.user;
|
|
if(user==null)
|
|
{
|
|
user={
|
|
id:"0",
|
|
pass:"0"
|
|
};
|
|
|
|
}
|
|
var that = this;
|
|
uni.request({
|
|
header: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
url:public_func.baseUrl+"api/?ac=ma&do=show",
|
|
method:'POST',
|
|
data:{
|
|
user_id:user.id,
|
|
user_pass:user.pass,
|
|
},
|
|
timeout:10000,
|
|
success(res) {
|
|
console.log(res.data);
|
|
if(res.data['error_code']==0)
|
|
{
|
|
/* var events=res.data['events'].map(item => {
|
|
return { ...item, recurrence: ['RRULE:FREQ=DAILY'] };//给每一项插入一个标签 不过好像没什么用
|
|
});
|
|
that.calendarOptions.events=events; */
|
|
|
|
that.calendarOptions.events=res.data['events'];
|
|
|
|
}else
|
|
{
|
|
that.messageToggle('error',res.data['error_msg']);
|
|
return ;
|
|
}
|
|
|
|
|
|
},
|
|
fail() {
|
|
that.messageToggle('error',"网络错误");
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
updateCurrentMonth(info) {
|
|
const currentDate = info.start;
|
|
const currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以需要加1
|
|
const currentYear = currentDate.getFullYear();
|
|
this.currentMonth = `当前显示的月份是: ${currentYear}年${currentMonth}月`;
|
|
},
|
|
messageToggle(type,msg) {
|
|
this.msgType=type;
|
|
this.messageText=msg;
|
|
this.$refs.message.open();
|
|
},
|
|
add_even()
|
|
{
|
|
var that = this;
|
|
|
|
|
|
|
|
uni.request({
|
|
header: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
url:public_func.baseUrl+"api/?ac=ma&do=add",
|
|
method:'POST',
|
|
data:{
|
|
user_id:this.user.id,
|
|
user_pass:this.user.pass,
|
|
stad_date:this.range[0],
|
|
end_date:this.range[1],
|
|
title:this.title,
|
|
color_sele:this.color_sele,
|
|
type:"events",
|
|
allday:1,
|
|
|
|
},
|
|
timeout:10000,
|
|
success(res) {
|
|
console.log(res.data);
|
|
if(res.data['error_code']==0)
|
|
{
|
|
that.set_item_close();
|
|
that.messageToggle('success',"已添加日程");
|
|
that.get_evensts();
|
|
|
|
}else
|
|
{
|
|
that.messageToggle('error',res.data['error_msg']);
|
|
return ;
|
|
}
|
|
|
|
|
|
},
|
|
fail() {
|
|
that.messageToggle('error',"网络错误");
|
|
}
|
|
|
|
});
|
|
},
|
|
edit_item(e){
|
|
|
|
},
|
|
set_item_show(){
|
|
|
|
this.set_item_flag=true;
|
|
},
|
|
set_item_close(){
|
|
this.set_item_flag=false;
|
|
},
|
|
change_color(ev)
|
|
{
|
|
console.log(ev.detail.value)
|
|
this.color_sele=ev.detail.value;
|
|
},
|
|
get_user(user)
|
|
{
|
|
console.log(user)
|
|
this.user=user;
|
|
},
|
|
update_date(date)
|
|
{
|
|
console.log(date)
|
|
this.range[0]=date[0];
|
|
this.range[1]=date[1];
|
|
}
|
|
|
|
|
|
|
|
},
|
|
data() {
|
|
var that=this;
|
|
return {
|
|
fulldis:false,
|
|
click_time:0,
|
|
set_item_flag:false,
|
|
color_sele:"#066FD1",
|
|
user:null,
|
|
range:[0,0],
|
|
range2:[0,0],
|
|
stad_date:null,
|
|
end_date:null,
|
|
title:"",
|
|
event_username:"",
|
|
event_id:0,
|
|
msgType:"success",
|
|
message:"这是一条成功提示",
|
|
messageText:"",
|
|
show_mon:0,
|
|
auto_get_event_time:null,
|
|
copy_title:"",
|
|
copy_color:null,
|
|
radio_colors:[
|
|
{color:"#066FD1",text:"工作"},
|
|
{color:"#09d119",text:"值班"},
|
|
{color:"#ff00ff",text:"考试"},
|
|
{color:"#ffff00",text:"备用"},
|
|
{color:"#d16c13",text:"个人假期"},
|
|
{color:"#d10d21",text:"公众假期"},
|
|
],
|
|
this_mon_fastday:null,
|
|
this_mon_endday:null,
|
|
show_switch_flag:true,
|
|
calendarOptions: {
|
|
|
|
height:"auto",
|
|
|
|
plugins: [
|
|
dayGridPlugin,
|
|
timeGridPlugin,
|
|
interactionPlugin//导入拖动插件
|
|
],
|
|
|
|
initialView: 'dayGridMonth',
|
|
headerToolbar: {
|
|
left: 'prevYearCustom,prevMonthCustom,todayCustom,nextMonthCustom,nextYearCustom',
|
|
center: 'title',
|
|
right: 'quanping,dayGridMonth'//,timeGridWeek,timeGridDay'
|
|
},
|
|
fixedWeekCount:false,
|
|
weekNumbers:true,
|
|
businessHours: {
|
|
dow: [ 1, 2, 3, 4 ,5], // 周一 - 周四
|
|
|
|
start: '9:00', // 上午10点开始
|
|
end: '18:00', // 下午18点结束
|
|
},
|
|
//weekNumbersWithinDays:true,
|
|
weekends: true,//是否显示周末
|
|
|
|
|
|
// 自定义按钮
|
|
customButtons: {
|
|
prevYearCustom: {
|
|
text: '上一年',
|
|
click: function() {
|
|
that.show_switch_flag=true;
|
|
that.$refs.fullCalendar.getApi().prevYear();
|
|
}
|
|
},
|
|
nextYearCustom: {
|
|
text: '下一年',
|
|
click: function() {
|
|
that.show_switch_flag=true;
|
|
that.$refs.fullCalendar.getApi().nextYear();
|
|
}
|
|
},
|
|
prevMonthCustom: {
|
|
text: '上月',
|
|
click: function() {
|
|
that.show_switch_flag=true;
|
|
that.$refs.fullCalendar.getApi().prev(); // 将日历后退一步（例如，一个月或一周）。
|
|
}
|
|
},
|
|
nextMonthCustom: {
|
|
text: '下月',
|
|
click: function() {
|
|
that.show_switch_flag=true;
|
|
that.$refs.fullCalendar.getApi().next(); // 将日历向前移动一步（例如，一个月或一周）。
|
|
|
|
}
|
|
},
|
|
todayCustom: {
|
|
text: '今天',
|
|
click: function() {
|
|
that.show_switch_flag=true;
|
|
that.$refs.fullCalendar.getApi().today();
|
|
}
|
|
},
|
|
quanping: {
|
|
text: '全屏',
|
|
click: function() {
|
|
if(that.fulldis)
|
|
{
|
|
that.fulldis=false;
|
|
that.exitFullscreen();
|
|
}else
|
|
{
|
|
that.fulldis=true;
|
|
|
|
that.enterFullscreen();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
datesSet(info)
|
|
{
|
|
//console.log(info);
|
|
that.this_mon_fastday=info.start;
|
|
that.this_mon_endday=info.end;
|
|
|
|
},
|
|
dayCellDidMount(info)
|
|
{
|
|
|
|
switch(info.dow)
|
|
{
|
|
case 0:
|
|
info.el.style.backgroundColor = '#ffb5b5';
|
|
break;
|
|
case 6:
|
|
info.el.style.backgroundColor = '#ffb5b5';
|
|
break;
|
|
}
|
|
|
|
|
|
if(info.isToday)
|
|
{
|
|
//info.el.style.backgroundColor = '#ffff7f';
|
|
}
|
|
|
|
info.el.style.border = '1px solid #4b4b4b'; // 浅蓝色边框
|
|
|
|
|
|
|
|
},
|
|
selectable: true,
|
|
dateClick(info) {
|
|
var click_time;
|
|
const now = new Date();
|
|
const nextime=now.getTime()-that.click_time
|
|
|
|
if(nextime<400)
|
|
{
|
|
console.log(nextime)//双击时间
|
|
|
|
var click_date={
|
|
date:info.date,
|
|
datestr:info.dateStr,
|
|
|
|
}
|
|
console.log(click_date)
|
|
|
|
if(that.user==null)
|
|
{
|
|
uni.redirectTo({
|
|
url:'/pages/login/login'
|
|
});
|
|
}else
|
|
{
|
|
that.event_id=0;
|
|
that.title="";
|
|
that.color_sele=that.radio_colors[0].color;
|
|
that.range[0]=click_date.datestr;
|
|
|
|
var next_day=new Date(click_date.datestr);
|
|
next_day.setDate(next_day.getDate() + 1);
|
|
|
|
that.range[1]=public_func.formatDate(next_day);
|
|
|
|
that.set_item_show();
|
|
}
|
|
|
|
}
|
|
|
|
that.click_time=now.getTime()
|
|
|
|
},
|
|
select(info) {
|
|
if((info.end-info.start)>86400000)
|
|
{
|
|
var select_date={
|
|
start:info.start,
|
|
end:info.end,
|
|
startStr:info.startStr,
|
|
endStr:info.endStr,
|
|
}
|
|
console.log(select_date)
|
|
|
|
if(that.user!=null)
|
|
{
|
|
that.event_id=0;
|
|
that.title="";
|
|
that.color_sele=that.radio_colors[0].color;
|
|
that.range[0]=public_func.formatDate(select_date.start);
|
|
that.range[1]=public_func.formatDate(select_date.end);
|
|
that.set_item_show();
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
},
|
|
//placeholder:true,
|
|
eventClick(info) {
|
|
|
|
console.log(info)
|
|
|
|
const now = new Date();
|
|
const nextime=now.getTime()-this.click_time
|
|
|
|
if(nextime<400)
|
|
{
|
|
console.log(nextime)//双击时间
|
|
|
|
var ev={
|
|
id:info.el.fcSeg.eventRange.def.publicId,
|
|
title:info.el.fcSeg.eventRange.def.title,
|
|
allDay:info.el.fcSeg.eventRange.def.allDay,
|
|
start:info.el.fcSeg.eventRange.range.start,
|
|
end:info.el.fcSeg.eventRange.range.end,
|
|
bg_color:info.el.fcSeg.eventRange.ui.backgroundColor,
|
|
edit:info.el.fcSeg.eventRange.ui.startEditable,
|
|
username:info.el.fcSeg.eventRange.def.extendedProps.event_username,
|
|
}
|
|
|
|
|
|
|
|
if(that.user==null)
|
|
{
|
|
uni.redirectTo({
|
|
url:'/pages/login/login'
|
|
});
|
|
}else
|
|
{
|
|
if(ev.edit)
|
|
{
|
|
that.event_id=ev.id;
|
|
that.title=ev.title;
|
|
that.color_sele=ev.bg_color;
|
|
that.range[0]=public_func.formatDate(ev.start);
|
|
that.range[1]=public_func.formatDate(ev.end);
|
|
|
|
that.event_username=ev.username;
|
|
|
|
that.set_item_show();
|
|
}else
|
|
{
|
|
that.messageToggle('warn',"这个不是您的日程");
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
this.click_time=now.getTime()
|
|
|
|
|
|
|
|
// change the border color just for fun
|
|
//info.el.style.borderColor = 'red';
|
|
},
|
|
|
|
eventDrop(info){
|
|
var olo_ev={
|
|
id:info.oldEvent._def.publicId,
|
|
title:info.oldEvent._def.title,
|
|
allDay:info.oldEvent._def.allDay,
|
|
start:info.oldEvent._instance.range.start,
|
|
end:info.oldEvent._instance.range.end,
|
|
}
|
|
var ev={
|
|
id:info.event._def.publicId,
|
|
title:info.event._def.title,
|
|
allDay:info.event._def.allDay,
|
|
start:info.event._instance.range.start,
|
|
end:info.event._instance.range.end,
|
|
}
|
|
//console.log(info)
|
|
//console.log(olo_ev)
|
|
console.log(info.event)
|
|
|
|
//var user=that.user;
|
|
|
|
//var that2 = this;
|
|
uni.request({
|
|
header: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
url:public_func.baseUrl+"api/?ac=ma&do=event_droup",
|
|
method:'POST',
|
|
data:{
|
|
user_id:that.user.id,
|
|
user_pass:that.user.pass,
|
|
id:ev.id,
|
|
start:public_func.formatDate(ev.start),
|
|
end:public_func.formatDate(ev.end),
|
|
|
|
|
|
},
|
|
timeout:10000,
|
|
success(res) {
|
|
console.log(res.data);
|
|
if(res.data['error_code']==0)
|
|
{
|
|
|
|
//that.messageToggle('success', public_func.formatDate(ev.start));
|
|
that.get_evensts();
|
|
|
|
}else
|
|
{
|
|
that.messageToggle('error',res.data['error_msg']);
|
|
return ;
|
|
}
|
|
|
|
|
|
},
|
|
fail() {
|
|
that.messageToggle('error',"网络错误");
|
|
}
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
//weekNumbers:true,//是否在日历中显示周次(一年中的第几周)
|
|
firstDay:1,
|
|
events: [],
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.color_box
|
|
{
|
|
display: flex;
|
|
//justify-content: space-between; /* 调整子元素之间的间距 */
|
|
.color_box_item
|
|
{
|
|
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px 5px rgba(207, 207, 207, 0.5); /* 外部阴影效果 */
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.input{
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.date-seles{
|
|
display: flex;
|
|
flex-wrap: wrap; /* 允许换行 */
|
|
padding-bottom: 10rpx;
|
|
|
|
}
|
|
// 相应的CSS样式
|
|
.fc-event-centered {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.fc-highlight {
|
|
background: #55aaff !important;
|
|
}
|
|
</style>
|