recruitment-wechat-uniapp-241012/pages/demo/JobTypePickerDemo.vue

<template>
	<view class="page">
		<navbar title="工种选择组件示例" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="content">
			<view class="demo-section">
				<view class="section-title">单选模式</view>
				<view class="demo-item">
					<uv-cell
						title="选择工种（单选）"
						rightIconStyle="fontSize: 30rpx;"
						:value="singleResult.fullJobType || '请选择工种'"
						@click="openSinglePicker"
						isLink
					></uv-cell>
					<view v-if="singleResult.selectedId" class="result-info">
						<text>选中ID: {{ singleResult.selectedId }}</text>
						<text>选中工种: {{ singleResult.selectedJobType?.name }}</text>
					</view>
				</view>
			</view>
			
			<view class="demo-section">
				<view class="section-title">多选模式</view>
				<view class="demo-item">
					<uv-cell
						title="选择工种（多选）"
						rightIconStyle="fontSize: 30rpx;"
						:value="multipleResult.fullJobType || '请选择工种'"
						@click="openMultiplePicker"
						isLink
					></uv-cell>
					<view v-if="multipleResult.selectedIds && multipleResult.selectedIds.length > 0" class="result-info">
						<text>选中ID数组: {{ multipleResult.selectedIds.join(',') }}</text>
						<text>选中数量: {{ multipleResult.selectedIds.length }}</text>
					</view>
				</view>
			</view>
			
			<view class="demo-section">
				<view class="section-title">只选择到二级工种</view>
				<view class="demo-item">
					<uv-cell
						title="选择工种（二级）"
						rightIconStyle="fontSize: 30rpx;"
						:value="subTypeResult.fullJobType || '请选择工种'"
						@click="openSubTypePicker"
						isLink
					></uv-cell>
					<view v-if="subTypeResult.selectedId" class="result-info">
						<text>选中ID: {{ subTypeResult.selectedId }}</text>
						<text>选中工种: {{ subTypeResult.selectedJobType?.name }}</text>
					</view>
				</view>
			</view>
			
			<view class="demo-section">
				<view class="section-title">带"选择整个工种"选项</view>
				<view class="demo-item">
					<uv-cell
						title="选择工种（整个工种）"
						rightIconStyle="fontSize: 30rpx;"
						:value="wholeTypeResult.fullJobType || '请选择工种'"
						@click="openWholeTypePicker"
						isLink
					></uv-cell>
					<view v-if="wholeTypeResult.selectedId" class="result-info">
						<text>选中ID: {{ wholeTypeResult.selectedId }}</text>
						<text>选中工种: {{ wholeTypeResult.selectedJobType?.name }}</text>
					</view>
				</view>
			</view>
			
			<view class="demo-section">
				<view class="section-title">使用说明</view>
				<view class="usage-info">
					<text class="usage-title">组件属性：</text>
					<text>• multiple: 是否支持多选</text>
					<text>• onlySubType: 是否只选择到二级工种</text>
					<text>• showSelectWholeType: 是否显示"选择整个工种"选项</text>
					<text class="usage-title">返回数据：</text>
					<text>• selectedId: 单选时的工种ID</text>
					<text>• selectedIds: 多选时的工种ID数组</text>
					<text>• fullJobType: 完整的工种名称文本</text>
					<text>• selectedJobType: 选中的工种对象</text>
				</view>
			</view>
		</view>
		
		<!-- 工种选择组件 -->
		<JobTypePicker 
			ref="singlePicker" 
			@confirm="onSingleConfirm" 
		/>
		
		<JobTypePicker 
			ref="multiplePicker" 
			:multiple="true"
			@confirm="onMultipleConfirm" 
		/>
		
		<JobTypePicker 
			ref="subTypePicker" 
			:onlySubType="true"
			@confirm="onSubTypeConfirm" 
		/>
		
		<JobTypePicker 
			ref="wholeTypePicker" 
			:showSelectWholeType="true"
			@confirm="onWholeTypeConfirm" 
		/>
	</view>
</template>

<script>
	import JobTypePicker from '@/components/JobTypePicker.vue'
	
	export default {
		components: {
			JobTypePicker
		},
		data() {
			return {
				singleResult: {}, // 单选结果
				multipleResult: {}, // 多选结果
				subTypeResult: {}, // 二级工种结果
				wholeTypeResult: {} // 整个工种结果
			}
		},
		onLoad() {
			// 确保工种数据已加载
			this.$store.commit('getJobTypeList')
		},
		methods: {
			// 打开单选工种选择器
			openSinglePicker() {
				this.$refs.singlePicker.open()
			},
			
			// 打开多选工种选择器
			openMultiplePicker() {
				this.$refs.multiplePicker.open()
			},
			
			// 打开二级工种选择器
			openSubTypePicker() {
				this.$refs.subTypePicker.open()
			},
			
			// 打开整个工种选择器
			openWholeTypePicker() {
				this.$refs.wholeTypePicker.open()
			},
			
			// 单选确认回调
			onSingleConfirm(result) {
				console.log('单选结果:', result)
				this.singleResult = result
			},
			
			// 多选确认回调
			onMultipleConfirm(result) {
				console.log('多选结果:', result)
				this.multipleResult = result
			},
			
			// 二级工种确认回调
			onSubTypeConfirm(result) {
				console.log('二级工种结果:', result)
				this.subTypeResult = result
			},
			
			// 整个工种确认回调
			onWholeTypeConfirm(result) {
				console.log('整个工种结果:', result)
				this.wholeTypeResult = result
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	background: #f5f5f5;
	min-height: 100vh;
}

.content {
	padding: 20rpx;
}

.demo-section {
	margin-bottom: 40rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	
	.section-title {
		padding: 30rpx 30rpx 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.demo-item {
		padding: 0;
		
		.result-info {
			padding: 20rpx 30rpx;
			background: #f8f9fa;
			border-top: 1px solid #f0f0f0;
			
			text {
				display: block;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 10rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	
	.usage-info {
		padding: 30rpx;
		
		text {
			display: block;
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 10rpx;
			
			&.usage-title {
				font-weight: bold;
				color: #333;
				margin-top: 20rpx;
				margin-bottom: 15rpx;
				
				&:first-child {
					margin-top: 0;
				}
			}
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
</style>