yangpei
4 years ago
12 changed files with 392 additions and 668 deletions
@ -1,10 +0,0 @@ |
|||
.tabPane{ |
|||
.form{ |
|||
height:600px; |
|||
overflow-y: auto; |
|||
margin:0 20px; |
|||
} |
|||
.configInput{ |
|||
height: 600px; |
|||
} |
|||
} |
@ -1,73 +0,0 @@ |
|||
import React, { useState, useRef } from 'react'; |
|||
import Generator from 'fr-generator'; |
|||
import { Tabs } from 'antd'; |
|||
const { TabPane } = Tabs; |
|||
import CodeEditor from '../codeEditor'; |
|||
import { compData } from './json' |
|||
import styles from './index.module.less'; |
|||
interface IProps { |
|||
onChange: (value: object) => void |
|||
} |
|||
|
|||
const ConfigSchema: React.FC<IProps> = (props) => { |
|||
const [code, setCode] = useState('') |
|||
const [schema, setSchema] = useState({}) |
|||
const formRef = useRef<HTMLDivElement>() |
|||
|
|||
// 同步代码
|
|||
const tabChange = () => { |
|||
// 可视化同步到编辑器
|
|||
// @ts-ignore
|
|||
const formSchema = formRef.current && formRef.current.getValue() |
|||
setSchema(formSchema) |
|||
setCode(JSON.stringify(formSchema, null, 2)) |
|||
|
|||
// 编辑器同步到可视化
|
|||
try { |
|||
const codeObj = JSON.parse(code) |
|||
setSchema(codeObj) |
|||
// @ts-ignore
|
|||
formRef.current.setValue(codeObj) |
|||
} catch (error) { |
|||
console.log('can\'t parse code string to form schema, the error is:', error.message); |
|||
} |
|||
} |
|||
|
|||
const codeChange = (ev: any, newCode: any) => { |
|||
setCode(newCode) |
|||
} |
|||
|
|||
return ( |
|||
<Tabs |
|||
type="card" |
|||
tabBarGutter={0} |
|||
defaultActiveKey={'basic'} |
|||
onChange={tabChange} |
|||
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }} |
|||
> |
|||
<TabPane className={styles.tabPane} tab={'可视化'} key={'VisualTab'}> |
|||
<div className={styles.form}> |
|||
<Generator |
|||
ref={formRef} |
|||
settings={[{ |
|||
title: '表单组件库', |
|||
widgets: compData, |
|||
}]} |
|||
/> |
|||
</div> |
|||
</TabPane> |
|||
<TabPane className={styles.tabPane} tab={'JSON'} key={'JsonTab'}> |
|||
<div className={styles.configInput}> |
|||
<CodeEditor |
|||
width={'100%'} |
|||
language={'json'} |
|||
value={code} |
|||
onChange={codeChange} |
|||
/> |
|||
</div> |
|||
</TabPane> |
|||
</Tabs> |
|||
) |
|||
} |
|||
|
|||
export default ConfigSchema; |
@ -1,510 +0,0 @@ |
|||
const compData = [ |
|||
{ |
|||
"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" |
|||
} |
|||
} |
|||
] |
|||
|
|||
export { |
|||
compData |
|||
} |
@ -0,0 +1,91 @@ |
|||
import React from 'react'; |
|||
import { Form, Input, Switch, Select, Radio, Checkbox, DatePicker, TimePicker } from 'antd'; |
|||
import moment from 'moment'; |
|||
const FormItem = Form.Item |
|||
const { RangePicker } = DatePicker; |
|||
const { Option } = Select; |
|||
|
|||
interface INum { |
|||
label: string, |
|||
value: string |
|||
} |
|||
|
|||
interface IProps { |
|||
schema: { |
|||
schema: { |
|||
type: string, |
|||
properties: { [key: string]: any } |
|||
} |
|||
} |
|||
} |
|||
|
|||
const MyForm: React.FC<IProps> = (props) => { |
|||
const layout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18 } |
|||
}; |
|||
|
|||
return ( |
|||
<Form {...layout}> |
|||
{props.schema?.schema?.properties && Object.keys(props.schema.schema.properties).map((key: string) => { |
|||
const obj = props.schema.schema.properties[key] |
|||
const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { |
|||
return { label: item, value: obj.enumNames[idx] } |
|||
}) : [] |
|||
let ele = null |
|||
// 输入框
|
|||
if (obj.type === 'string' && !obj.hasOwnProperty('format') && !obj.hasOwnProperty('enum')) { |
|||
ele = <Input /> |
|||
} |
|||
// 编辑框
|
|||
if (obj.type === 'string' && obj.format === 'textarea') { |
|||
ele = <Input.TextArea /> |
|||
} |
|||
// switch
|
|||
if (obj.type === 'boolean' && obj['ui:widget'] === 'switch') { |
|||
ele = <Switch /> |
|||
} |
|||
// 下拉单选
|
|||
if (obj.type === 'string' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { |
|||
ele = <Select allowClear>{options.map(item => |
|||
<Option key={item.value} value={item.value}>{item.label}</Option> |
|||
)}</Select> |
|||
} |
|||
// 点击单选
|
|||
if (obj.type === 'string' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'radio') { |
|||
ele = <Radio /> |
|||
} |
|||
// 下拉多选
|
|||
if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { |
|||
ele = <Select allowClear mode="multiple"> |
|||
{options.map(item => <Option key={item.value} value={item.value}>{item.label}</Option>)} |
|||
</Select> |
|||
} |
|||
// 点击多选
|
|||
if (obj.type === 'array' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { |
|||
ele = <Checkbox.Group options={options} /> |
|||
} |
|||
// 时间选择
|
|||
if (obj.type === 'string' && obj.format === 'time') { |
|||
ele = <TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} /> |
|||
} |
|||
// 日期范围
|
|||
if (obj.type === 'range' && obj.format === 'date') { |
|||
ele = <DatePicker /> |
|||
} |
|||
// 日期选择
|
|||
if (obj.type === 'string' && obj.format === 'date') { |
|||
ele = <RangePicker /> |
|||
} |
|||
return <FormItem |
|||
label={obj.title} |
|||
name={obj.title} |
|||
> |
|||
{ele} |
|||
</FormItem> |
|||
})} |
|||
</Form> |
|||
); |
|||
}; |
|||
|
|||
export default MyForm |
@ -0,0 +1,145 @@ |
|||
const compData = [ |
|||
{ |
|||
"text": '输入框', |
|||
"name": 'input', |
|||
"schema": { |
|||
"title": "输入框", |
|||
"type": "string" |
|||
} |
|||
}, |
|||
{ |
|||
"text": '编辑框', |
|||
"name": 'textarea', |
|||
"schema": { |
|||
"title": "编辑框", |
|||
"type": "string", |
|||
"format": "textarea" |
|||
} |
|||
}, |
|||
{ |
|||
"text": '开关控制', |
|||
"name": 'allBoolean', |
|||
"schema": { |
|||
"title": "开关控制", |
|||
"type": "boolean", |
|||
"ui:widget": "switch" |
|||
} |
|||
}, |
|||
{ |
|||
"text": '下拉单选', |
|||
"name": 'select', |
|||
"schema": { |
|||
"title": "下拉单选", |
|||
"type": "string", |
|||
"enum": [ |
|||
"a", |
|||
"b", |
|||
"c" |
|||
], |
|||
"enumNames": [ |
|||
"早", |
|||
"中", |
|||
"晚" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"text": '点击单选', |
|||
"name": 'select', |
|||
"schema": { |
|||
"title": "点击单选", |
|||
"type": "string", |
|||
"enum": [ |
|||
"a", |
|||
"b", |
|||
"c" |
|||
], |
|||
"enumNames": [ |
|||
"早", |
|||
"中", |
|||
"晚" |
|||
], |
|||
"ui:widget": "radio" |
|||
} |
|||
}, |
|||
{ |
|||
"text": '下拉多选', |
|||
"name": 'multiSelect', |
|||
"schema": { |
|||
"title": "下拉多选", |
|||
"description": "可以选择多项", |
|||
"type": "array", |
|||
"items": { |
|||
"type": "string" |
|||
}, |
|||
"enum": [ |
|||
"A", |
|||
"B", |
|||
"C", |
|||
"D" |
|||
], |
|||
"enumNames": [ |
|||
"1", |
|||
"2", |
|||
"3", |
|||
"4" |
|||
], |
|||
"ui:widget": "multiSelect" |
|||
} |
|||
}, |
|||
{ |
|||
"text": '点击多选', |
|||
"name": 'checkbox', |
|||
"schema": { |
|||
"title": "多选", |
|||
"description": "可以勾选多个", |
|||
"type": "array", |
|||
"items": { |
|||
"type": "string" |
|||
}, |
|||
"enum": [ |
|||
"A", |
|||
"B", |
|||
"C", |
|||
"D" |
|||
], |
|||
"enumNames": [ |
|||
"1", |
|||
"2", |
|||
"3", |
|||
"4" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"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" |
|||
} |
|||
} |
|||
] |
|||
|
|||
export { |
|||
compData |
|||
} |
@ -1,9 +1,15 @@ |
|||
.container { |
|||
padding: 0 20px; |
|||
height: 100%; |
|||
overflow: scroll; |
|||
height: 800px; |
|||
overflow-y: auto; |
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
|
|||
.input{ |
|||
margin-top:20px; |
|||
} |
|||
} |
|||
|
|||
.depsInfoModalContent { |
|||
padding-top: 20px; |
|||
} |
|||
} |
|||
|
Loading…
Reference in new issue