@@ -2,9 +2,9 @@
< el-container class = "inspection-application-container" >
<!-- 顶部操作按钮区 -- >
< el-header class = "top-action-bar" height = "5 0px" >
< el-header class = "top-action-bar" height = "6 0px" >
< el-row class = "action-buttons" type = "flex" justify = "end" :gutter = "10" >
< el-button type = "success " size = "large" @click ="handleSave" class = "save-btn" :loading = "saving" >
< el-button type = "primary " size = "large" @click ="handleSave" class = "save-btn" :loading = "saving" >
< el-icon > < Document / > < / el-icon >
保存
< / el-button >
@@ -30,7 +30,7 @@
border
stripe
size = "small"
max -height = " 30 0px"
max -height = " 28 0px"
style = "width: 100%; min-width: 100%"
class = "inspection-table"
highlight -current -row
@@ -39,12 +39,12 @@
@ cell -click = " handleCellClick "
>
< el-table-column type = "selection" width = "55" align = "center" header -align = " center " / >
< el-table-column label = "序号 " width = "6 0" align = "center" header -align = " center " >
< template # default = "{ $index } " >
< span > { { $index + 1 } } < / span >
< el-table-column label = "申请ID" prop = "applicationId " width = "8 0" align = "center" header -align = " center " >
< template # default = "scope " >
< span > { { scope . row . applicationId || '-' } } < / span >
< / template >
< / el-table-column >
< el-table-column label = "申请单号" prop = "applyNo" min -width = " 18 0 " align = "center" header -align = " center " / >
< el-table-column label = "申请单号" prop = "applyNo" min -width = " 16 0 " align = "center" header -align = " center " / >
< el-table-column label = "检验项目" prop = "itemName" min -width = " 170px " align = "center" header -align = " center " / >
< el-table-column label = "申请医生" prop = "applyDocName" width = "120" align = "center" header -align = " center " / >
< el-table-column label = "急" width = "60" align = "center" header -align = " center " >
@@ -82,49 +82,50 @@
< / el-table-column >
< / el-table >
<!-- 分页 -- >
< el-row class = "pagination-container" justify = "center" style = " margin-top: 10 px">
< div style = "width: 100%; text-align: center; margin-top: 8 px; ">
< el-pagination
v -model :current-page = "queryParams.pageNo"
v -model :page-size = "queryParams.pageSize"
: page -sizes = " [ 10 , 20 , 50 , 100 ] "
:total = "total"
layout = "prev, pager, next, jumper, total "
layout = "prev, pager, next"
:pager-count = "5"
:hide-on-single-page = "fals e"
:hide-on-single-page = "tru e"
small
@ size -change = " handleSizeChange "
@ current -change = " handleCurrentChange "
style = "display: inline-flex;"
/ >
< / el-row >
< / div >
< / el-card >
< / el-main >
<!-- 底部表单与项目选择区 -- >
< el-main class = "bottom-content-area" >
< el-row :gutter = "16 " >
<!-- 左侧 : 申请单表单区 ( 65 % ) -- >
< el-col :span = "15 " class = "form-area" >
< el-row :gutter = "12 " >
<!-- 左侧 : 申请单表单区 ( 60 % ) -- >
< el-col :span = "14 " class = "form-area" >
< el-card class = "form-card" style = "width: 100%" >
< el-tabs v-model = "leftActiveTab" class="form-tabs" >
< el -tab -pane label = "申请单" name = "application" >
< el-form class = "application-form" :model = "formData" label -width = " auto " >
< el-form-item label = "申请单号" style = "margin-bottom: 1 px" >
< el-form-item label = "申请单号" style = "margin-bottom: 2 px" >
< el-input v-model = "formData.applyNo" disabled size="small" / >
< / el-form-item >
<!-- 患者信息行 -- >
< el-row :gutter = "20 " style = "margin-bottom: 1px " >
< el-row :gutter = "1 2" style = "margin-bottom: 0 " >
< el-col :span = "8" >
< el-form-item label = "姓名" required >
< el-form-item label = "姓名" required style = "margin-bottom: 4px" >
< el-input v-model = "formData.patientName" readonly size="small" / >
< / el-form-item >
< / el-col >
< el-col :span = "8" >
< el-form-item label = "就诊卡号" required >
< el-form-item label = "就诊卡号" required style = "margin-bottom: 4px" >
< el-input v-model = "formData.medicalrecordNumber" readonly size="small" / >
< / el-form-item >
< / el-col >
< el-col :span = "8" >
< el-form-item label = "费用性质" required >
< el-form-item label = "费用性质" required style = "margin-bottom: 4px" >
< el-select v-model = "formData.natureofCost" placeholder="请选择费用性质" size="small" style="width: 100%" >
< el -option label = "自费医疗" value = "self" / >
< el-option label = "医保" value = "medical" / >
@@ -137,10 +138,10 @@
< / el-row >
<!-- 申请信息行 -- >
< el-row :gutter = "20 " style = "margin-bottom: 1px " >
< el-row :gutter = "1 2" style = "margin-bottom: 0 " >
<!-- 申请日期 -- >
< el-col :span = "8" >
< el-form-item label = "申请日期" required >
< el-form-item label = "申请日期" required style = "margin-bottom: 4px" >
< el-input
v-model = "formData.applyTime"
readonly
@@ -150,13 +151,13 @@
< / el-col >
<!-- 申请科室 -- >
< el-col :span = "8" >
< el-form-item label = "申请科室" required >
< el-form-item label = "申请科室" required style = "margin-bottom: 4px" >
< el-input v-model = "formData.applyDepartment" readonly size="small" / >
< / el-form-item >
< / el-col >
<!-- 申请医生 -- >
< el-col :span = "8" >
< el-form-item label = "申请医生" required >
< el-form-item label = "申请医生" required style = "margin-bottom: 4px" >
< el-input v-model = "formData.applyDocName" readonly size="small" / >
< / el-form-item >
< / el-col >
@@ -166,7 +167,7 @@
< el-form-item
label = "执行科室"
required
style = "margin-bottom: 1 px"
style = "margin-bottom: 4 px"
: class = "{ 'form-item-error': validationErrors.executeDepartment }"
: error = "validationErrors.executeDepartment ? '请选择执行科室' : ''"
>
@@ -186,19 +187,20 @@
< / el-select >
< / el-form-item >
<!-- 诊断描述 -- >
< el-row :gutter = "20 " style = "margin-bottom: 1px " >
<!-- 诊断描述与临床诊断 -- >
< el-row :gutter = "1 2" style = "margin-bottom: 0 " >
< el-col :span = "12" >
< el-form-item
label = "诊断描述"
required
style = "margin-bottom: 4px"
: class = "{ 'form-item-error': validationErrors.clinicDesc }"
: error = "validationErrors.clinicDesc ? '请输入诊断描述' : ''"
>
< el-input
v-model = "formData.clinicDesc"
type = "textarea"
:rows = "2 "
:rows = "1 "
size = "small"
: class = "{ 'is-error': validationErrors.clinicDesc }"
/ >
@@ -208,13 +210,14 @@
< el-form-item
label = "临床诊断"
required
style = "margin-bottom: 4px"
: class = "{ 'form-item-error': validationErrors.clinicDiag }"
: error = "validationErrors.clinicDiag ? '请输入临床诊断' : ''"
>
< el-input
v-model = "formData.clinicDiag"
type = "textarea"
:rows = "2 "
:rows = "1 "
size = "small"
: class = "{ 'is-error': validationErrors.clinicDiag }"
/ >
@@ -222,24 +225,20 @@
< / el-col >
< / el-row >
<!-- 禁忌症 、 病史摘要 、 检验目的 、 体格检查 -- >
< el-row :gutter = "20 " style = "margin-bottom: 1px " >
< el-col :span = "12" >
< el-form-item label = "禁忌症" >
< el-input v-model = "formData.contraindication" type="textarea" :rows="2" size="small" / >
< / el-form-item >
< / el-col >
<!-- 病史摘要与检验目的 -- >
< el-row :gutter = "1 2" style = "margin-bottom: 0 " >
< el-col :span = "12" >
< el-form-item
label = "病史摘要"
required
style = "margin-bottom: 4px"
: class = "{ 'form-item-error': validationErrors.medicalHistorySummary }"
: error = "validationErrors.medicalHistorySummary ? '请输入病史摘要' : ''"
>
< el-input
v-model = "formData.medicalHistorySummary"
type = "textarea"
:rows = "2 "
:rows = "1 "
size = "small"
: class = "{ 'is-error': validationErrors.medicalHistorySummary }"
/ >
@@ -249,47 +248,57 @@
< el-form-item
label = "检验目的"
required
style = "margin-bottom: 4px"
: class = "{ 'form-item-error': validationErrors.purposeofInspection }"
: error = "validationErrors.purposeofInspection ? '请输入检验目的' : ''"
>
< el-input
v-model = "formData.purposeofInspection"
type = "textarea"
:rows = "2 "
:rows = "1 "
size = "small"
: class = "{ 'is-error': validationErrors.purposeofInspection }"
/ >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 禁忌症与体格检查 -- >
< el-row :gutter = "12" style = "margin-bottom: 0" >
< el-col :span = "12" >
< el-form-item label = "体格检查 " >
< el-input v-model = "formData.physicalExam" type="textarea" :rows="2 " size="small" / >
< el-form-item label = "禁忌症" style = "margin-bottom: 4px " >
< el-input v-model = "formData.contraindication " size="small" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "体格检查" style = "margin-bottom: 4px" >
< el-input v-model = "formData.physicalExam" size="small" / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 检验项目和备注 -- >
< el-row :gutter = "20 " style = "margin-bottom: 1px " >
< el-row :gutter = "1 2" style = "margin-bottom: 0 " >
< el-col :span = "12" >
< el-form-item label = "检验项目" >
< el-input v-model = "formData.inspectionItemsText" type="textarea" :rows="2" size="small" readonly / >
< el-form-item label = "检验项目" style = "margin-bottom: 4px" >
< el-input v-model = "formData.inspectionItemsText" size="small" readonly / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "备注" >
< el-input v-model = "formData.applyRemark" type="textarea" :rows="2" size="small" / >
< el-form-item label = "备注" style = "margin-bottom: 4px" >
< el-input v-model = "formData.applyRemark" size="small" / >
< / el-form-item >
< / el-col >
< / el-row >
<!-- 状态复选框组 -- >
< el-card style = "margin-bottom: 16 px; padding: 16 px; background: #f8f9fa; border-radius: 4px; border: 1px solid #e9ecef" shadow = "never" >
< el-card style = "margin-bottom: 4 px; padding: 8px 12 px; background: #f8f9fa; border-radius: 4px; border: 1px solid #e9ecef" shadow = "never" >
< template # header >
< span style = "font-weight: bold; color: #1a2b6d; font-size: 14 px" >
< span style = "font-weight: bold; color: #1a2b6d; font-size: 13 px" >
状态设置
< / span >
< / template >
< el-row type = "flex" :gutter = "16 " wrap >
< el-row type = "flex" :gutter = "12 " wrap >
< el-col :xs = "12" :sm = "6" :md = "6" :lg = "6" >
<!-- 只有急标记能编辑 -- >
< el-checkbox v-model = "formData.priorityCode" :true-value="1" :false-value="0" > 急 < / el -checkbox >
@@ -311,8 +320,8 @@
< / el-form >
< / el-tab-pane >
< el-tab-pane label = "检验信息" name = "inspectionInfo" >
< el-card style = "padding: 20px; height: 70 0px; overflow-y: auto; border: 1px solid #e4e7ed; border-radius: 4px; margin: 10 px; width: 100%" >
< el-form :model = "formData" label -width = " 100px " style = "margin-bottom: 2 0px" >
< el-card style = "padding: 1 0px; overflow-y: auto; border: 1px solid #e4e7ed; border-radius: 4px; margin: 5 px; width: 100%" >
< el-form :model = "formData" label -width = " 100px " style = "margin-bottom: 1 0px" >
< el-row :gutter = "15" >
< el-col :span = "12" >
< el-form-item label = "检验医生" >
@@ -354,11 +363,11 @@
< / el-form >
<!-- 检验信息详情表格 -- >
< el-card style = "margin-top: 2 0px; width: 100%" shadow = "never" >
< el-card style = "margin-top: 1 0px; width: 100%" shadow = "never" >
< template # header >
< h4 style = "margin: 0; font-weight: bold" > 检验信息详情 < / h4 >
< / template >
< el-table :data = "selectedInspectionItems" border size = "small" style = "width: 100%; min-width: 100%" max -height = " 3 50" >
< el-table :data = "selectedInspectionItems" border size = "small" style = "width: 100%; min-width: 100%" max -height = " 2 50" >
< el-table-column label = "项目名称" prop = "itemName" width = "200" / >
< el-table-column label = "样本类型" prop = "sampleType" width = "80" align = "center" / >
< el-table-column label = "单位" prop = "unit" width = "60" align = "center" / >
@@ -395,8 +404,8 @@
< / el-tabs >
< / el-card >
< / el-col >
<!-- 右侧 : 项目选择区 ( 35 % ) -- >
< el-col :span = "9 " class = "selection-area" >
<!-- 右侧 : 项目选择区 ( 40 % ) -- >
< el-col :span = "10 " class = "selection-area" >
<!-- 检验项目选择区 ( 上部50 % ) -- >
< el-card class = "inspection-selector" v-loading = "inspectionLoading" element-loading-text="正在加载检验项目..." >
< template # header >
@@ -429,7 +438,7 @@
<!-- 分类树 -- >
< el-scrollbar
class = "category-tree"
style = "max-height: 28 0px"
style = "max-height: 22 0px"
@scroll ="handleScroll"
>
<!-- 无数据提示 -- >
@@ -504,7 +513,7 @@
< / template >
<!-- 已选项目列表 -- >
< el-scrollbar class = "selected-tree" style = "max-height: 30 0px" >
< el-scrollbar class = "selected-tree" style = "max-height: 22 0px" >
< el-list v-if = "selectedInspectionItems.length > 0" :data="selectedInspectionItems" class="selected-items-list" >
< el -list -item
v-for = "item in selectedInspectionItems"
@@ -638,7 +647,7 @@ const initData = async () => {
// 查询参数
const queryParams = reactive ( {
pageNo : 1 ,
pageSize : 10 ,
pageSize : 3 ,
encounterId : props . patientInfo . encounterId
} )
@@ -987,14 +996,14 @@ const getInspectionList = () => {
if ( res . data && typeof res . data === 'object' ) {
// 如果返回的是分页对象 {records: [...], total: 100}
if ( Array . isArray ( res . data . records ) ) {
// 处理数据:将同一个申请单的多个明细合并成一条记录
inspectionList . value = mergeInspectionApplyRecords ( res. data . records )
total . value = res . data . total || 0
// 直接使用后端返回的数据(后端已按申请单返回,无需合并)
inspectionList . value = res . data . records
total . value = res . data . total || res . data . records . length
}
// 如果返回的是普通数组
else if ( Array . isArray ( res . data ) ) {
// 处理数据:将同一个申请单的多个明细合并成一条记录
inspectionList . value = mergeInspectionApplyRecords ( res. data )
// 直接使用后端返回的数据
inspectionList . value = res . data
total . value = res . data . length
}
// 如果返回的是其他对象结构
@@ -1625,10 +1634,16 @@ defineExpose({
< / script >
< style lang = "scss" scoped >
/* 页面容器 */
/* 页面容器 - 紧凑布局 */
. inspection - application - container {
max - height: 750 px ;
overflow - y : auto ;
height : auto ;
max - height : none ;
overflow : visible ;
padding : 0 ;
}
/* 覆盖 el-main 默认 padding */
. inspection - application - container . el - main {
padding : 0 ;
}
@@ -1647,15 +1662,41 @@ defineExpose({
gap : 10 px ;
}
/* 检验信息表格区 */
/* 新增按钮样式 - PRD要求蓝色背景 #4a89dc */
. new - btn {
background - color : # 4 a89dc ! important ;
border - color : # 4 a89dc ! important ;
color : # fff ! important ;
}
. new - btn : hover {
background - color : # 5 a9aec ! important ;
border - color : # 5 a9aec ! important ;
}
/* 保存按钮样式 - PRD要求绿色背景 #48cfad */
. save - btn {
background - color : # 48 cfad ! important ;
border - color : # 48 cfad ! important ;
color : # fff ! important ;
}
. save - btn : hover {
background - color : # 58 dfbd ! important ;
border - color : # 58 dfbd ! important ;
}
/* 检验信息表格区 - 紧凑高度 */
. inspection - section {
padding : 2 0px ;
padding : 4 px 10 px 0 1 0px ;
}
. table - card {
height : 300 px ;
display : flex ;
flex - direction : column ;
height : auto ;
}
. table - card : deep ( . el - card _ _body ) {
padding - bottom : 8 px ;
}
. card - header {
@@ -1668,37 +1709,45 @@ defineExpose({
/* 底部内容区域 */
. bottom - content - area {
padding : 2 0px ;
padding : 4 px 1 0px ;
}
/* 表单区域 */
. form - card {
height : 700 px ;
height : auto ;
}
/* 表单区域使用主色调 */
. form - tabs : deep ( . el - tabs _ _item . is - active ) {
color : # 51 A3F3 ! important ;
}
. form - tabs : deep ( . el - tabs _ _active - bar ) {
background - color : # 51 A3F3 ! important ;
}
. form - tabs {
height : 100 % ;
height : auto ;
}
. application - form {
height : 650 px ;
overflow - y : auto ;
padding : 20 px ;
overflow : visible ;
padding : 6 px 8 px ;
border : 1 px solid # e4e7ed ;
border - radius : 4 px ;
margin : 10 px ;
margin : 2 px ;
}
/* 选择区域 */
. selection - area {
display : flex ;
flex - direction : column ;
gap : 20 px ;
gap : 8 px ;
}
. inspection - selector ,
. selected - items - area {
height : 350 px ;
height : auto ;
}
. card - title {
@@ -1707,7 +1756,7 @@ defineExpose({
}
. search - input {
margin - bottom : 15 px ;
margin - bottom : 8 px ;
}
. selected - header {
@@ -1717,14 +1766,6 @@ defineExpose({
flex - shrink : 0 ;
}
. pagination - container {
display : flex ;
justify - content : center ;
margin - top : 10 px ;
padding - top : 10 px ;
border - top : 1 px solid var ( -- el - border - color - light ) ;
}
: deep ( . el - pagination ) {
. el - pager li {
@@ -1976,6 +2017,7 @@ defineExpose({
box - shadow : 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.04 ) ;
}
/* 主色调 #51A3F3 - PRD样式规范 */
: deep ( . inspection - table . el - table _ _header ) {
th {
background : linear - gradient ( to bottom , # f8fafc 0 % , # f1f5f9 100 % ) ;
@@ -1987,6 +2029,17 @@ defineExpose({
}
}
/* 选中状态使用主色调 #51A3F3 */
: deep ( . inspection - table . el - checkbox _ _input . is - checked . el - checkbox _ _inner ) {
background - color : # 51 A3F3 ! important ;
border - color : # 51 A3F3 ! important ;
}
: deep ( . inspection - table . el - checkbox _ _input . is - indeterminate . el - checkbox _ _inner ) {
background - color : # 51 A3F3 ! important ;
border - color : # 51 A3F3 ! important ;
}
: deep ( . inspection - table . el - table _ _body ) {
td {
border - bottom : 1 px solid # f1f5f9 ;
@@ -2038,7 +2091,7 @@ defineExpose({
line - height : 1.4 ;
}
/* 新的树形结构样式 */
/* 新的树形结构样式 - PRD要求高度约350px */
. category - tree {
border : 1 px solid # ebeef5 ;
border - radius : 4 px ;
@@ -2072,7 +2125,7 @@ defineExpose({
. category - tree - header . active {
background - color : # e6f7ff ;
color : # 409 eff ;
color : # 51 A3F3 ;
font - weight : bold ;
}
@@ -2081,7 +2134,7 @@ defineExpose({
font - size : 12 px ;
width : 12 px ;
text - align : center ;
color : # 409 eff ;
color : # 51 A3F3 ;
}
. category - count {
@@ -2147,7 +2200,7 @@ defineExpose({
. inspection - tree - item . selected {
background - color : # ecf5ff ;
border - left : 3 px solid # 409 eff ;
border - left : 3 px solid # 51 A3F3 ;
}
. inspection - tree - item . item - itemName {
@@ -2162,7 +2215,7 @@ defineExpose({
margin - left : 10 px ;
}
/* 已选项目区样式 */
/* 已选项目区样式 - PRD要求高度约350px */
. selected - items - area {
display : flex ;
flex - direction : column ;
@@ -2170,6 +2223,7 @@ defineExpose({
. selected - tree {
flex : 1 ;
max - height : 280 px ;
}
. selected - tree - item {