暂时屏蔽鼠标右键

vue/afvue/src/views/Sfilecompare.vue

@@ -6,7 +6,8 @@
                 <!-- 选择服务器 -->
                 <select class="selbox" name="fsip" ref="fsip" @change="changeSer">
                     <option value="0">请选择源服务器</option>
-                    <option v-for="item in uslist" :value="item.addr + ':' + item.port">{{ item.addr + ':' + item.port }}
+                    <option v-for="item in uslist" :value="item.addr + ':' + item.port">{{ item.addr + ':' + item.port
+                        }}
                     </option>
                 </select>
                 <input name="path" class="inputbox" type="text" placeholder="/" autocomplete="off" v-model="fspath">
@@ -15,8 +16,9 @@
             </div>
             <div class="sflist">
                 <ul>
-                    <li v-for="item in fsclist" :key="item" @contextmenu.prevent="showMenu" @click="hideMenu">
+                    <li v-for="(item, index) in fsclist" :key="item" 
-                        <input type="checkbox" :value="item.path" class="sfchkbox" />
+                        :data-index="index">
+                        <input type="checkbox" :value="item.path" class="sfchkbox" :name="'fsbox' + index" :ref="'fsbox' + index"/>
                         <a class="haschild" @click="goIntoDir(item.path, 1)" v-if="item.isdir">{{ item.path }}</a>
                         <span v-else>{{ item.path }}</span>
                         <!-- 
@@ -39,7 +41,8 @@
                 <!-- 选择服务器 -->
                 <select class="selbox" name="ssip" ref="ssip">
                     <option value="0">请选择源服务器</option>
-                    <option v-for="item in uslist" :value="item.addr + ':' + item.port">{{ item.addr + ':' + item.port }}
+                    <option v-for="item in uslist" :value="item.addr + ':' + item.port">{{ item.addr + ':' + item.port
+                        }}
                     </option>
                 </select>
                 <input name="path" class="inputbox" type="text" placeholder="/" autocomplete="off" v-model="sspath">
@@ -63,7 +66,8 @@
         </div>
 
         <!-- 右键菜单 -->
-        <div class="sftrans" v-if="isMenuVisible" @contextmenu.prevent :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
+        <div class="sftrans" v-if="isMenuVisible" @contextmenu.prevent
+            :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
             <ul class="sfbcon">
                 <li><span href="javascript:void(0)" @click="handleMenuAction('upload')">同步文件</span></li>
                 <li><span href="javascript:void(0)" @click="handleMenuAction('download')">压缩下载</span></li>
@@ -91,7 +95,9 @@ export default {
             fspath: '/', // 第一个服务器的路径
             sspath: '/', // 第二个服务器的路径
 
-            isMenuVisible: true,  // 菜单是否可见
+            chkfiles: [], // 选中的文件
+
+            isMenuVisible: false,  // 菜单是否可见
             menuTop: 0,            // 菜单顶部位置
             menuLeft: 0,          // 菜单左侧位置
         }
@@ -100,7 +106,7 @@ export default {
         // 点击文档其他区域隐藏菜单
         document.addEventListener('click', (event) => {
             //避免快速点击时的冲突
-            if(this.isMenuVisible){
+            if (this.isMenuVisible) {
                 this.hideMenu()
             }
         })
@@ -233,16 +239,23 @@ export default {
         },
         // 右键菜单内容
         showMenu(event) {
-            console.log(event)
             // 计算菜单位置（基于点击坐标）
             this.menuTop = event.clientY;
             this.menuLeft = event.clientX;
 
             // 确保菜单不会超出视口
             this.adjustMenuPosition();
-
             // 显示菜单
             this.isMenuVisible = true;
+            // 获取到当前行的索引值
+            let index = event.target.dataset.index
+            // 对应的box 也要选中
+            let chkbox = document.getElementsByName('fsbox' + index)
+            chkbox[0].checked = true
+            console.log(chkbox,"chkbox")
+            // 第二个服务器
+            // let schkbox = document.getElementsByName('ssbox'+index)
+            // schkbox[0].checked = true
         },
         // 隐藏右键菜单
         hideMenu() {
@@ -267,10 +280,24 @@ export default {
         // 处理菜单操作
         handleMenuAction(action) {
             console.log(`执行操作: ${action}`);
+            switch(action){
+                case 'upload':
+                    this.uploadFile()
+                    break;
+            }
             // 这里可以添加具体的业务逻辑
             this.hideMenu(); // 执行完操作后隐藏菜单
         },
 
+        // 更新文件
+        uploadFile(e){
+            // 
+            console.log(e,"upload")
+
+            // itname.checked = true
+            // let chkbox =document.getElementsByName('ssbox'+index)
+        }
+
     }
 }
 </script>
@@ -381,6 +408,8 @@ export default {
 
 .sfcon .sflist ul li .sfchkbox {
     margin-right: 12px;
+    width: 18px;
+    height: 18px;
 }
 
 .sfcon .sflist .haschild {
@@ -396,7 +425,7 @@ export default {
 /* 传输功能区 */
 .sftrans {
     position: fixed;
-    width: 200px; 
+    width: 200px;
     height: 120px;
     z-index: 99;
     background-color: #f5f5f5;
@@ -408,20 +437,23 @@ export default {
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
-    padding:10px;
+    padding: 10px;
 }
-.sftrans .sfbcon li{
+
+.sftrans .sfbcon li {
     list-style: none;
     height: 30px;
     line-height: 30px;
 }
-.sftrans .sfbcon li:hover{
+
+.sftrans .sfbcon li:hover {
     background-color: #00bd7e;
-    color: #fff; 
+    color: #fff;
     cursor: default;
 }
-.sftrans .sfbcon li span{
+
-   padding-left: 12px;
+.sftrans .sfbcon li span {
+    padding-left: 12px;
 }
 .sftrans .sfbcon li.divider{
     height: 1px;