检查结果封装

src/views/doctor/application/index.vue

@@ -233,19 +233,19 @@
             </el-row>
 
             <div class="line"></div>
-            <el-row :gutter="10">
+            <div class="flow-wrap">
-              <el-col :span="4">
+              <div class="flow-item" v-for="(item, index) in processList" :key="index">
-                <el-form-item label="上级医师：" prop="check_medic">
+                <el-tooltip effect="dark" placement="top"
-                  {{userList.find(item => item.value == xkTransfuseApply.check_medic)?.label}}
+                  :content="item.operateTime ? `操作时间：${item.operateTime}` : '暂未操作'">
-                </el-form-item>
+                  <div class="circle-node" :class="[getNodeStatusClass(item, index)]">
-              </el-col>
+                    {{ item.label }}
-              <el-col :span="6">
+                  </div>
-                <el-form-item label="审核时间：" prop="medic_check_date">
+                </el-tooltip>
-                  {{ xkTransfuseApply.medic_check_date }}
+                <!-- 箭头：index对应的节点是当前圆圈，有时间=箭头绿色 -->
-                </el-form-item>
+                <div v-if="Number(index) < Number(processList.length) - 1" class="arrow-line"
-              </el-col>
+                  :class="{ arrow_finish: !!processList[index].operateTime }"></div>
-
+              </div>
-            </el-row>
+            </div>
 
             <div class="status"
               :style="{ borderColor: getBillStatusInfo(xkTransfuseApply.bill_stasus).color, color: getBillStatusInfo(xkTransfuseApply.bill_stasus).color }">
@@ -310,37 +310,7 @@
               <div>病人最近检查结果</div>
             </div>
             <div class="tableBox">
-              <el-table :data="firstGroup" border height="100%">
+              <PatientLisTable v-model:lis-list="lisProject" />
-                <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>
             </div>
 
           </div>
@@ -591,6 +561,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'
@@ -667,30 +638,13 @@ const dictList = ref([
 const formData = ref({
   apply_date: '',
 }) //申请单信息
-const xkPatientInfo = ref({
+const xkPatientInfo = ref({}) //病人信息
-  transfuse_history: 'N',
-  reaction_history: 'N',
-  match_history: 'N',
-  gestation_history: 'N',
-  parturition_history: 'N',
-  nldw: '岁',
-}) //病人信息
 const xkTransfuseApply = ref({
   agreement_ink: 'Y',
   bill_type: '正常',
   apply_type: '001'
 }) //输血申请信息
 
-
-const sexChange = (val: string) => {
-  if (val == '男') {
-    xkPatientInfo.value.parturition_history = 'N'
-    xkPatientInfo.value.gestation_history = 'N'
-  }
-}
-
-
-
 // 根据单据状态获取单元格样式（背景色+白色文字）
 const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
   if (column.label == '单据状态') {
@@ -741,6 +695,37 @@ const bloodFormRules = reactive({
     }
   ]
 })
+
+//流程节点
+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,14 +800,7 @@ const rowClick = (row) => {
 }
 //新增申请单
 const addHandle = () => {
-  xkPatientInfo.value = {
+  xkPatientInfo.value = {} //病人信息
-    transfuse_history: 'N',
-    reaction_history: 'N',
-    match_history: 'N',
-    gestation_history: 'N',
-    parturition_history: 'N',
-    nldw: '岁',
-  } //病人信息
   xkTransfuseApply.value = {
     agreement_ink: 'Y',
     bill_type: '正常',
@@ -1228,20 +1206,6 @@ 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()
@@ -1262,9 +1226,6 @@ onMounted(() => {
     const [a, b] = getParam('SQDSFKRLXGXX').split('/')
     aboFlag.value = b
   }
-
-
-
 })
 
 // 监听路由变化
@@ -1352,9 +1313,6 @@ onBeforeUnmount(() => {
 
           .tableBox {
             height: calc(100% - 30px);
-            display: flex;
-            gap: 10px;
-            overflow: auto;
           }
         }
       }
@@ -1517,4 +1475,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="card-box jcBox">
-        <div class="title">病人最近检查结果</div>
+        <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/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>