版本更新
This commit is contained in:
Zhang.WH
@@ -0,0 +1,383 @@
|
||||
<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, saveTcmDiagnosis } 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; // 确保选择了诊断和证候
|
||||
}
|
||||
|
||||
// 构建诊断对象
|
||||
const diagnosis = {
|
||||
id: Date.now(), // 使用时间戳作为唯一ID
|
||||
condition: conditionOptions.value.find((item) => item.value === condition.value)?.label || '',
|
||||
conditionCode: condition.value,
|
||||
syndrome: syndromeOptions.value.find((item) => item.value === syndrome.value)?.label || '',
|
||||
syndromeCode: syndrome.value,
|
||||
};
|
||||
const data = localStorage.getItem(`tcmDiagnosisList_${props.patientInfo.encounterId}`);
|
||||
diagnosisList.value = JSON.parse(data);
|
||||
// 添加到列表
|
||||
diagnosisList.value.push(diagnosis);
|
||||
localStorage.removeItem(`tcmDiagnosisList_${props.patientInfo.encounterId}`);
|
||||
// 保存到本地缓存
|
||||
localStorage.setItem(
|
||||
`tcmDiagnosisList_${props.patientInfo.encounterId}`,
|
||||
JSON.stringify(diagnosisList.value)
|
||||
);
|
||||
|
||||
console.log('当前诊断列表:', diagnosisList.value);
|
||||
emit('flush')
|
||||
close();
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user