<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-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 label="女" :value="2" />
|
</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-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-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-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-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-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-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-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-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-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" /> 当前服务随访内容（只读）
|
<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, idx) 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" /> 问卷随访结果</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)"
|
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, idx
|
) in item.svyTaskTemplateTargetoptions"
|
:class="getOptionClass(items)"
|
:key="idx"
|
: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
|
/>
|
</div>
|
<div v-show="item.prompt">
|
<el-alert :title="item.prompt" type="warning" />
|
</div>
|
</div>
|
<!-- 多选 -->
|
<div
|
:class="
|
item.isabnormal
|
? 'scriptTopic-isabnormal'
|
: 'scriptTopic-dev'
|
"
|
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, idx
|
) in item.svyTaskTemplateTargetoptions"
|
:key="idx"
|
: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" />
|
</div>
|
</div>
|
<!-- 填空 -->
|
<div
|
class="scriptTopic-dev"
|
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
|
/>
|
</div>
|
<div class="dev-xx" v-else>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入答案"
|
v-model="item.scriptResult"
|
readonly
|
/>
|
</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, idx) in item.scriptResult"
|
:key="idx"
|
: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" />
|
</div>
|
</div>
|
<div class="scriptTopic-dev" 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
|
/>
|
</div>
|
<div class="dev-xx" v-else>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入答案"
|
v-model="item.scriptResult"
|
readonly
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane name="yy">
|
<span slot="label"
|
><i class="el-icon-headset" /> 语音随访详情</span
|
>
|
<div class="borderdiv">
|
<div class="title">{{ taskname ? taskname : "问卷" }}</div>
|
<div class="voice-audio">
|
完整语音：<mini-audio
|
:audio-source="
|
voice ? voice : '@assets/order/example.mp3'
|
"
|
/>
|
</div>
|
<div class="preview-left">
|
<div v-for="item in voiceDatatop" :key="item.id">
|
<div class="leftside">
|
<i class="el-icon-phone-outline" /><span>{{
|
item.questiontext
|
}}</span>
|
</div>
|
<div class="offside">
|
<i class="el-icon-user" />
|
<div class="offside-value">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 1 }"
|
v-model="item.asrtext"
|
readonly
|
/>
|
<div>
|
<mini-audio
|
:audio-source="
|
item.questionvoice
|
? item.questionvoice
|
: '@assets/order/example.mp3'
|
"
|
/>
|
</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" /> 历次延续护理服务
|
<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"
|
>
|
<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
|
>
|
<el-button
|
type="text"
|
size="small"
|
icon="el-icon-edit"
|
@click="addCustomProblem(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
|
)
|
"
|
:disabled="problem.isCustom"
|
>
|
<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)
|
"
|
/>
|
</div>
|
|
<!-- ========== 自定义问题编辑区 ========== -->
|
<div
|
v-if="problem.isCustom"
|
class="custom-editor"
|
>
|
<el-form-item
|
label="题目内容"
|
style="margin-bottom: 10px"
|
>
|
<el-input
|
v-model="problem.customText"
|
placeholder="请输入问题内容"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item
|
label="题型"
|
style="margin-bottom: 10px"
|
>
|
<el-radio-group
|
v-model="problem.customType"
|
size="small"
|
>
|
<el-radio-button :label="1"
|
>单选题</el-radio-button
|
>
|
<el-radio-button :label="2"
|
>多选题</el-radio-button
|
>
|
<el-radio-button :label="4"
|
>问答题</el-radio-button
|
>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="
|
problem.customType === 1 ||
|
problem.customType === 2
|
"
|
label="选项"
|
style="margin-bottom: 10px"
|
>
|
<div
|
v-for="(opt, idx) in problem.customOptions"
|
:key="idx"
|
class="option-row"
|
>
|
<el-input
|
v-model="opt.optioncontent"
|
placeholder="请输入选项内容"
|
size="small"
|
style="width: 200px; margin-right: 10px"
|
/>
|
<el-button
|
type="danger"
|
size="mini"
|
icon="el-icon-delete"
|
@click="
|
removeCustomOption(
|
index,
|
problemIndex,
|
idx
|
)
|
"
|
/>
|
</div>
|
<el-button
|
type="primary"
|
size="mini"
|
@click="
|
addCustomOption(index, problemIndex)
|
"
|
>添加选项</el-button
|
>
|
</el-form-item>
|
<el-form-item label="答案">
|
<!-- 单选 -->
|
<el-radio-group
|
v-if="problem.customType === 1"
|
v-model="problem.customAnswer"
|
>
|
<el-radio
|
v-for="opt in problem.customOptions"
|
:key="opt.optioncontent"
|
:label="opt.optioncontent"
|
>
|
{{ opt.optioncontent }}
|
</el-radio>
|
</el-radio-group>
|
<!-- 多选 -->
|
<el-checkbox-group
|
v-else-if="problem.customType === 2"
|
v-model="problem.customAnswer"
|
>
|
<el-checkbox
|
v-for="opt in problem.customOptions"
|
:key="opt.optioncontent"
|
:label="opt.optioncontent"
|
>
|
{{ opt.optioncontent }}
|
</el-checkbox>
|
</el-checkbox-group>
|
<!-- 问答 -->
|
<el-input
|
v-else-if="problem.customType === 4"
|
v-model="problem.customAnswer"
|
placeholder="请输入答案"
|
size="small"
|
style="width: 300px"
|
/>
|
<span v-else style="color: #999"
|
>请先选择题型</span
|
>
|
</el-form-item>
|
</div>
|
|
<!-- ========== 非自定义：展示已有问题 ========== -->
|
<div
|
v-else-if="
|
problem.questionId &&
|
getQuestionOriginalData(problem.questionId)
|
"
|
class="question-display-area"
|
>
|
<div class="question-item-render">
|
<!-- 单选 -->
|
<div
|
v-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptType == 1
|
"
|
>
|
<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="opt in getQuestionOriginalData(
|
problem.questionId
|
).svyTaskTemplateTargetoptions"
|
:key="opt.optioncontent"
|
:label="opt.optioncontent"
|
:class="getOptionClass(opt)"
|
>{{ opt.optioncontent }}</el-radio
|
>
|
</el-radio-group>
|
</div>
|
<div
|
v-if="problem.showAppendInput"
|
class="append-input"
|
>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入具体信息"
|
v-model="problem.appendInput"
|
/>
|
</div>
|
</div>
|
<!-- 多选 -->
|
<div
|
v-else-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptType == 2
|
"
|
>
|
<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="opt in getQuestionOriginalData(
|
problem.questionId
|
).svyTaskTemplateTargetoptions"
|
:key="opt.optioncontent"
|
:label="opt.optioncontent"
|
:class="
|
opt.isabnormal ? 'red-star' : ''
|
"
|
>{{ opt.optioncontent }}</el-checkbox
|
>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<!-- 问答 -->
|
<div
|
v-else-if="
|
getQuestionOriginalData(
|
problem.questionId
|
).scriptType == 4
|
"
|
>
|
<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
|
v-else
|
type="textarea"
|
:rows="2"
|
placeholder="请输入答案"
|
v-model="problem.answer"
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</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
|
label="处理中"
|
value="processing"
|
/>
|
<el-option
|
label="已解决"
|
value="resolved"
|
/>
|
<el-option
|
label="持续关注"
|
value="watching"
|
/>
|
</el-select>
|
<span
|
v-if="problem.status === 'resolved'"
|
class="detail-label"
|
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"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="empty-problems">
|
暂无延续问题，请点击上方按钮添加
|
</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-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-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 label="上门回访" value="home" />
|
<el-option label="门诊回访" value="clinic" />
|
<el-option label="微信回访" value="wechat" />
|
<el-option label="其他" value="other" />
|
</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%"
|
/>
|
<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-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: {
|
careRecord: [
|
{ required: true, message: "请输入护理记录", trigger: "blur" },
|
],
|
dutyNurse: [
|
{ required: true, message: "请输入责任护士", trigger: "blur" },
|
],
|
visitType: [
|
{ required: true, message: "请选择回访形式", trigger: "change" },
|
],
|
serviceTime: [
|
{ 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) {
|
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();
|
// 加载历史延续护理（此时 availableQuestions 已就绪）
|
this.loadContinuityHistory();
|
}
|
});
|
},
|
overdata() {
|
this.tableDatatop.forEach((item, index) => {
|
const obj = item.svyTaskTemplateTargetoptions.find(
|
(items) => items.optioncontent == item.scriptResult
|
);
|
if (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 = [];
|
},
|
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((p) => p.questionId === questionId);
|
if (!exists) {
|
this.continuityTabs[activeTabIndex].form.continuityProblems.push({
|
questionId: questionId,
|
status: "pending",
|
description: "",
|
resolvedDate: "",
|
createTime: new Date().toISOString(),
|
isCustom: false,
|
customText: "",
|
customType: null,
|
customOptions: [],
|
customAnswer: "",
|
selectedOption: "",
|
selectedOptions: [],
|
answer: "",
|
showAppendInput: false,
|
appendInput: "",
|
});
|
}
|
});
|
this.showQuestionSelector = false;
|
this.selectedQuestionIds = [];
|
this.$modal.msgSuccess("已添加选中的延续问题");
|
},
|
|
// ---- 语音数据 ----
|
getPersonVoices(id) {
|
const 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();
|
this.loadContinuityHistory();
|
}
|
});
|
},
|
|
// ---- 患者信息 ----
|
getuserinfo() {
|
messagelistpatient({ pid: Number(this.patid), allhosp: "0" }).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.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) => {
|
const problems = (item.continuityProblems || []).map((problem) => {
|
// 处理自定义问题回显
|
const isCustom =
|
problem.questionId === "__CUSTOM__" ||
|
problem.isCustom === true;
|
if (isCustom) {
|
problem.isCustom = true;
|
problem.questionId = "__CUSTOM__";
|
if (!problem.customText && problem.description) {
|
const match =
|
problem.description.match(/自定义问题[：:]\s*(.*)/);
|
if (match) problem.customText = match[1];
|
}
|
if (!problem.customText) problem.customText = "（自定义问题）";
|
// 确保选项数组存在
|
if (!Array.isArray(problem.customOptions))
|
problem.customOptions = [];
|
if (!problem.customType) problem.customType = 1; // 默认单选
|
if (problem.customAnswer === undefined)
|
problem.customAnswer = "";
|
} else if (
|
problem.customText &&
|
this.availableQuestions.length > 0
|
) {
|
// 有自定义文本但未标记，且不在已有列表中，视为自定义
|
const exists = this.availableQuestions.some(
|
(q) => q.id === problem.questionId
|
);
|
if (!exists) {
|
problem.isCustom = true;
|
problem.questionId = "__CUSTOM__";
|
if (!problem.customText && problem.description) {
|
const match =
|
problem.description.match(/自定义问题[：:]\s*(.*)/);
|
if (match) problem.customText = match[1];
|
}
|
if (!problem.customText)
|
problem.customText = "（自定义问题）";
|
if (!Array.isArray(problem.customOptions))
|
problem.customOptions = [];
|
if (!problem.customType) problem.customType = 1;
|
if (problem.customAnswer === undefined)
|
problem.customAnswer = "";
|
}
|
}
|
// 确保字段完整
|
if (!problem.hasOwnProperty("selectedOption"))
|
problem.selectedOption = "";
|
if (!problem.hasOwnProperty("selectedOptions"))
|
problem.selectedOptions = [];
|
if (!problem.hasOwnProperty("answer")) problem.answer = "";
|
if (!problem.hasOwnProperty("showAppendInput"))
|
problem.showAppendInput = false;
|
if (!problem.hasOwnProperty("appendInput"))
|
problem.appendInput = "";
|
if (!problem.hasOwnProperty("status")) problem.status = "pending";
|
if (!problem.hasOwnProperty("description"))
|
problem.description = "";
|
if (!problem.hasOwnProperty("resolvedDate"))
|
problem.resolvedDate = "";
|
if (!problem.hasOwnProperty("createTime"))
|
problem.createTime = new Date().toISOString();
|
return problem;
|
});
|
|
return {
|
name: `continuity-${index}`,
|
title: `延续护理${index + 1}`,
|
form: {
|
continuityProblems: problems,
|
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);
|
}
|
}
|
},
|
|
// ---- 延续护理 Tab 管理 ----
|
addContinuityTab() {
|
const newIndex = this.continuityTabs.length + 1;
|
const newTab = {
|
name: `continuity-${newIndex}`,
|
title: `延续护理${newIndex}`,
|
form: {
|
continuityProblems: [],
|
careRecord: "",
|
dutyNurse: "",
|
visitType: "",
|
serviceTime: "",
|
nextServiceTime: "",
|
},
|
saving: false,
|
};
|
this.continuityTabs.push(newTab);
|
this.activeContinuityTab = newTab.name;
|
},
|
removeContinuityTab(targetName) {
|
let activeName = this.activeContinuityTab;
|
if (activeName === targetName) {
|
const tabs = this.continuityTabs;
|
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 = this.continuityTabs.filter(
|
(tab) => tab.name !== targetName
|
);
|
},
|
handleTabClick(tab) {
|
this.activeContinuityTab = tab.name;
|
},
|
|
// ---- 延续问题管理（已有问题） ----
|
addContinuityProblem(tabIndex) {
|
this.continuityTabs[tabIndex].form.continuityProblems.push({
|
questionId: "",
|
status: "pending",
|
description: "",
|
resolvedDate: "",
|
createTime: new Date().toISOString(),
|
isCustom: false,
|
customText: "",
|
customType: null,
|
customOptions: [],
|
customAnswer: "",
|
selectedOption: "",
|
selectedOptions: [],
|
answer: "",
|
showAppendInput: false,
|
appendInput: "",
|
});
|
},
|
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.isCustom = false;
|
problem.customText = "";
|
problem.customType = null;
|
problem.customOptions = [];
|
problem.customAnswer = "";
|
// 自动填充描述
|
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 || "";
|
}
|
}
|
} else {
|
// 未选择问题
|
problem.description = "";
|
problem.selectedOption = "";
|
problem.selectedOptions = [];
|
problem.answer = "";
|
problem.showAppendInput = false;
|
problem.appendInput = "";
|
}
|
},
|
|
// ---- 自定义问题相关 ----
|
addCustomProblem(tabIndex) {
|
this.continuityTabs[tabIndex].form.continuityProblems.push({
|
questionId: "__CUSTOM__",
|
isCustom: true,
|
customText: "",
|
customType: 1, // 默认单选
|
customOptions: [{ optioncontent: "" }],
|
customAnswer: "",
|
status: "pending",
|
description: "",
|
resolvedDate: "",
|
createTime: new Date().toISOString(),
|
selectedOption: "",
|
selectedOptions: [],
|
answer: "",
|
showAppendInput: false,
|
appendInput: "",
|
});
|
},
|
addCustomOption(tabIndex, problemIndex) {
|
const problem =
|
this.continuityTabs[tabIndex].form.continuityProblems[problemIndex];
|
problem.customOptions.push({ optioncontent: "" });
|
},
|
removeCustomOption(tabIndex, problemIndex, optionIndex) {
|
const problem =
|
this.continuityTabs[tabIndex].form.continuityProblems[problemIndex];
|
problem.customOptions.splice(optionIndex, 1);
|
},
|
|
// ---- 辅助方法 ----
|
getQuestionOriginalData(questionId) {
|
if (!questionId) return null;
|
const found = this.availableQuestions.find((q) => q.id === questionId);
|
if (found && this.tableDatatop[found.originalIndex]) {
|
return this.tableDatatop[found.originalIndex];
|
}
|
return null;
|
},
|
truncateText(text, length) {
|
if (!text) return "";
|
return text.length > length ? text.substring(0, length) + "..." : text;
|
},
|
|
// ---- 保存延续护理 ----
|
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, pIdx) => {
|
if (problem.isCustom) {
|
// 自定义问题校验
|
if (!problem.customText || !problem.customText.trim()) {
|
hasError = true;
|
this.$modal.msgError(`第${pIdx + 1}个自定义问题内容为空`);
|
}
|
if (
|
(problem.customType === 1 || problem.customType === 2) &&
|
problem.customOptions.some((opt) => !opt.optioncontent.trim())
|
) {
|
hasError = true;
|
this.$modal.msgError(`第${pIdx + 1}个自定义问题存在空选项`);
|
}
|
if (problem.customType === 1 && !problem.customAnswer) {
|
hasError = true;
|
this.$modal.msgError(
|
`第${pIdx + 1}个自定义问题（单选）未选择答案`
|
);
|
}
|
if (
|
problem.customType === 2 &&
|
(!problem.customAnswer || problem.customAnswer.length === 0)
|
) {
|
hasError = true;
|
this.$modal.msgError(
|
`第${pIdx + 1}个自定义问题（多选）未选择答案`
|
);
|
}
|
if (problem.customType === 4 && !problem.customAnswer) {
|
hasError = true;
|
this.$modal.msgError(
|
`第${pIdx + 1}个自定义问题（问答）未填写答案`
|
);
|
}
|
} else {
|
// 已有问题校验
|
if (!problem.questionId) {
|
hasError = true;
|
this.$modal.msgError(`第${pIdx + 1}个延续问题未选择`);
|
}
|
}
|
});
|
if (hasError) return;
|
|
this.continuityTabs[index].saving = true;
|
this.updateContinuitySummaryFromTabs();
|
this.saveContinuityData();
|
} else {
|
this.$modal.msgError("请填写完整信息");
|
}
|
});
|
},
|
updateContinuitySummaryFromTabs() {
|
if (this.continuityTabs.length === 0) return;
|
let latestTime = "",
|
nextTime = "";
|
this.continuityTabs.forEach((tab) => {
|
if (
|
tab.form.serviceTime &&
|
(!latestTime || new Date(tab.form.serviceTime) > new Date(latestTime))
|
) {
|
latestTime = tab.form.serviceTime;
|
}
|
if (
|
tab.form.nextServiceTime &&
|
(!nextTime || new Date(tab.form.nextServiceTime) < new Date(nextTime))
|
) {
|
nextTime = tab.form.nextServiceTime;
|
}
|
});
|
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);
|
},
|
saveContinuityData() {
|
const vm = this;
|
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,
|
};
|
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;
|
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("请填写完整信息");
|
}
|
});
|
},
|
resetPatientInfo() {
|
this.initPatientForm();
|
this.$refs.patientForm.clearValidate();
|
},
|
|
// ---- 工具方法 ----
|
formatTime(time) {
|
if (!time) return "";
|
return time.split(" ")[0];
|
},
|
formatDisplayTime(time) {
|
if (!time) return "未设置";
|
return time.replace(" ", " ");
|
},
|
calculateDaysLeft(nextServiceTime) {
|
if (!nextServiceTime) return 0;
|
const diff = new Date(nextServiceTime) - new Date();
|
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
|
return days > 0 ? days : 0;
|
},
|
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 || "";
|
}
|
},
|
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;
|
min-height: 0;
|
.el-tabs__content {
|
flex: 1;
|
overflow-y: auto;
|
min-height: 0; // 关键：配合 flex
|
padding: 15px 0;
|
.continuity-form {
|
padding: 0 10px;
|
.el-form .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;
|
&::after {
|
content: "*";
|
color: #f56c6c;
|
position: absolute;
|
right: -5px;
|
top: 0;
|
}
|
}
|
.yellow-star ::v-deep.el-radio__label {
|
position: relative;
|
padding-right: 10px;
|
&::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;
|
}
|
.patient-info-form .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-container {
|
// max-height: 680px;
|
// 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;
|
}
|
}
|
}
|
.problem-item {
|
margin-bottom: 20px;
|
padding: 15px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
border: 1px solid #e4e7ed;
|
.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;
|
}
|
}
|
.custom-editor {
|
padding: 10px 0;
|
.option-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 6px;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
.empty-problems {
|
text-align: center;
|
padding: 30px 0;
|
background: #fafafa;
|
border-radius: 8px;
|
border: 1px dashed #e4e7ed;
|
color: #999;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
@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;
|
}
|
}
|
.question-selector-panel {
|
padding: 10px;
|
.question-list .question-item {
|
padding: 6px 8px;
|
}
|
}
|
.continuity-problems-form
|
.problems-list
|
.problem-item
|
.problem-content
|
.problem-meta {
|
flex-direction: column;
|
align-items: flex-start;
|
.el-select {
|
width: 100% !important;
|
margin: 10px 0;
|
}
|
}
|
}
|
.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>
|
