2 changed files with 4 additions and 259 deletions
Split View
Diff Options
-
+0 -255pages/demo/JobTypePickerDemo.vue
-
+4 -4pages/index/index.vue
+ 0
- 255
pages/demo/JobTypePickerDemo.vue
View File
| @ -1,255 +0,0 @@ | |||
| <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> | |||