xiangan_pc/src/page-subspecialty/views/modules/optometryManagement/outFocusEye/outDetail.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="1">
          <el-table
            :data="tableData5"
            :default-expand-all="true"
            :span-method="objectSpanMethod"
            style="width: 100%"
          >
            <el-table-column
              label="初诊信息"
              width="180"
              prop="id"
            />
            <el-table-column
              label="眼别"
              prop="name"
            />
            <el-table-column
              label="球镜"
              prop="desc"
            />
            <el-table-column
              label="柱镜"
              prop="desc"
            />
            <el-table-column
              label="轴向"
              prop="desc"
            />
            <el-table-column
              label="矫正视力"
              prop="desc"
            />
            <el-table-column
              label="瞳距"
              prop="desc"
            />
            <el-table-column
              label="瞳高"
              prop="desc"
            />
            <el-table-column
              label="眼轴"
              prop="desc"
            />
            <el-table-column
              label="备注"
              prop="desc"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="复诊" name="2">
          <el-table
            :data="tableData5"
            :default-expand-all="true"
            :span-method="objectSecondMethod"
            style="width: 100%"
          >
            <el-table-column
              label="复诊信息"
              width="180"
              prop="id"
            />
            <el-table-column
              label="眼别"
              prop="name"
            />
            <el-table-column
              label="球镜"
              prop="desc"
            />
            <el-table-column
              label="柱镜"
              prop="desc"
            />
            <el-table-column
              label="轴向"
              prop="desc"
            />
            <el-table-column
              label="矫正视力"
              prop="desc"
            />
            <el-table-column
              label="瞳距"
              prop="desc"
            />
            <el-table-column
              label="瞳高"
              prop="desc"
            />
            <el-table-column
              label="眼轴"
              prop="desc"
            />
            <el-table-column
              label="联合光度"
              prop="desc"
            />
            <el-table-column
              label="备注"
              prop="desc"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="眼轴折线图" name="3">
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>

export default {
  components: {
  },
  props: {
    patientId: {
      type: String,
      default: ''
    },
    onlyRead: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData5: [{
        id: '日期：2023.07.03',
        name: '左眼',
        category: '江浙小吃',
        desc: '1.2',
        address: '上海市',
        shop: '王小虎',
        shopId: '10333'
      },
      {
        id: '日期',
        name: '右眼',
        category: '江浙小吃',
        desc: '1.5',
        address: '上海市路',
        shop: '王小虎',
        shopId: '10333'
      }],
      patientInfo: [],
      patientInfoObj: {},
      activeName: '1',
      pageParams: {}
    }
  },
  mounted() {
  },
  created() {
    this.getPatientInfo()
  },
  methods: {
    backList() {
      this.$parent.detailViewVisible = false
      this.$parent.reFresh()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 9) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    objectSecondMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 10) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    // 获取患者信息
    async getPatientInfo() {
      this.$http.get('/patient/getPatientInfo', {
        params: {
          patientId: this.patientId
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.patientInfoObj = res.data
        }
      }).catch(() => {})
    },
    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>