<template>
|
<div class="home-container layout-pd ">
|
<el-row :gutter="15" >
|
<el-col :xs="8" :sm="6" :md="4" :lg="3" class="patTabel">
|
<el-table :data="state.filterTableData"
|
stripe
|
:height="state.tableHeight.left"
|
size="default"
|
highlight-current-row
|
@current-change="handleCurrentChange"
|
style="width: 100%">
|
<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"/>
|
</template>
|
<template #default="scope">
|
<el-row>
|
<el-col :span="12">{{scope.row.patientName}}</el-col>
|
<el-col :span="6">{{scope.row.patientGenderText}}</el-col>
|
<el-col :span="6">{{scope.row.age}}</el-col>
|
</el-row>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
<el-col :xs="14" :sm="18" :md="20" :lg="21" class="detailRight">
|
<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>
|
<patientFile :tableHeight="state.tableHeight.detailRight" ref="patientFileRef"></patientFile>
|
</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>
|
<lisUi ref="lisUiRef"></lisUi>
|
</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>
|
<MedicationRecords :tableHeight="state.tableHeight.detailRight" ref="MedicationRecordsRef"></MedicationRecords>
|
</el-tab-pane>
|
<el-tab-pane label="历史服务" name="历史服务">
|
<template #label>
|
<span class="custom-tabs-label home-title">
|
<el-icon><ZoomIn /></el-icon>
|
<span style="margin-left: 5px">历史服务</span>
|
</span>
|
</template>
|
Task
|
</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>
|
<dietarySurvey></dietarySurvey>
|
</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>
|
Task
|
</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>
|
Task
|
</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>
|
Task
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>
|
<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} from '/@/api/Patients'
|
import { storeToRefs } from 'pinia';
|
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 patientFile from './components/patient_file.vue'
|
// 化验结果
|
import lisUi from './components/lis_.ui.vue'
|
interface User {
|
code:string,
|
patientName: string
|
patientGenderText: string
|
age: string
|
}
|
const MedicationRecordsRef=ref()
|
const patientFileRef=ref()
|
const currentRow=ref()
|
const lisUiRef=ref()
|
const state = reactive({
|
global: {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
} as any,
|
filterTableData:[],
|
activeName:'患者档案',
|
tableHeight:{
|
left:0,
|
detailRight:0
|
},
|
search:''
|
});
|
onMounted(()=>{
|
setTableHeight()
|
getPatients()
|
})
|
const handleCurrentChange = (val: any | undefined) => {
|
console.log('-----------------333')
|
console.log(val)
|
if(val){
|
currentRow.value = val
|
//缓存到vuex 中
|
storesPat.setPatientsInfo(val)
|
getTabsData()
|
}
|
}
|
/**获取患者列表 */
|
const getPatients=()=>{
|
const loading = ElLoading.service({
|
lock: true,
|
text: 'Loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
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()}%")`
|
}
|
storesPat.setPatientsInfo({
|
id: '',
|
code: '',
|
age: 0,
|
patientName: '',
|
patientGenderText: '',
|
patientAvatarIcon: ''
|
})
|
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)=>{
|
alert('1')
|
state.activeName=tab.paneName as string
|
getTabsData()
|
}
|
/** 获取明细项数据 */
|
const getTabsData=()=>{
|
if(MedicationRecordsRef.value&&patientsInfo.value.id){
|
if(state.activeName==='用药记录'){
|
MedicationRecordsRef.value.getData()
|
}else if(state.activeName==='患者档案'){
|
console.log(patientFileRef.value)
|
patientFileRef.value.getData()
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
overflow: hidden;
|
.patTabel{
|
.el-table th.el-table__cell {
|
background-color: #6babfa;
|
color:#606266;
|
}
|
.el-table__body tr.current-row>td.el-table__cell{
|
background: #E4F6DE;
|
color: #5FCD00;
|
/* height: 25px; */
|
/* border: tomato solid 1px; */
|
}
|
}
|
|
}
|
.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{
|
background-color: #ffffff;
|
}
|
.fixed-div {
|
position: fixed;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
bottom: 10px;
|
right: 30px;
|
width: 200px;
|
height: 100px;
|
background-color:#ffffff;
|
color: rgb(16, 3, 3);
|
padding: 10px;
|
z-index: 999;
|
|
div{
|
font-weight: 800;
|
margin-left: 10px;
|
font-size: 20px;
|
}
|
}
|
|
</style>
|
