From 23158ecc8291d7d215403bbeb4b68199ee0fef08 Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Fri, 22 May 2026 11:08:32 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#568:=20=E4=BF=AE=E5=A4=8D=E9=97=A8?=
 =?UTF-8?q?=E8=AF=8A=E6=97=A5=E7=BB=93=E9=A1=B5=E9=9D=A2=E6=8E=92=E7=89=88?=
 =?UTF-8?q?=E6=B7=B7=E4=B9=B1=20-=20=E4=BD=BF=E7=94=A8CSS=20Grid=E6=9B=BF?=
 =?UTF-8?q?=E4=BB=A3el-row=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：原版使用el-row/el-col的:span="5"布局（5×4=20/24），列间距不均匀，
3项行与4项行不对齐，且固定1200px宽度无响应式。

修复方案：
- 使用CSS Grid 4列等宽布局(repeat(4, 1fr))替代el-row/el-col
- 3项行的最后一项使用span-2横跨2列，与4项行对齐
- 添加响应式断点：<=1200px降为2列，<=768px降为1列
- 为label固定120px宽度+右对齐，value使用ellipsis截断

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../views/clinicmanagement/dayEnd/index.vue   | 306 +++++++++---------
 1 file changed, 144 insertions(+), 162 deletions(-)

diff --git a/openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue b/openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue
index e10febe6..cf0d058f 100755
--- a/openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue
+++ b/openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue
@@ -38,140 +38,64 @@
       </el-form-item>
     </el-form>
 
-    <div v-loading="loading" style="width: 1200px">
-      <div style="text-align: center">
-        <h2>门诊收费日结单</h2>
+    <div v-loading="loading" class="report-container">
+      <div class="report-title">门诊收费日结单</div>
+      <div class="report-section">
+        <div class="report-row cols-4">
+          <div class="report-item"><span class="label">经办人姓名：</span><span class="value">{{ userStore.nickName }}</span></div>
+          <div class="report-item"><span class="label">科室：</span><span class="value">{{ userStore.orgName }}</span></div>
+          <div class="report-item span-2"><span class="label">时间：</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></div>
+        </div>
       </div>
-      <div class="section-title">基本信息</div>
-      <el-row
-        :gutter="10"
-        style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
-      >
-        <el-col :span="4">
-          <span class="label">经办人姓名：</span>
-          <span class="value">{{ userStore.nickName }}</span>
-        </el-col>
-        <el-col :span="4">
-          <span class="label">科室：</span>
-          <span class="value">{{ userStore.orgName }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">时间：</span>
-          <span class="value">{{ queryTime[0] + "~" + queryTime[1] }}</span>
-        </el-col>
-      </el-row>
       <div class="divider"></div>
-      <div class="section-title">收费汇总</div>
-      <el-row
-        :gutter="10"
-        style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">实际现金收入：</span>
-          <span class="value">{{ formatValue(reportValue.cashSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">现金：</span>
-          <span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">微信：</span>
-          <span class="value">{{ formatValue(reportValue.vxCashSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">支付宝：</span>
-          <span class="value">{{ formatValue(reportValue.aliCashSum) }}</span>
-        </el-col>
-      </el-row>
+      <div class="report-section">
+        <div class="section-title">收费汇总</div>
+        <div class="report-row cols-4">
+          <div class="report-item"><span class="label">实际现金收入：</span><span class="value">{{ formatValue(reportValue.cashSum) }}</span></div>
+          <div class="report-item"><span class="label">现金：</span><span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span></div>
+          <div class="report-item"><span class="label">微信：</span><span class="value">{{ formatValue(reportValue.vxCashSum) }}</span></div>
+          <div class="report-item"><span class="label">支付宝：</span><span class="value">{{ formatValue(reportValue.aliCashSum) }}</span></div>
+        </div>
+      </div>
       <div class="divider"></div>
-      <div class="section-title">医保支付</div>
-      <el-row
-        :gutter="10"
-        style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">统筹支付：</span>
-          <span class="value">{{ formatValue(reportValue.tcSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">账户支付：</span>
-          <span class="value">{{ formatValue(reportValue.zhSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">基金支付总额：</span>
-          <span class="value">{{ formatValue(reportValue.fundSum) }}</span>
-        </el-col>
-      </el-row>
+      <div class="report-section">
+        <div class="section-title">医保支付</div>
+        <div class="report-row cols-4">
+          <div class="report-item"><span class="label">统筹支付：</span><span class="value">{{ formatValue(reportValue.tcSum) }}</span></div>
+          <div class="report-item"><span class="label">账户支付：</span><span class="value">{{ formatValue(reportValue.zhSum) }}</span></div>
+          <div class="report-item span-2"><span class="label">基金支付总额：</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></div>
+        </div>
+      </div>
       <div class="divider"></div>
-      <div class="section-title">费用明细</div>
-      <el-row
-        :gutter="10"
-        style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">诊查费：</span>
-          <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">检查费：</span>
-          <span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">化验费：</span>
-          <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">治疗费：</span>
-          <span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span>
-        </el-col>
-      </el-row>
-      <el-row
-        :gutter="10"
-        style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">西药费：</span>
-          <span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">中药饮片费：</span>
-          <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">中成药费：</span>
-          <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">卫生材料费：</span>
-          <span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span>
-        </el-col>
-      </el-row>
-      <el-row
-        :gutter="10"
-        style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">诊疗费：</span>
-          <span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">挂号费：</span>
-          <span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">其他费用：</span>
-          <span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span>
-        </el-col>
-      </el-row>
+      <div class="report-section">
+        <div class="section-title">费用明细</div>
+        <div class="report-row cols-4">
+          <div class="report-item"><span class="label">诊查费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span></div>
+          <div class="report-item"><span class="label">检查费：</span><span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span></div>
+          <div class="report-item"><span class="label">化验费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span></div>
+          <div class="report-item"><span class="label">治疗费：</span><span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span></div>
+        </div>
+        <div class="report-row cols-4">
+          <div class="report-item"><span class="label">西药费：</span><span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span></div>
+          <div class="report-item"><span class="label">中药饮片费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span></div>
+          <div class="report-item"><span class="label">中成药费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span></div>
+          <div class="report-item"><span class="label">卫生材料费：</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></div>
+        </div>
+        <div class="report-row cols-4">
+          <div class="report-item"><span class="label">诊疗费：</span><span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span></div>
+          <div class="report-item"><span class="label">挂号费：</span><span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span></div>
+          <div class="report-item span-2"><span class="label">其他费用：</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup name="dayEnd">
-import {getContractList, getRreportReturnIssue, getTotal} from "./component/api";
-import useUserStore from "@/store/modules/user";
-import {formatDateStr} from "@/utils/index";
-import Decimal from "decimal.js";
+import {getContractList, getRreportReturnIssue, getTotal} from './component/api';
+import useUserStore from '@/store/modules/user';
+import {formatDateStr} from '@/utils/index';
+import Decimal from 'decimal.js';
 
 const userStore = useUserStore();
 
@@ -187,14 +111,14 @@ const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const title = ref("");
+const title = ref('');
 const contractList = ref(undefined);
 const reportValue = ref({});
 const queryTime = ref([
-  formatDateStr(new Date(), "YYYY-MM-DD"),
-  formatDateStr(new Date(), "YYYY-MM-DD"),
+  formatDateStr(new Date(), 'YYYY-MM-DD'),
+  formatDateStr(new Date(), 'YYYY-MM-DD'),
 ]);
-const contractNo = ref("0000");
+const contractNo = ref('0000');
 
 const data = reactive({
   queryParams: {
@@ -218,8 +142,8 @@ function getValue() {
   loading.value = true;
   getTotal({
     contractNo: contractNo.value,
-    startTime: queryTime.value[0] + " 00:00:00",
-    endTime: queryTime.value[1] + " 23:59:59",
+    startTime: queryTime.value[0] + ' 00:00:00',
+    endTime: queryTime.value[1] + ' 23:59:59',
     entererId: userStore.practitionerId,
   }).then((res) => {
     loading.value = false;
@@ -250,22 +174,22 @@ function getList() {
 function handleQuery() {
   queryParams.value.approvalTimeSTime =
     occurrenceTime.value && occurrenceTime.value.length == 2
-      ? occurrenceTime.value[0] + " 00:00:00"
-      : "";
+      ? occurrenceTime.value[0] + ' 00:00:00'
+      : '';
   queryParams.value.approvalTimeETime =
     occurrenceTime.value && occurrenceTime.value.length == 2
-      ? occurrenceTime.value[1] + " 23:59:59"
-      : "";
+      ? occurrenceTime.value[1] + ' 23:59:59'
+      : '';
   queryParams.value.pageNo = 1;
   getList();
 }
 
 /** 清空条件按钮操作 */
 function handleClear() {
-  queryParams.value.approvalTimeSTime = "";
-  queryParams.value.approvalTimeETime = "";
-  occurrenceTime.value = "";
-  proxy.resetForm("queryRef");
+  queryParams.value.approvalTimeSTime = '';
+  queryParams.value.approvalTimeETime = '';
+  occurrenceTime.value = '';
+  proxy.resetForm('queryRef');
   getList();
 }
 
@@ -278,7 +202,7 @@ function handleSelectionChange(selection) {
 
 /** 打印门诊日结 */
 async function print() {
-  console.log(reportValue.value, "==reportValue.value==");
+  console.log(reportValue.value, '==reportValue.value==');
   const result = {
     data: [
       {
@@ -286,7 +210,7 @@ async function print() {
         nickName: userStore.nickName,
         orgName: userStore.orgName,
         fixmedinsName: userStore.hospitalName,
-        queryTime: queryTime.value[0] + "~" + queryTime.value[1],
+        queryTime: queryTime.value[0] + '~' + queryTime.value[1],
         zfAmount: new Decimal(reportValue.value.zhSum || 0).add(reportValue.value.fundSum || 0),
         feeAmount: new Decimal(reportValue.value.DIAGNOSTIC_FEE || 0)
           .add(reportValue.value.CHECK_FEE || 0)
@@ -302,43 +226,59 @@ async function print() {
       },
     ],
   };
-  console.log(result, "==result.data==");
+  console.log(result, '==result.data==');
   let jsonString = JSON.stringify(result, null, 2);
-  console.log(jsonString, "jsonstring");
-  await CefSharp.BindObjectAsync("boundAsync");
+  console.log(jsonString, 'jsonstring');
+  await CefSharp.BindObjectAsync('boundAsync');
   await boundAsync
     .printReport(getPrintFileName(contractNo.value), jsonString)
     .then((response) => {
-      console.log(response, "response");
+      console.log(response, 'response');
       var res = JSON.parse(response);
       if (!res.IsSuccess) {
-        proxy.$modal.msgError("调用打印插件失败:" + res.ErrorMessage);
+        proxy.$modal.msgError('调用打印插件失败:' + res.ErrorMessage);
       }
     })
     .catch((error) => {
-      proxy.$modal.msgError("调用打印插件失败:" + error);
+      proxy.$modal.msgError('调用打印插件失败:' + error);
     });
 }
 
 function getPrintFileName(value) {
   switch (value) {
-    case "0000":
-      return "门诊日结单(按登录角色查询)自费.grf";
-    case "229900":
-      return "门诊日结单(按登录角色查询)省医保.grf";
-    case "220100":
-      return "门诊日结单(按登录角色查询)市医保.grf";
+    case '0000':
+      return '门诊日结单(按登录角色查询)自费.grf';
+    case '229900':
+      return '门诊日结单(按登录角色查询)省医保.grf';
+    case '220100':
+      return '门诊日结单(按登录角色查询)市医保.grf';
   }
 }
 
 function formatValue(value) {
-  return value == null || value == undefined ? "0.00 元" : value.toFixed(2) + " 元";
+  return value == null || value == undefined ? '0.00 元' : value.toFixed(2) + ' 元';
 }
 
 getList();
 getPharmacyCabinetLists();
 </script>
 <style scoped>
+.report-container {
+  max-width: 1200px;
+  padding: 24px 32px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+.report-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 16px 0;
+}
+.report-section {
+  margin: 8px 0;
+}
 .section-title {
   font-size: 15px;
   font-weight: bold;
@@ -347,19 +287,61 @@ getPharmacyCabinetLists();
   padding-left: 8px;
   border-left: 3px solid #409eff;
 }
+.report-row {
+  display: grid;
+  margin: 12px 0;
+  gap: 8px 16px;
+}
+.cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.span-2 {
+  grid-column: span 2;
+}
+.report-item {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+}
 .label {
   display: inline-block;
-  width: 120px !important;
+  width: 120px;
+  flex-shrink: 0;
+  color: #606266;
+  white-space: nowrap;
+  text-align: right;
 }
 .value {
-  float: right;
-}
-.el-col {
-  margin-right: 50px;
+  color: #303133;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .divider {
-  height: 3px;
-  background-color: #000;
-  margin: 20px 0;
+  height: 1px;
+  background-color: #dcdfe6;
+  margin: 12px 0;
+}
+@media screen and (max-width: 1200px) {
+  .cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .span-2 {
+    grid-column: span 1;
+  }
+}
+@media screen and (max-width: 768px) {
+  .cols-4 {
+    grid-template-columns: 1fr;
+  }
+  .span-2 {
+    grid-column: span 1;
+  }
+  .label {
+    width: 100px;
+  }
 }
 </style>