|
|
@@ -1,199 +1,246 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
-<el-calendar v-model="value" id="calendar">
|
|
|
- <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
|
|
- <template
|
|
|
- slot="dateCell"
|
|
|
- slot-scope="{date, data}">
|
|
|
- <!--自定义内容-->
|
|
|
- <div>
|
|
|
- <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}<el-button plain class="xsmini" size="mini" type="primary" icon="el-icon-edit" @click="schedule = true"></el-button></div>
|
|
|
- <div v-for="item in calendarData">
|
|
|
- <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
|
|
|
- <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
|
|
|
- <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
|
|
|
- <div class="is-selected">{{item.things}}</div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div v-else></div>
|
|
|
- </div>
|
|
|
- <div v-else></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-</el-calendar>
|
|
|
-<el-dialog :visible.sync="schedule" title="添加日程" append-to-body width="40%" @click="close">
|
|
|
- <el-row :gutter="12">
|
|
|
- <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="开始时间" prop="field101">
|
|
|
- <el-date-picker
|
|
|
- v-model="formData.start"
|
|
|
- type="datetime"
|
|
|
- :style="{width: '100%'}"
|
|
|
- placeholder="选择日期时间">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
+ <FullCalendar defaultView="dayGridMonth" :options="calendarOptions" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO"
|
|
|
+ showNonCurrentDates="false"
|
|
|
+ :eventTimeFormat="evnetTime"
|
|
|
+ :header="header"
|
|
|
+ :buttonText="buttonText"
|
|
|
+ @dateClick="handleDateClick"
|
|
|
+ @eventClick="handleEventClick"
|
|
|
+ />
|
|
|
+ <el-dialog :visible.sync="schedule" title="添加日程" append-to-body width="40%" @click="close">
|
|
|
+ <el-row :gutter="12">
|
|
|
+ <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="开始时间" prop="field101">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.start"
|
|
|
+ type="datetime"
|
|
|
+ :style="{width: '100%'}"
|
|
|
+ placeholder="选择日期时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="结束时间" prop="field101">
|
|
|
- <el-date-picker
|
|
|
- v-model="formData.finish"
|
|
|
- type="datetime"
|
|
|
- :style="{width: '100%'}"
|
|
|
- placeholder="选择日期时间">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="结束时间" prop="field101">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.finish"
|
|
|
+ type="datetime"
|
|
|
+ :style="{width: '100%'}"
|
|
|
+ placeholder="选择日期时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="提前提醒" prop="field108">
|
|
|
- <el-input v-model="formData.hour" placeholder="小时提醒我" clearable :style="{width: '100%'}">
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="日程内容" prop="field109">
|
|
|
- <el-input v-model="formData.incident" type="textarea" placeholder="记录你将要做的一件事"
|
|
|
- :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
- </el-row>
|
|
|
- <div slot="footer">
|
|
|
- <el-button @click="schedule = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="submit()">确定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
-</div>
|
|
|
-</template>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="提前提醒" prop="field108">
|
|
|
+ <el-input v-model="formData.hour" placeholder="小时提醒我" clearable :style="{width: '100%'}">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="日程内容" prop="field109">
|
|
|
+ <el-input v-model="formData.incident" type="textarea" placeholder="记录你将要做的一件事"
|
|
|
+ :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="schedule = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submit()">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<script>
|
|
|
- import { addRemindEvents,selectList} from "@/api/officework/index";
|
|
|
+ import { addRemindEvents,selectList,delSchenule} from "@/api/officework/index";
|
|
|
+ import FullCalendar from '@fullcalendar/vue'
|
|
|
+ import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
+ import interactionPlugin from '@fullcalendar/interaction'
|
|
|
+ import '@fullcalendar/core/main.css';
|
|
|
+ import { formatDate } from '@fullcalendar/vue';
|
|
|
+
|
|
|
+ let str = formatDate(new Date(), {
|
|
|
+ month: 'long',
|
|
|
+ year: 'numeric',
|
|
|
+ day: 'numeric'
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(str);
|
|
|
+
|
|
|
import log from '../../../monitor/job/log'
|
|
|
- export default {
|
|
|
- name: "calendar",
|
|
|
- // 表单参数
|
|
|
- form: {},
|
|
|
+ export default{
|
|
|
+ name: "schedule",
|
|
|
+ components: {
|
|
|
+ FullCalendar
|
|
|
+ },
|
|
|
data(){
|
|
|
return {
|
|
|
- calendarData:[],
|
|
|
+ dialogVisible:false,
|
|
|
+ qqq:'',
|
|
|
+ kaishi:'',
|
|
|
+ jieshu:'',
|
|
|
+ eveid:'',
|
|
|
schedule: false,
|
|
|
- formData: {
|
|
|
- start: null,
|
|
|
- field105: null,
|
|
|
- finish: null,
|
|
|
- field107: null,
|
|
|
- hour: undefined,
|
|
|
- incident: undefined,
|
|
|
- },
|
|
|
- rules: {
|
|
|
- start: [{
|
|
|
- required: true,
|
|
|
- message: '请选择开始日期',
|
|
|
- trigger: 'change'
|
|
|
- }],
|
|
|
- field105: [],
|
|
|
- finish: [{
|
|
|
- required: true,
|
|
|
- message: '请选择结束日期',
|
|
|
- trigger: 'change'
|
|
|
- }],
|
|
|
- field107: [],
|
|
|
- hour: [{
|
|
|
- required: true,
|
|
|
- message: '小时提醒我',
|
|
|
- trigger: 'blur'
|
|
|
- }],
|
|
|
- incident: [{
|
|
|
- required: true,
|
|
|
- message: '记录你将要做的一件事',
|
|
|
- trigger: 'blur'
|
|
|
- }],
|
|
|
- },
|
|
|
+ formData: {
|
|
|
+ start: null,
|
|
|
+ field105: null,
|
|
|
+ finish: null,
|
|
|
+ field107: null,
|
|
|
+ hour: undefined,
|
|
|
+ incident: undefined,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ start: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择开始日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ field105: [],
|
|
|
+ finish: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择结束日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ field107: [],
|
|
|
+ hour: [{
|
|
|
+ required: true,
|
|
|
+ message: '小时提醒我',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ incident: [{
|
|
|
+ required: true,
|
|
|
+ message: '记录你将要做的一件事',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ buttonText: {
|
|
|
+ today: '今天',
|
|
|
+ month: '月',
|
|
|
+ week: '周',
|
|
|
+ day: '天',
|
|
|
+ list: '列表'
|
|
|
+ },
|
|
|
+
|
|
|
+ calendarOptions: {
|
|
|
+ plugins: [ dayGridPlugin, interactionPlugin ],
|
|
|
+ initialView: 'dayGridMonth',
|
|
|
+ dateClick: this.handleDateClick,
|
|
|
+ eventClick:this.handleEventClick,
|
|
|
+ events: [
|
|
|
+ // { title: 'event 1', date: '2020-08-05' },
|
|
|
+ // { title: 'event 2', date: '2020-08-06' },
|
|
|
+ // { title: '部门会议', start: new Date(),end:'2020-08-10' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ header: {
|
|
|
+ left: 'prev,next today',
|
|
|
+ center: 'title',
|
|
|
+ right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
|
+ },
|
|
|
+ evnetTime: {
|
|
|
+ hour: 'numeric',
|
|
|
+ minute: '2-digit',
|
|
|
+ hour12: false
|
|
|
+ },
|
|
|
+
|
|
|
value: new Date(),
|
|
|
arrList:undefined
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.toList();
|
|
|
+ },
|
|
|
methods:{
|
|
|
+ toList (){
|
|
|
+ selectList(this.formData).then(response => {
|
|
|
+ console.log(response.rows)
|
|
|
+
|
|
|
+ for(var i = 0; i < response.rows.length;i++){
|
|
|
+ this.calendarOptions.events.push({ // add new event data
|
|
|
+ title: response.rows[i].incident,
|
|
|
+ start: response.rows[i].start,
|
|
|
+ end: response.rows[i].finish,
|
|
|
+ defId:response.rows[i].id,
|
|
|
+ // allDay: arg.allDay
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.toList();
|
|
|
+ console.log( this.calendarOptions.events)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // queding(){
|
|
|
+ // this.calendarOptions.events.push({ // add new event data
|
|
|
+ // title: this.formData.hour,
|
|
|
+ // start: this.formData.start,
|
|
|
+ // end:this.formData.finish,
|
|
|
+ // // allDay: arg.allDay
|
|
|
+ // })
|
|
|
+ // this.dialogVisible = false;
|
|
|
+ // },
|
|
|
+ handleDateClick(arg) {
|
|
|
+ if (confirm('您是否要在' + arg.dateStr + '添加一个新的事件?')) {
|
|
|
+ this.schedule = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleEventClick(info) {
|
|
|
+ // alert('日程安排为：' + info.event.title);
|
|
|
+ // console.log(info.event)
|
|
|
+ this.eveid = info.event._def.extendedProps.defId
|
|
|
+ this.deletrichen();
|
|
|
+ //alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
|
|
|
+ //alert('View: ' + info.view.type);
|
|
|
+
|
|
|
+ // change the border color just for fun
|
|
|
+ },
|
|
|
+ //添加日程
|
|
|
submit: function() {
|
|
|
- // formData
|
|
|
addRemindEvents(this.formData).then(response => {
|
|
|
if (response.code === 200) {
|
|
|
this.msgSuccess("添加成功");
|
|
|
this.schedule=false;
|
|
|
+ this.toList();
|
|
|
}
|
|
|
});
|
|
|
+ this.resetForm();
|
|
|
+
|
|
|
},
|
|
|
- toList: function() {
|
|
|
- selectList(this.formData).then(response => {
|
|
|
- console.log(response.rows)
|
|
|
- this.arrList = response.rows;
|
|
|
- let arr = this.arrList;
|
|
|
- var myDate = new Date();
|
|
|
- var aa = [];
|
|
|
- var aaa = [];
|
|
|
- var aaaa =[];
|
|
|
- var bb = [];
|
|
|
- var bbb = [];
|
|
|
+ //删除日程
|
|
|
+ deletrichen(){
|
|
|
+ let defId = this.eveid;
|
|
|
+ this.$confirm('是否确认删除日程?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return delSchenule(defId);
|
|
|
+ }).then(() => {
|
|
|
+ this.toList();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ }).catch(function() {});
|
|
|
|
|
|
- for(var i = 0; i < arr.length;i++ ){
|
|
|
- var staryue = arr[i].starttime.slice(6,7);
|
|
|
- var starri = arr[i].starttime.slice(9,10);
|
|
|
- // var staryue = staryue < 10 ? '0' + staryue : staryue;
|
|
|
- // var starri = starri < 10 ? '0' + starri : starri;
|
|
|
- var finishyue = arr[i].finishtime.slice(6,7) ;
|
|
|
- var finishri = arr[i].finishtime.slice(9,10);
|
|
|
- // var finishyue = finishyue < 10 ? '0' + finishyue : finishyue;
|
|
|
- // var finishri = finishri < 10 ? '0' + finishri : finishri;
|
|
|
- // this.zfqj(staryue,finishyue,starri,finishri);
|
|
|
- var hour = arr[i].hour;
|
|
|
- aa.push(finishyue);
|
|
|
- aaa.push(finishri);
|
|
|
- bb.push(staryue);
|
|
|
- bbb.push(starri);
|
|
|
- aaaa.push(hour);
|
|
|
- var xv = this.zfqj(bb,aa);
|
|
|
- xv = xv < 10 ? '0' + xv : xv;
|
|
|
- var xt = this.zfqj(bbb,aaa);
|
|
|
- console.log(xt)
|
|
|
- xt = xt < 10 ? '0' + xt : xt;
|
|
|
- console.log(xt)
|
|
|
|
|
|
- this.calendarData.push(
|
|
|
- { months: xv,days: xt,things: aaaa[i] },
|
|
|
- )
|
|
|
- // alert(this.calendarData)
|
|
|
- }
|
|
|
- // this.calendarData.push(
|
|
|
- // { months: ['09'],days: ['15'],things: '看电影' },
|
|
|
- // { months: ['10'], days: ['02'],things: '去公园野炊' },
|
|
|
- // { months: ['11'], days: ['02'],things: '看星星' },
|
|
|
- // { months: ['08'], days: ['02'],things: '看月亮' })
|
|
|
- });
|
|
|
},
|
|
|
- zfqj (a,b){
|
|
|
- var arry=[];
|
|
|
- for(var d=a;d<=b;d++){
|
|
|
- var d = d < 10 ? '0' + d : d;
|
|
|
- arry.push(d);
|
|
|
- }
|
|
|
-
|
|
|
- return arry;
|
|
|
+ resetForm() {
|
|
|
+ this.formData=[];
|
|
|
}
|
|
|
},
|
|
|
inheritAttrs: false,
|
|
|
- components: {},
|
|
|
+ // components: {},
|
|
|
props: [],
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
- created() {
|
|
|
- this.toList();
|
|
|
- },
|
|
|
+
|
|
|
mounted() {},
|
|
|
}
|
|
|
</script>
|
|
|
-<style>
|
|
|
+<style lang="less">
|
|
|
+ @import '~@fullcalendar/core/main.css';
|
|
|
+ @import '~@fullcalendar/daygrid/main.css';
|
|
|
+
|
|
|
.el-calendar__title{font-size: 22px;}
|
|
|
.calendar-day{
|
|
|
text-align: center;
|
安生