输血申请布局优化

src/views/doctor/application/index.vue

@@ -26,7 +26,8 @@
     <div class="main-content">
       <!-- 左侧区域 占2份left-wrap -->
       <div class="left-wrap">
-        <el-form ref="formRef" label-width="auto" size="small" class="blood-transfusion-form"
+        <el-form ref="formRef" label-width="auto" size="small" class="blood-transfusion-form" :model="xkTransfuseApply"
+          :rules="formRules" :show-message="false"
           :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'">
           <div class="card-box base-info-card">
             <div class="section-title">
@@ -102,9 +103,17 @@
                 </el-form-item>
               </el-col>
 
+              <el-col :span="18">
+                <el-form-item label="申请类型" prop="apply_type">
+                  <el-radio-group v-model="xkTransfuseApply.apply_type">
+                    <el-radio v-for="v in dictData.sqlx" :value="v.value">{{ v.label }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+
               <el-col :span="6">
                 <el-form-item label="申请日期" prop="apply_date">
-                  <el-date-picker v-model="formData.apply_date" type="datetime" style="width:100%"
+                  <el-date-picker v-model="xkTransfuseApply.apply_date" type="datetime" style="width:100%"
                     value-format="YYYY-MM-DD HH:mm:ss" />
                 </el-form-item>
               </el-col>
@@ -114,24 +123,24 @@
                     placeholder="" :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
                 </el-form-item>
               </el-col>
-              <el-col :span="5">
+              <el-col :span="6">
                 <el-form-item label="主治医师" prop="attending_medic">
                   <SelectTable v-model:data="xkTransfuseApply.attending_medic" :tableData="userList" size="small"
                     placeholder="" :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
                 </el-form-item>
               </el-col>
-              <el-col :span="17">
-                <el-form-item label="申请类型" prop="apply_type">
-                  <el-radio-group v-model="xkTransfuseApply.apply_type">
-                    <el-radio v-for="v in dictData.sqlx" :value="v.value">{{ v.label }}</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
+
               <el-col :span="6">
                 <el-checkbox v-model="xkTransfuseApply.agreement_ink" true-value="Y"
                   false-value="N">病人/病人家属是否签署输血同意书</el-checkbox>
               </el-col>
 
+              <el-col :span="6">
+                <el-form-item label="预定输血日期" prop="use1_date">
+                  <el-date-picker v-model="xkTransfuseApply.use1_date" type="datetime" placeholder="选择日期"
+                    value-format="YYYY-MM-DD HH:mm:ss" />
+                </el-form-item>
+              </el-col>
               <el-col :span="5">
                 <el-form-item label="单据类型" prop="bill_type">
                   <el-select v-model="xkTransfuseApply.bill_type">
@@ -140,12 +149,6 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
-                <el-form-item label="预定输血日期" prop="use1_date">
-                  <el-date-picker v-model="xkTransfuseApply.use1_date" type="datetime" placeholder="选择日期"
-                    value-format="YYYY-MM-DD HH:mm:ss" />
-                </el-form-item>
-              </el-col>
               <el-col :span="6">
                 <el-form-item label="科室类型" prop="dept_Type">
                   <el-select v-model="xkTransfuseApply.dept_Type" placeholder="" style="width:50%" clearable
@@ -188,26 +191,24 @@
                     :disabled="xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A'" />
                 </el-form-item>
               </el-col>
-
-
             </el-row>
             <el-row :gutter="10">
               <el-form-item label="输血史:" prop="transfuse_history">
-                <el-radio-group v-model="xkPatientInfo.transfuse_history">
+                <el-radio-group v-model="xkTransfuseApply.transfuse_history">
                   <el-radio value="Y">有</el-radio>
                   <el-radio value="N">无</el-radio>
                 </el-radio-group>
               </el-form-item>
 
               <el-form-item label="反应史:" prop="reaction_history" label-width="80px">
-                <el-radio-group v-model="xkPatientInfo.reaction_history">
+                <el-radio-group v-model="xkTransfuseApply.reaction_history">
                   <el-radio value="Y">有</el-radio>
                   <el-radio value="N">无</el-radio>
                 </el-radio-group>
               </el-form-item>
 
               <el-form-item label="移植配型史:" prop="match_history" label-width="100px">
-                <el-radio-group v-model="xkPatientInfo.match_history">
+                <el-radio-group v-model="xkTransfuseApply.match_history">
                   <el-radio value="Y">有</el-radio>
                   <el-radio value="N">无</el-radio>
                 </el-radio-group>
@@ -215,7 +216,7 @@
 
 
               <el-form-item label="妊娠史:" prop="gestation_history" label-width="80px">
-                <el-radio-group v-model="xkPatientInfo.gestation_history"
+                <el-radio-group v-model="xkTransfuseApply.gestation_history"
                   :disabled="xkPatientInfo.patient_sex == '男' || (xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A')">
                   <el-radio value="Y">有</el-radio>
                   <el-radio value="N">无</el-radio>
@@ -223,7 +224,7 @@
               </el-form-item>
 
               <el-form-item label="分娩史:" prop="parturition_history" label-width="80px">
-                <el-radio-group v-model="xkPatientInfo.parturition_history"
+                <el-radio-group v-model="xkTransfuseApply.parturition_history"
                   :disabled="xkPatientInfo.patient_sex == '男' || (xkTransfuseApply.bill_stasus && xkTransfuseApply.bill_stasus != 'A')">
                   <el-radio value="Y">有</el-radio>
                   <el-radio value="N">无</el-radio>
@@ -233,19 +234,19 @@
             </el-row>
 
             <div class="line"></div>
-            <el-row :gutter="10">
-              <el-col :span="4">
-                <el-form-item label="上级医师：" prop="check_medic">
-                  {{userList.find(item => item.value == xkTransfuseApply.check_medic)?.label}}
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="审核时间：" prop="medic_check_date">
-                  {{ xkTransfuseApply.medic_check_date }}
-                </el-form-item>
-              </el-col>
-
-            </el-row>
+            <div class="flow-wrap">
+              <div class="flow-item" v-for="(item, index) in processList" :key="index">
+                <el-tooltip effect="dark" placement="top"
+                  :content="item.operateTime ? `操作时间：${item.operateTime}` : '暂未操作'">
+                  <div class="circle-node" :class="[getNodeStatusClass(item, index)]">
+                    {{ item.label }}
+                  </div>
+                </el-tooltip>
+                <!-- 箭头：index对应的节点是当前圆圈，有时间=箭头绿色 -->
+                <div v-if="Number(index) < Number(processList.length) - 1" class="arrow-line"
+                  :class="{ arrow_finish: !!processList[index].operateTime }"></div>
+              </div>
+            </div>
 
             <div class="status"
               :style="{ borderColor: getBillStatusInfo(xkTransfuseApply.bill_stasus).color, color: getBillStatusInfo(xkTransfuseApply.bill_stasus).color }">
@@ -310,37 +311,7 @@
               <div>病人最近检查结果</div>
             </div>
             <div class="tableBox">
-              <el-table :data="firstGroup" border height="100%">
-                <el-table-column label="项目名" prop="item_name" align="center" />
-                <el-table-column label="结果" prop="item_result" align="center">
-                  <template #default="{ row }">
-                    <el-select v-model="row.item_result" placeholder="" class="full-width-input" allow-create filterable
-                      default-first-option>
-                      <el-option v-for="item in dictData.test_result" :key="item.value" :label="item.label"
-                        :value="item.value">
-                      </el-option>
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column label="单位" prop="item_unit" align="center" width="80" />
-                <el-table-column label="检验时间" prop="validTime" align="center" width="150" />
-              </el-table>
-
-              <el-table :data="secondGroup" border height="100%">
-                <el-table-column label="项目名" prop="item_name" align="center" />
-                <el-table-column label="结果" prop="item_result" align="center">
-                  <template #default="{ row }">
-                    <el-select v-model="row.item_result" placeholder="" class="full-width-input" allow-create filterable
-                      default-first-option>
-                      <el-option v-for="item in dictData.test_result" :key="item.value" :label="item.label"
-                        :value="item.value">
-                      </el-option>
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column label="单位" prop="item_unit" align="center" width="80" />
-                <el-table-column label="检验时间" prop="validTime" align="center" width="150" />
-              </el-table>
+              <PatientLisTable v-model:lis-list="lisProject" />
             </div>
 
           </div>
@@ -396,7 +367,8 @@
     </div>
 
     <!-- 血液品种编辑弹窗 -->
-    <el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" @close="resetBloodForm">
+    <el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" :close-on-click-modal="false"
+      @close="resetBloodForm">
       <el-form ref="bloodFormRef" :model="bloodForm" label-width="100px" :rules="bloodFormRules">
         <el-row :gutter="10">
           <el-col :span="12">
@@ -408,12 +380,30 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="申请血量" prop="blood_num">
-              <el-input v-model="bloodForm.blood_num" type="number" />
+              <el-input v-model="bloodForm.blood_num" type="number">
+                <template #suffix>
+                  <div>
+                    {{ bloodForm.unit }}
+                  </div>
+                </template>
+              </el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="单位" prop="unit">
-              <el-input v-model="bloodForm.unit" disabled />
+          <!-- <el-col :span="4">
+            <el-input v-model="bloodForm.unit" disabled />
+          </el-col> -->
+          <el-col :span="24">
+            <el-form-item label="输血目的" prop="intent">
+              <el-select v-model="bloodForm.intent" placeholder="">
+                <el-option v-for="item in dictData.sxmd" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="输血指征" prop="causalis">
+              <el-select v-model="bloodForm.causalis" placeholder="">
+                <el-option v-for="item in dictData.sxzz" :label="item.label" :value="item.value" />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -428,20 +418,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="输血目的" prop="intent">
-              <el-select v-model="bloodForm.intent" placeholder="">
-                <el-option v-for="item in dictData.sxmd" :label="item.label" :value="item.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="输血指征" prop="causalis">
-              <el-select v-model="bloodForm.causalis" placeholder="">
-                <el-option v-for="item in dictData.sxzz" :label="item.label" :value="item.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
+
           <el-col :span="12">
             <el-form-item label="特殊处理" prop="special_deal">
               <el-input v-model="bloodForm.special_deal" placeholder="请输入特殊处理" />
@@ -591,6 +568,7 @@ import {
 } from '@/api/doctor/application'
 import { queryOperation, getDeptType, checkLoginAffirm } from '@/api/common'
 import ReviewComments from './component/reviewComments.vue'
+import PatientLisTable from '../components/PatientLisTable.vue'
 import CheckUser from '@/components/CheckUser/index.vue'
 import useUserStore from '@/store/modules/user'
 import router from '@/router/index.js'
@@ -664,33 +642,23 @@ const dictList = ref([
   { label: '字典', prop: 'label' }
 ])
 
-const formData = ref({
-  apply_date: '',
-}) //申请单信息
-const xkPatientInfo = ref({
-  transfuse_history: 'N',
-  reaction_history: 'N',
-  match_history: 'N',
-  gestation_history: 'N',
-  parturition_history: 'N',
-  nldw: '岁',
-}) //病人信息
+
+const xkPatientInfo = ref({}) //病人信息
 const xkTransfuseApply = ref({
   agreement_ink: 'Y',
   bill_type: '正常',
-  apply_type: '001'
+  apply_type: '001',
+  apply_date: '',
+  apply_medic: userInfo.name
 }) //输血申请信息
 
-
-const sexChange = (val: string) => {
-  if (val == '男') {
-    xkPatientInfo.value.parturition_history = 'N'
-    xkPatientInfo.value.gestation_history = 'N'
-  }
-}
-
-
-
+const formRef = useTemplateRef('formRef')
+const formRules = reactive({
+  assess_bill_no: [{ required: true, message: '请选择评估单', trigger: 'change' }],
+  apply_type: [{ required: true, message: '请选择申请类型', trigger: 'change' }],
+  use1_date: [{ required: true, message: '请选择预定输血日期', trigger: 'change' }],
+  dept_Type: [{ required: true, message: '请选择科室类型', trigger: 'change' }],
+})
 // 根据单据状态获取单元格样式（背景色+白色文字）
 const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
   if (column.label == '单据状态') {
@@ -733,14 +701,51 @@ const bloodFormRules = reactive({
       validator: (rule: any, value: number, callback: Function) => {
         if (value <= 0) {
           callback(new Error('申请血量必须大于0'))
+        } else if (bloodForm.unit == 'ml' && value < 25) {
+          callback(new Error('申请血量必须大于等于25ml'))
+        } else if (bloodForm.unit == 'u' && value > 25) {
+          callback(new Error('申请血量必须小于25'))
         } else {
           callback()
         }
       },
       trigger: 'blur'
     }
-  ]
+  ],
+  intent: [{ required: true, message: '请选择输血目的', trigger: 'change' }],
+  causalis: [{ required: true, message: '请选择输血指征', trigger: 'change' }],
 })
+
+//流程节点
+const processList = ref([
+  { label: '开单', operateTime: '2026-06-01 10:10:10' },
+  { label: '上级医生审核', operateTime: '2026-06-02 13:10:10' },
+  { label: '科主任审核', operateTime: '2026-06-01 15:10:10' },
+  { label: '医务部审核', operateTime: '' },
+  { label: '输血科审核', operateTime: '' },
+  { label: '血型复核', operateTime: '' },
+  { label: '交叉配血', operateTime: '' },
+  { label: '临床发血', operateTime: '' },
+])
+// 当前激活步骤下标
+const currentStepIndex = computed(() => {
+  const list = processList.value
+  for (let i = 0; i < list.length; i++) {
+    if (!list[i].operateTime) return i
+  }
+  return list.length - 1
+})
+
+// 节点状态类名
+const getNodeStatusClass = (item: { operateTime: string }, index: number) => {
+  const currIdx = currentStepIndex.value
+  // 已完成：有时间
+  if (item.operateTime) return 'finish'
+  // 当前待办节点
+  if (index === currIdx) return 'active'
+  // 未开始
+  return 'wait'
+}
 const visible = ref(false)
 const searchForm = ref({
   stime: dayjs().format('YYYY-MM-DD'),
@@ -815,25 +820,21 @@ const rowClick = (row) => {
 }
 //新增申请单
 const addHandle = () => {
-  xkPatientInfo.value = {
-    transfuse_history: 'N',
-    reaction_history: 'N',
-    match_history: 'N',
-    gestation_history: 'N',
-    parturition_history: 'N',
-    nldw: '岁',
-  } //病人信息
+  xkPatientInfo.value = {} //病人信息
   xkTransfuseApply.value = {
     agreement_ink: 'Y',
     bill_type: '正常',
-    apply_type: '001'
-  }
-  bloodList.value = []
-  formData.value = {
+    apply_type: '001',
     assess_bill_no: ''
   }
+  bloodList.value = []
+
   getServerTime().then(time => {
-    formData.value.apply_date = time
+    xkTransfuseApply.value.apply_date = time
+    xkTransfuseApply.value.use1_date = time
+    nextTick(() => {
+      formRef.value?.clearValidate()
+    })
   })
   getLisProject()
 }
@@ -977,6 +978,7 @@ const goHistoryBlood = () => {
 const openBloodDialog = () => {
   editIndex.value = -1
   resetBloodForm()
+  bloodForm.apply_bloodtype = xkPatientInfo.value.abo
   bloodDialogVisible.value = true
 }
 
@@ -1045,70 +1047,75 @@ const blHandle = () => {
 
 //保存申请单
 const handleSubmit = async () => {
-  if (!bloodList.value.length) return ElMessage.error('请添加血液品种')
-  // 申请类型 003 || 002 手术信息必填校验
-  if (xkTransfuseApply.value.apply_type === '003' || xkTransfuseApply.value.apply_type === '002') {
-    if (!xkTransfuseApply.value.operation_name || !xkTransfuseApply.value.operation_level) {
-      return ElMessage.error('请完善手术名称、级别信息')
-    }
-  }
-  saveLoading.value = true
-  const tempPatient = { ...xkPatientInfo.value, beinhos_id: xkTransfuseApply.value.beinhos_id }
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (!bloodList.value.length) return ElMessage.error('请添加血液品种')
+      // 申请类型 003 || 002 手术信息必填校验
+      if (xkTransfuseApply.value.apply_type === '003' || xkTransfuseApply.value.apply_type === '002') {
+        if (!xkTransfuseApply.value.operation_name || !xkTransfuseApply.value.operation_level) {
+          return ElMessage.error('请完善手术名称、级别信息')
+        }
+      }
+      saveLoading.value = true
+      const tempPatient = { ...xkPatientInfo.value, beinhos_id: xkTransfuseApply.value.beinhos_id }
 
-  const data = {
-    transfuseApplyInfoOne: {
-      xkPatientInfo: tempPatient,
-      xkTransfuseApply: xkTransfuseApply.value
-    },
-    xkTransfuseApplyBloodbreedList: bloodList.value,
-    xkTransfuseApplyTestitemList: lisProject.value,
-  }
+      const data = {
+        transfuseApplyInfoOne: {
+          xkPatientInfo: tempPatient,
+          xkTransfuseApply: xkTransfuseApply.value
+        },
+        xkTransfuseApplyBloodbreedList: bloodList.value,
+        xkTransfuseApplyTestitemList: lisProject.value,
+      }
 
-  checkSelfBlood({ beinhos_id: xkTransfuseApply.value.beinhos_id }).then((res) => {
-    if (res.code == 0) {
-      checkCausalis(data).then((res1) => {
-        if (res1.code == 0) {
-          savePreApplyInfo(data).then((res2) => {
-            if (res2.code == 0) {
-              saveApplyInfo(data).then((res3) => {
-                if (res3.code == 0) {
-                  ElMessage.success('保存成功')
+      checkSelfBlood({ beinhos_id: xkTransfuseApply.value.beinhos_id }).then((res) => {
+        if (res.code == 0) {
+          checkCausalis(data).then((res1) => {
+            if (res1.code == 0) {
+              savePreApplyInfo(data).then((res2) => {
+                if (res2.code == 0) {
+                  saveApplyInfo(data).then((res3) => {
+                    if (res3.code == 0) {
+                      ElMessage.success('保存成功')
+                      getSqdList()
+                    }
+                  })
+                } else if (res2.code == 1) {
                   getSqdList()
+                  ElMessage.success(res2.msg)
+                } else if (res2.code == 2) {
+                  //2 弹窗提示
+                  ElMessageBox.confirm(res2.msg, '提示',
+                    {
+                      confirmButtonText: '是',
+                      cancelButtonText: '否',
+                      type: 'warning',
+                      showClose: false,
+                      closeOnClickModal: false,
+                      closeOnPressEscape: false,
+                    }
+                  ).then(() => {
+                    getQueryOneInfo(res2.data)
+                  }).catch(() => {
+                    saveApplyInfo(data).then((res3) => {
+                      if (res3.code == 0) {
+                        getSqdList()
+                        ElMessage.success('保存成功')
+                      }
+                    })
+                  })
                 }
               })
-            } else if (res2.code == 1) {
-              getSqdList()
-              ElMessage.success(res2.msg)
-            } else if (res2.code == 2) {
-              //2 弹窗提示
-              ElMessageBox.confirm(res2.msg, '提示',
-                {
-                  confirmButtonText: '是',
-                  cancelButtonText: '否',
-                  type: 'warning',
-                  showClose: false,
-                  closeOnClickModal: false,
-                  closeOnPressEscape: false,
-                }
-              ).then(() => {
-                getQueryOneInfo(res2.data)
-              }).catch(() => {
-                saveApplyInfo(data).then((res3) => {
-                  if (res3.code == 0) {
-                    getSqdList()
-                    ElMessage.success('保存成功')
-                  }
-                })
-              })
             }
           })
         }
+      }).finally(() => {
+        saveLoading.value = false
       })
+    } else {
+      ElMessage.error('请完善必填信息')
     }
-  }).finally(() => {
-    saveLoading.value = false
   })
-
 }
 //获取申请单信息
 const getQueryOneInfo = (bill_no: string) => {
@@ -1116,7 +1123,6 @@ const getQueryOneInfo = (bill_no: string) => {
     xkPatientInfo.value = res.data.transfuseApplyInfoOne.xkPatientInfo
     xkTransfuseApply.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
     bloodList.value = res.data.xkTransfuseApplyBloodbreedList
-    formData.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
     lisProject.value = res.data.xkTransfuseApplyTestitemList.map(item => {
       return {
         bill_no: item.bill_no,
@@ -1137,7 +1143,6 @@ const getInfo = (billNo) => {
     xkPatientInfo.value = res.data.transfuseApplyInfoOne.xkPatientInfo
     xkTransfuseApply.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
     bloodList.value = res.data.xkTransfuseApplyBloodbreedList || []
-    formData.value = res.data.transfuseApplyInfoOne.xkTransfuseApply
     lisProject.value = res.data.xkTransfuseApplyTestitemList.map(item => {
       return {
         bill_no: item.bill_no,
@@ -1228,25 +1233,12 @@ const getSxList = () => {
   })
 }
 
-// 计算属性：自动平分数组，分成两组
-const splitList = computed(() => {
-  const list = lisProject.value
-  console.log("🚀 ~ lisProject.value:", lisProject.value)
-  const midIndex = Math.ceil(list.length / 2)
-  const firstGroup = list.slice(0, midIndex)
-  const secondGroup = list.slice(midIndex)
-  console.log("🚀 ~ firstGroup, secondGroup:", firstGroup, secondGroup)
-  return { firstGroup, secondGroup }
-})
-
-// 拆分后两组数据
-const firstGroup = computed(() => splitList.value.firstGroup)
-const secondGroup = computed(() => splitList.value.secondGroup)
 
 onMounted(() => {
   loadAllDict()
   getServerTime().then(time => {
-    formData.value.apply_date = time
+    xkTransfuseApply.value.apply_date = time
+    xkTransfuseApply.value.use1_date = time
   })
   getSxList()
   getDictData('sqdzfyy', 'rhtype', 'abotype', 'nldw', 'billApplyStatus', 'sd', 'ks', 'depttype', 'bq', 'sxmd', 'sxzz', 'test_result', 'sqlx', 'lczd', 'xylx', 'operatype', 'nooperatype')
@@ -1262,9 +1254,6 @@ onMounted(() => {
     const [a, b] = getParam('SQDSFKRLXGXX').split('/')
     aboFlag.value = b
   }
-
-
-
 })
 
 // 监听路由变化
@@ -1352,9 +1341,6 @@ onBeforeUnmount(() => {
 
           .tableBox {
             height: calc(100% - 30px);
-            display: flex;
-            gap: 10px;
-            overflow: auto;
           }
         }
       }
@@ -1517,4 +1503,76 @@ onBeforeUnmount(() => {
   height: 1px;
   background-color: #ccc;
 }
+
+.flow-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow-x: auto;
+  margin-top: 5px;
+}
+
+.flow-item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+// 圆圈节点
+.circle-node {
+  font-size: 12px;
+  padding: 6px;
+  border: 2px solid;
+}
+
+// 已完成（绿色）
+.circle-node.finish {
+  background: #e6f9ef;
+  border-color: #00b42a;
+  color: #00b42a;
+}
+
+// 当前节点（蓝色）
+.circle-node.active {
+  background: #e8f3ff;
+  border-color: #409eff;
+  color: #409eff;
+  font-weight: bold;
+}
+
+// 未操作（灰色）
+.circle-node.wait {
+  background: #f5f7fa;
+  border-color: #dcdcdc;
+  color: #86909c;
+}
+
+// 默认灰色箭头
+.arrow-line {
+  width: 40px;
+  height: 2px;
+  background: #c0c4cc;
+  position: relative;
+  margin: 0 8px;
+  flex-shrink: 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: -4px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 8px solid #c0c4cc;
+  }
+}
+
+// 已完成节点对应的绿色箭头
+.arrow-line.arrow_finish {
+  background: #00b42a;
+
+  &::after {
+    border-left-color: #00b42a;
+  }
+}
 </style>

src/views/doctor/assessment/index.vue

@@ -20,7 +20,7 @@
     </div>
 
 
-    <el-form label-width="auto">
+    <el-form label-width="auto" class="form-container">
       <div class="section pginfo">
         <el-row :gutter="20">
           <el-col :span="4">
@@ -172,23 +172,12 @@
           </el-col>
         </el-row>
       </div>
-      <div class="section">
-        <div class="title">病人最近检查结果</div>
+      <div class="card-box jcBox">
+        <div class="section-title">病人最近检查结果</div>
+        <div class="tableBox">
+          <PatientLisTable v-model:lis-list="lisProject" />
+        </div>
 
-        <el-row :gutter="20">
-          <el-col :span="18">
-            <el-row :gutter="50">
-              <el-col :span="6" v-for="item in lisProject" class="col-project">
-                <el-form-item :label="item.item_name">
-                  <el-select v-model="item.item_result" placeholder="">
-                    <el-option v-for="v in dictData.test_result" :label="v.label" :value="v.value" />
-                  </el-select>
-                  <span class="unit">{{ item.item_unit }}</span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-col>
-        </el-row>
       </div>
     </el-form>
 
@@ -256,6 +245,7 @@ import { queryLisProject, getParameterOne } from '@/api/common'
 import { getDictData, formatDict, dictData } from '@/hooks'
 import router from '@/router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import PatientLisTable from '../components/PatientLisTable.vue'
 import { printBase64PDF } from '@/utils/classCom'
 import useUserStore from '@/store/modules/user'
 import { useSysParam } from '@/hooks/useSysParam'
@@ -517,11 +507,20 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .box-container {
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   font-size: 14px;
   padding: 10px;
 }
 
+.form-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .section {
   background: #fff;
   border-radius: 4px;
@@ -576,6 +575,14 @@ onMounted(() => {
   }
 }
 
+.jcBox {
+  flex: 1;
+  min-height: 0;
+
+  .tableBox {
+    height: calc(100% - 30px);
+  }
+}
 
 .pginfo {
   .el-form-item {

src/views/doctor/autologous/index copy.vue

@@ -0,0 +1,373 @@
+/**
+* @file index.vue
+* @description: 储存室自体血登记
+* @author: w
+* @since: 2026-07-08
+*/
+<template>
+  <div class="box-container">
+    <div class="card-box">
+      <el-button type="primary" plain>检索</el-button>
+      <el-button type="primary" plain>新增单据</el-button>
+      <el-button type="danger" plain>删除单据</el-button>
+      <el-button plain>作废</el-button>
+      <el-button type="success" plain>保存</el-button>
+      <el-button type="warning" plain>审核</el-button>
+      <el-button type="warning" plain>打印</el-button>
+      <el-button plain>反审核</el-button>
+    </div>
+
+    <el-form label-width="auto" class="form-container">
+      <div class="card-box">
+        <el-row :gutter="20" class="top-row">
+          <el-col :span="4">
+            <el-form-item class="compact-item" label="申请单号">
+              <el-input v-model="formData.applyNo" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item class="compact-item" label="申请日期">
+              <el-date-picker v-model="formData.applyDate" type="datetime" placeholder="选择日期" style="width:100%"
+                value-format="YYYY-MM-DD HH:mm:ss" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item class="compact-item" label="申请医师">
+              <el-input v-model="formData.applyDoctor" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item class="compact-item" label="主治医师">
+              <el-input v-model="formData.attendingDoctor" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div class="section form-body">
+        <el-row :gutter="20">
+          <el-col :span="16">
+            <div class="section-title">患者信息</div>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-form-item label="住院号/ID号">
+                  <el-input v-model="formData.patientId" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="姓 名">
+                  <el-input v-model="formData.patientName" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="血 型">
+                  <el-input v-model="formData.abo" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="Rh(D)">
+                  <el-input v-model="formData.rh" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-form-item label="性 别">
+                  <el-select v-model="formData.patientSex" placeholder="">
+                    <el-option label="男" value="男" />
+                    <el-option label="女" value="女" />
+                    <el-option label="未知" value="未知" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="年 龄">
+                  <div class="age-group">
+                    <el-input v-model="formData.age" />
+                    <el-input v-model="formData.ageUnit" class="age-unit" disabled />
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="属 地">
+                  <el-input v-model="formData.apanage" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="病 区">
+                  <el-input v-model="formData.zone" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-form-item label="科 室">
+                  <el-input v-model="formData.dept" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="床 号">
+                  <el-input v-model="formData.bedNo" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="禁 忌 症">
+                  <el-input v-model="formData.contraindications" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="临床诊断">
+                  <el-input v-model="formData.diagnoses" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="治 疗 目 的">
+                  <el-input v-model="formData.treatmentPurpose" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20" class="checkbox-row">
+              <el-col :span="6">
+                <el-checkbox v-model="formData.transfusionHistory" true-value="Y" false-value="N">输血史</el-checkbox>
+              </el-col>
+              <el-col :span="6">
+                <el-checkbox v-model="formData.matchHistory" true-value="Y" false-value="N">配型史</el-checkbox>
+              </el-col>
+              <el-col :span="6">
+                <el-checkbox v-model="formData.pregnancyHistory" true-value="Y" false-value="N">妊娠史</el-checkbox>
+              </el-col>
+              <el-col :span="6">
+                <el-checkbox v-model="formData.deliveryHistory" true-value="Y" false-value="N">分娩史</el-checkbox>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-form-item label="备 注">
+                  <el-input v-model="formData.remark" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-col>
+
+          <el-col :span="8">
+            <div class="treatment-card">
+              <div class="section-title treatment-title">
+                <span>治疗项目</span>
+                <span class="status-oval">未审核</span>
+              </div>
+              <el-form-item label="治 疗 项 目">
+                <el-input v-model="formData.treatmentProject" />
+              </el-form-item>
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="采 血 量">
+                    <div class="input-with-unit">
+                      <el-input v-model="formData.collectVolume" type="number" />
+                      <span class="unit">ml</span>
+                    </div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="治 疗 量">
+                    <div class="input-with-unit">
+                      <el-input v-model="formData.treatVolume" type="number" />
+                      <span class="unit">ml</span>
+                    </div>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-form-item label="制 备 方 法">
+                <el-input v-model="formData.prepareMode" />
+              </el-form-item>
+              <el-form-item label="预约治疗时间">
+                <el-date-picker v-model="formData.appointmentTime" type="datetime" placeholder="选择日期" style="width:100%"
+                  value-format="YYYY-MM-DD HH:mm:ss" />
+              </el-form-item>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div class="section">
+        <div class="section-title">病人最近检查结果</div>
+        <div class="check-table">
+          <PatientLisTable v-model:lis-list="lisProject" />
+        </div>
+      </div>
+    </el-form>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import PatientLisTable from '../components/PatientLisTable.vue'
+
+const formData = reactive({
+  applyNo: '',
+  applyDate: '',
+  applyDoctor: '',
+  attendingDoctor: '',
+  patientId: '',
+  patientName: '',
+  abo: '',
+  patientSex: '',
+  age: '',
+  ageUnit: '岁',
+  apanage: '',
+  dept: '',
+  zone: '',
+  bedNo: '',
+  rh: '',
+  diagnoses: '',
+  contraindications: '无',
+  treatmentPurpose: '',
+  remark: '',
+  transfusionHistory: 'N',
+  matchHistory: 'N',
+  pregnancyHistory: 'N',
+  deliveryHistory: 'N',
+  treatmentProject: '',
+  collectVolume: '',
+  treatVolume: '',
+  prepareMode: '',
+  appointmentTime: ''
+})
+
+const lisProject = ref<any[]>([])
+
+onMounted(() => {
+  lisProject.value = [
+    { item_name: 'HGB', item_result: '', item_unit: 'g/L', validTime: '' },
+    { item_name: 'ALT', item_result: '', item_unit: 'U/L', validTime: '' },
+    { item_name: 'Anti-HCV', item_result: '', item_unit: '', validTime: '' },
+    { item_name: 'APTT', item_result: '', item_unit: '秒', validTime: '' },
+    { item_name: 'HCT', item_result: '', item_unit: '%', validTime: '' },
+    { item_name: 'HBsAg', item_result: '', item_unit: '', validTime: '' },
+    { item_name: 'Anti-HIV', item_result: '', item_unit: '', validTime: '' },
+    { item_name: 'FIB', item_result: '', item_unit: 'g/L', validTime: '' },
+    { item_name: 'PLT', item_result: '', item_unit: '×10⁹/L', validTime: '' },
+    { item_name: 'TR', item_result: '', item_unit: '', validTime: '' },
+    { item_name: 'PT', item_result: '', item_unit: '秒', validTime: '' },
+    { item_name: 'INR', item_result: '', item_unit: '', validTime: '' }
+  ]
+})
+</script>
+
+<style scoped lang="scss">
+.box-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .el-form-item {
+    margin-bottom: 6px;
+  }
+}
+
+.section {
+  width: 100%;
+}
+
+
+
+.section {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  padding: 14px 18px;
+}
+
+.top-row {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+
+
+
+.treatment-card {
+  border: 1px solid #dfe6ec;
+  border-radius: 4px;
+  padding: 12px;
+  background: #f9fbff;
+}
+
+.treatment-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.status-oval {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 40px;
+  border: 2px solid #999;
+  border-radius: 50px;
+  color: #333;
+  background: #f9fafb;
+  font-size: 12px;
+}
+
+.age-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.age-unit {
+  width: 70px;
+}
+
+.checkbox-row {
+  padding-top: 8px;
+}
+
+.checkbox-row .el-checkbox {
+  line-height: 32px;
+}
+
+.input-with-unit {
+  position: relative;
+}
+
+.input-with-unit .el-input {
+  width: 100%;
+}
+
+.input-with-unit .unit {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #909399;
+  font-size: 12px;
+  pointer-events: none;
+}
+
+.check-table {
+  min-height: 260px;
+}
+
+.el-form-item {
+  margin-bottom: 10px;
+}
+
+.el-form-item__label {
+  font-weight: 600;
+}
+</style>

src/views/doctor/components/PatientLisTable.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="table-content">
+    <el-table :data="firstGroup" border height="100%">
+      <el-table-column label="项目名" prop="item_name" align="center" />
+      <el-table-column label="结果" prop="item_result" align="center">
+        <template #default="{ row }">
+          <el-select v-model="row.item_result" placeholder="" class="full-width-input" allow-create filterable
+            default-first-option clearable @change="handleChange">
+            <el-option v-for="item in dictData.test_result" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="单位" prop="item_unit" align="center" width="80" />
+      <el-table-column label="检验时间" prop="validTime" align="center" width="150" />
+    </el-table>
+    <el-table :data="secondGroup" border height="100%">
+      <el-table-column label="项目名" prop="item_name" align="center" />
+      <el-table-column label="结果" prop="item_result" align="center">
+        <template #default="{ row }">
+          <el-select v-model="row.item_result" placeholder="" class="full-width-input" allow-create filterable
+            default-first-option clearable @change="handleChange">
+            <el-option v-for="item in dictData.test_result" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="单位" prop="item_unit" align="center" width="80" />
+      <el-table-column label="检验时间" prop="validTime" align="center" width="150" />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dictData } from '@/hooks'
+
+const props = defineProps<{
+  lisList: any[]
+}>()
+const emit = defineEmits(['update:lisList'])
+const { lisList } = toRefs(props)
+
+// 本地副本
+const localList = ref<any[]>([])
+
+// 父数据更新同步本地，仅初始化/切换单据时执行
+watch(
+  lisList,
+  (val) => {
+    localList.value = JSON.parse(JSON.stringify(val || []))
+  },
+  { immediate: true }
+)
+
+// 平分两组数据
+const splitList = computed(() => {
+  const list = localList.value
+  const midIndex = Math.ceil(list.length / 2)
+  return {
+    firstGroup: list.slice(0, midIndex),
+    secondGroup: list.slice(midIndex)
+  }
+})
+const firstGroup = computed(() => splitList.value.firstGroup)
+const secondGroup = computed(() => splitList.value.secondGroup)
+
+// 下拉修改时同步给父，不使用deep watch避免递归
+const handleChange = () => {
+  const copy = JSON.parse(JSON.stringify(localList.value))
+  emit('update:lisList', copy)
+}
+</script>
+
+<style scoped lang="scss">
+.table-content {
+  height: 100%;
+  display: flex;
+  gap: 10px;
+  overflow: auto;
+}
+</style>