forked from p96170835/amis
prettierrc 配置调整
This commit is contained in:
liaoxuezhi
parent
ea8370e6b0
commit
d5ef332151
|
|
@ -8,7 +8,7 @@ insert_final_newline = true
|
||||||
|
|
||||||
[**.{js,ts,tsx,scss}]
|
[**.{js,ts,tsx,scss}]
|
||||||
indent_style = space
|
indent_style = space
|
||||||
indent_size = 4
|
indent_size = 2
|
||||||
|
|
||||||
[*.md]
|
[*.md]
|
||||||
trim_trailing_whitespace = false
|
trim_trailing_whitespace = false
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
{
|
{
|
||||||
"printWidth": 120,
|
"printWidth": 80,
|
||||||
"tabWidth": 4,
|
"tabWidth": 2,
|
||||||
"useTabs": false,
|
"useTabs": false,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"semi": true,
|
"semi": true,
|
||||||
"trailingComma": "none",
|
"trailingComma": "none",
|
||||||
"bracketSpacing": false,
|
"bracketSpacing": false,
|
||||||
|
"quoteProps": "consistent",
|
||||||
"arrowParens": "avoid",
|
"arrowParens": "avoid",
|
||||||
"jsxBracketSameLine": false
|
"jsxBracketSameLine": false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,16 @@ import Layout from '../../src/components/Layout';
|
||||||
import AsideNav from '../../src/components/AsideNav';
|
import AsideNav from '../../src/components/AsideNav';
|
||||||
import {AlertComponent, ToastComponent} from '../../src/components/index';
|
import {AlertComponent, ToastComponent} from '../../src/components/index';
|
||||||
import {mapTree} from '../../src/utils/helper';
|
import {mapTree} from '../../src/utils/helper';
|
||||||
import {Router, Route, IndexRoute, browserHistory, hashHistory, Link, Redirect, withRouter} from 'react-router';
|
import {
|
||||||
|
Router,
|
||||||
|
Route,
|
||||||
|
IndexRoute,
|
||||||
|
browserHistory,
|
||||||
|
hashHistory,
|
||||||
|
Link,
|
||||||
|
Redirect,
|
||||||
|
withRouter
|
||||||
|
} from 'react-router';
|
||||||
import makeSchemaRenderer from './SchemaRender';
|
import makeSchemaRenderer from './SchemaRender';
|
||||||
|
|
||||||
import SimplePageSchema from './Page/Simple';
|
import SimplePageSchema from './Page/Simple';
|
||||||
|
|
@ -568,7 +577,9 @@ export class App extends React.PureComponent {
|
||||||
document.querySelectorAll('link[title]').forEach(item => {
|
document.querySelectorAll('link[title]').forEach(item => {
|
||||||
item.disabled = true;
|
item.disabled = true;
|
||||||
});
|
});
|
||||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
document.querySelector(
|
||||||
|
`link[title=${this.state.theme.value}]`
|
||||||
|
).disabled = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -576,8 +587,12 @@ export class App extends React.PureComponent {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
|
|
||||||
if (preState.theme.value !== this.state.theme.value) {
|
if (preState.theme.value !== this.state.theme.value) {
|
||||||
document.querySelector(`link[title=${preState.theme.value}]`).disabled = true;
|
document.querySelector(
|
||||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
`link[title=${preState.theme.value}]`
|
||||||
|
).disabled = true;
|
||||||
|
document.querySelector(
|
||||||
|
`link[title=${this.state.theme.value}]`
|
||||||
|
).disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.location.pathname !== preProps.location.pathname) {
|
if (props.location.pathname !== preProps.location.pathname) {
|
||||||
|
|
@ -638,12 +653,21 @@ export class App extends React.PureComponent {
|
||||||
|
|
||||||
link.badge &&
|
link.badge &&
|
||||||
children.push(
|
children.push(
|
||||||
<b key="badge" className={cx(`AsideNav-itemBadge`, link.badgeClassName || 'bg-info')}>
|
<b
|
||||||
|
key="badge"
|
||||||
|
className={cx(
|
||||||
|
`AsideNav-itemBadge`,
|
||||||
|
link.badgeClassName || 'bg-info'
|
||||||
|
)}
|
||||||
|
>
|
||||||
{link.badge}
|
{link.badge}
|
||||||
</b>
|
</b>
|
||||||
);
|
);
|
||||||
|
|
||||||
link.icon && children.push(<i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />);
|
link.icon &&
|
||||||
|
children.push(
|
||||||
|
<i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />
|
||||||
|
);
|
||||||
|
|
||||||
children.push(
|
children.push(
|
||||||
<span className={cx(`AsideNav-itemLabel`)} key="label">
|
<span className={cx(`AsideNav-itemLabel`)} key="label">
|
||||||
|
|
@ -662,7 +686,9 @@ export class App extends React.PureComponent {
|
||||||
{children}
|
{children}
|
||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<a onClick={link.children ? () => toggleExpand(link) : null}>{children}</a>
|
<a onClick={link.children ? () => toggleExpand(link) : null}>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
isActive={link =>
|
isActive={link =>
|
||||||
|
|
@ -714,7 +740,11 @@ export class App extends React.PureComponent {
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
iconOnly
|
iconOnly
|
||||||
>
|
>
|
||||||
<i className={this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'} />
|
<i
|
||||||
|
className={
|
||||||
|
this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -739,7 +769,10 @@ export class App extends React.PureComponent {
|
||||||
options={this.state.themes}
|
options={this.state.themes}
|
||||||
onChange={theme => {
|
onChange={theme => {
|
||||||
this.setState({theme});
|
this.setState({theme});
|
||||||
localStorage.setItem('themeIndex', this.state.themes.indexOf(theme));
|
localStorage.setItem(
|
||||||
|
'themeIndex',
|
||||||
|
this.state.themes.indexOf(theme)
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
@ -824,7 +857,10 @@ export default function entry({pathPrefix}) {
|
||||||
return (
|
return (
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
<Route component={App}>
|
<Route component={App}>
|
||||||
<Redirect from={`${ContextPath}/`} to={`${ContextPath}${PathPrefix}/pages/simple`} />
|
<Redirect
|
||||||
|
from={`${ContextPath}/`}
|
||||||
|
to={`${ContextPath}${PathPrefix}/pages/simple`}
|
||||||
|
/>
|
||||||
<Redirect from={`${PathPrefix}/`} to={`${PathPrefix}/pages/simple`} />
|
<Redirect from={`${PathPrefix}/`} to={`${PathPrefix}/pages/simple`} />
|
||||||
{navigations2route(PathPrefix)}
|
{navigations2route(PathPrefix)}
|
||||||
<Route path="*" component={NotFound} />
|
<Route path="*" component={NotFound} />
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,40 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "音频播放器",
|
title: '音频播放器',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "audio",
|
type: 'audio',
|
||||||
"autoPlay": false,
|
autoPlay: false,
|
||||||
"rates": [1.0, 1.5, 2.0],
|
rates: [1.0, 1.5, 2.0],
|
||||||
"src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3",
|
src:
|
||||||
|
'https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": 'form',
|
type: 'form',
|
||||||
"title": '',
|
title: '',
|
||||||
"actions": [],
|
actions: [],
|
||||||
"className": 'b v-middle inline w-lg h-xs',
|
className: 'b v-middle inline w-lg h-xs',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "card",
|
type: 'card',
|
||||||
"className": 'v-middle w inline no-border',
|
className: 'v-middle w inline no-border',
|
||||||
"header": {
|
header: {
|
||||||
"title": "歌曲名称",
|
title: '歌曲名称',
|
||||||
"subTitle": "专辑名称",
|
subTitle: '专辑名称',
|
||||||
"description": "description",
|
description: 'description',
|
||||||
"avatarClassName": "pull-left thumb-md avatar m-r no-border",
|
avatarClassName: 'pull-left thumb-md avatar m-r no-border',
|
||||||
"avatar": "http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"
|
avatar:
|
||||||
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "audio",
|
type: 'audio',
|
||||||
"className": 'v-middle no-border',
|
className: 'v-middle no-border',
|
||||||
"src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3",
|
src:
|
||||||
"controls": ['play']
|
'https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3',
|
||||||
|
controls: ['play']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "带边栏联动",
|
title: '带边栏联动',
|
||||||
aside: {
|
aside: {
|
||||||
type: 'form',
|
type: 'form',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
|
|
@ -37,56 +37,56 @@ export default {
|
||||||
},
|
},
|
||||||
toolbar: [
|
toolbar: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
label: "新增",
|
label: '新增',
|
||||||
primary: true,
|
primary: true,
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "新增",
|
title: '新增',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "post:/api/sample",
|
api: 'post:/api/sample',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -94,235 +94,235 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "这里的表单项可以配置多个"
|
text: '这里的表单项可以配置多个'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
bulkActions: [
|
bulkActions: [
|
||||||
{
|
{
|
||||||
label: "批量删除",
|
label: '批量删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
api: "delete:/api/sample/$ids",
|
api: 'delete:/api/sample/$ids',
|
||||||
confirmText: "确定要批量删除?"
|
confirmText: '确定要批量删除?'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "批量修改",
|
label: '批量修改',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "批量编辑",
|
title: '批量编辑',
|
||||||
name: "sample-bulk-edit",
|
name: 'sample-bulk-edit',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/sample/bulkUpdate2",
|
api: '/api/sample/bulkUpdate2',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: 'hidden',
|
type: 'hidden',
|
||||||
name: 'ids'
|
name: 'ids'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
quickSaveApi: "/api/sample/bulkUpdate",
|
quickSaveApi: '/api/sample/bulkUpdate',
|
||||||
quickSaveItemApi: "/api/sample/$id",
|
quickSaveItemApi: '/api/sample/$id',
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20,
|
width: 20,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
searchable: true,
|
searchable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
quickEdit: {
|
quickEdit: {
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X'],
|
||||||
saveImmediately: true
|
saveImmediately: true
|
||||||
},
|
},
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "operation",
|
type: 'operation',
|
||||||
label: "操作",
|
label: '操作',
|
||||||
width: 130,
|
width: 130,
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
toggled: true
|
toggled: true
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "增删改查列类型汇总",
|
title: '增删改查列类型汇总',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/mock2/crud/list",
|
api: '/api/mock2/crud/list',
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "audio",
|
name: 'audio',
|
||||||
label: "音频",
|
label: '音频',
|
||||||
type: "audio"
|
type: 'audio'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "carousel",
|
name: 'carousel',
|
||||||
label: "轮播图",
|
label: '轮播图',
|
||||||
type: "carousel",
|
type: 'carousel',
|
||||||
width: "300"
|
width: '300'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "text",
|
name: 'text',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'image',
|
type: 'image',
|
||||||
|
|
@ -41,31 +41,31 @@ export default {
|
||||||
label: '日期'
|
label: '日期'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "progress",
|
name: 'progress',
|
||||||
label: "进度",
|
label: '进度',
|
||||||
type: "progress"
|
type: 'progress'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "boolean",
|
name: 'boolean',
|
||||||
label: "状态",
|
label: '状态',
|
||||||
type: "status"
|
type: 'status'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "boolean",
|
name: 'boolean',
|
||||||
label: "开关",
|
label: '开关',
|
||||||
type: "switch",
|
type: 'switch'
|
||||||
// readOnly: false // 可以开启修改模式
|
// readOnly: false // 可以开启修改模式
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "type",
|
name: 'type',
|
||||||
label: "映射",
|
label: '映射',
|
||||||
type: "mapping",
|
type: 'mapping',
|
||||||
map: {
|
map: {
|
||||||
"*": "其他：${type}",
|
'*': '其他：${type}',
|
||||||
"1": "<span class='label label-info'>漂亮</span>",
|
'1': "<span class='label label-info'>漂亮</span>",
|
||||||
"2": "<span class='label label-success'>开心</span>",
|
'2': "<span class='label label-success'>开心</span>",
|
||||||
"3": "<span class='label label-danger'>惊吓</span>",
|
'3': "<span class='label label-danger'>惊吓</span>",
|
||||||
"4": "<span class='label label-warning'>紧张</span>"
|
'4': "<span class='label label-warning'>紧张</span>"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -74,7 +74,7 @@ export default {
|
||||||
type: 'list',
|
type: 'list',
|
||||||
label: 'List',
|
label: 'List',
|
||||||
placeholder: '-',
|
placeholder: '-',
|
||||||
size: "sm",
|
size: 'sm',
|
||||||
listItem: {
|
listItem: {
|
||||||
title: '${title}',
|
title: '${title}',
|
||||||
subTitle: '${description}'
|
subTitle: '${description}'
|
||||||
|
|
|
||||||
|
|
@ -1,155 +1,155 @@
|
||||||
const table = {
|
const table = {
|
||||||
type: "table",
|
type: 'table',
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
engine: "Other browsers",
|
engine: 'Other browsers',
|
||||||
browser: "All others",
|
browser: 'All others',
|
||||||
platform: "-",
|
platform: '-',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "U",
|
grade: 'U',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 56,
|
weight: 56,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Misc",
|
engine: 'Misc',
|
||||||
browser: "PSP browser",
|
browser: 'PSP browser',
|
||||||
platform: "PSP",
|
platform: 'PSP',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "C",
|
grade: 'C',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 55,
|
weight: 55,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Misc",
|
engine: 'Misc',
|
||||||
browser: "PSP browser",
|
browser: 'PSP browser',
|
||||||
platform: "PSP",
|
platform: 'PSP',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "C",
|
grade: 'C',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 55,
|
weight: 55,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Other browsers",
|
engine: 'Other browsers',
|
||||||
browser: "All others",
|
browser: 'All others',
|
||||||
platform: "-",
|
platform: '-',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "U",
|
grade: 'U',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 56,
|
weight: 56,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Misc",
|
engine: 'Misc',
|
||||||
browser: "PSP browser",
|
browser: 'PSP browser',
|
||||||
platform: "PSP",
|
platform: 'PSP',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "C",
|
grade: 'C',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 55,
|
weight: 55,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Misc",
|
engine: 'Misc',
|
||||||
browser: "PSP browser",
|
browser: 'PSP browser',
|
||||||
platform: "PSP",
|
platform: 'PSP',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "C",
|
grade: 'C',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 55,
|
weight: 55,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Other browsers",
|
engine: 'Other browsers',
|
||||||
browser: "All others",
|
browser: 'All others',
|
||||||
platform: "-",
|
platform: '-',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "U",
|
grade: 'U',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 56,
|
weight: 56,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Misc",
|
engine: 'Misc',
|
||||||
browser: "PSP browser",
|
browser: 'PSP browser',
|
||||||
platform: "PSP",
|
platform: 'PSP',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "C",
|
grade: 'C',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 55,
|
weight: 55,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Misc",
|
engine: 'Misc',
|
||||||
browser: "PSP browser",
|
browser: 'PSP browser',
|
||||||
platform: "PSP",
|
platform: 'PSP',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "C",
|
grade: 'C',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 55,
|
weight: 55,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
engine: "Other browsers",
|
engine: 'Other browsers',
|
||||||
browser: "All others",
|
browser: 'All others',
|
||||||
platform: "-",
|
platform: '-',
|
||||||
version: "-",
|
version: '-',
|
||||||
grade: "U",
|
grade: 'U',
|
||||||
progress: 50,
|
progress: 50,
|
||||||
status: true,
|
status: true,
|
||||||
image:
|
image:
|
||||||
"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",
|
'http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg',
|
||||||
weight: 56,
|
weight: 56,
|
||||||
others: null,
|
others: null,
|
||||||
createdAt: "2017-11-17T08:47:50.000Z",
|
createdAt: '2017-11-17T08:47:50.000Z',
|
||||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||||
}
|
}
|
||||||
].map((item, key) => ({
|
].map((item, key) => ({
|
||||||
...item,
|
...item,
|
||||||
|
|
@ -157,128 +157,128 @@ const table = {
|
||||||
})),
|
})),
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20,
|
width: 20,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
fixed: 'left'
|
fixed: 'left'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
searchable: true,
|
searchable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
fixed: 'left'
|
fixed: 'left'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
quickEdit: {
|
quickEdit: {
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X'],
|
||||||
saveImmediately: true
|
saveImmediately: true
|
||||||
},
|
},
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
fixed: 'right'
|
fixed: 'right'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
fixed: 'right'
|
fixed: 'right'
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "固顶和列固定示例",
|
title: '固顶和列固定示例',
|
||||||
remark: "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
body: [
|
body: [
|
||||||
table,
|
table,
|
||||||
'<div>分割</div>',
|
'<div>分割</div>',
|
||||||
|
|
|
||||||
|
|
@ -1,194 +1,194 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "开启单条底部展示功能",
|
title: '开启单条底部展示功能',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
footable: {
|
footable: {
|
||||||
expand: 'first',
|
expand: 'first',
|
||||||
accordion: true
|
accordion: true
|
||||||
},
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20,
|
width: 20,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
searchable: true,
|
searchable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
breakpoint: '*',
|
breakpoint: '*',
|
||||||
quickEdit: {
|
quickEdit: {
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X'],
|
||||||
inputClassName: 'w-xs',
|
inputClassName: 'w-xs',
|
||||||
saveImmediately: true
|
saveImmediately: true
|
||||||
},
|
},
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "operation",
|
type: 'operation',
|
||||||
label: "操作",
|
label: '操作',
|
||||||
width: 100,
|
width: 100,
|
||||||
breakpoint: '*',
|
breakpoint: '*',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
actionType: "drawer",
|
actionType: 'drawer',
|
||||||
drawer: {
|
drawer: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
size: 'lg',
|
size: 'lg',
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "select",
|
type: 'select',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
toggled: true
|
toggled: true
|
||||||
|
|
|
||||||
|
|
@ -1,219 +1,219 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "增删改查示例",
|
title: '增删改查示例',
|
||||||
remark: "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
// api: "/api/mock2/crud/table?waitSeconds=100000",
|
// api: "/api/mock2/crud/table?waitSeconds=100000",
|
||||||
mode: "cards",
|
mode: 'cards',
|
||||||
defaultParams: {
|
defaultParams: {
|
||||||
perPage: 12,
|
perPage: 12
|
||||||
},
|
},
|
||||||
// fixAlignment: true,
|
// fixAlignment: true,
|
||||||
// masonryLayout: true,
|
// masonryLayout: true,
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "这只是个示例, 目前搜索对查询结果无效."
|
text: '这只是个示例, 目前搜索对查询结果无效.'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
bulkActions: [
|
bulkActions: [
|
||||||
{
|
{
|
||||||
label: "批量删除",
|
label: '批量删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
api: "delete:/api/sample/${ids|raw}",
|
api: 'delete:/api/sample/${ids|raw}',
|
||||||
confirmText: "确定要批量删除?"
|
confirmText: '确定要批量删除?'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "批量修改",
|
label: '批量修改',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "批量编辑",
|
title: '批量编辑',
|
||||||
name: "sample-bulk-edit",
|
name: 'sample-bulk-edit',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/sample/bulkUpdate2",
|
api: '/api/sample/bulkUpdate2',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "hidden",
|
type: 'hidden',
|
||||||
name: "ids"
|
name: 'ids'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
quickSaveApi: "/api/sample/bulkUpdate",
|
quickSaveApi: '/api/sample/bulkUpdate',
|
||||||
quickSaveItemApi: "/api/sample/$id",
|
quickSaveItemApi: '/api/sample/$id',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
card: {
|
card: {
|
||||||
header: {
|
header: {
|
||||||
title: "$engine",
|
title: '$engine',
|
||||||
subTitle: "$platform",
|
subTitle: '$platform',
|
||||||
subTitlePlaceholder: "暂无说明",
|
subTitlePlaceholder: '暂无说明',
|
||||||
avatar:
|
avatar:
|
||||||
'<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>',
|
'<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>',
|
||||||
avatarClassName: "pull-left thumb b-3x m-r"
|
avatarClassName: 'pull-left thumb b-3x m-r'
|
||||||
},
|
},
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "查看",
|
label: '查看',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "编辑",
|
label: '编辑',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "删除",
|
label: '删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "engine",
|
label: 'engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
quickEdit: true
|
quickEdit: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform"
|
label: 'Platform'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "version"
|
label: 'version'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,106 +1,106 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "支持表头分组，通过在 cloumn 上设置 groupName 实现。",
|
title: '支持表头分组，通过在 cloumn 上设置 groupName 实现。',
|
||||||
body: {
|
body: {
|
||||||
type: "table",
|
type: 'table',
|
||||||
data: {
|
data: {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "Internet Explorer 4.2",
|
browser: 'Internet Explorer 4.2',
|
||||||
"platform": "Win 95+",
|
platform: 'Win 95+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "Internet Explorer 4.2",
|
browser: 'Internet Explorer 4.2',
|
||||||
"platform": "Win 95+",
|
platform: 'Win 95+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "B"
|
grade: 'B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "AOL browser (AOL desktop)",
|
browser: 'AOL browser (AOL desktop)',
|
||||||
"platform": "Win 95+",
|
platform: 'Win 95+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "C"
|
grade: 'C'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "AOL browser (AOL desktop)",
|
browser: 'AOL browser (AOL desktop)',
|
||||||
"platform": "Win 98",
|
platform: 'Win 98',
|
||||||
"version": "3",
|
version: '3',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "AOL browser (AOL desktop)",
|
browser: 'AOL browser (AOL desktop)',
|
||||||
"platform": "Win 98",
|
platform: 'Win 98',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 1.0",
|
browser: 'Firefox 1.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 1.0",
|
browser: 'Firefox 1.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 2.0",
|
browser: 'Firefox 2.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "B"
|
grade: 'B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 2.0",
|
browser: 'Firefox 2.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "C"
|
grade: 'C'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 2.0",
|
browser: 'Firefox 2.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "D"
|
grade: 'D'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
groupName: "A"
|
groupName: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
groupName: "A"
|
groupName: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
groupName: "B"
|
groupName: 'B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
groupName: "B"
|
groupName: 'B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,221 +1,226 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "增删改查示例",
|
title: '增删改查示例',
|
||||||
remark: "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
headerToolbar: ['bulkActions', {
|
headerToolbar: [
|
||||||
|
'bulkActions',
|
||||||
|
{
|
||||||
type: 'columns-toggler',
|
type: 'columns-toggler',
|
||||||
className: 'pull-right',
|
className: 'pull-right',
|
||||||
align: 'right'
|
align: 'right'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
type: 'drag-toggler',
|
type: 'drag-toggler',
|
||||||
className: 'pull-right'
|
className: 'pull-right'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
type: 'pagination',
|
type: 'pagination',
|
||||||
className: 'pull-right'
|
className: 'pull-right'
|
||||||
}],
|
}
|
||||||
|
],
|
||||||
itemActions: [
|
itemActions: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "查看",
|
label: '查看',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "编辑",
|
label: '编辑',
|
||||||
actionType: "drawer",
|
actionType: 'drawer',
|
||||||
drawer: {
|
drawer: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
size: 'lg',
|
size: 'lg',
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "select",
|
type: 'select',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "删除",
|
label: '删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
bulkActions: [
|
bulkActions: [
|
||||||
{
|
{
|
||||||
label: "批量删除",
|
label: '批量删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
api: "delete:/api/sample/${ids|raw}",
|
api: 'delete:/api/sample/${ids|raw}',
|
||||||
confirmText: "确定要批量删除?",
|
confirmText: '确定要批量删除?',
|
||||||
type: "button"
|
type: 'button'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "批量修改",
|
label: '批量修改',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "批量编辑",
|
title: '批量编辑',
|
||||||
name: "sample-bulk-edit",
|
name: 'sample-bulk-edit',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/sample/bulkUpdate2",
|
api: '/api/sample/bulkUpdate2',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: 'hidden',
|
type: 'hidden',
|
||||||
name: 'ids'
|
name: 'ids'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
type: "button"
|
type: 'button'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20,
|
width: 20,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
remark: 'Bla bla Bla'
|
remark: 'Bla bla Bla'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
searchable: true,
|
searchable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: false
|
toggled: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,131 +1,131 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "操作并下一个",
|
title: '操作并下一个',
|
||||||
"remark": "当存在下一条时，支持直接打开下一条操作。",
|
remark: '当存在下一条时，支持直接打开下一条操作。',
|
||||||
"body": {
|
body: {
|
||||||
"type": "crud",
|
type: 'crud',
|
||||||
"title": "",
|
title: '',
|
||||||
"api": "/api/sample/list",
|
api: '/api/sample/list',
|
||||||
"columnsTogglable": false,
|
columnsTogglable: false,
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"name": "id",
|
name: 'id',
|
||||||
"label": "ID",
|
label: 'ID',
|
||||||
"width": 20,
|
width: 20,
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "engine",
|
name: 'engine',
|
||||||
"label": "Rendering engine",
|
label: 'Rendering engine',
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "browser",
|
name: 'browser',
|
||||||
"label": "Browser",
|
label: 'Browser',
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "operation",
|
type: 'operation',
|
||||||
"label": "操作",
|
label: '操作',
|
||||||
"width": 130,
|
width: 130,
|
||||||
"buttons": [
|
buttons: [
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"icon": "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
"actionType": "dialog",
|
actionType: 'dialog',
|
||||||
"nextCondition": "true",
|
nextCondition: 'true',
|
||||||
"_nextCondition": "可以设置条件比如： data.grade == \"B\"",
|
_nextCondition: '可以设置条件比如： data.grade == "B"',
|
||||||
"dialog": {
|
dialog: {
|
||||||
"title": "编辑",
|
title: '编辑',
|
||||||
"actions": [
|
actions: [
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"actionType": "prev",
|
actionType: 'prev',
|
||||||
"level": "info",
|
level: 'info',
|
||||||
"visibleOn": "data.hasPrev",
|
visibleOn: 'data.hasPrev',
|
||||||
"label": "上一个"
|
label: '上一个'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"actionType": "cancel",
|
actionType: 'cancel',
|
||||||
"label": "关闭"
|
label: '关闭'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "submit",
|
type: 'submit',
|
||||||
"actionType": "next",
|
actionType: 'next',
|
||||||
"visibleOn": "data.hasNext",
|
visibleOn: 'data.hasNext',
|
||||||
"label": "保存并下一个",
|
label: '保存并下一个',
|
||||||
"level": "primary"
|
level: 'primary'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "submit",
|
type: 'submit',
|
||||||
"visibleOn": "!data.hasNext",
|
visibleOn: '!data.hasNext',
|
||||||
"label": "保存",
|
label: '保存',
|
||||||
"level": "primary"
|
level: 'primary'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"actionType": "next",
|
actionType: 'next',
|
||||||
"level": "info",
|
level: 'info',
|
||||||
"visibleOn": "data.hasNext",
|
visibleOn: 'data.hasNext',
|
||||||
"label": "下一个"
|
label: '下一个'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"body": {
|
body: {
|
||||||
"type": "form",
|
type: 'form',
|
||||||
"name": "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
"api": "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "engine",
|
name: 'engine',
|
||||||
"label": "Engine",
|
label: 'Engine',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "browser",
|
name: 'browser',
|
||||||
"label": "Browser",
|
label: 'Browser',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "platform",
|
name: 'platform',
|
||||||
"label": "Platform(s)",
|
label: 'Platform(s)',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "version",
|
name: 'version',
|
||||||
"label": "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "grade",
|
name: 'grade',
|
||||||
"label": "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"toggled": true
|
toggled: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,83 +1,78 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "Table 全键盘操作示例",
|
title: 'Table 全键盘操作示例',
|
||||||
"remark": "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "plain",
|
type: 'plain',
|
||||||
"className": "text-danger",
|
className: 'text-danger',
|
||||||
"text": "请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。"
|
text:
|
||||||
|
'请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "crud",
|
type: 'crud',
|
||||||
"className": "m-t",
|
className: 'm-t',
|
||||||
"api": "/api/sample",
|
api: '/api/sample',
|
||||||
"quickSaveApi": "/api/sample/bulkUpdate",
|
quickSaveApi: '/api/sample/bulkUpdate',
|
||||||
"quickSaveItemApi": "/api/sample/$id",
|
quickSaveItemApi: '/api/sample/$id',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"name": "id",
|
name: 'id',
|
||||||
"label": "ID",
|
label: 'ID',
|
||||||
"width": 20,
|
width: 20,
|
||||||
"sortable": true,
|
sortable: true,
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "engine",
|
name: 'engine',
|
||||||
"label": "Rendering engine",
|
label: 'Rendering engine',
|
||||||
"sortable": true,
|
sortable: true,
|
||||||
"quickEdit": {
|
quickEdit: {
|
||||||
type: "text",
|
type: 'text',
|
||||||
required: true,
|
required: true,
|
||||||
mode: 'inline'
|
mode: 'inline'
|
||||||
},
|
},
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "browser",
|
name: 'browser',
|
||||||
"label": "Browser",
|
label: 'Browser',
|
||||||
"sortable": true,
|
sortable: true,
|
||||||
"quickEdit": {
|
quickEdit: {
|
||||||
type: "text",
|
type: 'text',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "platform",
|
name: 'platform',
|
||||||
"label": "Platform(s)",
|
label: 'Platform(s)',
|
||||||
"sortable": true,
|
sortable: true,
|
||||||
"quickEdit": true,
|
quickEdit: true,
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "version",
|
name: 'version',
|
||||||
"label": "Engine version",
|
label: 'Engine version',
|
||||||
"quickEdit": true,
|
quickEdit: true,
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "grade",
|
name: 'grade',
|
||||||
"label": "CSS grade",
|
label: 'CSS grade',
|
||||||
"quickEdit": {
|
quickEdit: {
|
||||||
"type": "select",
|
type: 'select',
|
||||||
"options": [
|
options: ['A', 'B', 'C', 'D', 'X']
|
||||||
"A",
|
|
||||||
"B",
|
|
||||||
"C",
|
|
||||||
"D",
|
|
||||||
"X"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"toggled": true
|
toggled: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,212 +1,211 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "增删改查示例",
|
title: '增删改查示例',
|
||||||
remark: "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
mode: "list",
|
mode: 'list',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
saveOrderApi: {
|
saveOrderApi: {
|
||||||
url: "/api/sample/saveOrder"
|
url: '/api/sample/saveOrder'
|
||||||
},
|
},
|
||||||
orderField: "weight",
|
orderField: 'weight',
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "这只是个示例, 目前搜索对查询结果无效."
|
text: '这只是个示例, 目前搜索对查询结果无效.'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
bulkActions: [
|
bulkActions: [
|
||||||
{
|
{
|
||||||
label: "批量删除",
|
label: '批量删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
api: "delete:/api/sample/${ids|raw}",
|
api: 'delete:/api/sample/${ids|raw}',
|
||||||
confirmText: "确定要批量删除?",
|
confirmText: '确定要批量删除?',
|
||||||
type: "button",
|
type: 'button',
|
||||||
level: "danger"
|
level: 'danger'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "批量修改",
|
label: '批量修改',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
level: "info",
|
level: 'info',
|
||||||
type: "button",
|
type: 'button',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "批量编辑",
|
title: '批量编辑',
|
||||||
body: {
|
body: {
|
||||||
type: 'form',
|
type: 'form',
|
||||||
api: "/api/sample/bulkUpdate2",
|
api: '/api/sample/bulkUpdate2',
|
||||||
controls: [
|
controls: [
|
||||||
{type: 'hidden', name: 'ids'},
|
{type: 'hidden', name: 'ids'},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
quickSaveApi: "/api/sample/bulkUpdate",
|
quickSaveApi: '/api/sample/bulkUpdate',
|
||||||
quickSaveItemApi: "/api/sample/$id",
|
quickSaveItemApi: '/api/sample/$id',
|
||||||
listItem: {
|
listItem: {
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
quickEdit: true
|
quickEdit: true
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,221 +1,217 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "增删改查示例",
|
title: '增删改查示例',
|
||||||
remark: "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
mode: "list",
|
mode: 'list',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
saveOrderApi: {
|
saveOrderApi: {
|
||||||
url: "/api/sample/saveOrder"
|
url: '/api/sample/saveOrder'
|
||||||
},
|
},
|
||||||
orderField: "weight",
|
orderField: 'weight',
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "这只是个示例, 目前搜索对查询结果无效."
|
text: '这只是个示例, 目前搜索对查询结果无效.'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
bulkActions: [
|
bulkActions: [
|
||||||
{
|
{
|
||||||
label: "批量删除",
|
label: '批量删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
api: "delete:/api/sample/${ids|raw}",
|
api: 'delete:/api/sample/${ids|raw}',
|
||||||
confirmText: "确定要批量删除?",
|
confirmText: '确定要批量删除?',
|
||||||
type: "button",
|
type: 'button',
|
||||||
level: "danger"
|
level: 'danger'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "批量修改",
|
label: '批量修改',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
level: "info",
|
level: 'info',
|
||||||
type: "button",
|
type: 'button',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "批量编辑",
|
title: '批量编辑',
|
||||||
body: {
|
body: {
|
||||||
type: 'form',
|
type: 'form',
|
||||||
api: "/api/sample/bulkUpdate2",
|
api: '/api/sample/bulkUpdate2',
|
||||||
controls: [
|
controls: [
|
||||||
{type: 'hidden', name: 'ids'},
|
{type: 'hidden', name: 'ids'},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
quickSaveApi: "/api/sample/bulkUpdate",
|
quickSaveApi: '/api/sample/bulkUpdate',
|
||||||
quickSaveItemApi: "/api/sample/$id",
|
quickSaveItemApi: '/api/sample/$id',
|
||||||
headerToolbar: [
|
headerToolbar: ['bulkActions'],
|
||||||
"bulkActions"
|
footerToolbar: ['load-more'],
|
||||||
],
|
|
||||||
footerToolbar: [
|
|
||||||
"load-more"
|
|
||||||
],
|
|
||||||
listItem: {
|
listItem: {
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
labelClassName: "w-sm pull-left text-muted"
|
labelClassName: 'w-sm pull-left text-muted'
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
labelClassName: "w-sm pull-left text-muted"
|
labelClassName: 'w-sm pull-left text-muted'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
labelClassName: "w-sm pull-left text-muted"
|
labelClassName: 'w-sm pull-left text-muted'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
labelClassName: "w-sm pull-left text-muted"
|
labelClassName: 'w-sm pull-left text-muted'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,198 +1,198 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "一次性加载，前端分页，前端排序",
|
title: '一次性加载，前端分页，前端排序',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
loadDataOnce: true,
|
loadDataOnce: true,
|
||||||
api: "/api/sample?waitSeconds=1",
|
api: '/api/sample?waitSeconds=1',
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20,
|
width: 20,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
remark: 'Bla bla Bla'
|
remark: 'Bla bla Bla'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: false
|
toggled: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "operation",
|
type: 'operation',
|
||||||
label: "操作",
|
label: '操作',
|
||||||
width: 100,
|
width: 100,
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
tooltip: "查看",
|
tooltip: '查看',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
tooltip: "编辑",
|
tooltip: '编辑',
|
||||||
actionType: "drawer",
|
actionType: 'drawer',
|
||||||
drawer: {
|
drawer: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
size: 'lg',
|
size: 'lg',
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "select",
|
type: 'select',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
tooltip: "删除",
|
tooltip: '删除',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
toggled: true
|
toggled: true
|
||||||
|
|
|
||||||
|
|
@ -1,103 +1,104 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3",
|
title:
|
||||||
|
'支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3',
|
||||||
body: {
|
body: {
|
||||||
type: "table",
|
type: 'table',
|
||||||
data: {
|
data: {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "Internet Explorer 4.2",
|
browser: 'Internet Explorer 4.2',
|
||||||
"platform": "Win 95+",
|
platform: 'Win 95+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "Internet Explorer 4.2",
|
browser: 'Internet Explorer 4.2',
|
||||||
"platform": "Win 95+",
|
platform: 'Win 95+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "B"
|
grade: 'B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "AOL browser (AOL desktop)",
|
browser: 'AOL browser (AOL desktop)',
|
||||||
"platform": "Win 95+",
|
platform: 'Win 95+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "C"
|
grade: 'C'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "AOL browser (AOL desktop)",
|
browser: 'AOL browser (AOL desktop)',
|
||||||
"platform": "Win 98",
|
platform: 'Win 98',
|
||||||
"version": "3",
|
version: '3',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Trident",
|
engine: 'Trident',
|
||||||
"browser": "AOL browser (AOL desktop)",
|
browser: 'AOL browser (AOL desktop)',
|
||||||
"platform": "Win 98",
|
platform: 'Win 98',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 1.0",
|
browser: 'Firefox 1.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "4",
|
version: '4',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 1.0",
|
browser: 'Firefox 1.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "A"
|
grade: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 2.0",
|
browser: 'Firefox 2.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "B"
|
grade: 'B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 2.0",
|
browser: 'Firefox 2.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "C"
|
grade: 'C'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"engine": "Gecko",
|
engine: 'Gecko',
|
||||||
"browser": "Firefox 2.0",
|
browser: 'Firefox 2.0',
|
||||||
"platform": "Win 98+ / OSX.2+",
|
platform: 'Win 98+ / OSX.2+',
|
||||||
"version": "5",
|
version: '5',
|
||||||
"grade": "D"
|
grade: 'D'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
combineNum: 3, // 配置自动合并单元格的列数。
|
combineNum: 3, // 配置自动合并单元格的列数。
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine"
|
label: 'Rendering engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）",
|
title: '支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/mock2/crud/table2",
|
api: '/api/mock2/crud/table2',
|
||||||
saveOrderApi: '/api/mock2/form/saveData',
|
saveOrderApi: '/api/mock2/form/saveData',
|
||||||
expandConfig: {
|
expandConfig: {
|
||||||
expand: 'first',
|
expand: 'first',
|
||||||
|
|
@ -12,182 +12,182 @@ export default {
|
||||||
draggable: true,
|
draggable: true,
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
searchable: true,
|
searchable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
quickEdit: {
|
quickEdit: {
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X'],
|
||||||
inputClassName: 'w-xs',
|
inputClassName: 'w-xs',
|
||||||
saveImmediately: true
|
saveImmediately: true
|
||||||
},
|
},
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "operation",
|
type: 'operation',
|
||||||
label: "操作",
|
label: '操作',
|
||||||
width: 100,
|
width: 100,
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
actionType: "drawer",
|
actionType: 'drawer',
|
||||||
drawer: {
|
drawer: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
size: 'lg',
|
size: 'lg',
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "select",
|
type: 'select',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
toggled: true
|
toggled: true
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,60 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "http://amis.baidu.com/v2/schemas/page.json#",
|
$schema: 'http://amis.baidu.com/v2/schemas/page.json#',
|
||||||
title: "增删改查示例",
|
title: '增删改查示例',
|
||||||
remark: "bla bla bla",
|
remark: 'bla bla bla',
|
||||||
toolbar: [
|
toolbar: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
label: "新增",
|
label: '新增',
|
||||||
icon: 'fa fa-plus pull-left',
|
icon: 'fa fa-plus pull-left',
|
||||||
primary: true,
|
primary: true,
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "新增",
|
title: '新增',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "post:/api/sample",
|
api: 'post:/api/sample',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -62,131 +62,139 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
draggable: true,
|
draggable: true,
|
||||||
api: "/api/sample?waitSeconds=1",
|
api: '/api/sample?waitSeconds=1',
|
||||||
keepItemSelectionOnPageChange: true,
|
keepItemSelectionOnPageChange: true,
|
||||||
labelTpl: '${id} ${engine}',
|
labelTpl: '${id} ${engine}',
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "这里的表单项可以配置多个"
|
text: '这里的表单项可以配置多个'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
bulkActions: [
|
bulkActions: [
|
||||||
{
|
{
|
||||||
label: "批量删除",
|
label: '批量删除',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
api: "delete:/api/sample/${ids|raw}",
|
api: 'delete:/api/sample/${ids|raw}',
|
||||||
confirmText: "确定要批量删除?"
|
confirmText: '确定要批量删除?'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "批量修改",
|
label: '批量修改',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "批量编辑",
|
title: '批量编辑',
|
||||||
name: "sample-bulk-edit",
|
name: 'sample-bulk-edit',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/sample/bulkUpdate2",
|
api: '/api/sample/bulkUpdate2',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: 'hidden',
|
type: 'hidden',
|
||||||
name: 'ids'
|
name: 'ids'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
quickSaveApi: "/api/sample/bulkUpdate",
|
quickSaveApi: '/api/sample/bulkUpdate',
|
||||||
quickSaveItemApi: "/api/sample/$id",
|
quickSaveItemApi: '/api/sample/$id',
|
||||||
filterTogglable: true,
|
filterTogglable: true,
|
||||||
headerToolbar: ['filter-toggler', 'bulkActions', {
|
headerToolbar: [
|
||||||
|
'filter-toggler',
|
||||||
|
'bulkActions',
|
||||||
|
{
|
||||||
type: 'tpl',
|
type: 'tpl',
|
||||||
tpl: '定制内容示例：当前有 ${count} 条数据。',
|
tpl: '定制内容示例：当前有 ${count} 条数据。',
|
||||||
className: 'v-middle'
|
className: 'v-middle'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
type: 'link',
|
type: 'link',
|
||||||
href: 'https://www.baidu.com',
|
href: 'https://www.baidu.com',
|
||||||
body: '百度一下',
|
body: '百度一下',
|
||||||
htmlTarget: '_parent',
|
htmlTarget: '_parent',
|
||||||
className: 'v-middle'
|
className: 'v-middle'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
type: 'columns-toggler',
|
type: 'columns-toggler',
|
||||||
align: 'right'
|
align: 'right'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
type: 'drag-toggler',
|
type: 'drag-toggler',
|
||||||
align: 'right'
|
align: 'right'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
type: 'pagination',
|
type: 'pagination',
|
||||||
align: 'right'
|
align: 'right'
|
||||||
}],
|
}
|
||||||
|
],
|
||||||
footerToolbar: ['statistics', 'switch-per-page', 'pagination'],
|
footerToolbar: ['statistics', 'switch-per-page', 'pagination'],
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20,
|
width: 20,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
remark: 'Bla bla Bla'
|
remark: 'Bla bla Bla'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
searchable: true,
|
searchable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: false
|
toggled: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
popOver: {
|
popOver: {
|
||||||
body: {
|
body: {
|
||||||
type: "tpl",
|
type: 'tpl',
|
||||||
tpl: "偏了一点的popover"
|
tpl: '偏了一点的popover'
|
||||||
},
|
},
|
||||||
offset: {
|
offset: {
|
||||||
y: 100
|
y: 100
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
sortable: true,
|
sortable: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
quickEdit: true,
|
quickEdit: true,
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true,
|
toggled: true,
|
||||||
filterable: {
|
filterable: {
|
||||||
options: [
|
options: [
|
||||||
|
|
@ -201,153 +209,153 @@ export default {
|
||||||
{
|
{
|
||||||
label: '6',
|
label: '6',
|
||||||
value: '6'
|
value: '6'
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
quickEdit: {
|
quickEdit: {
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
type: "select",
|
type: 'select',
|
||||||
inputClassName: 'w-xs',
|
inputClassName: 'w-xs',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X'],
|
||||||
saveImmediately: true
|
saveImmediately: true
|
||||||
},
|
},
|
||||||
type: "text",
|
type: 'text',
|
||||||
toggled: true
|
toggled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "operation",
|
type: 'operation',
|
||||||
label: "操作",
|
label: '操作',
|
||||||
width: 100,
|
width: 100,
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
tooltip: "查看",
|
tooltip: '查看',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "html",
|
type: 'html',
|
||||||
html:
|
html:
|
||||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
tooltip: "编辑",
|
tooltip: '编辑',
|
||||||
actionType: "drawer",
|
actionType: 'drawer',
|
||||||
drawer: {
|
drawer: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
size: 'lg',
|
size: 'lg',
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "select",
|
type: 'select',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade",
|
label: 'CSS grade',
|
||||||
options: ["A", "B", "C", "D", "X"],
|
options: ['A', 'B', 'C', 'D', 'X']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
tooltip: "删除",
|
tooltip: '删除',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
toggled: true
|
toggled: true
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,55 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "Test 信息：${page}",
|
title: 'Test 信息：${page}',
|
||||||
body: {
|
body: {
|
||||||
"type": "crud",
|
type: 'crud',
|
||||||
"api": "/api/sample",
|
api: '/api/sample',
|
||||||
"syncLocation": false,
|
syncLocation: false,
|
||||||
"title": null,
|
title: null,
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"name": "id",
|
name: 'id',
|
||||||
"label": "ID",
|
label: 'ID',
|
||||||
"width": 20
|
width: 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "engine",
|
name: 'engine',
|
||||||
"label": "Rendering engine",
|
label: 'Rendering engine',
|
||||||
"sortable": true
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "grade",
|
name: 'grade',
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"label": "Rendering engine",
|
label: 'Rendering engine',
|
||||||
"map": {
|
map: {
|
||||||
"A": "<span class='label label-info'>A</span>",
|
A: "<span class='label label-info'>A</span>",
|
||||||
"B": "<span class='label label-success'>B</span>",
|
B: "<span class='label label-success'>B</span>",
|
||||||
"C": "<span class='label label-primary'>C</span>",
|
C: "<span class='label label-primary'>C</span>",
|
||||||
"X": "<span class='label label-danger'>X</span>",
|
X: "<span class='label label-danger'>X</span>",
|
||||||
"*": "Unkown"
|
'*': 'Unkown'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "operation",
|
type: 'operation',
|
||||||
"label": "操作",
|
label: '操作',
|
||||||
"width": 200,
|
width: 200,
|
||||||
"buttons": [
|
buttons: [
|
||||||
{
|
{
|
||||||
"type": "button-group",
|
type: 'button-group',
|
||||||
"buttons": [
|
buttons: [
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"label": "查看",
|
label: '查看',
|
||||||
"actionType": "dialog",
|
actionType: 'dialog',
|
||||||
"dialog": {
|
dialog: {
|
||||||
"disabled": true,
|
disabled: true,
|
||||||
"body": {
|
body: {
|
||||||
"type": "form",
|
type: 'form',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "engine",
|
name: 'engine',
|
||||||
"label": "Rendering engine",
|
label: 'Rendering engine',
|
||||||
"type": "static"
|
type: 'static'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -57,18 +57,18 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"label": "编辑",
|
label: '编辑',
|
||||||
"actionType": "dialog",
|
actionType: 'dialog',
|
||||||
"dialog": {
|
dialog: {
|
||||||
"body": {
|
body: {
|
||||||
"api": "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
"type": "form",
|
type: 'form',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "engine",
|
name: 'engine',
|
||||||
"label": "Rendering engine",
|
label: 'Rendering engine',
|
||||||
"type": "text"
|
type: 'text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -76,12 +76,12 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'button',
|
||||||
"label": "删除",
|
label: '删除',
|
||||||
"level": "danger",
|
level: 'danger',
|
||||||
"actionType": "ajax",
|
actionType: 'ajax',
|
||||||
"confirmText": "确定？",
|
confirmText: '确定？',
|
||||||
"api": "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,13 +9,16 @@ export default {
|
||||||
],
|
],
|
||||||
carousel1: [
|
carousel1: [
|
||||||
{
|
{
|
||||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
|
html:
|
||||||
|
'<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: 'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg'
|
image:
|
||||||
|
'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
image:
|
||||||
|
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -35,10 +38,12 @@ export default {
|
||||||
image: 'https://video-react.js.org/assets/poster.png'
|
image: 'https://video-react.js.org/assets/poster.png'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
html:
|
||||||
|
'<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
image:
|
||||||
|
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -53,7 +58,8 @@ export default {
|
||||||
height: '300',
|
height: '300',
|
||||||
itemSchema: {
|
itemSchema: {
|
||||||
type: 'tpl',
|
type: 'tpl',
|
||||||
tpl: '<div style="height: 100%; background-image: url(<%=data.item%>); background-position: center center; background-size: cover;"></div>'
|
tpl:
|
||||||
|
'<div style="height: 100%; background-image: url(<%=data.item%>); background-position: center center; background-size: cover;"></div>'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -80,4 +86,4 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,100 +1,62 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "图表示例",
|
title: '图表示例',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "grid",
|
type: 'grid',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"type": "panel",
|
type: 'panel',
|
||||||
"title": "本地配置示例 支持交互",
|
title: '本地配置示例 支持交互',
|
||||||
"name": "chart-local",
|
name: 'chart-local',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "chart",
|
type: 'chart',
|
||||||
"config": {
|
config: {
|
||||||
"title": {
|
title: {
|
||||||
"text": "极坐标双数值轴"
|
text: '极坐标双数值轴'
|
||||||
},
|
},
|
||||||
"legend": {
|
legend: {
|
||||||
"data": [
|
data: ['line']
|
||||||
"line"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"polar": {
|
polar: {
|
||||||
"center": [
|
center: ['50%', '54%']
|
||||||
"50%",
|
|
||||||
"54%"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"tooltip": {
|
tooltip: {
|
||||||
"trigger": "axis",
|
trigger: 'axis',
|
||||||
"axisPointer": {
|
axisPointer: {
|
||||||
"type": "cross"
|
type: 'cross'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"angleAxis": {
|
angleAxis: {
|
||||||
"type": "value",
|
type: 'value',
|
||||||
"startAngle": 0
|
startAngle: 0
|
||||||
},
|
},
|
||||||
"radiusAxis": {
|
radiusAxis: {
|
||||||
"min": 0
|
min: 0
|
||||||
},
|
},
|
||||||
"series": [
|
series: [
|
||||||
{
|
{
|
||||||
"coordinateSystem": "polar",
|
coordinateSystem: 'polar',
|
||||||
"name": "line",
|
name: 'line',
|
||||||
"type": "line",
|
type: 'line',
|
||||||
"showSymbol": false,
|
showSymbol: false,
|
||||||
"data": [
|
data: [
|
||||||
[
|
[0, 0],
|
||||||
0,
|
[0.03487823687206265, 1],
|
||||||
0
|
[0.06958655048003272, 2],
|
||||||
],
|
[0.10395584540887964, 3],
|
||||||
[
|
[0.13781867790849958, 4],
|
||||||
0.03487823687206265,
|
[0.17101007166283433, 5],
|
||||||
1
|
[0.2033683215379001, 6],
|
||||||
],
|
[0.2347357813929454, 7],
|
||||||
[
|
[0.26495963211660245, 8],
|
||||||
0.06958655048003272,
|
[0.2938926261462365, 9],
|
||||||
2
|
[0.3213938048432697, 10]
|
||||||
],
|
|
||||||
[
|
|
||||||
0.10395584540887964,
|
|
||||||
3
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.13781867790849958,
|
|
||||||
4
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.17101007166283433,
|
|
||||||
5
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.2033683215379001,
|
|
||||||
6
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.2347357813929454,
|
|
||||||
7
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.26495963211660245,
|
|
||||||
8
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.2938926261462365,
|
|
||||||
9
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.3213938048432697,
|
|
||||||
10
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"animationDuration": 2000
|
animationDuration: 2000
|
||||||
},
|
},
|
||||||
clickAction: {
|
clickAction: {
|
||||||
actionType: 'dialog',
|
actionType: 'dialog',
|
||||||
|
|
@ -107,8 +69,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "chart",
|
type: 'chart',
|
||||||
"api": "/api/mock2/chart/chart1"
|
api: '/api/mock2/chart/chart1'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -117,81 +79,82 @@ export default {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "panel",
|
type: 'panel',
|
||||||
"title": "远程图表示例(返回值带function)",
|
title: '远程图表示例(返回值带function)',
|
||||||
"name": "chart-remote",
|
name: 'chart-remote',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "chart",
|
type: 'chart',
|
||||||
"api": "/api/mock2/chart/chart1"
|
api: '/api/mock2/chart/chart1'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "panel",
|
type: 'panel',
|
||||||
"title": "Form+chart组合",
|
title: 'Form+chart组合',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "form",
|
type: 'form',
|
||||||
"title": "过滤条件",
|
title: '过滤条件',
|
||||||
"target": "chart1,chart2",
|
target: 'chart1,chart2',
|
||||||
"submitOnInit":true,
|
submitOnInit: true,
|
||||||
"className": "m-b",
|
className: 'm-b',
|
||||||
"wrapWithPanel": false,
|
wrapWithPanel: false,
|
||||||
"mode": "inline",
|
mode: 'inline',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "date",
|
type: 'date',
|
||||||
"label": "开始日期",
|
label: '开始日期',
|
||||||
"name": "starttime",
|
name: 'starttime',
|
||||||
"value": "-8days",
|
value: '-8days',
|
||||||
"maxDate": "${endtime}"
|
maxDate: '${endtime}'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "date",
|
type: 'date',
|
||||||
"label": "结束日期",
|
label: '结束日期',
|
||||||
"name": "endtime",
|
name: 'endtime',
|
||||||
"value": "-1days",
|
value: '-1days',
|
||||||
"minDate": "${starttime}"
|
minDate: '${starttime}'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"label": "条件",
|
label: '条件',
|
||||||
"name": "name",
|
name: 'name',
|
||||||
"addOn": {
|
addOn: {
|
||||||
"type": "submit",
|
type: 'submit',
|
||||||
"label": "搜索",
|
label: '搜索',
|
||||||
"level": "primary"
|
level: 'primary'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"actions": []
|
actions: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'divider'
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "grid",
|
type: 'grid',
|
||||||
"className": "m-t-lg",
|
className: 'm-t-lg',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"type": "chart",
|
type: 'chart',
|
||||||
"name": "chart1",
|
name: 'chart1',
|
||||||
"initFetch": false,
|
initFetch: false,
|
||||||
"api": "/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}"
|
api:
|
||||||
|
'/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "chart",
|
type: 'chart',
|
||||||
"name": "chart2",
|
name: 'chart2',
|
||||||
"initFetch": false,
|
initFetch: false,
|
||||||
"api": "/api/mock2/chart/chart2?name=$name"
|
api: '/api/mock2/chart/chart2?name=$name'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ export default {
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: 'button-toolbar',
|
type: 'button-toolbar',
|
||||||
className: "block",
|
className: 'block',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
|
|
@ -65,7 +65,7 @@ export default {
|
||||||
title: '提示',
|
title: '提示',
|
||||||
body: '这是个简单的弹框'
|
body: '这是个简单的弹框'
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -404,10 +404,10 @@ export default {
|
||||||
title: '提示',
|
title: '提示',
|
||||||
closeOnEsc: true,
|
closeOnEsc: true,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
body: '这是个简单的弹框',
|
body: '这是个简单的弹框'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -120,29 +120,29 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "常规模式",
|
title: '常规模式',
|
||||||
mode: "normal",
|
mode: 'normal',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
required: true,
|
required: true,
|
||||||
placeholder: "请输入邮箱",
|
placeholder: '请输入邮箱',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
required: true,
|
required: true,
|
||||||
placeholder: "请输入密码"
|
placeholder: '请输入密码'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住登录"
|
label: '记住登录'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -171,15 +171,15 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "常规模式",
|
title: '常规模式',
|
||||||
mode: "normal",
|
mode: 'normal',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "勾上我才可以确认"
|
label: '勾上我才可以确认'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -210,12 +210,12 @@ export default {
|
||||||
title: '操作成功',
|
title: '操作成功',
|
||||||
body: '当前时间戳: <code>${date}</code>'
|
body: '当前时间戳: <code>${date}</code>'
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "button-toolbar",
|
type: 'button-toolbar',
|
||||||
className: 'm-l-none',
|
className: 'm-l-none',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
|
|
@ -223,7 +223,7 @@ export default {
|
||||||
label: 'sm 弹框',
|
label: 'sm 弹框',
|
||||||
actionType: 'dialog',
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
size: "sm",
|
size: 'sm',
|
||||||
title: '提示',
|
title: '提示',
|
||||||
body: '这是个简单的弹框'
|
body: '这是个简单的弹框'
|
||||||
}
|
}
|
||||||
|
|
@ -244,7 +244,7 @@ export default {
|
||||||
label: 'lg 弹框',
|
label: 'lg 弹框',
|
||||||
actionType: 'dialog',
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
size: "lg",
|
size: 'lg',
|
||||||
title: '提示',
|
title: '提示',
|
||||||
body: '这是个简单的弹框'
|
body: '这是个简单的弹框'
|
||||||
}
|
}
|
||||||
|
|
@ -255,12 +255,12 @@ export default {
|
||||||
label: 'xl 弹框',
|
label: 'xl 弹框',
|
||||||
actionType: 'dialog',
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
size: "xl",
|
size: 'xl',
|
||||||
title: '提示',
|
title: '提示',
|
||||||
body: '这是个简单的弹框'
|
body: '这是个简单的弹框'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,26 +6,28 @@ const FormComponent = makeSchemaRenderer({
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: 'pull-right m-t-sm m-r',
|
className: 'pull-right m-t-sm m-r',
|
||||||
controls: [{
|
controls: [
|
||||||
"type": "input-group",
|
|
||||||
"size": "sm",
|
|
||||||
"controls": [
|
|
||||||
{
|
{
|
||||||
"type": "icon",
|
type: 'input-group',
|
||||||
"addOnclassName": "no-bg",
|
size: 'sm',
|
||||||
"className": "text-sm",
|
controls: [
|
||||||
"icon": "search",
|
{
|
||||||
"vendor": "iconfont"
|
type: 'icon',
|
||||||
|
addOnclassName: 'no-bg',
|
||||||
|
className: 'text-sm',
|
||||||
|
icon: 'search',
|
||||||
|
vendor: 'iconfont'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"placeholder": "搜索文档",
|
placeholder: '搜索文档',
|
||||||
"inputClassName": "b-l-none p-l-none",
|
inputClassName: 'b-l-none p-l-none',
|
||||||
"name": "docsearch"
|
name: 'docsearch'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}]
|
}
|
||||||
})
|
]
|
||||||
|
});
|
||||||
|
|
||||||
export default class DocSearch extends React.Component {
|
export default class DocSearch extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
|
@ -35,13 +37,11 @@ export default class DocSearch extends React.Component {
|
||||||
apiKey: '469f5cf3d54f9b86127970f913dc0725',
|
apiKey: '469f5cf3d54f9b86127970f913dc0725',
|
||||||
indexName: 'gh_pages',
|
indexName: 'gh_pages',
|
||||||
inputSelector,
|
inputSelector,
|
||||||
debug: false,
|
debug: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return <FormComponent showCode={false} theme={this.props.theme} />;
|
||||||
<FormComponent showCode={false} theme={this.props.theme} />
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6,45 +6,58 @@ import schema from './Form/Test';
|
||||||
import {Portal} from 'react-overlays';
|
import {Portal} from 'react-overlays';
|
||||||
|
|
||||||
export default class AMisSchemaEditor extends React.Component {
|
export default class AMisSchemaEditor extends React.Component {
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
preview: localStorage.getItem('editting_preview') ? true : false,
|
preview: localStorage.getItem('editting_preview') ? true : false,
|
||||||
schema: localStorage.getItem('editting_schema') ? JSON.parse(localStorage.getItem('editting_schema')) : schema
|
schema: localStorage.getItem('editting_schema')
|
||||||
|
? JSON.parse(localStorage.getItem('editting_schema'))
|
||||||
|
: schema
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = (value) => {
|
handleChange = value => {
|
||||||
localStorage.setItem('editting_schema', JSON.stringify(value));
|
localStorage.setItem('editting_schema', JSON.stringify(value));
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
schema: value
|
schema: value
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
handlePreviewChange = (preview) => {
|
handlePreviewChange = preview => {
|
||||||
localStorage.setItem('editting_preview', preview ? 'true' : '');
|
localStorage.setItem('editting_preview', preview ? 'true' : '');
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
preview: !!preview
|
preview: !!preview
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
clearCache = () => {
|
clearCache = () => {
|
||||||
localStorage.removeItem('editting_schema');
|
localStorage.removeItem('editting_schema');
|
||||||
this.setState({
|
this.setState({
|
||||||
schema: schema
|
schema: schema
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="h-full">
|
<div className="h-full">
|
||||||
<Portal container={() => document.querySelector('#headerBar')}>
|
<Portal container={() => document.querySelector('#headerBar')}>
|
||||||
<div className="inline m-l">
|
<div className="inline m-l">
|
||||||
预览 <Switch value={this.state.preview} onChange={this.handlePreviewChange} className="v-middle" inline />
|
预览{' '}
|
||||||
<Button size="sm" className="m-l" onClick={this.clearCache}>清除缓存</Button>
|
<Switch
|
||||||
|
value={this.state.preview}
|
||||||
|
onChange={this.handlePreviewChange}
|
||||||
|
className="v-middle"
|
||||||
|
inline
|
||||||
|
/>
|
||||||
|
<Button size="sm" className="m-l" onClick={this.clearCache}>
|
||||||
|
清除缓存
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Portal>
|
</Portal>
|
||||||
|
|
||||||
|
<Editor
|
||||||
<Editor preview={this.state.preview} value={this.state.schema} onChange={this.handleChange} className="fix-settings" />
|
preview={this.state.preview}
|
||||||
|
value={this.state.schema}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
className="fix-settings"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "Combo 示例",
|
title: 'Combo 示例',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "tabs",
|
type: 'tabs',
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
title: "基本用法",
|
title: '基本用法',
|
||||||
hash: 'basic',
|
hash: 'basic',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
|
|
@ -27,47 +27,47 @@ export default {
|
||||||
type: 'divider'
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo1",
|
name: 'combo1',
|
||||||
label: "组合多条多行",
|
label: '组合多条多行',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
value: [{}],
|
value: [{}],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: '',
|
value: '',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
label: "选项",
|
label: '选项',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"],
|
options: ['a', 'b', 'c'],
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "独立排序",
|
label: '独立排序',
|
||||||
level: "dark",
|
level: 'dark',
|
||||||
className: "m-t-n-xs",
|
className: 'm-t-n-xs',
|
||||||
size: "sm",
|
size: 'sm',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
visibleOn: "data.combo1.length > 1",
|
visibleOn: 'data.combo1.length > 1',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "对 Combo 进行 拖拽排序",
|
title: '对 Combo 进行 拖拽排序',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo1",
|
name: 'combo1',
|
||||||
label: false,
|
label: false,
|
||||||
multiple: true,
|
multiple: true,
|
||||||
draggable: true,
|
draggable: true,
|
||||||
|
|
@ -76,9 +76,9 @@ export default {
|
||||||
value: [{}],
|
value: [{}],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "static",
|
type: 'static',
|
||||||
tpl: "${a} - ${b}"
|
tpl: '${a} - ${b}'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -86,38 +86,38 @@ export default {
|
||||||
},
|
},
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
mergeData: true,
|
mergeData: true,
|
||||||
label: "确认",
|
label: '确认',
|
||||||
level: "primary"
|
level: 'primary'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
actionType: "close",
|
actionType: 'close',
|
||||||
label: "取消"
|
label: '取消'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo2",
|
name: 'combo2',
|
||||||
label: "组合多条单行",
|
label: '组合多条单行',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
value: [{}],
|
value: [{}],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: ''
|
value: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -125,44 +125,44 @@ export default {
|
||||||
type: 'divider'
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo3",
|
name: 'combo3',
|
||||||
label: "组合单条多行",
|
label: '组合单条多行',
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: '',
|
value: '',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
label: "选项",
|
label: '选项',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo4",
|
name: 'combo4',
|
||||||
label: "组合单条单行",
|
label: '组合单条单行',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: '',
|
value: '',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -172,60 +172,60 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "内联样式",
|
title: '内联样式',
|
||||||
hash: 'inline',
|
hash: 'inline',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo11",
|
name: 'combo11',
|
||||||
label: "组合多条多行内联",
|
label: '组合多条多行内联',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
inline: true,
|
inline: true,
|
||||||
value: [{}],
|
value: [{}],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: ''
|
value: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
label: "选项",
|
label: '选项',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo22",
|
name: 'combo22',
|
||||||
label: "组合多条单行内联",
|
label: '组合多条单行内联',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
inline: true,
|
inline: true,
|
||||||
value: [{}],
|
value: [{}],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: ''
|
value: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -233,44 +233,44 @@ export default {
|
||||||
type: 'divider'
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo33",
|
name: 'combo33',
|
||||||
label: "组合单条多行内联",
|
label: '组合单条多行内联',
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
inline: true,
|
inline: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: ''
|
value: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
label: "选项",
|
label: '选项',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo44",
|
name: 'combo44',
|
||||||
label: "组合单条单行内联",
|
label: '组合单条单行内联',
|
||||||
inline: true,
|
inline: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: ''
|
value: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"]
|
options: ['a', 'b', 'c']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -280,36 +280,36 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "唯一验证",
|
title: '唯一验证',
|
||||||
hash: 'unique',
|
hash: 'unique',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo666",
|
name: 'combo666',
|
||||||
label: "组合多条唯一",
|
label: '组合多条唯一',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
value: [{}],
|
value: [{}],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: '',
|
value: '',
|
||||||
unique: true
|
unique: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"],
|
options: ['a', 'b', 'c'],
|
||||||
unique: true
|
unique: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -320,38 +320,36 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "可拖拽排序",
|
title: '可拖拽排序',
|
||||||
hash: 'sortable',
|
hash: 'sortable',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo777",
|
name: 'combo777',
|
||||||
label: "可拖拽排序",
|
label: '可拖拽排序',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
value: [{a: '1', b: "a"}, {a: '2', b: "b"}],
|
value: [{a: '1', b: 'a'}, {a: '2', b: 'b'}],
|
||||||
draggable: true,
|
draggable: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
unique: true
|
unique: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"],
|
options: ['a', 'b', 'c'],
|
||||||
unique: true
|
unique: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -362,41 +360,39 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "值打平",
|
title: '值打平',
|
||||||
hash: 'flat',
|
hash: 'flat',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo888",
|
name: 'combo888',
|
||||||
label: "可打平只存储值",
|
label: '可打平只存储值',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
flat: true,
|
flat: true,
|
||||||
value: ["red", "pink"],
|
value: ['red', 'pink'],
|
||||||
draggable: true,
|
draggable: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "color",
|
type: 'color',
|
||||||
placeholder: "选取颜色"
|
placeholder: '选取颜色'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "combo888",
|
name: 'combo888',
|
||||||
label: "当前值",
|
label: '当前值',
|
||||||
tpl: "<pre>${combo888|json}</pre>"
|
tpl: '<pre>${combo888|json}</pre>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -404,16 +400,16 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "条件",
|
title: '条件',
|
||||||
hash: 'conditions',
|
hash: 'conditions',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
'<p class="m-b-xl">添加时可选择类型，比如这个栗子，可以选择是文本类型还是数字类型</p>',
|
'<p class="m-b-xl">添加时可选择类型，比如这个栗子，可以选择是文本类型还是数字类型</p>',
|
||||||
|
|
@ -422,7 +418,7 @@ export default {
|
||||||
name: 'combo-conditions1',
|
name: 'combo-conditions1',
|
||||||
label: '单选',
|
label: '单选',
|
||||||
value: {
|
value: {
|
||||||
type: "number"
|
type: 'number'
|
||||||
},
|
},
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
conditions: [
|
conditions: [
|
||||||
|
|
@ -430,21 +426,21 @@ export default {
|
||||||
label: '文本',
|
label: '文本',
|
||||||
test: 'this.type === "text"',
|
test: 'this.type === "text"',
|
||||||
scaffold: {
|
scaffold: {
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
name: ""
|
name: ''
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
label: "名称",
|
label: '名称',
|
||||||
name: "label",
|
name: 'label',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "字段名",
|
label: '字段名',
|
||||||
name: "name",
|
name: 'name',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -452,39 +448,39 @@ export default {
|
||||||
label: '数字',
|
label: '数字',
|
||||||
test: 'this.type === "number"',
|
test: 'this.type === "number"',
|
||||||
scaffold: {
|
scaffold: {
|
||||||
type: "number",
|
type: 'number',
|
||||||
label: "数字",
|
label: '数字',
|
||||||
name: ""
|
name: ''
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
label: "名称",
|
label: '名称',
|
||||||
name: "label",
|
name: 'label',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "字段名",
|
label: '字段名',
|
||||||
name: "name",
|
name: 'name',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "最小值",
|
label: '最小值',
|
||||||
name: "min",
|
name: 'min',
|
||||||
type: "number"
|
type: 'number'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "最大值",
|
label: '最大值',
|
||||||
name: "max",
|
name: 'max',
|
||||||
type: "number"
|
type: 'number'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "步长",
|
label: '步长',
|
||||||
name: "step",
|
name: 'step',
|
||||||
type: "number"
|
type: 'number'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -493,7 +489,7 @@ export default {
|
||||||
label: '多选',
|
label: '多选',
|
||||||
value: [
|
value: [
|
||||||
{
|
{
|
||||||
type: "text"
|
type: 'text'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
|
|
@ -504,21 +500,21 @@ export default {
|
||||||
label: '文本',
|
label: '文本',
|
||||||
test: 'this.type === "text"',
|
test: 'this.type === "text"',
|
||||||
scaffold: {
|
scaffold: {
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
name: ""
|
name: ''
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
label: "名称",
|
label: '名称',
|
||||||
name: "label",
|
name: 'label',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "字段名",
|
label: '字段名',
|
||||||
name: "name",
|
name: 'name',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -526,39 +522,39 @@ export default {
|
||||||
label: '数字',
|
label: '数字',
|
||||||
test: 'this.type === "number"',
|
test: 'this.type === "number"',
|
||||||
scaffold: {
|
scaffold: {
|
||||||
type: "number",
|
type: 'number',
|
||||||
label: "数字",
|
label: '数字',
|
||||||
name: ""
|
name: ''
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
label: "名称",
|
label: '名称',
|
||||||
name: "label",
|
name: 'label',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "字段名",
|
label: '字段名',
|
||||||
name: "name",
|
name: 'name',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "最小值",
|
label: '最小值',
|
||||||
name: "min",
|
name: 'min',
|
||||||
type: "number"
|
type: 'number'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "最大值",
|
label: '最大值',
|
||||||
name: "max",
|
name: 'max',
|
||||||
type: "number"
|
type: 'number'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "步长",
|
label: '步长',
|
||||||
name: "step",
|
name: 'step',
|
||||||
type: "number"
|
type: 'number'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -566,22 +562,22 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "Tabs",
|
title: 'Tabs',
|
||||||
hash: "tabs",
|
hash: 'tabs',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo101",
|
name: 'combo101',
|
||||||
label: "组合多条多行",
|
label: '组合多条多行',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
value: [{}],
|
value: [{}],
|
||||||
|
|
@ -590,79 +586,77 @@ export default {
|
||||||
maxLength: 3,
|
maxLength: 3,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text",
|
type: 'text',
|
||||||
placeholder: "文本",
|
placeholder: '文本',
|
||||||
value: '',
|
value: '',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
label: "选项",
|
label: '选项',
|
||||||
type: "select",
|
type: 'select',
|
||||||
options: ["a", "b", "c"],
|
options: ['a', 'b', 'c'],
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: "其他",
|
title: '其他',
|
||||||
hash: 'others',
|
hash: 'others',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
wrapWithPanel: false,
|
wrapWithPanel: false,
|
||||||
className: "m-t",
|
className: 'm-t',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
label: "父级值",
|
label: '父级值',
|
||||||
name: "a_super",
|
name: 'a_super',
|
||||||
value: "123"
|
value: '123'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo999",
|
name: 'combo999',
|
||||||
label: "可获取父级数据",
|
label: '可获取父级数据',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
canAccessSuperData: true,
|
canAccessSuperData: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a_super",
|
name: 'a_super',
|
||||||
type: "text"
|
type: 'text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "combo",
|
type: 'combo',
|
||||||
name: "combo9999",
|
name: 'combo9999',
|
||||||
label: "显示序号",
|
label: '显示序号',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "tpl",
|
type: 'tpl',
|
||||||
tpl: "<%= data.index + 1%>",
|
tpl: '<%= data.index + 1%>',
|
||||||
className: "p-t-xs",
|
className: 'p-t-xs',
|
||||||
mode: "inline"
|
mode: 'inline'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text"
|
type: 'text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {FormItem, Renderer} from '../../../src/index';
|
||||||
FormItem,
|
|
||||||
Renderer
|
|
||||||
} from '../../../src/index';
|
|
||||||
|
|
||||||
@FormItem({
|
@FormItem({
|
||||||
type: 'custom'
|
type: 'custom'
|
||||||
})
|
})
|
||||||
class MyFormItem extends React.Component {
|
class MyFormItem extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {value, onChange} = this.props;
|
||||||
value,
|
|
||||||
onChange
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -20,14 +14,19 @@ class MyFormItem extends React.Component {
|
||||||
|
|
||||||
<p>当前值：{value}</p>
|
<p>当前值：{value}</p>
|
||||||
|
|
||||||
<a className="btn btn-default" onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a>
|
<a
|
||||||
|
className="btn btn-default"
|
||||||
|
onClick={() => onChange(Math.round(Math.random() * 10000))}
|
||||||
|
>
|
||||||
|
随机修改
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Renderer({
|
@Renderer({
|
||||||
test: /(^|\/)my\-renderer$/,
|
test: /(^|\/)my\-renderer$/
|
||||||
})
|
})
|
||||||
class CustomRenderer extends React.Component {
|
class CustomRenderer extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -39,17 +38,17 @@ class CustomRenderer extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "自定义组件示例",
|
title: '自定义组件示例',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交",
|
label: '提交',
|
||||||
primary: true
|
primary: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -62,7 +61,12 @@ export default {
|
||||||
|
|
||||||
<p>当前值：{value}</p>
|
<p>当前值：{value}</p>
|
||||||
|
|
||||||
<a className="btn btn-default" onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a>
|
<a
|
||||||
|
className="btn btn-default"
|
||||||
|
onClick={() => onChange(Math.round(Math.random() * 10000))}
|
||||||
|
>
|
||||||
|
随机修改
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
definitions: {
|
definitions: {
|
||||||
options: {
|
options: {
|
||||||
type: 'combo',
|
type: 'combo',
|
||||||
|
|
@ -10,25 +10,25 @@ export default {
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
label: "名称",
|
label: '名称',
|
||||||
name: "label",
|
name: 'label',
|
||||||
type: "text",
|
type: 'text',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: "值",
|
label: '值',
|
||||||
name: "value",
|
name: 'value',
|
||||||
type: "text",
|
type: 'text',
|
||||||
required: true
|
required: true
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
$ref: 'options',
|
$ref: 'options',
|
||||||
label: "子选项",
|
label: '子选项',
|
||||||
name: "children",
|
name: 'children',
|
||||||
addButtonText: '新增子选项'
|
addButtonText: '新增子选项'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -41,7 +41,7 @@ export default {
|
||||||
typeSwitchable: false,
|
typeSwitchable: false,
|
||||||
conditions: [
|
conditions: [
|
||||||
{
|
{
|
||||||
label: "条件",
|
label: '条件',
|
||||||
test: "!data.hasOwnProperty('connect')",
|
test: "!data.hasOwnProperty('connect')",
|
||||||
scaffold: {},
|
scaffold: {},
|
||||||
controls: [
|
controls: [
|
||||||
|
|
@ -119,16 +119,16 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'in',
|
label: 'in',
|
||||||
value: 'in',
|
value: 'in'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'not in',
|
label: 'not in',
|
||||||
value: 'not in',
|
value: 'not in'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '!=',
|
label: '!=',
|
||||||
value: '!='
|
value: '!='
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -137,7 +137,8 @@ export default {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
placeholder: '值',
|
placeholder: '值',
|
||||||
required: true,
|
required: true,
|
||||||
visibleOn: '~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)'
|
visibleOn:
|
||||||
|
'~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -148,7 +149,7 @@ export default {
|
||||||
items: {
|
items: {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
placeholder: '值',
|
placeholder: '值',
|
||||||
required: true,
|
required: true
|
||||||
},
|
},
|
||||||
visibleOn: '~["in", "not in"].indexOf(this.opt)'
|
visibleOn: '~["in", "not in"].indexOf(this.opt)'
|
||||||
}
|
}
|
||||||
|
|
@ -158,15 +159,15 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: "组合",
|
label: '组合',
|
||||||
test: "data.hasOwnProperty('connect')",
|
test: "data.hasOwnProperty('connect')",
|
||||||
scaffold: {
|
scaffold: {
|
||||||
connect: "&",
|
connect: '&',
|
||||||
exprs: [{}]
|
exprs: [{}]
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "button-group",
|
type: 'button-group',
|
||||||
name: 'connect',
|
name: 'connect',
|
||||||
value: '&',
|
value: '&',
|
||||||
clearable: false,
|
clearable: false,
|
||||||
|
|
@ -200,7 +201,7 @@ export default {
|
||||||
multiLine: true,
|
multiLine: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "button-group",
|
type: 'button-group',
|
||||||
name: 'connect',
|
name: 'connect',
|
||||||
value: '&',
|
value: '&',
|
||||||
// label: "连接方式",
|
// label: "连接方式",
|
||||||
|
|
@ -241,10 +242,12 @@ export default {
|
||||||
{
|
{
|
||||||
$ref: 'options',
|
$ref: 'options',
|
||||||
name: 'options',
|
name: 'options',
|
||||||
value: [{
|
value: [
|
||||||
|
{
|
||||||
label: '选项1',
|
label: '选项1',
|
||||||
value: '1'
|
value: '1'
|
||||||
}],
|
}
|
||||||
|
],
|
||||||
minLength: 1,
|
minLength: 1,
|
||||||
label: '选项配置'
|
label: '选项配置'
|
||||||
}
|
}
|
||||||
|
|
@ -262,12 +265,12 @@ export default {
|
||||||
label: 'Query'
|
label: 'Query'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "q",
|
name: 'q',
|
||||||
label: "当前值",
|
label: '当前值',
|
||||||
tpl: "<pre>${q|json}</pre>"
|
tpl: '<pre>${q|json}</pre>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,44 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "Editor",
|
title: 'Editor',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "javascript",
|
name: 'javascript',
|
||||||
type: "editor",
|
type: 'editor',
|
||||||
label: "Javascript",
|
label: 'Javascript',
|
||||||
language: 'javascript',
|
language: 'javascript',
|
||||||
value: "console.log(1, 2, 3);"
|
value: 'console.log(1, 2, 3);'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "html",
|
name: 'html',
|
||||||
type: "editor",
|
type: 'editor',
|
||||||
language: 'html',
|
language: 'html',
|
||||||
label: "Html",
|
label: 'Html',
|
||||||
value: "<html><head><title>Hello</title></head><body><p>world</p></body></html>"
|
value:
|
||||||
|
'<html><head><title>Hello</title></head><body><p>world</p></body></html>'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "css",
|
name: 'css',
|
||||||
type: "editor",
|
type: 'editor',
|
||||||
language: 'css',
|
language: 'css',
|
||||||
label: "CSS",
|
label: 'CSS',
|
||||||
value: "body {color: red;}"
|
value: 'body {color: red;}'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "json",
|
name: 'json',
|
||||||
type: "editor",
|
type: 'editor',
|
||||||
language: 'json',
|
language: 'json',
|
||||||
label: "JSON",
|
label: 'JSON',
|
||||||
value: `{"a": 1, "b": 2}`
|
value: `{"a": 1, "b": 2}`
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "FieldSet 示例",
|
title: 'FieldSet 示例',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交",
|
label: '提交',
|
||||||
primary: true
|
primary: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -25,36 +25,36 @@ export default {
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: false,
|
label: false,
|
||||||
placeholder: "Password"
|
placeholder: 'Password'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: false,
|
label: false,
|
||||||
option: "Remember me"
|
option: 'Remember me'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -66,79 +66,79 @@ export default {
|
||||||
type: 'fieldSet',
|
type: 'fieldSet',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
option: "记住我"
|
option: '记住我'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "FieldSet 样式集",
|
title: 'FieldSet 样式集',
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
title: "超级小",
|
title: '超级小',
|
||||||
type: 'fieldSet',
|
type: 'fieldSet',
|
||||||
className: "fieldset-xs",
|
className: 'fieldset-xs',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "文本 ..."
|
text: '文本 ...'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "小尺寸",
|
title: '小尺寸',
|
||||||
type: 'fieldSet',
|
type: 'fieldSet',
|
||||||
className: "fieldset-sm",
|
className: 'fieldset-sm',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "文本 ..."
|
text: '文本 ...'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "正常尺寸",
|
title: '正常尺寸',
|
||||||
type: 'fieldSet',
|
type: 'fieldSet',
|
||||||
className: "fieldset",
|
className: 'fieldset',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "文本 ..."
|
text: '文本 ...'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "中大尺寸",
|
title: '中大尺寸',
|
||||||
type: 'fieldSet',
|
type: 'fieldSet',
|
||||||
className: "fieldset-md",
|
className: 'fieldset-md',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "文本 ..."
|
text: '文本 ...'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "超大尺寸",
|
title: '超大尺寸',
|
||||||
type: 'fieldSet',
|
type: 'fieldSet',
|
||||||
className: "fieldset-lg",
|
className: 'fieldset-lg',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "文本 ..."
|
text: '文本 ...'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,96 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "FieldSet In Tabs",
|
title: 'FieldSet In Tabs',
|
||||||
remark: "",
|
remark: '',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
collapsable: true,
|
collapsable: true,
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
title: "Tab A",
|
title: 'Tab A',
|
||||||
fieldSet: [
|
fieldSet: [
|
||||||
{
|
{
|
||||||
title: "Group A",
|
title: 'Group A',
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
title: "SubTab A",
|
title: 'SubTab A',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "SubTab B",
|
title: 'SubTab B',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Group B",
|
title: 'Group B',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Tab B",
|
title: 'Tab B',
|
||||||
fieldSet: [
|
fieldSet: [
|
||||||
{
|
{
|
||||||
title: "Group A",
|
title: 'Group A',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Group B",
|
title: 'Group B',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Text"
|
label: 'Text'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,127 +1,127 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "公式示例",
|
title: '公式示例',
|
||||||
"body": [
|
body: [
|
||||||
"<p>通过公式，可以动态的设置目标值。</p>",
|
'<p>通过公式，可以动态的设置目标值。</p>',
|
||||||
{
|
{
|
||||||
"type": "form",
|
type: 'form',
|
||||||
title: "自动应用",
|
title: '自动应用',
|
||||||
"api": "/api/mock2/form/saveForm",
|
api: '/api/mock2/form/saveForm',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "number",
|
type: 'number',
|
||||||
"name": "a",
|
name: 'a',
|
||||||
"label": "A"
|
label: 'A'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "number",
|
type: 'number',
|
||||||
"name": "b",
|
name: 'b',
|
||||||
"label": "B"
|
label: 'B'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "number",
|
type: 'number',
|
||||||
"name": "sum",
|
name: 'sum',
|
||||||
"label": "和",
|
label: '和',
|
||||||
"disabled": true,
|
disabled: true,
|
||||||
description: '自动计算 A + B'
|
description: '自动计算 A + B'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "formula",
|
type: 'formula',
|
||||||
"name": "sum",
|
name: 'sum',
|
||||||
"value": 0,
|
value: 0,
|
||||||
"formula": "a + b"
|
formula: 'a + b'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "form",
|
type: 'form',
|
||||||
title: "手动应用",
|
title: '手动应用',
|
||||||
"api": "/api/mock2/form/saveForm",
|
api: '/api/mock2/form/saveForm',
|
||||||
"controls": [
|
|
||||||
{
|
|
||||||
"type": "number",
|
|
||||||
"name": "a",
|
|
||||||
"label": "A"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
"type": "number",
|
|
||||||
"name": "b",
|
|
||||||
"label": "B"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
type: "group",
|
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "number",
|
type: 'number',
|
||||||
"name": "sum",
|
name: 'a',
|
||||||
"label": "和",
|
label: 'A'
|
||||||
"disabled": true,
|
|
||||||
"columnClassName": "col-sm-11",
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "button",
|
type: 'number',
|
||||||
"label": "计算",
|
name: 'b',
|
||||||
"columnClassName": "col-sm-1 v-bottom",
|
label: 'B'
|
||||||
"target": "theFormula"
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'group',
|
||||||
|
controls: [
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
name: 'sum',
|
||||||
|
label: '和',
|
||||||
|
disabled: true,
|
||||||
|
columnClassName: 'col-sm-11'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
label: '计算',
|
||||||
|
columnClassName: 'col-sm-1 v-bottom',
|
||||||
|
target: 'theFormula'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "formula",
|
type: 'formula',
|
||||||
"name": "sum",
|
name: 'sum',
|
||||||
"id": "theFormula",
|
id: 'theFormula',
|
||||||
"value": 0,
|
value: 0,
|
||||||
"formula": "a + b",
|
formula: 'a + b',
|
||||||
"initSet": false,
|
initSet: false,
|
||||||
"autoSet": false
|
autoSet: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "form",
|
type: 'form',
|
||||||
title: "条件应用",
|
title: '条件应用',
|
||||||
"api": "/api/mock2/form/saveForm",
|
api: '/api/mock2/form/saveForm',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "radios",
|
type: 'radios',
|
||||||
"name": "radios",
|
name: 'radios',
|
||||||
"inline": true,
|
inline: true,
|
||||||
"label": "radios",
|
label: 'radios',
|
||||||
"options": [
|
options: [
|
||||||
{
|
{
|
||||||
"label": 'a',
|
label: 'a',
|
||||||
"value": 'a'
|
value: 'a'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": 'b',
|
label: 'b',
|
||||||
"value": 'b'
|
value: 'b'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
"description": 'radios 变化会自动清空 B'
|
description: 'radios 变化会自动清空 B'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "b",
|
name: 'b',
|
||||||
"label": "B"
|
label: 'B'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "formula",
|
type: 'formula',
|
||||||
"name": "b",
|
name: 'b',
|
||||||
"value": 'some string',
|
value: 'some string',
|
||||||
"formula": "''",
|
formula: "''",
|
||||||
"condition": '${radios}',
|
condition: '${radios}',
|
||||||
"initSet": false,
|
initSet: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,94 +1,90 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "其他类型演示",
|
title: '其他类型演示',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "Hint demo",
|
title: 'Hint demo',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
horizontal: {
|
horizontal: {
|
||||||
leftFixed: true
|
leftFixed: true
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "button",
|
name: 'button',
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
value: "",
|
value: '',
|
||||||
size: 'xs',
|
size: 'xs',
|
||||||
hint: '比如输入 a-xxxx-xxx'
|
hint: '比如输入 a-xxxx-xxx'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "input-group",
|
type: 'input-group',
|
||||||
"size": "md",
|
size: 'md',
|
||||||
"label": "Icon 组合",
|
label: 'Icon 组合',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"type": "icon",
|
type: 'icon',
|
||||||
"addOnclassName": "no-bg",
|
addOnclassName: 'no-bg',
|
||||||
className: "text-sm",
|
className: 'text-sm',
|
||||||
"icon": "search",
|
icon: 'search',
|
||||||
"vendor": "iconfont"
|
vendor: 'iconfont'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"placeholder": "搜索作业ID/名称",
|
placeholder: '搜索作业ID/名称',
|
||||||
"inputClassName": "b-l-none p-l-none",
|
inputClassName: 'b-l-none p-l-none',
|
||||||
"name": "jobName"
|
name: 'jobName'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
value: "",
|
value: '',
|
||||||
size: 'xs',
|
size: 'xs',
|
||||||
hint: '比如输入 a-xxxx-xxx'
|
hint: '比如输入 a-xxxx-xxx'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
value: "",
|
value: '',
|
||||||
size: 'sm',
|
size: 'sm',
|
||||||
hint: '比如输入 a-xxxx-xxx'
|
hint: '比如输入 a-xxxx-xxx'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "c",
|
name: 'c',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
value: "",
|
value: '',
|
||||||
size: 'md',
|
size: 'md',
|
||||||
hint: '比如输入 a-xxxx-xxx'
|
hint: '比如输入 a-xxxx-xxx'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "d",
|
name: 'd',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
value: "",
|
value: '',
|
||||||
size: 'lg',
|
size: 'lg',
|
||||||
hint: '比如输入 a-xxxx-xxx'
|
hint: '比如输入 a-xxxx-xxx'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "tag",
|
name: 'tag',
|
||||||
type: "tag",
|
type: 'tag',
|
||||||
label: "Tag",
|
label: 'Tag',
|
||||||
size: 'md',
|
size: 'md',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
placeholder: "多个标签以逗号分隔",
|
placeholder: '多个标签以逗号分隔',
|
||||||
options: [
|
options: ['周小度', '杜小度']
|
||||||
"周小度",
|
|
||||||
"杜小度"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,78 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "表单各种展示模式汇总",
|
title: '表单各种展示模式汇总',
|
||||||
remark: "展示各种模式的 Form",
|
remark: '展示各种模式的 Form',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "grid",
|
type: 'grid',
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "常规模式",
|
title: '常规模式',
|
||||||
mode: "normal",
|
mode: 'normal',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
required: true,
|
required: true,
|
||||||
placeholder: "请输入邮箱",
|
placeholder: '请输入邮箱',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
required: true,
|
required: true,
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住登录"
|
label: '记住登录'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
btnClassName: "btn-default",
|
btnClassName: 'btn-default',
|
||||||
label: "登录"
|
label: '登录'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "常规模式 input md 尺寸",
|
title: '常规模式 input md 尺寸',
|
||||||
mode: "normal",
|
mode: 'normal',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
required: true,
|
required: true,
|
||||||
placeholder: "请输入邮箱",
|
placeholder: '请输入邮箱',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'md',
|
size: 'md',
|
||||||
remark: 'xxxx',
|
remark: 'xxxx',
|
||||||
hint: 'bla bla bla'
|
hint: 'bla bla bla'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
required: true,
|
required: true,
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'md'
|
size: 'md'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住登录"
|
label: '记住登录'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
btnClassName: "btn-default",
|
btnClassName: 'btn-default',
|
||||||
label: "登录"
|
label: '登录'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -80,13 +80,13 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "grid",
|
type: 'grid',
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "水平模式，左右摆放 左右比率分配 ",
|
title: '水平模式，左右摆放 左右比率分配 ',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
horizontal: {
|
horizontal: {
|
||||||
left: 'col-sm-2',
|
left: 'col-sm-2',
|
||||||
|
|
@ -95,302 +95,300 @@ export default {
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
required: true,
|
required: true,
|
||||||
desc: "表单描述文字",
|
desc: '表单描述文字'
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "输入密码",
|
placeholder: '输入密码'
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住登录"
|
label: '记住登录'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "水平模式，左右摆放 左侧固定宽度 input md 尺寸",
|
title: '水平模式，左右摆放 左侧固定宽度 input md 尺寸',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
horizontal: {
|
horizontal: {
|
||||||
leftFixed: 'xs'
|
leftFixed: 'xs'
|
||||||
},
|
},
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
required: true,
|
required: true,
|
||||||
desc: "表单描述文字",
|
desc: '表单描述文字',
|
||||||
size: 'md',
|
size: 'md',
|
||||||
remark: 'xxxx',
|
remark: 'xxxx',
|
||||||
hint: 'bla bla bla'
|
hint: 'bla bla bla'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "输入密码",
|
placeholder: '输入密码',
|
||||||
size: 'md'
|
size: 'md'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住登录"
|
label: '记住登录'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "内联模式",
|
title: '内联模式',
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "Enter Email",
|
placeholder: 'Enter Email',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'auto'
|
size: 'auto'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
placeholder: "密码",
|
placeholder: '密码',
|
||||||
size: 'auto',
|
size: 'auto',
|
||||||
remark: 'Bla bla bla'
|
remark: 'Bla bla bla'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住登录",
|
label: '记住登录',
|
||||||
size: 'auto'
|
size: 'auto'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "登录"
|
label: '登录'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "导出",
|
label: '导出',
|
||||||
url: "http://www.baidu.com/",
|
url: 'http://www.baidu.com/',
|
||||||
level: "success"
|
level: 'success'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "常规模式下用数组包起来还能控制一行显示多个",
|
title: '常规模式下用数组包起来还能控制一行显示多个',
|
||||||
mode: "normal",
|
mode: 'normal',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "name",
|
name: 'name',
|
||||||
placeholder: "请输入...",
|
placeholder: '请输入...',
|
||||||
label: "名字",
|
label: '名字',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "输入邮箱",
|
placeholder: '输入邮箱',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email2",
|
name: 'email2',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password2",
|
name: 'password2',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email3",
|
name: 'email3',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password3",
|
name: 'password3',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email4",
|
name: 'email4',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password4",
|
name: 'password4',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住我"
|
label: '记住我'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
btnClassName: "btn-default",
|
btnClassName: 'btn-default',
|
||||||
label: "提交"
|
label: '提交'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "水平模式用数组包起来也能控制一行显示多个",
|
title: '水平模式用数组包起来也能控制一行显示多个',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email2",
|
name: 'email2',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password2",
|
name: 'password2',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email3",
|
name: 'email3',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password3",
|
name: 'password3',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password3",
|
name: 'password3',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email4",
|
name: 'email4',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full',
|
size: 'full',
|
||||||
columnClassName: 'col-sm-6',
|
columnClassName: 'col-sm-6',
|
||||||
horizontal: {
|
horizontal: {
|
||||||
|
|
@ -399,158 +397,158 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password4",
|
name: 'password4',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
gap: 'xs',
|
gap: 'xs',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
label: false,
|
label: false,
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email5",
|
name: 'email5',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password5",
|
name: 'password5',
|
||||||
label: "密码",
|
label: '密码',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
description: 'bla bla',
|
description: 'bla bla',
|
||||||
gap: 'xs',
|
gap: 'xs',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email6",
|
name: 'email6',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
mode: 'inline'
|
mode: 'inline'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password6",
|
name: 'password6',
|
||||||
// label: "密码",
|
// label: "密码",
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
labelClassName: "w-auto p-r-none",
|
labelClassName: 'w-auto p-r-none',
|
||||||
mode: 'inline'
|
mode: 'inline'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'group',
|
type: 'group',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
description: 'bla bla',
|
description: 'bla bla',
|
||||||
direction: "vertical",
|
direction: 'vertical',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email9",
|
name: 'email9',
|
||||||
mode: 'normal',
|
mode: 'normal',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
inline: true,
|
inline: true,
|
||||||
description: 'Bla blamfejkf fdjk',
|
description: 'Bla blamfejkf fdjk'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password9",
|
name: 'password9',
|
||||||
mode: 'normal',
|
mode: 'normal',
|
||||||
placeholder: "请输入密码",
|
placeholder: '请输入密码',
|
||||||
labelClassName: "w-auto p-r-none",
|
labelClassName: 'w-auto p-r-none'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住我"
|
label: '记住我'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
btnClassName: "btn-default",
|
btnClassName: 'btn-default',
|
||||||
label: "Submit"
|
label: 'Submit'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "Inline form 用数组包起来还能控制一行显示多个",
|
title: 'Inline form 用数组包起来还能控制一行显示多个',
|
||||||
mode: "inline",
|
mode: 'inline',
|
||||||
submitText: null,
|
submitText: null,
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controls: [
|
controls: [
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "Enter Email",
|
placeholder: 'Enter Email',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
placeholder: "Password",
|
placeholder: 'Password',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "Enter Email",
|
placeholder: 'Enter Email',
|
||||||
label: "邮箱",
|
label: '邮箱',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: "记住我",
|
label: '记住我',
|
||||||
size: 'full'
|
size: 'full'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button-toolbar',
|
type: 'button-toolbar',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "登录"
|
label: '登录'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "导出",
|
label: '导出',
|
||||||
url: "http://www.baidu.com/",
|
url: 'http://www.baidu.com/',
|
||||||
level: "success"
|
level: 'success'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,89 +1,89 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "显隐切换示例",
|
title: '显隐切换示例',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
name: "hiddenOn",
|
name: 'hiddenOn',
|
||||||
type: "form",
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "Hide On 和 disabledOn 示例",
|
title: 'Hide On 和 disabledOn 示例',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "radios",
|
type: 'radios',
|
||||||
name: "type",
|
name: 'type',
|
||||||
label: "类型选择",
|
label: '类型选择',
|
||||||
inline: true,
|
inline: true,
|
||||||
value: "1",
|
value: '1',
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "类型 1",
|
label: '类型 1',
|
||||||
value: "1"
|
value: '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "类型 2",
|
label: '类型 2',
|
||||||
value: "2"
|
value: '2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "类型 3",
|
label: '类型 3',
|
||||||
value: "3"
|
value: '3'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
description: '<span class="text-danger">请切换类型来看效果</span>'
|
description: '<span class="text-danger">请切换类型来看效果</span>'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "所有可见",
|
label: '所有可见',
|
||||||
name: "text1"
|
name: 'text1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "类型2 可见",
|
label: '类型2 可见',
|
||||||
hiddenOn: "data.type != 2",
|
hiddenOn: 'data.type != 2',
|
||||||
name: "text2"
|
name: 'text2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "类型3 不可点",
|
label: '类型3 不可点',
|
||||||
disabledOn: "data.type == 3",
|
disabledOn: 'data.type == 3',
|
||||||
name: "text3"
|
name: 'text3'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
required: true,
|
required: true,
|
||||||
label: "必填字段",
|
label: '必填字段',
|
||||||
name: "test4"
|
name: 'test4'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button-toolbar",
|
type: 'button-toolbar',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
disabledOn: "data.type == 1",
|
disabledOn: 'data.type == 1',
|
||||||
label: "类型1不可点"
|
label: '类型1不可点'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "reset",
|
type: 'reset',
|
||||||
label: "类型3出现且不可点",
|
label: '类型3出现且不可点',
|
||||||
visibleOn: "data.type == 3",
|
visibleOn: 'data.type == 3',
|
||||||
disabledOn: "data.type == 3",
|
disabledOn: 'data.type == 3'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
label: "Baidu",
|
label: 'Baidu',
|
||||||
href: "http://www.baidu.com?a=1&b=$test4"
|
href: 'http://www.baidu.com?a=1&b=$test4'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
label: "No Submit",
|
label: 'No Submit',
|
||||||
action: "/api/mock2/saveForm?waitSeconds=5"
|
action: '/api/mock2/saveForm?waitSeconds=5'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
label: "Submit",
|
label: 'Submit',
|
||||||
action: "/api/mock2/saveForm?waitSeconds=5"
|
action: '/api/mock2/saveForm?waitSeconds=5'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,88 +1,89 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "动态拉取选项",
|
title: '动态拉取选项',
|
||||||
name: "page-form-remote",
|
name: 'page-form-remote',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
title: "动态表单元素示例",
|
title: '动态表单元素示例',
|
||||||
name: "demo-form",
|
name: 'demo-form',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交"
|
label: '提交'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "select",
|
name: 'select',
|
||||||
type: "select",
|
type: 'select',
|
||||||
label: "动态选项",
|
label: '动态选项',
|
||||||
source: "/api/mock2/form/getOptions?waitSeconds=1",
|
source: '/api/mock2/form/getOptions?waitSeconds=1',
|
||||||
description: '通过接口一口气拉取选项',
|
description: '通过接口一口气拉取选项',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
searchable: true
|
searchable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "select2",
|
name: 'select2',
|
||||||
type: "select",
|
type: 'select',
|
||||||
label: "选项自动补全",
|
label: '选项自动补全',
|
||||||
autoComplete: "/api/mock2/options/autoComplete?term=$term",
|
autoComplete: '/api/mock2/options/autoComplete?term=$term',
|
||||||
placeholder: "请输入",
|
placeholder: '请输入',
|
||||||
description: '通过接口自动补全'
|
description: '通过接口自动补全'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "text",
|
name: 'text',
|
||||||
label: "文本提示",
|
label: '文本提示',
|
||||||
source: "/api/mock2/form/getOptions?waitSeconds=1",
|
source: '/api/mock2/form/getOptions?waitSeconds=1',
|
||||||
placeholder: '请选择'
|
placeholder: '请选择'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "text2",
|
name: 'text2',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "文本自动补全",
|
label: '文本自动补全',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
autoComplete: "/api/mock2/options/autoComplete2?term=$term",
|
autoComplete: '/api/mock2/options/autoComplete2?term=$term',
|
||||||
description: '通过接口自动补全'
|
description: '通过接口自动补全'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "chained",
|
name: 'chained',
|
||||||
type: "chained-select",
|
type: 'chained-select',
|
||||||
label: "级联选项",
|
label: '级联选项',
|
||||||
source:
|
source:
|
||||||
"/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1",
|
'/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1',
|
||||||
desc: "无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.",
|
desc:
|
||||||
value: "a,b"
|
'无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.',
|
||||||
|
value: 'a,b'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "tree",
|
name: 'tree',
|
||||||
type: "tree",
|
type: 'tree',
|
||||||
label: "动态树",
|
label: '动态树',
|
||||||
source: "/api/mock2/options/tree?waitSeconds=1"
|
source: '/api/mock2/options/tree?waitSeconds=1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "matrix",
|
name: 'matrix',
|
||||||
type: "matrix",
|
type: 'matrix',
|
||||||
label: "动态矩阵开关",
|
label: '动态矩阵开关',
|
||||||
source: "/api/mock2/options/matrix?waitSeconds=1"
|
source: '/api/mock2/options/matrix?waitSeconds=1'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "富文本编辑器",
|
title: '富文本编辑器',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "Form elements",
|
title: 'Form elements',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "html",
|
name: 'html',
|
||||||
type: "rich-text",
|
type: 'rich-text',
|
||||||
label: "富文本",
|
label: '富文本',
|
||||||
value: "<p>Just do <code>IT</code></p>"
|
value: '<p>Just do <code>IT</code></p>'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,48 +3,48 @@ import TitleBar from '../../../src/components/TitleBar';
|
||||||
import {render} from '../../../src/index';
|
import {render} from '../../../src/index';
|
||||||
|
|
||||||
const Schema = {
|
const Schema = {
|
||||||
"title": "Person",
|
title: 'Person',
|
||||||
"type": "object",
|
type: 'object',
|
||||||
"properties": {
|
properties: {
|
||||||
"firstName": {
|
firstName: {
|
||||||
"title": "First Name",
|
title: 'First Name',
|
||||||
"type": "string"
|
type: 'string'
|
||||||
},
|
},
|
||||||
"lastName": {
|
lastName: {
|
||||||
"type": "string"
|
type: 'string'
|
||||||
},
|
},
|
||||||
"age": {
|
age: {
|
||||||
"description": "Age in years",
|
description: 'Age in years',
|
||||||
"type": "integer",
|
type: 'integer',
|
||||||
"minimum": 0
|
minimum: 0
|
||||||
},
|
},
|
||||||
"tag": {
|
tag: {
|
||||||
"type": "array",
|
type: 'array',
|
||||||
"description": "Tags",
|
description: 'Tags',
|
||||||
"default": ["IT"],
|
default: ['IT'],
|
||||||
"items": {
|
items: {
|
||||||
"type": "text"
|
type: 'text'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"clients": {
|
clients: {
|
||||||
"type": "array",
|
type: 'array',
|
||||||
"description": "Tags",
|
description: 'Tags',
|
||||||
"items": {
|
items: {
|
||||||
"type": "object",
|
type: 'object',
|
||||||
"properties": {
|
properties: {
|
||||||
"firstName": {
|
firstName: {
|
||||||
"title": "First Name",
|
title: 'First Name',
|
||||||
"type": "string"
|
type: 'string'
|
||||||
},
|
},
|
||||||
"lastName": {
|
lastName: {
|
||||||
"type": "string"
|
type: 'string'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"required": ["firstName", "lastName"]
|
required: ['firstName', 'lastName']
|
||||||
};
|
};
|
||||||
|
|
||||||
function property2control(property, key, schema) {
|
function property2control(property, key, schema) {
|
||||||
|
|
@ -53,8 +53,6 @@ function property2control(property, key, schema) {
|
||||||
const validations = {};
|
const validations = {};
|
||||||
let type = 'text';
|
let type = 'text';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (property.type === 'integer') {
|
if (property.type === 'integer') {
|
||||||
type = 'number';
|
type = 'number';
|
||||||
|
|
||||||
|
|
@ -103,9 +101,9 @@ function JSONSchme2AMisSchema(schema) {
|
||||||
return {
|
return {
|
||||||
title: schema.title,
|
title: schema.title,
|
||||||
type: 'form',
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
controls: makeControls(schema.properties, schema)
|
controls: makeControls(schema.properties, schema)
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const amisFormSchema = JSONSchme2AMisSchema(Schema);
|
const amisFormSchema = JSONSchme2AMisSchema(Schema);
|
||||||
|
|
@ -121,7 +119,8 @@ export default class JSONSchemaForm extends React.Component {
|
||||||
title: '',
|
title: '',
|
||||||
body: {
|
body: {
|
||||||
...amisFormSchema,
|
...amisFormSchema,
|
||||||
onChange: values => this.setState({
|
onChange: values =>
|
||||||
|
this.setState({
|
||||||
data: {
|
data: {
|
||||||
...values
|
...values
|
||||||
}
|
}
|
||||||
|
|
@ -137,7 +136,9 @@ export default class JSONSchemaForm extends React.Component {
|
||||||
<div className="wrapper">
|
<div className="wrapper">
|
||||||
<div>
|
<div>
|
||||||
<h3>Schema</h3>
|
<h3>Schema</h3>
|
||||||
<pre><code>{JSON.stringify(Schema, null, 2)}</code></pre>
|
<pre>
|
||||||
|
<code>{JSON.stringify(Schema, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -147,7 +148,9 @@ export default class JSONSchemaForm extends React.Component {
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3>Data</h3>
|
<h3>Data</h3>
|
||||||
<pre><code>{JSON.stringify(this.state.data, null, 2)}</code></pre>
|
<pre>
|
||||||
|
<code>{JSON.stringify(this.state.data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,22 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "所有 Form 元素列举",
|
title: '所有 Form 元素列举',
|
||||||
data: {
|
data: {
|
||||||
id: 1,
|
id: 1,
|
||||||
image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
image:
|
||||||
|
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||||
},
|
},
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "表单项静态展示",
|
title: '表单项静态展示',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
value: "文本"
|
value: '文本'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -23,9 +24,9 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static-tpl",
|
type: 'static-tpl',
|
||||||
label: "模板",
|
label: '模板',
|
||||||
tpl: "自己拼接 HTML 取变量 \\${id}: ${id}"
|
tpl: '自己拼接 HTML 取变量 \\${id}: ${id}'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -33,8 +34,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static-date",
|
type: 'static-date',
|
||||||
label: "日期",
|
label: '日期',
|
||||||
value: Math.round(Date.now() / 1000)
|
value: Math.round(Date.now() / 1000)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -43,8 +44,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static-datetime",
|
type: 'static-datetime',
|
||||||
label: "日期时间",
|
label: '日期时间',
|
||||||
value: Math.round(Date.now() / 1000)
|
value: Math.round(Date.now() / 1000)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -53,8 +54,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static-mapping",
|
type: 'static-mapping',
|
||||||
label: "映射",
|
label: '映射',
|
||||||
value: Math.floor(Math.random() * 5),
|
value: Math.floor(Math.random() * 5),
|
||||||
map: {
|
map: {
|
||||||
'*': "<span class='label label-default'>-</span>",
|
'*': "<span class='label label-default'>-</span>",
|
||||||
|
|
@ -62,7 +63,7 @@ export default {
|
||||||
'1': "<span class='label label-success'>二</span>",
|
'1': "<span class='label label-success'>二</span>",
|
||||||
'2': "<span class='label label-danger'>三</span>",
|
'2': "<span class='label label-danger'>三</span>",
|
||||||
'3': "<span class='label label-warning'>四</span>",
|
'3': "<span class='label label-warning'>四</span>",
|
||||||
'4': "<span class='label label-primary'>五</span>",
|
'4': "<span class='label label-primary'>五</span>"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -71,8 +72,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static-progress",
|
type: 'static-progress',
|
||||||
label: "进度",
|
label: '进度',
|
||||||
value: 66.66
|
value: 66.66
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -81,12 +82,13 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static-image",
|
type: 'static-image',
|
||||||
label: "图片",
|
label: '图片',
|
||||||
name: "image",
|
name: 'image',
|
||||||
popOver: {
|
popOver: {
|
||||||
title: "查看大图",
|
title: '查看大图',
|
||||||
body: '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
body:
|
||||||
|
'<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -105,11 +107,11 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
label: "可复制",
|
label: '可复制',
|
||||||
value: "文本",
|
value: '文本',
|
||||||
copyable: {
|
copyable: {
|
||||||
content: "内容，支持变量 ${id}"
|
content: '内容，支持变量 ${id}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -118,12 +120,12 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "text",
|
name: 'text',
|
||||||
label: "可快速编辑",
|
label: '可快速编辑',
|
||||||
value: "文本",
|
value: '文本',
|
||||||
quickEdit: true
|
quickEdit: true
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,59 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "SubForm 示例",
|
title: 'SubForm 示例',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||||
title: "Form elements",
|
title: 'Form elements',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
// debug: true,
|
// debug: true,
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
label: "子表单单条",
|
label: '子表单单条',
|
||||||
name: "subForm1",
|
name: 'subForm1',
|
||||||
btnLabel: "点击设置",
|
btnLabel: '点击设置',
|
||||||
form: {
|
form: {
|
||||||
title: "子表单",
|
title: '子表单',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Foo"
|
label: 'Foo'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "switch",
|
type: 'switch',
|
||||||
label: "Boo"
|
label: 'Boo'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
label: "子表单多条",
|
label: '子表单多条',
|
||||||
name: "subForm2",
|
name: 'subForm2',
|
||||||
labelField: 'a',
|
labelField: 'a',
|
||||||
btnLabel: "点击设置",
|
btnLabel: '点击设置',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
form: {
|
form: {
|
||||||
title: "子表单",
|
title: '子表单',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
name: "a",
|
name: 'a',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "Foo"
|
label: 'Foo'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "b",
|
name: 'b',
|
||||||
type: "switch",
|
type: 'switch',
|
||||||
label: "Boo"
|
label: 'Boo'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "表格编辑",
|
title: '表格编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交",
|
label: '提交',
|
||||||
primary: true
|
primary: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -39,9 +39,9 @@ export default {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
label: "当前值",
|
label: '当前值',
|
||||||
tpl: "<pre>${colors|json}</pre>"
|
tpl: '<pre>${colors|json}</pre>'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'table',
|
type: 'table',
|
||||||
|
|
@ -75,31 +75,31 @@ export default {
|
||||||
actionType: 'add'
|
actionType: 'add'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "table",
|
type: 'table',
|
||||||
"name": "table2",
|
name: 'table2',
|
||||||
"label": "Table2",
|
label: 'Table2',
|
||||||
"editable": true,
|
editable: true,
|
||||||
"addable": true,
|
addable: true,
|
||||||
"removable": true,
|
removable: true,
|
||||||
"draggable": true,
|
draggable: true,
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"name": "a",
|
name: 'a',
|
||||||
"label": "A"
|
label: 'A'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "b",
|
name: 'b',
|
||||||
"label": "B",
|
label: 'B',
|
||||||
"quickEdit": {
|
quickEdit: {
|
||||||
"type": "select",
|
type: 'select',
|
||||||
"options": [
|
options: [
|
||||||
{
|
{
|
||||||
"label": "A",
|
label: 'A',
|
||||||
"value": "a"
|
value: 'a'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "B",
|
label: 'B',
|
||||||
"value": "b"
|
value: 'b'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -108,36 +108,36 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "table",
|
type: 'table',
|
||||||
"name": "table3",
|
name: 'table3',
|
||||||
"label": "Table3(指定第2列只有update时能编辑)",
|
label: 'Table3(指定第2列只有update时能编辑)',
|
||||||
"editable": true,
|
editable: true,
|
||||||
"addable": true,
|
addable: true,
|
||||||
"removable": true,
|
removable: true,
|
||||||
"draggable": true,
|
draggable: true,
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"name": "a",
|
name: 'a',
|
||||||
"label": "A",
|
label: 'A',
|
||||||
"quickEdit": true
|
quickEdit: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "b",
|
name: 'b',
|
||||||
"label": "B",
|
label: 'B',
|
||||||
"quickEdit": false,
|
quickEdit: false,
|
||||||
"quickEditOnUpdate": {
|
quickEditOnUpdate: {
|
||||||
"type": "select",
|
type: 'select',
|
||||||
"options": [
|
options: [
|
||||||
{
|
{
|
||||||
"label": "A",
|
label: 'A',
|
||||||
"value": "a"
|
value: 'a'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "B",
|
label: 'B',
|
||||||
"value": "b"
|
value: 'b'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,101 +1,103 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "Tabs 示例",
|
title: 'Tabs 示例',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
title: "",
|
title: '',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
label: "弹框中的 Tabs",
|
label: '弹框中的 Tabs',
|
||||||
level: "info",
|
level: 'info',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "",
|
title: '',
|
||||||
// size: "md",
|
// size: "md",
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
horizontal: {
|
horizontal: {
|
||||||
leftFixed: 'xs'
|
leftFixed: 'xs'
|
||||||
},
|
},
|
||||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交",
|
label: '提交',
|
||||||
primary: true
|
primary: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
controls: [{
|
controls: [
|
||||||
|
{
|
||||||
type: 'tabs',
|
type: 'tabs',
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
title: "基本信息",
|
title: '基本信息',
|
||||||
controls: [
|
controls: [
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email1",
|
name: 'email1',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
placeholder: "密码",
|
placeholder: '密码',
|
||||||
label: false
|
label: false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email2",
|
name: 'email2',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: false,
|
label: false,
|
||||||
option: "记住我"
|
option: '记住我'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "其他信息",
|
title: '其他信息',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email3",
|
name: 'email3',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe2",
|
name: 'rememberMe2',
|
||||||
option: "记住我"
|
option: '记住我'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交",
|
label: '提交',
|
||||||
primary: true
|
primary: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -105,59 +107,59 @@ export default {
|
||||||
|
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
title: "基本信息",
|
title: '基本信息',
|
||||||
hash: 'tab1',
|
hash: 'tab1',
|
||||||
controls: [
|
controls: [
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email",
|
name: 'email',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "password",
|
type: 'password',
|
||||||
name: "password",
|
name: 'password',
|
||||||
placeholder: "密码",
|
placeholder: '密码',
|
||||||
label: false
|
label: false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email2",
|
name: 'email2',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe",
|
name: 'rememberMe',
|
||||||
label: false,
|
label: false,
|
||||||
option: "记住我"
|
option: '记住我'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "其他信息",
|
title: '其他信息',
|
||||||
hash: 'tab2',
|
hash: 'tab2',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "email",
|
type: 'email',
|
||||||
name: "email3",
|
name: 'email3',
|
||||||
placeholder: "请输入邮箱地址",
|
placeholder: '请输入邮箱地址',
|
||||||
label: "邮箱"
|
label: '邮箱'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "checkbox",
|
type: 'checkbox',
|
||||||
name: "rememberMe4",
|
name: 'rememberMe4',
|
||||||
label: "记住我"
|
label: '记住我'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,126 +1,132 @@
|
||||||
export default {
|
export default {
|
||||||
"type": "page",
|
type: 'page',
|
||||||
"body": {
|
body: {
|
||||||
"type": "form",
|
type: 'form',
|
||||||
"title": "详情",
|
title: '详情',
|
||||||
"name": "scene_detail",
|
name: 'scene_detail',
|
||||||
"mode": "horizontal",
|
mode: 'horizontal',
|
||||||
"submitText": "",
|
submitText: '',
|
||||||
"submitOnChange": false,
|
submitOnChange: false,
|
||||||
"actions": [{
|
actions: [
|
||||||
"type": "button",
|
|
||||||
"label": "修改",
|
|
||||||
"actionType": "drawer",
|
|
||||||
"drawer": {
|
|
||||||
"type": "form",
|
|
||||||
"position": "left",
|
|
||||||
"title": "修改内容",
|
|
||||||
"controls": [{
|
|
||||||
"type": "text",
|
|
||||||
"label": "标题",
|
|
||||||
"name": "name",
|
|
||||||
"required": true
|
|
||||||
}, {
|
|
||||||
"label": "描述",
|
|
||||||
"type": "text",
|
|
||||||
"name": "typeDesc",
|
|
||||||
"required": true
|
|
||||||
}, {
|
|
||||||
"label": "内容",
|
|
||||||
"type": "textarea",
|
|
||||||
"name": "contents",
|
|
||||||
"required": true
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
"controls": [
|
|
||||||
{
|
{
|
||||||
type: "tree",
|
type: 'button',
|
||||||
name: "tree",
|
label: '修改',
|
||||||
label: "树",
|
actionType: 'drawer',
|
||||||
|
drawer: {
|
||||||
|
type: 'form',
|
||||||
|
position: 'left',
|
||||||
|
title: '修改内容',
|
||||||
|
controls: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
label: '标题',
|
||||||
|
name: 'name',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '描述',
|
||||||
|
type: 'text',
|
||||||
|
name: 'typeDesc',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '内容',
|
||||||
|
type: 'textarea',
|
||||||
|
name: 'contents',
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
controls: [
|
||||||
|
{
|
||||||
|
type: 'tree',
|
||||||
|
name: 'tree',
|
||||||
|
label: '树',
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "Folder A",
|
label: 'Folder A',
|
||||||
value: 1,
|
value: 1,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: "file A",
|
label: 'file A',
|
||||||
value: 2
|
value: 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "file B",
|
label: 'file B',
|
||||||
value: 3
|
value: 3
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "file C",
|
label: 'file C',
|
||||||
value: 4
|
value: 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "file D",
|
label: 'file D',
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "tree",
|
type: 'tree',
|
||||||
name: "trees",
|
name: 'trees',
|
||||||
label: "树多选",
|
label: '树多选',
|
||||||
multiple: true,
|
multiple: true,
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: "Folder A",
|
label: 'Folder A',
|
||||||
value: 1,
|
value: 1,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: "file A",
|
label: 'file A',
|
||||||
value: 2
|
value: 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "file B",
|
label: 'file B',
|
||||||
value: 3
|
value: 3
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "file C",
|
label: 'file C',
|
||||||
value: 4
|
value: 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "file D",
|
label: 'file D',
|
||||||
value: 5
|
value: 5
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "select",
|
name: 'select',
|
||||||
type: "tree-select",
|
type: 'tree-select',
|
||||||
label: "动态选项",
|
label: '动态选项',
|
||||||
source: "/api/mock2/form/getTreeOptions?waitSeconds=1",
|
source: '/api/mock2/form/getTreeOptions?waitSeconds=1',
|
||||||
description: '通过接口一口气拉取选项',
|
description: '通过接口一口气拉取选项',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
searchable: true
|
searchable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "select2",
|
name: 'select2',
|
||||||
type: "tree-select",
|
type: 'tree-select',
|
||||||
label: "选项自动补全",
|
label: '选项自动补全',
|
||||||
autoComplete: "/api/mock2/tree/autoComplete?term=$term",
|
autoComplete: '/api/mock2/tree/autoComplete?term=$term',
|
||||||
placeholder: "请输入",
|
placeholder: '请输入',
|
||||||
description: '通过接口自动补全',
|
description: '通过接口自动补全',
|
||||||
multiple: true
|
multiple: true
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,110 +1,110 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "表单验证示例",
|
title: '表单验证示例',
|
||||||
toolbar: "<a target='_blank' href='/docs/renderers/Form/FormItem'>文档</a>",
|
toolbar: "<a target='_blank' href='/docs/renderers/Form/FormItem'>文档</a>",
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
type: "form",
|
type: 'form',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
messages: {
|
messages: {
|
||||||
'validateFailed': '请仔细检查表单规则，部分表单项没通过验证'
|
validateFailed: '请仔细检查表单规则，部分表单项没通过验证'
|
||||||
},
|
},
|
||||||
title: "表单",
|
title: '表单',
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "submit",
|
type: 'submit',
|
||||||
label: "提交"
|
label: '提交'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
api: "/api/mock2/form/saveFormFailed?waitSeconds=2",
|
api: '/api/mock2/form/saveFormFailed?waitSeconds=2',
|
||||||
mode: "horizontal",
|
mode: 'horizontal',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "test",
|
name: 'test',
|
||||||
label: "必填",
|
label: '必填',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "test1",
|
name: 'test1',
|
||||||
type: "email",
|
type: 'email',
|
||||||
label: "Email"
|
label: 'Email'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "url",
|
name: 'url',
|
||||||
type: "url",
|
type: 'url',
|
||||||
label: "Url"
|
label: 'Url'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "num",
|
name: 'num',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "数字",
|
label: '数字',
|
||||||
validations: "isNumeric"
|
validations: 'isNumeric'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "alpha",
|
name: 'alpha',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "字母或数字",
|
label: '字母或数字',
|
||||||
validations: "isAlphanumeric"
|
validations: 'isAlphanumeric'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "int",
|
name: 'int',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "整形",
|
label: '整形',
|
||||||
validations: "isInt"
|
validations: 'isInt'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "minLength",
|
name: 'minLength',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "长度限制",
|
label: '长度限制',
|
||||||
validations: "minLength:2,maxLength:10"
|
validations: 'minLength:2,maxLength:10'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "min",
|
name: 'min',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "数值限制",
|
label: '数值限制',
|
||||||
validations: "maximum:10,minimum:2"
|
validations: 'maximum:10,minimum:2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "reg",
|
name: 'reg',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "正则",
|
label: '正则',
|
||||||
validations: "matchRegexp:/^abc/",
|
validations: 'matchRegexp:/^abc/',
|
||||||
validationErrors: {
|
validationErrors: {
|
||||||
matchRegexp: "请输入abc开头的好么?"
|
matchRegexp: '请输入abc开头的好么?'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "test2",
|
name: 'test2',
|
||||||
type: "text",
|
type: 'text',
|
||||||
label: "服务端验证"
|
label: '服务端验证'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ function buildTest(type, scaffold) {
|
||||||
...scaffold,
|
...scaffold,
|
||||||
type,
|
type,
|
||||||
name: 'a22',
|
name: 'a22',
|
||||||
inline: true,
|
inline: true
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -55,7 +55,7 @@ function buildTest(type, scaffold) {
|
||||||
{
|
{
|
||||||
type: 'tpl',
|
type: 'tpl',
|
||||||
className: 'text-info',
|
className: 'text-info',
|
||||||
tpl: 'Group 默认模式',
|
tpl: 'Group 默认模式'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -460,7 +460,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -488,7 +487,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -515,7 +513,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -544,7 +541,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -571,7 +567,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -600,7 +595,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -628,7 +622,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -658,13 +651,11 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '水平模式',
|
title: '水平模式',
|
||||||
hash: 'horizontal',
|
hash: 'horizontal',
|
||||||
|
|
@ -699,7 +690,7 @@ function buildTest(type, scaffold) {
|
||||||
{
|
{
|
||||||
type: 'tpl',
|
type: 'tpl',
|
||||||
className: 'text-info',
|
className: 'text-info',
|
||||||
tpl: 'Group 局部正常模式',
|
tpl: 'Group 局部正常模式'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1108,7 +1099,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1136,7 +1126,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1163,7 +1152,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1192,7 +1180,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1219,7 +1206,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1248,7 +1234,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1276,7 +1261,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1306,10 +1290,9 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1361,7 +1344,7 @@ function buildTest(type, scaffold) {
|
||||||
{
|
{
|
||||||
type: 'tpl',
|
type: 'tpl',
|
||||||
className: 'text-info',
|
className: 'text-info',
|
||||||
tpl: 'Group 局部正常模式',
|
tpl: 'Group 局部正常模式'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1770,7 +1753,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1798,7 +1780,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1825,7 +1806,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1854,7 +1834,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1881,7 +1860,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1910,7 +1888,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1938,7 +1915,6 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -1968,12 +1944,10 @@ function buildTest(type, scaffold) {
|
||||||
name: 'a2'
|
name: 'a2'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -2016,14 +1990,12 @@ const options = [
|
||||||
label: '选项D',
|
label: '选项D',
|
||||||
value: 'd'
|
value: 'd'
|
||||||
}
|
}
|
||||||
],
|
];
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "各种表单项的不同模式样式测试，记得切到小屏幕测试",
|
title: '各种表单项的不同模式样式测试，记得切到小屏幕测试',
|
||||||
"body": [
|
body: [
|
||||||
|
|
||||||
{
|
{
|
||||||
type: 'nav',
|
type: 'nav',
|
||||||
links: [
|
links: [
|
||||||
|
|
@ -2086,7 +2058,7 @@ export default {
|
||||||
{
|
{
|
||||||
label: 'Image',
|
label: 'Image',
|
||||||
to: '?renderer=image'
|
to: '?renderer=image'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
stacked: false
|
stacked: false
|
||||||
},
|
},
|
||||||
|
|
@ -2095,8 +2067,12 @@ export default {
|
||||||
children: ({data, render}) => {
|
children: ({data, render}) => {
|
||||||
const type = data.renderer || 'text';
|
const type = data.renderer || 'text';
|
||||||
return (
|
return (
|
||||||
<div>{
|
<div>
|
||||||
render('body', buildTest(type, ({
|
{render(
|
||||||
|
'body',
|
||||||
|
buildTest(
|
||||||
|
type,
|
||||||
|
{
|
||||||
text: {
|
text: {
|
||||||
placeholder: '请输入文本',
|
placeholder: '请输入文本',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
|
|
@ -2131,11 +2107,12 @@ export default {
|
||||||
list: {
|
list: {
|
||||||
options
|
options
|
||||||
}
|
}
|
||||||
|
}[type]
|
||||||
})[type]))
|
)
|
||||||
}</div>
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,137 +1,137 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "HBox & Grid",
|
title: 'HBox & Grid',
|
||||||
"type": "page",
|
type: 'page',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "plain",
|
type: 'plain',
|
||||||
"tpl": "Grid 请参考 bootstrap 的 grid 布局",
|
tpl: 'Grid 请参考 bootstrap 的 grid 布局',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"className": "h3 m-b-xs"
|
className: 'h3 m-b-xs'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "grid",
|
type: 'grid',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "sm-2",
|
tpl: 'sm-2',
|
||||||
"sm": 2,
|
sm: 2,
|
||||||
"className": "bg-info",
|
className: 'bg-info',
|
||||||
"inline": false
|
inline: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "sm-4",
|
tpl: 'sm-4',
|
||||||
"sm": 4,
|
sm: 4,
|
||||||
"className": "bg-success",
|
className: 'bg-success',
|
||||||
"inline": false
|
inline: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "sm-6",
|
tpl: 'sm-6',
|
||||||
"sm": 6,
|
sm: 6,
|
||||||
"className": "bg-primary",
|
className: 'bg-primary',
|
||||||
"inline": false
|
inline: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "plain",
|
type: 'plain',
|
||||||
"tpl": "Hbox",
|
tpl: 'Hbox',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"className": "h3 m-t m-b-xs"
|
className: 'h3 m-t m-b-xs'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "hbox",
|
type: 'hbox',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "平均分配",
|
tpl: '平均分配',
|
||||||
"className": "bg-info",
|
className: 'bg-info',
|
||||||
"inline": false
|
inline: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "平均分配",
|
tpl: '平均分配',
|
||||||
"className": "bg-success",
|
className: 'bg-success',
|
||||||
"inline": false
|
inline: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "平均分配",
|
tpl: '平均分配',
|
||||||
"className": "bg-primary",
|
className: 'bg-primary',
|
||||||
"inline": false
|
inline: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "plain",
|
type: 'plain',
|
||||||
"tpl": "Hbox 部分定宽",
|
tpl: 'Hbox 部分定宽',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"className": "h3 m-t m-b-xs"
|
className: 'h3 m-t m-b-xs'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "hbox",
|
type: 'hbox',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "w-xs",
|
tpl: 'w-xs',
|
||||||
"className": "bg-info",
|
className: 'bg-info',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"columnClassName": "w-xs"
|
columnClassName: 'w-xs'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "w-sm",
|
tpl: 'w-sm',
|
||||||
"className": "bg-info lter",
|
className: 'bg-info lter',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"columnClassName": "w-sm"
|
columnClassName: 'w-sm'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "w",
|
tpl: 'w',
|
||||||
"className": "bg-info dk",
|
className: 'bg-info dk',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"columnClassName": "w"
|
columnClassName: 'w'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "平均分配",
|
tpl: '平均分配',
|
||||||
"className": "bg-success",
|
className: 'bg-success',
|
||||||
"inline": false
|
inline: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "tpl",
|
type: 'tpl',
|
||||||
"tpl": "平均分配",
|
tpl: '平均分配',
|
||||||
"className": "bg-primary",
|
className: 'bg-primary',
|
||||||
"inline": false
|
inline: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "plain",
|
type: 'plain',
|
||||||
"tpl": "示例",
|
tpl: '示例',
|
||||||
"inline": false,
|
inline: false,
|
||||||
"className": "h3 m-t m-b-xs"
|
className: 'h3 m-t m-b-xs'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "grid",
|
type: 'grid',
|
||||||
"columns": [
|
columns: [
|
||||||
{
|
{
|
||||||
"type": "panel",
|
type: 'panel',
|
||||||
"title": "面板1",
|
title: '面板1',
|
||||||
"className": "Panel--danger",
|
className: 'Panel--danger',
|
||||||
"body": "内容",
|
body: '内容',
|
||||||
"sm": 4
|
sm: 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "panel",
|
type: 'panel',
|
||||||
"title": "面板2",
|
title: '面板2',
|
||||||
"className": "Panel--primary",
|
className: 'Panel--primary',
|
||||||
"body": "内容",
|
body: '内容',
|
||||||
"sm": 8
|
sm: 8
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "IFrame 可以用来嵌入其他网站",
|
title: 'IFrame 可以用来嵌入其他网站',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
type: 'form',
|
type: 'form',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
|
|
@ -24,8 +24,8 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'iframe',
|
type: 'iframe',
|
||||||
className: 'b-a',
|
className: 'b-a',
|
||||||
src: "https://www.baidu.com/s?wd=${keywords|url_encode}",
|
src: 'https://www.baidu.com/s?wd=${keywords|url_encode}',
|
||||||
height: 500
|
height: 500
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
title: "表单与列表之间的联动",
|
title: '表单与列表之间的联动',
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
title: "",
|
title: '',
|
||||||
type: 'form',
|
type: 'form',
|
||||||
mode: 'inline',
|
mode: 'inline',
|
||||||
target: 'list',
|
target: 'list',
|
||||||
|
|
@ -11,164 +11,163 @@ export default {
|
||||||
className: 'm-b',
|
className: 'm-b',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
addOn: {
|
addOn: {
|
||||||
type: 'submit',
|
type: 'submit',
|
||||||
icon: 'fa fa-search',
|
icon: 'fa fa-search',
|
||||||
level: 'primary'
|
level: 'primary'
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
name: 'list',
|
name: 'list',
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
mode: "list",
|
mode: 'list',
|
||||||
listItem: {
|
listItem: {
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-eye",
|
icon: 'fa fa-eye',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "查看",
|
title: '查看',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine"
|
label: 'Engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "static",
|
type: 'static',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-pencil",
|
icon: 'fa fa-pencil',
|
||||||
actionType: "dialog",
|
actionType: 'dialog',
|
||||||
dialog: {
|
dialog: {
|
||||||
title: "编辑",
|
title: '编辑',
|
||||||
body: {
|
body: {
|
||||||
type: "form",
|
type: 'form',
|
||||||
name: "sample-edit-form",
|
name: 'sample-edit-form',
|
||||||
api: "/api/sample/$id",
|
api: '/api/sample/$id',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Engine",
|
label: 'Engine',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "button",
|
type: 'button',
|
||||||
icon: "fa fa-times text-danger",
|
icon: 'fa fa-times text-danger',
|
||||||
actionType: "ajax",
|
actionType: 'ajax',
|
||||||
confirmText: "您确认要删除?",
|
confirmText: '您确认要删除?',
|
||||||
api: "delete:/api/sample/$id"
|
api: 'delete:/api/sample/$id'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
body: [
|
body: [
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine",
|
label: 'Rendering engine',
|
||||||
labelClassName: "w-sm"
|
labelClassName: 'w-sm'
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser",
|
label: 'Browser',
|
||||||
labelClassName: "w-sm"
|
labelClassName: 'w-sm'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)",
|
label: 'Platform(s)',
|
||||||
labelClassName: "w-sm"
|
labelClassName: 'w-sm'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version",
|
label: 'Engine version',
|
||||||
labelClassName: "w-sm"
|
labelClassName: 'w-sm'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -64,4 +64,4 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,6 @@ export default {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
type: 'grid',
|
type: 'grid',
|
||||||
columns: [
|
columns: [
|
||||||
|
|
@ -303,4 +302,4 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ export default {
|
||||||
inline: true,
|
inline: true,
|
||||||
visibleOn: 'data.b',
|
visibleOn: 'data.b',
|
||||||
source: '/api/mock2/options/level3?b=${b}'
|
source: '/api/mock2/options/level3?b=${b}'
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -65,4 +65,4 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
title: "地址栏变化自动更新",
|
title: '地址栏变化自动更新',
|
||||||
initApi: '/api/mock2/form/initData?id=${id}',
|
initApi: '/api/mock2/form/initData?id=${id}',
|
||||||
aside: {
|
aside: {
|
||||||
type: 'wrapper',
|
type: 'wrapper',
|
||||||
|
|
@ -21,17 +21,17 @@ export default {
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: '页面2-1',
|
label: '页面2-1',
|
||||||
to: '?id=2-1',
|
to: '?id=2-1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '页面2-2',
|
label: '页面2-2',
|
||||||
to: '?id=2-2',
|
to: '?id=2-2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '页面2-3（disabled）',
|
label: '页面2-3（disabled）',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
to: '?id=2-3',
|
to: '?id=2-3'
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -44,6 +44,6 @@ export default {
|
||||||
},
|
},
|
||||||
body: [
|
body: [
|
||||||
'<p><span class="text-danger">注意 page 渲染器的 `initApi` 中有变量跟地址栏中变量关联，只要值发生了变化，就会重新拉取一次 initApi。</sapn></p>',
|
'<p><span class="text-danger">注意 page 渲染器的 `initApi` 中有变量跟地址栏中变量关联，只要值发生了变化，就会重新拉取一次 initApi。</sapn></p>',
|
||||||
"<p>这些数据是通过 initApi 拉取到的数据。 `\\$infoId`: <span class=\"text-danger\">${infoId|default:空}</span></p>"
|
'<p>这些数据是通过 initApi 拉取到的数据。 `\\$infoId`: <span class="text-danger">${infoId|default:空}</span></p>'
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,10 @@ class CodePreview extends React.Component {
|
||||||
PlayGround: null
|
PlayGround: null
|
||||||
};
|
};
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
require(['./Play'], (component) => this.setState({
|
require(['./Play'], component =>
|
||||||
|
this.setState({
|
||||||
PlayGround: component.default
|
PlayGround: component.default
|
||||||
}))
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -34,19 +35,25 @@ class CodePreview extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<span style={{display: 'block', height: height}} ref="span"></span>
|
<span style={{display: 'block', height: height}} ref="span" />
|
||||||
{PlayGround ? <Overlay
|
{PlayGround ? (
|
||||||
|
<Overlay
|
||||||
container={container}
|
container={container}
|
||||||
target={() => this.refs.span}
|
target={() => this.refs.span}
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
show
|
show
|
||||||
>
|
>
|
||||||
<PopOver offset={{x: 0, y: -height}} style={{height}} className="doc-shcema-preview-popover">
|
<PopOver
|
||||||
|
offset={{x: 0, y: -height}}
|
||||||
|
style={{height}}
|
||||||
|
className="doc-shcema-preview-popover"
|
||||||
|
>
|
||||||
<div className="doc-schema-preview">
|
<div className="doc-schema-preview">
|
||||||
<PlayGround {...rest} vertical />
|
<PlayGround {...rest} vertical />
|
||||||
</div>
|
</div>
|
||||||
</PopOver>
|
</PopOver>
|
||||||
</Overlay> : null }
|
</Overlay>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -76,7 +83,9 @@ export default function(doc) {
|
||||||
window.history.scrollRestoration = 'manual';
|
window.history.scrollRestoration = 'manual';
|
||||||
}
|
}
|
||||||
|
|
||||||
const dom = document.querySelector(`[name="${location.hash.substring(1)}"]`);
|
const dom = document.querySelector(
|
||||||
|
`[name="${location.hash.substring(1)}"]`
|
||||||
|
);
|
||||||
dom && dom.scrollIntoView();
|
dom && dom.scrollIntoView();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -115,17 +124,18 @@ export default function(doc) {
|
||||||
let script = scripts[i];
|
let script = scripts[i];
|
||||||
let props = {};
|
let props = {};
|
||||||
[].slice.apply(script.attributes).forEach(item => {
|
[].slice.apply(script.attributes).forEach(item => {
|
||||||
props[item.name] = item.value
|
props[item.name] = item.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
let dom = document.createElement('div');
|
let dom = document.createElement('div');
|
||||||
let height = props.height ? parseInt(props.height, 10) : 200;
|
let height = props.height ? parseInt(props.height, 10) : 200;
|
||||||
dom.setAttribute("class", "doc-play-ground")
|
dom.setAttribute('class', 'doc-play-ground');
|
||||||
dom.setAttribute("style", `height: ${height}px;`);
|
dom.setAttribute('style', `height: ${height}px;`);
|
||||||
script.parentNode.replaceChild(dom, script);
|
script.parentNode.replaceChild(dom, script);
|
||||||
|
|
||||||
this.doms.push(dom);
|
this.doms.push(dom);
|
||||||
ReactDOM.unstable_renderSubtreeIntoContainer(this, (
|
ReactDOM.unstable_renderSubtreeIntoContainer(
|
||||||
|
this,
|
||||||
<LazyComponent
|
<LazyComponent
|
||||||
{...this.props}
|
{...this.props}
|
||||||
container={() => ReactDOM.findDOMNode(this)}
|
container={() => ReactDOM.findDOMNode(this)}
|
||||||
|
|
@ -135,8 +145,9 @@ export default function(doc) {
|
||||||
scope={props.scope}
|
scope={props.scope}
|
||||||
unMountOnHidden
|
unMountOnHidden
|
||||||
placeholder="加载中，请稍后。。。"
|
placeholder="加载中，请稍后。。。"
|
||||||
/>
|
/>,
|
||||||
), dom);
|
dom
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -145,15 +156,21 @@ export default function(doc) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pos-rlt text-left">
|
<div className="pos-rlt text-left">
|
||||||
{doc.title ? (<TitleBar title={doc.title} />) : null}
|
{doc.title ? <TitleBar title={doc.title} /> : null}
|
||||||
<div className="markdown-body" ref={this.divRef}>Doc</div>
|
<div className="markdown-body" ref={this.divRef}>
|
||||||
|
Doc
|
||||||
|
</div>
|
||||||
{doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
|
{doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
|
||||||
<Portal
|
<Portal container={() => document.querySelector('#asideInner')}>
|
||||||
container={() => document.querySelector('#asideInner')}
|
|
||||||
>
|
|
||||||
<NestedLinks
|
<NestedLinks
|
||||||
navigations={[doc.toc]}
|
navigations={[doc.toc]}
|
||||||
renderLink={({link, active, toggleExpand, depth, classnames: cx}) => {
|
renderLink={({
|
||||||
|
link,
|
||||||
|
active,
|
||||||
|
toggleExpand,
|
||||||
|
depth,
|
||||||
|
classnames: cx
|
||||||
|
}) => {
|
||||||
let children = [];
|
let children = [];
|
||||||
|
|
||||||
if (link.children) {
|
if (link.children) {
|
||||||
|
|
@ -161,23 +178,46 @@ export default function(doc) {
|
||||||
<span
|
<span
|
||||||
key="expand-toggle"
|
key="expand-toggle"
|
||||||
className={cx(`AsideNav-itemArrow`)}
|
className={cx(`AsideNav-itemArrow`)}
|
||||||
></span>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
link.badge && children.push(
|
link.badge &&
|
||||||
<b key="badge" className={cx('AsideNav-itemBadge', link.badgeClassName || 'bg-info')}>{link.badge}</b>
|
children.push(
|
||||||
|
<b
|
||||||
|
key="badge"
|
||||||
|
className={cx(
|
||||||
|
'AsideNav-itemBadge',
|
||||||
|
link.badgeClassName || 'bg-info'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{link.badge}
|
||||||
|
</b>
|
||||||
);
|
);
|
||||||
|
|
||||||
depth === 1 && children.push(
|
depth === 1 &&
|
||||||
<i key="icon" className={cx("AsideNav-itemIcon fa fa-flag")} />
|
children.push(
|
||||||
|
<i
|
||||||
|
key="icon"
|
||||||
|
className={cx('AsideNav-itemIcon fa fa-flag')}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
children.push(
|
children.push(
|
||||||
<span key="label" className={cx("AsideNav-itemLabel")}>{link.label}</span>
|
<span key="label" className={cx('AsideNav-itemLabel')}>
|
||||||
|
{link.label}
|
||||||
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
return link.fragment ? (<a href={`#${link.fragment}`}>{children}</a>) : (<a onClick={link.children ? () => toggleExpand(link) : null}>{children}</a>);
|
return link.fragment ? (
|
||||||
|
<a href={`#${link.fragment}`}>{children}</a>
|
||||||
|
) : (
|
||||||
|
<a
|
||||||
|
onClick={link.children ? () => toggleExpand(link) : null}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
isActive={link => isActive(link, location)}
|
isActive={link => isActive(link, location)}
|
||||||
/>
|
/>
|
||||||
|
|
@ -186,5 +226,5 @@ export default function(doc) {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,4 +24,4 @@ export default {
|
||||||
aside: '边栏',
|
aside: '边栏',
|
||||||
toolbar: '工具栏',
|
toolbar: '工具栏',
|
||||||
initApi: '/api/mock2/page/initDataError'
|
initApi: '/api/mock2/page/initDataError'
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -20,4 +20,4 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@ export default {
|
||||||
type: 'page',
|
type: 'page',
|
||||||
title: '标题',
|
title: '标题',
|
||||||
remark: '提示 Tip',
|
remark: '提示 Tip',
|
||||||
body: "内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}",
|
body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
|
||||||
aside: '边栏部分',
|
aside: '边栏部分',
|
||||||
toolbar: '工具栏',
|
toolbar: '工具栏',
|
||||||
initApi: '/api/mock2/page/initData'
|
initApi: '/api/mock2/page/initData'
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {toast} from '../../src/components/Toast';
|
||||||
toast
|
|
||||||
} from '../../src/components/Toast';
|
|
||||||
import {render} from '../../src/index';
|
import {render} from '../../src/index';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import Frame from 'react-frame-component';
|
import Frame from 'react-frame-component';
|
||||||
|
|
@ -18,14 +16,14 @@ const DEFAULT_CONTENT = `{
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
const scopes = {
|
const scopes = {
|
||||||
'none': ``,
|
none: ``,
|
||||||
|
|
||||||
'body': `{
|
body: `{
|
||||||
"type": "page",
|
"type": "page",
|
||||||
"body": SCHEMA_PLACEHOLDER
|
"body": SCHEMA_PLACEHOLDER
|
||||||
}`,
|
}`,
|
||||||
|
|
||||||
'form': `{
|
form: `{
|
||||||
"type": "page",
|
"type": "page",
|
||||||
"body": {
|
"body": {
|
||||||
"title": "",
|
"title": "",
|
||||||
|
|
@ -53,11 +51,9 @@ const scopes = {
|
||||||
"actions": []
|
"actions": []
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class PlayGround extends React.Component {
|
export default class PlayGround extends React.Component {
|
||||||
|
|
||||||
state = null;
|
state = null;
|
||||||
startX = 0;
|
startX = 0;
|
||||||
oldContents = '';
|
oldContents = '';
|
||||||
|
|
@ -89,8 +85,7 @@ export default class PlayGround extends React.Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.env = {
|
this.env = {
|
||||||
updateLocation: () => {
|
updateLocation: () => {},
|
||||||
},
|
|
||||||
fetcher: config => {
|
fetcher: config => {
|
||||||
config = {
|
config = {
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
|
|
@ -98,25 +93,35 @@ export default class PlayGround extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
if (config.dataType === 'json' && config.data) {
|
if (config.dataType === 'json' && config.data) {
|
||||||
config.data = JSON.stringify(config.data)
|
config.data = JSON.stringify(config.data);
|
||||||
config.headers = config.headers || {};
|
config.headers = config.headers || {};
|
||||||
config.headers['Content-Type'] = 'application/json';
|
config.headers['Content-Type'] = 'application/json';
|
||||||
}
|
}
|
||||||
|
|
||||||
return axios[config.method](config.url, config.data, config);
|
return axios[config.method](config.url, config.data, config);
|
||||||
},
|
},
|
||||||
notify: (type, msg) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg)
|
notify: (type, msg) =>
|
||||||
}
|
toast[type]
|
||||||
|
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
|
||||||
|
: console.warn('[Notify]', type, msg)
|
||||||
|
};
|
||||||
|
|
||||||
const links = [].slice.call(document.head.querySelectorAll('link,style')).map(item => item.outerHTML);
|
const links = [].slice
|
||||||
this.frameTemplate = `<!DOCTYPE html><html><head>${links.join('')}</head><body><div></div></body></html>`;
|
.call(document.head.querySelectorAll('link,style'))
|
||||||
|
.map(item => item.outerHTML);
|
||||||
|
this.frameTemplate = `<!DOCTYPE html><html><head>${links.join(
|
||||||
|
''
|
||||||
|
)}</head><body><div></div></body></html>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextprops) {
|
componentWillReceiveProps(nextprops) {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
|
|
||||||
if (props.code !== nextprops.code) {
|
if (props.code !== nextprops.code) {
|
||||||
const schema = this.buildSchema(nextprops.code || DEFAULT_CONTENT, nextprops);
|
const schema = this.buildSchema(
|
||||||
|
nextprops.code || DEFAULT_CONTENT,
|
||||||
|
nextprops
|
||||||
|
);
|
||||||
this.setState({
|
this.setState({
|
||||||
schema: schema,
|
schema: schema,
|
||||||
schemaCode: JSON.stringify(schema, null, 2)
|
schemaCode: JSON.stringify(schema, null, 2)
|
||||||
|
|
@ -139,10 +144,16 @@ export default class PlayGround extends React.Component {
|
||||||
const scope = query.scope || props.scope;
|
const scope = query.scope || props.scope;
|
||||||
|
|
||||||
if (scope && scopes[scope]) {
|
if (scope && scopes[scope]) {
|
||||||
schemaContent = scopes[scope].replace('SCHEMA_PLACEHOLDER', schemaContent);
|
schemaContent = scopes[scope].replace(
|
||||||
|
'SCHEMA_PLACEHOLDER',
|
||||||
|
schemaContent
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
schemaContent = stripJsonComments(schemaContent).replace(/('|")raw:/g, '$1'); // 去掉注释
|
schemaContent = stripJsonComments(schemaContent).replace(
|
||||||
|
/('|")raw:/g,
|
||||||
|
'$1'
|
||||||
|
); // 去掉注释
|
||||||
|
|
||||||
return JSON.parse(schemaContent);
|
return JSON.parse(schemaContent);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
@ -154,8 +165,12 @@ export default class PlayGround extends React.Component {
|
||||||
|
|
||||||
formatMessage(message, input) {
|
formatMessage(message, input) {
|
||||||
if (/position\s?(\d+)$/.test(message)) {
|
if (/position\s?(\d+)$/.test(message)) {
|
||||||
const lines = input.substring(0, parseInt(RegExp.$1, 10)).split(/\n|\r\n|\r/);
|
const lines = input
|
||||||
message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${lines[lines.length -1].length}。`;
|
.substring(0, parseInt(RegExp.$1, 10))
|
||||||
|
.split(/\n|\r\n|\r/);
|
||||||
|
message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${
|
||||||
|
lines[lines.length - 1].length
|
||||||
|
}。`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return message;
|
return message;
|
||||||
|
|
@ -236,9 +251,7 @@ export default class PlayGround extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {vertical} = this.props;
|
||||||
vertical
|
|
||||||
} = this.props;
|
|
||||||
if (vertical) {
|
if (vertical) {
|
||||||
return (
|
return (
|
||||||
<div className="vbox">
|
<div className="vbox">
|
||||||
|
|
@ -250,28 +263,31 @@ export default class PlayGround extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row-row" style={{height: 200}}>
|
<div className="row-row" style={{height: 200}}>
|
||||||
<div className="cell">
|
<div className="cell">{this.renderEditor()}</div>
|
||||||
{this.renderEditor()}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div
|
||||||
position: "absolute",
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
top: 50,
|
top: 50,
|
||||||
bottom: 0
|
bottom: 0
|
||||||
}}>
|
}}
|
||||||
|
>
|
||||||
<div className="hbox">
|
<div className="hbox">
|
||||||
<div className="col pos-rlt">
|
<div className="col pos-rlt">
|
||||||
<div className="scroll-y h-full pos-abt w-full">
|
<div className="scroll-y h-full pos-abt w-full">
|
||||||
{this.renderPreview()}
|
{this.renderPreview()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col bg-light lter b-l bg-auto pos-rlt" style={{width: this.state.asideWidth}}>
|
<div
|
||||||
<div className="resizer" onMouseDown={this.handleMouseDown}></div>
|
className="col bg-light lter b-l bg-auto pos-rlt"
|
||||||
|
style={{width: this.state.asideWidth}}
|
||||||
|
>
|
||||||
|
<div className="resizer" onMouseDown={this.handleMouseDown} />
|
||||||
{this.renderEditor()}
|
{this.renderEditor()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,36 +3,41 @@ import {render} from '../../src/index';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import {toast} from '../../src/components/Toast';
|
import {toast} from '../../src/components/Toast';
|
||||||
import {alert, confirm} from '../../src/components/Alert';
|
import {alert, confirm} from '../../src/components/Alert';
|
||||||
import Button from '../../src/components/Button'
|
import Button from '../../src/components/Button';
|
||||||
import LazyComponent from '../../src/components/LazyComponent'
|
import LazyComponent from '../../src/components/LazyComponent';
|
||||||
import {default as DrawerContainer} from '../../src/components/Drawer'
|
import {default as DrawerContainer} from '../../src/components/Drawer';
|
||||||
import {Portal} from 'react-overlays';
|
import {Portal} from 'react-overlays';
|
||||||
import {withRouter} from 'react-router';
|
import {withRouter} from 'react-router';
|
||||||
function loadEditor() {
|
function loadEditor() {
|
||||||
return new Promise((resolve) => require(['../../src/components/Editor'], (component) => resolve(component.default)));
|
return new Promise(resolve =>
|
||||||
|
require(['../../src/components/Editor'], component =>
|
||||||
|
resolve(component.default))
|
||||||
|
);
|
||||||
}
|
}
|
||||||
export default function(schema) {
|
export default function(schema) {
|
||||||
if (!schema['$schema']) {
|
if (!schema['$schema']) {
|
||||||
schema = {
|
schema = {
|
||||||
'$schema': 'https://houtai.baidu.com/v2/schemas/page.json',
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json',
|
||||||
...schema
|
...schema
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return withRouter(
|
||||||
return withRouter(class extends React.Component {
|
class extends React.Component {
|
||||||
static displayName = 'SchemaRenderer';
|
static displayName = 'SchemaRenderer';
|
||||||
state = {open: false};
|
state = {open: false};
|
||||||
toggleCode = () => this.setState({
|
toggleCode = () =>
|
||||||
|
this.setState({
|
||||||
open: !this.state.open
|
open: !this.state.open
|
||||||
});
|
});
|
||||||
close = () => this.setState({
|
close = () =>
|
||||||
|
this.setState({
|
||||||
open: false
|
open: false
|
||||||
});
|
});
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
const {router} = props;
|
const {router} = props;
|
||||||
const normalizeLink = (to) => {
|
const normalizeLink = to => {
|
||||||
to = to || '';
|
to = to || '';
|
||||||
const location = router.getCurrentLocation();
|
const location = router.getCurrentLocation();
|
||||||
|
|
||||||
|
|
@ -44,7 +49,11 @@ export default function(schema) {
|
||||||
|
|
||||||
const idx = to.indexOf('?');
|
const idx = to.indexOf('?');
|
||||||
const idx2 = to.indexOf('#');
|
const idx2 = to.indexOf('#');
|
||||||
let pathname = ~idx ? to.substring(0, idx) : ~idx2 ? to.substring(0, idx2) : to;
|
let pathname = ~idx
|
||||||
|
? to.substring(0, idx)
|
||||||
|
: ~idx2
|
||||||
|
? to.substring(0, idx2)
|
||||||
|
: to;
|
||||||
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
|
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
|
||||||
let hash = ~idx2 ? to.substring(idx2) : '';
|
let hash = ~idx2 ? to.substring(idx2) : '';
|
||||||
|
|
||||||
|
|
@ -65,16 +74,16 @@ export default function(schema) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return pathname + search + hash;
|
return pathname + search + hash;
|
||||||
}
|
};
|
||||||
this.env = {
|
this.env = {
|
||||||
updateLocation: (location, replace) => {
|
updateLocation: (location, replace) => {
|
||||||
router[replace ? 'replace' : 'push'](normalizeLink(location));
|
router[replace ? 'replace' : 'push'](normalizeLink(location));
|
||||||
},
|
},
|
||||||
isCurrentUrl: (to) => {
|
isCurrentUrl: to => {
|
||||||
const link = normalizeLink(to);
|
const link = normalizeLink(to);
|
||||||
return router.isActive(link);
|
return router.isActive(link);
|
||||||
},
|
},
|
||||||
jumpTo: (to) => {
|
jumpTo: to => {
|
||||||
to = normalizeLink(to);
|
to = normalizeLink(to);
|
||||||
|
|
||||||
if (/^https?:\/\//.test(to)) {
|
if (/^https?:\/\//.test(to)) {
|
||||||
|
|
@ -83,19 +92,15 @@ export default function(schema) {
|
||||||
router.push(to);
|
router.push(to);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fetcher: ({
|
fetcher: ({url, method, data, config}) => {
|
||||||
url,
|
|
||||||
method,
|
|
||||||
data,
|
|
||||||
config
|
|
||||||
}) => {
|
|
||||||
if (data && data instanceof FormData) {
|
if (data && data instanceof FormData) {
|
||||||
// config.headers = config.headers || {};
|
// config.headers = config.headers || {};
|
||||||
// config.headers['Content-Type'] = 'multipart/form-data';
|
// config.headers['Content-Type'] = 'multipart/form-data';
|
||||||
} else if (data
|
} else if (
|
||||||
&& typeof data !== 'string'
|
data &&
|
||||||
&& !(data instanceof Blob)
|
typeof data !== 'string' &&
|
||||||
&& !(data instanceof ArrayBuffer)
|
!(data instanceof Blob) &&
|
||||||
|
!(data instanceof ArrayBuffer)
|
||||||
) {
|
) {
|
||||||
data = JSON.stringify(data);
|
data = JSON.stringify(data);
|
||||||
config = config || {};
|
config = config || {};
|
||||||
|
|
@ -118,10 +123,13 @@ export default function(schema) {
|
||||||
return axios[method](url, data, config);
|
return axios[method](url, data, config);
|
||||||
},
|
},
|
||||||
isCancel: value => axios.isCancel(value),
|
isCancel: value => axios.isCancel(value),
|
||||||
notify: (type, msg) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg),
|
notify: (type, msg) =>
|
||||||
|
toast[type]
|
||||||
|
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
|
||||||
|
: console.warn('[Notify]', type, msg),
|
||||||
alert,
|
alert,
|
||||||
confirm,
|
confirm,
|
||||||
copy: (content) => console.log('Copy', content)
|
copy: content => console.log('Copy', content)
|
||||||
};
|
};
|
||||||
|
|
||||||
this.handleEditorMount = this.handleEditorMount.bind(this);
|
this.handleEditorMount = this.handleEditorMount.bind(this);
|
||||||
|
|
@ -148,16 +156,16 @@ export default function(schema) {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderSchema() {
|
renderSchema() {
|
||||||
const {
|
const {router, location, theme} = this.props;
|
||||||
router,
|
|
||||||
location,
|
|
||||||
theme
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return render(schema, {
|
return render(
|
||||||
|
schema,
|
||||||
|
{
|
||||||
location,
|
location,
|
||||||
theme
|
theme
|
||||||
}, this.env);
|
},
|
||||||
|
this.env
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -179,11 +187,23 @@ export default function(schema) {
|
||||||
{this.renderSchema()}
|
{this.renderSchema()}
|
||||||
{showCode !== false ? (
|
{showCode !== false ? (
|
||||||
<Portal container={() => document.querySelector('.navbar-nav')}>
|
<Portal container={() => document.querySelector('.navbar-nav')}>
|
||||||
<Button classPrefix={ns} onClick={this.toggleCode} active={this.state.open} iconOnly tooltip="查看源码" level="link" placement="bottom" className="view-code"><i className="fa fa-code" /></Button>
|
<Button
|
||||||
|
classPrefix={ns}
|
||||||
|
onClick={this.toggleCode}
|
||||||
|
active={this.state.open}
|
||||||
|
iconOnly
|
||||||
|
tooltip="查看源码"
|
||||||
|
level="link"
|
||||||
|
placement="bottom"
|
||||||
|
className="view-code"
|
||||||
|
>
|
||||||
|
<i className="fa fa-code" />
|
||||||
|
</Button>
|
||||||
</Portal>
|
</Portal>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
||||||
import TitleBar from '../../../src/components/TitleBar';
|
import TitleBar from '../../../src/components/TitleBar';
|
||||||
import {render} from '../../../src/index';
|
import {render} from '../../../src/index';
|
||||||
|
|
||||||
|
|
||||||
export default class SdkTest extends React.Component {
|
export default class SdkTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
data: {
|
data: {
|
||||||
|
|
@ -13,7 +12,8 @@ export default class SdkTest extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
renderForm() {
|
renderForm() {
|
||||||
return render({
|
return render(
|
||||||
|
{
|
||||||
title: '',
|
title: '',
|
||||||
type: 'form',
|
type: 'form',
|
||||||
controls: [
|
controls: [
|
||||||
|
|
@ -41,12 +41,13 @@ export default class SdkTest extends React.Component {
|
||||||
name: 'lastModified'
|
name: 'lastModified'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
data: this.state.data,
|
data: this.state.data,
|
||||||
onFailed: (reason, errors) => {
|
onFailed: (reason, errors) => {
|
||||||
console.log('Submit Failed', errors, '\n', reason);
|
console.log('Submit Failed', errors, '\n', reason);
|
||||||
},
|
},
|
||||||
onSubmit: (values) => {
|
onSubmit: values => {
|
||||||
console.log('Submit', values);
|
console.log('Submit', values);
|
||||||
},
|
},
|
||||||
onChange: (values, diff) => {
|
onChange: (values, diff) => {
|
||||||
|
|
@ -58,8 +59,9 @@ export default class SdkTest extends React.Component {
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('Diff', diff);
|
console.log('Diff', diff);
|
||||||
},
|
}
|
||||||
});
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClick = () => {
|
handleClick = () => {
|
||||||
|
|
@ -69,7 +71,7 @@ export default class SdkTest extends React.Component {
|
||||||
id: Math.round(Math.random() * 1000),
|
id: Math.round(Math.random() * 1000),
|
||||||
email: 'xxx@xxx.com'
|
email: 'xxx@xxx.com'
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -82,7 +84,9 @@ export default class SdkTest extends React.Component {
|
||||||
<button onClick={this.handleClick}>随机修改</button>
|
<button onClick={this.handleClick}>随机修改</button>
|
||||||
|
|
||||||
<h3>当前值</h3>
|
<h3>当前值</h3>
|
||||||
<pre><code>{JSON.stringify(this.state.data, null, 2)}</code></pre>
|
<pre>
|
||||||
|
<code>{JSON.stringify(this.state.data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -34,21 +34,20 @@ export default {
|
||||||
body: [
|
body: [
|
||||||
'当前关键字是 ${keywords}，当前时间是： ${date|date:YYYY-MM-DD HH\\:mm}',
|
'当前关键字是 ${keywords}，当前时间是： ${date|date:YYYY-MM-DD HH\\:mm}',
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
type: 'table',
|
type: 'table',
|
||||||
className: 'm-t',
|
className: 'm-t',
|
||||||
source: '${table1}',
|
source: '${table1}',
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "text",
|
name: 'text',
|
||||||
label: "文本",
|
label: '文本',
|
||||||
type: "text"
|
type: 'text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'image',
|
type: 'image',
|
||||||
|
|
@ -56,7 +55,8 @@ export default {
|
||||||
name: 'image',
|
name: 'image',
|
||||||
popOver: {
|
popOver: {
|
||||||
title: '查看大图',
|
title: '查看大图',
|
||||||
body: '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
body:
|
||||||
|
'<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -72,31 +72,31 @@ export default {
|
||||||
source: '${table2}',
|
source: '${table2}',
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "progress",
|
name: 'progress',
|
||||||
label: "进度",
|
label: '进度',
|
||||||
type: "progress"
|
type: 'progress'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "boolean",
|
name: 'boolean',
|
||||||
label: "状态",
|
label: '状态',
|
||||||
type: "status"
|
type: 'status'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "boolean",
|
name: 'boolean',
|
||||||
label: "开关",
|
label: '开关',
|
||||||
type: "switch",
|
type: 'switch'
|
||||||
// readOnly: false // 可以开启修改模式
|
// readOnly: false // 可以开启修改模式
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "type",
|
name: 'type',
|
||||||
label: "映射",
|
label: '映射',
|
||||||
type: "mapping",
|
type: 'mapping',
|
||||||
map: {
|
map: {
|
||||||
"*": "其他：${type}",
|
'*': '其他：${type}',
|
||||||
"1": "<span class='label label-info'>漂亮</span>",
|
'1': "<span class='label label-info'>漂亮</span>",
|
||||||
"2": "<span class='label label-success'>开心</span>",
|
'2': "<span class='label label-success'>开心</span>",
|
||||||
"3": "<span class='label label-danger'>惊吓</span>",
|
'3': "<span class='label label-danger'>惊吓</span>",
|
||||||
"4": "<span class='label label-warning'>紧张</span>"
|
'4': "<span class='label label-warning'>紧张</span>"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -115,4 +115,4 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
label: '字段一',
|
label: '字段一',
|
||||||
name: 'filed1',
|
name: 'filed1'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
@ -58,11 +58,11 @@ export default {
|
||||||
type: 'service',
|
type: 'service',
|
||||||
className: 'm-t',
|
className: 'm-t',
|
||||||
initFetchSchemaOn: 'data.tpl',
|
initFetchSchemaOn: 'data.tpl',
|
||||||
schemaApi: '/api/mock2/service/form?tpl=$tpl',
|
schemaApi: '/api/mock2/service/form?tpl=$tpl'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
type: 'service',
|
type: 'service',
|
||||||
className: 'm-t',
|
className: 'm-t',
|
||||||
initFetchSchema: false,
|
initFetchSchema: false,
|
||||||
schemaApi: '/api/mock2/service/schema?type=$type',
|
schemaApi: '/api/mock2/service/schema?type=$type'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -43,5 +43,6 @@ export default {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -31,60 +31,59 @@ export default {
|
||||||
{
|
{
|
||||||
title: '选项卡3',
|
title: '选项卡3',
|
||||||
body: {
|
body: {
|
||||||
type: "crud",
|
type: 'crud',
|
||||||
api: "/api/sample",
|
api: '/api/sample',
|
||||||
filter: {
|
filter: {
|
||||||
title: "条件搜索",
|
title: '条件搜索',
|
||||||
submitText: "",
|
submitText: '',
|
||||||
controls: [
|
controls: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: 'text',
|
||||||
name: "keywords",
|
name: 'keywords',
|
||||||
placeholder: "通过关键字搜索",
|
placeholder: '通过关键字搜索',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
addOn: {
|
addOn: {
|
||||||
label: "搜索",
|
label: '搜索',
|
||||||
type: "submit"
|
type: 'submit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "plain",
|
type: 'plain',
|
||||||
text: "这里的表单项可以配置多个"
|
text: '这里的表单项可以配置多个'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
name: "id",
|
name: 'id',
|
||||||
label: "ID",
|
label: 'ID',
|
||||||
width: 20
|
width: 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "engine",
|
name: 'engine',
|
||||||
label: "Rendering engine"
|
label: 'Rendering engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "browser",
|
name: 'browser',
|
||||||
label: "Browser"
|
label: 'Browser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "platform",
|
name: 'platform',
|
||||||
label: "Platform(s)"
|
label: 'Platform(s)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "version",
|
name: 'version',
|
||||||
label: "Engine version"
|
label: 'Engine version'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "grade",
|
name: 'grade',
|
||||||
label: "CSS grade"
|
label: 'CSS grade'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "operation",
|
type: 'operation',
|
||||||
label: "操作",
|
label: '操作',
|
||||||
width: 100,
|
width: 100,
|
||||||
buttons: [
|
buttons: []
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -159,7 +158,6 @@ export default {
|
||||||
body: '选项卡内容3'
|
body: '选项卡内容3'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -32,4 +32,4 @@ export default {
|
||||||
body: '选项卡1的内容'
|
body: '选项卡1的内容'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -32,4 +32,4 @@ export default {
|
||||||
body: '选项卡2的内容'
|
body: '选项卡2的内容'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -30,92 +30,54 @@ export default {
|
||||||
type: 'wrapper',
|
type: 'wrapper',
|
||||||
className: 'wrapper bg-white b-l b-b b-r',
|
className: 'wrapper bg-white b-l b-b b-r',
|
||||||
body: {
|
body: {
|
||||||
"type": "chart",
|
type: 'chart',
|
||||||
"config": {
|
config: {
|
||||||
"title": {
|
title: {
|
||||||
"text": "极坐标双数值轴"
|
text: '极坐标双数值轴'
|
||||||
},
|
},
|
||||||
"legend": {
|
legend: {
|
||||||
"data": [
|
data: ['line']
|
||||||
"line"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"polar": {
|
polar: {
|
||||||
"center": [
|
center: ['50%', '54%']
|
||||||
"50%",
|
|
||||||
"54%"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"tooltip": {
|
tooltip: {
|
||||||
"trigger": "axis",
|
trigger: 'axis',
|
||||||
"axisPointer": {
|
axisPointer: {
|
||||||
"type": "cross"
|
type: 'cross'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"angleAxis": {
|
angleAxis: {
|
||||||
"type": "value",
|
type: 'value',
|
||||||
"startAngle": 0
|
startAngle: 0
|
||||||
},
|
},
|
||||||
"radiusAxis": {
|
radiusAxis: {
|
||||||
"min": 0
|
min: 0
|
||||||
},
|
},
|
||||||
"series": [
|
series: [
|
||||||
{
|
{
|
||||||
"coordinateSystem": "polar",
|
coordinateSystem: 'polar',
|
||||||
"name": "line",
|
name: 'line',
|
||||||
"type": "line",
|
type: 'line',
|
||||||
"showSymbol": false,
|
showSymbol: false,
|
||||||
"data": [
|
data: [
|
||||||
[
|
[0, 0],
|
||||||
0,
|
[0.03487823687206265, 1],
|
||||||
0
|
[0.06958655048003272, 2],
|
||||||
],
|
[0.10395584540887964, 3],
|
||||||
[
|
[0.13781867790849958, 4],
|
||||||
0.03487823687206265,
|
[0.17101007166283433, 5],
|
||||||
1
|
[0.2033683215379001, 6],
|
||||||
],
|
[0.2347357813929454, 7],
|
||||||
[
|
[0.26495963211660245, 8],
|
||||||
0.06958655048003272,
|
[0.2938926261462365, 9],
|
||||||
2
|
[0.3213938048432697, 10]
|
||||||
],
|
|
||||||
[
|
|
||||||
0.10395584540887964,
|
|
||||||
3
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.13781867790849958,
|
|
||||||
4
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.17101007166283433,
|
|
||||||
5
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.2033683215379001,
|
|
||||||
6
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.2347357813929454,
|
|
||||||
7
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.26495963211660245,
|
|
||||||
8
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.2938926261462365,
|
|
||||||
9
|
|
||||||
],
|
|
||||||
[
|
|
||||||
0.3213938048432697,
|
|
||||||
10
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"animationDuration": 2000
|
animationDuration: 2000
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,37 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "异步任务",
|
title: '异步任务',
|
||||||
"body": [
|
body: [
|
||||||
'<p class="text-danger"></p>',
|
'<p class="text-danger"></p>',
|
||||||
{
|
{
|
||||||
"type": "tasks",
|
type: 'tasks',
|
||||||
"name": "tasks",
|
name: 'tasks',
|
||||||
"items": [
|
items: [
|
||||||
{
|
{
|
||||||
"label": "hive 任务",
|
label: 'hive 任务',
|
||||||
"key": "hive",
|
key: 'hive',
|
||||||
"status": 4,
|
status: 4,
|
||||||
"remark": "查看详情<a target=\"_blank\" href=\"http://www.baidu.com\">日志</a>。"
|
remark:
|
||||||
|
'查看详情<a target="_blank" href="http://www.baidu.com">日志</a>。'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "小流量",
|
label: '小流量',
|
||||||
"key": "partial",
|
key: 'partial',
|
||||||
"status": 4
|
status: 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "全量",
|
label: '全量',
|
||||||
"key": "full",
|
key: 'full',
|
||||||
"status": 4
|
status: 4
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"type": "tasks",
|
type: 'tasks',
|
||||||
"name": "tasks",
|
name: 'tasks',
|
||||||
"className": "b-a bg-white table-responsive m-t",
|
className: 'b-a bg-white table-responsive m-t',
|
||||||
"checkApi": "/api/mock2/task"
|
checkApi: '/api/mock2/task'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,77 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from '../../src/components/Button';
|
import Button from '../../src/components/Button';
|
||||||
|
|
||||||
|
|
||||||
export default class TestComponent extends React.Component {
|
export default class TestComponent extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="wrapper">
|
<div className="wrapper">
|
||||||
<div className="m-b">
|
<div className="m-b">
|
||||||
<Button className="m-r-xs" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="primary" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="primary" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="secondary" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="secondary" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="success" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="success" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="info" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="info" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="warning" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="warning" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="danger" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="danger" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="light" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="light" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Button className="m-r-xs" level="dark" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" level="dark" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="m-b">
|
<div className="m-b">
|
||||||
|
<Button className="m-r-xs" size="xs" classPrefix="cxd-">
|
||||||
<Button className="m-r-xs" size="xs" classPrefix="cxd-">按钮</Button>
|
按钮
|
||||||
<Button className="m-r-xs" size="sm" classPrefix="cxd-">按钮</Button>
|
</Button>
|
||||||
<Button className="m-r-xs" size="md" classPrefix="cxd-">按钮</Button>
|
<Button className="m-r-xs" size="sm" classPrefix="cxd-">
|
||||||
<Button className="m-r-xs" size="lg" classPrefix="cxd-">按钮</Button>
|
按钮
|
||||||
|
</Button>
|
||||||
|
<Button className="m-r-xs" size="md" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
|
<Button className="m-r-xs" size="lg" classPrefix="cxd-">
|
||||||
|
按钮
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="m-b">
|
<div className="m-b">
|
||||||
|
<Button className="m-r-xs" classPrefix="cxd-">
|
||||||
<Button className="m-r-xs" classPrefix="cxd-"><i className="fa fa-cloud"/><span>按钮</span></Button>
|
<i className="fa fa-cloud" />
|
||||||
<Button className="m-r-xs" classPrefix="cxd-"><span>按钮</span><i className="fa fa-cloud"/></Button>
|
<span>按钮</span>
|
||||||
<Button className="m-r-xs" classPrefix="cxd-" iconOnly><i className="fa fa-cloud"/></Button>
|
</Button>
|
||||||
|
<Button className="m-r-xs" classPrefix="cxd-">
|
||||||
|
<span>按钮</span>
|
||||||
|
<i className="fa fa-cloud" />
|
||||||
|
</Button>
|
||||||
|
<Button className="m-r-xs" classPrefix="cxd-" iconOnly>
|
||||||
|
<i className="fa fa-cloud" />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "视频播放器",
|
title: '视频播放器',
|
||||||
"body": [
|
body: [
|
||||||
'<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
|
'<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
|
||||||
{
|
{
|
||||||
"type": "video",
|
type: 'video',
|
||||||
"autoPlay": false,
|
autoPlay: false,
|
||||||
"rates": [1.0, 1.5, 2.0],
|
rates: [1.0, 1.5, 2.0],
|
||||||
"src": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
|
src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
|
||||||
"poster": "https://video-react.js.org/assets/poster.png"
|
poster: 'https://video-react.js.org/assets/poster.png'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,148 +1,142 @@
|
||||||
export default {
|
export default {
|
||||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||||
"title": "表单向导",
|
title: '表单向导',
|
||||||
"body": [
|
body: [
|
||||||
{
|
{
|
||||||
"type": "wizard",
|
type: 'wizard',
|
||||||
"api": "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
"initApi": "/api/mock2/form/initData?waitSeconds=2",
|
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
||||||
"steps": [
|
steps: [
|
||||||
{
|
{
|
||||||
"title": "第一步",
|
title: '第一步',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "website",
|
name: 'website',
|
||||||
"label": "网址",
|
label: '网址',
|
||||||
"type": "url",
|
type: 'url',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "name",
|
name: 'name',
|
||||||
"label": "名称",
|
label: '名称',
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"required": true
|
required: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Step 2",
|
title: 'Step 2',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "email2",
|
name: 'email2',
|
||||||
"label": "邮箱",
|
label: '邮箱',
|
||||||
"type": "email",
|
type: 'email',
|
||||||
"required": true
|
required: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Step 3",
|
title: 'Step 3',
|
||||||
"controls": [
|
controls: ['这是最后一步了']
|
||||||
"这是最后一步了"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "wizard",
|
type: 'wizard',
|
||||||
"api": "/api/mock2/form/saveForm?waitSeconds=2",
|
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||||
"mode": "vertical",
|
mode: 'vertical',
|
||||||
"steps": [
|
steps: [
|
||||||
{
|
{
|
||||||
"title": "第一步",
|
title: '第一步',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "website",
|
name: 'website',
|
||||||
"label": "网址",
|
label: '网址',
|
||||||
"type": "url",
|
type: 'url',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "email",
|
name: 'email',
|
||||||
"label": "邮箱",
|
label: '邮箱',
|
||||||
"type": "email",
|
type: 'email',
|
||||||
"required": true
|
required: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Step 2",
|
title: 'Step 2',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "email2",
|
name: 'email2',
|
||||||
"label": "邮箱",
|
label: '邮箱',
|
||||||
"type": "email",
|
type: 'email',
|
||||||
"required": true
|
required: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Step 3",
|
title: 'Step 3',
|
||||||
"controls": [
|
controls: ['这是最后一步了']
|
||||||
"这是最后一步了"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "wizard",
|
type: 'wizard',
|
||||||
"steps": [
|
steps: [
|
||||||
{
|
{
|
||||||
"title": "第一步",
|
title: '第一步',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "website",
|
name: 'website',
|
||||||
"label": "网址",
|
label: '网址',
|
||||||
"type": "url",
|
type: 'url',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "email",
|
name: 'email',
|
||||||
"label": "邮箱",
|
label: '邮箱',
|
||||||
"type": "email",
|
type: 'email',
|
||||||
"required": true
|
required: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"api": "/api/mock2/form/saveForm?waitSeconds=2"
|
api: '/api/mock2/form/saveForm?waitSeconds=2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "第二步",
|
title: '第二步',
|
||||||
"controls": [
|
controls: [
|
||||||
{
|
{
|
||||||
"name": "test1",
|
name: 'test1',
|
||||||
"type": "email",
|
type: 'email',
|
||||||
"label": "Email",
|
label: 'Email',
|
||||||
"value": "test@test.com"
|
value: 'test@test.com'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "test2",
|
name: 'test2',
|
||||||
"label": "必填示例",
|
label: '必填示例',
|
||||||
"required": true
|
required: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "divider"
|
type: 'divider'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "text",
|
type: 'text',
|
||||||
"name": "test3",
|
name: 'test3',
|
||||||
"placeholder": "可选"
|
placeholder: '可选'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"initApi": "/api/mock2/form/initForm",
|
initApi: '/api/mock2/form/initForm',
|
||||||
"api": "/api/mock2/form/saveForm?waitSeconds=2"
|
api: '/api/mock2/form/saveForm?waitSeconds=2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "确定",
|
title: '确定',
|
||||||
"controls": [
|
controls: ['最后一步了，确认要提交吗？'],
|
||||||
"最后一步了，确认要提交吗？"
|
api: '/api/mock2/form/saveForm?waitSeconds=2'
|
||||||
],
|
|
||||||
"api": "/api/mock2/form/saveForm?waitSeconds=2"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,12 @@ import {
|
||||||
render as renderAmis
|
render as renderAmis
|
||||||
} from '../src/index';
|
} from '../src/index';
|
||||||
|
|
||||||
export function embed(container: string | HTMLElement, schema: any, data: any, env: any) {
|
export function embed(
|
||||||
|
container: string | HTMLElement,
|
||||||
|
schema: any,
|
||||||
|
data: any,
|
||||||
|
env: any
|
||||||
|
) {
|
||||||
if (typeof container === 'string') {
|
if (typeof container === 'string') {
|
||||||
container = document.querySelector(container) as HTMLElement;
|
container = document.querySelector(container) as HTMLElement;
|
||||||
}
|
}
|
||||||
|
|
@ -40,7 +45,11 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
|
|
||||||
const idx = to.indexOf('?');
|
const idx = to.indexOf('?');
|
||||||
const idx2 = to.indexOf('#');
|
const idx2 = to.indexOf('#');
|
||||||
let pathname = ~idx ? to.substring(0, idx) : ~idx2 ? to.substring(0, idx2) : to;
|
let pathname = ~idx
|
||||||
|
? to.substring(0, idx)
|
||||||
|
: ~idx2
|
||||||
|
? to.substring(0, idx2)
|
||||||
|
: to;
|
||||||
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
|
let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
|
||||||
let hash = ~idx2 ? to.substring(idx2) : '';
|
let hash = ~idx2 ? to.substring(idx2) : '';
|
||||||
|
|
||||||
|
|
@ -61,7 +70,7 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
}
|
}
|
||||||
|
|
||||||
return pathname + search + hash;
|
return pathname + search + hash;
|
||||||
}
|
};
|
||||||
|
|
||||||
const responseAdpater = (api: any) => (value: any) => {
|
const responseAdpater = (api: any) => (value: any) => {
|
||||||
let response = value.data;
|
let response = value.data;
|
||||||
|
|
@ -88,21 +97,32 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
const result = {
|
const result = {
|
||||||
...value,
|
...value,
|
||||||
data: response
|
data: response
|
||||||
}
|
};
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
renderReact((
|
renderReact(
|
||||||
<div className="amis-routes-wrapper">
|
<div className="amis-routes-wrapper">
|
||||||
<ToastComponent position={env && env.toastPosition || 'top-right'} closeButton={false} timeOut={5000} extendedTimeOut={3000}/>
|
<ToastComponent
|
||||||
|
position={(env && env.toastPosition) || 'top-right'}
|
||||||
|
closeButton={false}
|
||||||
|
timeOut={5000}
|
||||||
|
extendedTimeOut={3000}
|
||||||
|
/>
|
||||||
<AlertComponent container={container} />
|
<AlertComponent container={container} />
|
||||||
|
|
||||||
{renderAmis(schema, {
|
{renderAmis(
|
||||||
|
schema,
|
||||||
|
{
|
||||||
...data,
|
...data,
|
||||||
scopeRef: (ref:any) => scoped = ref
|
scopeRef: (ref: any) => (scoped = ref)
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
getModalContainer: () => document.querySelector('.amis-scope'),
|
getModalContainer: () => document.querySelector('.amis-scope'),
|
||||||
notify: (type: string, msg: string) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg),
|
notify: (type: string, msg: string) =>
|
||||||
|
toast[type]
|
||||||
|
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
|
||||||
|
: console.warn('[Notify]', type, msg),
|
||||||
alert,
|
alert,
|
||||||
confirm,
|
confirm,
|
||||||
updateLocation: (to: any, replace: boolean) => {
|
updateLocation: (to: any, replace: boolean) => {
|
||||||
|
|
@ -131,7 +151,9 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
const query = qs.parse(search.substring(1));
|
const query = qs.parse(search.substring(1));
|
||||||
const currentQuery = qs.parse(location.search.substring(1));
|
const currentQuery = qs.parse(location.search.substring(1));
|
||||||
|
|
||||||
return Object.keys(query).every(key => query[key] === currentQuery[key]);
|
return Object.keys(query).every(
|
||||||
|
key => query[key] === currentQuery[key]
|
||||||
|
);
|
||||||
} else if (pathname === location.pathname) {
|
} else if (pathname === location.pathname) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
@ -146,7 +168,9 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
to = normalizeLink(to);
|
to = normalizeLink(to);
|
||||||
|
|
||||||
if (action && action.actionType === 'url') {
|
if (action && action.actionType === 'url') {
|
||||||
action.blank === false ? (window.location.href = to) : window.open(to);
|
action.blank === false
|
||||||
|
? (window.location.href = to)
|
||||||
|
: window.open(to);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -157,20 +181,15 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fetcher: (api: any) => {
|
fetcher: (api: any) => {
|
||||||
let {
|
let {url, method, data, responseType, config, headers} = api;
|
||||||
url,
|
|
||||||
method,
|
|
||||||
data,
|
|
||||||
responseType,
|
|
||||||
config,
|
|
||||||
headers
|
|
||||||
} = api;
|
|
||||||
config = config || {};
|
config = config || {};
|
||||||
config.withCredentials = true;
|
config.withCredentials = true;
|
||||||
responseType && (config.responseType = responseType);
|
responseType && (config.responseType = responseType);
|
||||||
|
|
||||||
if (config.cancelExecutor) {
|
if (config.cancelExecutor) {
|
||||||
config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
|
config.cancelToken = new (axios as any).CancelToken(
|
||||||
|
config.cancelExecutor
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
config.headers = headers || {};
|
config.headers = headers || {};
|
||||||
|
|
@ -180,18 +199,18 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
config.params = data;
|
config.params = data;
|
||||||
} else if (data && data instanceof FormData) {
|
} else if (data && data instanceof FormData) {
|
||||||
// config.headers['Content-Type'] = 'multipart/form-data';
|
// config.headers['Content-Type'] = 'multipart/form-data';
|
||||||
} else if (data
|
} else if (
|
||||||
&& typeof data !== 'string'
|
data &&
|
||||||
&& !(data instanceof Blob)
|
typeof data !== 'string' &&
|
||||||
&& !(data instanceof ArrayBuffer)
|
!(data instanceof Blob) &&
|
||||||
|
!(data instanceof ArrayBuffer)
|
||||||
) {
|
) {
|
||||||
data = JSON.stringify(data);
|
data = JSON.stringify(data);
|
||||||
config.headers['Content-Type'] = 'application/json';
|
config.headers['Content-Type'] = 'application/json';
|
||||||
}
|
}
|
||||||
|
|
||||||
data && (config.data = data);
|
data && (config.data = data);
|
||||||
return axios(url, config)
|
return axios(url, config).then(responseAdpater(api));
|
||||||
.then(responseAdpater(api));
|
|
||||||
},
|
},
|
||||||
isCancel: (value: any) => (axios as any).isCancel(value),
|
isCancel: (value: any) => (axios as any).isCancel(value),
|
||||||
copy: (contents: string, options: any = {}) => {
|
copy: (contents: string, options: any = {}) => {
|
||||||
|
|
@ -201,8 +220,10 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
||||||
},
|
},
|
||||||
richTextToken: '',
|
richTextToken: '',
|
||||||
...env
|
...env
|
||||||
})}
|
}
|
||||||
</div>
|
)}
|
||||||
), container);
|
</div>,
|
||||||
|
container
|
||||||
|
);
|
||||||
return scoped;
|
return scoped;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,5 @@ import { render } from 'react-dom';
|
||||||
import App from './components/App';
|
import App from './components/App';
|
||||||
|
|
||||||
export function bootstrap(mountTo, initalState) {
|
export function bootstrap(mountTo, initalState) {
|
||||||
render(
|
render(<App />, mountTo);
|
||||||
<App />,
|
|
||||||
mountTo
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,29 @@
|
||||||
|
|
||||||
const __moduleId = (str: string) => '';
|
const __moduleId = (str: string) => '';
|
||||||
|
|
||||||
const mapping: {
|
const mapping: {
|
||||||
[propName: string]: any;
|
[propName: string]: any;
|
||||||
} = {
|
} = {
|
||||||
'jquery': __moduleId('jquery'),
|
jquery: __moduleId('jquery'),
|
||||||
'react': __moduleId('react'),
|
react: __moduleId('react'),
|
||||||
'react-dom': __moduleId('react-dom'),
|
'react-dom': __moduleId('react-dom'),
|
||||||
'react-addons-update': __moduleId('react-addons-update'),
|
'react-addons-update': __moduleId('react-addons-update'),
|
||||||
'immutability-helper': __moduleId('react-addons-update'),
|
'immutability-helper': __moduleId('react-addons-update'),
|
||||||
'react-cropper': __moduleId('react-cropper'),
|
'react-cropper': __moduleId('react-cropper'),
|
||||||
'react-dropzone': __moduleId('react-dropzone'),
|
'react-dropzone': __moduleId('react-dropzone'),
|
||||||
'classnames': __moduleId('classnames'),
|
classnames: __moduleId('classnames'),
|
||||||
'axios': __moduleId('axios'),
|
axios: __moduleId('axios'),
|
||||||
'moment': __moduleId('moment'),
|
moment: __moduleId('moment'),
|
||||||
'mobx': __moduleId('mobx'),
|
mobx: __moduleId('mobx'),
|
||||||
'mobx-state-tree': __moduleId('mobx-state-tree'),
|
'mobx-state-tree': __moduleId('mobx-state-tree'),
|
||||||
'react-transition-group': __moduleId('react-transition-group'),
|
'react-transition-group': __moduleId('react-transition-group'),
|
||||||
'echarts': __moduleId('echarts'),
|
echarts: __moduleId('echarts'),
|
||||||
'zrender': __moduleId('zrender'),
|
zrender: __moduleId('zrender'),
|
||||||
'sortablejs': __moduleId('sortablejs'),
|
sortablejs: __moduleId('sortablejs'),
|
||||||
'amis': __moduleId('../src'),
|
amis: __moduleId('../src'),
|
||||||
'amis/embed': __moduleId('./embed.tsx'),
|
'amis/embed': __moduleId('./embed.tsx'),
|
||||||
'prop-types': __moduleId('prop-types'),
|
'prop-types': __moduleId('prop-types'),
|
||||||
'async': __moduleId('async'),
|
async: __moduleId('async'),
|
||||||
'qs': __moduleId('qs')
|
qs: __moduleId('qs')
|
||||||
};
|
};
|
||||||
|
|
||||||
function amisRequire(...args: Array<any>) {
|
function amisRequire(...args: Array<any>) {
|
||||||
|
|
@ -32,6 +31,6 @@ function amisRequire(...args: Array<any>) {
|
||||||
id = Array.isArray(id) ? id.map(id => mapping[id] || id) : mapping[id] || id;
|
id = Array.isArray(id) ? id.map(id => mapping[id] || id) : mapping[id] || id;
|
||||||
args.unshift(id);
|
args.unshift(id);
|
||||||
return require.apply(this, args);
|
return require.apply(this, args);
|
||||||
};
|
}
|
||||||
|
|
||||||
(window as any).amisRequire = amisRequire;
|
(window as any).amisRequire = amisRequire;
|
||||||
|
|
@ -6,8 +6,12 @@ if (!Array.from) {
|
||||||
};
|
};
|
||||||
var toInteger = function(value) {
|
var toInteger = function(value) {
|
||||||
var number = Number(value);
|
var number = Number(value);
|
||||||
if (isNaN(number)) { return 0; }
|
if (isNaN(number)) {
|
||||||
if (number === 0 || !isFinite(number)) { return number; }
|
return 0;
|
||||||
|
}
|
||||||
|
if (number === 0 || !isFinite(number)) {
|
||||||
|
return number;
|
||||||
|
}
|
||||||
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
||||||
};
|
};
|
||||||
var maxSafeInteger = Math.pow(2, 53) - 1;
|
var maxSafeInteger = Math.pow(2, 53) - 1;
|
||||||
|
|
@ -26,7 +30,9 @@ if (!Array.from) {
|
||||||
|
|
||||||
// 3. ReturnIfAbrupt(items).
|
// 3. ReturnIfAbrupt(items).
|
||||||
if (arrayLike == null) {
|
if (arrayLike == null) {
|
||||||
throw new TypeError("Array.from requires an array-like object - not null or undefined");
|
throw new TypeError(
|
||||||
|
'Array.from requires an array-like object - not null or undefined'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4. If mapfn is undefined, then let mapping be false.
|
// 4. If mapfn is undefined, then let mapping be false.
|
||||||
|
|
@ -36,7 +42,9 @@ if (!Array.from) {
|
||||||
// 5. else
|
// 5. else
|
||||||
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
|
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
|
||||||
if (!isCallable(mapFn)) {
|
if (!isCallable(mapFn)) {
|
||||||
throw new TypeError('Array.from: when provided, the second argument must be a function');
|
throw new TypeError(
|
||||||
|
'Array.from: when provided, the second argument must be a function'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
||||||
|
|
@ -62,7 +70,10 @@ if (!Array.from) {
|
||||||
while (k < len) {
|
while (k < len) {
|
||||||
kValue = items[k];
|
kValue = items[k];
|
||||||
if (mapFn) {
|
if (mapFn) {
|
||||||
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
|
A[k] =
|
||||||
|
typeof T === 'undefined'
|
||||||
|
? mapFn(kValue, k)
|
||||||
|
: mapFn.call(T, kValue, k);
|
||||||
} else {
|
} else {
|
||||||
A[k] = kValue;
|
A[k] = kValue;
|
||||||
}
|
}
|
||||||
|
|
@ -73,5 +84,5 @@ if (!Array.from) {
|
||||||
// 20. Return A.
|
// 20. Return A.
|
||||||
return A;
|
return A;
|
||||||
};
|
};
|
||||||
}());
|
})();
|
||||||
}
|
}
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
if (typeof Object.assign != 'function') {
|
if (typeof Object.assign != 'function') {
|
||||||
// Must be writable: true, enumerable: false, configurable: true
|
// Must be writable: true, enumerable: false, configurable: true
|
||||||
Object.defineProperty(Object, "assign", {
|
Object.defineProperty(Object, 'assign', {
|
||||||
value: function assign(target, varArgs) { // .length of function is 2
|
value: function assign(target, varArgs) {
|
||||||
|
// .length of function is 2
|
||||||
'use strict';
|
'use strict';
|
||||||
if (target == null) { // TypeError if undefined or null
|
if (target == null) {
|
||||||
|
// TypeError if undefined or null
|
||||||
throw new TypeError('Cannot convert undefined or null to object');
|
throw new TypeError('Cannot convert undefined or null to object');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -12,7 +14,8 @@ if (typeof Object.assign != 'function') {
|
||||||
for (var index = 1; index < arguments.length; index++) {
|
for (var index = 1; index < arguments.length; index++) {
|
||||||
var nextSource = arguments[index];
|
var nextSource = arguments[index];
|
||||||
|
|
||||||
if (nextSource != null) { // Skip over if undefined or null
|
if (nextSource != null) {
|
||||||
|
// Skip over if undefined or null
|
||||||
for (var nextKey in nextSource) {
|
for (var nextKey in nextSource) {
|
||||||
// Avoid bugs when hasOwnProperty is shadowed
|
// Avoid bugs when hasOwnProperty is shadowed
|
||||||
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,9 @@
|
||||||
* @author mdn
|
* @author mdn
|
||||||
*/
|
*/
|
||||||
if (!Element.prototype.matches) {
|
if (!Element.prototype.matches) {
|
||||||
Element.prototype.matches = Element.prototype.msMatchesSelector
|
Element.prototype.matches =
|
||||||
|| Element.prototype.webkitMatchesSelector;
|
Element.prototype.msMatchesSelector ||
|
||||||
|
Element.prototype.webkitMatchesSelector;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!Element.prototype.closest) {
|
if (!Element.prototype.closest) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "amis",
|
"name": "amis",
|
||||||
"version": "1.0.4",
|
"version": "1.0.4-beta.3",
|
||||||
"description": "一种MIS页面生成工具",
|
"description": "一种MIS页面生成工具",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"stop": "fis3 server stop",
|
"stop": "fis3 server stop",
|
||||||
"dev": "fis3 release -cwd ./public",
|
"dev": "fis3 release -cwd ./public",
|
||||||
"publish2npm": "sh publish.sh && npm publish",
|
"publish2npm": "sh publish.sh && npm publish",
|
||||||
"prettier": "prettier --write 'src/**/*.{tsx,ts}'"
|
"prettier": "prettier --write '{src,examples}/**/*.{tsx,ts,jsx}'"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,17 @@ import {RendererData, Action} from './types';
|
||||||
|
|
||||||
export interface ScopedComponentType extends React.Component<RendererProps> {
|
export interface ScopedComponentType extends React.Component<RendererProps> {
|
||||||
focus?: () => void;
|
focus?: () => void;
|
||||||
doAction?: (action: Action, data: RendererData, throwErrors?: boolean) => void;
|
doAction?: (
|
||||||
|
action: Action,
|
||||||
|
data: RendererData,
|
||||||
|
throwErrors?: boolean
|
||||||
|
) => void;
|
||||||
receive?: (values: RendererData, subPath?: string) => void;
|
receive?: (values: RendererData, subPath?: string) => void;
|
||||||
reload?: (subPath?: string, query?: RendererData | null, ctx?: RendererData) => void;
|
reload?: (
|
||||||
|
subPath?: string,
|
||||||
|
query?: RendererData | null,
|
||||||
|
ctx?: RendererData
|
||||||
|
) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IScopedContext {
|
export interface IScopedContext {
|
||||||
|
|
@ -32,7 +40,11 @@ export interface IScopedContext {
|
||||||
type AlisIScopedContext = IScopedContext;
|
type AlisIScopedContext = IScopedContext;
|
||||||
export const ScopedContext = React.createContext(createScopedTools(''));
|
export const ScopedContext = React.createContext(createScopedTools(''));
|
||||||
|
|
||||||
function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: RendererEnv): IScopedContext {
|
function createScopedTools(
|
||||||
|
path?: string,
|
||||||
|
parent?: AlisIScopedContext,
|
||||||
|
env?: RendererEnv
|
||||||
|
): IScopedContext {
|
||||||
const components: Array<ScopedComponentType> = [];
|
const components: Array<ScopedComponentType> = [];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -78,7 +90,8 @@ function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: Ren
|
||||||
|
|
||||||
const resolved = find(
|
const resolved = find(
|
||||||
components,
|
components,
|
||||||
component => component.props.name === name || component.props.id === name
|
component =>
|
||||||
|
component.props.name === name || component.props.id === name
|
||||||
);
|
);
|
||||||
return resolved || (parent && parent.getComponentByName(name));
|
return resolved || (parent && parent.getComponentByName(name));
|
||||||
},
|
},
|
||||||
|
|
@ -94,7 +107,8 @@ function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: Ren
|
||||||
return location.reload();
|
return location.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
let targets = typeof target === 'string' ? target.split(/\s*,\s*/) : target;
|
let targets =
|
||||||
|
typeof target === 'string' ? target.split(/\s*,\s*/) : target;
|
||||||
targets.forEach(name => {
|
targets.forEach(name => {
|
||||||
const idx2 = name.indexOf('?');
|
const idx2 = name.indexOf('?');
|
||||||
let query = null;
|
let query = null;
|
||||||
|
|
@ -119,7 +133,8 @@ function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: Ren
|
||||||
|
|
||||||
send(receive: string, values: object) {
|
send(receive: string, values: object) {
|
||||||
const scoped = this;
|
const scoped = this;
|
||||||
let receives = typeof receive === 'string' ? receive.split(/\s*,\s*/) : receive;
|
let receives =
|
||||||
|
typeof receive === 'string' ? receive.split(/\s*,\s*/) : receive;
|
||||||
|
|
||||||
// todo 没找到做提示！
|
// todo 没找到做提示！
|
||||||
receives.forEach(name => {
|
receives.forEach(name => {
|
||||||
|
|
@ -167,7 +182,8 @@ export function HocScoped<
|
||||||
scopeRef?: (ref: any) => void;
|
scopeRef?: (ref: any) => void;
|
||||||
}
|
}
|
||||||
> {
|
> {
|
||||||
static displayName = `Scoped(${ComposedComponent.displayName || ComposedComponent.name})`;
|
static displayName = `Scoped(${ComposedComponent.displayName ||
|
||||||
|
ComposedComponent.name})`;
|
||||||
static contextType = ScopedContext;
|
static contextType = ScopedContext;
|
||||||
static ComposedComponent = ComposedComponent;
|
static ComposedComponent = ComposedComponent;
|
||||||
ref: any;
|
ref: any;
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,9 @@ function convertFieldSetTabs2Controls(schema: any) {
|
||||||
const toUpdate: any = {};
|
const toUpdate: any = {};
|
||||||
let flag = false;
|
let flag = false;
|
||||||
|
|
||||||
toUpdate.controls = Array.isArray(schema.controls) ? schema.controls.concat() : [];
|
toUpdate.controls = Array.isArray(schema.controls)
|
||||||
|
? schema.controls.concat()
|
||||||
|
: [];
|
||||||
toUpdate.controls = toUpdate.controls.map((control: any) => {
|
toUpdate.controls = toUpdate.controls.map((control: any) => {
|
||||||
if (Array.isArray(control)) {
|
if (Array.isArray(control)) {
|
||||||
let converted = convertFieldSetTabs2Controls({
|
let converted = convertFieldSetTabs2Controls({
|
||||||
|
|
@ -53,7 +55,10 @@ function convertFieldSetTabs2Controls(schema: any) {
|
||||||
});
|
});
|
||||||
|
|
||||||
schema.fieldSet &&
|
schema.fieldSet &&
|
||||||
(Array.isArray(schema.fieldSet) ? schema.fieldSet : [schema.fieldSet]).forEach((fieldSet: any) => {
|
(Array.isArray(schema.fieldSet)
|
||||||
|
? schema.fieldSet
|
||||||
|
: [schema.fieldSet]
|
||||||
|
).forEach((fieldSet: any) => {
|
||||||
flag = true;
|
flag = true;
|
||||||
toUpdate.controls.push({
|
toUpdate.controls.push({
|
||||||
...convertFieldSetTabs2Controls(fieldSet),
|
...convertFieldSetTabs2Controls(fieldSet),
|
||||||
|
|
@ -221,7 +226,10 @@ function convertArray2Hbox(arr: Array<any>): any {
|
||||||
|
|
||||||
// CRUD/List 和 CRUD/Card 的 body 中的数组用法转成 hbox
|
// CRUD/List 和 CRUD/Card 的 body 中的数组用法转成 hbox
|
||||||
addSchemaFilter(function(schema: Schema, renderer) {
|
addSchemaFilter(function(schema: Schema, renderer) {
|
||||||
if (renderer.component !== CardRenderer && renderer.component !== ListItemRenderer) {
|
if (
|
||||||
|
renderer.component !== CardRenderer &&
|
||||||
|
renderer.component !== ListItemRenderer
|
||||||
|
) {
|
||||||
return schema;
|
return schema;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -272,11 +280,18 @@ addSchemaFilter(function(scheam: Schema, renderer) {
|
||||||
return scheam;
|
return scheam;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (scheam.className && !scheam.size && /\bfieldset(?:\-(xs|sm|md|lg))?\b/.test(scheam.className)) {
|
if (
|
||||||
|
scheam.className &&
|
||||||
|
!scheam.size &&
|
||||||
|
/\bfieldset(?:\-(xs|sm|md|lg))?\b/.test(scheam.className)
|
||||||
|
) {
|
||||||
scheam = {
|
scheam = {
|
||||||
...scheam,
|
...scheam,
|
||||||
size: RegExp.$1 || 'base',
|
size: RegExp.$1 || 'base',
|
||||||
className: scheam.className.replace(/\bfieldset(?:\-(xs|sm|md|lg))?\b/, '')
|
className: scheam.className.replace(
|
||||||
|
/\bfieldset(?:\-(xs|sm|md|lg))?\b/,
|
||||||
|
''
|
||||||
|
)
|
||||||
};
|
};
|
||||||
|
|
||||||
delete scheam.btnClassName;
|
delete scheam.btnClassName;
|
||||||
|
|
|
||||||
|
|
@ -23,12 +23,16 @@ export class NotFound extends React.Component<NotFoundProps, any> {
|
||||||
<div className="container w-xxl w-auto-xs">
|
<div className="container w-xxl w-auto-xs">
|
||||||
<div className="text-center m-b-lg">
|
<div className="text-center m-b-lg">
|
||||||
<h1 className="text-shadow text-white">{code || '404'}</h1>
|
<h1 className="text-shadow text-white">{code || '404'}</h1>
|
||||||
{description ? <div className="text-danger">{description}</div> : null}
|
{description ? (
|
||||||
|
<div className="text-danger">{description}</div>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
{links ? <div className="list-group bg-info auto m-b-sm m-b-lg">{links}</div> : null}
|
{links ? (
|
||||||
|
<div className="list-group bg-info auto m-b-sm m-b-lg">{links}</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{footerText ? (
|
{footerText ? (
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,12 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
||||||
classPrefix
|
classPrefix
|
||||||
} = this.props;
|
} = this.props;
|
||||||
return (
|
return (
|
||||||
<Modal show={this.state.show} onHide={this.handleCancel} container={container} ref={this.modalRef}>
|
<Modal
|
||||||
|
show={this.state.show}
|
||||||
|
onHide={this.handleCancel}
|
||||||
|
container={container}
|
||||||
|
ref={this.modalRef}
|
||||||
|
>
|
||||||
<div className={cx('Modal-header')}>
|
<div className={cx('Modal-header')}>
|
||||||
<div className={cx('Modal-title')}>{this.state.title || title}</div>
|
<div className={cx('Modal-title')}>{this.state.title || title}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -157,8 +162,13 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
||||||
<div ref={this.bodyRef} />
|
<div ref={this.bodyRef} />
|
||||||
</div>
|
</div>
|
||||||
<div className={cx('Modal-footer')}>
|
<div className={cx('Modal-footer')}>
|
||||||
{this.state.confirm ? <Button onClick={this.handleCancel}>{cancelText}</Button> : null}
|
{this.state.confirm ? (
|
||||||
<Button level={this.state.confirm ? confirmBtnLevel : alertBtnLevel} onClick={this.handleConfirm}>
|
<Button onClick={this.handleCancel}>{cancelText}</Button>
|
||||||
|
) : null}
|
||||||
|
<Button
|
||||||
|
level={this.state.confirm ? confirmBtnLevel : alertBtnLevel}
|
||||||
|
onClick={this.handleConfirm}
|
||||||
|
>
|
||||||
{confirmText}
|
{confirmText}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -167,9 +177,13 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const alert: (content: string, title?: string) => void = (content, title) =>
|
export const alert: (content: string, title?: string) => void = (
|
||||||
Alert.getInstance().alert(content, title);
|
content,
|
||||||
export const confirm: (content: string, title?: string) => Promise<any> = (content, title) =>
|
title
|
||||||
Alert.getInstance().confirm(content, title);
|
) => Alert.getInstance().alert(content, title);
|
||||||
|
export const confirm: (content: string, title?: string) => Promise<any> = (
|
||||||
|
content,
|
||||||
|
title
|
||||||
|
) => Alert.getInstance().confirm(content, title);
|
||||||
export const ThemedAlert = themeable(Alert);
|
export const ThemedAlert = themeable(Alert);
|
||||||
export default ThemedAlert;
|
export default ThemedAlert;
|
||||||
|
|
|
||||||
|
|
@ -20,12 +20,20 @@ export interface AlertState {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Alert extends React.Component<AlertProps, AlertState> {
|
export class Alert extends React.Component<AlertProps, AlertState> {
|
||||||
static defaultProps: Pick<AlertProps, 'level' | 'className' | 'showCloseButton'> = {
|
static defaultProps: Pick<
|
||||||
|
AlertProps,
|
||||||
|
'level' | 'className' | 'showCloseButton'
|
||||||
|
> = {
|
||||||
level: 'info',
|
level: 'info',
|
||||||
className: '',
|
className: '',
|
||||||
showCloseButton: false
|
showCloseButton: false
|
||||||
};
|
};
|
||||||
static propsList: Array<string> = ['level', 'className', 'showCloseButton', 'onClose'];
|
static propsList: Array<string> = [
|
||||||
|
'level',
|
||||||
|
'className',
|
||||||
|
'showCloseButton',
|
||||||
|
'onClose'
|
||||||
|
];
|
||||||
|
|
||||||
constructor(props: AlertProps) {
|
constructor(props: AlertProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
@ -46,12 +54,22 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {classnames: cx, className, level, children, showCloseButton} = this.props;
|
const {
|
||||||
|
classnames: cx,
|
||||||
|
className,
|
||||||
|
level,
|
||||||
|
children,
|
||||||
|
showCloseButton
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
return this.state.show ? (
|
return this.state.show ? (
|
||||||
<div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
|
<div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
|
||||||
{showCloseButton ? (
|
{showCloseButton ? (
|
||||||
<button className={cx('Alert-close')} onClick={this.handleClick} type="button">
|
<button
|
||||||
|
className={cx('Alert-close')}
|
||||||
|
onClick={this.handleClick}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
<span>×</span>
|
<span>×</span>
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,12 @@ interface AsideNavProps {
|
||||||
isActive: Function;
|
isActive: Function;
|
||||||
isOpen: (link: LinkItemProps) => boolean;
|
isOpen: (link: LinkItemProps) => boolean;
|
||||||
navigations: Array<Navigation>;
|
navigations: Array<Navigation>;
|
||||||
renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, props: AsideNavProps) => React.ReactNode;
|
renderSubLinks: (
|
||||||
|
link: LinkItemProps,
|
||||||
|
renderLink: Function,
|
||||||
|
depth: number,
|
||||||
|
props: AsideNavProps
|
||||||
|
) => React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface AsideNavState {
|
interface AsideNavState {
|
||||||
|
|
@ -51,7 +56,12 @@ interface AsideNavState {
|
||||||
export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
renderLink: (item: LinkItemProps) => <a>{item.label}</a>,
|
renderLink: (item: LinkItemProps) => <a>{item.label}</a>,
|
||||||
renderSubLinks: (link: LinkItemProps, renderLink: Function, depth: number, {classnames: cx}: AsideNavProps) =>
|
renderSubLinks: (
|
||||||
|
link: LinkItemProps,
|
||||||
|
renderLink: Function,
|
||||||
|
depth: number,
|
||||||
|
{classnames: cx}: AsideNavProps
|
||||||
|
) =>
|
||||||
link.children && link.children.length ? (
|
link.children && link.children.length ? (
|
||||||
<ul className={cx('AsideNav-subList')}>
|
<ul className={cx('AsideNav-subList')}>
|
||||||
{link.label ? (
|
{link.label ? (
|
||||||
|
|
@ -59,13 +69,16 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
<a>{link.label}</a>
|
<a>{link.label}</a>
|
||||||
</li>
|
</li>
|
||||||
) : null}
|
) : null}
|
||||||
{link.children.map((link, key) => renderLink(link, key, {}, depth + 1))}
|
{link.children.map((link, key) =>
|
||||||
|
renderLink(link, key, {}, depth + 1)
|
||||||
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
) : link.label && depth === 1 ? (
|
) : link.label && depth === 1 ? (
|
||||||
<div className={cx('AsideNav-tooltip')}>{link.label}</div>
|
<div className={cx('AsideNav-tooltip')}>{link.label}</div>
|
||||||
) : null,
|
) : null,
|
||||||
isActive: (link: LinkItem) => link.open,
|
isActive: (link: LinkItem) => link.open,
|
||||||
isOpen: (item: LinkItemProps) => (item.children ? item.children.some(item => item.open) : false)
|
isOpen: (item: LinkItemProps) =>
|
||||||
|
item.children ? item.children.some(item => item.open) : false
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: AsideNavProps) {
|
constructor(props: AsideNavProps) {
|
||||||
|
|
@ -78,7 +91,9 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
props.navigations,
|
props.navigations,
|
||||||
(item: Navigation) => {
|
(item: Navigation) => {
|
||||||
const isActive =
|
const isActive =
|
||||||
typeof item.active === 'undefined' ? (props.isActive as Function)(item) : item.active;
|
typeof item.active === 'undefined'
|
||||||
|
? (props.isActive as Function)(item)
|
||||||
|
: item.active;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
|
|
@ -100,14 +115,19 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
const isOpen = props.isOpen;
|
const isOpen = props.isOpen;
|
||||||
|
|
||||||
if (props.navigations !== nextProps.navigations || props.isActive !== nextProps.isActive) {
|
if (
|
||||||
|
props.navigations !== nextProps.navigations ||
|
||||||
|
props.isActive !== nextProps.isActive
|
||||||
|
) {
|
||||||
let id = 1;
|
let id = 1;
|
||||||
this.setState({
|
this.setState({
|
||||||
navigations: mapTree(
|
navigations: mapTree(
|
||||||
nextProps.navigations,
|
nextProps.navigations,
|
||||||
(item: Navigation) => {
|
(item: Navigation) => {
|
||||||
const isActive =
|
const isActive =
|
||||||
typeof item.active === 'undefined' ? (nextProps.isActive as Function)(item) : item.active;
|
typeof item.active === 'undefined'
|
||||||
|
? (nextProps.isActive as Function)(item)
|
||||||
|
: item.active;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
|
|
@ -142,8 +162,19 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
renderLink(link: LinkItemProps, key: any, props: Partial<AsideNavProps> = {}, depth = 1): React.ReactNode {
|
renderLink(
|
||||||
const {renderLink, isActive, renderSubLinks, classnames: cx, ...others} = this.props;
|
link: LinkItemProps,
|
||||||
|
key: any,
|
||||||
|
props: Partial<AsideNavProps> = {},
|
||||||
|
depth = 1
|
||||||
|
): React.ReactNode {
|
||||||
|
const {
|
||||||
|
renderLink,
|
||||||
|
isActive,
|
||||||
|
renderSubLinks,
|
||||||
|
classnames: cx,
|
||||||
|
...others
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
const dom = (renderLink as Function)({
|
const dom = (renderLink as Function)({
|
||||||
link,
|
link,
|
||||||
|
|
@ -195,7 +226,10 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
|
|
||||||
navigation.label &&
|
navigation.label &&
|
||||||
links.push(
|
links.push(
|
||||||
<li key={`${index}-label`} className={cx(`AsideNav-label`, navigation.className)}>
|
<li
|
||||||
|
key={`${index}-label`}
|
||||||
|
className={cx(`AsideNav-label`, navigation.className)}
|
||||||
|
>
|
||||||
<span>{navigation.label}</span>
|
<span>{navigation.label}</span>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
|
@ -207,7 +241,9 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||||
|
|
||||||
if (navigation.affix) {
|
if (navigation.affix) {
|
||||||
const affix: JSX.Element =
|
const affix: JSX.Element =
|
||||||
typeof navigation.affix === 'function' ? (navigation.affix as any)(this.props) : navigation.affix;
|
typeof navigation.affix === 'function'
|
||||||
|
? (navigation.affix as any)(this.props)
|
||||||
|
: navigation.affix;
|
||||||
links.push(
|
links.push(
|
||||||
React.cloneElement(affix, {
|
React.cloneElement(affix, {
|
||||||
...affix.props,
|
...affix.props,
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,10 @@ import {pickEventsProps} from '../utils/helper';
|
||||||
import {ClassNamesFn, themeable} from '../theme';
|
import {ClassNamesFn, themeable} from '../theme';
|
||||||
|
|
||||||
interface ButtonProps
|
interface ButtonProps
|
||||||
extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
extends React.DetailedHTMLProps<
|
||||||
|
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
HTMLButtonElement
|
||||||
|
> {
|
||||||
id?: string;
|
id?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
href?: string;
|
href?: string;
|
||||||
|
|
@ -34,7 +37,12 @@ interface ButtonProps
|
||||||
export class Button extends React.Component<ButtonProps> {
|
export class Button extends React.Component<ButtonProps> {
|
||||||
static defaultProps: Pick<
|
static defaultProps: Pick<
|
||||||
ButtonProps,
|
ButtonProps,
|
||||||
'componentClass' | 'level' | 'type' | 'placement' | 'tooltipTrigger' | 'tooltipRootClose'
|
| 'componentClass'
|
||||||
|
| 'level'
|
||||||
|
| 'type'
|
||||||
|
| 'placement'
|
||||||
|
| 'tooltipTrigger'
|
||||||
|
| 'tooltipRootClose'
|
||||||
> = {
|
> = {
|
||||||
componentClass: 'button',
|
componentClass: 'button',
|
||||||
level: 'default',
|
level: 'default',
|
||||||
|
|
@ -112,7 +120,9 @@ export class Button extends React.Component<ButtonProps> {
|
||||||
rootClose={tooltipRootClose}
|
rootClose={tooltipRootClose}
|
||||||
>
|
>
|
||||||
{disabled && disabledTip ? (
|
{disabled && disabledTip ? (
|
||||||
<div className={cx('Button--disabled-wrap')}>{this.renderButton()}</div>
|
<div className={cx('Button--disabled-wrap')}>
|
||||||
|
{this.renderButton()}
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
this.renderButton()
|
this.renderButton()
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,9 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
labelClassName
|
labelClassName
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
className =
|
||||||
|
(className ? className : '') +
|
||||||
|
(size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
|
|
@ -108,7 +110,9 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
/>
|
/>
|
||||||
<i />
|
<i />
|
||||||
<span className={cx(labelClassName)}>{children || label}</span>
|
<span className={cx(labelClassName)}>{children || label}</span>
|
||||||
{description ? (<div className={cx("Checkbox-desc")}>{filter(description, data)}</div>) : null}
|
{description ? (
|
||||||
|
<div className={cx('Checkbox-desc')}>{filter(description, data)}</div>
|
||||||
|
) : null}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,10 @@ export interface OptionProps {
|
||||||
|
|
||||||
export type OptionValue = string | number | null | undefined | Option;
|
export type OptionValue = string | number | null | undefined | Option;
|
||||||
|
|
||||||
export function value2array(value: OptionValue | Array<OptionValue>, props: Partial<OptionProps>): Array<Option> {
|
export function value2array(
|
||||||
|
value: OptionValue | Array<OptionValue>,
|
||||||
|
props: Partial<OptionProps>
|
||||||
|
): Array<Option> {
|
||||||
if (props.multi || props.multiple) {
|
if (props.multi || props.multiple) {
|
||||||
if (typeof value === 'string') {
|
if (typeof value === 'string') {
|
||||||
value = value.split(props.delimiter || ',');
|
value = value.split(props.delimiter || ',');
|
||||||
|
|
@ -55,7 +58,9 @@ export function value2array(value: OptionValue | Array<OptionValue>, props: Part
|
||||||
return (value as Array<OptionValue>)
|
return (value as Array<OptionValue>)
|
||||||
.map((value: OptionValue) =>
|
.map((value: OptionValue) =>
|
||||||
expandValue(
|
expandValue(
|
||||||
!props.joinValues && value && value.hasOwnProperty(props.valueField || 'value')
|
!props.joinValues &&
|
||||||
|
value &&
|
||||||
|
value.hasOwnProperty(props.valueField || 'value')
|
||||||
? (value as any)[props.valueField || 'value']
|
? (value as any)[props.valueField || 'value']
|
||||||
: value,
|
: value,
|
||||||
props
|
props
|
||||||
|
|
@ -68,10 +73,18 @@ export function value2array(value: OptionValue | Array<OptionValue>, props: Part
|
||||||
return expandedValue ? [expandedValue] : [];
|
return expandedValue ? [expandedValue] : [];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function expandValue(value: OptionValue, props: Partial<OptionProps>): Option | null {
|
export function expandValue(
|
||||||
|
value: OptionValue,
|
||||||
|
props: Partial<OptionProps>
|
||||||
|
): Option | null {
|
||||||
const valueType = typeof value;
|
const valueType = typeof value;
|
||||||
|
|
||||||
if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean' && valueType !== 'object') {
|
if (
|
||||||
|
valueType !== 'string' &&
|
||||||
|
valueType !== 'number' &&
|
||||||
|
valueType !== 'boolean' &&
|
||||||
|
valueType !== 'object'
|
||||||
|
) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -81,11 +94,19 @@ export function expandValue(value: OptionValue, props: Partial<OptionProps>): Op
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (valueType === 'object' && value && value.hasOwnProperty(props.valueField || 'value')) {
|
if (
|
||||||
|
valueType === 'object' &&
|
||||||
|
value &&
|
||||||
|
value.hasOwnProperty(props.valueField || 'value')
|
||||||
|
) {
|
||||||
value = (value as Option)[valueField || 'value'] || '';
|
value = (value as Option)[valueField || 'value'] || '';
|
||||||
}
|
}
|
||||||
|
|
||||||
return find(flattenTree(options), item => isObject(value) ? item[valueField || 'value'] === value : String(item[valueField || 'value']) === String(value)) as Option;
|
return find(flattenTree(options), item =>
|
||||||
|
isObject(value)
|
||||||
|
? item[valueField || 'value'] === value
|
||||||
|
: String(item[valueField || 'value']) === String(value)
|
||||||
|
) as Option;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -114,7 +135,6 @@ interface CheckboxesProps extends OptionProps {
|
||||||
labelClassName?: string;
|
labelClassName?: string;
|
||||||
classPrefix: string;
|
classPrefix: string;
|
||||||
classnames: ClassNamesFn;
|
classnames: ClassNamesFn;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
|
|
@ -127,7 +147,15 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
};
|
};
|
||||||
|
|
||||||
toggleOption(option: Option) {
|
toggleOption(option: Option) {
|
||||||
const {value, onChange, joinValues, extractValue, delimiter, valueField, options} = this.props;
|
const {
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
joinValues,
|
||||||
|
extractValue,
|
||||||
|
delimiter,
|
||||||
|
valueField,
|
||||||
|
options
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
let valueArray = value2array(value, {
|
let valueArray = value2array(value, {
|
||||||
multiple: true,
|
multiple: true,
|
||||||
|
|
@ -157,7 +185,9 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
let newValue: string | Array<Option> = valueArray;
|
let newValue: string | Array<Option> = valueArray;
|
||||||
|
|
||||||
if (joinValues) {
|
if (joinValues) {
|
||||||
newValue = newValue.map(item => item[valueField || 'value']).join(delimiter);
|
newValue = newValue
|
||||||
|
.map(item => item[valueField || 'value'])
|
||||||
|
.join(delimiter);
|
||||||
} else if (extractValue) {
|
} else if (extractValue) {
|
||||||
newValue = newValue.map(item => item[valueField || 'value']);
|
newValue = newValue.map(item => item[valueField || 'value']);
|
||||||
}
|
}
|
||||||
|
|
@ -218,7 +248,11 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div className={className}>{body && body.length ? body : placeholder}</div>;
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{body && body.length ? body : placeholder}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import css = require('dom-helpers/style');
|
import css = require('dom-helpers/style');
|
||||||
import {ClassNamesFn, themeable} from '../theme';
|
import {ClassNamesFn, themeable} from '../theme';
|
||||||
import Transition, {EXITED, ENTERING, EXITING} from 'react-transition-group/Transition';
|
import Transition, {
|
||||||
|
EXITED,
|
||||||
|
ENTERING,
|
||||||
|
EXITING
|
||||||
|
} from 'react-transition-group/Transition';
|
||||||
import {autobind} from '../utils/helper';
|
import {autobind} from '../utils/helper';
|
||||||
|
|
||||||
const collapseStyles: {
|
const collapseStyles: {
|
||||||
|
|
@ -28,7 +32,10 @@ export interface CollapseProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Collapse extends React.Component<CollapseProps, any> {
|
export class Collapse extends React.Component<CollapseProps, any> {
|
||||||
static defaultProps: Pick<CollapseProps, 'show' | 'mountOnEnter' | 'unmountOnExit'> = {
|
static defaultProps: Pick<
|
||||||
|
CollapseProps,
|
||||||
|
'show' | 'mountOnEnter' | 'unmountOnExit'
|
||||||
|
> = {
|
||||||
show: false,
|
show: false,
|
||||||
mountOnEnter: false,
|
mountOnEnter: false,
|
||||||
unmountOnExit: false
|
unmountOnExit: false
|
||||||
|
|
@ -55,7 +62,10 @@ export class Collapse extends React.Component<CollapseProps, any> {
|
||||||
@autobind
|
@autobind
|
||||||
handleExit(elem: HTMLElement) {
|
handleExit(elem: HTMLElement) {
|
||||||
let offsetHeight = elem['offsetHeight'];
|
let offsetHeight = elem['offsetHeight'];
|
||||||
const height = offsetHeight + parseInt(css(elem, 'marginTop'), 10) + parseInt(css(elem, 'marginBottom'), 10);
|
const height =
|
||||||
|
offsetHeight +
|
||||||
|
parseInt(css(elem, 'marginTop'), 10) +
|
||||||
|
parseInt(css(elem, 'marginBottom'), 10);
|
||||||
elem.style['height'] = `${height}px`;
|
elem.style['height'] = `${height}px`;
|
||||||
|
|
||||||
// trigger browser reflow
|
// trigger browser reflow
|
||||||
|
|
@ -68,7 +78,13 @@ export class Collapse extends React.Component<CollapseProps, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {show, children, classnames: cx, mountOnEnter, unmountOnExit} = this.props;
|
const {
|
||||||
|
show,
|
||||||
|
children,
|
||||||
|
classnames: cx,
|
||||||
|
mountOnEnter,
|
||||||
|
unmountOnExit
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Transition
|
<Transition
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,10 @@ export interface ColorControlState {
|
||||||
inputValue: string;
|
inputValue: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ColorControl extends React.PureComponent<ColorProps, ColorControlState> {
|
export class ColorControl extends React.PureComponent<
|
||||||
|
ColorProps,
|
||||||
|
ColorControlState
|
||||||
|
> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
format: 'hex',
|
format: 'hex',
|
||||||
clearable: true,
|
clearable: true,
|
||||||
|
|
@ -153,12 +156,16 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (format === 'rgba') {
|
if (format === 'rgba') {
|
||||||
onChange(`rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`);
|
onChange(
|
||||||
|
`rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`
|
||||||
|
);
|
||||||
} else if (format === 'rgb') {
|
} else if (format === 'rgb') {
|
||||||
onChange(`rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`);
|
onChange(`rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`);
|
||||||
} else if (format === 'hsl') {
|
} else if (format === 'hsl') {
|
||||||
onChange(
|
onChange(
|
||||||
`hsl(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%)`
|
`hsl(${Math.round(color.hsl.h)}, ${Math.round(
|
||||||
|
color.hsl.s * 100
|
||||||
|
)}%, ${Math.round(color.hsl.l * 100)}%)`
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
onChange(color.hex);
|
onChange(color.hex);
|
||||||
|
|
@ -227,14 +234,21 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
|
||||||
|
|
||||||
{isOpened ? (
|
{isOpened ? (
|
||||||
<Overlay
|
<Overlay
|
||||||
placement={placement || 'left-bottom-left-top right-bottom-right-top'}
|
placement={
|
||||||
|
placement || 'left-bottom-left-top right-bottom-right-top'
|
||||||
|
}
|
||||||
target={() => findDOMNode(this)}
|
target={() => findDOMNode(this)}
|
||||||
onHide={this.close}
|
onHide={this.close}
|
||||||
container={popOverContainer || (() => findDOMNode(this))}
|
container={popOverContainer || (() => findDOMNode(this))}
|
||||||
rootClose={false}
|
rootClose={false}
|
||||||
show
|
show
|
||||||
>
|
>
|
||||||
<PopOver classPrefix={ns} className={cx('ColorPicker-popover')} onHide={this.close} overlay>
|
<PopOver
|
||||||
|
classPrefix={ns}
|
||||||
|
className={cx('ColorPicker-popover')}
|
||||||
|
onHide={this.close}
|
||||||
|
overlay
|
||||||
|
>
|
||||||
<SketchPicker
|
<SketchPicker
|
||||||
disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
|
disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
|
||||||
color={value}
|
color={value}
|
||||||
|
|
|
||||||
|
|
@ -43,9 +43,15 @@ class BaseDatePicker extends ReactDatePicker {
|
||||||
(this as any).getComponentProps = function() {
|
(this as any).getComponentProps = function() {
|
||||||
const props = origin.apply(this);
|
const props = origin.apply(this);
|
||||||
props.setDateTimeState = setState;
|
props.setDateTimeState = setState;
|
||||||
['onChange', 'onClose', 'requiredConfirm', 'classPrefix', 'prevIcon', 'nextIcon', 'isEndDate'].forEach(
|
[
|
||||||
key => (props[key] = (this.props as any)[key])
|
'onChange',
|
||||||
);
|
'onClose',
|
||||||
|
'requiredConfirm',
|
||||||
|
'classPrefix',
|
||||||
|
'prevIcon',
|
||||||
|
'nextIcon',
|
||||||
|
'isEndDate'
|
||||||
|
].forEach(key => (props[key] = (this.props as any)[key]));
|
||||||
|
|
||||||
return props;
|
return props;
|
||||||
};
|
};
|
||||||
|
|
@ -76,7 +82,13 @@ class BaseDatePicker extends ReactDatePicker {
|
||||||
|
|
||||||
if (this.props.renderInput) {
|
if (this.props.renderInput) {
|
||||||
children = [
|
children = [
|
||||||
<div key="i">{this.props.renderInput(finalInputProps, this.openCalendar, this.closeCalendar)}</div>
|
<div key="i">
|
||||||
|
{this.props.renderInput(
|
||||||
|
finalInputProps,
|
||||||
|
this.openCalendar,
|
||||||
|
this.closeCalendar
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
];
|
];
|
||||||
} else {
|
} else {
|
||||||
children = [<input key="i" {...finalInputProps} />];
|
children = [<input key="i" {...finalInputProps} />];
|
||||||
|
|
@ -117,9 +129,20 @@ interface CustomDaysViewProps {
|
||||||
onChange: (value: moment.Moment) => void;
|
onChange: (value: moment.Moment) => void;
|
||||||
setDateTimeState: (state: any) => void;
|
setDateTimeState: (state: any) => void;
|
||||||
setTime: (type: string, amount: number) => void;
|
setTime: (type: string, amount: number) => void;
|
||||||
subtractTime: (amount: number, type: string, toSelected?: moment.Moment) => () => void;
|
subtractTime: (
|
||||||
addTime: (amount: number, type: string, toSelected?: moment.Moment) => () => void;
|
amount: number,
|
||||||
isValidDate?: (currentDate: moment.Moment, selected?: moment.Moment) => boolean;
|
type: string,
|
||||||
|
toSelected?: moment.Moment
|
||||||
|
) => () => void;
|
||||||
|
addTime: (
|
||||||
|
amount: number,
|
||||||
|
type: string,
|
||||||
|
toSelected?: moment.Moment
|
||||||
|
) => () => void;
|
||||||
|
isValidDate?: (
|
||||||
|
currentDate: moment.Moment,
|
||||||
|
selected?: moment.Moment
|
||||||
|
) => boolean;
|
||||||
showView: (view: string) => () => void;
|
showView: (view: string) => () => void;
|
||||||
updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
|
updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
|
||||||
handleClickOutside: () => void;
|
handleClickOutside: () => void;
|
||||||
|
|
@ -223,11 +246,16 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
const viewDate = this.props.viewDate;
|
const viewDate = this.props.viewDate;
|
||||||
const newDate = viewDate.clone().year(option.value);
|
const newDate = viewDate.clone().year(option.value);
|
||||||
this.props.setDateTimeState({
|
this.props.setDateTimeState({
|
||||||
viewDate: newDate[newDate.isBefore(viewDate) ? 'endOf' : 'startOf']('year')
|
viewDate: newDate[newDate.isBefore(viewDate) ? 'endOf' : 'startOf'](
|
||||||
|
'year'
|
||||||
|
)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
setTime(type: 'hours' | 'minutes' | 'seconds' | 'milliseconds', value: number) {
|
setTime(
|
||||||
|
type: 'hours' | 'minutes' | 'seconds' | 'milliseconds',
|
||||||
|
value: number
|
||||||
|
) {
|
||||||
const date = (this.props.selectedDate || this.props.viewDate).clone();
|
const date = (this.props.selectedDate || this.props.viewDate).clone();
|
||||||
date[type](value);
|
date[type](value);
|
||||||
|
|
||||||
|
|
@ -278,14 +306,19 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
month: irrelevantMonth,
|
month: irrelevantMonth,
|
||||||
date: irrelevantDate
|
date: irrelevantDate
|
||||||
});
|
});
|
||||||
const noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
|
const noOfDaysInYear = parseInt(
|
||||||
|
currentYear.endOf('year').format('DDD'),
|
||||||
|
10
|
||||||
|
);
|
||||||
const daysInYear = Array.from(
|
const daysInYear = Array.from(
|
||||||
{
|
{
|
||||||
length: noOfDaysInYear
|
length: noOfDaysInYear
|
||||||
},
|
},
|
||||||
(e, i) => i + 1
|
(e, i) => i + 1
|
||||||
);
|
);
|
||||||
const validDay = daysInYear.find(d => isValid(currentYear.clone().dayOfYear(d)));
|
const validDay = daysInYear.find(d =>
|
||||||
|
isValid(currentYear.clone().dayOfYear(d))
|
||||||
|
);
|
||||||
|
|
||||||
if (!validDay) {
|
if (!validDay) {
|
||||||
break;
|
break;
|
||||||
|
|
@ -305,14 +338,19 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
month: irrelevantMonth,
|
month: irrelevantMonth,
|
||||||
date: irrelevantDate
|
date: irrelevantDate
|
||||||
});
|
});
|
||||||
const noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
|
const noOfDaysInYear = parseInt(
|
||||||
|
currentYear.endOf('year').format('DDD'),
|
||||||
|
10
|
||||||
|
);
|
||||||
const daysInYear = Array.from(
|
const daysInYear = Array.from(
|
||||||
{
|
{
|
||||||
length: noOfDaysInYear
|
length: noOfDaysInYear
|
||||||
},
|
},
|
||||||
(e, i) => i + 1
|
(e, i) => i + 1
|
||||||
);
|
);
|
||||||
const validDay = daysInYear.find(d => isValid(currentYear.clone().dayOfYear(d)));
|
const validDay = daysInYear.find(d =>
|
||||||
|
isValid(currentYear.clone().dayOfYear(d))
|
||||||
|
);
|
||||||
|
|
||||||
if (!validDay) {
|
if (!validDay) {
|
||||||
break;
|
break;
|
||||||
|
|
@ -351,12 +389,17 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
date: 1
|
date: 1
|
||||||
});
|
});
|
||||||
|
|
||||||
const noOfDaysInMonth = parseInt(currentMonth.endOf('month').format('D'), 10);
|
const noOfDaysInMonth = parseInt(
|
||||||
|
currentMonth.endOf('month').format('D'),
|
||||||
|
10
|
||||||
|
);
|
||||||
const daysInMonth = Array.from({length: noOfDaysInMonth}, function(e, i) {
|
const daysInMonth = Array.from({length: noOfDaysInMonth}, function(e, i) {
|
||||||
return i + 1;
|
return i + 1;
|
||||||
});
|
});
|
||||||
|
|
||||||
const validDay = daysInMonth.find(d => isValid(currentMonth.clone().set('date', d)));
|
const validDay = daysInMonth.find(d =>
|
||||||
|
isValid(currentMonth.clone().set('date', d))
|
||||||
|
);
|
||||||
if (validDay) {
|
if (validDay) {
|
||||||
days.push(i);
|
days.push(i);
|
||||||
}
|
}
|
||||||
|
|
@ -389,7 +432,11 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
const inputs: Array<React.ReactNode> = [];
|
const inputs: Array<React.ReactNode> = [];
|
||||||
|
|
||||||
timeFormat.split(':').forEach((format, i) => {
|
timeFormat.split(':').forEach((format, i) => {
|
||||||
const type = /h/i.test(format) ? 'hours' : /m/i.test(format) ? 'minutes' : 'seconds';
|
const type = /h/i.test(format)
|
||||||
|
? 'hours'
|
||||||
|
: /m/i.test(format)
|
||||||
|
? 'minutes'
|
||||||
|
: 'seconds';
|
||||||
const min = 0;
|
const min = 0;
|
||||||
const max = type === 'hours' ? 23 : 59;
|
const max = type === 'hours' ? 23 : 59;
|
||||||
|
|
||||||
|
|
@ -403,7 +450,13 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
onChange={e =>
|
onChange={e =>
|
||||||
this.setTime(
|
this.setTime(
|
||||||
type,
|
type,
|
||||||
Math.max(min, Math.min(parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) || 0, max))
|
Math.max(
|
||||||
|
min,
|
||||||
|
Math.min(
|
||||||
|
parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) || 0,
|
||||||
|
max
|
||||||
|
)
|
||||||
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
@ -464,17 +517,20 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
currentDate = prevMonth.clone();
|
currentDate = prevMonth.clone();
|
||||||
|
|
||||||
if (
|
if (
|
||||||
(prevMonth.year() === currentYear && prevMonth.month() < currentMonth) ||
|
(prevMonth.year() === currentYear &&
|
||||||
|
prevMonth.month() < currentMonth) ||
|
||||||
prevMonth.year() < currentYear
|
prevMonth.year() < currentYear
|
||||||
)
|
)
|
||||||
classes += ' rdtOld';
|
classes += ' rdtOld';
|
||||||
else if (
|
else if (
|
||||||
(prevMonth.year() === currentYear && prevMonth.month() > currentMonth) ||
|
(prevMonth.year() === currentYear &&
|
||||||
|
prevMonth.month() > currentMonth) ||
|
||||||
prevMonth.year() > currentYear
|
prevMonth.year() > currentYear
|
||||||
)
|
)
|
||||||
classes += ' rdtNew';
|
classes += ' rdtNew';
|
||||||
|
|
||||||
if (selected && prevMonth.isSame(selected, 'day')) classes += ' rdtActive';
|
if (selected && prevMonth.isSame(selected, 'day'))
|
||||||
|
classes += ' rdtActive';
|
||||||
|
|
||||||
if (prevMonth.isSame(moment(), 'day')) classes += ' rdtToday';
|
if (prevMonth.isSame(moment(), 'day')) classes += ' rdtToday';
|
||||||
|
|
||||||
|
|
@ -512,7 +568,10 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||||
<tr>
|
<tr>
|
||||||
<th colSpan={7}>
|
<th colSpan={7}>
|
||||||
<div className="rdtHeader">
|
<div className="rdtHeader">
|
||||||
<a className="rdtBtn" onClick={this.props.subtractTime(1, 'months')}>
|
<a
|
||||||
|
className="rdtBtn"
|
||||||
|
onClick={this.props.subtractTime(1, 'months')}
|
||||||
|
>
|
||||||
<i className="rdtBtnPrev" />
|
<i className="rdtBtnPrev" />
|
||||||
</a>
|
</a>
|
||||||
<div className="rdtSelect">{this.renderYearsSelect()}</div>
|
<div className="rdtSelect">{this.renderYearsSelect()}</div>
|
||||||
|
|
@ -748,7 +807,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
isOpened: false,
|
isOpened: false,
|
||||||
isFocused: false,
|
isFocused: false,
|
||||||
value: this.props.value
|
value: this.props.value
|
||||||
? (this.props.utc ? moment.utc : moment)(this.props.value, this.props.format)
|
? (this.props.utc ? moment.utc : moment)(
|
||||||
|
this.props.value,
|
||||||
|
this.props.format
|
||||||
|
)
|
||||||
: undefined
|
: undefined
|
||||||
};
|
};
|
||||||
constructor(props: DateProps) {
|
constructor(props: DateProps) {
|
||||||
|
|
@ -775,7 +837,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
if (this.props.value !== nextProps.value) {
|
if (this.props.value !== nextProps.value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: nextProps.value
|
value: nextProps.value
|
||||||
? (nextProps.utc ? moment.utc : moment)(nextProps.value, nextProps.format)
|
? (nextProps.utc ? moment.utc : moment)(
|
||||||
|
nextProps.value,
|
||||||
|
nextProps.format
|
||||||
|
)
|
||||||
: undefined
|
: undefined
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -840,7 +905,14 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange(value: moment.Moment) {
|
handleChange(value: moment.Moment) {
|
||||||
const {onChange, format, minTime, maxTime, dateFormat, timeFormat} = this.props;
|
const {
|
||||||
|
onChange,
|
||||||
|
format,
|
||||||
|
minTime,
|
||||||
|
maxTime,
|
||||||
|
dateFormat,
|
||||||
|
timeFormat
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
if (!moment.isMoment(value)) {
|
if (!moment.isMoment(value)) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -946,7 +1018,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
>
|
>
|
||||||
{date ? (
|
{date ? (
|
||||||
<span className={`${ns}DatePicker-value`}>{date.format(inputFormat)}</span>
|
<span className={`${ns}DatePicker-value`}>
|
||||||
|
{date.format(inputFormat)}
|
||||||
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span className={`${ns}DatePicker-placeholder`}>{placeholder}</span>
|
<span className={`${ns}DatePicker-placeholder`}>{placeholder}</span>
|
||||||
)}
|
)}
|
||||||
|
|
@ -981,8 +1055,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
: Array.isArray(shortcuts)
|
: Array.isArray(shortcuts)
|
||||||
? shortcuts
|
? shortcuts
|
||||||
: []
|
: []
|
||||||
)
|
).map(key => {
|
||||||
.map(key => {
|
|
||||||
const shortcut = this.getAvailableShortcuts(key);
|
const shortcut = this.getAvailableShortcuts(key);
|
||||||
|
|
||||||
if (!shortcut) {
|
if (!shortcut) {
|
||||||
|
|
|
||||||
|
|
@ -154,7 +154,10 @@ const availableRanges: {[propName: string]: any} = {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export class DateRangePicker extends React.Component<DateRangePickerProps, DateRangePickerState> {
|
export class DateRangePicker extends React.Component<
|
||||||
|
DateRangePickerProps,
|
||||||
|
DateRangePickerState
|
||||||
|
> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
placeholder: '请选择日期范围',
|
placeholder: '请选择日期范围',
|
||||||
format: 'X',
|
format: 'X',
|
||||||
|
|
@ -171,8 +174,16 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
popover: any;
|
popover: any;
|
||||||
input?: HTMLInputElement;
|
input?: HTMLInputElement;
|
||||||
|
|
||||||
static formatValue(newValue: any, format: string, joinValues: boolean, delimiter: string) {
|
static formatValue(
|
||||||
newValue = [newValue.startDate.format(format), newValue.endDate.format(format)];
|
newValue: any,
|
||||||
|
format: string,
|
||||||
|
joinValues: boolean,
|
||||||
|
delimiter: string
|
||||||
|
) {
|
||||||
|
newValue = [
|
||||||
|
newValue.startDate.format(format),
|
||||||
|
newValue.endDate.format(format)
|
||||||
|
];
|
||||||
|
|
||||||
if (joinValues) {
|
if (joinValues) {
|
||||||
newValue = newValue.join(delimiter);
|
newValue = newValue.join(delimiter);
|
||||||
|
|
@ -181,7 +192,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
return newValue;
|
return newValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
static unFormatValue(value: any, format: string, joinValues: boolean, delimiter: string) {
|
static unFormatValue(
|
||||||
|
value: any,
|
||||||
|
format: string,
|
||||||
|
joinValues: boolean,
|
||||||
|
delimiter: string
|
||||||
|
) {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return {
|
return {
|
||||||
startDate: undefined,
|
startDate: undefined,
|
||||||
|
|
@ -329,7 +345,10 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEndChange(newValue: any) {
|
handleEndChange(newValue: any) {
|
||||||
newValue = !this.state.endDate && !this.props.timeFormat ? newValue.endOf('day') : newValue;
|
newValue =
|
||||||
|
!this.state.endDate && !this.props.timeFormat
|
||||||
|
? newValue.endOf('day')
|
||||||
|
: newValue;
|
||||||
this.setState({
|
this.setState({
|
||||||
endDate: newValue.clone()
|
endDate: newValue.clone()
|
||||||
});
|
});
|
||||||
|
|
@ -359,7 +378,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
|
|
||||||
let {minDate, maxDate} = this.props;
|
let {minDate, maxDate} = this.props;
|
||||||
|
|
||||||
maxDate = maxDate && endDate ? (maxDate.isBefore(endDate) ? maxDate : endDate) : maxDate || endDate;
|
maxDate =
|
||||||
|
maxDate && endDate
|
||||||
|
? maxDate.isBefore(endDate)
|
||||||
|
? maxDate
|
||||||
|
: endDate
|
||||||
|
: maxDate || endDate;
|
||||||
|
|
||||||
if (minDate && currentDate.isBefore(minDate, 'day')) {
|
if (minDate && currentDate.isBefore(minDate, 'day')) {
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -375,7 +399,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
|
|
||||||
let {minDate, maxDate} = this.props;
|
let {minDate, maxDate} = this.props;
|
||||||
|
|
||||||
minDate = minDate && startDate ? (minDate.isAfter(startDate) ? minDate : startDate) : minDate || startDate;
|
minDate =
|
||||||
|
minDate && startDate
|
||||||
|
? minDate.isAfter(startDate)
|
||||||
|
? minDate
|
||||||
|
: startDate
|
||||||
|
: minDate || startDate;
|
||||||
|
|
||||||
if (minDate && currentDate.isBefore(minDate, 'day')) {
|
if (minDate && currentDate.isBefore(minDate, 'day')) {
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -406,9 +435,18 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
|
|
||||||
const {isOpened, isFocused, startDate, endDate} = this.state;
|
const {isOpened, isFocused, startDate, endDate} = this.state;
|
||||||
|
|
||||||
const selectedDate = DateRangePicker.unFormatValue(value, format, joinValues, delimiter);
|
const selectedDate = DateRangePicker.unFormatValue(
|
||||||
const startViewValue = selectedDate.startDate ? selectedDate.startDate.format(inputFormat) : '';
|
value,
|
||||||
const endViewValue = selectedDate.endDate ? selectedDate.endDate.format(inputFormat) : '';
|
format,
|
||||||
|
joinValues,
|
||||||
|
delimiter
|
||||||
|
);
|
||||||
|
const startViewValue = selectedDate.startDate
|
||||||
|
? selectedDate.startDate.format(inputFormat)
|
||||||
|
: '';
|
||||||
|
const endViewValue = selectedDate.endDate
|
||||||
|
? selectedDate.endDate.format(inputFormat)
|
||||||
|
: '';
|
||||||
const arr = [];
|
const arr = [];
|
||||||
startViewValue && arr.push(startViewValue);
|
startViewValue && arr.push(startViewValue);
|
||||||
endViewValue && arr.push(endViewValue);
|
endViewValue && arr.push(endViewValue);
|
||||||
|
|
@ -431,9 +469,13 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
>
|
>
|
||||||
{arr.length ? (
|
{arr.length ? (
|
||||||
<span className={`${ns}DateRangePicker-value`}>{arr.join(' 至 ')}</span>
|
<span className={`${ns}DateRangePicker-value`}>
|
||||||
|
{arr.join(' 至 ')}
|
||||||
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span className={`${ns}DateRangePicker-placeholder`}>{placeholder}</span>
|
<span className={`${ns}DateRangePicker-placeholder`}>
|
||||||
|
{placeholder}
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{clearable && !disabled && value ? (
|
{clearable && !disabled && value ? (
|
||||||
|
|
@ -475,7 +517,9 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
.map(key => (
|
.map(key => (
|
||||||
<li
|
<li
|
||||||
className={`${ns}DateRangePicker-ranger`}
|
className={`${ns}DateRangePicker-ranger`}
|
||||||
onClick={() => this.selectRannge(availableRanges[key])}
|
onClick={() =>
|
||||||
|
this.selectRannge(availableRanges[key])
|
||||||
|
}
|
||||||
key={key}
|
key={key}
|
||||||
>
|
>
|
||||||
<a>{availableRanges[key].label}</a>
|
<a>{availableRanges[key].label}</a>
|
||||||
|
|
@ -518,7 +562,8 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
||||||
<div key="button" className={`${ns}DateRangePicker-actions`}>
|
<div key="button" className={`${ns}DateRangePicker-actions`}>
|
||||||
<a
|
<a
|
||||||
className={cx('rdtBtn rdtBtnConfirm', {
|
className={cx('rdtBtn rdtBtnConfirm', {
|
||||||
'is-disabled': !this.state.startDate || !this.state.endDate
|
'is-disabled':
|
||||||
|
!this.state.startDate || !this.state.endDate
|
||||||
})}
|
})}
|
||||||
onClick={this.confirm}
|
onClick={this.confirm}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,11 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
|
import Transition, {
|
||||||
|
ENTERED,
|
||||||
|
ENTERING,
|
||||||
|
EXITING
|
||||||
|
} from 'react-transition-group/Transition';
|
||||||
import {Portal} from 'react-overlays';
|
import {Portal} from 'react-overlays';
|
||||||
import {Icon} from './icons';
|
import {Icon} from './icons';
|
||||||
import cx from 'classnames';
|
import cx from 'classnames';
|
||||||
|
|
@ -43,7 +47,12 @@ const fadeStyles: {
|
||||||
export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
||||||
static defaultProps: Pick<
|
static defaultProps: Pick<
|
||||||
DrawerProps,
|
DrawerProps,
|
||||||
'container' | 'position' | 'size' | 'overlay' | 'disableOnClickOutside' | 'enableOnClickOutside'
|
| 'container'
|
||||||
|
| 'position'
|
||||||
|
| 'size'
|
||||||
|
| 'overlay'
|
||||||
|
| 'disableOnClickOutside'
|
||||||
|
| 'enableOnClickOutside'
|
||||||
> = {
|
> = {
|
||||||
container: document.body,
|
container: document.body,
|
||||||
position: 'left',
|
position: 'left',
|
||||||
|
|
@ -78,14 +87,17 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
||||||
document.activeElement && (document.activeElement as HTMLElement).blur();
|
document.activeElement && (document.activeElement as HTMLElement).blur();
|
||||||
onExited && onExited();
|
onExited && onExited();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.querySelector('.amis-dialog-widget') || document.body.classList.remove(`is-modalOpened`);
|
document.querySelector('.amis-dialog-widget') ||
|
||||||
|
document.body.classList.remove(`is-modalOpened`);
|
||||||
}, 200);
|
}, 200);
|
||||||
};
|
};
|
||||||
|
|
||||||
modalRef = (ref: any) => {
|
modalRef = (ref: any) => {
|
||||||
if (ref) {
|
if (ref) {
|
||||||
addModal(this);
|
addModal(this);
|
||||||
(ref as HTMLElement).classList.add(`${this.props.classPrefix}Modal--${current()}th`);
|
(ref as HTMLElement).classList.add(
|
||||||
|
`${this.props.classPrefix}Modal--${current()}th`
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
removeModal();
|
removeModal();
|
||||||
}
|
}
|
||||||
|
|
@ -147,9 +159,19 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
||||||
)}
|
)}
|
||||||
onClick={this.handleWidgetClick} // 其实不需要插件，直接写逻辑吧
|
onClick={this.handleWidgetClick} // 其实不需要插件，直接写逻辑吧
|
||||||
>
|
>
|
||||||
{overlay ? <div className={cx(`${ns}Drawer-overlay`, fadeStyles[status])} /> : null}
|
{overlay ? (
|
||||||
<div ref={this.contentRef} className={cx(`${ns}Drawer-content`, fadeStyles[status])}>
|
<div
|
||||||
<a onClick={disabled ? undefined : onHide} className={`${ns}Drawer-close`}>
|
className={cx(`${ns}Drawer-overlay`, fadeStyles[status])}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<div
|
||||||
|
ref={this.contentRef}
|
||||||
|
className={cx(`${ns}Drawer-content`, fadeStyles[status])}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
onClick={disabled ? undefined : onHide}
|
||||||
|
className={`${ns}Drawer-close`}
|
||||||
|
>
|
||||||
<Icon icon="close" className="icon" />
|
<Icon icon="close" className="icon" />
|
||||||
</a>
|
</a>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
||||||
|
|
@ -26,95 +26,192 @@ try {
|
||||||
// fis 编译的话，能正确赋值上，如果不是，那请通过外部参数传递。
|
// fis 编译的话，能正确赋值上，如果不是，那请通过外部参数传递。
|
||||||
defaultConfig.url = __uri('monaco-editor/min/vs/loader.js');
|
defaultConfig.url = __uri('monaco-editor/min/vs/loader.js');
|
||||||
defaultConfig.paths = {
|
defaultConfig.paths = {
|
||||||
vs: noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(/\/vs\/.*$/, ''),
|
vs: noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(
|
||||||
'vs/base/worker/workerMain': noJsExt(__uri('monaco-editor/min/vs/base/worker/workerMain.js')),
|
/\/vs\/.*$/,
|
||||||
|
''
|
||||||
|
),
|
||||||
|
'vs/base/worker/workerMain': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/base/worker/workerMain.js')
|
||||||
|
),
|
||||||
|
|
||||||
'vs/basic-languages/apex/apex': noJsExt(__uri('monaco-editor/min/vs/basic-languages/apex/apex')),
|
'vs/basic-languages/apex/apex': noJsExt(
|
||||||
'vs/basic-languages/azcli/azcli': noJsExt(__uri('monaco-editor/min/vs/basic-languages/azcli/azcli')),
|
__uri('monaco-editor/min/vs/basic-languages/apex/apex')
|
||||||
'vs/basic-languages/clojure/clojure': noJsExt(__uri('monaco-editor/min/vs/basic-languages/clojure/clojure')),
|
),
|
||||||
'vs/basic-languages/bat/bat': noJsExt(__uri('monaco-editor/min/vs/basic-languages/bat/bat')),
|
'vs/basic-languages/azcli/azcli': noJsExt(
|
||||||
'vs/basic-languages/coffee/coffee': noJsExt(__uri('monaco-editor/min/vs/basic-languages/coffee/coffee')),
|
__uri('monaco-editor/min/vs/basic-languages/azcli/azcli')
|
||||||
'vs/basic-languages/cpp/cpp': noJsExt(__uri('monaco-editor/min/vs/basic-languages/cpp/cpp')),
|
),
|
||||||
'vs/basic-languages/csharp/csharp': noJsExt(__uri('monaco-editor/min/vs/basic-languages/csharp/csharp')),
|
'vs/basic-languages/clojure/clojure': noJsExt(
|
||||||
'vs/basic-languages/css/css': noJsExt(__uri('monaco-editor/min/vs/basic-languages/css/css')),
|
__uri('monaco-editor/min/vs/basic-languages/clojure/clojure')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/bat/bat': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/bat/bat')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/coffee/coffee': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/coffee/coffee')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/cpp/cpp': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/cpp/cpp')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/csharp/csharp': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/csharp/csharp')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/css/css': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/css/css')
|
||||||
|
),
|
||||||
'vs/basic-languages/dockerfile/dockerfile': noJsExt(
|
'vs/basic-languages/dockerfile/dockerfile': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/dockerfile/dockerfile')
|
__uri('monaco-editor/min/vs/basic-languages/dockerfile/dockerfile')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/fsharp/fsharp': noJsExt(__uri('monaco-editor/min/vs/basic-languages/fsharp/fsharp')),
|
'vs/basic-languages/fsharp/fsharp': noJsExt(
|
||||||
'vs/basic-languages/go/go': noJsExt(__uri('monaco-editor/min/vs/basic-languages/go/go')),
|
__uri('monaco-editor/min/vs/basic-languages/fsharp/fsharp')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/go/go': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/go/go')
|
||||||
|
),
|
||||||
'vs/basic-languages/handlebars/handlebars': noJsExt(
|
'vs/basic-languages/handlebars/handlebars': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/handlebars/handlebars')
|
__uri('monaco-editor/min/vs/basic-languages/handlebars/handlebars')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/html/html': noJsExt(__uri('monaco-editor/min/vs/basic-languages/html/html')),
|
'vs/basic-languages/html/html': noJsExt(
|
||||||
'vs/basic-languages/ini/ini': noJsExt(__uri('monaco-editor/min/vs/basic-languages/ini/ini')),
|
__uri('monaco-editor/min/vs/basic-languages/html/html')
|
||||||
'vs/basic-languages/java/java': noJsExt(__uri('monaco-editor/min/vs/basic-languages/java/java')),
|
),
|
||||||
|
'vs/basic-languages/ini/ini': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/ini/ini')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/java/java': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/java/java')
|
||||||
|
),
|
||||||
'vs/basic-languages/javascript/javascript': noJsExt(
|
'vs/basic-languages/javascript/javascript': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/javascript/javascript')
|
__uri('monaco-editor/min/vs/basic-languages/javascript/javascript')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/less/less': noJsExt(__uri('monaco-editor/min/vs/basic-languages/less/less')),
|
'vs/basic-languages/less/less': noJsExt(
|
||||||
'vs/basic-languages/lua/lua': noJsExt(__uri('monaco-editor/min/vs/basic-languages/lua/lua')),
|
__uri('monaco-editor/min/vs/basic-languages/less/less')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/lua/lua': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/lua/lua')
|
||||||
|
),
|
||||||
'vs/basic-languages/markdown/markdown': noJsExt(
|
'vs/basic-languages/markdown/markdown': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/markdown/markdown')
|
__uri('monaco-editor/min/vs/basic-languages/markdown/markdown')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/msdax/msdax': noJsExt(__uri('monaco-editor/min/vs/basic-languages/msdax/msdax')),
|
'vs/basic-languages/msdax/msdax': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/msdax/msdax')
|
||||||
|
),
|
||||||
'vs/basic-languages/objective-c/objective-c': noJsExt(
|
'vs/basic-languages/objective-c/objective-c': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/objective-c/objective-c')
|
__uri('monaco-editor/min/vs/basic-languages/objective-c/objective-c')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/php/php': noJsExt(__uri('monaco-editor/min/vs/basic-languages/php/php')),
|
'vs/basic-languages/php/php': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/php/php')
|
||||||
|
),
|
||||||
'vs/basic-languages/postiats/postiats': noJsExt(
|
'vs/basic-languages/postiats/postiats': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/postiats/postiats')
|
__uri('monaco-editor/min/vs/basic-languages/postiats/postiats')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/powershell/powershell': noJsExt(
|
'vs/basic-languages/powershell/powershell': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/powershell/powershell')
|
__uri('monaco-editor/min/vs/basic-languages/powershell/powershell')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/pug/pug': noJsExt(__uri('monaco-editor/min/vs/basic-languages/pug/pug')),
|
'vs/basic-languages/pug/pug': noJsExt(
|
||||||
'vs/basic-languages/python/python': noJsExt(__uri('monaco-editor/min/vs/basic-languages/python/python')),
|
__uri('monaco-editor/min/vs/basic-languages/pug/pug')
|
||||||
'vs/basic-languages/r/r': noJsExt(__uri('monaco-editor/min/vs/basic-languages/r/r')),
|
),
|
||||||
'vs/basic-languages/razor/razor': noJsExt(__uri('monaco-editor/min/vs/basic-languages/razor/razor')),
|
'vs/basic-languages/python/python': noJsExt(
|
||||||
'vs/basic-languages/redis/redis': noJsExt(__uri('monaco-editor/min/vs/basic-languages/redis/redis')),
|
__uri('monaco-editor/min/vs/basic-languages/python/python')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/r/r': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/r/r')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/razor/razor': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/razor/razor')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/redis/redis': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/redis/redis')
|
||||||
|
),
|
||||||
'vs/basic-languages/redshift/redshift': noJsExt(
|
'vs/basic-languages/redshift/redshift': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/redshift/redshift')
|
__uri('monaco-editor/min/vs/basic-languages/redshift/redshift')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/ruby/ruby': noJsExt(__uri('monaco-editor/min/vs/basic-languages/ruby/ruby')),
|
'vs/basic-languages/ruby/ruby': noJsExt(
|
||||||
'vs/basic-languages/rust/rust': noJsExt(__uri('monaco-editor/min/vs/basic-languages/rust/rust')),
|
__uri('monaco-editor/min/vs/basic-languages/ruby/ruby')
|
||||||
'vs/basic-languages/sb/sb': noJsExt(__uri('monaco-editor/min/vs/basic-languages/sb/sb')),
|
),
|
||||||
'vs/basic-languages/scheme/scheme': noJsExt(__uri('monaco-editor/min/vs/basic-languages/scheme/scheme')),
|
'vs/basic-languages/rust/rust': noJsExt(
|
||||||
'vs/basic-languages/scss/scss': noJsExt(__uri('monaco-editor/min/vs/basic-languages/scss/scss')),
|
__uri('monaco-editor/min/vs/basic-languages/rust/rust')
|
||||||
'vs/basic-languages/shell/shell': noJsExt(__uri('monaco-editor/min/vs/basic-languages/shell/shell')),
|
),
|
||||||
|
'vs/basic-languages/sb/sb': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/sb/sb')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/scheme/scheme': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/scheme/scheme')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/scss/scss': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/scss/scss')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/shell/shell': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/shell/shell')
|
||||||
|
),
|
||||||
'vs/basic-languages/solidity/solidity': noJsExt(
|
'vs/basic-languages/solidity/solidity': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/solidity/solidity')
|
__uri('monaco-editor/min/vs/basic-languages/solidity/solidity')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/sql/sql': noJsExt(__uri('monaco-editor/min/vs/basic-languages/sql/sql')),
|
'vs/basic-languages/sql/sql': noJsExt(
|
||||||
'vs/basic-languages/st/st': noJsExt(__uri('monaco-editor/min/vs/basic-languages/st/st')),
|
__uri('monaco-editor/min/vs/basic-languages/sql/sql')
|
||||||
'vs/basic-languages/swift/swift': noJsExt(__uri('monaco-editor/min/vs/basic-languages/swift/swift')),
|
),
|
||||||
|
'vs/basic-languages/st/st': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/st/st')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/swift/swift': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/swift/swift')
|
||||||
|
),
|
||||||
'vs/basic-languages/typescript/typescript': noJsExt(
|
'vs/basic-languages/typescript/typescript': noJsExt(
|
||||||
__uri('monaco-editor/min/vs/basic-languages/typescript/typescript')
|
__uri('monaco-editor/min/vs/basic-languages/typescript/typescript')
|
||||||
),
|
),
|
||||||
'vs/basic-languages/vb/vb': noJsExt(__uri('monaco-editor/min/vs/basic-languages/vb/vb')),
|
'vs/basic-languages/vb/vb': noJsExt(
|
||||||
'vs/basic-languages/xml/xml': noJsExt(__uri('monaco-editor/min/vs/basic-languages/xml/xml')),
|
__uri('monaco-editor/min/vs/basic-languages/vb/vb')
|
||||||
'vs/basic-languages/yaml/yaml': noJsExt(__uri('monaco-editor/min/vs/basic-languages/yaml/yaml')),
|
),
|
||||||
|
'vs/basic-languages/xml/xml': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/xml/xml')
|
||||||
|
),
|
||||||
|
'vs/basic-languages/yaml/yaml': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/basic-languages/yaml/yaml')
|
||||||
|
),
|
||||||
|
|
||||||
'vs/editor/editor.main': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')),
|
'vs/editor/editor.main': noJsExt(
|
||||||
'vs/editor/editor.main.css': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.css')),
|
__uri('monaco-editor/min/vs/editor/editor.main.js')
|
||||||
'vs/editor/editor.main.nls': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.nls.js')),
|
),
|
||||||
'vs/editor/editor.main.nls.zh-cn': noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.nls.zh-cn.js')),
|
'vs/editor/editor.main.css': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/editor/editor.main.css')
|
||||||
|
),
|
||||||
|
'vs/editor/editor.main.nls': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/editor/editor.main.nls.js')
|
||||||
|
),
|
||||||
|
'vs/editor/editor.main.nls.zh-cn': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/editor/editor.main.nls.zh-cn.js')
|
||||||
|
),
|
||||||
|
|
||||||
// 'vs/editor/contrib/suggest/media/String_16x.svg': noJsExt(__uri('monaco-editor/min/vs/editor/contrib/suggest/media/String_16x.svg')),
|
// 'vs/editor/contrib/suggest/media/String_16x.svg': noJsExt(__uri('monaco-editor/min/vs/editor/contrib/suggest/media/String_16x.svg')),
|
||||||
// 'vs/editor/contrib/suggest/media/String_inverse_16x.svg': noJsExt(__uri('monaco-editor/min/vs/editor/contrib/suggest/media/String_inverse_16x.svg')),
|
// 'vs/editor/contrib/suggest/media/String_inverse_16x.svg': noJsExt(__uri('monaco-editor/min/vs/editor/contrib/suggest/media/String_inverse_16x.svg')),
|
||||||
// 'vs/editor/standalone/browser/quickOpen/symbol-sprite.svg': noJsExt(__uri('monaco-editor/min/vs/editor/standalone/browser/quickOpen/symbol-sprite.svg')),
|
// 'vs/editor/standalone/browser/quickOpen/symbol-sprite.svg': noJsExt(__uri('monaco-editor/min/vs/editor/standalone/browser/quickOpen/symbol-sprite.svg')),
|
||||||
|
|
||||||
'vs/language/typescript/tsMode': noJsExt(__uri('monaco-editor/min/vs/language/typescript/tsMode.js')),
|
'vs/language/typescript/tsMode': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/language/typescript/tsMode.js')
|
||||||
|
),
|
||||||
// 'vs/language/typescript/lib/typescriptServices': noJsExt(__uri('monaco-editor/min/vs/language/typescript/lib/typescriptServices.js')),
|
// 'vs/language/typescript/lib/typescriptServices': noJsExt(__uri('monaco-editor/min/vs/language/typescript/lib/typescriptServices.js')),
|
||||||
'vs/language/typescript/tsWorker': noJsExt(__uri('monaco-editor/min/vs/language/typescript/tsWorker.js')),
|
'vs/language/typescript/tsWorker': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/language/typescript/tsWorker.js')
|
||||||
|
),
|
||||||
|
|
||||||
'vs/language/json/jsonMode': noJsExt(__uri('monaco-editor/min/vs/language/json/jsonMode.js')),
|
'vs/language/json/jsonMode': noJsExt(
|
||||||
'vs/language/json/jsonWorker': noJsExt(__uri('monaco-editor/min/vs/language/json/jsonWorker.js')),
|
__uri('monaco-editor/min/vs/language/json/jsonMode.js')
|
||||||
|
),
|
||||||
|
'vs/language/json/jsonWorker': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/language/json/jsonWorker.js')
|
||||||
|
),
|
||||||
|
|
||||||
'vs/language/html/htmlMode': noJsExt(__uri('monaco-editor/min/vs/language/html/htmlMode.js')),
|
'vs/language/html/htmlMode': noJsExt(
|
||||||
'vs/language/html/htmlWorker': noJsExt(__uri('monaco-editor/min/vs/language/html/htmlWorker.js')),
|
__uri('monaco-editor/min/vs/language/html/htmlMode.js')
|
||||||
|
),
|
||||||
|
'vs/language/html/htmlWorker': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/language/html/htmlWorker.js')
|
||||||
|
),
|
||||||
|
|
||||||
'vs/language/css/cssMode': noJsExt(__uri('monaco-editor/min/vs/language/css/cssMode.js')),
|
'vs/language/css/cssMode': noJsExt(
|
||||||
'vs/language/css/cssWorker': noJsExt(__uri('monaco-editor/min/vs/language/css/cssWorker.js'))
|
__uri('monaco-editor/min/vs/language/css/cssMode.js')
|
||||||
|
),
|
||||||
|
'vs/language/css/cssWorker': noJsExt(
|
||||||
|
__uri('monaco-editor/min/vs/language/css/cssWorker.js')
|
||||||
|
)
|
||||||
};
|
};
|
||||||
|
|
||||||
// cdn 支持
|
// cdn 支持
|
||||||
|
|
@ -126,7 +223,9 @@ try {
|
||||||
baseUrl: '${defaultConfig.paths.vs}',
|
baseUrl: '${defaultConfig.paths.vs}',
|
||||||
paths: ${JSON.stringify(defaultConfig.paths)}
|
paths: ${JSON.stringify(defaultConfig.paths)}
|
||||||
};
|
};
|
||||||
importScripts('${__uri('monaco-editor/min/vs/base/worker/workerMain.js')}');`)}`;
|
importScripts('${__uri(
|
||||||
|
'monaco-editor/min/vs/base/worker/workerMain.js'
|
||||||
|
)}');`)}`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|
@ -198,7 +297,10 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps: EditorProps) {
|
componentWillReceiveProps(nextProps: EditorProps) {
|
||||||
if (this.props.options.readOnly !== nextProps.options.readOnly && this.editor) {
|
if (
|
||||||
|
this.props.options.readOnly !== nextProps.options.readOnly &&
|
||||||
|
this.editor
|
||||||
|
) {
|
||||||
this.editor.updateOptions && this.editor.updateOptions(nextProps.options);
|
this.editor.updateOptions && this.editor.updateOptions(nextProps.options);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -267,9 +369,12 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load monaco
|
// Load monaco
|
||||||
context['require'](['vs/editor/editor.main', 'vs/editor/editor.main.nls.zh-cn'], () => {
|
context['require'](
|
||||||
|
['vs/editor/editor.main', 'vs/editor/editor.main.nls.zh-cn'],
|
||||||
|
() => {
|
||||||
this.initMonaco();
|
this.initMonaco();
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// Call the delayed callbacks when AMD loader has been loaded
|
// Call the delayed callbacks when AMD loader has been loaded
|
||||||
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
||||||
|
|
@ -289,7 +394,8 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
if (context.__REACT_MONACO_EDITOR_LOADER_ISPENDING__) {
|
||||||
// We need to avoid loading multiple loader.js when there are multiple editors loading concurrently
|
// We need to avoid loading multiple loader.js when there are multiple editors loading concurrently
|
||||||
// delay to call callbacks except the first one
|
// delay to call callbacks except the first one
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ = context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ || [];
|
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ =
|
||||||
|
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ || [];
|
||||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__.push({
|
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__.push({
|
||||||
context: this,
|
context: this,
|
||||||
fn: onGotAmdLoader
|
fn: onGotAmdLoader
|
||||||
|
|
@ -309,7 +415,8 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
}
|
}
|
||||||
|
|
||||||
initMonaco() {
|
initMonaco() {
|
||||||
let value = this.props.value !== null ? this.props.value : this.props.defaultValue;
|
let value =
|
||||||
|
this.props.value !== null ? this.props.value : this.props.defaultValue;
|
||||||
const {language, editorTheme, options, editorFactory} = this.props;
|
const {language, editorTheme, options, editorFactory} = this.props;
|
||||||
const containerElement = this.container;
|
const containerElement = this.container;
|
||||||
if (!containerElement) {
|
if (!containerElement) {
|
||||||
|
|
@ -323,7 +430,11 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
|
|
||||||
if (this.props.language === 'json') {
|
if (this.props.language === 'json') {
|
||||||
try {
|
try {
|
||||||
value = JSON.stringify(typeof value === 'string' ? JSON.parse(value) : value, null, 4);
|
value = JSON.stringify(
|
||||||
|
typeof value === 'string' ? JSON.parse(value) : value,
|
||||||
|
null,
|
||||||
|
4
|
||||||
|
);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// ignore
|
// ignore
|
||||||
}
|
}
|
||||||
|
|
@ -370,8 +481,12 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
onFocus && editor.onDidFocusEditorWidget && this.disposes.push(editor.onDidFocusEditorWidget(onFocus));
|
onFocus &&
|
||||||
onBlur && editor.onDidBlurEditorWidget && this.disposes.push(editor.onDidBlurEditorWidget(onBlur));
|
editor.onDidFocusEditorWidget &&
|
||||||
|
this.disposes.push(editor.onDidFocusEditorWidget(onFocus));
|
||||||
|
onBlur &&
|
||||||
|
editor.onDidBlurEditorWidget &&
|
||||||
|
this.disposes.push(editor.onDidBlurEditorWidget(onBlur));
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -380,7 +495,13 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||||
style.width = width;
|
style.width = width;
|
||||||
style.height = height;
|
style.height = height;
|
||||||
|
|
||||||
return <div className={cx(`${ns}MonacoEditor`, className)} style={style} ref={this.wrapperRef} />;
|
return (
|
||||||
|
<div
|
||||||
|
className={cx(`${ns}MonacoEditor`, className)}
|
||||||
|
style={style}
|
||||||
|
ref={this.wrapperRef}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,9 @@ export class Html extends React.Component<HtmlProps> {
|
||||||
|
|
||||||
const Component = wrapperComponent || (inline ? 'span' : 'div');
|
const Component = wrapperComponent || (inline ? 'span' : 'div');
|
||||||
|
|
||||||
return <Component ref={this.htmlRef} className={cx(`${ns}Html`, className)} />;
|
return (
|
||||||
|
<Component ref={this.htmlRef} className={cx(`${ns}Html`, className)} />
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,9 @@ export function Layout({
|
||||||
classnames: cx,
|
classnames: cx,
|
||||||
bodyClassName
|
bodyClassName
|
||||||
}: LayoutProps) {
|
}: LayoutProps) {
|
||||||
let body = <div className={cx(`Layout-body`, contentClassName)}>{children}</div>;
|
let body = (
|
||||||
|
<div className={cx(`Layout-body`, contentClassName)}>{children}</div>
|
||||||
|
);
|
||||||
|
|
||||||
if (aside) {
|
if (aside) {
|
||||||
body = (
|
body = (
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue