chore: 渲染端通过 api 获取数据
This commit is contained in:
wangxuefeng
@@ -1,267 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted, computed, watch } from 'vue';
|
||||
import { ElLoading } from 'element-plus';
|
||||
import Postmate from 'postmate';
|
||||
import { createRenderer } from '@vtj/renderer'
|
||||
import { type BlockSchema } from '@vtj/core'
|
||||
import { getFile } from './io';
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
|
||||
const dsl: BlockSchema ={
|
||||
"name": "List",
|
||||
"locked": false,
|
||||
"inject": [],
|
||||
"state": {
|
||||
"applicationList": {
|
||||
"type": "JSExpression",
|
||||
"value": "[]"
|
||||
}
|
||||
},
|
||||
"lifeCycles": {
|
||||
"mounted": {
|
||||
"type": "JSFunction",
|
||||
"value": "() => {\r\n this.getApplicationList().then(res => {\r\n this.state.applicationList = res.list\r\n })\r\n}"
|
||||
}
|
||||
},
|
||||
"methods": {},
|
||||
"computed": {},
|
||||
"watch": [],
|
||||
"css": "",
|
||||
"props": [],
|
||||
"emits": [],
|
||||
"slots": [],
|
||||
"dataSources": {
|
||||
"getApplicationList": {
|
||||
"type": "api",
|
||||
"ref": "esnarea6u",
|
||||
"name": "getApplicationList",
|
||||
"label": "https://custom-chart-pre-api.shiyue.com/",
|
||||
"transform": {
|
||||
"type": "JSFunction",
|
||||
"value": "(res) => {\n return res;\n}"
|
||||
},
|
||||
"test": {
|
||||
"type": "JSFunction",
|
||||
"value": "() => this.runApi({\n /* 在这里可输入接口参数 */\n})"
|
||||
},
|
||||
"mockTemplate": {
|
||||
"type": "JSFunction"
|
||||
}
|
||||
}
|
||||
},
|
||||
"__VTJ_BLOCK__": true,
|
||||
"__VERSION__": "1740735328808",
|
||||
"id": "ic98nyzx7",
|
||||
"nodes": [
|
||||
{
|
||||
"id": "lvv6dsl62",
|
||||
"name": "ElTable",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": [
|
||||
{
|
||||
"id": "pfh43lnvu",
|
||||
"name": "ElTableColumn",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": "",
|
||||
"props": {
|
||||
"prop": "id",
|
||||
"label": "应用 id",
|
||||
"fixed": "left",
|
||||
"index": 1
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
},
|
||||
{
|
||||
"id": "sz31teqlm",
|
||||
"name": "ElTableColumn",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": [],
|
||||
"props": {
|
||||
"prop": "name",
|
||||
"label": "应用名称"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
},
|
||||
{
|
||||
"id": "45tlsubsf",
|
||||
"name": "ElTableColumn",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": [
|
||||
{
|
||||
"id": "esnffq4yb",
|
||||
"name": "ElTag",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"slot": {
|
||||
"name": "default",
|
||||
"params": [
|
||||
"row",
|
||||
"column",
|
||||
"$index"
|
||||
]
|
||||
},
|
||||
"children": {
|
||||
"type": "JSExpression",
|
||||
"value": "this.context.row.active === true ? '运行中' : '已下架'"
|
||||
},
|
||||
"props": {
|
||||
"closable": false,
|
||||
"disable-transitions": true,
|
||||
"hit": false,
|
||||
"size": "small"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
}
|
||||
],
|
||||
"props": {
|
||||
"prop": "active",
|
||||
"label": "状态"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
},
|
||||
{
|
||||
"id": "wiozj7tbe",
|
||||
"name": "ElTableColumn",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": [
|
||||
{
|
||||
"id": "2320850l3f",
|
||||
"name": "ElButton",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"slot": {
|
||||
"name": "default",
|
||||
"params": [
|
||||
"row",
|
||||
"column",
|
||||
"$index"
|
||||
]
|
||||
},
|
||||
"children": "进入项目",
|
||||
"props": {
|
||||
"type": "primary",
|
||||
"size": "small",
|
||||
"plain": false,
|
||||
"text": true,
|
||||
"bg": false,
|
||||
"loadingIcon": "Loading",
|
||||
"icon": "VtjIconProject"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {
|
||||
"click": {
|
||||
"name": "click",
|
||||
"handler": {
|
||||
"type": "JSFunction",
|
||||
"value": "() => {\r\n\r\n}"
|
||||
},
|
||||
"modifiers": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "1e8qs5f6xn",
|
||||
"name": "ElPopconfirm",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"slot": {
|
||||
"name": "default",
|
||||
"params": [
|
||||
"row",
|
||||
"column",
|
||||
"$index"
|
||||
]
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"id": "1hscpv89nf",
|
||||
"name": "ElButton",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"slot": {
|
||||
"name": "reference",
|
||||
"params": []
|
||||
},
|
||||
"children": "下架",
|
||||
"props": {
|
||||
"size": "small",
|
||||
"plain": false,
|
||||
"text": true,
|
||||
"bg": false,
|
||||
"link": false,
|
||||
"round": false,
|
||||
"circle": false,
|
||||
"loading": false,
|
||||
"icon": "Delete",
|
||||
"type": "warning"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
}
|
||||
],
|
||||
"props": {
|
||||
"title": "是否删除?",
|
||||
"confirmButtonText": "删除",
|
||||
"iconColor": "#FF1100"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {
|
||||
"confirm": {
|
||||
"name": "confirm",
|
||||
"handler": {
|
||||
"type": "JSFunction",
|
||||
"value": "() => {\r\n console.log('this.context.row', this.context.row)\r\n console.log(this.context.row.active)\r\n}"
|
||||
},
|
||||
"modifiers": {
|
||||
"once": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"props": {
|
||||
"prop": "address",
|
||||
"label": "操作",
|
||||
"fixed": "right"
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
}
|
||||
],
|
||||
"props": {
|
||||
"data": {
|
||||
"type": "JSExpression",
|
||||
"value": "this.state.applicationList"
|
||||
},
|
||||
"size": "small",
|
||||
"highlightCurrentRow": true,
|
||||
"show-summary": false,
|
||||
"lazy": true,
|
||||
"scrollbar-always-on": true,
|
||||
"flexible": true,
|
||||
"stripe": true,
|
||||
"showHeader": true
|
||||
},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const handshake = new Postmate.Model({});
|
||||
@@ -271,11 +15,34 @@ handshake.then(parent => {
|
||||
});
|
||||
});
|
||||
|
||||
const { renderer } = createRenderer({
|
||||
dsl,
|
||||
const { data: file, isFetching } = useQuery({
|
||||
queryKey: ['file', '45tncm34d'],
|
||||
queryFn: async () => {
|
||||
return getFile('45tncm34d');
|
||||
},
|
||||
retry: 3,
|
||||
retryDelay: 2000,
|
||||
});
|
||||
|
||||
watch(isFetching, (newVal) => {
|
||||
if (newVal) {
|
||||
ElLoading.service({
|
||||
text: '低代码文件加载中...',
|
||||
});
|
||||
} else {
|
||||
ElLoading.service().close();
|
||||
}
|
||||
});
|
||||
|
||||
const renderer = computed(() => {
|
||||
console.log(file?.value?.dsl.id);
|
||||
if (file?.value?.dsl) {
|
||||
return createRenderer({ dsl: file.value.dsl }).renderer;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="renderer" />
|
||||
<component :is="renderer" v-if="renderer" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user