完成日程管理;

src/components/calendar/calendar/addCalendar.vue

@@ -14,6 +14,11 @@
 
 <script>
   import operationCalendar from './operationCalendar'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
   export default {
     name: '',
     components: {
@@ -25,11 +30,27 @@
       }
     },
     methods: {
-      init () {
-        this.$refs.operationCalendar.initAdd()
+      init (info, type) {
+        this.$refs.operationCalendar.initAdd(info, type)
       },
       saveCalendar () {
-        console.log(this.$refs.operationCalendar.getForm())
+        let from = this.$refs.operationCalendar.getForm()
+        let subData = setModule(from.Calendars, 'Calendars')
+        requestAPI(api.saveCalendarAdd, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        }).finally(() => {
+          this.close(true, from.Calendars)
+        })
       },
       close (getList) {
         this.$emit('close', getList)

src/components/calendar/calendar/editCalendar.vue

@@ -7,6 +7,7 @@
         <span slot="operationBtn">
           <el-button type="primary"  @click="saveCalendar" size="mini">保存</el-button>
           <el-button @click="close()" size="mini">关闭</el-button>
+          <el-button @click="deleteCalendar()" size="mini" type="danger">删除</el-button>
         </span>
     </operation-calendar>
   </section>
@@ -14,6 +15,11 @@
 
 <script>
   import operationCalendar from './operationCalendar'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
   export default {
     name: '',
     components: {
@@ -21,15 +27,55 @@
     },
     data () {
       return {
+        id: '',
         errorData: {}
       }
     },
     methods: {
       init (id) {
+        this.id = id
         this.$refs.operationCalendar.initEdit(id)
       },
+      deleteCalendar () {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delCalendar, {
+            data: {
+              id: this.id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.close(true)
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
       saveCalendar () {
-        console.log(this.$refs.operationCalendar.getForm())
+        let from = this.$refs.operationCalendar.getForm()
+        let subData = setModule(from.Calendars, 'Calendars')
+        requestAPI(api.saveCalendarEdit, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        }).finally(() => {
+          this.close(true, from.Calendars)
+        })
       },
       close (getList) {
         this.$emit('close', getList)

src/components/calendar/calendar/operationCalendar.vue

@@ -102,6 +102,13 @@
   import singleSelect from '../../common/singleSelect'
   import singleRadio from '../../common/singleRadio'
 
+  let dateFormatter = (time) => {
+    time = time || ''
+    const date = new Date(time)
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const strDate = date.getDate().toString().padStart(2, '0')
+    return `${date.getFullYear()}-${month}-${strDate}`
+  }
   export default {
     name: '',
     components: {
@@ -152,7 +159,15 @@
       getForm () {
         return {Calendars: this.Calendars}
       },
-      initAdd () {
+      initAdd (info, type) {
+        // this.Calendars.start_at = ''
+        if (type === 'dayGridMonth') {
+          this.Calendars.start_at = info.startStr + ' 00:00:00'
+          this.Calendars.end_at = dateFormatter(new Date(info.endStr).getTime() - 1000 * 60 * 60 * 24) + ' 23:59:59'
+        } else {
+          this.Calendars.start_at = info.startStr
+          this.Calendars.end_at = info.endStr
+        }
         requestAPI(api.getCalendarNewOptions).then(res => {
           Object.keys(this.options).forEach(item => {
             this.options[item] = res.options[item]

src/components/calendar/fullCalendarGrid.vue

@@ -3,6 +3,8 @@
     <FullCalendar
       class='demo-app-calendar'
       ref="fullCalendar"
+      first-day="1"
+      slotDuration="00:30:00"
       :header="{
             left: 'prev,next today',
             center: 'title',
@@ -26,9 +28,8 @@
       scheduler-license-key="GPL-My-Project-Is-Open-Source"
       next-day-threshold="00:00:00"
       @select="selectDate"
-      @dateClick="handleDateClick"
       @eventRender="eventRender"
-      @eventMouseEnter="eventMouseEnter"
+      @eventDragStop="eventDragStop"
       @eventClick="eventClick"
       @datesRender="datesRender"
     />
@@ -72,6 +73,12 @@
       }
     },
     methods: {
+      eventDragStop () {
+        console.log(arguments)
+      },
+      mouseenter () {
+        console.log(arguments)
+      },
       addNewCalendar () {
       },
       resetForm () {
@@ -89,13 +96,12 @@
       },
       eventMouseEnter (info) {
         // $(info.el)
+        console.log(info)
       },
       datesRender (info) {
-        console.log(info)
         $('[data-toggle="tooltip"]').tooltip()
       },
       eventRender (info) {
-        console.log(info)
         // info.el = $('el-tooltip')
         info.el.setAttribute('data-id', info.event.id)
         info.el.setAttribute('data-model', info.event.extendedProps.nonstandard.model)
@@ -109,22 +115,20 @@
         // console.log($(info.el))
       },
       selectDate (info) {
-        console.log(info)
-        info.jsEvent.preventDefault()
-        info.jsEvent.stopPropagation()
-        info.jsEvent.cancelBubble = true
+        // console.log(this.$refs.fullCalendar.getApi().view.type)
+        // info.jsEvent.preventDefault()
         this.$message({
           message: '添加'
         })
-        this.$emit('update:add', info)
-      },
-      handleDateClick (info) {
-        info.jsEvent.preventDefault()
-        this.$message({
-          message: '添加'
-        })
-        this.$emit('update:add', info)
+        this.$emit('update:add', info, this.$refs.fullCalendar.getApi().view.type)
       },
+      // handleDateClick (info) {
+      //   // info.jsEvent.preventDefault()
+      //   this.$message({
+      //     message: '添加'
+      //   })
+      //   this.$emit('update:add', info)
+      // },
       eventClick (info) {
         info.jsEvent.preventDefault()
         this.$message({
@@ -133,7 +137,6 @@
         this.$emit('update:edit', info)
       },
       calendarEvents (info, successCallback, failureCallback) {
-        console.log(info)
         let ids = {}
         if (this.userId) {
           ids.user_id = this.userId
@@ -152,16 +155,24 @@
           successCallback(res.event)
           this.defaultDate = res.defaultDate
         }).catch(_ => {
+        }).finally(() => {
+          $('[data-toggle="tooltip"]').tooltip()
         })
+      },
+      updateDate () {
+        this.$refs.fullCalendar.getApi().refetchEvents()
       }
     },
     created () {
-      // this.getFilter()
-      console.log(this.$refs.fullCalendar)
     },
     mounted () {
     },
-    props: ['userId', 'departmentId']
+    props: ['userId', 'departmentId'],
+    watch: {
+      'userId' (val) {
+        this.$refs.fullCalendar.getApi().refetchEvents()
+      }
+    }
   }
 </script>
 

src/components/calendar/fullCalendarLine.vue

@@ -41,7 +41,6 @@
       scheduler-license-key="GPL-My-Project-Is-Open-Source"
       next-day-threshold="00:00:00"
       @eventRender="eventRender"
-      @dateClick="handleDateClick"
       @eventClick="eventClick"
       @datesRender="datesRender"
       @select="selectTime"
@@ -127,15 +126,6 @@
           $(info.el).find('.fc-sticky').removeAttr('style')
         })
       },
-      handleDateClick (info) {
-        console.log(info)
-        info.jsEvent.preventDefault()
-        this.$message({
-          message: '添加'
-        })
-        $('.fc-sticky').removeAttr('style')
-        this.$emit('update:add', info)
-      },
       selectTime (info) {
         info.jsEvent.preventDefault()
         this.$message({
@@ -174,6 +164,9 @@
         }).finally(() => {
           $('[data-toggle="tooltip"]').tooltip()
         })
+      },
+      updateDate () {
+        this.$refs.fullCalendar.getApi().refetchEvents()
       }
     },
     created () {

src/components/calendar/list.vue

@@ -52,17 +52,17 @@
           </Pagenation>
         </template>
         <template v-else>
-          <component :is="calendarPage" ref="calendarRef"
+          <component :is="calendarPage" :ref="calendarRef"
                               :user-id="form['CalendarSearch[created_by]']"
                               :department-id="form['CalendarSearch[department_id]']"
                               :resources="resources"
-                              @update:add="info => {addItem()}"
-                              @update:edit="info => {editItem(info)}"></component>
+                              @update:add="(info, type) => {addItem(info, type)}"
+                              @update:edit="(info, type) => {editItem(info, type)}"></component>
         </template>
       </div>
     </div>
-    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
-      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    <side-popup ref="sidePopup" :title="operationTitle">
+      <component :is="operationPage" :ref="operationPage" @close="(getList) => {close(getList)}"></component>
     </side-popup>
   </section>
 </template>
@@ -154,16 +154,21 @@
         }).catch(_ => {
         })
       },
-      addItem (info) {
+      addItem (info, type) {
         this.operationPage = 'addCalendar'
         this.operationTitle = '添加日程'
         // this.$router.push({name: 'editProject', params: {id: row.id}})
         this.$nextTick(() => {
-          this.$refs.sidePopup.show(this.$refs[this.operationPage].init())
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].init(info, type))
         })
       },
       editItem (info) {
-        console.log(info)
+        this.operationPage = 'editCalendar'
+        this.operationTitle = '编辑日程'
+        // this.$router.push({name: 'editProject', params: {id: row.id}})
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].init(info.event.id))
+        })
       },
       addNewCalendar () {
         this.operationPage = 'addCalendar'
@@ -201,8 +206,12 @@
       },
       close (getList) {
         this.$refs.sidePopup.close()
-        if (getList) {
-          this.getList()
+        if (this.form['Calendars[keyword]'] !== '') {
+          if (getList) {
+            this.getList()
+          }
+        } else {
+          this.$refs[this.calendarRef].updateDate()
         }
       },
       popupClose () {