83 lines
5.1 KiB
Vue
83 lines
5.1 KiB
Vue
<template>
|
|
<div class="handoff-record">
|
|
<div class="shift-tabs">
|
|
<div v-for="s in shifts" :key="s.key" class="tab" :class="{ active: form.shift === s.key }" @click="form.shift = s.key">{{ s.label }}</div>
|
|
</div>
|
|
<div class="form-section">
|
|
<div class="form-item"><div class="label">交接班护士</div><input v-model="form.handoffNurse" placeholder="交班护士" class="input" /></div>
|
|
<div class="form-item"><div class="label">接班护士</div><input v-model="form.onDutyNurse" placeholder="接班护士" class="input" /></div>
|
|
<div class="form-item"><div class="label">科室</div><input v-model="form.department" placeholder="科室名称" class="input" /></div>
|
|
<div class="form-item"><div class="label">在院患者数</div><input v-model="form.patientCount" type="number" placeholder="0" class="input" /></div>
|
|
<div class="form-item"><div class="label">病情变化</div><textarea v-model="form.patientChanges" placeholder="交接患者病情变化..." class="textarea" rows="3"></textarea></div>
|
|
<div class="form-item"><div class="label">特殊治疗</div><textarea v-model="form.specialTreatment" placeholder="特殊治疗及注意事项..." class="textarea" rows="3"></textarea></div>
|
|
<div class="form-item"><div class="label">待办事项</div><textarea v-model="form.pendingItems" placeholder="未完成事项及待跟进..." class="textarea" rows="3"></textarea></div>
|
|
<div class="form-item"><div class="label">物品交接</div><textarea v-model="form.materialHandoff" placeholder="交接的物品..." class="textarea" rows="2"></textarea></div>
|
|
</div>
|
|
<button class="submit-btn" @click="submit" :disabled="submitting">{{ submitting ? '提交中...' : '保存交接记录' }}</button>
|
|
|
|
<div class="history-section">
|
|
<div class="section-title">历史交接记录</div>
|
|
<div v-for="h in history" :key="h.id" class="history-card">
|
|
<div class="h-header"><span class="h-shift">{{ h.shift }}</span><span class="h-time">{{ h.createTime }}</span></div>
|
|
<div class="h-nurses">{{ h.handoffNurse }} → {{ h.onDutyNurse }}</div>
|
|
<div class="h-changes">{{ h.patientChanges }}</div>
|
|
</div>
|
|
<div v-if="history.length === 0" class="empty">暂无历史记录</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { nursingApi } from '../api'
|
|
|
|
const shifts = [{ key: 'DAY', label: '白班' }, { key: 'NIGHT', label: '夜班' }]
|
|
const form = ref({ shift: 'DAY', handoffNurse: '', onDutyNurse: '', department: '', patientCount: 0, patientChanges: '', specialTreatment: '', pendingItems: '', materialHandoff: '' })
|
|
const history = ref([])
|
|
const submitting = ref(false)
|
|
|
|
const loadHistory = async () => {
|
|
try {
|
|
const res = await nursingApi.getHandoffRecords({ pageSize: 20 })
|
|
history.value = res.data?.records || res.data?.rows || res.data || []
|
|
} catch {}
|
|
}
|
|
|
|
const submit = async () => {
|
|
if (!form.value.handoffNurse || !form.value.onDutyNurse) { ElMessage.warning('请填写交接班护士'); return }
|
|
submitting.value = true
|
|
try {
|
|
await nursingApi.submitHandoffRecord({ ...form.value })
|
|
ElMessage.success('交接记录已保存')
|
|
form.value = { shift: form.value.shift, handoffNurse: '', onDutyNurse: '', department: form.value.department, patientCount: 0, patientChanges: '', specialTreatment: '', pendingItems: '', materialHandoff: '' }
|
|
loadHistory()
|
|
} catch { ElMessage.error('保存失败') } finally { submitting.value = false }
|
|
}
|
|
|
|
onMounted(loadHistory)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.shift-tabs { display: flex; background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
|
|
.tab { flex: 1; text-align: center; padding: 12px; font-size: 14px; color: #666; background: #f5f5f5; }
|
|
.tab.active { background: #1890ff; color: #fff; }
|
|
.form-section { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
|
|
.form-item { margin-bottom: 12px; }
|
|
.label { font-size: 13px; color: #666; margin-bottom: 6px; }
|
|
.input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
|
|
.textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; resize: none; font-family: inherit; }
|
|
.input:focus, .textarea:focus { border-color: #1890ff; outline: none; }
|
|
.submit-btn { width: 100%; padding: 14px; background: #1890ff; color: #fff; border: none; border-radius: 8px; font-size: 16px; margin-bottom: 16px; font-weight: 600; }
|
|
.submit-btn:disabled { background: #91d5ff; }
|
|
.history-section { background: #fff; border-radius: 8px; padding: 14px; }
|
|
.section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
|
|
.history-card { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
|
|
.h-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
|
|
.h-shift { font-weight: 600; font-size: 14px; color: #1890ff; }
|
|
.h-time { font-size: 12px; color: #999; }
|
|
.h-nurses { font-size: 13px; color: #666; margin-bottom: 4px; }
|
|
.h-changes { font-size: 13px; color: #333; }
|
|
.empty { text-align: center; padding: 20px; color: #999; }
|
|
</style>
|