Fix Bug #466: AI修复
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="lab-request-wrapper">
|
||||
<el-dialog v-model="visible" title="检验申请单" width="900px" :close-on-click-modal="false">
|
||||
<!-- 顶部核心质控字段区域 -->
|
||||
<div class="qc-fields-container">
|
||||
<el-form :model="formData" label-width="100px" class="qc-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="申请类型">
|
||||
<el-radio-group v-model="formData.applicationType" data-cy="application-type">
|
||||
<el-radio label="1">普通</el-radio>
|
||||
<el-radio label="2">急诊</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="标本类型">
|
||||
<el-input v-model="formData.specimenType" placeholder="自动带出或手动选择" data-cy="specimen-type" readonly>
|
||||
<template #append>
|
||||
<el-button @click="openSpecimenDict">选择</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="执行时间">
|
||||
<el-date-picker
|
||||
v-model="formData.executionTime"
|
||||
type="datetime"
|
||||
placeholder="选择执行时间"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
data-cy="execution-time"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发往科室">
|
||||
<el-select v-model="formData.targetDept" placeholder="请选择执行科室" style="width: 100%">
|
||||
<el-option label="检验科" value="LAB" />
|
||||
<el-option label="病理科" value="PATH" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="临床诊断">
|
||||
<el-input v-model="formData.diagnosis" placeholder="请输入诊断" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<!-- 左侧：检验项目分类 -->
|
||||
<div class="panel category-panel">
|
||||
<div class="panel-title">检验项目分类</div>
|
||||
<el-tree :data="categoryTree" node-key="id" highlight-current @node-click="handleCategoryClick" />
|
||||
</div>
|
||||
|
||||
<!-- 中间：检验项目列表 -->
|
||||
<div class="panel item-panel">
|
||||
<div class="panel-title">检验项目</div>
|
||||
<el-checkbox-group v-model="selectedItemIds" @change="onItemSelectChange">
|
||||
<el-checkbox
|
||||
v-for="item in currentItems"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
class="item-checkbox"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：已选择区域 -->
|
||||
<div class="panel selected-panel">
|
||||
<div class="panel-title">已选择</div>
|
||||
<div class="selected-list">
|
||||
<div v-for="item in selectedItems" :key="item.id" class="selected-item">
|
||||
<span>{{ item.name }}</span>
|
||||
<el-tag size="small" type="info">{{ item.specimenType || '未配置' }}</el-tag>
|
||||
</div>
|
||||
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" data-cy="save-btn">确认申请</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const visible = ref(false);
|
||||
const selectedItemIds = ref([]);
|
||||
const categoryTree = ref([]);
|
||||
const currentItems = ref([]);
|
||||
const itemList = ref([]);
|
||||
|
||||
const formData = reactive({
|
||||
applicationType: '1', // 1:普通 2:急诊
|
||||
specimenType: '',
|
||||
executionTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
targetDept: '',
|
||||
diagnosis: ''
|
||||
});
|
||||
|
||||
const selectedItems = computed(() => {
|
||||
return itemList.value.filter(item => selectedItemIds.value.includes(item.id));
|
||||
});
|
||||
|
||||
// 模拟字典/接口获取项目数据
|
||||
const fetchLabItems = () => {
|
||||
// 实际应调用后端接口
|
||||
itemList.value = [
|
||||
{ id: 1, name: '血常规', specimenType: '血液' },
|
||||
{ id: 2, name: '尿常规', specimenType: '尿液' },
|
||||
{ id: 3, name: '肝功能', specimenType: '血液' },
|
||||
{ id: 4, name: '大便常规', specimenType: '粪便' }
|
||||
];
|
||||
currentItems.value = itemList.value;
|
||||
};
|
||||
|
||||
const handleCategoryClick = (node) => {
|
||||
// 实际根据分类过滤
|
||||
currentItems.value = itemList.value;
|
||||
};
|
||||
|
||||
// 核心联动逻辑：勾选项目后自动带出标本类型
|
||||
const onItemSelectChange = (ids) => {
|
||||
selectedItemIds.value = ids;
|
||||
const selected = selectedItems.value;
|
||||
if (selected.length > 0) {
|
||||
// 取第一个项目的标本类型作为默认值，若存在多个不同标本可提示或取交集
|
||||
formData.specimenType = selected[0].specimenType || '';
|
||||
} else {
|
||||
formData.specimenType = '';
|
||||
}
|
||||
};
|
||||
|
||||
const openSpecimenDict = () => {
|
||||
ElMessageBox.prompt('请输入或选择标本类型', '标本类型', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPlaceholder: '如：血液、尿液、脑脊液等'
|
||||
}).then(({ value }) => {
|
||||
formData.specimenType = value;
|
||||
}).catch(() => {});
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
// 校验执行时间不可早于当前时间
|
||||
const execTime = dayjs(formData.executionTime);
|
||||
const now = dayjs();
|
||||
if (execTime.isBefore(now)) {
|
||||
ElMessageBox.alert('执行时间不可早于当前时间', '提示', { type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.targetDept) {
|
||||
ElMessage.warning('请选择发往科室');
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedItemIds.value.length === 0) {
|
||||
ElMessage.warning('请至少选择一项检验项目');
|
||||
return;
|
||||
}
|
||||
|
||||
// 组装提交数据
|
||||
const payload = {
|
||||
applicationType: formData.applicationType,
|
||||
specimenType: formData.specimenType,
|
||||
executionTime: formData.executionTime,
|
||||
targetDept: formData.targetDept,
|
||||
diagnosis: formData.diagnosis,
|
||||
itemIds: selectedItemIds.value
|
||||
};
|
||||
|
||||
console.log('提交检验申请:', payload);
|
||||
ElMessage.success('申请单已提交');
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchLabItems();
|
||||
});
|
||||
|
||||
defineExpose({ open: () => { visible.value = true; formData.executionTime = dayjs().format('YYYY-MM-DD HH:mm:ss'); } });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lab-request-wrapper { padding: 10px; }
|
||||
.qc-fields-container { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 15px; }
|
||||
.panel { display: inline-block; vertical-align: top; width: 30%; margin: 0 1.5%; border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; height: 400px; overflow-y: auto; }
|
||||
.panel-title { font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
|
||||
.item-checkbox { display: block; margin: 5px 0; }
|
||||
.selected-item { display: flex; justify-content: space-between; align-items: center; padding: 5px; background: #f0f9eb; margin-bottom: 5px; border-radius: 4px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user