分配WBS模版

src/views/manager/contractinfo/detail.vue

@@ -187,43 +187,7 @@
                 <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>
+            <tree-tree :left-tree-data="leftTreeData"></tree-tree>
           </div>
         </el-tab-pane>
         <el-tab-pane label="分配项目人员" name="3">
@@ -305,7 +269,12 @@
   import {Base64} from 'js-base64';
   import {getToken} from '@/util/auth';
   import {mapGetters} from "vuex";
+
+  import treeTree from "@/components/tree-tree/main"
   export default {
+    components: {
+      treeTree
+    },
     data() {
       return {
         activeType:'1',
@@ -350,15 +319,7 @@
 
         wbsId:'',
         wbsList:[],
-        defaultProps: {
-          children: 'children',
-          label: 'title',
-        },
         leftTreeData:[],
-        leftNum:0,
-        rightTreeData:[],
-        rightNum:0,
-        rightExpands:[],
       }
     },
     computed: {
@@ -705,74 +666,16 @@
        })
      },
 
-      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]);
-      }
+    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;
+      })
+    },
 
     }
   };

src/views/manager/projectinfo/detail.vue

@@ -58,9 +58,21 @@
             </el-form>
           </div>
         </el-tab-pane>
-        <el-tab-pane label="分配试验模版" name="2">
+        <el-tab-pane label="分配WBS模版" name="2">
           <div>
-            
+            <div class="text-align-c">
+              <el-radio-group v-model="templateType">
+                <el-radio :label="1">试验</el-radio>
+                <el-radio :label="2">质检</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="text-align-c mg-t-20">
+              <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>
+            <tree-tree :left-tree-data="leftTreeData" scrollbarStyle="height:calc(100vh - 500px)"></tree-tree>
           </div>
         </el-tab-pane>
         <el-tab-pane label="分配系统维护人员" name="3">
@@ -130,7 +142,12 @@
   import {getRoleTree} from "@/api/system/role";
   import {getDictionary} from "@/api/system/dict";
   import {mapGetters} from "vuex";
+
+  import treeTree from "@/components/tree-tree/main"
   export default {
+    components: {
+      treeTree
+    },
     data() {
       return {
         activeType:'1',
@@ -165,7 +182,10 @@
         treeProps:{
           label:"title",
           value:"id"
-        }
+        },
+
+        templateType:2,
+
       }
     },
     computed: {