wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix Bug #568: 修复门诊日结页面排版混乱 - 使用CSS Grid替代el-row布局

Browse Source 
根因：原版使用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>
This commit is contained in:
赵云
2026-05-22 11:08:32 +08:00
parent 2eba125351
commit 23158ecc82
1 changed files with 144 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>