142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<template>
|
|
<div style="display: flex; justify-content: space-between">
|
|
<div style="width: 20%; height: 90vh; border-right: solid 2px #e4e7ed">
|
|
<div
|
|
style="
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
border-bottom: solid 2px #e4e7ed;
|
|
"
|
|
>
|
|
<el-icon
|
|
@click="refresh"
|
|
class="refresh-icon"
|
|
style="cursor: pointer; font-size: 20px; margin-right: 10px"
|
|
>
|
|
<Refresh />
|
|
</el-icon>
|
|
</div>
|
|
<el-tabs v-model="active" class="demo-tabs centered-tabs tab-header" @tab-click="handleClick">
|
|
<el-tab-pane label="在科" name="first" style="padding: 15px 10px">
|
|
<PatientList />
|
|
</el-tab-pane>
|
|
<!-- 隐藏转科tab
|
|
<el-tab-pane label="转科" name="second" style="padding: 0 10px">
|
|
<PatientList />
|
|
</el-tab-pane>
|
|
-->
|
|
</el-tabs>
|
|
</div>
|
|
<div style="width: 100%">
|
|
<el-tabs v-model="activeName" class="demo-tabs centered-tabs" @tab-change="handleClick">
|
|
<el-tab-pane
|
|
v-for="tab in prescriptionTabs"
|
|
:key="tab.name"
|
|
:lazy="true"
|
|
:label="tab.label"
|
|
:name="tab.name"
|
|
>
|
|
<!-- 使用模板引用 -->
|
|
<PrescriptionList
|
|
:exeStatus="exeStatus"
|
|
:requestStatus="requestStatus"
|
|
:ref="(el) => setPrescriptionRef(el, tab.name)"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {getCurrentInstance} from 'vue';
|
|
import PatientList from '../components/patientList.vue';
|
|
import PrescriptionList from './components/prescriptionList.vue';
|
|
|
|
const activeName = ref('preparation');
|
|
const active = ref('first');
|
|
const exeStatus = ref(1);
|
|
const requestStatus = ref(3);
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
// 存储子组件引用的对象
|
|
const prescriptionRefs = ref({});
|
|
|
|
// 定义处方列表tabs配置
|
|
const prescriptionTabs = [
|
|
{ label: '待执行', name: 'preparation' },
|
|
{ label: '已执行', name: 'completed' },
|
|
{ label: '不执行', name: 'stopped' },
|
|
{ label: '取消执行', name: 'cancel' },
|
|
];
|
|
|
|
// 设置处方组件引用
|
|
function setPrescriptionRef(el, name) {
|
|
if (el) {
|
|
prescriptionRefs.value[name] = el;
|
|
}
|
|
}
|
|
|
|
function handleClick(tabName) {
|
|
// tabName是tab的name属性值
|
|
const activeTabName = tabName || activeName.value;
|
|
|
|
switch (activeTabName) {
|
|
case 'preparation':
|
|
// 执行状态待执行
|
|
exeStatus.value = 1;
|
|
// 请求状态已校对
|
|
requestStatus.value = 3;
|
|
break;
|
|
case 'completed':
|
|
exeStatus.value = 6;
|
|
break;
|
|
case 'stopped':
|
|
exeStatus.value = 5;
|
|
break;
|
|
case 'cancel':
|
|
exeStatus.value = 9;
|
|
break;
|
|
}
|
|
|
|
// 调用子组件方法
|
|
nextTick(() => {
|
|
if (
|
|
prescriptionRefs.value[activeTabName] &&
|
|
typeof prescriptionRefs.value[activeTabName].handleGetPrescription === 'function'
|
|
) {
|
|
prescriptionRefs.value[activeTabName].handleGetPrescription();
|
|
}
|
|
});
|
|
}
|
|
|
|
provide('handleGetPrescription', (value) => {
|
|
prescriptionRefs.value[activeName.value].handleGetPrescription();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.centered-tabs :deep(.el-tabs__nav-wrap) {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.centered-tabs :deep(.el-tabs__nav-scroll) {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tab-header :deep(.el-tabs__item) {
|
|
height: 50px !important;
|
|
}
|
|
|
|
.centered-tabs :deep(.el-tabs__nav) {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
:deep(.el-tabs__header) {
|
|
margin: 0;
|
|
}
|
|
</style> |