fix: #568 (codex)

openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <el-form
-      :model="queryParams"
-      ref="queryRef"
-      :inline="true"
       v-show="showSearch"
+      ref="queryRef"
+      :model="queryParams"
+      :inline="true"
       label-width="90px"
     >
       <el-form-item label="查询日期">
@@ -13,9 +13,9 @@
           type="daterange"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          style="width: 300px; margin-right: 20px"
-          @change="getValue"
+          style="width: 300px"
           value-format="YYYY-MM-DD"
+          @change="getValue"
         />
       </el-form-item>
       <el-form-item label="费用性质">
@@ -23,8 +23,8 @@
           v-model="contractNo"
           placeholder="费用性质"
           clearable
+          style="width: 160px"
           @change="getValue"
-          style="width: 160px; margin-right: 20px"
         >
           <el-option
             v-for="item in contractList"
@@ -34,145 +34,170 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" plain icon="Search" @click="getValue" style="margin-right: 10px">查询</el-button>
-        <el-button type="primary" plain icon="Printer" @click="print">打印</el-button>
+      <el-form-item class="search-buttons">
+        <el-button
+          type="primary"
+          plain
+          icon="Search"
+          @click="getValue"
+        >
+          查询
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="Printer"
+          @click="print"
+        >
+          打印
+        </el-button>
       </el-form-item>
     </el-form>
 
-    <div v-loading="loading" class="report-container">
-      <div class="report-title">门诊收费日结单</div>
+    <div
+      v-loading="loading"
+      class="report-container"
+    >
+      <div class="report-title">
+        门诊收费日结单
+      </div>
 
-      <el-row class="info-row" :gutter="10">
-        <el-col :span="4">
+      <div class="info-grid">
+        <div class="info-item">
           <span class="label">经办人姓名：</span>
           <span class="value">{{ userStore.nickName || '全部' }}</span>
-        </el-col>
-        <el-col :span="4">
+        </div>
+        <div class="info-item">
           <span class="label">科室：</span>
           <span class="value">{{ userStore.orgName || '-' }}</span>
-        </el-col>
-        <el-col :span="5">
+        </div>
+        <div class="info-item">
           <span class="label">机构：</span>
           <span class="value">{{ userStore.hospitalName || '-' }}</span>
-        </el-col>
-        <el-col :span="7">
+        </div>
+        <div class="info-item">
           <span class="label">时间：</span>
           <span class="value">{{ queryTime && queryTime.length === 2 ? queryTime[0] + ' ~ ' + queryTime[1] : '-' }}</span>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
 
-      <div class="divider"></div>
+      <el-divider />
 
-      <div class="section-title">收入汇总</div>
-      <el-row class="data-row" :gutter="10">
-        <el-col :span="6">
+      <div class="section-title">
+        收入汇总
+      </div>
+      <div class="data-grid">
+        <div class="data-item">
           <span class="label">总收入：</span>
           <span class="value">{{ formatValue(reportValue.cashSum) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">现金：</span>
           <span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">微信：</span>
           <span class="value">{{ formatValue(reportValue.vxCashSum) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">支付宝：</span>
           <span class="value">{{ formatValue(reportValue.aliCashSum) }}</span>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
 
-      <div class="divider"></div>
+      <el-divider />
 
-      <div class="section-title">医保支付</div>
-      <el-row class="data-row" :gutter="10">
-        <el-col :span="6">
+      <div class="section-title">
+        医保支付
+      </div>
+      <div class="data-grid">
+        <div class="data-item">
           <span class="label">统筹支付：</span>
           <span class="value">{{ formatValue(reportValue.tcSum) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">账户支付：</span>
           <span class="value">{{ formatValue(reportValue.zhSum) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">基金支付总额：</span>
           <span class="value">{{ formatValue(reportValue.fundSum) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">医保统筹+账户：</span>
           <span class="value">{{ formatValue(Number(reportValue.zhSum || 0) + Number(reportValue.fundSum || 0)) }}</span>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
 
-      <div class="divider"></div>
+      <el-divider />
 
-      <div class="section-title">费用明细</div>
-      <el-row class="data-row" :gutter="10">
-        <el-col :span="6">
+      <div class="section-title">
+        费用明细
+      </div>
+      <div class="data-grid">
+        <div class="data-item">
           <span class="label">诊查费：</span>
           <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">检查费：</span>
           <span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">化验费：</span>
           <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">治疗费：</span>
           <span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span>
-        </el-col>
-      </el-row>
-      <el-row class="data-row" :gutter="10">
-        <el-col :span="6">
+        </div>
+      </div>
+      <div class="data-grid">
+        <div class="data-item">
           <span class="label">西药费：</span>
           <span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">中药饮片费：</span>
           <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">中成药费：</span>
           <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">卫生材料费：</span>
           <span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span>
-        </el-col>
-      </el-row>
-      <el-row class="data-row" :gutter="10">
-        <el-col :span="6">
+        </div>
+      </div>
+      <div class="data-grid">
+        <div class="data-item">
           <span class="label">普通挂号费：</span>
           <span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">挂号费：</span>
           <span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">其他费用：</span>
           <span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">退费金额：</span>
           <span class="value">{{ formatValue(reportValue.returnFee) }}</span>
-        </el-col>
-      </el-row>
-      <el-row class="data-row data-row-summary" :gutter="10">
-        <el-col :span="6">
+        </div>
+      </div>
+      <div class="data-grid data-grid-summary">
+        <div class="data-item">
           <span class="label">费用总额：</span>
           <span class="value value-highlight">{{ totalFeeAmount }}</span>
-        </el-col>
-        <el-col :span="6">
+        </div>
+        <div class="data-item">
           <span class="label">医保报销：</span>
           <span class="value value-highlight">{{ insuranceReimbursement }}</span>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -377,9 +402,9 @@ getPharmacyCabinetLists();
 }
 
 .report-container {
-  width: 100%;
-  margin: 16px 0;
-  padding: 20px 24px;
+  max-width: 1200px;
+  margin: 16px auto;
+  padding: 24px;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -389,54 +414,52 @@ getPharmacyCabinetLists();
   text-align: center;
   font-size: 20px;
   font-weight: 600;
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   color: #303133;
 }
 
-.info-row {
-  margin-bottom: 16px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px 24px;
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px 16px;
+  padding: 8px 0;
 }
 
-.info-row .el-col {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
+.data-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px 16px;
+  padding: 6px 0;
 }
 
-.data-row {
-  margin: 8px 0;
+.data-grid-summary {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #e4e7ed;
 }
 
-.data-row .el-col {
+.info-item,
+.data-item {
   display: flex;
-  align-items: center;
-  margin-bottom: 4px;
+  align-items: baseline;
+  line-height: 28px;
 }
 
 .section-title {
   font-size: 15px;
   font-weight: 600;
   color: #409eff;
-  padding: 12px 0 8px 12px;
-  margin: 8px 0;
+  padding: 12px 0 8px 10px;
+  margin: 4px 0 0;
   border-left: 3px solid #409eff;
   background: linear-gradient(90deg, rgba(64, 158, 255, 0.05) 0%, transparent 100%);
 }
 
-.divider {
-  height: 1px;
-  background: linear-gradient(90deg, transparent, #e4e7ed 10%, #e4e7ed 90%, transparent);
-  margin: 12px 0;
-}
-
 .label {
   color: #909399;
   font-size: 13px;
   white-space: nowrap;
-  margin-right: 4px;
+  min-width: 95px;
 }
 
 .value {
@@ -451,14 +474,20 @@ getPharmacyCabinetLists();
   font-size: 15px;
 }
 
-.data-row-summary {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 2px solid #e4e7ed;
+.search-buttons {
+  margin-bottom: 0;
+}
+
+.search-buttons .el-form-item__content {
+  justify-content: flex-start;
+}
+
+:deep(.el-divider--horizontal) {
+  margin: 16px 0;
 }
 
-/* 搜索表单区域样式优化 */
 .el-form--inline .el-form-item {
   margin-bottom: 12px;
+  margin-right: 16px;
 }
 </style>