From c76a165b8101d217c8cf135237e1e5d29d77fdc9 Mon Sep 17 00:00:00 2001
From: wangjian963 <15215920+aprilry@user.noreply.gitee.com>
Date: Wed, 24 Jun 2026 17:45:43 +0800
Subject: [PATCH] =?UTF-8?q?688=20[=E4=BD=8F=E9=99=A2=E5=8F=91=E9=80=80?=
 =?UTF-8?q?=E8=8D=AF-=E5=8F=91=E8=8D=AF=E6=98=8E=E7=BB=86=E5=8D=95]=20?=
 =?UTF-8?q?=E6=82=A3=E8=80=85=E5=88=97=E8=A1=A8=E5=B8=83=E5=B1=80=E6=8C=A4?=
 =?UTF-8?q?=E5=8E=8B=E5=AF=BC=E8=87=B4=E5=86=85=E5=AE=B9=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=8D=E5=85=A8=EF=BC=8C=E4=B8=94=E5=A4=9A=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E7=BB=84=E5=90=88=E6=A3=80=E7=B4=A2=EF=BC=88=E6=82=A3=E8=80=85?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF/=E5=8F=91=E8=8D=AF=E7=8A=B6=E6=80=81/?=
 =?UTF-8?q?=E8=8D=AF=E5=93=81=E5=88=86=E7=B1=BB=EF=BC=89=E5=A4=B1=E6=95=88?=
 =?UTF-8?q?=20=E5=B8=83=E5=B1=80=E6=8C=A4=E5=8E=8B=EF=BC=9A=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E6=82=A3=E8=80=85=E5=88=97=E8=A1=A8=20width:=2025%=20?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E5=AE=B9=E7=BA=B3=20440px=20=E5=88=97?=
 =?UTF-8?q?=E5=AE=BD=EF=BC=8C=E5=B9=B4=E9=BE=84=E5=88=97=E8=A2=AB=E9=81=AE?=
 =?UTF-8?q?=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MedicationDetails.vue          | 447 +++++-------------
 1 file changed, 109 insertions(+), 338 deletions(-)

diff --git a/healthlink-his-ui/src/views/drug/inpatientMedicationDispensing/components/MedicationDetails.vue b/healthlink-his-ui/src/views/drug/inpatientMedicationDispensing/components/MedicationDetails.vue
index 114dad497..122535a59 100755
--- a/healthlink-his-ui/src/views/drug/inpatientMedicationDispensing/components/MedicationDetails.vue
+++ b/healthlink-his-ui/src/views/drug/inpatientMedicationDispensing/components/MedicationDetails.vue
@@ -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>