修改

src/api/workSchedule.js

@@ -38,6 +38,24 @@ export function queryIdleList(data) {
   })
 }
 
+// 创建个人日程
+export function createSelfSchedule(data) {
+  return request({
+    url: TeamManagement + '/selfSchedule/create',
+    method: 'post',
+    data
+  })
+}
+
+// 更新个人日程
+export function updateSelfSchedule(data) {
+  return request({
+    url: TeamManagement + '/selfSchedule/update',
+    method: 'post',
+    data
+  })
+}
+
 // 删除个人日程
 export function deleteSelfSchedule(id) {
   return request({
@@ -55,15 +73,6 @@ export function queryWorkListByTime(data) {
   })
 }
 
-// 更新个人日程
-export function updateSelfSchedule(data) {
-  return request({
-    url: TeamManagement + '/selfSchedule/update',
-    method: 'post',
-    data
-  })
-}
-
 // 获取团队用户空闲信息
 export function queryTeamIdleList(data) {
   return request({

src/components/input/textArea.vue

@@ -21,6 +21,7 @@
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
+import 'tinymce/icons/default/icons'
 
 export default {
   components: {
@@ -58,6 +59,7 @@ export default {
       inputValue: '',
       edit: false,
       init: {
+        auto_focus: true,
         language_url: '/tinymce/langs/zh_CN.js',
         language: 'zh_CN',
         skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件

src/views/workbench/person/calendarFormDialog.vue

@@ -1,78 +1,75 @@
 <template>
-  <el-dialog class="workbench_schedule__dialog" :visible.sync="isVisible" width="70%" :close-on-click-modal="false" :append-to-body="true">
-    <template v-slot:title>
-      <div class="module_title">
-        <div class="module_title__sign" />
-        <div class="module_title__caption">{{ title }}</div>
-      </div>
-    </template>
-    <el-form ref="calendarform" :model="form" :rules="rules" label-position="left" label-width="90px">
-      <el-form-item label="日程名称" prop="name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-container>
-        <el-aside width="60%">
-          <el-form-item label="是否关联业务线" prop="isJoin" label-width="150px">
-            <el-radio-group v-model="form.isJoin" style="margin-bottom: -8px">
-              <el-radio :label="0">否</el-radio>
-              <el-radio :label="1">是</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="时间" prop="time">
-            <el-date-picker
-              v-model="form.time"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            />
-          </el-form-item>
-          <el-form-item prop="syncTeam">
-            <el-checkbox v-model="form.syncTeam" :true-label="1" :false-label="0">同步到团队</el-checkbox>
-          </el-form-item>
-        </el-aside>
-        <el-aside width="40%">
-          <el-form-item v-show="form.isJoin" label="业务线" prop="bizId">
-            <el-select v-model="form.bizId" style="width: 100%">
-              <el-option
-                v-for="item in businesslines"
-                :key="item.code"
-                :label="item.name"
-                :value="item.code"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-show="!form.isJoin" style="visibility:hidden" label="业务线" />
-          <el-form-item prop="noHoliday">
-            <el-checkbox v-model="form.noHoliday" :true-label="1" :false-label="0">排除周末</el-checkbox>
-          </el-form-item>
-        </el-aside>
-      </el-container>
-      <el-form-item label="描述">
-        <el-input
-          v-model="form.desc"
-          type="textarea"
-          placeholder="请输入描述内容"
-          maxlength="300"
-          show-word-limit
-          :autosize="{ minRows: 3, maxRows: 5}"
-        />
-      </el-form-item>
-    </el-form>
-    <template v-slot:footer>
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 认</el-button>
-    </template>
-  </el-dialog>
+  <normal-dialog :show-dialog.sync="isVisible" :title="title" :is-default-close="false" @confirm="confirmForm()" @cancel="cancel()">
+    <article>
+      <el-form ref="calendarform" :model="form" :rules="rules" label-position="left" label-width="90px">
+        <el-row>
+          <el-col :span="18">
+            <el-form-item label="日程名称" prop="name">
+              <el-input v-model="form.name" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item prop="syncTeam">
+              <el-checkbox v-model="form.syncTeam" :true-label="1" :false-label="0">同步到团队</el-checkbox>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否关联业务线" prop="isJoin" label-width="150px">
+              <el-radio-group v-model="form.isJoin" style="margin-bottom: -8px">
+                <el-radio :label="0">否</el-radio>
+                <el-radio :label="1">是</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.isJoin" label="业务线" prop="bizId">
+              <el-select v-model="form.bizId" style="width: 100%">
+                <el-option
+                  v-for="item in businesslines"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="时间" prop="dayList">
+          <div v-show="form.dayList.length > 0 ">{{ schedule }}（用时<span class="blue">{{ detailDayList.length }}</span>天）</div>
+          <div v-show="form.dayList.length <= 0 " class="empty-schedule">添加排期</div>
+          <div class="picker-hidden">
+            <sel-date-picker :start-end.sync="form.dayList" :detail-day-list="detailDayList" @getDetailDay="getDetailDay" />
+          </div>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input
+            v-model="form.desc"
+            type="textarea"
+            placeholder="请输入描述内容"
+            maxlength="300"
+            show-word-limit
+            :autosize="{ minRows: 3, maxRows: 5}"
+          />
+        </el-form-item>
+      </el-form>
+    </article>
+  </normal-dialog>
 </template>
 <script>
+const _ = require('lodash')
+import moment from 'moment'
 import { settingGetBizList } from '@/api/defectManage'
-import {
-  createSelfSchedule,
-  updateSelfSchedule
-} from '@/api/workSchedule.js'
+import { createSelfSchedule, updateSelfSchedule } from '@/api/workSchedule.js'
+import normalDialog from '@/components/dialog/normalDialog'
+import selDatePicker from '@/components/picker/SelDatePicker'
 
 export default {
+  components: {
+    normalDialog,
+    selDatePicker
+  },
   props: {
     title: {
       type: String,
@@ -84,21 +81,24 @@ export default {
     },
     data: {
       type: Object,
-      default() {
-        return null
-      }
+      default: () => null
     }
   },
   data() {
     return {
       refresh: true,
       businesslines: [],
+      isVisible: this.visible,
       form: {
-        isJoin: 0,
-        noHoliday: 1,
-        syncTeam: 1
+        name: '',
+        dayList: [],
+        isJoin: 0, // 是否关联业务线
+        syncTeam: 1, // 是否同步 0 不同步 1同步
+        bizId: null,
+        desc: ''
       },
-      isVisible: false,
+      detailDayList: [], // 详细的日期
+      schedule: '',
       rules: {
         name: [
           { required: true, message: '请输入日程名称', trigger: 'blur' }
@@ -106,8 +106,8 @@ export default {
         isJoin: [
           { required: true, message: '请选择是否关联业务线', trigger: 'change' }
         ],
-        time: [
-          { required: true, message: '请选择日程时间', trigger: 'change' }
+        dayList: [
+          { type: 'array', required: true, message: '请选择日程时间', trigger: 'change' }
         ],
         bizId: [
           { required: true, message: '请选择业务线', trigger: 'change' }
@@ -118,69 +118,64 @@ export default {
   watch: {
     visible(newVal, olfVal) {
       this.isVisible = newVal
-    },
-    isVisible(newVal, olfVal) {
-      if (newVal) {
-        if (this.title === '编辑日程') {
-          this.form = JSON.parse(JSON.stringify(this.data))
-        } else {
-          this.form = {
-            time: [this.data.start, this.data.end],
-            isJoin: 0,
-            noHoliday: 1,
-            syncTeam: 1
-          }
-        }
+      if (this.data && this.data.id) {
+        this.form = _.cloneDeep(this.data)
       } else {
-        this.$emit('cancel', false)
+        this.form.dayList = [this.data.startStr, this.data.endStr]
       }
+    },
+    data(newVal, olfVal) {
+      this.data = newVal
     }
   },
   mounted() {
     this.settingGetBizList()
   },
   methods: {
-    cancel() {
-      this.$emit('cancel', false)
-    },
-    confirm() {
-      this.$refs.calendarform.validate((valid, object) => {
-        let bizIdValid = false
-        if (!valid && !this.form.isJoin) {
-          bizIdValid = true
-          for (const i in object) {
-            if (i !== 'bizId') {
-              bizIdValid = false
-              break
-            }
+    confirmForm() { // 确认提交表单
+      this.$refs['calendarform'].validate((valid) => {
+        if (valid) {
+          const params = _.cloneDeep(this.form)
+          params.dayList = this.detailDayList
+          if (this.data && this.data.id) {
+            this.updateSelfSchedule(params)
+          } else {
+            this.createSelfSchedule(params)
           }
         }
-        if (valid || bizIdValid) {
-          this.title === '新建日程' ? this.createSelfSchedule() : this.updateSelfSchedule()
-        }
       })
     },
-    dateFomat() {
-      this.form.startTime = this.form.time[0]
-      this.form.endTime = this.form.time[1]
+    getDetailDay(e) { // 获取详细排期日期
+      this.detailDayList = e
+      this.getSeprateDayInfo(e)
+    },
+    async getSeprateDayInfo(dataArr) { // 获取选中时间中的工作日时间
+      const res = await getSeprateDayInfo(dataArr)
+      if (res.code === 200) {
+        this.schedule = res.data.seperateDaysNoHoliday
+      }
+    },
+    cancel() { // 关闭弹框
+      this.isVisible = false
+      this.$emit('update:visible', this.isVisible)
+      this.$emit('cancel')
     },
     // 新建日程
     async createSelfSchedule() {
-      this.dateFomat()
       if (this.form.isJoin === 0) {
         this.form.bizId = null
       }
       const res = await createSelfSchedule(this.form)
       if (res.code === 200) {
-        this.$emit('confirm', false)
+        this.$emit('confirm')
+        this.cancel()
       }
     },
     // 编辑日程
     async updateSelfSchedule() {
-      this.dateFomat()
       const res = await updateSelfSchedule(this.form)
       if (res.code === 200) {
-        this.$emit('confirm', false)
+        this.$emit('confirm')
       }
     },
     async settingGetBizList() {
@@ -210,25 +205,19 @@ export default {
 }
 </style>
 
-<style scoped>
-.module_title{
-  display:flex;
-  align-items: center;
-  margin-bottom: 20px
+<style scoped lang="scss">
+article{
+  padding: 0 50px;
+}
+.blue {
+  color: #409EFF;
 }
-.module_title__sign {
-  width:4px;
-  height:15px;
-  background:#409EFF;
-  border-radius:1px;
+.empty-schedule {
+  color:rgba(51,51,51,0.45);
 }
-.module_title__caption{
-  width:83px;
-  height:18px;
-  font-size:16px;
-  font-family:MicrosoftYaHei;
-  color:rgba(51,59,74,1);
-  margin-left:6px;
-  font-weight: 500;
+.picker-hidden {
+  opacity: 0;
+  position: absolute;
+  top: 0;
 }
 </style>

src/views/workbench/person/index.vue

@@ -96,29 +96,36 @@
       <!-- 日程 -->
       <el-container>
         <section class="main-section">
-          <MyFullCalendar :events="calendarEvents" @dateClick="dateClick" @change="queryWorkListByTime" @select="select" @eventDrop="updateSelfSchedule" />
+          <MyFullCalendar
+            :events="calendarEvents"
+            @dateClick="dateClick"
+            @change="queryWorkListByTime"
+            @select="select"
+            @eventClick="showSchedule"
+            @add="dateClick"
+          />
         </section>
       </el-container>
       <!-- 日程 -->
       <!-- 日程操作弹框 -->
       <calendar-dialog
         :title="'编辑日程'"
-        :visible="updateSelfScheduleDialog.visible"
-        :data="updateSelfScheduleDialog.data"
-        @cancel="updateSelfScheduleDialog.visible = false"
-        @confirm="updateSelfScheduleDialog.visible = false;queryWorkList();queryWorkListByTime(calendarView)"
+        :visible="updateSchedule.visible"
+        :data="updateSchedule.data"
+        @cancel="updateSchedule.visible = false"
+        @confirm="updateSchedule.visible = false;queryWorkList();queryWorkListByTime(calendarView)"
       />
       <calendar-dialog
         :title="'新建日程'"
-        :visible="createSelfScheduleDialog.visible"
-        :data="createSelfScheduleDialog.data"
-        @cancel="createSelfScheduleDialog.visible = false"
-        @confirm="createSelfScheduleDialog.visible = false;queryWorkList();queryWorkListByTime(calendarView)"
+        :visible="createSchedule.visible"
+        :data="createSchedule.data"
+        @cancel="createSchedule.visible = false"
+        @confirm="createSchedule.visible = false;queryWorkList();queryWorkListByTime(calendarView)"
       />
       <delete-dialog
         :content="'是否删除当前日程'"
-        :visible="deleteSelfScheduleDialog.visible"
-        @cancel="deleteSelfScheduleDialog.visible = false"
+        :visible="deleteSchedule.visible"
+        @cancel="deleteSchedule.visible = false"
         @confirm="deleteSelfSchedule();queryWorkListByTime(calendarView)"
       />
       <!-- 日程操作弹框 -->
@@ -160,15 +167,15 @@ export default {
         { title: 'Event Now', start: new Date(), end: new Date().setDate(16) }
       ],
       deleteDialogVisible: false,
-      createSelfScheduleDialog: { // 新建日程
+      createSchedule: { // 新建日程
         visible: false,
         data: null
       },
-      updateSelfScheduleDialog: { // 更新日程
+      updateSchedule: { // 更新日程
         visible: false,
         data: null
       },
-      deleteSelfScheduleDialog: { // 删除日程
+      deleteSchedule: { // 删除日程
         visible: false,
         data: null
       },
@@ -203,11 +210,7 @@ export default {
       userInfo: {},
       username: localStorage.getItem('username'),
       realname: localStorage.getItem('realname'),
-      pickerOptions: {
-        disabledDate(time) {
-          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
-        }
-      }
+      nowDetailData: null // 当前日程详情
     }
   },
   created() {
@@ -236,10 +239,18 @@ export default {
       }
       await updateSelfSchedule(form)
     },
-    dateClick(arg) {
-      console.log(arg)
-      // this.createSelfScheduleDialog.data = arg
-      // this.createSelfScheduleDialog.visible = true
+    showSchedule(e) { // 查看日程详情
+      this.nowDetailData = e.event
+      console.log(this.nowDetailData)
+    },
+    dateClick(arg) { // 新建日程
+      this.createSchedule.data = arg
+      this.createSchedule.visible = true
+    },
+    select(selectionInfo) { // 多选日期新建日程
+      console.log(selectionInfo)
+      this.createSchedule.data = selectionInfo
+      this.createSchedule.visible = true
     },
     openUpdateTeamInfoDialog(row) {
 
@@ -254,21 +265,17 @@ export default {
       } else {
         form.isJoin = 0
       }
-      this.updateSelfScheduleDialog.data = form
-      this.updateSelfScheduleDialog.visible = true
+      this.updateSchedule.data = form
+      this.updateSchedule.visible = true
     },
     openDeleteSelfScheduleDialog(val) { // 关闭删除日程弹框
-      this.deleteSelfScheduleDialog.data = val
-      this.deleteSelfScheduleDialog.visible = true
-    },
-    select(selectionInfo) {
-      this.createSelfScheduleDialog.data = selectionInfo
-      this.createSelfScheduleDialog.visible = true
+      this.deleteSchedule.data = val
+      this.deleteSchedule.visible = true
     },
     async deleteSelfSchedule() { // 删除日程
-      const res = await deleteSelfSchedule(this.deleteSelfScheduleDialog.data.id)
+      const res = await deleteSelfSchedule(this.deleteSchedule.data.id)
       if (res.code === 200) {
-        this.deleteSelfScheduleDialog.visible = false
+        this.deleteSchedule.visible = false
         this.queryWorkList()
       }
     },
@@ -294,7 +301,6 @@ export default {
       }
     },
     async queryWorkListByTime(view) { // 获取指定时间段用户日程信息
-      console.log('queryWorkListByTime:', view)
       this.calendarView = view
       const params = {
         timeInfo: {
@@ -306,12 +312,14 @@ export default {
       }
       const res = await queryWorkListByTime(params)
       if (res.code === 200) {
-        this.calendarEvents = res.data.map(item => ({
-          id: item.id,
-          title: item.name,
-          start: moment(item.startTime).toDate(),
-          end: moment(item.endTime).toDate()
-        }))
+        this.calendarEvents = res.data.map(item => {
+          return {
+            id: item.id,
+            title: `${item.peopleObject.name}：${item.name}`,
+            start: moment(item.startTime).toDate(),
+            end: moment(item.endTime).toDate()
+          }
+        })
       }
     },
     handleTabsClick() {}, // 标签页切换

src/views/workbench/person/myFullCalendar.vue

@@ -2,17 +2,22 @@
   <div :style="type+'-calendar-container'">
     <div :class="type+ '-calendar-header'">
       <el-tabs v-model="activeName" class="tabs-change">
-        <el-tab-pane label="用户管理" name="first" />
-        <el-tab-pane label="配置管理" name="second" />
+        <el-tab-pane label="用户管理" name="1" />
+        <el-tab-pane label="配置管理" name="2" />
       </el-tabs>
       <article class="calender-top">
-        <div><el-button type="primary" size="small">添加日程</el-button></div>
+        <div><el-button type="primary" size="small" @click="add()">添加日程</el-button></div>
         <div class="calender-top-title">{{ calendarTitle }}</div>
         <div class="calender-top-control">
           <el-button-group>
             <el-button icon="el-icon-arrow-left" size="small" @click="callCalendarApi('prev')" />
             <el-button icon="el-icon-arrow-right" size="small" @click="callCalendarApi('next')" />
           </el-button-group>
+          <el-button-group v-if="weekMonYear">
+            <el-button type="primary" size="small" @click="callCalendarApi('changeView','dayGridMonth')">月</el-button>
+            <el-button type="primary" size="small" @click="callCalendarApi('changeView','timeGridWeek')">周</el-button>
+            <el-button type="primary" size="small" @click="callCalendarApi('changeView','timeGridDay')">日</el-button>
+          </el-button-group>
           <el-button-group>
             <el-button type="primary" size="small" :class="todayClassName" @click="callCalendarApi('today')">今天</el-button>
           </el-button-group>
@@ -93,14 +98,17 @@ export default {
       type: Array,
       default: () => [],
       required: false
+    },
+    weekMonYear: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   data() {
     return {
+      activeName: '1',
       today: new Date(),
-      monthClassName: 'month selected',
-      weekClassName: 'week',
-      dayClassName: 'day',
       todayClassName: 'today',
       evnetTime: {
         hour: 'numeric',
@@ -140,21 +148,14 @@ export default {
         // initial event data
         { title: 'Event Now', start: new Date(), end: new Date().setDate(16) }
       ],
-      teamInfoShow: false,
-      teamAndMemberEnum: {},
-      teamAndMemberMap: {},
-      teamInfo: [],
-      userInfo: {},
       username: localStorage.getItem('username'),
       realname: localStorage.getItem('realname'),
-      accountInfo: {},
       deleteDialogVisible: false,
       calendarDialogProperty: {
         title: '新建日程',
         visible: false,
         data: null
       },
-      isCalendarCreated: false,
       calendarTitle: ''
     }
   },
@@ -165,21 +166,6 @@ export default {
     expand() {
       this.$emit('expand', true)
     },
-    changeClassName(val) {
-      if (val === 'month') {
-        this.monthClassName = 'month selected'
-        this.weekClassName = 'week'
-        this.dayClassName = 'day'
-      } else if (val === 'week') {
-        this.monthClassName = 'month'
-        this.weekClassName = 'week selected'
-        this.dayClassName = 'day'
-      } else if (val === 'day') {
-        this.monthClassName = 'month'
-        this.weekClassName = 'week'
-        this.dayClassName = 'day selected'
-      }
-    },
     callCalendarApi(methods, viewName) {
       const calendarApi = this.$refs.fullCalendar.getApi()
       this.$emit('change', calendarApi.view)
@@ -197,7 +183,7 @@ export default {
         this.todayClassName = 'today'
       }
     },
-    select(selectionInfo) {
+    select(selectionInfo) { // 滑动多选时候返回的数据
       this.$emit('select', selectionInfo)
     },
     datesRender(arg) {
@@ -219,6 +205,9 @@ export default {
       info.el.style.borderColor = 'red'
       info.el.style.backgroundColor = 'red'
       // this.deleteDialogVisible = true
+    },
+    add() {
+      this.$emit('add')
     }
   }
 }