376 lines
12 KiB
Vue
376 lines
12 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div ref="compactForm">
|
|
<el-row :gutter="10" class="compact-form" v-show="showSearch">
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="queryRules">
|
|
<el-form-item label="日期：" prop="failed1">
|
|
<el-date-picker v-model="queryParams.failed1" type="daterange" range-separator="-" start-placeholder="开始时间"
|
|
end-placeholder="结束时间" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="病人状态：" prop="failed2">
|
|
<el-select v-model="queryParams.failed2" placeholder="请选择">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="科室：" prop="failed3">
|
|
<el-select v-model="queryParams.failed3" placeholder="请选择" style="width: 120px;">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="病人类型：" prop="failed4">
|
|
<el-select v-model="queryParams.failed4" placeholder="请选择">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="failed5">
|
|
<el-radio-group v-model="queryParams.failed5">
|
|
<el-radio label="1">仅危急值</el-radio>
|
|
<el-radio label="2">仅急诊</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="failed6">
|
|
<el-col :span="1.5">
|
|
<el-input v-model="queryParams.failed6" clearable placeholder="姓名" @keyup.enter="handleQuery"
|
|
@clear="handleQuery" />
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="病人号" prop="failed7">
|
|
<el-col :span="1.5">
|
|
<el-input v-model="queryParams.failed7" clearable placeholder="病人号" @keyup.enter="handleQuery"
|
|
@clear="handleQuery" />
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="条形码" prop="failed8">
|
|
<el-col :span="1.5">
|
|
<el-input v-model="queryParams.failed8" clearable placeholder="条形码" @keyup.enter="handleQuery"
|
|
@clear="handleQuery" />
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-button icon="search" type="primary" @click="handleQuery">
|
|
搜索
|
|
</el-button>
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
</div>
|
|
<el-row :gutter="10">
|
|
<el-col :span="14" class="right-table">
|
|
<el-row :gutter="10" class="mb8 mt10">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" plain icon="Plus">打印</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="danger" plain icon="Edit">勾选中所有未打印</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="success" plain>打印单张PDF报告</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button type="info" plain icon="Upload">GUID打印报告</el-button>
|
|
</el-col>
|
|
|
|
<right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
|
|
:columns="columns"></right-toolbar>
|
|
</el-row>
|
|
|
|
<CustomTable :data="tableData" :columns="columns" :config="tableConfig" :loading="loading">
|
|
|
|
</CustomTable>
|
|
|
|
</el-col>
|
|
<el-col :span="10" class="right-table">
|
|
<div class="title">检验结果</div>
|
|
<div class="mb10">
|
|
<el-button type="primary" @click="openDB">对比历史</el-button>
|
|
<el-button type="primary">复制全部数据</el-button>
|
|
<el-button type="primary">复制异常数据</el-button>
|
|
<el-button type="primary">复制正常数据</el-button>
|
|
<el-button type="primary">知识库</el-button>
|
|
</div>
|
|
|
|
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
|
</CustomTable>
|
|
|
|
<div class="title mt10">检验结果</div>
|
|
<CustomTable :data="rightTableData" :columns="rightColumns" :config="bottomTableConfig" :loading="loading">
|
|
</CustomTable>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
<!-- 结果对比 -->
|
|
<el-dialog v-model="dialogVisible" title="结果对比" draggable :close-on-click-modal="false">
|
|
<div class="flex-between">
|
|
|
|
</div>
|
|
<el-table :data="compareTableData" border style="width: 100%" @row-click="handleRowClick" highlight-current-row>
|
|
<el-table-column prop="itemName" label="项目名称" fixed />
|
|
<el-table-column prop="itemCode" label="项目编号" fixed />
|
|
<template v-for="(period, idx) in periods" :key="period.key">
|
|
<el-table-column :label="period.label" prop="period1_value" :width="150" />
|
|
</template>
|
|
<el-table-column label="合计" prop="total" width="100" fixed="right" />
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted } from 'vue';
|
|
import CustomTable from '@/components/tableCom/index.vue'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
|
|
const compactForm = ref<HTMLElement | null>(null);
|
|
const heightForm = ref(90);
|
|
const dialogVisible = ref(false)
|
|
const openDB = () => {
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
|
|
const handleRowClick = (row: any) => {
|
|
}
|
|
const periods = [
|
|
{
|
|
key: 'period1',
|
|
label: '2024-01-01~2024-01-07',
|
|
|
|
},
|
|
{
|
|
key: 'period2',
|
|
label: '2024-01-08~2024-01-14',
|
|
|
|
}
|
|
]
|
|
|
|
const compareTableData = [
|
|
{
|
|
itemName: '血糖',
|
|
itemCode: 'GLU',
|
|
period1_value: 5.6,
|
|
period1_status: '正常',
|
|
period2_value: 6.2,
|
|
period2_status: '偏高'
|
|
},
|
|
{
|
|
itemName: '血脂',
|
|
itemCode: 'CHOL',
|
|
period1_value: 4.8,
|
|
period1_status: '正常',
|
|
period2_value: 5.1,
|
|
period2_status: '正常'
|
|
}
|
|
]
|
|
|
|
|
|
|
|
// 提交表单数据
|
|
const queryParams = reactive({
|
|
failed1: [],
|
|
failed2: '',
|
|
failed3: '',
|
|
failed4: '',
|
|
failed5: '',
|
|
failed6: '',
|
|
failed7: '',
|
|
failed8: '',
|
|
});
|
|
const showSearch = ref(true);
|
|
const queryRef = ref()
|
|
// 定义校验规则
|
|
const queryRules = ref({
|
|
// clientId: [
|
|
// { required: true, message: '编号不能为空', trigger: 'blur' },
|
|
|
|
// ],
|
|
|
|
// failed3: [
|
|
// { required: true, message: '条码状态不能为空', trigger: 'change' },
|
|
// ],
|
|
})
|
|
const options = [
|
|
{
|
|
value: 'Option1',
|
|
label: 'Option1',
|
|
},
|
|
{
|
|
value: 'Option2',
|
|
label: 'Option2',
|
|
},
|
|
|
|
]
|
|
const handleQuery = async () => {
|
|
const valid = await queryRef.value.validate().catch(() => { });
|
|
if (!valid) return false;
|
|
}
|
|
// 重置
|
|
const resetQuery = () => {
|
|
queryRef.value?.resetFields();
|
|
}
|
|
|
|
const loading = false;
|
|
|
|
// 数据源
|
|
const tableData = [
|
|
{
|
|
id: 1, tfailed1: '打印', tfailed2: '急诊', tfailed3: '危急诊', tfailed4: '检验日期', tfailed5: '病人代号', tfailed6: '床号', tfailed7: '仪器', tfailed8: '样本号',
|
|
tfailed9: '样本类型', tfailed10: '检查项目', tfailed11: '检查结果', tfailed12: '检查结果', tfailed13: '检查结果', tfailed14: '检查结果'
|
|
},
|
|
{
|
|
id: 2, tfailed1: '打印', tfailed2: '急诊', tfailed3: '危急诊', tfailed4: '检验日期', tfailed5: '病人代号', tfailed6: '床号', tfailed7: '仪器', tfailed8: '样本号',
|
|
tfailed9: '样本类型', tfailed10: '检查项目', tfailed11: '检查结果', tfailed12: '检查结果', tfailed13: '检查结果', tfailed14: '检查结果'
|
|
},
|
|
|
|
]
|
|
// 配置项
|
|
const columns = ref([
|
|
{ prop: 'tfailed1', label: '打印', visible: true, key: 0, sortable: true, width: '110px' },
|
|
{ prop: 'tfailed2', label: '急诊', visible: true, key: 1, width: '110px' },
|
|
{ prop: 'tfailed3', label: '危急诊', align: 'center', visible: true, key: 2, },
|
|
{ prop: 'tfailed4', label: '检验日期', align: 'center', visible: true, key: 3, width: '110px' },
|
|
{ prop: 'tfailed5', label: '病人代号', align: 'center', visible: true, key: 4, width: '110px' },
|
|
{ prop: 'tfailed6', label: '床号', align: 'center', visible: true, key: 5, width: '110px' },
|
|
{ prop: 'tfailed7', label: '仪器', align: 'center', visible: true, key: 6, width: '110px' },
|
|
{ prop: 'tfailed8', label: '样本号', align: 'center', visible: true, key: 7, width: '110px' },
|
|
{ prop: 'tfailed9', label: '样本类型', align: 'center', visible: true, key: 8, width: '110px' },
|
|
{ prop: 'tfailed10', label: '检验目的', align: 'center', visible: true, key: 9, width: '110px' },
|
|
{ prop: 'tfailed11', label: '病人类型', align: 'center', visible: true, key: 10, width: '110px' },
|
|
{ prop: 'tfailed12', label: '性别', align: 'center', visible: true, key: 11, width: '110px' },
|
|
{ prop: 'tfailed13', label: '仪器名称', align: 'center', visible: true, key: 12, width: '110px' },
|
|
{ prop: 'tfailed14', label: '医疗机构', align: 'center', visible: true, key: 13, width: '110px' },
|
|
])
|
|
|
|
|
|
|
|
// 表格配置
|
|
const tableConfig = ref(
|
|
{
|
|
// stripe: true, // 斑马纹
|
|
// border: true, // 边框
|
|
selection: true, // 多选框
|
|
index: false, // 序号
|
|
height: '100%', // 高度
|
|
highlightCurrentRow: true, // 高亮当前行
|
|
fit: true
|
|
}
|
|
)
|
|
|
|
|
|
|
|
interface ColumnItem {
|
|
prop: string;
|
|
label: string;
|
|
visible: boolean;
|
|
key: number;
|
|
align: string;
|
|
slot: string;
|
|
width: string;
|
|
}
|
|
// 更新列
|
|
const updateColumns = (arr: Array<ColumnItem>) => {
|
|
columns.value = arr
|
|
};
|
|
|
|
|
|
|
|
// 右侧数据源
|
|
const rightTableData = [
|
|
{
|
|
id: 1, tfailed1: 'P001', tfailed2: '项目A', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
{
|
|
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
|
},
|
|
]
|
|
// 配置项
|
|
const rightColumns = ref([
|
|
{ prop: 'tfailed1', label: '项目代号', visible: true, key: 0, sortable: true, width: '110px' },
|
|
{ prop: 'tfailed2', label: '项目名称', visible: true, key: 1 },
|
|
{ prop: 'tfailed3', label: '单价', align: 'center', visible: true, key: 2 },
|
|
{ prop: 'tfailed4', label: '数量', align: 'center', visible: true, key: 3 },
|
|
{ prop: 'tfailed5', label: '状态', align: 'center', visible: true, key: 4 },
|
|
{ prop: 'tfailed6', label: '计价标志', align: 'center', visible: true, key: 5 },
|
|
|
|
])
|
|
// 表格配置
|
|
const rightTableConfig = ref(
|
|
{
|
|
// stripe: true, // 斑马纹
|
|
// border: true, // 边框
|
|
selection: false, // 多选框
|
|
index: false, // 序号
|
|
height: '28vh', // 高度
|
|
highlightCurrentRow: true, // 高亮当前行
|
|
fit: true
|
|
}
|
|
)
|
|
|
|
// 表格配置
|
|
const bottomTableConfig = ref(
|
|
{
|
|
// stripe: true, // 斑马纹
|
|
// border: true, // 边框
|
|
selection: false, // 多选框
|
|
index: false, // 序号
|
|
height: '28vh', // 高度
|
|
highlightCurrentRow: true, // 高亮当前行
|
|
fit: true,
|
|
}
|
|
)
|
|
|
|
|
|
onMounted(() => {
|
|
adjustTableHeight();
|
|
});
|
|
|
|
// 计算table高度
|
|
watch(showSearch, () => {
|
|
nextTick(() => {
|
|
adjustTableHeight();
|
|
})
|
|
}, { immediate: true });
|
|
|
|
function adjustTableHeight() {
|
|
if (compactForm.value) {
|
|
// 获取高度
|
|
heightForm.value = compactForm.value.offsetHeight;
|
|
tableConfig.value.height = `calc(80vh - ${heightForm.value}px)`;
|
|
rightTableConfig.value.height = `calc(38vh - ${heightForm.value}px)`;
|
|
bottomTableConfig.value.height = `calc(35vh - ${heightForm.value} }px)`;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.right-table {
|
|
border: 1px solid #dcdfe6;
|
|
}
|
|
|
|
.title {
|
|
border-bottom: 1px solid #dcdfe6;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
font-weight: 700;
|
|
}
|
|
</style> |