yangpei
4 years ago
6 changed files with 640 additions and 73 deletions
@ -0,0 +1,506 @@ |
|||||
|
export default [ |
||||
|
{ |
||||
|
"text": '简单输入框', |
||||
|
"name": 'input', |
||||
|
"schema": { |
||||
|
"title": "简单输入框", |
||||
|
"type": "string", |
||||
|
"ui:options": { |
||||
|
"placeholder": "名称" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '简单文本编辑框', |
||||
|
"name": 'textarea', |
||||
|
"schema": { |
||||
|
"title": "简单文本编辑框", |
||||
|
"type": "string", |
||||
|
"format": "textarea" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '带清空x按钮', |
||||
|
"name": 'inputX', |
||||
|
"schema": { |
||||
|
"title": "字符串", |
||||
|
"description": "带清空x按钮", |
||||
|
"type": "string", |
||||
|
"default": "input placeholder", |
||||
|
"ui:options": { |
||||
|
"allowClear": true |
||||
|
}, |
||||
|
"ui:width": "50%" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '前置/后置标签', |
||||
|
"name": 'stringPreSub', |
||||
|
"schema": { |
||||
|
"title": "前置/后置标签", |
||||
|
"type": "string", |
||||
|
"ui:options": { |
||||
|
"addonBefore": "长度", |
||||
|
"addonAfter": "px" |
||||
|
}, |
||||
|
"ui:width": "50%" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '颜色选择', |
||||
|
"name": 'color', |
||||
|
"schema": { |
||||
|
"title": "颜色选择", |
||||
|
"type": "string", |
||||
|
"format": "color" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '日期选择', |
||||
|
"name": 'date', |
||||
|
"schema": { |
||||
|
"title": "日期选择", |
||||
|
"type": "string", |
||||
|
"format": "date" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '上传文件', |
||||
|
"name": 'upload', |
||||
|
"schema": { |
||||
|
"title": "上传文件", |
||||
|
"type": "string", |
||||
|
"format": "upload", |
||||
|
"ui:options": { |
||||
|
"action": "https://www.mocky.io/v2/5cc8019d300000980a055e76" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": 'number类', |
||||
|
"name": 'allNumber', |
||||
|
"schema": { |
||||
|
"title": "number类", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"number1": { |
||||
|
"title": "数字输入框", |
||||
|
"description": "1 - 1000", |
||||
|
"type": "number", |
||||
|
"min": 1, |
||||
|
"max": 1000 |
||||
|
}, |
||||
|
"number2": { |
||||
|
"title": "带滑动条", |
||||
|
"type": "number", |
||||
|
"ui:widget": "slider" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": 'boolean类', |
||||
|
"name": 'allBoolean', |
||||
|
"schema": { |
||||
|
"title": "boolean类", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"radio": { |
||||
|
"title": "是否通过", |
||||
|
"type": "boolean" |
||||
|
}, |
||||
|
"switch": { |
||||
|
"title": "开关控制", |
||||
|
"type": "boolean", |
||||
|
"ui:widget": "switch" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": 'range类', |
||||
|
"name": 'allRange', |
||||
|
"schema": { |
||||
|
"title": "range类", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"dateRange": { |
||||
|
"title": "日期范围", |
||||
|
"type": "range", |
||||
|
"format": "dateTime", |
||||
|
"ui:options": { |
||||
|
"placeholder": [ |
||||
|
"开始时间", |
||||
|
"结束时间" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '选择类', |
||||
|
"name": 'allEnum', |
||||
|
"schema": { |
||||
|
"title": "选择类", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"select": { |
||||
|
"title": "单选", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
"a", |
||||
|
"b", |
||||
|
"c" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"早", |
||||
|
"中", |
||||
|
"晚" |
||||
|
] |
||||
|
}, |
||||
|
"radio": { |
||||
|
"title": "单选", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
"a", |
||||
|
"b", |
||||
|
"c" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"早", |
||||
|
"中", |
||||
|
"晚" |
||||
|
], |
||||
|
"ui:widget": "radio" |
||||
|
}, |
||||
|
"multiSelect": { |
||||
|
"title": "多选", |
||||
|
"description": "下拉多选", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"enum": [ |
||||
|
"A", |
||||
|
"B", |
||||
|
"C", |
||||
|
"D" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"杭州", |
||||
|
"武汉", |
||||
|
"湖州", |
||||
|
"贵阳" |
||||
|
], |
||||
|
"ui:widget": "multiSelect" |
||||
|
}, |
||||
|
"boxes": { |
||||
|
"title": "多选", |
||||
|
"description": "checkbox", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"enum": [ |
||||
|
"A", |
||||
|
"B", |
||||
|
"C", |
||||
|
"D" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"杭州", |
||||
|
"武汉", |
||||
|
"湖州", |
||||
|
"贵阳" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '可折叠对象', |
||||
|
"name": 'obj1', |
||||
|
"schema": { |
||||
|
"title": "可折叠对象", |
||||
|
"description": "这是个对象类型", |
||||
|
"type": "object", |
||||
|
"ui:options": { |
||||
|
"collapsed": true |
||||
|
}, |
||||
|
"properties": { |
||||
|
"input1": { |
||||
|
"title": "输入框1", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"input2": { |
||||
|
"title": "输入框2", |
||||
|
"type": "string" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '对象数组', |
||||
|
"name": 'listName2', |
||||
|
"schema": { |
||||
|
"title": "对象数组", |
||||
|
"description": "对象数组嵌套功能", |
||||
|
"type": "array", |
||||
|
"minItems": 1, |
||||
|
"maxItems": 3, |
||||
|
"ui:displayType": "row", |
||||
|
"items": { |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"input1": { |
||||
|
"title": "简单输入框", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"selet1": { |
||||
|
"title": "单选", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
"a", |
||||
|
"b", |
||||
|
"c" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"早", |
||||
|
"中", |
||||
|
"晚" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": 'url输入框', |
||||
|
"name": 'url', |
||||
|
"schema": { |
||||
|
"title": "url输入框", |
||||
|
"type": "string", |
||||
|
"format": "url" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '图片展示', |
||||
|
"name": 'image', |
||||
|
"schema": { |
||||
|
"title": "图片展示", |
||||
|
"type": "string", |
||||
|
"format": "image" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": 'email输入框', |
||||
|
"name": 'email', |
||||
|
"schema": { |
||||
|
"title": "email输入框", |
||||
|
"type": "string", |
||||
|
"format": "email" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": 'list套list', |
||||
|
"name": 'listAndList', |
||||
|
"schema": { |
||||
|
"title": "list套list", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"input1": { |
||||
|
"title": "简单输入框", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"list4": { |
||||
|
"title": "数组", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"input1": { |
||||
|
"title": "输入框1", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"input2": { |
||||
|
"title": "输入框2", |
||||
|
"type": "string" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
"ui:options": { |
||||
|
"drawer": true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '整体隐藏', |
||||
|
"name": 'hide', |
||||
|
"schema": { |
||||
|
"title": "整体隐藏", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"showMore": { |
||||
|
"title": "显示更多", |
||||
|
"type": "boolean" |
||||
|
}, |
||||
|
"x1": { |
||||
|
"title": "输入框1", |
||||
|
"type": "string", |
||||
|
"ui:hidden": "{{rootValue.showMore === false}}" |
||||
|
}, |
||||
|
"x2": { |
||||
|
"title": "输入框2", |
||||
|
"type": "string", |
||||
|
"ui:hidden": "{{rootValue.showMore === false}}" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '选项联动', |
||||
|
"name": 'link', |
||||
|
"schema": { |
||||
|
"title": "选项联动", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"bi": { |
||||
|
"title": "汇款币种", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
"rmb", |
||||
|
"dollar" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"人民币", |
||||
|
"美元" |
||||
|
] |
||||
|
}, |
||||
|
"inputName": { |
||||
|
"title": "金额", |
||||
|
"description": "{{rootValue.bi === 'dollar' ? '一次汇款不超过150美元':'一次汇款不超过1000元'}}", |
||||
|
"type": "string", |
||||
|
"ui:options": { |
||||
|
"addonBefore": "{{rootValue.bi === 'rmb'? '¥':'$'}}", |
||||
|
"addonAfter": "{{rootValue.bi === 'rmb'? '元':'美元'}}" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '动态增加', |
||||
|
"name": 'listAdd', |
||||
|
"schema": { |
||||
|
"title": "列表/显示不同组件", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"ruleList": { |
||||
|
"title": "球员筛选", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"attr": { |
||||
|
"title": "标准", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
"goal", |
||||
|
"league" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"入球数", |
||||
|
"所在联盟" |
||||
|
], |
||||
|
"ui:width": "40%" |
||||
|
}, |
||||
|
"relation": { |
||||
|
"title": "-", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
">", |
||||
|
"<", |
||||
|
"=" |
||||
|
], |
||||
|
"ui:hidden": "{{rootValue.attr === 'league'}}", |
||||
|
"ui:width": "20%" |
||||
|
}, |
||||
|
"goal": { |
||||
|
"title": "入球数", |
||||
|
"type": "string", |
||||
|
"pattern": "^[0-9]+$", |
||||
|
"message": { |
||||
|
"pattern": "输入正确得分" |
||||
|
}, |
||||
|
"ui:hidden": "{{rootValue.attr !== 'goal'}}", |
||||
|
"ui:width": "40%" |
||||
|
}, |
||||
|
"league": { |
||||
|
"title": "名称", |
||||
|
"type": "string", |
||||
|
"enum": [ |
||||
|
"a", |
||||
|
"b", |
||||
|
"c" |
||||
|
], |
||||
|
"enumNames": [ |
||||
|
"西甲", |
||||
|
"英超", |
||||
|
"中超" |
||||
|
], |
||||
|
"ui:hidden": "{{rootValue.attr !== 'league'}}", |
||||
|
"ui:width": "40%" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '时间选择', |
||||
|
"name": 'timeSelect', |
||||
|
"schema": { |
||||
|
"title": "时间选择", |
||||
|
"type": "string", |
||||
|
"format": "time" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '日期范围', |
||||
|
"name": 'dateRangeSelect', |
||||
|
"schema": { |
||||
|
"title": "日期范围", |
||||
|
"type": "range", |
||||
|
"format": "date" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '日期选择(到日)', |
||||
|
"name": 'dateSelect', |
||||
|
"schema": { |
||||
|
"title": "日期选择", |
||||
|
"type": "string", |
||||
|
"format": "date", |
||||
|
"ui:options": { |
||||
|
"format": "YY/MM/DD" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"text": '日期选择(到秒)', |
||||
|
"name": 'dateSelectToSecond', |
||||
|
"schema": { |
||||
|
"title": "日期选择", |
||||
|
"description": "精确到秒", |
||||
|
"type": "string", |
||||
|
"format": "dateTime" |
||||
|
} |
||||
|
} |
||||
|
] |
@ -0,0 +1,14 @@ |
|||||
|
.tabPane{ |
||||
|
margin:0 20px; |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
height: 700px; |
||||
|
|
||||
|
.half{ |
||||
|
flex:1 |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,114 @@ |
|||||
|
import React from 'react'; |
||||
|
import Generator from 'fr-generator'; |
||||
|
import styles from './index.module.less'; |
||||
|
import JsonView from 'react-json-view'; |
||||
|
import CodeEditor from '../codeEditor'; |
||||
|
import COMP_JSON from './comp' |
||||
|
import { Tabs } from 'antd'; |
||||
|
const { TabPane } = Tabs; |
||||
|
|
||||
|
// mock
|
||||
|
const defaultInputData = `const inputData = {
|
||||
|
// 上游数据
|
||||
|
pipe: { |
||||
|
success: false, |
||||
|
message: '未登录' |
||||
|
}, |
||||
|
// 公用数据
|
||||
|
context: { |
||||
|
data: { |
||||
|
isLogin: false |
||||
|
} |
||||
|
}, |
||||
|
// 传入载荷
|
||||
|
payload: { |
||||
|
|
||||
|
}, |
||||
|
// 节点配置项
|
||||
|
config: { |
||||
|
|
||||
|
} |
||||
|
}`;
|
||||
|
|
||||
|
const mockRunResult = { |
||||
|
pipe: { |
||||
|
success: false, |
||||
|
message: '未登录' |
||||
|
}, |
||||
|
context: { |
||||
|
data: { |
||||
|
isLogin: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const VisualTab: React.FC = (props) => { |
||||
|
return ( |
||||
|
<div style={{ height: 680 }}> |
||||
|
<Generator |
||||
|
settings={[ |
||||
|
{ |
||||
|
title: '表单组件库', |
||||
|
widgets: COMP_JSON, |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
const JsonTab: React.FC = (props) => { |
||||
|
return ( |
||||
|
<div className={styles.content}> |
||||
|
<div className={styles.half}> |
||||
|
<p>输入:</p> |
||||
|
<CodeEditor |
||||
|
width={'100%'} |
||||
|
height={'650px'} |
||||
|
value={defaultInputData} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className={styles.half}> |
||||
|
<p>输入格式化:</p> |
||||
|
<JsonView |
||||
|
name={null} |
||||
|
collapsed={false} |
||||
|
enableClipboard={false} |
||||
|
displayDataTypes={false} |
||||
|
displayObjectSize={false} |
||||
|
src={mockRunResult} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className={styles.half}> |
||||
|
<p>结果输出:</p> |
||||
|
<JsonView |
||||
|
name={null} |
||||
|
collapsed={false} |
||||
|
enableClipboard={false} |
||||
|
displayDataTypes={false} |
||||
|
displayObjectSize={false} |
||||
|
src={mockRunResult} |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
const CodeRun: React.FC = (props) => { |
||||
|
return ( |
||||
|
<Tabs |
||||
|
type="card" |
||||
|
tabBarGutter={0} |
||||
|
defaultActiveKey={'basic'} |
||||
|
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }} |
||||
|
> |
||||
|
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}> |
||||
|
<VisualTab /> |
||||
|
</TabPane> |
||||
|
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> |
||||
|
<JsonTab /> |
||||
|
</TabPane> |
||||
|
</Tabs> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default CodeRun; |
@ -1,17 +0,0 @@ |
|||||
.editModal { |
|
||||
|
|
||||
.content { |
|
||||
|
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
height: 436px; |
|
||||
|
|
||||
.half { |
|
||||
display: flex; |
|
||||
flex: 1; |
|
||||
flex-direction: column; |
|
||||
overflow: scroll; |
|
||||
} |
|
||||
} |
|
||||
} |
|
Loading…
Reference in new issue