日程安排

package.json

@@ -40,6 +40,10 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@fullcalendar/core": "^5.2.1",
+    "@fullcalendar/daygrid": "^5.2.0",
+    "@fullcalendar/interaction": "^5.2.0",
+    "@fullcalendar/vue": "^5.2.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
     "bpmn-js": "7.2.1",
@@ -65,6 +69,7 @@
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
+    "vue-fullcalendar": "^1.0.9",
     "vue-quill-editor": "3.0.6",
     "vue-router": "3.0.2",
     "vue-socket.io": "^3.0.9",

src/api/officework/index.js

@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 
+//添加
 export function addRemindEvents(query) {
   return request({
     url: '/remindEvents/add',
@@ -8,6 +9,7 @@ export function addRemindEvents(query) {
   })
 }
 
+//查询
 export function selectList(query) {
   return request({
     url: '/remindEvents/selectList',
@@ -15,4 +17,10 @@ export function selectList(query) {
     params: query
   })
 }
-
+//删除
+export function delSchenule(defId) {
+  return request({
+    url: '/remindEvents/remove/' + defId,
+    method: 'update',
+  })
+}

src/main.js

@@ -21,6 +21,10 @@ import { getConfigKey } from '@/api/system/config'
 import { parseTimeT, parseTime, resetForm, addDateRange, selectDictLabel, download, handleTree } from '@/utils/ruoyi'
 import Pagination from '@/components/Pagination'
 import 'babel-polyfill';
+import FullCalendar from 'vue-fullcalendar'
+
+Vue.use(FullCalendar)
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -111,6 +115,7 @@ Vue.filter('format', function (value, arg) {
   return dateFormat(value, arg);
 })
 
+
 new Vue({
   el: '#app',
   router,

src/views/system/officework/schedule/schedule.vue

@@ -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;