工作台新建日程和排期

src/utils/global.js

@@ -1,4 +1,5 @@
 let timer = null
+import dayjs from 'dayjs'
 export function debounce(func, delay) { // 防抖
   clearTimeout(timer)
   timer = setTimeout(() => {
@@ -22,3 +23,23 @@ export function deepClone(obj) {
 
   return newObj
 }
+export function getAllTime(start, end, noHoliday = true) {
+  console.log(start, end)
+  const NewArr = []
+  let nextDate = dayjs(start)
+  end = dayjs(end).add(1, 'day')
+  while (nextDate && nextDate.isBefore(end)) {
+    if (noHoliday) {
+      const isEx = NewArr.find(item => item === nextDate.format('YYYY.MM.DD'))
+      if (!isEx) {
+        NewArr.push(nextDate.format('YYYY.MM.DD'))
+      }
+    } else {
+      if (nextDate.day() < 6 && nextDate.day() > 0) { // 默认周六，末不在已选数组中
+        NewArr.push(nextDate.format('YYYY.MM.DD'))
+      }
+    }
+    nextDate = nextDate.add(1, 'day')
+  }
+  return NewArr
+}

src/views/projectManage/projectList/components/modifySchedule.vue

@@ -175,11 +175,14 @@ export default {
     },
     detailData: {
       handler(newV, old) {
-        if (newV) {
+        if (newV && newV.id) {
           this.getScheduleData(newV.id)
+        } else if (newV) {
+          this.getSomeScheduleData(newV)
         }
       },
-      immediate: true
+      immediate: true,
+      deep: true
     },
     selectTaskList: { // 已选择任务列表
       handler(newV, old) {
@@ -207,7 +210,17 @@ export default {
     this.getNowTask()
   },
   methods: {
-    async getScheduleData(id) { // 当有传入的详细信息的时候
+    getSomeScheduleData(obj) { // 当传入部分详细信息时候
+      const len = obj.dayList.length
+      this.form = {
+        ...this.form,
+        dayList: [obj.dayList[0], obj.dayList[len - 1]]
+      }
+      this.bizId = obj.bizId
+      this.detailDayList = obj.dayList || []
+      this.schedule = `${obj.dayList[0]}-${obj.dayList[len - 1]}`
+    },
+    async getScheduleData(id) { // 当有传入的排期id的时候
       const res = await scheduleGet(id)
       let obj
       if (res.code === 200) {
@@ -229,7 +242,7 @@ export default {
       this.tasksDetailList = obj.taskObjectList || []
       this.peopleObjectList = obj.peopleObjectList.map(item => item.name) || []
     },
-    async getType() {
+    async getType() { // 获取排期类型
       const resEnum = await configShowTaskEnum()
       if (resEnum.code === 200) {
         this.taskScheduleEvent = resEnum.data.taskScheduleEvent

src/views/workbench/components/createDialog.vue

@@ -12,8 +12,18 @@
     >
       <article>
         <div v-show="!bizSelect" class="select-section">
-          <div class="select-schedule" @click="create('schedule')">新建排期</div>
-          <div class="select-calendar" @click="create('calendar')">新建日程</div>
+          <div class="select-schedule" @click="create('schedule')">
+            <span class="select-icon">
+              <i class="el-icon-document" />
+            </span>
+            新建排期
+          </div>
+          <div class="select-calendar" @click="create('calendar')">
+            <span class="select-icon">
+              <i class="el-icon-date" />
+            </span>
+            新建日程
+          </div>
         </div>
         <div v-show="bizSelect" class="select-bizId">
           <i class="el-icon-arrow-left" @click="bizSelect = false;title = '请选择'" />
@@ -56,6 +66,12 @@ export default {
         this.show = newV
       },
       immediate: true
+    },
+    bizSelect: {
+      handler(newV) {
+        this.title = newV ? '新建排期' : '请选择'
+      },
+      immediate: true
     }
   },
   created() {
@@ -70,7 +86,6 @@ export default {
       if (type === 'calendar') {
         this.$emit('change')
       } else if (type === 'schedule') {
-        this.title = '新建排期'
         this.bizSelect = true
       }
     },
@@ -80,6 +95,8 @@ export default {
     },
     cancel() { // 关闭弹框
       this.show = false
+      this.bizSelect = false
+      this.bizId = null
       this.$emit('update:visible', this.show)
     }
   }
@@ -90,7 +107,7 @@ export default {
   padding: 20px !important;
 }
 >>>.el-dialog__body {
-  padding: 0 20px 10px 20px;
+  padding: 0 20px 0 20px;
 }
 >>>.el-dialog__title{
   padding-left: 10px;
@@ -118,12 +135,27 @@ export default {
   left: 10px;
   font-size: 18px;
 }
+.select-bizId {
+  margin-bottom: 25px;
+}
 .select-section {
   width: 100%;
   height: 100px;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  color: #333B4A;
+  .select-icon {
+    height: 30px;
+    width: 30px;
+    margin-right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background-color: rgba(64, 158, 255,1);
+    color: #FFFFFF;
+  }
   .select-schedule,.select-calendar {
     cursor: pointer;
     border-radius: 4px;
@@ -136,11 +168,11 @@ export default {
   }
   .select-schedule:hover{
     color:rgb(64, 158, 255);
-    background-color: rgba(64, 158, 255,0.1);
+    background-color: #EDEDED;
   }
   .select-calendar:hover{
     color:rgb(64, 158, 255);
-    background-color: rgba(64, 158, 255,0.1);
+    background-color: #EDEDED;
   }
 }
 </style>

src/views/workbench/person/components/calendarFormDialog.vue

@@ -111,16 +111,24 @@ export default {
     }
   },
   watch: {
-    visible(newVal, olfVal) {
-      this.isVisible = newVal
-      if (this.data && this.data.id) {
-        this.isEditData()
-      } else {
-        this.isExistDetail()
-      }
+    visible: {
+      handler(newV) {
+        this.isVisible = newV
+        if (this.data && this.data.id) {
+          this.isEditData()
+        } else {
+          this.isExistDetail()
+        }
+      },
+      immediate: true,
+      deep: true
     },
-    data(newVal, olfVal) {
-      this.data = newVal
+    data: {
+      handler(newV) {
+        this.data = newV
+      },
+      deep: true,
+      immediate: true
     }
   },
   mounted() {
@@ -152,6 +160,7 @@ export default {
       delete this.form.schedule
     },
     isExistDetail() {
+      console.log(this.data)
       // 当新建的时候存在详细日期时候的数据处理
       if (this.data) {
         this.form.dayList = Array.from(

src/views/workbench/person/index.vue

@@ -193,6 +193,7 @@
 // const _ = require('lodash')
 import { mapGetters } from 'vuex'
 import moment from 'moment'
+import dayjs from 'dayjs'
 import {
   queryTeamInfoList,
   showTeamAndMemberEnum,
@@ -218,6 +219,7 @@ import bugTableList from '@/views/workbench/bugTableList.vue'
 import statisticsSection from '@/views/workbench/components/statisticsSection'
 import createDialog from '@/views/workbench/components/createDialog'
 import websocket from '@/views/workbench/mixins/websocket'
+import { getAllTime } from '@/utils/global.js'
 
 export default {
   components: {
@@ -257,7 +259,7 @@ export default {
       activeSchedule: '1', // 日程表和列表切换
       deleteDialogVisible: false,
       createDialog: false, // 新建弹框
-      selectRangeData: null, // 已选择的范围日期
+      selectRangeData: [], // 已选择的范围日期
       createSchedule: { // 新建日程
         visible: false,
         data: null
@@ -346,25 +348,34 @@ export default {
       this.showDetail = true
       this.detailXY = [`${e.jsEvent.clientX - 200}px`, `${e.jsEvent.clientY + 20}px`]
     },
-    selectDates(data) { // 日历中选择日期
-      console.log(data)
+    selectDates(selectionInfo) { // 多选日期新建日程弹框
+      this.selectRangeData = [
+        dayjs(selectionInfo.startStr).format('YYYY-MM-DD'),
+        dayjs(selectionInfo.endStr).subtract(1, 'day').format('YYYY-MM-DD')
+      ]
       this.createDialog = true
     },
-    createSchOrCal(bizId) {
+    createSchOrCal(bizId) { // 创建排期或者日程
       this.createDialog = false
-      if (!bizId) this.dateClick(this.selectRangeData)
+      if (!bizId) { // 新建日程
+        this.dateClick({
+          startStr: this.selectRangeData[0].replace(/-/g, '.'),
+          endStr: this.selectRangeData[1].replace(/-/g, '.')
+        })
+      } else { // 新建排期
+        this.visibleSchedule = true
+        this.isDelete = false
+        this.nowDetailData = {
+          dayList: getAllTime(...this.selectRangeData),
+          bizId: bizId
+        }
+        this.DialogTitle = '新建排期'
+      }
     },
     dateClick(arg) { // 新建日程弹框
       this.createSchedule.data = arg
       this.createSchedule.visible = true
     },
-    select(selectionInfo) { // 多选日期新建日程弹框
-      this.createSchedule.data = {
-        startStr: selectionInfo.startStr,
-        endStr: moment(selectionInfo.endStr).subtract(1, 'day').format('YYYY-MM-DD')
-      }
-      this.createSchedule.visible = true
-    },
     editSchedule(data) { // 编辑日程弹框
       if (data) {
         this.nowDetailData = data
@@ -421,6 +432,7 @@ export default {
         this.showDetail = false
         this.queryWorkListByTime(this.calendarView)
         this.$message({ type: 'success', message: '删除成功!' })
+        this.DialogTitle = '编辑排期'
       }
     },
     async queryWorkListByTime(view) { // 获取指定时间段用户日程信息