diff --git a/example/mock/db.json b/example/mock/db.json index 55a2a0f..2dc69b8 100644 --- a/example/mock/db.json +++ b/example/mock/db.json @@ -3,7 +3,7 @@ { "position": { "x": 460, - "y": 50 + "y": 60 }, "size": { "width": 80, @@ -12,7 +12,7 @@ "shape": "imove-behavior", "data": { "label": "处理", - "configSchema": "{\n \n}", + "configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"textarea_FyaArd\": {\n \"title\": \"Textarea\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"description\": \"文本编辑框\"\n },\n \"select_jrGW8n\": {\n \"title\": \"Select\",\n \"type\": \"string\",\n \"enum\": [\n \"a\",\n \"b\",\n \"c\"\n ],\n \"enumNames\": [\n \"早\",\n \"中\",\n \"晚\"\n ],\n \"description\": \"下拉单选\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}", "configData": {}, "dependencies": "{\n \n}", "code": "export default async function(ctx) {\n console.log('1212')\n}" @@ -102,7 +102,7 @@ "shape": "imove-start", "data": { "label": "开始", - "configSchema": "{\n \n}", + "configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"input_1aWdPV\": {\n \"title\": \"Input\",\n \"type\": \"string\",\n \"description\": \"输入框\"\n },\n \"dateRangeSelect_mPNhq_\": {\n \"title\": \"DateRange\",\n \"type\": \"range\",\n \"format\": \"date\",\n \"description\": \"日期范围选择\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}", "configData": {}, "trigger": "start", "dependencies": "{\n \n}", @@ -193,7 +193,7 @@ "shape": "imove-branch", "data": { "label": "判断", - "configSchema": "{\n \n}", + "configSchema": "{\"schema\":{}}", "configData": {}, "dependencies": "{\n \n}", "ports": { @@ -344,7 +344,7 @@ "shape": "imove-behavior", "data": { "label": "处理", - "configSchema": "{\n \n}", + "configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"textarea_rdO5RK\": {\n \"title\": \"Textarea\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"description\": \"文本编辑框\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}", "configData": {}, "dependencies": "{\n \n}", "code": "export default async function(ctx) {\n console.log('test')\n}" @@ -461,7 +461,7 @@ "shape": "imove-behavior", "data": { "label": "在线运行测试", - "configSchema": "{\n \n}", + "configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"input_CCw1sQ\": {\n \"title\": \"Input\",\n \"type\": \"string\",\n \"description\": \"输入框\"\n },\n \"allBoolean_fREQq-\": {\n \"title\": \"Switch\",\n \"type\": \"boolean\",\n \"ui:widget\": \"switch\",\n \"description\": \"开关控制\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}", "configData": {}, "dependencies": "{\n \"lodash.get\": \"4.4.2\"\n}", "code": "import fpget from 'lodash.get';\n\nexport default async function(ctx) {\n const obj = {a: {b: 'hello imove~'}};\n console.log(fpget(obj, 'a.b'));\n return ctx.getPipe();\n}" @@ -538,6 +538,536 @@ }, "id": "1d174369-929b-4bd5-8841-f271399c4a4f", "zIndex": 9 + }, + { + "position": { + "x": 460, + "y": 230 + }, + "size": { + "width": 80, + "height": 40 + }, + "shape": "imove-branch", + "data": { + "label": "判断", + "configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"textarea_PiznGE\": {\n \"title\": \"Textarea\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"description\": \"文本编辑框\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}", + "configData": {}, + "dependencies": "{\n \n}", + "ports": { + "right": { + "condition": "true" + }, + "bottom": { + "condition": "false" + } + }, + "code": "export default async function(ctx) {\n return true;\n}" + }, + "ports": { + "groups": { + "top": { + "position": "top", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "right": { + "zIndex": 999999999, + "position": "right", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + }, + "label": { + "position": "right" + } + }, + "bottom": { + "zIndex": 999999999, + "position": "bottom", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + }, + "label": { + "position": "bottom" + } + }, + "left": { + "position": "left", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + } + }, + "items": [ + { + "id": "top", + "group": "top" + }, + { + "id": "right", + "group": "right", + "attrs": { + "text": { + "text": "是" + } + } + }, + { + "id": "bottom", + "group": "bottom", + "attrs": { + "text": { + "text": "否" + } + } + }, + { + "id": "left", + "group": "left" + } + ] + }, + "id": "b878444f-8654-42a3-848c-e8409d76e0a7", + "zIndex": 10 + }, + { + "position": { + "x": 400, + "y": 400 + }, + "size": { + "width": 80, + "height": 40 + }, + "shape": "imove-branch", + "data": { + "label": "判断", + "configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"textarea_8LSzk5\":{\"title\":\"Textarea\",\"type\":\"string\",\"format\":\"textarea\",\"description\":\"文本编辑框\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}", + "configData": {}, + "dependencies": "{\n \n}", + "ports": { + "right": { + "condition": "true" + }, + "bottom": { + "condition": "false" + } + }, + "code": "export default async function(ctx) {\n return true;\n}" + }, + "ports": { + "groups": { + "top": { + "position": "top", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "right": { + "zIndex": 999999999, + "position": "right", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + }, + "label": { + "position": "right" + } + }, + "bottom": { + "zIndex": 999999999, + "position": "bottom", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + }, + "label": { + "position": "bottom" + } + }, + "left": { + "position": "left", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + } + }, + "items": [ + { + "id": "top", + "group": "top" + }, + { + "id": "right", + "group": "right", + "attrs": { + "text": { + "text": "是" + } + } + }, + { + "id": "bottom", + "group": "bottom", + "attrs": { + "text": { + "text": "否" + } + } + }, + { + "id": "left", + "group": "left" + } + ] + }, + "id": "1d3c25c2-13ef-421a-a233-84e3dd80fda9", + "zIndex": 11 + }, + { + "position": { + "x": 220, + "y": 510 + }, + "size": { + "width": 80, + "height": 80 + }, + "shape": "imove-start", + "data": { + "label": "开始", + "configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"textarea_g4WHTq\":{\"title\":\"Textarea\",\"type\":\"string\",\"format\":\"textarea\",\"description\":\"文本编辑框\"},\"select_QkHoSL\":{\"title\":\"Select\",\"type\":\"string\",\"enum\":[\"a\",\"b\",\"c\"],\"enumNames\":[\"早\",\"中\",\"晚\"],\"description\":\"下拉单选\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}", + "configData": {}, + "trigger": "start", + "dependencies": "{\n \n}", + "code": "export default async function(ctx) {\n \n}" + }, + "ports": { + "groups": { + "top": { + "position": "top", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "right": { + "position": "right", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "bottom": { + "position": "bottom", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "left": { + "position": "left", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + } + }, + "items": [ + { + "id": "top", + "group": "top" + }, + { + "id": "right", + "group": "right" + }, + { + "id": "bottom", + "group": "bottom" + }, + { + "id": "left", + "group": "left" + } + ] + }, + "id": "2eed7162-e595-4715-a444-034a21a3ebc3", + "zIndex": 12 + }, + { + "position": { + "x": 30, + "y": 150 + }, + "size": { + "width": 80, + "height": 40 + }, + "shape": "imove-branch", + "data": { + "label": "判断", + "configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"textarea_pGP_J4\":{\"title\":\"Textarea\",\"type\":\"string\",\"format\":\"textarea\",\"description\":\"文本编辑框\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}", + "configData": {}, + "dependencies": "{\n \n}", + "ports": { + "right": { + "condition": "true" + }, + "bottom": { + "condition": "false" + } + }, + "code": "export default async function(ctx) {\n return true;\n}" + }, + "ports": { + "groups": { + "top": { + "position": "top", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "right": { + "zIndex": 999999999, + "position": "right", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + }, + "label": { + "position": "right" + } + }, + "bottom": { + "zIndex": 999999999, + "position": "bottom", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + }, + "label": { + "position": "bottom" + } + }, + "left": { + "position": "left", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + } + }, + "items": [ + { + "id": "top", + "group": "top" + }, + { + "id": "right", + "group": "right", + "attrs": { + "text": { + "text": "是" + } + } + }, + { + "id": "bottom", + "group": "bottom", + "attrs": { + "text": { + "text": "否" + } + } + }, + { + "id": "left", + "group": "left" + } + ] + }, + "id": "5ba8aa3b-5604-426b-9832-92ff730b14d1", + "zIndex": 13 + }, + { + "position": { + "x": 380, + "y": 489 + }, + "size": { + "width": 80, + "height": 80 + }, + "shape": "imove-start", + "data": { + "label": "开始", + "configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"dateRangeSelect_H5O2gc\":{\"title\":\"DateRange\",\"type\":\"range\",\"format\":\"date\",\"description\":\"日期范围选择\"},\"timeSelect_VfVjuV\":{\"title\":\"TimePicker\",\"type\":\"string\",\"format\":\"time\",\"description\":\"时间选择\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}", + "configData": {}, + "trigger": "start", + "dependencies": "{\n \n}", + "code": "export default async function(ctx) {\n \n}" + }, + "ports": { + "groups": { + "top": { + "position": "top", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "right": { + "position": "right", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "bottom": { + "position": "bottom", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "left": { + "position": "left", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + } + }, + "items": [ + { + "id": "top", + "group": "top" + }, + { + "id": "right", + "group": "right" + }, + { + "id": "bottom", + "group": "bottom" + }, + { + "id": "left", + "group": "left" + } + ] + }, + "id": "e35b31b6-3116-41f7-8fcb-c9270bcfb549", + "zIndex": 14 } ] } \ No newline at end of file diff --git a/packages/core/src/components/schemaForm/index.tsx b/packages/core/src/components/schemaForm/index.tsx index f6f1872..0a32dcb 100644 --- a/packages/core/src/components/schemaForm/index.tsx +++ b/packages/core/src/components/schemaForm/index.tsx @@ -23,7 +23,7 @@ const formLayout = { const SchemaForm: React.FC = (props) => { return ( - Object.keys(props.schema).length > 0 ?
+ props.schema && Object.keys(props.schema).length > 0 ? {props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => { const obj = props.schema.properties[key] const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { diff --git a/packages/core/src/mods/settingBar/components/json/index.tsx b/packages/core/src/mods/settingBar/components/json/index.tsx index 2b18875..6b40f56 100644 --- a/packages/core/src/mods/settingBar/components/json/index.tsx +++ b/packages/core/src/mods/settingBar/components/json/index.tsx @@ -1,30 +1,41 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef, useMemo } from 'react'; import Generator from 'fr-generator'; import 'antd/es/modal/style'; import 'antd/es/button/style'; import 'antd/es/message/style'; import JsonView from 'react-json-view'; import { Button, Tabs, Modal, Card, message } from 'antd'; -const { TabPane } = Tabs; import { safeParse } from '../../../../utils'; import CodeEditor from '../../../../components/codeEditor'; import SchemaForm from '../../../../components/schemaForm' - import { compData } from './json' import styles from './index.module.less'; +const { TabPane } = Tabs; interface IJsonProps { value: any; name: string; title: string; + selectedCell?: any; isConfig?: boolean; // true为为可视化、json联动输入框,false为普通json输入框 onValueChange: (value: string) => void; } const Json: React.FC = (props) => { - const { title, value, isConfig, onValueChange } = props; + const { title, value, isConfig, onValueChange, selectedCell } = props; const [visible, setVisible] = useState(false); const [schema, setSchema] = useState({}) + const defaultSchema = useMemo(() => { + if (selectedCell) { + const { configSchema } = selectedCell.getData(); + if (configSchema) { + const schema = JSON.parse(configSchema).schema + setSchema(schema) + return schema + } + } + }, [selectedCell]) + // events const onClickEdit = (): void => { setVisible(true); @@ -63,6 +74,7 @@ const Json: React.FC = (props) => { onOk={onClickOk} onCancel={onClickCancel} changeSchema={changeSchema} + defaultSchema={defaultSchema} /> ); @@ -73,15 +85,28 @@ interface IEditorModalProps { title: string; value: string; isConfig?: boolean; + defaultSchema: object; onOk: (val: string) => void; onCancel: () => void; changeSchema: (val: object) => void } const EditModal: React.FC = (props) => { - const { visible, title, value, onOk, onCancel } = props; + const { visible, title, value, onOk, onCancel, defaultSchema } = props; const [json, setJson] = useState(''); - const formRef = useRef() + const formRef = useRef() + + useEffect(() => { + if (defaultSchema && Object.keys(defaultSchema).length > 0) { + let codeObj = { + "schema": Object.assign({}, defaultSchema), + "displayType": "row", + "showDescIcon": true + } + formRef.current && formRef.current.setValue(codeObj) + setJson(JSON.stringify(codeObj, null, 2)) + } + }, [formRef.current]) const tabChange = (tab: string) => { const JSON_TAB = 'JsonTab' @@ -91,7 +116,6 @@ const EditModal: React.FC = (props) => { } const form2code = () => { - // @ts-ignore const formSchema = formRef.current && formRef.current.getValue() setJson(JSON.stringify(formSchema, null, 2)) } @@ -99,7 +123,6 @@ const EditModal: React.FC = (props) => { const code2form = () => { try { const codeObj = JSON.parse(json) - // @ts-ignore formRef.current.setValue(codeObj) } catch (error) { console.log('can\'t parse code string to form schema, the error is:', error.message); @@ -127,12 +150,13 @@ const EditModal: React.FC = (props) => { try { if (props.isConfig) { if (JSON.stringify(JSON.parse(json)) === '{}') { - // @ts-ignore const value = formRef.current && formRef.current.getValue() props.changeSchema(value.schema) - setJson(value) + setJson(JSON.stringify(value, null, 2)) + onOk(JSON.stringify(value)); } else { props.changeSchema(JSON.parse(json).schema) + onOk(json); } } else { JSON.parse(json); diff --git a/packages/core/src/mods/settingBar/mods/basic/index.tsx b/packages/core/src/mods/settingBar/mods/basic/index.tsx index 23a8130..b6811d9 100644 --- a/packages/core/src/mods/settingBar/mods/basic/index.tsx +++ b/packages/core/src/mods/settingBar/mods/basic/index.tsx @@ -86,6 +86,7 @@ const Basic: React.FC = (props) => {