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">
          <div style="display: flex;justify-content: flex-end;margin-bottom: 16px">
            <el-button type="primary" size="small" @click="saveFirstForm()">保存</el-button>
          </div>
          <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            style="width: 100%"
          >
            <el-table-column
              label="初诊信息"
              width="220"
              align="center"
            >
              <template slot-scope="scope">
                日期：
                <el-date-picker
                  v-model="firstForm.checkDate"
                  style="width: 140px"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                />
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              align="center"
              label="眼别"
              prop="name"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.name==='备注'">
                  <el-input v-model="firstForm.remark" type="textarea" :rows="3" placeholder="" />
                </div>
                <div v-else>
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="球镜"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.ds === '右眼'" v-model="firstForm.dsOd" placeholder="" />
                <el-input v-if="scope.row.ds === '左眼'" v-model="firstForm.dsOs" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="柱镜"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.dc === '右眼'" v-model="firstForm.dcOd" placeholder="" />
                <el-input v-if="scope.row.dc === '左眼'" v-model="firstForm.dcOs" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="轴向"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.a === '右眼'" v-model="firstForm.aod" placeholder="" />
                <el-input v-if="scope.row.a === '左眼'" v-model="firstForm.aos" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="矫正视力"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.va === '右眼'" v-model="firstForm.vaOd" placeholder="" />
                <el-input v-if="scope.row.va === '左眼'" v-model="firstForm.vaOs" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="瞳距"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.pd === '右眼'" v-model="firstForm.pdOd" placeholder="" />
                <el-input v-if="scope.row.pd === '左眼'" v-model="firstForm.pdOs" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="瞳高"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.ph === '右眼'" v-model="firstForm.phOd" placeholder="" />
                <el-input v-if="scope.row.ph === '左眼'" v-model="firstForm.phOs" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="眼轴"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.iol === '右眼'" v-model="firstForm.iolOd" placeholder="" />
                <el-input v-if="scope.row.iol === '左眼'" v-model="firstForm.iolOs" placeholder="" />
              </template>
            </el-table-column>
            <el-table-column
              label="品牌"
              align="center"
            >
              <template slot-scope="scope">
                <el-select v-if="scope.row.brand1 === '右眼'" v-model="firstForm.brandOd1" placeholder="" clearable filterable allow-create style="flex: 1">
                  <el-option v-for="item in brandList" :key="item.label" :value="item.value" :label="item.label" />
                </el-select>
                <el-select v-if="scope.row.brand1 === '左眼'" v-model="firstForm.brandOs1" placeholder="" clearable filterable allow-create style="flex: 1">
                  <el-option v-for="item in brandList" :key="item.label" :value="item.value" :label="item.label" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-if="scope.row.brand2 === '右眼'" v-model="firstForm.brandOd2" placeholder="" />
                <el-input v-if="scope.row.brand2 === '左眼'" v-model="firstForm.brandOs2" placeholder="" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="复诊" name="2">
          <reviewForm v-if="activeName==='2'" :patient-id="patientId" />
        </el-tab-pane>
        <el-tab-pane label="眼轴折线图" name="3">
          <div class="axisModel">
            <eye-axis v-if="activeName==='3'" :patient-id="patientId" :id-name="'eyeAxis'" />
            <div style="margin-top: 32px">
              <sun-axis v-if="activeName==='3'" :patient-id="patientId" :id-name="'sunAxis'" params-name="lhgd" />
            </div>
            <div style="margin-top: 32px">
              <sun-axis v-if="activeName==='3'" desc="球镜" :patient-id="patientId" :id-name="'qjAxis'" params-name="ds" />
            </div>
            <div style="margin-top: 32px">
              <sun-axis v-if="activeName==='3'" desc="柱镜" :patient-id="patientId" :id-name="'zjAxis'" params-name="dc" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import eyeAxis from './eyeAxis'
import sunAxis from './sunAxis'
import reviewForm from './reviewForm'
export default {
  components: {
    eyeAxis,
    sunAxis,
    reviewForm
  },
  props: {
    patientId: {
      type: String,
      default: ''
    },
    onlyRead: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      brandList: [
        {
          label: '依视路星趣控',
          value: '依视路星趣控'
        }, {
          label: '蔡司成长乐',
          value: '蔡司成长乐'
        }, {
          label: '蔡司小乐圆',
          value: '蔡司小乐圆'
        }, {
          label: '豪雅新乐学',
          value: '豪雅新乐学'
        }, {
          label: '豪雅爱乐学',
          value: '豪雅爱乐学'
        }
      ],
      tableData: [
        {
          checkDate: '',
          name: '右眼',
          ds: '右眼',
          dc: '右眼',
          iol: '右眼',
          brand1: '右眼',
          brand2: '右眼',
          pd: '右眼',
          ph: '右眼',
          va: '右眼',
          a: '右眼',
          remark: ''
        },
        {
          checkDate: '',
          name: '左眼',
          ds: '左眼',
          dc: '左眼',
          iol: '左眼',
          brand1: '左眼',
          brand2: '左眼',
          pd: '左眼',
          ph: '左眼',
          va: '左眼',
          a: '左眼',
          remark: ''
        },
        {
          checkDate: '',
          name: '备注',
          ds: '左眼',
          dc: '左眼',
          iol: '左眼',
          pd: '左眼',
          ph: '左眼',
          va: '左眼',
          a: '左眼',
          remark: ''
        }
      ],
      firstForm: {
        patientId: '',
        checkDate: '',
        dcOd: '',
        dcOs: '',
        dsOd: '',
        dsOs: '',
        iolOd: '',
        iolOs: '',
        pdOd: '',
        pdOs: '',
        phOd: '',
        phOs: '',
        remark: '',
        vaOd: '',
        vaOs: '',
        aod: '',
        aos: '',
        brandOd1: '',
        brandOs1: '',
        brandOd2: '',
        brandOs2: ''
      },
      patientInfoObj: {},
      activeName: '1'
    }
  },
  mounted() {
  },
  created() {
    console.log(this.patientId)
    this.getFirstForm()
    this.getPatientInfo()
  },
  methods: {
    backList() {
      this.$parent.detailViewVisible = false
      this.$parent.reFresh()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 1) {
        if (rowIndex % 3 === 2) {
          return {
            rowspan: 1,
            colspan: 11
          }
        }
      }
    },
    // 获取患者信息
    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 getFirstForm() {
      this.$http.get('/defocused/getFirstDefocused', {
        params: {
          patientId: this.patientId
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.firstForm = res.data
          this.firstForm.patientId = this.patientId
        }
      }).catch(() => {})
    },
    saveFirstForm() {
      const params = {
        ...this.firstForm
      }
      params.patientId = this.patientId
      // console.log(params)
      this.$http.post('/defocused/saveOrUpdateFirstDefocused', params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getFirstForm()
          }
        })
      }).catch(() => {})
    },
    TabClick(tab, event) {

    }
  }
}
</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;
  }
}
::v-deep .el-icon-arrow-up{
  display: none;
}
.axisModel{
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
</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>