2025-12-06 发版,具体发版内容见发版记录
This commit is contained in:
351
openhis-ui-vue3/src/template/inHospitalCaseForm.vue
Normal file
351
openhis-ui-vue3/src/template/inHospitalCaseForm.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="assessment-page">
|
||||
<div class="page-container">
|
||||
<!-- 医院头部 -->
|
||||
<div class="hospital-header">
|
||||
<h1 class="hospital-name">
|
||||
<span class="hospital-text">长春市朝阳区中医院</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<h2 class="form-title">住院病人风险评估表</h2>
|
||||
|
||||
<!-- 表单卡片 -->
|
||||
<el-card class="form-card">
|
||||
<el-form :model="formData" label-width="100px">
|
||||
<!-- 第一行:科室、床号、住院号 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="科室">
|
||||
<el-input
|
||||
v-model="formData.department"
|
||||
readonly="true"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="床号">
|
||||
<el-input
|
||||
v-model="formData.bedNo"
|
||||
readonly="true"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="住院号">
|
||||
<el-input
|
||||
v-model="formData.busNo"
|
||||
readonly="true"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行:姓名、性别、年龄 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="姓名">
|
||||
<el-input
|
||||
v-model="formData.patientName"
|
||||
readonly="true"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="性别">
|
||||
<el-input
|
||||
v-model="formData.gender"
|
||||
readonly="true"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="年龄">
|
||||
<el-input
|
||||
v-model="formData.age"
|
||||
readonly="true"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 病情简介 -->
|
||||
<el-form-item label="病情简介">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.adm_cond"
|
||||
:autosize="{ minRows: 4, maxRows: 10 }"
|
||||
class="full-width-textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 不良后果及预后 -->
|
||||
<el-form-item label="可能发生的不良后果及预后">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.effectless"
|
||||
:autosize="{ minRows: 1, maxRows: 5 }"
|
||||
class="full-width-textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 评估等级 -->
|
||||
<el-form-item label="评估等级">
|
||||
<el-radio-group v-model="formData.evalLevel">
|
||||
<el-radio label="一般">一般</el-radio>
|
||||
<el-radio label="病重">病重</el-radio>
|
||||
<el-radio label="病危">病危</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 护理等级 -->
|
||||
<el-form-item label="护理等级">
|
||||
<el-radio-group v-model="formData.nurseLevel">
|
||||
<el-radio label="特级护理">特级护理</el-radio>
|
||||
<el-radio label="一级护理">一级护理</el-radio>
|
||||
<el-radio label="二级护理">二级护理</el-radio>
|
||||
<el-radio label="三级护理">三级护理</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 收集资料时间 -->
|
||||
<el-form-item label="收集资料时间">
|
||||
<span class="date-display">{{ currentDate }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 医师签名 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="评估医师签名">
|
||||
<el-input
|
||||
v-model="formData.sign_doc"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="主治医师签名">
|
||||
<el-input
|
||||
v-model="formData.sign_maindoc"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8">
|
||||
<el-form-item label="科主任签名">
|
||||
<el-input
|
||||
v-model="formData.sign_leader"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 1 }"
|
||||
class="auto-resize-input"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, nextTick, reactive, ref } from 'vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'InHospitalCaseForm',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
patientInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const patient = props.patientInfo;
|
||||
|
||||
// 表单数据 - 修复:将 formData 定义移到 patient 之后
|
||||
const formData = reactive({
|
||||
department: patient?.department || '',
|
||||
bedNo: patient?.bedNo || '',
|
||||
busNo: patient?.busNo || '',
|
||||
patientName: patient?.patientName || '',
|
||||
gender: patient?.sex || '',
|
||||
age: patient?.age || '',
|
||||
adm_cond: '',
|
||||
effectless: '',
|
||||
evalLevel: '',
|
||||
nurseLevel: '',
|
||||
sign_doc: '',
|
||||
sign_maindoc: '',
|
||||
sign_leader: '',
|
||||
});
|
||||
|
||||
// 当前日期(YYYY-MM-DD)
|
||||
const currentDate = computed(() => {
|
||||
const d = new Date();
|
||||
const yyyy = d.getFullYear();
|
||||
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const dd = String(d.getDate()).padStart(2, '0');
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
});
|
||||
|
||||
//表单引用
|
||||
const formRef = ref(null);
|
||||
|
||||
//提交表单
|
||||
const submit = () => {
|
||||
// 如果需要表单验证,可以使用以下代码
|
||||
// formRef.value.validate((valid) => {
|
||||
// if (valid) {
|
||||
// emits('submitOk', formData);
|
||||
// }
|
||||
// });
|
||||
// 简化版本:
|
||||
emits('submitOk', formData);
|
||||
};
|
||||
|
||||
//表单数据赋值
|
||||
const setFormData = (data) => {
|
||||
if (data) {
|
||||
Object.assign(formData, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 定义 emits
|
||||
const emits = defineEmits(['submitOk']);
|
||||
|
||||
onMounted(() => {
|
||||
// 页面加载完成后触发一次 resize 事件,确保输入框高度正确
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}, 100);
|
||||
});
|
||||
|
||||
//暴露接口
|
||||
defineExpose({ formData, submit, setFormData });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 页面容器与背景 ===== */
|
||||
.assessment-page {
|
||||
font-family: 'Microsoft YaHei', 宋体, sans-serif;
|
||||
background-color: #f3f4f6;
|
||||
padding: 1.25rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
background-color: #ffffff;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ===== 医院头部 ===== */
|
||||
.hospital-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hospital-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ===== 表单标题与操作 ===== */
|
||||
.form-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: 1.25rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* ===== 表单卡片 ===== */
|
||||
.form-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-card.form-card) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ===== 自动调整大小的输入框样式 ===== */
|
||||
.auto-resize-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.auto-resize-input .el-textarea__inner) {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
min-height: 32px !important;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
/* ===== Textarea 自动扩展样式 ===== */
|
||||
.full-width-textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.full-width-textarea textarea) {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* ===== 日期显示 ===== */
|
||||
.date-display {
|
||||
font-size: 0.95rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ===== 响应式调整 ===== */
|
||||
@media (max-width: 768px) {
|
||||
.page-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hospital-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user