Merge branch 'mian_20210904_sxf'

src/components/common/switch-cell.vue

 <template>
   <div
-    class="mb-px flex text-text-primary items-center justify-between bg-white px-4 py-3 rounded"
+    class="mb-px flex text-text-primary items-center justify-between px-4 py-3 rounded"
+    :class="className"
   > 
     <div class="flex items-center justify-between flex-1 mr-1.5">
       <div class="title flex-shrink-0 mr-4">{{ title }}</div>
     </div>
-    <van-switch :value="checked" size="20px" @change='change' />
+    <van-switch
+      active-color="#4F62C1"
+      :value="checked"
+      size="20px"
+      @change='change'
+    />
   </div>
 </template>
 
@@ -24,6 +30,10 @@ export default Vue.extend({
     checked: {
       type: Boolean,
       default: false
+    },
+    className: {
+      type: String,
+      default: 'bg-white'
     }
   },
   name: 'SwitchCell',

src/router/team.ts

@@ -139,7 +139,7 @@ export const teamRoutes: Array<RouteConfig> = [
         name: 'SelectTeam',
         component: () => import('@/views/team/select-team.vue'),
         meta:{
-          title:'选择团队'
+          title:'选择部门'
         }
       },
       {
@@ -147,7 +147,7 @@ export const teamRoutes: Array<RouteConfig> = [
         name: 'SelectTeamDetail',
         component: () => import('@/views/team/select-team.vue'),
         meta:{
-          title:'选择团队'
+          title:'选择部门'
         }
       },
       {

src/views/team/add-department.vue

@@ -2,7 +2,7 @@
   <!-- 添加部门 -->
   <main-page
     left-arrow
-    @click-left="$router.go(-1)"
+    @click-left="$router.push('/team')"
   >
     <div class="pt-14 px-4">
       <input-cell
@@ -14,7 +14,11 @@
         error-msg="名称不能为空"
       />
       <group-cell class="mt-4" title="部门主管">
-        <c-cell dot title="默认为添加的人，主管即为群主" />
+        <c-cell
+          dot
+          title="默认为添加的人，主管即为群主"
+          @click="selectCharger"
+        />
       </group-cell>
       <group-cell class="mt-4" title="所属团队">
         <c-cell dot title="杭州复杂美科技有限公司" />
@@ -39,12 +43,22 @@ export default Vue.extend({
     // 'switch-cell': () => import('./components/switch-cell.vue'),
     'group-cell': () => import('@/components/common/group-cell.vue')
   },
-  name: 'DepartmentManagement',
+  name: 'AddDepartment',
   data() {
     return {
       name: '产品部',
       check: false
     }
+  },
+  methods: {
+    selectCharger() {
+      this.$router.push({
+        path: '/team/team-frame',
+        query: {
+          showRadio: '1'
+        }
+      })
+    }
   }
 })
 </script>

src/views/team/add-member.vue

@@ -41,15 +41,21 @@
           :content="date"
           @click="show = true"
         />
-        <van-calendar  v-model="show" :round="false" color="#61C7FF" @confirm="onConfirm" :show-confirm="false" :style="{ height:'100%'}" />  
+        <van-calendar
+          v-model="show"
+          :round="false"
+          color="#4F62C1"
+          @confirm="onConfirm"
+          :show-confirm="false"
+          :style="{ height:'100%'}"
+        />  
         <!-- 选择部门 --> 
         <group-cell
           dot
           class="mt-4" title="所属部门"
           @click="$router.push('/team/select-team')"
         >
-          <c-cell title="产品设计部(主要部门)" />
-          <c-cell title="设计部(子部门)" />
+          <c-cell title="产品设计部" />
         </group-cell>
         <!--按钮-->
         <div class="fixed bottom-0 left-0 w-full px-4 py-1.5 bg-common-bg">
@@ -68,7 +74,7 @@ import Vue from 'vue'
 import { Calendar } from 'vant';
 Vue.use(Calendar);
 export default Vue.extend({  
-  name: 'File',
+  name: 'AddMember',
   components: {
     'main-page': () => import('@/layout/main-page.vue'),
     'input-cell': () => import('@/components/common/input-cell.vue'),
@@ -77,7 +83,7 @@ export default Vue.extend({
     'group-cell': () => import('@/components/common/group-cell.vue')
   },
   created() {
-    // console.log(Mock, 'mock')
+    this.depId = (this.$route.query.teamId || '') as string
   },
   data() {
     return {
@@ -86,7 +92,8 @@ export default Vue.extend({
       tel: '',//电话号码     
       digit: '',//员工编号  
       date: '请选择入职时间',//入职时间
-      show:false,//日期弹窗    
+      show:false,//日期弹窗
+      depId: ''
     }
   },
   methods: {

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

@@ -9,7 +9,7 @@
     <div class="ml-3">{{ member.name }}</div>
     <div
       v-if="member.isDirector || member.isLeader"
-      class="tag ml-1.5 text-xs text-white px-1 py-0.5 bg-color-primary-lighter rounded"
+      class="tag ml-1.5 text-xs text-white px-1 py-0.5 bg-color-primary rounded"
     >
       {{ member.isLeader ? '负责人' : '主管'}}
     </div>

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

 <template>
   <!-- 通讯录 -->
   <div class="team-contacts relative">
+    <!-- 右侧导航 -->
     <div class="nav-wrapper fixed top-1/2 transform -translate-y-1/2 right-0 w-6 z-20">
       <div
         v-for="(nav, index) in navs"
@@ -12,6 +13,7 @@
         {{ nav }}
       </div>
     </div>
+    <!-- 主管负责人 -->
     <div class="leaders">
       <div
         v-for="(leader, index) in leaders"
@@ -40,13 +42,14 @@
         <contact-member :member="leader" @click="clickMember"/>
       </div>
     </div>
+    <!-- 成员 -->
     <div class="members">
       <div
         v-for="(value, key) in contacts"
         :key="key"
         :ref="key"
       >
-        <div class="text-text-secondary py-1 sticky top-12 bg-common-bg z-10">{{ key }}</div>
+        <div class="text-text-secondary py-1 sticky top-12 bg-white z-10">{{ key }}</div>
         <div
           v-for="(member, index) in contacts[key]"
           :key="index"

src/views/team/select-team.vue

 <template>
-  <!-- 选择团队 -->
+  <!-- 选择部门 -->
   <div class="select-team">
-    <main-page left-arrow @click-left="$router.go(-1)">
+    <main-page left-arrow @click-left="$router.push('/team')">
       <template slot="right">
         <app-icon
           type="png"
@@ -25,33 +25,6 @@
             
           </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
@@ -92,7 +65,11 @@
             </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">
+        <div
+          v-if="checked !== 0"
+          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>
@@ -111,6 +88,12 @@ export default Vue.extend({
     'app-icon': () => import('@/components/common/Icon.vue'),
     'c-button': () => import('@/components/common/c-button.vue')
   },
+  beforeRouteEnter(to, from, next) {
+    console.log(to, from)
+    next((vm: any) => {
+      vm.fromPath = from.path
+    })
+  },
   created() {
     // console.log(this.team, 'team')
   },
@@ -121,7 +104,8 @@ export default Vue.extend({
       flatTeams,
       checked: 0,
       selectedIds,
-      currentTeamId: 0
+      currentTeamId: 0,
+      fromPath: ''
     }
   },
   computed: {
@@ -138,101 +122,37 @@ export default Vue.extend({
     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) {
-      if (team.id !== this.checked) return
       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
-        }
-      })
+      this.checked = 0
     },
     // 选择
     selectTeam(team: Member) {
-      if (this.checked === team.id) return
-      if (this.currentTeamId === 0) {
-        this.selectedIds = []
+      if (this.checked === team.id) {
+        this.checked = 0
+        return
       }
       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)
+    // 确认选择
+    confirm() {
+      this.$router.push({
+        path: this.fromPath,
+        query: {
+          teamId: String(this.checked)
         }
-      }
-      
+      })
     }
   }
 })

src/views/team/team-detail.vue

 <template>
   <!-- 团队详情 -->
-  <main-page left-arrow @click-left="$router.go(-1)">
+  <main-page
+    main-bg="bg-white"
+    header-bg="bg-white"
+    left-arrow
+    @click-left="$router.go(-1)"
+  >
     <template slot="right">
       <app-icon
         type="png"
@@ -16,6 +21,11 @@
         :pre-team="parentTeam.name"
         @click-child="clickItem"
       />
+      <!-- 显示成员是否包含子部门成员 -->
+      <switch-cell
+        title="部门包含子部门成员"
+        :checked.sync="ifContainChildDep"
+      />
       <!-- 通讯录 -->
       <div class="pb-16">
         <div class="text-text-secondary py-1">成员</div>
@@ -27,7 +37,7 @@
         />
       </div>
       <!-- 底部操作 -->
-      <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
+      <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
         <template v-if="showRadio">
             <c-button round @click="$router.push('/team/team-management')">确定</c-button>
           </template>
@@ -55,7 +65,8 @@ export default Vue.extend({
     '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')
+    'c-button': () => import('@/components/common/c-button.vue'),
+    'switch-cell': () => import('@/components/common/switch-cell.vue')
   },
   created() {
     this.showRadio = this.$route.query.transfer === '1'
@@ -74,7 +85,8 @@ export default Vue.extend({
       currentTeam,
       flatTeams,
       checkedMemberId: [],
-      showRadio: false
+      showRadio: false,
+      ifContainChildDep: true
       // newTeams: []
     }
   },

src/views/team/team-frame.vue

 <template>
   <!-- 团队架构 -->
   <div class="team-frame">
-    <main-page left-arrow @click-left="$router.go(-1)">
+    <main-page
+      main-bg="bg-white"
+      header-bg="bg-white"
+      left-arrow
+      @click-left="$router.go(-1)"
+    >
       <template slot="right">
         <app-icon
           type="png"
@@ -15,6 +20,11 @@
           :tree-data="team"
           @click-child="clickItem"
         />
+        <!-- 显示成员是否包含子部门成员 -->
+        <switch-cell
+          title="部门包含子部门成员"
+          :checked.sync="ifContainChildDep"
+        />
         <!-- 通讯录 -->
         <div class="pb-16">
           <div class="text-text-secondary py-1">成员</div>
@@ -26,7 +36,7 @@
           />
         </div>
         <!-- 底部操作 -->
-        <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
+        <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
           <template v-if="showRadio">
             <c-button round @click="$router.go(-1)">确定</c-button>
           </template>
@@ -55,11 +65,12 @@ export default Vue.extend({
     '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')
+    'c-button': () => import('@/components/common/c-button.vue'),
+    'switch-cell': () => import('@/components/common/switch-cell.vue')
   },
   created() {
     // console.log(Mock, 'mock')
-    this.showRadio = this.$route.query.transfer === '1'
+    this.showRadio = this.$route.query.showRadio === '1'
   },
   mounted(){
     let res = this.$service.department.getSub({
@@ -75,7 +86,8 @@ export default Vue.extend({
       team,
       contacts,
       checkedMemberId: [],
-      showRadio: false
+      showRadio: false,
+      ifContainChildDep: true
     }
   },
   methods: {

src/views/team/team-management.vue

@@ -93,7 +93,7 @@ export default Vue.extend({
       this.$router.push({
         path: '/team/team-frame',
         query: {
-          transfer: '1'
+          showRadio: '1'
         }
       })
     },

src/views/team/two-code.vue

@@ -67,7 +67,7 @@ export default Vue.extend({
   },
   methods: {
     handleClickLeft() {
-      this.$router.go(-1)
+      this.$router.push('/team')
     },
     
   }

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
     extend: {
       colors:{
         'common-bg': '#F6F7F8',
-        'color-primary': '#32B2F7',
+        'color-primary': '#4F62C1',
         'color-primary-lighter': '#61C7FF',
         'text-primary': '#24374E',
         'text-primary-dark': '#0D73AD',