feat(template): 添加股骨头坏死门诊病历模板

新增了一个名为“股骨头坏死(模板1)”的门诊病历模板文件，包含完整的主诉、现病史、既往史、体格检查、辅助检查、诊断和治疗方案等内容，便于医生快速调用和填写。

该模板位于 `src/template/股骨头坏死(模板1).vue`，采用 Vue 单文件组件格式编写，并定义了相应的结构与样式。

openhis-ui-vue3/src/template/outpatientMedicalRecord.vue

@@ -1,15 +1,19 @@
 <template>
+  <!-- 门诊病历表单主容器 -->
   <div class="medical-form">
+    <!-- 患者基本信息展示区域 -->
     <div class="patient-name">
       患者姓名：{{ patient?.patientName || '未知' }} &nbsp;&nbsp; 病历号：{{
         patient?.busNo || '未知'
       }}
     </div>
+    <!-- 医院名称和标题 -->
     <h2 style="text-align: center">{{ userStore.hospitalName }}</h2>
     <h2 style="text-align: center">门诊病历</h2>
 
     <!-- 滚动内容区域 -->
     <div class="form-scroll-container">
+      <!-- Element Plus表单组件 -->
       <el-form
         ref="formRef"
         :model="formData"
@@ -18,34 +22,40 @@
         label-align="left"
         class="medical-full-form"
       >
+        <!-- 基础信息区域标题 -->
         <h4 class="section-title">基础信息</h4>
         <!-- 1. 基础信息：单行自适应排列 -->
         <el-form-item class="form-section">
           <div class="single-row-layout">
+            <!-- 身高输入项 -->
             <el-form-item label="身高" prop="height" class="row-item">
               <div class="input-with-unit">
                 <el-input v-model="formData.height" type="text" placeholder="请输入" />
                 <span class="unit">cm</span>
               </div>
             </el-form-item>
+            <!-- 体重输入项 -->
             <el-form-item label="体重" prop="weight" class="row-item">
               <div class="input-with-unit">
                 <el-input v-model="formData.weight" type="text" placeholder="请输入" />
                 <span class="unit">kg</span>
               </div>
             </el-form-item>
+            <!-- 体温输入项 -->
             <el-form-item label="体温" prop="temperature" class="row-item">
               <div class="input-with-unit">
                 <el-input v-model="formData.temperature" type="text" placeholder="请输入" />
                 <span class="unit">℃</span>
               </div>
             </el-form-item>
+            <!-- 脉搏输入项 -->
             <el-form-item label="脉搏" prop="pulse" class="row-item">
               <div class="input-with-unit">
                 <el-input v-model="formData.pulse" type="text" placeholder="请输入" />
                 <span class="unit">次/分</span>
               </div>
             </el-form-item>
+            <!-- 发病日期选择项 -->
             <el-form-item label="发病日期" prop="onsetDate" class="row-item">
               <el-date-picker
                 v-model="formData.onsetDate"
@@ -54,14 +64,16 @@
                 value-format="YYYY-MM-DD"
                 style="width: 100%"
               />
-              <!-- <el-input v-model="formData.onsetDate" type="date" /> -->
             </el-form-item>
           </div>
         </el-form-item>
+        
+        <!-- 病史信息区域标题 -->
         <h4 class="section-title">病史信息</h4>
-        <!-- 2. 病史信息：单行自适应排列（新增调整） -->
+        <!-- 2. 病史信息：单行自适应排列 -->
         <el-form-item class="form-section">
           <div class="single-row-layout">
+            <!-- 现病史输入项 -->
             <el-form-item label="现病史" prop="presentIllness" class="row-item history-item">
               <el-input
                 v-model="formData.presentIllness"
@@ -70,9 +82,11 @@
                 autosize
               />
             </el-form-item>
+            <!-- 既往史输入项 -->
             <el-form-item label="既往史" prop="pastIllness" class="row-item history-item">
               <el-input v-model="formData.pastIllness" type="textarea" placeholder="无" autosize />
             </el-form-item>
+            <!-- 个人史输入项 -->
             <el-form-item label="个人史" prop="personalHistory" class="row-item history-item">
               <el-input
                 v-model="formData.personalHistory"
@@ -81,6 +95,7 @@
                 autosize
               />
             </el-form-item>
+            <!-- 过敏史输入项 -->
             <el-form-item label="过敏史" prop="allergyHistory" class="row-item history-item">
               <el-input
                 v-model="formData.allergyHistory"
@@ -89,6 +104,7 @@
                 autosize
               />
             </el-form-item>
+            <!-- 家族史输入项 -->
             <el-form-item label="家族史" prop="familyHistory" class="row-item history-item">
               <el-input
                 v-model="formData.familyHistory"
@@ -99,6 +115,8 @@
             </el-form-item>
           </div>
         </el-form-item>
+        
+        <!-- 主诉、查体(治疗)、处置、辅助检查区域标题 -->
         <h4 class="section-title">主诉、查体(治疗)、处置、辅助检查</h4>
         <!-- 3. 主诉（必填） -->
         <el-form-item label="主诉" prop="complaint" class="required form-item-single">
@@ -111,6 +129,7 @@
           />
         </el-form-item>
         <!-- 4. 查体、处理、辅助检查 -->
+        <!-- 查体(治疗)输入项 -->
         <el-form-item label="查体(治疗)" prop="physicalExam" class="form-item-single">
           <el-input
             v-model="formData.physicalExam"
@@ -121,6 +140,7 @@
           />
         </el-form-item>
 
+        <!-- 处置输入项 -->
         <el-form-item label="处置" prop="treatment" class="form-item-single">
           <el-input
             v-model="formData.treatment"
@@ -131,6 +151,7 @@
           />
         </el-form-item>
 
+        <!-- 辅助检查输入项 -->
         <el-form-item label="辅助检查" prop="auxiliaryExam" class="form-item-single">
           <el-input
             v-model="formData.auxiliaryExam"
@@ -146,51 +167,54 @@
 </template>
 
 <script setup>
+// 导入Vue相关功能和组件
 import { reactive, ref, onBeforeMount, onMounted, watch } from 'vue';
 import useUserStore from '../store/modules/user';
 import { ElInput, ElMessage, ElForm, ElFormItem } from 'element-plus';
 import { patientInfo } from '../views/doctorstation/components/store/patient';
 import { pa } from 'element-plus/es/locales.mjs';
 
+// 定义组件选项
 defineOptions({
   name: 'OutpatientMedicalRecord',
   components: { ElInput, ElMessage, ElForm, ElFormItem },
 });
 
-// // Props与事件,去掉props.patientInfo改为直接从store获取
-// const props = defineProps({
-//   patientInfo: {
-//     type: Object,
-//     required: true,
-//   },
-// });
+// 定义组件接收的属性（目前为空）
 const props = defineProps({});
+
+// 定义组件触发的事件
 const emits = defineEmits(['submitOk']);
 
 // 数据初始化
+// 获取用户store实例，用于获取医院名称等全局信息
 const userStore = useUserStore();
+// 患者信息引用，存储当前就诊患者的基本信息
 const patient = ref(null);
+// 表单引用，用于访问表单实例进行验证等操作
 const formRef = ref(null);
 
 // 表单数据（全部字符类型）
+// 存储门诊病历表单的所有字段数据
 const formData = reactive({
-  height: '', // 身高
-  weight: '', // 体重
-  temperature: '', // 体温
-  pulse: '', // 脉搏
-  onsetDate: '', // 发病日期
-  complaint: '', // 主诉（必填）
-  presentIllness: '', // 现病史
-  pastIllness: '', // 既往史
-  personalHistory: '', // 个人史
-  allergyHistory: '', // 过敏史
-  physicalExam: '', // 查体
-  treatment: '', // 处理
-  auxiliaryExam: '', // 辅助检查
-  familyHistory: '', // 家族史
+  height: '',              // 身高(cm)
+  weight: '',              // 体重(kg)
+  temperature: '',         // 体温(℃)
+  pulse: '',               // 脉搏(次/分)
+  onsetDate: '',           // 发病日期
+  complaint: '',           // 主诉（必填项）
+  presentIllness: '',      // 现病史
+  pastIllness: '',         // 既往史
+  personalHistory: '',     // 个人史
+  allergyHistory: '',      // 过敏史
+  physicalExam: '',        // 查体结果
+  treatment: '',           // 处理方案
+  auxiliaryExam: '',       // 辅助检查结果
+  familyHistory: '',       // 家族史
 });
 
 // 表单校验规则
+// 定义表单字段的验证规则，目前仅主诉为必填项
 const rules = reactive({
   complaint: [
     {
@@ -202,15 +226,21 @@ const rules = reactive({
 });
 
 // 提交函数
+// 用于触发表单验证并提交数据到父组件
 const submit = () => {
+  // 表单验证
   formRef.value.validate((isValid) => {
     if (isValid) {
+      // 触发submitOk事件，传递表单数据
       emits('submitOk', formData);
+      // 显示成功消息
       ElMessage.success('提交成功');
     }
   });
 };
-// 日期格式化工具
+
+// 日期格式化工具函数
+// 将Date对象格式化为 YYYY-MM-DD HH:mm 格式的字符串
 const formatDateTime = (date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -219,17 +249,23 @@ const formatDateTime = (date) => {
   const minute = String(date.getMinutes()).padStart(2, '0');
   return `${year}-${month}-${day} ${hour}:${minute}`;
 };
-// 表单数据赋值
+
+// 表单数据赋值函数
+// 用于外部组件向表单填充已有数据
 const setFormData = (data) => {
   if (data) {
+    // 将传入的数据合并到表单数据中
     Object.assign(formData, data);
   }
 };
 
-// 生命周期
+// 生命周期钩子 - 组件挂载前
 onBeforeMount(() => {});
+
+// 生命周期钩子 - 组件挂载后
 onMounted(() => {
   console.log('当前患者信息:', patientInfo);
+  // 从store获取患者信息
   patient.value = patientInfo.value;
   // 初始化发病日期为当前时间
   if (!formData.onsetDate) {
@@ -238,6 +274,7 @@ onMounted(() => {
 });
 
 // 监听患者信息变化，实现联动显示
+// 当patientInfo发生变化时更新本地patient引用
 watch(
   () => patientInfo.value,
   (newPatientInfo) => {
@@ -246,7 +283,8 @@ watch(
   { deep: true }
 );
 
-// 暴露接口
+// 暴露接口供父组件调用
+// 将formData、submit方法和setFormData方法暴露给父组件使用
 defineExpose({ formData, submit, setFormData });
 </script>
 
@@ -410,4 +448,4 @@ defineExpose({ formData, submit, setFormData });
     --el-input-textarea-min-height: 80px;
   }
 }
-</style>
+</style>