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

<div class="copd-service-record-box">
  <el-radio-group v-model="changeModule" style="margin-bottom: 20px">
    <el-radio-button label="1" style="margin-right: 0px">基本信息</el-radio-button>
    <el-radio-button label="2" style="margin-right: 0px">乳腺评估信息</el-radio-button>
    <el-radio-button label="3" style="margin-right: 0px">宫颈评估信息</el-radio-button>
  </el-radio-group>
  <div class="service-base-info">
    <div class="base-title ki-title ta-title">{{changeModule == 1 ? '基本信息' : changeModule == 2 ? '乳腺评估信息' : '宫颈评估信息'}}</div>
    <div class="base-content" v-if="changeModule == 1">
      <div class="base-info-item">姓名：{{detailInfo.name}}</div>
      <div class="base-info-item">性别：{{detailInfo.sex==1?'男':detailInfo.sex==2?'女':'未知'}}</div>
      <div class="base-info-item">证件号码：{{detailInfo.idcard}}</div>
      <div class="base-info-item">联系电话：{{detailInfo.mobile}}</div>
    </div>
    <div class="base-content" v-else-if="changeModule == 2">
      <div class="base-info-item">乳腺评估机构：{{detailInfo.assessHospital}}</div>
      <div class="base-info-item">乳腺评估人：{{detailInfo.assessDoctorName}}</div>
      <div class="base-info-item">乳腺初筛时间：{{detailInfo.breastUltrasoundInspectTime}}</div>
      <div class="base-info-item">乳腺评估时间：{{detailInfo.assessTime}}</div>
    </div>
    <div class="base-content" v-else-if="changeModule == 3">
      <div class="base-info-item">宫颈评估机构：{{detailInfo.cervicalAssessHospital}}</div>
      <div class="base-info-item">宫颈评估人：{{detailInfo.cervicalAssessDoctorName}}</div>
      <div class="base-info-item">宫颈初筛时间：{{detailInfo.cervicalCancerInspectTime}}</div>
      <div class="base-info-item">宫颈评估时间：{{detailInfo.cervicalAssessTime}}</div>
    </div>
  </div>
  <div class="service-record-timeline">
    <div class="title">服务记录</div>
    <div>
      <!-- <div class="mb10 mt10" style="display: flex; align-items: center">
        <span>服务年份：</span>
        <el-radio-group v-model="serviceYear" @input="getDealRecord">
          <el-radio-button :label="item.value" v-for="item in yearList" :key="item.value">{{item.label}}</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="customizeYear"
          style="width: 400px"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-if="serviceYear=='customize'"
          value-format="yyyy-MM-dd"
          @change="getDealRecord"></el-date-picker>
      </div> -->
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 180px">服务节点：</div>
        <el-radio-group v-model="serviceNode" @input="getDealRecord" style="display: flex; flex-wrap: wrap">
          <el-radio-button :label="item.value" v-for="item in nodeList" :key="item.value" style="margin-bottom: 15px">{{item.label}}</el-radio-button>
          <div @click="getMore" style="display: flex; align-items: center; color: #409eff; font-size: 16px; cursor: pointer; margin-top: -20px">
            {{moreFlag? '更多':'收起'}}
            <i :class="moreFlag ?'el-icon-arrow-down ': 'el-icon-arrow-up' " style="font-size: 22px; color: #409eff; font-weight: bold; margin-left: 5px"></i>
          </div>
        </el-radio-group>
      </div>
    </div>
    <div class="record-list time-line">
      <div class="timeline" v-loading="loading" v-if="events.length">
        <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.time&&event.time.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.time&& event.time.slice(5) }}</div>
            <div class="timeline-content" :id="'right-' + eI">
              <div class="data-item">
                <div class="data-title">{{event.typeName}}</div>
                <div class="data-cont" v-if="event.type == 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.time}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">证件号码：</span>
                    <span style="color: #656565">
                      <template>{{event.idcard}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">医保卡号：</span>
                    <span style="color: #656565">
                      <template>{{event.ssc}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 2 ||event.type == 3 ||event.type == 4 ||event.type == 6 || event.type == 13|| event.type == 15">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">{{event.type == 13 || event.type == 15 ? '是否检查' : '是否拒检'}} ：</span>
                    <span style="color: #656565">
                      <template>{{event.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 5 ||event.type == 14|| event.type == 16">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">{{event.type == 14|| event.type == 16 ? '检查情况' : '是否检查'}} ：</span>
                    <span style="color: #656565">
                      <template>{{event.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</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.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 8">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否随访：</span>
                    <span style="color: #656565">
                      <template>{{event.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">随访时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 9">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">是否拒检：</span>
                    <span style="color: #656565">
                      <template>{{event.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员（妇科检查）：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员（分泌物）：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor2}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 10">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 11">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 12">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">临床评估意见：</span>
                    <span style="color: #656565">
                      <template>{{event.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>
                <div class="data-cont" v-else-if="event.type == 17">
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">最后诊断：</span>
                    <span style="color: #656565">
                      <template>{{event.isReject}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查机构：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectOrg}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查人员：</span>
                    <span style="color: #656565">
                      <template>{{event.inspectDoctor}}</template>
                    </span>
                  </div>
                  <div style="width: 50%">
                    <span style="color: #9fa2a8">检查时间：</span>
                    <span style="color: #656565">
                      <template>{{event.time}}</template>
                    </span>
                  </div>
                </div>

                <div class="data-title" style="color: #12b7f5; font-size: 14px; cursor: pointer" @click="showDetail(event)">查看详情</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="font-size: 16px; text-align: center; margin-top: 100px">暂无数据</div>
    </div>
  </div>
  <div class="cops-service-record-bottom-box">
    <el-button @click="recordBack">返回</el-button>
  </div>

  <el-dialog :title="title" :visible.sync="formDialogVisible" width="60%">
    <lasc-modify-patient :currentInfo="currentInfo" v-if="type==1" :readonly="readonly"></lasc-modify-patient>
    <lasc-lascClinical-examination :data="detailData" v-if="type==2"></lasc-lascClinical-examination>
    <lasc-breast-cduInspect-entity-list :data="detailData" v-if="type==3"></lasc-breast-cduInspect-entity-list>
    <lasc-breast-molybdenum-inspect-list :data="detailData" v-if="type==4"></lasc-breast-molybdenum-inspect-list>
    <lasc-breast-pathology-inspect-entity-list :data="detailData" v-if="type==5"></lasc-breast-pathology-inspect-entity-list>
    <lasc-breast-surgery-inspect-entity :data="detailData" v-if="type==6"></lasc-breast-surgery-inspect-entity>
    <lasc-breast-treat-info :data="detailData" v-if="type==7"></lasc-breast-treat-info>
    <lasc-breast-followUp :data="detailData" v-if="type==8"></lasc-breast-followUp>
    <lasc-cervical-gynecological-examination-entityList :data="detailData" v-if="type==9"></lasc-cervical-gynecological-examination-entityList>
    <lasc-cervical-hpv-entityList :data="detailData" v-if="type==10"></lasc-cervical-hpv-entityList>
    <lasc-cervical-cytology-inspect-entityList :data="detailData" v-if="type==11"></lasc-cervical-cytology-inspect-entityList>
    <lasc-cervical-preliminary-screen-entity :data="detailData" v-if="type==12"></lasc-cervical-preliminary-screen-entity>
    <lasc-cervical-colposcopy-entity-list :data="detailData" v-if="type==13"></lasc-cervical-colposcopy-entity-list>
    <lasc-cervical-colposcopy-followup :data="detailData" v-if="type==14"></lasc-cervical-colposcopy-followup>
    <lasc-cervical-pathological-examination-list :data="detailData" v-if="type==15"></lasc-cervical-pathological-examination-list>
    <lasc-cervical-histopathology-followup :data="detailData" v-if="type==16"></lasc-cervical-histopathology-followup>
    <lasc-cervical-final-diagnosis-entity :data="detailData" v-if="type==17"></lasc-cervical-final-diagnosis-entity>
  </el-dialog>
</div>