mobile-workflow/pages/contacts/contacts.vue

<template>
	<view style="padding: 0 0 16rpx 0; background-color: white;">
		<view class="search">
			<uni-search-bar v-model="searchValue" bgColor="#EEEEEE" radius="5" placeholder="搜索人员" clearButton="auto"
				cancelButton="none"></uni-search-bar>
		</view>
		<view style="padding: 6rpx 16rpx;">
			<scroll-view scroll-x>
				<uni-breadcrumb separator=">">
					<uni-breadcrumb-item v-for="(org, index) in orgPaths" :key="index" @tap="toDept(org.id, index)">
						<view
							:style="{color: index + 1 === orgPaths.length ? '#989996':'#1E90FD','font-size': '32rpx'}">
							{{org.name}}
						</view>
					</uni-breadcrumb-item>
				</uni-breadcrumb>
			</scroll-view>
		</view>
	</view>
	<scroll-view v-if="orgList.length > 0" class="w-org-list" scroll-y :style="{height: contentHeight + 'px'}">
		<uni-list>
			<uni-list-item clickable :showArrow="org.type === 'dept'" v-for="(org, i) in orgDatas"
				:key="`${org.type}_${org.id}`" class="w-org-item" @click="toInnerOrg(org)">
				<template v-slot:header>
					<view class="w-org-avatar">
						<avatar v-if="org.type === 'user'" :name="org.name" :src="getRes(org.avatar)" :showName="false">
						</avatar>
						<image lazy-load mode="aspectFit" v-else src="/static/image/dept.png"></image>
					</view>

				</template>
				<template v-slot:body>
					<view style="display: flex; align-items: center; ">
						<text style="font-size: 32rpx;">{{org.name}}</text>
						<view v-if="org.isLeader" style="display: flex; align-items: center; margin-left: 16rpx;">
							<uni-tag type="warning" size="mini" text="部门负责人" inverted></uni-tag>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
	</scroll-view>
	<view v-else style="width: 100%;">
		<image mode="aspectFit" style="width: 100%;" src="/static/image/noUser.png"></image>
	</view>
	<user-card ref="userCard"></user-card>
</template>

<script setup>
	import {
		onMounted,
		computed,
		ref,
		watch
	} from "vue";
	import {
		onBackPress
	} from "@dcloudio/uni-app";
	import Avatar from '@/components/Avatar.vue'
	import UserCard from '@/components/UserCard.vue'
	import {
		getOrgTree,
		getUserByName
	} from '@/api/org.js'
	import { getRes } from '@/utils/tool.js'

	const userCard = ref()
	//当前展示的部门id
	const currentDeptId = ref(0)
	const searchValue = ref('')
	//搜索结果
	const searchUsers = ref([])
	//主数据
	const orgList = ref([])
	//部门路径
	const orgPaths = ref([{
		name: '组织',
		id: 0
	}])

	const contentHeight = computed(() => {
		return uni.getSystemInfoSync().windowHeight - 105
	})
	const isSearchMode = ref(false)
	const orgDatas = computed(() => {
		if (searchValue.value.trim() !== '') {
			return searchUsers.value
		}
		return orgList.value
	})

	onMounted(() => getOrgList())
	//监听返回按钮
	onBackPress(() => backToParent())

	function toDept(orgId, i) {
		currentDeptId.value = orgId
		orgPaths.value.length = i + 1
		getOrgList()
	}

	function backToParent() {
		userCard.value.hide()
		if (orgPaths.value.length > 1) {
			orgPaths.value.length--
			currentDeptId.value = orgPaths.value[orgPaths.value.length - 1].id
			getOrgList()
			return true;
		} else {
			return false;
		}
	}

	function toInnerOrg(org) {
		if (org.type === 'dept') {
			currentDeptId.value = org.id
			orgPaths.value.push({
				name: org.name,
				id: org.id
			})
			getOrgList()
		} else if (org.type === 'user') {
			//展示详细资料
			userCard.value.show(org.id)
		}
	}

	function getOrgList() {
		const loginUser = JSON.parse(uni.getStorageSync('loginUser'))
		getOrgTree({
			deptId: currentDeptId.value + "P" + loginUser.sn,
			type: 'user'
		}).then(rsp => {
			orgList.value = rsp.data
			loadOrgPath()
		}).catch(err => {

		})
	}

	function searchUser() {
		searchUsers.value.length = 0
		getUserByName({
			userName: searchValue.value.trim()
		}).then(rsp => {
			searchUsers.value = rsp.data
		}).catch(err => {

		})
	}

	watch(searchValue, () => {
		if (searchValue.value.trim() !== '') {
			searchUser()
		}
	})
</script>

<style lang="less" scoped>
	page {
		background-color: #F4F5F7;
	}

	.w-org-paths {
		background-color: white;
	}

	:deep(.w-org-list) {
		font-size: 32rpx;
		margin-top: 26rpx;

		.w-org-item {
			.uni-list-item__container {
				align-items: center;
			}
		}

	}

	.w-org-avatar {
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 51rpx;
			height: 51rpx;
			padding: 13rpx;
			border-radius: 10px;
			background-color: #c4d7ff;
		}

		margin-right: 26rpx;
	}

	.search {
		.search-input {
			font-size: 32rpx;
			background-color: #F4F5F7;
			border-radius: 13rpx;
		}
	}
</style>