设置功能修复添加搜索

src/Interface/index.ts

@@ -28,7 +28,8 @@ export interface Staff {
   "workplace": string,
   "isActivated": boolean,
   cardViewable: number,
-  phoneViewable: number
+  phoneViewable: number,
+  avatar?: string
 }
 
 // 通讯录

src/service/moudles/Common.ts

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

src/service/moudles/service.dto.ts

@@ -203,4 +203,9 @@ export interface SetCartViewableDTO {
 export interface SetPhoneViewableDTO {
   phoneViewable: Viewable,
   entId: string
+}
+
+export interface QueryDTO {
+  entId: string,
+  name: string
 }
\ No newline at end of file

src/util/Bridge/index.ts

@@ -189,8 +189,9 @@ export function selectGroupMembers(arr: string[]) {
   return data
 }
 
-export function getGroupMembers(obj:Object) {
+export function getGroupMembers(obj:Object, cb?: (p: any)=>void) {
   const data = dsbridge.call(BridgeMethods.GET_GROUP_MEMBERS, { ...obj }, res => {
+    cb&&cb(res)
     return res
   })
   return data

src/views/team/components/Search/Department.vue

+<template>
+  <div class="py-1 flex items-center" @click="clickDep">
+    <div class="h-1.5 w-1.5 bg-color-primary flex-shrink-0"></div>
+    <div class="flex-1 ml-2 truncate" v-html="replaceHandler(department.name)"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Department } from '@/Interface'
+import Vue, { PropType } from 'vue'
+
+export default Vue.extend({
+  props: {
+    show: Boolean,
+    department: Object as PropType<Department>,
+    searchValue: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    AppIcon: () => import('@/components/common/Icon.vue')
+  },
+  data() {
+    return {
+      // searchValue: '真实'
+    }
+  },
+  methods: {
+    replaceHandler(val: string) {
+      if (typeof val === 'undefined' || val === '' || val === null) return ''
+      const reg = new RegExp(this.$props.searchValue, 'g')
+      return val.replace(reg, result => `<span class="text-color-primary">${result}</span>`)
+    },
+    clickDep() {
+      this.$emit('clickDep', this.$props.department)
+    }
+  }
+})
+</script>
\ No newline at end of file

src/views/team/components/Search/Member.vue

+<template>
+  <div class="py-1.5 flex items-center" @click="clickMember">
+    <div class="h-9 w-9 flex-shrink-0">
+      <img v-if="member&&member.avatar" class="mx-w-full" :src="member.avatar" alt="">
+      <AppIcon
+        v-else
+        type="png"
+        :path="primaryInfo.avator"
+        class-name="w-9 h-9"
+      ></AppIcon>
+    </div>
+    <div class="flex-1 ml-1.5 truncate" v-html="replaceHandler(member.name)"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Staff } from '@/Interface'
+import Vue, { PropType } from 'vue'
+
+export default Vue.extend({
+  props: {
+    show: Boolean,
+    member: Object as PropType<Staff>,
+    searchValue: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    AppIcon: () => import('@/components/common/Icon.vue')
+  },
+  data() {
+    return {
+      // searchValue: '真实'
+    }
+  },
+  methods: {
+    replaceHandler(val: string) {
+      console.log(val, 'val')
+      if (typeof val === 'undefined' || val === '' || val === null) return ''
+      const reg = new RegExp(this.$props.searchValue, 'g')
+      return val.replace(reg, result => `<span class="text-color-primary">${result}</span>`)
+    },
+    clickMember() {
+      this.$emit('clickMember', this.$props.member)
+    }
+  }
+})
+</script>
\ No newline at end of file

src/views/team/components/Search/index.vue

+<template>
+  <van-popup
+    v-model:show="show"
+    position="right"
+    :style="{height: '100%', width: '100%'}"
+    @close="close"
+    @open="open">
+    <div class="flex flex-col border h-full">
+      <div class="header flex-shrink-0">
+        <form action="/">
+          <van-search
+            v-model="searchValue"
+            ref="search"
+            shape="round"
+            show-action
+            autofocus
+            placeholder="请输入团队成员姓名或部门"
+            @search="onSearch"
+            @cancel="onCancel"
+          />
+        </form>
+      </div>
+      <div class="flex-1 px-3 overflow-y-scroll">
+
+        <!-- 成员 -->
+        <div v-if="memberList&&memberList.length > 0"  class="">
+          <div class="text-text-secondary text-sm py-2.5">成员</div>
+          <div class="">
+            <Member
+              v-for="m in memberList"
+              :key=m.id
+              :member="m"
+              :searchValue="searchValue"
+              @clickMember="clickMember"
+            ></Member>
+          </div>
+        </div>
+        
+        <!-- 部门 -->
+        <div v-if="depList&&depList.length>0" class="">
+          <div class="text-text-secondary text-sm py-2.5">部门</div>
+          <div class="">
+            <Department
+              v-for="d in depList"
+              :key="d.id"
+              :department="d"
+              :searchValue="searchValue"
+              @clickDep="clickDep"
+            ></Department>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { Cell, CellGroup, Popup, Search } from 'vant'
+import { Department, Staff } from '@/Interface'
+import { set } from 'vue/types/umd'
+
+Vue.use(Cell).use(CellGroup).use(Popup).use(Search)
+
+export default Vue.extend({
+  name: 'Search',
+  props: {
+    show: Boolean
+  },
+  components: {
+    Member: () => import('./Member.vue'),
+    Department: () => import('./Department.vue')
+  },
+  data() {
+    return {
+      searchValue: '',
+      memberList: [] as Staff[],
+      depList: [] as Department[],
+      timer: null as unknown as number
+    }
+  },
+  methods: {
+    onSearch(val: string) {
+      console.log(val)
+      this.search(this.searchValue)
+    },
+    search(val: string) {
+      const entId = JSON.parse(localStorage.getItem('ENT_INFO') as string).id
+      const params = {
+        entId,
+        name: val
+      }
+      this.$service.common.query(params).then((res: any) => {
+        const {data} = res
+        if (data.code === this.$global.success) {
+          console.log(data, 'data')
+          this.depList = data.data.depList
+          this.memberList = data.data.staffList
+        }
+      })
+    },
+    searchChange(val: string) {
+      console.log('查询内容变化', val)
+    },
+    onCancel() {
+      console.log('cancel')
+      this.$emit('update:show', false)
+    },
+    close() {
+      console.log('关闭弹窗')
+      this.searchValue = ''
+      this.depList = []
+      this.memberList = []
+    },
+    open() {
+      console.log('打开弹窗')
+      this.$refs.search && this.$refs.search.focus()
+    },
+    clickMember(m: Staff) {
+      console.log(m, '点击成员')
+      this.$emit('clickMember', m)
+    },
+    clickDep(d: Department) {
+      console.log(d, '点击部门')
+      this.$emit('clickDep', d)
+    }
+  },
+  watch: {
+    searchValue(val) {
+      if (val === '') return
+      if (this.timer !== null) {
+        window.clearTimeout(this.timer)
+      }
+      this.timer = window.setTimeout(() => {
+        this.search(val)
+      }, 300)
+    }
+  }
+})
+</script>
\ No newline at end of file

src/views/team/components/Setting/index.vue

@@ -127,11 +127,12 @@ export default Vue.extend({
           return '所有人不可见'
       }
     },
-    open() {
+    async open() {
       console.log('open setting')
       const user = JSON.parse(localStorage.getItem('USR_INFO') as string)
-      this.phone = user.phoneViewable
-      this.card = user.cardViewable
+      const res = await this.$service.staff.getInfo({id: user.id})
+      this.phone = res?.data.data.phoneViewable
+      this.card = res?.data.data.cardViewable
     }
   }
 });

src/views/team/components/qrcode.vue

 <template>
-  <div class="pt-14">
+  <div class="pt-14 pb-2 h-screen overflow-y-scroll">
     <div v-if="dataUrl && isIOSMobile()" class="qrcode mt-2 mb-4 relative w-72 h-113.5 mx-auto">
       <img :src="dataUrl" alt="">
       <div class="text-center text-sm text-text-secondary">长按保存二维码</div>
@@ -36,7 +36,7 @@
       </div>
       <p class=" text-white absolute top-82 left-0 right-0 mx-auto text-center text-sm"> 扫描二维码加入我们{{ entInfo.name }}的团队</p>
     </div>
-    <div v-show="!dataUrl" class="px-4 flex items-center justify-center">
+    <div v-show="!dataUrl" class="px-4 z-50 flex items-center justify-center">
       <div @click.stop="saveQrCode" class="btn flex flex-col items-center justify-center -mt-1.5">
         <app-icon
           type="svg"

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

@@ -195,6 +195,18 @@ export default Vue.extend({
     }
   },
   methods: {
+    toggleAll() {
+      const arr: string[] = []
+      this.contactList.forEach((c: Staff) => {
+        if (this.showCheck(c)) {
+          arr.push(c.id)
+        }
+      })
+      this.$emit('update:checked', arr)
+    },
+    unSelectAll() {
+
+    },
     showCheck(member: any) {
       if (typeof this.checkable === 'undefined') return true
       let check = true

src/views/team/selector.vue

@@ -32,6 +32,7 @@
         <div class="pb-16">
           <!-- <div class="text-text-secondary py-1">成员</div> -->
           <team-contacts
+            ref="teamContact"
             :radio="true"
             :multiple="multiple"
             :leader="leaders"
@@ -42,8 +43,17 @@
           />
         </div>
         <!-- 底部操作 -->
-        <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
-          <c-button @click="confirmEdit">确定</c-button>
+        <div class="py-2 px-4 flex bg-white w-screen fixed bottom-0 left-0 z-30">
+          <div v-if="multiple" class="flex-1 flex items-center mr-4" @click="selectAll">
+            <app-icon
+              type="svg"
+              :name="checkAll?'icon-radio-checked':'icon-radio'"
+              size="20px"
+              :color="primaryInfo.color"
+            ></app-icon>
+            <div class="flex-shrink-0 ml-2 text-color-primary">全选</div>
+          </div>
+          <c-button class="flex-1" @click="confirmEdit">确定</c-button>
         </div>
       </div>
     </main-page>
@@ -103,10 +113,11 @@ export default Vue.extend({
       teamArr: [] as Department[],
       pageTitle: '选择成员',
       multiple: false,
-      groupUsers: ['1Gwr2QzfHF3CYCYdPKJoEAxfCUimg1cPup'] as string[],
+      groupUsers: ['1Gwr2QzfHF3CYCYdPKJoEAxfCUimg1cPup'],
       userId: '',
       excludeSelf: 'true',
-      action: 'inviteGroup'
+      action: 'inviteGroup',
+      checkAll: false
     }
   },
   async created() {
@@ -118,7 +129,7 @@ export default Vue.extend({
     const userInfoDev = {
       depId: '174172709863821313',
       entId: '174172709863821312',
-      id: '1Gwr2QzfHF3CYCYdPKJoEAxfCUimg1cPup',
+      id: '1JSSTNLSJS1gctBLUSzbspd6LtmZ5XnAmd',
       joinTime: 1631090065,
       name: '徐丹',
       role: 0
@@ -134,9 +145,13 @@ export default Vue.extend({
         usrData = JSON.parse(getUserInfo() as string)
         console.log(type, excludeSelf, action, gid, 'query')
         if (action === Action.INVITE) {
-          const groupUsers = getGroupMembers({gid}) || '[]'
-          console.log(getGroupMembers({gid}), groupUsers, 'groupUsers')
-          this.groupUsers = JSON.parse(groupUsers as string)
+          getGroupMembers({gid}, (data) => {
+            console.log(data, 'groupUsers data')
+            this.groupUsers = JSON.parse(data || '[]')
+          })
+          // const groupUsers = getGroupMembers({gid}) || '[]'
+          // console.log(getGroupMembers({gid}), groupUsers, 'groupUsers')
+          // this.groupUsers = JSON.parse(groupUsers as string)
         }
       }
       this.userId = usrData.id
@@ -149,6 +164,14 @@ export default Vue.extend({
     }
   },
   methods: {
+    selectAll() {
+      this.checkAll = !this.checkAll;
+      if (this.checkAll) {
+        (this.$refs.teamContact as any).toggleAll()
+      } else {
+        this.checkedMemberId = []
+      }
+    },
     getStaffInfo(id: string) {
       this.loading = true
       this.$service.staff.getInfo({id})

src/views/team/team-frame.vue

@@ -10,6 +10,7 @@
       @close="closeActionSheet"
     />
     <Setting :show.sync="showSetting"></Setting>
+    <Search :show.sync="showSearch"></Search>
     <main-page
       main-bg="bg-white"
       header-bg="bg-white"
@@ -24,12 +25,20 @@
         />
       </div>
       <template slot="right">
-        <div v-if="!isEdit">
-          <div class="w-8 h-8 flex items-center justify-center" @click="showActionSheet=true">
+        <div class="flex items-center" v-if="!isEdit">
+          <div class="w-8 h-8 flex items-center justify-center" @click="showSearch=true">
             <app-icon
-              class-name="w-5 h-1"
-              icon-name="dot-h-black"
-            />
+              type="svg"
+              name="icon-search"
+              size="26px">
+            </app-icon>
+          </div>
+          <div class="ml-1 w-8 h-8 flex items-center justify-center" @click="showActionSheet=true">
+            <app-icon
+              type="svg"
+              name="icon-dot-h"
+              size="20px">
+            </app-icon>
           </div>
         </div>
         <div
@@ -103,7 +112,8 @@ export default Vue.extend({
     'team-contacts': () => import('@/views/team/components/team-contacts.vue'),
     'c-button': () => import('@/components/common/c-button.vue'),
     'switch-cell': () => import('@/components/common/switch-cell.vue'),
-    Setting: () => import('@/views/team/components/Setting/index.vue')
+    Setting: () => import('@/views/team/components/Setting/index.vue'),
+    Search: () => import('@/views/team/components/Search/index.vue')
   },
   data() {
     const tree: Department[]= []
@@ -126,15 +136,16 @@ export default Vue.extend({
       isEdit: false,
       multiple: false,
       pageTitle: '组织架构',
-      showSetting: false
+      showSetting: false,
+      showSearch: false
     }
   },
   async created() {
     const userInfoDev = {
       depId: '168398222891421697',
       entId: '168398222891421696',
-      id: '1K7cApKbEU9h5WySPVLNgdSd67i2XkSuoS',
-      // id: '1Gwr2QzfHF3CYCYdPKJoEAxfCUimg1cPup',
+      // id: '1K7cApKbEU9h5WySPVLNgdSd67i2XkSuoS',
+      id: '1Gwr2QzfHF3CYCYdPKJoEAxfCUimg1cPup',
       joinTime: 1631090065,
       name: '徐丹',
       role: 3

vue.config.js

@@ -43,7 +43,7 @@ module.exports = {
   },
   configureWebpack: {
     optimization: {
-      minimize: true,
+      minimize: process.env.NODE_ENV === 'production',
       minimizer: [
         new TerserPlugin({
           parallel: true,