|
|
@@ -52,37 +52,38 @@
|
|
|
<span
|
|
|
class="marleft10"
|
|
|
v-show="data.moreShow"
|
|
|
- style="z-index:1000;positon:absolute"
|
|
|
+
|
|
|
>
|
|
|
- <i
|
|
|
- @click.stop='addtree(data,node)'
|
|
|
- class="el-icon-circle-plus-outline"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="data.isStorageNode!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='edittree(data,node)'
|
|
|
- class="el-icon-edit-outline marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="node.level!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='deletetree(node)'
|
|
|
- class="el-icon-delete marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="node.level!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='paixuMD(data)'
|
|
|
- class="el-icon-sort marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="node.level!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='synctree(data,node)'
|
|
|
- class="el-icon-refresh marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- ></i>
|
|
|
+ <div class="normal-black ">
|
|
|
+ <div >
|
|
|
+ <el-link :underline="false">
|
|
|
+ <i
|
|
|
+ class="el-icon-menu "
|
|
|
+ @click="showMenu($event,data, node)"
|
|
|
+ v-if="node.level != 1"
|
|
|
+
|
|
|
+ ></i>
|
|
|
+ </el-link>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
|
|
|
+ <ul
|
|
|
+ v-show="menuvisible"
|
|
|
+ :style="{ left: menuleft + 'px', top: menutop + 'px' }"
|
|
|
+ class="contextmenu"
|
|
|
+ >
|
|
|
+
|
|
|
+ <li v-for="item in menusData" :key="item" @click="menuClick($event,item,data,node)">
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{item.label}}</span>
|
|
|
+ </li>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</span>
|
|
|
</span>
|
|
|
</el-tree>
|
|
|
@@ -97,49 +98,53 @@
|
|
|
:default-expand-all="true"
|
|
|
:filter-node-method="filterNode"
|
|
|
>
|
|
|
- <span
|
|
|
- class=" flexStar"
|
|
|
- slot-scope="{ node, data }"
|
|
|
- @mouseover="mouseOver(data)"
|
|
|
- @mouseleave="mouseLeave(data)"
|
|
|
- style="box-sizing: border-box;width:120%;"
|
|
|
- >
|
|
|
- <span style="text-overflow: ellipsis;">{{ data.title }}</span>
|
|
|
- <span
|
|
|
- class="marleft10"
|
|
|
- v-show="data.moreShow"
|
|
|
+
|
|
|
+ <span
|
|
|
+ class=" flexStar"
|
|
|
+ slot-scope="{ node, data }"
|
|
|
+ @mouseover="mouseOver(data)"
|
|
|
+ @mouseleave="mouseLeave(data)"
|
|
|
+
|
|
|
>
|
|
|
- <i
|
|
|
- @click.stop='addtree(data,node)'
|
|
|
- class="el-icon-circle-plus-outline"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="data.isStorageNode!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='edittree(data,node)'
|
|
|
- class="el-icon-edit-outline marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="node.level!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='deletetree(node)'
|
|
|
- class="el-icon-delete marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="node.level!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='paixuMD(data)'
|
|
|
- class="el-icon-sort marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- v-if="node.level!=1"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click.stop='synctree(data,node)'
|
|
|
- class="el-icon-refresh marleft5"
|
|
|
- style="fontSize:18px;"
|
|
|
- ></i>
|
|
|
+ <div v-if="data.title&&data.title.length<=30">{{data.title | ellipsis}}</div>
|
|
|
+
|
|
|
+ <el-tooltip v-if="data.title&&data.title.length>30" :content="data.title" raw-content placement="top-start" effect="light">
|
|
|
+ <span v-if="data.title &&data.title.length <=30">{{ data.title }}</span>
|
|
|
+ <span v-if="data.title && data.title.length > 30"> {{data.title | ellipsis}}</span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+
|
|
|
+ <span
|
|
|
+ class="marleft10"
|
|
|
+ v-show="data.moreShow"
|
|
|
+
|
|
|
+ >
|
|
|
+ <div class="normal-black ">
|
|
|
+ <div >
|
|
|
+ <el-link :underline="false">
|
|
|
+ <i
|
|
|
+ class="el-icon-menu "
|
|
|
+ @click="showMenu($event,data, node)"
|
|
|
+ v-if="node.level != 1"
|
|
|
+
|
|
|
+ ></i>
|
|
|
+ </el-link>
|
|
|
+ <!-- 因右键自定义菜单事件需要获取当前点击的位置，所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
|
|
|
+ <ul
|
|
|
+ v-show="menuvisible"
|
|
|
+ :style="{ left: menuleft + 'px', top: menutop + 'px' }"
|
|
|
+ class="contextmenu"
|
|
|
+ >
|
|
|
+ <li v-for="item in menusData" :key="item" @click="menuClick($event,item,data,node)">
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span>{{item.label}}</span>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
</span>
|
|
|
- </span>
|
|
|
</el-tree>
|
|
|
|
|
|
</div>
|
|
|
@@ -992,13 +997,25 @@ export default {
|
|
|
configVisible:false,
|
|
|
|
|
|
projectId:'',
|
|
|
- archiveAutoType:'',//最高1 分类2 独立3
|
|
|
+ archiveAutoType:'',//最高1 分类2 独立3
|
|
|
nodesList:[],
|
|
|
|
|
|
configInfo:null,
|
|
|
checkedKeys:[],//分类并卷 回显 勾选数组
|
|
|
|
|
|
treeSelectId:'',//选中的划分树
|
|
|
+ menusData:[
|
|
|
+ {icon: 'el-icon-s-promotion', label: '新增', key: "add"},
|
|
|
+ {icon: 'el-icon-s-promotion', label: '编辑', key: "edit"},
|
|
|
+ {icon: 'el-icon-sort', label: '排序', key: "sort"},
|
|
|
+
|
|
|
+ {icon: 'el-icon-s-promotion', label: '删除', key: "del"},
|
|
|
+ {icon: 'el-icon-refresh', label: '同步', key: "sync"},
|
|
|
+
|
|
|
+ ],//树组件操作菜单
|
|
|
+ menuvisible:false,
|
|
|
+ menuleft:20,
|
|
|
+ menutop:0,
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -1212,6 +1229,7 @@ export default {
|
|
|
mouseLeave (data) {
|
|
|
if (data.moreShow) {
|
|
|
this.$set(data, 'moreShow', false)
|
|
|
+ this.menuvisible=false
|
|
|
}
|
|
|
},
|
|
|
mouseOver (data) {
|
|
|
@@ -1746,6 +1764,55 @@ export default {
|
|
|
})
|
|
|
});
|
|
|
},
|
|
|
+ //树形控件菜单相关方法
|
|
|
+ mouseout(){
|
|
|
+ this.menuvisible=false
|
|
|
+ },
|
|
|
+ //展示菜单
|
|
|
+ showMenu(e,data,node){
|
|
|
+ e.preventDefault();
|
|
|
+ console.log(e,'e');
|
|
|
+ var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
|
|
|
+ var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
|
|
|
+ this.menutop = y;
|
|
|
+ this.menuleft = x;
|
|
|
+ this.menuvisible=true
|
|
|
+
|
|
|
+ },
|
|
|
+ menuClick(e,item,data,node){
|
|
|
+ this.menuKey=''
|
|
|
+ e.preventDefault();
|
|
|
+ if(item.key==='add'){
|
|
|
+ if(data.isStorageNode!=1){
|
|
|
+ this.addtree(data,node)
|
|
|
+ this.menuKey='add'
|
|
|
+ }else{
|
|
|
+ this.$message.warning('该节点下不允许新增节点')
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ else if(item.key==='edit'){
|
|
|
+ this.edittree(data,node)
|
|
|
+ this.menuKey='edit'
|
|
|
+ }
|
|
|
+ else if(item.key==='del'){
|
|
|
+ this.menuKey='del'
|
|
|
+ this.deletetree(data,node)
|
|
|
+ }else if(item.key==='copy'){
|
|
|
+ this.$message.info('暂无相关接口')
|
|
|
+ }
|
|
|
+ else if(item.key==='sort'){
|
|
|
+ this.menuKey='sort'
|
|
|
+ this.paixuMD(data,node)
|
|
|
+ }
|
|
|
+ else if(item.key==='sync'){
|
|
|
+ this.menuKey='sync'
|
|
|
+ this.synctree(data,node)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -1839,5 +1906,27 @@ export default {
|
|
|
min-width: 100%;
|
|
|
font-size: s;
|
|
|
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.contextmenu {
|
|
|
+margin: 0;
|
|
|
+background: #fff;
|
|
|
+z-index: 1000;
|
|
|
+position: fixed; //关键样式设置固定定位
|
|
|
+list-style-type: none;
|
|
|
+padding: 5px 0;
|
|
|
+border-radius: 4px;
|
|
|
+font-size: 12px;
|
|
|
+font-weight: 400;
|
|
|
+color: #333;
|
|
|
+box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+.contextmenu li {
|
|
|
+margin: 0;
|
|
|
+padding: 7px 16px;
|
|
|
+cursor: pointer;
|
|
|
+}
|
|
|
+.contextmenu li:hover {
|
|
|
+background: #eee;
|
|
|
+}
|
|
|
</style>
|
duy