Fix Bug #568: 修复门诊日结页面排版混乱问题 - 添加固定label宽度、分隔线和统一布局

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

@@ -36,178 +36,158 @@
         <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-item label="科室：" prop="sourceLocationId">
-        <el-select
-          v-model="queryParams.sourceLocationId"
-          placeholder=""
-          clearable
-          style="width: 150px"
-        >
-          <el-option
-            v-for="issueDepartment in issueDepartmentDto"
-            :key="issueDepartment.id"
-            :label="issueDepartment.name"
-            :value="issueDepartment.id"
-          />
-        </el-select>
-      </el-form-item> -->
     </el-form>
 
-    <!-- <el-row :gutter="10" class="mb8">
+    <div v-loading="loading" style="width: 1200px">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Search" @click="getValue">查询</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="CircleClose" @click="handleClear">重置</el-button>
-      </el-col>
-    </el-row> -->
-    <div v-loading="loading">
       <el-row
-        :gutter="20"
+        :gutter="5"
         style="
-          margin: 16px 0;
+          margin: 20px 0;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
+          justify-content: flex-start;
           padding: 0 20px;
         "
       >
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">经办人姓名：</span>
           <span class="value">{{ userStore.nickName }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">科室：</span>
           <span class="value">{{ userStore.orgName }}</span>
         </el-col>
-        <el-col :span="8" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="7">
           <span class="label">时间：</span>
           <span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span>
         </el-col>
       </el-row>
+      <div class="divider"></div>
       <el-row
-        :gutter="20"
+        :gutter="5"
         style="
-          margin: 16px 0;
+          margin: 20px 0;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
+          justify-content: flex-start;
           padding: 0 20px;
         "
       >
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">实际现金收入：</span>
           <span class="value">{{ formatValue(reportValue.cashSum) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">现金：</span>
           <span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">微信：</span>
           <span class="value">{{ formatValue(reportValue.vxCashSum) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">支付宝：</span>
           <span class="value">{{ formatValue(reportValue.aliCashSum) }}</span>
         </el-col>
       </el-row>
+      <div class="divider"></div>
       <el-row
-        :gutter="20"
+        :gutter="5"
         style="
-          margin: 16px 0;
+          margin: 20px 0;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
+          justify-content: flex-start;
           padding: 0 20px;
         "
       >
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">统筹支付：</span>
           <span class="value">{{ formatValue(reportValue.tcSum) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">账户支付：</span>
           <span class="value">{{ formatValue(reportValue.zhSum) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">基金支付总额：</span>
           <span class="value">{{ formatValue(reportValue.fundSum) }}</span>
         </el-col>
       </el-row>
+      <div class="divider"></div>
       <el-row
-        :gutter="20"
+        :gutter="5"
         style="
-          margin: 16px 0;
+          margin: 20px 0;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
+          justify-content: flex-start;
           padding: 0 20px;
         "
       >
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">诊查费：</span>
           <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">检查费：</span>
           <span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">化验费：</span>
           <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">治疗费：</span>
           <span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span>
         </el-col>
       </el-row>
       <el-row
-        :gutter="20"
+        :gutter="5"
         style="
-          margin: 16px 0;
+          margin: 20px 0;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
+          justify-content: flex-start;
           padding: 0 20px;
         "
       >
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">西药费：</span>
           <span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">中药饮片费：</span>
           <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">中成药费：</span>
           <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">卫生材料费：</span>
           <span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span>
         </el-col>
       </el-row>
       <el-row
-        :gutter="20"
+        :gutter="5"
         style="
-          margin: 16px 0;
+          margin: 20px 0;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
+          justify-content: flex-start;
           padding: 0 20px;
         "
       >
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">诊疗费：</span>
           <span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">挂号费：</span>
           <span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span>
         </el-col>
-        <el-col :span="6" style="display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;">
+        <el-col :span="5">
           <span class="label">其他费用：</span>
           <span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span>
         </el-col>
@@ -223,12 +203,11 @@ import {formatDateStr} from '@/utils/index';
 import Decimal from 'decimal.js';
 
 const userStore = useUserStore();
-// import Dialog from "./components/Dialog";
 
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 
-const purchaseinventoryRef = ref(null); // 初始化 ref
+const purchaseinventoryRef = ref(null);
 const purchaseinventoryList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -285,10 +264,6 @@ function getContract() {
 }
 
 function getPharmacyCabinetLists() {
-  // occurrenceTime.value =
-  //   getDepartmentList().then((response) => {
-  //     issueDepartmentDto.value = response.data
-  //   })
 }
 /** 查询调拨管理项目列表 */
 function getList() {
@@ -316,7 +291,6 @@ function handleQuery() {
 
 /** 清空条件按钮操作 */
 function handleClear() {
-  // 清空查询条件
   queryParams.value.approvalTimeSTime = '';
   queryParams.value.approvalTimeETime = '';
   occurrenceTime.value = '';
@@ -333,12 +307,11 @@ function handleSelectionChange(selection) {
 
 /** 打印门诊日结 */
 async function print() {
-  // const selectedRows = proxy.$refs['tableRef'].getSelectionRows();
   console.log(reportValue.value, '==reportValue.value==');
   const result = {
     data: [
       {
-        ...reportValue.value, // 将 reportValue.value 中的所有属性展开到 result 中
+        ...reportValue.value,
         nickName: userStore.nickName,
         orgName: userStore.orgName,
         fixmedinsName: userStore.hospitalName,
@@ -359,14 +332,12 @@ async function print() {
     ],
   };
   console.log(result, '==result.data==');
-  // 将对象转换为 JSON 字符串
   let jsonString = JSON.stringify(result, null, 2);
   console.log(jsonString, 'jsonstring');
   await CefSharp.BindObjectAsync('boundAsync');
   await boundAsync
     .printReport(getPrintFileName(contractNo.value), jsonString)
     .then((response) => {
-      //返回结果是jsonString，可判断其调用是否成功
       console.log(response, 'response');
       var res = JSON.parse(response);
       if (!res.IsSuccess) {
@@ -382,9 +353,9 @@ function getPrintFileName(value) {
   switch (value) {
     case '0000':
       return '门诊日结单(按登录角色查询)自费.grf';
-    case '229900': // 省医保
+    case '229900':
       return '门诊日结单(按登录角色查询)省医保.grf';
-    case '220100': // 市医保
+    case '220100':
       return '门诊日结单(按登录角色查询)市医保.grf';
   }
 }
@@ -408,12 +379,21 @@ getPharmacyCabinetLists();
   margin-bottom: 10px;
 }
 .label {
+  display: inline-block;
+  width: 120px !important;
   color: #606266;
-  white-space: nowrap;
 }
 .value {
+  float: right;
   color: #303133;
   font-weight: 500;
-  white-space: nowrap;
+}
+.el-col {
+  margin-right: 50px;
+}
+.divider {
+  height: 3px;
+  background-color: #000;
+  margin: 20px 0;
 }
 </style>