uniIM/pages/dept/users.vue

<template>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="true">
      <template v-slot:content>
		  <text class="text-black">部门用户</text>
      </template>

    </cu-custom>
    <uni-easyinput placeholder="请输入姓名拼音搜索" type="text" v-model="keyword" :clearable="true" @clear="clear"/>
    <index-bar :index-map="map" v-if="map.size > 0">
      <view v-for="(item,key) in map.keys()" :key="key">
        <view :class="'indexItem-' + item" :id="'indexes-' + item" :data-index="item">
          <view class="padding">{{ item }}</view>
          <view class="cu-list menu-avatar no-padding">
            <view class="cu-item" v-for="(user) in keywordFilter(map.get(item),keyword)" :key="user.id" @tap="showUser(user.id)">
              <vim-avatar :img="user.avatar" :name="user.name" />
              <view class="content">
                <view class="text-grey">{{ user.name }}</view>
                <view class="text-gray text-sm">
                  {{ user.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </index-bar>
    <no-data v-if="map.size === 0 && hidden"/>
  </view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import Tools from "@/utils/Tools";
import CuCustom from '@/colorui/components/cu-custom.vue'
import IndexBar from '@/components/IndexBar.vue'
import DeptApi from "@/api/DeptApi";
import {onLoad} from '@dcloudio/uni-app';
import NoData from "@/components/NoData.vue";
import VimAvatar from "@/components/VimAvatar.vue";
import { match } from 'pinyin-pro'
import type User from "@/mode/User";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
const {proxy} = getCurrentInstance();

const map = ref(new Map());
const hidden = ref(false);

const keyword = ref('');
const deptId = ref('');
/**
 * 聊天过滤器
 * @param items 聊天列表
 * @param keyword 关键词
 */
const keywordFilter = (items: User[], keyword: string): User[] => {
  return items.filter((item) => {
    return !!(keyword.trim() === '' || match(item.name, keyword))
  })
}

const clear = () => {
  keyword.value = '';
}

const loadUsers = () => {
  uni.showLoading();
  hidden.value = false
  DeptApi.users(deptId.value).then((res) => {
    map.value = Tools.listToMap(res.data);
  }).finally(() => {
    uni.hideLoading();
    hidden.value = true
  })
}

onLoad((opt) => {
  deptId.value = opt?.id;
  loadUsers();
})

const showUser = (id: string) => {
  uni.navigateTo({
    url: '/pages/pub/user?id=' + id
  })
}

</script>

<style scoped></style>