xioayue
/
jwebfs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

右键li 弹出菜单完成

master
xyiege 6 months ago
parent
1e270f45f6
commit
5ad32485be
1 changed files with 205 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 275
      vue/afvue/src/views/Sfilecompare.vue

275
vue/afvue/src/views/Sfilecompare.vue
View File

@ -6,25 +6,31 @@
<!-- 选择服务器 --> <!-- 选择服务器 -->
<select class="selbox" name="fsip" ref="fsip" @change="changeSer"> <select class="selbox" name="fsip" ref="fsip" @change="changeSer">
<option value="0">请选择源服务器</option> <option value="0">请选择源服务器</option>
<option v-for="item in uslist" :value="item.addr+':'+item.port">{{ item.addr+':'+item.port }}</option> <option v-for="item in uslist" :value="item.addr + ':' + item.port">{{ item.addr + ':' + item.port }}
</option>
</select> </select>
<input name="path" class="inputbox" type="text" placeholder="/" autocomplete="off" v-model="fspath"> <input name="path" class="inputbox" type="text" placeholder="/" autocomplete="off" v-model="fspath">
<button @click="getFlist">Go</button> <button @click="getFlist">Go</button>
<button @click="goParent">🔙</button> <button @click="goParent">🔙</button>
</div> </div>
<div class="sflist"> <div class="sflist">
<ul > <ul>
<li v-for="item in fsclist" :key="item"> <li v-for="item in fsclist" :key="item" @contextmenu.prevent="showMenu" @click="hideMenu">
<input type="checkbox" :value="item.path" class="sfchkbox" /> <input type="checkbox" :value="item.path" class="sfchkbox" />
<a class="haschild" @click="goIntoDir(item.path,1)" v-if="item.isdir">{{item.path}}</a> <a class="haschild" @click="goIntoDir(item.path, 1)" v-if="item.isdir">{{ item.path }}</a>
<span v-else>{{item.path}}</span> <span v-else>{{ item.path }}</span>
<!--
<div class="sflfunc">
<a>发送</a>
</div> -->
</li> </li>
</ul> </ul>
</div> </div>
<div class="tips" > <div class="tips">
<span v-if="fsclist.length > 0"> 服务器：{{this.$refs.fsip.value}} 路径：{{fspath}} ,文件数量：{{ fsclist.length }}</span> <span v-if="fsclist.length > 0"> 服务器：{{ this.$refs.fsip.value }} 路径：{{ fspath }} ,文件数量：{{ fsclist.length
<span v-else>当前服务器：{{fsip}}</span> }}</span>
<span v-else>当前服务器：{{ fsip }}</span>
</div> </div>
</div> </div>
<!-- 第二个服务器的文件列表 --> <!-- 第二个服务器的文件列表 -->
@ -33,7 +39,8 @@
<!-- 选择服务器 --> <!-- 选择服务器 -->
<select class="selbox" name="ssip" ref="ssip"> <select class="selbox" name="ssip" ref="ssip">
<option value="0">请选择源服务器</option> <option value="0">请选择源服务器</option>
<option v-for="item in uslist" :value="item.addr+':'+item.port">{{ item.addr+':'+item.port }}</option> <option v-for="item in uslist" :value="item.addr + ':' + item.port">{{ item.addr + ':' + item.port }}
</option>
</select> </select>
<input name="path" class="inputbox" type="text" placeholder="/" autocomplete="off" v-model="sspath"> <input name="path" class="inputbox" type="text" placeholder="/" autocomplete="off" v-model="sspath">
<button @click="getSflist">GO</button> <button @click="getSflist">GO</button>
@ -41,24 +48,36 @@
</div> </div>
<div class="sflist"> <div class="sflist">
<ul > <ul>
<li v-for="item in ssclist" :key="item"> <li v-for="item in ssclist" :key="item">
<a class="haschild" @click="goIntoDir(item.path,2)" v-if="item.isdir">{{item.path}}</a> <a class="haschild" @click="goIntoDir(item.path, 2)" v-if="item.isdir">{{ item.path }}</a>
<span v-else>{{item.path}}</span> <span v-else>{{ item.path }}</span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="tips" > <div class="tips">
<span v-if="ssclist.length > 0">当前路径：{{sspath}} ,文件数量：{{ ssclist.length }}</span> <span v-if="ssclist.length > 0">当前路径：{{ sspath }} ,文件数量：{{ ssclist.length }}</span>
<span v-else>当前服务器：{{ssip}}</span> <span v-else>当前服务器：{{ ssip }}</span>
</div> </div>
</div> </div>
<!-- 右键菜单 -->
<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>
<li class="divider"></li>
<li><span href="javascript:void(0)" @click="handleMenuAction('delete')">删除文件</span></li>
</ul>
</div>
</div> </div>
</template> </template>
<script> <script>
import { GetFileList,SerlistInUsing } from '@/api/scinfo' import { GetFileList, SerlistInUsing } from '@/api/scinfo'
export default { export default {
name: 'Sfilecompare', name: 'Sfilecompare',
@ -68,19 +87,35 @@ export default {
ssip: '', ssip: '',
fsclist: {}, // 第一台文件列表 fsclist: {}, // 第一台文件列表
ssclist: {}, // 第二台文件列表 ssclist: {}, // 第二台文件列表
uslist:[], //使用中的服务器 uslist: [], //使用中的服务器
fspath:'/', // 第一个服务器的路径 fspath: '/', // 第一个服务器的路径
sspath:'/', // 第二个服务器的路径 sspath: '/', // 第二个服务器的路径
isMenuVisible: true, // 菜单是否可见
menuTop: 0, // 菜单顶部位置
menuLeft: 0, // 菜单左侧位置
} }
}, },
mounted() { mounted() {
// 点击文档其他区域隐藏菜单
document.addEventListener('click', (event) => {
//避免快速点击时的冲突
if(this.isMenuVisible){
this.hideMenu()
}
})
// 使用中的服务器 // 使用中的服务器
SerlistInUsing().then(res => { SerlistInUsing().then(res => {
this.uslist = res.data; this.uslist = res.data;
}) })
}, },
beforeMount() {
// 移除事件监听
document.removeEventListener('click', this.hideMenu);
},
methods: { methods: {
// 获取第一个服务器的文件列表 // 获取第一个服务器的文件列表
getFlist() { getFlist() {
// 获取第一个服务器 // 获取第一个服务器
@ -89,7 +124,7 @@ export default {
let sport = sstr[1] let sport = sstr[1]
let scip = btoa(sstr[0]) let scip = btoa(sstr[0])
// 获取文件列表 // 获取文件列表
GetFileList({srcip: scip,path: this.fspath,sport: sport}).then(res => { GetFileList({ srcip: scip, path: this.fspath, sport: sport }).then(res => {
this.fsclist = res.data.list this.fsclist = res.data.list
}) })
}, },
@ -100,74 +135,67 @@ export default {
let sport = sstr[1] let sport = sstr[1]
let scip = btoa(sstr[0]) let scip = btoa(sstr[0])
// 获取文件列表 // 获取文件列表
GetFileList({srcip: scip,path: this.sspath,sport: sport}).then(res => { GetFileList({ srcip: scip, path: this.sspath, sport: sport }).then(res => {
this.ssclist = res.data.list this.ssclist = res.data.list
}) })
}, },
// 进入子目录 // 进入子目录
goIntoDir(path,nflag){ goIntoDir(path, nflag) {
// 根据nflag 来判断 // 根据nflag 来判断
let npath,sel let npath, sel
if(nflag==1){ if (nflag == 1) {
sel=this.$refs.fsip.value sel = this.$refs.fsip.value
// if(this.fspath == path){
// this.fspath = '/'
// }
// 拼装url // 拼装url
if(this.fspath == '/'){ if (this.fspath == '/') {
npath = '/' + path npath = '/' + path
}else{ } else {
npath = this.fspath + '/' + path npath = this.fspath + '/' + path
} }
// npath = this.fspath== '/' ? "/"+path : this.fspath + path
} }
if(nflag==2){ if (nflag == 2) {
sel = this.$refs.ssip.value sel = this.$refs.ssip.value
if(this.sspath == path){ if (this.sspath == path) {
this.sspath = '/' this.sspath = '/'
} }
if(this.sspath=='/'){ if (this.sspath == '/') {
npath = '/' + path npath = '/' + path
}else{ } else {
npath = this.sspath + '/' + path npath = this.sspath + '/' + path
} }
// npath = this.sspath + path+"/"
// npath = this.sspath == '/' ? "/"+path : this.fspath + path
} }
let rrarr = this.preIp(sel) let rrarr = this.preIp(sel)
// ip转为base64 // ip转为base64
let ip = btoa(rrarr[0]) let ip = btoa(rrarr[0])
console.log(npath) this.queryFlist(ip, rrarr[1], npath, nflag)
this.queryFlist(ip,rrarr[1],npath,nflag)
}, },
// 查询内容 // 查询内容
// nflag 1 第一个服务器 2 第二个服务器 // nflag 1 第一个服务器 2 第二个服务器
async queryFlist(ip,port,npath,nflag){ async queryFlist(ip, port, npath, nflag) {
let rlist = [] let rlist = []
await GetFileList({ await GetFileList({
srcip: ip,path: npath, sport: port srcip: ip, path: npath, sport: port
}).then(res => { }).then(res => {
var vlist = res.data.list var vlist = res.data.list
if(vlist){ if (vlist) {
// 绑定数据 // 绑定数据
if(nflag == 1){ if (nflag == 1) {
this.fspath = npath this.fspath = npath
this.fsclist = vlist this.fsclist = vlist
} }
if(nflag == 2){ if (nflag == 2) {
this.sspath = npath this.sspath = npath
this.ssclist = vlist this.ssclist = vlist
} }
}else{ } else {
npath="/" npath = "/"
} }
}) })
return rlist; return rlist;
}, },
// 拆分组装ip // 拆分组装ip
preIp(ssip){ preIp(ssip) {
// 返回数组 // 返回数组
let iparr = [] let iparr = []
let sstr = ssip.split(":") let sstr = ssip.split(":")
@ -176,7 +204,7 @@ export default {
return iparr return iparr
}, },
// 选择服务器 // 选择服务器
changeSer(){ changeSer() {
// 清空路径 // 清空路径
this.fspath = '/' this.fspath = '/'
this.sspath = '/' this.sspath = '/'
@ -184,9 +212,9 @@ export default {
// 上一级目录 // 上一级目录
// 移除最后一个文件 // 移除最后一个文件
goParent(){ goParent() {
// 第一个服务器 // 第一个服务器
if(this.fspath != '/'){ if (this.fspath != '/') {
let npath = this.fspath.split('/') let npath = this.fspath.split('/')
// 弹出最后一个元素 // 弹出最后一个元素
npath.pop() npath.pop()
@ -195,15 +223,53 @@ export default {
this.getFlist() this.getFlist()
} }
// 第二个服务器 // 第二个服务器
if(this.sspath != '/'){ if (this.sspath != '/') {
let npath = this.sspath.split('/') let npath = this.sspath.split('/')
npath.pop() npath.pop()
this.sspath = npath.join('/') this.sspath = npath.join('/')
// 调用方法 // 调用方法
this.getSflist() this.getSflist()
} }
} },
// 右键菜单内容
showMenu(event) {
console.log(event)
// 计算菜单位置（基于点击坐标）
this.menuTop = event.clientY;
this.menuLeft = event.clientX;
// 确保菜单不会超出视口
this.adjustMenuPosition();
// 显示菜单
this.isMenuVisible = true;
},
// 隐藏右键菜单
hideMenu() {
this.isMenuVisible = false;
},
// 调整菜单位置，避免超出视口
adjustMenuPosition() {
const menuWidth = 200; // 菜单宽度（px）
const menuHeight = 160; // 菜单高度（px）
// 右侧超出视口时向左调整
if (this.menuLeft + menuWidth > window.innerWidth) {
this.menuLeft = window.innerWidth - menuWidth;
}
// 底部超出视口时向上调整
if (this.menuTop + menuHeight > window.innerHeight) {
this.menuTop = window.innerHeight - menuHeight;
}
},
// 处理菜单操作
handleMenuAction(action) {
console.log(`执行操作: ${action}`);
// 这里可以添加具体的业务逻辑
this.hideMenu(); // 执行完操作后隐藏菜单
},
} }
} }
@ -219,69 +285,81 @@ export default {
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
position: relative;
} }
.sfcon{
.sfcon {
padding: 20px; padding: 20px;
float: left; float: left;
width: 100%; width: 100%;
min-height: 560px; min-height: 560px;
} }
.sfcon:first-child{
.sfcon:first-child {
margin-bottom: 22px; margin-bottom: 22px;
box-shadow: 1px 7px 10px 3px rgba(0, 0, 0, 0.1); box-shadow: 1px 7px 10px 3px rgba(0, 0, 0, 0.1);
} }
.sfcon:nth-child(2){
.sfcon:nth-child(2) {
margin-top: 22px; margin-top: 22px;
} }
.sfcon:nth-child(2) .sflist{
.sfcon:nth-child(2) .sflist {
background-color: #f1ebeb; background-color: #f1ebeb;
} }
.sfind{
.sfind {
width: 100%; width: 100%;
/* height: 40px; */ /* height: 40px; */
line-height: 40px; line-height: 40px;
padding: 12px; padding: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
.sfind .selbox{
.sfind .selbox {
height: 40px; height: 40px;
border-top: none; border-top: none;
border-left:none; border-left: none;
border-right: none; border-right: none;
outline: none; outline: none;
padding: 0 12px; padding: 0 12px;
} }
.sfind .inputbox{
.sfind .inputbox {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 12px; padding: 12px;
border-top: none; border-top: none;
border-left:none; border-left: none;
border-right: none; border-right: none;
margin-left: 12px; margin-left: 12px;
outline: none; outline: none;
width: 460px; width: 460px;
} }
.sfind button{
.sfind button {
width: 70px; width: 70px;
height: 40px; height: 40px;
margin-left: 12px; margin-left: 12px;
background-color: #f5f5f5; background-color: #f5f5f5;
border: none; border: none;
} }
.sfcon .sflist{
.sfcon .sflist {
min-height: 460px; min-height: 460px;
overflow-y: auto; overflow-y: auto;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.sfcon .sflist ul{
.sfcon .sflist ul {
margin-top: 20px; margin-top: 20px;
display: block; display: block;
width: 100%; width: 100%;
min-height: 500px; min-height: 500px;
} }
.sfcon .sflist ul li{
.sfcon .sflist ul li {
list-style: none; list-style: none;
width: 100%; width: 100%;
float: left; float: left;
@ -290,17 +368,64 @@ export default {
border-bottom: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
} }
.sfcon .sflist ul li .sfchkbox{ .sfcon .sflist ul li:hover {
background-color: #dad8d8;
}
.sfcon .sflist ul li .sflfunc {
/* display: none; */
float: right;
width: 360px;
margin-right: 20px;
}
.sfcon .sflist ul li .sfchkbox {
margin-right: 12px; margin-right: 12px;
} }
.sfcon .sflist .haschild{ .sfcon .sflist .haschild {
cursor: pointer; cursor: pointer;
} }
.sfcon .sflist .tips{ .sfcon .sflist .tips {
width: 100%; width: 100%;
float: left; float: left;
margin-top: 12px; margin-top: 12px;
} }
/* 传输功能区 */
.sftrans {
position: fixed;
width: 200px;
height: 120px;
z-index: 99;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sftrans .sfbcon {
color: #333;
margin-left: auto;
margin-right: auto;
background-color: #fff;
padding:10px;
}
.sftrans .sfbcon li{
list-style: none;
height: 30px;
line-height: 30px;
}
.sftrans .sfbcon li:hover{
background-color: #00bd7e;
color: #fff;
cursor: default;
}
.sftrans .sfbcon li span{
padding-left: 12px;
}
.sftrans .sfbcon li.divider{
height: 1px;
background-color: #00bd7e;
margin: 10px 0;
}
</style> </style>
Write Preview
Loading…
Cancel
Save