通讯录选择/弹窗样式修改/团队权限管理

src/components/common/Icon.vue

 <template>
   <fragment>
     <div v-if="type==='png'" :class="className" @click="handleClick">
-      <img :src="path" class="object-cover object-center  " >
+      <img :src="path ? path : require(`@/assets/icons/${iconName}.png`)" class="object-cover object-center  " >
     </div>
     <svg v-else aria-hidden="true" :height="size" :width="size" :fill="color" @click="handleClick">
       <use :xlink:href="'#'+name" ></use> 
@@ -17,7 +17,7 @@ export default Vue.extend({
   props: {
     type: {
       type:String,
-      default:'svg'
+      default:'png'
     },
     size:{
       type:String,
@@ -32,6 +32,7 @@ export default Vue.extend({
       default:'icon-anquanzhongxin89'
     },
     path: String,
+    iconName: String,
     className: String,
   },
   methods: {

src/layout/main-page.vue

@@ -7,7 +7,7 @@
             <app-icon
               type="png"
               class-name="w-6.5 w-6.5"
-              :path="require('@/assets/icons/left-arrow.png')"
+              icon-name="left-arrow"
               @click="clickLeft"
             />
           </template>

src/main.ts

@@ -5,10 +5,10 @@ import router from './router'
 import store from './store'
 import "tailwindcss/tailwind.css"
 import './style.less'
-// import { ConfigProvider }from 'vant'
+import { Dialog }from 'vant'
 Vue.config.productionTip = false
 
-// Vue.use(ConfigProvider)
+Vue.use(Dialog)
 
 new Vue({
   router,

src/router/index.ts

@@ -24,6 +24,7 @@ const routes: Array<RouteConfig> = [
    * 团队二维码 /team-QRcode
    * 部门管理 /department-management
    * 添加部门 /add-department
+   * 团队权限管理 /auth-management
    * 
   */
   {
@@ -111,6 +112,14 @@ const routes: Array<RouteConfig> = [
       title: '成员二维码'
     }
   },
+  {
+    path: '/auth-management',
+    name: 'AuthManagement',
+    component: () => import('@/views/auth-management.vue'),
+    meta: {
+      title: '团队管理权限'
+    }
+  },
 ]
 
 const router = new VueRouter({

src/style.less

@@ -5,4 +5,32 @@ input {
   // border: none; /*去除边框*/
   -webkit-appearance: none;/*常用于IOS下移除原生样式*/
   -webkit-tap-highlight-color: rgba(0,0,0,0); /*点击高亮的颜色*/
+}
+
+.van-dialog {
+  border-radius: 4px;
+  &__header {
+    text-align: center;
+    font-size: 14px;
+    color: #8A97A5;
+    height: 60px;
+    padding: 0;
+    line-height: 60px;
+  }
+  &__content,
+  &__message {
+    color: #24374E;
+    font-size: 16px;
+    text-align: left;
+  }
+  &__content {
+    padding: 12px 16px;
+  }
+  &__message {
+    padding: 0;
+  }
+  .van-button {
+    color: #32B2F7;
+    height: 48px;
+  }
 }
\ No newline at end of file

src/views/auth-management.vue

+<template>
+  <!-- 团队权限管理 -->
+  <div class="auth-management">
+    <main-page left-arrow @click-left="$router.go(-1)">
+      <div class="px-4 pt-14">
+        <div class="bg-white rounded px-4">
+          <div class="title py-1.5 text-sm text-text-secondary">权限范围</div>
+          <div class="content py-3 text-text-primary">
+            <div class="">1.可以添加、管理部门</div>
+            <div class="">2.可以添加、删除部门成员</div>
+          </div>
+        </div>
+        <!-- 负责人 -->
+        <div class="text-xs text-text-secondary mt-4">负责人</div>
+        <div class="flex items-center py-2">
+          <app-icon
+            icon-name="avator"
+            class-name="h-9 w-9 flex-shrink-0"
+          />
+          <div class="name truncate ml-3">负责人姓名</div>
+        </div>
+        <!-- 管理员 -->
+        <div class="text-xs text-text-secondary mt-2">管理员</div>
+        <!-- 没有管理员 -->
+        <div
+          v-if="list.length < 1"
+          class="text-text-secondary text-center text-sm pt-2"
+        >
+          暂无管理员
+        </div>
+        <div v-else>
+          <div
+            v-for="member in list"
+            :key="member.id"
+            class="flex items-center py-2"
+          >
+            <app-icon
+              icon-name="avator"
+              class-name="h-9 w-9 flex-shrink-0"
+            />
+            <div class="name truncate mx-3">{{ member.name }}</div>
+            <app-icon
+              icon-name="minus-round"
+              class-name="h-6 w-6 flex-shrink-0 ml-auto"
+              @click="removeManager(member.id)"
+            />
+          </div>
+          <c-button type="text" class="mt-4" @click="addManager">
+            <template slot="icon">
+              <app-icon
+                type="png"
+                icon-name="plus"
+                class-name="w-6 h-6"
+              />
+            </template>
+            添加管理员
+          </c-button>
+        </div>
+        </div>
+    </main-page>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'AuthManagement',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-button': () => import('./components/c-button.vue')
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          name: '管理员1'
+        },
+        {
+          id: 2,
+          name: '管理员2'
+        }
+      ]
+    }
+  },
+  methods: {
+    removeManager(id: number | string) {
+      this.list = this.list.filter(item => item.id !== id)
+    },
+    addManager() {
+      this.$router.push({
+        path: '/team-frame',
+        query: {
+          transfer: '1'
+        }
+      })
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/components/c-button.vue

 <template>
   <button
-    class="py-2.5 text-center w-full"
+    class="py-2.5 text-center w-full flex items-center justify-center"
     :class="getClass"
     :disabled="disabled"
     @click="clickButton"
-  >
+  > 
+    <div class="mr-1">
+      <slot name="icon" />
+    </div>
     <slot>按钮</slot>
   </button>
 </template>
@@ -42,8 +45,14 @@ export default Vue.extend({
         case 'secondary':
           className = `${className} bg-white text-text-primary`
           break
+        case 'text':
+          className = `${className} bg-none text-color-primary`
       }
-      return this.disabled ? `${className} bg-button-disabled` : `${className}`
+      return this.disabled 
+        ? this.type === 'text'
+        ? `${className} bg-none text-text-secondary` 
+        : `${className} bg-button-disabled text-white`
+        : `${className}`
     }
   },
   methods: {

src/views/components/c-cell.vue

@@ -5,15 +5,26 @@
   > 
     <div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div>
     <div class="flex py-3 items-center justify-between">
-      <div class="flex items-center justify-between flex-1 mr-1.5">
+      <div class="flex items-center justify-between flex-1">
         <div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div>
-        <div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div>
+        <!-- 输入框 -->
+        <template v-if="type === 'input'">
+          <input
+            class="w-full text-right text-sm text-text-secondary focus:text-text-primary"
+            type="text"
+            :value="content"
+            :placeholder="placeholder"
+          >
+        </template>
+        <template v-else>
+          <div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div>
+        </template>
       </div>
       <app-icon
         v-if="dot"
         type="png"
         :path="require('@/assets/icons/dot.png')"
-        class-name="h-5 w-1 ml-auto flex-shrink-0"
+        class-name="h-5 w-1 ml-auto flex-shrink-0 ml-1.5"
       />
     </div>
   </div>
@@ -33,6 +44,14 @@ export default Vue.extend({
       type: Boolean,
       default: false
     },
+    type: {
+      type: String,
+      default: 'content'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入...'
+    },
     label: String,
     content: String
   },

src/views/components/contact-member.vue

 <template>
   <!-- 通讯录成员 -->
-  <div class="flex items-center py-2">
+  <div class="flex items-center py-2 border border-transparent w-full" @click="handleClick(member)">
     <app-icon 
       type="png"
       :path="require('@/assets/icons/avator.png')"
@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { Member } from '@/DTO'
 
 export default Vue.extend({
   components:{ 
@@ -32,6 +33,11 @@ export default Vue.extend({
         return {}
       }
     }
+  },
+  methods: {
+    handleClick(member: Member) {
+      this.$emit('click', member)
+    }
   }
 })
 </script>

src/views/components/team-contacts.vue

@@ -17,9 +17,27 @@
         v-for="(leader, index) in leaders"
         :key="index"
         class="flex items-center color-color-primary font-normal"
-        @click="clickMember(leader)"
       >
-        <contact-member :member="leader" />
+        <!-- 设置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">
@@ -32,9 +50,31 @@
         <div
           v-for="(member, index) in contacts[key]"
           :key="index"
-          @click="clickMember(member)"
+          class="flex items-center"
         >
-          <contact-member :member="member" />
+          <!-- 设置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>
@@ -53,10 +93,20 @@ export default Vue.extend({
       default() {
         return {}
       }
+    },
+    radio: {
+      type: Boolean,
+      default: false
+    },
+    checked: {
+      type: Array,
+      default() {
+        return []
+      }
     }
   },
   components:{ 
-    // 'app-icon':()=>import('@/components/common/Icon.vue'),
+    'app-icon':()=>import('@/components/common/Icon.vue'),
     'contact-member': () => import('./contact-member.vue')
     // 'contact-member-group': () => import('./contact-member-group.vue')
   },
@@ -120,8 +170,21 @@ export default Vue.extend({
       document.documentElement.scrollTop = this.scrollTop + top - 48
     },
     clickMember(member: Member) {
-      console.log(member, 'member')
+      if(this.radio) {
+        this.handleCheck(member)
+        return
+      }
       this.$router.push(`/team-member/${member.id}`)
+    },
+    handleCheck(member: Member) {
+      let arr = Array.from(this.checked)
+      const index = arr.findIndex(id => id === member.id)
+      if (index > -1) {
+        arr.splice(index, 1)
+      } else {
+        arr.push(member.id)
+      }
+      this.$emit('update:checked', arr)
     }
   }
 })

src/views/edit-member.vue

@@ -42,6 +42,7 @@
         round
         type="secondary"
         class="mt-10"
+        @click="deleteMember"
       >
         删除员工
       </c-button>
@@ -62,10 +63,28 @@ export default Vue.extend({
     'group-cell': () => import('./components/group-cell.vue')
   },
   name: 'EditMember',
+  created() {
+    this.memberId = this.$route.params.id
+  },
   data() {
     return {
       name: '张三',
-      position: ''
+      position: '',
+      memberId: '',
+      show: true
+    }
+  },
+  methods: {
+    deleteMember() {
+      this.$dialog.confirm({
+        title: '提示',
+        message: '删除员工后，将移出对应的部门群和全员群，若是主管，则对应部门和群均会删除，确定删除吗？',
+        confirmButtonText: '全部删除'
+      }).then((res) => {
+        console.log(res, 'res')
+      }).catch(err => {
+        console.log(err, 'error')
+      })
     }
   }
 })

src/views/team-detail.vue

@@ -20,14 +20,23 @@
       <div class="pb-16">
         <div class="text-text-secondary py-1">成员</div>
         <team-contacts
+          :radio="showRadio"
+          :checked.sync="checkedMemberId"
           :contacts="contacts"
         />
       </div>
       <!-- 底部操作 -->
-      <div class="py-2 px-4 grid grid-cols-3 gap-2.5 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
-        <c-button round @click="$router.push('/file')">添加成员</c-button>
-        <c-button round @click="$router.push('/add-department')">添加部门</c-button>
-        <c-button round @click="$router.push('/department-management')">部门设置</c-button>
+      <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
+        <template v-if="showRadio">
+            <c-button round @click="$router.push('/team-management')">确定</c-button>
+          </template>
+          <template v-else>
+            <div class="grid grid-cols-3 gap-2.5">
+              <c-button round @click="$router.push('/file')">添加成员</c-button>
+              <c-button round @click="$router.push('/add-department')">添加部门</c-button>
+              <c-button round @click="$router.push('/department-management')">部门设置</c-button>
+            </div>
+          </template>
       </div>
     </div>
   </main-page>
@@ -47,9 +56,9 @@ export default Vue.extend({
     'team-contacts': () => import('@/views/components/team-contacts.vue'),
     'c-button': () => import('./components/c-button.vue')
   },
-  // created() {
-
-  // },
+  created() {
+    this.showRadio = this.$route.query.transfer === '1'
+  },
   data() {
     let flatTeams: Array<Member> = []
     let currentTeam: Member = {
@@ -63,6 +72,8 @@ export default Vue.extend({
       parentTeam: {},
       currentTeam,
       flatTeams,
+      checkedMemberId: [],
+      showRadio: false
       // newTeams: []
     }
   },

src/views/team-frame.vue

@@ -18,14 +18,23 @@
         <div class="pb-16">
           <div class="text-text-secondary py-1">成员</div>
           <team-contacts
+            :radio="showRadio"
+            :checked.sync="checkedMemberId"
             :contacts="contacts"
           />
         </div>
         <!-- 底部操作 -->
-        <div class="py-2 px-4 grid grid-cols-3 gap-2.5 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
-          <c-button round @click="$router.push('/file')">添加成员</c-button>
-          <c-button round @click="$router.push('/add-department')">添加部门</c-button>
-          <c-button round @click="$router.push('/department-management')">部门设置</c-button>
+        <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
+          <template v-if="showRadio">
+            <c-button round @click="$router.go(-1)">确定</c-button>
+          </template>
+          <template v-else>
+            <div class="grid grid-cols-3 gap-2.5">
+              <c-button round @click="$router.push('/file')">添加成员</c-button>
+              <c-button round @click="$router.push('/add-department')">添加部门</c-button>
+              <c-button round @click="$router.push('/department-management')">部门设置</c-button>
+            </div>
+          </template>
         </div>
       </div>
     </main-page>
@@ -48,12 +57,15 @@ export default Vue.extend({
   },
   created() {
     // console.log(Mock, 'mock')
+    this.showRadio = this.$route.query.transfer === '1'
   },
   data() {
     return {
       title: '导航',
       team,
-      contacts
+      contacts,
+      checkedMemberId: [],
+      showRadio: false
     }
   },
   methods: {
@@ -63,6 +75,15 @@ export default Vue.extend({
     // },
     clickItem(val: Member) {
       // console.log(val)
+      if (this.showRadio) {
+        this.$router.push({
+          path: `/team/${val.id}`,
+          query: {
+            transfer: '1'
+          }
+        })
+        return
+      }
       this.$router.push(`/team/${val.id}`)
     }
   }

src/views/team-management.vue

@@ -29,8 +29,8 @@
       <c-cell dot title="添加成员" @click="$router.push('/file')" />
       <c-cell dot title="添加部门" @click="$router.push('/add-department')" />
       <div class="mt-4">
-        <c-cell dot title="团队管理权限" content="共3人" />
-        <c-cell dot title="转让负责人" />
+        <c-cell dot title="团队管理权限" content="共3人" @click="$router.push('/auth-management')" />
+        <c-cell dot title="转让负责人" @click="transferManagement"/>
         <c-cell dot title="申请管理" />
       </div>
       <c-button round type="secondary" class="mt-16">
@@ -55,6 +55,14 @@ export default Vue.extend({
     // handleClickLeft() {
     //   console.log('click')
     // }
+    transferManagement() {
+      this.$router.push({
+        path: '/team-frame',
+        query: {
+          transfer: '1'
+        }
+      })
+    }
   }
 })
 </script>