jnpf-app-vue3-v6x/components/Jnpf/UserSelect/index.vue

<template>
	<view class="jnpf-user-select w-full">
		<selectBox  v-model="innerValue" :placeholder="placeholder" @openSelect="openSelect"
			:select-open="selectShow" :disabled="disabled" v-if="isInput" />
		<SelectPopup v-model="selectShow" :multiple="multiple" :selectedData="selectedData" @close="handleClose"
			@confirm="handleConfirm" :selectType="selectType" :ableIds="realAbleIds" />
	</view>
</template>

<script>
	import SelectPopup from './SelectPopup';
	import selectBox from '@/components/selectBox'
	import {
		getUserInfoList
	} from '@/api/common'
	export default {
		name: 'jnpf-user-select',
		components: {
			SelectPopup,
			selectBox
		},
		props: {
			modelValue: {
				default: ''
			},
			isInput: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			multiple: {
				type: Boolean,
				default: false
			},
			selectType: {
				type: String,
				default: 'all'
			},
			ableIds: {
				type: Array,
				default: () => []
			},
			ableRelationIds: {
				type: [Array, String],
				default: () => []
			},
		},
		data() {
			return {
				selectShow: false,
				innerValue: '',
				selectedData: [],
				realAbleIds: []
			}
		},
		watch: {
			modelValue: {
				handler() {
					this.setDefault()
				},
				immediate: true
			},
		},
		methods: {
			setDefault() {
				if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
				const ids = this.multiple ? this.modelValue : [this.modelValue];
				getUserInfoList(ids).then((res) => {
					if (!this.modelValue || !this.modelValue.length) return this.setNullValue();
					const selectedData = res.data.list || []
					this.selectedData = selectedData
					this.innerValue = this.selectedData.map(o => o.fullName).join();
				});
			},
			setNullValue() {
				this.innerValue = '';
				this.selectedData = [];
			},
			openSelect() {
				if (this.disabled) return
				if (this.selectType === 'custom') {
					this.realAbleIds = this.ableIds
				} else if (this.selectType != 'all') {
					const suffix = '--' + this.selectType;
					let ableIds = !this.ableRelationIds ? [] : Array.isArray(this.ableRelationIds) ? this
						.ableRelationIds : [this.ableRelationIds];
					this.realAbleIds = ableIds.map(o => o + suffix)
				} else {
					this.realAbleIds = []
				}
				this.selectShow = true
			},
			handleConfirm(selectedData, selectedIds) {
				if (!this.multiple) {
					this.$emit('update:modelValue', selectedIds[0])
					this.$emit('change', selectedIds[0], selectedData[0])
				} else {
					this.$emit('update:modelValue', selectedIds)
					this.$emit('change', selectedIds, selectedData)
				}
			},
			handleClose() {
				this.selectShow = false
			}
		}
	}
</script>