79 lines
4.3 KiB
Vue
79 lines
4.3 KiB
Vue
<template>
|
|
<div class="vital-entry">
|
|
<div class="patient-bar" v-if="patientName"><span class="label">患者:</span> {{ patientName }}</div>
|
|
<div class="entry-grid">
|
|
<div v-for="item in vitalItems" :key="item.key" class="entry-item">
|
|
<div class="entry-label">{{ item.label }}</div>
|
|
<input v-model="formData[item.key]" type="number" :placeholder="item.placeholder" class="entry-input" />
|
|
<div class="quick-values"><span v-for="v in item.quickValues" :key="v" class="quick-val" @click="formData[item.key] = v">{{ v }}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="pain-section">
|
|
<div class="entry-label">疼痛评分 (0-10)</div>
|
|
<div class="pain-scale"><span v-for="n in 11" :key="n" class="pain-num" :class="{ active: formData.painScore === n-1 }" @click="formData.painScore = n-1">{{ n-1 }}</span></div>
|
|
<div class="pain-label">{{ painLabel }}</div>
|
|
</div>
|
|
<button class="submit-btn" @click="submit" :disabled="submitting">{{ submitting ? '提交中...' : '一键提交' }}</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { nursingApi } from '../api'
|
|
|
|
const route = useRoute()
|
|
|
|
onMounted(async () => {
|
|
const patientId = route.params.patientId
|
|
if (patientId) {
|
|
try {
|
|
const res = await nursingApi.getPatientInfo(patientId)
|
|
if (res.data) patientName.value = res.data.name || ''
|
|
} catch {}
|
|
}
|
|
})
|
|
const submitting = ref(false)
|
|
const patientName = ref('')
|
|
const formData = ref({ temperature: '', pulse: '', bloodPressureHigh: '', bloodPressureLow: '', spo2: '', respiration: '', painScore: 0 })
|
|
const vitalItems = [
|
|
{ key: 'temperature', label: '体温(°C)', placeholder: '36.5', quickValues: [36.0, 36.5, 37.0, 37.5, 38.0] },
|
|
{ key: 'pulse', label: '脉搏(次/分)', placeholder: '72', quickValues: [60, 72, 80, 90, 100] },
|
|
{ key: 'bloodPressureHigh', label: '收缩压(mmHg)', placeholder: '120', quickValues: [90, 110, 120, 130, 140] },
|
|
{ key: 'bloodPressureLow', label: '舒张压(mmHg)', placeholder: '80', quickValues: [60, 70, 80, 90, 100] },
|
|
{ key: 'spo2', label: '血氧(%)', placeholder: '98', quickValues: [95, 96, 97, 98, 99] },
|
|
{ key: 'respiration', label: '呼吸(次/分)', placeholder: '18', quickValues: [14, 16, 18, 20, 22] }
|
|
]
|
|
const painLabel = computed(() => { const s = formData.value.painScore; return s <= 3 ? '轻度疼痛' : s <= 6 ? '中度疼痛' : '重度疼痛' })
|
|
|
|
const submit = async () => {
|
|
submitting.value = true
|
|
try {
|
|
const encounterId = route.query.encounterId
|
|
await nursingApi.submitVitalSign({ ...formData.value, patientId: route.params.patientId, encounterId: encounterId || undefined })
|
|
ElMessage.success('体征录入成功')
|
|
} catch (e) { ElMessage.error('提交失败') } finally { submitting.value = false }
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.patient-bar { background: #e6f7ff; padding: 10px 16px; font-size: 14px; margin-bottom: 12px; border-radius: 8px; }
|
|
.patient-bar .label { color: #666; }
|
|
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.entry-item { background: #fff; border-radius: 8px; padding: 10px; }
|
|
.entry-label { font-size: 12px; color: #666; margin-bottom: 6px; }
|
|
.entry-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 18px; text-align: center; }
|
|
.entry-input:focus { border-color: #1890ff; }
|
|
.quick-values { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
|
|
.quick-val { padding: 3px 8px; background: #f0f0f0; border-radius: 4px; font-size: 12px; cursor: pointer; }
|
|
.quick-val:active { background: #1890ff; color: #fff; }
|
|
.pain-section { background: #fff; border-radius: 8px; padding: 12px; margin-top: 10px; }
|
|
.pain-scale { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
|
|
.pain-num { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f0f0f0; font-size: 13px; cursor: pointer; }
|
|
.pain-num.active { background: #1890ff; color: #fff; }
|
|
.pain-label { text-align: center; margin-top: 8px; color: #666; font-size: 13px; }
|
|
.submit-btn { width: 100%; padding: 14px; background: #1890ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; margin-top: 16px; font-weight: 600; }
|
|
.submit-btn:disabled { background: #91d5ff; }
|
|
</style>
|