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

60
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,10 +57,11 @@ 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([])
let list0 = ref([])
let list=ref([])
let list = ref([])
let componentsList = [];
const store = useSchemeStore();
@ -108,7 +97,7 @@ store.$onAction(
onError, // action 抛出或拒绝的钩子
}) => {
after((result) => {
console.log(`store action-${name}回调后：`+result);
console.log(`store action-${name}回调后：` + result);
})
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
onError((error) => {
@ -129,21 +118,21 @@ const initScheme = () => {
onMounted(() => {
list0.value.push(
{
"id":123,
"name":"www"
"id": 123,
"name": "www"
},
{
"id":125,
"name":"rrr"
"id": 125,
"name": "rrr"
}
);
list.value=[]
list.value = []
initScheme();
// @ts-ignore
});
function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'style'|'slots', IComponent>) {
console.log("clone",element)
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots', IComponent>) {
console.log("clone", element)
return {
id: `${element.type}-${uuid()}`,
name: element.name,
@ -161,21 +150,22 @@ function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'sty
loop: {},
};
}
const onEnd = (event:DraggableEvent) => {
console.log("onEnd",event)
const onEnd = (event: DraggableEvent) => {
console.log("onEnd", event)
// const {oldDraggableIndex} = obj;
// store.previewData(store.component[oldDraggableIndex]);
// store.nowComponentsData(store.component[oldDraggableIndex]);
};
const onStart = function (event) {
console.log("onStart",event)
console.log("onStart", event)
}
const onPreviewStart = function (event) {
console.log("onPreviewStart",event)
console.log("onPreviewStart", event)
}
const onPreviewUpdate = function (event) {
console.log("onPreviewUpdate",event)
console.log("onPreviewUpdate", event)
}
const onPreviewStop = function (event) {

44
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>()
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() {
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() {
}
return {previewScheme, components, nowComponentsData, initComponents, initPreviewScheme, getSchemeObj, updateScheme}
}
})