新增两个表单，图片编辑器bug修复

src/components/360View/medicalRecord/index.vue

@@ -97,6 +97,30 @@
             @handleSaveTable="updateForm"
             @formDelete="formDelete"
           />
+          <three-mirror
+            v-if="name==='三面镜检查结果记录'"
+            ref="threeMirror"
+            :only-read="onlyRead"
+            :is-platform="isPlatform"
+            :patient-detail="patientData"
+            :case-id="id"
+            :is-creator="isCreator"
+            :creator="creator"
+            @handleSaveTable="updateForm"
+            @formDelete="formDelete"
+          />
+          <gonioscope
+            v-if="name==='房角镜检查结果记录'"
+            ref="gonioscope"
+            :only-read="onlyRead"
+            :is-platform="isPlatform"
+            :patient-detail="patientData"
+            :case-id="id"
+            :is-creator="isCreator"
+            :creator="creator"
+            @handleSaveTable="updateForm"
+            @formDelete="formDelete"
+          />
           <minor-operation
             v-if="name==='干眼手术知情同意书'"
             ref="minorOperation"
@@ -236,8 +260,12 @@ import Lacrimal from '@/page-subspecialty/views/modules/formList/Lacrimal.vue'
 import StyeForm from '@/page-subspecialty/views/modules/formList/StyeForm.vue'
 import InjectionTherapy from '@/page-subspecialty/views/modules/formList/InjectionTherapy.vue'
 import DrugInjection from '@/page-subspecialty/views/modules/formList/DrugInjection.vue'
+import ThreeMirror from '@/page-subspecialty/views/modules/formList/threeMirror.vue'
+import Gonioscope from '@/page-subspecialty/views/modules/formList/gonioscope.vue'
 export default {
   components: {
+    Gonioscope,
+    ThreeMirror,
     DrugInjection,
     InjectionTherapy,
     StyeForm,
@@ -363,12 +391,15 @@ export default {
               case '眼科激光手术治疗':
                 this.$refs.laserSurgery && this.$refs.laserSurgery.handleSaveTable()
                 break
+              case '三面镜检查结果记录':
+                this.$refs.threeMirror && this.$refs.threeMirror.handleSaveTable()
+                break
               default:
                 this.$refs.ourPatient && this.$refs.ourPatient.handleSaveTable()
                 return
             }
           })
-        })
+        }).catch(() => {})
     },
     getPatientData() {
       const params = {
@@ -454,6 +485,9 @@ export default {
           case '眼科激光手术治疗':
             this.$refs.laserSurgery.formDelete()
             break
+          case '三面镜检查结果记录':
+            this.$refs.threeMirror.formDelete()
+            break
           case '干眼激光治疗知情同意书':
             this.$refs.conjunctival.formDelete()
             break

src/components/360View/medicalRecord/outPatientRecord/leftFormList.vue

@@ -57,7 +57,7 @@ export default {
       formTypeList: [
         {
           type: '治疗',
-          list: ['眼科激光手术患者知情同意书', '眼科激光手术治疗', '眼底血管造影知情同意书', '眼底血管造影患者预约单']
+          list: ['眼科激光手术患者知情同意书', '眼科激光手术治疗', '眼底血管造影知情同意书', '眼底血管造影患者预约单', '三面镜检查结果记录', '房角镜检查结果记录']
         },
         {
           type: '同意书',

src/page-subspecialty/views/modules/formList/gonioscope.vue

@@ -0,0 +1,514 @@
+<template>
+  <div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
+    <div class="btnBox_top">
+      <div v-if="!onlyRead && isPlatform">
+        <el-button v-print="print" size="small" @click="handlePrint">打印</el-button>
+        <template v-if="isCreator">
+          <el-button type="primary" size="small" @click="handleSaveTable">保存</el-button>
+          <el-button type="danger" size="small" @click="formDelete">删除</el-button>
+        </template>
+      </div>
+      <div style="margin: 10px 0;text-align: left;color: #409EFF">
+        <div>
+          操作者：{{ creator.doctorName }}
+        </div>
+        <div>
+          工号：{{ creator.doctorCode }}
+        </div>
+      </div>
+    </div>
+    <div id="threeMirror" style="width: 840px;padding-right: 8px;text-align: left;line-height: 28px">
+      <div v-if="!isDev" class="flex j-c">
+        <img width="450" src="@/assets/img/xianganlogo.png">
+      </div>
+      <hr v-if="!isDev">
+      <p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;">
+        房角镜检查结果记录
+      </p>
+      <!--患者信息-->
+      <div class="flex">
+        <div class="flex a-c item">姓名：<el-input v-model="confirmData.patientName" style="flex: 1" placeholder="" /></div>
+        <div class="flex a-c item">登记号：<el-input v-model="confirmData.patientId" style="flex: 1" placeholder="" /></div>
+        <div class="flex a-c item">性别：<el-input v-model="confirmData.patientGender" style="flex: 1" placeholder="" /></div>
+        <div class="flex a-c item">年龄：<el-input v-model="confirmData.patientAge" style="flex: 1" placeholder="" /></div>
+      </div>
+      <!--术前判断-->
+      <div>
+        <table>
+          <tr>
+            <td rowspan="5">
+              眼底情况
+            </td>
+            <td>右眼</td>
+            <td>左眼</td>
+          </tr>
+          <tr>
+            <td>眼压： mmHg（NCT）</td>
+            <td>眼压： mmHg（NCT）</td>
+          </tr>
+          <tr>
+            <td>
+              <div style="padding: 10px 0" @click="editImg('fjOD')">
+                <img v-if="confirmData.qfjqkOd" class="img_show" :src="confirmData.qfjqkOd">
+              </div>
+            </td>
+            <td>
+              <div style="padding: 10px 0" @click="editImg('fjOS')">
+                <img v-if="confirmData.qfjqkOs" class="img_show" :src="confirmData.qfjqkOs">
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div style="padding: 5px">
+                <div class="flex" style="text-align: left">
+                  异常：
+                  <el-checkbox-group v-model="checkListOd" style="flex:1">
+                    <el-checkbox label="无" />
+                    <el-checkbox label="新生血管" />
+                    <el-checkbox label="色素" />
+                    <el-checkbox label="硅油小滴" />
+                    <el-checkbox label="其他">
+                      其他：
+                      <el-select v-model="confirmData.ycqtOd" style="width: 120px" placeholder="" clearable filterable allow-create>
+                        <el-option
+                          v-for="item in other"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+              </div>
+            </td>
+            <td>
+              <div style="padding: 5px">
+                <div class="flex" style="text-align: left">
+                  异常：
+                  <el-checkbox-group v-model="checkListOs" style="flex:1">
+                    <el-checkbox label="无" />
+                    <el-checkbox label="新生血管" />
+                    <el-checkbox label="色素" />
+                    <el-checkbox label="硅油小滴" />
+                    <el-checkbox label="其他">
+                      其他：
+                      <el-select v-model="confirmData.ycqtOs" style="width: 120px" placeholder="" clearable filterable allow-create>
+                        <el-option
+                          v-for="item in other"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div>
+                房角分类：
+                <el-select v-model="confirmData.fjflOd" style="width: 120px" placeholder="" clearable filterable allow-create>
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>(
+                <el-select v-model="confirmData.fjflOd2" style="width: 120px" placeholder="" clearable filterable allow-create>
+                  <el-option
+                    v-for="item in options2"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>)
+              </div>
+            </td>
+            <td>
+              <div>
+                房角分类：
+                <el-select v-model="confirmData.fjflOs" style="width: 120px" placeholder="" clearable filterable allow-create>
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>(
+                <el-select v-model="confirmData.fjflOs2" style="width: 120px" placeholder="" clearable filterable allow-create>
+                  <el-option
+                    v-for="item in options2"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>)
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div class="flex j-c" style="margin: 30px 0">
+        Scheie房角静态分级参考
+      </div>
+      <div class="flex j-c">
+        <img class="img2_show" src="@/assets/img/fundus.png">
+      </div>
+      <div class="flex flex-end a-c" style="margin-top: 10px">
+        <span>操作者:</span>
+        <img
+          v-if="confirmData.checker"
+          :src="confirmData.checker"
+          alt=""
+          style="width: 80px;height: 50px;border-style:none;"
+        >
+        <span style="margin-left: 80px">日期:</span>
+        <el-date-picker
+          v-model="confirmData.jlDate"
+          style="width: 120px"
+          type="date"
+          value-format="yyyy-MM-dd"
+        />
+      </div>
+    </div>
+    <img-editor v-if="editorShow" ref="imgEditorRef" :is-od-or-os="this.eyeType" @closeDialog="closeDialog" @fullImgBack="fullImgBack" />
+  </div>
+</template>
+
+<script>
+import ImgEditor from '@/components/360View/img-editor.vue'
+
+export default {
+  name: 'Gonioscope',
+  components: { ImgEditor },
+  props: {
+    isDev: {
+      type: Boolean
+    },
+    onlyRead: {
+      type: Boolean,
+      default: false
+    },
+    isPlatform: {
+      type: Boolean,
+      default: true
+    },
+    patientDetail: {
+      type: Object
+    },
+    caseId: {
+      type: String,
+      default: ''
+    },
+    isCreator: {
+      type: Boolean,
+      default: true
+    },
+    // 操作者
+    creator: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      printHidden: true,
+      print: {
+        id: 'threeMirror',
+        closeCallback: () => {
+          this.printHidden = true
+        }
+      },
+      other: [
+        {
+          value: 'Schlemm管充血',
+          label: 'Schlemm管充血'
+        }, {
+          value: '小梁网出血',
+          label: '小梁网出血'
+        }, {
+          value: '房角后退',
+          label: '房角后退'
+        }, {
+          value: '睫状体分离',
+          label: '睫状体分离'
+        }, {
+          value: '梳状韧带',
+          label: '梳状韧带'
+        }, {
+          value: '后胚胎环',
+          label: '后胚胎环'
+        }, {
+          value: '虹膜附止高位',
+          label: '虹膜附止高位'
+        }
+      ],
+      options: [
+        {
+          value: 'W',
+          label: 'W'
+        }, {
+          value: 'N1',
+          label: 'N1'
+        }, {
+          value: 'N2',
+          label: 'N2'
+        }, {
+          value: 'N3',
+          label: 'N3'
+        }, {
+          value: 'N4',
+          label: 'N4'
+        }
+      ],
+      options2: [
+        {
+          value: '开放',
+          label: '开放'
+        }, {
+          value: '不规则前粘连',
+          label: '不规则前粘连'
+        }, {
+          value: '＜1/2粘连',
+          label: '＜1/2粘连'
+        }, {
+          value: '＞1/2粘连',
+          label: '＞1/2粘连'
+        }
+      ],
+      eyeType: '',
+      editorShow: false,
+      confirmData: {
+        patientAge: '',
+        patientDate: '',
+        patientGender: '',
+        patientName: '',
+        patientId: '',
+        ycOd: '', // 异常
+        ycOs: '',
+        ycqtOd: '', // 异常其他
+        ycqtOs: '',
+        fjflOd: '', // 房角分类
+        fjflOd2: '',
+        fjflOs: '',
+        fjflOs2: '',
+        checker: '',
+        jlDate: '',
+        qfjqkOd: '', // 前房角情况右眼图片
+        qfjqkOs: ''
+      },
+      checkListOd: [],
+      checkListOs: [],
+      checkList2Od: [],
+      checkList2Os: [],
+      caseList: [
+        'A:圆形裂孔',
+        'B:有盖的裂孔',
+        'C:有瓣膜的裂孔（马蹄形裂孔）',
+        'D:伴有向后卷边的瓣膜裂孔',
+        'E:固定皱褶',
+        'F:锯齿缘断离',
+        'G:视网膜出血',
+        'H:视网膜色素沉着',
+        'I:分界线',
+        'J:铺路石变性',
+        'K:周边部囊状变性',
+        'L:老年性视网膜劈裂',
+        'M:视网膜动脉旁的渗出物',
+        'N:被冷冻癜痕围绕的马蹄裂孔'
+      ],
+      caseRight: [
+        'O:玻璃体浑浊（需加文字说明）',
+        'P:被电凝癜痕围绕的环形扣压瘠上的两个圆孔，其上方为视网膜再脱离',
+        'Q:睫状体平坦部的无色素上皮脱离',
+        'R:脉络膜肿块（需加文字说明）',
+        'S:被电凝癜痕围绕的放射状巩膜扣压瘠上的马蹄形裂孔',
+        'T:网格样变性',
+        'U:伴有萎缩性圆形裂孔的网格样变性',
+        'V:涡静脉壶腹',
+        'W:放射状视网膜皱褶',
+        'X:视网膜前出血',
+        'Y:视网膜变薄区'
+      ]
+    }
+  },
+  watch: {
+    caseId(val) {
+      if (val) {
+        this.getInfoDetail()
+      }
+    }
+  },
+  created() {
+    this.getInfoDetail()
+  },
+  methods: {
+    editImg(eyeType) {
+      this.eyeType = eyeType
+      this.editorShow = true
+      this.$nextTick(() => {
+        this.$refs.imgEditorRef.init()
+      })
+    },
+    closeDialog() {
+      this.editorShow = false
+    },
+    fullImgBack(val) {
+      if (!val) return
+      if (this.eyeType === 'fjOD') {
+        this.confirmData.qfjqkOd = val
+      } else {
+        this.confirmData.qfjqkOs = val
+      }
+    },
+    getInfoDetail() {
+      this.$http.get('/jcjg/getFjjjcjg', { params: {
+        caseId: this.caseId,
+        patientId: this.patientDetail.patientId
+      }}).then(data => {
+        const detail = data.data.data
+        this.confirmData = detail
+        this.handleCheck()
+        if (!detail.jzNumber) {
+          this.setData()
+        }
+      })
+    },
+    setData() {
+      const date = this.$moment().format('YYYY-MM-DD')
+      this.confirmData.jlDate = date
+      const userData = JSON.parse(window.sessionStorage.getItem('qg-userData'))
+      this.confirmData.checker = userData.signImgBase
+      this.confirmData.patientName = this.patientDetail.patientName
+      this.confirmData.patientAge = this.patientDetail.patientAge
+      this.confirmData.patientGender = this.patientDetail.patientSex
+      this.confirmData.patientId = this.patientDetail.patientId
+
+      this.confirmData.qfjqkOd = require('@/assets/img/ill.png')
+      this.confirmData.qfjqkOs = require('@/assets/img/ill.png')
+    },
+    handlePrint() {
+      this.printHidden = false
+      if (!this.isCreator) {
+        return
+      }
+      this.handleSaveTable()
+    },
+    handleCheck() {
+      this.checkListOd = this.confirmData.ycOd ? this.confirmData.ycOd.split('/') : []
+      this.checkListOs = this.confirmData.ycOs ? this.confirmData.ycOs.split('/') : []
+    },
+    hanldeSaveCheck() {
+      this.confirmData.ycOd = this.checkListOd.join('/')
+      this.confirmData.ycOs = this.checkListOs.join('/')
+    },
+    // 保存
+    handleSaveTable() {
+      this.hanldeSaveCheck()
+      this.confirmData.jzNumber = window.sessionStorage.getItem('jzNumber')
+      this.$http.post('/jcjg/saveFjjjcjg', {
+        ...this.confirmData,
+        caseId: this.caseId
+      }).then(() => {
+        this.$emit('handleSaveTable')
+      })
+    },
+    // 删除
+    formDelete() {
+      this.$confirmFun('确定删除吗?').then(() => {
+        this.$http.post('/jcjg/delFjjjcjg', {
+          id: this.caseId
+        }).then(() => {
+          this.$message.success('删除成功')
+          this.$emit('formDelete', 'del')
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#operation-record{
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+}
+::v-deep .el-icon-arrow-up{
+  display: none;
+}
+.flex{
+  display: flex;
+}
+.a-c{
+  align-items: center;
+}
+.j-c{
+  justify-content: center;
+}
+.flex-end{
+  justify-content: flex-end;
+}
+.caseItem{
+  width: 200px;
+  padding-right: 10px;
+}
+.caseDetail{
+  padding: 0 20px;
+  display: flex;
+  font-size: 14px;
+  line-height: 24px;
+}
+.item{
+  &:not(:last-child){
+    margin-right: 15px;
+  }
+}
+tr td{
+  border: 1px solid #000;
+  text-align: center;
+}
+table{
+  width: 100%;
+}
+.img_show{
+  height: 240px;
+}
+.img2_show{
+  width: 450px;
+  height: 300px;
+}
+.btnBox_top{
+  position: fixed;
+  z-index: 999;
+  right: 90px;
+}
+::v-deep .el-input__inner {
+  border: none;
+  height: 26px !important;
+  line-height: 26px !important;
+  font-size: 16px;
+  text-align: center;
+}
+
+::v-deep .el-input__inner {
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+  padding: 0;
+}
+::v-deep .el-input__prefix {
+  display: none;
+}
+::v-deep .el-checkbox__label{
+  font-size: 16px;
+  color: #000;
+}
+::v-deep .el-checkbox{
+  margin-right: 15px;
+}
+</style>

src/page-subspecialty/views/modules/formList/threeMirror.vue

@@ -0,0 +1,438 @@
+<template>
+  <div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
+    <div class="btnBox_top">
+      <div v-if="!onlyRead && isPlatform">
+        <el-button v-print="print" size="small" @click="handlePrint">打印</el-button>
+        <template v-if="isCreator">
+          <el-button type="primary" size="small" @click="handleSaveTable">保存</el-button>
+          <el-button type="danger" size="small" @click="formDelete">删除</el-button>
+        </template>
+      </div>
+      <div style="margin: 10px 0;text-align: left;color: #409EFF">
+        <div>
+          操作者：{{ creator.doctorName }}
+        </div>
+        <div>
+          工号：{{ creator.doctorCode }}
+        </div>
+      </div>
+    </div>
+    <div id="threeMirror" style="width: 840px;padding-right: 8px;text-align: left;line-height: 28px">
+      <div v-if="!isDev" class="flex j-c">
+        <img width="450" src="@/assets/img/xianganlogo.png">
+      </div>
+      <hr v-if="!isDev">
+      <p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;">
+        三面镜检查结果记录
+      </p>
+      <!--患者信息-->
+      <div class="flex">
+        <div class="flex a-c item">姓名：<el-input v-model="confirmData.patientName" style="flex: 1" placeholder="" /></div>
+        <div class="flex a-c item">登记号：<el-input v-model="confirmData.patientId" style="flex: 1" placeholder="" /></div>
+        <div class="flex a-c item">性别：<el-input v-model="confirmData.patientGender" style="flex: 1" placeholder="" /></div>
+        <div class="flex a-c item">年龄：<el-input v-model="confirmData.patientAge" style="flex: 1" placeholder="" /></div>
+      </div>
+      <!--术前判断-->
+      <div>
+        <table>
+          <tr>
+            <td rowspan="3">
+              眼底情况
+            </td>
+            <td>右眼</td>
+            <td>左眼</td>
+          </tr>
+          <tr>
+            <td>
+              <div style="padding: 10px 0" @click="editImg('OD')">
+                <img v-if="confirmData.ydqkOd" class="img_show" :src="confirmData.ydqkOd">
+              </div>
+            </td>
+            <td>
+              <div style="padding: 10px 0" @click="editImg('OS')">
+                <img v-if="confirmData.ydqkOs" class="img_show" :src="confirmData.ydqkOs">
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <div style="padding: 5px">
+                <div class="flex" style="text-align: left">
+                  变性：
+                  <el-checkbox-group v-model="checkListOd" style="flex:1">
+                    <el-checkbox label="非压迫白/黑" />
+                    <el-checkbox label="霜样" />
+                    <el-checkbox label="铺路石样" />
+                    <el-checkbox label="囊样" />
+                    <el-checkbox label="视网膜劈裂" />
+                    <el-checkbox label="格子样" />
+                    <el-checkbox label="蜗牛迹样" />
+                    <el-checkbox label="其它" />
+                  </el-checkbox-group>
+                </div>
+                <div class="flex" style="text-align: left">
+                  裂孔：
+                  <el-checkbox-group v-model="checkList2Od" style="flex:1">
+                    <el-checkbox label="萎缩" />
+                    <el-checkbox label="伴牵拉" />
+                    <el-checkbox label="伴脱离" />
+                  </el-checkbox-group>
+                </div>
+                <div style="text-align: left">
+                  其它病灶及异常记录:
+                  <div>
+                    <el-input v-model="confirmData.qtbzjycjlOd" type="textarea" :autosize="{minRows: 3, maxRows: 3}" />
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td>
+              <div style="padding: 5px">
+                <div class="flex" style="text-align: left">
+                  变性：
+                  <el-checkbox-group v-model="checkListOs" style="flex:1">
+                    <el-checkbox label="非压迫白/黑" />
+                    <el-checkbox label="霜样" />
+                    <el-checkbox label="铺路石样" />
+                    <el-checkbox label="囊样" />
+                    <el-checkbox label="视网膜劈裂" />
+                    <el-checkbox label="格子样" />
+                    <el-checkbox label="蜗牛迹样" />
+                    <el-checkbox label="其它" />
+                  </el-checkbox-group>
+                </div>
+                <div class="flex" style="text-align: left">
+                  裂孔：
+                  <el-checkbox-group v-model="checkList2Os" style="flex:1">
+                    <el-checkbox label="萎缩" />
+                    <el-checkbox label="伴牵拉" />
+                    <el-checkbox label="伴脱离" />
+                  </el-checkbox-group>
+                </div>
+                <div style="text-align: left">
+                  其它病灶及异常记录:
+                  <div>
+                    <el-input v-model="confirmData.qtbzjycjlOs" type="textarea" :autosize="{minRows: 3, maxRows: 3}" />
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div class="flex j-c" style="margin: 10px 0">
+        眼底异常绘图参
+      </div>
+      <div class="flex">
+        <img class="img2_show" src="@/assets/img/threeCheck.png">
+        <div class="caseDetail">
+          <div>
+            <div v-for="(item,index) in caseList" :key="index" class="caseItem">
+              {{ item }}
+            </div>
+          </div>
+          <div>
+            <div v-for="(item,index) in caseRight" :key="`${index}_`" class="caseItem">
+              {{ item }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-end a-c" style="margin-top: 10px">
+        <span>操作者:</span>
+        <img
+          v-if="confirmData.checker"
+          :src="confirmData.checker"
+          alt=""
+          style="width: 80px;height: 50px;border-style:none;"
+        >
+        <span style="margin-left: 80px">日期:</span>
+        <el-date-picker
+          v-model="confirmData.jlDate"
+          style="width: 120px"
+          type="date"
+          value-format="yyyy-MM-dd"
+        />
+      </div>
+    </div>
+    <img-editor v-if="editorShow" ref="imgEditorRef" :is-od-or-os="this.eyeType" @closeDialog="closeDialog" @fullImgBack="fullImgBack" />
+  </div>
+</template>
+
+<script>
+import ImgEditor from '@/components/360View/img-editor.vue'
+
+export default {
+  name: 'ThreeMirror',
+  components: { ImgEditor },
+  props: {
+    isDev: {
+      type: Boolean
+    },
+    onlyRead: {
+      type: Boolean,
+      default: false
+    },
+    isPlatform: {
+      type: Boolean,
+      default: true
+    },
+    patientDetail: {
+      type: Object
+    },
+    caseId: {
+      type: String,
+      default: ''
+    },
+    isCreator: {
+      type: Boolean,
+      default: true
+    },
+    // 操作者
+    creator: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      printHidden: true,
+      print: {
+        id: 'threeMirror',
+        closeCallback: () => {
+          this.printHidden = true
+        }
+      },
+      eyeType: '',
+      editorShow: false,
+      confirmData: {
+        patientAge: '',
+        patientDate: '',
+        patientGender: '',
+        patientName: '',
+        patientId: '',
+        bxOd: '', // 变性
+        bxOs: '',
+        checker: '',
+        jlDate: '',
+        lkOd: '', // 裂孔
+        lkOs: '',
+        qtbzjycjlOd: '', // 其他病灶及异常记录
+        qtbzjycjlOs: '',
+        ydqkOd: '', // 眼底情况右眼照片
+        ydqkOs: ''
+      },
+      checkListOd: [],
+      checkListOs: [],
+      checkList2Od: [],
+      checkList2Os: [],
+      caseList: [
+        'A:圆形裂孔',
+        'B:有盖的裂孔',
+        'C:有瓣膜的裂孔（马蹄形裂孔）',
+        'D:伴有向后卷边的瓣膜裂孔',
+        'E:固定皱褶',
+        'F:锯齿缘断离',
+        'G:视网膜出血',
+        'H:视网膜色素沉着',
+        'I:分界线',
+        'J:铺路石变性',
+        'K:周边部囊状变性',
+        'L:老年性视网膜劈裂',
+        'M:视网膜动脉旁的渗出物',
+        'N:被冷冻癜痕围绕的马蹄裂孔'
+      ],
+      caseRight: [
+        'O:玻璃体浑浊（需加文字说明）',
+        'P:被电凝癜痕围绕的环形扣压瘠上的两个圆孔，其上方为视网膜再脱离',
+        'Q:睫状体平坦部的无色素上皮脱离',
+        'R:脉络膜肿块（需加文字说明）',
+        'S:被电凝癜痕围绕的放射状巩膜扣压瘠上的马蹄形裂孔',
+        'T:网格样变性',
+        'U:伴有萎缩性圆形裂孔的网格样变性',
+        'V:涡静脉壶腹',
+        'W:放射状视网膜皱褶',
+        'X:视网膜前出血',
+        'Y:视网膜变薄区'
+      ]
+    }
+  },
+  watch: {
+    caseId(val) {
+      if (val) {
+        this.getInfoDetail()
+      }
+    }
+  },
+  created() {
+    this.getInfoDetail()
+  },
+  methods: {
+    editImg(eyeType) {
+      this.eyeType = eyeType
+      this.editorShow = true
+      this.$nextTick(() => {
+        this.$refs.imgEditorRef.init()
+      })
+    },
+    closeDialog() {
+      this.editorShow = false
+    },
+    fullImgBack(val) {
+      if (!val) return
+      if (this.eyeType === 'OD') {
+        this.confirmData.ydqkOd = val
+      } else {
+        this.confirmData.ydqkOs = val
+      }
+    },
+    getInfoDetail() {
+      this.$http.get('/jcjg/getSmjjcjg', { params: {
+        caseId: this.caseId,
+        patientId: this.patientDetail.patientId
+      }}).then(data => {
+        const detail = data.data.data
+        this.confirmData = detail
+        this.handleCheck()
+        if (!detail.jzNumber) {
+          this.setData()
+        }
+      })
+    },
+    setData() {
+      const date = this.$moment().format('YYYY-MM-DD')
+      this.confirmData.jlDate = date
+      const userData = JSON.parse(window.sessionStorage.getItem('qg-userData'))
+      this.confirmData.checker = userData.signImgBase
+      this.confirmData.patientName = this.patientDetail.patientName
+      this.confirmData.patientAge = this.patientDetail.patientAge
+      this.confirmData.patientGender = this.patientDetail.patientSex
+      this.confirmData.patientId = this.patientDetail.patientId
+
+      this.confirmData.ydqkOd = require('@/assets/img/od.png')
+      this.confirmData.ydqkOs = require('@/assets/img/os.png')
+    },
+    handlePrint() {
+      this.printHidden = false
+      if (!this.isCreator) {
+        return
+      }
+      this.handleSaveTable()
+    },
+    handleCheck() {
+      this.checkListOd = this.confirmData.bxOd ? this.confirmData.bxOd.split('/') : []
+      this.checkListOs = this.confirmData.bxOs ? this.confirmData.bxOs.split('/') : []
+      this.checkList2Od = this.confirmData.lkOd ? this.confirmData.lkOd.split('/') : []
+      this.checkList2Os = this.confirmData.lkOs ? this.confirmData.lkOs.split('/') : []
+    },
+    hanldeSaveCheck() {
+      this.confirmData.bxOd = this.checkListOd.join('/')
+      this.confirmData.bxOs = this.checkListOs.join('/')
+      this.confirmData.lkOd = this.checkList2Od.join('/')
+      this.confirmData.lkOs = this.checkList2Os.join('/')
+    },
+    // 保存
+    handleSaveTable() {
+      this.hanldeSaveCheck()
+      this.confirmData.jzNumber = window.sessionStorage.getItem('jzNumber')
+      this.$http.post('/jcjg/saveSmjjcjg', {
+        ...this.confirmData,
+        caseId: this.caseId
+      }).then(() => {
+        this.$emit('handleSaveTable')
+      })
+    },
+    // 删除
+    formDelete() {
+      this.$confirmFun('确定删除吗?').then(() => {
+        this.$http.post('/jcjg/delSmjjcjg', {
+          id: this.caseId
+        }).then(() => {
+          this.$message.success('删除成功')
+          this.$emit('formDelete', 'del')
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#operation-record{
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+}
+::v-deep .el-icon-arrow-up{
+  display: none;
+}
+.flex{
+  display: flex;
+}
+.a-c{
+  align-items: center;
+}
+.j-c{
+  justify-content: center;
+}
+.flex-end{
+  justify-content: flex-end;
+}
+.caseItem{
+  width: 200px;
+  padding-right: 10px;
+}
+.caseDetail{
+  padding: 0 20px;
+  display: flex;
+  font-size: 14px;
+  line-height: 24px;
+}
+.item{
+  &:not(:last-child){
+    margin-right: 15px;
+  }
+}
+tr td{
+  border: 1px solid #000;
+  text-align: center;
+}
+table{
+  width: 100%;
+}
+.img_show{
+  height: 200px;
+}
+::v-deep .el-checkbox{
+  margin-right: 15px;
+}
+.img2_show{
+  width: 400px;
+  height: 380px;
+}
+.btnBox_top{
+  position: fixed;
+  z-index: 999;
+  right: 90px;
+}
+::v-deep .el-input__inner {
+  border: none;
+  height: 26px !important;
+  line-height: 26px !important;
+  font-size: 16px;
+  text-align: center;
+}
+
+::v-deep .el-input__inner {
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+  padding: 0;
+}
+::v-deep .el-input__prefix {
+  display: none;
+}
+::v-deep .el-checkbox__label{
+  font-size: 16px;
+  color: #000;
+}
+</style>
+

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue

@@ -16,6 +16,13 @@
         alt=""
         @click="(e) => setBgImg(e.target)"
       >
+      <img
+        ref="fj"
+        src="@/assets/img/ill.png"
+        class="img"
+        alt=""
+        @click="(e) => setBgImg(e.target)"
+      >
     </div>
   </div>
 </template>
@@ -43,25 +50,50 @@ export default {
       this.setBgImg()
       eventBus.$off('clearCanvas')
       eventBus.$on('clearCanvas', () => {
-        this.setBgImg()
+        let target = ''
+        switch (this.isOdOrOs) {
+          case 'OD':
+            target = this.$refs.od
+            break
+          case 'OS':
+            target = this.$refs.os
+            break
+          case 'fjOD':
+          case 'fjOS':
+            target = this.$refs.fj
+            break
+          default:
+            break
+        }
+        this.setBgImg(target)
       })
     })
   },
   methods: {
     // 设置背景图片
     setBgImg(target) {
-      let imgContent = target
-      if (this.isOdOrOs === 'OD') {
-        imgContent = this.$refs.od
-      } else {
-        imgContent = this.$refs.os
-      }
+      if (!target) {
+        switch (this.isOdOrOs) {
+          case 'OD':
+            target = this.$refs.od
+            break
+          case 'OS':
+            target = this.$refs.os
+            break
+          case 'fjOD':
+          case 'fjOS':
+            target = this.$refs.fj
+            break
+          default:
+            break
+        }
+      }
+      const imgContent = target
+      if (!imgContent) return
       const imgEl = imgContent.cloneNode(true)
-      // console.log(imgEl)
       imgEl.onload = () => {
         // 可跨域设置
         const imgInstance = new this.fabric.Image(imgEl, { crossOrigin: 'anonymous', erasable: false })
-        // console.log(imgInstance)
         // 渲染背景
         this.canvas.c.setBackgroundImage(imgInstance, this.canvas.c.renderAll.bind(this.canvas.c), {
           scaleX: this.canvas.c.width / imgInstance.width,
@@ -125,6 +157,7 @@ export default {
   height: 320px*0.2;
   padding: 5px;
   margin-left: 5px;
+  margin-bottom: 5px;
   cursor: pointer;
   background: #fff;
 }

src/page-subspecialty/views/modules/imgEditorFabric/index.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div>
       <div v-if="show" class="img_header">
-        <div style="font-size: 20px; font-weight: bold">眼底绘图  {{ isOdOrOs }}</div>
+        <div style="font-size: 20px; font-weight: bold">眼底绘图  {{ odOrOsShow(isOdOrOs) }}</div>
         <div>
           <save @fullImgBack="fullImgBack" />
           <el-button size="small" @click="closeDialog">关闭</el-button>
@@ -143,14 +143,12 @@ export default {
       } else {
         this.canvas.isDrawingMode = true
       }
-      console.log(this.canvas.isDrawingMode)
     }
   },
   mounted() {
     this.canvas = canvas.c = new fabric.Canvas('canvas', {
       isDrawingMode: true
     })
-    // console.log(this.canvas)
     this.canvas.set('backgroundColor', '#fff')
     this.show = true
     event.init(canvas.c)
@@ -163,6 +161,13 @@ export default {
     })
   },
   methods: {
+    odOrOsShow(type) {
+      if (type.includes('OD')) {
+        return 'OD'
+      } else {
+        return 'OS'
+      }
+    },
     changeColor(value) {
       var brush = this.canvas.freeDrawingBrush
       brush.color = this.lineColor