319 lines
8.3 KiB
Vue
319 lines
8.3 KiB
Vue
<template>
|
|
<div class="header">
|
|
<div class="topheader">
|
|
<div class="user">
|
|
<img
|
|
class="headsculpture"
|
|
src="../../../assets/manage/touxiang.png"
|
|
alt=""
|
|
v-if="$route.query.sex == 'MALE'"
|
|
/>
|
|
<img
|
|
class="headsculpture"
|
|
src="../../../assets/manage/nvtouxiang.png"
|
|
alt=""
|
|
v-if="$route.query.sex == 'FEMALE'"
|
|
/>
|
|
<div class="name">
|
|
{{ $route.query.patientName }}
|
|
</div>
|
|
<div class="gender">
|
|
{{
|
|
$route.query.sex == "MALE"
|
|
? "男"
|
|
: $route.query.sex == "FEMALE"
|
|
? "女"
|
|
: ""
|
|
}}
|
|
</div>
|
|
|
|
|
|
|
|
<div class="source">
|
|
<div
|
|
class="item"
|
|
style="color: #00e06e; border-color: #00e06e"
|
|
v-if="$route.query.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'"
|
|
>
|
|
<img
|
|
src="../../../assets/manage/gzh.png"
|
|
alt=""
|
|
style="width: 24px"
|
|
/>
|
|
<div>公众号</div>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
style="color: #339de5; border-color: #339de5"
|
|
v-if="$route.query.patientSource == 'WE_CHAT_APPLET'"
|
|
>
|
|
<img src="../../../assets/manage/xcx.png" alt="" />
|
|
<div>小程序</div>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
style="color: #f4881f; border-color: #f4881f"
|
|
v-if="$route.query.patientSource == 'MANAGE_END'"
|
|
>
|
|
<img src="../../../assets/manage/gld.png" alt="" />
|
|
<div>管理端</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="age">
|
|
{{ $route.query.age }}
|
|
</div>
|
|
<div class="age">
|
|
身份证号：{{ $route.query.patientPhone}}
|
|
</div>
|
|
<div class="age">
|
|
患者电话：{{ $route.query.patientPhone}}
|
|
</div>
|
|
<div class="age">
|
|
出生日期：{{ $route.query.birthDate}}
|
|
</div>
|
|
<div class="age">
|
|
预约时间：{{ $route.query.appointmentDate}}
|
|
</div>
|
|
<div class="rihgt">
|
|
<Button v-show="collapsiable" type="text" @click="shiftCollapsiable" size="mini">
|
|
<span style="font-size:14px">
|
|
{{ fold ? '收起' : '展开' }}
|
|
<i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div class="information" v-if="!fold">
|
|
<div class="top">
|
|
<div>家属电话：{{ $route.query.familyMemberPhone }}</div>
|
|
<div>登记日期：{{ $route.query.registrationDate }}</div>
|
|
<div>开证医生：{{ $route.query.certificateIssuingDoctorName }}</div>
|
|
<div style="width: 50%">主要诊断：{{ $route.query.mainDiagnosis }}</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div>医院名称：{{ $route.query.hospitalAgencyName }}</div>
|
|
<div>院区名称：{{ $route.query.campusAgencyName }}</div>
|
|
<div>科室名称：{{ $route.query.departmentName }}</div>
|
|
<div style="width: 50%">预约病区：{{ $route.query.wardName }}</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div>注册时间：{{ $route.query.createTime }}</div>
|
|
<div>预约治疗组：{{ $route.query.appointmentTreatmentGroup }}</div>
|
|
<div>责任护士：{{ $route.query.responsibleNurse }}</div>
|
|
<div style="width: 50%">登记号：{{ $route.query.registrationNo }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="selectitem" v-if="activeName == 'second'&&value">
|
|
<el-select v-model="value" placeholder="请选择" @change="changeitem">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.signRouteName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="bottomheader">
|
|
<el-tabs v-model="activeName">
|
|
<el-tab-pane label="就诊记录" name="first">
|
|
<visitRecords :fold=fold></visitRecords>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="康复计划及记录" name="second">
|
|
<RehabilitationPlanandRecords
|
|
v-if="activeName == 'second'"
|
|
:signPatientRecordld="signPatientRecordld"
|
|
:fold=fold
|
|
></RehabilitationPlanandRecords>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="健康宣教" name="third">
|
|
<healthEducation v-if="activeName == 'third'" :fold=fold></healthEducation>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="指标监测" name="fourth">
|
|
<indicatorMonitoring
|
|
v-if="activeName == 'fourth'"
|
|
></indicatorMonitoring>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="签约记录" name="five">
|
|
<signingRecords v-if="activeName == 'five'" :fold=fold></signingRecords>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getRecordLists } from "@/api/manage/signingRecords";
|
|
|
|
import visitRecords from "../components/visitRecords.vue";
|
|
import healthEducation from "../components/healthEducation.vue";
|
|
import indicatorMonitoring from "../components/indicatorMonitoring.vue";
|
|
import signingRecords from "../components/signingRecords.vue";
|
|
import RehabilitationPlanandRecords from "../components/RehabilitationPlanandRecords.vue";
|
|
import { Button } from 'element-ui'
|
|
|
|
export default {
|
|
components: {
|
|
//就诊记录
|
|
visitRecords,
|
|
//健康宣教
|
|
healthEducation,
|
|
//指标监测
|
|
indicatorMonitoring,
|
|
// 签约记录
|
|
signingRecords,
|
|
//康复计划
|
|
RehabilitationPlanandRecords,
|
|
Button
|
|
},
|
|
name: "patientdetails",
|
|
data() {
|
|
return {
|
|
fold: true,
|
|
collapsiable: true,
|
|
options: [],
|
|
value: "",
|
|
activeName: "first",
|
|
signPatientRecordld: "",
|
|
};
|
|
},
|
|
created() {
|
|
console.log(1111111111);
|
|
// if(this.activeName == 'second'){
|
|
this.info();
|
|
|
|
// }
|
|
},
|
|
methods: {
|
|
// 展开/收起
|
|
shiftCollapsiable() {
|
|
this.fold = !this.fold
|
|
},
|
|
changeitem(e) {
|
|
console.log(e, "e");
|
|
this.signPatientRecordld = e;
|
|
},
|
|
info() {
|
|
getRecordLists(this.$route.query.patientId).then((res) => {
|
|
console.log(res, "res");
|
|
this.options = res.data;
|
|
this.value = res.data[0].signRouteName;
|
|
this.signPatientRecordld = res.data[0].id;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep.el-tabs__nav-scroll {
|
|
overflow: hidden;
|
|
width: 600px;
|
|
}
|
|
.selectitem {
|
|
display: inline-block;
|
|
width: 220px;
|
|
position: absolute;
|
|
right: 20px;
|
|
z-index: 999;
|
|
line-height: 65px;
|
|
}
|
|
.header {
|
|
background-color: #f1f3f5;
|
|
padding-top: 10px;
|
|
|
|
::v-deep .el-tabs__header {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.bottomheader {
|
|
width: 99%;
|
|
background-color: #fff;
|
|
margin: 10px auto;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.topheader {
|
|
width: 99%;
|
|
background-color: #fff;
|
|
margin: 0 auto;
|
|
|
|
.information {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 10px 20px;
|
|
height: 110px;
|
|
|
|
.top,
|
|
.bottom {
|
|
color: #666666;
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
div {
|
|
width: 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user {
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
height: 80px;
|
|
align-items: center;
|
|
line-height: 80px;
|
|
|
|
.source {
|
|
display: flex;
|
|
|
|
.item {
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
margin-left: 20px;
|
|
border: 1px solid #c7c7c7;
|
|
width: 100px;
|
|
border-radius: 5px;
|
|
justify-content: center;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 20px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.gender {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.age {
|
|
padding-left: 10px;
|
|
}
|
|
.rihgt{
|
|
position: absolute;
|
|
right: 40px;
|
|
|
|
}
|
|
|
|
.headsculpture {
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|