更新患者档案

chenyc

2024-08-21 59ba223820054f296191f581bd413f5b9cff9e7f

 src/views/home/components/patient_file.vue

@@ -1,33 +1,78 @@
<template>
    <div class="dietarySurvey-home">
        <div v-if="patientsInfo.id">
        <div v-if="patientsInfo.id" v-loading="state.loading">
            <el-card class="box-card">
                <div  class="clearfix">
                    <span>患者基本信息</span> 
                    <el-icon size="16" color="#409efc"><Briefcase /></el-icon>  <span> &nbsp; 服务套餐</span> 
                </div>
                <div>
                   基础服务100套餐
                   膳食套餐，
                   体检套餐，
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top:10px;">
                <div  class="clearfix" >
                    <el-icon size="16" color="#409efc"><CreditCard /></el-icon>  <span> &nbsp; 患者基本信息</span> 
                </div>
                <div>
                    <table class="gridtable">
                        <tr>
                            <td>姓名：{{patientsInfo.patientName}}</td>
                            <td>年龄：{{patientsInfo.age}}</td>
                            <td>年龄：<span v-if="patientsInfo.age">{{patientsInfo.age}}  岁</span></td>
                            <td>性别：{{patientsInfo.patientGenderText}}</td>
                            <td>身高：{{patientsInfo.patientHeight}}</td>
                            <td>干体重：{{state.patientData.干体重}}</td>
                            <td>干体重:<span v-if="state.patientData.干体重">{{state.patientData.干体重}} (kg)</span></td>
                            
                        </tr>
                        <tr>
                            <td>透析龄：{{patientsInfo.dialysisAge}}</td>
                            <td>透析龄：<span v-if="patientsInfo.medHistoryStatByMonth">{{patientsInfo.medHistoryStatByMonth}} (月)</span></td>
                          
                            <td colspan="4">证件号：{{patientsInfo.patientIdentityNo}}</td>
                            
                            <td colspan="4">患者诊断：{{state.patientData.诊断}}</td>
                        </tr>
                        <tr>
                            <td >电话号码：{{patientsInfo.mobile}}</td>
                            <td colspan="2">家庭地址：{{patientsInfo.patientAddress}}</td>
                            <td colspan="2">证件号：{{patientsInfo.patientIdentityNo}}</td>
                            <td >电话号码：{{patientsInfo.patientTelNo}}</td>
                            <td >家属电话：{{patientsInfo.patientTelNoRelative}}</td>
                            <td colspan="3">家庭地址：{{patientsInfo.patientAddress}}</td>
                            
                        </tr>
                        <tr>
                            <td colspan="5">患者诊断：{{state.patientData.诊断}}</td>
                        </tr>
                    </table>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top:10px;">
                <div  class="clearfix" >
                    <el-icon size="16" color="#409efc"><CreditCard /></el-icon>  <span> &nbsp; 最新生化数据</span> 
                </div>
                <div >
                    <el-row :gutter="10" v-if="state.listData.lis">
                  
                        <div v-for="(item, key) in state.listData.lis" :key="key">
                            <div class="itemLis" v-if="item?.结果列表.length>0" >
                                <div class="title">
                                    {{key}}
                                </div>
                                <div  class="itemRes" v-for="(itemRes, resIndex) in item?.结果列表" :key="resIndex">
                                    <div  class="itemResDtile" v-for="(tdKey, ttIndex) in formatResKeys(itemRes)" :key="ttIndex" >
                                       <div>
                                        {{ itemRes[tdKey].name }}
                                       </div>
                                       <div>
                                        {{ itemRes[tdKey].result }}<span class="tdate">{{itemRes[tdKey].unit}}</span>
                                       </div>
                                    </div>
                                </div>
                                <div  class="tdate" >
                                    {{item?.结果列表[0]?.标本日期}}
                                </div>
                               
                            </div>
                          
                        </div>
                    </el-row>
                </div>
            </el-card>
            
@@ -40,10 +85,16 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { usePatientsInfo } from '/@/stores/patientsInfo';
import { computed, reactive } from 'vue';
import { getPatData } from '/@/api/Patients';
import { useUserInfo } from '/@/stores/userInfo';
import { computed, onMounted, reactive } from 'vue';
import { getPatData,getLisResults } from '/@/api/Patients';
import { userInfo } from 'os';
import dayjs from 'dayjs';
const storesPat = usePatientsInfo();
const stores = useUserInfo();

const { patientsInfo } = storeToRefs(storesPat);
const { userInfos } = storeToRefs(stores);
const props = defineProps(['tableHeight'])
const state = reactive({
    tableData: [],
@@ -54,33 +105,122 @@
        证件号:"",
        诊断:'',
        身高:''
    }
    },
    listData:<any>{}
})
const tableHe = computed(() => {
    return props.tableHeight - 130
})
// 第一步：定义子组件里面的方法
const getData = (str: string) => {
    console.log("患者档案子组件获取显示数据！" + str);
    console.log(props.tableHeight)
const getData = async (str: string) => {
    var pam = {
        patCode: patientsInfo.value.code,
    }
    state.loading = true
    getPatData(pam).then(re=>{
        console.log(re.data)
        state.patientData=re.data
    })
    const pam2={
        clientCode:userInfos.value.clientCode,
        patCode:patientsInfo.value.code,
        date1:dayjs().add(-30, 'day').format('YYYY-MM-DD'),
        date2:dayjs().format('YYYY-MM-DD'),
}
    try{
        state.loading = true
        const [res1,res2]=await Promise.all([
            getPatData(pam),
            getLisResults(pam2)
        ])
        state.patientData=res1.data
        state.listData=res2.data
        console.log('lis数据',state.listData)
        state.loading = false
    }
    catch(error){
        state.loading = false
    }
    // console.log("患者档案子组件获取显示数据！" + str);
    // console.log(props.tableHeight)
    // var pam = {
    //     patCode: patientsInfo.value.code,
    // }
    // state.loading = true
    // getPatData(pam).then(re=>{
    //     console.log(re.data)
    //     state.patientData=re.data
    // })
    
}
onMounted(()=>{
    // console.log(dayjs().add(-7, 'day').format('YYYY-MM-DD'),'---shan')
    if(state.listData.lis){
        console.log('有意义------------------')
    }
})
const formatResKeys = (obj: Object) => {
   return Object.keys(obj).filter((k) => k !== '标本日期');
};
const formatResKeysDate = (obj: Object) => {
   return Object.keys(obj).filter((k) => k === '标本日期');
};

// 第二步：暴露方法
defineExpose({ getData })
</script>

<style  lang="scss">
 .gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;width: 100%;}
 .gridtable {font-family: verdana,arial,sans-serif;font-size:14px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;width: 100%;}

.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}

.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}
.clearfix{
    font-weight: 800;
    flex: 1;
    height: inherit;
    display: flex;
    align-items: center;
    margin-top: -10px;margin-bottom: 10px;
}

.itemLis{
    min-width: 120px;
    padding-left: 10px;
    padding-right: 10px;
    height: 100px;
    // margin-top: 10px;
    // line-height: 33px;
    border: 1px solid #c7c9cd;
    border-left: 3px solid #409EFF;
    border-radius: 5px;
    text-align: center;
    margin-left: 10px;
    .title{
        text-align: left;
        color: #909399;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
    }
    .itemRes{
        height: 60px;
        flex: 1;
        display: flex;
        align-items: center;
        color: #303133;
        font-size: 16px;
        div{
            line-height: 30px;text-align: center; padding-left: 10px; padding-right: 10px;
        }
        .itemResDtile:not(:first-child) {
            /* 在这里添加你想要的样式 */
            border-left: 1px solid #909399; /* 示例样式：为除第一个div外的所有div添加红色边框 */
        }
    }
    .tdate{
        color: #909399;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
    }
}


</style>