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