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

This commit is contained in:
2026-05-22 10:01:12 +08:00
parent 175a863aa0
commit 7115563ff9

View File

@@ -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">
<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">
<div v-loading="loading" style="width: 1200px">
<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>