xiangan_pc/src/page-subspecialty/views/modules/seeDoctor/archives/intelligent-filling-drawer.vue

<template>
  <!-- 智能填充 -->
  <el-drawer
    title="我是标题"
    :visible.sync="drawer"
    :with-header="false"
    :before-close="handleClose"
    class="intelligent-drawer-dialog"
  >
    <div class="crf-data">
      <template v-if="examData.length>0">
        <div v-for="(item,index) in examData" :key="index">
          <crf-data
            v-if="crfDataVisible && item.exams.length>0"
            v-model="item.value"
            :exam-name="item.name"
            :list="item.exams"
          />
        </div>
      </template>
      <div v-else class="nodata">
        <img src="@/assets/img/nodata.png" alt="">
      </div>
    </div>
  </el-drawer>
</template>
<script>
const Base64 = require('js-base64').Base64
import crfData from '@/components/hm-crf/crf-data.vue'
export default {
  components: { crfData },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 获取的检查数据，【item.value】为v-model绑定值，即用于填充左侧iframe
      examData: [{
        exams: [{
          time: '2021-07-16',
          recId: '1',
          type: null,
          data: [{
            both: null,
            id: '1',
            name: '等效球镜',
            od: '-0.25',
            os: '1.5'
          }]
        }, {
          time: '2021-07-17',
          recId: '2',
          type: null,
          data: [{
            both: null,
            id: '2',
            name: '等效球镜',
            od: '-0.25',
            os: '1.5'
          }]
        }, {
          time: '2021-07-18',
          recId: '3',
          type: null,
          data: [{
            both: null,
            id: '3',
            name: '等效球镜',
            od: '-0.25',
            os: '1.5'
          }]
        }],
        id: '验光',
        name: '验光'
      }, {
        exams: [{
          time: '2021-07-16',
          recId: '4',
          type: null,
          data: [{
            both: null,
            id: '4',
            name: '等效球镜',
            od: '-0.25',
            os: '1.5'
          }]
        }, {
          time: '2021-07-17',
          recId: '5',
          type: null,
          data: [{
            both: null,
            id: '5',
            name: '等效球镜',
            od: '-0.25',
            os: '1.5'
          }]
        }, {
          time: '2021-07-18',
          recId: '6',
          type: null,
          data: [{
            both: null,
            id: '6',
            name: '等效球镜',
            od: '-0.25',
            os: '1.5'
          }]
        }],
        id: '验光',
        name: '验光'
      }],
      crfDataVisible: true
    }
  },
  created() {
    console.log(4444)
    // this.init()
  },
  methods: {
    handleClose(done) {
      this.$emit('drawerClose', false)
    },
    init() {
      this.$nextTick(() => {
        this.$http.get('/crf/template', { params: { crfId: this.crfId }}).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            this.content = Base64.decode(res.data.content)
            this.crfVisible = true
          }
        }).catch(() => { })

        // this.$http.get(`/from/data/getFirstFeedbackData/${this.patientIdNumber}`).then(({ data: res }) => {
        //   if (res.code !== 0) {
        //     return this.$message.error(res.msg)
        //   }
        //   if (res.data) {
        //     this.examData = res.data
        //     this.crfDataVisible = true
        //     // setTimeout(() => {
        //     //   this.fillCrf()
        //     // }, 1000)
        //   }
        // }).catch(() => { })
      })
    },
    fillCrf() {
      // 过滤数据
      const dataSelect = []
      let fillItemList = []
      this.examData.forEach(item => {
        if (item.value) {
          dataSelect.push(item.value)
          if (item.value.data) {
            const examItemList = item.value.data.map((obj, index, arr) => {
              obj.recId = item.value.recId
              obj.time = item.value.time
              return obj
            })
            fillItemList = fillItemList.concat(examItemList)
          }
        }
      })
      const ifr = this.$refs.hmCrf.$el
      const ifrWin = ifr.contentWindow
      ifrWin.dataFill(fillItemList)
    },
    submit() {
      const ifr = this.$refs.hmCrf.$el
      const ifrDoc = ifr.contentWindow.document || ifr.contentDocument
      const body = ifrDoc.getElementsByTagName('body')[0]
      const crfContent = body.innerHTML
      this.$http.post('/crf/form', {
        crfId: this.crfId,
        dataContent: Base64.encode(crfContent),
        idNumber: this.patientIdNumber,
        inputDate: this.inputDate,
        projectId: window.SITE_CONFIG['projectId']
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        // this.updateVisitPlan()
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.visible = false
            this.$emit('refreshData')
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.intelligent-drawer-dialog {
  height: 100%;
  .nodata {
    width: 300px;
    height: 100%;
    display: flex;
    align-items: center;
    img{
      width:300px;
    }
}
  .crf-data {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 0 20px 0 20px;
    }
}

</style>