PC-application/component/statistics/CopdServiceRecord/index.html

<div class="copd-service-record-box">
  <div class="service-base-info">
    <div class="base-title ki-title ta-title">
      基本信息
    </div>
    <div class="base-content">
      <div class="base-info-item">
        姓名：{{detailInfo.name}}
      </div>
      <div class="base-info-item">
        性别：{{detailInfo.sexName}}
      </div>
      <div class="base-info-item">
        证件号码：{{detailInfo.idcard}}
      </div>
      <div class="base-info-item">
        联系电话：{{detailInfo.mobile}}
      </div>
      <div class="base-info-item">
        下转状态：{{detailInfo.turnDownStatus==1?'已下转':'未下转'}}
      </div>
      <template v-if="detailInfo.turnDownStatus==1&&detailInfo.receiveStatus!=1">
        
        <div class="base-info-item">
          分配医院：{{detailInfo.hospitalName}}
        </div>
        <div class="base-info-item">
          分配医生：{{detailInfo.basicDoctorName}}
        </div>
      </template>
      <div class="base-info-item">
        接收状态：{{detailInfo.receiveStatus==1?'已接收':'未接收'}}
      </div>
      <template v-if="detailInfo.receiveStatus==1">
        
        <div class="base-info-item">
          接收医院：{{detailInfo.hospitalName}}
        </div>
        <div class="base-info-item">
          接收医生：{{detailInfo.doctorName}}
        </div>
      </template>
      
    </div>
  </div>
  <div class="service-record-timeline">
    <div class="title">服务记录</div>
    <div class="record-list time-line">
      <div class="timeline" v-loading="loading">
        <div v-for="(event, eI) in events" :key="eI">
          <div class="timeline-item" v-if="event.flag">
            <div class="timeline-time" :id="'left-' + eI">
              {{ event.createTime&&event.createTime.substring(0,4)}}
            </div>
          </div>
          <div class="timeline-item" :class="{'timeline-item-blue-dot': event.createTime != null}">
            <div class="timeline-time" :id="'left-' + eI">{{event.createTime&& event.createTime.slice(5) }}</div>
            <div class="timeline-content" :id="'right-' + eI">
              <div class="data-item">
                <div class="data-title">
                  {{event.type==1?'下转患者':event.type==2?'医生接收':event.type==3?'居民流转':
                  event.type==4?'医生退回':event.type==5?'医生随访':event.type==6?'档案修改':'档案同步'}}
                </div>
                <div class="data-cont" v-if="event.type!=5&&event.type!=6&&event.type!=7">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">下转状态：</span>
                    <span style="color: #656565">
                      <template>{{event.turnDownStatus==0?'未下转':'已下转'}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">接收状态：</span>
                    <span style="color: #656565">
                      <template>{{event.receiveStatus==0?'未接收':'已接收'}}</template>
                    </span>
                  </div>
                  <template v-if="event.receiveStatus!=0">
                    
                    <div style="width: 50%">
                      <span style="color: #9fa2a8">接收医生：</span>
                      <span style="color: #656565">
                        <template>{{event.doctorName}}</template>
                      </span>
                    </div>
                    <div style="width: 50%">
                      <span style="color: #9fa2a8">接收医院：</span>
                      <span style="color: #656565">
                        <template>{{event.hospitalName}}</template>
                      </span>
                    </div>
                  </template>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否流转：</span>
                    <span style="color: #656565">
                      <template>{{event.isCirculation==0?'否':'是'}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>
                  <div style="width: 50%" v-if="event.isCirculation!=0">
                    <span style="color: #9fa2a8">流转去向：</span>
                    <span style="color: #656565">
                      <template v-if="event.isCirculation==0">———</template>
                      <template v-else>{{event.circulation}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否回退：</span>
                    <span style="color: #656565">
                      <template>{{event.isBack==0?'否':'是'}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>
                  <div style="width: 50%" v-if="event.isBack!=0">
                    <span style="color: #9fa2a8">回退原因：</span>
                    <span style="color: #656565">
                      <template v-if="event.isBack==0">———</template>
                      <template v-else>{{event.backType==1?'找到本人或家属，但否认慢阻肺病史':event.backType==2?'找到本人或家属，非本辖区，也不清楚现在的住址':event.backReason}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否失访：</span>
                    <span style="color: #656565">
                      <template>{{event.isLost==0?'否':'是'}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>

                  <div style="width: 50%">
                    <span style="color: #9fa2a8">操作医生：</span>
                    <span style="color: #656565">
                      <template>{{event.operaterName}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">所属机构：</span>
                    <span style="color: #656565">
                      <template>{{event.orgName}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type==5">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">下转状态：</span>
                    <span style="color: #656565">
                      <template>{{event.turnDownStatus==0?'未下转':'已下转'}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">接收状态：</span>
                    <span style="color: #656565">
                      <template>{{event.receiveStatus==0?'未接收':'已接收'}}</template>
                    </span>
                  </div>
                  <template v-if="event.receiveStatus==1">

                    <div style="width: 50%">
                      <span style="color: #9fa2a8">接收医院：</span>
                      <span style="color: #656565">
                        <template>{{event.hospitalName}}</template>
                      </span>
                    </div>
                    <div style="width: 50%">
                      <span style="color: #9fa2a8">接收医生：</span>
                      <span style="color: #656565">
                        <template>{{event.doctorName}}</template>
                      </span>
                    </div>
                  </template>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否流转：</span>
                    <span style="color: #656565">
                      <template>{{event.isCirculation==0?'否':'是'}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>
                  <div style="width: 50%" v-if="event.isCirculation!=0">
                    <span style="color: #9fa2a8">流转去向：</span>
                    <span style="color: #656565">
                      <template v-if="event.isCirculation==0">———</template>
                      <template v-else>{{event.circulation}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否回退：</span>
                    <span style="color: #656565">
                      <template>{{event.isBack==0?'否':'是'}}</template>
                      <!-- <template v-if="i% 3 == 0">———</template>
                    <template v-else>这是数据值，他可能会很长</template> -->
                    </span>
                  </div>
                  <div style="width: 50%" v-if="event.isBack!=0">
                    <span style="color: #9fa2a8">回退原因：</span>
                    <span style="color: #656565">
                      <template v-if="event.isBack==0">———</template>
                      <template v-else>{{event.backType==1?'找到本人或家属，但否认慢阻肺病史':event.backType==2?'找到本人或家属，非本辖区，也不清楚现在的住址':event.backReason}}</template>
                    </span>
                  </div>
                  <div style="display: flex; justify-content: space-between; width: 100%; ">
                    <div class="data-title">随访信息</div>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访医生：</span>
                    <span style="color: #656565">
                      <template>{{event.jkcopdFollowup.doctorName}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访机构：</span>
                    <span style="color: #656565">
                      <template>{{event.jkcopdFollowup.hospitalName}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访时间：</span>
                    <span style="color: #656565">
                      <template>{{event.jkcopdFollowup.followupDate}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">生存状态：</span>
                    <span style="color: #656565">
                      <template>{{event.jkcopdFollowup.isLive==1?'生存':'死亡'}}</template>
                    </span>
                  </div>
                  
                </div>
                <div class="data-cont" v-else-if="event.type==7">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">常住地址：</span>
                    <span style="color: #656565">
                      <template>{{event.backReason}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">操作医生：</span>
                    <span style="color: #656565">
                      <template>{{event.operaterName}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">操作机构：</span>
                    <span style="color: #656565">
                      <template>{{event.orgName}}</template>
                    </span>
                  </div>
                  </div>
                <div class="data-title" style="color: #12B7F5; font-size: 14px" v-if="event.type==5" @click="showDetail(event)"> 查看随访详情</div>
                <div class="data-cont" v-else>
                
                  <div style="width: 50%" v-for="item in event.achievesRecordList" :key="item.id">
                    <span style="color: #9fa2a8">{{item.classFieldName}}：</span>
                    <span style="color: #656565">
                      <template>{{item.newCommentName}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">操作医生：</span>
                    <span style="color: #656565">
                      <template>{{event.operaterName}}</template>
                    </span>
                  </div>
                  <div style="width: 50%" >
                    <span style="color: #9fa2a8">操作机构：</span>
                    <span style="color: #656565">
                      <template>{{event.orgName}}</template>
                    </span>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cops-service-record-bottom-box">
    <el-button @click="recordBack">返回</el-button>
  </div>
  <el-dialog title="随访详情" :visible.sync="dialog" width="50%" :destroy-on-close="true">
    <div class="copd-follow-up-dialog-box">
      <div class="copd-bb-record-info">
        <div class="title ki-title ta-title">
          随访信息
        </div>
        <div class="copd-bb-base-content">
          <div class="copd-bb-base-info-item" v-if="followInfo.createTime"> 
            随访时间：{{followInfo.createTime}}
          </div>
          <div class="copd-bb-base-info-item" v-if="followInfo.doctorName">
            随访医生：{{followInfo.doctorName}}
          </div>
          <div class="copd-bb-base-info-item" v-if="followInfo.hospitalName">
            随访机构： {{followInfo.hospitalName}}
          </div>
          <div class="copd-bb-base-info-item" v-if="followup"> 
            随访状态：{{followup}}
          </div>
          <div class="copd-bb-base-info-item" v-if="followInfo.status==4"> 
            失访原因：{{followInfo.lostReason}}
          </div>
        </div>
      </div>
      <template v-if="followInfo.status!='4'">
        <div class="copd-bb-record-info">
          <div class="title ki-title">
            基本信息
          </div>
          <div class="copd-bb-base-content">
            <div class="copd-bb-base-info-item" v-if="followInfo.name">
              姓名：{{followInfo.name}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="followInfo.sex">
              性别：{{followInfo.sex==1?'男':'女'}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="nationName">
              民族：{{nationName}}
            </div>

            <div class="copd-bb-base-info-item"  v-if="followInfo.birthday">
              出生日期：{{followInfo.birthday}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="idcardTypeName">
              证件类型：{{idcardTypeName}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="followInfo.idcard">
              证件号码：{{followInfo.idcard}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="followInfo.mobile">
              联系电话：{{followInfo.mobile}}
            </div>
            <div class="copd-bb-base-info-item" v-if="educational">
              学历：{{educational}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="marriageName">
              婚姻状况：{{marriageName}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="occupation">
              职业类型：{{occupation}}
            </div>
            <div class="copd-bb-base-info-item"  v-if="followInfo.liveProvinceName">
              常住地区：{{followInfo.liveProvinceName}}{{followInfo.liveCityName}}{{followInfo.liveTownName}}{{followInfo.liveStreetName}}
            </div>
            <div class="copd-bb-base-info-item" v-if="followInfo.liveAddress">
              常住地址：{{followInfo.liveAddress}}
            </div>
              <div class="copd-bb-base-info-item" v-if="followInfo.registProvinceName" >
              户籍地区：{{followInfo.registProvinceName}}{{followInfo.registCityName}}{{followInfo.registTownName}}{{followInfo.registStreetName}}
            </div>
            <div class="copd-bb-base-info-item" v-if="followInfo.registAddress">
              户籍地址：{{followInfo.registAddress}}
          </div>
        </div>
        <div class="copd-bb-record-info">
          <div class="title ki-title  ta-title">
            随访情况
          </div>
          <div class="copd-bb-base-content">
            <div class="copd-bb-base-info-item" v-if="followInfo.isLive">
              生存状态：{{followInfo.isLive==1?'生存':'死亡'}}
            </div>
            <template v-if="followInfo.isLive==1">

              <div class="copd-bb-base-info-item" v-if="followInfo.hasSmoke">
                是否抽烟：{{followInfo.hasSmoke==1?'是':followInfo.hasSmoke==0?'否':'已戒烟'}}
              </div>
              <div class="copd-bb-base-info-item" v-if="followInfo.hasDrink">
                是否饮酒：{{followInfo.hasDrink==1?'是':followInfo.hasDrink==0?'否':'已戒酒'}}
              </div>
              <div class="copd-bb-base-info-item" v-if="diseaseConversion">
                病情归转：{{diseaseConversion}}
              </div>
            </template>
            
            <!-- <div class="copd-bb-base-info-item">
              是否做过肺功能检查：{{followInfo.hasLung}}
            </div> -->
            <!-- <div class="copd-bb-base-info-item">e
              是否做过胸部CT或X线检查：{{followInfo.birthday}}
            </div> -->
         
          </div>
        </div>
        <template v-if="followInfo.isLive==1">
        <div class="copd-bb-record-info">
          <div class="title ki-title ta-title">
            首次确诊情况
          </div>
          <div class="copd-bb-base-content">
            <div class="copd-bb-base-info-item" v-if="followInfo.firstVisitTime">
              慢阻肺首次诊断时间：{{followInfo.firstVisitTime}}
            </div>
            <div class="copd-bb-base-info-item" v-if="firstAreaName">
              慢阻肺首次诊断地区：{{firstAreaName}}
            </div>
            <div class="copd-bb-base-info-item" v-if="orGlevelName">
              <!-- 慢阻肺首次诊断机构级别：{{
                followInfo.firstVisitOrgLevel == 1 ? '三级医院' :
                followInfo.firstVisitOrgLevel == 2 ? '二级医院' :
                followInfo.firstVisitOrgLevel == 3 ? '村卫生室' :
                followInfo.firstVisitOrgLevel == 4 ? '乡镇卫生院/社区卫生服务机构' :
                followInfo.firstVisitOrgLevel == 5 ? '其他医疗卫生机构' :
                ''
              }} -->
              慢阻肺首次诊断机构级别：{{orGlevelName}}
            </div>
            <div class="copd-bb-base-info-item" v-if="diagnosticBasisName">
              最高诊断依据：{{diagnosticBasisName}}
            </div>
            <div class="copd-bb-base-info-item" v-if="symptom">
              症状：{{symptom}}
            </div>
            <div class="copd-bb-base-info-item" v-if="followInfo.drugBefore">
              使用支气管扩张剂前FEV1/FVC(%)：{{followInfo.drugBefore}}
            </div>
            <div class="copd-bb-base-info-item" v-if="followInfo.drugAfter">
              使用支气管扩张剂后FEV1/FVC(%)：{{followInfo.drugAfter}}
            </div>
          </div>
        </div>
        </template>
        <div class="copd-bb-record-info" v-if="followInfo.isLive!=1">
          <div class="title ki-title ta-title">
            死亡情况
          </div>
          <div class="copd-bb-base-content" >
            <template v-if="followInfo.isLive!=1">
              <div class="copd-bb-base-info-item" v-if="followInfo.deathTime">
                死亡时间：{{followInfo.deathTime}}
              </div>
              <div class="copd-bb-base-info-item"  v-if="followInfo.deathReason">
                死亡原因：{{followInfo.deathReason}}
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">关闭</el-button>
    </span>
  </el-dialog>
</div>