From f301b32d0203c6df35bd5075e20d2bc847dc36ed Mon Sep 17 00:00:00 2001
From: zhengzhou <wzszhengzhou@hotmail.com>
Date: Thu, 25 Feb 2021 22:41:51 +0800
Subject: [PATCH] update

---
 src/components/people-item/index.vue          |  132 ++
 .../project/components/members-picker.vue     |  305 +++
 .../main_web/project/components/members.vue   |   33 -
 .../project/components/plain-folder-list.vue  |  387 ++++
 .../components/temp-selected-user-list.vue    |  130 ++
 src/views/main_web/project/index.vue          | 1832 ++++++++++++++++-
 src/views/main_web/project/newProject.vue     |    0
 src/views/main_web/project/service.js         |  102 +
 8 files changed, 2876 insertions(+), 45 deletions(-)
 create mode 100644 src/components/people-item/index.vue
 create mode 100644 src/views/main_web/project/components/members-picker.vue
 delete mode 100644 src/views/main_web/project/components/members.vue
 create mode 100644 src/views/main_web/project/components/plain-folder-list.vue
 create mode 100644 src/views/main_web/project/components/temp-selected-user-list.vue
 delete mode 100644 src/views/main_web/project/newProject.vue
 create mode 100644 src/views/main_web/project/service.js

diff --git a/src/components/people-item/index.vue b/src/components/people-item/index.vue
new file mode 100644
index 00000000..676b1edd
--- /dev/null
+++ b/src/components/people-item/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="people-item"  :title="user.cnName">
+    <div class="people-wrap" :class="{'rt-0': isShowManagerMark}">
+      <div class="people">
+        <img v-if="Object.keys(user).length > 0" 
+             class="proj-avatarface"
+             :class="{'manager-mark': isShowManagerMark }"
+             :src="user.headImgUrl | resolveAvator" alt
+        />
+        <div v-else-if="!isShowEmptyAvatar" class="add-btn">
+          <i class="el-icon-plus proj-avatarface"></i>
+        </div>
+        <img v-else src="/static/img/暂无2.svg" alt="" class="proj-avatarface empty">
+      </div>
+      <div class="people-name" :class="{'rt-2': isEnterEdit && isShowManagerMark, 'rt-4': isEnterEdit && !isShowManagerMark}">{{user.cnName}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+       
+      }
+    },
+    computed: {
+
+    },
+    props: {
+      user: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      isShowManagerMark: {//是否显示 圆圈边框
+        type: Boolean,
+        default: false,
+      },
+      isEnterEdit: {//控制是展示还是编辑
+        type: Boolean,
+        default: false,
+      },
+      isShowEmptyAvatar: {//是否显示暂无
+        type: Boolean,
+        defualt: false
+      }
+    },
+    methods: {
+   
+    },
+  }
+</script>
+
+<style scoped>
+  .rt-2 {
+    top: 2px !important;
+  }
+  .rt-0 {
+    top: 0 !important;
+  }
+  .rt-4 {
+    top: 4px !important;
+  }
+  .empty {
+    background-color: #eaeaea;
+  }
+  .people-item {
+    display: flex;
+    position: relative;
+    z-index: 9;
+    box-sizing: border-box;
+    text-align: center;
+    width: 64px;
+    padding: 0 0 8px 0;
+  }
+  .people-item .people-wrap {
+    position: relative;
+    top: 4px;
+    border-radius: 50%;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .people-item .people {
+    border-radius: 50%;
+  }
+  .active-manager-mark .people-name {
+    top:-2px;
+  }
+
+  /* 加号选择框 */
+  .people-item .el-icon-plus {
+    display: block;
+    text-align: center;
+    height: 48px;
+    line-height: 48px;
+    font-size: 24px;
+    color: #999B9D;
+  }
+  .proj-avatarface {
+    vertical-align: bottom;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: rgba(246, 246, 246, 1);
+  }
+
+  .people-name {
+    position: relative;
+    width: 100%;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    height: 16px;
+    line-height: 16px;
+    color: rgba(17, 19, 21, 100);
+    font-size: 12px;
+    text-align: center;
+    font-family: PingFangSC-Regular;
+    margin: 8px auto 0;
+  }
+
+
+  .add-btn {
+    cursor: pointer;
+    margin: 0 4px;
+  }
+</style>
diff --git a/src/views/main_web/project/components/members-picker.vue b/src/views/main_web/project/components/members-picker.vue
new file mode 100644
index 00000000..e9bfc6ac
--- /dev/null
+++ b/src/views/main_web/project/components/members-picker.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="member-list">
+    <div class="top-title">选择成员</div>
+    <div class="search-bar">
+      <i class="search-icon"></i>
+      <input placeholder="搜索功能正在内测中" class="search-input" disabled/>
+    </div>
+    <!-- 下面按企业 / 部门 显示人员 -->
+    <div class="hori-line"></div>
+    <div class="content-wrap">
+      <!-- 折叠面板 -->
+      <div class="people-wrap">
+        <el-collapse  v-model="activeCompanyName">
+          <!-- 添加协作群与工作 -->
+          <el-collapse-item 
+            v-for="topNode in treeList" 
+            :key="topNode.id"
+            :name="topNode.id"
+          >
+            <template slot="title">
+              <span class="company-title">{{ topNode.label }}</span>
+            </template>
+            <el-collapse v-model="activeDeptNameList" v-if="topNode.hasChildren">
+              <!-- 二级折叠面板 -->
+              <el-collapse-item v-for="deptNode in topNode.children" v-show="deptNode.hasChildren" :name="deptNode.id" :key="deptNode.id">
+                <template slot="title" class="dept-entry">
+                  <span class="dept-name">{{ deptNode.label }}</span>
+                  <div class="check-all-wrap" 
+                      @click.stop="toggleAllDept(deptNode)"
+                  >
+                    <div class="checkbox" :class="{checked: deptNodeSelectedMap[deptNode.id]}"/><span>全选</span>
+                  </div>
+                </template>
+                <div class="user-info-item" v-for="memberNode in deptNode.children" :label="memberNode.label" :key="memberNode.id"
+                      @click.stop="toggleMember(memberNode)"
+                  >
+                  <img :src="memberNode.data.headImgUrl | resolveAvator" alt="" class="avatar-img" />
+                  <span class="user-info-name">{{memberNode.label}}</span>
+                  <div class="checkbox" :class="{checked: isSelected(memberNode.id)}" />
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+            <div class="empty-people-tips" v-else>暂未添加人员</div>
+          </el-collapse-item>
+          <!-- v-if="linkCompanyList.length" -->
+        </el-collapse>
+      </div>
+     
+    </div>
+  </div>
+</template>
+
+<script>
+  // 选择人员 人员列表组件
+  export default {
+    data() {
+      // console.log(this.treeList);
+      const firstTopNode = this.treeList[0];
+      const activeCompanyName = firstTopNode ? [firstTopNode.id]:[];
+      const activeDeptNameList = firstTopNode ? firstTopNode.mapChildren(deptNode => deptNode.id): [];
+      this.clacAllSelected();
+      return {
+        ischeckAll: false,
+        activeCompanyName,
+        activeDeptNameList,
+      }
+    },
+    methods: {
+      isSelected(id) {
+        return !!this.selectedKeys.find(key => key === id);
+      },
+      isChildrenAllSelected(deptNode) {
+        const selectedKeys = this.selectedKeys;
+        return deptNode.everyChildren(node => selectedKeys.find(key => key === node.id));
+      },
+      toggleAllDept(deptNode) {
+        const targetChecked = !this.deptNodeSelectedMap[deptNode.id];
+        this.$emit('select', deptNode.children, targetChecked);
+      },
+      toggleMember(memberNode) {
+        const targetChecked = !this.isSelected(memberNode.id);
+        this.$emit('select', [memberNode], targetChecked);
+      },
+      clacAllSelected() {
+        const hash = {};
+        this.treeList.forEach(topNode => {
+          topNode.mapChildren(deptNode => {
+            const flag = this.isChildrenAllSelected(deptNode);
+            if(flag) { hash[deptNode.id] = true; }
+          })
+        });
+        this.deptNodeSelectedMap = hash;
+      },
+    },
+    props: {
+      treeList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      selectedKeys: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+    },
+    watch: {
+      selectedKeys: {
+        immediate: true,
+        handler(val) {
+          this.clacAllSelected();
+        }
+      },
+      treeList: {
+        immediate: true,
+        handler(val) {
+          this.clacAllSelected();
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+   /* 水平的线 */
+   .hori-line {
+    border: 0.5px solid #eaeaea;
+    margin: 13px 0 0 0;
+  }
+  .member-list {
+    width: 100%;
+    min-width: 375px;
+    max-width: 375px;
+    
+    background-color: #fcfcfc;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+    .top-title {
+      height: 50px;
+      line-height: 50px;
+      padding: 0 0 0 24px;
+      color: rgba(12, 13, 16, 100);
+      font-size: 20px;
+      text-align: left;
+      font-family: PingFangSC-Medium;
+    }
+    .search-bar {
+      position: relative;
+      margin: 6px 15px 7px;
+      padding: 0 5px;
+      .search-icon {
+        position: absolute;
+        left: 10px;
+        width: 22px;
+        height:22px;
+        background: url('/static/img/搜索.svg') center/100%;
+        margin: 4px 0;
+     }
+     .search-input {
+        box-sizing: border-box;
+        outline: none;
+        width:100%;
+        height: 30px;
+        padding: 0 0 0 30px;
+        border-radius: 8px;
+        background-color: rgba(233, 233, 235, 1);
+        border: 0.5px solid rgba(174, 174, 174, 1);
+        cursor: not-allowed;
+      }
+    }
+    .content-wrap {
+      // 右侧滚动条有8px的宽度
+      padding: 0 0 0 8px;
+      overflow-y: scroll;
+      height: calc(100vh - 177px);
+       /* 我的企业文字样式 */
+      .company-title {
+        margin: 12px 0 10px 16px;
+        height: 22px;
+        line-height: 22px;
+        color: rgba(50, 50, 60, 100);
+        font-size: 18px;
+        text-align: left;
+        font-family: PingFangSC-Regular;
+      }
+      .dept-name {
+        margin: 0 0 0 16px;
+        flex: 1;
+       }
+    }
+    .people-wrap {
+      padding: 0 0 40px 0;
+    }
+  }
+  
+  .search-input::-webkit-input-placeholder {
+    color: rgba(0, 0, 0, 0.56);
+    font-size: 14px;
+    font-family:'Courier New', Courier, monospace;
+    color: rgba(0, 0, 0, 0.56);
+    height: 20px !important;
+    line-height: 20px !important;
+  }
+ 
+  .user-info-item:hover {
+    background-color: rgba(50, 50, 60, 0.1)
+  }
+  
+  .user-info-item {
+    display: flex;
+    padding:0 16px;
+    height: 44px;
+    line-height: 44px;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 8px;
+    .avatar-img {
+      width: 32px;
+      height:32px;
+      border-radius: 50%;
+      margin: 0 13px 0 0;
+    }
+    .user-info-name {
+      flex: 1;
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+    }
+  }
+
+
+</style>
+
+<style lang="scss">
+  .member-list .el-collapse-item__wrap {
+      border-bottom: none !important;
+  }
+  .dept-select-all-btn .el-checkbox__label {
+    padding: 0 0 0 6px !important;
+    margin: 0 8px 0 0;
+  }
+  .member-list .el-collapse {
+    border: none !important;
+  }
+  .member-list .el-collapse-item__arrow {
+    position: relative;
+    left: 2px;
+  }
+  .el-checkbox.dept-select-all-btn {
+    /* //margin: 0 0 0 auto; */
+    position: absolute;
+    right: 15px;
+
+  }
+  .member-list .el-collapse-item__header {
+    height: 44px !important;
+    line-height: 44px !important;
+    border: none !important;
+    position: relative;
+    
+  }
+  .user-info-item .el-checkbox__inner {
+    width: 20px;
+    height: 20px;
+    color: #cbcbce;
+  }
+
+  .member-list .el-collapse-item__header {
+    margin: 0 4px 0 0 !important;
+  }
+
+  .check-all-wrap {
+    display: flex;
+    align-items: center;
+    margin: 0 10px 0 0;
+    .checkbox {
+      width: 10px;
+      height: 10px;
+      margin: 0 6px 0 0;
+    }
+  }
+ 
+  .checkbox{
+    float: right;
+    width: 20px;
+    height: 20px;
+    border: 1px solid rgba(203, 203, 206, 1);
+    border-radius: 50%;
+    &.checked{
+      background-color: #7850ff
+    }
+  }
+
+.member-list  .app-header-content {
+  background-color: #f8f8f8;
+}
+
+.empty-people-tips {
+  font-size: 16px;
+  text-align: center;
+  margin: 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/main_web/project/components/members.vue b/src/views/main_web/project/components/members.vue
deleted file mode 100644
index 971f009c..00000000
--- a/src/views/main_web/project/components/members.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<!--
-  选择成员弹窗
--->
-<template>
-  <div class="dialog members">
-    <h3>选择成员</h3>
-    <el-input placeholder="搜索职员">
-      <el-button slot="prepend" icon="el-icon-search" />
-    </el-input>
-  </div>
-</template>
-
-
-<style scoped>
-  .dialog {
-    position: absolute;
-    background-color: rgba(252, 252, 252, 1);
-    box-shadow: 0px 3px 11px 1px rgba(0, 0, 0, 0.06);
-    border-radius: 8px 8px 0 0;
-  }
-  .members {
-    left: 868px;
-    top: 48px;
-    width: 375px;
-    height: 976px;
-  }
-  .members h3 {
-    margin-top: 16px;
-    margin-bottom: 28px;
-    line-height: 1em;
-    padding: 0 24px;
-  }
-</style>
\ No newline at end of file
diff --git a/src/views/main_web/project/components/plain-folder-list.vue b/src/views/main_web/project/components/plain-folder-list.vue
new file mode 100644
index 00000000..f45d96f7
--- /dev/null
+++ b/src/views/main_web/project/components/plain-folder-list.vue
@@ -0,0 +1,387 @@
+<template>
+  <div>
+    <div v-for="folder in folderList" :key="folder.id">
+      <div>
+        <div
+          @click.stop="activeFolderClick(folder)"
+          class="folder-wrap folder-hover"
+          ref="activeFolder"
+          :class="{
+            'active-folder': folder.id == activeFolderId && isEnterEdit,
+            'folder-click': !isEnterEdit,
+          }"
+        >
+          <div
+            class="folder-name"
+            :class="{ 'opacity-5': !isAllowedAssignedStaffFolder }"
+          >
+            <span>{{ folder.folderName }}</span>
+            <span v-if="!isProjManager" class="user-perm-text"></span>
+          </div>
+
+          <div
+            v-if="!isEnterEdit || activeFolderId !== folder.id"
+            class="clear-fix border-box"
+            :class="{
+              'mb-36': folder.id === activeFolderId && isEnterEdit,
+              'ml-4': !isEnterEdit,
+              'adjust-position': isEnterEdit,
+            }"
+          >
+            <div class="fl">
+              <div v-if="folder.manageUser && folder.manageUser.length == 0">
+                <div
+                  class="use-relative"
+                  v-if="isAllowedAssignedFolder(folder)"
+                >
+                  <people-item
+                    v-if="!isEnterEdit"
+                    :class="{ 'mr-8': !isEnterEdit }"
+                    @click.native.stop="
+                      aloneAddUserForFolder(folder),
+                        enterEditFolderClick(folder)
+                    "
+                  />
+                  <people-item v-else />
+                </div>
+                <div class="notclick" v-else>
+                  <people-item
+                    :isShowEmptyAvatar="true"
+                    :class="{ 'mr-8': !isEnterEdit }"
+                  />
+                </div>
+              </div>
+
+              <div class="use-flex" v-else>
+                <div v-for="(user, index) in folder.manageUser" :key="user.id">
+                  <div class="use-relative">
+                    <people-item
+                      :user="user"
+                      :isShowManagerMark="isEnterEdit"
+                      :class="{
+                        notclick: !isAllowedAssignedStaffFolder(folder),
+                        'mr-8': !isEnterEdit,
+                      }"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 竖线 -->
+            <div class="vertical-line" v-show="!isEnterEdit" />
+
+            <div
+              class="use-flex"
+              :class="{ 'mb-6': isEnterEdit && activeFolderId !== folder.id }"
+            >
+              <div
+                v-for="user in listUserComputed(folder.listUser)"
+                :key="user.id"
+                :class="{
+                  notclick: !(
+                    isAllowedAssignedStaffFolder(folder) || isStaff(folder)
+                  ),
+                }"
+              >
+                <people-item :user="user" :isEnterEdit="isEnterEdit" />
+              </div>
+
+              <div
+                class="add-btn"
+                v-if="
+                  folder.manageUser &&
+                  folder.manageUser.length > 0 &&
+                  isAllowedAssignedStaffFolder(folder)
+                "
+              >
+                <people-item
+                  v-if="!isEnterEdit"
+                  @click.native.stop="
+                    aloneAddUserOnlyStaff(folder), enterEditFolderClick(folder)
+                  "
+                />
+              </div>
+              <div class="stand-place" v-if="isNest(folder.nodeId)" />
+              <!-- 嵌套模板入口 -->
+              <div
+                class="add_nest"
+                v-if="isNest(folder.nodeId) && !isEnterEdit"
+              >
+                <div class="add_nest_box" @click.stop="enterNestTemp(folder)">
+                  <i class="el-icon-plus"></i>
+                  <p>嵌套模板</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="isEnterEdit && activeFolderId == folder.id"
+            class="use-relative ml-4 mb-36 use-flex border-box"
+            :class="{ 'adjust-margin': folder.id === lastFolderId }"
+          >
+            <temp-selected-user-list
+              :selectedUserList="selectedUser"
+              @changeManagerClick="changeManagerClick"
+              @setFirstPeopleToManager="setFirstPeopleToManager"
+            />
+          </div>
+        </div>
+      </div>
+
+      <template v-if="folder.listChildren && folder.listChildren.length > 0">
+        <plain-folder-list
+          :folderList="folder.listChildren"
+          :id="id"
+          :lastFolderId="lastFolderId"
+          :allManager="allManager"
+          :allManagerChild="allManagerChild"
+          :aloneAddUserForFolder="aloneAddUserForFolder"
+          :aloneAddUserOnlyStaff="aloneAddUserOnlyStaff"
+          :allChildrenLists="allChildrenLists"
+          :isEnterEdit="isEnterEdit"
+          :activeFolderId="activeFolderId"
+          :selectedUser="selectedUser"
+          :isProjManager="isProjManager"
+          :nestNodeList="nestNodeList"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import PeopleItem from "@/components/people-item";
+import TempSelectedUserList from "./temp-selected-user-list";
+
+export default {
+  name: "PlainFolderList",
+  components: {
+    PeopleItem,
+    TempSelectedUserList,
+  },
+  props: {
+    id: String, //用户的id,
+    lastFolderId: String,
+    allManager: Object,
+    allManagerChild: Array,
+    folderList: Array,
+    aloneAddUserForFolder: Function,
+    aloneAddUserOnlyStaff: Function,
+    allChildrenLists: Array,
+    isEnterEdit: {
+      type: Boolean,
+      default: false,
+    },
+    nestNodeList: Array,
+    isProjManager: {
+      type: Boolean,
+      default: false,
+    },
+    activeFolderId: {
+      type: String,
+      defualt: "",
+    },
+    selectedUser: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      showAll: false,
+      exsitNest: false,
+    };
+  },
+  methods: {
+    //判断是否存在可嵌套节点
+    isNest(id) {
+      let len = this.nestNodeList.length;
+      for (let i = 0; i < len; i++) {
+        if (this.nestNodeList[i].ParentNodeId == id) {
+          return true;
+        }
+      }
+      return false;
+    },
+    enterNestTemp(folder) {
+      this.$bus.$emit("enterNestTemp", folder);
+      //this.$bus.$emit('enterNestTemp');
+    },
+    // 设置第一个选择的人员为节点负责人
+    setFirstPeopleToManager(user) {
+      this.$bus.$emit("setFirstPeopleToManager", user);
+    },
+    // 切换工作负责人
+    changeManagerClick(user) {
+      this.$bus.$emit("changeManagerClick", user);
+    },
+    // 点击进入文件夹编辑
+    activeFolderClick(folder) {
+      if (this.isEnterEdit && this.isAllowedAssignedStaffFolder(folder)) {
+        this.$bus.$emit("activeFolderClick", folder);
+      }
+    },
+    // 点击了添加职员的按钮 进入编辑状态
+    // 因为这里用的是递归组件 所以就不用父子组件通信 用事件总线
+    enterEditFolderClick(folder) {
+      if (!this.isEnterEdit) {
+        this.$bus.$emit("enterEditFolderClick", folder);
+      }
+    },
+    showAllClick() {
+      this.showAll = true;
+    },
+    toggleFolderExpand(folder) {
+      folder.expanded = !folder.expanded;
+      this.$forceUpdate();
+    },
+    isAllowedAssignedFolder(folder) {
+      return (
+        this.allManager.id == this.id || //总负责人
+        (this.allManagerChild.length > 0 &&
+          this.allManagerChild.find((item) => item.id == this.id)) || //是不是负责人
+        (this.allChildrenLists.length > 0 &&
+          this.allChildrenLists.includes(folder))
+      ); //它的所有子节点
+      //||folder.manageUser && folder.manageUser[0].id == this.id
+    },
+    isAllowedAssignedStaffFolder(folder) {
+      return (
+        (folder.manageUser &&
+          folder.manageUser.length > 0 &&
+          folder.manageUser[0].id == this.id) ||
+        this.isAllowedAssignedFolder(folder)
+      );
+    },
+    isStaff(folder) {
+      return folder.listUser.some((item) => {
+        return item.id === this.id;
+      });
+    },
+  },
+  computed: {
+    listUserComputed: function () {
+      var thisApp = this;
+      return function (listUsers) {
+        return listUsers.filter(function (user) {
+          return user.folderPerm != 2;
+        });
+      };
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.stand-place {
+  width: 64px;
+  height: 72px;
+}
+.add_nest {
+  position: absolute;
+  right: 10px;
+  bottom: -6px;
+  z-index: 9;
+  width: 64px;
+  height: 80px;
+  box-sizing: border-box;
+  .add_nest_box {
+    cursor: pointer;
+    width: 64px;
+    height: 64px;
+    box-sizing: border-box;
+    border: 1px solid #7850ff;
+    border-radius: 8px;
+    .el-icon-plus {
+      font-size: 24px;
+      color: #7850ff;
+    }
+    p {
+      color: #7850ff;
+      font-size: 14px;
+      text-align: center;
+      margin-top: 10px;
+    }
+  }
+}
+
+.opacity-5 {
+  opacity: 0.5;
+}
+
+.user-perm-text {
+  margin: 0 0 0 8px;
+}
+.notclick {
+  cursor: not-allowed !important;
+  opacity: 0.5;
+}
+.notclick .avtarface {
+  cursor: not-allowed;
+}
+.allopacity {
+  opacity: 1;
+}
+.noManagerText {
+  font-size: 0;
+}
+
+.active-folder .people-item {
+  cursor: pointer;
+}
+
+.folder-name {
+  color: #32323c;
+  height: 20px;
+  line-height: 20px;
+
+  margin: 0 0 6px 12px;
+  color: rgba(50, 50, 60, 100);
+  font-size: 14px;
+  text-align: left;
+  font-family: PingFangSC-Regular;
+}
+
+.adjust-position {
+  position: relative;
+  left: 4px;
+}
+.folder-wrap {
+  position: relative;
+  padding: 6px 0 0 0;
+  margin: 12px 0 0 0;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+}
+/* 编辑按钮 */
+.edit-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+
+  width: 64px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  text-align: center;
+  font-family: PingFangSC-Regular;
+
+  color: #979797;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 1);
+  border: 0.5px solid rgba(151, 151, 151, 1);
+  cursor: pointer;
+}
+// 最后一个元素不显示32px的间距 因为这样会和原先设置的底部28px的留白重复
+.adjust-margin {
+  margin-bottom: 0;
+}
+
+.mb-6 {
+  margin: 0 0 6px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/main_web/project/components/temp-selected-user-list.vue b/src/views/main_web/project/components/temp-selected-user-list.vue
new file mode 100644
index 00000000..1a1ce923
--- /dev/null
+++ b/src/views/main_web/project/components/temp-selected-user-list.vue
@@ -0,0 +1,130 @@
+
+ <!-- 用来编辑人员时 存储编辑的状态 -->
+<template>
+  <div class="temp-selected-user-list"  :style="{height: showAdjustHeight}">
+    <div class="use-flex" ref="selectedUserList">
+      <div v-for="(user, index) in selectedUserList" :key="user.id" class="use-relative">
+        <people-item  @click.native.stop="changeManagerClick(user)"
+                      :class="{'active-manager-mark': user.folderPerm == 2}"
+                      :user="user"/>
+        <div v-if="user.folderPerm == 2" class="active-manager-mark-bottom-name">工作负责人</div>
+      </div>
+      <div v-if="selectedUserList.length == 0"  class="use-relative" @click.stop="openPersonnelListClick">
+        <people-item class="active-manager-mark"/>
+        <div class="active-manager-mark-bottom-name">工作负责人</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PeopleItem from '@/components/people-item';
+  export default {
+    data() {
+      return {
+        selectedUserListEl: null,//渲染选中人员的dom元素
+        selectedUserListElWidth: 0,
+        selectedUserListElHeight: 0,
+        renderHeight: 0,
+        isAdjustHeight: false,
+
+      }
+    },
+    components: {
+      PeopleItem
+    },
+    props: {
+      selectedUserList: {//选择的人员列表 利用folderPerm是否为2来区分是否是普通人员
+        type: Array,
+        default() {
+          return []
+        }
+      },
+    },
+    mounted() {
+      document.body.addEventListener('resize',()=> {
+        this.adjustHeightOperate();
+      })
+      this.selectedUserListEl = this.$refs.selectedUserList;
+      if(this.selectedUserListEl) {
+        this.selectedUserListElWidth = this.selectedUserListEl.clientWidth;
+        this.selectedUserListElHeight = this.selectedUserListEl.clientHeight;
+        this.adjustHeightOperate();
+      }
+    },
+    computed: {
+      selectedUserListLength() {
+        return this.selectedUserList.length;
+      },
+      showAdjustHeight() {
+        return this.isAdjustHeight ? `${this.selectedUserListElHeight - 31}px` : `auto`;
+      }
+    },
+    watch: {
+      selectedUserList: {
+        immediate: true,
+        handler(val) {
+          if(val.length > 0) {
+            let isExistsManager = val.find(user => user.folderPerm && user.folderPerm == 2);
+            if(!isExistsManager) {
+              val[0].folderPerm = 2;
+              this.$emit('setFirstPeopleToManager', val[0]);
+            }
+          } 
+        }
+      },
+      selectedUserListLength(val) {
+        setTimeout(()=> {
+          this.selectedUserListElWidth = this.selectedUserListEl.clientWidth;
+          this.selectedUserListElHeight = this.selectedUserListEl.clientHeight;
+          this.adjustHeightOperate();
+        }, 50)
+ 
+      }
+    },
+    methods: {
+      // 工作负责人为空的时候 点击 -》 展开右侧的人员列表
+      openPersonnelListClick() {
+        this.$bus.$emit('openPersonnelListClick')
+      },
+      // 如果点击到最后一行的话 要动态改变盒子的高度
+      changeManagerClick(user) {
+        this.$emit('changeManagerClick', user);
+
+        this.adjustHeightOperate();
+      },
+      adjustHeightOperate() {
+        this.isAdjustHeight = false;
+        const num = parseInt(this.selectedUserListElWidth / 64);//一行排列了几个人
+        const totalNum = this.selectedUserListLength;//总人数
+        const row = (totalNum / num);//行数
+    
+        let currentUserIndex = 0;
+        if(row <= 1) {
+          // 只有一行
+          this.isAdjustHeight = true;
+          this.renderHeight = this.selectedUserListElHeight - 31;
+          return;
+        }
+        // 获取当前选中的人员的索引
+        for(let i = 0; i < totalNum; i++) {
+          if(this.selectedUserList[i].folderPerm == 2) {
+            currentUserIndex = i;
+            break;
+          }
+        }
+        
+        // 当前选中的负责人位于最后一行以及不满一行的时候 那么需要调整高度
+  
+        if(parseInt(row)*num < currentUserIndex+1 && currentUserIndex+1 <= (parseInt(row)+1)*num) {
+          this.isAdjustHeight = true;
+          this.renderHeight = this.selectedUserListElHeight - 31;
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/main_web/project/index.vue b/src/views/main_web/project/index.vue
index 7d2f3ca0..22f0a2f8 100644
--- a/src/views/main_web/project/index.vue
+++ b/src/views/main_web/project/index.vue
@@ -1,21 +1,1829 @@
+<!--
+ * @Description: 主页面-我的项目-项目管理-组件
+ * @isEnterEdit: 区分当前是展示状态还是编辑状态
+ * @isEditProjManager: 区分是编辑项目负责人还是节点的人员
+ * @
+ * @
+ * @
+ -->
 <template>
-  <div>
-    project view
-    <member-dialog />
+  <div class="proj-detail">
+    <app-header 
+      theme="basis" 
+      :isShowTopBar="true"
+      :backBtnTitle="`${isEnterEdit ? '' : '退出项目编辑'}`" 
+      :showUserCenter="false"
+      :showBackBtn="!isEnterEdit" 
+      :onBackBtnClick="returnToProjListPage"
+    />
+    <div class="content-wrap" :class="{'set-content-wrap': isEnterEdit}">
+        <div class="graph-left-part" v-if="!isEnterEdit"></div>
+  
+        <div class="right-part" :class="{'set-right-part-width': isEnterEdit}">
+          <!-- 开始页面 -->
+          <div class="proj-desc adjust-top-radius" v-if="!isShowDistWorkPage && isShowStartProjDesc"  ref="projdesc">
+            <top-header class="set-header-position header-wrap"
+                        :class="{'header-bottom-shadow': isProjDescScroll}"
+                        :showUserCenter="false">
+              <div class="title" slot="left">项目概况</div>
+              <div class="to-distwork-btn" slot="right" @click.stop="handleShowDistWorkPage">开始</div>
+            </top-header>
+            <div class="proj-desc-wrap">
+              <div class="item">
+                <div class="item-title">项目名称</div>
+                <div class="item-value">{{nowProject.ProjName}}</div>
+              </div>
+              <div class="item">
+                <div class="item-title">项目负责</div>
+                <div class="item-value">{{nowProject.ProjCreateUserName}}</div>
+              </div>
+              <div class="item cover-container">
+                <div class="item-title">封面</div>
+                <div class="item-value cover-img-wrap use-relative" :style="showBackground(coverSrc)">
+                    <!-- <img :src="coverSrc | resolveAvator" alt="" class="cover-img"/> -->
+                    <file-uploader 
+                        :on-success="coverUploadSuccess"
+                        class="listUpdateBtn editCoverBtn"
+                    >
+                      <div>编辑</div>
+                    </file-uploader>
+                
+                </div>
+              </div>
+              <div class="item">
+                <div class="item-title proj-main-template">项目主要模板</div>
+                <div class="item-value">{{nowProject.TempName}}</div>
+              </div>
+              <div class="item">
+                <div class="item-title">模板负责</div>
+                <div class="item-value">{{nowProject.TempCreateUserName}}</div>
+              </div>
+              <div class="item">
+                <div class="item-title">创建时间</div>
+                <div class="item-value">{{nowProject.ProjCreateTime}}</div>
+              </div>
+              <div class="item" v-for="prop in listProjProp" :key="prop.TempPropId">
+                <div class="item-title">{{prop.PropertyName ? prop.PropertyName : '自定义字段'}}</div>
+                <div class="item-value">{{prop.PropValue}}</div>
+              </div>
+            </div>
+          </div>
+          <!-- 工作指派页面 -->
+          <div class="distwork-page" v-if="isShowDistWorkPage && !isShowTemplateSummary">
+            <top-header v-if="!isEnterEdit"
+                        class="set-header-position header-wrap"
+                        :class="{'header-bottom-shadow': isDistWorkPartScroll }"
+                        backBtnTitle="项目概况" 
+                        :onBackBtnClick="showProjDetailClick" 
+                        :title="nowProject.TempName" :showUserCenter="false" :showBackBtn="true"
+            />
+            <top-header v-else 
+                        class="set-header-position header-wrap"
+                        :class="{'header-bottom-shadow': isDistWorkPartScroll }"
+                        title="指派工作" :showUserCenter="false" 
+            >
+              <div slot="left" class="finish-edit-btn"  @click.stop="finishEditClick">完成编辑</div>
+              <div slot="right" class="question">
+                <i class="ques-icon" @click.stop="isShowManagerTips = !isShowManagerTips"></i>
+                <span class="ques-text">了解工作负责人</span>
+              </div>
+            </top-header>
+            <div class="manager-tips" v-show="isShowManagerTips">
+              <i class="close-icon" @click.stop="isShowManagerTips = !isShowManagerTips"></i>
+              <div class="tips-text">工作负责人将有权管理“负责工作中的成员”，点击用户头像变更工作负责人。</div>
+            </div>
+            <div class="part-wrap" ref="distworkpart">
+              <div
+                v-if="!isEnterEdit"
+                class="template-detail-btn"
+                @click.stop="isShowTemplateSummary = true, isEnterEditPropValue = false"
+              >模板概况</div>
+
+              <div v-if="isProjManager" class="manager-folder-wrap"
+                  :class="{'active-folder mb-36': isEditProjManager,'only-manager-see folder-click': !isEnterEdit}">
+                <div class="row-title">项目管理权限</div>
+                <div class="proj-manager-row  use-relative" 
+                    @click.stop="activeManagerClick">
+                  <div v-if="!isEnterEdit || !isEditProjManager" 
+                      class="use-relative ml-4 clear-fix" >
+                    <div class="use-relative fl">
+                      <people-item :user="currUser" :class="{'mr-8': !isEnterEdit}" :isShowManagerMark="isEnterEdit"/>
+                    </div>
+                    <div v-show="!isEnterEdit" class="vertical-line"/>
+                    <div class="use-flex fl">
+                      <div v-if="listManagerUser && listManagerUser.length > 0" class="use-flex fl">
+                        <people-item v-for="manager in filterManageFromListUser(currUser.id, listManagerUser)" 
+                        :key="manager.id" 
+                        :user="manager"
+                        :isEnterEdit="isEnterEdit"/>
+                      </div>
+                      <people-item v-if="!isEnterEdit && isProjCreator" @click.native.stop="addProjManager"/>
+                    </div>
+                  </div>
+  
+                  <!-- 编辑状态下 可以切换负责人 -->
+                  <div class="use-relative ml-4 use-flex" v-if="isEnterEdit && isEditProjManager">
+                      <temp-selected-user-list 
+                          :selectedUserList="selectedUser"
+                          @changeManagerClick="changeManagerClick"
+                          @setFirstPeopleToManager="setFirstPeopleToManager"/>
+                  </div>
+                </div>
+              </div>
+              <plain-folder-list
+                class="plain-folder-list"
+                :nestNodeList="nestNodeList"
+                :isEnterEdit="isEnterEdit"
+                :id="userId"
+                :lastFolderId="lastFolderId"
+                :folderList="listNewFolder"
+                :allManager="currUser"
+                :allManagerChild="listManagerUser"
+                :aloneAddUserForFolder="aloneAddUserForFolder"
+                :aloneAddUserOnlyStaff="aloneAddUserOnlyStaff"
+                :allChildrenLists="allChildrenLists"
+                :activeFolderId="activeFolderId"
+                :selectedUser="selectedUser"
+                :isProjManager="isProjManager"
+              />
+            </div>
+          </div>
+          <!-- 点击项目概况按钮看到的页面 -->
+          <div class="template-summary" v-if="isShowTemplateSummary">
+            <top-header class="set-header-position header-wrap"
+                        :class="{'header-bottom-shadow': isTemplateDescScroll }"
+                        backBtnTitle="返回" theme=""
+                        :onBackBtnClick="returnToDistWorkClick" 
+                        :title="nowProject.TempName" :showUserCenter="false" :showBackBtn="true"
+            >
+            <div slot="right" class="edit-template-btn" 
+                @click.stop="handleEditTemplate">
+              {{`${isEnterEditPropValue ? "完成编辑" : "修改"}`}}
+            </div>
+            </top-header>
+            <div class="summary-wrap" ref="templatedesc" v-if="Object.keys(nowProject).length > 0">
+              <div class="item">
+                <div class="item-title">模板负责</div>
+                <div class="item-value">{{nowProject.TempCreateUserName}}</div>
+              </div>
+              <div class="item">
+                <div class="item-title">创建时间</div>
+                <div class="item-value">{{nowProject.ProjCreateTime}}</div>
+              </div>
+              <div class="item">
+                <div class="item-title">工程名称</div>
+                <div class="item-value">{{nowProject.ProjName}}</div>
+              </div>
+              <div class="item" v-for="prop in listProjProp" :key="prop.TempPropId">
+                <div class="item-title" :class="{'adjust-title-position': isEnterEditPropValue }">{{prop.PropertyName ? prop.PropertyName : '自定义字段'}}</div>
+                <div class="item-value">
+                  <div v-if="!isEnterEditPropValue">{{prop.PropValue}}</div>
+                  <input v-else v-model="prop.PropValue" type="text" class="prop-value-input"/>
+                </div>
+              </div>
+            </div>
+          </div>
+          <nest-temp v-if="isStartEditNestTemp"
+            :isTemNestInProp="isTemNest"
+            :nestNodeFolder="nestNodeFolder"
+            @enterDistWork="enterDistWork"
+          />
+
+        </div>
+        <div class="personnel-list-part" v-if="isEnterEdit" 
+            :class="{'set-personnel-list-width': isEnterEdit}">
+        <personnel-list
+          :treeList="memberTree"
+          :selectedKeys="selectedMemberKeys"
+          @select="onSelectMembers"
+        />
+      </div>
+    </div>
+
   </div>
+
 </template>
 
 <script>
-import MemberDialog from './components/members';
-
-export default {
-  components : {
-    MemberDialog,
-  },
-  data() {
-    return {
+  import { wrapOssProtocol, getFileUrl } from "@/services/oss";
+  import TopHeader from "@/components/app-header/components/top-header";
+  import AppHeader from "@/components/app-header";
+  import PlainFolderList from './components/plain-folder-list';
+  import PeopleItem from '@/components/people-item';
+  import PersonnelList from './components/members-picker';
+  import TempSelectedUserList from './components/temp-selected-user-list';
+  import FileUploader from "@/components/file-uploader";
+  import { getUserInfo,fetchDeptList, getUserListByNode } from '@/services/user.js';
+  import { cloneDeep, uniqBy } from 'lodash';
+  import { fetchMemberTree } from './service';
+  import { firstCharToLowerCase, firstCharToUpperCase } from '@/utils/tool';
+  import { AssignedWork, EditProject } from '@/services/project.js';
+  import * as prjService from '@/services/project';
+  import * as tempalteService from '@/services/template.js'
+  import dayjs from 'dayjs';
+  import NestTemp from '@/views/components_web/project/nestTemp.vue';
+
+  export default {
+    data() {
+      return {
+        // 原先distwork的data数据
+        nestNodeFolder:{},//嵌套点的folder信息
+        nestNodeList:[],
+        nowProject:{},
+        listProjProp: [],
+        cnName: "",
+        selectedUser: [], // 当前文件夹的已选协作人
+        selectedManageUser: [], // 当前文件夹的已选负责人
+        showTitle: "1", //默认显示标题
+        disabled: false, //添加合作人可点击
+        checked: false,
+        activeName: "1",
+        showAll: false, //项目信息概况
+        isBottomNewProj: false, //底部弹框
+        nodeLeaves: false, //工作树叶子
+        isShowStaffList: false, //显示项目负责人
+        opentree: true, //工作树三角
+        ischeckAll: false, //是否是全部选中
+        isShowPrjDesc: false, //分配项目--项目概况
+        isSlectPal: true, //分配项目--项目概况
+    
+        folderPerm: "1",
+        // -----------------------------------------------
+        isShowFirstPage: true,
+        isShowSecondPage: false,
+        isShowThreePage: false,
+        InitData: {},
+        listNewFolder: [],
+        oldFolderList: [],//未进行新的工作指派的嵌套的节点列表的深拷贝
+        oldPlainFolderList: [],//平级的节点列表
+        listDept: [],
+        curProjCreatePeop: [],
+        currWorkName: "",
+        newProjFolderIndex:1,
+        tempIndex:0,
+        isShowdivid2:false,
+        currSelectData:[],
+        currUser: {},
+        isShowManager:true,// 当前是否是设置项目负责人
+        listManagerUser:[], //项目负责人
+        oldListManagerUser: [],
+        isProjManager: false,
+        isProjCreator: false,
+        currListDeptUserData:[],
+
+        userList: [], // 员工列表
+        memberTree: [], // 员工树列表
+        finishBtnClickCount: 0,
+        userId:sessionStorage.userId,
+        allChildrenLists:[],
+
+        isShowStartProjDesc: true,//控制显示开始的项目概况页面
+        isShowTemplateSummary: false,//是否显示模板概况页面
+        isShowDistWorkPage: false,//是显示开始的项目概况还是进行工作指派
+        isEnterEdit: false,//是否进入编辑人员/指派人员状态
+
+        distWorkPartEl: null,//指派工作页面的内容元素
+        isDistWorkPartScroll: false,//只读指派页面是否正在滚动 滚动的话导航栏加上底部阴影
+        dlastScrollTime: null,
+
+        isProjDescScroll: false,//项目概况页面是否滚动
+        projDescEl: null,
+        plastScrollTime: null,
+
+        isTemplateDescScroll: false,//模板概况页面是否滚动
+        templateDescEl: null,
+        tlastScrollTime: null,
+
+        isEditProjManager: false,//是在编辑具有项目管理权限的负责人 还是在编辑节点的人员
+        activeFolderId: '',//点击进入编辑的节点id
+        activeFolder: null,
+        coverSrc:'/static/img/faceImg/face01.png',
+
+        isStartEditNestTemp: false,//是否显示编辑嵌套模板的页面
+        isTemNest: false,//控制嵌套显示内容
+        activeDeptName: '',//默认打开右侧的某一个部门
+        isShowManagerTips: false,//是否显示工作负责人的提示
+        isEnterEditPropValue: false,//是否进入编辑模板自定义字段
+        isDistworkDone: false,//是否有进行过工作指派
+        isDistworkSuccess: false,//每一次工作指派是否成功
+
+        lastFolderId: '',//最后一个进行工作指派的节点的id
+        originPropListCopy: [],
+
+        // 
+        selectedMemberKeys: [],
+      }
+    },
+    components: {
+      AppHeader,
+      TopHeader,
+      PlainFolderList,
+      PeopleItem,
+      PersonnelList,
+      TempSelectedUserList,
+      FileUploader,
+        NestTemp,
+    },
+    updated() {
+      if(this.$refs.projdesc) {
+        this.projDescEl = this.$refs.projdesc;
+        this.projDescEl.removeEventListener('scroll', this.watchProjDescScroll);
+        this.projDescEl.addEventListener('scroll', this.watchProjDescScroll);
+      }
+
+      if(this.$refs.distworkpart) {
+        this.distWorkPartEl = this.$refs.distworkpart;
+        this.distWorkPartEl.removeEventListener('scroll', this.watchDistWorkPartScroll);
+        this.distWorkPartEl.addEventListener('scroll', this.watchDistWorkPartScroll);
+      }
+
+      if(this.$refs.templateDescEl) {
+        this.templateDescEl = this.$refs.templatedesc;
+        this.templateDescEl.removeEventListener('scroll', this.watchTemplateDescScroll);
+        this.templateDescEl.addEventListener('scroll', this.watchTemplateDescScroll);
+      }
+
+    },
+    mounted() {
+      
+      // 从新建项目过来的 一开始直接显示工作指派界面
+      this.isShowDistWorkPage = this.$route.query.isShowDistworkPage ? this.$route.query.isShowDistworkPage : this.isShowDistworkPage;
+      this.isShowStartProjDesc = !this.isShowDistWorkPage;//不显示开始的项目概况页面
+      this._getUserInfo(sessionStorage.userId);
+      this.projInfo(sessionStorage.projId);
+      this.cnName = JSON.parse(sessionStorage.user).cnName;
+
+      // 加载项目详情
+      this.fetchProjectDetail();
+      this.getNestNode(sessionStorage.templateID);
+      this.projDescEl = this.$refs.projdesc;
+      // this.distWorkPartEl = document.querySelector('#distwork-part');
+      if(this.projDescEl) {
+        this.projDescEl.addEventListener('scroll', this.watchProjDescScroll);
+      }
+      this.distWorkPartEl = this.$refs.distworkpart;
+      // this.projDescEl = document.querySelector('#proj-desc');
+      if(this.distWorkPartEl) {
+        this.distWorkPartEl.addEventListener('scroll', this.watchDistWorkPartScroll);
+      }
+      this.templateDescEl = this.$refs.templatedesc;
+      // this.templateDescEl = document.querySelector('#template-desc');
+      if(this.templateDescEl) {
+        this.templateDescEl.addEventListener('scroll', this.watchTemplateDescScroll);
+      }
+
+      // 监听plain-folder-list发来的事件 进入文件夹编辑
+      this.$bus.$on('enterEditFolderClick', this.enterEditFolderClick);
+
+      this.$bus.$on('activeFolderClick', this.activeFolderClick);
+
+      this.$bus.$on('changeManagerClick', this.changeManagerClick);
+
+      this.$bus.$on('setFirstPeopleToManager', this.setFirstPeopleToManager);
+
+      this.$bus.$on('enterNestTemp', this.enterNestTemp);
+    },
+    beforeDestroy() {
+      this.projDescEl && this.projDescEl.removeEventListener('scroll', this.watchProjDescScroll);
+      this.distWorkPartEl && this.distWorkPartEl.removeEventListener('scroll', this.watchDistWorkPartScroll);
+      this.templateDescEl && this.templateDescEl.removeEventListener('scroll', this.watchTemplateDescScroll);
+
+      // 取消监听
+      this.$bus.$off('enterEditFolderClick', this.enterEditFolderClick);
+
+      this.$bus.$off('activeFolderClick', this.activeFolderClick);
+
+      this.$bus.$off('changeManagerClick', this.changeManagerClick);
+
+      this.$bus.$off('setFirstPeopleToManager', this.setFirstPeopleToManager);
+      
+      this.$bus.$off('enterNestTemp', this.enterNestTemp);
+    },
+    methods: {
+      // 处理图片路径
+      showBackground(imgUrl) {
+          let resolveImg = this.$options.filters['resolveImg'];
+          const src = resolveImg(imgUrl);
+          return {
+              background: `center/cover no-repeat url(${src})`,
+          }
+      },
+      // 点击了模板概况的按钮 -》 进入工作指派页面
+      handleShowDistWorkPage() {
+        this.isShowDistWorkPage = true;
+      },
+      // 点击了编辑模板概况的按钮
+      handleEditTemplate() {
+        this.isEnterEditPropValue = !this.isEnterEditPropValue;
+        // 此时完成编辑 -> 提示编辑成功等信息
+        if(!this.isEnterEditPropValue) {
+          this.originPropListCopy = this.listProjProp;
+          this.$notify({
+            type: ["success"],
+            message: '修改模板概况成功'
+          })
+        }
+      },
+      /**
+       * 进入嵌套模板
+       */
+      enterNestTemp(nestNodeFolder) {
+        this.isShowDistWorkPage = false;
+        this.isShowStartProjDesc = false;
+        this.isShowTemplateSummary = false;
+        this.isStartEditNestTemp = true;
+        this.isTemNest = true;
+        this.nestNodeFolder=nestNodeFolder;
+      },
+      /**
+       * 退出嵌套模板，进入分配界面
+       */
+      async enterDistWork(){
+        this.isShowDistWorkPage = true;
+        this.isShowStartProjDesc = true;
+        this.isShowTemplateSummary = false;
+        this.isStartEditNestTemp = false;
+        this.isTemNest = false;
+        await this.fetchProjectDetail();
+      },
+      /**
+       * 退出编辑回到项目列表页
+       */
+       returnToProjListPage() {
+        if(this.isDistworkDone && this.isDistworkSuccess) {
+           this.$notify({
+              message: '工作指派完成。',
+              type: ["success"],
+            });
+         }
+        this.$router.push({
+          path: '/index',
+        }).catch(err => console.log(err))
+       },
+      /**
+       * 查找嵌套节点信息 因为嵌套的模板本身也可能是一个嵌套模板 所以要进行递归查找
+       */
+      async getNestNode(id){
+        const res1 = await tempalteService.queryNestTemplateByTemplateId(id);
+        const temp = res1.Data || [];
+        const resList = [...res1.Data]
+        circulateGetNestNode(temp, resList);
+        this.nestNodeList = resList;
+        
+        function circulateGetNestNode(targetList, resList) {
+          targetList.forEach(async item => {
+            const res2 = await tempalteService.queryNestTemplateByTemplateId(item.TemplateId);
+            const resData = res2.Data || [];
+            if(resData.length > 0) {
+              resList.push(...resData);
+            }
+          })
+        }
+      },
+      /**
+       * 加载项目信息
+       */
+      async projInfo(id){
+        const projectInfoRes = await prjService.QueryProjectInfoByProjId(id);
+        if(projectInfoRes.Code == -1) {
+          //查询数据失败 -》 可能模板信息已经被删除了 那么也就无法进行工作指派了
+          this.$notify({
+            type: ["error"],
+            message: '项目概况信息查询失败'
+          })
+          return;
+        }
+        this.nowProject = projectInfoRes.Data || {};
+        this.nowProject.ProjCreateTime = dayjs(this.nowProject.ProjCreateTime).format('YYYY/MM/DD');
+        this.nowProject = {...this.nowProject};
+        this.listProjProp = projectInfoRes.Data.CustomProps || [];
+        this.listProjProp = [...this.listProjProp];
+
+        this.originPropListCopy = cloneDeep(this.listProjProp);
+        this.coverSrc = projectInfoRes.Data.ShowImgUrl;
+      },
+      async coverUploadSuccess(file) {
+        const filePath = wrapOssProtocol(file.ossUrl);
+        this.coverSrc = filePath;
+        var updateData = {
+          ProjId:sessionStorage.projId,
+          ImgUrl:this.coverSrc,
+        }
+        const res = await EditProject(updateData);
+        if(res.Code == -1){
+          this.$notify({
+            message:'封面修改失败。',
+            type:'success'
+          })
+        }
+        
+
+        //this.newProjData.projectData.showImgUrl=filePath;
+      },
+      setSystemCoverRandom() {
+
+      },
+      returnToDistWorkClick() {
+        // 未点击完成编辑按钮 -》 概况信息未保存
+        if(this.isEnterEditPropValue) {
+            this.$confirm("是否保存当前项目的模板概况信息", "", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+            }).then(async () => {
+               this.isShowTemplateSummary = false;
+               this.originPropListCopy = this.listProjProp;
+
+            }).catch(() => {
+               this.listProjProp =  this.originPropListCopy;
+            })
+        } else {
+          this.isShowTemplateSummary = false;
+        }
+      },
+      // 点击返回按钮 显示项目概况页面
+      showProjDetailClick() {
+        this.isShowDistWorkPage = false;
+        this.isShowStartProjDesc = true;
+      },
+      // 只有一个人的时候设置第一个人为负责人
+      setFirstPeopleToManager(user) {
+        if(this.selectedManageUser.length == 0 && this.selectedUser.length !== 0) {
+          this.selectedManageUser.push(user);
+        } 
+      },
+      // listUser列表过滤掉负责人
+      filterManageFromListUser(managerId, listUser) {
+        return listUser.filter(user => user.id !== managerId);
+      },
+      // 项目概况页面滚动
+      watchProjDescScroll() {
+        this.isProjDescScroll = this.projDescEl.scrollTop > 0;
+      },
+      // 模板概况页面滚动
+      watchTemplateDescScroll() {
+        this.isTemplateDescScroll = this.templateDescEl.scrollTop > 0;
+      },
+      // 指派工作页面的滚动
+      watchDistWorkPartScroll() {
+        this.isDistWorkPartScroll = this.distWorkPartEl.scrollTop > 0;
+      },
+      // 切换到项目负责人进行编辑
+      activeManagerClick() {
+        if(this.isProjCreator) {
+          this.isEditProjManager = true;
+          this.enterEditOperate();
+          this.activeFolderId = '';
+          this.activeFolder = null;
+          this.addProjManager();
+        }
+      },
+      // 切换当前激活的文件夹
+      activeFolderClick(folder) {
+        this.isEditProjManager = false;
+        this.activeFolderId = folder.id;
+        this.activeFolder = folder;
+        if(folder.listUser && folder.listUser.length == 0) {
+          this.aloneAddUserForFolder(folder);
+        } else {
+          this.aloneAddUserOnlyStaff(folder);
+        }
+      },
+      // 点击添加folder进入编辑状态 这里传递folderId是为了找到是用哪一个文件夹
+      enterEditFolderClick(folder) {
+        this.activeFolderId = folder.id;
+        this.activeFolder = folder;
+        this.enterEditOperate();
+      },
+      // 点击进入编辑 做的一些列操作
+      enterEditOperate() {
+        this.isEnterEdit = true;
+      },
+      // 完成编辑/完成人员指派的点击
+      finishEditClick() {
+        this.isDistworkDone = true;
+        this.isEnterEdit = false;
+        this.selectedManageUser = [];
+        this.selectedUser = [];
+        if(this.isEditProjManager) {
+          this.isEditProjManager = false;
+        }
+        this.createFolders();
+        this.activeDeptName = '';
+      },
+      // 点击了项目管理权限那行的添加按钮
+      addProjMangerBtnClick() {
+        this.isEditProjManager = true;
+        this.enterEditOperate();
+      },
+      //获取用户个人信息
+      async _getUserInfo(userId) {
+        try {
+          let res = await getUserInfo(userId);
+          let createUser = await getUserInfo(sessionStorage.createUserID);
+          // console.log('我是用户的信息',res);
+          this.curProjCreatePeop =
+            createUser.cnName + " 指派了新工作，请完成工作指派";
+          if (sessionStorage.allocated == 1)
+          {
+            this.curProjCreatePeop = "项目管理";
+          }
+        } catch(err) {
+          console.log(err);
+        }
+      },
+       /*
+        * 是否有权限可以删除自己
+        */
+      isAllowedDelete(item) {
+        return !(!this.listManagerUser.includes(item) && this.currUser.id !== item.id && this.InitData.manageUser && this.InitData.manageUser.length > 0 && this.InitData.manageUser[0].id == sessionStorage.userId && !this.allChildrenLists.includes(this.InitData) && item.id == this.InitData.manageUser[0].id)
+      },
+      /**
+       * 点击切换项目负责人 同一个用户点击两次可以切换状态
+       */
+      changeManagerClick(clickUser) {
+        if(this.isEditProjManager) {
+          // 如果是选择项目负责人 则不需要进行状态切换
+          this.$notify({
+            message: "项目负责人无法更换。",
+            type: "warning",
+            offset: 100,
+            duration: 5000
+          });
+          return;
+        }
+
+        const tempManagerMap = this.listManagerUser.map(m => m.id) || [];
+        //不是创建者 不是项目不负责人 且也不是顶级节点的负责人
+        if(!tempManagerMap.includes(sessionStorage.userId) && this.currUser.id !== sessionStorage.userId && this.InitData.manageUser && this.InitData.manageUser.length > 0 && this.InitData.manageUser[0].id == sessionStorage.userId && !this.allChildrenLists.includes(this.InitData) )
+        {
+          this.$notify({
+            message: "没有权限更换工作负责人。",
+            type: "warning",
+            offset: 100,
+            duration: 5000
+          });
+          return;
+        }
+        this.selectedUser.forEach(user => {
+          user.folderPerm = (user.id === clickUser.id) ? 2 : 1;
+          if(user.folderPerm === 2) {
+            this.InitData && this.InitData.manageUser && this.InitData.manageUser.splice(0,1,user);
+          } 
+        })
+      },
+
+      /*
+      *返回文件夹页面
+      */
+      backFirstPage: function () {
+        this.listDept=JSON.parse(JSON.stringify(this.currListDeptUserData));
+        debugger;
+        if(!this.isShowManager)
+        {
+          this.listManagerUser=[];
+          this.selectedUser.forEach(user => {
+              // if( user.userID != this.currUser.userID)
+              if( user.id != this.currUser.id)
+              {
+                this.listManagerUser.push(user);
+              }
+          });
+        }
+        this.isAllhide();
+        this.isShowManager=true;
+        this.isShowFirstPage = true;
+      },
+      toFirstPage(){
+        this.$confirm('退出“职员选择”您编辑的内容被清空，确定退出？', "", {
+          confirmButtonText: "退出",
+          cancelButtonText: "取消",
+          showClose:false,
+          type: "warning"
+        }).then(() => {
+          // 注意这里将folderID修改为 id字段
+          for (var i = 0; i < this.listNewFolder.length; i++) {
+            if( this.listNewFolder[i].id == this.currSelectData.id){
+              this.listNewFolder[i] = this.currSelectData;
+            }
+            for (var j = 0; j < this.listNewFolder[i].listChildren.length; j++) {
+              if( this.listNewFolder[i].listChildren[j].id == this.currSelectData.id){
+              this.listNewFolder[i].listChildren[j] = this.currSelectData;
+            }
+            }
+          }
+          this.listDept=JSON.parse(JSON.stringify(this.currListDeptUserData));
+          debugger;
+          this.isAllhide();
+          this.isShowFirstPage = true;
+          this.isShowManager=true;
+        });
+      },
+
+      /**
+       * 设置负责人
+       */
+      // setManagerUser(nowUser) {
+      //   if (this.InitData.manageUser.length != 0) {
+      //     this.InitData.manageUser[0].selected = false;
+      //     let topIndex = 0;
+      //     this.listDept.forEach((dept, i) => {
+      //       dept.listUser.forEach(user => {
+      //         if(user.id === this.InitData.manageUser[0].id) {
+      //           user.selected = false;
+      //           user.folderPerm = 1;
+      //           topIndex = i;
+      //         }
+      //       })
+      //     })
+      //     this.getIsCheckSecondLevel(topIndex);//将原来选中的工作负责人进行二级状态修正
+      //     // this.InitData.manageUser[0].roleName = "普通职员";
+      //     for (var i = 0; i < this.selectedUser.length; i++) {
+      //       if (this.selectedUser[i].id == this.InitData.manageUser[0].id) {
+      //         this.InitData.manageUser[0].folderPerm = 0;
+      //         this.selectedUser.splice(i, 1);
+      //       }
+      //     }
+      //   }
+
+      //   var listManageUser = [];
+      //   nowUser.folderPerm = 2;
+      //   listManageUser.push(nowUser);
+      //   this.selectedUser.forEach(user => {//将userID 修改为id
+      //     if (user.folderPerm == 2 && user.id != nowUser.id) {
+      //       user.folderPerm = 1;
+      //     }
+      //     if (user.id == nowUser.id) {
+      //       user.folderPerm = 2;
+      //     }
+      //   });
+      //   this.InitData.manageUser = listManageUser;
+      // },
+
+      /**
+       * 分配人员
+       */
+      aloneAddUserForFolder: function (data) {
+        this.currSelectData=data;
+        this.currWorkName = data.folderName;
+        if (data.listUser == null) {
+          data.listUser = [];
+        }
+        this.InitData = data;
+        this.setFolderPerm(data);
+        this.selectedUser = data.listUser;
+        this.selectedManageUser = data.manageUser;
+        this.isShowSecondPage = true;
+        this.isShowFirstPage = false;
+      },
+
+       /**
+     * 进入时,重置权限
+     */
+    setFolderPerm({ listUser }) {
+      // debugger;
+      this.selectedMemberKeys = listUser.map(user => user.id);
+      // this.listDept=JSON.parse(JSON.stringify(this.currListDeptUserData));
+      // debugger;
+      // for (var j = 0; j < this.listDept.length; j++) {
+      //   for (var k = 0; k < this.listDept[j].listUser.length; k++) {
+      //     this.listDept[j].listUser[k].selected = false;
+      //     for (var i = 0; i < data.listUser.length; i++) {
+      //       if (
+      //         this.listDept[j].listUser[k].id == data.listUser[i].id
+      //       ) {
+      //         this.listDept[j].listUser[k].folderPerm =
+      //           data.listUser[i].folderPerm;
+      //         this.listDept[j].listUser[k].selected = true;
+      //       }
+
+      //       if(this.isEditProjManager)//选择添加项目负责人职员
+      //       {
+      //         // 让项目的创建者显示出来
+      //         if(this.currUser.id == this.listDept[j].listUser[k].id)
+      //         {
+      //           this.listDept[j].listUser[k].selected = true;
+      //         }
+      //       }
+      //     }
+      //     this.getIsCheckSecondLevel(j);
+      //   }
+      // }
+      //  this.getIsCheckAll();
+    },
+
+     /*
+      *添加职员按钮直接进入 指派职员页面
+      */
+    aloneAddUserOnlyStaff: function (data) {
+        this.isShowManager=true;
+        this.currWorkName = data.folderName;
+        if (data.listUser == null) {
+          data.listUser = [];
+        }
+        debugger;
+        this.InitData = data;
+        this.setFolderPerm(data);
+        this.selectedUser = data.listUser;
+        this.selectedManageUser = data.manageUser;
+        this.isShowThreePage = true;
+        this.isShowFirstPage = false;
+    },
+
+    /**
+     * 根据部门Id查找部门信息
+     */
+    // plainTreeNodes(nodesList, userList, outputList = []) {
+    //   (nodesList || []).forEach(node => {
+    //     // node.id
+    //     const data = node.data;
+    //     data.listUser = userList.filter(user => user.deptId === node.id);
+    //     outputList.push(data);
+    //     if(node.children && node.children.length) {
+    //       this.plainTreeNodes(node.children, userList, outputList);
+    //     }
+    //   });
+    //   return outputList;
+    // },
+
+      /*
+    * 设置项目负责人
+    */
+    addProjManager() {
+      this.activeFolderId = "";
+      this.isEditProjManager = true;
+      this.enterEditOperate();
+      this.isShowManager=false;
+
+      var data={listUser:[]};
+      data.listUser=this.listManagerUser;
+
+      let find = data.listUser.find(user => user.id === this.currUser.id);
+      if(!find || data.listUser.length == 0) {
+        this.currUser.folderPerm = 2;//给项目的创建者设置权限 让它带上皇冠
+        data.listUser.unshift(this.currUser);//在头部添加
+      }
+      this.setFolderPerm(data);
+      this.selectedUser = data.listUser;
+    
+      // this.selectedManageUser = [];
+      this.selectedManageUser = this.listManagerUser;
+      // this.isShowThreePage = true;
+      // this.isShowFirstPage = false;
+    },
+
+    /*
+    *二级条目全选
+    * index: 是所在的部门的index
+    * prevChecked 未更新前的选中状态
+    */
+    // handleCheckItemAll(dept, targetChecked) {
+    //   debugger;
+    //   dept.listUser.forEach(user => {
+    //     this.handleCheckedOne(dept, user, !!targetChecked);
+    //   });
+    // },
+    /*
+    *子项单选
+    * topIndex:当前所选条目的上级 部门的index
+    *index:当前所选条目
+    * prevChecked: 为更新前的选中状态 targetChecked想要达到的状态
+    */
+    handleCheckedOne(topIndex, user, targetChecked) {
+      if(!this.isAllowedDelete(user) && targetChecked == false)
+        {
+          this.$notify({
+            message: "不能移除自己。",
+            type: "warning",
+            offset: 100,
+            duration: 5000
+          });
+          user.selected=true;
+          return;
+        }
+      if(this.isEditProjManager)
+        {
+          if(user.id == this.currUser.id && targetChecked == false)//取消选中项目创建者
+          {
+              this.$notify({
+              message: "不可以移除项目创建者。",
+              type: "warning",
+              offset: 100,
+              duration: 5000
+            });
+            return;
+          }
+        }
+        // 删除的是工作负责人
+        if(this.activeFolder) {
+          const isExists = this.activeFolder.manageUser.find(t => t.id === user.id);
+          if(isExists && targetChecked == false) {
+            this.removeManageUser(user);
+            this.activeFolder.manageUser.splice(0);
+            this.getIsCheckSecondLevel(topIndex);
+            this.getIsCheckAll();
+            return;
+          }
+        } else if(this.isEditProjManager && targetChecked == false) {
+          // 删除的是具有项目管理权限的 且能运行到这里是可以删除的
+          const index = this.listManagerUser.findIndex(people => people.id === user.id);
+          if(index > -1) {
+            this.listManagerUser.splice(index, 1);
+          }
+
+        }
+      //   //点击人员列表删除
+      // if(user.folderPerm == 2 && targetChecked == false)
+      //   { 
+      //     this.removeManageUser(user);
+      //     this.getIsCheckSecondLevel(topIndex);
+      //     this.getIsCheckAll();
+      //     return;
+      //   }
+      // 全选的时候 跳过节点负责人的不执行checkDeptUserName 防止对folderPerm重新赋值
+      if(user.folderPerm == 2 && user.selected == true && targetChecked == true) {
+        return;
+      }
+      this.checkDeptUserName(user, targetChecked);
+      user.folderPerm = 1;
+      if(this.selectedUser.length == 1 && targetChecked == true) {
+        // 选中为负责人
+        user.folderPerm = 2;
+      } 
+      this.getIsCheckSecondLevel(topIndex);
+      this.getIsCheckAll();
+    },
+    onSelectMembers(operationMemberNodes, targetChecked) {
+      const selectedMemberKeys = [...this.selectedMemberKeys];
+      operationMemberNodes.forEach(memberNode => {
+        const userData = memberNode.data;
+        if(targetChecked === false && !this.isAllowedDelete(userData)) {
+          this.$notify({
+            message: "不能移除自己。",
+            type: "warning",
+            offset: 100,
+            duration: 5000
+          });
+          return;
+        }
+        if(this.isEditProjManager){
+          if(userData.id == this.currUser.id && targetChecked == false)//取消选中项目创建者
+          {
+              this.$notify({
+              message: "不可以移除项目创建者。",
+              type: "warning",
+              offset: 100,
+              duration: 5000
+            });
+            return;
+          }
+        }
+
+        // 删除的是工作负责人
+        if(this.activeFolder) {
+          const isExists = this.activeFolder.manageUser.find(t => t.id === userData.id);
+          if(isExists && targetChecked == false) {
+            this.removeManageUser(userData);
+            this.activeFolder.manageUser.splice(0);
+            // this.getIsCheckSecondLevel(topIndex);
+            // this.getIsCheckAll();
+            return;
+          }
+        } else if(this.isEditProjManager && targetChecked == false) {
+          // 删除的是具有项目管理权限的 且能运行到这里是可以删除的
+          const index = this.listManagerUser.findIndex(people => people.id === userData.id);
+          if(index > -1) {
+            this.listManagerUser.splice(index, 1);
+          }
+
+        }
+      });
+      // todo
+    },
+    /**
+     * 当前二级选中状态修正
+     */
+    // getIsCheckSecondLevel(topIndex) {
+    //   var checkCount = 0;
+    //   let len = this.listDept[topIndex] && this.listDept[topIndex].listUser ? this.listDept[topIndex].listUser.length : 0;
+    //   if(len > 0) {
+    //     for (var i = 0; i < len; i++) {
+    //       if (this.listDept[topIndex].listUser[i].selected == true) {
+    //         checkCount++;
+    //       } else {
+    //         checkCount--;
+    //       }
+    //   }
+      
+    //     if (checkCount == this.listDept[topIndex].listUser.length) {
+    //       //三级级全勾选
+    //       this.listDept[topIndex].selected = true;
+    //     } else {
+    //       //三级级全不勾选
+    //       this.listDept[topIndex].selected = false;
+    //     }
+    //   }
+
+    // },
+
+    /*
+    *当前首级全选状态修正
+    */
+    getIsCheckAll() {
+      debugger;
+      // var checkCount = 0;
+      // var haveDataCount = 0;
+      // for (var j = 0; j < this.listDept.length; j++) {
+      //   //全选checkbox状态
+
+      //   if (this.listDept[j].listUser.length > 0) {
+      //     haveDataCount++;
+      //     if (this.listDept[j].selected == true) {
+      //       checkCount++;
+      //     }
+      //   }
+
+      // }
+      // if ((checkCount == haveDataCount) && checkCount !== 0 && haveDataCount !== 0) {
+      //   this.ischeckAll = true;
+      // } else {
+      //   this.ischeckAll = false;
+      // }
+    },
+
+    /**
+     * 移除选中人员
+     */
+    // removeSelectUser(item) {
+    //   // debugger;
+    //   if(item.id == this.currUser.id && !this.isShowManager)
+    //   {
+    //     this.$notify({
+    //       message: "没有权限删除项目创建者。",
+    //       type: "warning",
+    //       offset: 100,
+    //       duration: 5000
+    //     });
+    //     return;
+    //   }
+    //   if(item.id == sessionStorage.userId && !this.isShowManager)
+    //   {
+    //     this.$notify({
+    //       message: "不能移除自己。",
+    //       type: "warning",
+    //       offset: 100,
+    //       duration: 5000
+    //     });
+    //     return;
+    //   }
+    //   // 如果当前登录者是项目负责人分配的某个节点的负责人(不是项目负责人) 那么不能删除自己
+    //   // 自己指派自己是可以移除的 
+    //   if(!this.isAllowedDelete(item))
+    //   {
+    //     this.$notify({
+    //       type: "warning",
+    //       message: "没有权限移除自己。",
+    //       offset: 100,
+    //       duration: 5000
+    //     });
+    //     return;
+    //   }
+    //   if(item.folderPerm == 2) {
+    //     this.removeManageUser(item);
+    //   } else {
+    //     this.checkDeptUserName(false, item);
+    //     this.cancelCheck(item.id);
+    //   }
+
+    // },
+
+
+    /**
+     * 移除负责人
+     */
+    removeManageUser(user) {
+      debugger;
+      // user.folderPerm = 1;
+      // // user.roleName = "查看编辑";
+      // this.selectedManageUser.splice(0,1);
+      // for (var k = 0; k < this.selectedUser.length; k++) {
+      //   if (this.selectedUser[k].id == user.id) {
+      //     this.selectedUser[k].folderPerm = 0;
+      //     this.selectedUser.splice(k, 1);
+      //   }
+      // }
+      // this.cancelCheck(user.id);
+    },
+
+    /*
+    *取消选中
+    */
+    cancelCheck(userID) {
+      debugger;
+      // for (var i = 0; i < this.listDept.length; i++) {
+      //   for (var j = 0; j < this.listDept[i].listUser.length; j++) {
+      //     if (this.listDept[i].listUser[j].id === userID) {
+      //       this.listDept[i].listUser[j].selected = false;
+      //       this.listDept[i].listUser[j].folderPerm = 0;
+      //       this.getIsCheckSecondLevel(i);
+      //     }
+      //   }
+      // }
+      // this.getIsCheckAll();
+    },
+
+    /**
+     * 对已选协作人添加和删除
+     */
+    checkDeptUserName(item, targetChecked) {
+      // debugger;
+      item.selected = targetChecked;
+      if (item.selected) {
+        item.folderPerm = 1; // 默认角色为：查看和编辑
+        var valueUser = JSON.parse(JSON.stringify(item));
+        if(!this.selectedUser.find(user => user.id == item.id)) {
+          this.selectedUser.push(valueUser);
+        }
+      } else {
+        for (var i = 0; i < this.selectedUser.length; i++) {
+          if (this.selectedUser[i].id == item.id) {
+            this.selectedUser.splice(i, 1);
+          }
+        }
+        if(this.selectedManageUser && this.selectedManageUser.includes(item)) {
+          this.selectedManageUser.splice(0, 1);
+        }
+      }
+    },
+
+    /**
+    * folderPerm赋值
+    */
+    getfolderPerm(folderList){
+      folderList.forEach(folder=>{
+        folder.listUser.forEach(item=>{
+           item.folderPerm=1;
+        })
+        if(folder.manageUser.length>0){
+          folder.manageUser[0].folderPerm=2;
+          folder.listUser.unshift(folder.manageUser[0]);
+        } 
+        if(folder.listChildren && folder.listChildren.length>0){
+          this.getfolderPerm(folder.listChildren);
+        }
+      })     
+    },
+    getPlainOldFolderList() {
+      const plainFolderList = [];
+      function circulate(folderList) {
+        if(folderList.length > 0) {
+          folderList.forEach(folder => {
+            plainFolderList.push(folder);
+            if(folder.listChildren && folder.listChildren.length > 0) {
+              circulate(folder.listChildren);
+            }
+          })
+        } 
+      }
+      circulate(this.oldFolderList);
+      this.oldPlainFolderList = plainFolderList;
+      this.lastFolderId = this.oldPlainFolderList[this.oldPlainFolderList.length -1].id;
+    },
+    // todo 待移除
+    async fetchProjectDetailOld() {
+      const currentCompanyId = this.$store.state.currentCompanyId;
+      const [userList, projectDataRes, deptList, memberData] = await Promise.all([
+        this.getUserList(),
+        this.$fetchApi('folder/queryNodeFolderListByProjectId', { projectId: sessionStorage.projId }),
+        fetchDeptList(currentCompanyId),
+        fetchMemberTree(currentCompanyId),
+      ]);
+
+      // console.log(memberData);
+      // debugger;
+      // const deptHeadList = deptList[0].children || [];
+      let oList = this.plainTreeNodes(deptList, userList);
+
+      // 如果人员没有设置部门的话
+      const aloneUserList = this.userList.filter(user => {
+        for(let i = 0; i < deptList.length; i++) {
+          if(deptList[i].id == user.deptId) {
+            return false;
+          }
+        }
+        return true;
+      });
+     
+      if(aloneUserList.length > 0) {
+        const emptyDept = {};
+        emptyDept.id = "0";
+        emptyDept.deptName = sessionStorage.CompanyName || "";
+        emptyDept.listUser = [];
+        emptyDept.listUser.push(...aloneUserList);
+        oList.push(emptyDept);
+      }
+   
+      oList.forEach(item=>{
+        // console.log(1)
+        // console.log(item.listUser)
+        item.listUser=item.listUser.sort((a, b) => a.cnName.localeCompare(b.cnName))
+      })
+
+      this.listDept = oList;
+      this.currListDeptUserData = oList;
+
+      const { folder, manager } = (projectDataRes.Data || {});
+      // console.log(folder, manager, userList);
+      const userHash = userList.reduce((h, user) => {
+        h[user.id] = user;
+        return h;
+      }, {});
+      this.listManagerUser = manager.map(u => userHash[u.UserId]);
+      // debugger;
+      if(this.listManagerUser.length) {
+        this.currUser = this.listManagerUser[0] || {};
+        this.isProjCreator = this.currUser.id === this.userId;
+        this.listManagerUser = this.listManagerUser.slice(1);
+        this.isProjManager = !!this.listManagerUser.find(m => m.id == this.userId) || this.currUser.id == this.userId;
+      }
+      this.oldListManagerUser = cloneDeep(this.listManagerUser);
+
+      let uniqFolder = uniqBy(folder, 'Id');
+      // console.log(folder, uniqFolder);
+      const folderList = mergeFolderList(uniqFolder, userHash);
+      this.getfolderPerm(folderList);
+      this.listNewFolder = folderList;
+      this.oldFolderList = cloneDeep(this.listNewFolder);
+      this.getPlainOldFolderList();
+      // console.log('得到的listNewFolder', this.listNewFolder);
+      
+      this.getAllChildrenLists(this.listNewFolder,this.userId,this.allChildrenLists);
+    },
+    // async getUserList(){
+    //   const { list: userList } = await getUserListByNode({ id: this.$store.state.currentCompanyId, nodeType: 'company' }, 1, 10000);
+    //   this.userList = userList;
+    //   return userList;
+    // },
+    async fetchProjectDetail() {
+      const currentCompanyId = this.$store.state.currentCompanyId;
+      const [projectDataRes, { treeList: memberTree, memberMap }] = await Promise.all([
+        this.$fetchApi('folder/queryNodeFolderListByProjectId', { projectId: sessionStorage.projId }),
+        fetchMemberTree(currentCompanyId),
+      ]);
+
+      const { folder, manager } = (projectDataRes.Data || {});
+      this.memberTree = memberTree;
+
+      this.listManagerUser = manager.map(u => memberMap[u.UserId]?.data);
+      if(this.listManagerUser.length) {
+        this.currUser = this.listManagerUser[0] || {};
+        this.isProjCreator = this.currUser.id === this.userId;
+        this.listManagerUser = this.listManagerUser.slice(1);
+        this.isProjManager = !!this.listManagerUser.find(m => m.id == this.userId) || this.currUser.id == this.userId;
+      }
+      this.oldListManagerUser = cloneDeep(this.listManagerUser);
+
+      let uniqFolder = uniqBy(folder, 'Id');
+
+      const folderList = mergeFolderList(uniqFolder, memberMap);
+      this.getfolderPerm(folderList);
+      this.listNewFolder = folderList;
+      this.oldFolderList = cloneDeep(this.listNewFolder);
+      this.getPlainOldFolderList();
+      // console.log('得到的listNewFolder', this.listNewFolder);
+      
+      this.getAllChildrenLists(this.listNewFolder,this.userId,this.allChildrenLists);
+
+    },
+     /**
+     * 一层的全部子节点
+     */
+     getChildren(folder,childrenLists){
+      folder.forEach(item=>{
+        childrenLists.push(item);
+        if(item.listChildren.length>0){
+          this.getChildren(item.listChildren,childrenLists);
+        }
+      })
+    },
+       /**
+     * 全部的子节点
+     */
+     getAllChildrenLists(folderLists,id,allChildrenLists){
+      folderLists.forEach(folder=>{
+          if(folder.manageUser.length>0){
+          if(folder.manageUser[0].id==id){
+            if(folder.listChildren && folder.listChildren.length>0){
+            this.getChildren(folder.listChildren,allChildrenLists);
+            }
+          }
+          }
+      })
+
+    },
+    /**
+     * 分配工作完成
+     */
+    async createFolders() {
+      let params = {
+          Id: sessionStorage.createUserID,
+          ProjId: sessionStorage.projId,
+          ProjectManagerId: '',
+          OldProjectManagerId: this.oldListManagerUser.map(u => u.id).join(','),
+          Work: [],
+      };
+      params.ProjectManagerId = this.listManagerUser.length > 0 ? this.listManagerUser.map(projManager => {
+        if(projManager.id !== sessionStorage.createUserID) {
+          return projManager.id;
+        }
+      }).join(',') : '';
       
+      const { oldPlainFolderList } = this;
+      circleGetWorkData(this.listNewFolder);
+
+      function circleGetWorkData(folderList) {
+        if(folderList.length > 0) {
+          folderList.forEach((folder) => {
+             let workNode = {
+              FolderId:'',
+              ManagerUserId: '',
+              GeneralId:'',
+              OldManager:'',
+              OldGeneralId:''
+          };
+            workNode.FolderId = folder.id;
+            let tempManagerIdList = [];
+            workNode.ManagerUserId = folder.manageUser.length > 0 ? folder.manageUser.map(manager => {
+              tempManagerIdList.push(manager.id);
+               return manager.id;
+            }).join(',') : '';
+            let tempListUser = folder.listUser.filter(item => !tempManagerIdList.includes(item.id));
+            workNode.GeneralId = folder.listUser.length > 0 ? tempListUser.map(user => { return user.id }).join(',') : '';
+
+            const originFolder = oldPlainFolderList.find(oldFolder => oldFolder.id == folder.id);
+            // console.log(originFolder);
+            const oldManagerId = originFolder.manageUser.length > 0 ? originFolder.manageUser[0].id : '';
+            workNode.OldManager = oldManagerId;
+            workNode.OldGeneralId = originFolder.listUser.length > 0 ? originFolder.listUser.filter(oldUser => oldUser.id !== oldManagerId).map(user => { return user.id }).join(',') : '';
+            params.Work.push(workNode);
+
+            circleGetWorkData(folder.listChildren);
+          })
+        } 
+      }
+      // console.log('要提交的参数是:',params);
+      const res = await AssignedWork(params);
+      // console.log(res);
+      const thisApp = this;
+      if(res.Code === 0) {
+        this.isDistworkSuccess = true;
+        // 不每次都输出指派完成的消息 在点击完成项目编辑的时候输出提示信息
+        //  thisApp.$notify({
+        //       message: '工作指派完成。',
+        //       type: ["success"],
+        //     });
+        this.oldFolderList = cloneDeep(this.listNewFolder);
+        this.getPlainOldFolderList();
+      } else {
+        this.isDistworkSuccess = false;
+         thisApp.$notify({
+              message: '服务器异常,工作指派失败。',
+              type: ["error"],
+              duration: 5000
+            });
+      }
+    },
+    },
+
+
+    computed: {
+      /**
+       * 过滤后的部门列表：去除没有用户数据的部门
+       */
+      listDeptComputed() {
+        return this.listDept.filter(function (dept) {
+          return dept.listUser.length > 0;
+        });
+      },
+      /**
+       * 当未选择人员时,部门不显示
+       */
+      listDeptUserNoZero(user) {
+        return function (user) {
+          let temp = [];
+          for (let i = 0; i < user.length; i++) {
+            if (user[i].folderPerm != 2) {
+              temp.push(user[i].deptId);
+            }
+          }
+          var x = new Set(temp);
+          return [...x];
+        };
+      },
+  
+    },
+
+  }
+
+  function mergeFolderList(plainFolderList, userHash) {
+  const [rootFolder, commonFolder, ...restFolderList] = plainFolderList;
+  const rootFolderId = rootFolder.Id;
+  const headList = [];
+  const hash = {};
+  const temp = [];
+  restFolderList.forEach(upperFolder =>  {
+    const folder = firstCharToLowerCase(upperFolder);
+    hash[folder.id] = folder;
+    folder.listChildren = [];
+    folder.listUser = folder.oldGeneralId.split(',').filter(a => a).map(id => ({...userHash[id].data}));
+    folder.manageUser = (folder.oldManager === '0' ? '' : folder.oldManager).split(',').filter(a => a).map(id => ({...userHash[id].data}));
+    const parentFolderId = folder.superId;
+    // headList.push(folder);
+    if(parentFolderId === rootFolderId) {
+      headList.push(folder);
+      return;
     }
+    const parentFolder = hash[parentFolderId];
+    if(!parentFolder) return;
+    parentFolder.listChildren.push(folder);
+  });
+  return headList;
+}
+</script>
+
+
+<style scoped lang="scss">
+.proj_manage{
+    width: 100%;
+    height: 100%;
+    padding: 0 64px;
+    box-sizing: border-box;
+    .proj_manage_content{
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }   
+}
+.projModule{
+    width: 50%;
+    min-width: 660px;
+    height: 100%;
+    right: 0px;
+    position: absolute;
+    box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
+                0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+
+}
+
+  /* 完成编辑按钮 */
+  .finish-edit-btn {
+    position: relative;
+    left: -24px;
+    cursor: pointer;
+
+    background-color: #7850ff;
+    color: #fff;
+    border-radius: 8px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    font-size: 14px;
+    padding: 0 10px;
+    margin: 9px 0;
   }
+  /* 了解工作负责人按钮 */
+  .question {
+    display: flex;
+    align-items:center;
+    position: relative;
+    left: 24px;
+
+    width: 100%;
+    color: rgba(75, 77, 79, 100);
+    font-size: 13px;
+    text-align: left;
+    font-family: PingFangSC-Regular;
+ 
+    .ques-icon {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: url('/static/img/了解工作负责人.svg');
+      cursor: pointer;
+    }
+    .ques-text {
+      margin: 0 0 0 8px;
+    }
+  }
+
+  .manager-tips {
+    position:absolute;
+    top: 8px;
+    left: 24px;
+    right:24px;
+    z-index: 99;
+
+    text-align: center;
+    padding: 0 24px;
+    height: 84px;
+
+    border-radius: 8px;
+    border: 1px solid rgba(68, 154, 255, 1);
+    background-color:#fcfcfc;
+  
+    .close-icon {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      width: 20px;
+      height: 20px;
+      background: url('/static/img/了解负责人关闭.svg');
+      cursor: pointer;
+    }
+    .tips-text {
+      margin: 24px 0 0 0;
+      color: #32323C;
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+    }
+  }
+ 
+
+  .content-wrap {
+    display:flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0 64px;
+    background-color: #ebebeb;
+
+  }
+
+  .content-wrap .graph-left-part, .content-wrap .right-part {
+    width: 50%;
+    min-width: 480px;
+    max-width: 660px;
+  }
+
+  .right-part {
+    // min-width: 400px;
+    box-sizing: border-box;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+
+    overflow: hidden;
+
+    background-color: #fcfcfc;
+
+    transition: width .5s ease;
+    box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+    .proj-desc {
+      /* 项目概况页面 */
+      background-color: rgba(252, 252, 252, 1);
+      min-height: calc(100vh - 96px);
+
+      .title {
+        position: relative;
+        left: -24px;
+        color: rgba(12, 13, 16, 100);
+        font-size: 20px;
+        text-align: left;
+        font-family: PingFangSC-Medium;
+      }
+      .proj-desc-wrap {
+        padding: 0 24px;
+        height: calc(100vh - 126px);
+        overflow: scroll;
+        background-color: #f8f8f8;
+        .cover-container {
+          height: 226px;
+          margin: 0 0 32px 0;
+          border-radius: 8px;
+
+          .cover-img-wrap {
+            position: relative;
+            width: 293px;
+            height: 226px;
+            overflow: hidden;
+            border-radius: 8px;
+            box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.2);
+
+            .cover-img {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              height: 100%;
+              border-radius: 8px;
+              transform: translate(-50%, -50%);
+            }
+          }
+
+          .edit-cover-btn {
+              position: absolute;
+              left: 12px;
+              bottom: 12px;
+              width: 64px;
+              height: 28px;
+              line-height: 28px;
+              border-radius: 4px;
+              background-color: rgba(255, 255, 255, 1);
+              border: 0.5px solid rgba(151, 151, 151, 1);
+              color: rgba(50, 50, 60, 100);
+              font-size: 14px;
+              text-align: center;
+              font-family: PingFangSC-Regular;
+          }
+          
+        
+        }
+        .proj-main-template+.item-value {
+          position: relative;
+          top: -2.5px;
+          color: rgba(50, 50, 60, 100);
+          font-size: 18px;
+        }
+      }
+    }
+    .item {
+      display: flex;
+      width: 100%;
+      margin: 14px 0;
+      font-size: 14px;
+      font-family: PingFangSC-Regular;
+      color: #32323C;
+      .item-title {
+        color: #62492f;
+        width: 24%;
+        text-align: right;
+      }
+      .item-value {
+        margin: 0 0 0 12px;
+        &:not(.cover-img-wrap) {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  /* 修改模板概况按钮 项目概况页面开始按钮 */
+  .edit-template-btn, .to-distwork-btn{
+    position: relative;
+    left: 24px;
+    cursor: pointer;
+    padding: 0 16px;
+    height: 32px;
+    line-height: 32px;
+    margin: 9px 0;
+    border-radius: 8px;
+    background-color: rgba(120, 80, 255, 1);
+    color: rgba(245, 245, 247, 100);
+    font-size: 14px;
+    text-align: center;
+    font-family: PingFangSC-Regular;
+      
+  }
+    /* 滑动的时候 顶部导航栏的底部阴影 */
+    .header-bottom-shadow::after {
+    /* box-shadow: 0 18px 18px 0 #f1f1f1; */
+      content:'';
+      display: block;
+      width: 100%;
+      height: 30px;
+      background: linear-gradient(rgba(#000, .06),rgba(#000, 0));
+    }
+  /* 编辑模板自定义字段 调整标题位置 */
+  .adjust-title-position {
+    position: relative;
+    top: 11px;
+  }
+  .distwork-page {
+    position: relative;
+  }
+  .right-part {
+    .part-wrap {
+      // 右侧的滚动条有8px的宽度
+      padding: 0 4px 0 12px;
+      height: calc(100vh - 126px);
+      overflow-y: scroll;
+      background-color: #f8f8f8;
+      .proj-manager-row {
+        margin: 0 0 8px 0;
+      }
+      .only-manager-see {
+        &:hover {
+          border-radius: 8px;
+          background-color: rgba(50, 50, 60, 0.1);
+        }
+      }
+      /* 项目管理权限文字样式 */
+      .row-title {
+        padding: 6px 0 0 0;
+        margin: 10px 0 6px 12px;
+        height: 20px;
+        line-height: 20px;
+        color: rgba(50, 50, 60, 100);
+        font-size: 14px;
+        text-align: left;
+        font-family: PingFangSC-Regular;
+      }
+    }
+  }
+  
+  .template-summary {
+    background-color: #f8f8f8;
+    .summary-wrap {
+      height: calc(100vh - 126px - 16px);
+      overflow: scroll;
+      padding: 0 24px;
+      margin: 16px 0 0 0;
+      background-color: #f8f8f8;
+
+      /* 编辑状态下的模板自定义字段输入框 */
+      .prop-value-input {
+        width: 100%;
+        height: 44px;
+        border-radius: 4px;
+        color:  rgba(0, 0, 0, 0.56);
+        background-color: rgba(233, 233, 235, 1);
+        border: 0.5px solid rgba(174, 174, 174, 1);
+        font-size: 16px;
+        padding-left:16px;
+    
+      }
+    }
+  }
+  .set-right-part-width {
+    min-width: 300px;
+    width: 63.768% !important;
+    margin-right: 10px;
+  }
+
+  .set-personnel-list-width {
+    min-width: 375px;
+    max-width: 375px;
+    width: 36.231% !important;
+    transition: width 2.5s ease;
+  }
+
+  .set-header-position {
+    position: relative !important;
+    color: #32323c !important;
+    z-index: 99;
+  }
+  /* 模板概况按钮 */
+  .template-detail-btn {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+    color: #32323c;
+    background-color: rgba(255, 255, 255, 1);
+    border: 0.5px solid rgba(151, 151, 151, 1);
+
+    text-align: center;
+    margin: 15px 12px 8px;
+    cursor: pointer;
+  }
+
+
+  
+  /* .set-wrap-padding {
+    padding: 0 4px 0 12px !important;
+  }
+  .set-btn-margin {
+    margin:  15px 4px 8px 12px;
+  } */
+</style>
+
+<style lang="scss">
+  .proj-detail {
+    .app-header-center {
+      font-size: 20px;
+    }
+  }
+  .proj-summary  {
+    .back_title {
+      color: rgba(12, 13, 16, 100);
+      font-size: 15px;
+      font-family: PingFangSC-Regular;
+    }
+  }
+  /* 返回图标变成紫色 */
+  .proj-detail {
+    .right-part {
+      .app-header-back-btn {
+        background: url(/static/img/yiyunicon.png) no-repeat -28px -84px !important;
+      }
+    }
+  }
+  .plain-folder-list {
+    padding: 0 0 28px 0;
+  }
+  .right-part .app-header-content {
+    background-color: #f8f8f8;
+  }
+
+.manager-folder-wrap {
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
 }
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/main_web/project/newProject.vue b/src/views/main_web/project/newProject.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/main_web/project/service.js b/src/views/main_web/project/service.js
new file mode 100644
index 00000000..954b6ce1
--- /dev/null
+++ b/src/views/main_web/project/service.js
@@ -0,0 +1,102 @@
+import { fetchApi, wrapErrorHint } from '@/utils/request';
+import { firstCharToLowerCase } from '@/utils/tool';
+import { fetchDeptList, getUserListByNode } from '@/services/user.js';
+
+export async function fetchMemberTree(companyId) {
+  const [{ list: mainMemberList }, deptList, otherCompanyMemberListRes] = await Promise.all([
+    getUserListByNode({ id: companyId, nodeType: 'company' }, 1, 10000),
+    fetchDeptList(companyId),
+    fetchApi('user/queryAllLinkCompanyRoleUserByCompanyId', { companyId }),
+  ]);
+
+  const mainCompanyNode = new Node(companyId, '我的企业', null, 'company', {});
+  const emptyDeptNode = new Node('emptyDeptNode', sessionStorage.CompanyName || '', companyId, 'dept', {});
+  const nodeMap = { [emptyDeptNode.id]: emptyDeptNode };
+  const memberMap = {};
+
+  deptList.forEach(dept => {
+    const deptNode = new Node(dept.id, dept.label, companyId, 'dept', dept.data);
+    nodeMap[deptNode.id] = deptNode;
+    mainCompanyNode.append(deptNode);
+  });
+  mainMemberList.forEach((member) => {
+    const parentNode = nodeMap[member.deptId] || emptyDeptNode;
+    const memberNode = new Node(member.id, member.cnName, parentNode.id, 'user', member);
+    memberMap[memberNode.id] = memberNode;
+    parentNode.append(memberNode);
+  });
+
+  if(emptyDeptNode.hasChildren) { mainCompanyNode.append(emptyDeptNode); }
+
+  const linkCompanyParentNode = new Node('linkCompanyParentNode', '互链企业', null, 'empty', {});
+  const linkCompanyList = otherCompanyMemberListRes.Data || [];
+  linkCompanyList.forEach((data) => {
+    const { CompanyId, CompanyName, Users } = data;
+    const linkCompanyNode = new Node(CompanyId, CompanyName, linkCompanyParentNode.id, 'company', { companyId: CompanyId, companyName: CompanyName });
+    Users.forEach(upperMember => {
+      const member = firstCharToLowerCase(upperMember);
+      const memberNode = new Node(member.id, member.cnName, linkCompanyNode.id, 'user', member);
+      memberMap[memberNode.id] = memberNode;
+      linkCompanyNode.append(memberNode);
+    });
+    linkCompanyNode.sortChildren();
+    nodeMap[linkCompanyNode.id] = linkCompanyNode;
+    linkCompanyParentNode.append(linkCompanyNode);
+
+  });
+
+  const outputList = [mainCompanyNode];
+  if(linkCompanyParentNode.hasChildren) { outputList.push(linkCompanyParentNode); }
+  // 排序
+  mainCompanyNode.children?.forEach(deptNode=>{
+    deptNode.sortChildren();
+  });
+
+  return {
+    treeList: outputList,
+    memberMap,
+  }
+}
+
+
+// function plainTreeNodes(nodesList, userList, outputList = []) {
+//   (nodesList || []).forEach(node => {
+//     // node.id
+//     const data = node.data;
+//     data.listUser = userList.filter(user => user.deptId === node.id);
+//     outputList.push(data);
+//     if(node.children && node.children.length) {
+//       plainTreeNodes(node.children, userList, outputList);
+//     }
+//   });
+//   return outputList;
+// }
+
+const sortFunc = (nodeA, nodeB) => nodeA.label.localeCompare(nodeB.label);
+
+class Node {
+  // type: 'company' | 'dept' | 'user' | 'empty'
+  constructor(id, label, parentId, type, data) {
+    Object.assign(this, { id, label, parentId, type, data });
+  }
+  append(childNode) {
+    if(!this.children) { this.children = []; }
+    this.children.push(childNode);
+  }
+  sortChildren(f = sortFunc) {
+    if(!this.hasChildren) { return this; }
+    this.children.sort(f);
+    return this;
+  }
+  mapChildren(f) {
+    if(!this.hasChildren) { return []; }
+    return this.children.map(f);
+  }
+  everyChildren(f) {
+    if(!this.hasChildren) { return false; }
+    return this.children.every(f);
+  }
+  get hasChildren() {
+    return this.children && !!this.children.length;
+  }
+}
\ No newline at end of file