<template>
|
<div class="home-container layout-pd ">
|
<el-row :gutter="15" >
|
<el-col :span="4" 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 :span="20" 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>
|
患者档案
|
</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>
|
Config
|
</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>
|
Role
|
</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>
|
Task
|
</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>
|
</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';
|
const stores = useUserInfo();
|
const { userInfos } = storeToRefs(stores);
|
import { ElLoading, TabsPaneContext } from 'element-plus'
|
import { Search } from '@element-plus/icons-vue'
|
interface User {
|
code:string,
|
patientName: string
|
patientGenderText: string
|
age: string
|
}
|
const currentRow=ref()
|
const state = reactive({
|
global: {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
} as any,
|
filterTableData:[
|
{
|
name: '张山',
|
sex: '男',
|
age: '12',
|
},
|
{
|
name: '张山二',
|
sex: '男',
|
age: '12',
|
},
|
{
|
name: '王二小',
|
sex: '男',
|
age: '12',
|
},
|
],
|
activeName:'患者档案',
|
tableHeight:{
|
left:0,
|
detailRight:0
|
},
|
search:''
|
});
|
onMounted(()=>{
|
setTableHeight()
|
getPatients()
|
})
|
const handleCurrentChange = (val: User | undefined) => {
|
currentRow.value = val
|
}
|
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()}%")`
|
}
|
QueryList(ps).then(res=>{
|
console.log('----------------患者--------')
|
console.log(res.data)
|
state.filterTableData=res.data.list
|
}).finally(e=>{
|
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)=>{
|
console.log(tab, event)
|
}
|
</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;
|
}
|
|
</style>
|
