<template>
|
<view class="form-item">
|
<view class="form-label" :class="{ required: required }">{{ label }}</view>
|
<!-- 调试信息 -->
|
<view v-if="false" style="font-size: 24rpx; color: #999; margin-bottom: 10rpx;">
|
isHome: {{ isHome }}, options.length: {{ departmentOptions.length }}
|
</view>
|
<picker
|
v-if="!isHome"
|
mode="selector"
|
:range="departmentOptions"
|
range-key="text"
|
:value="selectedIndex"
|
@change="onDepartmentChange"
|
:disabled="departmentOptions.length === 0"
|
>
|
<view class="form-input picker-input" :class="{ disabled: departmentOptions.length === 0 }">
|
{{ displayText }}
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
</view>
|
</picker>
|
<view v-else class="form-input picker-input disabled">
|
其它
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { getHospitalDepartments } from "@/api/dictionary"
|
|
export default {
|
name: 'DepartmentSelector',
|
props: {
|
// 标签文本
|
label: {
|
type: String,
|
default: '科室'
|
},
|
// 是否必填
|
required: {
|
type: Boolean,
|
default: false
|
},
|
// 当前选中的科室名称
|
value: {
|
type: String,
|
default: ''
|
},
|
// 当前选中的科室ID
|
departmentId: {
|
type: [Number, String],
|
default: null
|
},
|
// 是否为"家中"（如果是家中，显示"其它"且不可选择）
|
isHome: {
|
type: Boolean,
|
default: false
|
},
|
// 占位符
|
placeholder: {
|
type: String,
|
default: '请选择科室'
|
}
|
},
|
data() {
|
return {
|
departmentOptions: [], // 科室选项列表
|
selectedIndex: -1
|
}
|
},
|
computed: {
|
displayText() {
|
if (this.departmentOptions.length === 0) {
|
return '加载中...'
|
}
|
if (this.selectedIndex >= 0 && this.selectedIndex < this.departmentOptions.length) {
|
return this.departmentOptions[this.selectedIndex].text
|
}
|
return this.value || this.placeholder
|
}
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(newVal) {
|
console.log('DepartmentSelector: value changed:', newVal)
|
if (newVal) {
|
this.updateSelectedIndex(newVal)
|
} else {
|
this.selectedIndex = -1
|
}
|
}
|
},
|
departmentId: {
|
immediate: true,
|
handler(newVal) {
|
console.log('DepartmentSelector: departmentId changed:', newVal)
|
if (newVal) {
|
this.updateSelectedIndexById(newVal)
|
}
|
}
|
},
|
departmentOptions: {
|
immediate: true,
|
handler() {
|
console.log('DepartmentSelector: departmentOptions changed, length=', this.departmentOptions.length)
|
console.log('DepartmentSelector: 当前显示条件 - isHome:', this.isHome, 'departmentOptions.length:', this.departmentOptions.length, '显示picker:', !this.isHome && this.departmentOptions.length > 0)
|
// 优先使用科室ID进行匹配，如果没有科室ID再使用科室名称
|
if (this.departmentId) {
|
this.updateSelectedIndexById(this.departmentId)
|
} else if (this.value) {
|
this.updateSelectedIndex(this.value)
|
}
|
}
|
},
|
isHome: {
|
immediate: true,
|
handler(newVal) {
|
console.log('DepartmentSelector: isHome changed:', newVal)
|
// 当变为"家中"时，自动选择"其它"科室
|
if (newVal && this.departmentOptions.length > 0) {
|
this.autoSelectOtherDepartment()
|
}
|
}
|
}
|
},
|
mounted() {
|
console.log('DepartmentSelector: 组件已挂载, isHome=', this.isHome, 'value=', this.value, 'departmentId=', this.departmentId)
|
this.loadDepartments()
|
},
|
methods: {
|
// 加载科室数据
|
loadDepartments() {
|
console.log('DepartmentSelector: 开始加载科室数据')
|
getHospitalDepartments().then(response => {
|
console.log('DepartmentSelector: 科室接口响应:', response)
|
const list = response.data || []
|
console.log('DepartmentSelector: 科室数据条数:', list.length)
|
if (list.length > 0) {
|
console.log('DepartmentSelector: 科室数据示例:', list.slice(0, 3))
|
}
|
this.departmentOptions = list.map(item => ({
|
id: item.vID,
|
text: item.vtext,
|
dictValue: item.vtext
|
}))
|
console.log('DepartmentSelector: 处理后的科室选项:', this.departmentOptions.length)
|
|
// 如果当前是"家中"，自动选择"其它"
|
if (this.isHome) {
|
this.autoSelectOtherDepartment()
|
}
|
}).catch(error => {
|
console.error('DepartmentSelector: 加载科室数据失败:', error)
|
this.departmentOptions = []
|
})
|
},
|
|
// 根据科室名称更新选中索引
|
updateSelectedIndex(departmentName) {
|
if (!departmentName || this.departmentOptions.length === 0) {
|
this.selectedIndex = -1
|
return
|
}
|
|
const index = this.departmentOptions.findIndex(d => d.text === departmentName)
|
this.selectedIndex = index !== -1 ? index : -1
|
},
|
|
// 根据科室ID更新选中索引
|
updateSelectedIndexById(departmentId) {
|
if (!departmentId || this.departmentOptions.length === 0) {
|
this.selectedIndex = -1
|
return
|
}
|
|
const index = this.departmentOptions.findIndex(d => d.id == departmentId)
|
this.selectedIndex = index !== -1 ? index : -1
|
},
|
|
// 科室选择变化（picker）
|
onDepartmentChange(e) {
|
const index = e.detail.value
|
|
// 安全检查：确保索引有效且选项存在
|
if (index < 0 || index >= this.departmentOptions.length) {
|
console.warn('科室选择索引越界:', index, '数组长度:', this.departmentOptions.length)
|
return
|
}
|
|
const selected = this.departmentOptions[index]
|
|
// 二次检查：确保选中项存在且有text属性
|
if (!selected || !selected.text) {
|
console.warn('科室选项数据异常:', selected)
|
return
|
}
|
|
this.selectedIndex = index
|
|
this.$emit('input', selected.text)
|
this.$emit('change', {
|
department: selected.text,
|
departmentId: selected.id
|
})
|
},
|
|
// 科室输入（手动输入）
|
onDepartmentInput(e) {
|
const department = e.detail.value
|
this.$emit('input', department)
|
this.$emit('change', {
|
department: department,
|
departmentId: null
|
})
|
},
|
|
// 自动选择"其它"科室（当isHome为true时）
|
autoSelectOtherDepartment() {
|
// 查找"其它"科室
|
const otherDept = this.departmentOptions.find(d => d.text === '其它')
|
if (otherDept) {
|
console.log('DepartmentSelector: 自动选择"其它"科室, ID:', otherDept.id)
|
// 更新选中索引
|
const index = this.departmentOptions.findIndex(d => d.id === otherDept.id)
|
this.selectedIndex = index
|
|
// 触发change事件，传递departmentId
|
this.$emit('input', otherDept.text)
|
this.$emit('change', {
|
department: otherDept.text,
|
departmentId: otherDept.id
|
})
|
} else {
|
console.warn('DepartmentSelector: 未找到"其它"科室')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.form-item {
|
margin-bottom: 40rpx;
|
|
.form-label {
|
font-size: 28rpx;
|
margin-bottom: 15rpx;
|
color: #333;
|
|
&.required::before {
|
content: '*';
|
color: #ff0000;
|
margin-right: 5rpx;
|
}
|
}
|
|
.form-input {
|
width: 100%;
|
height: 70rpx;
|
padding: 0 20rpx;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
font-size: 28rpx;
|
box-sizing: border-box;
|
|
&.picker-input {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
&.disabled {
|
background-color: #f5f5f5;
|
color: #999;
|
}
|
}
|
}
|
</style>
|
