<template>
|
<div class="home-container layout-pd ">
|
<el-row :gutter="10">
|
<el-col class="patTabel" :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-if="state.isTable">
|
<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="18" :sm="18" :md="20" :lg="21" :xl="21" >
|
<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>
|
<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>
|
<ZoomIn />
|
</el-icon>
|
<span style="margin-left: 5px">历史服务</span>
|
</span>
|
</template>
|
<el-empty description="该功能未开发"></el-empty>
|
</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>
|
<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>
|
<Grid />
|
</el-icon>
|
<span style="margin-left: 5px">方案</span>
|
</span>
|
</template>
|
<!-- <el-empty description="该功能未开发"></el-empty> -->
|
</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-empty description="该功能未开发"></el-empty> -->
|
</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>
|
<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>
|
|
</div>
|
|
</el-col>
|
</el-row>
|
<div class="fixed-div" v-show="patientsInfo.patientName">
|
<el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" />
|
<div @click="state.isTable = false">{{ 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'
|
// 评估表
|
import pinggubiao from './components/pingubiao/index.vue'
|
// 方案
|
import fangAn from './components/fangAn/index.vue'
|
// 随访记录
|
import suifangjilu from './components/suifangjilu/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 fangAnRef=ref()
|
const suifangjiluRef=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) {
|
currentRow.value = val
|
//缓存到vuex 中
|
storesPat.setPatientsInfo(val)
|
console.log(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: '',
|
clientCode:''
|
|
})
|
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 === '营养筛查评估'){
|
pinggubiaoRef.value.getData()
|
|
}else if(state.activeName==='方案'){
|
fangAnRef.value.getData()
|
}else if(state.activeName==='随访记录'){
|
suifangjiluRef.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: rgb(197.7, 225.9, 255);
|
color: #409EFF;
|
/* 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 {
|
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;
|
}
|
}
|
|
.parent {
|
display: grid;
|
grid-template-columns: minmax(150px, 20%) 1fr;
|
}
|
</style>
|
