iframe

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

@@ -1,14 +1,133 @@
 <template>
+  <div class="p-4">
+    iframe地址： {{ iframeUrlCpt }}
+    <el-card class="mt-2">
+      <el-button type="primary" @click="onDetail('businessModel1')"
+        >许可范围1</el-button
+      >
+      {{ state.businessModel1.list.length }} 条数据
+      <el-input
+        type="textarea"
+        v-model="state.businessModel1.strs"
+        disabled
+        :rows="4"
+      />
+    </el-card>
+    <el-card class="mt-2">
+      <el-button type="primary" @click="onDetail('businessModel2')"
+        >许可范围2</el-button
+      >
+      {{ state.businessModel2.list.length }} 条数据
+      <el-input
+        type="textarea"
+        v-model="state.businessModel2.strs"
+        disabled
+        :rows="4"
+      />
+    </el-card>
+    <el-card class="mt-2">
+      <el-button type="primary" @click="onDetail('businessModel3')"
+        >许可范围3</el-button
+      >
+      {{ state.businessModel3.list.length }} 条数据
+      <el-input
+        type="textarea"
+        v-model="state.businessModel3.strs"
+        disabled
+        :rows="4"
+      />
+    </el-card>
+    <CzrDialog
+      :show="state.detail.show"
+      title="一级表单的弹窗"
+      width="90%"
+      height="90%"
+      :show-close="false"
+      :show-submit="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 { getCurrentInstance, reactive, ref } from 'vue'
+import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
 
 const emit = defineEmits([])
 const props = defineProps({})
 const { proxy }: any = getCurrentInstance()
-const state: any = reactive({})
+const state: any = reactive({
+  businessModel1: {
+    strs: '',
+    ids: '',
+    list: [],
+  },
+  businessModel2: {
+    strs: '',
+    ids: '',
+    list: [],
+  },
+  businessModel3: {
+    strs: '',
+    ids: '',
+    list: [],
+  },
+  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,
+    key: key,
+  }
+  state.detail.show = true
+}
+const onIframeInit = () => {
+  setTimeout(() => {
+    ref_iframe.value.contentWindow.postMessage(
+      {
+        type: 'getFormIframeData',
+        data: {
+          formItem: '一级表单formItem',
+          wfIds: state[state.detail.transfer.key].ids,
+        },
+      },
+      '*',
+    )
+  }, 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>
+<style lang="scss" scoped></style>