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

fix:store数据绑定

Browse Source
This commit is contained in:
liuhuajie
2024-11-08 11:40:46 +08:00
parent 1ec747acc7
commit 2f9e4d3132
2 changed files with 46 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
preview/views/MainView.vue
View File

@ -11,7 +11,7 @@
<div class="left">
<div class="title">组件</div>
<VueDraggable
v-model="list0"
v-model="store.components"
:animation="150"
:group="{ name: 'designer', pull: 'clone', put: false }"
:sort="false"
@ -19,14 +19,14 @@
@start="onStart"
@end="onEnd"
>
<div v-for="item in list0" :key="item.id" class="tem_btn">
<div v-for="item in store.components" :key="item.id" class="tem_btn">
{{ item.name }}
</div>
</VueDraggable>
</div>
<div ref="targetContent" class="center">
<VueDraggable
v-model="list"
v-model="store.previewScheme"
:sort="true"
:animation="150"
group="designer"
@ -36,23 +36,11 @@
@update="onPreviewUpdate"
@stop="onPreviewStop"
>
{{list}}
<!-- {{store.previewScheme}}-->
<!-- <template v-for="item in store.previewScheme" :key="item.id">-->
<!-- <component :id="item.id" :is="item.type" v-bind="item.props"-->
<!-- :class="item.class" :style="item.style">-->
<!-- {{ item.text }}-->
<!--&lt;!&ndash; <template v-for="child in componentChildren" :key="child.id">&ndash;&gt;-->
<!--&lt;!&ndash; <DynamicComponent :component-data="child" />&ndash;&gt;-->
<!--&lt;!&ndash; </template>&ndash;&gt;-->
<!--&lt;!&ndash; <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>&ndash;&gt;-->
<!--&lt;!&ndash; <DynamicComponent :component-data="slot" />&ndash;&gt;-->
<!--&lt;!&ndash; </template>&ndash;&gt;-->
<!-- </component>-->
<!-- </template>-->
<!-- <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">-->
<!-- {{ component.id }}-->
<!-- </DynamicComponent>-->
{{ store.previewScheme }}
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</VueDraggable>
</div>
@ -69,6 +57,7 @@ import {uuid} from 'lsp-uuid';
import {componentScheme} from "@/schemes/scheme";
import {useSchemeStore} from '@/stores/useSchemeStore';
import {IComponent} from "@/type/IComponent";
import DynamicComponent from "@/components/DynamicComponent.vue";
let list0 = ref([])
@ -161,6 +150,7 @@ function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'sty
loop: {},
};
}
const onEnd = (event: DraggableEvent) => {
console.log("onEnd", event)
// const {oldDraggableIndex} = obj;

42
src/stores/useSchemeStore.ts
View File

@ -1,6 +1,5 @@
import {defineStore} from 'pinia'
import {IPageComponent} from '@/type/IPageComponent';
import {ref} from 'vue';
function findObjectById(obj, targetId) {
if (Array.isArray(obj)) {
@ -22,28 +21,27 @@ function findObjectById(obj, targetId) {
return null; // 如果没有找到，则返回null
}
export const useSchemeStore = defineStore('scheme', () => {
const components = ref<IPageComponent[]>()
const previewScheme = ref<IPageComponent[]>()
const nowComponentsData = ref<IPageComponent>()
function initPreviewScheme(value) {
previewScheme.value = value
nowComponentsData.value=value[0]
}
function initComponents(value:IPageComponent[]) {
components.value = value
}
function getSchemeObj(id) {
return findObjectById(previewScheme.value, id)
}
function updateScheme() {
export const useSchemeStore = defineStore('scheme', {
state: () => ({
components: [],
previewScheme: [],
nowComponentsData: {}
}),
actions:
{
initPreviewScheme(value) {
this.previewScheme = value
this.nowComponentsData = value[0]
},
initComponents(value) {
this.components = value
},
getSchemeObj(id) {
return findObjectById(this.previewScheme, id)
},
updateScheme() {
}
return {previewScheme, components, nowComponentsData, initComponents, initPreviewScheme, getSchemeObj, updateScheme}
}
})