zhywpt-sp/components/custom-select-data/custom-select-data.vue

<!-- 字典数据选择器 -->
<template>
	<u-input
		v-model="state.showName"
		:placeholder="placeholder"
		:type="disabled ? 'text' : 'select'"
		input-align='right'
		:disabled="disabled"
		@click="choose"/>
	
	<u-select
		v-model="showPopup"
		:list="props.dataList"
		@confirm="confirm"
		:valueName="props.valueName"
		:labelName="props.labelName"
	></u-select>
</template>

<script setup lang="ts">
	import { reactive, watch, onMounted, ref } from 'vue'
	const emits = defineEmits(['update:modelValue', 'change']);
	const props = defineProps({
		modelValue: {
			type: [String, Number],
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		dicName: { // 字典名称
			type: String,
			default: ""
		},
		valueName: {
			type: String,
			default: "id"
		},
		labelName: {
			type: String,
			default: "name"
		},
		placeholder: {
			type: String,
			default: "请选择"
		},
		dataList: {
			type: Array,
			default: () => []
		}
	})
	
	const showPopup = ref(false)
	
	const state = reactive({
		showName: '',
	})
	
	onMounted(() => {
		setValueName()
	})
	
	
	watch([() => props.modelValue, () => props.dataList], ([]) => {
		setValueName()
	})
	
	const setValueName = () => {
		if ((props.modelValue || props.modelValue === 0) && props.dataList && props.dataList.length > 0) {
			let obj = props.dataList.find(item => item[props.valueName] === props.modelValue)
			console.log(obj)
			state.showName = obj ? obj[props.labelName] : ''
		}
	}
	
	const choose = (e) => {
		if (props.disabled) return
		showPopup.value = true
	}
	
	const confirm = (e) => {
		// state.showName = e.label
		emits('update:modelValue', e[0].value)
		emits('change', e[0].value, e)
	}
</script>

<style>
</style>