You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.9 KiB
61 lines
1.9 KiB
<template> |
|
<BasicModal |
|
v-bind="$attrs" |
|
defaultFullscreen |
|
cancelText="关闭" |
|
:showOkBtn="false" |
|
@register="registerModal" |
|
@visible-change="handleVisibleChange" |
|
> |
|
<div id="formPreview"/> |
|
</BasicModal> |
|
</template> |
|
<script lang="ts" setup> |
|
import { reactive } from 'vue'; |
|
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
|
import { loadMicroApp, MicroApp } from 'qiankun'; |
|
import { getSubDefineProps } from '/@/qiankun/state'; |
|
import { GlStateEnum } from '/@/enums/microAppEnum'; |
|
import { useMicroAppStore } from '/@/store/modules/microApp'; |
|
import { apps } from '/@/qiankun/apps'; |
|
import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum'; |
|
|
|
interface TableState { |
|
formDesignApp: MicroApp; |
|
} |
|
|
|
const state = reactive<TableState>({ |
|
formDesignApp: undefined!, |
|
}); |
|
const formPreviewProps = { |
|
style: { height: 'calc(100vh - 160px)' }, |
|
options: {}, |
|
disabled: false, |
|
readonly: false, |
|
formSubmitSuccess: () => {}, |
|
formSubmitError: () => {}, |
|
formResetChange: () => {} |
|
}; |
|
const emit = defineEmits(['success', 'register']); |
|
const microAppStore = useMicroAppStore(); |
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => { |
|
state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), { |
|
container: '#formPreview', |
|
props: { |
|
...getSubDefineProps(), |
|
// 表单设计器props |
|
[GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formPreviewProps, |
|
mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW |
|
} |
|
}), { sandbox: { experimentalStyleIsolation: true }}); |
|
data?.json && (formPreviewProps.options = data?.json); |
|
const props: Partial<ModalProps> = { confirmLoading: false }; |
|
props.title = '预览流程表单'; |
|
setModalProps(props); |
|
}); |
|
|
|
function handleVisibleChange(visible: boolean) { |
|
!visible && state.formDesignApp.unmount(); |
|
} |
|
|
|
</script>
|
|
|