You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
6.0 KiB
255 lines
6.0 KiB
<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>
|