11

src/router/team.ts

@@ -53,9 +53,9 @@ export const teamRoutes: Array<RouteConfig> = [
         }
       },
       {
-        path: 'team/:id',
+        path: 'team-frame/:id',
         name: 'TeamDetail',
-        component: () => import('@/views/team/team-detail.vue'),
+        component: () => import('@/views/team/team-frame.vue'),
         meta: {
           title: '团队架构'
         }

src/util/Common/index.ts

@@ -4,4 +4,4 @@ export function trim(str: string) {
 
 export function generateTree(arr: Array<any>, rootId: string) {
   console.log(arr, rootId)
-}
+}
\ No newline at end of file

src/views/team/add-department.vue

@@ -2,11 +2,23 @@
   <!-- 添加部门 -->
   <main-page
     left-arrow
+    :loading="loading"
     @click-left="$router.go(-1)"
   >
+    <member-selector
+      :show.sync="showMemberSelector"
+      :show-team="true"
+      :checked-member-id.sync="selectedLeaderId"
+    />
+    <dep-selector
+      :show.sync="showDepSelector"
+      :dep.sync="depTree"
+      :ent-id="entId"
+      :selected.sync="selectedDepId"
+    />
     <div class="pt-14 px-4">
       <input-cell
-        v-model="addDep.name"
+        v-model="name"
         required
         :limit="20"
         label="部门名称"
@@ -24,7 +36,7 @@
         <c-cell
           dot
           :title="parentDep.name"
-          @click="$router.push('/team/select-team')"
+          @click="selectDep"
         />
       </group-cell>
       <c-button round class="mt-10" @click="addDepConfirm">
@@ -39,16 +51,18 @@
 import { useRequest } from 'ahooks-vue'
 import Vue from 'vue'
 import {AddSubDTO} from '@/service/moudles/service.dto'
+import { Department, Staff } from '@/Interface'
+import { getContacts } from '@/util/Contact'
 
 export default Vue.extend({
-  components:{ 
-    // 'app-icon':()=>import('./components/common/Icon.vue'),
+  components:{
     'main-page': () => import('@/layout/main-page.vue'),
     'input-cell': () => import('@/components/common/input-cell.vue'),
     'c-cell': () => import('@/components/common/c-cell.vue'),
     'c-button': () => import('@/components/common/c-button.vue'),
-    // 'switch-cell': () => import('./components/switch-cell.vue'),
-    'group-cell': () => import('@/components/common/group-cell.vue')
+    'group-cell': () => import('@/components/common/group-cell.vue'),
+    'member-selector': () => import('@/views/team/components/member-selector.vue'),
+    'dep-selector': () => import('@/views/team/components/dep-selector.vue'),
   },
   name: 'AddDepartment',
   data() {
@@ -58,10 +72,23 @@ export default Vue.extend({
       name: '',
       parentId: ''
     }
+    const depTree: Department = {
+      entId: '',
+      id: '',
+      leaderId: '',
+      name: '',
+      parentId: ''
+    }
+    const currentDep: Department = {
+      entId: '',
+      id: '',
+      leaderId: '',
+      name: '',
+      parentId: ''
+    }
     return {
-      name: '产品部',
+      name: '',
       check: false,
-      addDepObj:{},
       enterpriseInfoObj:{
         data:null as any,
         loading:true as any,
@@ -69,30 +96,116 @@ export default Vue.extend({
       },
       addDep,
       parentDep: {},
-      leader: {}
+      leader: {},
+      selectedLeaderId: ['1FKxgaEh5fuSm7a35BfUnKYAmradowpiTR'],
+      showMemberSelector: false,
+      entId: '',
+      depTree,
+      selectedDepId: '',
+      contacts: {},
+      loading: false,
+      showDepSelector: false
     }
   },
-  mounted(){
-    this.addDep = this.$store.state.addDep || this.addDep
-    this.parentDep = this.$store.state.addDepParent || {}
-    this.leader = this.$store.state.addDepLeader || {}
+  created(){
+    this.entId=JSON.parse(localStorage.getItem('ENT_INFO') || '{}').id
+    this.getStaffInfo(this.selectedLeaderId[0])
+    const depId = this.$route.query.id as string
+    this.selectedDepId = depId
+    this.getDepInfo(depId)
   },
   methods: {
     addDepConfirm(){
-      const { data, loading, error, run} =useRequest(this.$service.department.addDep({
-          "entId": "entId",
-          "leaderId": "leaderId",
-          "name": "name",
-          "parentId": "parentId"
-      })) 
+      // const { data, loading, error, run} =useRequest(this.$service.department.addDep({
+      //     "entId": "entId",
+      //     "leaderId": "leaderId",
+      //     "name": "name",
+      //     "parentId": "parentId"
+      // })) 
+      if (this.name === '') {
+        this.$toast('请输入部门名称')
+        return
+      }
+      const data = {
+        entId: this.entId,
+        leaderId: (this.leader as Staff).id,
+        name: this.name,
+        parentId: (this.parentDep as Department).id
+      }
+      this.$service.department.addDep(data).then((res: any) => {
+        const {data} = res
+        if (data.code === this.$global.success) {
+          this.$toast('添加成功')
+          this.$router.push('/team/team-frame')
+        } else {
+          this.$toast(data.msg)
+        }
+      })
     },
     selectCharger() {
-      this.$router.push({
-        path: '/team/team-frame',
-        query: {
-          showRadio: '1'
+      this.showMemberSelector = true
+    },
+    getStaffInfo(id: string) {
+      this.loading = true
+      this.$service.staff.getInfo({
+        entId: this.entId,
+        id
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.leader = data.data
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    getDepInfo(id: string) {
+      this.loading = true
+      this.$service.department.getDep({
+        entId: this.entId,
+        id
+      }).then((res: any) => {
+        this.loading = false
+        const {data} = res
+        if (data.code === this.$global.success) {
+          this.parentDep = data.data
+        } else {
+          this.$toast(data.msg)
         }
       })
+    },
+    getSub(parentId: string) {
+      this.loading = true
+      this.$service.department.getSub({
+        entId: this.entId,
+        parentId: parentId
+      }).then((res: any) => {
+        const {data}=res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.depTree = data.data.dep
+          this.depTree.children = data.data.subDepList
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    selectDep() {
+      const parentId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
+      this.getSub(parentId)
+      this.showDepSelector = true
+    }
+  },
+  watch: {
+    selectedLeaderId: {
+      handler(val) {
+        const newLeader = val[0]
+        this.getStaffInfo(newLeader)
+      }
+    },
+    selectedDepId(val: string) {
+      this.getDepInfo(val)
     }
   }
 })

src/views/team/add-member.vue

 <template>
   <div class="file">
+    <dep-selector
+      :show.sync="showDepSelector"
+      :dep.sync="depTree"
+      :ent-id="entId"
+      :selected.sync="selectedDepId"
+    />
     <main-page
       left-arrow
       :loading="loading"
@@ -80,13 +86,14 @@
 <script lang="ts">
 
 import Vue from 'vue'
-import { Calendar } from 'vant'
+import { Calendar,Overlay } from 'vant'
 import { AcceptJoinDTO } from '@/service/moudles/service.dto'
 import { trim } from '@/util/Contact'
 import {Department} from '@/Interface'
 import { useLocalStorageState } from 'ahooks-vue'
 import {formatDate} from '@/util/FormatDate'
-Vue.use(Calendar)
+import DepSelector from '@/views/team/components/dep-selector.vue'
+Vue.use(Calendar).use(Overlay)
 
 export default Vue.extend({
   name: 'AddMember',
@@ -95,7 +102,8 @@ export default Vue.extend({
     'input-cell': () => import('@/components/common/input-cell.vue'),
     'c-cell': () => import('@/components/common/c-cell.vue'),
     'c-button': () => import('@/components/common/c-button.vue'),
-    'group-cell': () => import('@/components/common/group-cell.vue')
+    'group-cell': () => import('@/components/common/group-cell.vue'),
+    'dep-selector': () => import('@/views/team/components/dep-selector.vue')
   },
   data() {
     const currentDep: Department = {
@@ -105,6 +113,13 @@ export default Vue.extend({
       name: '',
       parentId: '',
     }
+    const depTree: Department = {
+      entId: '',
+      id: '',
+      leaderId: '',
+      name: '',
+      parentId: ''
+    }
     const acceptJoin: AcceptJoinDTO = {
       expiration: 0,
       inviterId: '17MTDNzwBXXKNzwdzEnQrehmSEPAy31sUS',
@@ -119,38 +134,53 @@ export default Vue.extend({
     }
     return {
       formatDate,
-      // joinTime: new Date().getTime(),
-      // name: '', // 姓名
-      // position: '',
-      // phone: '', // 电话号码
-      // digit: '', // 员工编号
       date: '请选择入职时间', // 入职时间
       show: false, // 日期弹窗
       depId: '123',
       entId: '',
+      selectedDepId: '',
       currentDep,
       loading: false,
       acceptJoin,
+      showDepSelector: false,
+      depTree
     }
   },
-  created() {
-    this.depId = this.$route.query.id as string
+  async created() {
+    this.selectedDepId = this.depId = this.$route.query.id as string
     this.entId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').id
-    this.acceptJoin = Object.assign(this.acceptJoin, this.$store.state.acceptJoin)
-    this.getDep()
+    // this.acceptJoin = Object.assign(this.acceptJoin, this.$store.state.acceptJoin)
+    const dep = await this.getSub(this.depId)
+    this.currentDep = dep.dep
   },
   methods: {
-    selectDep() {
-      this.acceptJoin.expiration = this.acceptJoin.joinTime
-      this.acceptJoin.oaServer = 'http://172.16.101.107:20000'
-      this.$store.commit('setAcceptJoin', this.acceptJoin)
-      this.$router.push('/team/select-team')
+    async selectDep() {
+      const parentId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
+      const dep = await this.getSub(parentId)
+      this.depTree = dep.dep
+      this.depTree.children = dep.subDepList
+      this.showDepSelector = true
+    },
+    getSub(parentId: string) {
+      this.loading = true
+      return this.$service.department.getSub({
+        entId: this.entId,
+        parentId: parentId
+      }).then((res: any) => {
+        const {data}=res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          return data.data
+        } else {
+          this.$toast(data.msg)
+        }
+      })
     },
-    getDep() {
+    getDep(depId: string) {
       this.loading = true
       this.$service.department.getDep({
         entId: this.entId,
-        id: this.depId
+        id: depId
       }).then((res: any) => {
         const {data}=res
         this.loading = false
@@ -187,10 +217,9 @@ export default Vue.extend({
       this.$dialog.confirm({
         title: '提示',
         message: '确定保存该成员信息，并生成成员信息二维码邀请该成员加入团队？'
-        // confirmButtonText: '解散'
       }).then(() => {
         this.acceptJoin.entId = this.entId
-        this.acceptJoin.depId = this.depId
+        this.acceptJoin.depId = this.selectedDepId
         this.acceptJoin.expiration = this.acceptJoin.joinTime
         this.acceptJoin.inviterId ="1FKxgaEh5fuSm7a35BfUnKYAmradowpiTR"
         this.acceptJoin.oaServer = 'http://172.16.101.107:20000'
@@ -198,6 +227,11 @@ export default Vue.extend({
         this.$router.push('/team/two-code')
       }).catch(() => {})
     }
+  },
+  watch: {
+    selectedDepId(val: string) {
+      this.getDep(val)
+    }
   }
 })
 </script>

src/views/team/components/dep-selector.vue

+<template>
+  <!-- 选择部门 -->
+  <van-overlay :show="show" z-index="2000">
+    <div class="select-team w-screen h-screen overflow-auto">
+      <main-page
+        title="所属团队"
+        left-arrow
+        :loading="loading"
+        @click-left="goBack"
+      >
+        <div class="px-4 pt-14 pb-16">
+          <!-- 顶部 -->
+          <div class="bread">
+            <template v-if="dep.parentId === '-1'">
+              <div class="font-medium py-3.5">{{dep.name}}</div>
+            </template>
+            <template v-else>
+              <div class="flex items-center">
+                <div class="text-text-secondary font-medium py-3" @click="goPre">所有部门</div>
+                <div class="text-text-secondary py-3 text-xs mx-2">></div>
+                <div class="font-medium py-3">{{ dep.name }}</div>
+              </div>
+              
+            </template>
+          </div>
+          <!-- 部门列表 -->
+          <div class="list mt-1.5">
+            <div
+              v-for="t in dep.children"
+              :key="t.id"
+              class="flex items-center"
+            >
+              <div
+                class="content flex-1 flex items-center mr-4"
+                @click="selectTeam(t)"
+              >
+                <div class="radio-wrapper flex-shrink-0">
+                  <app-icon
+                    v-if="showChecked(t)"
+                    icon-name="radio-checked"
+                    class-name="w-4 h-4"
+                  />
+                  <app-icon
+                    v-else
+                    icon-name="radio"
+                    class-name="w-4 h-4"
+                  />
+                </div>
+                <div class="title flex-1 truncate py-3 ml-6">
+                  {{ t.name }}{{ t.children && t.children.length > 0 ? ` (${t.children.length}) ` : '' }}
+                </div>
+              </div>
+              <div
+                class="flex-shrink-0 flex items-center text-color-primary py-3"
+                @click="goNext(t)"
+              >
+                <app-icon
+                  icon-name="tree"
+                  class-name="h-5 w-5 mr-2.5"
+                />
+                下一级
+              </div>
+            </div>
+          </div>
+          <div
+            class="action fixed bottom-0 left-0 w-full px-4 py-2 z-10 bg-common-bg"
+            @click="confirm"
+          >
+            <c-button round>确定</c-button>
+          </div>
+        </div>
+      </main-page>
+    </div>
+  </van-overlay>
+</template>
+
+<script lang="ts">
+import Vue, {PropType} from 'vue'
+import {Department} from '@/Interface'
+import { Overlay } from 'vant'
+Vue.use(Overlay)
+
+export default Vue.extend({
+  name: 'DepSelector',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-button': () => import('@/components/common/c-button.vue')
+  },
+  props: {
+    show: Boolean,
+    dep: Object as PropType<Department>,
+    entId: String,
+    defaultChecked: String,
+    selected: String
+  },
+  data() {
+    // const selectedIds: Array<Department> = []
+    const currentDep: Department = {
+      entId: '',
+      id: '',
+      leaderId: '',
+      name: '',
+      parentId: '',
+      children: []
+    }
+    return {
+      checked: '',
+      loading: false,
+      // entId: '',
+      depId: '',
+      currentDep
+    }
+  },
+  methods: {
+    showChecked (dep: Department): boolean {
+      return(!this.checked && this.selected === dep.id) || this.checked === dep.id
+    },
+    goBack() {
+      this.$emit('update:show', false)
+    },
+    getSub() {
+      this.loading = true
+      return this.$service.department.getSub({
+        entId: this.entId,
+        parentId: this.depId
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.currentDep = data.data.dep
+          this.currentDep.children = data.data.subDepList
+          this.$emit('update:dep', this.currentDep)
+        }
+      }).catch(()=>{
+        this.loading=false
+      })
+    },
+    // 下一级
+    goNext(team: Department) {
+      this.depId = team.id
+      this.checked = ''
+      this.getSub()
+    },
+    // 所有部门
+    goPre() {
+      this.depId = this.currentDep.parentId
+      this.checked = ''
+      this.getSub()
+    },
+    // 选择
+    selectTeam(team: Department) {
+      if (this.checked !== team.id) {
+        this.checked = team.id
+        return
+      }
+    },
+    // 确认选择
+    confirm() {
+      console.log(this.checked, 'ched')
+      if (this.checked === '') {
+        this.$toast('请选择部门')
+        return
+      }
+      this.$emit('update:selected', this.checked)
+      this.$emit('update:show', false)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/team/components/member-selector.vue

+<template>
+  <!-- 选择成员 -->
+  <van-overlay :show="show" z-index="2000">
+    <div class="select-team w-screen h-screen overflow-auto">
+      <main-page
+        main-bg="bg-white"
+        header-bg="bg-white"
+        title="选择主管"
+        :loading="loading"
+        left-arrow
+        @click-left="goBack"
+      >
+        <!-- <template slot="right">
+          <app-icon
+            type="png"
+            class-name="w-6.5 h-6.5"
+            :path="require('@/assets/icons/search.png')"
+          />
+        </template> -->
+        <div class="px-4 pt-14">
+          <!-- 团队架构详情 -->
+          <team-tree
+            v-if="showTeam"
+            :is-detail="isDepDetail"
+            :pre-team="preDep"
+            :tree-data="team"
+            @click-child="clickItem"
+            @go-pre="goPre"
+          />
+          <!-- 显示成员是否包含子部门成员 -->
+          <switch-cell
+            title="部门包含子部门成员"
+            :checked.sync="ifContainChildDep"
+            @change="handleSwitchChange"
+          />
+          <!-- 通讯录 -->
+          <div class="pb-16">
+            <div class="text-text-secondary py-1">成员</div>
+            <team-contacts
+              :radio="true"
+              :multiple="multiple"
+              :checked.sync="checkedMember"
+              :contacts="contacts"
+              @click-member="clickMember"
+            />
+          </div>
+          <!-- 底部操作 -->
+          <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
+            <c-button round @click="confirmSelect">确定</c-button>
+          </div>
+        </div>
+      </main-page>
+    </div>
+  </van-overlay>
+</template>
+
+<script lang="ts">
+import Vue, {PropType} from 'vue'
+import { useLocalStorageState } from 'ahooks-vue'
+import { getUserInfo, openCompanyUserInfo } from '@/util/Bridge'
+import { getContacts } from '@/util/Contact'
+import { Department, Staff } from '@/Interface'
+// import {openCompanyUserInfo} from '@/util/Bridge'
+
+export default Vue.extend({
+  name: 'MemberSelector',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'team-tree': () => import('@/views/team/components/team-tree.vue'),
+    'team-contacts': () => import('@/views/team/components/team-contacts.vue'),
+    'c-button': () => import('@/components/common/c-button.vue'),
+    'switch-cell': () => import('@/components/common/switch-cell.vue')
+  },
+  props: {
+    show: Boolean,
+    showTeam: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    checkedMemberId: {
+      type: Array as PropType<Array<String>>
+    }
+  },
+  data() {
+    const team: Array<Department> = []
+    const currentDep: Department = {
+      entId: '',
+      id: '',
+      leaderId: '',
+      name: '',
+      parentId: ''
+    }
+    let changedVal: Array<string> = []
+    return {
+      title: '导航',
+      team,
+      loading: false,
+      contacts: {},
+      parentId: '',
+      entId: '166961152260050944',
+      ifContainChildDep: true,
+      enterpriseInfo: {},
+      currentDep,
+      preDep: {},
+      // 是否显示check
+      // checkedMember: [],
+      showRadio: true,
+      changed: false,
+      changedVal
+    }
+  },
+  mounted() {
+    this.getEntInfo()
+  },
+  computed: {
+    isDepDetail(): boolean {
+      return this.currentDep.parentId !== '-1'
+    },
+    checkedMember: {
+      get(): Array<String> {
+        if (!this.changed) {
+          return this.checkedMemberId
+        } else {
+          return this.changedVal
+        }
+      },
+      set(val:Array<string>) {
+        console.log(val, 'val')
+        this.changed = true
+        this.changedVal = val
+      }
+    }
+  },
+  methods: {
+    goPre(dep: Department) {
+      this.parentId = dep.id
+      this.getStaff()
+    },
+    // 确认选择
+    confirmSelect() {
+      // this.$store.commit('setAddDepLeader', this.checkedMemberId)
+      this.$emit('update:checkedMemberId', this.checkedMember)
+      this.$emit('update:show', false)
+    },
+    goBack(){
+      this.$emit('update:show', false)
+    },
+    getEntInfo() {
+      this.loading = true
+      return this.$service.enterprise.getEnterpriseInfo({
+        id: this.entId
+      }).then((res: any) => {
+        const { data } = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.parentId = data.data.rootDepId
+          this.getStaff()
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    // 获取部门信息
+    getDepInfo(depId: string) {
+      this.loading = true
+      this.$service.department.getDep({
+        entId: this.entId,
+        id: depId
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.preDep = data.data
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    // 获取成员
+    getStaff() {
+      this.loading = true
+      this.$service.department.getSub({
+        parentId: this.parentId,
+        entId: this.entId,
+        hasStaff: true,
+        isDirect: this.ifContainChildDep
+      }).then((res: any) => {
+        const { data } = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.currentDep = data.data.dep
+          // 通讯录
+          this.contacts = getContacts(data.data.staffList || [])
+          // 部门树
+          const depTree = data.data.dep
+          depTree.children = data.data.subDepList
+          this.team = [depTree]
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    clickMember(member: Staff) {
+      // openCompanyUserInfo(JSON.stringify(member))
+      // this.$router.push(`/team/team-member/${member.id}`)
+    },
+    clickItem(val: Department) {
+      this.parentId = val.id
+      this.getStaff()
+      // this.$router.push(`/team/team-frame/${val.id}`)
+    },
+    // 切换成员显示
+    handleSwitchChange(val: boolean) {
+      this.getStaff()
+    }
+  },
+  watch: {
+    currentDep: {
+      handler(newDep) {
+        if (newDep.parentId !== '-1') {
+          this.getDepInfo(newDep.parentId)
+        }
+      }
+    }
+  },
+})
+</script>
+
+<style lang="less">
+
+</style>
\ No newline at end of file

src/views/team/components/team-tree.vue

@@ -18,7 +18,7 @@
         v-else
         class="bread py-3 flex items-center"
       >
-        <div class="pre text-text-secondary">{{ preTeam }}</div>
+        <div class="pre text-text-secondary" @click="goPre(preTeam)">{{ preTeam.name }}</div>
         <div class="text-xs text-text-secondary px-2">></div>
         <div class="pre text-text-primary font-medium">{{ member.name }}</div>
       </div>
@@ -79,7 +79,7 @@ export default Vue.extend({
       type: Boolean,
       default: false
     },
-    preTeam: String
+    preTeam: Object
   },
   methods: {
     clickChild(team: Department, parentName: string) {
@@ -87,6 +87,9 @@ export default Vue.extend({
         parentName,
         ...team
       })
+    },
+    goPre(team: Department) {
+      this.$emit('go-pre', team)
     }
   }
 })

src/views/team/team-frame.vue

@@ -18,8 +18,11 @@
       <div class="px-4 pt-14">
         <!-- 团队架构详情 -->
         <team-tree
+          :is-detail="isDepDetail"
+          :pre-team="preDep"
           :tree-data="team"
           @click-child="clickItem"
+          @go-pre="goPre"
         />
         <!-- 显示成员是否包含子部门成员 -->
         <switch-cell
@@ -93,10 +96,12 @@ export default Vue.extend({
       team,
       loading: false,
       contacts: {},
-      parentId: '166961152260050945',
+      parentId: '',
+      entId: '166961152260050944',
       ifContainChildDep: true,
       enterpriseInfo: {},
       currentDep,
+      preDep: {},
       // 是否显示check
       checkedMemberId: [],
       showRadio: false,
@@ -110,26 +115,53 @@ export default Vue.extend({
   mounted() {
     // useLocalStorageState('USER_INFO',getUserInfo())
     this.getEntInfo()
-    this.getStaff()
+  },
+  computed: {
+    isDepDetail(): boolean {
+      return this.currentDep.parentId !== '-1'
+    }
   },
   methods: {
+    goPre(dep: Department) {
+      this.parentId = dep.id
+      this.getStaff()
+    },
     // 确认选择
     confirmSelect() {
       this.$store.commit('setAddDepLeader', this.checkedMemberId)
       this.$router.push(this.fromPath)
     },
     appNavBack(){
-      appNavBack()
+      this.$router.go(-1)
+      // appNavBack()
     },
     getEntInfo() {
       this.loading = true
-      this.$service.enterprise.getEnterpriseInfo({
-        id: '166961152260050944'
+      return this.$service.enterprise.getEnterpriseInfo({
+        id: this.entId
       }).then((res: any) => {
         const { data } = res
         this.loading = false
         if (data.code === this.$global.success) {
           localStorage.setItem('ENT_INFO', JSON.stringify(data.data))
+          this.parentId = data.data.rootDepId
+          this.getStaff()
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    // 获取部门信息
+    getDepInfo(depId: string) {
+      this.loading = true
+      this.$service.department.getDep({
+        entId: this.entId,
+        id: depId
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.preDep = data.data
         } else {
           this.$toast(data.msg)
         }
@@ -140,7 +172,7 @@ export default Vue.extend({
       this.loading = true
       this.$service.department.getSub({
         parentId: this.parentId,
-        entId: '166961152260050944',
+        entId: this.entId,
         hasStaff: true,
         isDirect: this.ifContainChildDep
       }).then((res: any) => {
@@ -164,17 +196,8 @@ export default Vue.extend({
       // this.$router.push(`/team/team-member/${member.id}`)
     },
     clickItem(val: Department) {
-      if (this.showRadio) {
-        this.$router.push({
-          path: `/team/team/${val.id}`,
-          query: {
-            showRadio: '1',
-            multiple: '1' // 1单选2多选
-          }
-        })
-        return
-      }
-      this.$router.push(`/team/team/${val.id}`)
+      this.parentId = val.id
+      this.getStaff()
     },
     // 切换成员显示
     handleSwitchChange(val: boolean) {
@@ -193,13 +216,37 @@ export default Vue.extend({
           id: this.currentDep.id
         }
       })
-      // $router.push('/team/add-member')
     },
     addDep() {
-      this.$store.commit('setAddDepParent', this.currentDep)
-      this.$router.push('/team/add-department')
+      this.$router.push({
+        path: '/team/add-department',
+        query: {
+          id: this.currentDep.id
+        }
+      })
+    }
+  },
+  watch: {
+    $route: {
+      async handler() {
+        const id = this.$route.params.id
+        if (typeof id === 'undefined') {
+          this.parentId = JSON.parse(localStorage.getItem('ENT_INFO') as string).rootDepId
+        } else {
+          this.parentId = id
+        }
+        this.getStaff()
+      },
+      immediate: false
+    },
+    currentDep: {
+      handler(newDep) {
+        if (newDep.parentId !== '-1') {
+          this.getDepInfo(newDep.parentId)
+        }
+      }
     }
-  }
+  },
 })
 </script>