Browse Source

feat: save config schema

master
yangpei 4 years ago
parent
commit
092a0b7c06
  1. 9
      packages/core/src/components/schemaForm/index.module.less
  2. 143
      packages/core/src/components/schemaForm/index.tsx
  3. 22
      packages/core/src/mods/settingBar/components/json/index.tsx
  4. 20
      packages/core/src/mods/settingBar/components/json/json.ts
  5. 2
      packages/core/src/mods/settingBar/mods/basic/index.module.less

9
packages/core/src/components/schemaForm/index.module.less

@ -0,0 +1,9 @@
.btnWrap{
width:100%;
display:flex;
flex-direction: row;
justify-content:flex-end;
.btn{
margin-top: 20px;
}
}

143
packages/core/src/components/schemaForm/index.tsx

@ -1,6 +1,7 @@
import React from 'react';
import { Form, Input, Switch, Select, Radio, Checkbox, DatePicker, TimePicker, Empty } from 'antd';
import { Form, Input, Switch, Select, Checkbox, DatePicker, TimePicker, Empty, Button, message } from 'antd';
import moment from 'moment';
import styles from './index.module.less'
const FormItem = Form.Item
const { RangePicker } = DatePicker;
const { Option } = Select;
@ -9,79 +10,95 @@ interface INum {
value: string
}
interface IConfigData {
[key: string]: any
}
interface IProps {
schema: {
type: string,
properties: { [key: string]: any }
}
},
configData: IConfigData,
changeConfigData: (data: IConfigData) => void
}
const formLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
labelCol: { span: 8 },
wrapperCol: { span: 16 }
};
const SchemaForm: React.FC<IProps> = (props) => {
const { schema, configData, changeConfigData } = props
const [form] = Form.useForm()
const onClickSave = (): void => {
changeConfigData(form.getFieldsValue())
message.success('保存成功!')
}
return (
props.schema && Object.keys(props.schema).length > 0 ? <Form {...formLayout}>
{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) => {
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> :
schema && Object.keys(schema).length > 0 ?
<Form
form={form}
initialValues={configData}
{...formLayout}
>
{schema?.properties && Object.keys(schema.properties).map((key: string) => {
const obj = 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 === '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 defaultValue={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={key}
>
{ele}
</FormItem>
})}
<div className={styles.btnWrap}>
<Button size='small' className={styles.btn} type={'primary'} onClick={onClickSave}></Button>
</div>
</Form> :
<Empty
description={'请编辑投放配置schema'}
image={Empty.PRESENTED_IMAGE_SIMPLE}

22
packages/core/src/mods/settingBar/components/json/index.tsx

@ -24,6 +24,10 @@ interface IJsonProps {
onValueChange: (value: string) => void;
}
interface IConfigData {
[key: string]: any
}
interface ISchemaProps {
type: string,
properties: { [key: string]: any }
@ -33,6 +37,7 @@ const Json: React.FC<IJsonProps> = (props) => {
const { title, value, isConfig, onValueChange, selectedCell } = props;
const [visible, setVisible] = useState<boolean>(false);
const [schema, setSchema] = useState<ISchemaProps>({ type: '', properties: {} })
const [configData, setConfigData] = useState<IConfigData>({});
const defaultSchema = useMemo(() => {
if (selectedCell) {
@ -45,6 +50,14 @@ const Json: React.FC<IJsonProps> = (props) => {
}
}, [selectedCell])
const defaultConfigData = useMemo(() => {
if (selectedCell) {
const { configData = {} } = selectedCell.getData();
setConfigData(configData);
return configData
}
}, [selectedCell])
const onClickEdit = (): void => {
setVisible(true);
};
@ -59,6 +72,9 @@ const Json: React.FC<IJsonProps> = (props) => {
setVisible(false);
setSchema(schema);
}
const changeConfigData = (configData: IConfigData) => {
selectedCell && selectedCell.setData({ configData });
}
return (
<Card title={title} extra={<Button type="link" onClick={onClickEdit}></Button>}>
@ -71,7 +87,11 @@ const Json: React.FC<IJsonProps> = (props) => {
src={safeParse(value)}
/>}
{isConfig && <SchemaForm schema={schema} />}
{isConfig && <SchemaForm
schema={schema}
changeConfigData={changeConfigData}
configData={defaultConfigData} />
}
<EditModal
title={title}

20
packages/core/src/mods/settingBar/components/json/json.ts

@ -47,26 +47,6 @@ const compData = [
"description": "下拉单选"
}
},
{
"text": 'Radio',
"name": 'radio',
"schema": {
"title": "Radio",
"type": "string",
"enum": [
"a",
"b",
"c"
],
"enumNames": [
"早",
"中",
"晚"
],
"ui:widget": "radio",
"description": "点击单选"
}
},
{
"text": 'MultiSelect',
"name": 'multiSelect',

2
packages/core/src/mods/settingBar/mods/basic/index.module.less

@ -1,5 +1,5 @@
.container {
height: 800px;
height: 900px;
overflow-y: auto;
&::-webkit-scrollbar {

Loading…
Cancel
Save