postdischarge-ui/src/views/system/followupdetails/index.vue
2024-07-15 16:58:44 +08:00

892 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="headernew">
<div class="topheaderlist">
<div class="userlist">
<img
class="headsculpture"
src="../../../assets/manage/touxiang.png"
alt=""
v-if="list.sex == 'MALE'"
/>
<img
class="headsculpture"
src="../../../assets/manage/nvtouxiang.png"
alt=""
v-if="list.sex == 'FEMALE'"
/>
<div class="name">
{{ list.patientName }}
</div>
<div class="gender">
{{ list.sex == "MALE" ? "男" : list.sex == "FEMALE" ? "女" : "" }}
</div>
<div class="age">
{{ list.age }}
</div>
</div>
<div class="informationlist">
<div class="top">
<div>身份证号:{{ list.cardNo }}</div>
<div>患者电话:{{ list.patientPhone }}</div>
<div style="width: 50%">出生日期:{{ list.birthDate }}</div>
</div>
<div class="bottom">
<div>家属电话:{{ list.familyMemberPhone }}</div>
<div style="width: 50%">住址:{{ list.address }}</div>
</div>
</div>
</div>
<el-dialog title="话术预览" :visible.sync="lookshow" width="90%">
<Scriptpreview
:phoneNodeContent="phoneNodeContent"
v-if="lookshow"
></Scriptpreview>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="lookshow = false">确 定</el-button>
</span>
</el-dialog>
<div class="bottomheader">
<div style="display: flex">
<!-- 问卷模板 -->
<div
class="right"
v-if="
$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'
"
>
<div
class="handle"
v-if="
$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'
"
>
<el-form
:inline="true"
class="demo-form-inline"
:model="questiondata"
:rules="rules"
ref="questiondata"
>
<el-form-item label="任务处理信息" prop="routeHandleRemark">
<el-input
disabled
type="textarea"
placeholder="请输入任务处理信息"
v-model="questiondata.routeHandleRemark"
/>
</el-form-item>
</el-form>
</div>
<div
class="sport"
v-if="$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'"
>
问卷模板: Barthel指数评定问卷
</div>
<div
class="words"
v-if="$route.query.taskNodeType == 'QUESTIONNAIRE_SCALE'"
>
您好!本问卷用于评估日常生活能力,请根据自身日常实际表现选择合适的选项。
</div>
<!-- <div
class="sport"
v-if="$route.query.taskNodeType == 'ARTIFICIAL_FOLLOW_UP'"
>
人工随访模板: 神经内科人工随访
</div>
<div
class="words"
v-if="$route.query.taskNodeType == 'ARTIFICIAL_FOLLOW_UP'"
>
**您好!
</div>
<div
class="words"
v-if="$route.query.taskNodeType == 'ARTIFICIAL_FOLLOW_UP'"
>
我是✕✕医院的工作人员,今天给您打电话想要了解一下您的恢复情况。
</div> -->
<div
class="words"
v-for="(item, index) in questiondata.subjectResultList"
:key="index"
>
{{ index + 1 }}.{{ item.questionName }}
<span v-if="item.questionType == 'MULTIPLE_CHOICE'"
>(单选题)</span
>
<span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
>(多选题)</span
>
<span v-if="item.questionType == 'SCORING_QUESTIONS'"
>(打分题)</span
>
<span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
>(组合单选题)</span
>
<span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
>(组合多选题)</span
>
<span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'"
>(组合填空题)</span
>
<span v-if="item.questionType == 'FILL_IN_THE_BLANKS'"
>(填空题)</span
>
<span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'"
>(组合打分题)</span
>
<span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
>(日期填空题)</span
>
<span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
>(时间填空题)</span
>
<el-radio-group
v-if="
item.questionType == 'MULTIPLE_CHOICE' ||
item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
item.questionType == 'SCORING_QUESTIONS' ||
item.questionType == 'COMBINATION_SCORING_SUBJECT'
"
v-model="item.checked"
class="custom-radio-group"
>
<el-radio
disabled
class="custom"
v-for="(aitem, aindex) in item.optionResults"
:key="aindex"
:label="aitem.id"
@change="radioChange($event, aitem, index)"
>{{ aitem.optionName }}</el-radio
>
</el-radio-group>
<!-- 多选、组合多选 -->
<el-checkbox-group
v-model="checkeddata"
v-if="
item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
"
>
<el-checkbox
disabled
v-for="(aitem, aindex) in item.optionResults"
:key="aindex"
:label="aitem.id"
@change="radioChangecheck($event, aitem, index, aindex)"
>{{ aitem.optionName }}</el-checkbox
>
</el-checkbox-group>
<!-- 填空题、组合填空 -->
<div
v-if="
item.questionType == 'FILL_IN_THE_BLANKS' ||
item.questionType == 'COMBINATION_BLANKS_SUBJECT'
"
class="tk"
>
<el-input
disabled
v-model="item.fillBlanksAnswer"
placeholder="请输入答案"
type="textarea"
/>
<!-- <el-input></el-input> -->
</div>
<!-- 日期填空题、 -->
<div
v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
style="margin: 20px 0 10px 30px"
>
<el-date-picker
disabled
@change="timepicker($event, index)"
clearable
v-model="item.fillBlanksAnswer"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
>
</el-date-picker>
</div>
<!-- 时间填空题 -->
<div
style="margin: 20px 0 10px 30px"
v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
>
<el-time-select
disabled
@change="timepickerselect($event, index)"
clearable
v-model="item.fillBlanksAnswer"
:picker-options="{
start: '08:30',
step: '00:30',
end: '23:30',
}"
placeholder="选择时间"
>
</el-time-select>
</div>
</div>
</div>
<!-- 电话外呼 -->
<!-- <div v-if="$route.query.taskNodeType == 'PHONE_OUTBOUND'">
<div class="sport">电话外呼</div>
<div class="nexttime">
<el-form
ref="form"
:model="formlist"
label-width="110px"
:inline="true"
>
<el-form-item label="话术名称" prop="scriptName">
<el-input
disabled
v-model="formlist.scriptName"
placeholder="请输入话术名称"
/>
</el-form-item>
<br />
<el-form-item label="通用话术名称" prop="commonScriptName">
<el-input
disabled
v-model="formlist.commonScriptName"
placeholder="请输入通用话术名称"
/>
</el-form-item>
<br />
<el-form-item label="话术简介" prop="scriptIntroduction">
<el-input
disabled
type="textarea"
v-model="formlist.scriptIntroduction"
placeholder="请输入话术简介"
/>
</el-form-item>
<br />
<el-form-item label="任务处理信息" prop="routeHandleRemark">
<el-input
disabled
type="textarea"
v-model="questiondata.routeHandleRemark"
placeholder="请输入任务处理信息"
/>
</el-form-item>
</el-form>
</div> -->
<div v-if="$route.query.taskNodeType == 'PHONE_OUTBOUND'">
<div class="sport">电话外呼</div>
<div class="nexttime">
<el-form
ref="formlist"
:model="formlist"
label-width="110px"
:inline="true"
>
<el-form-item label="电话" prop="patientPhone">
<el-input
disabled
v-model="formlist.patientPhone"
placeholder="请输入电话"
/>
</el-form-item>
<br />
<el-form-item label="是否接通" prop="phone">
<el-radio
v-model="formlist.phoneConnectStatus"
label="CONNECTED"
>已接通</el-radio
>
<el-radio
v-model="formlist.phoneConnectStatus"
label="NOTCONNECTED"
>未接通</el-radio
>
</el-form-item>
<br />
<el-form-item label="通用话术名称" prop="phoneTemplateName">
<el-input
disabled
v-model="formlist.phoneTemplateName"
placeholder="请输入通用话术名称"
/>
</el-form-item>
<br />
<el-form-item label="重复次数" prop="phoneRedialTimes">
<el-input
disabled
v-model="formlist.phoneRedialTimes"
placeholder=""
/>
</el-form-item>
<br />
<el-form-item label="电话短信提醒" prop="phone">
<el-input
disabled
v-model="formlist.phoneMessageRemind"
placeholder=""
/>
</el-form-item>
<br />
<el-form-item label="短信模板:" prop="phone">
<span class="spanname">
<message
style="width: 200px; height: 50px"
@on-template="messageontemplateMESSAGE"
:templateId="formlist.phoneMessageTemplateId"
:templateName="formlist.phoneMessageTemplateName"
>
</message>
</span>
</el-form-item>
<br />
<el-form-item label="话术图" prop="phone">
<!-- <img :src="formlist.scriptFilePath" style="width: 250px; height: 200px" /> -->
<el-button
type="primary"
size="small"
@click="scriptlook(formlist.phoneNodeContent)"
>预览</el-button
>
</el-form-item>
<br />
<el-form-item label="任务处理信息" prop="routeHandleRemark">
<el-input
type="textarea"
v-model="formlist.routeHandleRemark"
style="width: 500px"
placeholder="请输入任务处理信息"
/>
</el-form-item>
<br />
</el-form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import message from "../components/message.vue";
import Scriptpreview from ".././components/Scriptpreviewopen.vue";
import { getAgencytype } from "@/api/system/agency";
import {
selectFollowPatientInfo,
question,
addPatientQuestionResult,
selectPhonePush,
} from "@/api/system/followupsee";
import { selectPatientQuestionSubmit } from "@/api/system/taskExecuteRecord";
import { getScript } from "@/api/manage/script";
import Cookies from "js-cookie";
export default {
components: {
message,
Scriptpreview,
},
name: "patientdetails",
data() {
return {
lookshow: false,
phoneNodeContent: {
scriptInfoId: null,
flowScheme: null,
nodes: [],
edges: [],
},
obj: {},
checkList: [],
checked: false,
formlist: {},
optionslistS: [],
optionslist: [],
rules: {
routeHandleRemark: [
{ required: true, message: "请输入任务处理信息", trigger: "change" },
],
},
radio: "B",
id: "",
list: [],
type: "",
checkeddata: [],
questiondata: {
// routeHandleRemark:null,
totalScore: 0, //总分
routeHandlePerson: null,
routeHandleId: null,
},
optionslist: [],
};
},
created() {
this.id = this.$route.query.manageRouteId;
this.info();
if (
this.$route.query.taskNodeType == "QUESTIONNAIRE_SCALE"
) {
this.selectlist();
} else if (this.$route.query.taskNodeType == "PHONE_OUTBOUND") {
if (this.$route.query.routeHandleRemark) {
this.questiondata.routeHandleRemark =
this.$route.query.routeHandleRemark;
}
selectPhonePush(this.$route.query.manageRouteNodeId).then((response) => {
if (response.data) {
this.formlist = response.data;
this.formlist.phoneRedialTimes = response.data.phoneRedialTimes;
this.infolistMESSAGE();
this.infolistword();
if (this.formlist.phonePushSign == 0) {
this.formlist.phonePushSign = "0";
} else if (this.formlist.phonePushSign == 1) {
this.formlist.phonePushSign = "1";
}
}
});
}
},
methods: {
scriptlook(e) {
console.log(e, "eeeeee");
if (e == null || e == "") {
this.$message.error("暂无话术图");
} else {
this.phoneNodeContent = e;
this.lookshow = true;
}
},
// 发送短信
infolistword() {
var dictType = "text_message_remind";
getAgencytype(dictType).then((res) => {
this.optionslist = res.data;
// this.taskinfo();
this.formlist.phoneMessageRemind = this.optionslist.find(
(el) => el.dictValue == this.formlist.phoneMessageRemind
)?.dictLabel;
});
},
// 短信
messageontemplateMESSAGE(item) {
console.log(item, "2222222");
this.formlist.phoneMessageTemplateId = item.templateId;
this.formlist.phoneMessageTemplateName = item.templateName;
// this.form.messagePreview = item.templateContent;
},
// 重复次数
infolistMESSAGE() {
var dictType = "redial_times";
getAgencytype(dictType).then((res) => {
this.optionslistS = res.data;
this.formlist.phoneRedialTimes = this.optionslistS.find(
(el) => el.dictValue == this.formlist.phoneRedialTimes
)?.dictLabel;
});
},
// 问卷和随访
selectlist() {
selectPatientQuestionSubmit(this.$route.query.taskExecuteRecordId).then(
(res) => {
this.questiondata = res.data;
if (this.$route.query.routeHandleRemark) {
this.questiondata.routeHandleRemark =
this.$route.query.routeHandleRemark;
}
this.questiondata.subjectResultList.forEach((e) => {
e.optionResults.forEach((el) => {
if (
(el.optionChooseSign == "0" &&
e.questionType == "MULTIPLE_CHOICE") ||
e.questionType == "COMBINATION_RADIO_SUBJECT"
) {
e.checked = el.id;
} else if (
el.optionChooseSign == "0" &&
e.questionType == "MULTIPLE_CHOICE_QUESTIONS"
) {
this.checkeddata.push(el.id);
} else if (
el.optionChooseSign == "0" &&
e.questionType == "SCORING_QUESTIONS"
) {
e.checked = el.id;
} else if (
e.questionType == "COMBINATION_MULTIPLE_SUBJECT" &&
el.optionChooseSign == "0"
) {
this.checkeddata.push(el.id);
}
});
});
}
);
},
// 日期填空题
timepicker(e, index) {
this.questiondata.subjectResultList[index].fillBlanksAnswer = e;
},
// 时间填空题
timepickerselect(e, index) {
this.questiondata.subjectResultList[index].fillBlanksAnswer = e;
},
// 选中某个单选框时由radio时触发
radioChange(e, item, index) {
console.log(e, item, index, "选中某个单选框时");
this.questiondata.subjectResultList[index].optionResults.forEach((el) => {
if (el.id == item.id) {
el.optionChooseSign = "0";
} else {
el.optionChooseSign = "1";
}
});
console.log(this.questiondata, "this.questiondata");
this.questiondata;
},
// 复选框
radioChangecheck(e, item, index, aindex) {
console.log(e, item, index, "选中某个复选框时");
if (e == true) {
this.questiondata.subjectResultList[index].optionResults[
aindex
].optionChooseSign = "0";
} else {
this.questiondata.subjectResultList[index].optionResults[
aindex
].optionChooseSign = "1";
}
},
info() {
selectFollowPatientInfo(this.id).then((res) => {
this.list = res.data;
});
},
questioninfo() {
question(this.$route.query.templateId).then((res) => {
this.questiondata = res.data;
this.questiondata.questionInfoId = res.data.id;
this.questiondata.routeHandlePerson = Cookies.get("userName");
this.questiondata.routeHandleId = Cookies.get("userId");
this.questiondata.patientId = this.$route.query.patientId;
this.questiondata.manageRouteId = this.$route.query.manageRouteId;
this.questiondata.manageRouteNodeId =
this.$route.query.manageRouteNodeId;
this.questiondata.patientName = this.$route.query.patientName;
this.questiondata.manageRouteName = this.$route.query.manageRouteName;
this.questiondata.manageRouteNodeName =
this.$route.query.manageRouteNodeName;
this.questiondata.taskNodeType = this.$route.query.taskNodeType;
this.questiondata.visitRecordId = this.$route.query.visitRecordId;
this.questiondata.totalScore = 0;
this.questiondata.subjectResultList.forEach((e) => {
if (
e.questionType == "MULTIPLE_CHOICE" ||
e.questionType == "MULTIPLE_CHOICE_QUESTIONS" ||
e.questionType == "SCORING_QUESTIONS" ||
e.questionType == "COMBINATION_RADIO_SUBJECT" ||
e.questionType == "COMBINATION_MULTIPLE_SUBJECT" ||
e.questionType == "COMBINATION_SCORING_SUBJECT"
) {
e.whetherScore = "1";
} else {
e.whetherScore = "0";
}
e.optionResults.forEach((el) => {
el.questionNumber = e.questionNumber;
if (
e.questionType == "MULTIPLE_CHOICE_QUESTIONS" ||
e.questionType == "COMBINATION_MULTIPLE_SUBJECT"
) {
el.optionChooseSign = "1";
}
});
});
});
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
background: #fff !important;
color: #606266;
}
.pushMethod {
height: 30px;
// margin-top: 30px;
line-height: 30px;
font-size: 13px;
color: #64666a;
}
.spanname {
pointer-events: none;
}
::v-deep .el-input.is-disabled .el-input__inner {
background: #fff !important;
color: #606266;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
color: #606266;
background: #fff;
}
.tk {
::v-deep .el-textarea__inner {
width: 35% !important;
height: 100px;
}
}
::v-deep .el-radio {
padding: 10px;
}
::v-deep .el-checkbox-group {
display: flex;
flex-direction: column;
padding: 10px 0px 10px 24px;
}
::v-deep .el-checkbox {
padding: 10px 0 10px 0px;
// padding: 10px;
}
.custom-radio-group {
display: flex;
flex-direction: column;
padding: 10px 0 10px 10px;
.custom {
padding: 10px 0 10px 10px;
}
}
.bodytop {
position: relative;
top: 20px;
// height: 500px;
width: 400px;
margin: 0 auto;
// background: red;f
overflow: auto;
border: 1px solid #e2e2e2;
.titledata {
margin: 30px 0px 15px 30px;
top: 14px;
font-size: 20px;
}
.audiotop {
margin: 10px 0px 10px 30px;
}
img {
// width: 362px;
// height: 127px;
margin: 0px 0px 0px 30px;
}
.know {
margin: 11px 0px 10px 30px;
font-size: 20px;
font-weight: 550;
}
.knowlist {
margin: 10px 0px 10px 30px;
font-size: 16px;
}
}
.right {
width: 100%;
padding-bottom: 50px;
.handle {
float: right;
margin-right: 100px;
// position: absolute;
right: 100px;
margin-top: 20px;
::v-deep .el-textarea__inner {
width: 500px;
height: 250px;
}
}
}
.headernew {
height: calc(100vh - 84px);
background-color: #f1f3f5;
padding-top: 10px;
::v-deep .el-tabs__header {
margin: 0 !important;
width: 100%;
// overflow: auto;
// height: 500px;
// background: red;
}
.bottomheader {
height: calc(100vh - 274px);
overflow-y: auto;
width: 99%;
// height: 67vh;
background-color: #fff;
margin: 10px auto;
padding: 10px 20px;
.sport {
padding: 10px 50px 10px 10px;
font-size: 20px;
font-weight: 600;
}
.words {
font-size: 15px;
padding: 10px 50px 10px 10px;
}
.sports {
position: absolute;
left: 50%;
transform: translate(-50%);
font-size: 18px;
font-weight: 600;
}
.word {
font-size: 14px;
font-weight: 550;
padding: 50px 50px 10px 10px;
}
.videoleft {
width: 40%;
height: 200px;
background: red;
}
.time {
font-size: 20px;
font-weight: 550;
padding: 10px 50px 10px 10px;
}
.number {
width: 25px;
height: 25px;
text-align: center;
display: inline-block;
color: white;
background: blue;
border-radius: 50%;
}
.nexttime {
font-size: 15px;
padding: 10px 50px 10px 10px;
}
.images {
width: 53%;
height: 241px;
margin: 0 auto;
background: red;
}
.attention {
font-size: 14px;
font-weight: 550;
padding: 10px 50px 10px 10px;
}
// .videobottom
// {
// font-size: 14px;
// font-weight: 550;
// padding: 10px 50px 10px 10px;
// }
}
.topheaderlist {
width: 99%;
background-color: #fff;
margin: 0 auto;
.informationlist {
display: flex;
flex-wrap: wrap;
padding: 10px 20px;
height: 110px;
.top,
.bottom {
color: #666666;
width: 100%;
display: flex;
div {
width: 25%;
}
}
}
.userlist {
width: 100%;
padding: 0 20px;
display: flex;
height: 80px;
align-items: center;
line-height: 80px;
.source {
display: flex;
position: relative;
right: 59px;
position: absolute;
.item {
margin-left: 20px;
}
}
.name {
font-size: 20px;
padding-left: 12px;
}
.gender {
padding-left: 10px;
}
.age {
padding-left: 10px;
}
.headsculpture {
border-radius: 50%;
width: 40px;
height: 40px;
}
}
}
}
</style>