gx

chenyc

2025-02-28 142a750b078c089a3f5373db7874f96ca93f458a

 src/views/home/index.vue

@@ -1,122 +1,168 @@
<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%">
    <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>
                                <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" />

                            <el-row style="margin-top: 5px;">
                                <el-col :span="10">姓名</el-col>
                                <el-col :span="5">性别</el-col>
                                <el-col :span="4">年龄</el-col>
                                <el-col :span="5">床号</el-col>
                            </el-row>
                        </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-col :span="10">{{ scope.row.patientName }}</el-col>
                                <el-col :span="5">{{ scope.row?.patientGender===0?'男':'女' }}</el-col>
                                <el-col :span="4">{{ scope.row.age }}</el-col>
                                <el-col :span="5">{{ scope.row.deviceNo }}</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-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>
                                <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>
                                <el-icon>
                                    <Histogram />
                                </el-icon>
                                <span style="margin-left: 5px">营养筛查评估</span>
                            </span>
                        </template>
                        Task
                    </el-tab-pane>
                    <el-tab-pane label="方案" name="方案">
                    <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>
                                <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>
                                    <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><ChatDotRound /></el-icon>
                                <el-icon>
                                    <ChatDotRound />
                                </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>
                    </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>
                                    <Edit />
                                </el-icon>
                                <span style="margin-left: 5px">营养服务管理记录</span>
                            </span>
                        </template>

                    </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>
                    <shiwuguoming ref="shiwuguomingRef" v-show="state.activeName === '食物过敏原及胃肠功能调查'"  :tableHeight="state.tableHeight.detailRight"></shiwuguoming>
                    <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>

                    <jilubiao ref="jilubiaoRef" v-show="state.activeName === '营养服务管理记录'" :tableHeight="state.tableHeight.detailRight"></jilubiao>


                </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>
    </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 { QueryList,getRecordsInToday2 } from '/@/api/Patients'
import { storeToRefs } from 'pinia';
import {formatDate} from '/@/utils/formatTime'
import { useUserInfo } from '/@/stores/userInfo';
import { usePatientsInfo } from '/@/stores/patientsInfo';
const stores = useUserInfo();
@@ -126,133 +172,191 @@
import { ElLoading, TabsPaneContext } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
// 用药记录
import MedicationRecords from './components/Medication_records.vue' 
import MedicationRecords from './components/Medication_records.vue'
// 膳食调查
import dietarySurvey from './components/dietary_survey.vue'
import shiwuguoming from './components/shiwuguoming/index.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'
// 营养记录表
import jilubiao from './components/jilubiao/index.vue'
interface User {
    code:string,
    code: string,
    patientName: string
    patientGenderText: string
    age: string
}
const MedicationRecordsRef=ref()
const patientFileRef=ref()
const currentRow=ref()
const lisUiRef=ref()
const MedicationRecordsRef = ref()
const patientFileRef = ref()
const currentRow = ref()
const lisUiRef = ref()
const pinggubiaoRef=ref()
const dietarySurveyRef=ref()// 膳食调查
const shiwuguomingRef=ref()
const fangAnRef=ref()
const suifangjiluRef=ref()
const jilubiaoRef=ref()
const state = reactive({
   global: {
      homeChartOne: null,
      homeChartTwo: null,
      homeCharThree: null,
      dispose: [null, '', undefined],
   } as any,
    filterTableData:[],
    activeName:'膳食调查',
    tableHeight:{
        left:0,
        detailRight:0
    global: {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    } as any,
    filterTableData: [],
    activeName: '患者档案',
    tableHeight: {
        left: 0,
        detailRight: 0
    },
    search:''
    search: '',
    isTable: true,
});
onMounted(()=>{
onMounted(() => {
    setTableHeight()
    getPatients()
})
const handleCurrentChange = (val: any | undefined) => {
    console.log('-----------------333')
    console.log(val)
    if(val){
    if (val) {
        console.log(val)
        currentRow.value = val
        const ps={
            id: val.patientId,
         code: val.patientCode,
         age: val.age,
         patientName:val.patientName,
         patientGenderText: val?.patientGender?'女':'男',
         patientAvatarIcon: val?.patientAvatar,
         clientCode:val.clientCode
        }
        //缓存到vuex 中
        storesPat.setPatientsInfo(val)
        storesPat.setPatientsInfo(ps)
        getTabsData()
    }
}
/**获取患者列表 */
const getPatients=()=>{
const getPatients = () => {
    // 初始化患者信息
    storesPat.setPatientsInfo({
        id: '',
        code: '',
        age: 0,
        patientName: '',
        patientGenderText: '',
        patientAvatarIcon: '',
        clientCode:''

    })
    // 患者信息查询条件
    const pp={
        timeSlot:3,
        patientFrom:-1,
        patientName:state.search.toLowerCase(),
        orderCondition:2,
        clientCode:userInfos.value.clientCode,
        dateBegin:formatDate(new Date(),'YYYY-mm-dd')+ " 00:00:00",
        dateEnd:formatDate(new Date(),'YYYY-mm-dd')+" 23:59:59"
    }
    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()
    })
    getRecordsInToday2(pp).then(re=>{
        console.log(re.data)
        state.filterTableData = re.data
    }).finally(() => {
         loading.close()
     })
    
    // 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(() => {
    //     loading.close()
    // })
}
/**设置高度 */
const setTableHeight = () => {
   let height = document.documentElement.clientHeight;
    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')
    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
const handleClick = (tab: TabsPaneContext, event: Event) => {
    state.activeName = tab.paneName as string
    getTabsData()
}
/** 获取明细项数据 */
const getTabsData=()=>{
    if(MedicationRecordsRef.value&&patientsInfo.value.id){
        if(state.activeName==='用药记录'){
const getTabsData = () => {
    if (patientsInfo.value.id) {
        if (state.activeName === '用药记录') {
            MedicationRecordsRef.value.getData()
        }else if(state.activeName==='患者档案'){
            console.log(patientFileRef.value)
        } else if (state.activeName === '患者档案') {
            patientFileRef.value.getData()
        } else if(state.activeName === '膳食调查'){
            dietarySurveyRef.value.getData()
        }else if(state.activeName === '食物过敏原及胃肠功能调查'){
            shiwuguomingRef.value.getData()
        }
        
        else if(state.activeName === '营养筛查评估'){
            pinggubiaoRef.value.getData()
           
        }else if(state.activeName==='营养饮食指导方案'){
            fangAnRef.value.getData()
        }else if(state.activeName==='随访记录'){
            suifangjiluRef.value.getData()
        }else if(state.activeName==='营养服务管理记录'){
            jilubiaoRef.value.getData()
        }
    }
}
</script>

<style  lang="scss">
$homeNavLengh: 8;
<style lang="scss">
.home-container {
   overflow: hidden;
    .patTabel{
    overflow: hidden;

    .patTabel {
        .el-table th.el-table__cell {
            background-color: #6babfa; 
            color:#606266;
            background-color: #6babfa;
            color: #ffffff;
        }
        .el-table__body tr.current-row>td.el-table__cell{
            background: #E4F6DE;
            color: #5FCD00;

        .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{

.patTitle {
    height: 25px;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
@@ -264,15 +368,22 @@
    font-style: normal;
    // margin-top: -10px;
}
.home-title{

.home-title {
    margin-bottom: 4px;
    flex: 1;
    height: inherit;
    display: flex;
    align-items: center;
}
.detailRight{

.detailRight {
    margin-left: 10px;
    background-color: #ffffff;
}
.itemDoby{
    width: 100%; /* 设置容器宽度 */
    overflow-x: auto; /* 横向内容溢出时显示滚动条 */
}
.fixed-div {
    position: fixed;
@@ -283,17 +394,15 @@
    right: 30px;
    width: 200px;
    height: 100px;
    background-color:#ffffff;
    color: rgb(16, 3, 3);
    padding: 10px;
    z-index: 999;
    
    div{

    div {
        font-weight: 800;
        margin-left: 10px;
        font-size: 20px;
    }
  }
}

</style>