感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。
新人作者，欢迎关注和收藏👏🏻👏🏻
本次的需求是手写一个养老院老人生活能力评定表，并且要能够录入信息，最终导出
表格因为有七页所以代码很多，可以不用看表格模板的详细代码。
先贴上最终效果图
实现了样式的百分百还原导出
web端的表格主要实现思路就是用原生table画表格，嵌入element ui和vue的条件渲染来实现编辑。
这里要记住两个属性：
rowspan：代表行跨度也就是一个单元格能够合并几行
colspan：代表列跨度，也就是一个单元格能够跨几列
1.实现可编辑的指定样式的表格
<div id="htmltable" :class="[isEdit ? '' : 'disable']">
<div class="tit1" style="margin: 10px">
A：老年人能力评估基本信息表
</div>
<div class="tbA1">
<div class="tit2" style="margin: 20px">A.1 评估基本信息表</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="6" class="title">评估编号</td>
<td colspan="24">
<div
class="item"
@click="assessmentIdEdit = !assessmentIdEdit"
>
<div v-if="!assessmentIdEdit">
{{ assessmentId }}
</div>
<div class="input_con" v-if="assessmentIdEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="assessmentId"
placeholder="请输入内容"
@change="assessmentIdEdit = false"
@blur="assessmentIdEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">评估基准日期</td>
<td colspan="24">
<div v-if="formData">
{{ formData.createdOn.slice(0, 10) }}
</div>
</td>
</tr>
<tr>
<td colspan="6" rowspan="4" class="title">评估原因</td>
<td colspan="4" rowspan="4">
<div
class="item"
@click="assessmentReasonEdit = !assessmentReasonEdit"
>
<div v-if="!assessmentReasonEdit">
{{ assessmentReason }}
</div>
<div class="input_con" v-if="assessmentReasonEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="assessmentReason"
placeholder="请输入内容"
@change="assessmentReasonEdit = false"
@blur="assessmentReasonEdit = false"
></el-input>
</div>
</div>
</td>
<td colspan="20">1 接受服务前初评</td>
</tr>
<tr>
<td colspan="20">2 接受服务后的常规评估</td>
</tr>
<tr>
<td colspan="20">3 状况发生变化后的即时评估</td>
</tr>
<tr>
<td colspan="20">4 因评估结果有疑问进行的复评</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbA2">
<div class="tit2" style="margin: 20px">A.2 入住老人基本信息</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="6" class="title">姓名</td>
<td colspan="24">
<div class="item" @click="nameEdit = !nameEdit">
<div v-if="!nameEdit">
{{ name }}
</div>
<div class="input_con" v-if="nameEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="name"
placeholder="请输入内容"
@change="nameEdit = false"
@blur="nameEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">性别</td>
<td colspan="24">
<div class="item" @click="sexEdit = !sexEdit">
<div v-if="!sexEdit">
{{ sex }}
</div>
<div class="input_con" v-if="sexEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="sex"
placeholder="请输入内容"
@change="sexEdit = false"
@blur="sexEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">出生日期</td>
<td colspan="24">
<div class="item" @click="birthdayEdit = !birthdayEdit">
<div v-if="!birthdayEdit">
{{ birthday }}
</div>
<div class="input_con" v-if="birthdayEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="birthday"
placeholder="请输入内容"
@change="birthdayEdit = false"
@blur="birthdayEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">身份证号</td>
<td colspan="24">
<div class="item" @click="idCardEdit = !idCardEdit">
<div v-if="!idCardEdit">
{{ idCard }}
</div>
<div class="input_con" v-if="idCardEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="idCard"
placeholder="请输入内容"
@change="idCardEdit = false"
@blur="idCardEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">社保卡号</td>
<td colspan="24">
<div
class="item"
@click="socialSecurityEdit = !socialSecurityEdit"
>
<div v-if="!socialSecurityEdit">
{{ socialSecurity }}
</div>
<div class="input_con" v-if="socialSecurityEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="socialSecurity"
placeholder="请输入内容"
@change="socialSecurityEdit = false"
@blur="socialSecurityEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">民族</td>
<td colspan="24" @click="nationEdit = false">
<div
class="item"
v-if="!nationEdit"
@click="
(e) => {
e.stopPropagation();
nationEdit = true;
}
"
>
{{ nation }}
</div>
<div class="input_con" v-if="nationEdit">
<el-select
v-model="nation"
placeholder="请选择"
@change="nationEdit = false"
>
<el-option
v-for="item in nationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">文化程度</td>
<td colspan="24" @click="educationLevelEdit = false">
<div
class="item"
v-if="!educationLevelEdit"
@click="
(e) => {
e.stopPropagation();
educationLevelEdit = true;
}
"
>
{{ educationLevel }}
</div>
<div class="input_con" v-if="educationLevelEdit">
<el-select
v-model="educationLevel"
placeholder="请选择"
@change="educationLevelEdit = false"
>
<el-option
v-for="item in educationLevelOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">宗教信仰</td>
<td colspan="24" @click="religiousBeliefEdit = false">
<div
class="item"
v-if="!religiousBeliefEdit"
@click="
(e) => {
e.stopPropagation();
religiousBeliefEdit = true;
}
"
>
{{ religiousBelief }}
</div>
<div class="input_con" v-if="religiousBeliefEdit">
<el-select
v-model="religiousBelief"
placeholder="请选择"
@change="religiousBeliefEdit = false"
>
<el-option
v-for="item in religiousBeliefOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">婚姻状况</td>
<td colspan="24" @click="maritalStatusEdit = false">
<div
class="item"
v-if="!maritalStatusEdit"
@click="
(e) => {
e.stopPropagation();
maritalStatusEdit = true;
}
"
>
{{ maritalStatus }}
</div>
<div class="input_con" v-if="maritalStatusEdit">
<el-select
v-model="maritalStatus"
placeholder="请选择"
@change="maritalStatusEdit = false"
>
<el-option
v-for="item in maritalStatusOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">居住情况</td>
<td colspan="24" @click="residentialSituationEdit = false">
<div
class="item"
v-if="!residentialSituationEdit"
@click="
(e) => {
e.stopPropagation();
residentialSituationEdit = true;
}
"
>
{{ residentialSituation }}
</div>
<div class="input_con" v-if="residentialSituationEdit">
<el-select
:popper-append-to-body="false"
v-model="residentialSituation"
placeholder="请选择"
@change="residentialSituationEdit = false"
>
<el-option
v-for="item in residentialSituationOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">医疗费用支付方式</td>
<td colspan="24" @click="medicalPaymentMethodEdit = false">
<div
class="item"
v-if="!medicalPaymentMethodEdit"
@click="
(e) => {
e.stopPropagation();
medicalPaymentMethodEdit = true;
}
"
>
{{ medicalPaymentMethod }}
</div>
<div class="input_con" v-if="medicalPaymentMethodEdit">
<el-select
:popper-append-to-body="false"
v-model="medicalPaymentMethod"
placeholder="请选择"
@change="medicalPaymentMethodEdit = false"
>
<el-option
v-for="item in medicalPaymentMethodOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">经济来源</td>
<td colspan="24" @click="financialEdit = false">
<div
class="item"
v-if="!financialEdit"
@click="
(e) => {
e.stopPropagation();
financialEdit = true;
}
"
>
{{ financial }}
</div>
<div class="input_con" v-if="financialEdit">
<el-select
:popper-append-to-body="false"
v-model="financial"
placeholder="请选择"
@change="financialEdit = false"
>
<el-option
v-for="item in financialOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">疾病诊断</td>
<td colspan="24" @click="diseaseDiagnosisEdit = false">
<div
class="item"
v-if="!diseaseDiagnosisEdit"
@click="
(e) => {
e.stopPropagation();
diseaseDiagnosisEdit = true;
}
"
>
{{ diseaseDiagnosis.join(",") }}
</div>
<div class="input_con" v-if="diseaseDiagnosisEdit">
<el-select
class="cascader"
multiple
:popper-append-to-body="false"
v-model="diseaseDiagnosis"
placeholder="请选择"
@change="diseaseDiagnosisEdit = false"
>
<el-option
v-for="item in diseaseDiagnosisOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">近30天内意外事件</td>
<td colspan="24" @click="accidentEdit = false">
<div
class="item"
v-if="!accidentEdit"
@click="
(e) => {
e.stopPropagation();
accidentEdit = true;
}
"
>
{{ accident.join(",") }}
</div>
<div class="input_con" v-if="accidentEdit">
<el-select
class="cascader"
multiple
:popper-append-to-body="false"
v-model="accident"
placeholder="请选择"
@change="accidentEdit = false"
>
<el-option
v-for="item in accidentOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tit1" style="margin: 10px">B:老年人能力评估</div>
<div class="tbB1" id="tbB1">
<div class="tit2" style="margin: 20px; margin-bottom: 10px">
B.1 日常生活活动
</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="3" class="title">
进食：指用餐具将食物由容器送到口中、咀嚼、吞咽等过程
</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorAEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorAEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorAEdit = true;
}
"
>
{{
dailyBehaviorA === "" || dailyBehaviorA == null
? ""
: dailyBehaviorA + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorAEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorA"
placeholder="请选择"
@change="dailyBehaviorAEdit = false"
>
<el-option
v-for="item in dailyBehaviorAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
10分，可独立进食(在合理的时间内独立进食准备好的食物)
</td>
</tr>
<tr>
<td colspan="20">
5分，需部分帮助(进食过程中需要一定帮助，如协助把持餐具)
</td>
</tr>
<tr>
<td colspan="20">
0分，需极大帮助或完全依赖他人,或有留置胃管
</td>
</tr>
<tr>
<td colspan="12" rowspan="2" class="title">洗澡</td>
<td
colspan="3"
rowspan="2"
@click="dailyBehaviorBEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorBEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorBEdit = true;
}
"
>
{{
dailyBehaviorB === "" || dailyBehaviorB == null
? ""
: dailyBehaviorB + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorBEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorB"
placeholder="请选择"
@change="dailyBehaviorBEdit = false"
>
<el-option
v-for="item in dailyBehaviorBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
5分，准备好洗澡水后，可自己独立完成洗澡过程
</td>
</tr>
<tr>
<td colspan="20">0分， 在洗澡过程中需他人帮助</td>
</tr>
<tr>
<td colspan="12" rowspan="2" class="title">
修饰：指洗脸、刷牙、梳头等
</td>
<td
colspan="3"
rowspan="2"
@click="dailyBehaviorCEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorCEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorCEdit = true;
}
"
>
{{
dailyBehaviorC === "" || dailyBehaviorC == null
? ""
: dailyBehaviorC + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorCEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorC"
placeholder="请选择"
@change="dailyBehaviorCEdit = false"
>
<el-option
v-for="item in dailyBehaviorCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">5分， 可自己独立完成</td>
</tr>
<tr>
<td colspan="20">0分，需他人帮助</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">
穿衣：指穿脱衣服、系扣、拉拉 链、穿脱鞋袜系鞋带
</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorDEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorDEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorDEdit = true;
}
"
>
{{
dailyBehaviorD === "" || dailyBehaviorD == null
? ""
: dailyBehaviorD + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorDEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorD"
placeholder="请选择"
@change="dailyBehaviorDEdit = false"
>
<el-option
v-for="item in dailyBehaviorDOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可独立完成</td>
</tr>
<tr>
<td colspan="20">
5分，需部分帮助(能自己穿脱，但需他人帮助整理衣物、系扣/鞋带、拉拉链)
</td>
</tr>
<tr>
<td colspan="20">0分，需极大帮助或完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">大便控制</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorEEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorEEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorEEdit = true;
}
"
>
{{
dailyBehaviorE === "" || dailyBehaviorE == null
? ""
: dailyBehaviorE + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorEEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorE"
placeholder="请选择"
@change="dailyBehaviorEEdit = false"
>
<el-option
v-for="item in dailyBehaviorEOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可控制大便</td>
</tr>
<tr>
<td colspan="20">
{{ "5分，偶尔失控（每周 < 1次），或需要他人提示" }}
</td>
</tr>
<tr>
<td colspan="20">0分，完全失控</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">小便控制</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorFEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorFEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorFEdit = true;
}
"
>
{{
dailyBehaviorF === "" || dailyBehaviorF == null
? ""
: dailyBehaviorF + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorFEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorF"
placeholder="请选择"
@change="dailyBehaviorFEdit = false"
>
<el-option
v-for="item in dailyBehaviorFOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可控制小便</td>
</tr>
<tr>
<td colspan="20">
{{
"5分，偶尔失控（每天<1次，但每周>1次），或需要他人提示"
}}
</td>
</tr>
<tr>
<td colspan="20">0分，完全失控，或留置导尿管</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">
包括去厕所、解开衣裤、擦净、 整理衣裤、冲水
</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorGEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorGEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorGEdit = true;
}
"
>
{{
dailyBehaviorG === "" || dailyBehaviorG == null
? ""
: dailyBehaviorG + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorGEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorG"
placeholder="请选择"
@change="dailyBehaviorGEdit = false"
>
<el-option
v-for="item in dailyBehaviorGOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可独立完成</td>
</tr>
<tr>
<td colspan="20">
{{
"5分，需部分帮助（需他人搀扶去厕所、需他人帮忙冲水或整理衣裤等)"
}}
</td>
</tr>
<tr>
<td colspan="20">0分， 需极大帮助或完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">床椅转移</td>
<td
colspan="3"
rowspan="4"
@click="dailyBehaviorHEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorHEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorHEdit = true;
}
"
>
{{
dailyBehaviorH === "" || dailyBehaviorH == null
? ""
: dailyBehaviorH + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorHEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorH"
placeholder="请选择"
@change="dailyBehaviorHEdit = false"
>
<el-option
v-for="item in dailyBehaviorHOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">15分，可独立完成</td>
</tr>
<tr>
<td colspan="20">
{{ "10分，需部分帮助（需他人搀扶或使用拐杖))" }}
</td>
</tr>
<tr>
<td colspan="20">
5分，需极大帮助（较大程度上依赖他人搀扶和帮助）
</td>
</tr>
<tr>
<td colspan="20">0分，完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">平地行走</td>
<td
colspan="3"
rowspan="4"
@click="dailyBehaviorIEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorIEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorIEdit = true;
}
"
>
{{
dailyBehaviorI === "" || dailyBehaviorI == null
? ""
: dailyBehaviorI + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorIEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorI"
placeholder="请选择"
@change="dailyBehaviorIEdit = false"
>
<el-option
v-for="item in dailyBehaviorIOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">15分，可独立在平地上行走45m</td>
</tr>
<tr>
<td colspan="20">
{{
"10分，需部分帮助（因肢体残疾、平衡能力差、过度虚弱、视力等问题， 在一定度上需他人地搀扶或使用拐杖、助行器等辅助用具）"
}}
</td>
</tr>
<tr>
<td colspan="20">
5分，需极大帮助（因肢体残疾、平衡能力差、过度虚弱、视力等问题，
在较大程度上依赖他人搀扶，或坐在轮椅上自行移动）
</td>
</tr>
<tr>
<td colspan="20">0分，完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">上下楼梯</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorJEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorJEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorJEdit = true;
}
"
>
{{
dailyBehaviorJ === "" || dailyBehaviorJ == null
? ""
: dailyBehaviorJ + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorJEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorJ"
placeholder="请选择"
@change="dailyBehaviorJEdit = false"
>
<el-option
v-for="item in dailyBehaviorJOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
10分，可独立上下楼梯（连续上下10-15个台阶）
</td>
</tr>
<tr>
<td colspan="20">
{{
"5分，需部分帮助（需扶着楼梯、他人搀扶，或使用拐杖等)"
}}
</td>
</tr>
<tr>
<td colspan="20">0分，需极大帮助或完全依赖他人</td>
</tr>
<tr>
<td colspan="12" class="title">日常生活活动总分</td>
<td colspan="3" class="title">
{{ dailyBehaviorK + "分" }}
</td>
<td colspan="20">上述10个项目得分之和</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">
日常生活活动分级
</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ dailyBehaviorL + "级" }}
</div>
</td>
<td colspan="20">0能力完好：总分100分</td>
</tr>
<tr>
<td colspan="20">
{{ "1轻度受损：总分65-95分)" }}
</td>
</tr>
<tr>
<td colspan="20">2中度受损：总分45-60分</td>
</tr>
<tr>
<td colspan="20">3重度受损：总分≤40分</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbB2" id="tbB2">
<div class="tit2" style="margin: 20px">B.2精神状态评估</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="6" class="title">
B.2. 1 认知功能
</td>
<td colspan="3" rowspan="3">
<div class="item">测验</div>
</td>
<td colspan="20">
“我说三样东西，请重复一遍，并记住，一会儿会问您”：苹果、手表、国旗
</td>
</tr>
<tr>
<td colspan="20">
{{
"（1）画钟测验：“请在这儿画一个圆形时钟，在时钟上标出10点45分”"
}}
</td>
</tr>
<tr>
<td colspan="20">
（2）回忆词语：“现在请您告诉我，刚才我要您记住的三样东西是什么？”
</td>
</tr>
<tr>
<td colspan="3" rowspan="3" @click="mentalityAEdit = false">
<div
class="item"
v-if="!mentalityAEdit"
@click="
(e) => {
e.stopPropagation();
mentalityAEdit = true;
}
"
>
{{
mentalityA === "" || mentalityA == null
? ""
: mentalityA + "分"
}}
</div>
<div class="input_con" v-if="mentalityAEdit">
<el-select
:popper-append-to-body="false"
v-model="mentalityA"
placeholder="请选择"
@change="mentalityAEdit = false"
>
<el-option
v-for="item in mentalityAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，画钟正确（画出一个闭锁圆，指针位置准确），且能回忆出2-3个词
</td>
</tr>
<tr>
<td colspan="20">
1分，画钟错误（画的圆不闭锁，或指针位置不准确），或只回忆出0-1个词
</td>
</tr>
<tr>
<td colspan="20">
2分，已确诊为认知障碍，如老年痴呆-1个词
</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">攻击行为</td>
<td colspan="3" rowspan="3" @click="mentalityBEdit = false">
<div
class="item"
v-if="!mentalityBEdit"
@click="
(e) => {
e.stopPropagation();
mentalityBEdit = true;
}
"
>
{{
mentalityB === "" || mentalityB == null
? ""
: mentalityB + "分"
}}
</div>
<div class="input_con" v-if="mentalityBEdit">
<el-select
:popper-append-to-body="false"
v-model="mentalityB"
placeholder="请选择"
@change="mentalityBEdit = false"
>
<el-option
v-for="item in mentalityBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，无身体攻击行为（如打/踢/推/饺/抓/摔东西）和语言攻击行为(如骂人、语
言威胁、,尖叫)
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，每月有几次身体攻击行为，或每周有几次语言攻击行为"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，每周有几次身体攻击行为，或每日有语言攻击行为
</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">抑郁症状</td>
<td colspan="3" rowspan="3" @click="mentalityCEdit = false">
<div
class="item"
v-if="!mentalityCEdit"
@click="
(e) => {
e.stopPropagation();
mentalityCEdit = true;
}
"
>
{{
mentalityC === "" || mentalityC == null
? ""
: mentalityC + "分"
}}
</div>
<div class="input_con" v-if="mentalityCEdit">
<el-select
:popper-append-to-body="false"
v-model="mentalityC"
placeholder="请选择"
@change="mentalityCEdit = false"
>
<el-option
v-for="item in mentalityCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，无</td>
</tr>
<tr>
<td colspan="20">
{{ "1分，情绪低落、不爱说话、不爱梳洗、不爱活动" }}
</td>
</tr>
<tr>
<td colspan="20">2分，有自杀念头或自杀行为</td>
</tr>
<tr>
<td colspan="12" class="title">精神状态总分</td>
<td colspan="3" class="title">{{ mentalityD + "分" }}</td>
<td colspan="20">上述3个项目得分之和</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">精神状态分级</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ mentalityE + "级" }}
</div>
</td>
<td colspan="20">0能力完好：总分为0分</td>
</tr>
<tr>
<td colspan="20">
{{ "1轻度受损：总分为1分)" }}
</td>
</tr>
<tr>
<td colspan="20">2中度受损：总分2-3分</td>
</tr>
<tr>
<td colspan="20">3重度受损：总分4-6分</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbB2" id="tbB3">
<div class="tit2" style="margin: 20px">B.3 感知觉与沟通评估</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="4" class="title">意识水平</td>
<td
colspan="3"
rowspan="4"
@click="perceptionCommunicationAEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationAEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationAEdit = true;
}
"
>
{{
perceptionCommunicationA === "" ||
perceptionCommunicationA == null
? ""
: perceptionCommunicationA + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationAEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationA"
placeholder="请选择"
@change="perceptionCommunicationAEdit = false"
>
<el-option
v-for="item in perceptionCommunicationAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，神志清醒，对周围环境警觉</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，嗜睡，表现为睡眠状态过度延长。当呼唤或推动患者的肢体时可唤醒，并能进行正确的交谈或执行指令，停止刺激后又继续入睡"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，昏睡，一般的外界刺激不能使其觉醒，给予较强烈的刺激时可有短时的意识清醒，醒后可简短回答提问，当刺激减弱后又很快进入睡眠状态
</td>
</tr>
<tr>
<td colspan="20">
3分，昏迷，处于浅昏迷时对疼痛刺激有回避和痛苦表情：处于深昏迷时对刺激无反应《若评定为昏迷，直接评定为重度失能，可不进行以下项目的评估）
</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">
视力: 若平日带老花镜或近视镜，应在佩戴眼镜的情况下评估
</td>
<td
colspan="3"
rowspan="5"
@click="perceptionCommunicationBEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationBEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationBEdit = true;
}
"
>
{{
perceptionCommunicationB === "" ||
perceptionCommunicationB == null
? ""
: perceptionCommunicationB + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationBEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationB"
placeholder="请选择"
@change="perceptionCommunicationBEdit = false"
>
<el-option
v-for="item in perceptionCommunicationBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，能看清书报上的标准字体</td>
</tr>
<tr>
<td colspan="20">
{{ "1分，能看清楚大字体，但看不清书报上的标准字体" }}
</td>
</tr>
<tr>
<td colspan="20">
2分，视力有限，看不清报纸大标题，但能辨认物体
</td>
</tr>
<tr>
<td colspan="20">
3分，辨认物体有困难，但眼睛能跟随物体移动，只能看到光、颜色和形状
</td>
</tr>
<tr>
<td colspan="20">4分，没有视力，眼睛不能跟随物体移动</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">
听力: 若平时佩戴助听器，应在佩戴助听器的情况下评估
</td>
<td
colspan="3"
rowspan="5"
@click="perceptionCommunicationCEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationCEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationCEdit = true;
}
"
>
{{
perceptionCommunicationC === "" ||
perceptionCommunicationC == null
? ""
: perceptionCommunicationC + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationCEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationC"
placeholder="请选择"
@change="perceptionCommunicationCEdit = false"
>
<el-option
v-for="item in perceptionCommunicationCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，可正常交谈，能听到电视、电话、门铃的声音
</td>
</tr>
<tr>
<td colspan="20">
{{ "1分，在轻声说话或说话距离超过2米时听不清" }}
</td>
</tr>
<tr>
<td colspan="20">
2分，正常交流有些困难，需在安静的环静或大声说话才能听到
</td>
</tr>
<tr>
<td colspan="20">
3分，讲话者大声说话或说话很慢，才能部分听见
</td>
</tr>
<tr>
<td colspan="20">4分，完全听不见</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">
沟通交流: 包括非语言沟通
</td>
<td
colspan="3"
rowspan="4"
@click="perceptionCommunicationDEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationDEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationDEdit = true;
}
"
>
{{
perceptionCommunicationD === "" ||
perceptionCommunicationD == null
? ""
: perceptionCommunicationD + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationDEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationD"
placeholder="请选择"
@change="perceptionCommunicationDEdit = false"
>
<el-option
v-for="item in perceptionCommunicationDOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，无困难，能与他人正常沟通和交流</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，能够表达自己的需要及理解别人的话，但需要增加时间或给予帮助"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，表达需要或理解有困难，需频繁重复或简化□头表达
</td>
</tr>
<tr>
<td colspan="20">3分，不能表达需要或理解他人的话</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">
感知觉与沟通分级
</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ perceptionCommunicationE + "级" }}
</div>
</td>
<td colspan="20">
0 能力完好：意识清醒，且视力和听力评为0或1，沟通评为0
</td>
</tr>
<tr>
<td colspan="20">
1
轻度受损：意识清醒，但视力或听力中至少一项评为2，或沟通评为1
</td>
</tr>
<tr>
<td colspan="20">
2
中度受损：意识清醒，但视力或听力中至少一项评为3，或沟通评为2，或嗜睡，视力或听力评定为3及以下，沟通评定为2及以下
</td>
</tr>
<tr>
<td colspan="20">
3
重度受损：意识清醒或嗜睡，但视力或听力中至少一项评为4，或沟通评为3；或昏睡/昏迷
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbB2" id="tbB4">
<div class="tit2" style="margin: 20px">B.4 社会参与与评估</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="5" class="title">生活能力</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationAEdit = false"
>
<div
class="item"
v-if="!socialParticipationAEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationAEdit = true;
}
"
>
{{
socialParticipationA === "" ||
socialParticipationA == null
? ""
: socialParticipationA + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationAEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationA"
placeholder="请选择"
@change="socialParticipationAEdit = false"
>
<el-option
v-for="item in socialParticipationAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，除个人生活自理外（如饮食、洗漱、穿戴、二便），能料理家务（如做饭、洗衣）或当家管理事务
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，除个人生活自理外，能做家务，但欠好，家庭事务安排欠条理"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，个人生活能自理，只有在他人帮助下才能做些家务，但质量不好
</td>
</tr>
<tr>
<td colspan="20">
3分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱
</td>
</tr>
<tr>
<td colspan="20">
4分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱
</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">工作能力</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationBEdit = false"
>
<div
class="item"
v-if="!socialParticipationBEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationBEdit = true;
}
"
>
{{
socialParticipationB === "" ||
socialParticipationB == null
? ""
: socialParticipationB + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationBEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationB"
placeholder="请选择"
@change="socialParticipationBEdit = false"
>
<el-option
v-for="item in socialParticipationBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，原来熟练的脑力工作或体力技巧性工作可照常进行
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，原来熟练的脑力工作或体力技巧性工作能力有所下降"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘
</td>
</tr>
<tr>
<td colspan="20">
3分：对熟练工作只有一些片段保留，技能全部遗忘
</td>
</tr>
<tr>
<td colspan="20">4分，对以往的知识或技能全部磨灭</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">
时间/空间定向
</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationCEdit = false"
>
<div
class="item"
v-if="!socialParticipationCEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationCEdit = true;
}
"
>
{{
socialParticipationC === "" ||
socialParticipationC == null
? ""
: socialParticipationC + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationCEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationC"
placeholder="请选择"
@change="socialParticipationCEdit = false"
>
<el-option
v-for="item in socialParticipationCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分、时间观念（年、月、日、时）清楚；可单独出远门，能很快掌握新环境的方位
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，时间观念有些下降，年、月、日清楚，但有时相差几天；可单独来往于近街，知道现住地的名称和方位，但不知回家路线"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位
</td>
</tr>
<tr>
<td colspan="20">
3分，时间观念很差，年、月、日不清楚，可知上午或下午；只能在左邻右舍间串门，对现住地不知名称和方位
</td>
</tr>
<tr>
<td colspan="20">4分，无时间观念;不能单独外出</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">人物定向</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationDEdit = false"
>
<div
class="item"
v-if="!socialParticipationDEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationDEdit = true;
}
"
>
{{
socialParticipationD === "" ||
socialParticipationD == null
? ""
: socialParticipationD + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationDEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationD"
placeholder="请选择"
@change="socialParticipationDEdit = false"
>
<el-option
v-for="item in socialParticipationDOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，知道周围人们的关系，知道祖孙、叔俯、姑姨、侄子侄女等称谓的意义；可分辨陌生人的
大致年龄和身份，可用适当称呼
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，只知家中亲密近亲的关系，不会分辨陌生人的大致年龄，不能称呼陌生人"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，只能称呼家中人，或只能照样称呼，不知其关系，不辨辈分
</td>
</tr>
<tr>
<td colspan="20">
3分，只认识常同住的亲人，可称呼子女或孙子女，可辨熟人和生人
</td>
</tr>
<tr>
<td colspan="20">4分，只认识保护人，不辨熟人和生人</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">社会交往能力</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationEEdit = false"
>
<div
class="item"
v-if="!socialParticipationEEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationEEdit = true;
}
"
>
{{
socialParticipationE === "" ||
socialParticipationE == null
? ""
: socialParticipationE + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationEEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationE"
placeholder="请选择"
@change="socialParticipationEEdit = false"
>
<el-option
v-for="item in socialParticipationEOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，参与社会，在社会环境有一定的适应能力，待人接物恰当
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，能适应单纯环境，主动接触人，初见面时难让人发现智力问题，不能理解隐喻语"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，脱离社会，可被动接触，不会主动待人，谈话中很多不适词句，容易上当受骗
</td>
</tr>
<tr>
<td colspan="20">
3分，勉强可与人交往，谈吐内容不清楚，表情不恰当
</td>
</tr>
<tr>
<td colspan="20">4 分，难以与人接触</td>
</tr>
<tr>
<td colspan="12" class="title">社会参与总分</td>
<td colspan="3" class="title">
{{ socialParticipationF + "分" }}
</td>
<td colspan="20">上述5个项目得分之和</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">社会参与分级</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ socialParticipationG + "级" }}
</div>
</td>
<td colspan="20">0能力完好：总分0-2分</td>
</tr>
<tr>
<td colspan="20">1 轻度受损：总分3-7分</td>
</tr>
<tr>
<td colspan="20">2 中度受损：总分8-13分</td>
</tr>
<tr>
<td colspan="20">3 重度受损：总分14-20分</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tit1" style="margin: 10px">C:老年人能力评估报告</div>
<div class="tbB2" id="tbC">
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="7" rowspan="2" class="title">生活能力</td>
<td colspan="14">
<div>C.1.1 日常生活活动：{{ dailyBehaviorL + "级" }}</div>
</td>
<td colspan="14">
<div>C.1.2 精神状态：{{ mentalityE + "级" }}</div>
</td>
</tr>
<tr>
<td colspan="14">
<div>
C.1.3 感知觉与沟通:{{ perceptionCommunicationE + "级" }}
</div>
</td>
<td colspan="14">
<div>
C.1.4 社会参与：{{ socialParticipationG + "级" }}
</div>
</td>
</tr>
<tr>
<td colspan="7" rowspan="4" class="title">
老年人能力等级标准
</td>
<td colspan="28">
0 能力完好：
日常生活活动、精神状态、感知觉与沟通分级均为0，社会参与的分级为0或1。
</td>
</tr>
<tr>
<td colspan="28">
1 轻度失能：
日常生活活动分级为0，但精神状态、感知觉与沟通中至少一项分级为1及以上，或社会参与的分级为2；或日常生活活动分级为1，精神状态、感知觉与沟通、社会参与中至少有一项的分级为0或1。
</td>
</tr>
<tr>
<td colspan="28">
2 中度失能：
日常生活活动分级为1，但精神状态、感知觉与沟通、社会参与均为
2，或有一项为
3;或日常生活活动分级为2，且精神状态、感知觉与沟通、社会参与中有1-2项的分级为1或2。
</td>
</tr>
<tr>
<td colspan="28">
3 重度失能：
日常生活活动的分级为3;或日常生活活动、精神状态、感知觉与沟通、社会参与分级均为2；或日常生活活
动分级为2，且精神状态、感知觉与沟通、社会参与中至少有一项分级为3。
</td>
</tr>
<tr>
<td colspan="7" rowspan="4" class="title">等级变更条款</td>
<td colspan="28">
0有认知障碍/痴呆、精神疾病者，在原有能力级别上提高一个等级
</td>
</tr>
<tr>
<td colspan="28">
1近30天内发生过
2次及以上跌倒、噎食、自杀、走失者，在原有级别上提高一个等级
</td>
</tr>
<tr>
<td colspan="28">2处以昏迷状态者，直接评定为重度失能:</td>
</tr>
<tr>
<td colspan="28">
3若初步等级确定为“3重度失能”，则不考虑上述1-3中各情况对最终等级的影响，等级不再提高
</td>
</tr>
<tr>
<td colspan="7" class="title">老年人能力初步等级</td>
<td colspan="28">
<div>
{{ preliminaryLevel }}
</div>
</td>
</tr>
<tr>
<td colspan="7" class="title">老年人能力最终等级</td>
<td colspan="28" @click="finalLevelEdit = false">
<div
class="item"
v-if="!finalLevelEdit"
@click="
(e) => {
e.stopPropagation();
finalLevelEdit = true;
}
"
>
{{ finalLevel }}
</div>
<div class="input_con" v-if="finalLevelEdit">
<el-select
:popper-append-to-body="false"
v-model="finalLevel"
placeholder="请选择"
@change="finalLevelEdit = false"
>
<el-option
v-for="item in finalLevelOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="7" class="title">评估员签名</td>
<td colspan="28">
<div
class="item"
@click="assessorSignatureEdit = !assessorSignatureEdit"
>
<div v-if="!assessorSignatureEdit">
{{ assessorSignature }}
</div>
<div class="input_con" v-if="assessorSignatureEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="assessorSignature"
placeholder="请输入内容"
@change="assessorSignatureEdit = false"
@blur="assessorSignatureEdit = false"
></el-input>
</div>
</div>
</td>
<!-- <td colspan="7">
<div class="item" @click="C1_4Edit = !C1_4Edit">
<div v-if="!C1_4Edit">
{{ C1_4 }}
</div>
<div class="input_con" v-if="C1_4Edit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="C1_4"
placeholder="请输入内容"
@change="C1_4Edit = false"
@blur="C1_4Edit = false"
></el-input>
</div>
</div>
</td> -->
<!-- <td colspan="7">日期</td>
<td colspan="7">
<div class="item" @click="C1_5Edit = !C1_5Edit">
<div v-if="!C1_5Edit">
{{ C1_5 }}
</div>
<div class="input_con" v-if="C1_5Edit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="C1_5"
placeholder="请输入内容"
@change="C1_5Edit = false"
@blur="C1_5Edit = false"
></el-input>
</div>
</div>
</td> -->
</tr>
<tr>
<td colspan="7" class="title">信息提供者签名</td>
<td colspan="28">
<div
class="item"
@click="providerSignatureEdit = !providerSignatureEdit"
>
<div v-if="!providerSignatureEdit">
{{ providerSignature }}
</div>
<div class="input_con" v-if="providerSignatureEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="providerSignature"
placeholder="请输入内容"
@change="providerSignatureEdit = false"
@blur="providerSignatureEdit = false"
></el-input>
</div>
</div>
</td>
<!-- <td colspan="7">日期</td>
<td colspan="7">
<div class="item" @click="C1_7Edit = !C1_7Edit">
<div v-if="!C1_7Edit">
{{ C1_7 }}
</div>
<div class="input_con" v-if="C1_7Edit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="C1_7"
placeholder="请输入内容"
@change="C1_7Edit = false"
@blur="C1_7Edit = false"
></el-input>
</div>
</div>
</td> -->
</tr>
</table>
</div>
</div>
</div>
</div>控制编辑的基本思路就是加上一个flag xxxEdit来控制是否是编辑状态。是编辑状态就展示饿了么ui的编辑控件，不是就展示编辑控件绑定的value
2.将表格导出成word
2.1下载 html-docx-js，file-saver
npm install html-docx-js
npm install file-saver
2.2在要使用的地方引入相关插件
import htmlDocx from 'html-docx-js/dist/html-docx'
import saveAs from 'file-saver'
2.3实现导出方法
gohtml() {
const app = document.querySelector("#htmltable");
const cloneApp = app.cloneNode(true);
const canvases = app.getElementsByTagName("canvas");
const cloneCanvases = cloneApp.getElementsByTagName("canvas");
const promises = Array.from(canvases).map((ca, index) => {
return new Promise((res) => {
const url = ca.toDataURL("image/png", 1);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
res();
};
img.src = url;
// 生成img插入clone的dom的canvas之前
cloneCanvases[index].parentNode.insertBefore(
img,
cloneCanvases[index]
);
});
});
// 移除原来的canvas
const cloneCanvas = cloneApp.getElementsByTagName("canvas");
Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca));
Promise.all(promises).then(() => {
// this.convertImagesToBase64(cloneApp);
console.log(cloneApp.outerHTML);
const converted = htmlDocx.asBlob(`
<html xmlns:o=\'urn:schemas-microsoft-com:office:office\' xmlns:w=\'urn:schemas-microsoft-com:office:word\' xmlns=\'http://www.w3.org/TR/REC-html40\'><head><style>
${document.head.outerHTML}
</head>
<body>
${cloneApp.outerHTML
.replaceAll(
"<table",
`<table border-collapse="collapse" cellspacing='-1' style=" color:black;border: 1px black solid"`
)
.replaceAll("<tr", `<tr style="border: 1px black solid"`)
.replaceAll(
`colspan="24"`,
`colspan="24" style="padding-left:10px;width:416; white-space: pre-wrap;border: 1px black solid"`
)
.replaceAll(
`colspan="6"`,
`colspan="6" style="padding-left:10px;width:85.75px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="4"`,
`colspan="4" style="padding-left:10px;width:57.1px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="20"`,
`colspan="20" style="padding-left:10px;width:285.8px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="12"`,
`colspan="12" style="padding-left:10px;width:161.5px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="3"`,
`colspan="3" style="padding-left:10px;width:52.8px; display: flex;justify-content: center;align-items: center; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="7"`,
`colspan="7" style="padding-left:10px;width:100.04px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="14"`,
`colspan="14" style="padding-left:10px;width:200.08px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="28"`,
`colspan="28" style="padding-left:10px;width:400.16px; white-space: pre-wrap;border: 1px black solid;"`
)}
</body>
</html>`);
console.log(
cloneApp.outerHTML
.replaceAll(
"<table",
`<table border-collapse="collapse" cellspacing='-1' style="border: 1px black solid"`
)
.replaceAll("<tr", `<tr style="border: 1px black solid;"`)
.replaceAll(
`colspan="24"`,
`colspan="24" style="width:377; white-space: pre-wrap;border: 1px black solid"`
)
.replaceAll(
`colspan="6"`,
`colspan="6" style="width:94px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="4"`,
`colspan="4" style="width:63px; white-space: pre-wrap;border: 1px black solid;"`
)
// colspan="4"
);
saveAs(converted, `${this.formData.name}能力评估报告.docx`);
});
},这部分代码是用来控制样式的
${cloneApp.outerHTML .replaceAll( "<table", `<table border-collapse="collapse" cellspacing='-1' style=" color:black;border: 1px black solid"` ) .replaceAll("<tr", `<tr style="border: 1px black solid"`) .replaceAll( `colspan="24"`, `colspan="24" style="padding-left:10px;width:416; white-space: pre-wrap;border: 1px black solid"` ) .replaceAll( `colspan="6"`, `colspan="6" style="padding-left:10px;width:85.75px; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="4"`, `colspan="4" style="padding-left:10px;width:57.1px; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="20"`, `colspan="20" style="padding-left:10px;width:285.8px; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="12"`, `colspan="12" style="padding-left:10px;width:161.5px; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="3"`, `colspan="3" style="padding-left:10px;width:52.8px; display: flex;justify-content: center;align-items: center; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="7"`, `colspan="7" style="padding-left:10px;width:100.04px; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="14"`, `colspan="14" style="padding-left:10px;width:200.08px; white-space: pre-wrap;border: 1px black solid;"` ) .replaceAll( `colspan="28"`, `colspan="28" style="padding-left:10px;width:400.16px; white-space: pre-wrap;border: 1px black solid;"` )}
这里要说一下，html-docx-js是通过识别cloneApp.outerHTML来进行转换的。我们看一下cloneApp.outerHTML是什么
实际上就是咱们渲染的html代码，这就说明咱们实际上可以通过修改cloneApp.outerHTML来控制导出的word的一些样式。
但是要注意html-docx-js只能通过行内样式来控制word的样式
所以要用replaceAll这个方法来进行替换，写上需要定制的样式。这里我不能直接在模版代码中写行内样式，因为会影响web端的展示。
我在导出的代码中对样式定制的代码单独进行引用。如果需要修改可以看看根据自己的需求来更改。
3.源码
<template>
<div>
<el-row style="box-sizing: border-box">
<el-col :span="24" class="file_form">
<div id="htmltable" :class="[isEdit ? '' : 'disable']">
<div class="tit1" style="margin: 10px">
A：老年人能力评估基本信息表
</div>
<div class="tbA1">
<div class="tit2" style="margin: 20px">A.1 评估基本信息表</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="6" class="title">评估编号</td>
<td colspan="24">
<div
class="item"
@click="assessmentIdEdit = !assessmentIdEdit"
>
<div v-if="!assessmentIdEdit">
{{ assessmentId }}
</div>
<div class="input_con" v-if="assessmentIdEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="assessmentId"
placeholder="请输入内容"
@change="assessmentIdEdit = false"
@blur="assessmentIdEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">评估基准日期</td>
<td colspan="24">
<div v-if="formData">
{{ formData.createdOn.slice(0, 10) }}
</div>
</td>
</tr>
<tr>
<td colspan="6" rowspan="4" class="title">评估原因</td>
<td colspan="4" rowspan="4">
<div
class="item"
@click="assessmentReasonEdit = !assessmentReasonEdit"
>
<div v-if="!assessmentReasonEdit">
{{ assessmentReason }}
</div>
<div class="input_con" v-if="assessmentReasonEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="assessmentReason"
placeholder="请输入内容"
@change="assessmentReasonEdit = false"
@blur="assessmentReasonEdit = false"
></el-input>
</div>
</div>
</td>
<td colspan="20">1 接受服务前初评</td>
</tr>
<tr>
<td colspan="20">2 接受服务后的常规评估</td>
</tr>
<tr>
<td colspan="20">3 状况发生变化后的即时评估</td>
</tr>
<tr>
<td colspan="20">4 因评估结果有疑问进行的复评</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbA2">
<div class="tit2" style="margin: 20px">A.2 入住老人基本信息</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="6" class="title">姓名</td>
<td colspan="24">
<div class="item" @click="nameEdit = !nameEdit">
<div v-if="!nameEdit">
{{ name }}
</div>
<div class="input_con" v-if="nameEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="name"
placeholder="请输入内容"
@change="nameEdit = false"
@blur="nameEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">性别</td>
<td colspan="24">
<div class="item" @click="sexEdit = !sexEdit">
<div v-if="!sexEdit">
{{ sex }}
</div>
<div class="input_con" v-if="sexEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="sex"
placeholder="请输入内容"
@change="sexEdit = false"
@blur="sexEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">出生日期</td>
<td colspan="24">
<div class="item" @click="birthdayEdit = !birthdayEdit">
<div v-if="!birthdayEdit">
{{ birthday }}
</div>
<div class="input_con" v-if="birthdayEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="birthday"
placeholder="请输入内容"
@change="birthdayEdit = false"
@blur="birthdayEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">身份证号</td>
<td colspan="24">
<div class="item" @click="idCardEdit = !idCardEdit">
<div v-if="!idCardEdit">
{{ idCard }}
</div>
<div class="input_con" v-if="idCardEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="idCard"
placeholder="请输入内容"
@change="idCardEdit = false"
@blur="idCardEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">社保卡号</td>
<td colspan="24">
<div
class="item"
@click="socialSecurityEdit = !socialSecurityEdit"
>
<div v-if="!socialSecurityEdit">
{{ socialSecurity }}
</div>
<div class="input_con" v-if="socialSecurityEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="socialSecurity"
placeholder="请输入内容"
@change="socialSecurityEdit = false"
@blur="socialSecurityEdit = false"
></el-input>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">民族</td>
<td colspan="24" @click="nationEdit = false">
<div
class="item"
v-if="!nationEdit"
@click="
(e) => {
e.stopPropagation();
nationEdit = true;
}
"
>
{{ nation }}
</div>
<div class="input_con" v-if="nationEdit">
<el-select
v-model="nation"
placeholder="请选择"
@change="nationEdit = false"
>
<el-option
v-for="item in nationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">文化程度</td>
<td colspan="24" @click="educationLevelEdit = false">
<div
class="item"
v-if="!educationLevelEdit"
@click="
(e) => {
e.stopPropagation();
educationLevelEdit = true;
}
"
>
{{ educationLevel }}
</div>
<div class="input_con" v-if="educationLevelEdit">
<el-select
v-model="educationLevel"
placeholder="请选择"
@change="educationLevelEdit = false"
>
<el-option
v-for="item in educationLevelOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">宗教信仰</td>
<td colspan="24" @click="religiousBeliefEdit = false">
<div
class="item"
v-if="!religiousBeliefEdit"
@click="
(e) => {
e.stopPropagation();
religiousBeliefEdit = true;
}
"
>
{{ religiousBelief }}
</div>
<div class="input_con" v-if="religiousBeliefEdit">
<el-select
v-model="religiousBelief"
placeholder="请选择"
@change="religiousBeliefEdit = false"
>
<el-option
v-for="item in religiousBeliefOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">婚姻状况</td>
<td colspan="24" @click="maritalStatusEdit = false">
<div
class="item"
v-if="!maritalStatusEdit"
@click="
(e) => {
e.stopPropagation();
maritalStatusEdit = true;
}
"
>
{{ maritalStatus }}
</div>
<div class="input_con" v-if="maritalStatusEdit">
<el-select
v-model="maritalStatus"
placeholder="请选择"
@change="maritalStatusEdit = false"
>
<el-option
v-for="item in maritalStatusOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">居住情况</td>
<td colspan="24" @click="residentialSituationEdit = false">
<div
class="item"
v-if="!residentialSituationEdit"
@click="
(e) => {
e.stopPropagation();
residentialSituationEdit = true;
}
"
>
{{ residentialSituation }}
</div>
<div class="input_con" v-if="residentialSituationEdit">
<el-select
:popper-append-to-body="false"
v-model="residentialSituation"
placeholder="请选择"
@change="residentialSituationEdit = false"
>
<el-option
v-for="item in residentialSituationOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">医疗费用支付方式</td>
<td colspan="24" @click="medicalPaymentMethodEdit = false">
<div
class="item"
v-if="!medicalPaymentMethodEdit"
@click="
(e) => {
e.stopPropagation();
medicalPaymentMethodEdit = true;
}
"
>
{{ medicalPaymentMethod }}
</div>
<div class="input_con" v-if="medicalPaymentMethodEdit">
<el-select
:popper-append-to-body="false"
v-model="medicalPaymentMethod"
placeholder="请选择"
@change="medicalPaymentMethodEdit = false"
>
<el-option
v-for="item in medicalPaymentMethodOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">经济来源</td>
<td colspan="24" @click="financialEdit = false">
<div
class="item"
v-if="!financialEdit"
@click="
(e) => {
e.stopPropagation();
financialEdit = true;
}
"
>
{{ financial }}
</div>
<div class="input_con" v-if="financialEdit">
<el-select
:popper-append-to-body="false"
v-model="financial"
placeholder="请选择"
@change="financialEdit = false"
>
<el-option
v-for="item in financialOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">疾病诊断</td>
<td colspan="24" @click="diseaseDiagnosisEdit = false">
<div
class="item"
v-if="!diseaseDiagnosisEdit"
@click="
(e) => {
e.stopPropagation();
diseaseDiagnosisEdit = true;
}
"
>
{{ diseaseDiagnosis.join(",") }}
</div>
<div class="input_con" v-if="diseaseDiagnosisEdit">
<el-select
class="cascader"
multiple
:popper-append-to-body="false"
v-model="diseaseDiagnosis"
placeholder="请选择"
@change="diseaseDiagnosisEdit = false"
>
<el-option
v-for="item in diseaseDiagnosisOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="title">近30天内意外事件</td>
<td colspan="24" @click="accidentEdit = false">
<div
class="item"
v-if="!accidentEdit"
@click="
(e) => {
e.stopPropagation();
accidentEdit = true;
}
"
>
{{ accident.join(",") }}
</div>
<div class="input_con" v-if="accidentEdit">
<el-select
class="cascader"
multiple
:popper-append-to-body="false"
v-model="accident"
placeholder="请选择"
@change="accidentEdit = false"
>
<el-option
v-for="item in accidentOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tit1" style="margin: 10px">B:老年人能力评估</div>
<div class="tbB1" id="tbB1">
<div class="tit2" style="margin: 20px; margin-bottom: 10px">
B.1 日常生活活动
</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="3" class="title">
进食：指用餐具将食物由容器送到口中、咀嚼、吞咽等过程
</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorAEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorAEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorAEdit = true;
}
"
>
{{
dailyBehaviorA === "" || dailyBehaviorA == null
? ""
: dailyBehaviorA + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorAEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorA"
placeholder="请选择"
@change="dailyBehaviorAEdit = false"
>
<el-option
v-for="item in dailyBehaviorAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
10分，可独立进食(在合理的时间内独立进食准备好的食物)
</td>
</tr>
<tr>
<td colspan="20">
5分，需部分帮助(进食过程中需要一定帮助，如协助把持餐具)
</td>
</tr>
<tr>
<td colspan="20">
0分，需极大帮助或完全依赖他人,或有留置胃管
</td>
</tr>
<tr>
<td colspan="12" rowspan="2" class="title">洗澡</td>
<td
colspan="3"
rowspan="2"
@click="dailyBehaviorBEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorBEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorBEdit = true;
}
"
>
{{
dailyBehaviorB === "" || dailyBehaviorB == null
? ""
: dailyBehaviorB + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorBEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorB"
placeholder="请选择"
@change="dailyBehaviorBEdit = false"
>
<el-option
v-for="item in dailyBehaviorBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
5分，准备好洗澡水后，可自己独立完成洗澡过程
</td>
</tr>
<tr>
<td colspan="20">0分， 在洗澡过程中需他人帮助</td>
</tr>
<tr>
<td colspan="12" rowspan="2" class="title">
修饰：指洗脸、刷牙、梳头等
</td>
<td
colspan="3"
rowspan="2"
@click="dailyBehaviorCEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorCEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorCEdit = true;
}
"
>
{{
dailyBehaviorC === "" || dailyBehaviorC == null
? ""
: dailyBehaviorC + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorCEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorC"
placeholder="请选择"
@change="dailyBehaviorCEdit = false"
>
<el-option
v-for="item in dailyBehaviorCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">5分， 可自己独立完成</td>
</tr>
<tr>
<td colspan="20">0分，需他人帮助</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">
穿衣：指穿脱衣服、系扣、拉拉 链、穿脱鞋袜系鞋带
</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorDEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorDEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorDEdit = true;
}
"
>
{{
dailyBehaviorD === "" || dailyBehaviorD == null
? ""
: dailyBehaviorD + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorDEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorD"
placeholder="请选择"
@change="dailyBehaviorDEdit = false"
>
<el-option
v-for="item in dailyBehaviorDOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可独立完成</td>
</tr>
<tr>
<td colspan="20">
5分，需部分帮助(能自己穿脱，但需他人帮助整理衣物、系扣/鞋带、拉拉链)
</td>
</tr>
<tr>
<td colspan="20">0分，需极大帮助或完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">大便控制</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorEEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorEEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorEEdit = true;
}
"
>
{{
dailyBehaviorE === "" || dailyBehaviorE == null
? ""
: dailyBehaviorE + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorEEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorE"
placeholder="请选择"
@change="dailyBehaviorEEdit = false"
>
<el-option
v-for="item in dailyBehaviorEOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可控制大便</td>
</tr>
<tr>
<td colspan="20">
{{ "5分，偶尔失控（每周 < 1次），或需要他人提示" }}
</td>
</tr>
<tr>
<td colspan="20">0分，完全失控</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">小便控制</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorFEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorFEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorFEdit = true;
}
"
>
{{
dailyBehaviorF === "" || dailyBehaviorF == null
? ""
: dailyBehaviorF + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorFEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorF"
placeholder="请选择"
@change="dailyBehaviorFEdit = false"
>
<el-option
v-for="item in dailyBehaviorFOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可控制小便</td>
</tr>
<tr>
<td colspan="20">
{{
"5分，偶尔失控（每天<1次，但每周>1次），或需要他人提示"
}}
</td>
</tr>
<tr>
<td colspan="20">0分，完全失控，或留置导尿管</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">
包括去厕所、解开衣裤、擦净、 整理衣裤、冲水
</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorGEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorGEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorGEdit = true;
}
"
>
{{
dailyBehaviorG === "" || dailyBehaviorG == null
? ""
: dailyBehaviorG + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorGEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorG"
placeholder="请选择"
@change="dailyBehaviorGEdit = false"
>
<el-option
v-for="item in dailyBehaviorGOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">10分，可独立完成</td>
</tr>
<tr>
<td colspan="20">
{{
"5分，需部分帮助（需他人搀扶去厕所、需他人帮忙冲水或整理衣裤等)"
}}
</td>
</tr>
<tr>
<td colspan="20">0分， 需极大帮助或完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">床椅转移</td>
<td
colspan="3"
rowspan="4"
@click="dailyBehaviorHEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorHEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorHEdit = true;
}
"
>
{{
dailyBehaviorH === "" || dailyBehaviorH == null
? ""
: dailyBehaviorH + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorHEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorH"
placeholder="请选择"
@change="dailyBehaviorHEdit = false"
>
<el-option
v-for="item in dailyBehaviorHOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">15分，可独立完成</td>
</tr>
<tr>
<td colspan="20">
{{ "10分，需部分帮助（需他人搀扶或使用拐杖))" }}
</td>
</tr>
<tr>
<td colspan="20">
5分，需极大帮助（较大程度上依赖他人搀扶和帮助）
</td>
</tr>
<tr>
<td colspan="20">0分，完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">平地行走</td>
<td
colspan="3"
rowspan="4"
@click="dailyBehaviorIEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorIEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorIEdit = true;
}
"
>
{{
dailyBehaviorI === "" || dailyBehaviorI == null
? ""
: dailyBehaviorI + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorIEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorI"
placeholder="请选择"
@change="dailyBehaviorIEdit = false"
>
<el-option
v-for="item in dailyBehaviorIOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">15分，可独立在平地上行走45m</td>
</tr>
<tr>
<td colspan="20">
{{
"10分，需部分帮助（因肢体残疾、平衡能力差、过度虚弱、视力等问题， 在一定度上需他人地搀扶或使用拐杖、助行器等辅助用具）"
}}
</td>
</tr>
<tr>
<td colspan="20">
5分，需极大帮助（因肢体残疾、平衡能力差、过度虚弱、视力等问题，
在较大程度上依赖他人搀扶，或坐在轮椅上自行移动）
</td>
</tr>
<tr>
<td colspan="20">0分，完全依赖他人</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">上下楼梯</td>
<td
colspan="3"
rowspan="3"
@click="dailyBehaviorJEdit = false"
>
<div
class="item"
v-if="!dailyBehaviorJEdit"
@click="
(e) => {
e.stopPropagation();
dailyBehaviorJEdit = true;
}
"
>
{{
dailyBehaviorJ === "" || dailyBehaviorJ == null
? ""
: dailyBehaviorJ + "分"
}}
</div>
<div class="input_con" v-if="dailyBehaviorJEdit">
<el-select
:popper-append-to-body="false"
v-model="dailyBehaviorJ"
placeholder="请选择"
@change="dailyBehaviorJEdit = false"
>
<el-option
v-for="item in dailyBehaviorJOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
10分，可独立上下楼梯（连续上下10-15个台阶）
</td>
</tr>
<tr>
<td colspan="20">
{{
"5分，需部分帮助（需扶着楼梯、他人搀扶，或使用拐杖等)"
}}
</td>
</tr>
<tr>
<td colspan="20">0分，需极大帮助或完全依赖他人</td>
</tr>
<tr>
<td colspan="12" class="title">日常生活活动总分</td>
<td colspan="3" class="title">
{{ dailyBehaviorK + "分" }}
</td>
<td colspan="20">上述10个项目得分之和</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">
日常生活活动分级
</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ dailyBehaviorL + "级" }}
</div>
</td>
<td colspan="20">0能力完好：总分100分</td>
</tr>
<tr>
<td colspan="20">
{{ "1轻度受损：总分65-95分)" }}
</td>
</tr>
<tr>
<td colspan="20">2中度受损：总分45-60分</td>
</tr>
<tr>
<td colspan="20">3重度受损：总分≤40分</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbB2" id="tbB2">
<div class="tit2" style="margin: 20px">B.2精神状态评估</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="6" class="title">
B.2. 1 认知功能
</td>
<td colspan="3" rowspan="3">
<div class="item">测验</div>
</td>
<td colspan="20">
“我说三样东西，请重复一遍，并记住，一会儿会问您”：苹果、手表、国旗
</td>
</tr>
<tr>
<td colspan="20">
{{
"（1）画钟测验：“请在这儿画一个圆形时钟，在时钟上标出10点45分”"
}}
</td>
</tr>
<tr>
<td colspan="20">
（2）回忆词语：“现在请您告诉我，刚才我要您记住的三样东西是什么？”
</td>
</tr>
<tr>
<td colspan="3" rowspan="3" @click="mentalityAEdit = false">
<div
class="item"
v-if="!mentalityAEdit"
@click="
(e) => {
e.stopPropagation();
mentalityAEdit = true;
}
"
>
{{
mentalityA === "" || mentalityA == null
? ""
: mentalityA + "分"
}}
</div>
<div class="input_con" v-if="mentalityAEdit">
<el-select
:popper-append-to-body="false"
v-model="mentalityA"
placeholder="请选择"
@change="mentalityAEdit = false"
>
<el-option
v-for="item in mentalityAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，画钟正确（画出一个闭锁圆，指针位置准确），且能回忆出2-3个词
</td>
</tr>
<tr>
<td colspan="20">
1分，画钟错误（画的圆不闭锁，或指针位置不准确），或只回忆出0-1个词
</td>
</tr>
<tr>
<td colspan="20">
2分，已确诊为认知障碍，如老年痴呆-1个词
</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">攻击行为</td>
<td colspan="3" rowspan="3" @click="mentalityBEdit = false">
<div
class="item"
v-if="!mentalityBEdit"
@click="
(e) => {
e.stopPropagation();
mentalityBEdit = true;
}
"
>
{{
mentalityB === "" || mentalityB == null
? ""
: mentalityB + "分"
}}
</div>
<div class="input_con" v-if="mentalityBEdit">
<el-select
:popper-append-to-body="false"
v-model="mentalityB"
placeholder="请选择"
@change="mentalityBEdit = false"
>
<el-option
v-for="item in mentalityBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，无身体攻击行为（如打/踢/推/饺/抓/摔东西）和语言攻击行为(如骂人、语
言威胁、,尖叫)
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，每月有几次身体攻击行为，或每周有几次语言攻击行为"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，每周有几次身体攻击行为，或每日有语言攻击行为
</td>
</tr>
<tr>
<td colspan="12" rowspan="3" class="title">抑郁症状</td>
<td colspan="3" rowspan="3" @click="mentalityCEdit = false">
<div
class="item"
v-if="!mentalityCEdit"
@click="
(e) => {
e.stopPropagation();
mentalityCEdit = true;
}
"
>
{{
mentalityC === "" || mentalityC == null
? ""
: mentalityC + "分"
}}
</div>
<div class="input_con" v-if="mentalityCEdit">
<el-select
:popper-append-to-body="false"
v-model="mentalityC"
placeholder="请选择"
@change="mentalityCEdit = false"
>
<el-option
v-for="item in mentalityCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，无</td>
</tr>
<tr>
<td colspan="20">
{{ "1分，情绪低落、不爱说话、不爱梳洗、不爱活动" }}
</td>
</tr>
<tr>
<td colspan="20">2分，有自杀念头或自杀行为</td>
</tr>
<tr>
<td colspan="12" class="title">精神状态总分</td>
<td colspan="3" class="title">{{ mentalityD + "分" }}</td>
<td colspan="20">上述3个项目得分之和</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">精神状态分级</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ mentalityE + "级" }}
</div>
</td>
<td colspan="20">0能力完好：总分为0分</td>
</tr>
<tr>
<td colspan="20">
{{ "1轻度受损：总分为1分)" }}
</td>
</tr>
<tr>
<td colspan="20">2中度受损：总分2-3分</td>
</tr>
<tr>
<td colspan="20">3重度受损：总分4-6分</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbB2" id="tbB3">
<div class="tit2" style="margin: 20px">B.3 感知觉与沟通评估</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="4" class="title">意识水平</td>
<td
colspan="3"
rowspan="4"
@click="perceptionCommunicationAEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationAEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationAEdit = true;
}
"
>
{{
perceptionCommunicationA === "" ||
perceptionCommunicationA == null
? ""
: perceptionCommunicationA + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationAEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationA"
placeholder="请选择"
@change="perceptionCommunicationAEdit = false"
>
<el-option
v-for="item in perceptionCommunicationAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，神志清醒，对周围环境警觉</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，嗜睡，表现为睡眠状态过度延长。当呼唤或推动患者的肢体时可唤醒，并能进行正确的交谈或执行指令，停止刺激后又继续入睡"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，昏睡，一般的外界刺激不能使其觉醒，给予较强烈的刺激时可有短时的意识清醒，醒后可简短回答提问，当刺激减弱后又很快进入睡眠状态
</td>
</tr>
<tr>
<td colspan="20">
3分，昏迷，处于浅昏迷时对疼痛刺激有回避和痛苦表情：处于深昏迷时对刺激无反应《若评定为昏迷，直接评定为重度失能，可不进行以下项目的评估）
</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">
视力: 若平日带老花镜或近视镜，应在佩戴眼镜的情况下评估
</td>
<td
colspan="3"
rowspan="5"
@click="perceptionCommunicationBEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationBEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationBEdit = true;
}
"
>
{{
perceptionCommunicationB === "" ||
perceptionCommunicationB == null
? ""
: perceptionCommunicationB + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationBEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationB"
placeholder="请选择"
@change="perceptionCommunicationBEdit = false"
>
<el-option
v-for="item in perceptionCommunicationBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，能看清书报上的标准字体</td>
</tr>
<tr>
<td colspan="20">
{{ "1分，能看清楚大字体，但看不清书报上的标准字体" }}
</td>
</tr>
<tr>
<td colspan="20">
2分，视力有限，看不清报纸大标题，但能辨认物体
</td>
</tr>
<tr>
<td colspan="20">
3分，辨认物体有困难，但眼睛能跟随物体移动，只能看到光、颜色和形状
</td>
</tr>
<tr>
<td colspan="20">4分，没有视力，眼睛不能跟随物体移动</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">
听力: 若平时佩戴助听器，应在佩戴助听器的情况下评估
</td>
<td
colspan="3"
rowspan="5"
@click="perceptionCommunicationCEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationCEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationCEdit = true;
}
"
>
{{
perceptionCommunicationC === "" ||
perceptionCommunicationC == null
? ""
: perceptionCommunicationC + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationCEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationC"
placeholder="请选择"
@change="perceptionCommunicationCEdit = false"
>
<el-option
v-for="item in perceptionCommunicationCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，可正常交谈，能听到电视、电话、门铃的声音
</td>
</tr>
<tr>
<td colspan="20">
{{ "1分，在轻声说话或说话距离超过2米时听不清" }}
</td>
</tr>
<tr>
<td colspan="20">
2分，正常交流有些困难，需在安静的环静或大声说话才能听到
</td>
</tr>
<tr>
<td colspan="20">
3分，讲话者大声说话或说话很慢，才能部分听见
</td>
</tr>
<tr>
<td colspan="20">4分，完全听不见</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">
沟通交流: 包括非语言沟通
</td>
<td
colspan="3"
rowspan="4"
@click="perceptionCommunicationDEdit = false"
>
<div
class="item"
v-if="!perceptionCommunicationDEdit"
@click="
(e) => {
e.stopPropagation();
perceptionCommunicationDEdit = true;
}
"
>
{{
perceptionCommunicationD === "" ||
perceptionCommunicationD == null
? ""
: perceptionCommunicationD + "分"
}}
</div>
<div
class="input_con"
v-if="perceptionCommunicationDEdit"
>
<el-select
:popper-append-to-body="false"
v-model="perceptionCommunicationD"
placeholder="请选择"
@change="perceptionCommunicationDEdit = false"
>
<el-option
v-for="item in perceptionCommunicationDOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">0分，无困难，能与他人正常沟通和交流</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，能够表达自己的需要及理解别人的话，但需要增加时间或给予帮助"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，表达需要或理解有困难，需频繁重复或简化□头表达
</td>
</tr>
<tr>
<td colspan="20">3分，不能表达需要或理解他人的话</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">
感知觉与沟通分级
</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ perceptionCommunicationE + "级" }}
</div>
</td>
<td colspan="20">
0 能力完好：意识清醒，且视力和听力评为0或1，沟通评为0
</td>
</tr>
<tr>
<td colspan="20">
1
轻度受损：意识清醒，但视力或听力中至少一项评为2，或沟通评为1
</td>
</tr>
<tr>
<td colspan="20">
2
中度受损：意识清醒，但视力或听力中至少一项评为3，或沟通评为2，或嗜睡，视力或听力评定为3及以下，沟通评定为2及以下
</td>
</tr>
<tr>
<td colspan="20">
3
重度受损：意识清醒或嗜睡，但视力或听力中至少一项评为4，或沟通评为3；或昏睡/昏迷
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tbB2" id="tbB4">
<div class="tit2" style="margin: 20px">B.4 社会参与与评估</div>
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="12" rowspan="5" class="title">生活能力</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationAEdit = false"
>
<div
class="item"
v-if="!socialParticipationAEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationAEdit = true;
}
"
>
{{
socialParticipationA === "" ||
socialParticipationA == null
? ""
: socialParticipationA + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationAEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationA"
placeholder="请选择"
@change="socialParticipationAEdit = false"
>
<el-option
v-for="item in socialParticipationAOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，除个人生活自理外（如饮食、洗漱、穿戴、二便），能料理家务（如做饭、洗衣）或当家管理事务
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，除个人生活自理外，能做家务，但欠好，家庭事务安排欠条理"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，个人生活能自理，只有在他人帮助下才能做些家务，但质量不好
</td>
</tr>
<tr>
<td colspan="20">
3分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱
</td>
</tr>
<tr>
<td colspan="20">
4分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱
</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">工作能力</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationBEdit = false"
>
<div
class="item"
v-if="!socialParticipationBEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationBEdit = true;
}
"
>
{{
socialParticipationB === "" ||
socialParticipationB == null
? ""
: socialParticipationB + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationBEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationB"
placeholder="请选择"
@change="socialParticipationBEdit = false"
>
<el-option
v-for="item in socialParticipationBOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，原来熟练的脑力工作或体力技巧性工作可照常进行
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，原来熟练的脑力工作或体力技巧性工作能力有所下降"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘
</td>
</tr>
<tr>
<td colspan="20">
3分：对熟练工作只有一些片段保留，技能全部遗忘
</td>
</tr>
<tr>
<td colspan="20">4分，对以往的知识或技能全部磨灭</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">
时间/空间定向
</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationCEdit = false"
>
<div
class="item"
v-if="!socialParticipationCEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationCEdit = true;
}
"
>
{{
socialParticipationC === "" ||
socialParticipationC == null
? ""
: socialParticipationC + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationCEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationC"
placeholder="请选择"
@change="socialParticipationCEdit = false"
>
<el-option
v-for="item in socialParticipationCOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分、时间观念（年、月、日、时）清楚；可单独出远门，能很快掌握新环境的方位
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，时间观念有些下降，年、月、日清楚，但有时相差几天；可单独来往于近街，知道现住地的名称和方位，但不知回家路线"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位
</td>
</tr>
<tr>
<td colspan="20">
3分，时间观念很差，年、月、日不清楚，可知上午或下午；只能在左邻右舍间串门，对现住地不知名称和方位
</td>
</tr>
<tr>
<td colspan="20">4分，无时间观念;不能单独外出</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">人物定向</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationDEdit = false"
>
<div
class="item"
v-if="!socialParticipationDEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationDEdit = true;
}
"
>
{{
socialParticipationD === "" ||
socialParticipationD == null
? ""
: socialParticipationD + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationDEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationD"
placeholder="请选择"
@change="socialParticipationDEdit = false"
>
<el-option
v-for="item in socialParticipationDOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，知道周围人们的关系，知道祖孙、叔俯、姑姨、侄子侄女等称谓的意义；可分辨陌生人的
大致年龄和身份，可用适当称呼
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，只知家中亲密近亲的关系，不会分辨陌生人的大致年龄，不能称呼陌生人"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，只能称呼家中人，或只能照样称呼，不知其关系，不辨辈分
</td>
</tr>
<tr>
<td colspan="20">
3分，只认识常同住的亲人，可称呼子女或孙子女，可辨熟人和生人
</td>
</tr>
<tr>
<td colspan="20">4分，只认识保护人，不辨熟人和生人</td>
</tr>
<tr>
<td colspan="12" rowspan="5" class="title">社会交往能力</td>
<td
colspan="3"
rowspan="5"
@click="socialParticipationEEdit = false"
>
<div
class="item"
v-if="!socialParticipationEEdit"
@click="
(e) => {
e.stopPropagation();
socialParticipationEEdit = true;
}
"
>
{{
socialParticipationE === "" ||
socialParticipationE == null
? ""
: socialParticipationE + "分"
}}
</div>
<div class="input_con" v-if="socialParticipationEEdit">
<el-select
:popper-append-to-body="false"
v-model="socialParticipationE"
placeholder="请选择"
@change="socialParticipationEEdit = false"
>
<el-option
v-for="item in socialParticipationEOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
<td colspan="20">
0分，参与社会，在社会环境有一定的适应能力，待人接物恰当
</td>
</tr>
<tr>
<td colspan="20">
{{
"1分，能适应单纯环境，主动接触人，初见面时难让人发现智力问题，不能理解隐喻语"
}}
</td>
</tr>
<tr>
<td colspan="20">
2分，脱离社会，可被动接触，不会主动待人，谈话中很多不适词句，容易上当受骗
</td>
</tr>
<tr>
<td colspan="20">
3分，勉强可与人交往，谈吐内容不清楚，表情不恰当
</td>
</tr>
<tr>
<td colspan="20">4 分，难以与人接触</td>
</tr>
<tr>
<td colspan="12" class="title">社会参与总分</td>
<td colspan="3" class="title">
{{ socialParticipationF + "分" }}
</td>
<td colspan="20">上述5个项目得分之和</td>
</tr>
<tr>
<td colspan="12" rowspan="4" class="title">社会参与分级</td>
<td colspan="3" rowspan="4" class="title">
<div class="item">
{{ socialParticipationG + "级" }}
</div>
</td>
<td colspan="20">0能力完好：总分0-2分</td>
</tr>
<tr>
<td colspan="20">1 轻度受损：总分3-7分</td>
</tr>
<tr>
<td colspan="20">2 中度受损：总分8-13分</td>
</tr>
<tr>
<td colspan="20">3 重度受损：总分14-20分</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tit1" style="margin: 10px">C:老年人能力评估报告</div>
<div class="tbB2" id="tbC">
<div class="tablecon">
<!-- <button @click="GenerateImg">导出</button> -->
<div style="margin: 0 auto">
<table>
<tr>
<td colspan="7" rowspan="2" class="title">生活能力</td>
<td colspan="14">
<div>C.1.1 日常生活活动：{{ dailyBehaviorL + "级" }}</div>
</td>
<td colspan="14">
<div>C.1.2 精神状态：{{ mentalityE + "级" }}</div>
</td>
</tr>
<tr>
<td colspan="14">
<div>
C.1.3 感知觉与沟通:{{ perceptionCommunicationE + "级" }}
</div>
</td>
<td colspan="14">
<div>
C.1.4 社会参与：{{ socialParticipationG + "级" }}
</div>
</td>
</tr>
<tr>
<td colspan="7" rowspan="4" class="title">
老年人能力等级标准
</td>
<td colspan="28">
0 能力完好：
日常生活活动、精神状态、感知觉与沟通分级均为0，社会参与的分级为0或1。
</td>
</tr>
<tr>
<td colspan="28">
1 轻度失能：
日常生活活动分级为0，但精神状态、感知觉与沟通中至少一项分级为1及以上，或社会参与的分级为2；或日常生活活动分级为1，精神状态、感知觉与沟通、社会参与中至少有一项的分级为0或1。
</td>
</tr>
<tr>
<td colspan="28">
2 中度失能：
日常生活活动分级为1，但精神状态、感知觉与沟通、社会参与均为
2，或有一项为
3;或日常生活活动分级为2，且精神状态、感知觉与沟通、社会参与中有1-2项的分级为1或2。
</td>
</tr>
<tr>
<td colspan="28">
3 重度失能：
日常生活活动的分级为3;或日常生活活动、精神状态、感知觉与沟通、社会参与分级均为2；或日常生活活
动分级为2，且精神状态、感知觉与沟通、社会参与中至少有一项分级为3。
</td>
</tr>
<tr>
<td colspan="7" rowspan="4" class="title">等级变更条款</td>
<td colspan="28">
0有认知障碍/痴呆、精神疾病者，在原有能力级别上提高一个等级
</td>
</tr>
<tr>
<td colspan="28">
1近30天内发生过
2次及以上跌倒、噎食、自杀、走失者，在原有级别上提高一个等级
</td>
</tr>
<tr>
<td colspan="28">2处以昏迷状态者，直接评定为重度失能:</td>
</tr>
<tr>
<td colspan="28">
3若初步等级确定为“3重度失能”，则不考虑上述1-3中各情况对最终等级的影响，等级不再提高
</td>
</tr>
<tr>
<td colspan="7" class="title">老年人能力初步等级</td>
<td colspan="28">
<div>
{{ preliminaryLevel }}
</div>
</td>
</tr>
<tr>
<td colspan="7" class="title">老年人能力最终等级</td>
<td colspan="28" @click="finalLevelEdit = false">
<div
class="item"
v-if="!finalLevelEdit"
@click="
(e) => {
e.stopPropagation();
finalLevelEdit = true;
}
"
>
{{ finalLevel }}
</div>
<div class="input_con" v-if="finalLevelEdit">
<el-select
:popper-append-to-body="false"
v-model="finalLevel"
placeholder="请选择"
@change="finalLevelEdit = false"
>
<el-option
v-for="item in finalLevelOptions"
:key="item.id"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</td>
</tr>
<tr>
<td colspan="7" class="title">评估员签名</td>
<td colspan="28">
<div
class="item"
@click="assessorSignatureEdit = !assessorSignatureEdit"
>
<div v-if="!assessorSignatureEdit">
{{ assessorSignature }}
</div>
<div class="input_con" v-if="assessorSignatureEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="assessorSignature"
placeholder="请输入内容"
@change="assessorSignatureEdit = false"
@blur="assessorSignatureEdit = false"
></el-input>
</div>
</div>
</td>
<!-- <td colspan="7">
<div class="item" @click="C1_4Edit = !C1_4Edit">
<div v-if="!C1_4Edit">
{{ C1_4 }}
</div>
<div class="input_con" v-if="C1_4Edit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="C1_4"
placeholder="请输入内容"
@change="C1_4Edit = false"
@blur="C1_4Edit = false"
></el-input>
</div>
</div>
</td> -->
<!-- <td colspan="7">日期</td>
<td colspan="7">
<div class="item" @click="C1_5Edit = !C1_5Edit">
<div v-if="!C1_5Edit">
{{ C1_5 }}
</div>
<div class="input_con" v-if="C1_5Edit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="C1_5"
placeholder="请输入内容"
@change="C1_5Edit = false"
@blur="C1_5Edit = false"
></el-input>
</div>
</div>
</td> -->
</tr>
<tr>
<td colspan="7" class="title">信息提供者签名</td>
<td colspan="28">
<div
class="item"
@click="providerSignatureEdit = !providerSignatureEdit"
>
<div v-if="!providerSignatureEdit">
{{ providerSignature }}
</div>
<div class="input_con" v-if="providerSignatureEdit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="providerSignature"
placeholder="请输入内容"
@change="providerSignatureEdit = false"
@blur="providerSignatureEdit = false"
></el-input>
</div>
</div>
</td>
<!-- <td colspan="7">日期</td>
<td colspan="7">
<div class="item" @click="C1_7Edit = !C1_7Edit">
<div v-if="!C1_7Edit">
{{ C1_7 }}
</div>
<div class="input_con" v-if="C1_7Edit">
<el-input
@click.native="
(e) => {
e.stopPropagation();
}
"
v-model="C1_7"
placeholder="请输入内容"
@change="C1_7Edit = false"
@blur="C1_7Edit = false"
></el-input>
</div>
</div>
</td> -->
</tr>
</table>
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="24" class="btn_con">
<el-button v-if="!isEdit" @click="gohtml" type="primary"
>导出<i class="el-icon-share el-icon--right"></i
></el-button>
<el-button
v-show="isEdit && title == '添加'"
@click="add"
type="primary"
>上传<i class="el-icon-upload2 el-icon--right"></i
></el-button>
<el-button
@click="edit"
v-show="isEdit && title == '编辑'"
type="primary"
>完成<i class="el-icon-upload2 el-icon--right"></i
></el-button>
</el-col>
</el-row>
</div>
</template>
<script>
import htmlDocx from "html-docx-js/dist/html-docx";
import saveAs from "file-saver";
import {
addCapabilityAssessment,
updateCapabilityAssessment,
} from "@/api/ability/index";
import html2canvas from "html2canvas";
export default {
name: "abilitytable",
components: {},
props: {
formData: {
type: Object,
default: () => {
return null;
},
},
//是否可编辑
isEdit: {
type: Boolean,
default: true,
},
title: {
type: String,
default: "添加",
},
},
data() {
return {
assessmentId: "", //评估编号
assessmentIdEdit: false,
assessmentReason: "", //评估原因
assessmentReasonEdit: false,
name: "", //姓名
nameEdit: false,
sex: "", //性别
sexEdit: false,
birthday: "", //出生日期
birthdayEdit: false,
idCard: "", //身份证号
idCardEdit: false,
socialSecurity: "", //社保卡号
socialSecurityEdit: false,
nation: "", //民族
nationEdit: false,
nationOptions: [
{
value: "汉族",
label: "汉族",
},
{
value: "少数民族",
label: "少数民族",
},
],
educationLevel: "", //文化程度
educationLevelEdit: false,
educationLevelOptions: [
{
id: 1,
value: "文盲",
label: "文盲",
},
{
id: 2,
value: "小学",
label: "小学",
},
{
id: 3,
value: "初中",
label: "初中",
},
{
id: 4,
value: "初中",
label: "初中",
},
{
id: 5,
value: "高中/技校/中专",
label: "高中/技校/中专",
},
{
id: 6,
value: "大学专科及以上",
label: "大学专科及以上",
},
{
id: 7,
value: "不详",
label: "不详",
},
],
religiousBelief: "", //宗教信仰
religiousBeliefEdit: false,
religiousBeliefOptions: [
{
value: "有",
label: "有",
},
{
value: "无",
label: "无",
},
],
maritalStatus: "", //婚姻状况
maritalStatusEdit: false,
maritalStatusOptions: [
{
value: "未婚",
label: "未婚",
},
{
value: "已婚",
label: "已婚",
},
{
value: "丧偶",
label: "丧偶",
},
{
value: "离婚",
label: "离婚",
},
{
value: "未说明的婚姻状况",
label: "未说明的婚姻状况",
},
],
residentialSituation: "", //居住情况
residentialSituationEdit: false,
residentialSituationOptions: [
{
value: "独居",
label: "独居",
},
{
value: "与配偶/伴侣居住",
label: "与配偶/伴侣居住",
},
{
value: "与子女居中",
label: "与子女居中",
},
{
value: "与父母居住",
label: "与父母居住",
},
{
value: "与兄弟姐妹居住",
label: "与兄弟姐妹居住",
},
{
value: "与其他亲属居住",
label: "与其他亲属居住",
},
{
value: "与非亲属关系的人居住",
label: "与非亲属关系的人居住",
},
{
value: "养老机构",
label: "养老机构",
},
],
medicalPaymentMethod: "", //医疗费用支付方式
medicalPaymentMethodEdit: false,
medicalPaymentMethodOptions: [
{
value: "城镇职工基本医疗保险",
label: "城镇职工基本医疗保险",
},
{
value: "城镇居民基本医疗保险",
label: "城镇居民基本医疗保险",
},
{
value: "新型农村合作医疗",
label: "新型农村合作医疗",
},
{
value: "贫困救助",
label: "贫困救助",
},
{
value: "商业医疗保险",
label: "商业医疗保险",
},
{
value: "全公费",
label: "全公费",
},
{
value: "全自费",
label: "全自费",
},
{
value: "其他",
label: "其他",
},
],
financial: "", //经济来源
financialEdit: false,
financialOptions: [
{
value: "退休金/养老金",
label: "退休金/养老金",
},
{
value: "子女补贴",
label: "子女补贴",
},
{
value: "亲友资助",
label: "亲友资助",
},
{
value: "贫困救助",
label: "贫困救助",
},
{
value: "其他补贴",
label: "其他补贴",
},
],
diseaseDiagnosis: [], //疾病诊断
diseaseDiagnosisEdit: false,
diseaseDiagnosisOptions: [
{
value: "轻度痴呆",
label: "轻度痴呆",
},
{
value: "中度痴呆",
label: "中度痴呆",
},
{
value: "重度痴呆",
label: "重度痴呆",
},
{
value: "精神分裂症",
label: "精神分裂症",
},
{
value: "双相情感障碍",
label: "双相情感障碍",
},
{
value: "偏执性精神障碍",
label: "偏执性精神障碍",
},
{
value: "分裂情感性障碍",
label: "分裂情感性障碍",
},
{
value: "癫病所致精神障碍",
label: "癫病所致精神障碍",
},
{
value: "精神发育迟滞伴发精神障碍",
label: "精神发育迟滞伴发精神障碍",
},
{
value: "高血压",
label: "高血压",
},
{
value: "冠心病",
label: "冠心病",
},
{
value: "心绞痛",
label: "心绞痛",
},
{
value: "肺心病",
label: "肺心病",
},
{
value: "心力衰竭",
label: "心力衰竭",
},
{
value: "心律失常",
label: "心律失常",
},
{
value: "脑梗塞",
label: "脑梗塞",
},
{
value: "脑出血",
label: "脑出血",
},
{
value: "脑梗塞后遗症",
label: "脑梗塞后遗症",
},
{
value: "脑出血后遗症",
label: "脑出血后遗症",
},
{
value: "慢性支气管炎",
label: "慢性支气管炎",
},
{
value: "慢性阻塞性肺病",
label: "慢性阻塞性肺病",
},
{
value: "老年性肺炎",
label: "老年性肺炎",
},
{
value: "支气管哮喘",
label: "支气管哮喘",
},
{
value: "呼吸衰竭",
label: "呼吸衰竭",
},
{
value: "胸腔积液",
label: "胸腔积液",
},
{
value: "其他",
label: "其他",
},
{
value: "慢性胃炎",
label: "慢性胃炎",
},
{
value: "消化性溃疡",
label: "消化性溃疡",
},
{
value: "反流性食管炎",
label: "反流性食管炎",
},
{
value: "胆囊炎",
label: "胆囊炎",
},
{
value: "脂肪肝",
label: "脂肪肝",
},
{
value: "肝硬化",
label: "肝硬化",
},
{
value: "老年性便秘",
label: "老年性便秘",
},
{
value: "肠道感染",
label: "肠道感染",
},
{
value: "其他",
label: "其他",
},
{
value: "糖尿病",
label: "糖尿病",
},
{
value: "泌尿系感染",
label: "泌尿系感染",
},
{
value: "前列腺增生",
label: "前列腺增生",
},
{
value: "颈椎病",
label: "颈椎病",
},
{
value: "骨质增生",
label: "骨质增生",
},
{
value: "风湿性关节炎",
label: "风湿性关节炎",
},
{
value: "小儿麻痹症",
label: "小儿麻痹症",
},
{
value: "阿尔茨海默症",
label: "阿尔茨海默症",
},
{
value: "帕金森氏症",
label: "帕金森氏症",
},
{
value: "神经官能症",
label: "神经官能症",
},
{
value: "抑郁症",
label: "抑郁症",
},
{
value: "焦虑症",
label: "焦虑症",
},
{
value: "弱智",
label: "弱智",
},
],
accident: [], //意外事件
accidentEdit: false,
accidentOptions: [
{
value: "跌倒1次",
label: "跌倒1次",
},
{
value: "跌倒2次",
label: "跌倒2次",
},
{
value: "跌倒3次及以上",
label: "跌倒3次及以上",
},
{
value: "走失1次",
label: "走失1次",
},
{
value: "走失2次",
label: "走失2次",
},
{
value: "走失3次及以上",
label: "走失3次及以上",
},
{
value: "喧食1次",
label: "喧食1次",
},
{
value: "喧食2次",
label: "喧食2次",
},
{
value: "喧食3次及以上",
label: "喧食3次及以上",
},
{
value: "自杀1次",
label: "自杀1次",
},
{
value: "自杀2次",
label: "自杀2次",
},
{
value: "自杀3次及以上",
label: "自杀3次及以上",
},
{
value: "其他",
label: "其他",
},
],
dailyBehaviorA: "", //进食
dailyBehaviorAEdit: false,
dailyBehaviorAOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
],
dailyBehaviorB: "", //洗澡
dailyBehaviorBEdit: false,
dailyBehaviorBOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
],
dailyBehaviorC: "", //修饰
dailyBehaviorCEdit: false,
dailyBehaviorCOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
],
dailyBehaviorD: "", //穿衣
dailyBehaviorDEdit: false,
dailyBehaviorDOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
],
dailyBehaviorE: "", //大便控制
dailyBehaviorEEdit: false,
dailyBehaviorEOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
],
dailyBehaviorF: "", //小便控制
dailyBehaviorFEdit: false,
dailyBehaviorFOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
],
dailyBehaviorG: "", //包括去厕所、解开衣裤、擦净、 整理衣裤、冲水
dailyBehaviorGEdit: false,
dailyBehaviorGOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
],
dailyBehaviorH: "", //床椅转移
dailyBehaviorHEdit: false,
dailyBehaviorHOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
{
value: 15,
label: "15分",
},
],
dailyBehaviorI: "", //平地行走
dailyBehaviorIEdit: false,
dailyBehaviorIOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
{
value: 15,
label: "15分",
},
],
dailyBehaviorJ: "", //上下楼梯
dailyBehaviorJEdit: false,
dailyBehaviorJOptions: [
{
value: 0,
label: "0分",
},
{
value: 5,
label: "5分",
},
{
value: 10,
label: "10分",
},
],
mentalityA: "", //认知功能
mentalityAEdit: false,
mentalityAOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
],
mentalityB: "", //攻击行为
mentalityBEdit: false,
mentalityBOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
],
mentalityC: "", //抑郁症状
mentalityCEdit: false,
mentalityCOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
],
perceptionCommunicationA: "", //意识水平
perceptionCommunicationAEdit: false,
perceptionCommunicationAOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
],
perceptionCommunicationB: "", //视力:
perceptionCommunicationBEdit: false,
perceptionCommunicationBOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
perceptionCommunicationC: "", //听力:
perceptionCommunicationCEdit: false,
perceptionCommunicationCOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
perceptionCommunicationD: "", //沟通交流:
perceptionCommunicationDEdit: false,
perceptionCommunicationDOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
],
socialParticipationA: "", //生活能力:
socialParticipationAEdit: false,
socialParticipationAOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
socialParticipationB: "", //工作能力:
socialParticipationBEdit: false,
socialParticipationBOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
socialParticipationC: "", //时间/空间定向:
socialParticipationCEdit: false,
socialParticipationCOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
socialParticipationD: "", //人物定向:
socialParticipationDEdit: false,
socialParticipationDOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
socialParticipationE: "", //社会交往能力:
socialParticipationEEdit: false,
socialParticipationEOptions: [
{
value: 0,
label: "0分",
},
{
value: 1,
label: "1分",
},
{
value: 2,
label: "2分",
},
{
value: 3,
label: "3分",
},
{
value: 4,
label: "4分",
},
],
// preliminaryLevel: "", //老年人能力初步等级
preliminaryLevelEdit: false,
preliminaryLevelOptions: [
{
value: "能力完好",
label: "能力完好",
},
{
value: "轻度失能",
label: "轻度失能",
},
{
value: "中度失能",
label: "中度失能",
},
{
value: "重度失能",
label: "重度失能",
},
],
finalLevel: "", //老年人能力最终等级
finalLevelEdit: false,
finalLevelOptions: [
{
value: "自理",
label: "自理",
},
{
value: "半自理",
label: "半自理",
},
{
value: "完全不能自理",
label: "完全不能自理",
},
],
assessorSignature: "", //评估员签字1
assessorSignatureEdit: false,
// C1_4: "", //评估员签字12
// C1_4Edit: false,
// C1_5: "", //日期
// C1_5Edit: false,
providerSignature: "", //信息提供者签名
providerSignatureEdit: false,
// C1_7: "", //信息提供者签名 (日期)
// C1_7Edit: false,
};
},
created() {},
beforeMount() {
// console.log(this.isEdit, this.formData.diseaseDiagnosis);
if (this.formData) {
//如果有formData就是编辑状态，将数据复制到data中
this.formData.diseaseDiagnosis = this.formData.diseaseDiagnosis
? this.formData.diseaseDiagnosis.split(",")
: [];
this.formData.accident = this.formData.accident
? this.formData.accident.split(",")
: [];
Object.assign(this.$data, this.formData);
console.log(this.$data);
}
},
methods: {
gohtml() {
const app = document.querySelector("#htmltable");
const cloneApp = app.cloneNode(true);
const canvases = app.getElementsByTagName("canvas");
const cloneCanvases = cloneApp.getElementsByTagName("canvas");
const promises = Array.from(canvases).map((ca, index) => {
return new Promise((res) => {
const url = ca.toDataURL("image/png", 1);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
res();
};
img.src = url;
// 生成img插入clone的dom的canvas之前
cloneCanvases[index].parentNode.insertBefore(
img,
cloneCanvases[index]
);
});
});
// 移除原来的canvas
const cloneCanvas = cloneApp.getElementsByTagName("canvas");
Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca));
Promise.all(promises).then(() => {
// this.convertImagesToBase64(cloneApp);
console.log(cloneApp.outerHTML);
const converted = htmlDocx.asBlob(`
<html xmlns:o=\'urn:schemas-microsoft-com:office:office\' xmlns:w=\'urn:schemas-microsoft-com:office:word\' xmlns=\'http://www.w3.org/TR/REC-html40\'><head><style>
${document.head.outerHTML}
</head>
<body>
${cloneApp.outerHTML
.replaceAll(
"<table",
`<table border-collapse="collapse" cellspacing='-1' style=" color:black;border: 1px black solid"`
)
.replaceAll("<tr", `<tr style="border: 1px black solid"`)
.replaceAll(
`colspan="24"`,
`colspan="24" style="padding-left:10px;width:416; white-space: pre-wrap;border: 1px black solid"`
)
.replaceAll(
`colspan="6"`,
`colspan="6" style="padding-left:10px;width:85.75px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="4"`,
`colspan="4" style="padding-left:10px;width:57.1px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="20"`,
`colspan="20" style="padding-left:10px;width:285.8px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="12"`,
`colspan="12" style="padding-left:10px;width:161.5px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="3"`,
`colspan="3" style="padding-left:10px;width:52.8px; display: flex;justify-content: center;align-items: center; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="7"`,
`colspan="7" style="padding-left:10px;width:100.04px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="14"`,
`colspan="14" style="padding-left:10px;width:200.08px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="28"`,
`colspan="28" style="padding-left:10px;width:400.16px; white-space: pre-wrap;border: 1px black solid;"`
)}
</body>
</html>`);
console.log(
cloneApp.outerHTML
.replaceAll(
"<table",
`<table border-collapse="collapse" cellspacing='-1' style="border: 1px black solid"`
)
.replaceAll("<tr", `<tr style="border: 1px black solid;"`)
.replaceAll(
`colspan="24"`,
`colspan="24" style="width:377; white-space: pre-wrap;border: 1px black solid"`
)
.replaceAll(
`colspan="6"`,
`colspan="6" style="width:94px; white-space: pre-wrap;border: 1px black solid;"`
)
.replaceAll(
`colspan="4"`,
`colspan="4" style="width:63px; white-space: pre-wrap;border: 1px black solid;"`
)
// colspan="4"
);
saveAs(converted, `${this.formData.name}能力评估报告.docx`);
});
},
edit() {
console.log(
this,
this.capabilityAssessmentId,
this.$data,
this.$data === this._data
);
updateCapabilityAssessment({
assessmentId: this.assessmentId,
assessmentReason: this.assessmentReason,
name: this.name,
sex: this.sex,
nation: this.nation,
birthday: this.birthday,
idCard: this.idCard,
socialSecurity: this.socialSecurity,
educationLevel: this.educationLevel,
religiousBelief: this.religiousBelief,
maritalStatus: this.maritalStatus,
residentialSituation: this.residentialSituation,
medicalPaymentMethod: this.medicalPaymentMethod,
financial: this.financial,
diseaseDiagnosis: this.diseaseDiagnosis.join(","),
accident: this.accident.join(","),
dailyBehaviorA: this.dailyBehaviorA,
dailyBehaviorB: this.dailyBehaviorB,
dailyBehaviorC: this.dailyBehaviorC,
dailyBehaviorD: this.dailyBehaviorD,
dailyBehaviorE: this.dailyBehaviorE,
dailyBehaviorF: this.dailyBehaviorF,
dailyBehaviorG: this.dailyBehaviorG,
dailyBehaviorH: this.dailyBehaviorH,
dailyBehaviorI: this.dailyBehaviorI,
dailyBehaviorJ: this.dailyBehaviorJ,
dailyBehaviorK: this.dailyBehaviorK,
dailyBehaviorL: this.dailyBehaviorL,
mentalityA: this.mentalityA,
mentalityB: this.mentalityB,
mentalityC: this.mentalityC,
mentalityD: this.mentalityD,
mentalityE: this.mentalityE,
perceptionCommunicationA: this.perceptionCommunicationA,
perceptionCommunicationB: this.perceptionCommunicationB,
perceptionCommunicationC: this.perceptionCommunicationC,
perceptionCommunicationD: this.perceptionCommunicationD,
perceptionCommunicationE: this.perceptionCommunicationE,
socialParticipationA: this.socialParticipationA,
socialParticipationB: this.socialParticipationB,
socialParticipationC: this.socialParticipationC,
socialParticipationD: this.socialParticipationD,
socialParticipationE: this.socialParticipationE,
socialParticipationF: this.socialParticipationF,
socialParticipationG: this.socialParticipationG,
socialParticipationH: this.socialParticipationH,
preliminaryLevel: this.preliminaryLevel,
finalLevel: this.finalLevel,
assessorSignature: this.assessorSignature,
providerSignature: this.providerSignature,
capabilityAssessmentId: this.formData.capabilityAssessmentId,
})
.then((res) => {
console.log(res, "编辑成功");
this.$message({
message: "编辑成功",
type: "success",
});
this.$emit("editsuccess");
})
.catch((err) => {
console.log(err, "编辑失败");
});
},
add() {
addCapabilityAssessment({
assessmentId: this.assessmentId,
assessmentReason: this.assessmentReason,
name: this.name,
sex: this.sex,
nation: this.nation,
birthday: this.birthday,
idCard: this.idCard,
socialSecurity: this.socialSecurity,
educationLevel: this.educationLevel,
religiousBelief: this.religiousBelief,
maritalStatus: this.maritalStatus,
residentialSituation: this.residentialSituation,
medicalPaymentMethod: this.medicalPaymentMethod,
financial: this.financial,
diseaseDiagnosis: this.diseaseDiagnosis.join(","),
accident: this.accident.join(","),
dailyBehaviorA: this.dailyBehaviorA,
dailyBehaviorB: this.dailyBehaviorB,
dailyBehaviorC: this.dailyBehaviorC,
dailyBehaviorD: this.dailyBehaviorD,
dailyBehaviorE: this.dailyBehaviorE,
dailyBehaviorF: this.dailyBehaviorF,
dailyBehaviorG: this.dailyBehaviorG,
dailyBehaviorH: this.dailyBehaviorH,
dailyBehaviorI: this.dailyBehaviorI,
dailyBehaviorJ: this.dailyBehaviorJ,
dailyBehaviorK: this.dailyBehaviorK,
dailyBehaviorL: this.dailyBehaviorL,
mentalityA: this.mentalityA,
mentalityB: this.mentalityB,
mentalityC: this.mentalityC,
mentalityD: this.mentalityD,
mentalityE: this.mentalityE,
perceptionCommunicationA: this.perceptionCommunicationA,
perceptionCommunicationB: this.perceptionCommunicationB,
perceptionCommunicationC: this.perceptionCommunicationC,
perceptionCommunicationD: this.perceptionCommunicationD,
perceptionCommunicationE: this.perceptionCommunicationE,
socialParticipationA: this.socialParticipationA,
socialParticipationB: this.socialParticipationB,
socialParticipationC: this.socialParticipationC,
socialParticipationD: this.socialParticipationD,
socialParticipationE: this.socialParticipationE,
socialParticipationF: this.socialParticipationF,
socialParticipationG: this.socialParticipationG,
socialParticipationH: this.socialParticipationH,
preliminaryLevel: this.preliminaryLevel,
finalLevel: this.finalLevel,
assessorSignature: this.assessorSignature,
providerSignature: this.providerSignature,
})
.then((res) => {
console.log("添加成功", res);
if (res.code == 200) {
this.$message({
message: "添加成功",
type: "success",
});
Object.assign(this.$data, this.$options.data());
this.$emit("addsuccess", false);
}
})
.catch((err) => {
console.log(err, "添加失败");
});
},
GenerateImg() {
let canvas = document.querySelector("#htmltable"); //先获取要截取页面的DOM
let that = this;
html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
function (canvas) {
let type = "png";
let imgData = canvas.toDataURL(type);
// 照片格式处理
let _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, "jpeg");
let r = type.match(/png|jpeg|bmp|gif/)[0];
return "image/" + r;
};
imgData = imgData.replace(_fixType(type), "image/octet-stream");
let filename = "登记表" + "." + type;
that.saveFile(imgData, filename);
},
(err) => {
console.log(err);
}
);
},
saveFile(data, filename) {
let save_link = document.createElementNS(
"http://www.w3.org/1999/xhtml",
"a"
);
save_link.href = data;
save_link.download = filename;
let event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
save_link.dispatchEvent(event);
},
},
computed: {
preliminaryLevel() {
if (
this.dailyBehaviorL == 3 ||
(this.mentalityE == 2 &&
this.dailyBehaviorL == 2 &&
this.perceptionCommunicationE == 2 &&
this.socialParticipationG == 2) ||
(this.dailyBehaviorL == 2 &&
(this.mentalityE == 3 ||
this.perceptionCommunicationE == 3 ||
this.socialParticipationG == 3))
) {
return "重度失能";
} else if (
(this.dailyBehaviorL == 1 &&
this.mentalityE > 2 &&
this.socialParticipationG == 2 &&
this.perceptionCommunicationE == 2) ||
(this.dailyBehaviorL == 1 &&
(this.mentalityE == 3 ||
this.socialParticipationG == 3 ||
this.perceptionCommunicationE == 3)) ||
(this.dailyBehaviorL == 2 &&
(this.mentalityE == 1 ||
this.mentalityE == 2 ||
this.socialParticipationG == 1 ||
this.socialParticipationG == 2 ||
this.perceptionCommunicationE == 1 ||
this.perceptionCommunicationE == 2))
) {
return "中度失能";
} else if (
(this.dailyBehaviorL == 0 &&
(this.mentalityE == 1 || this.perceptionCommunicationE == 1)) ||
(this.dailyBehaviorL == 0 && this.socialParticipationG == 2) ||
(this.dailyBehaviorL == 1 &&
(this.mentalityE <= 1 ||
this.perceptionCommunicationE <= 1 ||
this.socialParticipationG <= 1))
) {
return "轻度失能";
}
if (
(this.mentalityE == 0 &&
this.dailyBehaviorL == 0 &&
this.perceptionCommunicationE == 0) ||
this.socialParticipationG == 0 ||
this.socialParticipationG == 1
) {
return "能力完好";
}
},
socialParticipationG() {
if (this.socialParticipationF <= 2) {
return 0;
}
if (this.socialParticipationF >= 3 && this.socialParticipationF <= 7) {
return 1;
}
if (this.socialParticipationF >= 8 && this.socialParticipationF <= 13) {
return 2;
}
if (this.socialParticipationF >= 14 && this.socialParticipationF <= 20) {
return 3;
}
},
socialParticipationF() {
return (
this.socialParticipationA * 1 +
this.socialParticipationB * 1 +
this.socialParticipationC * 1 +
this.socialParticipationD * 1 +
this.socialParticipationE * 1
);
},
perceptionCommunicationE() {
//沟通
if (
this.perceptionCommunicationA * 1 == 0 &&
(this.perceptionCommunicationB * 1 == 0 ||
this.perceptionCommunicationB * 1 == 1) &&
(this.perceptionCommunicationC * 1 == 0 ||
this.perceptionCommunicationC * 1 == 1) &&
this.perceptionCommunicationD * 1 == 0
) {
return 0;
} else if (
this.perceptionCommunicationA * 1 == 0 &&
(this.perceptionCommunicationB * 1 == 2 ||
this.perceptionCommunicationC * 1 == 2 ||
this.perceptionCommunicationD * 1 == 1)
) {
return 1;
} else if (
((this.perceptionCommunicationA * 1 == 0 ||
this.perceptionCommunicationD * 1 == 1) &&
(this.perceptionCommunicationB * 1 == 4 ||
this.perceptionCommunicationC * 1 == 4)) ||
this.perceptionCommunicationA > 1 ||
this.perceptionCommunicationD * 1 == 3
) {
return 3;
} else if (
(this.perceptionCommunicationA * 1 == 0 &&
(this.perceptionCommunicationB * 1 == 3 ||
this.perceptionCommunicationC * 1 == 3 ||
this.perceptionCommunicationD * 1 == 2)) ||
(this.perceptionCommunicationA * 1 == 1 &&
this.perceptionCommunicationB * 1 >= 3 &&
this.perceptionCommunicationD >= 2) ||
(this.perceptionCommunicationC * 1 >= 3 &&
this.perceptionCommunicationD >= 2)
) {
return 2;
} else {
return 0;
}
},
dailyBehaviorK() {
if (
this.dailyBehaviorA * 1 == 0 &&
this.dailyBehaviorB * 1 == 0 &&
this.dailyBehaviorC * 1 == 0 &&
this.dailyBehaviorD * 1 == 0 &&
this.dailyBehaviorE * 1 == 0 &&
this.dailyBehaviorF * 1 == 0 &&
this.dailyBehaviorG * 1 == 0 &&
this.dailyBehaviorH * 1 == 0 &&
this.dailyBehaviorI * 1 == 0 &&
this.dailyBehaviorJ * 1 == 0
) {
return 100;
} else {
return (
this.dailyBehaviorA * 1 +
this.dailyBehaviorB * 1 +
this.dailyBehaviorC * 1 +
this.dailyBehaviorD * 1 +
this.dailyBehaviorE * 1 +
this.dailyBehaviorF * 1 +
this.dailyBehaviorG * 1 +
this.dailyBehaviorH * 1 +
this.dailyBehaviorI * 1 +
this.dailyBehaviorJ * 1
);
}
},
dailyBehaviorL() {
if (this.dailyBehaviorK == 100) {
return 0;
}
if (this.dailyBehaviorK >= 65 && this.dailyBehaviorK <= 95) {
return 1;
}
if (this.dailyBehaviorK >= 45 && this.dailyBehaviorK <= 60) {
return 2;
}
if (this.dailyBehaviorK <= 40 && this.dailyBehaviorK >= 0) {
return 3;
}
},
mentalityD() {
return this.mentalityA * 1 + this.mentalityB * 1 + this.mentalityC * 1;
},
mentalityE() {
//精神状态
if (this.mentalityD == 0) {
return 0;
}
if (this.mentalityD >= 2 && this.mentalityD <= 3) {
return 2;
}
if (this.mentalityD >= 4 && this.mentalityD <= 6) {
return 3;
}
if (this.mentalityD == 1) {
return 1;
}
},
},
beforeDestroy() {
//销毁前初始化数据
Object.assign(this.$data, this.$options.data());
},
};
</script>
<style scoped lang='scss'>
.disable {
pointer-events: none;
}
.file_form {
box-sizing: border-box;
}
.btn_con {
padding: 20px 10px;
box-sizing: border-box;
}
.tbB2 {
padding-top: 20px;
}
.cascader {
width: 90%;
}
#htmltable {
padding-bottom: 20px;
}
.tbA2 {
margin-top: 20px;
}
.tit1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
width: 100%;
text-align: center;
margin-top: 20px;
}
.tit2 {
font-size: 24px;
font-weight: bold;
width: 98%;
margin: 0 auto;
margin-bottom: 20px;
}
.tablecon {
display: flex;
justify-content: center;
// align-items: center;
box-sizing: border-box;
}
table {
font-family: 宋体, "serif";
border-collapse: collapse;
border-spacing: 0;
width: 98%;
table-layout: fixed;
margin: 0 auto;
}
.input_con {
padding: 0px 10px;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 100%;
box-sizing: border-box;
height: 100%;
text-align: center;
/* line-height: 60px; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* overflow: scroll; */
}
table th,
table td {
border: 1px solid #999999;
text-align: center;
height: 1px;
}
table tr {
height: 54px;
}
table .title {
font-weight: bold;
}
</style>
感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。
新人作者，欢迎关注和收藏👏🏻👏🏻
觉得作者写的不错或者心情愉悦的老板也可以投币打赏，感谢观看，希望能给大家带来帮助
1475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
