103 lines
3.0 KiB
Vue
103 lines
3.0 KiB
Vue
<!--
|
|
* @Author: 卜启缘
|
|
* @Date: 2021-06-12 22:18:48
|
|
* @LastEditTime: 2021-07-14 10:17:34
|
|
* @LastEditors: 卜启缘
|
|
* @Description:
|
|
* @FilePath: \vite-vue3-lowcode\preview\views\slot-item.vue
|
|
-->
|
|
<template>
|
|
<div class="__slot-item">
|
|
<comp-render :element="element" v-on="events">
|
|
<template v-for="(value, key) in element.props?.slots" :key="key" #[key]>
|
|
<template v-for="item in value?.children" :key="item._vid">
|
|
<slot-item :element="item" :models="models" :actions="actions" />
|
|
</template>
|
|
</template>
|
|
</comp-render>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, PropType } from 'vue';
|
|
import request from '../utils/http/request';
|
|
import { ContentTypeEnum } from '../utils/http/httpEnum';
|
|
import CompRender from './comp-render';
|
|
import type {
|
|
VisualEditorBlockData,
|
|
VisualEditorActions,
|
|
VisualEditorModel,
|
|
FetchApiItem,
|
|
} from '@/visual-editor/visual-editor.utils';
|
|
import { useAnimate } from '@/hooks/useAnimate';
|
|
|
|
export default defineComponent({
|
|
name: 'SlotItem',
|
|
components: { CompRender },
|
|
props: {
|
|
element: {
|
|
type: [Object] as PropType<VisualEditorBlockData>,
|
|
default: () => ({}),
|
|
},
|
|
actions: {
|
|
type: Object as PropType<VisualEditorActions>,
|
|
default: () => ({}),
|
|
},
|
|
models: {
|
|
type: Object as PropType<VisualEditorModel[]>,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
setup(props) {
|
|
// TODO 生成组件事件
|
|
const events = props.element.actions.reduce((prev, curr) => {
|
|
prev[curr.event] = async () => {
|
|
for (const handle of curr.handle) {
|
|
const [scopeType, actionType, handleKey] = handle.link;
|
|
if (scopeType === 'global') {
|
|
const apis: FetchApiItem[] = props.actions[actionType].apis;
|
|
// const { data, options } = apis.find((item) => item.key == handleKey)!;
|
|
const { options } = apis.find((item) => item.key == handleKey)!;
|
|
// const pramsObj = {};
|
|
await request({
|
|
...options,
|
|
headers: {
|
|
'Content-Type': ContentTypeEnum[options.contentType],
|
|
},
|
|
data: {
|
|
username: 'admin',
|
|
password: '123456',
|
|
},
|
|
});
|
|
} else if (scopeType === 'component') {
|
|
console.log('scopeType', scopeType);
|
|
}
|
|
}
|
|
};
|
|
return prev;
|
|
}, {});
|
|
|
|
onMounted(() => {
|
|
const animations = props.element.animations;
|
|
if (animations?.length) {
|
|
let animateEl =
|
|
(window.$$refs[props.element._vid]?.$el as HTMLElement) ??
|
|
(window.$$refs[props.element._vid] as HTMLElement);
|
|
|
|
animateEl = animateEl?.closest('.__slot-item')?.firstChild as HTMLElement;
|
|
|
|
if (animateEl) {
|
|
useAnimate(animateEl, animations);
|
|
}
|
|
}
|
|
});
|
|
|
|
return {
|
|
events,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|