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

add:添加保存scheme为对象的功能

Browse Source
This commit is contained in:
lhj
2024-11-12 00:09:11 +08:00
parent c9c336ec45
commit 9823540dc4
5 changed files with 166 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
preview/views/MainView.vue
View File

@ -15,7 +15,7 @@
<icon-right />
</template>
</a-button>
<a-button type="primary" @click="">保存</a-button>
<a-button type="primary" @click="save">保存</a-button>
<a-button type="primary" @click="view">预览</a-button>
</a-space>
</div>
@ -49,12 +49,10 @@
@update="onPreviewUpdate"
@stop="onPreviewStop"
>
<!-- {{store.previewScheme}}-->
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</VueDraggable>
</div>
<div class="right">
<PropertyEditor :scheme="store.nowComponentsData"></PropertyEditor>
@ -64,20 +62,19 @@
</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";
import {useSchemeStore} from '@/stores/useSchemeStore';
import {IComponent} from "@/type/IComponent";
import DynamicComponent from "@/components/DynamicComponent.vue";
import PropertyEditor from "@/components/PropertyEditor.vue";
import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
let list0 = ref([])
let list = ref([])
import { RadioGroup, Radio } from '@arco-design/web-vue';
import { onMounted, ref, watch } from 'vue';
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';
import PropertyEditor from '@/components/PropertyEditor.vue';
import { DraggableEvent, VueDraggable } from 'vue-draggable-plus';
import axios from 'axios';
let list0 = ref([]);
let list = ref([]);
let componentsList = [];
const store = useSchemeStore();
@ -85,26 +82,26 @@ watch(store, (n) => {
console.log("store发生了变化", n);
});
const baseScheme =
{
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": uuid(),
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
}
const baseScheme = {
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": uuid(),
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
};
store.$onAction(
({
name, // action 名称
@ -113,41 +110,41 @@ store.$onAction(
}) => {
after((result) => {
// console.log(`store action-${name}回调后：` + result);
})
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
});
onError((error) => {
console.warn(
`Failed "${name}" after\nError: ${error}.`
)
})
console.warn(`Failed "${name}" after\nError: ${error}.`);
});
}
)
//初始化scheme
const initScheme = () => {
store.initPreviewScheme([baseScheme])
);
// 初始化scheme
const initScheme = async () => {
try {
const response = await axios.get('http://localhost:3000/load');
if (response.data && Array.isArray(response.data)) {
store.initPreviewScheme(response.data);
} else {
store.initPreviewScheme([baseScheme]);
}
} catch (error) {
console.error('Error loading data:', error);
store.initPreviewScheme([baseScheme]);
}
componentsList = Object.values(componentScheme);
store.initComponents(componentsList);
}
};
onMounted(() => {
list0.value.push(
{
"id": 123,
"name": "www"
},
{
"id": 125,
"name": "rrr"
}
{ "id": 123, "name": "www" },
{ "id": 125, "name": "rrr" }
);
list.value = []
list.value = [];
initScheme();
// @ts-ignore
});
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable'|'children', IComponent>) {
console.log("clone", element)
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()}`,
name: element.name,
@ -156,7 +153,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
class: element.class,
designer: '',
text: element.text,
children: element.children||[],
children: element.children || [],
style: element.style,
visible: element.visible,
slots: element.slots,
@ -167,27 +164,35 @@ 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]);
console.log("onEnd", event);
store.nowComponentsData = event.clonedData;
};
const onStart = function (event) {
console.log("onStart", event)
}
const onPreviewStart = function (event) {
console.log("onPreviewStart", event)
}
const onPreviewUpdate = function (event) {
console.log("onPreviewUpdate", event)
}
const onStart = (event) => {
console.log("onStart", event);
};
const onPreviewStop = function (event) {
console.log(event)
}
const onPreviewStart = (event) => {
console.log("onPreviewStart", event);
};
const onPreviewUpdate = (event) => {
console.log("onPreviewUpdate", event);
};
const onPreviewStop = (event) => {
console.log(event);
};
const save = async () => {
try {
await axios.post('http://localhost:3000/save', store.previewScheme);
alert('保存成功！');
} catch (error) {
console.error('Error saving data:', error);
alert('保存失败！');
}
};
const view = () => {
localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));
@ -278,4 +283,4 @@ const view = () => {
}
}
}
</style>
</style>