xiangan_pc/src/components/360View/commonForm/threeVision.vue

<template>
  <div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
    <div v-if="!onlyRead" class="btnBox">
      <el-button v-print="'#threeFunc'" size="small" @click="handleSaveTable">打印</el-button>
      <el-button type="primary" size="small" @click="handleSaveTable">保存</el-button>
      <el-button type="danger" size="small" @click="handleDelete">删除</el-button>
    </div>
    <div id="threeFunc" style="width: 840px;padding-right: 8px" class="printBox">
      <div class="flex j-c">
        <img width="450" src="@/assets/img/xianganlogo.png">
      </div>
      <hr>
      <p style="color:#000000;font-size:32px;margin-bottom:30px;text-align:center;">
        三级视功能检查报告单
      </p>
      <div style="display: flex;justify-content: space-around">
        <span>登记号：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" placeholder="" /></span>
        <span>姓名：<el-input v-model="dataForm.patientName" style="width: 120px" size="small" placeholder="" /></span>
        <span>性别：<el-input v-model="dataForm.patientSex" style="width: 120px" size="small" placeholder="" /></span>
        <span>年龄：<el-input v-model="dataForm.patientAge" style="width: 120px" size="small" placeholder="" /></span>
      </div>
      <div class="operation-record-table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 820px; margin-top: 10px">
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name === 'ODOS'" style="position: relative;height: 180px">
                <div style="display: flex">
                  <p style="width: 50%">OD</p>
                  <p style="width: 50%">OS</p>
                </div>
                <div class="rowLine" />
                <div class="cloLine" />
                <div class="rowLine-l" />
                <div class="cloLine-l" />
                <div class="Rline">R</div>
                <div class="Rline-os">L</div>
                <div class="Lline">L</div>
                <div class="Lline-os">R</div>
                <el-input v-model="dataForm.jfwjcOd1" class="ipt-a" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd2" class="ipt-b" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd3" class="ipt-c" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd4" class="ipt-d" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd5" class="ipt-e" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd6" class="ipt-f" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd7" class="ipt-g" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd8" class="ipt-h" placeholder="" />
                <el-input v-model="dataForm.jfwjcOd9" class="ipt-j" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs1" class="iptos-a" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs2" class="iptos-b" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs3" class="iptos-c" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs4" class="iptos-d" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs5" class="iptos-e" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs6" class="iptos-f" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs7" class="iptos-g" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs8" class="iptos-h" placeholder="" />
                <el-input v-model="dataForm.jfwjcOs9" class="iptos-j" placeholder="" />
              </div>
              <div v-else-if="scope.row.name === 'TITMUS(近)'">
                <span>TITMUS(近):</span>
                <el-input v-model="dataForm.titmus" style="width: 60%" placeholder="" />
              </div>
              <div v-else-if="scope.row.name === '报告描述'">
                <span>报告描述:</span>
                <el-input v-model="dataForm.bgms" placeholder="" style="width: 80%" />
              </div>
              <div v-else-if="scope.row.name === '签名'" style="display: flex;justify-content: space-between;padding: 0 16px">
                <div class="width-180" style="text-align: left">
                  <!--                  <span>视光师:</span>-->
                  <!--                  <el-input v-model="scope.row.a" style="width: 160px" placeholder="" />-->
                  <span style="display: inline-block;margin-top: 16px">视光师:</span>
                  <img v-if="dataForm.ygsSign" :src="dataForm.ygsSign" alt="" style="width: 80px;height: 60px;border-style:none;">
                </div>
                <div class="width-180" style="text-align: left;margin-top: 16px">
                  <el-input v-model="dataForm.ysSign" placeholder="">
                    <template slot="prepend">医师:</template>
                  </el-input>
                </div>
                <div class="width-180" style="text-align: left;margin-top: 16px">
                  日期：<el-date-picker
                    v-model="dataForm.riQi"
                    type="date"
                    placeholder="选择日期"
                  />
                </div>
              </div>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false" prop="type">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '屈光状态'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.qgztOd" placeholder="">
                    <template slot="prepend">OD:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '屈光状态a'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.qgztOs" placeholder="">
                    <template slot="prepend">OS:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == 'CT+Prism'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.ctPrism" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '检查画片' && scope.row.type == '1'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.tssjcJchp" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '主观斜视角'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.tssjcZgxsj1" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '客观斜视角'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.tssjcKgxsj1" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '检查画片' && scope.row.type == '2'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.rhgnjcJchp" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '融合点'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.rhgnjcRhd1" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == 'Worth-4-dot'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.worth1" placeholder="" style="width: 100px" />
                  @D
                  <el-input v-model="dataForm.worth3" placeholder="" style="width: 100px" />
                </div>
              </div>
              <div v-if="scope.row.name == 'TITMUS(近)'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.tno" placeholder="">
                    <template slot="prepend">TNO(近):</template>
                  </el-input>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '屈光状态'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.qgztOdVa" placeholder="">
                    <template slot="prepend">VA:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '屈光状态a'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.qgztOsVa" placeholder="">
                    <template slot="prepend">VA:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '主观斜视角'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.tssjcZgxsj2" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '客观斜视角'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.tssjcKgxsj2" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '融合点'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.rhgnjcRhd2" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == 'Worth-4-dot'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.worth2" placeholder="" style="width: 100px" />
                  @N
                  <el-input v-model="dataForm.worth4" placeholder="" style="width: 100px" />
                </div>
              </div>
              <div v-if="scope.row.name == 'TITMUS(近)'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.rdd" placeholder="">
                    <template slot="prepend">RDD(远):</template>
                  </el-input>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    patientId: {
      type: String,
      default: ''
    },
    onlyRead: {
      type: Boolean,
      default: false
    },
    caseId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataForm: {
        patientId: '',
        patientName: '',
        patientSex: '',
        patientAge: '',
        // 屈光状态
        qgztOd: '',
        qgztOs: '',
        qgztOdVa: '',
        qgztOsVa: '',
        // CT+Prism
        ctPrism: '',
        // 检查画片
        tssjcJchp: '',
        // 主观斜视角
        tssjcZgxsj1: '',
        tssjcZgxsj2: '',
        // 客观斜视角
        tssjcKgxsj1: '',
        tssjcKgxsj2: '',
        // 检查画片融合
        rhgnjcJchp: '',
        // 融合点
        rhgnjcRhd1: '',
        rhgnjcRhd2: '',
        // Worth-4-dot
        worth1: '',
        worth2: '',
        worth3: '',
        worth4: '',
        // 立体式检查
        titmus: '',
        tno: '',
        rdd: '',
        // 同视机九方位检查
        jfwjcOd1: '',
        jfwjcOd2: '',
        jfwjcOd3: '',
        jfwjcOd4: '',
        jfwjcOd5: '',
        jfwjcOd6: '',
        jfwjcOd7: '',
        jfwjcOd8: '',
        jfwjcOd9: '',
        jfwjcOs1: '',
        jfwjcOs2: '',
        jfwjcOs3: '',
        jfwjcOs4: '',
        jfwjcOs5: '',
        jfwjcOs6: '',
        jfwjcOs7: '',
        jfwjcOs8: '',
        jfwjcOs9: '',
        // 报告描述
        bgms: '',
        ygsSign: '',
        ysSign: '',
        riQi: ''
      },
      tableData: [
        {
          name: '基础信息',
          type: ''
        },
        {
          name: '屈光状态',
          OD: '',
          VA: '',
          type: ''
        }, {
          name: '屈光状态a',
          OS: '',
          VA: '',
          type: ''
        }, {
          name: 'CT+Prism',
          ct: '',
          type: ''
        }, {
          name: '同时视检查',
          type: ''
        }, {
          name: '检查画片',
          value: '',
          type: '1'
        }, {
          name: '主观斜视角',
          od: '',
          os: ''
        }, {
          name: '客观斜视角',
          od: '',
          os: ''
        }, {
          name: '融合功能检查'
        }, {
          name: '检查画片',
          value: '',
          type: '2'
        }, {
          name: '融合点',
          od: '',
          os: '',
          type: ''
        }, {
          name: 'Worth-4-dot',
          a: '',
          b: '',
          c: '',
          d: ''
        }, {
          name: '立体式检查',
          value: ''
        }, {
          name: 'TITMUS(近)',
          a: '',
          b: '',
          c: ''
        }, {
          name: '同视机九方位检查'
        }, {
          name: 'ODOS',
          a: '',
          b: '',
          c: '',
          d: '',
          e: '',
          f: '',
          g: '',
          h: '',
          i: '',
          j: '',
          k: '',
          l: '',
          m: '',
          n: '',
          o: '',
          p: '',
          q: '',
          r: ''
        }, {
          name: '报告描述',
          value: ''
        }, {
          name: '签名',
          a: '',
          b: '',
          c: ''
        }]
    }
  },
  watch: {
    caseId(val) {
      if (val) {
        this.getSysgnjc()
      }
    }
  },
  mounted() {
    this.getSysgnjc()
    this.getPatientData()
  },
  methods: {
    getSysgnjc() {
      this.$http.get('/sjsgnjc/getSysgnjc', { params: {
        caseId: this.caseId,
        patientId: this.patientId
      }}).then(data => {
        this.dataForm = data.data.data
        if (!this.dataForm.id) {
          this.setSign()
        }
      })
    },
    setSign() {
      const userData = JSON.parse(window.localStorage.getItem('qg-userData'))
      const date = this.$moment().format('YYYY-MM-DD')
      const mzName = window.localStorage.getItem('mzDoctorName')
      this.dataForm.ygsSign = userData.signImgBase
      this.dataForm.ysSign = mzName
      this.dataForm.riQi = date
    },
    async getPatientData() {
      const { data: res } = await this.$http.get(
        '/patient/view/getPatientData',
        {
          params: {
            patientId: this.patientId
          }
        }
      )
      if (res.code === 0) {
        this.dataForm.patientId = res.data.patientId
        this.dataForm.patientAge = res.data.patientAge
        this.dataForm.patientSex = res.data.patientSex
        this.dataForm.patientName = res.data.patientName
      } else {
        this.$message.error(res.msg)
      }
    },
    // 保存
    async handleSaveTable() {
      const data = JSON.parse(JSON.stringify(this.dataForm))
      const params = {
        caseId: this.caseId,
        ...data
      }
      const { data: res } = await this.$http.post('/sjsgnjc/savesjsgnjc', params)
      if (res.code === 0) {
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    handleDelete() {
      this.$emit('del')
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || rowIndex === 4 || rowIndex === 8 || rowIndex === 12 || rowIndex === 17 || rowIndex === 15 || rowIndex === 16 || rowIndex === 14) {
          return {
            rowspan: 1,
            colspan: 3
          }
        } else if (rowIndex === 1) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex === 2 || rowIndex === 4) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex === 1) {
        if (rowIndex === 3 || rowIndex === 5 || rowIndex === 9) {
          return {
            rowspan: 1,
            colspan: 2
          }
        } else if (rowIndex === 0 || rowIndex === 4 || rowIndex === 8 || rowIndex === 9 || rowIndex === 12 || rowIndex === 14 || rowIndex === 15 || rowIndex === 16 || rowIndex === 17) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex === 2 || columnIndex === 1) {
        if (rowIndex === 0 || rowIndex === 3 || rowIndex === 4 || rowIndex === 5 || rowIndex === 9 || rowIndex === 8 || rowIndex === 12 || rowIndex === 14 || rowIndex === 15 || rowIndex === 16 || rowIndex === 17) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
.flex{
  display: flex;
}
.j-c{
  justify-content: center;
}
#threeFunc{
  .el-input__inner {
    border: none;
    height: 26px !important;
    line-height: 26px !important;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    padding: 0;
  }
  .el-table__cell{
    padding: 7px 0 !important;
  }
}
.printBox {
  .btnBox{
    display: flex;
    justify-content: flex-end;
  }
  .operation-record-table {
    //width: 100%;
    width: 840px !important;
    padding-right: 8px;
    .Rline{
      position: absolute;
      left: 60px;
      top: 80px;
    }
    .Rline-os{
      position: absolute;
      right: 60px;
      top: 80px;
    }
    .Lline{
      position: absolute;
      left: 330px;
      top: 80px;
    }
    .Lline-os{
      position: absolute;
      right: 330px;
      top: 80px;
    }
    .rowLine{
      width: 200px;
      height: 50px;
      position: absolute;
      left: 100px;
      top: 70px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
    }
    .rowLine-l{
      width: 200px;
      height: 50px;
      position: absolute;
      right: 100px;
      top: 70px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
    }
    .cloLine{
      width: 60px;
      height: 160px;
      left: 170px;
      top: 20px;
      position: absolute;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
    }
    .cloLine-l{
      width: 60px;
      height: 160px;
      right: 170px;
      top: 20px;
      position: absolute;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
    }
    .ipt-a{
      width: 50px;
      left: 114px;
      top: 33px;
      position: absolute;
    }
    .ipt-b{
      width: 50px;
      left: 176px;
      top: 33px;
      position: absolute;
    }
    .ipt-c{
      width: 50px;
      left: 242px;
      top: 33px;
      position: absolute;
    }
    .ipt-d{
      width: 50px;
      left: 114px;
      top: 80px;
      position: absolute;
    }
    .ipt-e{
      width: 50px;
      left: 176px;
      top: 80px;
      position: absolute;
    }
    .ipt-f{
      width: 50px;
      left: 242px;
      top: 80px;
      position: absolute;
    }
    .ipt-g{
      width: 50px;
      left: 114px;
      top: 133px;
      position: absolute;
    }
    .ipt-h{
      width: 50px;
      left: 176px;
      top: 133px;
      position: absolute;
    }
    .ipt-j{
      width: 50px;
      left: 242px;
      top: 133px;
      position: absolute;
    }
    .iptos-a {
      width: 50px;
      right: 114px;
      top: 33px;
      position: absolute;
    }
    .iptos-b {
      width: 50px;
      right: 176px;
      top: 33px;
      position: absolute;
    }
    .iptos-c {
      width: 50px;
      right: 242px;
      top: 33px;
      position: absolute;
    }
    .iptos-d {
      width: 50px;
      right: 114px;
      top: 80px;
      position: absolute;
    }
    .iptos-e {
      width: 50px;
      right: 176px;
      top: 80px;
      position: absolute;
    }
    .iptos-f {
      width: 50px;
      right: 242px;
      top: 80px;
      position: absolute;
    }
    .iptos-g {
      width: 50px;
      right: 114px;
      top: 133px;
      position: absolute;
    }
    .iptos-h {
      width: 50px;
      right: 176px;
      top: 133px;
      position: absolute;
    }
    .iptos-j {
      width: 50px;
      right: 242px;
      top: 133px;
      position: absolute;
    }
    .operation-text {
      font-weight: 700;
    }
    .text {
      font-weight: 700;
    }
    .sign {
      cursor: pointer;
      color: #46a1ff;
      font-weight: 400;
    }
  }
  .center {
    text-align: center;
  }
  .left {
    text-align: left;
  }
  .width-50 {
    .el-input {
      width: 50px;
    }
  }
  .width-70 {
    .el-input {
      width: 70px;
    }
  }
  .width-100 {
    .el-input {
      width: 100px;
    }
  }
  .width-120 {
    .el-input {
      width: 120px;
    }
  }
  .width-180 {
    .el-input {
      width: 180px;
    }
  }
  .el-input__prefix {
    display: none;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: none !important;
  }
  .has-gutter {
    display: none;
    .cell {
      font-weight: 700;
    }
    .el-table__cell {
      background: #ced4d9;
    }
  }
  .el-table__header-wrapper{
    display: none;
  }
}
</style>