his/openhis-ui-vue3/src/views/inHospitalManagement/inpatientRecord/index.vue

<template>
  <div class="container">
    <el-form :model="state.form">
      <div class="record-container">
        <div class="title">{{ userStore.hospitalName }}</div>
        <div class="subtitle">入院记录</div>
        <div class="header">
          <span>姓名: [<el-input v-model="state.form.name" class="inline-input" />]</span>
          <span>性别: [<el-input v-model="state.form.gender" class="inline-input" />]</span>
          <span>年龄: [<el-input v-model="state.form.age" class="inline-input" />]</span>
          <span>床号: [<el-input v-model="state.form.bedNumber" class="inline-input" />]</span>
          <span>科室: [<el-input v-model="state.form.department" class="inline-input" />]</span>
          <span>住院号: [<el-input v-model="state.form.inpatientNumber" class="inline-input" />]</span>
        </div>
        <table class="info-table">
          <tr>
            <td> <div class="info-td">姓名: [<el-input v-model="state.form.name" />]   </div></td>
            <td>户口地址: [<el-input v-model="state.form.domicile" />]</td>
          </tr>
          <tr>
            <td>性别: [<el-input v-model="state.form.gender" />]</td>
            <td>家庭地址: [<el-input v-model="state.form.homeAddress" />]</td>
          </tr>
          <tr>
            <td>年龄: [<el-input v-model="state.form.age" />]</td>
            <td>工作单位: [<el-input v-model="state.form.workUnit" />]</td>
          </tr>
          <tr>
            <td>身份证号: [<el-input v-model="state.form.idCard" />]</td>
            <td>入院日期: [<el-input v-model="state.form.admissionDate" />]</td>
          </tr>
          <tr>
            <td>婚姻: [<el-input v-model="state.form.maritalStatus" />]</td>
            <td>病历书写时间: [<el-input v-model="state.form.medicalHistoryWritingTime" />]</td>
          </tr>
          <tr>
            <td>民族: [<el-input v-model="state.form.nation" />]</td>
            <td>病史陈述者: [<el-input v-model="state.form.medicalHistoryNarrator" />]</td>
          </tr>
          <tr>
            <td>职业: [<el-input v-model="state.form.occupation" />]</td>
            <td colspan="2">联系人: [<el-input style="width: 40%;" v-model="state.form.contactPerson" class="inline-input-table" />] 关系: [<el-input style="width: 40%;" v-model="state.form.relationship" class="inline-input-table" />]</td>
          </tr>
          <tr>
            <td>电话: [<el-input v-model="state.form.phone" />]</td>
            <td>可靠程度: [<el-input v-model="state.form.reliability" />]</td>
          </tr>
        </table>
        <div class="section">
          <div class="section-title">主诉:</div>
          <div class="section-content"><el-input v-model="state.form.chiefComplaint" type="textarea"/></div>
        </div>
        <div class="section">
          <div class="section-title">现病史:</div>
          <div class="section-content"><el-input v-model="state.form.presentIllness" type="textarea" /></div>
        </div>
        <div class="section">
          <div class="section-title">既往史:</div>
          <div class="section-content"><el-input v-model="state.form.pastHistory" type="textarea" /></div>
        </div>
        <div class="section">
          <div class="section-title">个人史:</div>
          <div class="section-content"><el-input v-model="state.form.personalHistory" type="textarea" /></div>
        </div>
        <div class="section">
          <div class="section-title">婚育史:</div>
          <div class="section-content"><el-input v-model="state.form.maritalHistory" type="textarea" /></div>
        </div>
        <div class="section">
          <div class="section-title">家族史:</div>
          <div class="section-content"><el-input v-model="state.form.familyHistory" type="textarea" /></div>    
        </div>
        <div class="section">
          <div class="section-title">体格检查</div>
          <div class="section-content">
            体温: ℃, 脉搏: 次/分, 呼吸: 次/分, 血压: mmHg <br>
            神志清,精神尚可,发育正常、营养中等,自主体位,步入病区,查体合作,全身皮肤、粘膜无黄染及出血点,全身浅表淋巴结未触及肿大。头颅发育正常,五官端正,颜面无浮肿,眼睑无苍白,巩膜无黄染,双瞳孔等大等圆,直径约3mm,对光反应灵敏。耳廓对称无畸形,外耳道无分泌物。鼻通气畅,各鼻窦区无压痛。口唇无紫绀,咽无充血,扁桃体不大。颈对称,未见颈静脉怒张,颈软,气管居中,甲状腺稍大。胸廓对称无畸形,两侧胸廓呼吸动度一致,语颤一致。 <br>
            两肺叩呈清音,双肺呼吸音清,未闻及干湿性啰音。心前区无隆起,心尖搏动不明显,心界正常,心率80次/分,律齐,心音正常,各瓣膜听诊区未闻及病理性杂音。腹平坦,未见腹型及蠕动波,无腹壁静脉曲张,腹软,全腹无压痛,肝脾肋下未触及,未扪及包块,移动性浊音未叩出,双肾区无隆起,双侧肾脏未触及,双肾区无叩击痛,双侧输尿管走行区无压痛,肠鸣音正常。肛门、外生殖器未查。脊柱四肢无畸形, 活动自如,双下肢无水肿。生理反射存在,病理反射未引出。
          </div>
        </div>
        <div class="section">
          <div class="section-title">专科检查:</div>
          <div class="section-content"><el-input v-model="state.form.specialtyCheck" type="textarea" /></div>
        </div>
        <div class="section">
          <div class="section-title">辅助检查:</div>
          <div class="section-content"><el-input v-model="state.form.auxiliaryCheck" /></div>  
        </div>
        <div class="footer">
          <div> <span style="">初步诊断: [</span><el-input v-model="state.form.preliminaryDiagnosis" />]</div>
          <div> <span style="">医师签名: [</span><el-input v-model="state.form.doctorSignature" />]</div>
          <div> <span style="">书写时间: [</span><el-input v-model="state.form.writingTime" />]</div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script setup>
import {getCurrentInstance, onBeforeMount, onMounted, reactive} from 'vue'

import useUserStore from '@/store/modules/user'

const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const emits = defineEmits([]);
const props = defineProps({})
const state = reactive({
  form: {
    name: '郭森',
    gender: '男',
    age: '40岁',
    bedNumber: '入院床号',
    department: '入院科室',
    inpatientNumber: '0010000637',
    domicile: '户口地址',
    homeAddress: '家庭地址',
    workUnit: '工作单位',
    idCard: '61010319841004241X',
    admissionDate: '2025-02-14 11:05',
    maritalStatus: '婚姻状况',
    medicalHistoryWritingTime: '病历书写时间',
    nation: '民族',
    medicalHistoryNarrator: '病史陈述者',
    occupation: '职业',
    contactPerson: '联系人',
    relationship: '关系',
    phone: '18691558856',
    reliability: '可靠程度',
    chiefComplaint: '主诉',
    presentIllness: '现病史',
    pastHistory: '既往史',
    personalHistory: '个人史',
    maritalHistory: '婚育史',
    familyHistory: '家族史',
    specialtyCheck: '请输入',
    auxiliaryCheck: '待查',
    preliminaryDiagnosis: '请输入',
    doctorSignature: '请输入',
    writingTime: '请选择时间',
    // 增加体温、脉搏、呼吸、血压
    temperature: '体温',
    pulse: '脉搏',
    respiration: '呼吸',
    bloodPressure: '血压'
  }
})
onBeforeMount(() => {})
onMounted(() => {})
defineExpose({ state })
 
</script> 
<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  padding: 20px;
}
.record-container {
  width: 1200px;
  margin: 0 auto;
  border: 2px solid #000;
  padding: 20px;
  background-color: #fff;
}
.title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
.subtitle {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  td {
    border: 1px solid #000;
    padding: 8px;
    font-size: 14px;
     :deep(.el-input) {
      width: 80% ;
    }
  }

}
.content {
  margin-bottom: 15px;
}
.content-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}
.content-text {
  font-size: 14px;
  line-height: 1.6;
}
.signature {
  margin-top: 30px;
  text-align: right;
}
.section {
  margin-bottom: 15px;
}
.section-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}
.section-content {
  font-size: 14px;
  line-height: 1.6;
}
.footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
 >div {
    width:260px;
    margin-bottom: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    >span{
      display: inline-block;
      width: 100px;
      flex:none;
    }
  }

}

.inline-input {
  width: 100px;
  display: inline-block;
}

.inline-input-table {
  width: 150px;
  display: inline-block;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border: none;
  background-color: transparent;
}

:deep(.el-textarea__inner) {
  box-shadow: none !important;
  border: 1px solid #dcdfe6;
  background-color: transparent;
}
</style>