chenqi
dc67c00d20
- 将所有组件中的 append-to-body 属性替换为 teleported - 为 el-radio 和 el-checkbox 组件添加正确的 value 属性 - 移除已弃用的 highlight-current-row 属性 - 为 vxe-table 添加 row-config 配置替代旧的高亮设置 - 更新 el-checkbox 的 true-value 属性值 - 修改 el-button 类型从 text 到 link 以匹配设计系统
366 lines
9.0 KiB
Vue
Executable File
366 lines
9.0 KiB
Vue
Executable File
<template>
|
||
<div class="assessment-page">
|
||
<div class="page-container">
|
||
<!-- 医院头部 -->
|
||
<div class="hospital-header">
|
||
<h1 class="hospital-name">
|
||
<span class="hospital-text">{{ userStore.hospitalName }}</span>
|
||
</h1>
|
||
</div>
|
||
<!-- 页面标题 -->
|
||
<h2 class="form-title">
|
||
住院病人风险评估表
|
||
</h2>
|
||
|
||
<!-- 表单卡片 -->
|
||
<el-form
|
||
:model="formData"
|
||
label-width="100px"
|
||
>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="科室"
|
||
label-position="top"
|
||
>
|
||
<el-input
|
||
v-model="formData.department"
|
||
readonly="true"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="床号"
|
||
label-position="top"
|
||
class="comment-padding"
|
||
>
|
||
<el-input
|
||
v-model="formData.bedNo"
|
||
readonly="true"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="住院号"
|
||
label-position="top"
|
||
class="comment-padding"
|
||
>
|
||
<el-input
|
||
v-model="formData.busNo"
|
||
readonly="true"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="姓名"
|
||
label-position="top"
|
||
>
|
||
<el-input
|
||
v-model="formData.patientName"
|
||
readonly="true"
|
||
class="auto-resize-input"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="性别"
|
||
label-position="top"
|
||
class="comment-padding"
|
||
>
|
||
<el-input
|
||
v-model="formData.gender"
|
||
readonly="true"
|
||
class="auto-resize-input"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="年龄"
|
||
label-position="top"
|
||
class="comment-padding"
|
||
>
|
||
<el-input
|
||
v-model="formData.age"
|
||
readonly="true"
|
||
class="auto-resize-input"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item
|
||
label="病情简介"
|
||
label-position="top"
|
||
>
|
||
<el-input
|
||
v-model="formData.adm_cond"
|
||
type="textarea"
|
||
:autosize="{ minRows: 1, maxRows: 100 }"
|
||
class="full-width-textarea"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="可能发生的不良后果及预后"
|
||
label-position="top"
|
||
>
|
||
<el-input
|
||
v-model="formData.effectless"
|
||
type="textarea"
|
||
:autosize="{ minRows: 1, maxRows: 100 }"
|
||
class="full-width-textarea"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="评估等级"
|
||
label-position="top"
|
||
>
|
||
<el-radio-group v-model="formData.evalLevel">
|
||
<el-radio value="一般">
|
||
一般
|
||
</el-radio>
|
||
<el-radio value="病重">
|
||
病重
|
||
</el-radio>
|
||
<el-radio value="病危">
|
||
病危
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="护理等级"
|
||
label-position="top"
|
||
>
|
||
<el-radio-group v-model="formData.nurseLevel">
|
||
<el-radio value="特级护理">
|
||
特级护理
|
||
</el-radio>
|
||
<el-radio value="一级护理">
|
||
一级护理
|
||
</el-radio>
|
||
<el-radio value="二级护理">
|
||
二级护理
|
||
</el-radio>
|
||
<el-radio value="三级护理">
|
||
三级护理
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="收集资料时间:">
|
||
<span class="date-display">{{ currentDate }}</span>
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="评估医师签名:">
|
||
<el-input
|
||
v-model="formData.sign_doc"
|
||
disabled
|
||
:autosize="{ minRows: 1 }"
|
||
class="auto-resize-input"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="主治医师签名:"
|
||
class="comment-padding"
|
||
>
|
||
<el-input
|
||
v-model="formData.sign_maindoc"
|
||
:autosize="{ minRows: 1 }"
|
||
class="auto-resize-input"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label="科主任签名:"
|
||
class="comment-padding"
|
||
>
|
||
<el-input
|
||
v-model="formData.sign_leader"
|
||
:autosize="{ minRows: 1 }"
|
||
class="auto-resize-input"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<inAssessmentForm
|
||
v-if="isShowprintDom"
|
||
ref="recordPrintRef"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {computed, nextTick, onMounted, reactive, ref} from 'vue';
|
||
import inAssessmentForm from '../views/hospitalRecord/components/inAssessmentForm.vue';
|
||
import useUserStore from '@/store/modules/user';
|
||
import {previewPrint} from '../utils/printUtils';
|
||
|
||
defineOptions({
|
||
name: 'InHospitalCaseForm',
|
||
});
|
||
const isShowprintDom = ref(false);
|
||
const recordPrintRef = ref();
|
||
const props = defineProps({
|
||
patientInfo: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const patient = props.patientInfo;
|
||
const userStore = useUserStore();
|
||
|
||
// 表单数据 - 修复：将 formData 定义移到 patient 之后
|
||
const formData = reactive({
|
||
department: patient?.inHospitalOrgName || '',
|
||
bedNo: patient?.bedName || '',
|
||
busNo: patient?.busNo || '',
|
||
patientName: patient?.patientName || '',
|
||
gender: patient?.genderEnum_enumText || '',
|
||
age: patient?.age || '',
|
||
adm_cond: '',
|
||
effectless: '',
|
||
evalLevel: '',
|
||
nurseLevel: '',
|
||
sign_doc: userStore.nickName || '',
|
||
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);
|
||
console.log('@@@@@=======>', JSON.stringify(props.patientInfo));
|
||
});
|
||
// 打印方法
|
||
const printFun = () => {
|
||
console.log('入院记录打印');
|
||
isShowprintDom.value = true;
|
||
nextTick(() => {
|
||
recordPrintRef?.value.setData(formData);
|
||
nextTick(() => {
|
||
previewPrint(recordPrintRef?.value.getDom());
|
||
isShowprintDom.value = false;
|
||
});
|
||
});
|
||
};
|
||
//暴露接口
|
||
defineExpose({ formData, submit, setFormData, printFun });
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ===== 页面容器与背景 ===== */
|
||
.comment-padding {
|
||
padding-left: 10px;
|
||
}
|
||
.assessment-page {
|
||
font-family: 'Microsoft YaHei', 宋体, sans-serif;
|
||
width: 100%;
|
||
}
|
||
|
||
.page-container {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ===== 医院头部 ===== */
|
||
.hospital-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.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 {
|
||
margin-top: 10px;
|
||
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;
|
||
}
|
||
|
||
/* ===== 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;
|
||
}
|
||
</style>
|