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

style(diagnosis): 优化诊断组件表格样式和功能

Browse Source 
- 添加表格边框样式
- 调整各列宽度以适应内容显示
- 优化表单元素底部间距设置
- 添加超出文本提示功能
- 为输入框和选择框统一设置合适的宽度
- 添加诊断日期字段支持
- 添加长效诊断标识字段
- 添加医生字段显示
- 优化日期格式化处理逻辑
- 修复数据保存时的日期类型转换问题
- 设置默认非长效诊断标识
- 统一表单验证规则的底部间距处理
This commit is contained in:
chenqi
2026-03-11 13:40:42 +08:00
parent cceaf7fb07
commit 664ee0312c
1 changed files with 60 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
openhis-ui-vue3/src/views/doctorstation/components/diagnosis/diagnosis.vue
View File

@@ -73,18 +73,12 @@
</div>
<el-form :model="form" :rules="rules" ref="formRef">
<el-table ref="diagnosisTableRef" :data="form.diagnosisList" height="650">
<el-table ref="diagnosisTableRef" :data="form.diagnosisList" height="650" border>
<el-table-column label="序号" type="index" width="50" />
<el-table-column label="分类" align="center" prop="classification" width="120">
<el-table-column label="分类" align="center" prop="classification" width="100">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.classification`">
<!-- <el-select v-model="scope.row.classification" placeholder=" " style="width: 100px">
<el-option label="西医" value="西医" />
<el-option label="中医" value="中医" />
<el-option label="证型" value="证型" />
<el-option label="其他" value="其他" />
</el-select>-->
<el-select v-model="scope.row.classification" placeholder=" " style="width: 100px">
<el-form-item :prop="`diagnosisList.${scope.$index}.classification`" style="margin-bottom: 0;">
<el-select v-model="scope.row.classification" placeholder=" " style="width: 90px">
<el-option
v-for="item in diagnosis_classification"
:key="item.value"
@@ -95,10 +89,10 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column label="诊断类型" align="center" prop="medTypeCode" width="180">
<el-table-column label="诊断类型" align="center" prop="medTypeCode" width="150">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.medTypeCode`" :rules="rules.medTypeCode">
<el-select v-model="scope.row.medTypeCode" placeholder=" " style="width: 150px">
<el-form-item :prop="`diagnosisList.${scope.$index}.medTypeCode`" :rules="rules.medTypeCode" style="margin-bottom: 0;">
<el-select v-model="scope.row.medTypeCode" placeholder=" " style="width: 130px">
<el-option
v-for="item in diag_type"
:key="item.value"
@@ -109,9 +103,9 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column label="诊断" align="center" prop="name" >
<el-table-column label="诊断" align="center" prop="name" width="180" :show-overflow-tooltip="true">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.name`" :rules="rules.name">
<el-form-item :prop="`diagnosisList.${scope.$index}.name`" :rules="rules.name" style="margin-bottom: 0;">
<el-popover
:popper-style="{ padding: '0' }"
placement="bottom-start"
@@ -127,19 +121,19 @@
</template>
<template #reference>
<el-input v-model="scope.row.name" placeholder="请选择诊断" @input="handleChange"
@focus="handleFocus(scope.row, scope.$index)" @blur="handleBlur(scope.row)" />
@focus="handleFocus(scope.row, scope.$index)" @blur="handleBlur(scope.row)" style="width: 160px" />
</template>
</el-popover>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="主诊断" align="center" prop="maindiseFlag" width="100">
<el-table-column label="主诊断" align="center" prop="maindiseFlag" width="90">
<template #default="scope">
<el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
<el-select
v-model="scope.row.maindiseFlag"
placeholder=" "
style="width: 80px"
style="width: 70px"
@change="(value) => handleMaindise(value, scope.$index)"
>
<el-option label="是" :value="1" />
@@ -148,21 +142,21 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column label="诊断备注" align="center" prop="diagnosisDesc" width="180">
<el-table-column label="诊断备注" align="center" prop="diagnosisDesc" width="150">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisDesc`">
<el-input v-model="scope.row.diagnosisDesc" placeholder="请输入备注" />
<el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisDesc`" style="margin-bottom: 0;">
<el-input v-model="scope.row.diagnosisDesc" placeholder="请输入备注" style="width: 130px" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="ICD代码" align="center" prop="ybNo" width="180" />
<el-table-column label="诊断状态" align="center" prop="verificationStatusEnum" width="120">
<el-table-column label="ICD代码" align="center" prop="ybNo" width="150" />
<el-table-column label="诊断状态" align="center" prop="verificationStatusEnum" width="100">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.verificationStatusEnum`" style="margin-bottom: 0;">
<el-select
v-model="scope.row.verificationStatusEnum"
placeholder=" "
style="width: 100%"
style="width: 90px"
>
<el-option
v-for="item in diagnosisOptions"
@@ -174,22 +168,47 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column label="发病日期" align="center" prop="onsetDate" width="160">
<el-table-column label="发病日期" align="center" prop="onsetDate" width="140">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.onsetDate`">
<el-form-item :prop="`diagnosisList.${scope.$index}.onsetDate`" style="margin-bottom: 0;">
<el-date-picker
v-model="scope.row.onsetDate"
type="date"
placeholder=" "
style="width: 100%"
style="width: 130px"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="诊断日期" align="center" prop="diagnosisTime" width="160">
<el-table-column label="诊断日期" align="center" prop="diagnosisTime" width="140">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisTime`">
<el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisTime`" style="margin-bottom: 0;">
<el-date-picker
v-model="scope.row.diagnosisTime"
type="date"
placeholder=" "
style="width: 130px"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="医生" align="center" prop="diagnosisDoctor" width="100" />
<el-table-column label="长效诊断标识" align="center" prop="longTermFlag" width="110">
<template #default="scope">
<el-form-item :prop="`diagnosisList.${scope.$index}.longTermFlag`" style="margin-bottom: 0;">
<el-select v-model="scope.row.longTermFlag" placeholder=" " style="width: 90px">
<el-option
v-for="item in long_term_flag"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-date-picker
v-model="scope.row.diagnosisTime"
type="date"
@@ -415,7 +434,8 @@ function handleImport() {
classification: '西医', // 导入的慢性病默认为西医
onsetDate: getCurrentDate(),
diagnosisDoctor: props.patientInfo.practitionerName || props.patientInfo.doctorName || props.patientInfo.physicianName || userStore.name,
diagnosisTime: getCurrentDate()
diagnosisTime: getCurrentDate(),
longTermFlag: 0 // 默认非长效诊断
},
});
});
@@ -519,7 +539,8 @@ function handleAddDiagnosis() {
classification: '西医', // 默认为西医
onsetDate: getCurrentDate(),
diagnosisDoctor: props.patientInfo.practitionerName || props.patientInfo.doctorName || props.patientInfo.physicianName || userStore.name,
diagnosisTime: getCurrentDate()
diagnosisTime: getCurrentDate(),
longTermFlag: 0 // 默认非长效诊断
});
// 添加后按排序号排序
@@ -611,14 +632,18 @@ async function handleSaveDiagnosis() {
// 开始加载状态，防止重复提交
saveLoading.value = true;
// 保存前按排序号排序
form.value.diagnosisList.sort((a, b) => (a.diagSrtNo || 0) - (b.diagSrtNo || 0));
// 保存前按排序号排序，并转换日期格式
const diagnosisChildList = form.value.diagnosisList.map(item => ({
...item,
onsetDate: item.onsetDate ? new Date(item.onsetDate) : null,
diagnosisTime: item.diagnosisTime ? new Date(item.diagnosisTime) : null
}));
// 调用保存诊断接口
const res = await saveDiagnosis({
patientId: props.patientInfo.patientId,
encounterId: props.patientInfo.encounterId,
diagnosisChildList: form.value.diagnosisList,
diagnosisChildList: diagnosisChildList,
});
if (res.code === 200) {