日程样式调整

src/views/workbench/person/index.vue

@@ -96,23 +96,10 @@
       <!-- 日程 -->
       <el-container>
         <section class="main-section">
-          <MyFullCalendar :events="calendarEvents" @dateClick="dateClick" @expand="calendarDialogVisible = true" @change="queryWorkListByTime" @select="select" @eventDrop="updateSelfSchedule" />
+          <MyFullCalendar :events="calendarEvents" @dateClick="dateClick" @change="queryWorkListByTime" @select="select" @eventDrop="updateSelfSchedule" />
         </section>
       </el-container>
       <!-- 日程 -->
-      <el-dialog
-        class="workbench_fullscreen_dialog"
-        :visible.sync="calendarDialogVisible"
-        :fullscreen="true"
-        style="margin-top: 55px;"
-        :modal="false"
-      >
-        <el-tabs v-model="tabsActiveName" style="margin-right: 20px;" @tab-click="handleTabsClick">
-          <el-tab-pane label="日历视图" name="1" style="padding: 31px 146px">
-            <MyFullCalendar :events="calendarEvents" type="big" @dateClick="dateClick" @change="queryWorkListByTime" @select="select" @eventDrop="updateSelfSchedule" />
-          </el-tab-pane>
-        </el-tabs>
-      </el-dialog>
       <!-- 日程操作弹框 -->
       <calendar-dialog
         :title="'编辑日程'"
@@ -216,7 +203,6 @@ export default {
       userInfo: {},
       username: localStorage.getItem('username'),
       realname: localStorage.getItem('realname'),
-      calendarDialogVisible: false,
       pickerOptions: {
         disabledDate(time) {
           return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
@@ -311,8 +297,10 @@ export default {
       console.log('queryWorkListByTime:', view)
       this.calendarView = view
       const params = {
-        startTime: moment(view.activeStart).subtract(1, 'month').format('YYYY.MM.DD'),
-        endTime: moment(view.activeEnd).add(1, 'month').format('YYYY.MM.DD'),
+        timeInfo: {
+          startTime: moment(view.activeStart).subtract(1, 'month').format('YYYY.MM.DD'),
+          endTime: moment(view.activeEnd).add(1, 'month').format('YYYY.MM.DD')
+        },
         teamSearchInfo: { bizId: localStorage.getItem('bizId') || null },
         searchScheduleInfo: { origin: [0, 1] }
       }

src/views/workbench/person/myFullCalendar.vue

@@ -1,29 +1,23 @@
 <template>
   <div :style="type+'-calendar-container'">
-    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
-    <link
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
-      rel="stylesheet"
-    >
     <div :class="type+ '-calendar-header'">
-      <el-row style="margin-bottom: 10px;">
-        <el-col :span="type=='small'?7:7" style="display: inline-block;white-space: nowrap;">
-          <button class="prev" @click="callCalendarApi('prev')"><span class="fa fa-chevron-left" /></button>
-          <button class="next" style="margin-left: -4px" @click="callCalendarApi('next')"><span class="fa fa-chevron-right" /></button>
-          <button :class="todayClassName" style="margin-left:3%" @click="callCalendarApi('today')">今天</button>
-        </el-col>
-        <el-col :span="type=='small'?9:10">
-          <div style="display: inline-block;width: 100%;text-align:center;white-space: normal" class="title">{{ calendarTitle }}</div>
-        </el-col>
-        <el-col :span="type=='small'?8:7">
-          <div style="display: inline-block;width: 100%;text-align:right;white-space: nowrap;">
-            <button :class="monthClassName" @click="callCalendarApi('changeView','dayGridMonth');changeClassName('month')">月</button>
-            <button :class="weekClassName" @click="callCalendarApi('changeView','timeGridWeek');changeClassName('week')">周</button>
-            <button :class="dayClassName" @click="callCalendarApi('changeView','timeGridDay');changeClassName('day')">日</button>
-            <button v-if="type =='small'" class="amplify" style="margin-left: 3%" @click="expand()"><span class="fa fa-expand" /></button>
-          </div>
-        </el-col>
-      </el-row>
+      <el-tabs v-model="activeName" class="tabs-change">
+        <el-tab-pane label="用户管理" name="first" />
+        <el-tab-pane label="配置管理" name="second" />
+      </el-tabs>
+      <article class="calender-top">
+        <div><el-button type="primary" size="small">添加日程</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>
+            <el-button type="primary" size="small" :class="todayClassName" @click="callCalendarApi('today')">今天</el-button>
+          </el-button-group>
+        </div>
+      </article>
     </div>
     <FullCalendar
       :id="type + '-calendar'"
@@ -92,13 +86,13 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'small'
+      default: 'small',
+      required: false
     },
     events: {
       type: Array,
-      default() {
-        return []
-      }
+      default: () => [],
+      required: false
     }
   },
   data() {
@@ -230,72 +224,32 @@ export default {
 }
 </script>
 
-<style scoped>
-.small-calendar-header .title,
-.big-calendar-header .title {
-  font-weight:500;
-  width: 40%;
-}
-.small-calendar-header .title{
-  font-size: 12px;
-}
-.big-calendar-header .title {
-  font-size: 16px;
-}
-.small-calendar-header button,.big-calendar-header button {
-  background-color: #fff;
-  color: #6f7c93;
-  border: 0.5px solid #bfc6dc;
-}
-.small-calendar-header button {
-  font-size: 12px;
-}
-.big-calendar-header button {
-  font-size: 14px;
-  height: 32px;
-  width: 32px;
-}
-.big-calendar-header .today {
-  width: 50px;
-  height: 32px;
+<style scoped lang="scss">
+>>>.el-tabs__nav-scroll{
+  margin: 0 35px;
 }
-.small-calendar-header button:hover,.big-calendar-header button:hover {
-  background-color: #409eff;
-  color: #fff;
-  border: 0.5px solid #409eff;
-}
-.small-calendar-header .next,.week,.day,
-.big-calendar-header .next,.week,.day {
-  margin-left: -4px;
-  border-left: none;
-}
-.small-calendar-header .week,
-.big-calendar-header .week {
-  border-right: none;
-  border-left: none;
-}
-.small-calendar-header .prev,.month,
-.big-calendar-header .prev,.month {
-  border-radius: 4px 0 0 4px;
-}
-.small-calendar-header .day,.next,
-.big-calendar-header .day,.next {
-  border-radius: 0 4px 4px 0;
+>>>.el-tabs__nav-wrap::after{
+  height: 1px;
 }
-.small-calendar-header .today,.amplify,
-.big-calendar-header .today,.amplify {
-  border-radius: 4px;
-}
-.small-calendar-header .selected,
-.big-calendar-header .selected {
-  background-color: #409eff;
-  color: #fff;
-  border: 0.5px solid #409eff;
+.calender-top {
+  display: flex;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 35px;
+  .calender-top-title {
+    font-size:16px;
+    font-family:PingFangSC-Medium;
+    color:rgba(51,59,74,1);
+  }
 }
 </style>
 
 // fullcalendar
 <style lang='scss'>
+#small-calendar {
+  margin: 0 35px 50px 35px;
+}
 #small-calendar .btn-primary {
   background-color: #fff;
   color: #6f7c93;