From 8118b5e7ccc019a06721907adc9126eb5bc4fefa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=A3=E5=BD=AC?= Date: Sat, 22 Aug 2020 07:57:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E5=90=AF=E7=94=A8vision?= =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/index.html | 3 +- packages/demo/public/vision-schema.json | 887 ++++++++++++++++++++ packages/demo/src/index.ts | 4 +- packages/demo/src/vision/index.ts | 12 +- packages/editor-preset-vision/src/editor.ts | 14 +- 5 files changed, 907 insertions(+), 13 deletions(-) create mode 100644 packages/demo/public/vision-schema.json diff --git a/packages/demo/public/index.html b/packages/demo/public/index.html index e10b9be7f..81b31c8fe 100644 --- a/packages/demo/public/index.html +++ b/packages/demo/public/index.html @@ -71,8 +71,9 @@
- --> diff --git a/packages/demo/public/vision-schema.json b/packages/demo/public/vision-schema.json new file mode 100644 index 000000000..145462000 --- /dev/null +++ b/packages/demo/public/vision-schema.json @@ -0,0 +1,887 @@ +{ + "componentName": "Page", + "id": "node_1", + "props": { + "ref": "outterView", + "autoLoading": true, + "style": { + "padding": 20 + } + }, + "fileName": "test", + "dataSource": { + "list": [] + }, + "state": { + "text": "outter", + "abc": [1, 2, 3] + }, + "children": [ + { + "componentName": "Steps", + "id": "node_1i", + "props": { + "dataSource": [ + { + "title": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "报名" + }, + "status": "", + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "Open the refrigerator door" + }, + "customSwitcher": false + }, + { + "title": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "信息收集" + }, + "status": "", + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "Put the elephant in the refrigerator" + }, + "customSwitcher": false + }, + { + "title": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "审核" + }, + "status": "", + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "Close the refrigerator door" + }, + "customSwitcher": false + } + ], + "current": 1, + "shape": "circle", + "direction": "horizontal", + "labelPlacement": "vertical", + "readOnly": false, + "animation": true, + "__style__": {}, + "fieldId": "steps_kadcb0ov" + } + }, + { + "componentName": "Title", + "id": "node_b", + "props": { + "text": "请填写以下人员信息表单", + "type": "primary", + "noDecoration": false, + "__style__": {}, + "fieldId": "title_kadcb0nw" + } + }, + { + "componentName": "Paragraph", + "id": "node_e", + "props": { + "content": "人最宝贵的是生命。它给予我们只有一次。人的一生应当这样度过：当他回首往事时不因虚度年华而悔恨，也不因碌碌无为而羞耻。这样在他临死的时侯就能够说:我已把我整个的生命和全部精力都献给最壮丽的事业——为人类的解放而斗争。", + "size": "medium", + "type": "long", + "__style__": {}, + "fieldId": "paragraph_kadcb0nz" + } + }, + { + "componentName": "ColumnsLayout", + "id": "node_r", + "props": { + "layout": "6:6", + "columnGap": "16px", + "rowGap": "16px", + "__style__": { + "marginTop": "24px" + }, + "fieldId": "columnsLayout_kadcb0ob" + }, + "children": [ + { + "componentName": "Column", + "id": "node_s", + "props": { + "fieldId": "column_kadcb0o9", + "__style__": {} + }, + "children": [ + { + "componentName": "Card", + "id": "node_n", + "props": { + "title": "基本信息", + "subTitle": { + "type": "i18n", + "zh_CN": "", + "en_US": "" + }, + "extra": { + "type": "JSSlot", + "params": null, + "value": [ + { + "componentName": "Icon", + "id": "node_q", + "props": { + "type": { + "useType": true, + "baseType": "smile", + "otherType": "smile" + }, + "size": "medium", + "__style__": {}, + "fieldId": "icon_kadcb0o8" + } + } + ] + }, + "showTitleBullet": true, + "showHeadDivider": true, + "dividerNoInset": false, + "contentHeight": "", + "__style__": {}, + "fieldId": "card_kadcb0o7" + }, + "children": [ + { + "componentName": "CardContent", + "id": "node_o", + "props": {}, + "children": [ + { + "componentName": "Form", + "id": "node_f", + "props": { + "labelAlign": "top", + "size": "medium", + "behavior": "NORMAL", + "autoValidate": true, + "scrollToFirstError": true, + "autoUnmount": true, + "fieldOptions": {}, + "__style__": { + "marginTop": "24px" + }, + "fieldId": "form_kadcb0o5" + }, + "children": [ + { + "componentName": "TextField", + "id": "node_g", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "姓名", + "value": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "Please enter", + "zh_CN": "请输入" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "htmlType": "input", + "state": "", + "rows": 4, + "autoHeight": false, + "hasClear": false, + "trim": false, + "autoFocus": false, + "addonBefore": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "addonAfter": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "validation": [], + "hasLimitHint": false, + "cutString": false, + "__style__": {}, + "fieldId": "textField_kadcb0o0" + } + }, + { + "componentName": "RadioField", + "id": "node_14", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "性别", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "shape": "default", + "itemDirection": "hoz", + "dataSource": [ + { + "text": { + "zh_CN": "选项一", + "en_US": "Option 1", + "type": "i18n", + "use": "zh_CN" + }, + "value": "1", + "disable": false + }, + { + "text": { + "zh_CN": "选项二", + "en_US": "Option 2", + "type": "i18n", + "use": "zh_CN" + }, + "value": "2", + "disable": false + }, + { + "text": { + "zh_CN": "选项三", + "en_US": "Option 3", + "type": "i18n", + "use": "zh_CN" + }, + "value": "3", + "disable": true + } + ], + "validation": [], + "__style__": {}, + "fieldId": "radioField_kadcb0ok" + } + }, + { + "componentName": "SelectField", + "id": "node_h", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "学校", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "please select", + "zh_CN": "请选择" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "mode": "single", + "hasClear": false, + "hasSelectAll": false, + "showSearch": false, + "filterLocal": true, + "dataSource": [ + { + "text": { + "zh_CN": "选项一", + "en_US": "Option 1", + "type": "i18n" + }, + "value": "1" + }, + { + "text": { + "zh_CN": "选项二", + "en_US": "Option 2", + "type": "i18n" + }, + "value": "2" + }, + { + "text": { + "zh_CN": "选项三", + "en_US": "Option 3", + "type": "i18n" + }, + "value": "3" + } + ], + "validation": [], + "notFoundContent": { + "type": "i18n", + "use": "zh_CN", + "en_US": null + }, + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "searchDelay": 300, + "__style__": {}, + "fieldId": "select_kadcb0o1" + } + }, + { + "componentName": "Div", + "id": "node_i", + "props": { + "behavior": "NORMAL", + "__style__": {}, + "fieldId": "div_kadcb0o4" + }, + "children": [ + { + "componentName": "Button", + "id": "node_j", + "props": { + "content": { + "type": "i18n", + "en_US": "Ok", + "zh_CN": "提交" + }, + "type": "primary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": ":root {\n margin-right: 15px;\n}", + "fieldId": "button_kadcb0o2", + "onClick": { + "type": "JSExpression", + "value": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "compiled": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}" + } + } + ] + } + } + }, + { + "componentName": "Button", + "id": "node_k", + "props": { + "content": { + "type": "i18n", + "en_US": "Reset", + "zh_CN": "重置" + }, + "type": "secondary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": {}, + "fieldId": "button_kadcb0o3", + "onClick": { + "type": "JSExpression", + "value": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "compiled": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}" + } + } + ] + } + } + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "componentName": "Column", + "id": "node_t", + "props": { + "fieldId": "column_kadcb0oa", + "__style__": {} + }, + "children": [ + { + "componentName": "Card", + "id": "node_u", + "props": { + "title": { + "type": "JSSlot", + "params": null, + "value": [ + { + "componentName": "Icon", + "id": "node_18", + "props": { + "type": { + "useType": true, + "baseType": "smile", + "otherType": "smile" + }, + "size": "medium", + "__style__": {}, + "fieldId": "icon_kadcb0on" + } + }, + { + "componentName": "Link", + "id": "node_19", + "props": { + "content": { + "type": "i18n", + "use": "zh_CN", + "en_US": "link text", + "zh_CN": "扩展信息" + }, + "textOverflow": false, + "link": { + "type": "page", + "page": null, + "router": { + "type": "JSExpression", + "value": "this.utils.router" + } + }, + "__style__": {}, + "fieldId": "link_kadcb0oo" + } + } + ] + }, + "subTitle": { + "type": "i18n", + "zh_CN": "", + "en_US": "" + }, + "extra": { + "type": "JSSlot", + "params": null, + "value": [ + { + "componentName": "Icon", + "id": "node_1a", + "props": { + "type": { + "useType": true, + "baseType": "smile", + "otherType": "smile" + }, + "size": "xl", + "__style__": {}, + "fieldId": "icon_kadcb0op" + } + } + ] + }, + "showTitleBullet": true, + "showHeadDivider": true, + "dividerNoInset": false, + "contentHeight": "", + "__style__": {}, + "fieldId": "card_kadcb0oc" + }, + "children": [ + { + "componentName": "CardContent", + "id": "node_v", + "props": {}, + "children": [ + { + "componentName": "Form", + "id": "node_x", + "props": { + "labelAlign": "top", + "size": "medium", + "behavior": "NORMAL", + "autoValidate": true, + "scrollToFirstError": true, + "autoUnmount": true, + "fieldOptions": {}, + "__style__": { + "marginTop": "24px" + }, + "fieldId": "form_kadcb0oi" + }, + "children": [ + { + "componentName": "TextField", + "id": "node_y", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "职位", + "value": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "Please enter", + "zh_CN": "请输入" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "htmlType": "input", + "state": "", + "rows": 4, + "autoHeight": false, + "hasClear": false, + "trim": false, + "autoFocus": false, + "addonBefore": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "addonAfter": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "validation": [], + "hasLimitHint": false, + "cutString": false, + "__style__": {}, + "fieldId": "textField_kadcb0od" + } + }, + { + "componentName": "DateField", + "id": "node_15", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "入职时间", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "please select", + "zh_CN": "请选择" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "format": "YYYY-MM-DD", + "returnType": "timestamp", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "hasClear": true, + "resetTime": false, + "disabledDate": false, + "validation": [], + "__style__": {}, + "fieldId": "dateField_kadcb0ol" + } + }, + { + "componentName": "SelectField", + "id": "node_z", + "props": { + "__category__": "form", + "__useMediator": "value", + "label": "下拉选择", + "value": "", + "labelAlign": "top", + "labelColSpan": 4, + "labelColOffset": 0, + "wrapperColSpan": 0, + "wrapperColOffset": 0, + "labelTextAlign": "right", + "placeholder": { + "type": "i18n", + "use": "zh_CN", + "en_US": "please select", + "zh_CN": "请选择" + }, + "tips": { + "zh_CN": "", + "en_US": "", + "type": "i18n" + }, + "size": "medium", + "behavior": "NORMAL", + "labelTipsTypes": "none", + "labelTipsIcon": "", + "labelTipsText": { + "type": "i18n", + "use": "zh_CN", + "en_US": null, + "zh_CN": "" + }, + "mode": "single", + "hasClear": false, + "hasSelectAll": false, + "showSearch": false, + "filterLocal": true, + "dataSource": [ + { + "text": { + "zh_CN": "选项一", + "en_US": "Option 1", + "type": "i18n" + }, + "value": "1" + }, + { + "text": { + "zh_CN": "选项二", + "en_US": "Option 2", + "type": "i18n" + }, + "value": "2" + }, + { + "text": { + "zh_CN": "选项三", + "en_US": "Option 3", + "type": "i18n" + }, + "value": "3" + } + ], + "validation": [], + "notFoundContent": { + "type": "i18n", + "use": "zh_CN", + "en_US": null + }, + "hasArrow": true, + "hasBorder": true, + "autoWidth": true, + "searchDelay": 300, + "__style__": {}, + "fieldId": "select_kadcb0oe" + } + }, + { + "componentName": "Div", + "id": "node_10", + "props": { + "behavior": "NORMAL", + "__style__": {}, + "fieldId": "div_kadcb0oh" + }, + "children": [ + { + "componentName": "Button", + "id": "node_11", + "props": { + "content": { + "type": "i18n", + "en_US": "Ok", + "zh_CN": "提交" + }, + "type": "primary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": ":root {\n margin-right: 15px;\n}", + "fieldId": "button_kadcb0of", + "onClick": { + "type": "JSExpression", + "value": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}", + "compiled": "function onSubmit(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').submit(function(data, error) {\n if (data) {\n console.log(data);\n // 往后端提交数据，一般写法如下\n // this.dataSourceMap['xxx'].load(data).then(() => {\n // this.utils.toast({\n // type: 'success',\n // title: '提交成功'\n // });\n // });\n }\n });\n}" + } + } + ] + } + } + }, + { + "componentName": "Button", + "id": "node_12", + "props": { + "content": { + "type": "i18n", + "en_US": "Reset", + "zh_CN": "重置" + }, + "type": "secondary", + "size": "medium", + "behavior": "NORMAL", + "baseIcon": "", + "otherIcon": "", + "loading": false, + "triggerEventsWhenLoading": false, + "__style__": {}, + "fieldId": "button_kadcb0og", + "onClick": { + "type": "JSExpression", + "value": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "extType": "function", + "events": [ + { + "name": "onClick", + "params": {}, + "func": { + "type": "js", + "source": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}", + "compiled": "function onReset(){\n // 请将 fieldId 替换为表单容器的 fieldId\n this.$('fieldId').reset();\n}" + } + } + ] + } + } + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] +} diff --git a/packages/demo/src/index.ts b/packages/demo/src/index.ts index d4c178537..646bccd87 100644 --- a/packages/demo/src/index.ts +++ b/packages/demo/src/index.ts @@ -1,2 +1,2 @@ -// import './vision'; -import './editor'; +import './vision'; +// import './editor'; diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts index bdedc2e25..db3b40859 100644 --- a/packages/demo/src/vision/index.ts +++ b/packages/demo/src/vision/index.ts @@ -14,14 +14,13 @@ import ActionPane from '@ali/ve-action-pane'; import SourceEditor from '@ali/lowcode-plugin-source-editor'; import fetchContext from '@ali/vu-legao-design-fetch-context'; import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; -import loadUrls from './loader'; -import { upgradeAssetsBundle } from './upgrade-assets'; import { isCSSUrl } from '@ali/lowcode-utils'; import VariableSetter from '@ali/vs-variable-setter'; import _isArray from "lodash/isArray"; import _isObject from "lodash/isObject"; import _get from 'lodash/get'; import funcParser from '@ali/vu-function-parser'; + import { NumberSetter, BoolSetter, @@ -39,6 +38,13 @@ import { ActionSetter, } from '@ali/visualengine-utils'; +import PropType from 'prop-types'; + +import loadUrls from './loader'; +import { upgradeAssetsBundle } from './upgrade-assets'; + +console.log(PropType); + const { editor, skeleton, context, HOOKS, Trunk } = Engine; Trunk.registerSetter('Input', TextSetter); @@ -146,7 +152,7 @@ async function loadAssets() { async function loadSchema() { // const schema = await editor.utils.get('./rax.json'); - const schema = await editor.utils.get('./schema.json'); + const schema = await editor.utils.get('./vision-schema.json'); editor.set('schema', schema); // editor.set('renderEnv', 'rax'); // editor.set('clientTypes', ['mobile']); diff --git a/packages/editor-preset-vision/src/editor.ts b/packages/editor-preset-vision/src/editor.ts index caeb0f920..a349295e7 100644 --- a/packages/editor-preset-vision/src/editor.ts +++ b/packages/editor-preset-vision/src/editor.ts @@ -192,13 +192,13 @@ function compatiableReducer(props: any) { }; } // 为了能降级到老版本，建议在后期版本去掉以下代码 - if (isJSExpression(props) && !props.events) { - return { - type: 'variable', - value: props.mock, - variable: props.value, - } - } + // if (isJSExpression(props) && !props.events) { + // return { + // type: 'variable', + // value: props.mock, + // variable: props.value, + // } + // } const newProps: any = {}; Object.entries(props).forEach(([key, val]) => { newProps[key] = compatiableReducer(val);