编辑wbs按钮布局修改

src/views/manager/wbsinfo/edit.vue

@@ -1,5 +1,20 @@
 <template>
   <basic-container>
+     <el-row class="titlerow"> 
+          <el-col style="margin-bottom:0px;margin-top:8px">
+              <div style="position:relative" >
+                  <!-- <el-button type="primary" size="medium" icon="el-icon-plus" class="mg-b-10" @click="addNodeHandle">新增节点</el-button>
+                  <el-button type="primary" size="medium" icon="el-icon-edit-outline" class="mg-b-10" @click="editNodeHandle">编辑当前节点</el-button>
+                  <el-button type="primary" size="medium" icon="el-icon-document-copy" class="mg-b-10" @click="copyNodeHandle">复制当前节点</el-button>
+                  <el-button type="warning" size="medium" icon="el-icon-delete" class="mg-b-10" @click="delNodeHandle">删除当前节点</el-button> -->
+                  <el-button type="primary" size="medium" icon="el-icon-upload" v-show="curTreeNode && curTreeNode.level == 2" class="mg-b-10" @click="importTemplate(curTreeData,curTreeNode)">导入划分</el-button>
+                  <el-button class=" mg-b-10"  size="medium" icon="el-icon-s-grid" @click="eleFormulaHandle" v-if="leftType==5">元素公式设置</el-button>
+                  <el-button class=" mg-b-10"  size="medium" icon="el-icon-s-grid" @click="eleHandle" v-else>元素设置</el-button>
+                  <el-button class=" mg-b-10"  size="medium" icon="el-icon-help" @click="nodeInfoHandle">节点参数设置</el-button>
+               
+              </div>
+          </el-col>
+      </el-row>
     <el-row :gutter="20" class="h-100p">
       <el-col :span="10" class="h-100p">
         <div class="h-100p flex flex-d-c">
@@ -33,74 +48,37 @@
                   class="custom-tree-node"
                   :class="data.moreShow?'show':''"
                   slot-scope="{ node, data }"
+                  @mouseleave="mouseout(data)"
                 >
-                  <span class="pd-r-20">
+                  <div class="pd-r-20">
                     {{ node.label }}
-                    <span class="normal-black">
-                      <el-link :underline="false">
+                    <div class="normal-black">
+                      <!-- <el-link :underline="false">
                         <i class="el-icon-sort" @click="paixuMD(data)" v-if="node.level != 1" title="调整排序"></i>
-                      </el-link>
-                    </span>
-                    <!-- <el-dropdown
-                      @click="command=>{setLeftType(command,data)}"
-                      @visible-change="visiblechange($event,data)"
-                    >
-                      <el-button
-                        type="text"
-                        icon="el-icon-more"
-                        class="normal-black"
-                      >
-                      </el-button>
-                      <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item
-                          @click.native="setLeftType(1,data,node)"
-                          icon="el-icon-circle-plus-outline"
-                          v-if="data.nodeType != 6 && data.isExistForm != 1"
-                        >新增子级</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(2,data,node)"
-                          icon="el-icon-edit"
-                        >编辑节点</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(3,data,node)"
-                          icon="el-icon-document-copy"
-                        >复制节点</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="deleNode(data,node)"
-                          icon="el-icon-close"
-                          v-if="node.level !=1"
-                        >删除节点</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(4,data,node)"
-                          icon="iconfont hcicon-danganziliao-biaogetianxie"
-                          class="font-s-12"
-                        >元素公式</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(5,data,node)"
-                          icon="el-icon-coin"
-                        >元素设置</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="nodeInfo(data,node)"
-                          icon="el-icon-help"
-                        >节点参数</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="importTemplate(data,node)"
-                          v-if="node.level == 2"
-                          icon="el-icon-upload"
-                        >导入划分</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="paixuMD(data)"
-                          v-if="node.level != 1"
-                          icon="el-icon-sort"
-                        >调整排序</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="ImportElement(data)"
-                          v-if="node.level != 1&&data.isExistForm==1"
-                          icon="el-icon-folder-opened"
-                        >导入元素</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown> -->
-                  </span>
+                      </el-link> -->
+                         <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)"> 
+                                      <i :class="item.icon"></i>{{item.label}}
+                                </li>
+                              </ul>
+                        </div>
+                    </div>
+                  </div>
                 </span>
               </el-tree>
               <el-tree
@@ -119,74 +97,37 @@
                   class="custom-tree-node"
                   slot-scope="{ node, data }"
                   :class="data.moreShow?'show':''"
+                  @mouseleave="mouseout(data)"
                 >
-                  <span class="pd-r-20">
+                  <div class="pd-r-20">
                     {{ node.label }}
-                    <span class="normal-black">
-                      <el-link :underline="false">
+                    <div class="normal-black">
+                      <!-- <el-link :underline="false">
                         <i class="el-icon-sort" @click="paixuMD(data)" v-if="node.level != 1" title="调整排序"></i>
-                      </el-link>
-                    </span>
-                    <!-- <el-dropdown
-                      @click="command=>{setLeftType(command,data)}"
-                      @visible-change="visiblechange($event,data)"
-                    >
-                      <el-button
-                        type="text"
-                        icon="el-icon-more"
-                        class="normal-black"
-                      >
-                      </el-button>
-                      <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item
-                          @click.native="setLeftType(1,data,node)"
-                          icon="el-icon-circle-plus-outline"
-                          v-if="data.nodeType != 6 && data.isExistForm != 1"
-                        >新增子级</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(2,data,node)"
-                          icon="el-icon-edit"
-                        >编辑节点</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(3,data,node)"
-                          icon="el-icon-document-copy"
-                        >复制节点</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="deleNode(data,node)"
-                          icon="el-icon-close"
-                          v-if="node.level !=1"
-                        >删除节点</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(4,data,node)"
-                          icon="iconfont hcicon-danganziliao-biaogetianxie"
-                          class="font-s-12"
-                        >元素公式</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="setLeftType(5,data,node)"
-                          icon="el-icon-coin"
-                        >元素设置</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="nodeInfo(data,node)"
-                          icon="el-icon-help"
-                        >节点参数</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="importTemplate(data,node)"
-                          v-if="node.level == 2"
-                          icon="el-icon-upload"
-                        >导入划分</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="paixuMD(data)"
-                          v-if="node.level != 1"
-                          icon="el-icon-sort"
-                        >调整排序</el-dropdown-item>
-                        <el-dropdown-item
-                          @click.native="ImportElement(data)"
-                          v-if="node.level != 1&&data.isExistForm==1"
-                          icon="el-icon-folder-opened"
-                        >导入元素</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown> -->
-                  </span>
+                      </el-link> -->
+                           <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)"> 
+                                        <i :class="item.icon"></i>{{item.label}}
+                                  </li>
+                                </ul>
+                        </div>
+                    </div>
+                  </div>
                 </span>
               </el-tree>
             </div>
@@ -195,7 +136,7 @@
         </div>
       </el-col>
       <el-col :span="14" class="h-100p flex flex-d-c">
-        <div>
+        <!-- <div>
           <el-button type="primary" size="medium" icon="el-icon-plus" class="mg-b-10" @click="addNodeHandle">新增节点</el-button>
           <el-button type="primary" size="medium" icon="el-icon-edit-outline" class="mg-b-10" @click="editNodeHandle">编辑当前节点</el-button>
           <el-button type="primary" size="medium" icon="el-icon-document-copy" class="mg-b-10" @click="copyNodeHandle">复制当前节点</el-button>
@@ -204,9 +145,9 @@
           <el-button class="el-btn-purple mg-b-10" type="primary" size="medium" icon="el-icon-s-grid" @click="eleFormulaHandle" v-if="leftType==5">元素公式设置</el-button>
           <el-button class="el-btn-purple mg-b-10" type="primary" size="medium" icon="el-icon-s-grid" @click="eleHandle" v-else>元素设置</el-button>
           <el-button class="el-btn-purple mg-b-10" type="primary" size="medium" icon="el-icon-help" @click="nodeInfoHandle">节点参数设置</el-button>
-        </div>
+        </div> -->
         <template v-if="leftType==5">
-          <div class="mg-b-10">节点信息</div>
+          <p class="mg-b-10">节点信息</p>
           <div>
             <el-table
               :data="tableData"
@@ -1823,7 +1764,21 @@ export default {
       testTreeData: [],
       mixRatioTestIds: [],
       searchinput:'',
-      editEleloading:false
+      editEleloading:false,
+
+      menuvisible:false,//右键菜单
+      menuleft:20,
+      menutop:0,
+      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-document-copy', label: '复制节点', key: "copy"},
+      
+        {icon: 'el-icon-s-promotion', label: '删除节点', key: "del"},
+      
+      ],//树组件操作菜单
+      menuKey:''
     };
   },
   computed: {
@@ -1959,6 +1914,10 @@ export default {
         res.data.data.parentName = parentName;
         this.tableData = [res.data.data];
         this.nodeDetail = Object.assign({}, res.data.data);
+        if(this.menuKey==='add'){
+          this.nodeDetail.nodeName=''
+        }
+       
       })
       this.updateNodeTable();
 
@@ -2047,12 +2006,16 @@ export default {
         }
         res.data.data.parentName = parentName;
         this.tableData = [res.data.data];
-        if (type == 1) {
+        if (type === 1) {
           this.nodeDetail = {
             parentId: res.data.data.id,
-            parentName: data.title
+            parentName: data.title,
+          
           };
+
+        
         } else {
+         
           this.nodeDetail = Object.assign({}, res.data.data);
           this.mixRatioTestIds = this.toSplit(res.data.data.mixRatioTestIds)
         }
@@ -3213,7 +3176,45 @@ export default {
           this.aliasVisible = false;
         })
       }
-    }
+    },
+    //树形控件菜单相关方法
+  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){
+       this.menuKey=''
+        e.preventDefault();
+        if(item.key==='add'){
+          this.addNodeHandle()
+          this.menuKey='add'
+        }
+        
+        else if(item.key==='edit'){
+          this.editNodeHandle()
+          this.menuKey='edit'
+        }
+         else if(item.key==='del'){
+            this.menuKey='del'
+          this.delNodeHandle()
+        }else if(item.key==='copy'){
+          this.$message.info('暂无相关接口')
+        }
+        else if(item.key==='sort'){
+            this.menuKey='sort'
+         this.paixuMD(data)
+        }
+    },
 
 
   },
@@ -3275,4 +3276,37 @@ export default {
     height: calc(100vh - 60px);
   }
 }
+.titlerow{
+  // float: right;
+  background-color:rgba(31, 34, 41, 0.8);
+  width:104%;padding-left:10px;
+  padding-right:40px;
+  text-align:right;
+  margin-top: -20px;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+// 树形控件菜单样式
+.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>