666 [门诊-发药管理] 药品已完成收费但“门诊发药”模块无法检索到患者信息,导致无法实现发药逻辑

【门诊发药 - westernmedicine/index.vue】
  - 修复 vxe-table v4 @cell-click 事件包装问题:handleCurrentChange
    参数从 row 改为 params.row || params,解决 encounterId 始终为
    undefined 导致切换患者时右侧数据不变的 bug
  - 添加竞态保护:getMedicineList 中比对 currentRow.encounterId 与
    requestedEncounterId,防止快速切换患者时旧请求覆盖新数据
  - 切换患者时立即清空 medicineInfoList/medicineTotalPrice,避免
    闪现上一患者内容
  - 三个数据加载分支统一添加 .catch() + .finally() 确保 loading
    状态正确关闭
This commit is contained in:
wangjian963
2026-06-24 16:43:56 +08:00
parent 2ba26594e3
commit 0a4e5b93db
3 changed files with 360 additions and 260 deletions

View File

@@ -124,7 +124,7 @@
ii.reception_time,
ii.start_time,
ii.status_enum
ORDER BY ii.reception_time,
ORDER BY ii.reception_time DESC,
ii.start_time DESC
</select>
<select id="selectMedicineDispenseOrderPage" resultMap="medicineDispenseOrderMap">

View File

@@ -1,123 +1,169 @@
<template>
<div
<el-container
v-loading="readCardLoading"
style="display: flex; justify-content: space-between"
class="app-container"
:element-loading-text="loadingText"
>
<el-card style="width: 30%">
<template #header>
<span style="vertical-align: middle">患者列表</span>
</template>
<div style="width: 100%">
<el-input
v-model="queryParams.searchKey"
placeholder="请输入患者名/病历号"
clearable
style="width: 48%; margin-bottom: 10px; margin-right: 10px"
@keyup.enter="getPatientList"
>
<template #append>
<el-button
icon="Search"
@click="getPatientList"
/>
</template>
</el-input>
<el-select
v-model="queryParams.statusEnum"
style="width: 48%; margin-bottom: 10px; margin-right: 10px"
placeholder="收费状态"
@change="getPatientList"
>
<el-option
v-for="item in chargeStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<div style="width: 100%">
<el-date-picker
v-model="receptionTime"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
placement="bottom"
value-format="YYYY-MM-DD"
style="width: 84%; margin-bottom: 10px; margin-right: 10px"
@change="getPatientList"
/>
<el-button
type="primary"
style="margin-bottom: 10px"
@click="getPatientList"
>
搜索
</el-button>
</div>
<el-aside width="30%" style="min-width: 280px">
<el-card>
<template #header>
<el-row justify="space-between" align="middle">
<span style="font-weight: 600">患者列表</span>
<span style="font-size: 12px; color: #909399">
{{ patientList.length }}
</span>
</el-row>
</template>
<!-- 检索区域 -->
<el-form>
<el-row style="margin-bottom: 8px">
<el-col :span="24">
<el-input
v-model="queryParams.searchKey"
placeholder="患者名 / 病历号"
clearable
@keyup.enter="getPatientList"
>
<template #append>
<el-button icon="Search" @click="getPatientList" />
</template>
</el-input>
</el-col>
</el-row>
<el-row :gutter="8" style="margin-bottom: 8px">
<el-col :span="10">
<el-select
v-model="queryParams.statusEnum"
style="width: 100%"
placeholder="收费状态"
clearable
@change="getPatientList"
>
<el-option
v-for="item in chargeStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="14">
<el-date-picker
v-model="receptionTime"
type="daterange"
range-separator="~"
start-placeholder="开始"
end-placeholder="结束"
placement="bottom"
value-format="YYYY-MM-DD"
style="width: 100%"
@change="getPatientList"
/>
</el-col>
</el-row>
<el-row :gutter="8" style="margin-bottom: 8px">
<el-col :span="12">
<el-button type="primary" style="width: 100%" @click="getPatientList">
<el-icon><Search /></el-icon>
搜索
</el-button>
</el-col>
<el-col :span="12">
<el-button style="width: 100%" @click="resetQuery">
<el-icon><Refresh /></el-icon>
重置
</el-button>
</el-col>
</el-row>
</el-form>
<!-- 患者列表表格 -->
<vxe-table
ref="patientListRef"
height="620"
:height="tableHeight"
:data="patientList"
:row-config="{ keyField: 'encounterId' }"
:row-config="{ keyField: 'encounterId', isCurrent: true }"
:radio-config="{ trigger: 'row' }"
highlight-current-row
@cell-click="clickRow"
>
<vxe-column
title="病历号"
align="center"
field="encounterBusNo"
width="100"
/>
<vxe-column
title="姓名"
align="center"
field="patientName"
width="70"
/>
<!-- <vxe-column title="时间" align="center" field="receptionTime" width="160">
<vxe-column
title="就诊时间"
align="center"
field="receptionTime"
width="140"
>
<template #default="scope">
{{ formatDate(scope.row.receptionTime) }}
{{ formatDateStr(scope.row.receptionTime, 'MM-DD HH:mm') }}
</template>
</vxe-column> -->
</vxe-column>
<vxe-column
title="收费状态"
align="center"
field="statusEnum_enumText"
/>
min-width="80"
>
<template #default="scope">
<el-tag
:type="scope.row.statusEnum === 1 ? '' : scope.row.statusEnum === 5 ? 'success' : scope.row.statusEnum === 8 ? 'danger' : 'warning'"
size="small"
disable-transitions
>
{{ scope.row.statusEnum_enumText }}
</el-tag>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
<div style="width: 69%">
<el-card style="margin-bottom: 20px">
</el-card>
</el-aside>
<el-main style="margin-left: 16px">
<el-card style="margin-bottom: 16px">
<template #header>
<span style="vertical-align: middle">基本信息</span>
<span style="font-weight: 600">基本信息</span>
</template>
<el-descriptions :column="5">
<el-descriptions-item label="姓名:">
{{ patientInfo.patientName }}
<el-descriptions :column="5" border size="small">
<el-descriptions-item label="姓名" min-width="80">
{{ patientInfo.patientName || '-' }}
</el-descriptions-item>
<el-descriptions-item label="性别:">
{{ patientInfo.genderEnum_enumText }}
<el-descriptions-item label="性别" min-width="60">
{{ patientInfo.genderEnum_enumText || '-' }}
</el-descriptions-item>
<el-descriptions-item label="年龄:">
{{ patientInfo.age }}
<el-descriptions-item label="年龄" min-width="50">
{{ patientInfo.age || '-' }}
</el-descriptions-item>
<el-descriptions-item label="科室:">
{{ patientInfo.organizationName }}
<el-descriptions-item label="科室" min-width="100">
{{ patientInfo.organizationName || '-' }}
</el-descriptions-item>
<el-descriptions-item label="就诊时间:">
{{ formatDateStr(patientInfo.receptionTime, 'YYYY-MM-DD HH:mm:ss') }}
<el-descriptions-item label="就诊时间" min-width="140">
{{ formatDateStr(patientInfo.receptionTime, 'YYYY-MM-DD HH:mm:ss') || '-' }}
</el-descriptions-item>
<!-- <el-descriptions-item label="身份证号:">{{ patientInfo.idCard }}</el-descriptions-item> -->
<!-- <el-descriptions-item label="手机号">{{ patientInfo.name }}</el-descriptions-item>
<el-descriptions-item label="出生日期">{{ patientInfo.name }}</el-descriptions-item> -->
</el-descriptions>
</el-card>
<el-card style="min-width: 1100px">
<el-card>
<template #header>
<span style="vertical-align: middle">收费项目</span>
<el-row justify="space-between" align="middle">
<span style="font-weight: 600">收费项目</span>
<span style="font-size: 15px; color: #e6a23c">
合计金额
<strong style="font-size: 18px">
¥{{ totalAmounts ? totalAmounts.toFixed(2) : '0.00' }}
</strong>
</span>
</el-row>
</template>
<div style="margin-bottom: 10px">
<!-- 操作按钮区 -->
<el-row align="middle" style="margin-bottom: 12px; flex-wrap: wrap">
<el-button
type="primary"
:disabled="buttonDisabled"
@@ -125,71 +171,69 @@
>
确认收费
</el-button>
<el-divider direction="vertical" />
<el-button-group>
<el-button
type="primary"
plain
@click="handleReadCard('01')"
>
电子凭证
</el-button>
<el-button
type="primary"
plain
:disabled="true"
@click="handleReadCard('02')"
>
身份证
</el-button>
<el-button
type="primary"
plain
@click="handleReadCard('03')"
>
医保卡
</el-button>
</el-button-group>
<el-divider direction="vertical" />
<el-button
type="primary"
type="warning"
plain
style="width: 65px"
@click="handleReadCard('01')"
>
电子凭证
</el-button>
<el-button
type="primary"
plain
style="width: 65px"
:disabled="true"
@click="handleReadCard('02')"
>
身份证
</el-button>
<el-button
type="primary"
plain
style="width: 65px"
@click="handleReadCard('03')"
>
医保卡
</el-button>
<el-button
type="primary"
style="margin-left: 20px"
:disabled="buttonDisabled"
@click="payToSelt()"
>
医保转自费
</el-button>
<el-button
type="primary"
style="margin-left: 20px"
type="success"
plain
:disabled="buttonDisabled"
@click="patToMedicalInsurance()"
>
自费转医保
</el-button>
<el-button
type="primary"
style="margin-left: 20px"
type="warning"
plain
:disabled="buttonDisabled"
@click="studentPayTosStudentSelf()"
>
学生医保转学生自费
</el-button>
<el-button
type="primary"
style="margin-left: 20px"
type="success"
plain
:disabled="buttonDisabled"
@click="studentSelfToStudentPay()"
>
学生自费转学生医保
</el-button>
</div>
<div style="text-align: right; padding-right: 20px; margin-bottom: 10px;">
<span style="font-weight: bold; font-size: 14px;">合计金额{{ totalAmounts ? totalAmounts.toFixed(2) : 0 }}</span>
</div>
</el-row>
<vxe-table
ref="chargeListRef"
v-loading="chargeLoading"
height="530"
:height="tableHeight"
:data="chargeList"
:span-method="objectSpanMethod"
border
@@ -304,7 +348,7 @@
</vxe-column>
</vxe-table>
</el-card>
</div>
</el-main>
<ChargeDialog
ref="chargeDialogRef"
@@ -324,7 +368,7 @@
@close="handleClose"
@refresh="getPatientList"
/>
</div>
</el-container>
</template>
<script setup name="ClinicCharge">
@@ -340,6 +384,7 @@ import {
precharge,
} from './components/api';
import {invokeYbPlugin5000, invokeYbPlugin5001} from '@/api/public';
import { Search, Refresh } from '@element-plus/icons-vue';
import ChargeDialog from './components/chargeDialog.vue';
import {formatDateStr} from '@/utils';
import useUserStore from '@/store/modules/user';
@@ -378,6 +423,21 @@ const buttonDisabled = computed(() => {
});
const chargedItems = ref([]);
// 动态计算患者列表表格高度(减去检索区域大概高度)
const tableHeight = ref(window.innerHeight - 420);
function onWindowResize() {
tableHeight.value = window.innerHeight - 420;
}
onMounted(() => {
window.addEventListener('resize', onWindowResize);
});
onUnmounted(() => {
window.removeEventListener('resize', onWindowResize);
});
watch(
() => selectedRows.value,
(newVlaue) => {
@@ -433,6 +493,17 @@ function getPatientList() {
});
}
/** 重置查询条件 */
function resetQuery() {
queryParams.value.searchKey = undefined;
queryParams.value.statusEnum = 1;
receptionTime.value = [
formatDateStr(new Date(), 'YYYY-MM-DD'),
formatDateStr(new Date(), 'YYYY-MM-DD'),
];
getPatientList();
}
function initOption() {
init().then((res) => {
chargeStatusOptions.value = res.data.chargeItemStatusOptions;
@@ -485,7 +556,7 @@ function handleClose(value, msg) {
const consumablesIdList = ref([]);
// 确认收费
function confirmCharge() {
let selectRows = chargeListRef.value.getSelectionRows();
let selectRows = chargeListRef.value.getCheckboxRecords();
if (selectRows.length == 0) {
proxy.$modal.msgWarning('请选择一条收费项目');
return;
@@ -649,7 +720,7 @@ async function handleReadCard(value) {
}
readCardLoading.value = false;
if (userMessage.certNo) {
let selectRows = chargeListRef.value.getSelectionRows();
let selectRows = chargeListRef.value.getCheckboxRecords();
if (selectRows.length == 0) {
proxy.$modal.msgWarning('请选择一条收费项目');
return;
@@ -838,4 +909,14 @@ function printCharge(row) {
:deep(.vxe-table--body) tr:hover td.no-hover-column {
background-color: inherit !important;
}
/* 覆盖 el-main 默认 padding */
:deep(.el-main) {
padding: 0;
}
/* 覆盖 el-aside 默认 overflow */
:deep(.el-aside) {
overflow: visible;
}
</style>

View File

@@ -1,6 +1,9 @@
<template>
<div class="app-container">
<div class="left">
<el-card class="left" shadow="hover">
<template #header>
<span style="font-weight: 600">患者列表</span>
</template>
<div class="form">
<el-form
v-show="showSearch"
@@ -52,22 +55,6 @@
@change="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="科室" prop="departmentId">
<el-select
v-model="queryParams.departmentId"
placeholder="请选择科室"
clearable
style="width: 160px"
@change="handleQuery"
>
<el-option
v-for="item in departmentList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item> -->
<el-form-item style="margin-left: 15px">
<el-button
type="primary"
@@ -82,103 +69,70 @@
</el-form>
</div>
<vxe-table
:row-config="{ isCurrent: true }"
:data="patientList"
border
style="width: 100%; flex: 1; min-height: 0"
@cell-click="handleCurrentChange"
>
<vxe-column
field="patientName"
title="姓名"
width="130"
align="center"
/>
<vxe-column
field="genderEnum_enumText"
title="性别"
width="80"
align="center"
/>
<vxe-column
field="age"
title="年龄"
width="80"
align="center"
/>
<vxe-column
field="phone"
title="电话"
width="80"
align="center"
/>
<vxe-column
field="receptionTime"
title="就诊日期"
align="center"
<div class="table-wrapper">
<vxe-table
:row-config="{ isCurrent: true, keyField: 'encounterId' }"
:data="patientList"
border
highlight-current-row
:auto-resize="true"
@cell-click="handleCurrentChange"
>
<template #default="scope">
{{ scope.row.receptionTime ? formatDate(scope.row.receptionTime) : "-" }}
</template>
</vxe-column>
</vxe-table>
<pagination
v-show="total > 0"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</div>
<div class="right">
<!-- <div class="select_wrapper_div">
<p style="margin-right: 60px; font-size: 19px">患者基本信息</p> -->
<!-- <el-button type="success" plain @click="print" icon="Printer" style="margin-left: 30px;">打印</el-button> -->
<!-- </div> -->
<div class="top">
<!-- <el-descriptions :column="4" title="患者基本信息">
<el-descriptions-item label="姓名:">{{ personInfo.patientName }}</el-descriptions-item>
<el-descriptions-item label="性别:">
{{ personInfo.genderEnum_enumText }}
</el-descriptions-item>
<el-descriptions-item label="年龄:">{{ personInfo.age }}</el-descriptions-item>
<el-descriptions-item label="合同类型:">
{{ personInfo.categoryEnum_enumText }}
</el-descriptions-item>
<el-descriptions-item label="就诊科室:">
{{ personInfo.organizationName }}
</el-descriptions-item>
<el-descriptions-item label="就诊日期:">
{{ personInfo.encounterDate }}
</el-descriptions-item>
<el-descriptions-item label="证件号:">{{ personInfo.idCard }}</el-descriptions-item>
<el-descriptions-item label="总金额:">
{{ personInfo.totalPrice ? personInfo.totalPrice.toFixed(2) : '0.00' }}
</el-descriptions-item>
</el-descriptions> -->
<!-- <el-row>
<el-col :span="4">姓名{{ personInfo.patientName }}</el-col>
<el-col :span="3">性别{{ personInfo.genderEnum_enumText }}</el-col>
<el-col :span="3">年龄{{ personInfo.age }}</el-col>
<el-col :span="5">合同类型{{ personInfo.categoryEnum_enumText }}</el-col> </el-row
><br />
<el-row>
<el-col :span="5">就诊科室{{ personInfo.organizationName }}</el-col>
<el-col :span="5">就诊日期{{ personInfo.encounterDate }}</el-col>
<el-col :span="7">证件号{{ personInfo.idCard }}</el-col>
</el-row
><br />
<el-row>
<el-col :span="4"
>总金额{{
personInfo.totalPrice ? personInfo.totalPrice.toFixed(2) : '0.00'
}}</el-col
<vxe-column
field="patientName"
title="姓名"
min-width="55"
align="center"
/>
<vxe-column
field="genderEnum_enumText"
title="性别"
width="56"
align="center"
/>
<vxe-column
field="age"
title="年龄"
width="56"
align="center"
/>
<vxe-column
field="phone"
title="电话"
min-width="55"
align="center"
/>
<vxe-column
field="receptionTime"
title="就诊日期"
min-width="100"
align="center"
>
</el-row> -->
<template #default="scope">
{{ scope.row.receptionTime ? formatDate(scope.row.receptionTime) : "-" }}
</template>
</vxe-column>
</vxe-table>
<pagination
v-show="total > 0"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</div>
</el-card>
<el-card class="right" shadow="hover">
<template #header>
<el-row justify="space-between" align="middle">
<span style="font-weight: 600">发药明细</span>
<span style="font-size: 14px; color: #e6a23c">
总金额<strong>¥{{ medicineTotalPrice ? medicineTotalPrice.toFixed(2) : '0.00' }}</strong>
</span>
</el-row>
</template>
<div class="top">
<span
style="color: #606266; font-size: 14px; font-weight: 700; margin-right: 15px"
>
@@ -274,16 +228,13 @@
>
处方打印
</el-button>
<div style="position: absolute; top: 30px; right: 25px">
总金额{{ medicineTotalPrice ? medicineTotalPrice.toFixed(2) : "0.00" }}
</div>
</div>
<vxe-table
ref="tableRef"
v-loading="loading"
:data="medicineInfoList"
border
style="width: 100%; flex: 1; min-height: 0; margin-top: 10px"
:auto-resize="true"
:span-method="spanMethod"
:cell-class-name="cellClassName"
@select="handleSelectionChange"
@@ -549,7 +500,8 @@
header-align="center"
/> -->
</vxe-table>
</div>
</el-card>
<el-dialog
v-model="showDialog"
title="选择作废原因"
@@ -722,12 +674,16 @@ function getList() {
queryParams.value.receptionTimeETime = dateRange.value[1] + ' 23:59:59';
if (projectTypeCode.value == 2) {
listPatient(queryParams.value).then((response) => {
patientList.value = response.data.records;
patientList.value = (response.data.records || []).sort((a, b) => {
return new Date(b.receptionTime) - new Date(a.receptionTime);
});
total.value = response.data.total;
});
} else if (projectTypeCode.value == 3) {
devicePatientList(queryParams.value).then((response) => {
patientList.value = response.data.records;
patientList.value = (response.data.records || []).sort((a, b) => {
return new Date(b.receptionTime) - new Date(a.receptionTime);
});
total.value = response.data.total;
});
} else {
@@ -742,6 +698,10 @@ function getList() {
(item, index, self) =>
index === self.findIndex((record) => record.encounterId === item.encounterId)
);
// 按就诊时间倒序
uniqueRecords.sort((a, b) => {
return new Date(b.receptionTime) - new Date(a.receptionTime);
});
patientList.value = uniqueRecords;
// 合并总数量(如果需要精确数量,可能需要后端支持)
total.value = uniqueRecords.length;
@@ -1069,11 +1029,14 @@ function tagType(statusEnum) {
}
}
function handleCurrentChange(row) {
function handleCurrentChange(params) {
// vxe-table v4 cell-click 事件传递 { row, column, ... } 包装对象
const row = params.row || params;
loading.value = true;
// 切换患者时先清空旧数据,避免显示上一个患者的内容
medicineInfoList.value = [];
medicineTotalPrice.value = 0;
currentRow.value = row; // 更新当前选中行的数据
currentRow.value.statusEnum = undefined;
currentRow.value.dispenseStatus = queryParams.value.statusEnum;
getAdjustPriceSwitchState().then((res) => {
adjustPriceSwitchState.value = res.data;
if (adjustPriceSwitchState.value) {
@@ -1081,6 +1044,8 @@ function handleCurrentChange(row) {
.then((res) => {
if (res.code == 200) {
getMedicineList(row.encounterId);
} else {
loading.value = false;
}
})
.catch(() => {
@@ -1089,11 +1054,14 @@ function handleCurrentChange(row) {
} else {
getMedicineList(row.encounterId);
}
}).catch(() => {
loading.value = false;
});
}
function getMedicineList(encounterId) {
// 根据projectTypeCode的值决定调用哪些接口
const requestedEncounterId = encounterId; // 记录本次请求的encounterId防止竞态
if (projectTypeCode.value == 1) {
// 同时调用两个接口并将数据合并显示
Promise.all([
@@ -1126,11 +1094,16 @@ function getMedicineList(encounterId) {
medicineInfoList.value = [...westernData, ...reportData];
// 处理合并后的数据
processMedicineListData();
loading.value = false;
// 竞态保护:仅当当前选中患者未变化时才更新数据
if (currentRow.value && currentRow.value.encounterId === requestedEncounterId) {
processMedicineListData();
}
})
.catch((error) => {
proxy.$modal.msgError('获取数据失败');
.catch(() => {
proxy.$modal.msgError('获取发药明细失败');
})
.finally(() => {
loading.value = false;
});
} else if (projectTypeCode.value == 2) {
// 只调用listWesternmedicine接口
@@ -1146,8 +1119,13 @@ function getMedicineList(encounterId) {
? response.data.records
: [response.data.records];
// 处理数据
processMedicineListData();
// 🔧 竞态保护:仅当当前选中患者未变化时才更新数据
if (currentRow.value && currentRow.value.encounterId === requestedEncounterId) {
processMedicineListData();
}
}).catch(() => {
proxy.$modal.msgError('获取发药明细失败');
}).finally(() => {
loading.value = false;
});
} else if (projectTypeCode.value == 3) {
@@ -1161,8 +1139,13 @@ function getMedicineList(encounterId) {
? response.data.records
: [response.data.records];
// 处理数据
processMedicineListData();
// 🔧 竞态保护
if (currentRow.value && currentRow.value.encounterId === requestedEncounterId) {
processMedicineListData();
}
}).catch(() => {
proxy.$modal.msgError('获取耗材明细失败');
}).finally(() => {
loading.value = false;
});
}
@@ -1486,32 +1469,64 @@ function validate() {
padding: 20px;
display: flex;
height: calc(100vh - 84px);
min-width: 1024px;
overflow: hidden;
}
.left {
width: 25%;
min-width: 0;
width: 35%;
min-width: 420px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
overflow: auto;
:deep(.el-card__body) {
flex: 1;
display: flex;
flex-direction: column;
}
.form {
width: 100%;
display: flex;
justify-content: space-between;
flex-shrink: 0;
flex-wrap: wrap;
gap: 8px;
}
.table-wrapper {
display: flex;
flex-direction: column;
}
}
.right {
margin-left: 12px;
flex: 1;
min-width: 0;
overflow: auto;
display: flex;
flex-direction: column;
overflow: hidden;
:deep(.el-card__body) {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.top {
flex-shrink: 0;
margin-bottom: 10px;
padding: 5px 0;
position: relative;
}
.vxe-table {
flex: 1;
min-height: 0;
}
}
/* 表格文字颜色改为纯黑色 */
@@ -1602,4 +1617,8 @@ function validate() {
:deep(.vxe-table--border th.gutter:last-of-type) {
border-color: #dddde0;
}
:deep(.vxe-header--column .vxe-cell) {
white-space: nowrap;
}
</style>