纯前端导出word手写复杂表格,并还原成word。百分百还原表格。一文搞定前端表格导出为word

  感谢大家的点赞和转发,欢迎大家关注本人的博客。试用期指导,项目开发,简历优化,毕业设计/论文,欢迎添加本人微信。

 新人作者,欢迎关注和收藏👏🏻👏🏻

本次的需求是手写一个养老院老人生活能力评定表,并且要能够录入信息,最终导出

表格因为有七页所以代码很多,可以不用看表格模板的详细代码。

先贴上最终效果图

实现了样式的百分百还原导出

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="a***identEdit = false">
                      <div
                        class="item"
                        v-if="!a***identEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            a***identEdit = true;
                          }
                        "
                      >
                        {{ a***ident.join(",") }}
                      </div>
                      <div class="input_con" v-if="a***identEdit">
                        <el-select
                          class="cascader"
                          multiple
                          :popper-append-to-body="false"
                          v-model="a***ident"
                          placeholder="请选择"
                          @change="a***identEdit = false"
                        >
                          <el-option
                            v-for="item in a***identOptions"
                            :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="perception***municationAEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationAEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationAEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationA === "" ||
                          perception***municationA == null
                            ? ""
                            : perception***municationA + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationAEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationA"
                          placeholder="请选择"
                          @change="perception***municationAEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationAOptions"
                            :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="perception***municationBEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationBEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationBEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationB === "" ||
                          perception***municationB == null
                            ? ""
                            : perception***municationB + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationBEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationB"
                          placeholder="请选择"
                          @change="perception***municationBEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationBOptions"
                            :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="perception***municationCEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationCEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationCEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationC === "" ||
                          perception***municationC == null
                            ? ""
                            : perception***municationC + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationCEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationC"
                          placeholder="请选择"
                          @change="perception***municationCEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationCOptions"
                            :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="perception***municationDEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationDEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationDEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationD === "" ||
                          perception***municationD == null
                            ? ""
                            : perception***municationD + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationDEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationD"
                          placeholder="请选择"
                          @change="perception***municationDEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationDOptions"
                            :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">
                        {{ perception***municationE + "级" }}
                      </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 感知觉与沟通:{{ perception***municationE + "级" }}
                      </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-***:office:office\' xmlns:w=\'urn:schemas-microsoft-***: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="a***identEdit = false">
                      <div
                        class="item"
                        v-if="!a***identEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            a***identEdit = true;
                          }
                        "
                      >
                        {{ a***ident.join(",") }}
                      </div>
                      <div class="input_con" v-if="a***identEdit">
                        <el-select
                          class="cascader"
                          multiple
                          :popper-append-to-body="false"
                          v-model="a***ident"
                          placeholder="请选择"
                          @change="a***identEdit = false"
                        >
                          <el-option
                            v-for="item in a***identOptions"
                            :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="perception***municationAEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationAEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationAEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationA === "" ||
                          perception***municationA == null
                            ? ""
                            : perception***municationA + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationAEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationA"
                          placeholder="请选择"
                          @change="perception***municationAEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationAOptions"
                            :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="perception***municationBEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationBEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationBEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationB === "" ||
                          perception***municationB == null
                            ? ""
                            : perception***municationB + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationBEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationB"
                          placeholder="请选择"
                          @change="perception***municationBEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationBOptions"
                            :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="perception***municationCEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationCEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationCEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationC === "" ||
                          perception***municationC == null
                            ? ""
                            : perception***municationC + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationCEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationC"
                          placeholder="请选择"
                          @change="perception***municationCEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationCOptions"
                            :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="perception***municationDEdit = false"
                    >
                      <div
                        class="item"
                        v-if="!perception***municationDEdit"
                        @click="
                          (e) => {
                            e.stopPropagation();
                            perception***municationDEdit = true;
                          }
                        "
                      >
                        {{
                          perception***municationD === "" ||
                          perception***municationD == null
                            ? ""
                            : perception***municationD + "分"
                        }}
                      </div>
                      <div
                        class="input_con"
                        v-if="perception***municationDEdit"
                      >
                        <el-select
                          :popper-append-to-body="false"
                          v-model="perception***municationD"
                          placeholder="请选择"
                          @change="perception***municationDEdit = false"
                        >
                          <el-option
                            v-for="item in perception***municationDOptions"
                            :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">
                        {{ perception***municationE + "级" }}
                      </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 感知觉与沟通:{{ perception***municationE + "级" }}
                      </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",
  ***ponents: {},
  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: "弱智",
        },
      ],
      a***ident: [], //意外事件
      a***identEdit: false,

      a***identOptions: [
        {
          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分",
        },
      ],
      perception***municationA: "", //意识水平
      perception***municationAEdit: false,
      perception***municationAOptions: [
        {
          value: 0,
          label: "0分",
        },
        {
          value: 1,
          label: "1分",
        },
        {
          value: 2,
          label: "2分",
        },
        {
          value: 3,
          label: "3分",
        },
      ],
      perception***municationB: "", //视力:
      perception***municationBEdit: false,
      perception***municationBOptions: [
        {
          value: 0,
          label: "0分",
        },
        {
          value: 1,
          label: "1分",
        },
        {
          value: 2,
          label: "2分",
        },
        {
          value: 3,
          label: "3分",
        },
        {
          value: 4,
          label: "4分",
        },
      ],
      perception***municationC: "", //听力:
      perception***municationCEdit: false,
      perception***municationCOptions: [
        {
          value: 0,
          label: "0分",
        },
        {
          value: 1,
          label: "1分",
        },
        {
          value: 2,
          label: "2分",
        },
        {
          value: 3,
          label: "3分",
        },
        {
          value: 4,
          label: "4分",
        },
      ],
      perception***municationD: "", //沟通交流:
      perception***municationDEdit: false,
      perception***municationDOptions: [
        {
          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.a***ident = this.formData.a***ident
        ? this.formData.a***ident.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-***:office:office\' xmlns:w=\'urn:schemas-microsoft-***: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(","),
        a***ident: this.a***ident.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,
        perception***municationA: this.perception***municationA,
        perception***municationB: this.perception***municationB,
        perception***municationC: this.perception***municationC,
        perception***municationD: this.perception***municationD,
        perception***municationE: this.perception***municationE,
        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: "su***ess",
          });
          this.$emit("editsu***ess");
        })
        .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(","),
        a***ident: this.a***ident.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,
        perception***municationA: this.perception***municationA,
        perception***municationB: this.perception***municationB,
        perception***municationC: this.perception***municationC,
        perception***municationD: this.perception***municationD,
        perception***municationE: this.perception***municationE,
        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: "su***ess",
            });
            Object.assign(this.$data, this.$options.data());
            this.$emit("addsu***ess", 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);
    },
  },
  ***puted: {
    preliminaryLevel() {
      if (
        this.dailyBehaviorL == 3 ||
        (this.mentalityE == 2 &&
          this.dailyBehaviorL == 2 &&
          this.perception***municationE == 2 &&
          this.socialParticipationG == 2) ||
        (this.dailyBehaviorL == 2 &&
          (this.mentalityE == 3 ||
            this.perception***municationE == 3 ||
            this.socialParticipationG == 3))
      ) {
        return "重度失能";
      } else if (
        (this.dailyBehaviorL == 1 &&
          this.mentalityE > 2 &&
          this.socialParticipationG == 2 &&
          this.perception***municationE == 2) ||
        (this.dailyBehaviorL == 1 &&
          (this.mentalityE == 3 ||
            this.socialParticipationG == 3 ||
            this.perception***municationE == 3)) ||
        (this.dailyBehaviorL == 2 &&
          (this.mentalityE == 1 ||
            this.mentalityE == 2 ||
            this.socialParticipationG == 1 ||
            this.socialParticipationG == 2 ||
            this.perception***municationE == 1 ||
            this.perception***municationE == 2))
      ) {
        return "中度失能";
      } else if (
        (this.dailyBehaviorL == 0 &&
          (this.mentalityE == 1 || this.perception***municationE == 1)) ||
        (this.dailyBehaviorL == 0 && this.socialParticipationG == 2) ||
        (this.dailyBehaviorL == 1 &&
          (this.mentalityE <= 1 ||
            this.perception***municationE <= 1 ||
            this.socialParticipationG <= 1))
      ) {
        return "轻度失能";
      }
      if (
        (this.mentalityE == 0 &&
          this.dailyBehaviorL == 0 &&
          this.perception***municationE == 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
      );
    },
    perception***municationE() {
      //沟通
      if (
        this.perception***municationA * 1 == 0 &&
        (this.perception***municationB * 1 == 0 ||
          this.perception***municationB * 1 == 1) &&
        (this.perception***municationC * 1 == 0 ||
          this.perception***municationC * 1 == 1) &&
        this.perception***municationD * 1 == 0
      ) {
        return 0;
      } else if (
        this.perception***municationA * 1 == 0 &&
        (this.perception***municationB * 1 == 2 ||
          this.perception***municationC * 1 == 2 ||
          this.perception***municationD * 1 == 1)
      ) {
        return 1;
      } else if (
        ((this.perception***municationA * 1 == 0 ||
          this.perception***municationD * 1 == 1) &&
          (this.perception***municationB * 1 == 4 ||
            this.perception***municationC * 1 == 4)) ||
        this.perception***municationA > 1 ||
        this.perception***municationD * 1 == 3
      ) {
        return 3;
      } else if (
        (this.perception***municationA * 1 == 0 &&
          (this.perception***municationB * 1 == 3 ||
            this.perception***municationC * 1 == 3 ||
            this.perception***municationD * 1 == 2)) ||
        (this.perception***municationA * 1 == 1 &&
          this.perception***municationB * 1 >= 3 &&
          this.perception***municationD >= 2) ||
        (this.perception***municationC * 1 >= 3 &&
          this.perception***municationD >= 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>

感谢大家的点赞和转发,欢迎大家关注本人的博客。试用期指导,项目开发,简历优化,毕业设计/论文,欢迎添加本人微信。

 新人作者,欢迎关注和收藏👏🏻👏🏻

 觉得作者写的不错或者心情愉悦的老板也可以投币打赏,感谢观看,希望能给大家带来帮助 

 

转载请说明出处内容投诉
CSS教程_站长资源网 » 纯前端导出word手写复杂表格,并还原成word。百分百还原表格。一文搞定前端表格导出为word

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买