yunzerwebsiteallinone/uniapp/components/erp/ErpPicker.vue

<template>
	<view v-if="show" class="picker-mask" @tap="close">
		<view class="picker-sheet" @tap.stop>
			<view class="sheet-head">
				<text class="sheet-title">{{ title }}</text>
				<text class="sheet-close" @tap="close">关闭</text>
			</view>

			<view class="sheet-search">
				<FaIcon name="magnifying-glass" color="#94a3b8" :size="15" />
				<input
					v-model="keyword"
					class="search-input"
					:placeholder="placeholder"
					confirm-type="search"
				/>
			</view>

			<scroll-view class="sheet-body" scroll-y :show-scrollbar="false">
				<text v-if="tip" class="sheet-tip">{{ tip }}</text>
				<view v-if="loading" class="sheet-empty">
					<text>搜索中...</text>
				</view>
				<view v-else-if="!filtered.length" class="sheet-empty">
					<text>没有匹配项</text>
				</view>
				<view
					v-for="opt in filtered"
					:key="String(opt.value)"
					class="option-row"
					:class="{ active: String(opt.value) === String(modelValue) }"
					@tap="choose(opt)"
				>
					<view class="option-main">
						<text class="option-label">{{ opt.label }}</text>
						<text v-if="opt.sub" class="option-sub">{{ opt.sub }}</text>
					</view>
					<text v-if="opt.extra" class="option-extra">{{ opt.extra }}</text>
					<FaIcon
						v-if="String(opt.value) === String(modelValue)"
						name="check"
						color="#2563eb"
						:size="16"
					/>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
/**
 * 移动端通用底部选择器（单选）。
 * 单据开单要选商品/仓库/客商/审批流，选项动辄上千条，
 * 原生 picker 无法搜索，这里统一用「搜索 + 列表 + 点选即回填」的抽屉。
 * 默认本地过滤；数据量大时传 remote 并监听 search，由页面做服务端搜索。
 */
import { computed, ref, watch } from 'vue'
import FaIcon from '@/components/FaIcon.vue'

const props = defineProps({
	show: { type: Boolean, default: false },
	title: { type: String, default: '请选择' },
	placeholder: { type: String, default: '搜索' },
	options: { type: Array, default: () => [] },
	/** 当前选中值，用于高亮（可选） */
	modelValue: { type: [String, Number, null], default: null },
	/** 服务端搜索：关键字变化时向外抛 search，不在本地过滤 */
	remote: { type: Boolean, default: false },
	loading: { type: Boolean, default: false },
	/** 列表顶部提示（如「仅显示前 50 条」） */
	tip: { type: String, default: '' }
})

const emit = defineEmits(['update:show', 'select', 'search'])

const keyword = ref('')

let searchTimer = null
watch(keyword, (val) => {
	if (!props.remote) return
	clearTimeout(searchTimer)
	searchTimer = setTimeout(() => emit('search', val.trim()), 300)
})

const filtered = computed(() => {
	if (props.remote) return props.options
	const kw = keyword.value.trim().toLowerCase()
	if (!kw) return props.options
	return props.options.filter(
		(opt) =>
			String(opt.label || '').toLowerCase().includes(kw) ||
			String(opt.sub || '').toLowerCase().includes(kw)
	)
})

function choose(opt) {
	emit('select', opt)
	close()
}

function close() {
	clearTimeout(searchTimer)
	keyword.value = ''
	emit('update:show', false)
}
</script>

<style lang="scss" scoped>
@import '@/src/styles/page-common.scss';

.picker-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: 998;
	display: flex;
	align-items: flex-end;
	@include mask-responsive;
}

.picker-sheet {
	width: 100%;
	max-height: 76vh;
	background: $color-card;
	border-radius: 32rpx 32rpx 0 0;
	display: flex;
	flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom);
	@include sheet-responsive;
}

.sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx $page-padding-x 12rpx;
}

.sheet-title {
	font-size: 30rpx;
	font-weight: 600;
	color: $color-text;
}

.sheet-close {
	font-size: 26rpx;
	color: $color-text-muted;
}

.sheet-search {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin: 0 $page-padding-x 12rpx;
	height: 66rpx;
	padding: 0 22rpx;
	background: $color-bg-page;
	border-radius: $radius-full;
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	color: $color-text;
}

.sheet-body {
	flex: 1;
	min-height: 0;
	max-height: 52vh;
	padding: 0 $page-padding-x 20rpx;
	/* scroll-view 默认 content-box，加左右内边距会把内容顶出屏幕右侧 */
	box-sizing: border-box;
}

.sheet-tip {
	display: block;
	padding: 8rpx 4rpx 16rpx;
	font-size: 22rpx;
	color: $color-text-muted;
}

.sheet-empty {
	padding: 80rpx 0;
	text-align: center;
	font-size: 26rpx;
	color: $color-text-muted;
}

.option-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
	padding: 24rpx 20rpx;
	border-radius: $radius-md;

	&:active {
		background: $color-bg-page;
	}

	&.active {
		background: $color-primary-bg;
	}
}

.option-main {
	flex: 1;
	min-width: 0;
}

.option-label {
	display: block;
	font-size: 28rpx;
	color: $color-text;
}

.option-sub {
	display: block;
	margin-top: 6rpx;
	font-size: 23rpx;
	color: $color-text-muted;
}

.option-extra {
	font-size: 24rpx;
	color: $color-text-secondary;
	flex-shrink: 0;
}
</style>