xiangan_pc/src/page-subspecialty/views/modules/optometryManagement/seeDoctor/index.vue

<template>
  <div class="see-doctor">
    <div class="header">
      <img :src="require('@/assets/img/back-l.png')" alt="" style="margin-right: 8px;cursor: pointer" @click="backList">
      <img :src="require('@/assets/img/boy.png')" alt="">
      <p class="head-t">
        <span class="head-r">{{ patientInfoObj.patientName }}</span>
        <span class="head-r">{{ patientInfoObj.patientSex }}</span>
        <span v-if="patientInfoObj.patientAge" class="head-r">{{ patientInfoObj.patientAge }}岁</span>
        <img v-if="patientInfoObj.patientId" class="icon-a" :src="require('@/assets/img/pid.png')" alt="" style="margin-right: 6px;vertical-align: text-top">
        <span style="vertical-align: text-bottom">{{ patientInfoObj.patientId }}</span>
      </p>
      <p class="head-b">
        <img v-if="patientInfoObj.patientId" :src="require('@/assets/img/id.png')" alt="" style="margin-right: 6px;vertical-align: middle">
        <span class="mr16" style="vertical-align: middle">{{ patientInfoObj.patientId }}</span>
        <img v-if="patientInfoObj.patientPhone" :src="require('@/assets/img/phone.png')" alt="" style="margin-right: 6px;vertical-align: middle">
        <span class="mr16" style="vertical-align: middle">{{ patientInfoObj.patientPhone }}</span>
        <img v-if="patientInfoObj.patientAddress" :src="require('@/assets/img/position.png')" alt="" style="margin-right: 6px;vertical-align: middle">
        <span style="vertical-align: middle">{{ patientInfoObj.patientAddress }}</span>
      </p>
    </div>
    <div class="see-docto-right">
      <el-tabs v-model="activeName" type="card" @tab-click="TabClick">
        <el-tab-pane label="告知书" name="noticeBook">
          <notice-book v-if="activeName==='noticeBook'" :patient-id="patientId" />
        </el-tab-pane>
        <el-tab-pane label="首诊单" name="firstVisit">
          <firstForm v-if="activeName==='firstVisit'" :patient-id="patientId"></firstForm>
<!--          <first-visit v-if="activeName==='firstVisit'" :patient-id="patientId" />-->
        </el-tab-pane>
        <el-tab-pane label="OK镜" name="okLens">
          <ok-lens-rgp v-if="activeName==='okLens'" ref="okLensRgp" :patient-id="patientId" :doctor-list="doctorList" tab-title="okLens" />
        </el-tab-pane>
        <el-tab-pane label="复查情况" name="review">
          <review v-if="activeName==='review'" :patient-id="patientId" />
        </el-tab-pane>
        <el-tab-pane label="历史档案" name="history">
          <history-file v-if="activeName==='history'" :patient-id="patientId" />
        </el-tab-pane>
        <el-tab-pane label="RGP" name="RGP">
          <ok-lens-rgp v-if="activeName==='RGP'" ref="okLensRgp" :patient-id="patientId" :doctor-list="doctorList" tab-title="RGP" />
        </el-tab-pane>
        <el-tab-pane label="离焦软镜" name="离焦软镜">
          <ok-lens-rgp v-if="activeName==='离焦软镜'" ref="okLensRgp" :patient-id="patientId" :doctor-list="doctorList" tab-title="LJRJ" />
        </el-tab-pane>
        <el-tab-pane label="复查汇总" name="reviewSum">
          <review-sum v-if="activeName==='reviewSum'" :patient-id="patientId" />
        </el-tab-pane>
        <el-tab-pane label="眼轴变化图" name="eyeAxis">
          <eye-axis v-if="activeName==='eyeAxis'" :patient-id="patientId" :id-name="'eyeAxis'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import firstVisit from './first-visit/index.vue' // 首诊单
import firstForm from './firstForm.vue' // 首诊单
import noticeBook from './informBook' // 告知书
import review from './review.vue' // 复查情况
import historyFile from './historyRecord.vue' // 历史档案
import okLensRgp from './ok-lens-rgp/index.vue'
import ReviewSum from '@/page-subspecialty/views/modules/optometryManagement/seeDoctor/reviewSum.vue'
import EyeAxis from '@/page-subspecialty/views/modules/optometryManagement/seeDoctor/eyeAxis.vue' // ok镜

export default {
  components: {
    EyeAxis,
    ReviewSum,
    firstVisit,
    okLensRgp,
    noticeBook,
    review,
    firstForm,
    historyFile
  },

  data() {
    return {
      patientInfo: [],
      doctorList: [],
      patientInfoObj: {},
      activeName: 'noticeBook',
      patientId: '',
      pageParams: {}
    }
  },
  watch: {
    patientInfoObj(val) {
      this.patientInfo = [{
        name: '登记号',
        info: val.patientId
      },
      {
        name: '年龄',
        info: val.patientAge
      },
      {
        name: '性别',
        info: val.patientSex
      },
      {
        name: '出生日期',
        info: val.patientBirthday
      },
      {
        name: '身份证号',
        info: val.patientId
      },
      {
        name: '手机号',
        info: val.patientPhone
      },
      {
        name: '住址',
        info: val.patientAddress
      },
      {
        name: '接诊医生',
        info: val.doctorName
      }]
    }
  },
  mounted() {
  },
  created() {
    this.pageParams = JSON.parse(this.$Base64.decode(this.$route.query.info))
    this.patientId = this.pageParams.patientId
    this.getPatientInfo()
    this.getDoctorList()
  },
  methods: {
    backList() {
      this.$router.back()
    },
    // 360浏览器
    handlePacs() {
      this.isActive = true
    },
    // 获取患者信息
    async getPatientInfo() {
      this.$http.get('/patient/view/getPatientData', {
        params: {
          patientId: this.patientId
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.patientInfoObj = res.data
        }
      }).catch(() => {})
    },
    // 获取医生列表
    async getDoctorList() {
      const { data: res } = await this.$http.get('/dp/getDoctorList')
      if (res.code === 0) {
        this.doctorList = res.data
      }
    },
    // 告知书
    TabClick(tab, event) {
      if (tab.name === 'okLensRgp') {
        this.$refs.okLensRgp.init()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.see-doctor {
  width: 100%;
  height: 100%;
  .header{
    width: 100%;
    height: 88px;
    padding: 8px;
    position: relative;
    margin-bottom: 16px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 4px;
    .head-t{
      position: absolute;
      left: 155px;
      top: 20px;
    }
    .head-b{
      position: absolute;
      left: 155px;
      bottom: 20px;
      font-size: 14px;
    }
    .head-r{
      margin-right: 16px;
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.88);
    }
  }
  .mr16{
    margin-right: 16px;
  }
  .see-docto-right{
    height: calc( 100vh - 90px - 82px);
    overflow: hidden;
  }
}
</style>

<style lang="scss">
.see-doctor {
  .el-tabs__nav {
    z-index:0;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__nav {
    background: #fff;
  }
  .el-tabs__content {
    padding: 16px;
    background: #fff;
    height: calc( 100vh - 145px - 32px - 42px);
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: 1px solid #f0f0f0;
  }
  .el-tab-pane{
    height: 100%;
  }
  .detail-view {
    height: 100%;
    background: #0c1016;
    padding: 0;
  }
  .detail-view .el-dialog .el-dialog__header > .el-dialog__title{
    color: #FFFFFF;
  }
  .detail-view .el-dialog > .el-dialog__header{
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: linear-gradient(180deg,#0c1016, #2c3543 100%);
    padding: 0;
  }
  .detail-view .el-dialog > .el-dialog__body{
    height: 100%;
    flex: 1;
    background: #0c1016;
    padding: 0;
  }
}

</style>