├── 3.0-1.png
├── 3.0-2.png
├── 3.0-3.png
├── 3.0-4.png
├── hansinevet.png
├── calendar-v2.0.png
├── store-v3.0
    └── calendar
    │   ├── getters.js
    │   ├── types.js
    │   ├── index.js
    │   ├── mutations.js
    │   └── actions.js
├── calendar-v1.0
    ├── mockeasy.js
    ├── mock.js
    └── index.vue
├── calendar-v2.0
    ├── mockeasy.js
    ├── calendarHeader.vue
    ├── checkPopverInput.vue
    ├── index.vue
    ├── eventCard.vue
    ├── addEventDialog.vue
    ├── mock.js
    └── eventCalendar.vue
├── calendar-v3.0
    ├── mockeasy.js
    ├── eventTipBox.vue
    ├── checkPopverInput.vue
    ├── calendarHeader.vue
    ├── eventItem.vue
    ├── mock.js
    ├── customerSelect.vue
    ├── addEventDialog.vue
    ├── index.vue
    ├── eventCalendar.vue
    └── mockuser.js
└── README.md


/3.0-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hansinhu/eventCalendar/HEAD/3.0-1.png


--------------------------------------------------------------------------------
/3.0-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hansinhu/eventCalendar/HEAD/3.0-2.png


--------------------------------------------------------------------------------
/3.0-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hansinhu/eventCalendar/HEAD/3.0-3.png


--------------------------------------------------------------------------------
/3.0-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hansinhu/eventCalendar/HEAD/3.0-4.png


--------------------------------------------------------------------------------
/hansinevet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hansinhu/eventCalendar/HEAD/hansinevet.png


--------------------------------------------------------------------------------
/calendar-v2.0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hansinhu/eventCalendar/HEAD/calendar-v2.0.png


--------------------------------------------------------------------------------
/store-v3.0/calendar/getters.js:
--------------------------------------------------------------------------------
1 | 
2 | export const getters = {
3 |   eventList: state => state.eventList,
4 |   allPersonList: state => state.allPersonList,
5 |   searchPersonList: state => state.searchPersonList
6 | }
7 | 


--------------------------------------------------------------------------------
/store-v3.0/calendar/types.js:
--------------------------------------------------------------------------------
1 | export const COMMIT_EVENT_LIST = 'COMMIT_EVENT_LIST'
2 | export const COMMIT_ALLPERSON_LIST = 'COMMIT_ALLPERSON_LIST'
3 | export const COMMIT_SEARCHPERSON_LIST = 'COMMIT_SEARCHPERSON_LIST'
4 | 


--------------------------------------------------------------------------------
/store-v3.0/calendar/index.js:
--------------------------------------------------------------------------------
 1 | import {getters} from './getters'
 2 | import {actions} from './actions'
 3 | import {mutations} from './mutations'
 4 | 
 5 | // initial state
 6 | const state = {
 7 |   eventList: [],
 8 |   allPersonList: [],
 9 |   searchPersonList: []
10 | }
11 | 
12 | export default {
13 |   state,
14 |   getters,
15 |   actions,
16 |   mutations
17 | }
18 | 


--------------------------------------------------------------------------------
/store-v3.0/calendar/mutations.js:
--------------------------------------------------------------------------------
 1 | import * as types from './types'
 2 | 
 3 | export const mutations = {
 4 |   [types.COMMIT_EVENT_LIST] (state, list) {
 5 |     state.eventList = list
 6 |   },
 7 |   [types.COMMIT_ALLPERSON_LIST] (state, list) {
 8 |     state.allPersonList = list
 9 |   },
10 |   [types.COMMIT_SEARCHPERSON_LIST] (state, list) {
11 |     state.searchPersonList = list
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/calendar-v1.0/mockeasy.js:
--------------------------------------------------------------------------------
 1 | const list = [
 2 |   {
 3 |     id: 5018500790,
 4 |     _id: 5018500790,
 5 |     title: '3-10跨周显示',
 6 |     color: '#ff3333',
 7 |     start: '2018-05-03',
 8 |     end: '2018-05-10',
 9 |     className: ''
10 |   },
11 |   {
12 |     id: 5018500791,
13 |     _id: 5018500791,
14 |     title: '3-10跨周显示',
15 |     color: '#ff3333',
16 |     start: '2018-05-04',
17 |     end: '2018-05-25',
18 |     className: ''
19 |   }
20 | ]
21 | export default list
22 | 


--------------------------------------------------------------------------------
/calendar-v2.0/mockeasy.js:
--------------------------------------------------------------------------------
 1 | const list = [
 2 |   {
 3 |     id: 5018500790,
 4 |     _id: 5018500790,
 5 |     title: '3-10跨周显示',
 6 |     color: '#ff3333',
 7 |     start: '2018-05-09',
 8 |     end: '2018-05-10',
 9 |     className: ''
10 |   },
11 |   {
12 |     id: 5018500790,
13 |     _id: 5018500790,
14 |     title: '3-10跨周显示',
15 |     color: '#ff3333',
16 |     start: '2018-05-09',
17 |     end: '2018-05-16',
18 |     className: ''
19 |   },
20 |   {
21 |     id: 5018500790,
22 |     _id: 5018500790,
23 |     title: '3-10跨周显示',
24 |     color: '#ff3333',
25 |     start: '2018-05-09',
26 |     end: '2018-05-17',
27 |     className: ''
28 |   },
29 |   {
30 |     id: 5018500791,
31 |     _id: 5018500791,
32 |     title: '3-10跨周显示',
33 |     color: '#ff3333',
34 |     start: '2018-05-14',
35 |     end: '2018-05-15',
36 |     className: ''
37 |   }
38 | ]
39 | export default list
40 | 


--------------------------------------------------------------------------------
/calendar-v3.0/mockeasy.js:
--------------------------------------------------------------------------------
 1 | const list = [
 2 |   {
 3 |     id: 5018500790,
 4 |     _id: 5018500790,
 5 |     title: '3-10跨周显示',
 6 |     color: '#ff3333',
 7 |     start: '2018-05-09',
 8 |     end: '2018-05-10',
 9 |     className: ''
10 |   },
11 |   {
12 |     id: 5018500790,
13 |     _id: 5018500790,
14 |     title: '3-10跨周显示',
15 |     color: '#ff3333',
16 |     start: '2018-05-09',
17 |     end: '2018-05-16',
18 |     className: ''
19 |   },
20 |   {
21 |     id: 5018500790,
22 |     _id: 5018500790,
23 |     title: '3-10跨周显示',
24 |     color: '#ff3333',
25 |     start: '2018-05-09',
26 |     end: '2018-05-17',
27 |     className: ''
28 |   },
29 |   {
30 |     id: 5018500791,
31 |     _id: 5018500791,
32 |     title: '3-10跨周显示',
33 |     color: '#ff3333',
34 |     start: '2018-05-14',
35 |     end: '2018-05-15',
36 |     className: ''
37 |   }
38 | ]
39 | export default list
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hansinCalendar
 2 | 
 3 | ### 功能：
 4 | > 生成日历
 5 | 
 6 | > 日程排列
 7 | 
 8 | > 1.0: 
 9 | ![demo](https://github.com/hansinhu/eventCalendar/blob/master/hansinevet.png)
10 | > 2.0:
11 | ![demo](https://github.com/hansinhu/eventCalendar/blob/master/calendar-v2.0.png)
12 | > 3.0: 完成版，加入了Elemen_ui, store, http-request 使用需谨慎
13 | > 抽空把这个组件独立出来放到npm方便使用
14 | ![demo](https://github.com/hansinhu/eventCalendar/blob/master/3.0-1.png)
15 | ![demo](https://github.com/hansinhu/eventCalendar/blob/master/3.0-2.png)
16 | ![demo](https://github.com/hansinhu/eventCalendar/blob/master/3.0-3.png)
17 | ![demo](https://github.com/hansinhu/eventCalendar/blob/master/3.0-4.png)
18 | 
19 | 
20 | ```js
21 | eventList = [
22 |   {
23 |     id: 5018500790,
24 |     _id: 5018500790,
25 |     title: '3-10跨周显示0000',
26 |     color: '#ff3333',
27 |     start: '2018-05-03',
28 |     end: '2018-05-10',
29 |     className: ''
30 |   },
31 |   {
32 |     id: 5018500791,
33 |     _id: 5018500791,
34 |     title: '跨周显示111',
35 |     color: '#ff3333',
36 |     start: '2018-05-04',
37 |     end: '2018-05-25',
38 |     className: ''
39 |   }
40 | ]
41 | ```
42 | 


--------------------------------------------------------------------------------
/calendar-v3.0/eventTipBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cell-tips" :style="{top: (config.top - 88) + 'px'}">
 3 |     <h3>{{tipDay.month + '月' + tipDay.date + '日'}}</h3>
 4 |     <p><span class="el-icon-caret-right"></span>{{esCount + '个日程'}}</p>
 5 |     <div class="bottom-arrow"><span class="el-icon-caret-bottom"></span></div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   export default {
11 |     data () {
12 |       return {
13 |         defaultData: {
14 |           theme: ''
15 |         }
16 |       }
17 |     },
18 |     props: {
19 |       tipDay: {
20 |         type: Object,
21 |         default: () => {}
22 |       },
23 |       esCount: {
24 |         type: Number,
25 |         default: 0
26 |       },
27 |       config: {
28 |         type: Object,
29 |         default: {
30 |           top: 0
31 |         }
32 |       }
33 |     }
34 |   }
35 | </script>
36 | 
37 | <style lang="less" scoped>
38 | .cell-tips{
39 |   position: absolute;
40 |   left: 38px;
41 |   z-index: 99;
42 |   width: 92px;
43 |   box-sizing: border-box;
44 |   color: #fff;
45 |   padding: 15px 5px;
46 |   padding-right: 2px;
47 |   background: #415B77;
48 |   box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20);
49 |   border-radius: 6px;
50 |   h3{
51 |     font-size: 14px;
52 |     line-height: 20px;
53 |     text-indent: 10px;
54 |   }
55 |   p{
56 |     line-height: 20px;
57 |     height: 20px;
58 |     text-indent: 2px;
59 |   }
60 |   .bottom-arrow{
61 |     height: 0;
62 |     font-size: 20px;
63 |     text-align: center;
64 |     position: absolute;
65 |     bottom: 10px;
66 |     color: #415B77;
67 |     width: 86px;
68 |   }
69 | }
70 | </style>
71 | 
72 | 


--------------------------------------------------------------------------------
/store-v3.0/calendar/actions.js:
--------------------------------------------------------------------------------
 1 | import * as types from './types'
 2 | import calendarApi from '../../../api/crm/calendarApi'
 3 | import mockList from '../../../components/calendar/mock'
 4 | import mockUserList from '../../../components/calendar/mockuser'
 5 | 
 6 | export const actions = {
 7 |   GETEVENTLIST ({ commit, state }, params) {
 8 |     return calendarApi.getEventListByTime(params).then(res => {
 9 |       if (res.data.code === 0) {
10 |         let list = mockList
11 |         commit(types.COMMIT_EVENT_LIST, list)
12 |         return new Promise((resolve, reject) => {
13 |           resolve(list)
14 |         })
15 |       }
16 |     })
17 |   },
18 |   ADDEVENT ({state}, params) {
19 |     return calendarApi.addEvent(params)
20 |   },
21 |   DELETEVENT ({state}, params) {
22 |     return calendarApi.deletEvent(params)
23 |   },
24 |   UPDATEEVENT ({state}, params) {
25 |     return calendarApi.updateEvent(params)
26 |   },
27 |   GETALLPERSONLIST ({commit, state}, params) {
28 |     return calendarApi.getAllPersonList(params).then(res => {
29 |       if (res.data.code === 0) {
30 |         let list = mockUserList.slice(0)
31 |         commit(types.COMMIT_ALLPERSON_LIST, list)
32 |         return new Promise((resolve, reject) => {
33 |           resolve(list)
34 |         })
35 |       }
36 |     })
37 |   },
38 |   SEARCHPERSONLIST ({commit, state}, params) {
39 |     return calendarApi.searchPersonList(params).then(res => {
40 |       if (res.data.code === 0) {
41 |         let list = mockUserList.splice(0, 7)
42 |         commit(types.COMMIT_SEARCHPERSON_LIST, list)
43 |         return new Promise((resolve, reject) => {
44 |           resolve(list)
45 |         })
46 |       }
47 |     })
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/calendar-v2.0/calendarHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="calendar-head">
  3 |     <div class="add-btn-box">
  4 |       <el-button @click="changeTime('reduce')" type="text"><i class="add-arrow-icon el-icon-arrow-left"></i></el-button>
  5 |       <span class="time-text">{{timeData.year + '年 ' + timeData.month + '月'}}</span>
  6 |       <el-button @click="changeTime('add')" type="text"><i class="add-arrow-icon el-icon-arrow-right"></i></el-button>
  7 |     </div>
  8 |     <el-button-group>
  9 |       <el-button size="medium" @click="changeTimeType('month')" :type=" timeData.timeType === 'month' ? 'primary':''">本月</el-button>
 10 |       <el-button size="medium" @click="changeTimeType('week')" :type=" timeData.timeType === 'week' ? 'primary':''">本周</el-button>
 11 |     </el-button-group>
 12 |     <div style="float:right;">
 13 |       <checkPopverInput 
 14 |       :checkGroupList="accountList"
 15 |       @checkChange="accountChange"
 16 |       :placeholder="'账号筛选'"
 17 |       style="margin-right: 10px;"
 18 |       ></checkPopverInput>
 19 |       <checkPopverInput 
 20 |       :checkGroupList="colorList"
 21 |       @checkChange="colorChange"
 22 |       :placeholder="'颜色筛选'"
 23 |       listType="color"
 24 |       style="margin-right: 10px;"
 25 |       ></checkPopverInput>
 26 |       <el-button size="medium" @click="addEventShow('now')" type="primary">新增日程</el-button>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 |   export default {
 33 |     name: 'calendarHeadar',
 34 |     data () {
 35 |       return {
 36 |         showAccout: false,
 37 |         selectAccoutId: '',
 38 |         selectColor: ''
 39 |       }
 40 |     },
 41 |     props: {
 42 |       timeData: {
 43 |         type: Object,
 44 |         default: () => {
 45 |           return {
 46 |             year: 0,
 47 |             month: 0,
 48 |             timeType: 'month'
 49 |           }
 50 |         }
 51 |       },
 52 |       accountList: {
 53 |         type: Array,
 54 |         default: () => []
 55 |       },
 56 |       colorList: {
 57 |         type: Array,
 58 |         default: () => []
 59 |       }
 60 |     },
 61 |     components: {
 62 |       checkPopverInput: () => import('./checkPopverInput')
 63 |     },
 64 |     mounted () {
 65 |     },
 66 |     methods: {
 67 |       changeTime (a) {
 68 |         this.$emit('changeTime', a)
 69 |       },
 70 |       changeTimeType (t) {
 71 |         this.$emit('changeTimeType', t)
 72 |       },
 73 |       addEventShow (t) {
 74 |         this.$emit('addEventShow', t)
 75 |       },
 76 |       accountChange (items) {
 77 |         console.log(items)
 78 |       },
 79 |       colorChange (items) {
 80 |         console.log(items)
 81 |       }
 82 |     }
 83 |   }
 84 | </script>
 85 | <style lang="less" scoped>
 86 | .calendar-head{
 87 |   padding: 0 20px;
 88 | }
 89 | .add-btn-box{
 90 |   display: inline-block;
 91 |   width: 210px;
 92 |   font-size: 16px;
 93 |   line-height: 36px;
 94 |   button{
 95 |     padding: 0;
 96 |   }
 97 |   .time-text{
 98 |     display: inline-block;
 99 |     width: 130px;
100 |     text-align: center;
101 |   }
102 |   .add-arrow-icon{
103 |     font-size: 16px;
104 |     line-height: 36px;
105 |   }
106 | }
107 | </style>
108 | <style lang="less">
109 | .calendar-head{
110 |   .el-button-group{
111 |     vertical-align: top;
112 |   }
113 | }
114 | </style>
115 | 
116 | 


--------------------------------------------------------------------------------
/calendar-v2.0/checkPopverInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="display: inline-block;">
  3 |     <el-popover
  4 |       ref="popover"
  5 |       popper-class="popver-input"
  6 |       :visible-arrow="false"
  7 |       placement="bottom-start"
  8 |       :width="width"
  9 |       trigger="click">
 10 |        <div>
 11 |         <el-checkbox :indeterminate="isIndeterminate" v-model="checkedAll" @change="handleCheckAllChange">全选</el-checkbox>
 12 |         <div style="margin: 5px 0;"></div>
 13 |         <el-checkbox-group v-model="checkedList" @change="handleCheckedListChange">
 14 |           <!--如果需要赋默认子，item需要转JSON string-->
 15 |           <el-checkbox v-for="(item, i) in checkGroupList" :label="item" :key="i">
 16 |             <span 
 17 |               class="color-point"
 18 |               :style="{background: item.color}"
 19 |               v-if="listType === 'color'"
 20 |             ></span>
 21 |             {{item.name}}
 22 |           </el-checkbox>
 23 |         </el-checkbox-group>
 24 |       </div>
 25 |     </el-popover>
 26 |     <el-input 
 27 |       suffix-icon="el-icon-arrow-down"
 28 |       :style="{width: width + 'px'}"
 29 |       v-model="nameStr"
 30 |       :placeholder="placeholder || '筛选'"
 31 |       v-popover:popover
 32 |       auto-complete="off"
 33 |     ></el-input>
 34 |   </div>
 35 | </template>
 36 | <script>
 37 |   export default {
 38 |     name: 'checkPopverInput',
 39 |     data () {
 40 |       return {
 41 |         nameStr: '',
 42 |         checkedAll: false,
 43 |         checkedList: [],
 44 |         isIndeterminate: false
 45 |       }
 46 |     },
 47 |     props: {
 48 |       checkGroupList: {
 49 |         type: Array,
 50 |         default: () => []
 51 |       },
 52 |       placeholder: {
 53 |         type: String,
 54 |         default: ''
 55 |       },
 56 |       listType: {
 57 |         type: String,
 58 |         default: ''
 59 |       },
 60 |       width: {
 61 |         type: Number,
 62 |         default: 200
 63 |       }
 64 |     },
 65 |     methods: {
 66 |       handleCheckAllChange (all) {
 67 |         this.checkedList = all ? this.checkGroupList : []
 68 |         this.isIndeterminate = false
 69 |         this.checkChangeCallBack()
 70 |       },
 71 |       handleCheckedListChange (list) {
 72 |         let checkedCount = list.length
 73 |         this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkGroupList.length
 74 |         this.checkedAll = checkedCount === this.checkGroupList.length
 75 |         console.log(this.checkedAll)
 76 |         this.checkChangeCallBack()
 77 |       },
 78 |       checkChangeCallBack () {
 79 |         let str = []
 80 |         this.checkedList.forEach((n) => {
 81 |           str.push(n.name)
 82 |         })
 83 |         this.nameStr = str.join('、')
 84 |         this.$emit('checkChange', this.checkedList)
 85 |       }
 86 |     }
 87 |   }
 88 | </script>
 89 | <style lang="less">
 90 | .popver-input.el-popper{
 91 |   margin-left: 0;
 92 |   box-sizing: border-box;
 93 |   .el-checkbox-group{
 94 |     margin-left: 20px;
 95 |     .el-checkbox{
 96 |       display: block;
 97 |       height: 26px;
 98 |       line-height: 26px;
 99 |       .el-checkbox__input{
100 |         line-height: 24px !important;
101 |         vertical-align: top;
102 |       }
103 |     }
104 |     .el-checkbox+.el-checkbox{
105 |       margin-left: 0;
106 |     }
107 |     .el-checkbox__label{
108 |       overflow: hidden;
109 |       text-overflow:ellipsis;
110 |       white-space: nowrap;
111 |       word-break: break-all;
112 |     }
113 |   }
114 |   .color-point{
115 |     display: inline-block;
116 |     width: 12px;
117 |     height: 12px;
118 |     line-height: 26px;
119 |     border-radius: 6px;
120 |     vertical-align: middle;
121 |   }
122 | }
123 | </style>
124 | 
125 | 


--------------------------------------------------------------------------------
/calendar-v3.0/checkPopverInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="display: inline-block;">
  3 |     <el-popover
  4 |       ref="popover"
  5 |       popper-class="popver-input"
  6 |       :visible-arrow="false"
  7 |       placement="bottom-start"
  8 |       :width="width"
  9 |       trigger="click">
 10 |        <div>
 11 |         <el-checkbox :indeterminate="isIndeterminate" v-model="checkedAll" @change="handleCheckAllChange">{{allHolder}}</el-checkbox>
 12 |         <div style="margin: 5px 0;"></div>
 13 |         <el-checkbox-group v-model="checkedList" @change="handleCheckedListChange">
 14 |           <!--如果需要赋默认子，item需要转JSON string-->
 15 |           <el-checkbox v-for="(item, i) in checkGroupList" :label="item" :key="i">
 16 |             <span 
 17 |               class="color-point"
 18 |               :style="{background: item.color}"
 19 |               v-if="listType === 'color'"
 20 |             ></span>
 21 |             {{item.name}}
 22 |           </el-checkbox>
 23 |         </el-checkbox-group>
 24 |       </div>
 25 |     </el-popover>
 26 |     <el-input 
 27 |       suffix-icon="el-icon-arrow-down"
 28 |       :style="{width: width + 'px'}"
 29 |       v-model="nameStr"
 30 |       :placeholder="placeholder || '筛选'"
 31 |       v-popover:popover
 32 |       auto-complete="off"
 33 |     ></el-input>
 34 |   </div>
 35 | </template>
 36 | <script>
 37 |   export default {
 38 |     name: 'checkPopverInput',
 39 |     data () {
 40 |       return {
 41 |         nameStr: '',
 42 |         checkedAll: false,
 43 |         checkedList: [],
 44 |         isIndeterminate: false
 45 |       }
 46 |     },
 47 |     props: {
 48 |       checkGroupList: {
 49 |         type: Array,
 50 |         default: () => []
 51 |       },
 52 |       placeholder: {
 53 |         type: String,
 54 |         default: ''
 55 |       },
 56 |       allHolder: {
 57 |         type: String,
 58 |         default: '全部'
 59 |       },
 60 |       listType: {
 61 |         type: String,
 62 |         default: ''
 63 |       },
 64 |       width: {
 65 |         type: Number,
 66 |         default: 200
 67 |       }
 68 |     },
 69 |     methods: {
 70 |       handleCheckAllChange (all) {
 71 |         this.checkedList = all ? this.checkGroupList : []
 72 |         this.isIndeterminate = false
 73 |         this.checkChangeCallBack()
 74 |       },
 75 |       handleCheckedListChange (list) {
 76 |         let checkedCount = list.length
 77 |         this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkGroupList.length
 78 |         this.checkedAll = checkedCount === this.checkGroupList.length
 79 |         this.checkChangeCallBack()
 80 |       },
 81 |       checkChangeCallBack () {
 82 |         let str = []
 83 |         this.checkedList.forEach((n) => {
 84 |           str.push(n.name)
 85 |         })
 86 |         if (this.checkedAll) {
 87 |           this.nameStr = this.allHolder
 88 |         } else {
 89 |           this.nameStr = str.join('、')
 90 |         }
 91 |         this.$emit('checkChange', this.checkedList)
 92 |       }
 93 |     }
 94 |   }
 95 | </script>
 96 | <style lang="less">
 97 | .popver-input.el-popper{
 98 |   margin-left: 0;
 99 |   box-sizing: border-box;
100 |   .el-checkbox-group{
101 |     margin-left: 20px;
102 |     .el-checkbox{
103 |       display: block;
104 |       height: 26px;
105 |       line-height: 26px;
106 |       .el-checkbox__input{
107 |         line-height: 24px !important;
108 |         vertical-align: top;
109 |       }
110 |     }
111 |     .el-checkbox+.el-checkbox{
112 |       margin-left: 0;
113 |     }
114 |     .el-checkbox__label{
115 |       overflow: hidden;
116 |       text-overflow:ellipsis;
117 |       white-space: nowrap;
118 |       word-break: break-all;
119 |     }
120 |   }
121 |   .color-point{
122 |     display: inline-block;
123 |     width: 12px;
124 |     height: 12px;
125 |     margin-right: 5px;
126 |     line-height: 26px;
127 |     border-radius: 6px;
128 |     vertical-align: middle;
129 |   }
130 | }
131 | </style>
132 | 
133 | 


--------------------------------------------------------------------------------
/calendar-v2.0/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="calender">
  3 |     <h2 class="calender-title">日历进程</h2>
  4 |     <calendarHeadar
  5 |       :timeData="{
  6 |         year: year,
  7 |         month: month,
  8 |         timeType: timeType
  9 |       }"
 10 |       :colorList="colorList"
 11 |       :accountList="accountList"
 12 |       @changeTime="changeTime"
 13 |       @changeTimeType="changeTimeType"
 14 |       @addEventShow="addEventShow"
 15 |     ></calendarHeadar>
 16 |     <div class="calender-body">
 17 |       <eventCalendar
 18 |         :year="year"
 19 |         :month="month"
 20 |         :tYear="tYear"
 21 |         :tMonth="tMonth"
 22 |         :tDay="tDay"
 23 |         :timeType="timeType"
 24 |         :asycEventList="asycEventList"
 25 |         @addEventShow="addEventShow"
 26 |       ></eventCalendar>
 27 |     </div>
 28 |     <addEventDialog
 29 |       :addConfig="addConfig"
 30 |       :colorList="colorList"
 31 |       @cancelAdd="cancelAdd"
 32 |     ></addEventDialog>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 |   import userScheduleRead from './mock.js'
 38 |   export default {
 39 |     name: 'calendar',
 40 |     data () {
 41 |       return {
 42 |         year: 1970,
 43 |         month: 1,
 44 |         tYear: 1970,
 45 |         tMonth: 1,
 46 |         tDay: 1,
 47 |         timeType: 'month',
 48 |         currentDay: 1,
 49 |         currentMonth: 1,
 50 |         currentYear: 1970,
 51 |         currentWeek: 1,
 52 |         days: [],
 53 |         asycEventList: [],
 54 |         accountList: [],
 55 |         colorList: [
 56 |           {
 57 |             name: '红色',
 58 |             color: '#e4393c'
 59 |           },
 60 |           {
 61 |             name: '黑色',
 62 |             color: '#000000'
 63 |           }
 64 |         ],
 65 |         addConfig: {
 66 |           addVisible: false,
 67 |           start: '',
 68 |           end: ''
 69 |         }
 70 |       }
 71 |     },
 72 |     components: {
 73 |       calendarHeadar: () => import('./calendarHeader'),
 74 |       eventCalendar: () => import('./eventCalendar'),
 75 |       addEventDialog: () => import('./addEventDialog')
 76 |     },
 77 |     filters: {},
 78 |     mounted () {
 79 |       // 每月第一天作为初始参数
 80 |       let date = new Date()
 81 |       this.tYear = this.year = date.getFullYear()
 82 |       this.tMonth = this.month = date.getMonth() + 1
 83 |       this.tDay = date.getDate()
 84 |       this.asycEventList = userScheduleRead
 85 |       this.checkAccount()
 86 |     },
 87 |     methods: {
 88 |       // 关闭添加弹窗
 89 |       cancelAdd () {
 90 |         this.addConfig = Object.assign(this.addConfig, {addVisible: false})
 91 |       },
 92 |       checkAccount () {
 93 |         let user = window.localStorage.user ? JSON.parse(window.localStorage.user) : ''
 94 |         if (user && !user.parentUserId) {
 95 |           this.showAccout = true
 96 |           let sublist = user.subUserList
 97 |           let account = [{name: user.name || user.loginAccount, id: user.userId}]
 98 |           if (sublist && sublist.length) {
 99 |             account = account.concat(sublist)
100 |           }
101 |           this.accountList = account
102 |         }
103 |       },
104 |       // changeTime
105 |       changeTime (a) {
106 |         if (a === 'add') {
107 |           if (this.month < 12) {
108 |             this.month += 1
109 |           } else {
110 |             this.year += 1
111 |             this.month = 1
112 |           }
113 |         } else if (a === 'reduce') {
114 |           if (this.month > 1) {
115 |             this.month -= 1
116 |           } else {
117 |             this.month = 12
118 |             this.year -= 1
119 |           }
120 |         }
121 |       },
122 |       changeTimeType (t) {
123 |         this.timeType = t // month or week
124 |         this.year = this.tYear
125 |         this.month = this.tMonth
126 |       },
127 |       addEventShow (t) {
128 |         let start
129 |         if (t === 'now') {
130 |           start = this.formatDate(this.tYear, this.tMonth, this.tDay)
131 |         } else if (t) {
132 |           start = t
133 |         }
134 |         this.addConfig.start = start
135 |         this.addConfig = Object.assign(this.addConfig, {addVisible: true})
136 |       },
137 |        // 返回 类似 2016-01-02 格式的字符串
138 |       formatDate (year, month, day) {
139 |         var y = year
140 |         var m = month
141 |         if (m < 10) m = '0' + m
142 |         var d = day
143 |         if (d < 10) d = '0' + d
144 |         return y + '-' + m + '-' + d
145 |       },
146 |       addNewEvent () {
147 |         // s
148 |       }
149 |     }
150 |   }
151 | </script>
152 | <style lang="less" scoped>
153 | 
154 | .calender{
155 |   width: 1200px;
156 |   margin: 50px auto;
157 |   padding-bottom: 20px;
158 |   background: #fff;
159 |   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
160 |   .calender-title{
161 |     line-height: 60px;
162 |     font-size: 16px;
163 |     text-indent: 20px;
164 |   }
165 |   .calender-body{
166 |     padding: 0 20px;
167 |   }
168 | }
169 | 
170 | </style>
171 | 
172 | 


--------------------------------------------------------------------------------
/calendar-v3.0/calendarHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="calendar-head">
  3 |     <div class="add-btn-box">
  4 |       <el-dropdown :visible-arrow="false" @command="changeTimeType">
  5 |         <span class="el-dropdown-link" style="padding-right: 20px;cursor:pointer;">
  6 |           {{timeTypeTitle}}<i class="el-icon-caret-bottom el-icon--right"></i>
  7 |         </span>
  8 |         <el-dropdown-menu slot="dropdown">
  9 |           <el-dropdown-item :class="{'menu-item-active' : timeData.timeType === 'month' }" command="month">按月查看</el-dropdown-item>
 10 |           <el-dropdown-item :class="{'menu-item-active' : timeData.timeType === 'week' }" command="week">按周查看</el-dropdown-item>
 11 |         </el-dropdown-menu>
 12 |       </el-dropdown>
 13 |       <span>
 14 |          <el-button @click="changeTime('reduce')" type="text"><i class="add-arrow-icon el-icon-arrow-left"></i></el-button>
 15 |         <span class="time-text">
 16 |           <span v-if="timeData.timeType === 'month'">{{timeData.year + '年&nbsp;&nbsp;'}}</span>
 17 |           <span :class="{'bold-text' : timeData.timeType === 'month'}">{{timeData.month + '月'}}</span>
 18 |           <span v-if="timeData.timeType === 'week'" :class="{'bold-text' : timeData.timeType === 'week'}">{{'&nbsp;&nbsp;第' + cnWeekIndex + '周'}}</span>
 19 |         </span>
 20 |         <el-button @click="changeTime('add')" type="text"><i class="add-arrow-icon el-icon-arrow-right"></i></el-button>
 21 |       </span>
 22 |      </div>
 23 |     <el-button 
 24 |       v-if="timeData.timeType === 'month'"
 25 |       size="mini"
 26 |       class="c-mini-btn"
 27 |       @click="changeTimeRange('tomonth')"
 28 |     >回到本月</el-button>
 29 |     <el-button 
 30 |       v-else-if="timeData.timeType === 'week'"
 31 |       size="mini"
 32 |       class="c-mini-btn"
 33 |       @click="changeTimeRange('toweek')"
 34 |     >回到本周</el-button>
 35 |     <div style="float:right;">
 36 |       <checkPopverInput 
 37 |       :checkGroupList="accountList"
 38 |       @checkChange="accountChange"
 39 |       :placeholder="'账号筛选'"
 40 |       :allHolder="'全部账号'"
 41 |       style="margin-right: 10px;"
 42 |       ></checkPopverInput>
 43 |       <checkPopverInput 
 44 |       :checkGroupList="colorList"
 45 |       @checkChange="colorChange"
 46 |       :placeholder="'颜色筛选'"
 47 |       :allHolder="'全部颜色'"
 48 |       listType="color"
 49 |       style="margin-right: 10px;"
 50 |       ></checkPopverInput>
 51 |       <el-button size="medium" @click="addEventShow('now')" type="primary">新增日程</el-button>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |   export default {
 58 |     name: 'calendarHeadar',
 59 |     data () {
 60 |       return {
 61 |         showAccout: false,
 62 |         selectAccoutId: '',
 63 |         selectColor: ''
 64 |       }
 65 |     },
 66 |     props: {
 67 |       timeData: {
 68 |         type: Object,
 69 |         default: () => {
 70 |           return {
 71 |             year: 0,
 72 |             month: 0,
 73 |             timeType: 'month'
 74 |           }
 75 |         }
 76 |       },
 77 |       weekRangIndex: {
 78 |         type: Number,
 79 |         default: 0
 80 |       },
 81 |       accountList: {
 82 |         type: Array,
 83 |         default: () => []
 84 |       },
 85 |       colorList: {
 86 |         type: Array,
 87 |         default: () => []
 88 |       }
 89 |     },
 90 |     components: {
 91 |       checkPopverInput: () => import('./checkPopverInput')
 92 |     },
 93 |     computed: {
 94 |       timeTypeTitle () {
 95 |         return this.timeData.timeType === 'month' ? '按月查看' : '按周查看'
 96 |       },
 97 |       cnWeekIndex () {
 98 |         let list = ['一', '二', '三', '四', '五', '六']
 99 |         return list[this.weekRangIndex]
100 |       }
101 |     },
102 |     mounted () {
103 |     },
104 |     methods: {
105 |       changeTime (a) {
106 |         this.$emit('changeTime', a)
107 |       },
108 |       changeTimeType (t) {
109 |         this.$emit('changeTimeType', t)
110 |       },
111 |       changeTimeRange (t) {
112 |         this.$emit('changeTimeRange', t)
113 |       },
114 |       addEventShow (t) {
115 |         this.$emit('addEventShow', t)
116 |       },
117 |       accountChange (items) {
118 |         this.$emit('accountChange', items)
119 |       },
120 |       colorChange (items) {
121 |         this.$emit('colorChange', items)
122 |       }
123 |     }
124 |   }
125 | </script>
126 | <style lang="less" scoped>
127 | .calendar-head{
128 |   padding: 0 20px;
129 |   .bold-text{
130 |     font-weight: bold;
131 |   }
132 | }
133 | .add-btn-box{
134 |   display: inline-block;
135 |   margin-right: 20px;
136 |   font-size: 16px;
137 |   line-height: 36px;
138 |   button{
139 |     padding: 0;
140 |   }
141 |   .time-text{
142 |     display: inline-block;
143 |     padding: 0 10px;
144 |     text-align: center;
145 |   }
146 |   .add-arrow-icon{
147 |     font-size: 16px;
148 |     line-height: 36px;
149 |     color: #33475B;
150 |   }
151 | }
152 | </style>
153 | <style lang="less">
154 | .calendar-head{
155 |   .c-mini-btn.el-button--mini{
156 |     padding: 4px 8px;
157 |   }
158 | }
159 | .menu-item-active{
160 |   background-color: #ecf5ff;
161 |   color: #66b1ff;
162 | }
163 | </style>
164 | 
165 | 


--------------------------------------------------------------------------------
/calendar-v2.0/eventCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <span></span>
  3 | </template>
  4 | 
  5 | <script>
  6 |   export default {
  7 |     name: 'event-card',
  8 |     props: {
  9 |       cardConfig: {
 10 |         data: {
 11 |           type: Object
 12 |         },
 13 |         visible: {
 14 |           type: Boolean,
 15 |           default: false
 16 |         },
 17 |         eClick: null
 18 |       }
 19 |     },
 20 |     watch: {
 21 |       'cardConfig.eClick' () {
 22 |         console.log(this.cardConfig.eClick)
 23 |       },
 24 |       'cardConfig.visible' () {
 25 |         console.log(this.cardConfig.visible)
 26 |         this.initCard()
 27 |       },
 28 |       cardConfig () {
 29 |         this.initCard()
 30 |       }
 31 |     },
 32 |     mounted () {
 33 |       this.initCard()
 34 |       window.addEventListener('click', this.clickOtherClose, true)
 35 |     },
 36 |     methods: {
 37 |       initCard () {
 38 |         if (this.cardConfig.visible) {
 39 |           let body = document.body
 40 |           let card = body.querySelector('.calendar-card')
 41 |           let left = this.cardConfig.eClick.clientX + 10
 42 |           let top = this.cardConfig.eClick.clientY + window.scrollY + 10
 43 |           if (card) {
 44 |             card.style.left = left + 'px'
 45 |             card.style.top = top + 'px'
 46 |             card.style.display = 'block'
 47 |             card.innerHTML = this.createHtml(this.cardConfig.data, left, top)
 48 |           } else {
 49 |             let cardBox = document.createElement('div')
 50 |             cardBox.className = 'calendar-card'
 51 |             cardBox.style.left = left + 'px'
 52 |             cardBox.style.top = top + 'px'
 53 |             cardBox.style.display = 'block'
 54 |             cardBox.innerHTML = this.createHtml(this.cardConfig.data, left, top)
 55 |             body.appendChild(cardBox)
 56 |           }
 57 |         } else {
 58 |           let body = document.body
 59 |           let card = body.querySelector('.calendar-card')
 60 |           if (card) {
 61 |             card.style.display = 'none'
 62 |           }
 63 |         }
 64 |       },
 65 |       createHtml (data, top = 0, left = 0) {
 66 |         let tmpl = `<div class="card-body">
 67 |             <div class="card-body-header">
 68 |               <i class="m-icon icon-calendar normal-text calendar-icon"></i>
 69 |               <span class="text-span normal-text">5月7日  — 5月8日 </span>
 70 |             </div>
 71 |             <div class="card-body-content">
 72 |               <div class="type-btn">
 73 |                 <input type="checkbox" class="calendar-done">
 74 |                 <span class="type-circle" style="background: rgb(255, 51, 51);"></span>
 75 |               </div>
 76 |               <div class="title-text">
 77 |                 <span class="normal-text">多跟进几次</span>
 78 |               </div>
 79 |             </div>
 80 |             <div class="card-body-attendents">
 81 |                 <ul>
 82 |                   <li>关联客户：<a target="_blank" class="c-link company-link">comp7</a></li>
 83 |                   <li>参与人：Dick;Kula</li>
 84 |                   <li>创建人：Dick</li>
 85 |                 </ul>
 86 |             </div>
 87 |           </div>
 88 |           <div class="card-footer">
 89 |             <a class="e-edit c-link">编辑</a>
 90 |             <a class="e-delete c-link">删除</a>
 91 |           </div>`
 92 |         return tmpl
 93 |       },
 94 |       clickOtherClose (e) {
 95 |         let tag = true
 96 |         e.path.forEach(element => {
 97 |           if (element.className && (element.className.includes('fc-day-grid-event') || element.className.includes('calendar-card'))) {
 98 |             tag = false
 99 |           }
100 |         })
101 |         if (tag) {
102 |           this.$emit('handleClose', 'winClose')
103 |         }
104 |       }
105 |     }
106 |   }
107 | </script>
108 | <style lang="less">
109 | .calendar-card {
110 |   position: absolute;
111 |   z-index: 99;
112 |   width: 360px;
113 |   background: #fff;
114 |   -webkit-box-shadow: 2px 2px 5px #aaa;
115 |   box-shadow: 2px 2px 5px #aaa;
116 |   .card-body {
117 |     padding: 16px;
118 |     border-bottom: 1px solid #ccc;
119 |   }
120 |   .card-body-header {
121 |     margin-bottom: 10px;
122 |   }
123 |   .card-body-content {
124 |     display: flex;
125 |     .type-btn {
126 |       flex-shrink: 0;
127 |     }
128 |     .calendar-done {
129 |       vertical-align: baseline;
130 |     }
131 |     .type-circle {
132 |       display: inline-block;
133 |       width: 10px;
134 |       height: 10px;
135 |       border-radius: 50%;
136 |     }
137 |     .title-text {
138 |       padding-left: 10px;
139 |       flex: 1;
140 |     }
141 |     .title-text span {
142 |       display: block;
143 |       max-width: 300px;
144 |       word-break: normal;
145 |       word-wrap: break-word;
146 |     }
147 |   }
148 |   .card-body-attendents {
149 |     margin: 10px 0 0 19px;
150 |     margin-top: 10px;
151 |     font-size: 12px;
152 |     color: #949494;
153 |   }
154 |   .card-footer {
155 |     padding: 8px;
156 |     text-align: right;
157 |     background: #f6f6f6;
158 |     .c-link {
159 |       margin-right: 10px;
160 |       vertical-align: middle;
161 |       color: #188ae8;
162 |       cursor: pointer;
163 |     }
164 |   }
165 | }
166 | </style>
167 | 
168 | 


--------------------------------------------------------------------------------
/calendar-v2.0/addEventDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog title="新增日程" class="add-event-dialog" :visible.sync="addConfig.addVisible" @close="cancelAdd">
  3 |     <div>
  4 |       <el-form :model="addEventForm" ref="addEventForm">
  5 |         <div class="form-label">日程内容</div>
  6 |         <el-form-item
  7 |           prop="title"
  8 |           :rules="[{ required: true, message: '日程内容不能为空'}]"
  9 |         >
 10 |           <el-input type="title" v-model="addEventForm.title" auto-complete="off"></el-input>
 11 |         </el-form-item>
 12 |         <ul class="color-list">
 13 |           <li class="color-item" v-for="(color, i) in colorList" :key="i">
 14 |             <span>{{color.name}}</span>
 15 |           </li>
 16 |         </ul>
 17 |         <div class="form-label">起始时间</div>
 18 |         <el-form-item
 19 |           prop="seTime"
 20 |           :rules="[{ required: true, message: '起始时间不能为空'}]"
 21 |         >
 22 |           <el-date-picker
 23 |             @change="changeTime"
 24 |             v-model="addEventForm.seTime"
 25 |             type="daterange"
 26 |             format="yyyy-MM-dd"
 27 |             value-format="yyyy-MM-dd"
 28 |             range-separator="至"
 29 |             start-placeholder="开始日期"
 30 |             end-placeholder="结束日期">
 31 |           </el-date-picker>
 32 |         </el-form-item>
 33 |         <div class="form-label">关联客户</div>
 34 |         <el-form-item>
 35 |           <el-select
 36 |             style="width: 100%;"
 37 |             v-model="addEventForm.customer"
 38 |             multiple
 39 |             filterable
 40 |             remote
 41 |             reserve-keyword
 42 |             placeholder="请输入关键词"
 43 |             :remote-method="remoteMethod"
 44 |             :loading="loading">
 45 |             <el-option
 46 |               v-for="item in customOptions"
 47 |               :key="item.value"
 48 |               :label="item.label"
 49 |               :value="item.value">
 50 |             </el-option>
 51 |           </el-select>
 52 |         </el-form-item>
 53 |         <div class="form-label">参与人员</div>
 54 |         <ul class="select-user">
 55 |           <li class="user" v-for="(user, i) in selectUser" :key="i"></li>
 56 |           <li class="add-user">
 57 |             <span class="icon-font">&#xe684;</span>
 58 |           </li>
 59 |         </ul>
 60 |       </el-form>
 61 |       <span slot="footer" class="dialog-footer">
 62 |         <el-button type="primary" @click="cancelAdd">确 定</el-button>
 63 |         <el-button @click="cancelAdd">取 消</el-button>
 64 |       </span>
 65 |     </div>
 66 |   </el-dialog>
 67 | </template>
 68 | <script>
 69 |   export default {
 70 |     name: 'addEventDialog',
 71 |     data () {
 72 |       return {
 73 |         addEventForm: {
 74 |           title: '',
 75 |           seTime: [],
 76 |           customer: []
 77 |         },
 78 |         loading: false,
 79 |         selectUser: [],
 80 |         customOptions: [],
 81 |         list: [],
 82 |         states: ['Alabama', 'Alaska', 'Arizona',
 83 |           'Arkansas', 'California', 'Colorado',
 84 |           'Connecticut', 'Delaware', 'Florida',
 85 |           'Georgia', 'Hawaii', 'Idaho', 'Illinois',
 86 |           'Indiana', 'Iowa', 'Kansas', 'Kentucky',
 87 |           'Louisiana', 'Maine', 'Maryland',
 88 |           'Massachusetts', 'Michigan', 'Minnesota',
 89 |           'Mississippi', 'Missouri', 'Montana',
 90 |           'Nebraska', 'Nevada', 'New Hampshire',
 91 |           'New Jersey', 'New Mexico', 'New York',
 92 |           'North Carolina', 'North Dakota', 'Ohio',
 93 |           'Oklahoma', 'Oregon', 'Pennsylvania',
 94 |           'Rhode Island', 'South Carolina',
 95 |           'South Dakota', 'Tennessee', 'Texas',
 96 |           'Utah', 'Vermont', 'Virginia',
 97 |           'Washington', 'West Virginia', 'Wisconsin',
 98 |           'Wyoming'
 99 |         ]
100 |       }
101 |     },
102 |     props: {
103 |       addConfig: {
104 |         type: Object,
105 |         default: () => {
106 |           return {
107 |             addVisible: false,
108 |             start: '',
109 |             end: ''
110 |           }
111 |         }
112 |       },
113 |       colorList: {
114 |         type: Array,
115 |         default: () => []
116 |       }
117 |     },
118 |     watch: {
119 |       'addConfig.start' () {
120 |         this.initDate()
121 |       }
122 |     },
123 |     mounted () {
124 |       this.initDate()
125 |       this.list = this.states.map(item => {
126 |         return { value: item, label: item }
127 |       })
128 |     },
129 |     methods: {
130 |       initDate () {
131 |         let arr = []
132 |         if (this.addConfig.start && this.addConfig.end) {
133 |           arr = [this.addConfig.start, this.addConfig.end]
134 |         } else if (this.addConfig.start) {
135 |           arr = [this.addConfig.start, this.addConfig.start]
136 |         }
137 |         this.addEventForm.seTime = arr
138 |       },
139 |       changeTime (val) {
140 |         console.log(val)
141 |       },
142 |       cancelAdd () {
143 |         this.$emit('cancelAdd')
144 |       },
145 |       remoteMethod (query) {
146 |         if (query !== '') {
147 |           this.loading = true
148 |           setTimeout(() => {
149 |             this.loading = false
150 |             this.customOptions = this.list.filter(item => {
151 |               return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
152 |             })
153 |           }, 200)
154 |         } else {
155 |           this.customOptions = []
156 |         }
157 |       }
158 |     }
159 |   }
160 | </script>
161 | <style lang="less" scoped>
162 | .color-item{
163 |   display: inline-block;
164 |   cursor: pointer;
165 |   width: 40px;
166 |   height: 40px;
167 |   border-radius: 20px;
168 | }
169 | .select-user{
170 |   padding-top: 20px;
171 |   &::after{
172 |     content: '';
173 |     display: block;
174 |     visibility: hidden;
175 |     height: 0;
176 |     clear: both;
177 |   }
178 |   li{
179 |     float: left;
180 |     cursor: pointer;
181 |     width: 40px;
182 |     height: 40px;
183 |   }
184 |   .add-user{
185 |     .icon-font{
186 |       font-size: 32px; 
187 |     }
188 |   }
189 | }
190 | </style>
191 | <style lang="less">
192 | .add-event-dialog{
193 |   .el-dialog{
194 |     width: 680px;
195 |     border-radius: 4px;
196 |   }
197 | }
198 | </style>
199 | 


--------------------------------------------------------------------------------
/calendar-v3.0/eventItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-popover
  4 |       ref="popover"
  5 |       popper-class="popver-event-item"
  6 |       :visible-arrow="false"
  7 |       v-model="popoverValue"
  8 |       placement="bottom-start"
  9 |       :width="372"
 10 |       trigger="click">
 11 |       <div class="top-line" :style="{borderColor: itemData.data.color}"></div>
 12 |       <div class="e-popover-body">
 13 |         <div class="e-p-customer">
 14 |           <div class="e-p-avatar">
 15 |             <img :src="itemData.data.avatar || '/static/img/default_avatar.png'">
 16 |           </div>
 17 |           <div>
 18 |             <p class="e-p-c-title">关联客户</p>
 19 |             <p class="e-p-c-name">小甜甜</p>
 20 |           </div>
 21 |         </div>
 22 |         <h5>{{itemData.data.title}}</h5>
 23 |         <p class="e-p-time">{{formatDate(itemData.start) + '~' + (itemData.end)}}</p>
 24 |         <div style="margin-top: 20px;">
 25 |           <p class="e-p-user"><label class="label">参与人员：</label><span>Baby、Jone、Lisa</span></p>
 26 |           <p class="e-p-user"><label class="label">创&nbsp;&nbsp;建&nbsp;&nbsp;人：</label><span>Sam</span></p>
 27 |         </div>
 28 |       </div>
 29 |       <div class="e-popover-bottom">
 30 |         <span class="btn" @click="editEventShow">编辑</span><span @click="deletEventShow" class="btn">删除</span>
 31 |       </div>
 32 |     </el-popover>
 33 |     <div class="event-content" 
 34 |       v-popover:popover
 35 |       :class="itemData.className"
 36 |       :title="itemData.data.title"
 37 |       :style="{
 38 |         background: itemData.data.color,
 39 |         height: layHeight - 2 + 'px',
 40 |         lineHeight: layHeight - 2 + 'px'
 41 |       }"
 42 |     >
 43 |       <!--如果是start显示头像；如果是周数据非start显示文字；如果是月数据：开始数据不在本月切是第一周显示文字-->
 44 |       <div class="event-co" v-if="itemData.className.includes('is-start')">
 45 |         <span class="e-avatar"><img :src="itemData.data.avatar || '/static/img/default_avatar.png'"></span>
 46 |         <span class="event-text">{{itemData.data.title}}</span>
 47 |       </div>
 48 |       <div v-else-if="timeType === 'week'">
 49 |         <span class="event-text" style="paddingLeft: 5px;">{{itemData.data.title}}</span>
 50 |       </div>
 51 |       <div v-else-if="timeType === 'month' && noNowMonth && !weekIndex">
 52 |         <span class="event-text" style="paddingLeft: 5px;">{{itemData.data.title}}</span>
 53 |       </div>
 54 |     </div>
 55 |   </div>
 56 | </template>
 57 | <script>
 58 |   export default {
 59 |     data () {
 60 |       return {
 61 |         popoverValue: false
 62 |       }
 63 |     },
 64 |     props: {
 65 |       itemData: {
 66 |         type: Object,
 67 |         default: () => {
 68 |           return {
 69 |             className: '',
 70 |             start: '',
 71 |             data: {}
 72 |           }
 73 |         }
 74 |       },
 75 |       hiddenPopover: {
 76 |         default: 0
 77 |       },
 78 |       layHeight: {
 79 |         type: Number,
 80 |         default: 0
 81 |       },
 82 |       nowMonth: {
 83 |         type: Number,
 84 |         default: 0
 85 |       },
 86 |       weekIndex: {
 87 |         type: Number,
 88 |         default: 0
 89 |       },
 90 |       timeType: {
 91 |         default: 'month'
 92 |       }
 93 |     },
 94 |     watch: {
 95 |       hiddenPopover () {
 96 |         this.popoverValue = false
 97 |       }
 98 |     },
 99 |     computed: {
100 |       // 开始事件不在本月
101 |       noNowMonth () {
102 |         let now = true
103 |         if (this.itemData.start) {
104 |           let startMonth = this.itemData.start.split('-')[1]
105 |           let nM = this.nowMonth >= 10 ? '' + this.nowMonth : '0' + this.nowMonth
106 |           if (startMonth === nM) {
107 |             now = false
108 |           } else {
109 |             now = true
110 |           }
111 |         }
112 |         return now
113 |       }
114 |     },
115 |     methods: {
116 |       formatDate (dateStr) {
117 |         return dateStr.split('-').join('/')
118 |       },
119 |       editEventShow () {
120 |         this.$emit('updateEvent', this.itemData)
121 |       },
122 |       deletEventShow () {
123 |         this.$emit('deletEvent', this.itemData)
124 |       }
125 |     }
126 |   }
127 | </script>
128 | <style lang="less" scoped>
129 | .event-content{
130 |   color: #000;
131 |   cursor: pointer;
132 |   &.is-start{
133 |     margin-left: 1px;
134 |     border-top-left-radius: 12px;
135 |     border-bottom-left-radius: 12px;
136 |   }
137 |   &.is-end{
138 |     border-top-right-radius: 12px;
139 |     border-bottom-right-radius: 12px;
140 |   }
141 |   .event-co{
142 |     overflow: hidden;
143 |     text-overflow:ellipsis;
144 |     white-space: nowrap;
145 |     word-break: break-all;
146 |   }
147 |   .event-text{
148 |     padding-left: 25px;
149 |     display: inline-block;
150 |     height: 24px;
151 |     line-height: 24px;
152 |   }
153 |   .e-avatar{
154 |     display: inline-block;
155 |     height: 24px;
156 |     width: 0;
157 |     line-height: 24px;
158 |     vertical-align: top;
159 |     position: relative;
160 |     img{
161 |       width: 22px;
162 |       height: 22px;
163 |       border-radius: 14px;
164 |       border: 2px solid #fff;
165 |       background: #fff;
166 |       position: absolute;
167 |       top: -1px;
168 |       left: -1px;
169 |     }
170 |   }
171 | }
172 | </style>
173 | <style lang="less">
174 | .popver-event-item.el-popper{
175 |   border-radius: 0;
176 |   box-shadow: 0 2px 10px 0 rgba(0,0,0,0.20);
177 |   padding: 0;
178 |   margin: 2px 1px;
179 |   .top-line{
180 |     border-top: 10px solid #eee;
181 |   }
182 |   .e-popover-body{
183 |     padding: 20px 35px;
184 |   }
185 |   .e-p-customer{
186 |     &>div{
187 |       display: inline-block;
188 |       p{
189 |         line-height: 22px;
190 |         margin-left: 15px;
191 |       }
192 |       .e-p-c-title{
193 |         color: #7A8794;
194 |       }
195 |     }
196 |     .e-p-avatar{
197 |       width: 44px;
198 |       height: 44px;
199 |       border-radius: 22px;
200 |       overflow: hidden;
201 |       vertical-align: top;
202 |       img{
203 |         width: 44px;
204 |         height: 44px;
205 |       }
206 |     }
207 |   }
208 |   h5{
209 |     margin: 20px 0;
210 |     line-height: 22px;
211 |     font-size: 16px;
212 |     color: rgba(0,0,0,0.80);
213 |   }
214 |   .e-p-time{
215 |     line-height: 22px;
216 |     font-size: 16px;
217 |     color: rgba(51,71,91,0.80);
218 |   }
219 |   .e-popover-bottom{
220 |     padding: 0 35px 20px 35px;
221 |     line-height: 24px;
222 |     .btn{
223 |       cursor: pointer;
224 |       font-size: 16px;
225 |       color: #0077FF;
226 |       display: inline-block;
227 |       margin-right: 20px;
228 |       user-select: none;
229 |     }
230 |   }
231 | }
232 | </style>
233 | 
234 | 


--------------------------------------------------------------------------------
/calendar-v1.0/mock.js:
--------------------------------------------------------------------------------
  1 | const list = [
  2 |   {
  3 |     id: 5018492800,
  4 |     _id: 5018492800,
  5 |     title: '发报价单！',
  6 |     color: '#ff3333',
  7 |     start: '2018-05-02',
  8 |     end: '2018-05-02',
  9 |     className: 'is-complete',
 10 |     data: {
 11 |       user: 'hansin'
 12 |     }
 13 |   },
 14 |   {
 15 |     id: 5302659038,
 16 |     _id: 5302659038,
 17 |     title: '撒',
 18 |     color: '#ff9933',
 19 |     start: '2018-05-02',
 20 |     end: '2018-05-02',
 21 |     className: ''
 22 |   },
 23 |   {
 24 |     id: 53026590399,
 25 |     _id: 53026590399,
 26 |     title: '撒222222222',
 27 |     color: '#ff9933',
 28 |     start: '2018-05-02',
 29 |     end: '2018-05-05',
 30 |     className: ''
 31 |   },
 32 |   {
 33 |     id: 5018500790,
 34 |     _id: 5018500790,
 35 |     title: '群发邮件给联系人。',
 36 |     color: '#ff3333',
 37 |     start: '2018-05-03',
 38 |     end: '2018-05-03',
 39 |     className: ''
 40 |   },
 41 |   {
 42 |     id: 5057574663,
 43 |     _id: 5057574663,
 44 |     title: '多跟进几次',
 45 |     color: '#ff3333',
 46 |     start: '2018-05-04',
 47 |     end: '2018-05-04',
 48 |     className: ''
 49 |   },
 50 |   {
 51 |     id: 5071663243,
 52 |     _id: 5071663243,
 53 |     title: '高级跟进任务',
 54 |     color: '#ff3333',
 55 |     start: '2018-05-04',
 56 |     end: '2018-05-04',
 57 |     className: 'is-complete'
 58 |   },
 59 |   {
 60 |     id: 5141124100,
 61 |     _id: 5141124100,
 62 |     title: '好干净啊好几个好几阿萨感觉到撒娇打撒个时间噶时间过萨国防建设公司就啊感觉阿萨感觉阿萨国际法感觉阿嘎说',
 63 |     color: '#ff3333',
 64 |     start: '2018-05-05',
 65 |     end: '2018-05-16',
 66 |     className: 'is-complete'
 67 |   },
 68 |   {
 69 |     id: 5091242944,
 70 |     _id: 5091242944,
 71 |     title: '多跟进几次',
 72 |     color: '#ff3333',
 73 |     start: '2018-05-07',
 74 |     end: '2018-05-08',
 75 |     className: ''
 76 |   },
 77 |   {
 78 |     id: 5089924516,
 79 |     _id: 5089924516,
 80 |     title: '模拟主账号跟进',
 81 |     color: '#28b779',
 82 |     start: '2018-05-07',
 83 |     end: '2018-05-09',
 84 |     className: 'is-complete'
 85 |   },
 86 |   {
 87 |     id: 5128340768,
 88 |     _id: 5128340768,
 89 |     title: '去跟进山东公司',
 90 |     color: '#28b779',
 91 |     start: '2018-05-09',
 92 |     end: '2018-05-16',
 93 |     className: 'is-complete'
 94 |   },
 95 |   {
 96 |     id: 5130571045,
 97 |     _id: 5130571045,
 98 |     title: '记得吃饭',
 99 |     color: '#ff3333',
100 |     start: '2018-05-09',
101 |     end: '2018-05-17',
102 |     className: 'is-complete'
103 |   },
104 |   {
105 |     id: 5128201145,
106 |     _id: 5128201145,
107 |     title: '是谁',
108 |     color: '#ff9933',
109 |     start: '2018-05-10',
110 |     end: '2018-05-13',
111 |     className: 'is-complete'
112 |   },
113 |   {
114 |     id: 5057574664,
115 |     _id: 5057574664,
116 |     title: '多跟进几次',
117 |     color: '#ff3333',
118 |     start: '2018-05-11',
119 |     end: '2018-05-11',
120 |     className: 'is-complete'
121 |   },
122 |   {
123 |     id: 5100618988,
124 |     _id: 5100618988,
125 |     title: 'to主账号改动',
126 |     color: '#00ccff',
127 |     start: '2018-05-11',
128 |     end: '2018-05-11',
129 |     className: 'is-complete'
130 |   },
131 |   {
132 |     id: 5153091964,
133 |     _id: 5153091964,
134 |     title: '阿萨德飒飒',
135 |     color: '#e7c837',
136 |     start: '2018-05-11',
137 |     end: '2018-05-11',
138 |     className: ''
139 |   },
140 |   {
141 |     id: 5091242945,
142 |     _id: 5091242945,
143 |     title: '多跟进几次',
144 |     color: '#ff3333',
145 |     start: '2018-05-14',
146 |     end: '2018-05-15',
147 |     className: ''
148 |   },
149 |   {
150 |     id: 5143816315,
151 |     _id: 5143816315,
152 |     title: '跟进777',
153 |     color: '#00ccff',
154 |     start: '2018-05-17',
155 |     end: '2018-05-31',
156 |     className: 'is-complete'
157 |   },
158 |   {
159 |     id: 5057574665,
160 |     _id: 5057574665,
161 |     title: '多跟进几次',
162 |     color: '#ff3333',
163 |     start: '2018-05-18',
164 |     end: '2018-05-18',
165 |     className: ''
166 |   },
167 |   {
168 |     id: 5249057923,
169 |     _id: 5249057923,
170 |     title: '阿萨',
171 |     color: '#ff3333',
172 |     start: '2018-05-18',
173 |     end: '2018-05-18',
174 |     className: ''
175 |   },
176 |   {
177 |     id: 5092913829,
178 |     _id: 5092913829,
179 |     title: '666',
180 |     color: '#ff3333',
181 |     start: '2018-05-20',
182 |     end: '2018-05-20',
183 |     className: ''
184 |   },
185 |   {
186 |     id: 5297244188,
187 |     _id: 5297244188,
188 |     title: 'aghast',
189 |     color: '#ff3333',
190 |     start: '2018-05-22',
191 |     end: '2018-05-22',
192 |     className: 'is-complete'
193 |   },
194 |   {
195 |     id: 5298656459,
196 |     _id: 5298656459,
197 |     title: '打游戏',
198 |     color: '#ff3333',
199 |     start: '2018-05-22',
200 |     end: '2018-05-22',
201 |     className: ''
202 |   },
203 |   {
204 |     id: 5297273163,
205 |     _id: 5297273163,
206 |     title: '阿达萨',
207 |     color: '#ff3333',
208 |     start: '2018-05-22',
209 |     end: '2018-05-23',
210 |     className: ''
211 |   },
212 |   {
213 |     id: 5100541417,
214 |     _id: 5100541417,
215 |     title: '报价单新建',
216 |     color: '#28b779',
217 |     start: '2018-05-23',
218 |     end: '2018-05-23',
219 |     className: 'is-complete'
220 |   },
221 |   {
222 |     id: 5297244189,
223 |     _id: 5297244189,
224 |     title: 'aghast',
225 |     color: '#ff3333',
226 |     start: '2018-05-23',
227 |     end: '2018-05-23',
228 |     className: ''
229 |   },
230 |   {
231 |     id: 5298656460,
232 |     _id: 5298656460,
233 |     title: '打游戏',
234 |     color: '#ff3333',
235 |     start: '2018-05-23',
236 |     end: '2018-05-23',
237 |     className: ''
238 |   },
239 |   {
240 |     id: 5091255554,
241 |     _id: 5091255554,
242 |     title: '无关联客户的日程',
243 |     color: '#00ccff',
244 |     start: '2018-05-24',
245 |     end: '2018-05-24',
246 |     className: ''
247 |   },
248 |   {
249 |     id: 5297244190,
250 |     _id: 5297244190,
251 |     title: 'aghast',
252 |     color: '#ff3333',
253 |     start: '2018-05-24',
254 |     end: '2018-05-24',
255 |     className: 'is-complete'
256 |   },
257 |   {
258 |     id: 5298656461,
259 |     _id: 5298656461,
260 |     title: '打游戏',
261 |     color: '#ff3333',
262 |     start: '2018-05-24',
263 |     end: '2018-05-24',
264 |     className: ''
265 |   },
266 |   {
267 |     id: 5143816316,
268 |     _id: 5143816316,
269 |     title: '跟进777',
270 |     color: '#00ccff',
271 |     start: '2018-05-24',
272 |     end: '2018-06-07',
273 |     className: ''
274 |   },
275 |   {
276 |     id: 5297244191,
277 |     _id: 5297244191,
278 |     title: 'aghast',
279 |     color: '#ff3333',
280 |     start: '2018-05-25',
281 |     end: '2018-05-25',
282 |     className: ''
283 |   },
284 |   {
285 |     id: 5298656462,
286 |     _id: 5298656462,
287 |     title: '打游戏',
288 |     color: '#ff3333',
289 |     start: '2018-05-25',
290 |     end: '2018-05-25',
291 |     className: ''
292 |   },
293 |   {
294 |     id: 5297244192,
295 |     _id: 5297244192,
296 |     title: 'aghast',
297 |     color: '#ff3333',
298 |     start: '2018-05-26',
299 |     end: '2018-05-26',
300 |     className: ''
301 |   }
302 | ]
303 | export default list
304 | 


--------------------------------------------------------------------------------
/calendar-v2.0/mock.js:
--------------------------------------------------------------------------------
  1 | const list = [
  2 |   {
  3 |     id: 5018492800,
  4 |     _id: 5018492800,
  5 |     title: '发报价单！',
  6 |     color: '#ff3333',
  7 |     start: '2018-05-02',
  8 |     end: '2018-05-02',
  9 |     className: 'is-complete',
 10 |     data: {
 11 |       user: 'hansin'
 12 |     }
 13 |   },
 14 |   {
 15 |     id: 5302659038,
 16 |     _id: 5302659038,
 17 |     title: '撒',
 18 |     color: '#ff9933',
 19 |     start: '2018-05-02',
 20 |     end: '2018-05-02',
 21 |     className: ''
 22 |   },
 23 |   {
 24 |     id: 53026590399,
 25 |     _id: 53026590399,
 26 |     title: '撒222222222',
 27 |     color: '#ff9933',
 28 |     start: '2018-05-02',
 29 |     end: '2018-05-05',
 30 |     className: ''
 31 |   },
 32 |   {
 33 |     id: 5018500790,
 34 |     _id: 5018500790,
 35 |     title: '群发邮件给联系人。',
 36 |     color: '#ff3333',
 37 |     start: '2018-05-03',
 38 |     end: '2018-05-03',
 39 |     className: ''
 40 |   },
 41 |   {
 42 |     id: 5057574663,
 43 |     _id: 5057574663,
 44 |     title: '多跟进几次',
 45 |     color: '#ff3333',
 46 |     start: '2018-05-04',
 47 |     end: '2018-05-04',
 48 |     className: ''
 49 |   },
 50 |   {
 51 |     id: 5071663243,
 52 |     _id: 5071663243,
 53 |     title: '高级跟进任务',
 54 |     color: '#ff3333',
 55 |     start: '2018-05-04',
 56 |     end: '2018-05-04',
 57 |     className: 'is-complete'
 58 |   },
 59 |   {
 60 |     id: 5141124100,
 61 |     _id: 5141124100,
 62 |     title: '好干净啊好几个好几阿萨感觉到撒娇打撒个时间噶时间过萨国防建设公司就啊感觉阿萨感觉阿萨国际法感觉阿嘎说',
 63 |     color: '#ff3333',
 64 |     start: '2018-05-05',
 65 |     end: '2018-05-16',
 66 |     className: 'is-complete'
 67 |   },
 68 |   {
 69 |     id: 5091242944,
 70 |     _id: 5091242944,
 71 |     title: '多跟进几次',
 72 |     color: '#ff3333',
 73 |     start: '2018-05-07',
 74 |     end: '2018-05-08',
 75 |     className: ''
 76 |   },
 77 |   {
 78 |     id: 5089924516,
 79 |     _id: 5089924516,
 80 |     title: '模拟主账号跟进',
 81 |     color: '#28b779',
 82 |     start: '2018-05-07',
 83 |     end: '2018-05-09',
 84 |     className: 'is-complete'
 85 |   },
 86 |   {
 87 |     id: 5128340768,
 88 |     _id: 5128340768,
 89 |     title: '去跟进山东公司',
 90 |     color: '#28b779',
 91 |     start: '2018-05-09',
 92 |     end: '2018-05-16',
 93 |     className: 'is-complete'
 94 |   },
 95 |   {
 96 |     id: 5130571045,
 97 |     _id: 5130571045,
 98 |     title: '记得吃饭',
 99 |     color: '#ff3333',
100 |     start: '2018-05-09',
101 |     end: '2018-05-17',
102 |     className: 'is-complete'
103 |   },
104 |   {
105 |     id: 5128201145,
106 |     _id: 5128201145,
107 |     title: '是谁',
108 |     color: '#ff9933',
109 |     start: '2018-05-10',
110 |     end: '2018-05-13',
111 |     className: 'is-complete'
112 |   },
113 |   {
114 |     id: 5057574664,
115 |     _id: 5057574664,
116 |     title: '多跟进几次',
117 |     color: '#ff3333',
118 |     start: '2018-05-11',
119 |     end: '2018-05-11',
120 |     className: 'is-complete'
121 |   },
122 |   {
123 |     id: 5100618988,
124 |     _id: 5100618988,
125 |     title: 'to主账号改动',
126 |     color: '#00ccff',
127 |     start: '2018-05-11',
128 |     end: '2018-05-11',
129 |     className: 'is-complete'
130 |   },
131 |   {
132 |     id: 5153091964,
133 |     _id: 5153091964,
134 |     title: '阿萨德飒飒',
135 |     color: '#e7c837',
136 |     start: '2018-05-11',
137 |     end: '2018-05-11',
138 |     className: ''
139 |   },
140 |   {
141 |     id: 5091242945,
142 |     _id: 5091242945,
143 |     title: '多跟进几次',
144 |     color: '#ff3333',
145 |     start: '2018-05-14',
146 |     end: '2018-05-15',
147 |     className: ''
148 |   },
149 |   {
150 |     id: 5143816315,
151 |     _id: 5143816315,
152 |     title: '跟进777',
153 |     color: '#00ccff',
154 |     start: '2018-05-17',
155 |     end: '2018-05-31',
156 |     className: 'is-complete'
157 |   },
158 |   {
159 |     id: 5057574665,
160 |     _id: 5057574665,
161 |     title: '多跟进几次',
162 |     color: '#ff3333',
163 |     start: '2018-05-18',
164 |     end: '2018-05-18',
165 |     className: ''
166 |   },
167 |   {
168 |     id: 5249057923,
169 |     _id: 5249057923,
170 |     title: '阿萨',
171 |     color: '#ff3333',
172 |     start: '2018-05-18',
173 |     end: '2018-05-18',
174 |     className: ''
175 |   },
176 |   {
177 |     id: 5092913829,
178 |     _id: 5092913829,
179 |     title: '666',
180 |     color: '#ff3333',
181 |     start: '2018-05-20',
182 |     end: '2018-05-20',
183 |     className: ''
184 |   },
185 |   {
186 |     id: 5297244188,
187 |     _id: 5297244188,
188 |     title: 'aghast',
189 |     color: '#ff3333',
190 |     start: '2018-05-22',
191 |     end: '2018-05-22',
192 |     className: 'is-complete'
193 |   },
194 |   {
195 |     id: 5298656459,
196 |     _id: 5298656459,
197 |     title: '打游戏',
198 |     color: '#ff3333',
199 |     start: '2018-05-22',
200 |     end: '2018-05-22',
201 |     className: ''
202 |   },
203 |   {
204 |     id: 5297273163,
205 |     _id: 5297273163,
206 |     title: '阿达萨',
207 |     color: '#ff3333',
208 |     start: '2018-05-22',
209 |     end: '2018-05-23',
210 |     className: ''
211 |   },
212 |   {
213 |     id: 5100541417,
214 |     _id: 5100541417,
215 |     title: '报价单新建',
216 |     color: '#28b779',
217 |     start: '2018-05-23',
218 |     end: '2018-05-23',
219 |     className: 'is-complete'
220 |   },
221 |   {
222 |     id: 5297244189,
223 |     _id: 5297244189,
224 |     title: 'aghast',
225 |     color: '#ff3333',
226 |     start: '2018-05-23',
227 |     end: '2018-05-23',
228 |     className: ''
229 |   },
230 |   {
231 |     id: 5298656460,
232 |     _id: 5298656460,
233 |     title: '打游戏',
234 |     color: '#ff3333',
235 |     start: '2018-05-23',
236 |     end: '2018-05-23',
237 |     className: ''
238 |   },
239 |   {
240 |     id: 5091255554,
241 |     _id: 5091255554,
242 |     title: '无关联客户的日程',
243 |     color: '#00ccff',
244 |     start: '2018-05-24',
245 |     end: '2018-05-24',
246 |     className: ''
247 |   },
248 |   {
249 |     id: 5297244190,
250 |     _id: 5297244190,
251 |     title: 'aghast',
252 |     color: '#ff3333',
253 |     start: '2018-05-24',
254 |     end: '2018-05-24',
255 |     className: 'is-complete'
256 |   },
257 |   {
258 |     id: 5298656461,
259 |     _id: 5298656461,
260 |     title: '打游戏',
261 |     color: '#ff3333',
262 |     start: '2018-05-24',
263 |     end: '2018-05-24',
264 |     className: ''
265 |   },
266 |   {
267 |     id: 5143816316,
268 |     _id: 5143816316,
269 |     title: '跟进777',
270 |     color: '#00ccff',
271 |     start: '2018-05-24',
272 |     end: '2018-06-07',
273 |     className: ''
274 |   },
275 |   {
276 |     id: 5297244191,
277 |     _id: 5297244191,
278 |     title: 'aghast',
279 |     color: '#ff3333',
280 |     start: '2018-05-25',
281 |     end: '2018-05-25',
282 |     className: ''
283 |   },
284 |   {
285 |     id: 5298656462,
286 |     _id: 5298656462,
287 |     title: '打游戏',
288 |     color: '#ff3333',
289 |     start: '2018-05-25',
290 |     end: '2018-05-25',
291 |     className: ''
292 |   },
293 |   {
294 |     id: 5297244192,
295 |     _id: 5297244192,
296 |     title: 'aghast',
297 |     color: '#ff3333',
298 |     start: '2018-05-26',
299 |     end: '2018-05-26',
300 |     className: ''
301 |   }
302 | ]
303 | export default list
304 | 


--------------------------------------------------------------------------------
/calendar-v3.0/mock.js:
--------------------------------------------------------------------------------
  1 | const list = [
  2 |   {
  3 |     id: 5018492800,
  4 |     _id: 5018492800,
  5 |     title: '发报价单！',
  6 |     color: '#fca7a7',
  7 |     start: '2018-05-02',
  8 |     end: '2018-05-02',
  9 |     className: 'is-complete',
 10 |     data: {
 11 |       user: 'hansin'
 12 |     }
 13 |   },
 14 |   {
 15 |     id: 5302659038,
 16 |     _id: 5302659038,
 17 |     title: '撒',
 18 |     color: '#fdd1a3',
 19 |     start: '2018-05-02',
 20 |     end: '2018-05-02',
 21 |     className: ''
 22 |   },
 23 |   {
 24 |     id: 53026590399,
 25 |     _id: 53026590399,
 26 |     title: '撒222222222',
 27 |     color: '#fdd1a3',
 28 |     start: '2018-05-02',
 29 |     end: '2018-05-05',
 30 |     className: ''
 31 |   },
 32 |   {
 33 |     id: 5018500790,
 34 |     _id: 5018500790,
 35 |     title: '群发邮件给联系人。',
 36 |     color: '#fca7a7',
 37 |     start: '2018-05-03',
 38 |     end: '2018-05-03',
 39 |     className: ''
 40 |   },
 41 |   {
 42 |     id: 5057574663,
 43 |     _id: 5057574663,
 44 |     title: '多跟进几次',
 45 |     color: '#fca7a7',
 46 |     start: '2018-05-04',
 47 |     end: '2018-05-04',
 48 |     className: ''
 49 |   },
 50 |   {
 51 |     id: 5071663243,
 52 |     _id: 5071663243,
 53 |     title: '高级跟进任务',
 54 |     color: '#fca7a7',
 55 |     start: '2018-05-04',
 56 |     end: '2018-05-04',
 57 |     className: 'is-complete'
 58 |   },
 59 |   {
 60 |     id: 5141124100,
 61 |     _id: 5141124100,
 62 |     title: '好干净啊好几个好几阿萨感觉到撒娇打撒个时间噶时间过萨国防建设公司就啊感觉阿萨感觉阿萨国际法感觉阿嘎说',
 63 |     color: '#fca7a7',
 64 |     start: '2018-05-05',
 65 |     end: '2018-05-16',
 66 |     className: 'is-complete'
 67 |   },
 68 |   {
 69 |     id: 5091242944,
 70 |     _id: 5091242944,
 71 |     title: '多跟进几次',
 72 |     color: '#fca7a7',
 73 |     start: '2018-05-07',
 74 |     end: '2018-05-08',
 75 |     className: ''
 76 |   },
 77 |   {
 78 |     id: 5089924516,
 79 |     _id: 5089924516,
 80 |     title: '模拟主账号跟进',
 81 |     color: '#9dd1ff',
 82 |     start: '2018-05-07',
 83 |     end: '2018-05-09',
 84 |     className: 'is-complete'
 85 |   },
 86 |   {
 87 |     id: 5128340768,
 88 |     _id: 5128340768,
 89 |     title: '去跟进山东公司',
 90 |     color: '#9dd1ff',
 91 |     start: '2018-05-09',
 92 |     end: '2018-05-16',
 93 |     className: 'is-complete'
 94 |   },
 95 |   {
 96 |     id: 5130571045,
 97 |     _id: 5130571045,
 98 |     title: '记得吃饭',
 99 |     color: '#fca7a7',
100 |     start: '2018-05-09',
101 |     end: '2018-05-17',
102 |     className: 'is-complete'
103 |   },
104 |   {
105 |     id: 5128201145,
106 |     _id: 5128201145,
107 |     title: '是谁',
108 |     color: '#fdd1a3',
109 |     start: '2018-05-10',
110 |     end: '2018-05-13',
111 |     className: 'is-complete'
112 |   },
113 |   {
114 |     id: 5057574664,
115 |     _id: 5057574664,
116 |     title: '多跟进几次',
117 |     color: '#fca7a7',
118 |     start: '2018-05-11',
119 |     end: '2018-05-11',
120 |     className: 'is-complete'
121 |   },
122 |   {
123 |     id: 5100618988,
124 |     _id: 5100618988,
125 |     title: 'to主账号改动',
126 |     color: '#93f0c0',
127 |     start: '2018-05-11',
128 |     end: '2018-05-11',
129 |     className: 'is-complete'
130 |   },
131 |   {
132 |     id: 5153091964,
133 |     _id: 5153091964,
134 |     title: '阿萨德飒飒',
135 |     color: '#fdd1a3',
136 |     start: '2018-05-11',
137 |     end: '2018-05-11',
138 |     className: ''
139 |   },
140 |   {
141 |     id: 5091242945,
142 |     _id: 5091242945,
143 |     title: '多跟进几次',
144 |     color: '#fca7a7',
145 |     start: '2018-05-14',
146 |     end: '2018-05-15',
147 |     className: ''
148 |   },
149 |   {
150 |     id: 5143816315,
151 |     _id: 5143816315,
152 |     title: '跟进777',
153 |     color: '#93f0c0',
154 |     start: '2018-05-17',
155 |     end: '2018-05-31',
156 |     className: 'is-complete'
157 |   },
158 |   {
159 |     id: 5057574665,
160 |     _id: 5057574665,
161 |     title: '多跟进几次',
162 |     color: '#fca7a7',
163 |     start: '2018-05-18',
164 |     end: '2018-05-18',
165 |     className: ''
166 |   },
167 |   {
168 |     id: 5249057923,
169 |     _id: 5249057923,
170 |     title: '阿萨',
171 |     color: '#fca7a7',
172 |     start: '2018-05-18',
173 |     end: '2018-05-18',
174 |     className: ''
175 |   },
176 |   {
177 |     id: 5092913829,
178 |     _id: 5092913829,
179 |     title: '666',
180 |     color: '#fca7a7',
181 |     start: '2018-05-20',
182 |     end: '2018-05-20',
183 |     className: ''
184 |   },
185 |   {
186 |     id: 5297244188,
187 |     _id: 5297244188,
188 |     title: 'aghast',
189 |     color: '#fca7a7',
190 |     start: '2018-05-22',
191 |     end: '2018-05-22',
192 |     className: 'is-complete'
193 |   },
194 |   {
195 |     id: 5298656459,
196 |     _id: 5298656459,
197 |     title: '打游戏',
198 |     color: '#fca7a7',
199 |     start: '2018-05-22',
200 |     end: '2018-05-22',
201 |     className: ''
202 |   },
203 |   {
204 |     id: 5297273163,
205 |     _id: 5297273163,
206 |     title: '阿达萨',
207 |     color: '#fca7a7',
208 |     start: '2018-05-22',
209 |     end: '2018-05-23',
210 |     className: ''
211 |   },
212 |   {
213 |     id: 5100541417,
214 |     _id: 5100541417,
215 |     title: '报价单新建',
216 |     color: '#9dd1ff',
217 |     start: '2018-05-23',
218 |     end: '2018-05-23',
219 |     className: 'is-complete'
220 |   },
221 |   {
222 |     id: 5297244189,
223 |     _id: 5297244189,
224 |     title: 'aghast',
225 |     color: '#fca7a7',
226 |     start: '2018-05-23',
227 |     end: '2018-05-23',
228 |     className: ''
229 |   },
230 |   {
231 |     id: 5298656460,
232 |     _id: 5298656460,
233 |     title: '打游戏',
234 |     color: '#fca7a7',
235 |     start: '2018-05-23',
236 |     end: '2018-05-23',
237 |     className: ''
238 |   },
239 |   {
240 |     id: 5091255554,
241 |     _id: 5091255554,
242 |     title: '无关联客户的日程',
243 |     color: '#93f0c0',
244 |     start: '2018-05-24',
245 |     end: '2018-05-24',
246 |     className: ''
247 |   },
248 |   {
249 |     id: 5297244190,
250 |     _id: 5297244190,
251 |     title: 'aghast',
252 |     color: '#fca7a7',
253 |     start: '2018-05-24',
254 |     end: '2018-05-24',
255 |     className: 'is-complete'
256 |   },
257 |   {
258 |     id: 5298656461,
259 |     _id: 5298656461,
260 |     title: '打游戏',
261 |     color: '#fca7a7',
262 |     start: '2018-05-24',
263 |     end: '2018-05-24',
264 |     className: ''
265 |   },
266 |   {
267 |     id: 5143816316,
268 |     _id: 5143816316,
269 |     title: '跟进777',
270 |     color: '#93f0c0',
271 |     start: '2018-05-24',
272 |     end: '2018-06-07',
273 |     className: ''
274 |   },
275 |   {
276 |     id: 5297244191,
277 |     _id: 5297244191,
278 |     title: 'aghast',
279 |     color: '#fca7a7',
280 |     start: '2018-05-25',
281 |     end: '2018-05-25',
282 |     className: ''
283 |   },
284 |   {
285 |     id: 5298656462,
286 |     _id: 5298656462,
287 |     title: '打游戏',
288 |     color: '#fca7a7',
289 |     start: '2018-05-25',
290 |     end: '2018-05-25',
291 |     className: ''
292 |   },
293 |   {
294 |     id: 5297244192,
295 |     _id: 5297244192,
296 |     title: 'aghast',
297 |     color: '#fca7a7',
298 |     start: '2018-05-26',
299 |     end: '2018-05-26',
300 |     className: ''
301 |   }
302 | ]
303 | export default list
304 | 


--------------------------------------------------------------------------------
/calendar-v3.0/customerSelect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |     title="添加关联客户"
  4 |     class="s-customer-dialog"
  5 |     :visible.sync="config.visible"
  6 |     :append-to-body="true"
  7 |     @close="cancelAdd"
  8 |   >
  9 |     <div>
 10 |       <div style="padding: 0 15px;">
 11 |         <el-input
 12 |           @keyup.enter.native="searchCustomer"
 13 |           placeholder="客户昵称、电子邮件、社交信息"
 14 |           v-model="keyWords">
 15 |           <i slot="suffix" @click="searchCustomer" class="el-input__icon el-icon-search"></i>
 16 |         </el-input>
 17 |       </div>
 18 |       <div class="content" v-loading="allLoading" v-if="listType === 'all'">
 19 |         <div class="all-user">
 20 |           <ul class="s-code">
 21 |             <li 
 22 |               v-for="(code, i) in codeList"
 23 |               @click="sliderList(code)"
 24 |               :key="i"
 25 |               :class="{'active': code === activeCode}"
 26 |             >{{code}}</li>
 27 |           </ul>
 28 |           <div ref="user-list" @scroll="userListScroll($event)" class="user-list">
 29 |             <ul ref="s-user" class="s-user">
 30 |               <li 
 31 |                 v-for="(group, i) in userGroupList"
 32 |                 v-if="group.list && group.list.length"
 33 |                 :key="i"
 34 |               >
 35 |                 <p class="group-title">{{group.code}}</p>
 36 |                 <ul>
 37 |                   <li class="user-item" 
 38 |                     v-for="(user, j) in group.list"
 39 |                     @click="selectUser(user)"
 40 |                     @dblclick="doubleSelectUser(user)"
 41 |                     :class="{'active':selectUserId === user.id}"
 42 |                     :key="j">
 43 |                     <span>{{user.name}}</span>
 44 |                   </li>
 45 |                 </ul>
 46 |               </li>
 47 |             </ul>
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 |       <div class="content" v-loading="searchLoading" v-if="listType === 'search'">
 52 |         <div class="search-content">
 53 |           <div class="user-list">
 54 |               <div v-if="searchPersonList.length">
 55 |                 <p class="search-title">搜索结果</p>
 56 |                 <ul>
 57 |                   <li class="user-item" 
 58 |                     v-for="(user, j) in searchPersonList"
 59 |                     :class="{'active':selectUserId === user.id}"
 60 |                     @click="selectUser(user)"
 61 |                     @dblclick="doubleSelectUser(user)"
 62 |                     :key="j">
 63 |                     <span>{{user.name}}</span>
 64 |                   </li>
 65 |                 </ul>
 66 |               </div>
 67 |               <div v-else-if="!searchLoading">
 68 |                 <p class="no-search">{{'没有搜索到“' + keyWords + '”相关的联系人'}}</p>
 69 |               </div>
 70 |             </div>
 71 |         </div>
 72 |       </div>
 73 |     </div>
 74 |     <div slot="footer" class="dialog-footer">
 75 |       <div class="footer-right">
 76 |         <el-button size="small" @click="cancelAdd">取 消</el-button>
 77 |         <el-button size="small" type="primary" @click="sureAdd">确定</el-button>
 78 |       </div>
 79 |     </div>
 80 |   </el-dialog>
 81 | </template>
 82 | <script>
 83 |   // import userList from './mockuser'
 84 |   import {mapGetters, mapActions} from 'vuex'
 85 |   export default {
 86 |     name: 'selectCustomer',
 87 |     data () {
 88 |       return {
 89 |         keyWords: '',
 90 |         userGroupList: [],
 91 |         userGroupObj: {},
 92 |         codeList: [],
 93 |         activeCode: 'A',
 94 |         selectUserId: '',
 95 |         selectUserObj: null,
 96 |         listType: 'all',
 97 |         allLoading: false,
 98 |         searchLoading: false
 99 |       }
100 |     },
101 |     props: {
102 |       config: {
103 |         type: Object,
104 |         default: () => {
105 |           return {
106 |             visible: false
107 |           }
108 |         }
109 |       }
110 |     },
111 |     watch: {
112 |       keyWords () {
113 |         if (!this.keyWords) {
114 |           this.listType = 'all'
115 |           this.$store.commit('COMMIT_SEARCHPERSON_LIST', [])
116 |         }
117 |       }
118 |     },
119 |     computed: {
120 |       ...mapGetters([ 'allPersonList', 'searchPersonList' ])
121 |     },
122 |     beforeMount () {
123 |       this.initUserGroup()
124 |     },
125 |     mounted () {
126 |       this.getUserList()
127 |     },
128 |     methods: {
129 |       ...mapActions([ 'GETALLPERSONLIST', 'SEARCHPERSONLIST' ]),
130 |       initUserGroup () {
131 |         let arr = []
132 |         let code = []
133 |         let obj = {}
134 |         for (let i = 65; i <= 90; i++) { // A-Z
135 |           let k = String.fromCharCode(i)
136 |           obj[k] = []
137 |           code.push(k)
138 |           arr.push({
139 |             'code': k,
140 |             'list': [],
141 |             'height': 0
142 |           })
143 |         }
144 |         obj['#'] = []
145 |         code.push('#')
146 |         arr.push({
147 |           'code': '#',
148 |           'list': [],
149 |           'height': 0
150 |         })
151 |         this.userGroupObj = obj
152 |         this.codeList = code
153 |         this.userGroupList = arr
154 |       },
155 |       getUserList () {
156 |         if (this.allPersonList.length) {
157 |           this.initAllUserList()
158 |         } else {
159 |           this.allLoading = true
160 |           this.GETALLPERSONLIST().then((list) => {
161 |             this.allLoading = false
162 |             this.initAllUserList()
163 |           })
164 |         }
165 |       },
166 |       initAllUserList () {
167 |         this.allPersonList.forEach((n, i) => {
168 |           let nameCode = n.name.substring(0, 1).toUpperCase()
169 |           if (this.codeList.indexOf(nameCode) !== -1) {
170 |             this.userGroupObj[nameCode].push(n)
171 |           } else {
172 |             this.userGroupObj['#'].push(n)
173 |           }
174 |         })
175 |         for (let key in this.userGroupObj) {
176 |           let index = this.codeList.indexOf(key)
177 |           this.userGroupList[index].height = this.getGroupItemHeight(key)
178 |           this.userGroupList[index].list = this.userGroupObj[key]
179 |         }
180 |       },
181 |       searchCustomer () {
182 |         // s
183 |         if (!this.keyWords) {
184 |           return
185 |           // this.$store.commit('COMMIT_SEARCHPERSON_LIST', [])
186 |         } else {
187 |           this.listType = 'search'
188 |           this.searchLoading = true
189 |           this.SEARCHPERSONLIST({keyWords: this.keyWords}).then((res) => {
190 |             this.searchLoading = false
191 |             // s
192 |           })
193 |         }
194 |       },
195 |       getGroupItemHeight (k) {
196 |         let groupNum = 0
197 |         let itemNum = 0
198 |         for (let key in this.userGroupObj) {
199 |           if (key === k) break
200 |           if (this.userGroupObj[key] && this.userGroupObj[key].length) {
201 |             groupNum += 1
202 |             this.userGroupObj[key].forEach((n, i) => {
203 |               itemNum += 1
204 |             })
205 |           }
206 |         }
207 |         return groupNum * 24 + itemNum * 36
208 |       },
209 |       userListScroll (e) {
210 |         let scrollTop = e.target.scrollTop + 100
211 |         this.userGroupList.forEach((n, i) => {
212 |           if (!n.height && scrollTop < this.userGroupList[i + 1].height) {
213 |             this.activeCode = n.code
214 |           } else if (n.height && n.height < scrollTop && this.userGroupList[i + 1] && this.userGroupList[i + 1].height > scrollTop) {
215 |             this.activeCode = n.code
216 |           } else if (!this.userGroupList[i + 1] && n.height < scrollTop) {
217 |             this.activeCode = n.code
218 |           }
219 |         })
220 |       },
221 |       sliderList (code) {
222 |         let height = 0
223 |         this.userGroupList.forEach((n) => {
224 |           if (code === n.code) {
225 |             height = n.height
226 |           }
227 |         })
228 |         this.activeCode = code
229 |         this.$refs['user-list'].scrollTop = height
230 |       },
231 |       selectUser (user) {
232 |         this.selectUserId = user.id
233 |         this.selectUserObj = user
234 |       },
235 |       doubleSelectUser (user) {
236 |         this.selectUserId = user.id
237 |         this.selectUserObj = user
238 |         this.$emit('sureAddCustomer', this.selectUserObj)
239 |       },
240 |       cancelAdd () {
241 |         this.$emit('cancel')
242 |       },
243 |       sureAdd () {
244 |         this.$emit('sureAddCustomer', this.selectUserObj)
245 |       }
246 |     }
247 |   }
248 | </script>
249 | <style lang="less" scoped>
250 | .all-user{
251 |   position: relative;
252 |   margin-top: 10px;
253 | }
254 | .user-list{
255 |   height: 440px;
256 |   overflow: auto;
257 | }
258 | .search-title{
259 |   font-size:14px;
260 |   color:rgba(122,135,148,1);
261 |   line-height: 36px;
262 |   text-indent: 24px;
263 | }
264 | .no-search{
265 |   line-height: 200px;
266 |   font-size:14px;
267 |   text-align: center;
268 |   color:rgba(163,172,181,1);
269 | }
270 | .group-title{
271 |   line-height: 24px;
272 |   background: #F5F6F7;
273 |   text-indent: 24px;
274 | }
275 | .user-item{
276 |   cursor: pointer;
277 |   line-height: 36px;
278 |   padding-right: 24px;
279 |   text-indent: 24px;
280 |   overflow: hidden;
281 |   text-overflow:ellipsis;
282 |   white-space: nowrap;
283 |   word-break: break-all;
284 |   user-select: none;
285 |   &:hover{
286 |     background: rgba(0,119,255,0.05);
287 |   }
288 |   &.active{
289 |     background: rgba(0,119,255,0.05);
290 |   }
291 | }
292 | .s-code{
293 |   float: right;
294 |   position: absolute;
295 |   top: 0;
296 |   right: 5px;
297 |   width: 24px;
298 |   height: 440px;
299 |   text-align: center;
300 |   font-size: 12px;
301 |   background: #fff;
302 |   li{
303 |     cursor: pointer;
304 |     line-height: 16px;
305 |     color: #A3ACB5;
306 |     &.active{
307 |       color: #33475B;
308 |     }
309 |   }
310 | }
311 | </style>
312 | <style lang="less">
313 | .s-customer-dialog{
314 |   .el-dialog{
315 |     width: 330px;
316 |     border-radius: 4px;
317 |     .el-dialog__header{
318 |       border-bottom: 2px solid #E1E4E7;
319 |     }
320 |     .el-dialog__body{
321 |       padding: 20px 0 0 0;
322 |     }
323 |     .el-dialog__footer{
324 |       padding: 10px;
325 |       border-top: 2px solid #E1E4E7;
326 |       .dialog-footer{
327 |         height: 36px;
328 |         .footer-right{
329 |           float: right;
330 |         }
331 |       }
332 |     }
333 |   }
334 | }
335 | </style>
336 | 


--------------------------------------------------------------------------------
/calendar-v3.0/addEventDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog :title="addConfig.editype === 'update' ? '修改日程' : '新增日程'" class="add-event-dialog" :visible.sync="addConfig.addVisible" @close="cancelAdd">
  3 |     <customerSelect 
  4 |       :config="addCustomerConfig"
  5 |       @cancel="cancelAddCustomer"
  6 |       @sureAddCustomer="changeCustomer"
  7 |     ></customerSelect>
  8 |     <div>
  9 |       <el-form :model="addEventForm" ref="addEventForm">
 10 |         <div class="form-label">* 日程内容</div>
 11 |         <ul class="color-list">
 12 |           <li class="color-item" v-for="(cItem, i) in colorList" @click="changeColor(cItem, i)" :key="i">
 13 |             <span class="color-border" :style="{
 14 |               borderColor: addEventForm.color === cItem.color ? cItem.borderColor : 'transparent'
 15 |             }">
 16 |               <span class="color-point" :style="{background: cItem.color}">
 17 |                 <i v-show="addEventForm.color === cItem.color" class="el-icon-check"></i>
 18 |               </span>
 19 |             </span>
 20 |           </li>
 21 |         </ul>
 22 |         <el-form-item
 23 |           prop="title"
 24 |           :rules="[{ required: true, message: '日程内容不能为空'}]"
 25 |         >
 26 |           <el-input
 27 |             type="title" 
 28 |             placeholder="请输入日程名称"
 29 |             v-model="addEventForm.title" 
 30 |             auto-complete="off"
 31 |             maxlength="200"
 32 |           ></el-input>
 33 |         </el-form-item>
 34 |         <div class="form-label">* 起止日期</div>
 35 |         <el-form-item
 36 |           prop="seTime"
 37 |           :rules="[{ required: true, message: '起始时间不能为空'}]"
 38 |         >
 39 |           <el-date-picker
 40 |             class="e-a-daterange"
 41 |             v-model="addEventForm.seTime"
 42 |             type="daterange"
 43 |             format="yyyy-MM-dd"
 44 |             value-format="yyyy-MM-dd"
 45 |             range-separator="至"
 46 |             start-placeholder="开始日期"
 47 |             end-placeholder="结束日期">
 48 |           </el-date-picker>
 49 |         </el-form-item>
 50 |         <div class="form-label">关联客户</div>
 51 |         <ul class="select-cus">
 52 |           <li v-if="addEventForm.customer" class="cus">
 53 |             <span @click="deletCustomer" class="cus-delet"><i class="el-icon-minus"></i></span>
 54 |             <span class="cus-avatar">
 55 |               <img :src="addEventForm.customer.avatar || '/static/img/default_avatar.png'" alt="">
 56 |             </span>
 57 |             <span class="cus-name">{{addEventForm.customer.name}}</span>
 58 |           </li>
 59 |           <li v-else class="add-cus" >
 60 |             <span  @click="addCustomer" class="add-icon">
 61 |               <i class="el-icon-plus"></i>
 62 |             </span>
 63 |             <span class="add-tip">添加关联客户</span>
 64 |           </li>
 65 |         </ul>
 66 |         <div class="form-label">* 参与人员</div>
 67 |         <el-form-item
 68 |           prop="user"
 69 |           :rules="[{ required: true, message: '参与人员不能为空'}]"
 70 |         >
 71 |           <el-select
 72 |             style="width: 100%;"
 73 |             class="e-user-select"
 74 |             popper-class="e-user-popper"
 75 |             v-model="addEventForm.user"
 76 |             multiple
 77 |             placeholder="请输入关键词"
 78 |           >
 79 |             <el-option
 80 |               v-for="item in accountList"
 81 |               :key="item.id"
 82 |               :label="item.name"
 83 |               :value="item.id">
 84 |             </el-option>
 85 |           </el-select>
 86 |         </el-form-item>
 87 |       </el-form>
 88 |       <div class="dialog-footer">
 89 |         <div class="footer-right">
 90 |           <el-button size="medium" @click="cancelAdd">取 消</el-button>
 91 |           <el-button size="medium" :disabled="btnLoading" type="primary" @click="subMit('addEventForm')">{{addConfig.editype === 'update' ? '修 改' : '新 建'}}</el-button>
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 |   </el-dialog>
 96 | </template>
 97 | <script>
 98 |   export default {
 99 |     name: 'addEventDialog',
100 |     data () {
101 |       return {
102 |         addEventForm: {
103 |           title: '',
104 |           color: '',
105 |           seTime: [],
106 |           user: [],
107 |           customer: null
108 |         },
109 |         btnLoading: false,
110 |         selectUser: [],
111 |         customOptions: [],
112 |         addCustomerConfig: {
113 |           visible: false
114 |         }
115 |       }
116 |     },
117 |     components: {
118 |       customerSelect: () => import('./customerSelect')
119 |     },
120 |     props: {
121 |       addConfig: {
122 |         type: Object,
123 |         default: () => {
124 |           return {
125 |             addVisible: false,
126 |             start: '',
127 |             end: '',
128 |             editype: 'add',
129 |             updateItem: null
130 |           }
131 |         }
132 |       },
133 |       colorList: {
134 |         type: Array,
135 |         default: () => []
136 |       },
137 |       accountList: {
138 |         type: Array,
139 |         default: () => []
140 |       }
141 |     },
142 |     watch: {
143 |       'addConfig.addVisible' () {
144 |         if (!this.addConfig.addVisible) {
145 |           this.addEventForm = {
146 |             title: '',
147 |             color: '',
148 |             seTime: [],
149 |             user: [],
150 |             customer: null
151 |           }
152 |           this.btnLoading = false
153 |         }
154 |       }
155 |     },
156 |     mounted () {
157 |       this.initForm()
158 |     },
159 |     methods: {
160 |       initForm () {
161 |         let arr = []
162 |         if (this.addConfig.start && this.addConfig.end) {
163 |           arr = [this.addConfig.start, this.addConfig.end]
164 |         } else if (this.addConfig.start) {
165 |           arr = [this.addConfig.start, this.addConfig.start]
166 |         }
167 |         this.addEventForm.seTime = arr
168 |         if (this.addConfig.editype === 'update') {
169 |           let item = this.addConfig.updateItem
170 |           this.addEventForm.color = item.data.color
171 |           this.addEventForm.title = item.data.title
172 |         } else {
173 |           this.addEventForm.color = this.colorList[0].color // 默认第一个颜色
174 |           // 默认参与人填自己
175 |           let user = window.localStorage.user ? JSON.parse(window.localStorage.user) : ''
176 |           if (user) {
177 |             this.addEventForm.user = [user.userId]
178 |           }
179 |         }
180 |       },
181 |       deletCustomer () {
182 |         this.addEventForm.customer = null
183 |       },
184 |       addCustomer () {
185 |         this.addCustomerConfig.visible = true
186 |       },
187 |       changeCustomer (user) {
188 |         this.addCustomerConfig.visible = false
189 |         this.addEventForm.customer = user
190 |       },
191 |       cancelAddCustomer () {
192 |         this.addCustomerConfig.visible = false
193 |       },
194 |       changeColor (item, i) {
195 |         this.addEventForm.color = item.color
196 |       },
197 |       cancelAdd () {
198 |         this.$emit('cancelAdd')
199 |       },
200 |       // 提交： type : 新增 / 修改
201 |       subMit (formName) {
202 |         console.log(this.addEventForm)
203 |         this.$refs[formName].validate((valid) => {
204 |           if (valid) {
205 |             let data = {
206 |               type: this.addConfig.editype,
207 |               form: this.addEventForm,
208 |               id: this.addConfig.updateItem ? this.addConfig.updateItem.data.id : ''
209 |             }
210 |             this.$emit('addSubmit', data)
211 |             this.btnLoading = true
212 |           } else {
213 |             return false
214 |           }
215 |         })
216 |       }
217 |     }
218 |   }
219 | </script>
220 | <style lang="less" scoped>
221 | .color-list{
222 |   margin-top: 12px;
223 | }
224 | .color-item{
225 |   display: inline-block;
226 |   cursor: pointer;
227 |   width: 40px;
228 |   height: 40px;
229 |   border-radius: 20px;
230 |   .color-border{
231 |     cursor: pointer;
232 |     display: inline-block;
233 |     width: 28px;
234 |     height: 28px;
235 |     border-radius: 50%;
236 |     border: 3px solid transparent;
237 |   }
238 |   .color-point{
239 |     cursor: pointer;
240 |     display: inline-block;
241 |     vertical-align: middle;
242 |     width: 28px;
243 |     height: 28px;
244 |     border-radius: 50%;
245 |     text-align: center;
246 |     line-height: 28px;
247 |     color: #fff;
248 |     font-size: 14px;
249 |   }
250 | }
251 | .form-label{
252 |   font-size: 14px;
253 |   color: #33475B;
254 | }
255 | .select-cus{
256 |   padding: 20px 0;
257 |   &::after{
258 |     content: '';
259 |     display: block;
260 |     visibility: hidden;
261 |     height: 0;
262 |     clear: both;
263 |   }
264 |   li{
265 |     float: left;
266 |   }
267 |   .cus{
268 |     position: relative;
269 |     span{
270 |       vertical-align: middle;
271 |     }
272 |     .cus-delet{
273 |       display: inline-block;
274 |       width: 16px;
275 |       height: 16px;
276 |       line-height: 16px;
277 |       border-radius: 8px;
278 |       text-align: center;
279 |       background: #F44336;
280 |       color: #fff;
281 |       position: absolute;
282 |       top: 0;
283 |       left: 30px;
284 |       cursor: pointer;
285 |       .el-icon-minus{
286 |         font-weight: bold;
287 |         font-size: 12px;
288 |       }
289 |     }
290 |     .cus-avatar{
291 |       display: inline-block;
292 |       width: 44px;
293 |       height: 44px;
294 |       border-radius: 50%;
295 |       overflow: hidden;
296 |       img{
297 |         width: 44px;
298 |         height: 44px;
299 |       }
300 |     }
301 |     .cus-name{
302 |       display: inline-block;
303 |       text-indent: 5px;
304 |       max-width: 360px;
305 |       overflow: hidden;
306 |       text-overflow:ellipsis;
307 |       white-space: nowrap;
308 |       word-break: break-all;
309 |     }
310 |   }
311 |   .add-cus{
312 |     span{
313 |       vertical-align: middle;
314 |     }
315 |     .add-icon{
316 |       cursor: pointer;
317 |       display: inline-block;
318 |       width: 44px;
319 |       height: 44px;
320 |       line-height: 44px;
321 |       text-align: center;
322 |       border-radius: 50%;
323 |       overflow: hidden;
324 |       background: rgba(124,152,182,0.05);
325 |       border: 2px dotted #BDCBDA;
326 |     }
327 |     .add-tips{
328 |       text-indent: 5px;
329 |     }
330 |   }
331 | }
332 | </style>
333 | <style lang="less">
334 | .add-event-dialog{
335 |   .el-dialog{
336 |     width: 526px;
337 |     border-radius: 4px;
338 |     .el-dialog__header{
339 |       border-bottom: 2px solid #E1E4E7;
340 |     }
341 |     .el-dialog__body{
342 |       padding: 20px 40px;
343 |     }
344 |     .dialog-footer{
345 |       height: 40px;
346 |       .footer-right{
347 |         float: right;
348 |       }
349 |     }
350 |   }
351 |   .e-a-daterange{
352 |     width: 100%;
353 |     .el-range__close-icon{
354 |       position: absolute;
355 |       right: 5px;
356 |     }
357 |     .el-range__icon{
358 |       line-height: 24px;
359 |     }
360 |   }
361 |   .e-user-select.el-select{
362 |     .el-tag{
363 |       background-color: rgba(0,119,255,0.10);
364 |       color: #33475B;
365 |       .el-tag__close.el-icon-close{
366 |         background-color: rgba(0,119,255, .4);
367 |       }
368 |     }
369 |   }
370 | }
371 | .e-user-popper{
372 |   .popper__arrow{
373 |     display: none;
374 |   }
375 | }
376 | </style>
377 | 


--------------------------------------------------------------------------------
/calendar-v3.0/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="calender">
  3 |     <p class="calender-title">日历进程</p>
  4 |     <calendarHeadar
  5 |       :timeData="{
  6 |         year: year,
  7 |         month: month,
  8 |         timeType: timeType
  9 |       }"
 10 |       :colorList="colorList"
 11 |       :accountList="accountList"
 12 |       :weekRangIndex="weekRangIndex"
 13 |       @changeTime="changeTime"
 14 |       @changeTimeType="changeTimeType"
 15 |       @changeTimeRange="changeTimeRange"
 16 |       @addEventShow="addEventShow"
 17 |       @accountChange="accountFilterChange"
 18 |       @colorChange="colorFilterChange"
 19 |     ></calendarHeadar>
 20 |     <div
 21 |       class="calender-body"
 22 |       :style="{minHeight: timeType === 'month' ? '600px' : '200px'}"
 23 |       v-loading="eventLoading"
 24 |     >
 25 |       <eventCalendar
 26 |         :year="year"
 27 |         :month="month"
 28 |         :tYear="tYear"
 29 |         :tMonth="tMonth"
 30 |         :tDay="tDay"
 31 |         :timeType="timeType"
 32 |         :weekRangIndex="weekRangIndex"
 33 |         :asycEventList="asycEventList"
 34 |         :updateCalendar="updateCalendar"
 35 |         :hiddenPopover="hiddenPopover"
 36 |         @addEventShow="addEventShow"
 37 |         @updateEventShow="updateEventShow"
 38 |         @deletEventShow="deletEventShow"
 39 |         @getCurrentWeekIndex="getCurrentWeekIndex"
 40 |         @getDaysList="getDaysList"
 41 |       ></eventCalendar>
 42 |     </div>
 43 |     <addEventDialog
 44 |       v-if="addConfig.addVisible"
 45 |       :addConfig="addConfig"
 46 |       :colorList="colorList"
 47 |       :accountList="accountList"
 48 |       @cancelAdd="cancelAdd"
 49 |       @addSubmit="addSubmit"
 50 |     ></addEventDialog>
 51 |     <DialogBox :config="deleteConfig" @sure="sureDelete"></DialogBox>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script>
 56 |   // import userScheduleRead from './mock.js'
 57 |   import {mapGetters, mapActions} from 'vuex'
 58 |   import DialogBox from '@/components/box/dialogBox'
 59 |   export default {
 60 |     name: 'calendar',
 61 |     data () {
 62 |       return {
 63 |         updateCalendar: 0, // eventCalendar watch updateCalendar to update UI
 64 |         hiddenPopover: 0,
 65 |         year: 1970,
 66 |         month: 1,
 67 |         tYear: 1970,
 68 |         tMonth: 1,
 69 |         tDay: 1,
 70 |         timeType: 'month',
 71 |         weekRangIndex: 0, // 0 - 4 共5周
 72 |         currentWeekIndex: 0,
 73 |         eventLoading: false,
 74 |         accountIds: [],
 75 |         colors: [],
 76 |         asycStart: '',
 77 |         asycEnd: '',
 78 |         asycEventList: [],
 79 |         accountList: [],
 80 |         userId: '',
 81 |         colorList: [
 82 |           {
 83 |             name: '红（浅）',
 84 |             color: '#fca7a7',
 85 |             borderColor: 'rgba(252, 167, 167, 0.4)'
 86 |           },
 87 |           {
 88 |             name: '蓝（浅）',
 89 |             color: '#9dd1ff',
 90 |             borderColor: 'rgba(157,209,255, 0.4)'
 91 |           },
 92 |           {
 93 |             name: '紫（浅）',
 94 |             color: '#bbbbff',
 95 |             borderColor: 'rgba(187,187,255, 0.4)'
 96 |           },
 97 |           {
 98 |             name: '橙（浅）',
 99 |             color: '#fdd1a3',
100 |             borderColor: 'rgba(253,209,163, 0.4)'
101 |           },
102 |           {
103 |             name: '绿（浅）',
104 |             color: '#93f0c0',
105 |             borderColor: 'rgba(147,240,192, 0.4)'
106 |           }
107 |         ],
108 |         addConfig: {
109 |           addVisible: false,
110 |           start: '',
111 |           end: '',
112 |           editype: 'add',
113 |           updateItem: null
114 |         },
115 |         initAddConfig: {
116 |           addVisible: false,
117 |           start: '',
118 |           end: '',
119 |           editype: 'add',
120 |           updateItem: null
121 |         },
122 |         deleteConfig: {
123 |           visible: false,
124 |           notice: '',
125 |           message: ''
126 |         },
127 |         deleteId: ''
128 |       }
129 |     },
130 |     computed: {
131 |       ...mapGetters([ 'eventList' ])
132 |     },
133 |     components: {
134 |       DialogBox,
135 |       calendarHeadar: () => import('./calendarHeader'),
136 |       eventCalendar: () => import('./eventCalendar'),
137 |       addEventDialog: () => import('./addEventDialog')
138 |     },
139 |     filters: {},
140 |     mounted () {
141 |       // 每月第一天作为初始参数
142 |       let date = new Date()
143 |       this.tYear = this.year = date.getFullYear()
144 |       this.tMonth = this.month = date.getMonth() + 1
145 |       this.tDay = date.getDate()
146 |       // this.asycEventList = userScheduleRead.slice(0)
147 |       this.checkAccount()
148 |     },
149 |     methods: {
150 |       ...mapActions([ 'GETEVENTLIST', 'ADDEVENT', 'UPDATEEVENT', 'DELETEVENT' ]),
151 |       getEventList () {
152 |         let params = {
153 |           start: this.asycStart,
154 |           end: this.asycEnd
155 |         }
156 |         this.eventLoading = true
157 |         this.GETEVENTLIST(params).then((list) => {
158 |           this.eventLoading = false
159 |           this.eventFilter()
160 |         })
161 |       },
162 |       // 关闭添加弹窗
163 |       cancelAdd () {
164 |         this.addConfig = Object.assign({}, this.initAddConfig)
165 |       },
166 |       checkAccount () {
167 |         let user = window.localStorage.user ? JSON.parse(window.localStorage.user) : ''
168 |         if (user && !user.parentUserId) {
169 |           this.showAccout = true
170 |           let sublist = user.subUserList
171 |           let account = [{name: user.name || user.loginAccount, id: user.userId}]
172 |           if (sublist && sublist.length) {
173 |             account = account.concat(sublist)
174 |           }
175 |           this.accountList = account
176 |         }
177 |       },
178 |       getDaysList (days) {
179 |         let start = days[0].dayArr[0].dateStr
180 |         let end = days[days.length - 1].dayArr[6].dateStr
181 |         if (start !== this.asycStart) {
182 |           this.asycStart = start
183 |           this.asycEnd = end
184 |           this.getEventList()
185 |         }
186 |       },
187 |       changeMonth (a) {
188 |         if (a === 'add') {
189 |           if (this.month < 12) {
190 |             this.month += 1
191 |           } else {
192 |             this.year += 1
193 |             this.month = 1
194 |           }
195 |         } else if (a === 'reduce') {
196 |           if (this.month > 1) {
197 |             this.month -= 1
198 |           } else {
199 |             this.month = 12
200 |             this.year -= 1
201 |           }
202 |         }
203 |         this.weekRangIndex = 0
204 |       },
205 |       changeWeek (a) {
206 |         if (a === 'add') {
207 |           if (this.weekRangIndex < 4) {
208 |             this.weekRangIndex += 1
209 |           } else {
210 |             this.changeMonth(a)
211 |             this.weekRangIndex = 0
212 |           }
213 |         } else if (a === 'reduce') {
214 |           if (this.weekRangIndex > 0) {
215 |             this.weekRangIndex -= 1
216 |           } else {
217 |             this.changeMonth(a)
218 |             this.weekRangIndex = 4
219 |           }
220 |         }
221 |       },
222 |       // changeTime
223 |       changeTime (a) {
224 |         if (this.timeType === 'month') {
225 |           this.changeMonth(a)
226 |         } else {
227 |           this.changeWeek(a)
228 |         }
229 |         this.updateCalendar += 1
230 |       },
231 |       changeTimeType (t) {
232 |         this.timeType = t // month or week
233 |         this.weekRangIndex = 0
234 |         this.updateCalendar += 1
235 |       },
236 |       changeTimeRange (t) {
237 |         this.year = this.tYear
238 |         this.month = this.tMonth
239 |         this.weekRangIndex = t === 'tomonth' ? 0 : this.currentWeekIndex // 代表回到本周
240 |         this.updateCalendar += 1
241 |       },
242 |       getCurrentWeekIndex (n) {
243 |         this.currentWeekIndex = n
244 |       },
245 |       addEventShow (t) {
246 |         let start
247 |         if (t === 'now') {
248 |           start = this.formatDate(this.tYear, this.tMonth, this.tDay)
249 |         } else if (t) {
250 |           start = t
251 |         }
252 |         this.addConfig.start = start
253 |         this.addConfig = Object.assign(this.addConfig, {addVisible: true})
254 |       },
255 |       updateEventShow (item) {
256 |         this.addConfig = Object.assign(this.addConfig, {
257 |           start: item.start,
258 |           end: item.end,
259 |           editype: 'update',
260 |           addVisible: true,
261 |           updateItem: item
262 |         })
263 |       },
264 |       deletEventShow (item) {
265 |         Object.assign(this.deleteConfig, {
266 |           visible: true,
267 |           notice: '确定删除该日程吗？',
268 |           message: item.data.title
269 |         })
270 |         this.deleteId = item.data.id
271 |       },
272 |       sureDelete () {
273 |         this.DELETEVENT({id: this.deleteId}).then((res) => {
274 |           if (res.data && !res.data.code) {
275 |             this.getEventList()
276 |             this.hiddenPopover ++ // 用于隐藏弹框
277 |           }
278 |         })
279 |       },
280 |       addSubmit (data) {
281 |         // console.log(data)
282 |         let type = data.type
283 |         let form = data.form
284 |         if (type === 'add') {
285 |           //  调用新增接口
286 |           let params = {
287 |             title: form.title
288 |           }
289 |           this.ADDEVENT(params).then((res) => {
290 |             this.addConfig = Object.assign({}, this.initAddConfig)
291 |             this.getEventList()
292 |           })
293 |         } else if (type === 'update') {
294 |           //  调用更新接口
295 |           let params = {
296 |             title: form.title
297 |           }
298 |           this.UPDATEEVENT(params).then((res) => {
299 |             this.addConfig = Object.assign({}, this.initAddConfig)
300 |             this.getEventList()
301 |           })
302 |         }
303 |       },
304 |        // 返回 类似 2016-01-02 格式的字符串
305 |       formatDate (year, month, day) {
306 |         var y = year
307 |         var m = month
308 |         if (m < 10) m = '0' + m
309 |         var d = day
310 |         if (d < 10) d = '0' + d
311 |         return y + '-' + m + '-' + d
312 |       },
313 |       // 列表搜索相关
314 |       accountFilterChange (users) {
315 |         let ids = []
316 |         users.forEach((n) => {
317 |           ids.push(n.id)
318 |         })
319 |         this.accountIds = ids
320 |         this.eventFilter()
321 |       },
322 |       colorFilterChange (colorList) {
323 |         let colors = []
324 |         colorList.forEach((n, i) => {
325 |           colors.push(n.color)
326 |         })
327 |         this.colors = colors
328 |         this.eventFilter()
329 |       },
330 |       eventFilter () {
331 |         // let eList = userScheduleRead.slice(0)
332 |         let eList = this.eventList.slice(0)
333 |         let filterList = []
334 |         if (this.colors && this.colors.length) {
335 |           eList.forEach((ev, i) => {
336 |             // 颜色筛选
337 |             if (this.colors.indexOf(ev.color) !== -1) {
338 |               filterList.push(ev)
339 |             }
340 |           })
341 |         } else {
342 |           filterList = eList
343 |         }
344 |         let lastList = []
345 |         // if (this.accountIds && this.accountIds.length) {
346 |         //   filterList.forEach((ev, i) => {
347 |         //     //  账号筛选
348 |         //     if (this.accountIds.indexOf(ev.data.user) !== -1) {
349 |         //       lastList.push(ev)
350 |         //     }
351 |         //   })
352 |         // } else {
353 |         //   lastList = filterList
354 |         // }
355 |         lastList = filterList
356 |         this.asycEventList = lastList
357 |         this.updateCalendar += 1
358 |       }
359 |     }
360 |   }
361 | </script>
362 | <style lang="less" scoped>
363 | .calender{
364 |   width: 1200px;
365 |   padding-bottom: 20px;
366 |   background: #fff;
367 |   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
368 |   .calender-title{
369 |     line-height: 60px;
370 |     font-size: 16px;
371 |     text-indent: 20px;
372 |   }
373 |   .calender-body{
374 |     padding: 0 20px;
375 |   }
376 | }
377 | 
378 | </style>
379 | 
380 | 


--------------------------------------------------------------------------------
/calendar-v1.0/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="calender">
  3 |     <div>
  4 |       <el-select v-model="year" placeholder="年" @change="changeYearMonth">
  5 |         <el-option
  6 |           v-for="item in yearlist"
  7 |           :label="item.label"
  8 |           :key="item.val"
  9 |           :value="item.val">
 10 |         </el-option>
 11 |       </el-select>
 12 |       <el-select v-model="month" placeholder="月" @change="changeYearMonth">
 13 |         <el-option
 14 |           v-for="item in monthlist"
 15 |           :label="item.label"
 16 |           :key="item.val"
 17 |           :value="item.val">
 18 |         </el-option>
 19 |       </el-select>
 20 |     </div>
 21 |     <div>
 22 |       <div class="weeks">
 23 |         <strong 
 24 |           class="week"
 25 |           v-for="dayIndex in 7"
 26 |           :key="dayIndex"
 27 |           :class="{'week-today': currentmonthstart === monthstart && dayIndex - 1 === currentWeek}"
 28 |         >
 29 |           {{ (dayIndex - 1) | localeWeekDay }}
 30 |         </strong>
 31 |       </div>
 32 |       <div class="c-container">
 33 |         <div v-for="(obj, j) in days" :key="j">
 34 |           <table class="c-table">
 35 |             <thead>
 36 |               <tr>
 37 |                 <td class="c-h-cell" v-for="(day, i) in obj.dayArr" :key="i">
 38 |                   <span class="cell-day"
 39 |                     title="新建事件"
 40 |                     @click="addNewEvent"
 41 |                     :class="{otherMonth: isOtherMonth(day),today: isToday(day)}">{{day.date}}</span>
 42 |                 </td>
 43 |               </tr>
 44 |             </thead>
 45 |             <tbody>
 46 |               <!-- <tr v-for="(wk, i) in testEventList" :key="i">
 47 |                 <td>{{wk.type}}</td>
 48 |               </tr> -->
 49 |               <!-- <tr v-for="(day, i) in obj" :key="i">
 50 |                 <template v-for="(ev ,n) in day.eventList">
 51 |                   <td v-if="ev.row" :key="n" :colspan="ev.row">{{ev.row}}</td>
 52 |                   <td v-else :key="n"></td>
 53 |                 </template>
 54 |               </tr> -->
 55 |             </tbody>
 56 |           </table>
 57 |           <div class="event-container">
 58 |             <div class="s"
 59 |               v-for="(n, i) in obj.weekEventList"
 60 |               :key="i"
 61 |               :style="{
 62 |                 width: (n._eLen * 170) + 'px',
 63 |                 left: (n._eX * 170) + 'px',
 64 |                 top: (n._eY * 40) + 'px'
 65 |               }"
 66 |             >{{n.start + 'M' + n.end}}</div>
 67 |           </div>
 68 |         </div>
 69 |       </div>
 70 |     </div>
 71 |   </div>
 72 | </template>
 73 | 
 74 | <script>
 75 |   import userScheduleRead from './mockeasy.js'
 76 |   export default {
 77 |     name: 'calendar',
 78 |     data () {
 79 |       return {
 80 |         year: 2018,
 81 |         month: 5,
 82 |         yearlist: [],
 83 |         monthlist: [],
 84 |         currentmonthstart: 0,
 85 |         monthstart: 0,
 86 |         dayIndex: 1,
 87 |         currentDates: [],
 88 |         currentDay: 1,
 89 |         currentMonth: 1,
 90 |         currentYear: 1970,
 91 |         currentWeek: 1,
 92 |         days: [],
 93 |         dayEventLen: [0, 0, 0, 0, 0, 0, 0],
 94 |         calendarPlan: [],
 95 |         lastMonthData: null
 96 |       }
 97 |     },
 98 |     filters: {
 99 |       localeWeekDay (weekday) {
100 |         let map = {0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六'}
101 |         return map[weekday]
102 |       },
103 |       YMDformat (value) {
104 |         if (!value || value === '') {
105 |           return ''
106 |         }
107 |         // 返回处理后的值
108 |         let time = new Date(value)
109 |         let year = time.getFullYear()
110 |         let month = (time.getMonth() < 9 ? '0' : '') + (time.getMonth() + 1)
111 |         let day = (time.getDate() < 10 ? '0' : '') + time.getDate()
112 |         return year + '-' + month + '-' + day
113 |       }
114 |     },
115 |     mounted () {
116 |       // 每月第一天作为初始参数
117 |       let date = new Date()
118 |       this.getEachCalendar(this.formatDate(date.getFullYear(), date.getMonth() + 1, 1))
119 |       this.initYearList()
120 |       /**
121 |        * 华丽分割线
122 |        * 如果前一项没占到当前事项的位置，push当前事项
123 |        * 如果前一项占了当前事项的位置，push空值
124 |        * 列数计算< allRow >：
125 |        *                  getAllRow 除了某天最高项，还要加上被挤到下面的项？how to do?
126 |        *                  先计算allRow，再向allRow中push事件数据项 或 空值数据项
127 |        * 行数计算< allCol >： week.length
128 |        */
129 |     },
130 |     methods: {
131 |       initEventList (weekArr) {
132 |         let week = []
133 |         weekArr.forEach((n) => {
134 |           week.push(n.dateStr)
135 |         })
136 |         let objList = []
137 |         let weekObj = {}
138 |         let weekLen = {}
139 |         let weekPoint = []
140 |         week.forEach((w) => {
141 |           weekObj[w] = []
142 |           weekLen[w] = 0
143 |         })
144 |         let allLen = 0
145 |         userScheduleRead.forEach((ev, i) => {
146 |           let obj = {
147 |             _day: this.tfDays(ev.start, ev.end),
148 |             start: ev.start,
149 |             end: ev.end,
150 |             data: ev
151 |           }
152 |           let dayWeekIndex = 0
153 |           let dayEventLen = 0
154 |           let dayWeekYi = 0
155 |           // 事件的Start在本周，或者本周第一天（周日）在事件中
156 |           if (weekObj[ev.start] || this.inMiddleDay(ev.start, ev.end, week[0])) {
157 |             if (weekObj[ev.start]) {
158 |               dayWeekIndex = week.indexOf(ev.start)
159 |               if (dayWeekIndex + this.tfDays(ev.start, ev.end) <= week.length) {
160 |                 dayEventLen = this.tfDays(ev.start, ev.end)
161 |                 weekLen[ev.start] = weekLen[ev.start] + this.tfDays(ev.start, ev.end)
162 |               } else {
163 |                 dayEventLen = week.length - dayWeekIndex
164 |                 weekLen[ev.start] = week.length
165 |               }
166 |               // 如果是周的第一天，切在一个事件的中
167 |             } else if (this.inMiddleDay(ev.start, ev.end, week[0])) {
168 |               if (dayWeekIndex + this.tfDays(week[0], ev.end) <= week.length) {
169 |                 dayEventLen = this.tfDays(week[0], ev.end)
170 |                 weekLen[week[0]] = weekLen[week[0]] + this.tfDays(week[0], ev.end)
171 |               } else {
172 |                 dayEventLen = week.length - dayWeekIndex
173 |                 weekLen[ev.start] = week.length
174 |               }
175 |             }
176 |             // ev._eY用于与上上周位置对齐
177 |             dayWeekYi = ev._eY || this.getEventY(dayWeekIndex, dayEventLen, weekPoint).yI
178 |             obj._eLen = dayEventLen // event 长度，不能超过一周（7）
179 |             obj._eX = dayWeekIndex // 当天所在周的标（横坐标X）原点（0,0）
180 |             obj._eY = dayWeekYi // 纵坐标Y
181 |             allLen = allLen + 1
182 |             objList.push(obj)
183 |             let eventPoint = this.getEventPoint(obj._eX, obj._eY, obj._eLen)
184 |             // let eventPoint = this.getEventY(dayWeekIndex, dayEventLen, weekPoint).pointArr // 新点位放入weekPoint
185 |             weekPoint = weekPoint.concat(eventPoint)
186 |             userScheduleRead[i]._eY = obj._eY
187 |           }
188 |         })
189 |         return objList
190 |       },
191 |       getEventPoint (eX, eY, eLen) {
192 |         let arr = []
193 |         for (let i = 0; i < eLen; i++) {
194 |           // Y坐标不变，X递增
195 |           arr.push(eX + i + ',' + eY)
196 |         }
197 |         return arr
198 |       },
199 |       // 求Y坐标
200 |       getEventY (weekIndex, len, allPoint, yI = 0) {
201 |         let arr = []
202 |         for (let i = weekIndex; i < len + weekIndex; i++) {
203 |           arr.push(i + ',' + yI)
204 |         }
205 |         let beenY = false
206 |         arr.forEach((n) => {
207 |           if (allPoint.indexOf(n) !== -1) {
208 |             beenY = true
209 |           }
210 |         })
211 |         if (beenY) {
212 |           return this.getEventY(weekIndex, len, allPoint, yI + 1)
213 |         } else {
214 |           return {
215 |             yI: yI,
216 |             pointArr: arr
217 |           }
218 |         }
219 |       },
220 |       // 初始化年列表
221 |       initYearList () {
222 |         let year = new Date().getFullYear()
223 |         this.yearlist = [{
224 |           val: year,
225 |           label: year + '年'
226 |         }]
227 |         for (let i = 1; i <= 5; i++) {
228 |           this.yearlist.push({
229 |             val: year + i,
230 |             label: year + i + '年'
231 |           })
232 |           this.yearlist.unshift({
233 |             val: year - i,
234 |             label: year - i + '年'
235 |           })
236 |         }
237 |         for (let i = 1; i <= 12; i++) {
238 |           this.monthlist.push({
239 |             val: i,
240 |             label: i + '月'
241 |           })
242 |         }
243 |       },
244 |       changeYearMonth () {
245 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
246 |       },
247 |       // 每个月的日期表
248 |       getEachCalendar (cur) {
249 |         var date
250 |         if (cur) {
251 |           date = new Date(cur)
252 |         } else {
253 |           date = new Date()
254 |         }
255 |         this.currentDay = date.getDate()
256 |         this.currentYear = this.year = date.getFullYear()
257 |         this.currentMonth = this.month = date.getMonth() + 1
258 |         this.currentWeek = date.getDay()
259 |         let traceDay = 35 - (this.currentWeek + 1)
260 |         //  如果把周日设置为第一天
261 |         // let setSunTolast = false
262 |         // if (this.currentWeek === 0 && setSunTolast) {
263 |         //   this.currentWeek = 7
264 |         //   traceDay = 35 - this.currentWeek
265 |         // }
266 |         var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
267 |         let dayArr = []
268 |         // 第一天以前的数据（上个月的数据）
269 |         for (let i = this.currentWeek; i >= 0; i--) {
270 |           let d = new Date(str)
271 |           d.setDate(d.getDate() - i)
272 |           dayArr.push(this.dealDateData(d))
273 |         }
274 |         // 第一天及以后的日期（包括下个月）
275 |         for (let i = 1; i <= traceDay; i++) {
276 |           let d = new Date(str)
277 |           d.setDate(d.getDate() + i)
278 |           dayArr.push(this.dealDateData(d))
279 |         }
280 |         // 把dayArr处理成5组
281 |         let dayArrObj = []
282 |         let copyDayArr = dayArr.slice(0)
283 |         for (let i = 0; i < 5; i++) {
284 |           let weekArr = copyDayArr.splice(0, 7)
285 |           dayArrObj.push({
286 |             dayArr: weekArr,
287 |             weekEventList: this.initEventList(weekArr)
288 |           })
289 |         }
290 |         // console.log(dayArrObj)
291 |         this.days = dayArrObj
292 |       },
293 |        // 返回 类似 2016-01-02 格式的字符串
294 |       formatDate (year, month, day) {
295 |         var y = year
296 |         var m = month
297 |         if (m < 10) m = '0' + m
298 |         var d = day
299 |         if (d < 10) d = '0' + d
300 |         return y + '-' + m + '-' + d
301 |       },
302 |       dealDateData (d) {
303 |         let item = {}
304 |         item.date = d.getDate()
305 |         item.year = d.getFullYear()
306 |         item.month = d.getMonth() + 1
307 |         item.dateStr = this.formatDate(item.year, item.month, item.date)
308 |         item.eventList = []
309 |         // 异步数据
310 |         userScheduleRead.forEach((n) => {
311 |           let col = Object.assign({ row: 0 }, n)
312 |           if (n.start === item.dateStr) {
313 |             col.tfDays = this.tfDays(n.start, n.end)
314 |             col.row = col.row + col.tfDays
315 |             item.eventList.push(col)
316 |           }
317 |         })
318 |         return item
319 |       },
320 |       // 事件列长度
321 |       eventLen () {
322 |         // ss
323 |       },
324 |       // 时间差
325 |       tfDays (start, end) {
326 |         let sTime = new Date(start).getTime()
327 |         let eTime = new Date(end).getTime()
328 |         let day = (eTime - sTime) / (3600 * 1000 * 24) + 1
329 |         // 如果精确到时分，还需要调整
330 |         // let _day = ((start, end) => {
331 |         //   if (start.slice(0, 11) !== end && start.slice(0, 11) && (eTime - sTime) % (3600 * 1000 * 24)) {
332 |         //     day = day + 1
333 |         //   }
334 |         // })()
335 |         return day
336 |       },
337 |       inMiddleDay (start, end, middle) {
338 |         let isMiddle = false
339 |         let sTime = new Date(start).getTime()
340 |         let eTime = new Date(end).getTime()
341 |         let mTime = new Date(middle).getTime()
342 |         if (eTime > mTime && mTime > sTime) {
343 |           isMiddle = true
344 |         }
345 |         return isMiddle
346 |       },
347 |       preColSpanLen (colArr, index) {
348 |         let num = colArr.reduce((t, n) => {
349 |           return t + n
350 |         })
351 |         return (index + 1) > num
352 |       },
353 |       isOtherMonth (item) {
354 |         // let d = new Date()
355 |         if (item.month === this.currentMonth && item.year === this.currentYear) {
356 |           return false
357 |         } else {
358 |           return true
359 |         }
360 |       },
361 |       isToday (item) {
362 |         let d = new Date()
363 |         if (item.month === (d.getMonth() + 1) && item.date === d.getDate() && item.year === d.getFullYear()) {
364 |           return true
365 |         } else {
366 |           return false
367 |         }
368 |       },
369 |       addNewEvent () {
370 |         // s
371 |       }
372 |     }
373 |   }
374 | </script>
375 | <style lang="less" scoped>
376 | .event-container{
377 |   width: 100%;
378 |   height: 400px;
379 |   box-sizing: border-box;
380 |   border: 1px solid #ddd;
381 |   position: relative;
382 |   .s{
383 |     height: 40px;
384 |     width: 80px;
385 |     border: 1px solid;
386 |     margin: 5px;
387 |     position: absolute;
388 |   }
389 | }
390 | 
391 | 
392 | .calender{
393 |   width: 1200px;
394 |   margin: 50px auto;
395 | }
396 | .weeks{
397 |   margin-top: 20px;
398 |   display: flex;
399 |   border-bottom: 1px solid #e0e0e0;
400 | }
401 | .week{
402 |   height: 30px;
403 |   line-height: 30px;
404 |   flex: 1;
405 |   text-align: center;
406 | }
407 | .otherMonth{
408 |   color: gainsboro;
409 | }
410 | .today{
411 |   color: red;
412 | }
413 | .c-container{
414 |   border: 1px solid #eee;
415 |   border-top: none;
416 |   box-sizing: border-box;
417 | }
418 | .c-table{
419 |   width: 100%;
420 |   table-layout: fixed;
421 |   border-collapse: collapse;
422 |   border-spacing: 0;
423 |   font-size: 1em;
424 |   box-sizing: content-box;
425 |   border-left: 0 hidden transparent;
426 |   border-right: 0 hidden transparent;
427 |   border-bottom: 0 hidden transparent;
428 |   border-color: #ddd;
429 |   td,th{
430 |     border-style: solid;
431 |     border-width: 1px;
432 |     padding: 0;
433 |     vertical-align: top;
434 |     border-color: #ddd;
435 |   }
436 |   .c-h-cell{
437 |     height: 22px;
438 |     text-align: right;
439 |   }
440 |   .cell-day{
441 |     display: inline-block;
442 |     width: 100%;
443 |     font-size: 18px;
444 |     line-height: 22px;
445 |     cursor: pointer;
446 |   }
447 |   tbody{
448 |     td{
449 |       height: 20px;
450 |       padding-top: 1px;
451 |       vertical-align: middle;
452 |     }
453 |     .c-content{
454 |       height: 18px;
455 |       line-height: 18px;
456 |       border-radius: 3px;
457 |       cursor: pointer;
458 |       background: #ff3333;
459 |       color: #fff;
460 |       padding-left: 3px;
461 |     }
462 |   }
463 | }
464 | </style>
465 | 
466 | 


--------------------------------------------------------------------------------
/calendar-v2.0/eventCalendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="event-calender">
  3 |     <div>
  4 |       <div class="weeks">
  5 |         <span
  6 |           class="week"
  7 |           v-for="dayIndex in 7"
  8 |           :key="dayIndex"
  9 |         >
 10 |           {{ (dayIndex - 1) | localeWeekDay }}
 11 |         </span>
 12 |       </div>
 13 |       <div class="c-container">
 14 |         <div v-for="(obj, j) in days" :key="j">
 15 |           <div class="c-header">
 16 |             <div 
 17 |               class="c-h-cell"
 18 |               v-for="(day, i) in obj.dayArr"
 19 |               :class="{'other-m-bg': isOtherMonth(day)}"
 20 |               :key="i">
 21 |               <span class="cell-day"
 22 |                 title="新建事件"
 23 |                 @click="addNewEvent(day)"
 24 |                 :class="{'other-m': isOtherMonth(day),today: isToday(day)}">{{day.date}}</span>
 25 |             </div>
 26 |           </div>
 27 |           <ul class="event-bg">
 28 |             <li 
 29 |               class="bg-cell"
 30 |               v-for="(day, i) in obj.dayArr"
 31 |               @click="addNewEvent(day)"
 32 |               :style="{minHeight: (obj.bgMinHeight * layHeight) + 'px'}"
 33 |               :class="{'other-m-bg': isOtherMonth(day)}"
 34 |               :key="i">
 35 |             </li>
 36 |           </ul>
 37 |           <div style="position: relative;">
 38 |             <div class="event-container" :style="{top: '-' + (obj.bgMinHeight * layHeight) + 'px'}">
 39 |               <div :style="{width: 0,minHeight: (obj.bgMinHeight * layHeight) + 'px'}"></div>
 40 |               <div class="event-item"
 41 |                 v-for="(n, i) in obj.weekEventList"
 42 |                 :key="i"
 43 |                 :style="{
 44 |                   width: (n._eLen * layWidth) + 'px',
 45 |                   height: layHeight + 'px',
 46 |                   left: (n._eX * layWidth) + 'px',
 47 |                   top: (n._eY * layHeight) + 'px'
 48 |                 }"
 49 |               >
 50 |                 <div class="event-content" 
 51 |                   :class="n.className"
 52 |                   :title="n.data.title"
 53 |                   :style="{
 54 |                     background: n.data.color,
 55 |                     height: layHeight - 2 + 'px',
 56 |                     lineHeight: layHeight - 2 + 'px'
 57 |                   }"
 58 |                 >
 59 |                   <div v-if="n.className.includes('is-start')">
 60 |                     <span class="event-text">{{n.data.title}}</span>
 61 |                   </div>
 62 |                 </div>
 63 |               </div>
 64 |             </div>
 65 |           </div>
 66 |         </div>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 |   export default {
 74 |     name: 'eventCalendar',
 75 |     data () {
 76 |       return {
 77 |         layWidth: 0,
 78 |         layHeight: 0,
 79 |         currentDay: 1,
 80 |         currentMonth: 1,
 81 |         currentYear: 1970,
 82 |         currentWeek: 1,
 83 |         days: [],
 84 |         copyAsycList: []
 85 |       }
 86 |     },
 87 |     props: {
 88 |       year: {
 89 |         default: 1970
 90 |       },
 91 |       month: {
 92 |         default: 1
 93 |       },
 94 |       tYear: {
 95 |         default: 1970
 96 |       },
 97 |       tMonth: {
 98 |         default: 1
 99 |       },
100 |       tDay: {
101 |         default: 1
102 |       },
103 |       timeType: {
104 |         default: 'month'
105 |       },
106 |       asycEventList: {
107 |         default: () => []
108 |       }
109 |     },
110 |     components: {},
111 |     watch: {
112 |       year () {
113 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
114 |       },
115 |       month () {
116 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
117 |       },
118 |       timeType () {
119 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
120 |       },
121 |       asycEventList () {
122 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
123 |       }
124 |     },
125 |     filters: {
126 |       localeWeekDay (weekday) {
127 |         // let map = {0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六'}
128 |         let map = {0: 'SUN', 1: 'MON', 2: 'TUE', 3: 'WED', 4: 'THU', 5: 'FRI', 6: 'SAT'}
129 |         return map[weekday]
130 |       },
131 |       YMDformat (value) {
132 |         if (!value || value === '') {
133 |           return ''
134 |         }
135 |         // 返回处理后的值
136 |         let time = new Date(value)
137 |         let year = time.getFullYear()
138 |         let month = (time.getMonth() < 9 ? '0' : '') + (time.getMonth() + 1)
139 |         let day = (time.getDate() < 10 ? '0' : '') + time.getDate()
140 |         return year + '-' + month + '-' + day
141 |       }
142 |     },
143 |     mounted () {
144 |       // 初始化布局参数
145 |       this.initLayout()
146 |       // 每月第一天作为初始参数
147 |       this.getEachCalendar(this.formatDate(this.year, this.month, 1))
148 |     },
149 |     methods: {
150 |       initLayout () {
151 |         const mainWidth = 1160
152 |         this.layWidth = mainWidth / 7
153 |         this.layHeight = 26
154 |       },
155 |       addNewEvent (day) {
156 |         this.$emit('addEventShow', day.dateStr)
157 |       },
158 |       initEventList (weekArr) {
159 |         let week = []
160 |         weekArr.forEach((n) => {
161 |           week.push(n.dateStr)
162 |         })
163 |         let objList = []
164 |         let weekObj = {}
165 |         let weekLen = {}
166 |         let weekPoint = []
167 |         week.forEach((w) => {
168 |           weekObj[w] = []
169 |           weekLen[w] = 0
170 |         })
171 |         let allLen = 0
172 |         this.copyAsycList.forEach((ev, i) => {
173 |           let obj = {
174 |             _day: this.tfDays(ev.start, ev.end),
175 |             start: ev.start,
176 |             end: ev.end,
177 |             data: ev
178 |           }
179 |           let dayWeekIndex = 0
180 |           let dayEventLen = 0
181 |           let dayWeekYi = 0
182 |           let className = ev.className || ''
183 |           // 事件的Start在本周，或者本周第一天（周日）在事件中
184 |           if (weekObj[ev.start] || this.inMiddleDay(ev.start, ev.end, week[0])) {
185 |             if (weekObj[ev.start]) {
186 |               dayWeekIndex = week.indexOf(ev.start)
187 |               if (dayWeekIndex + this.tfDays(ev.start, ev.end) <= week.length) {
188 |                 dayEventLen = this.tfDays(ev.start, ev.end)
189 |                 weekLen[ev.start] = weekLen[ev.start] + this.tfDays(ev.start, ev.end)
190 |                 className = className + ' is-start is-end'
191 |               } else {
192 |                 dayEventLen = week.length - dayWeekIndex
193 |                 weekLen[ev.start] = week.length
194 |                 className = className + ' is-start'
195 |               }
196 |               // 如果是周的第一天，切在一个事件的中
197 |             } else if (this.inMiddleDay(ev.start, ev.end, week[0])) {
198 |               if (dayWeekIndex + this.tfDays(week[0], ev.end) <= week.length) {
199 |                 dayEventLen = this.tfDays(week[0], ev.end)
200 |                 weekLen[week[0]] = weekLen[week[0]] + this.tfDays(week[0], ev.end)
201 |                 className = className + ' is-end'
202 |               } else {
203 |                 dayEventLen = week.length - dayWeekIndex
204 |                 weekLen[ev.start] = week.length
205 |                 className = className + ''
206 |               }
207 |             }
208 |             // ev._eY用于与上上周位置对齐
209 |             dayWeekYi = ev._eY || this.getEventY(dayWeekIndex, dayEventLen, weekPoint).yI
210 |             obj._eLen = dayEventLen // event 长度，不能超过一周（7）
211 |             obj._eX = dayWeekIndex // 当天所在周的标（横坐标X）原点（0,0）
212 |             obj._eY = dayWeekYi // 纵坐标Y
213 |             obj.className = className // class名称： is-start is-end
214 |             allLen = allLen + 1
215 |             objList.push(obj)
216 |             let eventPoint = this.getEventPoint(obj._eX, obj._eY, obj._eLen)
217 |             // let eventPoint = this.getEventY(dayWeekIndex, dayEventLen, weekPoint).pointArr // 新点位放入weekPoint
218 |             weekPoint = weekPoint.concat(eventPoint)
219 |             this.copyAsycList[i]._eY = obj._eY
220 |           }
221 |         })
222 |         return objList
223 |       },
224 |       getEventPoint (eX, eY, eLen) {
225 |         let arr = []
226 |         for (let i = 0; i < eLen; i++) {
227 |           // Y坐标不变，X递增
228 |           arr.push(eX + i + ',' + eY)
229 |         }
230 |         return arr
231 |       },
232 |       // 求Y坐标
233 |       getEventY (weekIndex, len, allPoint, yI = 0) {
234 |         let arr = []
235 |         for (let i = weekIndex; i < len + weekIndex; i++) {
236 |           arr.push(i + ',' + yI)
237 |         }
238 |         let beenY = false
239 |         arr.forEach((n) => {
240 |           if (allPoint.indexOf(n) !== -1) {
241 |             beenY = true
242 |           }
243 |         })
244 |         if (beenY) {
245 |           return this.getEventY(weekIndex, len, allPoint, yI + 1)
246 |         } else {
247 |           return {
248 |             yI: yI,
249 |             pointArr: arr
250 |           }
251 |         }
252 |       },
253 |       changeYearMonth () {
254 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
255 |       },
256 |       // 每个月的日期表
257 |       getEachCalendar (cur) {
258 |         this.copyAsycList = this.asycEventList.slice(0)
259 |         var date
260 |         if (cur) {
261 |           date = new Date(cur)
262 |         } else {
263 |           date = new Date()
264 |         }
265 |         this.currentDay = date.getDate()
266 |         this.currentYear = date.getFullYear()
267 |         this.currentMonth = date.getMonth() + 1
268 |         this.currentWeek = date.getDay()
269 |         let traceDay = 35 - (this.currentWeek + 1)
270 |         //  如果把周日设置为第一天
271 |         // let setSunTolast = false
272 |         // if (this.currentWeek === 0 && setSunTolast) {
273 |         //   this.currentWeek = 7
274 |         //   traceDay = 35 - this.currentWeek
275 |         // }
276 |         var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
277 |         let dayArr = []
278 |         // 第一天以前的数据（上个月的数据）
279 |         for (let i = this.currentWeek; i >= 0; i--) {
280 |           let d = new Date(str)
281 |           d.setDate(d.getDate() - i)
282 |           dayArr.push(this.dealDateData(d))
283 |         }
284 |         // 第一天及以后的日期（包括下个月）
285 |         for (let i = 1; i <= traceDay; i++) {
286 |           let d = new Date(str)
287 |           d.setDate(d.getDate() + i)
288 |           dayArr.push(this.dealDateData(d))
289 |         }
290 |         // 把dayArr处理成5组
291 |         let dayArrObj = []
292 |         let copyDayArr = dayArr.slice(0)
293 |         for (let i = 0; i < 5; i++) {
294 |           let weekArr = copyDayArr.splice(0, 7)
295 |           // 如果切换成本周，筛选出本周数据
296 |           if (this.timeType === 'week') {
297 |             let todyStr = this.formatDate(this.tYear, this.tMonth, this.tDay)
298 |             weekArr.forEach((n) => {
299 |               if (todyStr === n.dateStr) {
300 |                 dayArrObj.push({
301 |                   dayArr: weekArr,
302 |                   weekEventList: this.initEventList(weekArr),
303 |                   bgMinHeight: this.getBgMinHeight(this.initEventList(weekArr))
304 |                 })
305 |               }
306 |             })
307 |           } else { // 月数据
308 |             dayArrObj.push({
309 |               dayArr: weekArr,
310 |               weekEventList: this.initEventList(weekArr),
311 |               bgMinHeight: this.getBgMinHeight(this.initEventList(weekArr))
312 |             })
313 |           }
314 |         }
315 |         // console.log(dayArrObj)
316 |         this.days = dayArrObj
317 |       },
318 |       getBgMinHeight (list) {
319 |         let h = 3
320 |         list.forEach((n) => {
321 |           console.log(n)
322 |           h = n._eY + 1 > h ? n._eY + 1 : h
323 |         })
324 |         return h
325 |       },
326 |        // 返回 类似 2016-01-02 格式的字符串
327 |       formatDate (year, month, day) {
328 |         var y = year
329 |         var m = month
330 |         if (m < 10) m = '0' + m
331 |         var d = day
332 |         if (d < 10) d = '0' + d
333 |         return y + '-' + m + '-' + d
334 |       },
335 |       dealDateData (d) {
336 |         let item = {}
337 |         item.date = d.getDate()
338 |         item.year = d.getFullYear()
339 |         item.month = d.getMonth() + 1
340 |         item.dateStr = this.formatDate(item.year, item.month, item.date)
341 |         item.eventList = []
342 |         // 异步数据
343 |         this.copyAsycList.forEach((n) => {
344 |           let col = Object.assign({ row: 0 }, n)
345 |           if (n.start === item.dateStr) {
346 |             col.tfDays = this.tfDays(n.start, n.end)
347 |             col.row = col.row + col.tfDays
348 |             item.eventList.push(col)
349 |           }
350 |         })
351 |         return item
352 |       },
353 |       // 时间差
354 |       tfDays (start, end) {
355 |         let sTime = new Date(start).getTime()
356 |         let eTime = new Date(end).getTime()
357 |         let day = (eTime - sTime) / (3600 * 1000 * 24) + 1
358 |         // 如果精确到时分，还需要调整
359 |         // let _day = ((start, end) => {
360 |         //   if (start.slice(0, 11) !== end && start.slice(0, 11) && (eTime - sTime) % (3600 * 1000 * 24)) {
361 |         //     day = day + 1
362 |         //   }
363 |         // })()
364 |         return day
365 |       },
366 |       inMiddleDay (start, end, middle) {
367 |         let isMiddle = false
368 |         let sTime = new Date(start).getTime()
369 |         let eTime = new Date(end).getTime()
370 |         let mTime = new Date(middle).getTime()
371 |         if (eTime > mTime && mTime > sTime) {
372 |           isMiddle = true
373 |         }
374 |         return isMiddle
375 |       },
376 |       isOtherMonth (item) {
377 |         // let d = new Date()
378 |         if (item.month === this.currentMonth && item.year === this.currentYear) {
379 |           return false
380 |         } else {
381 |           return true
382 |         }
383 |       },
384 |       isToday (item) {
385 |         let d = new Date()
386 |         if (item.month === (d.getMonth() + 1) && item.date === d.getDate() && item.year === d.getFullYear()) {
387 |           return true
388 |         } else {
389 |           return false
390 |         }
391 |       }
392 |     }
393 |   }
394 | </script>
395 | <style lang="less" scoped>
396 | .event-calender{
397 |   width: 1160px;
398 |   margin: 0 auto;
399 | }
400 | .weeks{
401 |   margin-top: 20px;
402 |   display: flex;
403 |   border: 1px solid #E1E4E7;
404 |   border-left: none;
405 |   border-bottom: none;
406 | }
407 | .week{
408 |   height: 50px;
409 |   line-height: 50px;
410 |   flex: 1;
411 |   text-align: center;
412 |   border-left: 1px solid #E1E4E7;
413 |   background: rgb(245, 248, 250);
414 | }
415 | .other-m{
416 |   color: rgba(51,71,91,0.45);
417 | }
418 | .today{
419 |   color: red;
420 | }
421 | .other-m-bg{
422 |   background: rgb(245, 245, 245);
423 | }
424 | .event-container{
425 |   width: 100%;
426 |   box-sizing: border-box;
427 |   position: absolute;
428 |   height: 0;
429 |   .event-item{
430 |     box-sizing: border-box;
431 |     padding-top: 2px;
432 |     position: absolute;
433 |     .event-content{
434 |       color: #000;
435 |       cursor: pointer;
436 |       overflow: hidden;
437 |       text-overflow:ellipsis;
438 |       white-space: nowrap;
439 |       word-break: break-all;
440 |       &.is-start{
441 |         margin-left: 1px;
442 |         border-top-left-radius: 12px;
443 |         border-bottom-left-radius: 12px;
444 |       }
445 |       &.is-end{
446 |         border-top-right-radius: 12px;
447 |         border-bottom-right-radius: 12px;
448 |       }
449 |       .event-text{
450 |         padding-left: 5px;
451 |       }
452 |     }
453 |   }
454 | }
455 | .c-container{
456 |   border: 1px solid #eee;
457 |   border-top: none;
458 |   box-sizing: border-box;
459 | }
460 | .c-header{
461 |   display: flex;
462 |   .c-h-cell{
463 |     height: 45px;
464 |     box-sizing: border-box;
465 |     text-align: right;
466 |     padding-right: 15px;
467 |     flex: 1;
468 |     border-top: 1px solid #E1E4E7;
469 |     border-right: 1px solid #E1E4E7;
470 |     &:last-child{
471 |       border-right: none;
472 |     }
473 |   }
474 |   .cell-day{
475 |     display: inline-block;
476 |     width: 100%;
477 |     font-size: 16px;
478 |     line-height: 45px;
479 |     cursor: pointer;
480 |   }
481 | }
482 | .event-bg{
483 |   position: relative;
484 |   display: flex;
485 |   .bg-cell{
486 |     box-sizing: border-box;
487 |     flex: 1;
488 |     border-top: 1px solid #E1E4E7;
489 |     border-right: 1px solid #E1E4E7;
490 |     &:last-child{
491 |       border-right: none;
492 |     }
493 |   }
494 | }
495 | 
496 | </style>
497 | 
498 | 


--------------------------------------------------------------------------------
/calendar-v3.0/eventCalendar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="event-calender">
  3 |     <div>
  4 |       <div class="weeks">
  5 |         <span
  6 |           class="week"
  7 |           v-for="dayIndex in 7"
  8 |           :key="dayIndex"
  9 |         >
 10 |           {{ (dayIndex - 1) | localeWeekDay }}
 11 |         </span>
 12 |       </div>
 13 |       <div class="c-container">
 14 |         <div v-for="(obj, j) in days" :key="j">
 15 |           <ul class="event-bg">
 16 |             <li
 17 |               class="bg-cell"
 18 |               v-for="(day, i) in obj.dayArr"
 19 |               @mousemove="overTips($event, obj)"
 20 |               @click="addNewEvent(day)"
 21 |               :style="{
 22 |                 minHeight: (obj.bgMinHeight * layHeight + 45 + 2) + 'px'
 23 |               }"
 24 |               :class="{'other-m-bg': isOtherMonth(day)}"
 25 |               :key="i">
 26 |               <div class="tips-container">
 27 |                 <cursorTipBox :tipDay="day" :esCount="obj.weekLen[day.dateStr]" :config="tipBoxConfig"/>
 28 |               </div>
 29 |               <div class="cell-day"
 30 |                 :class="{'other-m': isOtherMonth(day)}">
 31 |                 <span 
 32 |                   class="cell-day-d" 
 33 |                   :class="{today: isToday(day)}"
 34 |                 >{{day.date}}</span>
 35 |               </div>
 36 |             </li>
 37 |           </ul>
 38 |           <div style="position: relative;">
 39 |             <div class="event-container" :style="{top: '-' + (obj.bgMinHeight * layHeight + 2) + 'px'}">
 40 |               <div :style="{width: 0,minHeight: (obj.bgMinHeight * layHeight) + 'px'}"></div>
 41 |               <div class="event-item"
 42 |                 v-for="(n, i) in obj.weekEventList"
 43 |                 :key="i"
 44 |                 :style="{
 45 |                   width: (n._eLen * layWidth) + 'px',
 46 |                   height: layHeight + 'px',
 47 |                   left: (n._eX * layWidth) + 'px',
 48 |                   top: (n._eY * layHeight) + 'px'
 49 |                 }"
 50 |               >
 51 |                 <eventItem 
 52 |                   :itemData="n"
 53 |                   :layHeight="layHeight"
 54 |                   :timeType="timeType"
 55 |                   :nowMonth="month"
 56 |                   :weekIndex="j"
 57 |                   :hiddenPopover="hiddenPopover"
 58 |                   @updateEvent="updateEvent"
 59 |                   @deletEvent="deletEvent"
 60 |                 ></eventItem>
 61 |               </div>
 62 |             </div>
 63 |           </div>
 64 |         </div>
 65 |       </div>
 66 |     </div>
 67 |   </div>
 68 | </template>
 69 | 
 70 | <script>
 71 |   export default {
 72 |     name: 'eventCalendar',
 73 |     data () {
 74 |       return {
 75 |         layWidth: 0,
 76 |         layHeight: 0,
 77 |         currentDay: 1,
 78 |         currentMonth: 1,
 79 |         currentYear: 1970,
 80 |         currentWeek: 1,
 81 |         days: [],
 82 |         copyAsycList: [],
 83 |         tipBoxConfig: {
 84 |           show: false,
 85 |           top: 0,
 86 |           left: 0,
 87 |           conten: ''
 88 |         },
 89 |         bunceTimer: null
 90 |       }
 91 |     },
 92 |     props: {
 93 |       updateCalendar: {
 94 |         default: 0
 95 |       },
 96 |       hiddenPopover: {
 97 |         default: 0
 98 |       },
 99 |       year: {
100 |         default: 1970
101 |       },
102 |       month: {
103 |         default: 1
104 |       },
105 |       tYear: {
106 |         default: 1970
107 |       },
108 |       tMonth: {
109 |         default: 1
110 |       },
111 |       tDay: {
112 |         default: 1
113 |       },
114 |       timeType: {
115 |         default: 'month'
116 |       },
117 |       asycEventList: {
118 |         default: () => []
119 |       },
120 |       weekRangIndex: {
121 |         type: Number,
122 |         default: 0
123 |       }
124 |     },
125 |     components: {
126 |       cursorTipBox: () => import('./eventTipBox'),
127 |       eventItem: () => import('./eventItem')
128 |     },
129 |     watch: {
130 |       updateCalendar () {
131 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
132 |       }
133 |     },
134 |     filters: {
135 |       localeWeekDay (weekday) {
136 |         let map = {0: 'SUN', 1: 'MON', 2: 'TUE', 3: 'WED', 4: 'THU', 5: 'FRI', 6: 'SAT'}
137 |         return map[weekday]
138 |       },
139 |       YMDformat (value) {
140 |         if (!value || value === '') {
141 |           return ''
142 |         }
143 |         // 返回处理后的值
144 |         let time = new Date(value)
145 |         let year = time.getFullYear()
146 |         let month = (time.getMonth() < 9 ? '0' : '') + (time.getMonth() + 1)
147 |         let day = (time.getDate() < 10 ? '0' : '') + time.getDate()
148 |         return year + '-' + month + '-' + day
149 |       }
150 |     },
151 |     mounted () {
152 |       // 初始化布局参数
153 |       this.initLayout()
154 |       // 每月第一天作为初始参数
155 |       this.getEachCalendar(this.formatDate(this.year, this.month, 1))
156 |     },
157 |     methods: {
158 |       initLayout () {
159 |         const mainWidth = 1160
160 |         this.layWidth = mainWidth / 7
161 |         this.layHeight = 26
162 |       },
163 |       addNewEvent (day) {
164 |         this.$emit('addEventShow', day.dateStr)
165 |       },
166 |       initEventList (weekArr) {
167 |         let week = []
168 |         weekArr.forEach((n) => { // 初始化周表
169 |           week.push(n.dateStr)
170 |         })
171 |         let objList = []
172 |         let weekObj = {}
173 |         let weekLen = {} // 用于记录当天有多少日程在进行
174 |         let weekPoint = [] // 坐标点记录，用于计算事件坐标位置
175 |         week.forEach((w) => {
176 |           weekObj[w] = []
177 |           weekLen[w] = 0
178 |         })
179 |         let allLen = 0
180 |         this.copyAsycList.forEach((ev, i) => {
181 |           let obj = {
182 |             _day: this.tfDays(ev.start, ev.end),
183 |             start: ev.start,
184 |             end: ev.end,
185 |             data: ev
186 |           }
187 |           let dayWeekIndex = 0
188 |           let dayEventLen = 0
189 |           let dayWeekYi = 0
190 |           let className = ev.className || ''
191 |           // 事件的Start在本周，或者本周第一天（周日）在事件中
192 |           if (weekObj[ev.start] || this.inMiddleDay(ev.start, ev.end, week[0])) {
193 |             if (weekObj[ev.start]) {
194 |               dayWeekIndex = week.indexOf(ev.start)
195 |               // weekLen[ev.start] = weekLen[ev.start] + 1
196 |               if (dayWeekIndex + this.tfDays(ev.start, ev.end) <= week.length) {
197 |                 dayEventLen = this.tfDays(ev.start, ev.end)
198 |                 className = className + ' is-start is-end'
199 |               } else {
200 |                 dayEventLen = week.length - dayWeekIndex
201 |                 className = className + ' is-start'
202 |               }
203 |               // 如果是周的第一天，切在一个事件的中
204 |             } else if (this.inMiddleDay(ev.start, ev.end, week[0])) {
205 |               if (dayWeekIndex + this.tfDays(week[0], ev.end) <= week.length) {
206 |                 dayEventLen = this.tfDays(week[0], ev.end)
207 |                 className = className + ' is-end'
208 |               } else {
209 |                 dayEventLen = week.length - dayWeekIndex
210 |                 className = className + ''
211 |               }
212 |             }
213 |             // 用于记录当天有多少日程在进行
214 |             week.forEach((n) => {
215 |               if (this.weekMiddleEvent(n, ev.start, ev.end)) {
216 |                 weekLen[n] = weekLen[n] + 1
217 |               }
218 |             })
219 |             // ev._eY用于与上上周位置对齐
220 |             dayWeekYi = ev._eY || this.getEventY(dayWeekIndex, dayEventLen, weekPoint).yI
221 |             obj._eLen = dayEventLen // event 长度，不能超过一周（7）
222 |             obj._eX = dayWeekIndex // 当天所在周的标（横坐标X）原点（0,0）
223 |             obj._eY = dayWeekYi // 纵坐标Y
224 |             obj.className = className // class名称： is-start is-end
225 |             allLen = allLen + 1
226 |             objList.push(obj)
227 |             let eventPoint = this.getEventPoint(obj._eX, obj._eY, obj._eLen)
228 |             // let eventPoint = this.getEventY(dayWeekIndex, dayEventLen, weekPoint).pointArr // 新点位放入weekPoint
229 |             weekPoint = weekPoint.concat(eventPoint)
230 |             this.copyAsycList[i]._eY = obj._eY
231 |           }
232 |         })
233 |         return {
234 |           objList: objList,
235 |           weekLen: weekLen
236 |         }
237 |       },
238 |       getEventPoint (eX, eY, eLen) {
239 |         let arr = []
240 |         for (let i = 0; i < eLen; i++) {
241 |           // Y坐标不变，X递增
242 |           arr.push(eX + i + ',' + eY)
243 |         }
244 |         return arr
245 |       },
246 |       // 求Y坐标
247 |       getEventY (weekIndex, len, allPoint, yI = 0) {
248 |         let arr = []
249 |         for (let i = weekIndex; i < len + weekIndex; i++) {
250 |           arr.push(i + ',' + yI)
251 |         }
252 |         let beenY = false
253 |         arr.forEach((n) => {
254 |           if (allPoint.indexOf(n) !== -1) {
255 |             beenY = true
256 |           }
257 |         })
258 |         if (beenY) {
259 |           return this.getEventY(weekIndex, len, allPoint, yI + 1)
260 |         } else {
261 |           return {
262 |             yI: yI,
263 |             pointArr: arr
264 |           }
265 |         }
266 |       },
267 |       changeYearMonth () {
268 |         this.getEachCalendar(this.formatDate(this.year, this.month, 1))
269 |       },
270 |       // 每个月的日期表
271 |       getEachCalendar (cur) {
272 |         this.copyAsycList = this.asycEventList.slice(0)
273 |         var date
274 |         if (cur) {
275 |           date = new Date(cur)
276 |         } else {
277 |           date = new Date()
278 |         }
279 |         this.currentDay = date.getDate()
280 |         this.currentYear = date.getFullYear()
281 |         this.currentMonth = date.getMonth() + 1
282 |         this.currentWeek = date.getDay()
283 |         let traceDay = 35 - (this.currentWeek + 1)
284 |         //  如果把周日设置为第一天
285 |         // let setSunTolast = false
286 |         // if (this.currentWeek === 0 && setSunTolast) {
287 |         //   this.currentWeek = 7
288 |         //   traceDay = 35 - this.currentWeek
289 |         // }
290 |         var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
291 |         let dayArr = []
292 |         // 第一天以前的数据（上个月的数据）
293 |         for (let i = this.currentWeek; i >= 0; i--) {
294 |           let d = new Date(str)
295 |           d.setDate(d.getDate() - i)
296 |           dayArr.push(this.dealDateData(d))
297 |         }
298 |         // 第一天及以后的日期（包括下个月）
299 |         for (let i = 1; i <= traceDay; i++) {
300 |           let d = new Date(str)
301 |           d.setDate(d.getDate() + i)
302 |           dayArr.push(this.dealDateData(d))
303 |         }
304 |         // 把dayArr处理成5组
305 |         let dayArrObj = []
306 |         let monthDayArr = []
307 |         let copyDayArr = dayArr.slice(0)
308 |         let copyWeekArr = dayArr.slice(0)
309 |         // 计算本周索引
310 |         for (let i = 0; i < 5; i++) {
311 |           let weekArr = copyWeekArr.splice(0, 7)
312 |           let todyStr = this.formatDate(this.tYear, this.tMonth, this.tDay)
313 |           weekArr.forEach((n, j) => {
314 |             if (todyStr === n.dateStr) {
315 |               this.$emit('getCurrentWeekIndex', i)
316 |             }
317 |           })
318 |         }
319 |         for (let i = 0; i < 5; i++) {
320 |           let weekArr = copyDayArr.splice(0, 7)
321 |           // 筛选出周数据
322 |           if (this.timeType === 'week') {
323 |             if (i === this.weekRangIndex) {
324 |               dayArrObj.push({
325 |                 dayArr: weekArr,
326 |                 weekEventList: this.initEventList(weekArr).objList,
327 |                 bgMinHeight: this.getBgMinHeight(this.initEventList(weekArr).objList),
328 |                 weekLen: this.initEventList(weekArr).weekLen
329 |               })
330 |             }
331 |           }
332 |           // 月数据
333 |           monthDayArr.push({
334 |             dayArr: weekArr,
335 |             weekEventList: this.initEventList(weekArr).objList,
336 |             bgMinHeight: this.getBgMinHeight(this.initEventList(weekArr).objList),
337 |             weekLen: this.initEventList(weekArr).weekLen
338 |           })
339 |         }
340 |         this.days = this.timeType === 'week' ? dayArrObj : monthDayArr
341 |         this.$emit('getDaysList', monthDayArr)
342 |       },
343 |       getBgMinHeight (list) {
344 |         let h = 3
345 |         list.forEach((n) => {
346 |           h = n._eY + 1 > h ? n._eY + 1 : h
347 |         })
348 |         return h
349 |       },
350 |        // 返回 类似 2016-01-02 格式的字符串
351 |       formatDate (year, month, day) {
352 |         var y = year
353 |         var m = month
354 |         if (m < 10) m = '0' + m
355 |         var d = day
356 |         if (d < 10) d = '0' + d
357 |         return y + '-' + m + '-' + d
358 |       },
359 |       dealDateData (d) {
360 |         let item = {}
361 |         item.date = d.getDate()
362 |         item.year = d.getFullYear()
363 |         item.month = d.getMonth() + 1
364 |         item.dateStr = this.formatDate(item.year, item.month, item.date)
365 |         item.eventList = []
366 |         // 异步数据
367 |         this.copyAsycList.forEach((n) => {
368 |           let col = Object.assign({ row: 0 }, n)
369 |           if (n.start === item.dateStr) {
370 |             col.tfDays = this.tfDays(n.start, n.end)
371 |             col.row = col.row + col.tfDays
372 |             item.eventList.push(col)
373 |           }
374 |         })
375 |         return item
376 |       },
377 |       // 时间差
378 |       tfDays (start, end) {
379 |         let sTime = new Date(start).getTime()
380 |         let eTime = new Date(end).getTime()
381 |         let day = (eTime - sTime) / (3600 * 1000 * 24) + 1
382 |         // 如果精确到时分，还需要调整
383 |         // let _day = ((start, end) => {
384 |         //   if (start.slice(0, 11) !== end && start.slice(0, 11) && (eTime - sTime) % (3600 * 1000 * 24)) {
385 |         //     day = day + 1
386 |         //   }
387 |         // })()
388 |         return day
389 |       },
390 |       weekMiddleEvent (weekDay, start, end) {
391 |         let isMiddle = false
392 |         let sTime = new Date(start).getTime()
393 |         let eTime = new Date(end).getTime()
394 |         let mTime = new Date(weekDay).getTime()
395 |         if (eTime >= mTime && mTime >= sTime) {
396 |           isMiddle = true
397 |         }
398 |         return isMiddle
399 |       },
400 |       inMiddleDay (start, end, middle) {
401 |         let isMiddle = false
402 |         let sTime = new Date(start).getTime()
403 |         let eTime = new Date(end).getTime()
404 |         let mTime = new Date(middle).getTime()
405 |         if (eTime > mTime && mTime > sTime) {
406 |           isMiddle = true
407 |         }
408 |         return isMiddle
409 |       },
410 |       isOtherMonth (item) {
411 |         // let d = new Date()
412 |         if (item.month === this.currentMonth && item.year === this.currentYear) {
413 |           return false
414 |         } else {
415 |           return true
416 |         }
417 |       },
418 |       isToday (item) {
419 |         let d = new Date()
420 |         if (item.month === (d.getMonth() + 1) && item.date === d.getDate() && item.year === d.getFullYear()) {
421 |           return true
422 |         } else {
423 |           return false
424 |         }
425 |       },
426 |       overTips (e, type) {
427 |         this.tipBoxConfig = {
428 |           top: e.offsetY
429 |         }
430 |       },
431 |       updateEvent (event) {
432 |         this.$emit('updateEventShow', event)
433 |       },
434 |       deletEvent (event) {
435 |         this.$emit('deletEventShow', event)
436 |       }
437 |     }
438 |   }
439 | </script>
440 | <style lang="less" scoped>
441 | .event-calender{
442 |   width: 1160px;
443 |   margin: 0 auto;
444 | }
445 | .weeks{
446 |   margin-top: 20px;
447 |   display: flex;
448 |   border: 1px solid #E1E4E7;
449 |   border-left: none;
450 |   border-bottom: none;
451 | }
452 | .week{
453 |   height: 50px;
454 |   line-height: 50px;
455 |   flex: 1;
456 |   text-align: center;
457 |   border-left: 1px solid #E1E4E7;
458 |   background: #f5f8fa;
459 | }
460 | .other-m{
461 |   color: rgba(51,71,91,0.45);
462 | }
463 | .today{
464 |   color: #0077FF;
465 |   background: rgba(0,119,255,0.1);
466 | }
467 | .other-m-bg{
468 |   background: rgb(245, 245, 245);
469 | }
470 | .cell-day{
471 |   text-align: right;
472 |   padding-right: 10px;
473 |   font-size: 16px;
474 |   line-height: 45px;
475 |   cursor: pointer;
476 |   .cell-day-d{
477 |     border-radius: 50%;
478 |     height: 34px;
479 |     line-height: 34px;
480 |     width: 34px;
481 |     display: inline-block;
482 |     vertical-align: middle;
483 |     text-align: center;
484 |     user-select: none;
485 |   }
486 | }
487 | .event-container{
488 |   width: 100%;
489 |   box-sizing: border-box;
490 |   position: absolute;
491 |   height: 0;
492 |   .event-item{
493 |     box-sizing: border-box;
494 |     padding-top: 2px;
495 |     position: absolute;
496 |   }
497 | }
498 | .c-container{
499 |   border: 1px solid #eee;
500 |   border-top: none;
501 |   box-sizing: border-box;
502 | }
503 | .event-bg{
504 |   position: relative;
505 |   display: flex;
506 |   .bg-cell{
507 |     position: relative;
508 |     cursor: pointer;
509 |     box-sizing: border-box;
510 |     flex: 1;
511 |     border-top: 1px solid #E1E4E7;
512 |     border-right: 1px solid #E1E4E7;
513 |     &:last-child{
514 |       border-right: none;
515 |     }
516 |     &:hover{
517 |       background: #f2f8ff;
518 |       .tips-container{
519 |         display: block;
520 |       }
521 |     }
522 |     .tips-container{
523 |       display: none;
524 |       height: 0;
525 |     }
526 |   }
527 | }
528 | 
529 | </style>
530 | 
531 | 


--------------------------------------------------------------------------------
/calendar-v3.0/mockuser.js:
--------------------------------------------------------------------------------
  1 | export default [{
  2 |   'id': 'ddd7a4e8547947ff9e64885cf11e8706',
  3 |   'companyId': null,
  4 |   'name': '胡兴汉',
  5 |   'firstName': '胡兴汉',
  6 |   'lastName': '',
  7 |   'mail': null,
  8 |   'groupId': null,
  9 |   'groupName': null
 10 | }, {
 11 |   'id': '04b73ee139f14493b7025fbafcb5b361',
 12 |   'companyId': null,
 13 |   'name': '175855985@qq.com',
 14 |   'firstName': '175855985@qq.com',
 15 |   'lastName': null,
 16 |   'mail': '175855985@qq.com',
 17 |   'groupId': null,
 18 |   'groupName': null
 19 | }, {
 20 |   'id': '6774edec02204dd7a63b23467117f43a',
 21 |   'companyId': null,
 22 |   'name': 'Scars on 45',
 23 |   'firstName': 'Scars on 45',
 24 |   'lastName': null,
 25 |   'mail': '',
 26 |   'groupId': null,
 27 |   'groupName': null
 28 | }, {
 29 |   'id': '72f574b1611847a4b08ab7a33e992bcc',
 30 |   'companyId': null,
 31 |   'name': 'Diana R. Dubbeld',
 32 |   'firstName': 'Diana R. Dubbeld',
 33 |   'lastName': null,
 34 |   'mail': null,
 35 |   'groupId': null,
 36 |   'groupName': null
 37 | }, {
 38 |   'id': '6038586b4bb34f99af090023250cbd9b',
 39 |   'companyId': null,
 40 |   'name': 'nis changchun222',
 41 |   'firstName': 'nis',
 42 |   'lastName': 'changchun222',
 43 |   'mail': '542728928@qq.com',
 44 |   'groupId': null,
 45 |   'groupName': null
 46 | }, {
 47 |   'id': '59ed80485d9248f7b59d80e950a4500c',
 48 |   'companyId': null,
 49 |   'name': 'zhouwanjun0208@163.com',
 50 |   'firstName': 'zhouwanjun0208@163.com',
 51 |   'lastName': null,
 52 |   'mail': 'zhouwanjun0208@163.com',
 53 |   'groupId': null,
 54 |   'groupName': null
 55 | }, {
 56 |   'id': '7119c508a99f4b388dbbd7ccc032da6e',
 57 |   'companyId': 'cce145cee34e43d1bb0b7b5de4e71b16',
 58 |   'name': 'Andrew Arguiarro',
 59 |   'firstName': 'Andrew Arguiarro',
 60 |   'lastName': null,
 61 |   'mail': '',
 62 |   'groupId': null,
 63 |   'groupName': null
 64 | }, {
 65 |   'id': 'b9e7b222f9094b6eb8332b8b476f4cba',
 66 |   'companyId': null,
 67 |   'name': '帅哥2倪',
 68 |   'firstName': '帅哥2',
 69 |   'lastName': '倪',
 70 |   'mail': 'nichangchun@loonxi.com',
 71 |   'groupId': null,
 72 |   'groupName': null
 73 | }, {
 74 |   'id': 'ffb45a44907044d793102069da049660',
 75 |   'companyId': null,
 76 |   'name': '活动添加loon',
 77 |   'firstName': '活动添加',
 78 |   'lastName': 'loon',
 79 |   'mail': 'hxh027654321@qq.com',
 80 |   'groupId': null,
 81 |   'groupName': null
 82 | }, {
 83 |   'id': 'fea84c77da6f43e39adab05d22cfc9a9',
 84 |   'companyId': null,
 85 |   'name': 'Amit Roy',
 86 |   'firstName': 'Amit Roy',
 87 |   'lastName': null,
 88 |   'mail': '',
 89 |   'groupId': null,
 90 |   'groupName': null
 91 | }, {
 92 |   'id': 'fe85c5b858694897bcf7c4d661013513',
 93 |   'companyId': '48cccea8f62b4a4d8b75b94f30092caa',
 94 |   'name': 'Attitudinal Aditya Ranawat （Arrogant bunny）',
 95 |   'firstName': 'Attitudinal Aditya Ranawat （Arrogant bunny）',
 96 |   'lastName': null,
 97 |   'mail': '',
 98 |   'groupId': null,
 99 |   'groupName': null
100 | }, {
101 |   'id': 'fa935119687848f8bd99d8c86ff97c9d',
102 |   'companyId': null,
103 |   'name': 'Peng',
104 |   'firstName': 'Peng',
105 |   'lastName': '',
106 |   'mail': '761892795@qq.com',
107 |   'groupId': null,
108 |   'groupName': null
109 | }, {
110 |   'id': 'f94b4fa14a9648a4a3248723ad5fa535',
111 |   'companyId': null,
112 |   'name': 'Phuong Hales',
113 |   'firstName': 'Phuong Hales',
114 |   'lastName': null,
115 |   'mail': '',
116 |   'groupId': null,
117 |   'groupName': null
118 | }, {
119 |   'id': 'f5f063f1b48b429da62c014889151c23',
120 |   'companyId': null,
121 |   'name': 'Cinder Lea Lykenull',
122 |   'firstName': 'Cinder Lea Lyke',
123 |   'lastName': null,
124 |   'mail': null,
125 |   'groupId': null,
126 |   'groupName': null
127 | }, {
128 |   'id': 'f48bc417e51e43d88d0640975365c5e8',
129 |   'companyId': null,
130 |   'name': 'ni changchun',
131 |   'firstName': 'ni',
132 |   'lastName': 'changchun',
133 |   'mail': '',
134 |   'groupId': null,
135 |   'groupName': null
136 | }, {
137 |   'id': '7bf62616ad724e2ba2aae1ec13546109',
138 |   'companyId': '63ae71fcb07b4dcb9a0fca2d72bd1de5',
139 |   'name': 'Miranda Lo',
140 |   'firstName': 'Miranda Lo',
141 |   'lastName': null,
142 |   'mail': '',
143 |   'groupId': null,
144 |   'groupName': null
145 | }, {
146 |   'id': '7ab137fbd4664a59a2837f11b23b0515',
147 |   'companyId': null,
148 |   'name': 'Elif Ozsari',
149 |   'firstName': 'Elif Ozsari',
150 |   'lastName': null,
151 |   'mail': null,
152 |   'groupId': null,
153 |   'groupName': null
154 | }, {
155 |   'id': '77ad33045d624a37bf8a3ad8332e2ed3',
156 |   'companyId': null,
157 |   'name': 'ha haha',
158 |   'firstName': 'ha',
159 |   'lastName': 'haha',
160 |   'mail': null,
161 |   'groupId': null,
162 |   'groupName': null
163 | }, {
164 |   'id': '77f16092437f43ac9c7b5d8c8aecac99',
165 |   'companyId': null,
166 |   'name': 'Talitha',
167 |   'firstName': 'Talitha',
168 |   'lastName': null,
169 |   'mail': null,
170 |   'groupId': null,
171 |   'groupName': null
172 | }, {
173 |   'id': '725c6232b1e14793b63f308a84a447aa',
174 |   'companyId': null,
175 |   'name': 'lai4ge',
176 |   'firstName': 'lai',
177 |   'lastName': '4ge',
178 |   'mail': 'lai4ge@qq.com',
179 |   'groupId': null,
180 |   'groupName': null
181 | }, {
182 |   'id': '7214099f543d482698fb934b9ba35b27',
183 |   'companyId': null,
184 |   'name': '倪长春',
185 |   'firstName': '倪',
186 |   'lastName': '长春',
187 |   'mail': 'changchunni@sina.cn',
188 |   'groupId': null,
189 |   'groupName': null
190 | }, {
191 |   'id': '6e4c8667e6324aa5ae15cee683d255ba',
192 |   'companyId': null,
193 |   'name': '腾讯科技有限公司',
194 |   'firstName': '腾讯科技有限公司',
195 |   'lastName': null,
196 |   'mail': null,
197 |   'groupId': null,
198 |   'groupName': null
199 | }, {
200 |   'id': '6e4e0076ff2e4fb6bab1846ddad310e1',
201 |   'companyId': null,
202 |   'name': 'Abhinav from Postman <abhinav.asthana@getpostman.com>',
203 |   'firstName': 'Abhinav from Postman <abhinav.asthana@getpostman.com>',
204 |   'lastName': null,
205 |   'mail': 'abhinav.asthana@getpostman.com',
206 |   'groupId': null,
207 |   'groupName': null
208 | }, {
209 |   'id': '6d8dd3bb9f1e4922b4d42e8aae9a3e70',
210 |   'companyId': null,
211 |   'name': '23andMe',
212 |   'firstName': '23andMe',
213 |   'lastName': null,
214 |   'mail': '',
215 |   'groupId': null,
216 |   'groupName': null
217 | }, {
218 |   'id': '6d531c7947754fdb84c06d8f5e22c4b1',
219 |   'companyId': null,
220 |   'name': 'hanisn huodong s',
221 |   'firstName': 'hanisn huodong',
222 |   'lastName': 's',
223 |   'mail': 'hxh088888@qq.com',
224 |   'groupId': null,
225 |   'groupName': null
226 | }, {
227 |   'id': '6cff14012a3c44ee8d21a212295bcfb0',
228 |   'companyId': null,
229 |   'name': 'Zachery Garrison',
230 |   'firstName': 'Zachery Garrison',
231 |   'lastName': null,
232 |   'mail': null,
233 |   'groupId': null,
234 |   'groupName': null
235 | }, {
236 |   'id': 'f188cdcf9c704e2b874b629b7aaccf7a',
237 |   'companyId': null,
238 |   'name': 'Ajay Røyal',
239 |   'firstName': 'Ajay Røyal',
240 |   'lastName': null,
241 |   'mail': '',
242 |   'groupId': null,
243 |   'groupName': null
244 | }, {
245 |   'id': 'f166bd143f3344c1b188c1616be9d154',
246 |   'companyId': 'b97a06b5e62b4f40bbb9919dc16ccc18',
247 |   'name': 'longxi',
248 |   'firstName': 'longxi',
249 |   'lastName': null,
250 |   'mail': 'longxi@longxi.com',
251 |   'groupId': null,
252 |   'groupName': null
253 | }, {
254 |   'id': '6c208e5e08854faf906d642696a06cef',
255 |   'companyId': null,
256 |   'name': 'Laura Clover',
257 |   'firstName': 'Laura Clover',
258 |   'lastName': null,
259 |   'mail': null,
260 |   'groupId': null,
261 |   'groupName': null
262 | }, {
263 |   'id': 'f1533863070d46968bce14a741559b18',
264 |   'companyId': null,
265 |   'name': 'NIKELAB',
266 |   'firstName': 'NIKELAB',
267 |   'lastName': null,
268 |   'mail': '',
269 |   'groupId': null,
270 |   'groupName': null
271 | }, {
272 |   'id': 'f0fedff40b3b44d5b883907c1cebcd38',
273 |   'companyId': null,
274 |   'name': '哈哈哈儿',
275 |   'firstName': '哈哈',
276 |   'lastName': '哈儿',
277 |   'mail': 'djskfjk@qq.com',
278 |   'groupId': null,
279 |   'groupName': null
280 | }, {
281 |   'id': '69b2f8a8ea8248e0bd3da774add3f61a',
282 |   'companyId': null,
283 |   'name': 'kkk iii',
284 |   'firstName': 'kkk',
285 |   'lastName': 'iii',
286 |   'mail': 'llll888@qq.com',
287 |   'groupId': null,
288 |   'groupName': null
289 | }, {
290 |   'id': 'efd8f88fbc8b427e958a7d91990f374b',
291 |   'companyId': 'e519ab094b344a4f8fd48e265ae88822',
292 |   'name': 'xundd pan',
293 |   'firstName': 'xundd',
294 |   'lastName': 'pan',
295 |   'mail': 'sdsdwew@qq.com',
296 |   'groupId': null,
297 |   'groupName': null
298 | }, {
299 |   'id': 'ef0dbb5d7503437ebcee66875c1380ae',
300 |   'companyId': null,
301 |   'name': 'Hamdi Bash',
302 |   'firstName': 'Hamdi Bash',
303 |   'lastName': null,
304 |   'mail': null,
305 |   'groupId': null,
306 |   'groupName': null
307 | }, {
308 |   'id': '694d3eb9b5c2448fbefc7bb2c561660e',
309 |   'companyId': null,
310 |   'name': 'Ryan Wage Prakoso',
311 |   'firstName': 'Ryan Wage Prakoso',
312 |   'lastName': null,
313 |   'mail': '',
314 |   'groupId': null,
315 |   'groupName': null
316 | }, {
317 |   'id': 'ee9f5871c0fc4391978290d4700d2fa5',
318 |   'companyId': null,
319 |   'name': 'Mehmet Satici',
320 |   'firstName': 'Mehmet Satici',
321 |   'lastName': null,
322 |   'mail': null,
323 |   'groupId': null,
324 |   'groupName': null
325 | }, {
326 |   'id': '694ca90a9726456995690f8fed015702',
327 |   'companyId': null,
328 |   'name': 'huxinghanhansin sw',
329 |   'firstName': 'huxinghanhansin',
330 |   'lastName': 'sw',
331 |   'mail': 'hxh1239999@hh.com',
332 |   'groupId': null,
333 |   'groupName': null
334 | }, {
335 |   'id': 'ee16bd6cc8c84e08b51cab02be8c7e8f',
336 |   'companyId': '45e55ea83c1c4887b5d8e14812517850',
337 |   'name': 'Gary Foote',
338 |   'firstName': 'Gary Foote',
339 |   'lastName': null,
340 |   'mail': '',
341 |   'groupId': null,
342 |   'groupName': null
343 | }, {
344 |   'id': 'edd52e6029d14023b308e2af4a820ef9',
345 |   'companyId': null,
346 |   'name': 'Newkei Liu',
347 |   'firstName': 'Newkei Liu',
348 |   'lastName': null,
349 |   'mail': null,
350 |   'groupId': null,
351 |   'groupName': null
352 | }, {
353 |   'id': '681d16b18ffc4a778a15234cfebebfa9',
354 |   'companyId': null,
355 |   'name': 'huxinghanhhhhhs ss',
356 |   'firstName': 'huxinghanhhhhhs',
357 |   'lastName': 'ss',
358 |   'mail': 'hxh02886655@ww.com',
359 |   'groupId': null,
360 |   'groupName': null
361 | }, {
362 |   'id': 'ecc0c2c005c445a285cd2866644e93f7',
363 |   'companyId': null,
364 |   'name': 'Rodiekah A DeFreitas',
365 |   'firstName': 'Rodiekah A DeFreitas',
366 |   'lastName': null,
367 |   'mail': null,
368 |   'groupId': null,
369 |   'groupName': null
370 | }, {
371 |   'id': '67ffe2264daf4147a348d03cbc8a0eb5',
372 |   'companyId': null,
373 |   'name': 'BRADY HAREUTHER',
374 |   'firstName': 'BRADY HAREUTHER',
375 |   'lastName': null,
376 |   'mail': '',
377 |   'groupId': null,
378 |   'groupName': null
379 | }, {
380 |   'id': 'ebeacb65713a431db509c69d65a484bc',
381 |   'companyId': '',
382 |   'name': 'ordu.shop',
383 |   'firstName': 'ordu.shop',
384 |   'lastName': null,
385 |   'mail': 'ordu.shop@cabani.com.tr',
386 |   'groupId': null,
387 |   'groupName': null
388 | }, {
389 |   'id': 'e98ae19af6704a91bde0f42b718e973d',
390 |   'companyId': null,
391 |   'name': '长春饭店小奶油雪糕',
392 |   'firstName': '长春饭店小奶油雪糕',
393 |   'lastName': null,
394 |   'mail': null,
395 |   'groupId': null,
396 |   'groupName': null
397 | }, {
398 |   'id': 'e4efdb69b0634b2884153fff85ded15e',
399 |   'companyId': '999661b1ddff4c73932a3ef4d90ed779',
400 |   'name': '罗勇测试2',
401 |   'firstName': '罗勇测试2',
402 |   'lastName': null,
403 |   'mail': '22@qq.com',
404 |   'groupId': null,
405 |   'groupName': null
406 | }, {
407 |   'id': 'e172c557ff5743b3a4696318ece82d99',
408 |   'companyId': null,
409 |   'name': 'Byungwoo Joe',
410 |   'firstName': 'Byungwoo Joe',
411 |   'lastName': null,
412 |   'mail': '',
413 |   'groupId': null,
414 |   'groupName': null
415 | }, {
416 |   'id': '6096a0b953d54b079e83ed286b94c439',
417 |   'companyId': null,
418 |   'name': 'The Raw Chocolate Co',
419 |   'firstName': 'The Raw Chocolate Co',
420 |   'lastName': null,
421 |   'mail': null,
422 |   'groupId': null,
423 |   'groupName': null
424 | }, {
425 |   'id': 'd86aef62217a4223a9b02887e0281f10',
426 |   'companyId': null,
427 |   'name': 'Dept. of Agriculture',
428 |   'firstName': 'Dept. of Agriculture',
429 |   'lastName': null,
430 |   'mail': null,
431 |   'groupId': null,
432 |   'groupName': null
433 | }, {
434 |   'id': 'd81f5c9bbcca4ea1ad675fb0a916d82d',
435 |   'companyId': null,
436 |   'name': 'zhang yun',
437 |   'firstName': 'zhang',
438 |   'lastName': 'yun',
439 |   'mail': null,
440 |   'groupId': null,
441 |   'groupName': null
442 | }, {
443 |   'id': '5ea1fa6889654e739b29658a07b40c27',
444 |   'companyId': null,
445 |   'name': 'Muhammad Hassan Jee',
446 |   'firstName': 'Muhammad Hassan Jee',
447 |   'lastName': null,
448 |   'mail': null,
449 |   'groupId': null,
450 |   'groupName': null
451 | }, {
452 |   'id': '5c80d497fa274e55bfa4cf47f57cdda1',
453 |   'companyId': '897ea814e9a14c9facccb9d0bb7c3d2a',
454 |   'name': '海南邱',
455 |   'firstName': '海南邱',
456 |   'lastName': null,
457 |   'mail': '',
458 |   'groupId': null,
459 |   'groupName': null
460 | }, {
461 |   'id': 'd5bb7d6590104386b0a3b0e6323f75a6',
462 |   'companyId': null,
463 |   'name': 'Hamdi Bash',
464 |   'firstName': 'Hamdi Bash',
465 |   'lastName': null,
466 |   'mail': null,
467 |   'groupId': null,
468 |   'groupName': null
469 | }, {
470 |   'id': 'd562b2115481408591aba310d633563a',
471 |   'companyId': null,
472 |   'name': 'zhang yun',
473 |   'firstName': 'zhang',
474 |   'lastName': 'yun',
475 |   'mail': null,
476 |   'groupId': null,
477 |   'groupName': null
478 | }, {
479 |   'id': '5b1bc36c41ca4a57b9ab3e57c7c326aa',
480 |   'companyId': null,
481 |   'name': 'Robin Gorham',
482 |   'firstName': 'Robin Gorham',
483 |   'lastName': null,
484 |   'mail': '21313@qq.com',
485 |   'groupId': null,
486 |   'groupName': null
487 | }, {
488 |   'id': 'd53c5ce18d50460a891ae824be3b7f14',
489 |   'companyId': null,
490 |   'name': 'MikeJhon',
491 |   'firstName': 'MikeJhon',
492 |   'lastName': '',
493 |   'mail': '',
494 |   'groupId': null,
495 |   'groupName': null
496 | }, {
497 |   'id': '592909d7dfd34d56bb241ec411761b9f',
498 |   'companyId': null,
499 |   'name': '_@@',
500 |   'firstName': '_@@',
501 |   'lastName': '',
502 |   'mail': null,
503 |   'groupId': null,
504 |   'groupName': null
505 | }, {
506 |   'id': 'd42ae15d79764243a84ce8501b84c73b',
507 |   'companyId': 'cb8505a067834909bf4f27582d12e5f1',
508 |   'name': 'andy ni',
509 |   'firstName': 'andy',
510 |   'lastName': 'ni',
511 |   'mail': 'fk@qq.com',
512 |   'groupId': null,
513 |   'groupName': null
514 | }, {
515 |   'id': 'd2e8d4dcd1454b72aeb6b9966bb58245',
516 |   'companyId': null,
517 |   'name': 'Padmasree',
518 |   'firstName': 'Padmasree',
519 |   'lastName': null,
520 |   'mail': null,
521 |   'groupId': null,
522 |   'groupName': null
523 | }, {
524 |   'id': 'd27d4e5927f94a47b68576045abdb670',
525 |   'companyId': '3e8071cea3d84c2794b4884d11be21de',
526 |   'name': 'Debra Light',
527 |   'firstName': 'Debra Light',
528 |   'lastName': null,
529 |   'mail': '',
530 |   'groupId': null,
531 |   'groupName': null
532 | }, {
533 |   'id': 'd2843ce0fdd245a381bccbb7b61f31be',
534 |   'companyId': null,
535 |   'name': 'zhang yun',
536 |   'firstName': 'zhang',
537 |   'lastName': 'yun',
538 |   'mail': null,
539 |   'groupId': null,
540 |   'groupName': null
541 | }, {
542 |   'id': '52184448c2f44ea793c0a96f9fb7d22c',
543 |   'companyId': null,
544 |   'name': 'Muhammad Hassan Jee',
545 |   'firstName': 'Muhammad Hassan Jee',
546 |   'lastName': null,
547 |   'mail': null,
548 |   'groupId': null,
549 |   'groupName': null
550 | }, {
551 |   'id': 'd172336593a94a47be0b2e73a8670a3c',
552 |   'companyId': null,
553 |   'name': 'Rebecca Zimmer',
554 |   'firstName': 'Rebecca Zimmer',
555 |   'lastName': null,
556 |   'mail': '',
557 |   'groupId': null,
558 |   'groupName': null
559 | }, {
560 |   'id': '51f184e9afd847e3af85e993bbaf7796',
561 |   'companyId': null,
562 |   'name': '倪长春',
563 |   'firstName': '倪长春',
564 |   'lastName': null,
565 |   'mail': null,
566 |   'groupId': null,
567 |   'groupName': null
568 | }, {
569 |   'id': 'd12bda9044da47e881177d2d11c4ba6d',
570 |   'companyId': null,
571 |   'name': 'whatAday',
572 |   'firstName': 'whatAday',
573 |   'lastName': null,
574 |   'mail': null,
575 |   'groupId': null,
576 |   'groupName': null
577 | }, {
578 |   'id': 'd0dba318ea834db88b50f31e0685df78',
579 |   'companyId': null,
580 |   'name': 'Loretta Hedley Sanders',
581 |   'firstName': 'Loretta Hedley Sanders',
582 |   'lastName': null,
583 |   'mail': null,
584 |   'groupId': null,
585 |   'groupName': null
586 | }, {
587 |   'id': '5170be9ebd444643bd1ae9965c6778bb',
588 |   'companyId': '',
589 |   'name': 'alican',
590 |   'firstName': 'alican',
591 |   'lastName': null,
592 |   'mail': 'alican@cabani.com.tr',
593 |   'groupId': null,
594 |   'groupName': null
595 | }, {
596 |   'id': '5106cd81032b43d68d68c1f1570904b2',
597 |   'companyId': null,
598 |   'name': 'yupl yuiop',
599 |   'firstName': 'yupl',
600 |   'lastName': 'yuiop',
601 |   'mail': 'uiuojuyh@11.com',
602 |   'groupId': null,
603 |   'groupName': null
604 | }, {
605 |   'id': 'd019f6e243e64522a29bcc24acefc943',
606 |   'companyId': null,
607 |   'name': 'London',
608 |   'firstName': 'London',
609 |   'lastName': null,
610 |   'mail': null,
611 |   'groupId': null,
612 |   'groupName': null
613 | }, {
614 |   'id': '50364bfcb0f3497296db89af2e81c8b1',
615 |   'companyId': '5378123c49e64340b90332e5195eb486',
616 |   'name': 'zhang xiyue',
617 |   'firstName': 'zhang',
618 |   'lastName': 'xiyue',
619 |   'mail': 'zhangxiyue@loonxi.com',
620 |   'groupId': null,
621 |   'groupName': null
622 | }, {
623 |   'id': 'cf88ece2ab3e401089f3333fb1f37a5b',
624 |   'companyId': null,
625 |   'name': 'Mehmet Satici',
626 |   'firstName': 'Mehmet Satici',
627 |   'lastName': null,
628 |   'mail': null,
629 |   'groupId': null,
630 |   'groupName': null
631 | }, {
632 |   'id': 'cf819f09b9f5425e875d8dff55582540',
633 |   'companyId': null,
634 |   'name': 'Chaitanya Chaitu',
635 |   'firstName': 'Chaitanya Chaitu',
636 |   'lastName': null,
637 |   'mail': '',
638 |   'groupId': null,
639 |   'groupName': null
640 | }, {
641 |   'id': 'ceed1d17ca0f4e7bad9ae2e964d085e8',
642 |   'companyId': null,
643 |   'name': 'Henry',
644 |   'firstName': 'Henry',
645 |   'lastName': null,
646 |   'mail': null,
647 |   'groupId': null,
648 |   'groupName': null
649 | }, {
650 |   'id': 'ceb808ea5a20476fac3d9b8d85da9039',
651 |   'companyId': null,
652 |   'name': 'lizhixiong1',
653 |   'firstName': 'lizhixiong1',
654 |   'lastName': null,
655 |   'mail': null,
656 |   'groupId': null,
657 |   'groupName': null
658 | }, {
659 |   'id': 'ce52d5eab77d4940b139f72297a99b83',
660 |   'companyId': null,
661 |   'name': 'zhang yun',
662 |   'firstName': 'zhang',
663 |   'lastName': 'yun',
664 |   'mail': null,
665 |   'groupId': null,
666 |   'groupName': null
667 | }, {
668 |   'id': '4eaf536956d1441d9ff72f013d459065',
669 |   'companyId': null,
670 |   'name': 'Danny Stevenson',
671 |   'firstName': 'Danny Stevenson',
672 |   'lastName': null,
673 |   'mail': '',
674 |   'groupId': null,
675 |   'groupName': null
676 | }, {
677 |   'id': '4e02792c75564452a00cc59c02dbcbb7',
678 |   'companyId': '71faed1f95814d158fac7b17d1056631',
679 |   'name': '杭州龙席网络',
680 |   'firstName': '杭州龙席网络',
681 |   'lastName': null,
682 |   'mail': 'loonxi@gmail.com',
683 |   'groupId': null,
684 |   'groupName': null
685 | }, {
686 |   'id': '4e1a260f23a741e29a94ee3e6d7517af',
687 |   'companyId': null,
688 |   'name': 'Jason Binn',
689 |   'firstName': 'Jason Binn',
690 |   'lastName': null,
691 |   'mail': null,
692 |   'groupId': null,
693 |   'groupName': null
694 | }, {
695 |   'id': 'cb25aa1bccff488098a23e987d67f11e',
696 |   'companyId': null,
697 |   'name': '询盘',
698 |   'firstName': '询',
699 |   'lastName': '盘',
700 |   'mail': 'xunpanbig@company.com',
701 |   'groupId': null,
702 |   'groupName': null
703 | }, {
704 |   'id': '4cf1d992b9304d02aa9ef10d1e785c73',
705 |   'companyId': 'a17581fee37746eca4a0ce297a77e797',
706 |   'name': '页面新增',
707 |   'firstName': '页面新增',
708 |   'lastName': null,
709 |   'mail': '44583245@qq.com',
710 |   'groupId': null,
711 |   'groupName': null
712 | }, {
713 |   'id': '4d04d37ea8164b6583971bfcbade6c37',
714 |   'companyId': null,
715 |   'name': '热污染我让沃尔沃',
716 |   'firstName': '热污染我',
717 |   'lastName': '让沃尔沃',
718 |   'mail': '11133331@qq.com',
719 |   'groupId': null,
720 |   'groupName': null
721 | }, {
722 |   'id': '4c09211208fe45cdbe2edc5f3b847a0f',
723 |   'companyId': null,
724 |   'name': 'Rizwann',
725 |   'firstName': 'Rizwann',
726 |   'lastName': null,
727 |   'mail': null,
728 |   'groupId': null,
729 |   'groupName': null
730 | }, {
731 |   'id': '4be8ae53fe864a729c0512d91bc307bf',
732 |   'companyId': null,
733 |   'name': 'MRuhit',
734 |   'firstName': 'MRuhit',
735 |   'lastName': null,
736 |   'mail': null,
737 |   'groupId': null,
738 |   'groupName': null
739 | }, {
740 |   'id': 'c9a7751a1ab94b039fd778dfb1e74785',
741 |   'companyId': null,
742 |   'name': 'BLM Arizona Fire',
743 |   'firstName': 'BLM Arizona Fire',
744 |   'lastName': null,
745 |   'mail': '',
746 |   'groupId': null,
747 |   'groupName': null
748 | }, {
749 |   'id': 'c62928b0fd5c4b54bc9e93631110c29b',
750 |   'companyId': null,
751 |   'name': '精准数据008',
752 |   'firstName': '精准数据008',
753 |   'lastName': null,
754 |   'mail': '',
755 |   'groupId': null,
756 |   'groupName': null
757 | }, {
758 |   'id': 'c410bd52ae844f02b89d38a4feeff303',
759 |   'companyId': '13dc6c6e2cfd4013a6d1ca363d30f179',
760 |   'name': '频周',
761 |   'firstName': '频周',
762 |   'lastName': null,
763 |   'mail': '',
764 |   'groupId': null,
765 |   'groupName': null
766 | }, {
767 |   'id': 'c3bb06a24c8d4ab5a808751eb1f54791',
768 |   'companyId': null,
769 |   'name': '桐城Koyomi',
770 |   'firstName': '桐城Koyomi',
771 |   'lastName': null,
772 |   'mail': null,
773 |   'groupId': null,
774 |   'groupName': null
775 | }, {
776 |   'id': 'c01d4fdd22504cb2aaf0ed57f9f6d4b2',
777 |   'companyId': null,
778 |   'name': '陈硕旸',
779 |   'firstName': '陈硕旸',
780 |   'lastName': null,
781 |   'mail': null,
782 |   'groupId': null,
783 |   'groupName': null
784 | }, {
785 |   'id': 'c0bac083e28b4e4ba5d82d334574f700',
786 |   'companyId': null,
787 |   'name': 'Wuhua Zhou',
788 |   'firstName': 'Wuhua Zhou',
789 |   'lastName': null,
790 |   'mail': null,
791 |   'groupId': null,
792 |   'groupName': null
793 | }, {
794 |   'id': 'bfe4927f76284f888d4ef1cb4150edd5',
795 |   'companyId': null,
796 |   'name': 'ShenLiang',
797 |   'firstName': 'ShenLiang',
798 |   'lastName': '',
799 |   'mail': null,
800 |   'groupId': null,
801 |   'groupName': null
802 | }, {
803 |   'id': 'bf85bc1e300f4f439bcdaeea6abee0ad',
804 |   'companyId': null,
805 |   'name': 'Muhammad Hassan Jee',
806 |   'firstName': 'Muhammad Hassan Jee',
807 |   'lastName': null,
808 |   'mail': null,
809 |   'groupId': null,
810 |   'groupName': null
811 | }, {
812 |   'id': '4880c610680240fd90673b72b47e11b2',
813 |   'companyId': null,
814 |   'name': 'Renee Sirokman',
815 |   'firstName': 'Renee Sirokman',
816 |   'lastName': null,
817 |   'mail': '',
818 |   'groupId': null,
819 |   'groupName': null
820 | }, {
821 |   'id': 'be84767b0e6d4d34b662877ab0a28bcf',
822 |   'companyId': null,
823 |   'name': 'Keshav Ñ Ashley Rampersaud',
824 |   'firstName': 'Keshav Ñ Ashley Rampersaud',
825 |   'lastName': null,
826 |   'mail': null,
827 |   'groupId': null,
828 |   'groupName': null
829 | }, {
830 |   'id': '480ecc84f6994200a428d709b630b354',
831 |   'companyId': null,
832 |   'name': 'Scott Brunner',
833 |   'firstName': 'Scott Brunner',
834 |   'lastName': null,
835 |   'mail': '',
836 |   'groupId': null,
837 |   'groupName': null
838 | }, {
839 |   'id': '47c88c97fae34c9a806515fa436e6669',
840 |   'companyId': null,
841 |   'name': 'tim',
842 |   'firstName': 'tim',
843 |   'lastName': null,
844 |   'mail': null,
845 |   'groupId': null,
846 |   'groupName': null
847 | }, {
848 |   'id': 'bb278f0c759d468aa0ab0c5faf50f41d',
849 |   'companyId': '32ad2231bc26447ea8e46479012d6b25',
850 |   'name': 'Frank Willoson',
851 |   'firstName': 'Frank Willoson',
852 |   'lastName': null,
853 |   'mail': '',
854 |   'groupId': null,
855 |   'groupName': null
856 | }, {
857 |   'id': 'ba81b31189cd4975902e40dd2386ba0a',
858 |   'companyId': null,
859 |   'name': 'Jeannie Bucci',
860 |   'firstName': 'Jeannie Bucci',
861 |   'lastName': null,
862 |   'mail': '',
863 |   'groupId': null,
864 |   'groupName': null
865 | }, {
866 |   'id': '466cc9d2c77e49519a3fcffa8e64b9e6',
867 |   'companyId': 'b4817c09fe03424bbde378ac039aba92',
868 |   'name': 'Ahmet Çağkan Bay',
869 |   'firstName': 'Ahmet Çağkan Bay',
870 |   'lastName': null,
871 |   'mail': '',
872 |   'groupId': null,
873 |   'groupName': null
874 | }, {
875 |   'id': 'b969c52902d0474b9b9d62a9eab50e50',
876 |   'companyId': '',
877 |   'name': 'kaan.unal',
878 |   'firstName': 'kaan.unal',
879 |   'lastName': null,
880 |   'mail': 'kaan.unal@cabani.com.tr',
881 |   'groupId': null,
882 |   'groupName': null
883 | }, {
884 |   'id': 'b94cff142f3f4575a020d45f1898922b',
885 |   'companyId': null,
886 |   'name': 'luo',
887 |   'firstName': 'luo',
888 |   'lastName': '',
889 |   'mail': 'luoyong@loonxi.com',
890 |   'groupId': null,
891 |   'groupName': null
892 | }, {
893 |   'id': '4567dfec57cf429e9d3d7c9b16f7673b',
894 |   'companyId': '4d58d3b1484d4c9d873602f55d2cbd7f',
895 |   'name': 'fazel',
896 |   'firstName': 'fazel',
897 |   'lastName': null,
898 |   'mail': 'al_najjar_fazel@hotmail.com',
899 |   'groupId': null,
900 |   'groupName': null
901 | }]
902 | 


--------------------------------------------------------------------------------