chenyc
2024-09-14 901c277599e4abd4fc2f0cde8f9c2b853e779d5a
src/views/home/index.vue
@@ -1,21 +1,19 @@
<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>
@@ -27,21 +25,24 @@
                    </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>
@@ -50,16 +51,20 @@
                    <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>
@@ -68,16 +73,20 @@
                    <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>
@@ -86,7 +95,9 @@
                    <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>
@@ -95,19 +106,31 @@
                    <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>
@@ -143,6 +166,7 @@
const patientFileRef=ref()
const currentRow=ref()
const lisUiRef=ref()
const dietarySurveyRef=ref()// 膳食调查
const state = reactive({
   global: {
      homeChartOne: null,
@@ -156,15 +180,14 @@
        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 中
@@ -216,33 +239,36 @@
};
/** 切换明细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;
@@ -252,6 +278,7 @@
    }
   
}
.patTitle{
    height: 25px;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -264,6 +291,7 @@
    font-style: normal;
    // margin-top: -10px;
}
.home-title{
    margin-bottom: 4px;
    flex: 1;
@@ -271,8 +299,14 @@
    display: flex;
    align-items: center;
}
.detailRight{
    margin-left: 10px;
    background-color: #ffffff;
}
.itemDoby{
    width: 100%; /* 设置容器宽度 */
    overflow-x: auto; /* 横向内容溢出时显示滚动条 */
}
.fixed-div {
    position: fixed;
@@ -295,5 +329,8 @@
    }
  }
.parent {
    display: grid;
    grid-template-columns: minmax(150px, 20%) 1fr;
}
</style>