You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
506 lines
13 KiB
Vue
506 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import NavBar from "@/components/NavBar/index.vue";
|
|
|
|
import { ref, onMounted, reactive } from "vue";
|
|
import addImg from "@/assets/newInquiry/add.png";
|
|
import goBackImg from "@/assets/newInquiry/go_back.png";
|
|
import userAvatar from "@/assets/user.jpg";
|
|
import router from "@/router";
|
|
import {
|
|
queryDiagnoseProcessPageList,
|
|
queryMedicalRecPageList,
|
|
deleteProcess
|
|
} from "@/api/consultation";
|
|
import { getUserInfo } from "@/utils/auth";
|
|
import { useConsultationStoreHooks } from "@/store/modules/consultation";
|
|
import { creatDiagnosisProcesse } from "@/api/inquiry";
|
|
// import { message } from "@/utils/message";
|
|
import { downLoadUrl } from "@/utils/auth";
|
|
import { ElMessageBox } from "element-plus";
|
|
import { message } from "@/utils/message";
|
|
|
|
const addFlag = ref(false);
|
|
const caseList = ref([]);
|
|
const diagnoseProcessList = ref([]); //问诊流程列表
|
|
const medicalRecList = ref([]); //病例信息列表
|
|
const addCase = () => {
|
|
addFlag.value = true;
|
|
caseList.value = medicalRecList.value;
|
|
};
|
|
const goBack = () => {
|
|
addFlag.value = false;
|
|
caseList.value = diagnoseProcessList.value;
|
|
};
|
|
const openCase = async item => {
|
|
// const res: any = await resourceIsFree();
|
|
// if (res.data === true) {
|
|
if (item.status) {
|
|
sessionStorage.setItem(
|
|
"inspectSatus",
|
|
item.status === "3" ? "2" : item.status // 已评估状态和未评估进入页面一样
|
|
);
|
|
if (item.processId) {
|
|
router.push({
|
|
path: "/consultation",
|
|
query: {
|
|
processId: item.processId
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
createProcess(item);
|
|
}
|
|
sessionStorage.setItem("patientSilentVideo", item.patientSilentVideo);
|
|
sessionStorage.setItem("patientDummyVideo", item.patientDummyVideo);
|
|
// } else {
|
|
// message("实例资源占用，请稍后再试", { type: "warning" });
|
|
// }
|
|
};
|
|
const createProcess = async item => {
|
|
const res: any = await creatDiagnosisProcesse({
|
|
medicalId: item.medicalId,
|
|
patientId: item.patientId
|
|
});
|
|
if (res.code === 200) {
|
|
sessionStorage.setItem("inspectSatus", "0");
|
|
router.push({
|
|
path: "/consultation",
|
|
query: {
|
|
processId: res.data.id
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const userPagination = reactive<any>({
|
|
total: 0,
|
|
pageSize: 11,
|
|
currentPage: 1
|
|
});
|
|
const casePagination = reactive<any>({
|
|
total: 0,
|
|
pageSize: 11,
|
|
currentPage: 1
|
|
});
|
|
const getDiagnoseProcessPageList = async () => {
|
|
const userInfo: any = getUserInfo();
|
|
const params = {
|
|
pageNum: userPagination.currentPage,
|
|
pageSize: userPagination.pageSize,
|
|
userId: JSON.parse(userInfo).id
|
|
};
|
|
const res: any = await queryDiagnoseProcessPageList(params);
|
|
|
|
userPagination.total = res.data.total;
|
|
caseList.value = res.data.records;
|
|
|
|
diagnoseProcessList.value = res.data.records;
|
|
userPagination.total = res.data.total;
|
|
};
|
|
const getMedicalRecPageList = async () => {
|
|
const params = {
|
|
pageNum: casePagination.currentPage,
|
|
pageSize: casePagination.pageSize
|
|
};
|
|
const res: any = await queryMedicalRecPageList(params);
|
|
medicalRecList.value = res.data.records;
|
|
casePagination.total = res.data.total;
|
|
if (addFlag.value === true) {
|
|
caseList.value = medicalRecList.value;
|
|
}
|
|
};
|
|
const handleUserChange = val => {
|
|
userPagination.currentPage = val;
|
|
getDiagnoseProcessPageList();
|
|
};
|
|
const handleCaseChange = val => {
|
|
casePagination.currentPage = val;
|
|
getMedicalRecPageList();
|
|
};
|
|
const delItem = async item => {
|
|
ElMessageBox.confirm(item ? `确定删除这条问诊实例”` : "", "提示", {
|
|
type: "warning"
|
|
})
|
|
.then(async () => {
|
|
const res: any = await deleteProcess({ processId: item.processId });
|
|
if (res.code === 200) {
|
|
getDiagnoseProcessPageList();
|
|
getMedicalRecPageList();
|
|
message("删除成功", { type: "success" });
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
onMounted(() => {
|
|
getDiagnoseProcessPageList();
|
|
getMedicalRecPageList();
|
|
sessionStorage.setItem("inspectSatus", "");
|
|
useConsultationStoreHooks().changeInspectSatus("");
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="selectCase">
|
|
<NavBar />
|
|
<div v-if="caseList.length === 0" class="no_data">
|
|
<div class="add_card" @click="addCase">
|
|
<p>选择问诊实例</p>
|
|
<span class="desc">暂无可选择问诊实例，请先新建问诊实例</span>
|
|
<div class="content">
|
|
<img class="add_img" :src="addImg" alt="" />
|
|
<span>新建问诊实例</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="caseList.length > 0" class="main">
|
|
<div class="content">
|
|
<div class="title">选择问诊实例</div>
|
|
<div class="case_list">
|
|
<div v-if="!addFlag" @click="addCase" class="case_list_item add_item">
|
|
<img class="add_img" :src="addImg" alt="" />
|
|
<span>新建问诊实例</span>
|
|
</div>
|
|
<div v-if="addFlag" @click="goBack" class="case_list_item add_item">
|
|
<img class="add_img" :src="goBackImg" alt="" />
|
|
<span>返回问诊历史</span>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in caseList"
|
|
:key="index"
|
|
class="case_list_item"
|
|
@click="openCase(item)"
|
|
>
|
|
<div class="item_info">
|
|
<img v-if="!item.patientHeadPic" :src="userAvatar" alt="" />
|
|
<img
|
|
v-if="item.patientHeadPic"
|
|
:src="downLoadUrl(item.patientHeadPic)"
|
|
alt=""
|
|
/>
|
|
<div class="item_info_content">
|
|
<span class="name">{{ item.name }}</span>
|
|
<span>{{ `年龄：${item.age}岁 性别：${item.gender}` }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="desc" :title="item.patientSelfDesc">
|
|
{{ `主诉：${item.patientSelfDesc}` }}
|
|
</div>
|
|
<div class="time" v-show="item.status">
|
|
{{ `最近问诊时间：${item.time}` }}
|
|
</div>
|
|
<div :class="[addFlag ? 'add_btn_list' : 'btn_list']">
|
|
<div class="del_btn" v-if="!addFlag" @click.stop="delItem(item)">
|
|
删除
|
|
</div>
|
|
<div class="btn" v-if="item.status === '0'">继续问诊</div>
|
|
<div class="btn" v-else-if="item.status === '1'">去处置</div>
|
|
<div class="btn" v-else-if="item.status === '2'">
|
|
查看评估结果
|
|
</div>
|
|
<div class="btn" v-else-if="item.status === '3'">
|
|
查看评估结果
|
|
</div>
|
|
<div class="btn" v-else>开始问诊</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="item.status === '0'"
|
|
style="background-color: #0db274"
|
|
class="type"
|
|
>
|
|
待问诊
|
|
</div>
|
|
<div v-if="item.status === '1'" class="type wait">待处置</div>
|
|
<div v-if="item.status === '2'" class="type determine">已确诊</div>
|
|
<div v-if="item.status === '3'" class="type determine">已评估</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<el-pagination
|
|
v-if="userPagination.total > 11 && !addFlag"
|
|
@current-change="handleUserChange"
|
|
:hide-on-single-page="true"
|
|
background
|
|
:default-page-size="11"
|
|
layout="prev, pager, next"
|
|
:total="userPagination.total"
|
|
class="mt-4"
|
|
/>
|
|
<el-pagination
|
|
v-if="casePagination.total > 11 && addFlag"
|
|
@current-change="handleCaseChange"
|
|
:hide-on-single-page="true"
|
|
background
|
|
:default-page-size="11"
|
|
layout="prev, pager, next"
|
|
:total="casePagination.total"
|
|
class="mt-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.selectCase {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-image: url("../../assets/newInquiry/select_bg.png");
|
|
background-size: 100% 100%;
|
|
|
|
.no_data {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.add_card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 439px;
|
|
height: 445px;
|
|
background: linear-gradient(225deg, #f4f8ff 0%, #fff 46%);
|
|
border-radius: 6px;
|
|
box-shadow: 0 40px 100px 0 rgb(65 149 249 / 30%);
|
|
|
|
p {
|
|
margin-bottom: 8px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #2b3f54;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgb(43 63 84 / 60%);
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 367px;
|
|
height: 193px;
|
|
margin-top: 40px;
|
|
cursor: pointer;
|
|
background: rgb(66 135 255 / 5%);
|
|
border: 1px dashed #4287ff;
|
|
border-radius: 6px;
|
|
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
span {
|
|
margin-top: 8px;
|
|
font-size: 16px;
|
|
color: #4287ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 80px;
|
|
|
|
.content {
|
|
width: 1200px;
|
|
|
|
.title {
|
|
margin-bottom: 24px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #2b3f54;
|
|
}
|
|
|
|
.case_list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.case_list_item {
|
|
position: relative;
|
|
width: 266px;
|
|
height: 210px;
|
|
padding: 16px;
|
|
margin-right: 24px;
|
|
margin-bottom: 24px;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
|
|
.item_info {
|
|
display: flex;
|
|
|
|
img {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.item_info_content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 12px;
|
|
color: #666;
|
|
|
|
.name {
|
|
margin-bottom: 8px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #2b3f54;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
display: -webkit-box;
|
|
height: 40px;
|
|
padding-bottom: 16px;
|
|
margin-top: 16px;
|
|
margin-bottom: 4px;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #2b3f54;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.time {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #999;
|
|
}
|
|
|
|
.btn_list {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
display: flex;
|
|
margin-top: 16px;
|
|
opacity: 1;
|
|
|
|
.del_btn {
|
|
width: 109px;
|
|
height: 29px;
|
|
margin-right: 16px;
|
|
font-size: 14px;
|
|
line-height: 29px;
|
|
color: #999;
|
|
text-align: center;
|
|
border: 1px solid #999;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.btn {
|
|
width: 109px;
|
|
height: 29px;
|
|
line-height: 29px;
|
|
color: #4287ff;
|
|
text-align: center;
|
|
border: 1px solid #4287ff;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
.add_btn_list {
|
|
.btn {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
width: 234px;
|
|
height: 29px;
|
|
margin-top: 16px;
|
|
line-height: 29px;
|
|
color: #4287ff;
|
|
text-align: center;
|
|
border: 1px solid #4287ff;
|
|
border-radius: 6px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.type {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 72px;
|
|
height: 24px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
.wait {
|
|
background: #ffa700;
|
|
}
|
|
|
|
.determine {
|
|
background: #4287ff;
|
|
}
|
|
}
|
|
|
|
.case_list_item:hover {
|
|
box-shadow: 0 40px 100px 0 rgb(65 149 249 / 30%);
|
|
|
|
.btn {
|
|
color: #fff;
|
|
background: #4287ff;
|
|
}
|
|
}
|
|
|
|
.add_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #4287ff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add_img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 32px;
|
|
}
|
|
}
|
|
|
|
.view {
|
|
margin-top: 32px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<!-- <style lang="scss">
|
|
.el-pagination.is-background .btn-next,
|
|
.el-pagination.is-background .btn-prev,
|
|
.el-pagination.is-background .el-pager li {
|
|
background-color: #fff !important;
|
|
}
|
|
.el-pagination.is-background .btn-next.is-active,
|
|
.el-pagination.is-background .btn-prev.is-active,
|
|
.el-pagination.is-background .el-pager li.is-active {
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
</style> -->
|