393 lines
13 KiB
Vue
393 lines
13 KiB
Vue
<!--
|
||
* @Author: sjjh
|
||
* @Date: 2025-10-08 23:33:29
|
||
* @Description: 护理记录单
|
||
-->
|
||
<template>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h2 class="title">乾安县人民医院</h2>
|
||
<h3 class="subtitle">患者护理记录单</h3>
|
||
</div>
|
||
|
||
<el-form :model="state.formData" label-position="top" class="nursing-form">
|
||
<!-- 患者基本信息 -->
|
||
<div class="patient-info">
|
||
<el-row :gutter="20">
|
||
<el-col :span="2">
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="state.formData.name" placeholder="请输入姓名"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-form-item label="年龄">
|
||
<el-input v-model="state.formData.age" placeholder="请输入年龄"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item label="性别">
|
||
<el-select v-model="state.formData.gender" placeholder="请选择性别">
|
||
<el-option label="男" value="male"></el-option>
|
||
<el-option label="女" value="female"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item label="病区">
|
||
<el-input v-model="state.formData.ward" placeholder="请输入病区"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item label="床号">
|
||
<el-input v-model="state.formData.bedNumber" placeholder="请输入床号"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item label="住院号">
|
||
<el-input
|
||
v-model="state.formData.hospitalNumber"
|
||
placeholder="请输入住院号"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item label="入院诊断">
|
||
<el-input v-model="state.formData.diagnosis" placeholder="请输入入院诊断"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<!-- 基本信息记录表格 -->
|
||
<div class="vital-signs-table">
|
||
<el-table :data="state.vitalSigns" border style="width: 100%">
|
||
<el-table-column label="日期" width="100">
|
||
<template #default="scope">
|
||
<el-date-picker
|
||
v-model="scope.row.date"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="时间" width="100">
|
||
<template #default="scope">
|
||
<el-time-picker
|
||
v-model="scope.row.time"
|
||
placeholder="选择时间"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
style="width: 100%"
|
||
></el-time-picker>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="基本信息">
|
||
<el-table-column label="意识" width="80">
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.consciousness" placeholder="选择">
|
||
<el-option label="清醒" value="清醒"></el-option>
|
||
<el-option label="嗜睡" value="嗜睡"></el-option>
|
||
<el-option label="昏迷" value="昏迷"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="体温℃" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.temperature" placeholder="体温"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="心率次/分" width="100">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.heartRate" placeholder="心率"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="脉搏次/分" width="100">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.heartRate" placeholder="心率"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="呼吸次/分" width="100">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.respiratoryRate" placeholder="呼吸"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="血压mmHg" width="120">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.bloodPressure" placeholder="血压"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="血氧饱和度" width="120">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.bloodPressure" placeholder="血压"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column label="氧疗L/min" width="200">
|
||
<el-table-column label="方式" >
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.oxygenMethod" placeholder="选择">
|
||
<el-option label="鼻导管" value="鼻导管"></el-option>
|
||
<el-option label="面罩" value="面罩"></el-option>
|
||
<el-option label="无" value="无"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="流量" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column label="入量" width="200">
|
||
<el-table-column label="名称" >
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.oxygenMethod" placeholder="选择">
|
||
<el-option label="鼻导管" value="鼻导管"></el-option>
|
||
<el-option label="面罩" value="面罩"></el-option>
|
||
<el-option label="无" value="无"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="ml" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="途径" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column label="出量" width="200">
|
||
<el-table-column label="名称" >
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.oxygenMethod" placeholder="选择">
|
||
<el-option label="鼻导管" value="鼻导管"></el-option>
|
||
<el-option label="面罩" value="面罩"></el-option>
|
||
<el-option label="无" value="无"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="ml" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column label="皮肤情况" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="管路护理" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="病情与措施" width="80">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.flowRate" placeholder="流量"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="护士签名" width="100">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.nurseSignature" placeholder="签名"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="120" fixed="right">
|
||
<template #default="scope">
|
||
<el-button type="danger" size="small" @click="removeVitalSign(scope.$index)"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="add-row">
|
||
<el-button type="primary" @click="addVitalSign">添加记录</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表单底部按钮 -->
|
||
<div class="form-actions">
|
||
<div>
|
||
一、意识:①清醒；②嗜睡；③意识模糊；④昏睡；⑤谗妄；⑥浅昏迷；⑦中度昏迷；⑧深昏迷；⑨全麻未醒；⑩镇静。
|
||
</div>
|
||
<div>
|
||
二、氧疗方式:①鼻导管；②面罩；③HFNC；④HIPPV；⑤IMV。
|
||
</div>
|
||
<div>
|
||
三、皮肤情况:①完好；②压疮；③出血点；④破损；⑤水肿；⑥瘀斑；⑦过敏；⑧其他。
|
||
</div>
|
||
<div>
|
||
四、管路护理:①胃管；②尿导管；③静脉置管；④吸氧管；⑤“T”管；⑥胸腔引流管；⑦腹腔引流管；⑧伤口引流管；⑨脑室引流管；⑩其他。
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineOptions({
|
||
name: 'NursingRecordSheet',
|
||
});
|
||
import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue';
|
||
const { proxy } = getCurrentInstance();
|
||
const emits = defineEmits([]);
|
||
const props = defineProps({
|
||
patientId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
});
|
||
|
||
// 表单数据
|
||
const state = reactive({
|
||
formData: {
|
||
name: '',
|
||
age: '',
|
||
gender: '',
|
||
ward: '',
|
||
bedNumber: '',
|
||
hospitalNumber: '',
|
||
diagnosis: '',
|
||
},
|
||
vitalSigns: [
|
||
{
|
||
date: new Date().toISOString().split('T')[0],
|
||
time: new Date().toTimeString().slice(0, 5),
|
||
consciousness: '清醒',
|
||
temperature: '',
|
||
heartRate: '',
|
||
respiratoryRate: '',
|
||
bloodPressure: '',
|
||
oxygenMethod: '无',
|
||
flowRate: '',
|
||
nurseSignature: '',
|
||
},
|
||
],
|
||
|
||
});
|
||
|
||
// 添加生命体征记录
|
||
const addVitalSign = () => {
|
||
state.vitalSigns.push({
|
||
date: new Date().toISOString().split('T')[0],
|
||
time: new Date().toTimeString().slice(0, 5),
|
||
consciousness: '清醒',
|
||
temperature: '',
|
||
heartRate: '',
|
||
respiratoryRate: '',
|
||
bloodPressure: '',
|
||
oxygenMethod: '无',
|
||
flowRate: '',
|
||
nurseSignature: '',
|
||
});
|
||
};
|
||
|
||
// 删除生命体征记录
|
||
const removeVitalSign = (index) => {
|
||
state.vitalSigns.splice(index, 1);
|
||
if (state.vitalSigns.length === 0) {
|
||
addVitalSign();
|
||
}
|
||
};
|
||
|
||
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
state.formData = {
|
||
name: '',
|
||
age: '',
|
||
gender: '',
|
||
ward: '',
|
||
bedNumber: '',
|
||
hospitalNumber: '',
|
||
diagnosis: '',
|
||
};
|
||
state.vitalSigns = [
|
||
{
|
||
date: new Date().toISOString().split('T')[0],
|
||
time: new Date().toTimeString().slice(0, 5),
|
||
consciousness: '清醒',
|
||
temperature: '',
|
||
heartRate: '',
|
||
respiratoryRate: '',
|
||
bloodPressure: '',
|
||
oxygenMethod: '无',
|
||
flowRate: '',
|
||
nurseSignature: '',
|
||
},
|
||
];
|
||
};
|
||
|
||
onBeforeMount(() => {
|
||
// 如果有patientId，可以在这里加载患者数据
|
||
if (props.patientId) {
|
||
// 加载患者数据的逻辑
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
// 组件挂载后的逻辑
|
||
});
|
||
|
||
defineExpose({ state });
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
|
||
.title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.nursing-form {
|
||
.patient-info {
|
||
padding: 15px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.vital-signs-table
|
||
{
|
||
margin-bottom: 20px;
|
||
|
||
h4 {
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.add-row {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.form-actions {
|
||
margin-top: 30px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
</style>
|