xiangan_pc/src/components/ecrf/follow-up-edit.vue

<template>
  <el-dialog
    title="填写表单"
    top="1vh"
    width="calc(220mm + 600px)"
    :visible.sync="visible"
    append-to-body
  >
    <div class="dialog-container">
      <!-- 表单内容 -->
      <div class="crf-container" style="width: 220mm;">
        <hm-crf v-if="crfVisible" ref="hmCrf" :value="content" class="hmPreview" :js-arr="jsArr" />
      </div>
      <!-- 填充数据 -->
      <div class="crf-data" style="width: calc(100% - 220mm);">
        <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>
        <template v-else>
          <el-empty description="没有可用的填充数据" />
        </template>
      </div>
    </div>

    <template slot="footer">
      <!-- <el-button @click="visible = false">{{ $t('cancel') }}</el-button> -->
      <el-button type="primary" @click="fillCrf">{{ '一键填充' }}</el-button>
      <el-button type="primary" @click="submit">{{ '保存' }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
const Base64 = require('js-base64').Base64

import hmCrf from '../hm-crf/load-content.vue'
import crfData from './crf-data.vue'
import { formatDate } from '@/utils/index.js'

export default {
  components: { hmCrf, crfData },
  data() {
    return {
      visible: false,
      crfVisible: false,
      crfDataVisible: false,
      jsArr: [],
      inputDate: formatDate(new Date(), 'yyyy-MM-dd'),
      id: '',
      crfId: '',
      patientIdNumber: '',
      // CRF内容，填充用
      content: '',
      // 获取的检查数据，【item.value】为v-model绑定值，即用于填充左侧iframe
      examData: []
    }
  },
  mounted() { },
  methods: {
    init() {
      this.visible = true
      this.crfVisible = false
      this.crfDataVisible = false
      this.$nextTick(() => {
        // 加载
        this.$http.get('/crf/form', { params: { id: this.id }}).then(({ data: res }) => {
          if (res.data) {
            this.content = Base64.decode(res.data.content)
            this.crfVisible = true
          }
        })
        // 获取数据填充数据
        this.$http.get('/crf/fillData', {
          params: {
            crfId: this.crfId,
            idNumber: 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
          }
        }).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.put('/crf/form', {
        formId: this.id,
        dataContent: Base64.encode(crfContent)
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.visible = false
            this.$emit('refreshData')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-container {
  height: calc(100vh - 1vh - 54px - 70px);

  // 表单
  .crf-container {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    // border: 1px solid;
    padding: 10px 0;
    text-align: center;
    background: #606266;

    .hmPreview {
      background: #fff;
      height: 100%;
    }
  }
  // 匹配数据
  .crf-data {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    overflow: auto;
    padding: 0 20px 0 20px;
  }
}

// .btn-fill {
//   margin-right: calc(100% - 960px - 160px);
// }
</style>