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

fix:完善根据id查询并修改对应组件的数据

Browse Source
This commit is contained in:
lhj
2024-11-09 23:18:21 +08:00
parent 8600606845
commit 91471748f3
5 changed files with 163 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
preview/views/MainView.vue
View File

@ -36,7 +36,7 @@
@update="onPreviewUpdate"
@stop="onPreviewStop"
>
{{store.previewScheme}}
<!-- {{store.previewScheme}}-->
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
@ -51,6 +51,7 @@
</template>
<script setup lang="ts">
import {RadioGroup,Radio} from '@arco-design/web-vue'
import {onMounted, ref, watch} from 'vue';
import {uuid} from 'lsp-uuid';
import {componentScheme} from "@/schemes/scheme";
@ -58,7 +59,7 @@ import {useSchemeStore} from '@/stores/useSchemeStore';
import {IComponent} from "@/type/IComponent";
import DynamicComponent from "@/components/DynamicComponent.vue";
import PropertyEditor from "@/components/PropertyEditor.vue";
import {VueDraggable} from "vue-draggable-plus";
import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
let list0 = ref([])
@ -132,7 +133,7 @@ onMounted(() => {
// @ts-ignore
});
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable', IComponent>) {
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable'|'children', IComponent>) {
console.log("clone", element)
return {
id: `${element.type}-${uuid()}`,
@ -142,7 +143,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
class: element.class,
designer: '',
text: element.text,
children: [],
children: element.children||[],
style: element.style,
visible: element.visible,
slots: element.slots,
@ -154,6 +155,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
const onEnd = (event: DraggableEvent) => {
console.log("onEnd", event)
store.nowComponentsData=event.clonedData
// const {oldDraggableIndex} = obj;
// store.previewData(store.component[oldDraggableIndex]);
// store.nowComponentsData(store.component[oldDraggableIndex]);

43
src/schemes/components/RadioGroup.json
View File

@ -4,7 +4,9 @@
"id": "radiogroup",
"designer": {},
"text": "",
"props": {},
"props": {
"type": "button"
},
"style": "",
"class": "",
"visible": "",
@ -12,5 +14,42 @@
"disable": "",
"events": {},
"loop": {},
"children": []
"children": [
{
"type": "Radio",
"name": "radio",
"id": "radio",
"designer": {},
"text": "广州",
"props": {
"value": "guangzhou"
},
"style": "",
"class": "",
"visible": "",
"slots": {},
"disable": "",
"events": {},
"loop": {},
"children": []
},
{
"type": "Radio",
"name": "radio",
"id": "radio",
"designer": {},
"text": "深圳",
"props": {
"value": "shenzhen"
},
"style": "",
"class": "",
"visible": "",
"slots": {},
"disable": "",
"events": {},
"loop": {},
"children": []
}
]
}

43
src/schemes/scheme.json
View File

@ -1051,7 +1051,9 @@
"id": "radiogroup",
"designer": {},
"text": "",
"props": {},
"props": {
"type": "button"
},
"style": "",
"class": "",
"visible": "",
@ -1059,7 +1061,44 @@
"disable": "",
"events": {},
"loop": {},
"children": []
"children": [
{
"type": "Radio",
"name": "radio",
"id": "radio",
"designer": {},
"text": "广州",
"props": {
"value": "guangzhou"
},
"style": "",
"class": "",
"visible": "",
"slots": {},
"disable": "",
"events": {},
"loop": {},
"children": []
},
{
"type": "Radio",
"name": "radio",
"id": "radio",
"designer": {},
"text": "深圳",
"props": {
"value": "shenzhen"
},
"style": "",
"class": "",
"visible": "",
"slots": {},
"disable": "",
"events": {},
"loop": {},
"children": []
}
]
},
"Rate": {
"type": "Rate",

43
src/schemes/scheme.ts
View File

@ -1051,7 +1051,9 @@ export const componentScheme = {
"id": "radiogroup",
"designer": {},
"text": "",
"props": {},
"props": {
"type": "button"
},
"style": "",
"class": "",
"visible": "",
@ -1059,7 +1061,44 @@ export const componentScheme = {
"disable": "",
"events": {},
"loop": {},
"children": []
"children": [
{
"type": "Radio",
"name": "radio",
"id": "radio",
"designer": {},
"text": "广州",
"props": {
"value": "guangzhou"
},
"style": "",
"class": "",
"visible": "",
"slots": {},
"disable": "",
"events": {},
"loop": {},
"children": []
},
{
"type": "Radio",
"name": "radio",
"id": "radio",
"designer": {},
"text": "深圳",
"props": {
"value": "shenzhen"
},
"style": "",
"class": "",
"visible": "",
"slots": {},
"disable": "",
"events": {},
"loop": {},
"children": []
}
]
},
"Rate": {
"type": "Rate",

52
src/stores/useSchemeStore.ts
View File

@ -1,5 +1,8 @@
import {defineStore} from 'pinia'
import {IPageComponent} from '@/type/IPageComponent';
import { defineStore } from 'pinia';
import { IPageComponent } from '@/type/IPageComponent';
// 缓存对象
const idToObjectCache = new Map<string, IPageComponent>();
function findObjectById(obj, targetId) {
if (Array.isArray(obj)) {
@ -27,21 +30,34 @@ export const useSchemeStore = defineStore('scheme', {
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() {
actions: {
initPreviewScheme(value) {
this.previewScheme = value;
this.nowComponentsData = value[0];
// 清空缓存
idToObjectCache.clear();
},
initComponents(value) {
this.components = value;
},
getSchemeObj(id) {
// 检查缓存
if (idToObjectCache.has(id)) {
return idToObjectCache.get(id);
}
// 查找并缓存
const obj = findObjectById(this.previewScheme, id);
if (obj) {
idToObjectCache.set(id, obj);
}
return obj;
},
updateScheme(id, updates) {
const obj = this.getSchemeObj(id);
if (obj) {
// 更新对象属性
Object.assign(obj, updates);
}
}
})
}
});