quguang_front_wzysg_HZ/src/components/H5form/operaCheckLook.vue

<template>
  <el-dialog class="dzblLook" :visible.sync="visible" fullscreen @close="closeDialog">
    <h5formButton ref="h5formButtonRef" :bl-print-show="true" :form-print-show="false" :bm-printer-show="false" />
    <div v-if="xdList.length>0" class="dzblContent left">
      <div class="left-content">
        <div class="title-bt">修订记录</div>
        <div class="left-content-ul">
          <div
            v-for="(item,index) in xdList"
            :key="index"
            class="li"
            :class="currentIndex===index ? 'currentLi' : ''"
            @click="leftListClick(item,index)"
          >
            <span class="padding-right-10">{{ item.createName }}</span>
            <span>于{{ item.createDate }}编辑了病历</span>
          </div>
        </div>
      </div>
      <operaCheckLookPdfFun
        v-if="operaCheckLookShow"
        ref="operaCheckLookPdfFunRef"
        :current-url="currentUrl"
        :archive-case-c-r-f-item="archiveCaseCRFItem"
      />
    </div>
    <div v-else class="nodata-father">
      <img src="@/assets/img/nodata.png" alt="" class="nodata">
    </div>
  </el-dialog>
</template>

<script>
import h5formButton from '@/components/H5formOhter/h5formButton'
import operaCheckLookPdfFun from '@/components/H5form/operaCheckLookPdfFun'
export default {
  components: {
    h5formButton,
    operaCheckLookPdfFun
  },
  props: {
    archiveCaseCRFItem: {
      type: Object,
      default: () => { }
    },
    currentUrl: {
      type: String,
      default: ''
    },
    patientInfoObj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      visible: false,
      operaCheckLookShow: true,
      xdList: [],
      currentIndex: 0
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.getInfo()
      })
    },
    // 获取左侧列表
    async getInfo() {
      const { data: res } = await this.$http.get('/quguang/opera/after/getOperaAfterRecordList', {
        params: {
          formId: this.archiveCaseCRFItem.id
        }
      })
      if (res.code === 0) {
        this.xdList = res.data
        this.$nextTick(() => {
          res.data.length > 0 ? this.$refs.operaCheckLookPdfFunRef.getQgEmrRecordInfo(res.data[0].id) : ''
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 点击左侧列表
    leftListClick(formItem, index) {
      this.currentIndex = index
      this.operaCheckLookShow = false
      this.$nextTick(() => {
        this.operaCheckLookShow = true
        setTimeout(() => {
          this.$refs.operaCheckLookPdfFunRef.getQgEmrRecordInfo(formItem.id)
        }, 10)
      })
    },
    // 关闭表单
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang="scss">
.dzblLook {
  .nodata-father {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nodata {
    width: 400px;
    margin-top: 130px;
  }

  .dzblContent {
    display: flex;
    justify-content: space-between;
    font-size: 16px;

    .left-content {
      min-width: 350px;
      margin-right: 20px;
      border-right: 1px solid #6f6f6f;
    }
    .left-content-ul {
      height: 85vh;
      overflow-y: auto;
    }
    .title-bt {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 20px;
    }
    .li {
      padding: 12px 0;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }
    .currentLi {
      background: #1890ff;
      color: #fff;
      padding: 12px 0;
      text-align: center;
    }
  }
  .operaCheck-right-content {
    flex: 1;
  }
}
</style>
<style lang="scss">
.dzblLook {
  .checkDate-picker {
    width: 100%;
  }
  .el-dialog__body {
    padding-left:10px;
    padding-right: 10px;
  }
  .formItemOne .el-form-item__content {
    display: flex;
  }
  .el-dialog__header {
    padding-top: 0;
  }
}
</style>