1

package-lock.json

@@ -1172,6 +1172,19 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.nlark.com/@fortawesome/fontawesome-common-types/download/@fortawesome/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha1-tE5S2ztrIFI+DFfvjELTFVMsuQM="
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.nlark.com/@fortawesome/free-solid-svg-icons/download/@fortawesome/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha1-Kmjz/D3doS5SZFZUFCueTo+7bMU=",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.nlark.com/@hapi/address/download/@hapi/address-2.1.4.tgz",
@@ -5015,6 +5028,11 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "cookie-storage": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npm.taobao.org/cookie-storage/download/cookie-storage-6.1.0.tgz",
+      "integrity": "sha1-KRsvZi2WG+RPmZYmWTQhy/zyN5A="
+    },
     "copy-anything": {
       "version": "2.0.3",
       "resolved": "https://registry.nlark.com/copy-anything/download/copy-anything-2.0.3.tgz",
@@ -5044,6 +5062,11 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-text-to-clipboard": {
+      "version": "3.0.1",
+      "resolved": "https://registry.nlark.com/copy-text-to-clipboard/download/copy-text-to-clipboard-3.0.1.tgz",
+      "integrity": "sha1-jL+PkOCkfxLkokdDc2Jl0Ve85pw="
+    },
     "copy-webpack-plugin": {
       "version": "4.6.0",
       "resolved": "https://registry.nlark.com/copy-webpack-plugin/download/copy-webpack-plugin-4.6.0.tgz?cache=0&sync_timestamp=1624628458516&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcopy-webpack-plugin%2Fdownload%2Fcopy-webpack-plugin-4.6.0.tgz",
@@ -10201,6 +10224,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/mutation-observer/download/mutation-observer-1.0.3.tgz",
+      "integrity": "sha1-QukiKxAbyoLlup1aes9KFMDyY9A="
+    },
     "mutationobserver-shim": {
       "version": "0.3.7",
       "resolved": "https://registry.nlark.com/mutationobserver-shim/download/mutationobserver-shim-0.3.7.tgz",
@@ -13894,6 +13922,11 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svelte-fa": {
+      "version": "2.3.3",
+      "resolved": "https://registry.nlark.com/svelte-fa/download/svelte-fa-2.3.3.tgz",
+      "integrity": "sha1-sTazLzl+xk+3CLim/1V4vdZfW+c="
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.nlark.com/svg-tags/download/svg-tags-1.0.0.tgz",
@@ -15059,6 +15092,19 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "vconsole": {
+      "version": "3.9.1",
+      "resolved": "https://registry.nlark.com/vconsole/download/vconsole-3.9.1.tgz",
+      "integrity": "sha1-QcnTEeFKGmhWahvlJDqGZ/TDRdM=",
+      "requires": {
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "cookie-storage": "^6.1.0",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3",
+        "svelte-fa": "^2.2.1"
+      }
+    },
     "vendors": {
       "version": "1.0.4",
       "resolved": "https://registry.nlark.com/vendors/download/vendors-1.0.4.tgz",

package.json

@@ -25,6 +25,7 @@
     "secp256k1": "^4.0.2",
     "validator": "^13.6.0",
     "vant": "^2.12.22",
+    "vconsole": "^3.9.1",
     "vue": "^2.6.11",
     "vue-fragment": "^1.5.2",
     "vue-router": "^3.2.0",

src/Interface/index.ts

@@ -20,4 +20,14 @@ export interface Staff {
 // 通讯录
 export interface Contacts {
   [key: string]: Array<Staff>
+}
+
+// 部门
+export interface Department {
+  entId: string,
+  id: string,
+  leaderId: string,
+  name: string,
+  parentId: string,
+  children?: Array<Department>
 }
\ No newline at end of file

src/components/common/switch-cell.vue

@@ -40,6 +40,7 @@ export default Vue.extend({
   methods: {
     change(val: boolean) {
       this.$emit('update:checked', val)
+      this.$emit('change', val)
     }
   }
 })

src/const/Global/index.ts

+export const global = {
+  success: 0
+}
\ No newline at end of file

src/layout/main-page.vue

 <template>
   <div class="main-page min-h-screen" :class="mainBg">
+    <van-overlay :show="loading" z-index="2000" class="flex items-center justify-center">
+      <van-loading color="#fff" />
+    </van-overlay>
     <div class="header-wrapper fixed top-0 left-0 w-screen z-50" :class="headerBg">
       <div class="header relative flex justify-center items-center py-3 h-12">
         <div class="h-action-wrapper absolute left-3 top-1/2 transform -translate-y-1/2 flex justify-center items-center">
@@ -34,6 +37,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import {Overlay, Loading  } from 'vant'
+
+Vue.use(Overlay).use(Loading)
 
 export default Vue.extend({
   name: 'MainPage',
@@ -54,7 +60,8 @@ export default Vue.extend({
       type: String,
       default: 'text-text-primary'
     },
-    title: String
+    title: String,
+    loading: Boolean
   },
   components: {
     'app-icon': () => import('@/components/common/Icon.vue')

src/main.ts

@@ -7,14 +7,19 @@ import "tailwindcss/tailwind.css"
 import './style.less'
 import utils from '@/util'
 import service from './service'
+import {global} from '@/const/Global'
 import dsbridge from 'dsbridge'
 import { Dialog, Toast, Notify }from 'vant'
+import VConsole from 'vconsole'
 
 Vue.config.productionTip = false
 Vue.use(Dialog).use(Toast).use(Notify)
 Vue.use(utils).use(service)
 Vue.prototype.$dsbridge = dsbridge
-
+Vue.prototype.$global = global
+if (process.env.NODE_ENV === 'development') {
+  new VConsole()
+}
 new Vue({
   router,
   store,

src/router/team.ts

@@ -90,7 +90,7 @@ export const teamRoutes: Array<RouteConfig> = [
         }
       },
       {
-        path: 'department-management',
+        path: 'department-management/:id',
         name: 'DepartmentManagement',
         component: () => import('@/views/team/department-management.vue'),
         meta: {

src/service/index.ts

@@ -3,13 +3,15 @@ import Enterprise from './moudles/Enterprise'
 import Staff from './moudles/Staff'
 import Account from './moudles/Account'
 import Apply from './moudles/Apply'
+import Common from './moudles/Common'
 
 export const service = {
   staff: new Staff(),
   enterprise: new Enterprise(),
   department: new Department(),
   account: new Account(),
-  apply: new Apply()
+  apply: new Apply(),
+  common: new Common()
 }
 
 

src/service/moudles/Common.ts

+
+import BaseService from '../base'
+// import { AcceptJoinDTO, GetSub } from './service.dto'
+
+
+export default class Common extends BaseService {
+     router= {
+        getServer:{ path:'/v1/common/get-server',crediential:true}
+    }
+    constructor(){
+        super()
+    }
+
+    /**
+     * @param {} data {}
+     * @returns 
+     */
+    async getServer(){
+       return await this.useService(this.router.getServer)
+    }
+}
+
+

src/shimes-app.d.ts

 import Vue from 'vue'
 import {service} from './service'
+import {global} from '@/const/Global'
 import { UTIL_INTERFACE } from '@/util/util.types'
 import VueRouter, { Route } from 'vue-router'
 import dsbridge from 'dsbridge'
 type Service = typeof service
 type DSBridge = typeof dsbridge
+type Global = typeof global
 declare module 'vue/types/vue' {
     interface Vue {
         $service: Service,
         $dsbridge:DSBridge,
         $router: VueRouter,
-        $util:UTIL_INTERFACE
+        $util:UTIL_INTERFACE,
+        $global: Global
     }
   }
 

src/util/Common/index.ts

+export function trim (str: string) {
+  return str.replace(/(^\s*)|(\s*$)/g, "")
+}
+
+export function generateTree(arr: Array<any>, rootId: string) {
+  console.log(arr, rootId)
+}
\ No newline at end of file

src/util/Contact/index.ts

@@ -62,43 +62,40 @@ export function trim (str: string) {
     return str.replace(/(^\s*)|(\s*$)/g, "")
 }
 
-let arr = []
+// let arr = []
 interface Contact  {
   [key: string]: Array<Staff>
 }
 
-export const contacts: Contact = {}
+// for (let i=0; i<=10; i++) {
+//   const person: Staff = {
+//     email: Mock.mock('@email'),
+//     entId: 'string',
+//     joinTime: 111,
+//     phone: Mock.mock('@id'),
+//     leaderId: Mock.mock('@id'),
+//     name: Mock.mock('@cname'),
+//     position: 'string',
+//     role: Mock.mock({"number|0-6": 0}).number,
+//     depId: Mock.mock('@id'),
+//     depName: 'string',
+//     entName: 'string',
+//     id: Mock.mock('@id'),
+//     workplace: 'string'
+//   }
+//   arr.push(person)
+// }
 
-for (let i=0; i<=10; i++) {
-  const person: Staff = {
-    email: Mock.mock('@email'),
-    entId: 'string',
-    joinTime: 111,
-    phone: Mock.mock('@id'),
-    leaderId: Mock.mock('@id'),
-    name: Mock.mock('@cname'),
-    position: 'string',
-    role: Mock.mock({"number|0-6": 0}).number,
-    depId: Mock.mock('@id'),
-    depName: 'string',
-    entName: 'string',
-    id: Mock.mock('@id'),
+export function getContacts(arr: Array<Staff>) {
+  if (arr.length === 0) return {}
+  const contacts: Contact = {}
+  arr.forEach(item => {
+    const firstPy = makePy(item.name)[0].slice(0,1).toUpperCase()
+    if (typeof contacts[firstPy] === 'undefined') {
+      contacts[firstPy] = [item]
+    } else {
+      contacts[firstPy].push(item) 
+    }
+  })
+  return contacts
+}
\ No newline at end of file
-    workplace: 'string'
-  }
-  arr.push(person)
-}
-
-arr.forEach(item => {
-  const firstPy = makePy(item.name)[0].slice(0,1).toUpperCase()
-  if (typeof contacts[firstPy] === 'undefined') {
-    contacts[firstPy] = [item]
-  } else {
-    contacts[firstPy].push(item) 
-  }
-})
-
-// const keys = Object.keys(list).sort()
-
-// export const contacts:Contact = {}
-
-// console.log(keys, 'keys')

src/views/team/add-member.vue

@@ -81,6 +81,7 @@ import Vue from 'vue'
 import { Calendar } from 'vant'
 import {AcceptJoinDTO} from '@/service/moudles/service.dto'
 import {trim} from '@/util/Contact'
+import { useLocalStorageState } from 'ahooks-vue'
 Vue.use(Calendar)
 
 

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

@@ -13,52 +13,18 @@
         {{ nav }}
       </div>
     </div>
-    <!-- 主管负责人 -->
-    <div class="leaders">
-      <div
-        v-for="(leader, index) in leaders"
-        :key="index"
-        class="flex items-center color-color-primary font-normal"
-      >
-        <!-- 设置radio -->
-        <template v-if="radio">
-          <div class="w-8 h-8 flex items-center justify-start" @click="handleCheck(leader)">
-            <template v-if="checked.indexOf(leader.id) > -1">
-              <app-icon
-                type="png"
-                icon-name="radio-checked"
-                class-name="h-4 w-4"
-              />  
-            </template>
-            <template v-else>
-              <app-icon
-                type="png"
-                icon-name="radio"
-                class-name="h-4 w-4"
-              />  
-            </template>
-          </div>
-        </template>
-        <contact-member :member="leader" @click="clickMember"/>
-      </div>
-    </div>
-    <!-- 成员 -->
-    <div class="members">
-      <div
-        v-for="(value, key) in list"
-        :key="key"
-        :ref="key"
-      >
-        <div class="text-text-secondary py-1 sticky top-12 bg-white z-10">{{ key }}</div>
+    <template v-if="Object.keys(list).length > 0">
+      <!-- 主管负责人 -->
+      <div class="leaders">
         <div
-          v-for="(member, index) in list[key]"
+          v-for="(leader, index) in leaders"
           :key="index"
-          class="flex items-center"
+          class="flex items-center color-color-primary font-normal"
         >
           <!-- 设置radio -->
           <template v-if="radio">
-            <div class="w-8 h-8 flex items-center justify-start flex-shrink-0" @click="handleCheck(member)">
-              <template v-if="checked.indexOf(member.id) > -1">
+            <div class="w-8 h-8 flex items-center justify-start" @click="handleCheck(leader)">
+              <template v-if="checked.indexOf(leader.id) > -1">
                 <app-icon
                   type="png"
                   icon-name="radio-checked"
@@ -74,13 +40,53 @@
               </template>
             </div>
           </template>
-          <contact-member
-            :member="member"
-            @click="clickMember"
-          />
+          <contact-member :member="leader" @click="clickMember"/>
         </div>
       </div>
-    </div>
+      <!-- 成员 -->
+      <div class="members">
+        <div
+          v-for="(value, key) in list"
+          :key="key"
+          :ref="key"
+        >
+          <div class="text-text-secondary py-1 sticky top-12 bg-white z-10">{{ key }}</div>
+          <div
+            v-for="(member, index) in list[key]"
+            :key="index"
+            class="flex items-center"
+          >
+            <!-- 设置radio -->
+            <template v-if="radio">
+              <div class="w-8 h-8 flex items-center justify-start flex-shrink-0" @click="handleCheck(member)">
+                <template v-if="checked.indexOf(member.id) > -1">
+                  <app-icon
+                    type="png"
+                    icon-name="radio-checked"
+                    class-name="h-4 w-4"
+                  />  
+                </template>
+                <template v-else>
+                  <app-icon
+                    type="png"
+                    icon-name="radio"
+                    class-name="h-4 w-4"
+                  />  
+                </template>
+              </div>
+            </template>
+            <contact-member
+              :member="member"
+              @click="clickMember"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <div
+      class="text-text-secondary text-center text-sm h-20 flex items-center justify-center"
+      v-else
+    >暂无团队成员</div>
   </div>
 </template>
 

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

@@ -60,7 +60,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Member } from '@/DTO'
+import { Department } from '@/Interface'
 
 export default Vue.extend({
   name: 'TeamTree',
@@ -81,7 +81,7 @@ export default Vue.extend({
     preTeam: String
   },
   methods: {
-    clickChild(team: Member, parentName: string) {
+    clickChild(team: Department, parentName: string) {
       this.$emit('click-child', {
         parentName,
         ...team

src/views/team/create-team/create-team.vue

@@ -4,10 +4,13 @@
       left-arrow
       @click-left="handleClickLeft"
     >
-      <div class="mx-4 pt-14 pb-2 flex flex-col h-screen justify-between">
-        <div class="">
+      <div class="mx-4 pt-14 pb-2 flex flex-col h-screen">
+        <div class="text-xs text-color-primary bg-color-primary-light px-4 py-3 rounded">
+          创建团队需选择或添加一台服务器为默认服务器，用于保存企业模块信息，聊天服务器和区块链节点自动配置。
+        </div>
+        <div class="mt-4">
           <input-cell
-            v-model="team_name"
+            v-model="name"
             required
             :limit="20"
             label="企业/组织/团队名称"
@@ -15,7 +18,7 @@
             error-msg="团队名称不能为空"
           />
           <input-cell
-            v-model="name"
+            v-model="leaderName"
             required
             :limit="20"
             label="负责人真实姓名"
@@ -29,13 +32,33 @@
           >
             <c-cell dot>
               <div slot="content" class="">
-                <div class="">服务器名称</div>
-                <div class="text-text-secondary">172.16.100.92</div>
+                <div class="">企业服务器</div>
+                <div class="text-text-secondary">{{oaServer}}</div>
               </div>
             </c-cell>
+            <div v-if="showServerList">
+              <c-cell dot>
+                <div slot="content" class="">
+                  <div class="">聊天服务器</div>
+                  <div class="text-text-secondary">{{ IMServer }}</div>
+                </div>
+              </c-cell>
+              <c-cell dot>
+                <div slot="content" class="">
+                  <div class="">区块链节点</div>
+                  <div class="text-text-secondary">{{ nodeServer }}</div>
+                </div>
+              </c-cell>
+            </div>
+            <div class="bg-white flex items-center justify-center py-3" @click="showServer">
+              <app-icon
+                icon-name="right-arrow"
+                :class-name="getClass"
+              />
+            </div>
           </group-cell>
         </div>
-        <div class="ac">
+        <div class="mt-6">
           <div class="text-center mb-3 text-text-secondary text-sm">确定创建团队将创建您的团队账号并绑定您的个人账号</div>
           <c-button @click="toConfirm">确定</c-button>
         </div>
@@ -45,8 +68,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { Dialog } from 'vant';
+import Vue from 'vue'
+import { Dialog } from 'vant'
+import { getUserInfo } from '@/util/Bridge'
+import { trim } from '@/util/Common'
 
 export default Vue.extend({
   name:'createteam',
@@ -55,13 +80,8 @@ export default Vue.extend({
     'input-cell': () => import('@/components/common/input-cell.vue'),
     'c-button': () => import('@/components/common/c-button.vue'),
     'group-cell': () => import('@/components/common/group-cell.vue'),
-    'c-cell': () => import('@/components/common/c-cell.vue')
-  },
-  data(){
-    return{
-      team_name:'杭州复杂美科技有限公司',
-      name:''
-    }
+    'c-cell': () => import('@/components/common/c-cell.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue')
   },
   props:{
     isValid:{
@@ -69,27 +89,85 @@ export default Vue.extend({
       default:true
     }
   },
+  data(){
+    return{
+      leaderName:'',
+      name:'',
+      IMServer: '',
+      nodeServer: '',
+      oaServer: 'http://172.16.101.107:20000',
+      showServerList: false
+    }
+  },
+  created() {
+    console.log(getUserInfo(), 'ss')
+    this.$service.common.getServer().then((res: any) => {
+      const {data} = res
+      if (data.code === 0) {
+        this.IMServer = data.data.IMServer
+        this.nodeServer = data.data.nodeServer
+      } else {
+        
+      }
+    })
+  },
+  computed: {
+    getClass() {
+      if (this.showServerList) {
+        return 'w-1.5 h-2 transform -rotate-90'
+      } else {
+        return 'w-1.5 h-2 transform rotate-90'
+      }
+    }
+  },
   methods: {
     handleClickLeft() {
       console.log('click left')
     },
+    showServer() {
+      this.showServerList = !this.showServerList
+    },
     toConfirm(){
-      // 团队名是否同名判断
-      if(!this.isValid) {
-        this.$router.push('/team/team-QRcode')
-      }else{
-        Dialog.confirm({
-          title: '提示',
-          message: '已存在同名团队，如果你是该团队成员，请申请加入团队，或者更换团队名称后再试',
-          confirmButtonText:'申请加入'
-        })
-        .then(() => {
-          this.$router.push('/team/team-QRcode')
-        })
-        .catch(() => {
-          Dialog.close()
-        });
+      if (trim(this.name) === '' || trim(this.leaderName) === '') {
+        this.$toast('请检查输入内容')
+        return
       }
+      const {name, leaderName, IMServer, nodeServer, oaServer} = this
+      const data = {
+        name,
+        leaderName,
+        imServer: IMServer,
+        nodeServer,
+        oaServer
+      }
+      this.$service.enterprise.create(data).then((res: any) => {
+        const {data} = res
+        if (data.code === this.$global.success) {
+          this.$toast('创建成功')
+          this.name = ''
+          this.leaderName = ''
+        } else {
+          this.$toast(data.msg)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+      // 团队名是否同名判断
+      // if(!this.isValid) {
+      //   this.$router.push('/team/team-QRcode')
+      // }else{
+      //   Dialog.confirm({
+      //     title: '提示',
+      //     message: '已存在同名团队，如果你是该团队成员，请申请加入团队，或者更换团队名称后再试',
+      //     confirmButtonText:'申请加入'
+      //   })
+      //   .then(() => {
+      //     this.$router.push('/team/team-QRcode')
+      //   })
+      //   .catch(() => {
+      //     Dialog.close()
+      //   })
+      // }
     }
   }
 });

src/views/team/department-management.vue

@@ -2,11 +2,12 @@
   <!-- 部门管理 -->
   <main-page
     left-arrow
+    :loading="loading"
     @click-left="$router.go(-1)"
   >
     <div class="pt-14 px-4">
       <input-cell
-        v-model="name"
+        v-model="depInfo.name"
         required
         :limit="10"
         label="部门名称"
@@ -63,7 +64,33 @@ export default Vue.extend({
   data() {
     return {
       name: '产品部',
-      check: false
+      check: false,
+      loading: false,
+      depId: '',
+      entId: '',
+      depInfo: {}
+    }
+  },
+  created() {
+    this.depId = this.$route.params.id
+    this.entId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').id
+    this.getDepInfo()
+  },
+  methods: {
+    getDepInfo() {
+      this.loading = true
+      this.$service.department.getDep({
+        entId: this.entId,
+        id: this.depId
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.depInfo = data.data
+        } else {
+          this.$toast(data.msg)
+        }
+      })
     }
   }
 })

src/views/team/team-detail.vue

@@ -4,6 +4,7 @@
     main-bg="bg-white"
     header-bg="bg-white"
     left-arrow
+    :loading="loading"
     @click-left="$router.go(-1)"
   >
     <template slot="right">
@@ -45,7 +46,7 @@
             <div class="grid grid-cols-3 gap-2.5">
               <c-button round @click="$router.push('/team/add-member')">添加成员</c-button>
               <c-button round @click="$router.push('/team/add-department')">添加部门</c-button>
-              <c-button round @click="$router.push('/team/department-management')">部门设置</c-button>
+              <c-button round @click="setDepartment">部门设置</c-button>
             </div>
           </template>
       </div>
@@ -57,6 +58,7 @@
 import Vue from 'vue'
 import { team, contacts } from '@/DTO'
 import { Member } from '@/DTO'
+import {getContacts} from '@/util/Contact'
 
 export default Vue.extend({
   name: 'TeamDetail',
@@ -70,36 +72,68 @@ export default Vue.extend({
   },
   created() {
     this.showRadio = this.$route.query.transfer === '1'
+    this.parentId = this.$route.params.id
+    this.entId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').id
+    this.getStaff(this.parentId)
   },
   data() {
-    let flatTeams: Array<Member> = []
     let currentTeam: Member = {
       id: 0,
       name: ''
     }
     return {
       title: '导航',
+      parentId: '',
+      parentDepId: '',
+      entId: '',
       team,
-      contacts,
+      contacts: {},
       parentTeam: {},
       currentTeam,
-      flatTeams,
       checkedMemberId: [],
       showRadio: false,
-      ifContainChildDep: true
-      // newTeams: []
+      ifContainChildDep: true,
+      loading: false
     }
   },
   methods: {
-    getFlatTeams(arr: Array<Member>) {
-      let newArr: Array<Member> = []
-      for (let i=0; i<arr.length; i++) {
-        newArr.push(arr[i])
-        if (arr[i].children?.length) {
-          newArr = newArr.concat(this.getFlatTeams(arr[i].children as Array<Member>))
+    // 获取成员
+    getStaff(id: string) {
+      this.loading = true
+      this.$service.department.getSub({
+        parentId: id,
+        entId: this.entId,
+        hasStaff: true,
+        isDirect: this.ifContainChildDep
+      }).then((res: any) => {
+        this.loading = false
+        const {data} = res
+        if (data.code === this.$global.success) {
+          this.contacts = getContacts(data.data.staffList || [])
+          this.currentTeam = data.data.dep
+          this.currentTeam.children = data.data.subDepList || []
+          this.parentDepId = data.data.dep.parentId
+          this.getDepInfo(this.parentDepId)
+        } else {
+          this.$toast(data.msg)
         }
-      }
-      return newArr
+      })
+    },
+    getDepInfo(id: string) {
+      this.loading = true
+      this.$service.department.getDep({
+        entId: this.entId,
+        id: id
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.parentTeam = res.data.data
+          res.data.data
+        } else {
+          this.$toast(data.msg)
+        }
+      })
     },
     clickItem(val: Member) {
       this.$router.push(`/team/team/${val.id}`)
@@ -110,17 +144,18 @@ export default Vue.extend({
     clickMember(member: Member) {
       this.$router.push(`/team/team-member/${member.id}`)
     },
+    setDepartment() {
+      const id = this.currentTeam.id
+      this.$router.push(`/team/department-management/${id}`)
+    }
   },
   watch: {
     $route: {
-      handler() {
-        const id = parseInt(this.$route.params.id)
-        this.flatTeams = this.getFlatTeams(this.team)
-        this.currentTeam = this.flatTeams.find(team => team.id === id) as Member
-        const parentId = this.currentTeam.parentId
-        this.parentTeam = this.flatTeams.find(team => team.id === parentId) as Member
+      async handler() {
+        const id = this.$route.params.id
+        this.getStaff(id)
       },
-      immediate: true
+      immediate: false
     }
   }
 })

src/views/team/team-frame.vue

@@ -4,6 +4,7 @@
     <main-page
       main-bg="bg-white"
       header-bg="bg-white"
+      :loading="loading"
       left-arrow
       @click-left="$router.go(-1)"
     >
@@ -24,6 +25,7 @@
         <switch-cell
           title="部门包含子部门成员"
           :checked.sync="ifContainChildDep"
+          @change="handleSwitchChange"
         />
         <!-- 通讯录 -->
         <div class="pb-16">
@@ -44,7 +46,7 @@
             <div class="grid grid-cols-3 gap-2.5">
               <c-button round @click="$router.push('/team/add-member')">添加成员</c-button>
               <c-button round @click="$router.push('/team/add-department')">添加部门</c-button>
-              <c-button round @click="$router.push('/team/department-management')">部门设置</c-button>
+              <c-button round @click="setDepartment">部门设置</c-button>
             </div>
           </template>
         </div>
@@ -55,11 +57,10 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { team } from '@/DTO'
-import { Member } from '@/DTO'
 import {useLocalStorageState} from 'ahooks-vue'
 import { getUserInfo } from '@/util/Bridge'
-import { contacts } from '@/util/Contact'
+import { getContacts } from '@/util/Contact'
+import {Department, Staff} from '@/Interface'
 
 export default Vue.extend({
   name: 'TeamFrame',
@@ -72,48 +73,72 @@ export default Vue.extend({
     'switch-cell': () => import('@/components/common/switch-cell.vue')
   },
   data() {
+    const team: Array<Department> = []
     return {
       title: '导航',
       team,
-      contacts,
+      loading: false,
+      contacts: {},
+      parentId: '166961152260050945',
+      ifContainChildDep: true,
+      enterpriseInfo: {},
+      currentDep: {},
+      // 是否显示check
       checkedMemberId: [],
       showRadio: false,
-      ifContainChildDep: true,
-      enterpriseInfo: {}
     }
   },
   created() {
-    // console.log(Mock, 'mock')
     this.showRadio = this.$route.query.showRadio === '1'
   },
   mounted(){
-    useLocalStorageState('USER_INFO',getUserInfo())
-    // this.$service.enterprise.getEnterpriseInfo({
-    //   id: '166910771849072640'
-    // }).then((res: any)=> {
-    //   const {data} = res
-    //   this.enterpriseInfo = data.data
-    //   this.$store.commit('setEnterpriseInfo', data.data)
-    // })
+    // useLocalStorageState('USER_INFO',getUserInfo())
+    this.getEntInfo()
     this.getStaff()
   },
   methods: {
+    getEntInfo() {
+      this.loading = true
+      this.$service.enterprise.getEnterpriseInfo({
+        id: '166961152260050944'
+      }).then((res: any)=> {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          localStorage.setItem('ENT_INFO', JSON.stringify(data.data))
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
     // 获取成员
     getStaff() {
+      this.loading = true
       this.$service.department.getSub({
-        parentId: '166910771849072641',
-        entId: '166910771849072640',
+        parentId: this.parentId,
+        entId: '166961152260050944',
         hasStaff: true,
         isDirect: this.ifContainChildDep
       }).then((res: any) => {
-        console.log(res.data, 'data')
+        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: Member) {
+    clickMember(member: Staff) {
       this.$router.push(`/team/team-member/${member.id}`)
     },
-    clickItem(val: Member) {
-      // console.log(val)
+    clickItem(val: Department) {
       if (this.showRadio) {
         this.$router.push({
           path: `/team/team/${val.id}`,
@@ -123,7 +148,17 @@ export default Vue.extend({
         })
         return
       }
+      console.log(val, 'del')
       this.$router.push(`/team/team/${val.id}`)
+    },
+    // 切换成员显示
+    handleSwitchChange(val: boolean) {
+      this.getStaff()
+    },
+    // 部门设置
+    setDepartment() {
+      const id = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
+      this.$router.push(`/team/department-management/${id}`)
     }
   }
 })

tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
       colors:{
         'common-bg': '#F6F7F8',
         'color-primary': '#4F62C1',
+        'color-primary-light': '#D5DCFF',
         'color-primary-lighter': '#61C7FF',
         'text-primary': '#24374E',
         'text-primary-dark': '#0D73AD',
@@ -83,7 +84,8 @@ module.exports = {
         82: '20.375rem',
       },
       zIndex: {
-        '-1': '-1'
+        '-1': '-1',
+        '2001': '2001'
       },
       boxShadow: {
         bg: '0px 2px 24px 0px #D7E7EF',