wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

688 [住院发退药-发药明细单] 患者列表布局挤压导致内容显示不全，且多条件组合检索（患者信息/发药状态/药品分类）失效

Browse Source 
布局挤压：左侧患者列表 width: 25% 无法容纳 440px 列宽，年龄列被遮挡
This commit is contained in:
wangjian963
2026-06-24 17:45:43 +08:00
parent 1cb87d4e4b
commit c76a165b81
1 changed files with 109 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

447
healthlink-his-ui/src/views/drug/inpatientMedicationDispensing/components/MedicationDetails.vue
View File

@@ -1,107 +1,62 @@
<template>
<div class="app-container">
<div class="left">
<div class="form">
<el-form
v-show="showSearch"
ref="queryRef"
:model="queryParams"
:inline="true"
label-position="right"
<div class="med-detail-container">
<el-card style="width: 38%">
<template #header>
<div style="display: flex; justify-content: space-between; align-items: center">
<span>患者列表</span>
<span style="font-size: 12px; color: #909399; font-weight: 400">共 {{ total }} 条</span>
</div>
</template>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px">
<el-input
v-model="queryParams.searchKey"
style="width: 180px"
placeholder="姓名/证件号"
clearable
@keyup.enter="handleQuery"
>
<el-form-item
label="患者信息"
prop="condition"
>
<el-input
v-model="queryParams.condition"
placeholder="请输入姓名/证件号"
clearable
style="width: 160px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item
label="发药状态"
prop="departmentId"
style="margin-left: 10px"
>
<el-select
v-model="queryParams.statusEnum"
placeholder="请选择发药状态"
clearable
style="width: 160px"
@change="handleQuery"
>
<el-option
v-for="item in dispenseStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="入院日期">
<el-date-picker
v-model="dateRange"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 250px"
value-format="YYYY-MM-DD"
@change="handleQuery"
/>
</el-form-item>
<el-form-item style="margin-left: 15px">
<el-button
type="primary"
@click="handleQuery"
>
搜索
</el-button>
<el-button @click="resetQuery">
重置
</el-button>
</el-form-item>
</el-form>
<template #append>
<el-button icon="Search" @click="handleQuery" />
</template>
</el-input>
<el-select
v-model="queryParams.statusEnum"
placeholder="发药状态"
style="width: 140px"
clearable
@change="handleQuery"
>
<el-option
v-for="item in dispenseStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-date-picker
v-model="dateRange"
type="daterange"
start-placeholder="开始"
end-placeholder="结束"
style="width: 240px"
value-format="YYYY-MM-DD"
@change="handleQuery"
/>
<el-button type="primary" @click="handleQuery">搜索</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
<vxe-table
ref="patientListRef"
:row-config="{ isCurrent: true }"
:data="patientList"
border
style="width: 100%; flex: 1; min-height: 0"
auto-resize
@cell-click="handleCurrentChange"
>
<vxe-column
field="encounterNo"
title="住院号"
width="150"
align="center"
/>
<vxe-column
field="patientName"
title="姓名"
width="130"
align="center"
/>
<vxe-column
field="genderEnum_enumText"
title="性别"
width="80"
align="center"
/>
<vxe-column
field="age"
title="年龄"
width="80"
align="center"
/>
<!-- <vxe-column field="receptionTime" title="就诊日期" align="center">
<template #default="scope">
{{ scope.row.receptionTime ? formatDate(scope.row.receptionTime) : '-' }}
</template>
</vxe-column> -->
<vxe-column field="encounterNo" title="住院号" min-width="90" align="center" show-overflow="title" />
<vxe-column field="patientName" title="姓名" min-width="60" align="center" />
<vxe-column field="genderEnum_enumText" title="性别" min-width="50" align="center" />
<vxe-column field="age" title="年龄" min-width="50" align="center" />
</vxe-table>
<pagination
v-show="total > 0"
@@ -110,18 +65,23 @@
:total="total"
@pagination="getList"
/>
</div>
</el-card>
<div class="right">
<div class="top">
<span style="color: #606266; font-size: 14px; font-weight: 700; margin-right: 15px">
调配药师
</span>
<el-select
v-model="preparerDoctor"
placeholder="调配药师"
style="width: 160px"
>
<el-card style="width: 61%">
<template #header>
<div style="display: flex; justify-content: space-between; align-items: center">
<span>药品明细</span>
<span style="font-size: 15px; color: #e6a23c">
总金额：
<strong style="font-size: 18px">
¥{{ medicineTotalPrice ? medicineTotalPrice.toFixed(2) : '0.00' }}
</strong>
</span>
</div>
</template>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px">
<span style="color: #606266; font-size: 14px; font-weight: 700">调配药师</span>
<el-select v-model="preparerDoctor" placeholder="调配药师" style="width: 140px">
<el-option
v-for="item in preparerDoctorOptions"
:key="item.value"
@@ -129,20 +89,12 @@
:value="item.value"
/>
</el-select>
<span style="color: #606266; font-size: 14px; font-weight: 700; margin-right: 15px">
药品分类
</span>
<span style="color: #606266; font-size: 14px; font-weight: 700; margin-left: 16px">药品分类</span>
<el-select
v-model="tcmFlag"
placeholder="药品分类"
style="width: 160px"
@change="
() => {
if (currentRow.encounterId) {
getMedicineList(currentRow.encounterId);
}
}
"
style="width: 140px"
@change="() => { if (currentRow.encounterId) { getMedicineList(currentRow.encounterId) } }"
>
<el-option
v-for="item in medCategoryCode"
@@ -154,187 +106,58 @@
<el-button
:disabled="medicineInfoList && medicineInfoList.length == 0"
type="primary"
style="margin-left: 30px"
style="margin-left: 16px"
@click="handleBatch()"
>
批量发药
</el-button>
<!-- <el-button type="primary" @click="handleScan()" style="margin-left: 30px"> 扫码 </el-button> -->
<el-button
type="primary"
style="margin-left: 30px"
@click="printPrescription()"
>
<el-button type="primary" style="margin-left: 8px" @click="printPrescription()">
处方打印
</el-button>
<div style="position: absolute; top: 30px; right: 25px">
总金额：{{ medicineTotalPrice ? medicineTotalPrice.toFixed(2) : '0.00' }}元
</div>
</div>
<vxe-table
ref="tableRef"
v-loading="loading"
:data="medicineInfoList"
border
style="width: 100%; flex: 1; min-height: 0; margin-top: 10px"
auto-resize
:span-method="spanMethod"
@select="handleSelectionChange"
@cell-dblclick="handleCellDbClick"
>
<vxe-column
type="checkbox"
width="55"
align="center"
fixed="left"
/>
<vxe-column
field="prescriptionNo"
title="处方号"
width="120"
align="center"
/>
<vxe-column
field="itemName"
title="项目名称"
width="160"
align="center"
/>
<vxe-column
field="statusEnum_enumText"
title="发药状态"
width="100"
align="center"
>
<vxe-column type="checkbox" width="55" align="center" fixed="left" />
<vxe-column field="prescriptionNo" title="处方号" min-width="110" align="center" />
<vxe-column field="itemName" title="项目名称" min-width="140" align="center" show-overflow="title" />
<vxe-column field="statusEnum_enumText" title="发药状态" min-width="90" align="center">
<template #default="scope">
<el-tag :type="tagType(scope.row.statusEnum)">
<el-tag :type="tagType(scope.row.statusEnum)" size="small" effect="light">
{{ formatDrugStatusText(scope.row) }}
</el-tag>
</template>
</vxe-column>
<vxe-column
field="quantity"
title="发药数量"
width="130"
align="center"
>
<vxe-column field="quantity" title="发药数量" min-width="110" align="center">
<template #default="scope">
<span> {{ scope.row.quantity }}{{ scope.row.unitCode_dictText }} </span>
<span>{{ scope.row.quantity }}{{ scope.row.unitCode_dictText }}</span>
</template>
</vxe-column>
<!-- <vxe-column field="flag" title="组合" width="60" align="center" /> -->
<!-- <vxe-column field="quantity" title="发药数量" width="100" align="center" /> -->
<vxe-column
field="totalVolume"
title="规格"
width="100"
align="center"
/>
<!-- <vxe-column field="unitCode_dictText" title="单位" width="100" align="center" /> -->
<!-- <vxe-column
field="doseUnitCode_dictText"
title="单次剂量"
width="80"
align="center"
v-if="tcmFlag == '0'"
>
<template #default="scope">
{{ scope.row.dose }}{{ scope.row.doseUnitCode_dictText }}
</template>
</vxe-column> -->
<!-- <vxe-column
field="traceNo"
title="追溯码"
width="180"
align="center"
v-if="tcmFlag == '0'"
>
<template #default="scope">
<el-tooltip
:content="formatContent(scope.row.traceNo)"
placement="top"
popper-class="custom-tooltip"
>
<el-input
:ref="'traceNoRef' + scope.rowIndex"
@input="handleTraceNoInput(scope.row, scope.rowIndex)"
v-model="scope.row.traceNo"
placeholder="请输入追溯码"
/>
</el-tooltip>
</template>
</vxe-column> -->
<vxe-column
field="lotNumber"
title="批次号"
width="160"
align="center"
>
<vxe-column field="totalVolume" title="规格" min-width="100" align="center" />
<vxe-column field="lotNumber" title="批次号" min-width="140" align="center" show-overflow="title">
<template #default="scope">
<span>{{ scope.row.lotNumber }}</span>
</template>
</vxe-column>
<vxe-column
field="totalPrice"
title="金额"
width="100"
:formatter="formatPrice"
align="right"
header-align="center"
/>
<vxe-column
field="locationName"
title="发药药房"
width="90"
align="center"
/>
<vxe-column
field="manufacturerText"
title="生产厂家"
width="200"
align="center"
/>
<vxe-column
field="doctorName"
title="开单医生"
width="100"
align="center"
/>
<vxe-column
field="conditionName"
title="诊断"
width="120"
align="center"
/>
<!-- <vxe-column field="dose" title="剂量" width="100" align="center" /> -->
<vxe-column
field="rateCode"
title="频次"
width="100"
align="center"
/>
<vxe-column
field="methodCode_dictText"
title="用法"
width="100"
align="center"
/>
<vxe-column
field="dispensePerDuration"
title="天数"
width="80"
align="center"
/>
<vxe-column
title="操作"
align="center"
width="160"
fixed="right"
class-name="small-padding fixed-width"
>
<vxe-column field="totalPrice" title="金额" min-width="90" :formatter="formatPrice" align="right" header-align="center" />
<vxe-column field="locationName" title="发药药房" min-width="80" align="center" />
<vxe-column field="manufacturerText" title="生产厂家" min-width="150" align="center" show-overflow="title" />
<vxe-column field="doctorName" title="开单医生" min-width="80" align="center" />
<vxe-column field="conditionName" title="诊断" min-width="100" align="center" show-overflow="title" />
<vxe-column field="rateCode" title="频次" min-width="70" align="center" />
<vxe-column field="methodCode_dictText" title="用法" min-width="70" align="center" />
<vxe-column field="dispensePerDuration" title="天数" min-width="60" align="center" />
<vxe-column title="操作" align="center" width="150" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
link type="primary"
:disabled="!(scope.row.statusEnum == 2 || scope.row.statusEnum == 14)"
icon="SuccessFilled"
@click="handleBatch(scope.row)"
@@ -342,8 +165,7 @@
发药
</el-button>
<el-button
link
type="primary"
link type="primary"
:disabled="scope.row.statusEnum != 2"
icon="CircleClose"
@click="backMedicine(scope.row)"
@@ -353,17 +175,10 @@
</template>
</vxe-column>
</vxe-table>
</div>
<el-dialog
v-model="showDialog"
title="选择作废原因"
width="30%"
>
<!-- 下拉选择框 -->
<el-select
v-model="notPerformedReasonEnum"
placeholder="请选择作废原因"
>
</el-card>
<el-dialog v-model="showDialog" title="选择作废原因" width="30%">
<el-select v-model="notPerformedReasonEnum" placeholder="请选择作废原因">
<el-option
v-for="item in backReason"
:key="item.value"
@@ -371,14 +186,9 @@
:value="item.value"
/>
</el-select>
<!-- 弹窗底部按钮 -->
<template #footer>
<span class="dialog-footer">
<el-button
type="primary"
@click="handleConfirm"
>确 定</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
<el-button @click="handleCancel">取 消</el-button>
</span>
</template>
@@ -474,7 +284,7 @@ const data = reactive({
queryParams: {
pageNo: 1,
pageSize: 10,
condition: null,
searchKey: null,
departmentId: null,
statusEnum: 18,
classEnum: 1,
@@ -486,6 +296,7 @@ const { queryParams } = toRefs(data);
onMounted(() => {
getList();
});
function handleScan() {
openTraceNoDialog.value = true;
}
@@ -1188,59 +999,26 @@ function handleCancel() {
</script>
<style lang="scss" scoped>
.app-container {
padding: 20px;
.med-detail-container {
height: 100%;
display: flex;
height: calc(100vh - 84px);
justify-content: space-between;
overflow: hidden;
}
.left {
width: 25%;
min-width: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
.form {
width: 100%;
display: flex;
justify-content: space-between;
flex-shrink: 0;
flex-wrap: wrap;
gap: 8px;
}
}
.right {
margin-left: 12px;
flex: 1;
min-width: 0;
overflow: auto;
}
:deep(.vxe-table tbody tr:hover > td) {
background-color: inherit !important;
}
.el-form--inline .el-form-item {
margin-right: 0px;
}
:deep(.el-textarea .el-textarea__inner) {
resize: none !important;
}
/* 添加图标悬停样式 */
.editable-icon {
transition: color 0.3s ease;
}
.editable-icon:hover {
color: #3B82F6; /* Element Plus 主题色，可根据需要调整 */
color: #3B82F6;
cursor: pointer;
}
/* 批次号容器样式 */
.lot-number-container {
display: flex;
justify-content: space-between;
@@ -1248,7 +1026,6 @@ function handleCancel() {
width: 100%;
}
/* 确认图标样式 */
.confirm-icon {
transition: color 0.3s ease;
margin-left: 5px;
@@ -1259,18 +1036,12 @@ function handleCancel() {
cursor: pointer;
}
/* 其他已有样式保持不变 */
:deep(.vxe-table tbody tr:hover > td) {
background-color: inherit !important;
}
.el-form--inline .el-form-item {
margin-right: 0px;
}
:deep(.el-textarea .el-textarea__inner) {
resize: none !important;
}
/* 表头不换行 */
:deep(.vxe-header--column .vxe-cell) {
white-space: nowrap;
}
</style>