完成统计分析中的工作日志;

index.ejs

@@ -47,6 +47,12 @@
               "title": "日程管理单行",
               "appName": 'calendar',
               "url": "/fullCalendarLine"
+            },
+            {
+              isRouteShow: 1,
+              title: '工作日志',
+              appName: 'calendar',
+              url: '/analysisCalendar'
             }
           ],
           homePage: {

src/apis/calendar.js

@@ -22,5 +22,11 @@ export default {
   },
   getCalendarEvents: {
     url: '/vue/calendar/ajax-data'
+  },
+  getAnalysisFilter: {
+    url: '/vue/analysis/get-filter-calendar'
+  },
+  getAnalysisCalendar: {
+    url: '/vue/analysis/get-calendar'
   }
 }

src/apis/workLog.js

 // const urlEnd = process.env.NODE_ENV !== 'production' ? '?duplextrans' : ''
 export default {
   // 获取列表筛选条件
-  getFilter: {
+  getWorkFilter: {
     url: '/vue/work-log/get-filter'
   },
   // 获取列表

src/assets/css/tooltip.css

@@ -8,7 +8,6 @@
   font-weight: 400;
   line-height: 1.5;
   text-align: left;
-  text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
@@ -17,7 +16,7 @@
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.875rem;
+  /*font-size: 0.875rem;*/
   word-wrap: break-word;
   opacity: 0;
 }

src/components/calendar/analysisCalendar/calendar.vue

+<template>
+  <section class="analysis-calendar content">
+    <el-row :gutter="10" class="header-title">
+      <el-col :span="20">
+        <h2>工作日志</h2>
+      </el-col>
+      <el-col :span="4">
+        <el-cascader
+          size="mini"
+          v-model="item.cascader"
+          :props="props"
+          clearable
+          change-on-select
+          :options="optionsList"
+          @change="setCascader(item)"
+        ></el-cascader>
+      </el-col>
+    </el-row>
+    <div class="page-body-content">
+      <analysis-nav></analysis-nav>
+      <div class="analysis-box">
+        <calender-grid ref="calenderGrid"
+                   :user-id="form.user_id"
+                   :department-id="form.department_id"
+                   :resources="resources"></calender-grid>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  import calenderGrid from './calenderGrid'
+  import {findWhere} from '../../../lib/viewHelper'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  export default {
+    name: '',
+    components: {
+      calenderGrid
+      // FullCalendar
+    },
+    data () {
+      return {
+        props: {
+          label: 'name',
+          value: 'key',
+          children: 'child'
+        },
+        optionsList: [],
+        item: {},
+        form: {
+          user_id: '',
+          department_id: ''
+        },
+        resources: []
+      }
+    },
+    methods: {
+      setCascader () {
+        if (this.item.cascader.length === 1) {
+          this.form[this.item.key] = this.item.cascader[0]
+          this.form[this.item.itemKey] = ''
+        } else if (this.item.cascader.length === 2) {
+          this.form[this.item.key] = this.item.cascader[0]
+          this.form[this.item.itemKey] = this.item.cascader[1]
+        } else {
+          this.form[this.item.itemKey] = ''
+          this.form[this.item.key] = ''
+        }
+        // this.getMapData()
+      },
+      setDefault () {
+        if (this.item.default) {
+          let keys = findWhere(this.optionsList, this.item.default, 'key')
+          if (keys.node) {
+            if (keys.parentNode) {
+              this.form[this.item.itemKey] = keys.node.key
+              this.form[this.item.key] = keys.parentNode.key
+              this.item.cascader = [keys.parentNode.key, keys.node.key]
+            } else {
+              this.form[this.item.itemKey] = ''
+              this.form[this.item.key] = keys.node.key
+              this.item.cascader = [keys.node.key]
+            }
+          }
+        }
+      },
+      setFormFilter (item) {
+        this.item = item
+        if (item.itemKey) {
+          this.$set(this.form, item.itemKey, '')
+          this.$set(this.form, item.key, '')
+          this.$set(this.item, 'cascader', [])
+        }
+        this.optionsList = item.value
+        this.$set(this.form, item.key, '')
+        this.$nextTick(() => {
+          this.setDefault()
+        })
+      }
+    },
+    created () {
+      requestAPI(api.getAnalysisFilter).then(res => {
+        this.setFormFilter(res[0])
+      })
+    }
+  }
+</script>
+
+<style scoped>
+  .analysis-box{
+    padding: 10px;
+    background: #fff;
+  }
+</style>

src/components/calendar/analysisCalendar/calenderGrid.vue

+<template>
+  <section class="calendar-box">
+    <FullCalendar
+      class='demo-app-calendar'
+      ref="fullCalendar"
+      first-day="1"
+      slotDuration="00:30:00"
+      :header="{
+            left: 'prev,next today',
+            center: 'title',
+            right: 'timeGridWeek,dayGridMonth'
+          }"
+      :default-date="defaultDate"
+      :content-height="500"
+      :locales="[cnLocale]"
+      :column-header-text="false"
+      locale="zh-cn"
+      slot-duration="01:00"
+      :slot-label-format="{
+          hour: 'numeric',
+          omitZeroMinute: true
+        }"
+      :title-format="{year: 'numeric', month: 'long'}"
+      :plugins="calendarPlugins"
+      :weekends="calendarWeekends"
+      :events="calendarEvents"
+      scheduler-license-key="GPL-My-Project-Is-Open-Source"
+      next-day-threshold="00:00:00"
+      @select="selectDate"
+      @eventRender="eventRender"
+      @eventDragStop="eventDragStop"
+      @datesRender="datesRender"
+      :event-time-format="{hour: 'numeric', minute: '2-digit', hour12: false}"
+    />
+  </section>
+</template>
+
+<script>
+  // import FullCalendar from '@fullcalendar/vue'
+  import dayGridPlugin from '@fullcalendar/daygrid'
+  import timeGridPlugin from '@fullcalendar/timegrid'
+  import interactionPlugin from '@fullcalendar/interaction'
+  // import bootstrapPlugin from '@fullcalendar/bootstrap'
+  import cnLocale from '@fullcalendar/core/locales/zh-cn'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import $ from 'jquery'
+
+  require('bootstrap')
+  export default {
+    name: 'calendar-grid',
+    components: {
+      // FullCalendar
+    },
+    data () {
+      return {
+        cnLocale,
+        // bootstrapPlugin,
+        filter: [],
+        operationTitle: '',
+        operationPage: '',
+        calendarPlugins: [ // plugins must be defined in the JS
+          dayGridPlugin,
+          timeGridPlugin,
+          interactionPlugin // needed for dateClick
+          // bootstrapPlugin
+        ],
+        defaultDate: new Date(),
+        calendarWeekends: true
+      }
+    },
+    methods: {
+      eventDragStop () {
+        console.log(arguments)
+      },
+      mouseenter () {
+        console.log(arguments)
+      },
+      addNewCalendar () {
+      },
+      resetForm () {
+      },
+      updateForm () {
+      },
+      searchKeyword () {
+      },
+      close () {
+      },
+      getFilter () {
+        requestAPI(api.getFilter).then(res => {
+          this.filter = res
+        })
+      },
+      eventMouseEnter (info) {
+        // $(info.el)
+        console.log(info)
+      },
+      datesRender (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)
+        info.el.setAttribute('data-toggle', 'tooltip')
+        info.el.setAttribute('data-html', true)
+        info.el.setAttribute('title', info.event.extendedProps.nonstandard.field1)
+        if (info.event.extendedProps.nonstandard.model) {
+          $(info.el).addClass('edit-calendar')
+        }
+
+        // console.log($(info.el))
+      },
+      selectDate (info) {
+        // console.log(this.$refs.fullCalendar.getApi().view.type)
+        // info.jsEvent.preventDefault()
+        this.$message({
+          message: '添加'
+        })
+        this.$emit('update:add', info, this.$refs.fullCalendar.getApi().view.type)
+      },
+      eventClick (info) {
+        info.jsEvent.preventDefault()
+        this.$message({
+          message: '编辑'
+        })
+        this.$emit('update:edit', info)
+      },
+      calendarEvents (info, successCallback, failureCallback) {
+        let ids = {}
+        if (this.userId) {
+          ids.user_id = this.userId
+        } else {
+          if (this.departmentId) {
+            ids.department_id = this.departmentId
+          }
+        }
+        requestAPI(api.getAnalysisCalendar, {
+          data: {
+            ...ids,
+            start: info.start.valueOf() / 1000,
+            end: info.end.valueOf() / 1000
+          }
+        }).then(res => {
+          res.event.forEach(item => {
+            item.allDay = false
+          })
+          console.log(res.event)
+          successCallback(res.event)
+          this.defaultDate = res.defaultDate
+        }).catch(_ => {
+        }).finally(() => {
+          $('[data-toggle="tooltip"]').tooltip()
+        })
+      },
+      updateDate () {
+        this.$refs.fullCalendar.getApi().refetchEvents()
+      }
+    },
+    created () {
+    },
+    mounted () {
+    },
+    props: ['userId', 'departmentId'],
+    watch: {
+      'userId' (val) {
+        this.$refs.fullCalendar.getApi().refetchEvents()
+      }
+    }
+  }
+</script>
+
+<style lang="sass">
+  @import '~@fullcalendar/core/main.css';
+  @import '~@fullcalendar/daygrid/main.css';
+  @import '~@fullcalendar/timegrid/main.css';
+  @import '~@fullcalendar/timeline/main.css';
+  @import '~@fullcalendar/resource-timeline/main.css';
+  @import '../../../assets/css/tooltip.css';
+</style>
+<style>
+  .demo-app-calendar .fc-day.fc-sat,.demo-app-calendar .fc-day.fc-sun{
+    background: #d7d7d7;
+    opacity: .3;
+  }
+  .tooltip p {
+    text-align: left;
+  }
+  .fc-view-container{
+    font-size: 12px;
+  }
+  .demo-app-calendar .fc-event {
+    border-color: transparent;
+    font-size: 12px;
+  }
+  .demo-app-calendar .fc-event .fc-content{
+    color: #000;
+  }
+  .demo-app-calendar .fc-day-top.fc-other-month {
+    opacity: 1;
+  }
+  .fc-button {
+    color: #333;
+    border: 1px solid;
+    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
+    background-color: #f5f5f5;
+  }
+  .fc-button:hover{
+    color: #333;
+    text-decoration: none;
+    background: 0 -15px;
+    border-color: #ccc;
+    -webkit-transition: background-position .1s linear;
+    -moz-transition: background-position .1s linear;
+    -o-transition: background-position .1s linear;
+    transition: background-position .1s linear;
+  }
+  .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active{
+    background-color: #e6e6e6;
+    border-color: #ccc;
+    color: #333;
+  }
+  .fc-button-primary:disabled {
+    background-color: #e6e6e6;
+    border-color: #ccc;
+    color: #212529;
+  }
+</style>

src/components/calendar/fullCalendarGrid.vue

 <template>
-  <section>
+  <section class="calendar-box">
     <FullCalendar
       class='demo-app-calendar'
       ref="fullCalendar"
@@ -20,6 +20,7 @@
           hour: 'numeric',
           omitZeroMinute: true
         }"
+      :title-format="{year: 'numeric', month: '2-digit'}"
       :plugins="calendarPlugins"
       :weekends="calendarWeekends"
       :events="calendarEvents"
@@ -32,6 +33,7 @@
       @eventDragStop="eventDragStop"
       @eventClick="eventClick"
       @datesRender="datesRender"
+      :event-time-format="{hour: 'numeric', minute: '2-digit', hour12: false}"
     />
   </section>
 </template>
@@ -41,7 +43,7 @@
   import dayGridPlugin from '@fullcalendar/daygrid'
   import timeGridPlugin from '@fullcalendar/timegrid'
   import interactionPlugin from '@fullcalendar/interaction'
-  import bootstrapPlugin from '@fullcalendar/bootstrap'
+  // import bootstrapPlugin from '@fullcalendar/bootstrap'
   import cnLocale from '@fullcalendar/core/locales/zh-cn'
   import {
     requestAPI,
@@ -58,15 +60,15 @@
     data () {
       return {
         cnLocale,
-        bootstrapPlugin,
+        // bootstrapPlugin,
         filter: [],
         operationTitle: '',
         operationPage: '',
         calendarPlugins: [ // plugins must be defined in the JS
           dayGridPlugin,
           timeGridPlugin,
-          interactionPlugin, // needed for dateClick
-          bootstrapPlugin
+          interactionPlugin // needed for dateClick
+          // bootstrapPlugin
         ],
         defaultDate: new Date(),
         calendarWeekends: true
@@ -146,6 +148,10 @@
             end: info.end.valueOf() / 1000
           }
         }).then(res => {
+          res.event.forEach(item => {
+            item.allDay = false
+          })
+          console.log(res.event)
           successCallback(res.event)
           this.defaultDate = res.defaultDate
         }).catch(_ => {
@@ -186,4 +192,43 @@
   .tooltip p {
     text-align: left;
   }
+  .fc-view-container{
+    font-size: 12px;
+  }
+  .demo-app-calendar .fc-event {
+    border-color: transparent;
+    font-size: 12px;
+  }
+  .demo-app-calendar .fc-event .fc-content{
+    color: #000;
+  }
+  .demo-app-calendar .fc-day-top.fc-other-month {
+    opacity: 1;
+  }
+  .fc-button {
+    color: #333;
+    border: 1px solid;
+    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
+    background-color: #f5f5f5;
+  }
+  .fc-button:hover{
+    color: #333;
+    text-decoration: none;
+    background: 0 -15px;
+    border-color: #ccc;
+    -webkit-transition: background-position .1s linear;
+    -moz-transition: background-position .1s linear;
+    -o-transition: background-position .1s linear;
+    transition: background-position .1s linear;
+  }
+  .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active{
+    background-color: #e6e6e6;
+    border-color: #ccc;
+    color: #333;
+  }
+  .fc-button-primary:disabled {
+    background-color: #e6e6e6;
+    border-color: #ccc;
+    color: #212529;
+  }
 </style>

src/components/calendar/fullCalendarLine.vue

 <template>
-  <section>
+  <section class="calendar-box">
     <FullCalendar
       class='demo-app-calendar'
       ref="fullCalendar"

src/components/calendar/list.vue

@@ -297,6 +297,9 @@
 </script>
 
 <style scoped lang="scss">
+  .calendar-box {
+    padding: 10px;
+  }
   .text-info {
     color: #17a2b8 !important;
   }

src/components/workLog/list.vue

@@ -283,7 +283,7 @@
         })
       },
       getFilter () {
-        requestAPI(api.getFilter).then(res => {
+        requestAPI(api.getWorkFilter).then(res => {
           this.filter = res
         })
       }

src/components/workLog/workLogListForm.vue

 <template>
   <div>
-    <el-row class="form-content">
     <el-form size="mini" :model="clientForm" label-width="0" label-position="top">
+      <el-row class="form-content">
         <el-col :span="4" v-for="(item, key) in filter" :key="key">
           <el-form-item>
             <span slot="label" v-if="item.key !== 'Filter[sort]'">
@@ -36,14 +36,15 @@
             ></el-cascader>
           </el-form-item>
         </el-col>
-      </el-form>
       </el-row>
+    </el-form>
   </div>
 </template>
 
 <script>
   import {findWhere} from '../../lib/viewHelper'
   import $ from 'jquery'
+
   export default {
     name: 'client-form',
     data () {
@@ -61,7 +62,7 @@
       hideCascader (key) {
         // this.$refs['elCasc' + key][0].menuVisible = false
       },
-      setCascader (item, key) {
+      setCascader (item) {
         if (item.cascader.length === 1) {
           this.clientForm[item.key] = item.cascader[0]
           this.clientForm[item.itemKey] = ''

src/routes/calendar.js

 import calendar from '../components/calendar/list'
 import fullCalendarGrid from '../components/calendar/fullCalendarGrid'
 import fullCalendarLine from '../components/calendar/fullCalendarLine'
+import analysisCalendar from '../components/calendar/analysisCalendar/calendar'
 const projectTitle = '金畅逍BMS - '
 
 const routes = [
@@ -27,6 +28,14 @@ const routes = [
     meta: {
       title: projectTitle + '日程管理'
     }
+  },
+  {
+    path: '/analysisCalendar',
+    name: 'analysisCalendar',
+    component: analysisCalendar,
+    mate: {
+      title: projectTitle + '工作日志'
+    }
   }
 ]