fix: 修改排班

src/components/app/dailyAttendance/people-day-class.vue

@@ -4,61 +4,53 @@
  * @Author: 无尘
  * @Date: 2019-11-07 17:30:04
  * @LastEditors: 无尘
- * @LastEditTime: 2019-11-07 19:45:41
+ * @LastEditTime: 2019-11-07 22:26:45
  -->
 
 <!--
-  <people-day-class></people-day-class>
+  <people-day-class :classData="classData" :cycleData="cycleData"></people-day-class>
   import peopleDayClass from '@/components/app/dailyAttendance/people-day-class.vue'
 -->
 <template>
   <div class="day-tabs">
-    <div role="tablist" class="ant-tabs-bar" tabindex="0">
+    <div class="tablist">
+      <div class="right-content-top border-box">
         <div class="right-top-wrap_left flex flex-pack-center">
           <ul class="flex flex-row flex-pack-center ">
             <div class="el-tabs__active-bar is-top" :style="translate"></div>
-          <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 1 ? 'active-li' : '']" @click="chooseTab($event, '1')"><span class="flex flex-align-center flex-pack-center right-top-title">解决方案</span></li>
-          <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 2 ? 'active-li' : '']" @click="chooseTab($event, '2')"><span class="flex flex-align-center flex-pack-center right-top-title">开发者接入</span></li>
+            <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 1 ? 'active-li' : '']" @click="chooseTab($event, '1')"><span class="flex flex-align-center flex-pack-center right-top-title">按天排班</span></li>
+            <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 2 ? 'active-li' : '']" @click="chooseTab($event, '2')"><span class="flex flex-align-center flex-pack-center right-top-title">按周期排班</span></li>
           </ul>
         </div>
       </div>
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="按天排班" name="first">
-        <ul>
+    </div>
+    <ul v-if="activeTab == 1">
       <li>
         <div class="day-item-title" title="修改该员工当天班次">修改该员工当天班次</div>
         <ul>
           <template v-for="(item, index) in classData">
-                <li :key="index + 'class'">
+            <li class="day-class-item p-lr-20" :key="index + 'class'" @click.stop="daySet(item)">
               <p class="class-item day-tag-red">{{ item.serial }}</p>
             </li>
           </template>
-              <li class="day-class-item p-lr-20">
-                <p class="class-item day-tag-red">默认班次</p>
-              </li>
-              <li class="day-class-item p-lr-20">
-                <p class="class-item class-rest">休息</p>
-              </li>
-              <li class="day-class-item p-lr-20">
-                <p class="class-item class-clear">清空</p>
+          <template v-for="(item, index) in defaultData">
+            <li class="day-class-item p-lr-20" :key="index + 'defaultClass'" @click.stop="daySet(item)">
+              <p :class="['class-item', item.id == '0' ? 'class-rest' : 'class-clear']">{{ item.serial }}</p>
             </li>
+          </template>
         </ul>
       </li>
     </ul>
-      </el-tab-pane>
-      <el-tab-pane label="按周期排班" name="second">
-        <ul>
+    <ul v-if="activeTab == 2">
       <li>
         <div class="day-item-title" title="从该天开始周期排班至月底">从该天开始周期排班至月底</div>
         <ul>
           <li class="day-class-item p-lr-20">
-                <p class="class-item day-tag-red">默认班次</p>
+            <p class="class-item day-tag-blue">{{ cycleData[0].cycleName }} {{ cycleData[0].itemList.map(item => item.className).join('-') }}</p>
           </li>
         </ul>
       </li>
     </ul>
-      </el-tab-pane>
-    </el-tabs>
   </div>
 </template>
 <script>
@@ -70,6 +62,24 @@ export default {
       default() {
         return [];
       }
+    },
+    cycleData: {
+      type: [Array, Object],
+      default() {
+        return [];
+      }
+    },
+    itemSchedule: {
+      type: [Array, Object],
+      default() {
+        return [];
+      }
+    },
+    workDate: {
+      type: Number,
+      default() {
+        return new Date().getTime();
+      }
     }
   },
   data() {
@@ -77,8 +87,18 @@ export default {
       activeTab: '1',
       translate: {
         width: '56px',
-        transform: `translateX(0)`
+        transform: `translateX(30px)`
+      },
+      defaultData: [
+        {
+          id: '0',
+          serial: '休息'
+        },
+        {
+          id: '-2',
+          serial: '清空'
         }
+      ]
     };
   },
   methods: {
@@ -93,14 +113,45 @@ export default {
         width: e.target.offsetWidth + 'px',
         transform: `translateX(${e.target.offsetLeft}px)`
       };
+    },
+    /**
+     * 选择班次
+     */
+    daySet(item) {
+      const that = this;
+      that.itemSchedule.push({
+        classes: {
+          id: item.id,
+          serial: item.serial
+        },
+        isRest: false,
+        workDate: that.workDate
+      });
     }
   }
 };
 </script>
 <style lang="less" scoped>
-.right-top-wrap_left {
+.tablist {
+  margin-bottom: 16px;
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
+.right-content-top {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid #ebeef5;
+  outline: none;
+  .right-top-wrap_left {
+    &:focus {
+      outline: none;
+      border: none;
+    }
     ul {
       position: relative;
+      width: 100%;
       .el-tabs__active-bar {
         display: block;
         position: absolute;
@@ -114,7 +165,7 @@ export default {
       }
     }
     li {
-    margin-right: 40px;
+      width: 50%;
       cursor: pointer;
       .right-top-title {
         font-size: 14px;
@@ -128,9 +179,10 @@ export default {
         }
       }
     }
-}
-.right-top-wrap_right {
+  }
+  .right-top-wrap_right {
     padding: 9px 0;
+  }
 }
 
 .day-tabs {
@@ -163,6 +215,10 @@ export default {
     text-overflow: ellipsis;
     overflow: hidden;
     border-radius: 0;
+    white-space: nowrap;
+    &:hover {
+      opacity: 0.7;
+    }
     &.day-tag-blue {
       background: #5e90ff;
       border-color: #5e90ff;

src/views/enterpriseApp/dailyAttendance/workTimeManage.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-09-18 15:25:12
  * @LastEditors: 无尘
- * @LastEditTime: 2019-11-07 18:43:56
+ * @LastEditTime: 2019-11-07 21:09:33
  -->
 
 <template>
@@ -40,7 +40,8 @@
               <template slot-scope="scope">
                 <div class="day-work">
                   <el-popover placement="bottom" width="231" trigger="click">
-                    <people-day-class></people-day-class>
+                    <!-- 当前员工当天排版设置 -->
+                    <people-day-class :itemSchedule="scope.row" :workDate="item.timeStamp" :classData="classes" :cycleData="cycleData"></people-day-class>
                     <div class="tool-tip-body" slot="reference">
                       <div class="day-work-cell schedule_del_class">
                         <el-tooltip v-if="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp" class="item" effect="dark" :content="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].classes.serial : ''" placement="top-start">
@@ -117,6 +118,15 @@ export default {
       currentPage: 1,
       pageSize: 20,
       total: 0,
+      // 排班周期
+      cycleData: [
+        {
+          cycleName: '555555',
+          id: 287955018,
+          isValid: true,
+          itemList: [{ classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }]
+        }
+      ],
       // 班次
       classes: [
         {