385 lines
7.6 KiB
Vue
385 lines
7.6 KiB
Vue
<template>
|
||
<el-dialog
|
||
title="中医诊断"
|
||
v-model="openDiagnosis"
|
||
width="500px"
|
||
append-to-body
|
||
destroy-on-close
|
||
@close="close"
|
||
@open="open"
|
||
>
|
||
<div class="diagnosis-container">
|
||
<div class="select-group">
|
||
<span class="select-label">中医诊断：</span>
|
||
<el-select
|
||
v-model="condition"
|
||
placeholder="请选择中医诊断"
|
||
filterable
|
||
clearable
|
||
style="width: 300px"
|
||
>
|
||
<el-option
|
||
v-for="item in conditionOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="select-group">
|
||
<span class="select-label">中医证候：</span>
|
||
<el-select
|
||
v-model="syndrome"
|
||
placeholder="请选择中医证候"
|
||
filterable
|
||
clearable
|
||
style="width: 300px"
|
||
>
|
||
<el-option
|
||
v-for="item in syndromeOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submit">确 定</el-button>
|
||
<el-button @click="close">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref} from 'vue';
|
||
import {getTcmCondition, getTcmSyndrome} from '@/views/doctorstation/components/api';
|
||
|
||
const condition = ref('');
|
||
const syndrome = ref('');
|
||
const conditionOptions = ref([]);
|
||
const syndromeOptions = ref([]);
|
||
const diagnosisList = ref([]);
|
||
const openDiagnosis = ref(false);
|
||
const emit = defineEmits(['flush']);
|
||
const { proxy } = getCurrentInstance();
|
||
const props = defineProps({
|
||
patientInfo: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
function open() {}
|
||
|
||
function submit() {
|
||
// 提交逻辑
|
||
if (!condition.value || !syndrome.value) {
|
||
proxy.$modal.msgWarning('请选择诊断和证候');
|
||
return; // 确保选择了诊断和证候
|
||
}
|
||
|
||
// 构建诊断数据，调用API保存到服务器
|
||
const diagnosisChildList = [{
|
||
conditionCode: condition.value,
|
||
syndromeCode: syndrome.value,
|
||
}];
|
||
|
||
// 调用API保存到服务器
|
||
saveTcmDiagnosis({
|
||
patientId: props.patientInfo.patientId,
|
||
encounterId: props.patientInfo.encounterId,
|
||
diagnosisChildList: diagnosisChildList,
|
||
}).then((res) => {
|
||
if (res.code === 200) {
|
||
proxy.$modal.msgSuccess('保存成功');
|
||
emit('flush');
|
||
close();
|
||
} else {
|
||
proxy.$modal.msgError(res.msg || '保存失败');
|
||
}
|
||
}).catch((error) => {
|
||
console.error('保存中医诊断失败:', error);
|
||
proxy.$modal.msgError('保存失败，请重试');
|
||
});
|
||
}
|
||
|
||
function openDialog() {
|
||
openDiagnosis.value = true;
|
||
// 获取中医诊断选项
|
||
getTcmCondition().then((res) => {
|
||
conditionOptions.value = res.data.records.map((item) => ({
|
||
value: item.ybNo,
|
||
label: item.name,
|
||
}));
|
||
});
|
||
|
||
// 获取中医证候选项
|
||
getTcmSyndrome().then((res) => {
|
||
syndromeOptions.value = res.data.records.map((item) => ({
|
||
value: item.ybNo,
|
||
label: item.name,
|
||
}));
|
||
});
|
||
}
|
||
|
||
function close() {
|
||
// 关闭逻辑
|
||
condition.value = '';
|
||
syndrome.value = '';
|
||
openDiagnosis.value = false;
|
||
}
|
||
|
||
defineExpose({ openDialog });
|
||
</script>
|
||
|
||
<style scoped>
|
||
.diagnosis-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.select-group {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.select-label {
|
||
width: 100px;
|
||
text-align: right;
|
||
margin-right: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
:deep(.pagination-container .el-pagination) {
|
||
right: 20px !important;
|
||
}
|
||
|
||
.app-container {
|
||
max-width: 1400px;
|
||
margin: 20px auto;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid var(--el-border-color);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.header h1 {
|
||
color: var(--el-color-primary);
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.patient-info {
|
||
background: var(--el-color-primary-light-9);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.patient-info .info-row {
|
||
display: flex;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.patient-info .info-label {
|
||
width: 100px;
|
||
color: var(--el-text-color-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.main-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1.2fr;
|
||
gap: 20px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.disease-section, .syndrome-section, .diagnosis-section {
|
||
border: 1px solid var(--el-border-color);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
background: white;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--el-color-primary);
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--el-border-color);
|
||
}
|
||
|
||
.disease-list {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.disease-item {
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.disease-item:hover {
|
||
background-color: var(--el-color-primary-light-9);
|
||
}
|
||
|
||
.disease-item.active {
|
||
background-color: var(--el-color-primary-light-8);
|
||
border-left: 3px solid var(--el-color-primary);
|
||
}
|
||
|
||
.disease-name {
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.disease-code {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
|
||
.search-box {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.disease-categories {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.category-tag {
|
||
cursor: pointer;
|
||
padding: 5px 12px;
|
||
border-radius: 15px;
|
||
background: var(--el-fill-color-light);
|
||
font-size: 13px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.category-tag.active {
|
||
background: var(--el-color-primary);
|
||
color: white;
|
||
}
|
||
|
||
.relation-container {
|
||
text-align: center;
|
||
padding: 30px 0;
|
||
border: 2px dashed var(--el-border-color);
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
background: var(--el-fill-color-lighter);
|
||
}
|
||
|
||
.relation-icon {
|
||
margin-bottom: 15px;
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
.relation-text {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
|
||
.syndrome-details {
|
||
padding: 15px;
|
||
background: var(--el-color-primary-light-9);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--el-color-primary-light-5);
|
||
}
|
||
|
||
.detail-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.detail-label {
|
||
font-weight: 500;
|
||
color: var(--el-text-color-secondary);
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 15px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--el-border-color);
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
|
||
.diagnosis-history {
|
||
margin-top: 20px;
|
||
border-top: 1px solid var(--el-border-color);
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.history-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 12px;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
|
||
.history-item {
|
||
padding: 12px;
|
||
border-left: 3px solid var(--el-border-color);
|
||
margin-bottom: 10px;
|
||
background: var(--el-fill-color-lighter);
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
|
||
.history-date {
|
||
font-size: 12px;
|
||
color: var(--el-text-color-secondary);
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.history-diagnosis {
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.history-note {
|
||
font-size: 13px;
|
||
color: var(--el-text-color-secondary);
|
||
padding-top: 5px;
|
||
border-top: 1px dashed var(--el-border-color);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.empty-list {
|
||
padding: 20px 0;
|
||
text-align: center;
|
||
}
|
||
</style>
|