zhywpt-sp/components/custom-select-dic/custom-select-dic.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="state.dicList"
		@confirm="confirm"
		:valueName="props.valueName"
		:labelName="props.labelName"
	></u-select>
</template>

<script setup lang="ts">
	import { reactive, watch, onMounted, ref } from 'vue'
	import { getDicWithType, getCodeName } from '@/datas/queryKey.js'
	const emits = defineEmits(['update:modelValue']);
	const props = defineProps({
		modelValue: {
			type: [String, Number],
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		dicName: { // 字典名称
			type: String,
			default: ""
		},
		valueName: {
			type: String,
			default: "code"
		},
		labelName: {
			type: String,
			default: "name"
		},
		placeholder: {
			type: String,
			default: "请选择"
		}
	})
	
	const showPopup = ref(false)
	
	const state = reactive({
		showName: '',
		dicList: []
	})
	
	onMounted(() => {
		state.dicList = getDicWithType(props.dicName)
		console.log(props.modelValue)
		if (props.modelValue || props.modelValue === 0) {
			state.showName = getCodeName(props.dicName, props.modelValue)
			console.log(state.showName)
		}
	})
	
	
	watch(() => props.modelValue, (newValue) => {
		if (newValue || newValue === 0) {
			state.showName = getCodeName(props.dicName, props.modelValue)
		} else {
			state.showName = ''
		}
	})
	
	const choose = (e) => {
		if (props.disabled) return
		showPopup.value = true
	}
	
	const confirm = (e) => {
		// state.showName = e.label
		emits('update:modelValue', e[0].value)
	}
</script>

<style>
</style>