mobile-workflow/components/form/UserPicker.vue

<template>
	<view v-if="!readonly">
		<click-input :value="_value" index="name" @click="showOrgPicker" :disabled="readonly"
			:placeholder="props.formProps.placeholder || '请选择人员'" pre-icon="personadd">
			<view style="flex: 1; display: flex; align-items: center;" v-for="user in _value || []" :key="user.id">
				<avatar :name="user.name" :src="getRes(user.avatar)" :size="25" :showName="false" />
				<text style="margin-left: 10rpx;">{{user.name}}</text>
			</view>
		</click-input>
		<org-picker ref="orgPicker" :position="position" :multiple="props.formProps.multiple" type="user"
			:selected="_value" @ok="selectOk"></org-picker>
	</view>
	<view v-else>
		<view style="flex: 1; display: flex; align-items: center;" v-for="user in _value || []" :key="user.id">
			<avatar :name="user.name" :src="getRes(user.avatar)" :size="25" :showName="false" />
			<text style="margin-left: 10rpx;">{{user.name}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import OrgPicker from '@/components/OrgPicker.vue'
	import Avatar from '@/components/Avatar.vue'
	import { getRes } from '@/utils/tool.js'
	import ClickInput from '@/components/ClickInput.vue'

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: Object,
		readonly: Boolean,
		position: {
			type: String,
			default: 'right'
		}
	})

	const _value = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

	const emits = defineEmits(['update:modelValue'])

	const orgPicker = ref()

	function showOrgPicker() {
		if (!props.readonly) {
			orgPicker.value.show()
		}
	}

	function selectOk(val) {
		_value.value = val
	}
</script>

<style>
</style>