window-form/src/views/form/business-model/test.vue

<template>
  <div class="p-4">
    <template
      v-for="(item, index) in [
        'businessModel1',
        'businessModel2',
        'businessModel3',
      ]"
    >
      <el-card class="mt-2">
        <div>
          iframe地址： {{ iframeUrlCpt + '?haveOrNo=' + state[item].haveOrNo }}
        </div>
        <div>
          <el-button type="primary" @click="onDetail(item)"
            >许可范围 {{ index + 1 }}</el-button
          >
          {{ state[item].list.length }} 条数据
        </div>
        <div>
          <CzrFormColumn
            label="haveOrNo"
            v-model:param="state[item].haveOrNo"
            link="radio"
            :options="DictionaryStore.businessModelHaveOrNoList"
          />
        </div>
        <div>
          <el-input
            type="textarea"
            v-model="state[item].strs"
            disabled
            :rows="4"
          />
        </div>
      </el-card>
    </template>
    <CzrDialog
      :show="state.detail.show"
      title="一级表单的弹窗"
      width="90%"
      height="90%"
      :show-close="false"
      :show-submit="false"
      @onClose="state.detail.show = false"
    >
      <iframe
        v-if="state.detail.show"
        class="w-full h-full"
        :src="state.detail.transfer.url"
        id="iframe"
        ref="ref_iframe"
        @load="onIframeInit"
      />
    </CzrDialog>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useDictionaryStore } from '@/stores'

const DictionaryStore = useDictionaryStore()
const emit = defineEmits([])
const props = defineProps({})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  businessModel1: {
    strs: '',
    ids: '',
    list: [],
    haveOrNo: 1,
  },
  businessModel2: {
    strs: '',
    ids: '',
    list: [],
    haveOrNo: 0,
  },
  businessModel3: {
    strs: '',
    ids: '',
    list: [],
    haveOrNo: 0,
  },
  detail: {
    show: false,
    transfer: {},
  },
})
const ref_iframe = ref()
const iframeUrlCpt = computed(
  () => `${location.origin}/${import.meta.env.VITE_BASE}/business-model/form`,
)
const onDetail = (key) => {
  state.detail.transfer = {
    url: iframeUrlCpt.value + '?haveOrNo=' + state[key].haveOrNo,
    key: key,
  }
  state.detail.show = true
}
const onIframeInit = () => {
  setTimeout(() => {
    ref_iframe.value.contentWindow.postMessage(
      {
        type: 'getFormIframeData',
        data: {
          formItem: '一级表单formItem',
          wfList: JSON.stringify(state[state.detail.transfer.key].list),
        },
      },
      '*',
    )
  }, 100)
}
onMounted(() => {
  window.addEventListener('message', (e) => {
    const data = e.data
    if (data.type === 'onCloseIframe') {
      console.log('二级表单发送关闭消息，onCloseIframe')
      state.detail.show = false
    } else if (data.type === 'onConfirmIframe') {
      console.log('二级表单发送提交消息，onConfirmIframe')
      console.log(data.data)
      const { formItem, msgData } = data.data
      const { ids, list, strs } = JSON.parse(msgData)
      state[state.detail.transfer.key].strs = strs
      state[state.detail.transfer.key].ids = ids
      state[state.detail.transfer.key].list = list
      state.detail.show = false
    }
  })
})
</script>

<style lang="scss" scoped></style>