<template>
|
<!-- 延续护理页面 -->
|
<div class="ContinuityCarePage" id="app-container">
|
<!-- 第一部分：患者基础信息 -->
|
<div class="patient-info-section">
|
<div class="headline">
|
<div>患者基础信息</div>
|
</div>
|
<div class="patient-info-form">
|
<el-form
|
ref="patientForm"
|
:model="patientForm"
|
:rules="patientRules"
|
label-width="120px"
|
>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="患者姓名" prop="name">
|
<el-input
|
v-model="patientForm.name"
|
placeholder="请输入患者姓名"
|
maxlength="30"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="性别" prop="sex">
|
<el-select
|
v-model="patientForm.sex"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option label="男" :value="1"></el-option>
|
<el-option label="女" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="年龄" prop="age">
|
<el-input
|
v-model="patientForm.age"
|
placeholder="请输入年龄"
|
maxlength="3"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="联系电话" prop="telcode">
|
<el-input
|
v-model="patientForm.telcode"
|
placeholder="请输入联系电话"
|
maxlength="20"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="住院号" prop="hospitalNumber">
|
<el-input
|
v-model="patientForm.hospitalNumber"
|
placeholder="请输入住院号"
|
maxlength="50"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="出院日期" prop="dischargeDate">
|
<el-date-picker
|
v-model="patientForm.dischargeDate"
|
type="date"
|
placeholder="选择出院日期"
|
value-format="yyyy-MM-dd"
|
style="width: 100%"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="诊断名称" prop="diagnosis">
|
<el-input
|
v-model="patientForm.diagnosis"
|
placeholder="请输入诊断名称"
|
maxlength="100"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="责任护士" prop="nurseName">
|
<el-input
|
v-model="patientForm.nurseName"
|
placeholder="请输入责任护士"
|
maxlength="50"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="居住地址" prop="address">
|
<el-input
|
v-model="patientForm.address"
|
placeholder="请输入详细居住地址"
|
maxlength="200"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="亲属姓名" prop="relativeName">
|
<el-input
|
v-model="patientForm.relativeName"
|
placeholder="请输入亲属姓名"
|
maxlength="30"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="亲属电话" prop="relativeTel">
|
<el-input
|
v-model="patientForm.relativeTel"
|
placeholder="请输入亲属电话"
|
maxlength="20"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 延续护理汇总信息 -->
|
<el-row :gutter="20" v-if="continuitySummary.continueCount > 0">
|
<el-col :span="24">
|
<el-form-item label="延续护理汇总">
|
<div class="continuity-summary">
|
<div class="summary-item">
|
<span class="label">延续次数：</span>
|
<span class="value"
|
>{{ continuitySummary.continueCount }} 次</span
|
>
|
</div>
|
<div class="summary-item">
|
<span class="label">最新服务：</span>
|
<span class="value">{{
|
formatDisplayTime(continuitySummary.continueTimeNow)
|
}}</span>
|
</div>
|
<div class="summary-item">
|
<span class="label">下次服务：</span>
|
<span class="value">{{
|
formatDisplayTime(continuitySummary.continueTimeNext)
|
}}</span>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 操作按钮 -->
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="savePatientInfo"
|
:loading="savingPatientInfo"
|
>
|
保存患者信息
|
</el-button>
|
<el-button @click="resetPatientInfo">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<!-- 第二部分：服务基础信息 -->
|
<div class="basic-info-section">
|
<div class="headline">
|
<div>服务基础信息</div>
|
</div>
|
<div class="basic-info-container">
|
<!-- 左半部分：当前服务随访内容（只读） -->
|
<div class="followup-content readonly-content">
|
<div class="sub-headline">
|
<i class="el-icon-document"></i> 当前服务随访内容（只读）
|
<el-button
|
type="text"
|
size="small"
|
@click="toggleQuestionSelection"
|
style="margin-left: 10px"
|
>
|
{{ showQuestionSelector ? "隐藏问题选取" : "选取延续问题" }}
|
</el-button>
|
</div>
|
|
<!-- 问题选取面板 -->
|
<div v-if="showQuestionSelector" class="question-selector-panel">
|
<div class="selector-header">
|
<span>请选择延续问题（可多选）：</span>
|
<el-button
|
type="primary"
|
size="small"
|
@click="confirmQuestionSelection"
|
>
|
确认选取
|
</el-button>
|
</div>
|
<div class="question-list">
|
<el-checkbox-group v-model="selectedQuestionIds">
|
<div
|
v-for="(question, index) in availableQuestions"
|
:key="question.id"
|
class="question-item"
|
>
|
<el-checkbox :label="question.id">
|
<div class="question-content">
|
<span class="question-index"
|
>{{ question.index + 1 }}.</span
|
>
|
<span class="question-text">{{ question.text }}</span>
|
</div>
|
</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<div class="content-container">
|
<el-tabs v-model="activeName" type="border-card">
|
<el-tab-pane name="wj">
|
<span slot="label"
|
><i class="el-icon-notebook-1"></i> 问卷随访结果</span
|
>
|
<div class="CONTENT">
|
<div class="title">{{ taskname ? taskname : "问卷" }}</div>
|
<div class="preview-left" v-if="!Voicetype">
|
<div
|
class="topic-dev"
|
v-for="(item, index) in tableDatatop"
|
:key="item.id"
|
>
|
<!-- 单选 -->
|
<div
|
:class="getTopicClass(item)"
|
:key="index"
|
v-if="item.scriptType == 1 && !item.astrict"
|
>
|
<div class="dev-text">
|
{{ index + 1 }}、[单选]<span>{{
|
item.scriptContent
|
}}</span>
|
</div>
|
<div class="dev-xx">
|
<el-radio-group v-model="item.scriptResult" disabled>
|
<el-radio
|
v-for="(
|
items, indexs
|
) in item.svyTaskTemplateTargetoptions"
|
:class="getOptionClass(items)"
|
:key="indexs"
|
:label="items.optioncontent"
|
>{{ items.optioncontent }}</el-radio
|
>
|
</el-radio-group>
|
</div>
|
<div
|
v-if="item.showAppendInput || item.answerps"
|
class="append-input-container"
|
>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入具体信息"
|
v-model="item.answerps"
|
readonly
|
></el-input>
|
</div>
|
<div v-show="item.prompt">
|
<el-alert :title="item.prompt" type="warning">
|
</el-alert>
|
</div>
|
</div>
|
<!-- 多选 -->
|
<div
|
:class="
|
item.isabnormal
|
? 'scriptTopic-isabnormal'
|
: 'scriptTopic-dev'
|
"
|
:key="index"
|
v-if="item.scriptType == 2 && !item.astrict"
|
>
|
<div class="dev-text">
|
{{ index + 1 }}、[多选]<span>{{
|
item.scriptContent
|
}}</span>
|
</div>
|
<div class="dev-xx">
|
<el-checkbox-group
|
v-model="item.scriptResult"
|
disabled
|
>
|
<el-checkbox
|
:class="items.isabnormal ? 'red-star' : ''"
|
v-for="(
|
items, indexs
|
) in item.svyTaskTemplateTargetoptions"
|
:key="indexs"
|
:label="items.optioncontent"
|
>
|
{{ items.optioncontent }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div v-show="item.prompt && item.scriptResult[0]">
|
<el-alert :title="item.prompt" type="warning">
|
</el-alert>
|
</div>
|
</div>
|
<!-- 填空 -->
|
<div
|
class="scriptTopic-dev"
|
:key="index"
|
v-if="item.scriptType == 4 && !item.astrict"
|
>
|
<div class="dev-text">
|
{{ index + 1 }}、[问答]<span>{{
|
item.scriptContent
|
}}</span>
|
<span v-if="item.valueType == 3">(只能输入数字)</span>
|
</div>
|
<div class="dev-xx" v-if="item.valueType == 3">
|
<el-input
|
type="text"
|
placeholder="请输入答案"
|
v-model="item.scriptResult"
|
readonly
|
>
|
</el-input>
|
</div>
|
<div class="dev-xx" v-else>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入答案"
|
v-model="item.scriptResult"
|
readonly
|
>
|
</el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="preview-left" v-else>
|
<div
|
class="topic-dev"
|
v-for="(item, index) in tableDatatop"
|
:key="item.id"
|
>
|
<div v-if="item.targetvalue">
|
<div class="dev-text">
|
{{ index + 1 }}、[单选]<span>{{
|
item.questiontext
|
}}</span>
|
</div>
|
<div class="dev-xx">
|
<el-radio-group v-model="item.matchedtext" disabled>
|
<el-radio
|
v-for="(items, index) in item.scriptResult"
|
:key="index"
|
:label="items"
|
:class="items.isabnormal ? 'red-star' : ''"
|
>{{ items }}</el-radio
|
>
|
</el-radio-group>
|
</div>
|
<div v-show="item.prompt">
|
<el-alert :title="item.prompt" type="warning">
|
</el-alert>
|
</div>
|
</div>
|
<div class="scriptTopic-dev" :key="index" v-else>
|
<div class="dev-text">
|
{{ index + 1 }}、[问答]<span>{{
|
item.scriptContent
|
}}</span>
|
<span v-if="item.valueType == 3">(只能输入数字)</span>
|
</div>
|
<div class="dev-xx" v-if="item.valueType == 3">
|
<el-input
|
type="text"
|
placeholder="请输入答案"
|
v-model="item.scriptResult"
|
readonly
|
>
|
</el-input>
|
</div>
|
<div class="dev-xx" v-else>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入答案"
|
v-model="item.scriptResult"
|
readonly
|
>
|
</el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane name="yy">
|
<span slot="label"
|
><i class="el-icon-headset"></i> 语音随访详情</span
|
>
|
<div class="borderdiv">
|
<div class="title">{{ taskname ? taskname : "问卷" }}</div>
|
<div class="voice-audio">
|
完整语音：
|
<mini-audio
|
:audio-source="
|
voice ? voice : '@assets/order/example.mp3'
|
"
|
></mini-audio>
|
</div>
|
<div class="preview-left">
|
<div v-for="item in voiceDatatop">
|
<div class="leftside">
|
<i class="el-icon-phone-outline"></i
|
><span>{{ item.questiontext }}</span>
|
</div>
|
<div class="offside">
|
<i class="el-icon-user"></i>
|
<div class="offside-value">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 1 }"
|
v-model="item.asrtext"
|
readonly
|
></el-input>
|
<div>
|
<mini-audio
|
:audio-source="
|
item.questionvoice
|
? item.questionvoice
|
: '@assets/order/example.mp3'
|
"
|
></mini-audio>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<!-- 右半部分：历次延续护理服务 -->
|
<!-- 右半部分：历次延续护理服务 -->
|
<div class="continuity-history">
|
<div class="sub-headline">
|
<i class="el-icon-time"></i> 历次延续护理服务
|
<el-button
|
type="primary"
|
size="small"
|
icon="el-icon-plus"
|
@click="addContinuityTab"
|
style="margin-left: 10px"
|
>新增延续护理</el-button
|
>
|
</div>
|
<div class="history-content">
|
<el-tabs
|
v-model="activeContinuityTab"
|
type="card"
|
closable
|
@tab-remove="removeContinuityTab"
|
@tab-click="handleTabClick"
|
>
|
<el-tab-pane
|
v-for="(item, index) in continuityTabs"
|
:key="item.name"
|
:label="item.title"
|
:name="item.name"
|
>
|
<div class="continuity-form">
|
<el-form
|
:ref="'continuityForm' + index"
|
:model="item.form"
|
:rules="continuityRules"
|
label-width="120px"
|
>
|
<!-- 延续问题表单 -->
|
<el-form-item label="延续问题" prop="continuityProblems">
|
<div class="continuity-problems-form">
|
<div class="problems-header">
|
<span>已选取的延续问题：</span>
|
<el-button
|
type="text"
|
size="small"
|
icon="el-icon-plus"
|
@click="addContinuityProblem(index)"
|
>
|
新增问题
|
</el-button>
|
</div>
|
|
<!-- 已选取的问题列表 -->
|
<div
|
v-if="
|
item.form.continuityProblems &&
|
item.form.continuityProblems.length > 0
|
"
|
class="problems-list-container"
|
>
|
<div
|
v-for="(problem, problemIndex) in item.form
|
.continuityProblems"
|
:key="problemIndex"
|
class="problem-item"
|
>
|
<div class="problem-content">
|
<div class="problem-meta">
|
<span class="problem-index"
|
>问题 {{ problemIndex + 1 }}</span
|
>
|
<el-select
|
v-model="problem.questionId"
|
placeholder="选择问题"
|
size="small"
|
style="width: 300px; margin: 0 10px"
|
@change="
|
handleProblemChange(
|
index,
|
problemIndex,
|
$event
|
)
|
"
|
>
|
<el-option
|
v-for="q in availableQuestions"
|
:key="q.id"
|
:label="q.text"
|
:value="q.id"
|
>
|
<span
|
>{{ q.index + 1 }}.
|
{{ truncateText(q.text, 40) }}</span
|
>
|
</el-option>
|
</el-select>
|
<!-- 修复：传递正确的索引 -->
|
<el-button
|
type="danger"
|
icon="el-icon-delete"
|
size="mini"
|
circle
|
@click="
|
removeContinuityProblem(index, problemIndex)
|
"
|
>
|
</el-button>
|
</div>
|
|
<!-- 问卷式问题展示区域 -->
|
<div
|
v-if="problem.questionId"
|
class="question-display-area"
|
>
|
<!-- 根据问题类型动态渲染 -->
|
<div
|
v-if="
|
getQuestionOriginalData(problem.questionId)
|
"
|
class="question-render"
|
>
|
<!-- 单选类型 -->
|
<div
|
v-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptType == 1
|
"
|
class="question-item-render"
|
>
|
<div class="question-text">
|
<strong>[单选]</strong>
|
<span>{{
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptContent
|
}}</span>
|
</div>
|
<div class="question-options">
|
<el-radio-group
|
v-model="problem.selectedOption"
|
>
|
<el-radio
|
v-for="option in getQuestionOriginalData(
|
problem.questionId
|
).svyTaskTemplateTargetoptions"
|
:key="option.optioncontent"
|
:label="option.optioncontent"
|
:class="getOptionClass(option)"
|
>
|
{{ option.optioncontent }}
|
</el-radio>
|
</el-radio-group>
|
</div>
|
<!-- 附加输入框 -->
|
<div
|
v-if="problem.showAppendInput"
|
class="append-input"
|
style="margin-top: 10px"
|
>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入具体信息"
|
v-model="problem.appendInput"
|
></el-input>
|
</div>
|
</div>
|
|
<!-- 多选类型 -->
|
<div
|
v-else-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptType == 2
|
"
|
class="question-item-render"
|
>
|
<div class="question-text">
|
<strong>[多选]</strong>
|
<span>{{
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptContent
|
}}</span>
|
</div>
|
<div class="question-options">
|
<el-checkbox-group
|
v-model="problem.selectedOptions"
|
>
|
<el-checkbox
|
v-for="option in getQuestionOriginalData(
|
problem.questionId
|
).svyTaskTemplateTargetoptions"
|
:key="option.optioncontent"
|
:label="option.optioncontent"
|
:class="
|
option.isabnormal ? 'red-star' : ''
|
"
|
>
|
{{ option.optioncontent }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
|
<!-- 填空/问答类型 -->
|
<div
|
v-else-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptType == 4
|
"
|
class="question-item-render"
|
>
|
<div class="question-text">
|
<strong>[问答]</strong>
|
<span>{{
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptContent
|
}}</span>
|
<span
|
v-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).valueType == 3
|
"
|
>(只能输入数字)</span
|
>
|
</div>
|
<div class="question-options">
|
<el-input
|
v-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).valueType == 3
|
"
|
type="text"
|
placeholder="请输入答案"
|
v-model="problem.answer"
|
style="width: 200px"
|
></el-input>
|
<el-input
|
v-else
|
type="textarea"
|
:rows="2"
|
placeholder="请输入答案"
|
v-model="problem.answer"
|
style="width: 100%"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
<div v-else class="no-question-data">
|
问题数据加载中...
|
</div>
|
</div>
|
|
<!-- 原有的问题描述等字段 -->
|
<div class="problem-detail">
|
<div class="detail-row">
|
<span class="detail-label">当前状态：</span>
|
<el-select
|
v-model="problem.status"
|
placeholder="选择状态"
|
size="small"
|
style="width: 120px; margin-right: 20px"
|
>
|
<el-option
|
label="未处理"
|
value="pending"
|
></el-option>
|
<el-option
|
label="处理中"
|
value="processing"
|
></el-option>
|
<el-option
|
label="已解决"
|
value="resolved"
|
></el-option>
|
<el-option
|
label="持续关注"
|
value="watching"
|
></el-option>
|
</el-select>
|
|
<span
|
class="detail-label"
|
v-if="problem.status === 'resolved'"
|
style="margin-left: 20px"
|
>
|
解决日期：
|
</span>
|
<el-date-picker
|
v-if="problem.status === 'resolved'"
|
v-model="problem.resolvedDate"
|
type="date"
|
placeholder="选择解决日期"
|
value-format="yyyy-MM-dd"
|
size="small"
|
style="width: 150px; margin-left: 10px"
|
></el-date-picker>
|
</div>
|
|
<!-- <div class="detail-row">
|
<span class="detail-label">问题描述：</span>
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="problem.description"
|
placeholder="请详细描述该延续问题（可记录评估结果、处理建议等）"
|
size="small"
|
style="flex: 1"
|
></el-input>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
|
<!-- 延续性护理记录 -->
|
<el-form-item label="护理记录" prop="careRecord">
|
<el-input
|
type="textarea"
|
:rows="4"
|
v-model="item.form.careRecord"
|
placeholder="请输入延续性护理记录"
|
clearable
|
></el-input>
|
</el-form-item>
|
|
<!-- 责任护士、回访形式、服务时间 -->
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="责任护士" prop="dutyNurse">
|
<el-input
|
v-model="item.form.dutyNurse"
|
placeholder="请输入责任护士"
|
clearable
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="回访形式" prop="visitType">
|
<el-select
|
v-model="item.form.visitType"
|
placeholder="请选择回访形式"
|
style="width: 100%"
|
clearable
|
>
|
<el-option
|
label="电话回访"
|
value="phone"
|
></el-option>
|
<el-option
|
label="上门回访"
|
value="home"
|
></el-option>
|
<el-option
|
label="门诊回访"
|
value="clinic"
|
></el-option>
|
<el-option
|
label="微信回访"
|
value="wechat"
|
></el-option>
|
<el-option label="其他" value="other"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item
|
label="下次服务时间"
|
prop="nextServiceTime"
|
>
|
<el-date-picker
|
v-model="item.form.nextServiceTime"
|
type="datetime"
|
placeholder="选择下次延续服务时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
>
|
</el-date-picker>
|
<div
|
class="time-tip"
|
v-if="item.form.nextServiceTime"
|
>
|
距下次服务还有
|
{{ calculateDaysLeft(item.form.nextServiceTime) }}
|
天
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务时间" prop="serviceTime">
|
<el-date-picker
|
v-model="item.form.serviceTime"
|
type="datetime"
|
placeholder="选择服务时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 下次延续服务时间 -->
|
|
<!-- 操作按钮 -->
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="saveContinuityTab(index)"
|
:loading="item.saving"
|
>
|
保存
|
</el-button>
|
<el-button @click="resetContinuityTab(index)">
|
重置
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
getsearchrResults,
|
getPersonVoices,
|
getTaskservelist,
|
Editsingletaskson,
|
} from "@/api/AiCentre/index";
|
import {
|
messagelistpatient,
|
alterpatient,
|
listcontactinformation,
|
} from "@/api/patient/homepage";
|
|
export default {
|
dicts: ["sys_yujing"],
|
data() {
|
return {
|
// 路由参数
|
taskid: "",
|
id: "",
|
sendname: "",
|
patid: "",
|
Voicetype: 0,
|
serviceType: "",
|
|
// 随访内容相关
|
activeName: "wj",
|
taskname: "",
|
voice: "",
|
tableDatatop: [],
|
voiceDatatop: [],
|
form: {},
|
userform: {},
|
// 新增：问题选择相关
|
showQuestionSelector: false,
|
selectedQuestionIds: [],
|
// 患者基础信息表单
|
patientForm: {
|
name: "",
|
sex: "",
|
age: "",
|
telcode: "",
|
hospitalNumber: "",
|
dischargeDate: "",
|
diagnosis: "",
|
nurseName: "",
|
address: "",
|
relativeName: "",
|
relativeTel: "",
|
},
|
patientRules: {
|
name: [{ required: true, message: "请输入患者姓名", trigger: "blur" }],
|
age: [
|
{ required: true, message: "请输入年龄", trigger: "blur" },
|
{ pattern: /^\d+$/, message: "年龄必须为数字", trigger: "blur" },
|
],
|
telcode: [
|
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
{
|
pattern: /^1[3-9]\d{9}$/,
|
message: "请输入正确的手机号码",
|
trigger: "blur",
|
},
|
],
|
},
|
savingPatientInfo: false,
|
|
// 延续护理相关
|
activeContinuityTab: "continuity-0",
|
continuityTabs: [],
|
continuityTabIndex: 0,
|
continuityRules: {
|
// 移除continuityProblems的验证规则
|
careRecord: [
|
{ required: true, message: "请输入护理记录", trigger: "blur" },
|
],
|
dutyNurse: [
|
{ required: true, message: "请输入责任护士", trigger: "blur" },
|
],
|
visitType: [
|
{ required: true, message: "请选择回访形式", trigger: "change" },
|
],
|
serviceTime: [
|
{ required: true, message: "请选择服务时间", trigger: "change" },
|
],
|
nextServiceTime: [
|
{ required: true, message: "请选择下次服务时间", trigger: "change" },
|
],
|
},
|
|
// 可选的延续问题（从左侧问卷中提取）
|
availableQuestions: [],
|
|
// 延续护理汇总信息
|
continuitySummary: {
|
continueCount: 0,
|
continueTimeNow: "",
|
continueTimeNext: "",
|
continueContent: "",
|
},
|
|
// 其他
|
logsheetlist: [],
|
};
|
},
|
created() {
|
this.taskid = this.$route.query.taskid;
|
this.id = this.$route.query.id;
|
this.sendname = this.$route.query.sendname;
|
this.patid = this.$route.query.patid;
|
this.Voicetype = this.$route.query.Voicetype || 0;
|
this.serviceType = this.$route.query.serviceType;
|
|
this.getTaskservelist(this.id);
|
},
|
methods: {
|
// 获取主题样式类
|
getTopicClass(item) {
|
console.log(item.isabnormal, "getTopicClass");
|
|
if (item.isabnormal == 1) {
|
return "scriptTopic-isabnormal";
|
} else if (item.isabnormal == 2) {
|
return "scriptTopic-warning";
|
} else {
|
return "scriptTopic-dev";
|
}
|
},
|
|
// 获取选项样式类
|
getOptionClass(items) {
|
if (items.isabnormal == 1) {
|
return "red-star";
|
} else if (items.isabnormal == 2) {
|
return "yellow-star";
|
}
|
return "";
|
},
|
|
// 获取问卷数据
|
getsearchrResults(id) {
|
getsearchrResults({
|
taskid: this.taskid,
|
patid: this.patid,
|
subId: id ? id : this.id,
|
isFinish: false,
|
}).then((res) => {
|
if (res.code === 200) {
|
this.tableDatatop = res.data.scriptResult;
|
|
this.tableDatatop.forEach((item) => {
|
if (item.scriptType == 2) item.scriptResult = [];
|
if (item.scriptResultId && item.scriptType != 2) {
|
item.isoption = 3;
|
item.scriptResult = item.scriptResult;
|
} else if (item.scriptResultId && item.scriptType == 2) {
|
item.scriptResult = item.scriptResult.split("&");
|
item.isoption = 3;
|
}
|
});
|
this.taskname = res.data.taskName;
|
this.overdata();
|
// 提取可选的延续问题
|
this.extractAvailableQuestions();
|
}
|
});
|
},
|
overdata() {
|
this.tableDatatop.forEach((item, index) => {
|
var obj = item.svyTaskTemplateTargetoptions.find(
|
(items) => items.optioncontent == item.scriptResult
|
);
|
if (obj) {
|
console.log(obj, "obj");
|
if (obj.isabnormal) {
|
this.tableDatatop[index].isabnormal = obj.isabnormal;
|
}
|
this.$forceUpdate();
|
}
|
});
|
},
|
// 提取可选的延续问题
|
extractAvailableQuestions() {
|
this.availableQuestions = this.tableDatatop
|
.filter(
|
(item) => item.scriptContent && item.scriptContent.trim() !== ""
|
)
|
.map((item, index) => ({
|
id: `question-${index}`,
|
index: index,
|
text: item.scriptContent,
|
originalIndex: index,
|
}));
|
}, // 切换问题选择面板显示
|
toggleQuestionSelection() {
|
this.showQuestionSelector = !this.showQuestionSelector;
|
if (this.showQuestionSelector) {
|
// 重置选择
|
this.selectedQuestionIds = [];
|
}
|
},
|
// 添加延续问题
|
addContinuityProblem(tabIndex) {
|
this.continuityTabs[tabIndex].form.continuityProblems.push({
|
questionId: "",
|
status: "pending",
|
description: "",
|
resolvedDate: "",
|
createTime: new Date().toISOString(),
|
// 新增字段，用于问卷式交互
|
selectedOption: "", // 单选答案
|
selectedOptions: [], // 多选答案
|
answer: "", // 填空答案
|
showAppendInput: false, // 是否显示附加输入框
|
appendInput: "", // 附加输入内容
|
});
|
},
|
// 根据问题ID获取原始问题数据
|
getQuestionOriginalData(questionId) {
|
if (!questionId) return null;
|
const originalIndex = this.availableQuestions.find(
|
(q) => q.id === questionId
|
)?.originalIndex;
|
if (originalIndex !== undefined && this.tableDatatop[originalIndex]) {
|
return this.tableDatatop[originalIndex];
|
}
|
return null;
|
},
|
// 移除延续问题
|
removeContinuityProblem(tabIndex, problemIndex) {
|
this.continuityTabs[tabIndex].form.continuityProblems.splice(
|
problemIndex,
|
1
|
);
|
},
|
|
// 处理问题选择变更
|
handleProblemChange(tabIndex, problemIndex, questionId) {
|
const problem =
|
this.continuityTabs[tabIndex].form.continuityProblems[problemIndex];
|
|
if (!questionId) {
|
problem.description = "";
|
// 清空答案字段
|
problem.selectedOption = "";
|
problem.selectedOptions = [];
|
problem.answer = "";
|
problem.showAppendInput = false;
|
problem.appendInput = "";
|
return;
|
}
|
|
// 自动填充问题描述
|
const question = this.availableQuestions.find((q) => q.id === questionId);
|
if (question) {
|
problem.description = `问题：${question.text}`;
|
}
|
|
// 根据问题类型初始化答案字段
|
const originalData = this.getQuestionOriginalData(questionId);
|
if (originalData) {
|
// 初始化单选答案
|
if (originalData.scriptType === 1) {
|
problem.selectedOption = originalData.scriptResult || "";
|
// 检查是否需要显示附加输入框
|
problem.showAppendInput = originalData.showAppendInput || false;
|
problem.appendInput = originalData.answerps || "";
|
}
|
// 初始化多选答案
|
else if (originalData.scriptType === 2) {
|
problem.selectedOptions = Array.isArray(originalData.scriptResult)
|
? [...originalData.scriptResult]
|
: originalData.scriptResult
|
? originalData.scriptResult.split("&")
|
: [];
|
}
|
// 初始化填空答案
|
else if (originalData.scriptType === 4) {
|
problem.answer = originalData.scriptResult || "";
|
}
|
}
|
},
|
|
// 根据问题ID获取问题文本
|
getQuestionText(questionId) {
|
if (!questionId) return "未选择问题";
|
const question = this.availableQuestions.find((q) => q.id === questionId);
|
return question
|
? `${question.index + 1}. ${question.text}`
|
: "问题已删除";
|
},
|
|
// 截断文本
|
truncateText(text, length) {
|
if (!text) return "";
|
return text.length > length ? text.substring(0, length) + "..." : text;
|
},
|
// 确认问题选择
|
confirmQuestionSelection() {
|
if (this.selectedQuestionIds.length === 0) {
|
this.$modal.msgWarning("请至少选择一个延续问题");
|
return;
|
}
|
|
// 获取当前激活的标签页索引
|
const activeTabIndex = this.continuityTabs.findIndex(
|
(tab) => tab.name === this.activeContinuityTab
|
);
|
|
if (activeTabIndex === -1) {
|
this.$modal.msgError("未找到激活的延续护理标签页");
|
return;
|
}
|
|
// 添加选中的问题到当前标签页
|
this.selectedQuestionIds.forEach((questionId) => {
|
// 检查是否已存在相同问题
|
const exists = this.continuityTabs[
|
activeTabIndex
|
].form.continuityProblems.some(
|
(problem) => problem.questionId === questionId
|
);
|
|
if (!exists) {
|
this.continuityTabs[activeTabIndex].form.continuityProblems.push({
|
questionId: questionId,
|
status: "pending",
|
description: "",
|
resolvedDate: "",
|
createTime: new Date().toISOString(),
|
});
|
}
|
});
|
|
// 关闭选择面板
|
this.showQuestionSelector = false;
|
this.selectedQuestionIds = [];
|
|
this.$modal.msgSuccess(
|
`已添加 ${this.selectedQuestionIds.length} 个延续问题`
|
);
|
},
|
|
// 移除延续问题
|
removeContinuityProblem(tabIndex, problemIndex) {
|
this.continuityTabs[tabIndex].form.continuityProblems.splice(
|
problemIndex,
|
1
|
);
|
},
|
|
// 获取语音数据
|
getPersonVoices(id) {
|
let obj = {
|
taskid: this.taskid,
|
patid: this.patid,
|
subId: id ? id : this.id,
|
};
|
|
getPersonVoices(obj).then((res) => {
|
if (res.code == 200) {
|
this.voiceDatatop = res.data.serviceSubtaskDetails;
|
this.voice = res.data.voice;
|
this.activeName = "yy";
|
this.taskname = res.data.taskName;
|
this.tableDatatop = res.data.filteredDetails;
|
this.tableDatatop.forEach((item) => {
|
if (item.targetvalue) {
|
item.scriptResult = item.targetvalue.split("&");
|
} else {
|
item.scriptResult = [];
|
}
|
});
|
|
// 提取可选的延续问题
|
this.extractAvailableQuestions();
|
}
|
});
|
},
|
|
// 获取基础信息
|
getuserinfo() {
|
const queryParams = {
|
pid: Number(this.patid),
|
allhosp: "0",
|
};
|
|
messagelistpatient(queryParams).then((response) => {
|
if (response.rows[0]) {
|
this.userform = response.rows[0];
|
this.initPatientForm();
|
}
|
});
|
|
listcontactinformation({ patid: this.patid }).then((response) => {
|
this.tableData = response.rows;
|
if (this.tableData.length) {
|
this.patientForm.relativeName = this.tableData[0].relation || "";
|
this.patientForm.relativeTel = this.tableData[0].contactway || "";
|
}
|
});
|
},
|
|
// 初始化患者表单
|
initPatientForm() {
|
if (this.userform) {
|
this.patientForm.name = this.userform.name || "";
|
this.patientForm.sex = this.userform.sex || "";
|
this.patientForm.age = this.userform.age || "";
|
this.patientForm.telcode = this.userform.telcode || "";
|
this.patientForm.address = this.userform.placeOfResidence || "";
|
this.patientForm.hospitalNumber = this.userform.medicalRecordNo || "";
|
}
|
|
if (this.form) {
|
this.patientForm.dischargeDate =
|
this.formatTime(this.form.endtime) || "";
|
this.patientForm.diagnosis = this.form.leavediagname || "";
|
this.patientForm.nurseName = this.form.nurseName || "";
|
}
|
},
|
|
// 获取患者记录
|
getTaskservelist(id) {
|
getTaskservelist({
|
patid: this.patid,
|
subId: id,
|
pageSize: 100,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.form = res.rows[0].serviceSubtaskList.find(
|
(item) => item.id == this.id
|
);
|
this.logsheetlist = res.rows[0].serviceSubtaskList;
|
|
// 初始化患者信息
|
this.initPatientForm();
|
|
// 加载历史延续护理数据
|
this.loadContinuityHistory();
|
this.getuserinfo();
|
}
|
|
if (this.Voicetype) {
|
this.getPersonVoices();
|
} else {
|
this.getsearchrResults();
|
}
|
});
|
},
|
|
// 加载历史延续护理数据
|
loadContinuityHistory() {
|
if (this.form && this.form.continueContent) {
|
try {
|
const historyData = JSON.parse(this.form.continueContent);
|
this.continuityTabs = historyData.map((item, index) => ({
|
name: `continuity-${index}`,
|
title: `延续护理${index + 1}`,
|
form: {
|
continuityProblems: item.continuityProblems || [],
|
careRecord: item.careRecord || "",
|
dutyNurse: item.dutyNurse || "",
|
visitType: item.visitType || "",
|
serviceTime: item.serviceTime || "",
|
nextServiceTime: item.nextServiceTime || "",
|
},
|
saving: false,
|
}));
|
|
if (this.continuityTabs.length > 0) {
|
this.activeContinuityTab = this.continuityTabs[0].name;
|
}
|
|
// 更新汇总信息
|
this.updateContinuitySummary();
|
} catch (error) {
|
console.error("解析延续护理历史数据失败:", error);
|
}
|
}
|
},
|
|
// 更新延续护理汇总信息
|
updateContinuitySummary() {
|
if (this.form) {
|
this.continuitySummary.continueCount = this.form.continueCount || 0;
|
this.continuitySummary.continueTimeNow =
|
this.form.continueTimeNow || "";
|
this.continuitySummary.continueTimeNext =
|
this.form.continueTimeNext || "";
|
this.continuitySummary.continueContent =
|
this.form.continueContent || "";
|
}
|
},
|
|
// 添加延续护理标签页
|
addContinuityTab() {
|
console.log(this.continuityTabs.length);
|
if (this.continuityTabs.length) {
|
this.continuityTabIndex = this.continuityTabs.length;
|
}
|
const newIndex = this.continuityTabIndex + 1;
|
const newTab = {
|
name: `continuity-${newIndex}`,
|
title: `延续护理${newIndex}`,
|
form: {
|
continuityProblems: [],
|
careRecord: "",
|
dutyNurse: "",
|
visitType: "",
|
serviceTime: "",
|
nextServiceTime: "",
|
},
|
saving: false,
|
};
|
|
this.continuityTabs.push(newTab);
|
this.continuityTabIndex = newIndex;
|
this.activeContinuityTab = newTab.name;
|
},
|
|
// 移除延续护理标签页
|
removeContinuityTab(targetName) {
|
const tabs = this.continuityTabs;
|
let activeName = this.activeContinuityTab;
|
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
const nextTab = tabs[index + 1] || tabs[index - 1];
|
if (nextTab) {
|
activeName = nextTab.name;
|
}
|
}
|
});
|
}
|
|
this.activeContinuityTab = activeName;
|
this.continuityTabs = tabs.filter((tab) => tab.name !== targetName);
|
},
|
|
// 处理标签页点击
|
handleTabClick(tab) {
|
this.activeContinuityTab = tab.name;
|
},
|
|
// 计算距离下次服务还有多少天
|
calculateDaysLeft(nextServiceTime) {
|
if (!nextServiceTime) return 0;
|
|
const nextTime = new Date(nextServiceTime);
|
const now = new Date();
|
const diffTime = nextTime - now;
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
return diffDays > 0 ? diffDays : 0;
|
},
|
|
// 保存延续护理标签页
|
saveContinuityTab(index) {
|
const formRef = this.$refs[`continuityForm${index}`];
|
if (!formRef) return;
|
|
// 验证基本表单
|
formRef[0].validate((valid) => {
|
if (valid) {
|
// 验证延续问题是否完整
|
const problems = this.continuityTabs[index].form.continuityProblems;
|
let hasError = false;
|
|
problems.forEach((problem, problemIndex) => {
|
if (!problem.questionId) {
|
hasError = true;
|
this.$modal.msgError(`第${problemIndex + 1}个延续问题未选择`);
|
}
|
});
|
|
if (hasError) {
|
return false;
|
}
|
|
this.continuityTabs[index].saving = true;
|
|
// 更新汇总信息
|
this.updateContinuitySummaryFromTabs();
|
|
// 调用保存API
|
this.saveContinuityData();
|
} else {
|
this.$modal.msgError("请填写完整信息");
|
return false;
|
}
|
});
|
},
|
|
// 更新延续护理汇总信息
|
updateContinuitySummaryFromTabs() {
|
if (this.continuityTabs.length === 0) return;
|
|
// 找到最新的服务时间
|
let latestTime = "";
|
let nextTime = "";
|
let totalProblems = 0;
|
|
this.continuityTabs.forEach((tab) => {
|
if (tab.form.serviceTime) {
|
if (
|
!latestTime ||
|
new Date(tab.form.serviceTime) > new Date(latestTime)
|
) {
|
latestTime = tab.form.serviceTime;
|
}
|
}
|
if (tab.form.nextServiceTime) {
|
if (
|
!nextTime ||
|
new Date(tab.form.nextServiceTime) < new Date(nextTime)
|
) {
|
nextTime = tab.form.nextServiceTime;
|
}
|
}
|
|
// 统计问题数量
|
totalProblems += tab.form.continuityProblems.length;
|
});
|
|
this.continuitySummary.continueCount = this.continuityTabs.length;
|
this.continuitySummary.continueTimeNow = latestTime;
|
this.continuitySummary.continueTimeNext = nextTime;
|
|
// 构建完整的延续护理数据
|
const continuityData = this.continuityTabs.map((tab) => ({
|
...tab.form,
|
tabTitle: tab.title,
|
tabName: tab.name,
|
}));
|
|
this.continuitySummary.continueContent = JSON.stringify(continuityData);
|
this.continuitySummary.totalProblems = totalProblems;
|
},
|
|
// 保存延续护理数据
|
saveContinuityData() {
|
const vm = this;
|
|
// 验证每个问题的questionId是否已选择
|
let hasEmptyQuestion = false;
|
this.continuityTabs.forEach((tab, tabIndex) => {
|
tab.form.continuityProblems.forEach((problem, problemIndex) => {
|
if (!problem.questionId) {
|
hasEmptyQuestion = true;
|
vm.$modal.msgError(
|
`第${tabIndex + 1}个标签页的第${problemIndex + 1}个问题未选择`
|
);
|
}
|
});
|
});
|
|
if (hasEmptyQuestion) {
|
return;
|
}
|
|
const formData = {
|
id: vm.id,
|
patid: vm.patid,
|
taskid: vm.taskid,
|
continueFlag: 2,
|
continueCount: vm.continuitySummary.continueCount,
|
continueTimeNow: vm.continuitySummary.continueTimeNow,
|
continueTimeNext: vm.continuitySummary.continueTimeNext,
|
continueContent: vm.continuitySummary.continueContent,
|
// 可以添加问卷答案的整合
|
// questionnaireAnswers: vm.continuityTabs.map((tab) => ({
|
// tabName: tab.name,
|
// problems: tab.form.continuityProblems.map((problem) => ({
|
// questionId: problem.questionId,
|
// answer:
|
// problem.selectedOption ||
|
// problem.selectedOptions ||
|
// problem.answer,
|
// status: problem.status,
|
// description: problem.description,
|
// })),
|
// })),
|
};
|
|
Editsingletaskson(formData)
|
.then((res) => {
|
if (res.code === 200) {
|
vm.$modal.msgSuccess("延续护理记录保存成功");
|
// 重置保存状态
|
vm.continuityTabs.forEach((tab) => {
|
tab.saving = false;
|
});
|
} else {
|
vm.$modal.msgError("保存失败");
|
}
|
})
|
.catch((error) => {
|
console.error("保存失败:", error);
|
vm.$modal.msgError("保存失败");
|
vm.continuityTabs.forEach((tab) => {
|
tab.saving = false;
|
});
|
});
|
},
|
|
// 重置延续护理标签页
|
resetContinuityTab(index) {
|
this.continuityTabs[index].form = {
|
continuityProblems: [],
|
careRecord: "",
|
dutyNurse: "",
|
visitType: "",
|
serviceTime: "",
|
nextServiceTime: "",
|
};
|
this.$refs[`continuityForm${index}`][0].clearValidate();
|
},
|
|
// 保存患者信息
|
savePatientInfo() {
|
this.$refs.patientForm.validate((valid) => {
|
if (valid) {
|
this.savingPatientInfo = true;
|
|
// 更新userform数据
|
const updatedUserform = {
|
...this.userform,
|
name: this.patientForm.name,
|
sex: this.patientForm.sex,
|
age: this.patientForm.age,
|
telcode: this.patientForm.telcode,
|
placeOfResidence: this.patientForm.address,
|
medicalRecordNo: this.patientForm.hospitalNumber,
|
};
|
|
alterpatient(updatedUserform)
|
.then((res) => {
|
if (res.code == 200) {
|
this.$modal.msgSuccess("患者信息保存成功");
|
this.userform = updatedUserform;
|
} else {
|
this.$modal.msgError("患者信息修改失败");
|
}
|
this.savingPatientInfo = false;
|
})
|
.catch((error) => {
|
console.error("保存失败:", error);
|
this.$modal.msgError("保存失败");
|
this.savingPatientInfo = false;
|
});
|
} else {
|
this.$modal.msgError("请填写完整信息");
|
return false;
|
}
|
});
|
},
|
|
// 重置患者信息
|
resetPatientInfo() {
|
this.initPatientForm();
|
this.$refs.patientForm.clearValidate();
|
},
|
|
// 时间格式化
|
formatTime(time) {
|
if (!time) return "";
|
return time.split(" ")[0];
|
},
|
|
// 格式化显示时间
|
formatDisplayTime(time) {
|
if (!time) return "未设置";
|
return time.replace(" ", " ");
|
},
|
|
// 异常列渲染
|
tableRowClassName({ row }) {
|
if (row.id == this.id) {
|
return "warning-row";
|
}
|
return "";
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.ContinuityCarePage {
|
margin: 10px;
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.headline {
|
font-size: 20px;
|
height: 40px;
|
border-left: 5px solid #41a1be;
|
padding-left: 10px;
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
color: #333;
|
font-weight: 600;
|
}
|
|
.sub-headline {
|
font-size: 16px;
|
height: 36px;
|
padding-left: 8px;
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
color: #409eff;
|
font-weight: 500;
|
border-bottom: 2px solid #e4e7ed;
|
padding-bottom: 8px;
|
|
i {
|
margin-right: 8px;
|
font-size: 18px;
|
}
|
}
|
|
/* 第一部分：服务基础信息 */
|
.basic-info-section {
|
margin: 0 10px;
|
padding: 20px;
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
|
border-radius: 4px;
|
|
.basic-info-container {
|
display: flex;
|
gap: 20px;
|
min-height: 1000px;
|
|
@media screen and (max-width: 1200px) {
|
flex-direction: column;
|
}
|
}
|
|
.followup-content {
|
flex: 1;
|
min-width: 0;
|
|
&.readonly-content {
|
background: #f8f9fa;
|
border-radius: 8px;
|
padding: 15px;
|
border: 1px solid #e4e7ed;
|
}
|
|
.content-container {
|
height: calc(1000px - 60px);
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
|
::v-deep .el-tabs {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.el-tabs__content {
|
flex: 1;
|
overflow: hidden;
|
|
.el-tab-pane {
|
height: 100%;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
}
|
}
|
|
.continuity-history {
|
flex: 1;
|
min-width: 0;
|
background: #fff;
|
border-radius: 8px;
|
padding: 15px;
|
border: 1px solid #e4e7ed;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
.history-content {
|
height: calc(1000px - 60px);
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
|
::v-deep .el-tabs {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.el-tabs__content {
|
flex: 1;
|
overflow-y: auto;
|
padding: 15px 0;
|
|
.continuity-form {
|
padding: 0 10px;
|
|
.el-form {
|
.selected-problems {
|
margin-top: 10px;
|
padding: 10px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
border: 1px solid #e4e7ed;
|
}
|
|
.time-tip {
|
margin-top: 5px;
|
font-size: 12px;
|
color: #67c23a;
|
font-style: italic;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.patient-info-section {
|
margin: 0 10px 20px 10px;
|
padding: 20px;
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
|
border-radius: 4px;
|
|
.patient-info-form {
|
.continuity-summary {
|
padding: 15px;
|
background: #ddf0f8;
|
border-radius: 8px;
|
border: 1px solid #b3e0f2;
|
|
.summary-item {
|
display: inline-block;
|
margin-right: 30px;
|
margin-bottom: 8px;
|
|
.label {
|
font-weight: 500;
|
color: #333;
|
}
|
|
.value {
|
color: #409eff;
|
font-weight: 500;
|
}
|
}
|
}
|
}
|
}
|
|
/* 共享样式 */
|
.CONTENT {
|
padding: 10px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.title {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
text-align: center;
|
color: #333;
|
}
|
}
|
|
.preview-left {
|
margin: 10px;
|
padding: 20px;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
max-height: 800px;
|
overflow-y: auto;
|
background: #fff;
|
flex: 1;
|
|
.topic-dev {
|
margin-bottom: 20px;
|
font-size: 16px;
|
|
.dev-text {
|
margin-bottom: 10px;
|
font-weight: 500;
|
color: #333;
|
}
|
}
|
}
|
|
.scriptTopic-dev {
|
padding: 15px;
|
border-radius: 4px;
|
background: #fafafa;
|
border: 1px solid #e4e7ed;
|
margin-bottom: 15px;
|
}
|
|
.scriptTopic-isabnormal {
|
padding: 15px;
|
border-radius: 4px;
|
background: #fff5f5;
|
border: 1px solid #f56c6c;
|
color: #f56c6c;
|
margin-bottom: 15px;
|
}
|
|
.scriptTopic-warning {
|
padding: 15px;
|
border-radius: 4px;
|
background: #fff9e6;
|
border: 1px solid #e6a23c;
|
color: #e6a23c;
|
margin-bottom: 15px;
|
}
|
|
.red-star {
|
::v-deep.el-radio__label {
|
position: relative;
|
padding-right: 10px;
|
}
|
|
::v-deep.el-radio__label::after {
|
content: "*";
|
color: #f56c6c;
|
position: absolute;
|
right: -5px;
|
top: 0;
|
}
|
}
|
|
.yellow-star {
|
::v-deep.el-radio__label {
|
position: relative;
|
padding-right: 10px;
|
}
|
|
::v-deep.el-radio__label::after {
|
content: "*";
|
color: #e6a23c;
|
position: absolute;
|
right: -5px;
|
top: 0;
|
font-weight: bold;
|
}
|
}
|
|
.borderdiv {
|
height: 100%;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
|
.title {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
text-align: center;
|
}
|
|
.voice-audio {
|
display: flex;
|
align-items: center;
|
color: #59a0f0;
|
margin-bottom: 20px;
|
padding: 10px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
.preview-left {
|
flex: 1;
|
margin: 0;
|
|
.leftside {
|
margin: 15px 0;
|
|
span {
|
display: inline-block;
|
padding: 8px 12px;
|
background: #409eff;
|
color: #fff;
|
border-radius: 8px;
|
max-width: 80%;
|
margin-left: 10px;
|
}
|
}
|
|
.offside {
|
display: flex;
|
flex-direction: row-reverse;
|
margin: 15px 0;
|
|
.offside-value {
|
padding: 8px 12px;
|
background: #67c23a;
|
color: #fff;
|
border-radius: 8px;
|
max-width: 80%;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.ContinuityCarePage {
|
margin: 5px;
|
gap: 10px;
|
}
|
|
.basic-info-section,
|
.patient-info-section {
|
margin: 0 5px;
|
padding: 10px;
|
}
|
|
.basic-info-container {
|
gap: 10px !important;
|
}
|
|
.patient-info-form {
|
.el-row {
|
flex-direction: column;
|
}
|
|
.el-col {
|
width: 100% !important;
|
margin-bottom: 10px;
|
}
|
}
|
|
.preview-left {
|
margin: 5px;
|
padding: 10px;
|
}
|
}
|
/* 问题选择器面板 */
|
.question-selector-panel {
|
margin-bottom: 20px;
|
padding: 15px;
|
background: #f8f9fa;
|
border: 1px solid #e4e7ed;
|
border-radius: 8px;
|
|
.selector-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #e4e7ed;
|
|
span {
|
font-weight: 500;
|
color: #333;
|
}
|
}
|
|
.question-list {
|
max-height: 200px;
|
overflow-y: auto;
|
padding-right: 10px;
|
|
.question-item {
|
margin-bottom: 10px;
|
padding: 8px 12px;
|
background: #fff;
|
border-radius: 6px;
|
border: 1px solid #e4e7ed;
|
transition: all 0.3s;
|
|
&:hover {
|
border-color: #409eff;
|
background: #f0f7ff;
|
}
|
|
.question-content {
|
display: flex;
|
align-items: flex-start;
|
|
.question-index {
|
font-weight: 600;
|
color: #409eff;
|
min-width: 30px;
|
}
|
|
.question-text {
|
flex: 1;
|
line-height: 1.5;
|
}
|
}
|
}
|
}
|
}
|
|
/* 延续问题表单 */
|
.continuity-problems-form {
|
.problems-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #e4e7ed;
|
|
span {
|
font-weight: 500;
|
color: #333;
|
}
|
}
|
|
.problems-list {
|
.problem-item {
|
margin-bottom: 20px;
|
padding: 15px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
border: 1px solid #e4e7ed;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.problem-content {
|
.problem-meta {
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px dashed #e4e7ed;
|
|
.problem-index {
|
font-weight: 500;
|
color: #409eff;
|
min-width: 80px;
|
}
|
}
|
|
.problem-detail {
|
.detail-row {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 10px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.detail-label {
|
font-weight: 500;
|
color: #666;
|
min-width: 100px;
|
line-height: 32px;
|
}
|
|
.detail-value {
|
flex: 1;
|
line-height: 1.5;
|
color: #333;
|
padding: 5px 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.empty-problems {
|
text-align: center;
|
padding: 30px 0;
|
background: #fafafa;
|
border-radius: 8px;
|
border: 1px dashed #e4e7ed;
|
}
|
}
|
/* 延续问题列表容器 - 添加滚动 */
|
.problems-list-container {
|
max-height: 400px; /* 控制最大高度 */
|
overflow-y: auto;
|
padding-right: 10px;
|
margin-bottom: 15px;
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 3px;
|
|
&:hover {
|
background: #a8a8a8;
|
}
|
}
|
}
|
|
/* 问卷式问题展示 */
|
.question-display-area {
|
margin: 15px 0;
|
padding: 15px;
|
background: #fff;
|
border-radius: 8px;
|
border: 1px solid #e4e7ed;
|
|
.question-item-render {
|
.question-text {
|
margin-bottom: 15px;
|
font-size: 14px;
|
line-height: 1.5;
|
color: #333;
|
|
strong {
|
color: #409eff;
|
margin-right: 5px;
|
}
|
|
span {
|
color: #666;
|
}
|
}
|
|
.question-options {
|
margin-left: 20px;
|
|
.el-radio,
|
.el-checkbox {
|
display: block;
|
margin-bottom: 8px;
|
margin-right: 20px;
|
}
|
}
|
|
.append-input {
|
margin-left: 20px;
|
margin-top: 10px;
|
}
|
}
|
|
.no-question-data {
|
text-align: center;
|
color: #999;
|
padding: 20px;
|
font-style: italic;
|
}
|
}
|
|
/* 调整问题详情布局 */
|
.problem-detail {
|
margin-top: 5px;
|
padding-top: 5px;
|
padding-bottom: 20px;
|
margin-bottom: 10px;
|
border-bottom: 1px dashed #6e9af4;
|
|
.detail-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.detail-label {
|
font-weight: 500;
|
color: #666;
|
min-width: 80px;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 768px) {
|
.problems-list-container {
|
max-height: 300px;
|
}
|
|
.problem-detail {
|
.detail-row {
|
flex-direction: column;
|
align-items: flex-start;
|
|
.detail-label {
|
margin-bottom: 5px;
|
min-width: auto;
|
}
|
|
.el-select,
|
.el-date-picker {
|
width: 100% !important;
|
margin: 5px 0 !important;
|
}
|
}
|
}
|
}
|
/* 响应式调整 */
|
@media (max-width: 768px) {
|
.question-selector-panel {
|
padding: 10px;
|
|
.question-list {
|
.question-item {
|
padding: 6px 8px;
|
}
|
}
|
}
|
|
.continuity-problems-form {
|
.problems-list {
|
.problem-item {
|
padding: 10px;
|
|
.problem-content {
|
.problem-meta {
|
flex-direction: column;
|
align-items: flex-start;
|
|
.el-select {
|
width: 100% !important;
|
margin: 10px 0;
|
}
|
}
|
|
.problem-detail {
|
.detail-row {
|
flex-direction: column;
|
align-items: flex-start;
|
|
.detail-label {
|
margin-bottom: 5px;
|
min-width: auto;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
/* 滚动条美化 */
|
.preview-left,
|
.history-content .el-tabs__content,
|
.content-container .el-tabs__content {
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #c1c1c1;
|
border-radius: 3px;
|
|
&:hover {
|
background: #a8a8a8;
|
}
|
}
|
}
|
</style>
|
