97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { defineComponent, onMounted, reactive, h, createVNode, render } from 'vue';
|
|
import VueRenderer from '@crami/lowcode-vue-renderer';
|
|
import { Spin } from '@crami/ui';
|
|
import './preview.css';
|
|
import ModalPage from '../../components/modal-page';
|
|
import { useRoute } from 'vue-router';
|
|
import { getSchemaById, normalizePageParams } from './helper';
|
|
import { previewProps } from './props';
|
|
import type { MenuRouteMeta } from 'pro-vip/src/router/typing';
|
|
|
|
export default defineComponent({
|
|
name: 'editor-preview',
|
|
props: previewProps,
|
|
setup(props) {
|
|
const data = reactive<any>({});
|
|
|
|
// 获取token
|
|
let tokenStr = '';
|
|
const hostToken = localStorage.getItem('token');
|
|
const clientToken = localStorage.getItem('access_token');
|
|
if (hostToken) {
|
|
tokenStr = JSON.parse(hostToken)?.token || '';
|
|
} else if (clientToken) {
|
|
tokenStr = clientToken;
|
|
}
|
|
const userToken = `Bearer ${tokenStr}`;
|
|
|
|
// 获取当前路由
|
|
const route = useRoute();
|
|
const { projectCode, appCode } = route.meta as Required<MenuRouteMeta>;
|
|
console.log('routermeta', route.meta);
|
|
|
|
onMounted(async () => {
|
|
const CramiLcUi = await import('@crami/lowcode-materials');
|
|
const _W = window as any;
|
|
_W.CramiLcUi = CramiLcUi;
|
|
|
|
// 获取schema
|
|
if (props.pageId) {
|
|
Object.assign(
|
|
data,
|
|
await getSchemaById({
|
|
pageId: props.pageId,
|
|
projectCode,
|
|
appCode,
|
|
}),
|
|
);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
const { schema, components } = data;
|
|
|
|
// 定义一个弹窗方法
|
|
async function openModal(params: any) {
|
|
const vnode = createVNode(ModalPage, {
|
|
params,
|
|
components,
|
|
routeMeta: route.meta,
|
|
userToken,
|
|
key: Math.random(),
|
|
});
|
|
render(vnode, document.body);
|
|
vnode.component?.ctx?.open();
|
|
}
|
|
|
|
if (!schema || !components) {
|
|
return h(Spin);
|
|
}
|
|
|
|
// 处理页面传参
|
|
const _pageParams = route.meta.pageParams
|
|
? JSON.parse(route.meta.pageParams as string)
|
|
: props.pageParams;
|
|
const formularData = {
|
|
projectCode,
|
|
appCode,
|
|
};
|
|
const pageParams = normalizePageParams(_pageParams, schema.pageParamsConfig, formularData);
|
|
|
|
return h('div', { class: 'lowcode-plugin-sample-preview' }, [
|
|
h(VueRenderer, {
|
|
scope: {
|
|
openModal,
|
|
routeMeta: route.meta,
|
|
userToken,
|
|
pageParams: pageParams,
|
|
},
|
|
class: 'lowcode-plugin-sample-preview-content',
|
|
schema,
|
|
components,
|
|
}),
|
|
]);
|
|
};
|
|
},
|
|
});
|