|
|
@@ -1,22 +1,22 @@
|
|
|
<template>
|
|
|
<div class="app-container" v-if="isReloadData">
|
|
|
<FullCalendar defaultView="dayGridMonth" :options="calendarOptions" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO"
|
|
|
- showNonCurrentDates="false"
|
|
|
- :eventTimeFormat="evnetTime"
|
|
|
- :header="header"
|
|
|
- :buttonText="buttonText"
|
|
|
- :displayEventEnd="true"
|
|
|
- :allDayDefault="false"
|
|
|
- eventLimitText="查看所有"
|
|
|
- :fixedWeekCount="false"
|
|
|
- :showNonCurrentDates="false"
|
|
|
- :eventLimit="true"
|
|
|
- :allDaySlot="false"
|
|
|
- :weekends="true"
|
|
|
- @dateClick="handleDateClick"
|
|
|
- @eventClick="handleEventClick"
|
|
|
+ showNonCurrentDates="false"
|
|
|
+ :eventTimeFormat="evnetTime"
|
|
|
+ :header="header"
|
|
|
+ :buttonText="buttonText"
|
|
|
+ :displayEventEnd="true"
|
|
|
+ :allDayDefault="false"
|
|
|
+ eventLimitText="查看所有"
|
|
|
+ :fixedWeekCount="false"
|
|
|
+ :showNonCurrentDates="false"
|
|
|
+ :eventLimit="true"
|
|
|
+ :allDaySlot="false"
|
|
|
+ :weekends="true"
|
|
|
+ @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">
|
|
|
@@ -60,7 +60,7 @@
|
|
|
<el-button type="primary" @click="submit()">确定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
-<!-- 编辑日程-->
|
|
|
+ <!-- 编辑日程-->
|
|
|
<el-dialog :visible.sync="schedule1" title="编辑日程" append-to-body width="40%" >
|
|
|
<el-row :gutter="12">
|
|
|
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
|
|
@@ -107,7 +107,7 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+</template>
|
|
|
|
|
|
<script>
|
|
|
import { addRemindEvents,selectList,delSchenule,findList,updatarichen} from "@/api/officework/index";
|
|
|
@@ -132,264 +132,276 @@
|
|
|
components: {
|
|
|
FullCalendar
|
|
|
},
|
|
|
- data(){
|
|
|
- return {
|
|
|
- isReloadData: true,
|
|
|
- loading:true,
|
|
|
- dialogVisible:false,
|
|
|
- qqq:'',
|
|
|
- kaishi:'',
|
|
|
- jieshu:'',
|
|
|
- eveid:'',
|
|
|
- schedule: false,
|
|
|
- schedule1:false,
|
|
|
- formData: {
|
|
|
- id:"",
|
|
|
- start: null,
|
|
|
- field105: null,
|
|
|
- finish: null,
|
|
|
- field107: null,
|
|
|
- hour: undefined,
|
|
|
- incident: undefined,
|
|
|
- },
|
|
|
- rules: {
|
|
|
- start: [{
|
|
|
- required: true,
|
|
|
- message: '请选择开始日期',
|
|
|
- trigger: 'change'
|
|
|
- }],
|
|
|
- finish: [{
|
|
|
- required: true,
|
|
|
- message: '请选择结束日期',
|
|
|
- trigger: 'change'
|
|
|
- }],
|
|
|
- hour: [{
|
|
|
- required: true,
|
|
|
- message: '请选择提醒时间',
|
|
|
- trigger: 'blur'
|
|
|
- }],
|
|
|
- incident: [{
|
|
|
- required: true,
|
|
|
- message: '请输入你的记录',
|
|
|
- trigger: 'blur'
|
|
|
- }],
|
|
|
- },
|
|
|
- calendarOptions: {
|
|
|
- plugins: [ dayGridPlugin, timeGridPlugin,interactionPlugin ,listPlugin],
|
|
|
- initialView: 'dayGridMonth',
|
|
|
- dateClick: this.handleDateClick,
|
|
|
- eventClick:this.handleEventClick,
|
|
|
- locale:"zh",
|
|
|
- allDayDefault:false,
|
|
|
- header:{
|
|
|
- left: 'prev,next today',
|
|
|
- center: 'title',
|
|
|
- right: 'month,agendaWeek,agendaDay,list'
|
|
|
- },
|
|
|
- buttonText: {
|
|
|
- today: '今天',
|
|
|
- month: '月',
|
|
|
- week: '周',
|
|
|
- day: '天',
|
|
|
- list: '列表'
|
|
|
- },
|
|
|
- events: [
|
|
|
- // { title: 'event 1', date: '2020-08-05' },
|
|
|
- // { title: 'event 2', date: '2020-08-06' },
|
|
|
- // { title: '部门会议', start: new Date(),end:'2020-08-10' }
|
|
|
- ]
|
|
|
- },
|
|
|
- plugins: [
|
|
|
- dayGridPlugin,
|
|
|
- timeGridPlugin,
|
|
|
- interactionPlugin ,
|
|
|
- listPlugin],
|
|
|
- header:{
|
|
|
- left: 'prev,next today',
|
|
|
- center: 'title',
|
|
|
- right: 'month,agendaWeek,agendaDay,list'
|
|
|
- },
|
|
|
- buttonText: {
|
|
|
- today: '今天',
|
|
|
- month: '月',
|
|
|
- week: '周',
|
|
|
- day: '天',
|
|
|
- list: '列表'
|
|
|
- },
|
|
|
- evnetTime: {
|
|
|
- hour: 'numeric',
|
|
|
- minute: '2-digit',
|
|
|
- hour12: false
|
|
|
- },
|
|
|
- value: new Date(),
|
|
|
- arrList:undefined
|
|
|
- }
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ isReloadData: true,
|
|
|
+ loading:true,
|
|
|
+ dialogVisible:false,
|
|
|
+ qqq:'',
|
|
|
+ kaishi:'',
|
|
|
+ jieshu:'',
|
|
|
+ eveid:'',
|
|
|
+ schedule: false,
|
|
|
+ schedule1:false,
|
|
|
+ formData: {
|
|
|
+ id:"",
|
|
|
+ start: null,
|
|
|
+ field105: null,
|
|
|
+ finish: null,
|
|
|
+ field107: null,
|
|
|
+ hour: undefined,
|
|
|
+ incident: undefined,
|
|
|
+ color:null
|
|
|
},
|
|
|
+ rules: {
|
|
|
+ start: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择开始日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ finish: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择结束日期',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ hour: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择提醒时间',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ incident: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入你的记录',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ calendarOptions: {
|
|
|
+ plugins: [ dayGridPlugin, timeGridPlugin,interactionPlugin ,listPlugin],
|
|
|
+ initialView: 'dayGridMonth',
|
|
|
+ dateClick: this.handleDateClick,
|
|
|
+ eventClick:this.handleEventClick,
|
|
|
+ locale:"zh",
|
|
|
+ allDayDefault:false,
|
|
|
+ header:{
|
|
|
+ left: 'prev,next today',
|
|
|
+ center: 'title',
|
|
|
+ right: 'month,agendaWeek,agendaDay,list'
|
|
|
+ },
|
|
|
+ buttonText: {
|
|
|
+ today: '今天',
|
|
|
+ month: '月',
|
|
|
+ week: '周',
|
|
|
+ day: '天',
|
|
|
+ list: '列表'
|
|
|
+ },
|
|
|
+ events: [
|
|
|
+ // { title: 'event 1', date: '2020-08-05' },
|
|
|
+ // { title: 'event 2', date: '2020-08-06' },
|
|
|
+ // { title: '部门会议', start: new Date(),end:'2020-08-10' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ plugins: [
|
|
|
+ dayGridPlugin,
|
|
|
+ timeGridPlugin,
|
|
|
+ interactionPlugin ,
|
|
|
+ listPlugin],
|
|
|
+ header:{
|
|
|
+ left: 'prev,next today',
|
|
|
+ center: 'title',
|
|
|
+ right: 'month,agendaWeek,agendaDay,list'
|
|
|
+ },
|
|
|
+ buttonText: {
|
|
|
+ today: '今天',
|
|
|
+ month: '月',
|
|
|
+ week: '周',
|
|
|
+ day: '天',
|
|
|
+ list: '列表'
|
|
|
+ },
|
|
|
+ evnetTime: {
|
|
|
+ hour: 'numeric',
|
|
|
+ minute: '2-digit',
|
|
|
+ hour12: false
|
|
|
+ },
|
|
|
+ value: new Date(),
|
|
|
+ arrList:undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
this.toList();
|
|
|
},
|
|
|
- methods:{
|
|
|
- //取消按钮
|
|
|
- cancel() {
|
|
|
- this.schedule1 = false;
|
|
|
- this.reset();
|
|
|
- },
|
|
|
- // 表单重置
|
|
|
- reset() {
|
|
|
- this.formData = {
|
|
|
- id:"",
|
|
|
- start: null,
|
|
|
- field105: null,
|
|
|
- finish: null,
|
|
|
- field107: null,
|
|
|
- hour: undefined,
|
|
|
- incident: undefined,
|
|
|
- },
|
|
|
- this.resetForm("elForm");
|
|
|
- },
|
|
|
- //修改日程
|
|
|
- updatarc(){
|
|
|
- var formdata = new FormData
|
|
|
- formdata.append('id',this.formData.id)
|
|
|
- formdata.append('start',this.formData.start)
|
|
|
- formdata.append('finish',this.formData.finish)
|
|
|
- formdata.append('hour',this.formData.hour)
|
|
|
- formdata.append('incident',this.formData.incident)
|
|
|
- updatarichen(formdata).then(response => {
|
|
|
- // console.log(response)
|
|
|
- // if (response.code === 200) {
|
|
|
- this.msgSuccess("修改成功");
|
|
|
- this.schedule1=false;
|
|
|
- this.calendarOptions.events = [];
|
|
|
- this.toList();
|
|
|
- // }
|
|
|
- });
|
|
|
- this.resetForm();
|
|
|
+ methods:{
|
|
|
+ //取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.schedule1 = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.formData = {
|
|
|
+ id:"",
|
|
|
+ start: null,
|
|
|
+ field105: null,
|
|
|
+ finish: null,
|
|
|
+ field107: null,
|
|
|
+ hour: undefined,
|
|
|
+ incident: undefined,
|
|
|
+ },
|
|
|
+ this.resetForm("elForm");
|
|
|
+ },
|
|
|
+ //修改日程
|
|
|
+ updatarc(){
|
|
|
+ var formdata = new FormData
|
|
|
+ formdata.append('id',this.formData.id)
|
|
|
+ formdata.append('start',this.formData.start)
|
|
|
+ formdata.append('finish',this.formData.finish)
|
|
|
+ formdata.append('hour',this.formData.hour)
|
|
|
+ formdata.append('incident',this.formData.incident)
|
|
|
+ updatarichen(formdata).then(response => {
|
|
|
+ // console.log(response)
|
|
|
+ // if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.schedule1=false;
|
|
|
+ this.calendarOptions.events = [];
|
|
|
+ this.toList();
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ this.resetForm();
|
|
|
|
|
|
- },
|
|
|
- reload() {
|
|
|
- this.isReloadData = false;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.isReloadData = true;
|
|
|
- });
|
|
|
- },
|
|
|
+ },
|
|
|
+ reload() {
|
|
|
+ this.isReloadData = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.isReloadData = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
toList (){
|
|
|
// this.loading = true;
|
|
|
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,
|
|
|
+ color:response.rows[i].color
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- handleDateClick(arg) {
|
|
|
- this.$confirm('是否要添加一个新的日程?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- this.schedule = true;
|
|
|
- this.formData = {};
|
|
|
- this.formData.start = new Date();
|
|
|
- }).catch(() => {});
|
|
|
- },
|
|
|
- handleEventClick(info) {
|
|
|
- // alert('日程安排为：' + info.event.title);
|
|
|
- // console.log(info.event)
|
|
|
- this.eveid = info.event._def.extendedProps.defId
|
|
|
+ handleDateClick(arg) {
|
|
|
+ this.$confirm('是否要添加一个新的日程?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.schedule = true;
|
|
|
+ this.formData = {};
|
|
|
+ this.formData.start = new Date();
|
|
|
+ //var b=["#D81C29","#17E7FF","#5CD82B","#B28226","#D81C29","#0DD8D1","#747474"]
|
|
|
+ // this.formData.color=b[Math.round(Math.random() * (7 - 1) + 1)];
|
|
|
+ var r = Math.floor(Math.random()*255);
|
|
|
+ var g = Math.floor(Math.random()*255);
|
|
|
+ var b = Math.floor(Math.random()*255);
|
|
|
+ var aa = 'rgba('+ r +','+ g +','+ b +',0.8)';
|
|
|
+ this.formData.color=aa
|
|
|
+ console.log(this.formData.color)
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ handleEventClick(info) {
|
|
|
+ // alert('日程安排为：' + info.event.title);
|
|
|
+ // console.log(info.event)
|
|
|
+ this.eveid = info.event._def.extendedProps.defId
|
|
|
|
|
|
- this.schedule1 = true;
|
|
|
- // this.updatarc();
|
|
|
- let defId = this.eveid;
|
|
|
- var formdata = new FormData;
|
|
|
- formdata.append('id', defId)
|
|
|
- findList(defId).then(response =>{
|
|
|
- console.log(response.rows[0])
|
|
|
- this.formData= response.rows[0];
|
|
|
+ this.schedule1 = true;
|
|
|
+ // this.updatarc();
|
|
|
+ let defId = this.eveid;
|
|
|
+ var formdata = new FormData;
|
|
|
+ formdata.append('id', defId)
|
|
|
+ findList(defId).then(response =>{
|
|
|
+ console.log(response.rows[0])
|
|
|
+ this.formData= response.rows[0];
|
|
|
|
|
|
- });
|
|
|
- },
|
|
|
- //添加日程
|
|
|
- submit: function() {
|
|
|
- this.$refs["elForm"].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- addRemindEvents(this.formData).then(response => {
|
|
|
- if (response.code === 200) {
|
|
|
- this.msgSuccess("添加成功");
|
|
|
- this.schedule=false;
|
|
|
- // this.toList();
|
|
|
- this.calendarOptions.events = [];
|
|
|
- this.toList();
|
|
|
- }
|
|
|
- });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //添加日程
|
|
|
+ submit: function() {
|
|
|
+ this.$refs["elForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ addRemindEvents(this.formData).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("添加成功");
|
|
|
+ this.schedule=false;
|
|
|
+ // this.toList();
|
|
|
+ this.calendarOptions.events = [];
|
|
|
+ this.toList();
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
- this.resetForm();
|
|
|
+ this.resetForm();
|
|
|
|
|
|
- },
|
|
|
- //删除日程
|
|
|
- deletrichen(){
|
|
|
- let defId = this.eveid;
|
|
|
- var formdata = new FormData
|
|
|
- formdata.append('id', defId)
|
|
|
- this.$confirm('是否确认删除日程?', "警告", {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(function() {
|
|
|
- return delSchenule(formdata);
|
|
|
- }).then(() => {
|
|
|
- this.reload();
|
|
|
- this.msgSuccess("删除成功");
|
|
|
- this.schedule1 = false;
|
|
|
- this.calendarOptions.events = [];
|
|
|
- this.toList();
|
|
|
- }).catch(function() {});
|
|
|
- },
|
|
|
- resetForm() {
|
|
|
- this.formData=[];
|
|
|
- }
|
|
|
- },
|
|
|
- inheritAttrs: false,
|
|
|
- // components: {},
|
|
|
- props: [],
|
|
|
- computed: {},
|
|
|
- watch: {},
|
|
|
+ },
|
|
|
+ //删除日程
|
|
|
+ deletrichen(){
|
|
|
+ let defId = this.eveid;
|
|
|
+ var formdata = new FormData
|
|
|
+ formdata.append('id', defId)
|
|
|
+ this.$confirm('是否确认删除日程?', "警告", {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(function() {
|
|
|
+ return delSchenule(formdata);
|
|
|
+ }).then(() => {
|
|
|
+ this.reload();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ this.schedule1 = false;
|
|
|
+ this.calendarOptions.events = [];
|
|
|
+ this.toList();
|
|
|
+ }).catch(function() {});
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.formData=[];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ inheritAttrs: false,
|
|
|
+ // components: {},
|
|
|
+ props: [],
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
|
|
|
- mounted() {},
|
|
|
- }
|
|
|
+ mounted() {},
|
|
|
+ }
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
@import '~@fullcalendar/core/main.css';
|
|
|
@import '~@fullcalendar/daygrid/main.css';
|
|
|
|
|
|
.el-calendar__title{font-size: 22px;}
|
|
|
- .calendar-day{
|
|
|
- text-align: center;
|
|
|
- color: #202535;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .is-selected{
|
|
|
- color: #F8A535;
|
|
|
- font-size: 10px;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
|
|
|
- content: '当月';
|
|
|
- }
|
|
|
- .prev,.next{background: #efefef;}
|
|
|
- .prev .calendar-day,.next .calendar-day{color: #999;}
|
|
|
- .el-calendar-table td.is-selected {
|
|
|
- background-color:#d6ebff !important;
|
|
|
- }
|
|
|
- .el-calendar-table .el-calendar-day:hover{background-color:#d6ebff !important;}
|
|
|
- .xsmini{width:20px;float: right;}
|
|
|
+ .calendar-day{
|
|
|
+ text-align: center;
|
|
|
+ color: #202535;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .is-selected{
|
|
|
+ color: #F8A535;
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
|
|
|
+ content: '当月';
|
|
|
+ }
|
|
|
+ .prev,.next{background: #efefef;}
|
|
|
+ .prev .calendar-day,.next .calendar-day{color: #999;}
|
|
|
+ .el-calendar-table td.is-selected {
|
|
|
+ background-color:#d6ebff !important;
|
|
|
+ }
|
|
|
+ .el-calendar-table .el-calendar-day:hover{background-color:#d6ebff !important;}
|
|
|
+ .xsmini{width:20px;float: right;}
|
|
|
</style>
|
安生
