85 lines
2.9 KiB
Vue
85 lines
2.9 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<span>药物相互作用检查</span>
|
||
</template>
|
||
<el-form :model="form" label-width="80px">
|
||
<el-form-item label="药物">
|
||
<el-select v-model="form.drugCodes" multiple filterable allow-create default-first-option placeholder="输入药物编码后回车" style="width: 100%">
|
||
<el-option v-for="item in drugOptions" :key="item" :label="item" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" :loading="loading" @click="handleCheck">检查相互作用</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card shadow="never" class="mt16" v-if="results.length > 0">
|
||
<template #header>
|
||
<span>检查结果（发现 {{ results.length }} 个相互作用）</span>
|
||
</template>
|
||
<el-table :data="results" border stripe>
|
||
<el-table-column prop="drugNameA" label="药物A" min-width="140" show-overflow-tooltip />
|
||
<el-table-column prop="drugCodeA" label="编码A" width="120" show-overflow-tooltip />
|
||
<el-table-column prop="drugNameB" label="药物B" min-width="140" show-overflow-tooltip />
|
||
<el-table-column prop="drugCodeB" label="编码B" width="120" show-overflow-tooltip />
|
||
<el-table-column prop="interactionType" label="相互作用类型" width="140" show-overflow-tooltip />
|
||
<el-table-column prop="severity" label="严重程度" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.severity === '严重' ? 'danger' : 'warning'">
|
||
{{ row.severity }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<el-card shadow="never" class="mt16" v-if="checked && results.length === 0">
|
||
<el-empty description="未发现药物相互作用" />
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="DrugInteractionCheck">
|
||
import { ref, reactive } from 'vue'
|
||
import { checkDrugInteractions } from '@/api/knowledgegraph/api'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const loading = ref(false)
|
||
const results = ref([])
|
||
const checked = ref(false)
|
||
|
||
const form = reactive({
|
||
drugCodes: []
|
||
})
|
||
|
||
const drugOptions = ref([])
|
||
|
||
async function handleCheck() {
|
||
if (form.drugCodes.length < 2) {
|
||
ElMessage.warning('请至少输入两种药物')
|
||
return
|
||
}
|
||
loading.value = true
|
||
checked.value = false
|
||
try {
|
||
const res = await checkDrugInteractions(form)
|
||
if (res.code === 200) {
|
||
results.value = res.data || []
|
||
checked.value = true
|
||
} else {
|
||
ElMessage.error(res.msg || '检查失败')
|
||
}
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mt16 { margin-top: 16px; }
|
||
</style>
|