From 8324311952b44b60e0d7944b25dffb7badec28c1 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期四, 30 五月 2024 16:57:46 +0800
Subject: [PATCH] 完成80%日工时管理接口对接

---
 src/components/view/b3-classes.vue |   46 ++++++++++++++++++++++++++++++++++++----------
 1 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/components/view/b3-classes.vue b/src/components/view/b3-classes.vue
index 684829a..0171ca0 100644
--- a/src/components/view/b3-classes.vue
+++ b/src/components/view/b3-classes.vue
@@ -68,7 +68,7 @@
             </div>
           </div>
         </div>
-        <div class="scroll-right">
+        <div class="scroll-right" id="nav" style="cursor: move;">
           <div class="content">
             <div class="content-title content-title-right" style="border-bottom: 0;">
               <div class="content-title-item" v-for="(item,index) in weeks" :key="'b'+index">
@@ -83,18 +83,14 @@
             v-on:mouseenter="onMouseEnter(index)"
           v-on:mouseleave="currentUserIndex=null">
               <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i" :class="{hoverType:currentUserIndex==index}">
-                <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',type5:m.shift==='5',type6:m.shift==='6'}">
-                  <!-- <div class="work-box-left">
-                    <span>{{ getShiftByDic(m.shift) }}</span>
-                  </div> -->
-                  <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!downPower">
-                    <!-- <i class="el-icon-arrow-down el-icon--right" style="font-size: 20px;color: #fff;cursor: pointer;"></i> -->
+                <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!upPower" style="width: 100%;height: 100%;cursor: pointer;">
+                    <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',type5:m.shift==='5',type6:m.shift==='6'}">
                     <span style="cursor: pointer;" :style="`opacity: ${getShiftByDic(m.shift)=='鏃�'?0:1};`">{{ getShiftByDic(m.shift) }}</span>
+                  </div>
                     <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item v-for="(n,j) in classType" :key="'h'+j" :command="n.value">{{ n.label }}</el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
-                </div>
               </div>
             </div>
           </div>
@@ -328,6 +324,7 @@
     }
     this.monthList.reverse()
     // this.getPower()
+    this.scrollInit()
   },
   methods: {
     refresh(){
@@ -638,6 +635,33 @@
         return obj.label
       }
       return '鏃�'
+    },
+    scrollInit() {
+      // 鑾峰彇瑕佺粦瀹氫簨浠剁殑鍏冪礌
+      const nav = document.getElementById("nav")
+      var flag; // 榧犳爣鎸変笅
+      var downX; // 榧犳爣鐐瑰嚮鐨剎涓嬫爣
+      var scrollLeft; // 褰撳墠鍏冪礌婊氬姩鏉$殑鍋忕Щ閲�
+      nav.addEventListener("mousedown", function(event) {
+        flag = true;
+        downX = event.clientX; // 鑾峰彇鍒扮偣鍑荤殑x涓嬫爣
+        scrollLeft = this.scrollLeft; // 鑾峰彇褰撳墠鍏冪礌婊氬姩鏉$殑鍋忕Щ閲�
+      });
+      nav.addEventListener("mousemove", function(event) {
+        if (flag) { // 鍒ゆ柇鏄惁鏄紶鏍囨寜涓嬫粴鍔ㄥ厓绱犲尯鍩�
+          var moveX = event.clientX; // 鑾峰彇绉诲姩鐨剎杞�
+          var scrollX = moveX - downX; // 褰撳墠绉诲姩鐨剎杞翠笅鏍囧噺鍘诲垰鐐瑰嚮涓嬪幓鐨剎杞翠笅鏍囧緱鍒伴紶鏍囨粦鍔ㄨ窛绂�
+          this.scrollLeft = scrollLeft - scrollX // 榧犳爣鎸変笅鐨勬粴鍔ㄦ潯鍋忕Щ閲忓噺鍘诲綋鍓嶉紶鏍囩殑婊戝姩璺濈
+        }
+      });
+      // 榧犳爣鎶捣鍋滄鎷栧姩
+      nav.addEventListener("mouseup", function() {
+        flag = false;
+      });
+      // 榧犳爣绂诲紑鍏冪礌鍋滄鎷栧姩
+      nav.addEventListener("mouseleave", function(event) {
+        flag = false;
+      });
     }
   }
 }
@@ -702,6 +726,8 @@
   min-height: calc(100% - 10px); /* 瑙嗗彛楂樺害 */
   margin-left: 220px;
   overflow-x: scroll;
+  /* overflow-x: hidden; */
+  cursor: move;
 }
 
 .content {
@@ -767,7 +793,7 @@
   display: flex;
   align-items: center;
   justify-content: space-around;
-  background: #F5F7FB;
+  background: #edeff2;
   border-radius: 8px 8px 8px 8px;
   color: #999;
   font-size: 14px;
@@ -869,7 +895,7 @@
   margin-left: 10px;
 }
 .hoverType{
-  background: rgba(58,123,250,0.05);
+  background: rgba(58,123,250,0.03);
 }
 .year-table{
   width: 100%;

--
Gitblit v1.9.3