<template>
|
<view class="disease-selector">
|
<view class="form-item">
|
<view class="form-label" :class="{ required: required }" v-if="showLabel">{{ label }}</view>
|
<view class="disease-container">
|
<view class="disease-tags" v-if="selectedDiseases.length > 0">
|
<view
|
class="disease-tag"
|
v-for="(disease, index) in selectedDiseases"
|
:key="index"
|
>
|
<text class="disease-name">{{ disease.icdName }}</text>
|
<uni-icons
|
type="closeempty"
|
size="16"
|
color="#fff"
|
@click="removeDisease(index)"
|
></uni-icons>
|
</view>
|
</view>
|
<view class="add-disease-btn" @click="showSelector">
|
<uni-icons type="plusempty" size="20" color="#007AFF"></uni-icons>
|
<text>添加病情</text>
|
</view>
|
<textarea
|
v-if="showOtherDescription"
|
class="form-textarea"
|
placeholder="其他病情描述（选填）"
|
:value="otherDescription"
|
@input="onOtherDescriptionInput"
|
style="margin-top: 20rpx;"
|
/>
|
</view>
|
</view>
|
|
<!-- 病情选择弹窗 -->
|
<uni-popup ref="diseasePopup" type="bottom" :safe-area="true">
|
<view class="disease-selector-popup">
|
<view class="popup-header">
|
<view class="popup-title">选择病情（ICD-10）</view>
|
<view class="popup-close" @click="closeSelector">
|
<uni-icons type="closeempty" size="24" color="#333"></uni-icons>
|
</view>
|
</view>
|
|
<view class="search-box">
|
<uni-icons type="search" size="18" color="#999"></uni-icons>
|
<input
|
class="search-input"
|
placeholder="搜索疾病名称、编码或助记码"
|
v-model="diseaseSearchKeyword"
|
@input="onDiseaseSearch"
|
/>
|
</view>
|
|
<scroll-view class="disease-list-popup" scroll-y="true">
|
<view
|
class="disease-item-popup"
|
v-for="disease in diseaseSearchResults"
|
:key="disease.id"
|
@click="toggleDiseaseSelection(disease)"
|
>
|
<view class="disease-info">
|
<view class="disease-name-row">
|
<text class="disease-name">{{ disease.icdName }}</text>
|
<text class="disease-code">[{{ disease.icdCode }}]</text>
|
</view>
|
<view class="disease-detail-row" v-if="disease.sm">
|
<text class="disease-desc">{{ disease.sm }}</text>
|
</view>
|
</view>
|
<uni-icons
|
v-if="isDiseaseSelected(disease.id)"
|
type="checkmarkempty"
|
size="24"
|
color="#007AFF"
|
></uni-icons>
|
<view v-else class="checkbox-empty"></view>
|
</view>
|
|
<view class="no-data" v-if="diseaseSearchResults.length === 0">
|
<uni-icons type="info" size="40" color="#ccc"></uni-icons>
|
<text>{{ diseaseSearchKeyword ? '未找到相关疾病' : '暂无病情数据' }}</text>
|
</view>
|
</scroll-view>
|
|
<view class="popup-footer">
|
<button class="cancel-btn" @click="closeSelector">取消</button>
|
<button class="confirm-btn" @click="confirmSelection">确定(已选{{ tempSelectedDiseases.length }})</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script>
|
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
import { searchIcd10 } from "@/api/icd10"
|
|
export default {
|
name: 'DiseaseSelector',
|
components: {
|
uniPopup
|
},
|
props: {
|
// 标签文本
|
label: {
|
type: String,
|
default: '病情'
|
},
|
// 是否显示标签
|
showLabel: {
|
type: Boolean,
|
default: true
|
},
|
// 是否必填
|
required: {
|
type: Boolean,
|
default: false
|
},
|
// 已选择的病情列表
|
value: {
|
type: Array,
|
default: () => []
|
},
|
// 其他病情描述
|
otherDescription: {
|
type: String,
|
default: ''
|
},
|
// 是否显示其他病情描述框
|
showOtherDescription: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data() {
|
return {
|
selectedDiseases: [],
|
tempSelectedDiseases: [],
|
diseaseSearchKeyword: '',
|
diseaseSearchResults: [],
|
diseaseSearchTimer: null
|
}
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(newVal) {
|
if (newVal && Array.isArray(newVal)) {
|
this.selectedDiseases = [...newVal]
|
}
|
}
|
}
|
},
|
methods: {
|
// 显示病情选择弹窗
|
showSelector() {
|
// 初始化临时选择列表（复制当前已选择的病情）
|
this.tempSelectedDiseases = [...this.selectedDiseases]
|
this.diseaseSearchKeyword = ''
|
// 默认加载所有病情
|
this.loadAllDiseases()
|
this.$refs.diseasePopup.open()
|
},
|
|
// 关闭病情选择弹窗
|
closeSelector() {
|
this.$refs.diseasePopup.close()
|
this.diseaseSearchKeyword = ''
|
this.diseaseSearchResults = []
|
this.tempSelectedDiseases = []
|
},
|
|
// 病情搜索
|
onDiseaseSearch(e) {
|
const keyword = e.detail.value
|
this.diseaseSearchKeyword = keyword
|
|
// 防抖处理
|
if (this.diseaseSearchTimer) {
|
clearTimeout(this.diseaseSearchTimer)
|
}
|
|
// 如果关键词为空，加载所有病情
|
if (!keyword || keyword.trim() === '') {
|
this.loadAllDiseases()
|
return
|
}
|
|
// 有关键词时进行搜索
|
this.diseaseSearchTimer = setTimeout(() => {
|
this.searchDiseaseByKeyword(keyword)
|
}, 300)
|
},
|
|
// 加载所有病情（默认显示）
|
loadAllDiseases() {
|
searchIcd10('').then(response => {
|
this.diseaseSearchResults = response.data || []
|
}).catch(error => {
|
console.error('加载病情列表失败:', error)
|
this.diseaseSearchResults = []
|
})
|
},
|
|
// 根据关键词搜索病情
|
searchDiseaseByKeyword(keyword) {
|
searchIcd10(keyword).then(response => {
|
this.diseaseSearchResults = response.data || []
|
}).catch(error => {
|
console.error('搜索病情失败:', error)
|
this.diseaseSearchResults = []
|
})
|
},
|
|
// 切换病情选中状态
|
toggleDiseaseSelection(disease) {
|
const index = this.tempSelectedDiseases.findIndex(d => d.id === disease.id)
|
|
if (index > -1) {
|
// 已选中，移除
|
this.tempSelectedDiseases.splice(index, 1)
|
} else {
|
// 未选中，添加
|
this.tempSelectedDiseases.push({
|
id: disease.id,
|
icdCode: disease.icdCode,
|
icdName: disease.icdName,
|
sm: disease.sm
|
})
|
}
|
},
|
|
// 判断病情是否已选中
|
isDiseaseSelected(diseaseId) {
|
return this.tempSelectedDiseases.some(d => d.id === diseaseId)
|
},
|
|
// 确认病情选择
|
confirmSelection() {
|
// 将临时选择的病情复制到正式列表
|
this.selectedDiseases = [...this.tempSelectedDiseases]
|
this.$emit('input', this.selectedDiseases)
|
this.$emit('change', this.selectedDiseases)
|
this.closeSelector()
|
},
|
|
// 移除病情
|
removeDisease(index) {
|
this.selectedDiseases.splice(index, 1)
|
this.$emit('input', this.selectedDiseases)
|
this.$emit('change', this.selectedDiseases)
|
},
|
|
// 其他病情描述输入
|
onOtherDescriptionInput(e) {
|
const value = e.detail.value
|
this.$emit('update:otherDescription', value)
|
this.$emit('other-description-change', value)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.disease-selector {
|
.form-item {
|
margin-bottom: 40rpx;
|
|
.form-label {
|
font-size: 28rpx;
|
margin-bottom: 15rpx;
|
color: #333;
|
|
&.required::before {
|
content: '*';
|
color: #ff4d4f;
|
margin-right: 4rpx;
|
font-weight: bold;
|
}
|
}
|
|
.disease-container {
|
.disease-tags {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 15rpx;
|
margin-bottom: 20rpx;
|
|
.disease-tag {
|
display: flex;
|
align-items: center;
|
padding: 10rpx 20rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: 30rpx;
|
|
.disease-name {
|
font-size: 26rpx;
|
color: white;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
.add-disease-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 20rpx;
|
border: 1rpx dashed #007AFF;
|
border-radius: 10rpx;
|
color: #007AFF;
|
font-size: 28rpx;
|
|
text {
|
margin-left: 10rpx;
|
}
|
}
|
|
.form-textarea {
|
width: 100%;
|
min-height: 150rpx;
|
padding: 20rpx;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
font-size: 28rpx;
|
}
|
}
|
}
|
}
|
|
// 病情选择弹窗样式
|
.disease-selector-popup {
|
background-color: white;
|
border-radius: 20rpx 20rpx 0 0;
|
max-height: 80vh;
|
display: flex;
|
flex-direction: column;
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
flex-shrink: 0;
|
|
.popup-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.popup-close {
|
padding: 10rpx;
|
}
|
}
|
|
.search-box {
|
display: flex;
|
align-items: center;
|
margin: 20rpx 30rpx;
|
padding: 15rpx 20rpx;
|
background-color: #f5f5f5;
|
border-radius: 10rpx;
|
flex-shrink: 0;
|
|
.search-input {
|
flex: 1;
|
margin-left: 10rpx;
|
font-size: 28rpx;
|
}
|
}
|
|
.disease-list-popup {
|
flex: 1;
|
overflow-y: auto;
|
padding: 0 30rpx;
|
|
.disease-item-popup {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 25rpx 20rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:active {
|
background-color: #f5f5f5;
|
}
|
|
.disease-info {
|
flex: 1;
|
|
.disease-name-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8rpx;
|
|
.disease-name {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #333;
|
margin-right: 15rpx;
|
}
|
|
.disease-code {
|
font-size: 24rpx;
|
color: #007AFF;
|
background-color: #e6f2ff;
|
padding: 4rpx 12rpx;
|
border-radius: 6rpx;
|
}
|
}
|
|
.disease-detail-row {
|
.disease-desc {
|
font-size: 24rpx;
|
color: #999;
|
line-height: 1.5;
|
}
|
}
|
}
|
|
.checkbox-empty {
|
width: 40rpx;
|
height: 40rpx;
|
border: 2rpx solid #ddd;
|
border-radius: 50%;
|
}
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 100rpx 0;
|
color: #999;
|
|
text {
|
display: block;
|
margin-top: 20rpx;
|
font-size: 28rpx;
|
}
|
}
|
}
|
|
.popup-footer {
|
display: flex;
|
padding: 20rpx 30rpx;
|
border-top: 1rpx solid #f0f0f0;
|
gap: 20rpx;
|
flex-shrink: 0;
|
|
button {
|
flex: 1;
|
height: 80rpx;
|
border-radius: 10rpx;
|
font-size: 30rpx;
|
}
|
|
.cancel-btn {
|
background-color: #f5f5f5;
|
color: #666;
|
}
|
|
.confirm-btn {
|
background-color: #007AFF;
|
color: white;
|
}
|
}
|
}
|
</style>
|
