2 changed files with 4 additions and 259 deletions
Unified 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> | |||||