352 lines
9.6 KiB
Vue
352 lines
9.6 KiB
Vue
<template>
|
||
<div :style="{ height: maxTableHeight + 'px' }" class="cardlist">
|
||
<div v-for="(item, index) in patientInfoList" :key="item.id">
|
||
<div @dblclick="handleAuthRole(item, index)" class="cards">
|
||
<div class="carditem">
|
||
<div class="top">
|
||
<img v-if="item.sex == 'FEMALE'" src="../../../assets/manage/nvtouxiang.png" alt="" class="img"
|
||
@click="handleAuth(item, index)" />
|
||
<img v-if="item.sex == 'MALE'" src="../../../assets/manage/touxiang.png" alt="" class="img"
|
||
@click="handleAuth(item, index)" />
|
||
<el-tooltip class="name" effect="dark" :content="item.patientName" placement="top">
|
||
<span @click="handleAuth(item, index)">
|
||
{{ item.patientName }}
|
||
</span>
|
||
</el-tooltip>
|
||
<div class="agesex">
|
||
{{ item.sex == "MALE" ? "男" : "" }}
|
||
{{ item.sex == "FEMALE" ? "女" : "" }}
|
||
<span style="padding: 0 1px">|</span>
|
||
<span v-if="item.age"> {{ item.age }}岁 </span>
|
||
<span class="zy" v-if="item.patientType == 'IN_HOSPITAL_PATIENT'">在院</span>
|
||
<span class="cy" v-if="item.patientType == 'DISCHARGED_PATIENT'">出院</span>
|
||
<span class="yzy" v-if="item.patientType == 'PRE_HOSPITALIZED_PATIENT'">预住院</span>
|
||
<span class="mz" v-if="item.patientType == 'OUTPATIENT'">门诊</span>
|
||
<!-- <span class="mz" v-if="item.patientType == 'CONTRACTED_PATIENT'">签约</span> -->
|
||
</div>
|
||
<div class="diagnosis">诊断名称：{{ item.mainDiagnosis }}</div>
|
||
<div class="diagnosi">诊断状态：{{ item.patientSignStatus }}</div>
|
||
<div class="formitembutton" @click.stop="handleedit(item)">
|
||
画像编辑
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="formitem">医生：{{ item.attendingPhysicianName }}</div>
|
||
<div class="formitem">科室：{{ item.departmentName }}</div>
|
||
<div class="formitem">就诊时间：{{ item.visitDate }}</div>
|
||
<div class="formitem flex">
|
||
<span> 康复计划执行率：</span>
|
||
<el-progress v-if="item.taskExecuteRate == 0 || item.taskExecuteRate == null"
|
||
:percentage="0"></el-progress>
|
||
<el-progress v-else :percentage="item.taskExecuteRate"></el-progress>
|
||
<span style="flex: 0.1">({{ item.taskExecuteNum }}/{{ item.taskNum }})</span>
|
||
</div>
|
||
<div class="formitem flex">
|
||
<span> 康复计划完成率： </span>
|
||
<el-progress v-if="item.taskFinishRate == 0 || item.taskFinishRate == null" :percentage="0"></el-progress>
|
||
<el-progress v-else :percentage="item.taskFinishRate"></el-progress>
|
||
<span style="flex: 0.1">({{ item.taskFinishNum }}/{{ item.taskNum }})</span>
|
||
</div>
|
||
<div class="formitem">下次任务：{{ item.nextTaskName }} - {{ item.nextTaskTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getAge } from "@/utils/age";
|
||
|
||
export default {
|
||
name: "cardlist",
|
||
props: {
|
||
maxTableHeight: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
patientInfoList: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isDoubleClicked: false,
|
||
};
|
||
},
|
||
mounted() { },
|
||
methods: {
|
||
// 单机头像和姓名进入详情
|
||
handleAuth(item, index) {
|
||
this.$router.push({
|
||
path: "/patient/patientdetails",
|
||
query: {
|
||
path: "/patient/patientInfo",
|
||
patientId: item.id,
|
||
cardNo: item.cardNo,
|
||
patientName: item.patientName,
|
||
patientPhone: item.patientPhone,
|
||
sex: item.sex,
|
||
birthDate: item.birthDate,
|
||
familyMemberPhone: item.familyMemberPhone,
|
||
address: item.address,
|
||
patientSource: item.patientSource,
|
||
createTime: item.createTime,
|
||
age: item.birthDate ? getAge(item.birthDate) : "",
|
||
},
|
||
});
|
||
},
|
||
// 双击进入详情
|
||
handleAuthRole(item, index) {
|
||
//这里写你实现双击后的逻辑代码
|
||
this.$router.push({
|
||
path: "/patient/patientdetails",
|
||
query: {
|
||
path: "/patient/patientInfo",
|
||
patientId: item.id,
|
||
cardNo: item.cardNo,
|
||
patientName: item.patientName,
|
||
patientPhone: item.patientPhone,
|
||
sex: item.sex,
|
||
birthDate: item.birthDate,
|
||
familyMemberPhone: item.familyMemberPhone,
|
||
address: item.address,
|
||
patientSource: item.patientSource,
|
||
createTime: item.createTime,
|
||
age: item.birthDate ? getAge(item.birthDate) : "",
|
||
},
|
||
});
|
||
|
||
},
|
||
// 画像编辑
|
||
handleedit(item) {
|
||
this.$router.push({
|
||
path: "/patient/Portraitedit",
|
||
query: {
|
||
path: "/patient/patientInfo",
|
||
patientId: item.id,
|
||
cardNo: item.cardNo,
|
||
patientName: item.patientName,
|
||
patientPhone: item.patientPhone,
|
||
sex: item.sex,
|
||
birthDate: item.birthDate,
|
||
familyMemberPhone: item.familyMemberPhone,
|
||
address: item.address,
|
||
patientSource: item.patientSource,
|
||
createTime: item.createTime,
|
||
hospitalAgencyName: item.hospitalAgencyName,
|
||
mainDiagnosis: item.mainDiagnosis,
|
||
age: item.birthDate ? getAge(item.birthDate) : "",
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.cards {
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
// width: 100%;
|
||
// height: 256px;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
z-index: 9999;
|
||
border: 2px solid #fff;
|
||
}
|
||
|
||
.cards:hover {
|
||
border: 2px solid #1890ff;
|
||
}
|
||
|
||
.cardlist {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
overflow-y: auto;
|
||
|
||
.carditem {
|
||
// margin-right: 10px;
|
||
// margin-bottom: 10px;
|
||
width: 260px;
|
||
min-height: 200px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
|
||
.bottom {
|
||
// height: 165px;
|
||
padding: 0 6px;
|
||
|
||
.formitem {
|
||
height: 26px;
|
||
line-height: 26px;
|
||
font-size: 12px;
|
||
color: #756a5e;
|
||
font-weight: 550;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
::v-deep .el-progress-bar {
|
||
flex: 1;
|
||
}
|
||
|
||
::v-deep .el-progress__text {
|
||
font-size: 12px !important;
|
||
flex: 0.5;
|
||
text-align: right;
|
||
}
|
||
|
||
span {
|
||
flex: 0.5;
|
||
max-width: 50%;
|
||
}
|
||
|
||
::v-deep .el-progress {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top {
|
||
height: 85px;
|
||
background-color: #f7f8fa;
|
||
position: relative;
|
||
border-radius: 10px 10px 0 0;
|
||
margin-bottom: 10px;
|
||
|
||
.img {
|
||
margin: 10px 0 0 10px;
|
||
width: 50px;
|
||
height: 50px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.agesex {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 16px;
|
||
|
||
//预住院
|
||
.yzy {
|
||
background-color: #e8f4ec;
|
||
color: #2fb844;
|
||
border: 1.5px solid #2fb844;
|
||
border-radius: 2px;
|
||
padding: 3px 5px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
//门诊
|
||
.mz {
|
||
background-color: #dfe4f6;
|
||
color: #2d56fb;
|
||
border: 1.5px solid #2d56fb;
|
||
border-radius: 2px;
|
||
padding: 3px 5px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
// 在院
|
||
.zy {
|
||
background-color: #deedf4;
|
||
color: #1d98c6;
|
||
border: 1.5px solid #1d98c6;
|
||
border-radius: 2px;
|
||
padding: 3px 5px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
// 出院
|
||
.cy {
|
||
background-color: #deefee;
|
||
color: #2a9a82;
|
||
border: 1.5px solid #2a9a82;
|
||
border-radius: 2px;
|
||
padding: 3px 5px;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
.diagnosis {
|
||
position: absolute;
|
||
color: #756a5e;
|
||
font-weight: 550;
|
||
left: 70px;
|
||
top: 42px;
|
||
font-size: 12px;
|
||
height: 32px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.diagnosi {
|
||
position: absolute;
|
||
color: #756a5e;
|
||
font-weight: 550;
|
||
left: 70px;
|
||
top: 60px;
|
||
font-size: 12px;
|
||
height: 32px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.formitembutton {
|
||
position: absolute;
|
||
color: #756a5e;
|
||
font-weight: 550;
|
||
left: 200px;
|
||
top: 60px;
|
||
font-size: 12px;
|
||
height: 19px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.formitembutton:hover {
|
||
color: #2d56fb;
|
||
border-bottom: 1px solid #2d56fb;
|
||
cursor: pointer;
|
||
|
||
}
|
||
|
||
.name {
|
||
position: absolute;
|
||
left: 70px;
|
||
top: 16px;
|
||
width: 76px;
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
overflow: hidden;
|
||
/* 超出容器部分隐藏 */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分显示省略号 */
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|