选择部门页面开发

src/DTO/contacts.ts

@@ -59,7 +59,15 @@ for (const key in contacts) {
     contacts[key].push(person)
   }
 }
+
+let flatContacts: Array<Person> = []
+
+for (const key in contacts) {
+  flatContacts = flatContacts.concat(contacts[key])
+}
+
 export {
   contacts,
+  flatContacts,
   Person
 }
\ No newline at end of file

src/DTO/index.ts

@@ -15,7 +15,7 @@
 //   ]
 // })
 
-import { contacts, Person } from './contacts'
+import { contacts, Person, flatContacts } from './contacts'
 
 interface Member {
   parentId?: number,
@@ -58,13 +58,45 @@ const team = [{
   }, {
     parentId: 0,
     id: 3,
-    name: '运营部'
+    name: '运营部',
+    // children: [{
+    //   parentId: 3,
+    //   id: 31,
+    //   name: '运营子部门',
+    // }]
   }]
 }]
 
+
+function getFaltArray(arr: Array<any>) {
+  let newArr: Array<any> = []
+  for (let i=0; i<arr.length; i++) {
+    newArr.push(arr[i])
+    if (arr[i].children?.length) {
+      newArr = newArr.concat(getFaltArray(arr[i].children))
+    }
+  }
+  return newArr
+}
+
+const flatTeams = getFaltArray(team)
+
+// 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>))
+//     }
+//   }
+//   return newArr
+// },
+
 export {
   team,
+  flatTeams,
   contacts,
+  flatContacts,
   Person,
   Member
 }
\ No newline at end of file

src/router/index.ts

@@ -25,6 +25,10 @@ const routes: Array<RouteConfig> = [
    * 部门管理 /department-management
    * 添加部门 /add-department
    * 团队权限管理 /auth-management
+   * 成员二维码 /two-code
+   * 申请管理 /request-management
+   * 添加成员 /file
+   * 选择部门 /select-team
    * 
   */
   {
@@ -133,6 +137,22 @@ const routes: Array<RouteConfig> = [
       title:'申请管理'
     }
   },
+  {
+    path: '/select-team',
+    name: 'SelectTeam',
+    component: () => import('@/views/select-team.vue'),
+    meta:{
+      title:'选择团队'
+    }
+  },
+  {
+    path: '/select-team/:id',
+    name: 'SelectTeamDetail',
+    component: () => import('@/views/select-team.vue'),
+    meta:{
+      title:'选择团队'
+    }
+  },
 ]
 
 const router = new VueRouter({

src/style.less

@@ -7,6 +7,11 @@ input {
   -webkit-tap-highlight-color: rgba(0,0,0,0); /*点击高亮的颜色*/
 }
 
+body {
+  color: #24374E;
+}
+
+// vant ui组件样式
 .van-dialog {
   border-radius: 4px;
   &__header {
@@ -24,7 +29,7 @@ input {
     text-align: left;
   }
   &__content {
-    padding: 12px 16px;
+    padding: 22px 16px;
   }
   &__message {
     padding: 0;

src/views/components/team-contacts.vue

@@ -83,7 +83,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Person } from '@/DTO/contacts'
+import { Person } from '@/DTO'
 import { Member } from '@/DTO'
 
 export default Vue.extend({

src/views/select-team.vue

+<template>
+  <!-- 选择团队 -->
+  <div class="select-team">
+    <main-page left-arrow @click-left="$router.go(-1)">
+      <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 pb-16">
+        <!-- 顶部 -->
+        <div class="bread">
+          <template v-if="currentTeamId === 0">
+            <div class="font-medium py-3.5">杭州复杂美科技有限公司</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">{{ currentTeam.name }}</div>
+            </div>
+            
+          </template>
+        </div>
+        <!-- 标签 -->
+        <div class="tag-wrapper mt-1 flex flex-wrap text-text-secondary text-sm">
+          <div
+            v-if="tags.length < 1"
+            class="empty"
+          >
+            暂未选择部门
+          </div>
+          <template v-else>
+            <div
+              v-for="tag in tags"
+              :key="tag.id"
+              class="tag text-sm px-2.5 py-1 border border-color-primary rounded-full text-color-primary relative mr-5 my-2"
+            >
+              <div
+                class="absolute -left-2 -top-0.5"
+                @click="removeTag(tag)"
+              >
+                <app-icon
+                  icon-name="close-tag"
+                  class-name="w-4 h-4"
+                />
+              </div>
+              {{ tag.name }}
+            </div>
+          </template>
+        </div>
+        <!-- 部门列表 -->
+        <div class="list mt-1.5">
+          <div
+            v-for="t in currentTeam.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="checked === t.id"
+                  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
+              v-if="checked === t.id && t.children && t.children.length > 0"
+              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 v-if="showConfirmBtn" class="action fixed bottom-0 left-0 w-full px-4 py-2 z-10 bg-common-bg">
+          <c-button round>确定</c-button>
+        </div>
+      </div>
+    </main-page>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { team, flatTeams, Member } from '@/DTO'
+
+export default Vue.extend({
+  name: 'SelectTeam',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-button': () => import('./components/c-button.vue')
+  },
+  created() {
+    // console.log(this.team, 'team')
+  },
+  data() {
+    const selectedIds: Array<number> = []
+    return {
+      team,
+      flatTeams,
+      checked: 0,
+      selectedIds,
+      currentTeamId: 0
+    }
+  },
+  computed: {
+    tags() {
+      const arr: Array<Member> = []
+      this.selectedIds.forEach(id => {
+        const index = this.flatTeams.findIndex(team => team.id === id)
+        if (index > -1) {
+          arr.push(this.flatTeams[index])
+        }
+      })
+      return arr
+    },
+    currentTeam(): Member {
+      // return this.flatTeams.find(team => team.id === this.currentTeamId)
+      return this.findTeamById(this.currentTeamId, this.flatTeams) as Member
+    },
+    showConfirmBtn() {
+      let check = false
+      // const team = this.flatTeams.find(item => item.id === this.checked)
+      const team = this.findTeamById(this.checked, this.flatTeams) as Member
+      if (typeof team.children === 'undefined' || team.children.length < 1) {
+        check = true
+      }
+      return check
+    }
+  },
+  methods: {
+    // 下一级
+    goNext(team: Member) {
+      this.currentTeamId = team.id
+      this.setChecked()
+    },
+    // 所有部门
+    goPre() {
+      this.currentTeamId = this.currentTeam.parentId || 0
+      this.setChecked()
+    },
+    setChecked() {
+      this.currentTeam.children?.forEach(child => {
+        if (this.selectedIds.indexOf(child.id) > -1) {
+          this.checked = child.id
+        }
+      })
+    },
+    // 选择
+    selectTeam(team: Member) {
+      if (this.checked === team.id) return
+      if (this.currentTeamId === 0) {
+        this.selectedIds = []
+      }
+      this.checked = team.id
+      // const index = this.selectedIds.findIndex(id => id === team.id)
+      const index = this.findIndexById(team.id, this.selectedIds)
+      if (index < 0) {
+        this.selectedIds.push(team.id)
+      }
+    },
+    findIndexById(id: number | string, target: Array<string | number>) {
+      return target.findIndex(item => item === id)
+    },
+    findTeamById(id: number | string, teamArr: Array<Member>) {
+      return teamArr.find(team => team.id === id)
+    },
+    // 移除
+    removeTag(tag: Member) {
+      // const index = this.selectedIds.findIndex(id => id === tag.id)
+      const index = this.findIndexById(tag.id, this.selectedIds)
+      this.selectedIds.splice(index, 1)
+      this.checked = 0
+      // const removeTeam = this.findTeamById(tag.id, this.flatTeams)
+      // if (typeof removeTeam !== 'undefined' && removeTeam.children && removeTeam.children.length > 0) {
+      //   removeTeam.children.forEach((item: Member) => {
+      //     // const index = this.selectedIds.findIndex(id => id === item.id)
+      //     const index = this.findIndexById(item.id, this.selectedIds)
+      //     if (index > -1) {
+      //       this.selectedIds.splice(index, 1)
+      //     }
+      //   })
+      // }
+      this.removeTags(tag.id, this.selectedIds, this.flatTeams)
+      this.checked = tag.parentId || 0
+      this.currentTeamId = tag.parentId || 0
+    },
+    // 递归删除选择的子部门
+    removeTags(id: number | string, idArr: Array<number | string>, teams: Array<Member>) {
+      const removeTeam = this.findTeamById(id, this.flatTeams)
+      if (typeof removeTeam !== 'undefined' && removeTeam.children && removeTeam.children.length > 0) {
+        removeTeam.children.forEach((child: Member) => {
+          const index = this.findIndexById(child.id, this.selectedIds)
+          if (index > -1) {
+            this.selectedIds.splice(index, 1)
+          }
+          if (child.children && child.children.length) {
+            this.removeTags(child.id, idArr, teams)
+          }
+        })
+      }
+    }
+  },
+  watch: {
+    checked(newVal, oldVal) {
+      const check = this.currentTeam.children?.find(item => item.id === oldVal)
+      if (typeof check !== 'undefined') {
+        const index = this.findIndexById(oldVal, this.selectedIds)
+        if (index > -1) {
+          this.selectedIds.splice(index, 1)
+        }
+      }
+      
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/team-frame.vue

 <template>
+  <!-- 团队架构 -->
   <div class="team-frame">
     <main-page left-arrow @click-left="$router.go(-1)">
       <template slot="right">

src/views/team-management.vue

@@ -33,7 +33,7 @@
         <c-cell dot title="转让负责人" @click="transferManagement"/>
         <c-cell dot title="申请管理" @click="$router.push('/request-management')" />
       </div>
-      <c-button round type="secondary" class="mt-16">
+      <c-button round type="secondary" class="mt-16" @click="deleteTeam">
         解散团队
       </c-button>
     </div>
@@ -62,6 +62,17 @@ export default Vue.extend({
           transfer: '1'
         }
       })
+    },
+    deleteTeam() {
+      this.$dialog.confirm({
+        title: '提示',
+        message: '解散团队将同时解散团队所有相关的群和员工信息，确定删除吗？',
+        confirmButtonText: '解散'
+      }).then(() => {
+        console.log('解散')
+      }).catch(() => {
+        console.log('取消解散')
+      })
     }
   }
 })