hxgksystemapp/src/components/DesignForm/public/expand/user.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-20 13:49:22
@ 备注: 
-->
<script lang='ts' setup>
import { computed, onMounted, nextTick } from 'vue'
import { criteriaForPeopleList } from '@/api/hr/org/type'
const props = withDefaults(
    defineProps<{
		modelValue?: string
		disabled?: boolean
    }>(),
    {}
)
const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()
const userDialogEl = ref()
// const value:any = computed({
//     get() {
//       	return props.modelValue
//     },
//     set(newVal: string) {
//       	emits('update:modelValue', newVal)
//     }
// })
// const userlist = ref<any>("")
const value = computed({
	get: () => {
		console.log("value-get",props.modelValue)
		// userlist.value = props.modelValue
		return props.modelValue
	},
	set: (newVal: any) => {
		console.log("value-set",newVal)
		// emits('update:modelValue', newVal)
		let newValJson:criteriaForPeopleList[] = JSON.parse(newVal)
		console.log("value-newValJson",newValJson)
		if(newValJson.length > 0){
			let userAry = new Array
			let userKeyAry = new Array
			newValJson.forEach(item =>{
				userAry.push(item.name+"("+item.number+")")
				userKeyAry.push(item.userkey.toString())
			})
			emits('update:modelValue', userAry.join(','))
			// userlist.value = userAry.join(',')
			// 
		}
		
	},
});

const openDialog = () => {
	// console.log("value-----》",value.value)
    userDialogEl.value.open()
}
onMounted(() => {
	console.log("value---1--》",value.value,props.modelValue)
    nextTick(() => {})
})

</script>
<template>
	<el-input
		placeholder="请选择用户或输入用户名称"
		v-bind="$props"
		v-model="value"
		@click="openDialog"
	>
		<template #append>
			<i class="icon-user" @click.stop="openDialog"></i>
		</template>
  	</el-input>
  	<user-dialog ref="userDialogEl" v-model="value" />
</template>
<style  lang='scss' scoped>

</style>