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

<template>
  <div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
    <div v-if="!onlyRead && isSearch == '3'" class="btnBox">
      <el-button v-print="'#eyesFunc'" size="small">打印</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="eyesFunc" style="width: 840px;padding-right: 8px" class="printBox">
      <p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;">
        双眼视功能检查报告单
      </p>
      <div style="display: flex;justify-content: space-around">
        <span>登记号：<el-input v-model="dataForm.number" style="width: 120px" size="small" clearable placeholder="" /></span>
        <span>姓名：<el-input v-model="dataForm.name" style="width: 120px" size="small" clearable placeholder="" /></span>
        <span>性别：<el-input v-model="dataForm.sex" style="width: 120px" size="small" clearable placeholder="" /></span>
        <span>年龄：<el-input v-model="dataForm.age" style="width: 120px" size="small" clearable placeholder="" /></span>
      </div>
      <div class="operation-record-table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == 1">
                <div class="width-180 center">
                  <el-input v-model="scope.row.os" placeholder="">
                    <template slot="prepend">OS:</template>
                  </el-input>
                </div>
              </div>
              <div v-else-if="scope.row.name == 'FV'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">远BO:</template>
                  </el-input>
                </div>
              </div>
              <div v-else-if="scope.row.name == '建议'">
                <div class="width-180" style="text-align: left">
                  <el-input v-model="scope.row.value" placeholder="" style="width: 640px">
                    <template slot="prepend">建议:</template>
                  </el-input>
                </div>
              </div>
              <div v-else-if="scope.row.name == '签名'" style="display: flex;justify-content: space-between">
                <div class="width-180" style="text-align: left">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">视光师:</template>
                  </el-input>
                </div>
                <div class="width-180" style="text-align: left">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">医师:</template>
                  </el-input>
                </div>
                <div class="width-180" style="text-align: left">
                  日期：<el-date-picker
                    v-model="scope.row.c"
                    type="date"
                    placeholder="选择日期"
                  />
                </div>
              </div>
              <p v-else>{{ scope.row.name }}</p>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false" prop="type">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '1'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.odVa" 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="scope.row.od" placeholder="">
                    <template slot="prepend">OD:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '交替遮盖试验(CT)'">
                <div class="width-180 center">
                  <p>
                    <el-input v-model="scope.row.a" placeholder="">
                      <template slot="prepend">远:</template>
                    </el-input>
                  </p>
                  <p>
                    <el-input v-model="scope.row.b" placeholder="">
                      <template slot="prepend">近:</template>
                    </el-input>
                  </p>
                </div>
              </div>
              <div v-if="scope.row.name == '集合近点(NPC)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">破裂点:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == 'Worth-4-dot'">
                <div class="width-180 center">
                  <!--                  <el-input v-model="scope.row.b" placeholder="">-->
                  <!--                    <template slot="prepend">近:</template>-->
                  <!--                  </el-input>-->
                  <el-input v-model="scope.row.a" placeholder="" />
                  @D(
                  <el-input v-model="scope.row.b" placeholder="" />
                  )
                </div>
              </div>
              <div v-if="scope.row.name == '立体视(stereo)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">RDD(远):</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '眼位'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">远:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '梯度性AC/A'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '融像性聚散(FV)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">远BI:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == 'FV'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">近BO:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '相对调节(RA)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.a" placeholder="">
                    <template slot="prepend">NRA:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '调节幅度(AMP)'">
                <div class="width-180 center">
                  <div>
                    <el-input v-model="scope.row.a" placeholder="">
                      <template slot="prepend">OD:</template>
                    </el-input>
                  </div>
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">OS:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '调节灵活度(AF)'">
                <div class="width-180 center">
                  <div>
                    <el-input v-model="scope.row.a" placeholder="">
                      <template slot="prepend">OD:</template>
                    </el-input>
                  </div>
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">OS:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '调节反应(FCC)'">
                <div class="width-180 center">
                  <div>
                    <el-input v-model="scope.row.a" placeholder="">
                      <template slot="prepend">OD:</template>
                    </el-input>
                  </div>
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">OS:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '初步诊断'">
                <div class="width-180">
                  <div style="margin-bottom: 8px">
                    <div class="check" style="margin-left: 0" @click="scope.row.value = !scope.row.value">
                      <input type="checkbox" :checked="scope.row.value">正常
                    </div>
                  </div>
                  <div v-if="scope.row.a.length" style="display: flex">
                    <div style="width: 220px;">聚散功能异常：</div>
                    <div style="display: flex;flex-wrap: wrap">
                      <div v-for="(item,index) in scope.row.a" :key="index" class="check" @click="item.isSelect = !item.isSelect">
                        <input type="checkbox" :checked="item.isSelect">
                        <div>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <div style="display: flex">
                    <p style="width: 140px;">调节功能异常：</p>
                    <div style="display: flex;flex-wrap: wrap">
                      <div v-for="(item,index) in scope.row.b" :key="index" class="check" @click="item.isSelect = !item.isSelect">
                        <input type="checkbox" :checked="item.isSelect">
                        <div>{{ item.name }}</div>
                      </div>
                    </div>
                    <!--                    <el-checkbox-group v-model="scope.row.b">-->
                    <!--                      <el-checkbox label="调节灵敏度下降" />-->
                    <!--                      <el-checkbox label="调节不能持久" />-->
                    <!--                      <el-checkbox label="调节不足" />-->
                    <!--                      <el-checkbox label="调节过度" />-->
                    <!--                      <el-checkbox label="调节麻痹" />-->
                    <!--                    </el-checkbox-group>-->
                  </div>
                  <div style="display: flex">
                    <span>斜视：</span>
                    <div style="display: flex;flex-wrap: wrap">
                      <div v-for="(item,index) in scope.row.c" :key="index" class="check" @click="item.isSelect = !item.isSelect">
                        <input type="checkbox" :checked="item.isSelect">
                        <div>{{ item.name }}</div>
                      </div>
                    </div>
                    <!--                    <el-checkbox-group v-model="scope.row.c">-->
                    <!--                      <el-checkbox label="内斜视" />-->
                    <!--                      <el-checkbox label="外斜视" />-->
                    <!--                      <el-checkbox label="间歇性外斜视" />-->
                    <!--                      <el-checkbox label="垂直斜" />-->
                    <!--                    </el-checkbox-group>-->
                  </div>
                </div>
              </div>
              <!--            &lt;!&ndash; 签字 &ndash;&gt;-->
              <!--            <div v-if="scope.row" class="sign center">-->
              <!--              &lt;!&ndash;              <span v-if="!operationRecord.doctorSignImg" class="sign" @click="singHandle('doctorSignImg')">点击签字</span>&ndash;&gt;-->
              <!--              &lt;!&ndash;              <img v-if="operationRecord.doctorSignImg" :src="operationRecord.doctorSignImg" alt="" width="90px" @click="singHandle('doctorSignImg')">&ndash;&gt;-->
              <!--            </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="scope.row.osVa" placeholder="">
                    <template slot="prepend">VA:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '交替遮盖试验(CT)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.c" placeholder="">
                    <template slot="prepend">眼球运动:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '集合近点(NPC)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">恢复点:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '立体视(stereo)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">TNO(近):</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '眼位'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">近:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '梯度性AC/A'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">计算性AC/A:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '融像性聚散(FV)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">近BI:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '相对调节(RA)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.b" placeholder="">
                    <template slot="prepend">PRA:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '调节幅度(AMP)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.c" placeholder="">
                    <template slot="prepend">OU:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '调节灵活度(AF)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.c" placeholder="">
                    <template slot="prepend">OU:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '调节反应(FCC)'">
                <div class="width-180 center">
                  <el-input v-model="scope.row.c" placeholder="">
                    <template slot="prepend">OU:</template>
                  </el-input>
                </div>
              </div>
              <!--            &lt;!&ndash; 签字 &ndash;&gt;-->
              <!--            <div v-if="scope.row" class="sign center">-->
              <!--              &lt;!&ndash;              <span v-if="!operationRecord.doctorSignImg" class="sign" @click="singHandle('doctorSignImg')">点击签字</span>&ndash;&gt;-->
              <!--              &lt;!&ndash;              <img v-if="operationRecord.doctorSignImg" :src="operationRecord.doctorSignImg" alt="" width="90px" @click="singHandle('doctorSignImg')">&ndash;&gt;-->
              <!--            </div>-->
            </template>
          </el-table-column>
          <!--        <el-table-column label="手术记录" :resizable="false">-->
          <!--          <template slot-scope="scope">-->
          <!--            <span v-if="scope.row.name !=='手术日期/主刀签字'">-->
          <!--&lt;!&ndash;              <span v-if="!operationRecord.nurseSignImgOne" class="sign" @click="singHandle('nurseSignImgOne')">点击签字</span>&ndash;&gt;-->
          <!--&lt;!&ndash;              <img v-if="operationRecord.nurseSignImgOne" :src="operationRecord.nurseSignImgOne" alt="" width="90px" @click="singHandle('nurseSignImgOne')">&ndash;&gt;-->
          <!--            </span>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isSearch: {
      type: String,
      default: ''
    },
    formContent: {
      type: Object,
      default: () => { }
    },
    onlyRead: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataForm: {
        number: '',
        name: '',
        sex: '',
        age: ''
      },
      originTableData: [],
      tableData: [
        {
          name: '屈光状态',
          osVa: '',
          od: '',
          type: ''
        }, {
          name: '1',
          odVa: '',
          os: '',
          type: ''
        }, {
          name: '交替遮盖试验(CT)',
          a: '',
          b: '',
          type: ''
        }, {
          name: '集合近点(NPC)',
          a: '',
          b: '',
          type: ''
        }, {
          name: 'Worth-4-dot',
          a: '',
          b: '',
          type: ''
        }, {
          name: '立体视(stereo)',
          a: '',
          b: ''
        }, {
          name: '眼位',
          a: '',
          b: ''
        }, {
          name: '梯度性AC/A',
          a: '',
          b: ''
        }, {
          name: '融像性聚散(FV)',
          a: '',
          b: ''
        }, {
          name: 'FV',
          a: '',
          b: '',
          type: ''
        }, {
          name: '相对调节(RA)',
          a: '',
          b: ''
        }, {
          name: '调节幅度(AMP)',
          a: '',
          b: '',
          c: ''
        }, {
          name: '调节灵活度(AF)',
          a: '',
          b: '',
          c: ''
        }, {
          name: '调节反应(FCC)',
          a: '',
          b: '',
          c: ''
        }, {
          name: '初步诊断',
          value: false,
          a: [
            {
              name: '集合不足',
              isSelect: false
            }, {
              name: '集合过度',
              isSelect: false
            }, {
              name: '散开不足',
              isSelect: false
            }, {
              name: '散开过度',
              isSelect: false
            }, {
              name: '内隐科',
              isSelect: false
            }, {
              name: '外隐科',
              isSelect: false
            }, {
              name: '假性集合不足',
              isSelect: false
            }, {
              name: '融像性聚散功能异常',
              isSelect: false
            }
          ],
          b: [
            {
              name: '调节灵敏度下降',
              isSelect: false
            }, {
              name: '调节不能持久',
              isSelect: false
            }, {
              name: '调节不足',
              isSelect: false
            }, {
              name: '调节过度',
              isSelect: false
            }, {
              name: '调节麻痹',
              isSelect: false
            }
          ],
          c: [
            {
              name: '内斜视',
              isSelect: false
            }, {
              name: '外斜视',
              isSelect: false
            }, {
              name: '间歇性外斜视',
              isSelect: false
            }, {
              name: '垂直斜',
              isSelect: false
            }
          ]
        }, {
          name: '建议',
          value: ''
        }, {
          name: '签名',
          a: '',
          b: '',
          c: ''
        }]
    }
  },
  computed: {
    operationRecord: {
      get() {
        return this.$store.getters.operationRecord
      }
    }
  },
  watch: {
    operationRecord: {
      handler(value) {
        console.log(value)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.originTableData = JSON.parse(JSON.stringify(this.tableData))
  },
  methods: {
    setData() {
      this.dataForm = this.formContent.a
      this.tableData = this.formContent.b
    },
    reSet() {
      this.dataForm = {
        number: '',
        name: '',
        sex: '',
        age: '',
        file: '',
        fileNUm: ''
      }
      this.tableData = this.originTableData
    },
    handleSaveTable() {
      const data = {
        a: this.dataForm,
        b: this.tableData
      }
      this.$emit('save', data)
    },
    handleDelete() {
      this.$emit('del')
    },
    //   签名
    singHandle(text) {
      const value = {
        text: text,
        pageName: 'operationRecord'
      }
      this.$store.commit('beginSign', value)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || rowIndex === 8) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else if (rowIndex === 15 || rowIndex === 16) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
      } else if (rowIndex === 4) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      } else if (rowIndex === 14) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
.check {
  cursor: pointer;
  user-select: none;
  display: flex;
  margin-left: 15px;
  input{
    -webkit-appearance: checkbox !important;
    margin-right: 5px !important;
  }
}
.printBox{
  .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 tr{
    page-break-inside: avoid;
  }
}
#operation-record {
  height: 100%;
   overflow: auto;
  .operation-record-table {
    width: 100%;
    .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-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 140px;
  }
  .el-input__suffix {
    top: -7px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #767676;
    border-color: #767676;
  }
  .el-checkbox__inner:hover,
  .el-checkbox__inner {
    border-color: #767676;
  }
  //.el-radio__input.is-checked + .el-radio__label {
  //  color: #606266;
  //}
  //.el-radio__input.is-checked .el-radio__inner {
  //  background: #767676;
  //  border-color: #767676;
  //}
  //.el-radio {
  //  margin-right: 8px;
  //  display: block;
  //}
  //.el-radio__inner {
  //  border: 1px solid #767676 !important;
  //}
  //.el-radio__inner:hover {
  //  border-color: #767676;
  //}
  //.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--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  //   border-right: 1px solid #808080;
  // }
  // .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  //   border-bottom: 1px solid #808080 !important;
  // }
  // .el-table--border, .el-table--group {
  //   border: 1px solid #808080;
  // }
  // .el-table--border {
  //   border-bottom: 0;
  // }
}
</style>