dialogIframe.vue

<template>
  <el-dialog
    title="导入"
    :visible.sync="dialogVisible"
    width="90%"
    :before-close="handleClose"
    :close-on-click-modal='false'
    @open='open'
    :append-to-body='true'
  >
    <iframe
      name="zi"
      :src='pageSrc'
      style="width:100%;height:500px;padding-top:10px"
      sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"
    ></iframe>
  </el-dialog>
</template>
<script>
export default {
  name: 'hsDialogIframe',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    src: {
      type: String,
      default: ''
    },
    entityConfig: {},
    currentImportItem: {},
    entityManger: {}
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      dialogVisiblePage: false,
      pageSrc: '',
      dialogVisible: false
    }
  },
  beforeDestroy() {
    window.removeEventListener('message', this.listenerMessageFun, false)
  },
  mounted() {
    window.addEventListener(
      'message',
      this.listenerMessageFun,
      false
    )
  },
  methods: {
    listenerMessageFun(event) {
      const data_ = event.data
      const { innerType, data, main, close } = data_
      if (close) {
        this.$emit('closeDialog')
      } else {
        if (innerType) {
          switch (innerType) {
            case 'dataImport':
            case 'dataImportHdrDtl':
              this.dataImport(data, this.entityConfig, main)
              break
            case 'selectPlugin':
              this.selectPlugin(data)
              break
          }
        }
      }
    },
    // 参照弹出选择
    selectPlugin(data) {
      this.$emit('linkBtnUiBack', data)
    },
    // 单一列表的数据导入
    async dataImport(data, config, main) {
      if (!config) return
      const type = this.entityManger.type // 实体类型
      if (type === 'mainDtl') { // 详情的导入
        this.dtlImport(data, config, main)
      } else { // 列表上的导入
        const ids = data.reduce((prve, curr) => {
          prve.push(curr.id)
          return prve
        }, [])
        const { table_name } = config
        const { import_name, saveParms, _parms } = this.currentImportItem
        const url_table_name = this.currentImportItem.table_name || table_name
        let queryParms = saveParms || {}
        if (_parms) {
          queryParms = Object.assign({}, saveParms, _parms)
        }
        const data_ = {
          ids: ids.join(),
          data,
          main,
          type: 'import'
        }
        const parms_ = {
          table_name: url_table_name,
          import_name: import_name,
          queryParms: queryParms
        }
        this.$API.importDataIframe(data_, parms_).then(res => {
          this.$message.success('导入成功!')
          this.$emit('importSuccess')
        })
      }
    },
    // 详情中的导入
    async dtlImport(data, config, main) {
      if (!config) return
      const mainEntity = this.entityManger.mainEntity
      const config_ = mainEntity.config
      const primaryKey = config_.primaryKey
      const mainData = mainEntity.data
      if (mainData) {
        const iUpdateStatus = mainData.iUpdateStatus
        if (iUpdateStatus === 1) {
          await mainEntity.save(true)
        }
        const ids = data.reduce((prve, curr) => {
          prve.push(curr.id)
          return prve
        }, [])
        const { table_name } = config
        const { import_name, saveParms, _parms } = this.currentImportItem
        const url_table_name = this.currentImportItem.table_name || table_name
        let queryParms = saveParms || {}
        if (_parms) {
          queryParms = Object.assign({}, saveParms, _parms)
        }
        const data_ = {
          ids: ids.join(),
          data,
          main,
          type: 'import'
        }
        queryParms.bill_id = mainData[primaryKey]
        const parms_ = {
          table_name: url_table_name,
          import_name: import_name,
          queryParms: queryParms
        }
        this.$API.importDataIframe(data_, parms_).then(res => {
          this.$message.success('导入成功!')
          this.handleClose()
          this.$emit('importSuccess', {
            bill_id: mainData[primaryKey]
          })
        })
      }
    },
    open() {
      this.pageSrc = this.src
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>