分配wbs页面

src/styles/common.scss

@@ -34,6 +34,10 @@ a{
 
 .flex1{flex: 1;}
 
+.flex-d-c{
+  flex-direction: column;
+}
+
 .jc-sb{
   justify-content:space-between
 }

src/views/manager/contractinfo/detail.vue

@@ -181,7 +181,49 @@
         </el-tab-pane>
         <el-tab-pane label="分配WBS" name="2">
           <div>
-            
+            <div class="text-align-c">
+              <span class="mg-r-20">选择WBS</span>
+              <el-select v-model="wbsId" @change="wbsChange" placeholder="请选择WBS" style="width:500px;">
+                <el-option v-for="item in wbsList" :key="item.id" :label="item.wbsName" :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <div class="flex pd-20">
+              <el-card class="box-card flex1">
+                <div slot="header" class="clearfix">
+                  <span>{{leftNum}}项</span>
+                </div>
+                <div>
+                  <el-scrollbar style="height:calc(100vh - 400px);">
+                    <el-tree show-checkbox
+                      :data="leftTreeData" @check-change="checkChange('leftTree')"
+                      :props="defaultProps" :expand-on-click-node="false"
+                      highlight-current node-key="id"
+                      ref="leftTree" @node-expand="nodeExpand">
+                    </el-tree>
+                  </el-scrollbar>
+                </div>
+              </el-card>
+              <div class="flex flex-d-c flex-center" style="width:50px;">
+                <div><el-button @click="addTree" size="mini" icon="el-icon-arrow-right"></el-button></div>
+                <div><el-button @click="delTree" size="mini" icon="el-icon-arrow-left"></el-button></div>
+                
+              </div>
+              <el-card class="box-card flex1">
+                <div slot="header" class="clearfix">
+                  <span>{{rightNum}}项</span>
+                </div>
+                <div>
+                  <el-scrollbar style="height:calc(100vh - 400px);">
+                    <el-tree show-checkbox
+                      :data="rightTreeData" @check-change="checkChange('rightTree')"
+                      :props="defaultProps" :expand-on-click-node="false"
+                      highlight-current node-key="id"
+                      ref="rightTree" :default-expanded-keys="rightExpands">
+                    </el-tree>
+                  </el-scrollbar>
+                </div>
+              </el-card>
+            </div>
           </div>
         </el-tab-pane>
         <el-tab-pane label="分配项目人员" name="3">
@@ -255,6 +297,8 @@
           findJobByRoleId,findAllUserByCondition,findUserByName,
           saveUserInfoByProject,removeUsersByIds,resetPasswordByUserId} from "@/api/manager/contractinfo";
   import {getRoleTree} from "@/api/system/role";
+  import {getList as getwbsList} from "@/api/manager/wbsinfo";
+  import {getAlltree} from "@/api/manager/wbstree";
   import {getDictionary} from "@/api/system/dict";
   import {remove as removeFile} from "@/api/resource/attach";
   import website from '@/config/website';
@@ -303,6 +347,18 @@
         userId:'',
         userList:[],
         copyText:'',
+
+        wbsId:'',
+        wbsList:[],
+        defaultProps: {
+          children: 'children',
+          label: 'title',
+        },
+        leftTreeData:[],
+        leftNum:0,
+        rightTreeData:[],
+        rightNum:0,
+        rightExpands:[],
       }
     },
     computed: {
@@ -319,6 +375,8 @@
         if(newValue == '3'){
           this.getRoleList();
           this.getUserByName();
+        }else if(newValue == '2'){
+          this.getWBSList();
         }
       },
       rId:function(newValue){
@@ -647,6 +705,75 @@
        })
      },
 
+      checkChange(treeName){
+        switch (treeName) {
+          case 'leftTree':
+            this.leftNum = this.$refs.leftTree.getCheckedKeys().length;
+            break;
+          case 'rightTree':
+            this.rightNum = this.$refs.rightTree.getCheckedKeys().length;
+            break;
+        }
+      },
+
+      getWBSList(){
+        getwbsList().then((res)=>{
+          this.wbsList = res.data.data.records;
+        })
+      },
+      wbsChange(wbsid){
+        getAlltree(this.userInfo.tenant_id,'',wbsid).then((res)=>{
+          this.leftTreeData = res.data.data;
+        })
+      },
+
+      addTree(){
+        //console.log(this.$refs.leftTree.getCheckedNodes())
+        let allTree = JSON.parse(JSON.stringify(this.leftTreeData));
+
+        //把半选和选中的数组key合并
+        let keys = this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys());
+        //console.log(keys,'keys');
+        //console.log(allTree,'allTree');
+        this.getRightTree(allTree,keys);
+        this.rightTreeData = allTree;
+      },
+      getRightTree(arr,keys){
+        //对比所有的node和选中的key
+        for (let i = arr.length-1; i >= 0; i--) {
+          let isIn = false;
+          for (let j = keys.length-1; j >= 0; j--) {
+            if(keys[j] == arr[i].id){
+              isIn = true;
+              //已经匹配到的key移除，节省性能
+              keys.splice(j,1);
+              break;
+            }
+          }
+          if(isIn){
+            //包含在选中的节点，如果有childer继续递归判断
+            if(arr[i].children && arr[i].children.length){
+              this.getRightTree(arr[i].children,keys);
+            }
+          }else{
+            //不包含在选中key的node删除
+            arr.splice(i,1);
+          }
+        }
+      },
+      delTree(){
+        let delNodes = this.$refs.rightTree.getCheckedNodes();
+        //只把选中的节点移除
+        delNodes.forEach((node)=>{
+          this.$refs.rightTree.remove(node);
+        })
+        this.rightNum = this.$refs.rightTree.getCheckedKeys().length;
+      },
+
+      nodeExpand(data){
+        this.rightExpands = this.rightExpands.concat([data.id]);
+      }
+
     }
   };
 </script>