私有WBS设置

src/router/views/index.js

@@ -144,4 +144,18 @@ export default [{
                 import ( /* webpackChunkName: "views" */ '@/views/exctab/excelmodel/excelmodel')
         }]
     },
+    {
+        path: '/manager',
+        component: Layout,
+        redirect: '/manager/privateWBS',
+        children: [{
+            path: 'privateWBS/:id',
+            name: '编辑WBS库',
+            meta: {
+                i18n: 'privateWBS'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/manager/projectinfo/privateWBS')
+        }]
+    },
 ]

src/views/manager/projectinfo/list.vue

@@ -3,14 +3,36 @@
     <div>
       <div class="pd-b-20 border-grey-b">
         <span class="mg-r-10">选择项目名称</span>
-        <el-select v-model="projectId" @change="projectChange" placeholder="请选择">
-          <el-option  v-for="item in projectList"  :key="item.id" :label="item.projectName" :value="item.id"></el-option>
+        <el-select
+          v-model="projectId"
+          @change="projectChange"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in projectList"
+            :key="item.id"
+            :label="item.projectName"
+            :value="item.id"
+          ></el-option>
         </el-select>
       </div>
       <div class="pd-t-20">
-        <el-row :gutter="20"  style="height:calc(100vh - 290px)">
-          <el-col :span="6" v-for="(item,index) in projectPageList" :key="item.id" style="height:20%;" class="mg-b-20 box-size-bb">
-            <el-card @click.native="projectClick(item)" class="box-card h-100p flex flex-center project_name" :class="getBg(index)">
+        <el-row
+          :gutter="20"
+          style="height:calc(100vh - 290px)"
+        >
+          <el-col
+            :span="6"
+            v-for="(item,index) in projectPageList"
+            :key="item.id"
+            style="height:20%;"
+            class="mg-b-20 box-size-bb"
+          >
+            <el-card
+              @click.native="projectClick(item)"
+              class="box-card h-100p flex flex-center project_name"
+              :class="getBg(index)"
+            >
               {{item.projectAlias}}
             </el-card>
           </el-col>
@@ -18,41 +40,92 @@
       </div>
       <div>
         <el-pagination
-          layout="prev, pager, next" class="text-align-c"
+          layout="prev, pager, next"
+          class="text-align-c"
           @current-change="handleCurrentChange"
           :current-page.sync="page.currentPage"
-          :total="page.total" :page-size="page.pageSize">
+          :total="page.total"
+          :page-size="page.pageSize"
+        >
         </el-pagination>
       </div>
     </div>
 
-    <el-dialog title="项目信息" :visible.sync="projectVisible" width="800px" append-to-body>
+    <el-dialog
+      title="项目信息"
+      :visible.sync="projectVisible"
+      width="800px"
+      append-to-body
+    >
       <div class="flex jc-sb pd-b-10">
         <span>{{curProjiect.projectName}}</span>
         <div>
-          <el-button size="small" type="success">WBS树管理</el-button>
-          <el-button size="small" @click="editProject" type="primary">编辑项目信息</el-button>
-          <el-button size="small" @click="addContract" type="info">创建新合同段</el-button>
-          <el-button size="small" @click="projectVisible = false">返回</el-button>
+          <el-button
+            size="small"
+            type="success"
+            @click="wbsManage()"
+          >WBS树管理</el-button>
+          <el-button
+            size="small"
+            @click="editProject"
+            type="primary"
+          >编辑项目信息</el-button>
+          <el-button
+            size="small"
+            @click="addContract"
+            type="info"
+          >创建新合同段</el-button>
+          <el-button
+            size="small"
+            @click="projectVisible = false"
+          >返回</el-button>
         </div>
       </div>
-      <div style="height:400px;overflow: auto;" v-if="contractList.length > 0">
-        <el-card shadow="never" v-for="(item,index) in contractList" :key="item.id">
+      <div
+        style="height:400px;overflow: auto;"
+        v-if="contractList.length > 0"
+      >
+        <el-card
+          shadow="never"
+          v-for="(item,index) in contractList"
+          :key="item.id"
+        >
           <div class="flex jc-sb">
             <div class="flex jc-al-c">
-              <el-avatar :size="50" :class="getAvatarBg(item.contractType)">{{getFont(item.contractType)}}</el-avatar>
+              <el-avatar
+                :size="50"
+                :class="getAvatarBg(item.contractType)"
+              >{{getFont(item.contractType)}}</el-avatar>
               <span class="mg-l-10">{{item.contractName}}</span>
             </div>
             <div class="flex jc-al-c">
-              <el-link type="primary" @click="editContract(item)">编辑合同段信息</el-link>
-              <el-link type="primary" class="mg-l-10" @click="contractDetail(item,'2')">分配WBS</el-link>
-              <el-link type="primary" class="mg-l-10" @click="contractDetail(item,'3')">分配项目人员</el-link>
-              <el-link type="primary" class="mg-l-10" @click="delContract(item,index)">删除</el-link>
+              <el-link
+                type="primary"
+                @click="editContract(item)"
+              >编辑合同段信息</el-link>
+              <el-link
+                type="primary"
+                class="mg-l-10"
+                @click="contractDetail(item,'2')"
+              >分配WBS</el-link>
+              <el-link
+                type="primary"
+                class="mg-l-10"
+                @click="contractDetail(item,'3')"
+              >分配项目人员</el-link>
+              <el-link
+                type="primary"
+                class="mg-l-10"
+                @click="delContract(item,index)"
+              >删除</el-link>
             </div>
           </div>
         </el-card>
       </div>
-      <div class="text-align-c pd-t-20" v-else>
+      <div
+        class="text-align-c pd-t-20"
+        v-else
+      >
         暂无合同段，请先创建合同段
       </div>
     </el-dialog>
@@ -60,187 +133,190 @@
 </template>
 
 <script>
-  import {getProjectList} from "@/api/manager/projectinfo";
-  import {findContractByProjectId,removeContractInfo} from "@/api/manager/contractinfo";
-  // import {getDictionary} from "@/api/system/dict";
-  import {mapGetters} from "vuex";
-  export default {
-    data() {
-      return {
-        projectId:'',
-        curProjiect:{},
-        projectList:[],
-        projectPageList:[],
+import { getProjectList } from "@/api/manager/projectinfo";
+import { findContractByProjectId, removeContractInfo } from "@/api/manager/contractinfo";
+// import {getDictionary} from "@/api/system/dict";
+import { mapGetters } from "vuex";
+export default {
+  data () {
+    return {
+      projectId: '',
+      curProjiect: {},
+      projectList: [],
+      projectPageList: [],
 
-        projectVisible:false,
-        contractList:[],
+      projectVisible: false,
+      contractList: [],
 
-        page:{
-          currentPage:1,
-          pageSize:16,
-          total:0
-        }
+      page: {
+        currentPage: 1,
+        pageSize: 16,
+        total: 0
       }
+    }
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  created () {
+    this.init();
+    //console.log(this.userInfo)
+  },
+  methods: {
+    init () {
+      this.getProjectList();
+      this.getProjectPageList();
     },
-    computed: {
-      ...mapGetters(["userInfo"]),
+
+    getProjectList () {
+      getProjectList(1, 999).then((res) => {
+        this.projectList = res.data.data.records;
+      })
     },
-    created() {
-      this.init();
-      //console.log(this.userInfo)
+    getProjectPageList () {
+      getProjectList(this.page.currentPage, this.page.pageSize).then((res) => {
+        this.projectPageList = res.data.data.records;
+        this.page.total = res.data.data.total;
+      })
     },
-    methods: {
-      init(){
-        this.getProjectList();
-        this.getProjectPageList();
-      },
 
-      getProjectList(){
-        getProjectList(1,999).then((res)=>{
-          this.projectList = res.data.data.records;
-        })
-      },
-      getProjectPageList(){
-        getProjectList(this.page.currentPage,this.page.pageSize).then((res)=>{
-          this.projectPageList = res.data.data.records;
-          this.page.total = res.data.data.total;
-        })
-      },
-
-      projectClick(item){
-        this.curProjiect = item;
-        findContractByProjectId(this.curProjiect.id).then((res)=>{
-          this.contractList = res.data.data;
-        })
-        this.projectVisible = true;
-      },
+    projectClick (item) {
+      this.curProjiect = item;
+      findContractByProjectId(this.curProjiect.id).then((res) => {
+        this.contractList = res.data.data;
+      })
+      this.projectVisible = true;
+    },
 
-      handleCurrentChange(val){
-        this.getProjectPageList();
-        this.page.currentPage = val;
-      },
+    handleCurrentChange (val) {
+      this.getProjectPageList();
+      this.page.currentPage = val;
+    },
 
-      projectChange(id){
-        for (let i = 0; i < this.projectList.length; i++) {
-          if(id == this.projectList[i].id){
-            this.curProjiect = this.projectList[i];
-            findContractByProjectId(this.curProjiect.id).then((res)=>{
-              this.contractList = res.data.data;
-            })
-            this.projectVisible = true;
-            return;
-          }
+    projectChange (id) {
+      for (let i = 0; i < this.projectList.length; i++) {
+        if (id == this.projectList[i].id) {
+          this.curProjiect = this.projectList[i];
+          findContractByProjectId(this.curProjiect.id).then((res) => {
+            this.contractList = res.data.data;
+          })
+          this.projectVisible = true;
+          return;
         }
-      },
+      }
+    },
 
-      addContract(){
-        this.$router.push({
-          path:'/contract/detail',
-          query:{pid:this.curProjiect.id}
-        });
-      },
-      editContract(item){
-        this.$router.push({
-          path:'/contract/detail',
-          query:{
-            pid:item.pid,
-            cid:item.id,
-          }
-        });
-      },
-      editProject(){
-        this.$router.push({
-          path:'/manager/projectinfo/detail',
-          query:{
-            id:this.curProjiect.id
-          }
-        });
-      },
-      contractDetail(item,type){
-        this.$router.push({
-          path:'/contract/detail',
-          query:{
-            pid:item.pid,
-            cid:item.id,
-            type,
-          }
-        });
-      },
+    addContract () {
+      this.$router.push({
+        path: '/contract/detail',
+        query: { pid: this.curProjiect.id }
+      });
+    },
+    editContract (item) {
+      this.$router.push({
+        path: '/contract/detail',
+        query: {
+          pid: item.pid,
+          cid: item.id,
+        }
+      });
+    },
+    editProject () {
+      this.$router.push({
+        path: '/manager/projectinfo/detail',
+        query: {
+          id: this.curProjiect.id
+        }
+      });
+    },
+    contractDetail (item, type) {
+      this.$router.push({
+        path: '/contract/detail',
+        query: {
+          pid: item.pid,
+          cid: item.id,
+          type,
+        }
+      });
+    },
 
-      delContract(item,index){
-        this.$confirm('是否删除【'+item.contractName+'】?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          removeContractInfo(item.id).then(()=>{
-            this.$message({
-              type: "success",
-              message: "删除成功!"
-            });
-            this.contractList.splice(index,1);
-          })
+    delContract (item, index) {
+      this.$confirm('是否删除【' + item.contractName + '】?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeContractInfo(item.id).then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          this.contractList.splice(index, 1);
         })
-      },
+      })
+    },
 
-      getFont(type){
-        if(type == 1){
-          return '施';
-        }else if(type == 2){
-          return '监';
-        }else if(type == 3){
-          return '业';
-        }
-        return '';
-      },
-      getAvatarBg(type){
-        if(type == 1){
-          return {'abg1':true};
-        }else if(type == 2){
-          return {'abg2':true};
-        }else if(type == 3){
-          return {'abg3':true};
+    getFont (type) {
+      if (type == 1) {
+        return '施';
+      } else if (type == 2) {
+        return '监';
+      } else if (type == 3) {
+        return '业';
+      }
+      return '';
+    },
+    getAvatarBg (type) {
+      if (type == 1) {
+        return { 'abg1': true };
+      } else if (type == 2) {
+        return { 'abg2': true };
+      } else if (type == 3) {
+        return { 'abg3': true };
+      }
+      return {};
+    },
+    getBg (index) {
+      let num = Math.trunc(index / 4);
+      if ((num % 2) === 0) {//判定条件余数为0时为偶数
+        return {
+          'bg1': true
         }
-        return {};
-      },
-      getBg(index){
-        let num = Math.trunc(index/4);
-        if((num%2)===0){//判定条件余数为0时为偶数
-          return{
-            'bg1':true
-          }
-        }else{
-          return{
-            'bg2':true
-          }
+      } else {
+        return {
+          'bg2': true
         }
       }
-    }
-  };
+    },
+    wbsManage () {//wbs树管理按钮
+      this.$router.push('/manager/privateWBS/' + 111)
+    },
+  }
+};
 </script>
 
 <style scoped lang="scss">
-  .project_name{
-    font-size: 20px;
-    cursor: pointer;
-  }
-  .bg1{
-    background-color: rgb(127, 164, 221);
-    border-color: rgb(187, 187, 187);
-    box-shadow: rgba(0, 0, 0, .4) 0px 2px 6px 0px;
-  }
-  .bg2{
-    background-color: rgb(239, 240, 229);
-    border-color: rgb(187, 187, 187);
-    box-shadow: rgba(0, 0, 0, .4) 0px 2px 6px 0px;
-  }
-  .abg1{
-    background-color: rgb(42, 155, 121);
-  }
-  .abg2{
-    background-color: rgb(155, 108, 42);
-  }
-  .abg3{
-    background-color: rgb(42, 53, 155);
-  }
+.project_name {
+  font-size: 20px;
+  cursor: pointer;
+}
+.bg1 {
+  background-color: rgb(127, 164, 221);
+  border-color: rgb(187, 187, 187);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
+}
+.bg2 {
+  background-color: rgb(239, 240, 229);
+  border-color: rgb(187, 187, 187);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
+}
+.abg1 {
+  background-color: rgb(42, 155, 121);
+}
+.abg2 {
+  background-color: rgb(155, 108, 42);
+}
+.abg3 {
+  background-color: rgb(42, 53, 155);
+}
 </style>

src/views/manager/projectinfo/privateWBS.vue

@@ -0,0 +1,135 @@
+<template>
+  <basic-container>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div class="box">
+          <p>工程节点信息</p>
+          <div class="flex">
+            <el-input
+              placeholder="输入关键字进行过滤"
+              v-model="filterText"
+              @input="filterChange"
+            ></el-input>
+            <!-- <el-button type="info" class="mg-l-20">导入划分</el-button> -->
+          </div>
+          <el-scrollbar style="height:650px;">
+            <div
+              v-loading="treeLoad"
+              style="padding-top:10px;box-sizing: border-box;"
+            >
+              <el-tree
+                class="filter-tree"
+                :data="treeDta"
+                :load="loadNode"
+                @node-click="getNodeDetail"
+              >
+                <span
+                  class="custom-tree-node"
+                  slot-scope="{ node, data }"
+                >
+                  <span>
+                    {{ node.label }}
+                    <el-dropdown @click="command=>{setLeftType(command,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"
+                        >新增子级</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="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-menu>
+                    </el-dropdown>
+                  </span>
+                </span>
+              </el-tree>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <el-col :span="18">
+
+        sss
+      </el-col>
+    </el-row>
+  </basic-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filterText: '',//搜素框
+      treeLoad: false,//搜素旋转功能
+      treeDta: [{
+        id: 5,
+        label: '二级 2-1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        id: 9,
+        label: '三级 1-1-1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+    }
+  },
+  methods: {
+    //#region 
+    filterChange () {//收入改变事件
+
+    },
+    getNodeDetail () {//左侧树节点点击事件
+
+    },
+    //#endregion
+  },
+  created () {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  border: 1px solid #e0e0e0;
+  box-sizing: border-box;
+  padding: 10px 15px;
+}
+</style>

vue.config.js

@@ -26,6 +26,7 @@ module.exports = {
         proxy: {
             '/api': {
                 //本地服务接口地址
+                // target: 'http://192.168.3.64',
                 target: 'http://192.168.31.96',
                 //远程演示服务地址,可用于直接启动项目
                 //target: 'https://saber.bladex.vip/api',