<template>
|
<div class="home-container layout-pd ">
|
<div class="container">
|
<div class="container-left">
|
<div class="patTabel">
|
<el-table :data="state.filterTableData" stripe :height="state.tableHeight.left" size="default"
|
highlight-current-row @current-change="handleCurrentChange" style="width: 300px">
|
<el-table-column>
|
<template #header>
|
<div class="home-title">
|
<el-avatar shape="square"
|
style="width: 16px; height: 16px;background-color: #ffffff;margin-right: 10px;margin-left: 10px;"
|
fit="contain" :src="huanzheliebiao" />
|
<div class="titleHome">患者列表</div>
|
</div>
|
<el-input size="default" @change="getPatients" v-model="state.search" placeholder="支持模糊查询"
|
:prefix-icon="Search" />
|
|
<el-row style="margin-top: 5px;">
|
<el-col :span="10">姓名</el-col>
|
<el-col :span="5">性别</el-col>
|
<el-col :span="4">年龄</el-col>
|
<el-col :span="5">床号</el-col>
|
</el-row>
|
</template>
|
<template #default="scope">
|
<el-row>
|
<el-col :span="10">{{ scope.row.patientName }}</el-col>
|
<el-col :span="5">{{ scope.row?.patientGender===0?'男':'女' }}</el-col>
|
<el-col :span="4">{{ scope.row.age }}</el-col>
|
<el-col :span="5">{{ scope.row.deviceNo }}</el-col>
|
</el-row>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="right" style="width: 100%;">
|
<div style="width: 100%;">
|
<el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
|
<el-tab-pane label="患者档案" name="患者档案">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Avatar />
|
</el-icon>
|
<span style="margin-left: 5px">患者档案</span>
|
</span>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="营养筛查评估" name="营养筛查评估">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Histogram />
|
</el-icon>
|
<span style="margin-left: 5px">营养筛查评估</span>
|
</span>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="膳食调查" name="膳食调查">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Notification />
|
</el-icon>
|
<span style="margin-left: 5px">膳食调查</span>
|
</span>
|
</template>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="食物过敏原及胃肠功能调查" name="食物过敏原及胃肠功能调查">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Notification />
|
</el-icon>
|
<span style="margin-left: 5px">食物过敏原及胃肠功能调查</span>
|
</span>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="随访记录" name="随访记录">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<ChatDotRound />
|
</el-icon>
|
<span style="margin-left: 5px">随访记录</span>
|
</span>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="营养饮食指导方案" name="营养饮食指导方案">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Grid />
|
</el-icon>
|
<span style="margin-left: 5px">营养饮食指导方案</span>
|
</span>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="生化数据" name="生化数据">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Aim />
|
</el-icon>
|
<span style="margin-left: 5px">生化数据</span>
|
</span>
|
</template>
|
</el-tab-pane>
|
<el-tab-pane label="用药记录" name="用药记录">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Edit />
|
</el-icon>
|
<span style="margin-left: 5px">用药记录</span>
|
</span>
|
</template>
|
|
</el-tab-pane>
|
<el-tab-pane label="营养服务管理记录" name="营养服务管理记录">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon>
|
<Edit />
|
</el-icon>
|
<span style="margin-left: 5px">营养服务管理记录</span>
|
</span>
|
</template>
|
|
</el-tab-pane>
|
</el-tabs>
|
<div class="itemDoby">
|
<patientFile v-show="state.activeName === '患者档案'" :tableHeight="state.tableHeight.detailRight"
|
ref="patientFileRef" />
|
<lisUi v-show="state.activeName === '生化数据'" ref="lisUiRef">
|
</lisUi>
|
<MedicationRecords v-show="state.activeName === '用药记录'" :tableHeight="state.tableHeight.detailRight" ref="MedicationRecordsRef">
|
</MedicationRecords>
|
<dietarySurvey ref="dietarySurveyRef" v-show="state.activeName === '膳食调查'" :tableHeight="state.tableHeight.detailRight"></dietarySurvey>
|
<shiwuguoming ref="shiwuguomingRef" v-show="state.activeName === '食物过敏原及胃肠功能调查'" :tableHeight="state.tableHeight.detailRight"></shiwuguoming>
|
<pinggubiao ref="pinggubiaoRef" v-show="state.activeName === '营养筛查评估'" :tableHeight="state.tableHeight.detailRight"></pinggubiao>
|
<fangAn ref="fangAnRef" v-show="state.activeName === '营养饮食指导方案'" :tableHeight="state.tableHeight.detailRight"></fangAn>
|
<suifangjilu ref="suifangjiluRef" v-show="state.activeName === '随访记录'" :tableHeight="state.tableHeight.detailRight"></suifangjilu>
|
|
<jilubiao ref="jilubiaoRef" v-show="state.activeName === '营养服务管理记录'" :tableHeight="state.tableHeight.detailRight"></jilubiao>
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="fixed-div" v-show="patientsInfo.patientName">
|
<el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" />
|
<div>{{ patientsInfo.patientName }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="home">
|
import huanzheliebiao from '/@/assets/imgs/huanzheliebiao.png'
|
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
|
import { QueryList,getRecordsInToday2 } from '/@/api/Patients'
|
import { storeToRefs } from 'pinia';
|
import {formatDate} from '/@/utils/formatTime'
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { usePatientsInfo } from '/@/stores/patientsInfo';
|
const stores = useUserInfo();
|
const storesPat = usePatientsInfo();
|
const { userInfos } = storeToRefs(stores);
|
const { patientsInfo } = storeToRefs(storesPat);
|
import { ElLoading, TabsPaneContext } from 'element-plus'
|
import { Search } from '@element-plus/icons-vue'
|
// 用药记录
|
import MedicationRecords from './components/Medication_records.vue'
|
// 膳食调查
|
import dietarySurvey from './components/dietary_survey.vue'
|
import shiwuguoming from './components/shiwuguoming/index.vue'
|
// 患者档案
|
import patientFile from './components/patient_file.vue'
|
// 化验结果
|
import lisUi from './components/lis_.ui.vue'
|
// 评估表
|
import pinggubiao from './components/pingubiao/index.vue'
|
// 方案
|
import fangAn from './components/fangAn/index.vue'
|
// 随访记录
|
import suifangjilu from './components/suifangjilu/index.vue'
|
// 营养记录表
|
import jilubiao from './components/jilubiao/index.vue'
|
interface User {
|
code: string,
|
patientName: string
|
patientGenderText: string
|
age: string
|
}
|
const MedicationRecordsRef = ref()
|
const patientFileRef = ref()
|
const currentRow = ref()
|
const lisUiRef = ref()
|
const pinggubiaoRef=ref()
|
const dietarySurveyRef=ref()// 膳食调查
|
const shiwuguomingRef=ref()
|
const fangAnRef=ref()
|
const suifangjiluRef=ref()
|
const jilubiaoRef=ref()
|
const state = reactive({
|
global: {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
} as any,
|
filterTableData: [],
|
activeName: '患者档案',
|
tableHeight: {
|
left: 0,
|
detailRight: 0
|
},
|
search: '',
|
isTable: true,
|
});
|
onMounted(() => {
|
setTableHeight()
|
getPatients()
|
})
|
const handleCurrentChange = (val: any | undefined) => {
|
if (val) {
|
console.log(val)
|
currentRow.value = val
|
const ps={
|
id: val.patientId,
|
code: val.patientCode,
|
age: val.age,
|
patientName:val.patientName,
|
patientGenderText: val?.patientGender?'女':'男',
|
patientAvatarIcon: val?.patientAvatar,
|
clientCode:val.clientCode
|
}
|
//缓存到vuex 中
|
storesPat.setPatientsInfo(ps)
|
getTabsData()
|
}
|
}
|
/**获取患者列表 */
|
const getPatients = () => {
|
// 初始化患者信息
|
storesPat.setPatientsInfo({
|
id: '',
|
code: '',
|
age: 0,
|
patientName: '',
|
patientGenderText: '',
|
patientAvatarIcon: '',
|
clientCode:''
|
|
})
|
// 患者信息查询条件
|
const pp={
|
timeSlot:3,
|
patientFrom:-1,
|
patientName:state.search.toLowerCase(),
|
orderCondition:2,
|
clientCode:userInfos.value.clientCode,
|
dateBegin:formatDate(new Date(),'YYYY-mm-dd')+ " 00:00:00",
|
dateEnd:formatDate(new Date(),'YYYY-mm-dd')+" 23:59:59"
|
}
|
const loading = ElLoading.service({
|
lock: true,
|
text: 'Loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
getRecordsInToday2(pp).then(re=>{
|
console.log(re.data)
|
state.filterTableData = re.data
|
}).finally(() => {
|
loading.close()
|
})
|
|
// var ps = {
|
// page: 0,
|
// size: 0,
|
// wherecondition: `client_code="${userInfos.value.clientCode}" and (patient_name like "%${state.search.toLowerCase()}%"
|
// OR patient_name_py like "%${state.search.toLowerCase()}%")`
|
// }
|
|
// QueryList(ps).then(res => {
|
// console.log('----------------患者--------')
|
// console.log(res.data)
|
// state.filterTableData = res.data.list
|
// }).finally(() => {
|
// loading.close()
|
// })
|
}
|
/**设置高度 */
|
const setTableHeight = () => {
|
let height = document.documentElement.clientHeight;
|
console.log('窗口高度')
|
const navDom = document.querySelector('.layout-navbars-breadcrumb-index');
|
if (navDom) {
|
height -= navDom.scrollHeight;
|
}
|
state.tableHeight.detailRight = height
|
state.tableHeight.left = height - 77;
|
// const demoFormDom = document.querySelector('.card_box_search')
|
|
};
|
/** 切换明细tabs*/
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
state.activeName = tab.paneName as string
|
getTabsData()
|
}
|
/** 获取明细项数据 */
|
const getTabsData = () => {
|
if (patientsInfo.value.id) {
|
if (state.activeName === '用药记录') {
|
MedicationRecordsRef.value.getData()
|
} else if (state.activeName === '患者档案') {
|
patientFileRef.value.getData()
|
} else if(state.activeName === '膳食调查'){
|
dietarySurveyRef.value.getData()
|
}else if(state.activeName === '食物过敏原及胃肠功能调查'){
|
shiwuguomingRef.value.getData()
|
}
|
else if(state.activeName === '营养筛查评估'){
|
pinggubiaoRef.value.getData()
|
|
}else if(state.activeName==='营养饮食指导方案'){
|
fangAnRef.value.getData()
|
}else if(state.activeName==='随访记录'){
|
suifangjiluRef.value.getData()
|
}else if(state.activeName==='营养服务管理记录'){
|
jilubiaoRef.value.getData()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.container {
|
gap: 10px; /* 在flex项目之间设置间距 */
|
display: flex;
|
}
|
|
.container-left {
|
width: 300px; /* 右边div的固定宽度 */
|
.right {
|
background-color: #409EFF;
|
flex-grow: 1; /* 让这个div扩展以填充可用空间 */
|
margin-left: 20px; /* 如果需要的话，可以给右边的div留出一些间距 */
|
}
|
}
|
.home-container {
|
overflow: hidden;
|
.patTabel {
|
width: 100%;
|
.el-table th.el-table__cell {
|
background-color: #6babfa;
|
color: #ffffff;
|
}
|
|
.el-table__body tr.current-row>td.el-table__cell {
|
background: rgb(197.7, 225.9, 255);
|
color: #409EFF;
|
}
|
}
|
|
}
|
|
.patTitle {
|
height: 25px;
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
font-weight: 500;
|
font-size: 18px;
|
color: #333333;
|
line-height: 20px;
|
letter-spacing: 1px;
|
text-align: left;
|
font-style: normal;
|
// margin-top: -10px;
|
}
|
|
.home-title {
|
margin-bottom: 4px;
|
flex: 1;
|
height: inherit;
|
display: flex;
|
align-items: center;
|
}
|
|
.detailRight {
|
margin-left: 10px;
|
background-color: #ffffff;
|
}
|
.itemDoby{
|
width: 100%; /* 设置容器宽度 */
|
overflow-x: auto; /* 横向内容溢出时显示滚动条 */
|
}
|
.fixed-div {
|
position: fixed;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
bottom: 10px;
|
right: 30px;
|
width: 200px;
|
height: 100px;
|
color: rgb(16, 3, 3);
|
padding: 10px;
|
z-index: 999;
|
|
div {
|
font-weight: 800;
|
margin-left: 10px;
|
font-size: 20px;
|
}
|
}
|
|
</style>
|
