<template>
|
<view class="task-type-selector">
|
<view class="form-label" v-if="label">{{ label }}</view>
|
<picker
|
mode="selector"
|
:range="taskTypeLabels"
|
:value="selectedIndex"
|
@change="onTaskTypeChange"
|
:disabled="disabled"
|
>
|
<view class="form-input picker-input" :class="{ disabled: disabled }">
|
{{ displayText }}
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
</view>
|
</picker>
|
</view>
|
</template>
|
|
<script>
|
import { getDicts } from "@/api/dict"
|
|
export default {
|
name: 'TaskTypeSelector',
|
props: {
|
// 标签文本
|
label: {
|
type: String,
|
default: '任务类型'
|
},
|
// 当前选中的任务类型值
|
value: {
|
type: String,
|
default: ''
|
},
|
// 字典类型（sys_task_type）
|
dictType: {
|
type: String,
|
default: 'sys_task_type'
|
},
|
// 占位符
|
placeholder: {
|
type: String,
|
default: '请选择任务类型'
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
// 过滤条件（可选）- 只显示特定的任务类型
|
filter: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
taskTypeOptions: [],
|
taskTypeLabels: [],
|
selectedIndex: -1
|
}
|
},
|
computed: {
|
displayText() {
|
if (this.selectedIndex >= 0 && this.selectedIndex < this.taskTypeLabels.length) {
|
return this.taskTypeLabels[this.selectedIndex]
|
}
|
return this.placeholder
|
}
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(newVal) {
|
if (newVal && this.taskTypeOptions.length > 0) {
|
const index = this.taskTypeOptions.findIndex(item => item.value === newVal)
|
this.selectedIndex = index
|
}
|
}
|
}
|
},
|
mounted() {
|
this.loadTaskTypes()
|
},
|
methods: {
|
// 加载任务类型字典
|
loadTaskTypes() {
|
return getDicts(this.dictType).then(response => {
|
const dictData = response.data || []
|
let options = dictData.map(item => ({
|
label: item.dictLabel,
|
value: item.dictValue
|
}))
|
|
// 如果有过滤条件，只保留指定的类型
|
if (this.filter && this.filter.length > 0) {
|
options = options.filter(item => this.filter.includes(item.value))
|
}
|
|
this.taskTypeOptions = options
|
this.taskTypeLabels = options.map(item => item.label)
|
|
// 如果有预设值，设置选中索引
|
if (this.value) {
|
const index = this.taskTypeOptions.findIndex(item => item.value === this.value)
|
this.selectedIndex = index
|
}
|
|
return options
|
}).catch(error => {
|
console.error('加载任务类型字典失败:', error)
|
// 使用默认值
|
this.taskTypeOptions = [
|
{ label: '维修保养', value: 'MAINTENANCE' },
|
{ label: '加油任务', value: 'FUEL' },
|
{ label: '其他', value: 'OTHER' }
|
]
|
this.taskTypeLabels = this.taskTypeOptions.map(item => item.label)
|
return this.taskTypeOptions
|
})
|
},
|
|
// 任务类型选择变化
|
onTaskTypeChange(e) {
|
const index = e.detail.value
|
this.selectedIndex = index
|
const selectedOption = this.taskTypeOptions[index]
|
|
if (selectedOption) {
|
this.$emit('input', selectedOption.value)
|
this.$emit('change', {
|
value: selectedOption.value,
|
label: selectedOption.label
|
})
|
}
|
},
|
|
// 重新加载任务类型（供外部调用）
|
reload() {
|
return this.loadTaskTypes()
|
},
|
|
// 获取当前选中的任务类型对象
|
getSelected() {
|
if (this.selectedIndex >= 0 && this.selectedIndex < this.taskTypeOptions.length) {
|
return this.taskTypeOptions[this.selectedIndex]
|
}
|
return null
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.task-type-selector {
|
.form-label {
|
font-size: 28rpx;
|
margin-bottom: 15rpx;
|
color: #333;
|
}
|
|
.form-input {
|
height: 70rpx;
|
padding: 0 20rpx;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
font-size: 28rpx;
|
|
&.picker-input {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
&.disabled {
|
background-color: #f5f5f5;
|
color: #999;
|
}
|
}
|
}
|
</style>
|
