Merge remote-tracking branch 'origin/main' into ls_tev

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/request.vue

@@ -3,7 +3,6 @@
     <!-- 头像 -->
     <div class=" mr-2 mt-5">
       <img src="../../assets/icons/avator.png" alt="" srcset="" class="w-9 ">
-      <img :src="detail.path" alt="" srcset="" class="w-9 ">
     </div>
     <!-- 申请详情 -->
     <div class=" bg-white rounded-xl w-full">

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/request-managemant.vue

 <template>
   <div class=" ">
-    <main-page left-arrow @click-left="$router.go(-1)" class="">
+    <main-page left-arrow @click-left="$router.go(-1)" class=" relative">
       <template slot="right">
         <app-icon
           type="png"
@@ -18,7 +18,6 @@
           <div v-for="(detail,index) in item.children.info" :key="index">
             <request :detail="detail" class=" pb-4" />
           </div>
-          
         </div>
       </div>
     </main-page>
@@ -28,15 +27,6 @@
 <script lang="ts">
 import Vue from 'vue';
 
-// export interface info{
-//     path:string
-//     name:string,
-//     request:string,
-//     reason?:string,
-//     current:string,
-//     time:string
-// }
-
 export interface list{
     id:number,
     time:string,

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-QRcode.vue

@@ -13,9 +13,9 @@
         <img src="../assets/qrcode.png" alt="" srcset="" class=" absolute w-32 top-44 left-0 right-0 mx-auto ">
         <p class=" text-white absolute top-82 left-0 right-0 mx-auto text-center text-sm"> 扫描二维码加入我们Chat33的团队</p>
       </div>
-      <div class="mx-4">
-        <c-button round buttonBg="bg-color-primary" class="">点击生成图片去分享</c-button>
-        <c-button round buttonBg="bg-white" class=" text-text-primary">进入团队工作台</c-button>  
+      <div class="mx-4 pb-6">
+        <c-button round class="">点击生成图片去分享</c-button>
+        <c-button round type="secondary" class=" mt-3">进入团队工作台</c-button>  
       </div>
     </div>
          

src/views/team-create.vue

@@ -5,19 +5,26 @@
       @click-left="handleClickLeft"
     >
       <div class="mx-4 pt-14">
-        <teamcreate class=" mb-4 mt-2.5" >
-          <template v-slot:title>企业/组织/团队名称</template>
-          <template v-slot:limit>20</template>
-        </teamcreate>
-        <teamcreate class="" hint="请填写真实姓名">
-          <template v-slot:title>负责人真实姓名</template>
-          <template v-slot:limit>20</template>
-        </teamcreate>
-
+        <input-cell
+        v-model="team_name"
+        required
+        :limit="20"
+        label="企业/组织/团队名称"
+        placeholder="请输入团队名称"
+        error-msg="团队名称不能为空"
+      />
+        <input-cell
+        v-model="name"
+        required
+        :limit="20"
+        label="负责人真实姓名"
+        placeholder="请输入真实姓名"
+        error-msg="姓名不能为空"
+      />
         <p class="note text-text-primary text-base mt-36 ml-3">
         默认创建团队的人为团队负责人
         </p>
-        <c-button round buttonBg="bg-color-primary" class="text-white mt-16" @click="$router.push('/team-QRcode')">确定</c-button>
+        <c-button round buttonBg="bg-color-primary" class="text-white mt-16" @click="toConfirm">确定</c-button>
 
       </div>     
     </main-page>
@@ -27,19 +34,50 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { Dialog } from 'vant';
 
 export default Vue.extend({
   name:'createteam',
   components:{
     'main-page': () => import('@/layout/main-page.vue'), 
-    'teamcreate': () => import('@/components/Team/c-input.vue'), 
+    'input-cell': () => import('./components/input-cell.vue'),
     'c-button': () => import('./components/c-button.vue')
   },
+  data(){
+    return{
+      team_name:'杭州复杂美科技有限公司',
+      name:''
+    }
+  },
+  props:{
+    isValid:{
+      type:Boolean,
+      default:true
+    }
+  },
   methods: {
     handleClickLeft() {
       console.log('click left')
+    },
+    toConfirm(){
+      // 团队名是否同名判断
+      if(!this.isValid) {
+        this.$router.push('/team-QRcode')
+      }else{
+        Dialog.confirm({
+          title: '提示',
+          message: '已存在同名团队，如果你是该团队成员，请申请加入团队，或者更换团队名称后再试',
+          confirmButtonText:'申请加入'
+        })
+        .then(() => {
+          this.$router.push('/team-QRcode')
+        })
+        .catch(() => {
+          Dialog.close()
+        });
+      }
+    }
   }
-}
 });
 </script>
 

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

@@ -31,9 +31,9 @@
       <div class="mt-4">
         <c-cell dot title="团队管理权限" content="共3人" @click="$router.push('/auth-management')" />
         <c-cell dot title="转让负责人" @click="transferManagement"/>
-        <c-cell dot title="申请管理" />
+        <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('取消解散')
+      })
     }
   }
 })

tailwind.config.js

@@ -32,10 +32,6 @@ module.exports = {
         50: '12.5rem',
         82: '20.375rem',
       },
-      inset:{
-        21.25:'5.3125rem',
-        22.375:'5.59375rem',
-      },
       height:{
         113.5:'28.375rem',
       },