2024-04-28 10:10:03 +08:00

67 lines
1.7 KiB
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="user.avatar" :size="25" :showName="false" />
<text style="margin-left: 5px;">{{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="user.avatar" :size="25" :showName="false" />
<text style="margin-left: 5px;">{{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 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>