| | |
| | | <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-row> |
| | | <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" /> |
| | | <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-input size="default" @change="getPatients" v-model="state.search" placeholder="支持模糊查询" |
| | | :prefix-icon="Search" /> |
| | | </template> |
| | | <template #default="scope"> |
| | | <el-row> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-col> |
| | | <el-col :xs="14" :sm="18" :md="20" :lg="21" class="detailRight"> |
| | | <el-col :xs="6" :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> |
| | | <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> |
| | | <el-icon> |
| | | <Aim /> |
| | | </el-icon> |
| | | <span style="margin-left: 5px">生化数据</span> |
| | | </span> |
| | | </template> |
| | |
| | | <el-tab-pane label="用药记录" name="用药记录"> |
| | | <template #label> |
| | | <span class="custom-tabs-label home-title"> |
| | | <el-icon><Edit /></el-icon> |
| | | <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> |
| | | <el-icon> |
| | | <ZoomIn /> |
| | | </el-icon> |
| | | <span style="margin-left: 5px">历史服务</span> |
| | | </span> |
| | | </template> |
| | |
| | | <el-tab-pane label="膳食调查" name="膳食调查"> |
| | | <template #label> |
| | | <span class="custom-tabs-label home-title"> |
| | | <el-icon><Notification /></el-icon> |
| | | <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> |
| | | <el-icon> |
| | | <Histogram /> |
| | | </el-icon> |
| | | <span style="margin-left: 5px">营养筛查评估</span> |
| | | </span> |
| | | </template> |
| | |
| | | <el-tab-pane label="方案" name="方案"> |
| | | <template #label> |
| | | <span class="custom-tabs-label home-title"> |
| | | <el-icon><Grid /></el-icon> |
| | | <el-icon> |
| | | <Grid /> |
| | | </el-icon> |
| | | <span style="margin-left: 5px">方案</span> |
| | | </span> |
| | | </template> |
| | |
| | | <el-tab-pane label="随访记录" name="随访记录"> |
| | | <template #label> |
| | | <span class="custom-tabs-label home-title"> |
| | | <el-icon><ChatDotRound /></el-icon> |
| | | <el-icon> |
| | | <ChatDotRound /> |
| | | </el-icon> |
| | | <span style="margin-left: 5px">随访记录</span> |
| | | </span> |
| | | </template> |
| | | Task |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <div class="itemDoby"> |
| | | <patientFile v-if="state.activeName === '患者档案'" :tableHeight="state.tableHeight.detailRight" |
| | | ref="patientFileRef" /> |
| | | <lisUi v-if="state.activeName === '生化数据'" ref="lisUiRef"> |
| | | </lisUi> |
| | | <MedicationRecords v-if="state.activeName === '用药记录'" :tableHeight="state.tableHeight.detailRight" ref="MedicationRecordsRef"> |
| | | </MedicationRecords> |
| | | <dietarySurvey ref="dietarySurveyRef" v-if="state.activeName === '膳食调查'" :tableHeight="state.tableHeight.detailRight"></dietarySurvey> |
| | | |
| | | </div> |
| | | |
| | | </el-col> |
| | | </el-row> |
| | | <div class="fixed-div" v-show="patientsInfo.patientName"> |
| | | <el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" /> |
| | | <div>{{patientsInfo.patientName}}</div> |
| | | |
| | | <div @click="state.isTable = false">{{ patientsInfo.patientName }}</div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | const patientFileRef=ref() |
| | | const currentRow=ref() |
| | | const lisUiRef=ref() |
| | | const dietarySurveyRef=ref()// 膳食调查 |
| | | const state = reactive({ |
| | | global: { |
| | | homeChartOne: null, |
| | |
| | | left:0, |
| | | detailRight:0 |
| | | }, |
| | | search:'' |
| | | search: '', |
| | | isTable: true, |
| | | }); |
| | | onMounted(()=>{ |
| | | setTableHeight() |
| | | getPatients() |
| | | }) |
| | | const handleCurrentChange = (val: any | undefined) => { |
| | | console.log('-----------------333') |
| | | console.log(val) |
| | | if(val){ |
| | | currentRow.value = val |
| | | //缓存到vuex 中 |
| | |
| | | }; |
| | | /** 切换明细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 (patientsInfo.value.id) { |
| | | if(state.activeName==='用药记录'){ |
| | | MedicationRecordsRef.value.getData() |
| | | }else if(state.activeName==='患者档案'){ |
| | | console.log(patientFileRef.value) |
| | | patientFileRef.value.getData() |
| | | } |
| | | } else if(state.activeName === '膳食调查'){ |
| | | dietarySurveyRef.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; |
| | |
| | | } |
| | | |
| | | } |
| | | |
| | | .patTitle{ |
| | | height: 25px; |
| | | font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; |
| | |
| | | font-style: normal; |
| | | // margin-top: -10px; |
| | | } |
| | | |
| | | .home-title{ |
| | | margin-bottom: 4px; |
| | | flex: 1; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .detailRight{ |
| | | margin-left: 10px; |
| | | background-color: #ffffff; |
| | | } |
| | | .itemDoby{ |
| | | width: 100%; /* 设置容器宽度 */ |
| | | overflow-x: auto; /* 横向内容溢出时显示滚动条 */ |
| | | } |
| | | .fixed-div { |
| | | position: fixed; |
| | |
| | | } |
| | | } |
| | | |
| | | .parent { |
| | | display: grid; |
| | | grid-template-columns: minmax(150px, 20%) 1fr; |
| | | } |
| | | </style> |
| | | |