Bläddra i källkod

私有WBS---数据同步按钮布局修改

duy 2 år sedan
förälder
incheckning
c0719c17bb
1 ändrade filer med 355 tillägg och 269 borttagningar
  1. 355 269
      src/views/manager/projectinfo/tree.vue

+ 355 - 269
src/views/manager/projectinfo/tree.vue

@@ -1,10 +1,99 @@
 <template>
-  <div style="height: 100%">
-    <basic-container v-show="showType == 1">
-      <el-row :gutter="20" class="h-100p">
+  <div style="height: 100%;">
+    <basic-container v-show="showType == 1" >
+       <el-row class="titlerow"> 
+          <el-col >
+              <div style="position:relative" >
+           
+                  <!-- 同步按钮 -->
+                      <el-button
+                      size="medium"
+                      icon="el-icon-arrow-down"
+                      style="margin-right:10px"
+                      @click="showSyncbtn"
+                      v-show="!isshowSyncbtn"
+                      >数据同步</el-button >
+                      <el-button
+                      size="medium"
+                      icon="el-icon-arrow-up"
+                      style="margin-right:10px"
+                      @click="showSyncbtn"
+                      v-show="isshowSyncbtn"
+                      >数据同步</el-button >
+                      <!-- <el-select v-model="menuvalue" placeholder="数据同步" class="selectBtn" v-if="isshowSyncbtn">
+                        <el-option
+                          v-for="item in menuoptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                          <span style="float: left">{{ item.label }}</span>
+                        </el-option>
+                      </el-select> -->
+                            <ul
+                                v-show="isshowSyncbtn"
+                                class="contextmenu selectBtn"
+                              >
+                                <li v-for="item in menuoptions" :key="item"  @click="menuClick($event,item,data)"   v-loading="item.load"> 
+                                    {{item.label}}
+                                </li>
+                            </ul>
+                
+                    <el-button
+                      size="medium"
+                      icon="el-icon-s-grid"
+                      @click="eleFormulaHandle"
+                      v-if="leftType == 5"
+                      >表单设置</el-button
+                    >
+                    <el-button
+                      size="medium"
+                      icon="el-icon-s-grid"
+                      @click="eleHandle"
+                      v-else
+                      >元素设置</el-button
+                    >
+                
+                    <!-- <el-button
+                      class="el-btn-purple"
+                      type="primary"
+                      size="medium"
+                      icon="el-icon-upload"
+                      :loading="syncBtnLoad"
+                      @click="syncInfoHandle"
+                      >同步节点参数</el-button
+                    > -->
+                
+                    <el-button
+                      size="medium"
+                      icon="el-icon-help"
+                      @click="nodeInfoHandle"
+                      >节点参数设置</el-button
+                    >
+                    <el-button
+                    style="margin-top:10px"
+                    size="medium"
+                    icon="el-icon-price-tag"
+                    @click="independent"
+                    >独立表单库</el-button
+                  >
+                  <!-- <el-button
+                    :loading="syncElectricLoad"
+                    style="margin-top:10px"
+                    class="el-btn-purple"
+                    type="primary"
+                    size="medium"
+                    icon="el-icon-upload"
+                    @click="syncElectric"
+                    >同步电签默认信息</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">
-            <p>工程节点信息</p>
+            <p style="margin-top:2px">工程节点信息</p>
             <div class="flex">
               <el-input
                 placeholder="输入关键字进行过滤"
@@ -18,188 +107,102 @@
               <el-scrollbar class="h-100p">
                 <div v-loading="treeLoad">
                   <el-tree
-                    v-show="!filterText"
-                    class="filter-tree"
-                    lazy
-                    :data="treeData"
-                    :load="loadNode"
-                    @node-click="getNodeDetail"
-                    :props="defaultProps"
-                    :expand-on-click-node="false"
-                    highlight-current
-                    node-key="id"
-                    ref="tree"
-                    :default-expanded-keys="defaultExpandedKeys"
+                  v-show="!filterText"
+                  class="filter-tree"
+                  lazy
+                  :data="treeData"
+                  :load="loadNode"
+                  @node-click="getNodeDetail"
+                  :props="defaultProps"
+                  :expand-on-click-node="false"
+                  highlight-current
+                  node-key="id"
+                  ref="tree"
+                  :default-expanded-keys="defaultExpandedKeys"
                   >
-                    <span
-                      class="custom-tree-node"
-                      :class="data.moreShow ? 'show' : ''"
-                      slot-scope="{ node, data }"
-                    >
-                      <!--@mouseover="mouseover(data)" @mouseleave="mouseout(data)"-->
-                      <span class="pd-r-20">
-                        {{ node.label }}
-                        <span class="normal-black">
+                  <span
+                  class="custom-tree-node "
+                  :class="data.moreShow ? 'show' : ''"
+                  slot-scope="{ node, data }"
+                  @mouseleave="mouseout(data)"
+                >
+                  <div class="pd-r-20  " >
+                     {{ node.label }}
+                    <div class="normal-black ">
+                      <div >
                           <el-link :underline="false">
                             <i
-                              class="el-icon-sort"
-                              @click="sortpai(data, node)"
+                              class="el-icon-menu "
+                              @click="showMenu($event,data, node)"
                               v-if="node.level != 1"
-                              title="调整排序"
-                            ></i>
-                          </el-link>
-                          <el-link :underline="false">
-                            <i
-                              class="el-icon-upload"
-                              style="margin-left: 2px"
-                              @click="syncNodeTableHandle(data, node)"
-                              title="同步元素表单"
+                            
                             ></i>
                           </el-link>
-                          <el-link :underline="false">
-                            <i
-                              class="el-icon-s-promotion"
-                              style="margin-left: 2px"
-                              @click="syncProjectHandle(data, node)"
-                              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(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
-                          v-if="data.parentId!=0"
-                          @click.native="sortpai(data,node)"
-                          icon="el-icon-sort"
-                        >调整排序</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown> -->
-                      </span>
-                    </span>
-                  </el-tree>
-                  <el-tree
-                    v-show="filterText"
-                    class="filter-tree"
-                    :data="treeData"
-                    @node-click="getNodeDetail"
-                    :props="defaultProps"
-                    :expand-on-click-node="false"
-                    highlight-current
-                    node-key="id"
-                    :filter-node-method="filterNode"
-                    ref="treeall"
+                  
+                      
+                    <!-- 因右键自定义菜单事件需要获取当前点击的位置,所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
+                          <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
+                v-show="filterText"
+                class="filter-tree"
+                :data="treeData"
+                @node-click="getNodeDetail"
+                :props="defaultProps"
+                :expand-on-click-node="false"
+                highlight-current
+                node-key="id"
+                :filter-node-method="filterNode"
+                ref="treeall"
+              >
+                  <span
+                    class="custom-tree-node "
+                    :class="data.moreShow ? 'show' : ''"
+                    slot-scope="{ node, data }"
+                    @mouseleave="mouseout(data)"
                   >
-                    <span
-                      class="custom-tree-node"
-                      slot-scope="{ node, data }"
-                      :class="data.moreShow ? 'show' : ''"
-                    >
-                      <span class="pd-r-20">
-                        {{ node.label }}
-                        <span class="normal-black">
-                          <el-link :underline="false">
-                            <i
-                              class="el-icon-sort"
-                              @click="sortpai(data, node)"
-                              v-if="node.level != 1"
-                              title="调整排序"
-                            ></i>
-                          </el-link>
-                          <el-link :underline="false">
-                            <i
-                              class="el-icon-upload"
-                              style="margin-left: 2px"
-                              @click="syncNodeTableHandle(data, node)"
-                              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(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)"
-                          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-menu>
-                    </el-dropdown> -->
-                      </span>
-                    </span>
+                    <div class="pd-r-20  " >
+                      {{ node.label }}
+                      <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)"> 
+                                      <i :class="item.icon"></i>{{item.label}}
+                                </li>
+                              </ul>
+                        </div>
+                      </div>
+                          
+                    </div>
+                  </span>
                   </el-tree>
                 </div>
               </el-scrollbar>
@@ -207,83 +210,7 @@
           </div>
         </el-col>
         <el-col :span="14" class="h-100p flex flex-d-c">
-          <div class="mg-b-10">
-            <el-button
-              type="primary"
-              size="medium"
-              icon="el-icon-edit-outline"
-              @click="editNodeHandle"
-              >编辑当前节点</el-button
-            >
-            <el-button
-              type="primary"
-              size="medium"
-              icon="el-icon-document-copy"
-              @click="copyNodeHandle"
-              >复制当前节点</el-button
-            >
-            <el-button
-              type="warning"
-              size="medium"
-              icon="el-icon-delete"
-              @click="delNodeHandle"
-              >删除当前节点</el-button
-            >
-            <el-button
-              class="el-btn-purple"
-              type="primary"
-              size="medium"
-              icon="el-icon-s-grid"
-              @click="eleFormulaHandle"
-              v-if="leftType == 5"
-              >表单设置</el-button
-            >
-            <el-button
-              class="el-btn-purple"
-              type="primary"
-              size="medium"
-              icon="el-icon-s-grid"
-              @click="eleHandle"
-              v-else
-              >元素设置</el-button
-            >
-            <el-button
-              class="el-btn-purple"
-              type="primary"
-              size="medium"
-              icon="el-icon-help"
-              @click="nodeInfoHandle"
-              >节点参数设置</el-button
-            >
-            <el-button
-              class="el-btn-purple"
-              type="primary"
-              size="medium"
-              icon="el-icon-upload"
-              :loading="syncBtnLoad"
-              @click="syncInfoHandle"
-              >同步节点参数</el-button
-            >
-           <el-button
-            style="margin-top:10px"
-            class="el-btn-purple"
-            type="primary"
-            size="medium"
-            icon="el-icon-upload"
-            @click="independent"
-            >独立表单库</el-button
-          >
-           <el-button
-            :loading="syncElectricLoad"
-            style="margin-top:10px"
-            class="el-btn-purple"
-            type="primary"
-            size="medium"
-            icon="el-icon-upload"
-            @click="syncElectric"
-            >同步电签默认信息</el-button
-          >
-          </div>
+        
           <template v-if="leftType == 5">
             <div class="mg-b-10">节点信息</div>
             <div>
@@ -1876,20 +1803,52 @@ export default {
       linkCheckVisible:false,//关联弹框
       linkEleList:[],//元素数组
       linkEleKey:'',//搜索关键字
+      menusData:[
+        // {icon: 'el-icon-s-promotion', label: '新增节点', key: "add"},
+        {icon: 'el-icon-s-promotion', label: '编辑节点', key: "edit"},
+        {icon: 'el-icon-upload', label: '同步元素表单', key: "sync1"},
+        {icon: 'el-icon-s-promotion', label: '同步节点到合同段', key: "sync2"},
+        {icon: 'el-icon-sort', label: '调整排序', key: "sort"},
+        {icon: 'el-icon-s-promotion', label: '删除节点', key: "del"},
+      
+      ],//树组件操作菜单
+      menuvisible:false,
+      menuleft:20,
+      menutop:0,
+      //同步菜单按钮
+      menuoptions:[
+        {
+          value: 'jdSync',
+          label: '节点参数同步',
+          load:false,
+        },  {
+          value: 'dqSync',
+          label: '电签同步',
+          load:false,
+        },
+        {
+          value: 'gsSync',
+          label: '公式同步',
+          load:false,
+        },
+      ],
+      menuvalue: '',
+      isshowSyncbtn:false
+      
     };
   },
   computed: {
     ...mapGetters(["userInfo"]),
 
-    dialogTitle: function () {
-      let text = "节点";
-      if (this.leftType == 1) {
-        text = "新增" + text;
-      } else if (this.leftType == 2) {
-        text = "编辑" + text;
-      }
-      return text;
-    },
+    // dialogTitle: function () {
+    //   let text = "节点";
+    //   if (this.leftType == 1) {
+    //     text = "新增" + text;
+    //   } else if (this.leftType == 2) {
+    //     text = "编辑" + text;
+    //   }
+    //   return text;
+    // },
   },
   created() {
     this.init();
@@ -2030,6 +1989,7 @@ export default {
         res.data.data.parentName = parentName;
         this.tableData = [res.data.data];
         if (type == 1) {
+          console.log(1111111111);
           this.nodeDetail = {
             parentId: res.data.data.id,
             parentName: parentName,
@@ -3199,7 +3159,24 @@ export default {
       }
       this.mixRatioTestIds = [];
       this.nodeTypeChange(53);
+       this.dialogTitle='编辑节点'
       this.setLeftType(2, this.curTreeData, this.curTreeNode);
+     
+    },
+    addNodeHandle() {
+      if (!this.curTreeData.id || !this.curTreeNode.id) {
+        this.$message({
+          type: "warning",
+          message: "请先选择节点",
+        });
+        return;
+      }
+      this.mixRatioTestIds = [];
+      this.nodeTypeChange(53);
+        this.dialogTitle='新增节点'
+      this.setLeftType(1, this.curTreeData, this.curTreeNode);
+      
+    
     },
     copyNodeHandle() {
       if (!this.curTreeData.id || !this.curTreeNode.id) {
@@ -3240,13 +3217,19 @@ export default {
       this.setLeftType(5, this.curTreeData, this.curTreeNode);
     },
 
-    syncInfoHandle() {
+    syncInfoHandle(item) {
+    
       this.$confirm("是否同步节点参数?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
         this.syncBtnLoad = true;
+        this.menuoptions.forEach((ele)=>{
+        if(item.value==ele.value){
+          ele.load=true
+        }
+      })
         syncNodeParam(this.projectid)
           .then(() => {
             this.$message({
@@ -3256,6 +3239,11 @@ export default {
           })
           .finally(() => {
             this.syncBtnLoad = false;
+              this.menuoptions.forEach((ele)=>{
+              if(item.value==ele.value){
+                ele.load=false
+              }
+            })
           });
       });
     },
@@ -3332,7 +3320,7 @@ export default {
       });
     },
     syncProjectHandle (data) {
-      this.$confirm("是否同步节点【" + data.title + "】?", "提示", {
+      this.$confirm("是否同步节点【" + data.title + "】到合同段?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -3386,7 +3374,7 @@ export default {
 
       });
     },
-    syncElectric(){
+    syncElectric(item){
       console.log('同步电签默认信息');
        this.$confirm("是否同步电签默认信息?", "提示", {
         confirmButtonText: "确定",
@@ -3394,6 +3382,11 @@ export default {
         type: "warning",
       }).then(() => {
         this.syncElectricLoad = true;
+        this.menuoptions.forEach((ele)=>{
+        if(item.value==ele.value){
+          ele.load=true
+        }
+      })
         syncProjecteVisa(this.projectid)
           .then(() => {
             this.$message({
@@ -3403,6 +3396,11 @@ export default {
           })
           .finally(() => {
             this.syncElectricLoad = false;
+              this.menuoptions.forEach((ele)=>{
+                if(item.value==ele.value){
+                  ele.load=false
+                }
+              })
           });
       });
     },
@@ -3498,7 +3496,53 @@ 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){
+        e.preventDefault();
+        if(item.key==='sort'){
+        this.sortpai(data)
+        }else if(item.key==='sync1'){
+        this.syncNodeTableHandle(data)
+        }else if(item.key==='sync2'){
+        this.syncProjectHandle(data)
+        }//
+        else if(item.key==='add'){
+           this.addNodeHandle()
+        }
+        else if(item.key==='edit'){
+          this.editNodeHandle()
+        }
+         else if(item.key==='del'){
+          this.delNodeHandle()
+        }else if(item.value==='jdSync'){
+          this.syncInfoHandle(item)
+        }else if(item.value==='gsSync'){
+         this.$message({
+            type: "info",
+            message: "暂无相关接口!"
+          });
+        }else if(item.value==='dqSync'){
+          this.syncElectric(item)
+        }
+    },
+    //展示数据同步下拉框
+    showSyncbtn(){
+      this.isshowSyncbtn=!this.isshowSyncbtn
+    }
   },
   watch: {
     "GLExcelFrom.search"(val) {
@@ -3580,5 +3624,47 @@ export default {
 }
 .my-basic-con {
   padding: 6px 6px;
+}
+// 树形控件菜单样式
+.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;
+}
+.selectBtn{
+  position:absolute;
+  top:50px;
+  right: 408px;
+  z-index:1000;
+  width:140px;
+  text-align: left;
+}
+.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;
+ 
+
 }
 </style>