style(diagnosis): 优化诊断组件表格样式和功能
- 添加表格边框样式 - 调整各列宽度以适应内容显示 - 优化表单元素底部间距设置 - 添加超出文本提示功能 - 为输入框和选择框统一设置合适的宽度 - 添加诊断日期字段支持 - 添加长效诊断标识字段 - 添加医生字段显示 - 优化日期格式化处理逻辑 - 修复数据保存时的日期类型转换问题 - 设置默认非长效诊断标识 - 统一表单验证规则的底部间距处理
This commit is contained in:
@@ -73,18 +73,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form :model="form" :rules="rules" ref="formRef">
|
<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="序号" 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">
|
<template #default="scope">
|
||||||
<el-form-item :prop="`diagnosisList.${scope.$index}.classification`">
|
<el-form-item :prop="`diagnosisList.${scope.$index}.classification`" style="margin-bottom: 0;">
|
||||||
<!-- <el-select v-model="scope.row.classification" placeholder=" " style="width: 100px">
|
<el-select v-model="scope.row.classification" placeholder=" " style="width: 90px">
|
||||||
<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-option
|
<el-option
|
||||||
v-for="item in diagnosis_classification"
|
v-for="item in diagnosis_classification"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
@@ -95,10 +89,10 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<template #default="scope">
|
||||||
<el-form-item :prop="`diagnosisList.${scope.$index}.medTypeCode`" :rules="rules.medTypeCode">
|
<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: 150px">
|
<el-select v-model="scope.row.medTypeCode" placeholder=" " style="width: 130px">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in diag_type"
|
v-for="item in diag_type"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
@@ -109,9 +103,9 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<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
|
<el-popover
|
||||||
:popper-style="{ padding: '0' }"
|
:popper-style="{ padding: '0' }"
|
||||||
placement="bottom-start"
|
placement="bottom-start"
|
||||||
@@ -127,19 +121,19 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-input v-model="scope.row.name" placeholder="请选择诊断" @input="handleChange"
|
<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>
|
</template>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<template #default="scope">
|
||||||
<el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
|
<el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="scope.row.maindiseFlag"
|
v-model="scope.row.maindiseFlag"
|
||||||
placeholder=" "
|
placeholder=" "
|
||||||
style="width: 80px"
|
style="width: 70px"
|
||||||
@change="(value) => handleMaindise(value, scope.$index)"
|
@change="(value) => handleMaindise(value, scope.$index)"
|
||||||
>
|
>
|
||||||
<el-option label="是" :value="1" />
|
<el-option label="是" :value="1" />
|
||||||
@@ -148,21 +142,21 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<template #default="scope">
|
||||||
<el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisDesc`">
|
<el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisDesc`" style="margin-bottom: 0;">
|
||||||
<el-input v-model="scope.row.diagnosisDesc" placeholder="请输入备注" />
|
<el-input v-model="scope.row.diagnosisDesc" placeholder="请输入备注" style="width: 130px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="ICD代码" align="center" prop="ybNo" width="180" />
|
<el-table-column label="ICD代码" align="center" prop="ybNo" width="150" />
|
||||||
<el-table-column label="诊断状态" align="center" prop="verificationStatusEnum" width="120">
|
<el-table-column label="诊断状态" align="center" prop="verificationStatusEnum" width="100">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-form-item :prop="`diagnosisList.${scope.$index}.verificationStatusEnum`" style="margin-bottom: 0;">
|
<el-form-item :prop="`diagnosisList.${scope.$index}.verificationStatusEnum`" style="margin-bottom: 0;">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="scope.row.verificationStatusEnum"
|
v-model="scope.row.verificationStatusEnum"
|
||||||
placeholder=" "
|
placeholder=" "
|
||||||
style="width: 100%"
|
style="width: 90px"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in diagnosisOptions"
|
v-for="item in diagnosisOptions"
|
||||||
@@ -174,22 +168,47 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<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
|
<el-date-picker
|
||||||
v-model="scope.row.onsetDate"
|
v-model="scope.row.onsetDate"
|
||||||
type="date"
|
type="date"
|
||||||
placeholder=" "
|
placeholder=" "
|
||||||
style="width: 100%"
|
style="width: 130px"
|
||||||
value-format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<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
|
<el-date-picker
|
||||||
v-model="scope.row.diagnosisTime"
|
v-model="scope.row.diagnosisTime"
|
||||||
type="date"
|
type="date"
|
||||||
@@ -405,7 +424,7 @@ function handleImport() {
|
|||||||
res.data.forEach((item, index) => {
|
res.data.forEach((item, index) => {
|
||||||
form.value.diagnosisList.push({
|
form.value.diagnosisList.push({
|
||||||
...item,
|
...item,
|
||||||
...{
|
...{
|
||||||
medTypeCode: DIAG_TYPE.WESTERN_MEDICINE, // 诊断类型：西医诊断 (值：1)
|
medTypeCode: DIAG_TYPE.WESTERN_MEDICINE, // 诊断类型：西医诊断 (值：1)
|
||||||
verificationStatusEnum: 4,
|
verificationStatusEnum: 4,
|
||||||
definitionId: item.id,
|
definitionId: item.id,
|
||||||
@@ -415,7 +434,8 @@ function handleImport() {
|
|||||||
classification: '西医', // 导入的慢性病默认为西医
|
classification: '西医', // 导入的慢性病默认为西医
|
||||||
onsetDate: getCurrentDate(),
|
onsetDate: getCurrentDate(),
|
||||||
diagnosisDoctor: props.patientInfo.practitionerName || props.patientInfo.doctorName || props.patientInfo.physicianName || userStore.name,
|
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: '西医', // 默认为西医
|
classification: '西医', // 默认为西医
|
||||||
onsetDate: getCurrentDate(),
|
onsetDate: getCurrentDate(),
|
||||||
diagnosisDoctor: props.patientInfo.practitionerName || props.patientInfo.doctorName || props.patientInfo.physicianName || userStore.name,
|
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;
|
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({
|
const res = await saveDiagnosis({
|
||||||
patientId: props.patientInfo.patientId,
|
patientId: props.patientInfo.patientId,
|
||||||
encounterId: props.patientInfo.encounterId,
|
encounterId: props.patientInfo.encounterId,
|
||||||
diagnosisChildList: form.value.diagnosisList,
|
diagnosisChildList: diagnosisChildList,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
|
|||||||
Reference in New Issue
Block a user