liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:暂存

Browse Source
This commit is contained in:
lhj
2024-11-17 22:49:05 +08:00
parent f25b03fff5
commit f411974bd3
4 changed files with 125 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AdaptivePage.vue
View File

@ -3,7 +3,7 @@
<div style="width: 100%;"> <div style="width: 100%;">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div style="width: 100%;height: 100%;background-color: #f7f8fa;"> <div style="width: 100%;height: 100%;background-color: #f7f8fa;overflow-y: auto">
MAIN MAIN
<slot> <slot>
</slot> </slot>

110
src/components/DynamicComponent.vue
View File

@ -3,9 +3,7 @@
style="width: fit-content; display: flex; flex-direction: column; position: relative;" style="width: fit-content; display: flex; flex-direction: column; position: relative;"
v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)" v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
:id="componentId" :id="componentId"
:class="[ :class="['dynamic-component',{ 'hover-state': isHovered && store.designerMode },
'dynamic-component',
{ 'hover-state': isHovered && store.designerMode },
{ 'click-state': componentSelected && store.designerMode &&isComponent } { 'click-state': componentSelected && store.designerMode &&isComponent }
]" ]"
@click.stop="handleClick" @click.stop="handleClick"
@ -17,61 +15,100 @@
</div> </div>
<div v-if="componentSelected && store.designerMode&&isComponent" class="component-header" :style="headerStyle"> <div v-if="componentSelected && store.designerMode&&isComponent" class="component-header" :style="headerStyle">
<div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div> <div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
<div style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap"> <div
<icon-copy class="clickable" size="20" /> style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
<icon-edit class="clickable" @click="handleEditFunc" size="20" /> <icon-copy class="clickable" size="20"/>
<icon-delete class="clickable" @click="handleDeleteFunc" size="20" /> <icon-edit class="clickable" @click="handleEditFunc" size="20"/>
<icon-delete class="clickable" @click="handleDeleteFunc" size="20"/>
</div> </div>
</div> </div>
<div class="component-content"> <div class="component-content">
<component <VueDraggable
:is="componentType" v-model="componentChildren"
v-bind="componentPropsWithDisabled" :animation="150"
:class="componentClass" group="designer"
:style="componentStyle" ghost-class="ghost"
chosen-class="chosen"
class="canvas"
@start="onComponentStart"
@update="onComponentUpdate"
@stop="onComponentEnd"
@add="onComponentAdd"
> >
{{ componentText }} <component
<template v-for="child in componentChildren" :key="child.id"> :is="componentType"
<DynamicComponent :componentData="child" /> v-bind="componentPropsWithDisabled"
</template> :class="componentClass"
<template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]> :style="componentStyle"
<DynamicComponent :component-data="slot" /> >
</template> {{ componentText }}
</component> <template v-for="child in componentChildren" :key="child.id">
<DynamicComponent :componentData="child"/>
</template>
<template v-for="(slot, key, index) in componentSlots" :key="key" v-slot:[key]>
<DynamicComponent :component-data="slot"/>
</template>
</component>
</VueDraggable>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, ref, computed, onMounted, watch, markRaw, nextTick } from 'vue'; import {ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
import { componentMapping } from './componentMapping'; import {componentMapping} from './componentMapping';
import { useSchemeStore } from '../stores/useSchemeStore'; import {useSchemeStore} from '../stores/useSchemeStore';
import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
const store = useSchemeStore(); const store = useSchemeStore();
const props = defineProps({ const props = defineProps({
componentData: Object componentData: Object
}); });
const isComponent=ref(true) const isComponent = ref(true)
const componentId = computed(() => props.componentData?.id || ''); const componentId = computed(() => props.componentData?.id || '');
const componentName = computed(() => props.componentData?.name || 'Unnamed Component'); const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div'); const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
const componentProps = computed(() => props.componentData?.props || {}); const componentProps = computed(() => props.componentData?.props || {});
const componentDisable = computed(() => props.componentData?.disable || false); const componentDisable = computed(() => props.componentData?.disable);
const componentVisible = computed(() => props.componentData?.visible); const componentVisible = computed(() => props.componentData?.visible);
const componentChildren = computed(() => props.componentData?.children || []); const componentChildren = ref(props.componentData?.children);
const componentText = computed(() => props.componentData?.text || ''); const componentText = computed(() => props.componentData?.text || '');
const componentClass = computed(() => props.componentData?.class || []); const componentClass = computed(() => props.componentData?.class || []);
const componentStyle = computed(() => props.componentData?.style || []); const componentStyle = computed(() => props.componentData?.style || []);
const componentSlots = computed(() => props.componentData?.slots || {}); const componentSlots = computed(() => props.componentData?.slots || {});
const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id); const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);
// 设计器控制参数
const componentMove = computed(() => props.componentData?.designer?.move | false);
const componentMoveSibling = computed(() => props.componentData?.designer?.moveSibling | false);
const componentSelect = computed(() => props.componentData?.designer?.select | false);
const componentDel= computed(() => props.componentData?.designer?.del | false);
const componentDynamic= computed(() => props.componentData?.designer?.dynamic | false);
onMounted(() => { onMounted(() => {
debugger isComponent.value = props.componentData?.type != 'AdaptivePage';
isComponent.value=props.componentData?.type!='AdaptivePage';
adjustHeaderPosition(); adjustHeaderPosition();
}); });
const onComponentStart = (event: DraggableEvent) => {
console.log("onComponentStart", event);
}
const onComponentEnd = (event: DraggableEvent) => {
console.log("onComponentEnd", event);
}
const onComponentAdd = (event: DraggableEvent) => {
console.log("onComponentAdd", event);
let obj = getCurrentSchemeObj()
obj.children = componentChildren.value
store.updateScheme(obj.id, obj)
}
const onComponentUpdate = (event: DraggableEvent) => {
console.log("onComponentUpdate", event);
}
// 确保 componentProps 包含 disabled 属性 // 确保 componentProps 包含 disabled 属性
const componentPropsWithDisabled = computed(() => ({ const componentPropsWithDisabled = computed(() => ({
...componentProps.value, ...componentProps.value,
@ -151,7 +188,6 @@ const adjustHeaderPosition = () => {
}; };
watch(() => componentSelected.value, () => { watch(() => componentSelected.value, () => {
if (componentSelected.value) { if (componentSelected.value) {
nextTick(() => { nextTick(() => {
@ -162,7 +198,7 @@ watch(() => componentSelected.value, () => {
</script> </script>
<style scoped> <style>
.dynamic-component { .dynamic-component {
position: relative; position: relative;
width: fit-content; width: fit-content;
@ -213,4 +249,18 @@ watch(() => componentSelected.value, () => {
.clickable { .clickable {
cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */ cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
} }
.canvas {
background-color: #fff;
width: 100%;
height: 100%;
}
.ghost {
background-color: #f2f3f5 !important;
}
.chosen {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: #f0f0f0;
z-index: 1001;
}
</style> </style>

65
src/modules/previewScheme.json
View File

@ -1,22 +1,43 @@
{ [
"type": "AdaptivePage", {
"name": "AdaptivePage", "id": "AdaptivePage-b32bb7a33910000",
"id": "AdaptivePage", "name": "AdaptivePage",
"version": "2.0", "type": "AdaptivePage",
"props": {}, "props": {},
"class": "", "class": "",
"style": "", "children": [],
"variables": {}, "style": "",
"dataSources": {}, "visible": true,
"functions": {}, "slots": {},
"orchestrations": {}, "disable": false,
"events": {}, "events": {},
"slots": {}, "loop": {},
"header": [], "body": [],
"footer": [], "designer": {},
"body": [], "dataSources": {},
"meta": {}, "functions": {},
"visible": true, "variables": {},
"disable": false, "orchestrations": {},
"designer": {} "footer": [],
} "meta": {}
},
{
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": "718b3e933910000",
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
}
]

3
src/views/Designer.vue
View File

@ -78,7 +78,7 @@ let componentsList = [];
const store = useSchemeStore(); const store = useSchemeStore();
watch(store, (n) => { watch(store, (n) => {
console.log("store发生了变化", n); // console.log("store发生了变化", n);
}); });
const baseScheme = { const baseScheme = {
@ -286,7 +286,6 @@ const view = () => {
.ghost { .ghost {
background-color: #f2f3f5 !important; background-color: #f2f3f5 !important;
} }
overflow-y: auto;
} }
.right { .right {