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}]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
indent_size = 2
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
{
|
||||
"printWidth": 120,
|
||||
"tabWidth": 4,
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"trailingComma": "none",
|
||||
"bracketSpacing": false,
|
||||
"quoteProps": "consistent",
|
||||
"arrowParens": "avoid",
|
||||
"jsxBracketSameLine": false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,16 @@ import Layout from '../../src/components/Layout';
|
|||
import AsideNav from '../../src/components/AsideNav';
|
||||
import {AlertComponent, ToastComponent} from '../../src/components/index';
|
||||
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 SimplePageSchema from './Page/Simple';
|
||||
|
|
@ -568,7 +577,9 @@ export class App extends React.PureComponent {
|
|||
document.querySelectorAll('link[title]').forEach(item => {
|
||||
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;
|
||||
|
||||
if (preState.theme.value !== this.state.theme.value) {
|
||||
document.querySelector(`link[title=${preState.theme.value}]`).disabled = true;
|
||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
||||
document.querySelector(
|
||||
`link[title=${preState.theme.value}]`
|
||||
).disabled = true;
|
||||
document.querySelector(
|
||||
`link[title=${this.state.theme.value}]`
|
||||
).disabled = false;
|
||||
}
|
||||
|
||||
if (props.location.pathname !== preProps.location.pathname) {
|
||||
|
|
@ -638,12 +653,21 @@ export class App extends React.PureComponent {
|
|||
|
||||
link.badge &&
|
||||
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}
|
||||
</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(
|
||||
<span className={cx(`AsideNav-itemLabel`)} key="label">
|
||||
|
|
@ -662,7 +686,9 @@ export class App extends React.PureComponent {
|
|||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<a onClick={link.children ? () => toggleExpand(link) : null}>{children}</a>
|
||||
<a onClick={link.children ? () => toggleExpand(link) : null}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}}
|
||||
isActive={link =>
|
||||
|
|
@ -714,7 +740,11 @@ export class App extends React.PureComponent {
|
|||
placement="bottom"
|
||||
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
|
||||
|
|
@ -739,7 +769,10 @@ export class App extends React.PureComponent {
|
|||
options={this.state.themes}
|
||||
onChange={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 (
|
||||
<Router history={history}>
|
||||
<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`} />
|
||||
{navigations2route(PathPrefix)}
|
||||
<Route path="*" component={NotFound} />
|
||||
|
|
|
|||
|
|
@ -1,37 +1,40 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "音频播放器",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '音频播放器',
|
||||
body: [
|
||||
{
|
||||
"type": "audio",
|
||||
"autoPlay": false,
|
||||
"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",
|
||||
type: 'audio',
|
||||
autoPlay: false,
|
||||
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'
|
||||
},
|
||||
{
|
||||
"type": 'form',
|
||||
"title": '',
|
||||
"actions": [],
|
||||
"className": 'b v-middle inline w-lg h-xs',
|
||||
"controls": [
|
||||
type: 'form',
|
||||
title: '',
|
||||
actions: [],
|
||||
className: 'b v-middle inline w-lg h-xs',
|
||||
controls: [
|
||||
{
|
||||
"type": "card",
|
||||
"className": 'v-middle w inline no-border',
|
||||
"header": {
|
||||
"title": "歌曲名称",
|
||||
"subTitle": "专辑名称",
|
||||
"description": "description",
|
||||
"avatarClassName": "pull-left thumb-md avatar m-r no-border",
|
||||
"avatar": "http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"
|
||||
type: 'card',
|
||||
className: 'v-middle w inline no-border',
|
||||
header: {
|
||||
title: '歌曲名称',
|
||||
subTitle: '专辑名称',
|
||||
description: 'description',
|
||||
avatarClassName: 'pull-left thumb-md avatar m-r no-border',
|
||||
avatar:
|
||||
'http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg'
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "audio",
|
||||
"className": 'v-middle no-border',
|
||||
"src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3",
|
||||
"controls": ['play']
|
||||
type: 'audio',
|
||||
className: 'v-middle no-border',
|
||||
src:
|
||||
'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 {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "带边栏联动",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '带边栏联动',
|
||||
aside: {
|
||||
type: 'form',
|
||||
wrapWithPanel: false,
|
||||
|
|
@ -37,56 +37,56 @@ export default {
|
|||
},
|
||||
toolbar: [
|
||||
{
|
||||
type: "button",
|
||||
actionType: "dialog",
|
||||
label: "新增",
|
||||
type: 'button',
|
||||
actionType: 'dialog',
|
||||
label: '新增',
|
||||
primary: true,
|
||||
dialog: {
|
||||
title: "新增",
|
||||
title: '新增',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "post:/api/sample",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: 'post:/api/sample',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -94,235 +94,235 @@ export default {
|
|||
}
|
||||
],
|
||||
body: {
|
||||
type: "crud",
|
||||
type: 'crud',
|
||||
draggable: true,
|
||||
api: "/api/sample",
|
||||
api: '/api/sample',
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "plain",
|
||||
text: "这里的表单项可以配置多个"
|
||||
type: 'plain',
|
||||
text: '这里的表单项可以配置多个'
|
||||
}
|
||||
]
|
||||
},
|
||||
bulkActions: [
|
||||
{
|
||||
label: "批量删除",
|
||||
actionType: "ajax",
|
||||
api: "delete:/api/sample/$ids",
|
||||
confirmText: "确定要批量删除?"
|
||||
label: '批量删除',
|
||||
actionType: 'ajax',
|
||||
api: 'delete:/api/sample/$ids',
|
||||
confirmText: '确定要批量删除?'
|
||||
},
|
||||
{
|
||||
label: "批量修改",
|
||||
actionType: "dialog",
|
||||
label: '批量修改',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "批量编辑",
|
||||
name: "sample-bulk-edit",
|
||||
title: '批量编辑',
|
||||
name: 'sample-bulk-edit',
|
||||
body: {
|
||||
type: "form",
|
||||
api: "/api/sample/bulkUpdate2",
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
quickSaveApi: "/api/sample/bulkUpdate",
|
||||
quickSaveItemApi: "/api/sample/$id",
|
||||
quickSaveApi: '/api/sample/bulkUpdate',
|
||||
quickSaveItemApi: '/api/sample/$id',
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
quickEdit: {
|
||||
mode: "inline",
|
||||
type: "select",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
mode: 'inline',
|
||||
type: 'select',
|
||||
options: ['A', 'B', 'C', 'D', 'X'],
|
||||
saveImmediately: true
|
||||
},
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
type: "operation",
|
||||
label: "操作",
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 130,
|
||||
buttons: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
toggled: true
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "增删改查列类型汇总",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查列类型汇总',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/mock2/crud/list",
|
||||
type: 'crud',
|
||||
api: '/api/mock2/crud/list',
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
type: "text"
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
name: "audio",
|
||||
label: "音频",
|
||||
type: "audio"
|
||||
name: 'audio',
|
||||
label: '音频',
|
||||
type: 'audio'
|
||||
},
|
||||
{
|
||||
name: "carousel",
|
||||
label: "轮播图",
|
||||
type: "carousel",
|
||||
width: "300"
|
||||
name: 'carousel',
|
||||
label: '轮播图',
|
||||
type: 'carousel',
|
||||
width: '300'
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
label: "文本",
|
||||
type: "text"
|
||||
name: 'text',
|
||||
label: '文本',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
|
|
@ -41,31 +41,31 @@ export default {
|
|||
label: '日期'
|
||||
},
|
||||
{
|
||||
name: "progress",
|
||||
label: "进度",
|
||||
type: "progress"
|
||||
name: 'progress',
|
||||
label: '进度',
|
||||
type: 'progress'
|
||||
},
|
||||
{
|
||||
name: "boolean",
|
||||
label: "状态",
|
||||
type: "status"
|
||||
name: 'boolean',
|
||||
label: '状态',
|
||||
type: 'status'
|
||||
},
|
||||
{
|
||||
name: "boolean",
|
||||
label: "开关",
|
||||
type: "switch",
|
||||
name: 'boolean',
|
||||
label: '开关',
|
||||
type: 'switch'
|
||||
// readOnly: false // 可以开启修改模式
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "映射",
|
||||
type: "mapping",
|
||||
name: 'type',
|
||||
label: '映射',
|
||||
type: 'mapping',
|
||||
map: {
|
||||
"*": "其他：${type}",
|
||||
"1": "<span class='label label-info'>漂亮</span>",
|
||||
"2": "<span class='label label-success'>开心</span>",
|
||||
"3": "<span class='label label-danger'>惊吓</span>",
|
||||
"4": "<span class='label label-warning'>紧张</span>"
|
||||
'*': '其他：${type}',
|
||||
'1': "<span class='label label-info'>漂亮</span>",
|
||||
'2': "<span class='label label-success'>开心</span>",
|
||||
'3': "<span class='label label-danger'>惊吓</span>",
|
||||
'4': "<span class='label label-warning'>紧张</span>"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
type: 'list',
|
||||
label: 'List',
|
||||
placeholder: '-',
|
||||
size: "sm",
|
||||
size: 'sm',
|
||||
listItem: {
|
||||
title: '${title}',
|
||||
subTitle: '${description}'
|
||||
|
|
|
|||
|
|
@ -1,155 +1,155 @@
|
|||
const table = {
|
||||
type: "table",
|
||||
type: 'table',
|
||||
data: [
|
||||
{
|
||||
engine: "Other browsers",
|
||||
browser: "All others",
|
||||
platform: "-",
|
||||
version: "-",
|
||||
grade: "U",
|
||||
engine: 'Other browsers',
|
||||
browser: 'All others',
|
||||
platform: '-',
|
||||
version: '-',
|
||||
grade: 'U',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Misc",
|
||||
browser: "PSP browser",
|
||||
platform: "PSP",
|
||||
version: "-",
|
||||
grade: "C",
|
||||
engine: 'Misc',
|
||||
browser: 'PSP browser',
|
||||
platform: 'PSP',
|
||||
version: '-',
|
||||
grade: 'C',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Misc",
|
||||
browser: "PSP browser",
|
||||
platform: "PSP",
|
||||
version: "-",
|
||||
grade: "C",
|
||||
engine: 'Misc',
|
||||
browser: 'PSP browser',
|
||||
platform: 'PSP',
|
||||
version: '-',
|
||||
grade: 'C',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Other browsers",
|
||||
browser: "All others",
|
||||
platform: "-",
|
||||
version: "-",
|
||||
grade: "U",
|
||||
engine: 'Other browsers',
|
||||
browser: 'All others',
|
||||
platform: '-',
|
||||
version: '-',
|
||||
grade: 'U',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Misc",
|
||||
browser: "PSP browser",
|
||||
platform: "PSP",
|
||||
version: "-",
|
||||
grade: "C",
|
||||
engine: 'Misc',
|
||||
browser: 'PSP browser',
|
||||
platform: 'PSP',
|
||||
version: '-',
|
||||
grade: 'C',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Misc",
|
||||
browser: "PSP browser",
|
||||
platform: "PSP",
|
||||
version: "-",
|
||||
grade: "C",
|
||||
engine: 'Misc',
|
||||
browser: 'PSP browser',
|
||||
platform: 'PSP',
|
||||
version: '-',
|
||||
grade: 'C',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Other browsers",
|
||||
browser: "All others",
|
||||
platform: "-",
|
||||
version: "-",
|
||||
grade: "U",
|
||||
engine: 'Other browsers',
|
||||
browser: 'All others',
|
||||
platform: '-',
|
||||
version: '-',
|
||||
grade: 'U',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Misc",
|
||||
browser: "PSP browser",
|
||||
platform: "PSP",
|
||||
version: "-",
|
||||
grade: "C",
|
||||
engine: 'Misc',
|
||||
browser: 'PSP browser',
|
||||
platform: 'PSP',
|
||||
version: '-',
|
||||
grade: 'C',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Misc",
|
||||
browser: "PSP browser",
|
||||
platform: "PSP",
|
||||
version: "-",
|
||||
grade: "C",
|
||||
engine: 'Misc',
|
||||
browser: 'PSP browser',
|
||||
platform: 'PSP',
|
||||
version: '-',
|
||||
grade: 'C',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
},
|
||||
{
|
||||
engine: "Other browsers",
|
||||
browser: "All others",
|
||||
platform: "-",
|
||||
version: "-",
|
||||
grade: "U",
|
||||
engine: 'Other browsers',
|
||||
browser: 'All others',
|
||||
platform: '-',
|
||||
version: '-',
|
||||
grade: 'U',
|
||||
progress: 50,
|
||||
status: true,
|
||||
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,
|
||||
others: null,
|
||||
createdAt: "2017-11-17T08:47:50.000Z",
|
||||
updatedAt: "2017-11-17T08:47:50.000Z"
|
||||
createdAt: '2017-11-17T08:47:50.000Z',
|
||||
updatedAt: '2017-11-17T08:47:50.000Z'
|
||||
}
|
||||
].map((item, key) => ({
|
||||
...item,
|
||||
|
|
@ -157,128 +157,128 @@ const table = {
|
|||
})),
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
quickEdit: {
|
||||
mode: "inline",
|
||||
type: "select",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
mode: 'inline',
|
||||
type: 'select',
|
||||
options: ['A', 'B', 'C', 'D', 'X'],
|
||||
saveImmediately: true
|
||||
},
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
fixed: 'right'
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
fixed: 'right'
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "固顶和列固定示例",
|
||||
remark: "bla bla bla",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '固顶和列固定示例',
|
||||
remark: 'bla bla bla',
|
||||
body: [
|
||||
table,
|
||||
'<div>分割</div>',
|
||||
|
|
|
|||
|
|
@ -1,194 +1,194 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "开启单条底部展示功能",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '开启单条底部展示功能',
|
||||
body: {
|
||||
type: "crud",
|
||||
type: 'crud',
|
||||
draggable: true,
|
||||
api: "/api/sample",
|
||||
api: '/api/sample',
|
||||
footable: {
|
||||
expand: 'first',
|
||||
accordion: true
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
breakpoint: '*',
|
||||
quickEdit: {
|
||||
mode: "inline",
|
||||
type: "select",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
mode: 'inline',
|
||||
type: 'select',
|
||||
options: ['A', 'B', 'C', 'D', 'X'],
|
||||
inputClassName: 'w-xs',
|
||||
saveImmediately: true
|
||||
},
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
type: "operation",
|
||||
label: "操作",
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 100,
|
||||
breakpoint: '*',
|
||||
buttons: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
actionType: "drawer",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
position: 'left',
|
||||
size: 'lg',
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
type: 'select',
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
options: ['A', 'B', 'C', 'D', 'X']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
toggled: true
|
||||
|
|
|
|||
|
|
@ -1,219 +1,219 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "增删改查示例",
|
||||
remark: "bla bla bla",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/sample",
|
||||
type: 'crud',
|
||||
api: '/api/sample',
|
||||
// api: "/api/mock2/crud/table?waitSeconds=100000",
|
||||
mode: "cards",
|
||||
mode: 'cards',
|
||||
defaultParams: {
|
||||
perPage: 12,
|
||||
perPage: 12
|
||||
},
|
||||
// fixAlignment: true,
|
||||
// masonryLayout: true,
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "plain",
|
||||
text: "这只是个示例, 目前搜索对查询结果无效."
|
||||
type: 'plain',
|
||||
text: '这只是个示例, 目前搜索对查询结果无效.'
|
||||
}
|
||||
]
|
||||
},
|
||||
bulkActions: [
|
||||
{
|
||||
label: "批量删除",
|
||||
actionType: "ajax",
|
||||
api: "delete:/api/sample/${ids|raw}",
|
||||
confirmText: "确定要批量删除?"
|
||||
label: '批量删除',
|
||||
actionType: 'ajax',
|
||||
api: 'delete:/api/sample/${ids|raw}',
|
||||
confirmText: '确定要批量删除?'
|
||||
},
|
||||
{
|
||||
label: "批量修改",
|
||||
actionType: "dialog",
|
||||
label: '批量修改',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "批量编辑",
|
||||
name: "sample-bulk-edit",
|
||||
title: '批量编辑',
|
||||
name: 'sample-bulk-edit',
|
||||
body: {
|
||||
type: "form",
|
||||
api: "/api/sample/bulkUpdate2",
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
{
|
||||
type: "hidden",
|
||||
name: "ids"
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
quickSaveApi: "/api/sample/bulkUpdate",
|
||||
quickSaveItemApi: "/api/sample/$id",
|
||||
quickSaveApi: '/api/sample/bulkUpdate',
|
||||
quickSaveItemApi: '/api/sample/$id',
|
||||
draggable: true,
|
||||
card: {
|
||||
header: {
|
||||
title: "$engine",
|
||||
subTitle: "$platform",
|
||||
subTitlePlaceholder: "暂无说明",
|
||||
title: '$engine',
|
||||
subTitle: '$platform',
|
||||
subTitlePlaceholder: '暂无说明',
|
||||
avatar:
|
||||
'<%= 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: [
|
||||
{
|
||||
type: "button",
|
||||
label: "查看",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
label: '查看',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "编辑",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
label: '编辑',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "删除",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
label: '删除',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
body: [
|
||||
{
|
||||
name: "engine",
|
||||
label: "engine",
|
||||
name: 'engine',
|
||||
label: 'engine',
|
||||
sortable: true,
|
||||
quickEdit: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform"
|
||||
name: 'platform',
|
||||
label: 'Platform'
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "version"
|
||||
name: 'version',
|
||||
label: 'version'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,106 +1,106 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "支持表头分组，通过在 cloumn 上设置 groupName 实现。",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '支持表头分组，通过在 cloumn 上设置 groupName 实现。',
|
||||
body: {
|
||||
type: "table",
|
||||
type: 'table',
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.2",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.2',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.2",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "B"
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.2',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'B'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "C"
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'C'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 98",
|
||||
"version": "3",
|
||||
"grade": "A"
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 98',
|
||||
version: '3',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 98",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 98',
|
||||
version: '4',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 1.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '4',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 1.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "A"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "B"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'B'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "C"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'C'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "D"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'D'
|
||||
}
|
||||
]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
groupName: "A"
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
groupName: 'A'
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
groupName: "A"
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
groupName: 'A'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
groupName: "B"
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
groupName: 'B'
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
groupName: "B"
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
groupName: 'B'
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,221 +1,226 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "增删改查示例",
|
||||
remark: "bla bla bla",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/sample",
|
||||
headerToolbar: ['bulkActions', {
|
||||
type: 'crud',
|
||||
api: '/api/sample',
|
||||
headerToolbar: [
|
||||
'bulkActions',
|
||||
{
|
||||
type: 'columns-toggler',
|
||||
className: 'pull-right',
|
||||
align: 'right'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'drag-toggler',
|
||||
className: 'pull-right'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'pagination',
|
||||
className: 'pull-right'
|
||||
}],
|
||||
}
|
||||
],
|
||||
itemActions: [
|
||||
{
|
||||
type: "button",
|
||||
label: "查看",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
label: '查看',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "编辑",
|
||||
actionType: "drawer",
|
||||
type: 'button',
|
||||
label: '编辑',
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
position: 'left',
|
||||
size: 'lg',
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
type: 'select',
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
options: ['A', 'B', 'C', 'D', 'X']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "删除",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
label: '删除',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
bulkActions: [
|
||||
{
|
||||
label: "批量删除",
|
||||
actionType: "ajax",
|
||||
api: "delete:/api/sample/${ids|raw}",
|
||||
confirmText: "确定要批量删除?",
|
||||
type: "button"
|
||||
label: '批量删除',
|
||||
actionType: 'ajax',
|
||||
api: 'delete:/api/sample/${ids|raw}',
|
||||
confirmText: '确定要批量删除?',
|
||||
type: 'button'
|
||||
},
|
||||
{
|
||||
label: "批量修改",
|
||||
actionType: "dialog",
|
||||
label: '批量修改',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "批量编辑",
|
||||
name: "sample-bulk-edit",
|
||||
title: '批量编辑',
|
||||
name: 'sample-bulk-edit',
|
||||
body: {
|
||||
type: "form",
|
||||
api: "/api/sample/bulkUpdate2",
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
type: "button"
|
||||
type: 'button'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
remark: 'Bla bla Bla'
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: false
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
type: "text",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
type: "text",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
type: 'text',
|
||||
toggled: true
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,131 +1,131 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "操作并下一个",
|
||||
"remark": "当存在下一条时，支持直接打开下一条操作。",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"title": "",
|
||||
"api": "/api/sample/list",
|
||||
"columnsTogglable": false,
|
||||
"columns": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '操作并下一个',
|
||||
remark: '当存在下一条时，支持直接打开下一条操作。',
|
||||
body: {
|
||||
type: 'crud',
|
||||
title: '',
|
||||
api: '/api/sample/list',
|
||||
columnsTogglable: false,
|
||||
columns: [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"width": 20,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"type": "operation",
|
||||
"label": "操作",
|
||||
"width": 130,
|
||||
"buttons": [
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 130,
|
||||
buttons: [
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-pencil",
|
||||
"actionType": "dialog",
|
||||
"nextCondition": "true",
|
||||
"_nextCondition": "可以设置条件比如： data.grade == \"B\"",
|
||||
"dialog": {
|
||||
"title": "编辑",
|
||||
"actions": [
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'dialog',
|
||||
nextCondition: 'true',
|
||||
_nextCondition: '可以设置条件比如： data.grade == "B"',
|
||||
dialog: {
|
||||
title: '编辑',
|
||||
actions: [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "prev",
|
||||
"level": "info",
|
||||
"visibleOn": "data.hasPrev",
|
||||
"label": "上一个"
|
||||
type: 'button',
|
||||
actionType: 'prev',
|
||||
level: 'info',
|
||||
visibleOn: 'data.hasPrev',
|
||||
label: '上一个'
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "cancel",
|
||||
"label": "关闭"
|
||||
type: 'button',
|
||||
actionType: 'cancel',
|
||||
label: '关闭'
|
||||
},
|
||||
{
|
||||
"type": "submit",
|
||||
"actionType": "next",
|
||||
"visibleOn": "data.hasNext",
|
||||
"label": "保存并下一个",
|
||||
"level": "primary"
|
||||
type: 'submit',
|
||||
actionType: 'next',
|
||||
visibleOn: 'data.hasNext',
|
||||
label: '保存并下一个',
|
||||
level: 'primary'
|
||||
},
|
||||
{
|
||||
"type": "submit",
|
||||
"visibleOn": "!data.hasNext",
|
||||
"label": "保存",
|
||||
"level": "primary"
|
||||
type: 'submit',
|
||||
visibleOn: '!data.hasNext',
|
||||
label: '保存',
|
||||
level: 'primary'
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "next",
|
||||
"level": "info",
|
||||
"visibleOn": "data.hasNext",
|
||||
"label": "下一个"
|
||||
type: 'button',
|
||||
actionType: 'next',
|
||||
level: 'info',
|
||||
visibleOn: 'data.hasNext',
|
||||
label: '下一个'
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "sample-edit-form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
body: {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "engine",
|
||||
"label": "Engine",
|
||||
"required": true
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"required": true
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"required": true
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"toggled": true
|
||||
toggled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,83 +1,78 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "Table 全键盘操作示例",
|
||||
"remark": "bla bla bla",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'Table 全键盘操作示例',
|
||||
remark: 'bla bla bla',
|
||||
body: [
|
||||
{
|
||||
"type": "plain",
|
||||
"className": "text-danger",
|
||||
"text": "请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。"
|
||||
type: 'plain',
|
||||
className: 'text-danger',
|
||||
text:
|
||||
'请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。'
|
||||
},
|
||||
{
|
||||
"type": "crud",
|
||||
"className": "m-t",
|
||||
"api": "/api/sample",
|
||||
"quickSaveApi": "/api/sample/bulkUpdate",
|
||||
"quickSaveItemApi": "/api/sample/$id",
|
||||
"columns": [
|
||||
type: 'crud',
|
||||
className: 'm-t',
|
||||
api: '/api/sample',
|
||||
quickSaveApi: '/api/sample/bulkUpdate',
|
||||
quickSaveItemApi: '/api/sample/$id',
|
||||
columns: [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"width": 20,
|
||||
"sortable": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"sortable": true,
|
||||
"quickEdit": {
|
||||
type: "text",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
quickEdit: {
|
||||
type: 'text',
|
||||
required: true,
|
||||
mode: 'inline'
|
||||
},
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true,
|
||||
"quickEdit": {
|
||||
type: "text",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
quickEdit: {
|
||||
type: 'text',
|
||||
required: true
|
||||
},
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"sortable": true,
|
||||
"quickEdit": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
quickEdit: true,
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version",
|
||||
"quickEdit": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade",
|
||||
"quickEdit": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"X"
|
||||
]
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
quickEdit: {
|
||||
type: 'select',
|
||||
options: ['A', 'B', 'C', 'D', 'X']
|
||||
},
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
type: 'text',
|
||||
toggled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,212 +1,211 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "增删改查示例",
|
||||
remark: "bla bla bla",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/sample",
|
||||
mode: "list",
|
||||
type: 'crud',
|
||||
api: '/api/sample',
|
||||
mode: 'list',
|
||||
draggable: true,
|
||||
saveOrderApi: {
|
||||
url: "/api/sample/saveOrder"
|
||||
url: '/api/sample/saveOrder'
|
||||
},
|
||||
orderField: "weight",
|
||||
orderField: 'weight',
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "plain",
|
||||
text: "这只是个示例, 目前搜索对查询结果无效."
|
||||
type: 'plain',
|
||||
text: '这只是个示例, 目前搜索对查询结果无效.'
|
||||
}
|
||||
]
|
||||
},
|
||||
bulkActions: [
|
||||
{
|
||||
label: "批量删除",
|
||||
actionType: "ajax",
|
||||
api: "delete:/api/sample/${ids|raw}",
|
||||
confirmText: "确定要批量删除?",
|
||||
type: "button",
|
||||
level: "danger"
|
||||
label: '批量删除',
|
||||
actionType: 'ajax',
|
||||
api: 'delete:/api/sample/${ids|raw}',
|
||||
confirmText: '确定要批量删除?',
|
||||
type: 'button',
|
||||
level: 'danger'
|
||||
},
|
||||
{
|
||||
label: "批量修改",
|
||||
actionType: "dialog",
|
||||
level: "info",
|
||||
type: "button",
|
||||
label: '批量修改',
|
||||
actionType: 'dialog',
|
||||
level: 'info',
|
||||
type: 'button',
|
||||
dialog: {
|
||||
title: "批量编辑",
|
||||
title: '批量编辑',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: "/api/sample/bulkUpdate2",
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
{type: 'hidden', name: 'ids'},
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
quickSaveApi: "/api/sample/bulkUpdate",
|
||||
quickSaveItemApi: "/api/sample/$id",
|
||||
quickSaveApi: '/api/sample/bulkUpdate',
|
||||
quickSaveItemApi: '/api/sample/$id',
|
||||
listItem: {
|
||||
actions: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
body: [
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
quickEdit: true
|
||||
},
|
||||
[
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
}
|
||||
],
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,221 +1,217 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "增删改查示例",
|
||||
remark: "bla bla bla",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/sample",
|
||||
mode: "list",
|
||||
type: 'crud',
|
||||
api: '/api/sample',
|
||||
mode: 'list',
|
||||
draggable: true,
|
||||
saveOrderApi: {
|
||||
url: "/api/sample/saveOrder"
|
||||
url: '/api/sample/saveOrder'
|
||||
},
|
||||
orderField: "weight",
|
||||
orderField: 'weight',
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "plain",
|
||||
text: "这只是个示例, 目前搜索对查询结果无效."
|
||||
type: 'plain',
|
||||
text: '这只是个示例, 目前搜索对查询结果无效.'
|
||||
}
|
||||
]
|
||||
},
|
||||
bulkActions: [
|
||||
{
|
||||
label: "批量删除",
|
||||
actionType: "ajax",
|
||||
api: "delete:/api/sample/${ids|raw}",
|
||||
confirmText: "确定要批量删除?",
|
||||
type: "button",
|
||||
level: "danger"
|
||||
label: '批量删除',
|
||||
actionType: 'ajax',
|
||||
api: 'delete:/api/sample/${ids|raw}',
|
||||
confirmText: '确定要批量删除?',
|
||||
type: 'button',
|
||||
level: 'danger'
|
||||
},
|
||||
{
|
||||
label: "批量修改",
|
||||
actionType: "dialog",
|
||||
level: "info",
|
||||
type: "button",
|
||||
label: '批量修改',
|
||||
actionType: 'dialog',
|
||||
level: 'info',
|
||||
type: 'button',
|
||||
dialog: {
|
||||
title: "批量编辑",
|
||||
title: '批量编辑',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: "/api/sample/bulkUpdate2",
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
{type: 'hidden', name: 'ids'},
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
quickSaveApi: "/api/sample/bulkUpdate",
|
||||
quickSaveItemApi: "/api/sample/$id",
|
||||
headerToolbar: [
|
||||
"bulkActions"
|
||||
],
|
||||
footerToolbar: [
|
||||
"load-more"
|
||||
],
|
||||
quickSaveApi: '/api/sample/bulkUpdate',
|
||||
quickSaveItemApi: '/api/sample/$id',
|
||||
headerToolbar: ['bulkActions'],
|
||||
footerToolbar: ['load-more'],
|
||||
listItem: {
|
||||
actions: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
body: [
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
quickEdit: true,
|
||||
labelClassName: "w-sm pull-left text-muted"
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
},
|
||||
[
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
labelClassName: "w-sm pull-left text-muted"
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
labelClassName: "w-sm pull-left text-muted"
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
}
|
||||
],
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
labelClassName: "w-sm pull-left text-muted"
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,198 +1,198 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "一次性加载，前端分页，前端排序",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '一次性加载，前端分页，前端排序',
|
||||
body: {
|
||||
type: "crud",
|
||||
type: 'crud',
|
||||
loadDataOnce: true,
|
||||
api: "/api/sample?waitSeconds=1",
|
||||
api: '/api/sample?waitSeconds=1',
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
remark: 'Bla bla Bla'
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: false
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
type: "text",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
type: "text",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
type: "operation",
|
||||
label: "操作",
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 100,
|
||||
buttons: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
tooltip: "查看",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
tooltip: '查看',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
tooltip: "编辑",
|
||||
actionType: "drawer",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
tooltip: '编辑',
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
position: 'left',
|
||||
size: 'lg',
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
type: 'select',
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
options: ['A', 'B', 'C', 'D', 'X']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
tooltip: "删除",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
tooltip: '删除',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
toggled: true
|
||||
|
|
|
|||
|
|
@ -1,103 +1,104 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title:
|
||||
'支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3',
|
||||
body: {
|
||||
type: "table",
|
||||
type: 'table',
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.2",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.2',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.2",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "B"
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.2',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'B'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "C"
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'C'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 98",
|
||||
"version": "3",
|
||||
"grade": "A"
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 98',
|
||||
version: '3',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 98",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 98',
|
||||
version: '4',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 1.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '4',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 1.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "A"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'A'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "B"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'B'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "C"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'C'
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "D"
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'D'
|
||||
}
|
||||
]
|
||||
},
|
||||
combineNum: 3, // 配置自动合并单元格的列数。
|
||||
columns: [
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine"
|
||||
name: 'engine',
|
||||
label: 'Rendering engine'
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/mock2/crud/table2",
|
||||
type: 'crud',
|
||||
api: '/api/mock2/crud/table2',
|
||||
saveOrderApi: '/api/mock2/form/saveData',
|
||||
expandConfig: {
|
||||
expand: 'first',
|
||||
|
|
@ -12,182 +12,182 @@ export default {
|
|||
draggable: true,
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
quickEdit: {
|
||||
mode: "inline",
|
||||
type: "select",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
mode: 'inline',
|
||||
type: 'select',
|
||||
options: ['A', 'B', 'C', 'D', 'X'],
|
||||
inputClassName: 'w-xs',
|
||||
saveImmediately: true
|
||||
},
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
type: "operation",
|
||||
label: "操作",
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 100,
|
||||
buttons: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
actionType: "drawer",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
position: 'left',
|
||||
size: 'lg',
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
type: 'select',
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
options: ['A', 'B', 'C', 'D', 'X']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
toggled: true
|
||||
|
|
|
|||
|
|
@ -1,60 +1,60 @@
|
|||
export default {
|
||||
$schema: "http://amis.baidu.com/v2/schemas/page.json#",
|
||||
title: "增删改查示例",
|
||||
remark: "bla bla bla",
|
||||
$schema: 'http://amis.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
toolbar: [
|
||||
{
|
||||
type: "button",
|
||||
actionType: "dialog",
|
||||
label: "新增",
|
||||
type: 'button',
|
||||
actionType: 'dialog',
|
||||
label: '新增',
|
||||
icon: 'fa fa-plus pull-left',
|
||||
primary: true,
|
||||
dialog: {
|
||||
title: "新增",
|
||||
title: '新增',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "post:/api/sample",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: 'post:/api/sample',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -62,292 +62,300 @@ export default {
|
|||
}
|
||||
],
|
||||
body: {
|
||||
type: "crud",
|
||||
type: 'crud',
|
||||
draggable: true,
|
||||
api: "/api/sample?waitSeconds=1",
|
||||
api: '/api/sample?waitSeconds=1',
|
||||
keepItemSelectionOnPageChange: true,
|
||||
labelTpl: '${id} ${engine}',
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "plain",
|
||||
text: "这里的表单项可以配置多个"
|
||||
type: 'plain',
|
||||
text: '这里的表单项可以配置多个'
|
||||
}
|
||||
]
|
||||
},
|
||||
bulkActions: [
|
||||
{
|
||||
label: "批量删除",
|
||||
actionType: "ajax",
|
||||
api: "delete:/api/sample/${ids|raw}",
|
||||
confirmText: "确定要批量删除?"
|
||||
label: '批量删除',
|
||||
actionType: 'ajax',
|
||||
api: 'delete:/api/sample/${ids|raw}',
|
||||
confirmText: '确定要批量删除?'
|
||||
},
|
||||
{
|
||||
label: "批量修改",
|
||||
actionType: "dialog",
|
||||
label: '批量修改',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "批量编辑",
|
||||
name: "sample-bulk-edit",
|
||||
title: '批量编辑',
|
||||
name: 'sample-bulk-edit',
|
||||
body: {
|
||||
type: "form",
|
||||
api: "/api/sample/bulkUpdate2",
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
quickSaveApi: "/api/sample/bulkUpdate",
|
||||
quickSaveItemApi: "/api/sample/$id",
|
||||
quickSaveApi: '/api/sample/bulkUpdate',
|
||||
quickSaveItemApi: '/api/sample/$id',
|
||||
filterTogglable: true,
|
||||
headerToolbar: ['filter-toggler', 'bulkActions', {
|
||||
headerToolbar: [
|
||||
'filter-toggler',
|
||||
'bulkActions',
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '定制内容示例：当前有 ${count} 条数据。',
|
||||
className: 'v-middle'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: 'https://www.baidu.com',
|
||||
body: '百度一下',
|
||||
htmlTarget: '_parent',
|
||||
className: 'v-middle'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'columns-toggler',
|
||||
align: 'right'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'drag-toggler',
|
||||
align: 'right'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
type: 'pagination',
|
||||
align: 'right'
|
||||
}],
|
||||
}
|
||||
],
|
||||
footerToolbar: ['statistics', 'switch-per-page', 'pagination'],
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20,
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
remark: 'Bla bla Bla'
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: false
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
popOver: {
|
||||
body: {
|
||||
type: "tpl",
|
||||
tpl: "偏了一点的popover"
|
||||
type: 'tpl',
|
||||
tpl: '偏了一点的popover'
|
||||
},
|
||||
offset: {
|
||||
y: 100
|
||||
}
|
||||
},
|
||||
sortable: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
quickEdit: true,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true,
|
||||
filterable:{
|
||||
options:[
|
||||
filterable: {
|
||||
options: [
|
||||
{
|
||||
label:'4',
|
||||
value:'4'
|
||||
label: '4',
|
||||
value: '4'
|
||||
},
|
||||
{
|
||||
label:'5',
|
||||
value:'5'
|
||||
label: '5',
|
||||
value: '5'
|
||||
},
|
||||
{
|
||||
label:'6',
|
||||
value:'6'
|
||||
},
|
||||
label: '6',
|
||||
value: '6'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
quickEdit: {
|
||||
mode: "inline",
|
||||
type: "select",
|
||||
mode: 'inline',
|
||||
type: 'select',
|
||||
inputClassName: 'w-xs',
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
options: ['A', 'B', 'C', 'D', 'X'],
|
||||
saveImmediately: true
|
||||
},
|
||||
type: "text",
|
||||
type: 'text',
|
||||
toggled: true
|
||||
},
|
||||
{
|
||||
type: "operation",
|
||||
label: "操作",
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 100,
|
||||
buttons: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
tooltip: "查看",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
tooltip: '查看',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
type: 'html',
|
||||
html:
|
||||
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
tooltip: "编辑",
|
||||
actionType: "drawer",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
tooltip: '编辑',
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
position: 'left',
|
||||
size: 'lg',
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "grade",
|
||||
label: "CSS grade",
|
||||
options: ["A", "B", "C", "D", "X"],
|
||||
type: 'select',
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
options: ['A', 'B', 'C', 'D', 'X']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
tooltip: "删除",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
tooltip: '删除',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
toggled: true
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "Test 信息：${page}",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'Test 信息：${page}',
|
||||
body: {
|
||||
"type": "crud",
|
||||
"api": "/api/sample",
|
||||
"syncLocation": false,
|
||||
"title": null,
|
||||
"columns": [
|
||||
type: 'crud',
|
||||
api: '/api/sample',
|
||||
syncLocation: false,
|
||||
title: null,
|
||||
columns: [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"width": 20
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"sortable": true
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"type": "map",
|
||||
"label": "Rendering engine",
|
||||
"map": {
|
||||
"A": "<span class='label label-info'>A</span>",
|
||||
"B": "<span class='label label-success'>B</span>",
|
||||
"C": "<span class='label label-primary'>C</span>",
|
||||
"X": "<span class='label label-danger'>X</span>",
|
||||
"*": "Unkown"
|
||||
name: 'grade',
|
||||
type: 'map',
|
||||
label: 'Rendering engine',
|
||||
map: {
|
||||
A: "<span class='label label-info'>A</span>",
|
||||
B: "<span class='label label-success'>B</span>",
|
||||
C: "<span class='label label-primary'>C</span>",
|
||||
X: "<span class='label label-danger'>X</span>",
|
||||
'*': 'Unkown'
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "operation",
|
||||
"label": "操作",
|
||||
"width": 200,
|
||||
"buttons": [
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 200,
|
||||
buttons: [
|
||||
{
|
||||
"type": "button-group",
|
||||
"buttons": [
|
||||
type: 'button-group',
|
||||
buttons: [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "查看",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"disabled": true,
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
type: 'button',
|
||||
label: '查看',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
disabled: true,
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"type": "static"
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
type: 'static'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -57,18 +57,18 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "编辑",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"body": {
|
||||
"api": "/api/sample/$id",
|
||||
"type": "form",
|
||||
"controls": [
|
||||
type: 'button',
|
||||
label: '编辑',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
body: {
|
||||
api: '/api/sample/$id',
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"type": "text"
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -76,12 +76,12 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"level": "danger",
|
||||
"actionType": "ajax",
|
||||
"confirmText": "确定？",
|
||||
"api": "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
label: '删除',
|
||||
level: 'danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '确定？',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,16 @@ export default {
|
|||
],
|
||||
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'
|
||||
},
|
||||
{
|
||||
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',
|
||||
itemSchema: {
|
||||
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 {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "图表示例",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '图表示例',
|
||||
body: [
|
||||
{
|
||||
"type": "grid",
|
||||
"columns": [
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "本地配置示例 支持交互",
|
||||
"name": "chart-local",
|
||||
"body": [
|
||||
type: 'panel',
|
||||
title: '本地配置示例 支持交互',
|
||||
name: 'chart-local',
|
||||
body: [
|
||||
{
|
||||
"type": "chart",
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
type: 'chart',
|
||||
config: {
|
||||
title: {
|
||||
text: '极坐标双数值轴'
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
legend: {
|
||||
data: ['line']
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
polar: {
|
||||
center: ['50%', '54%']
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
},
|
||||
"series": [
|
||||
series: [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: [
|
||||
[0, 0],
|
||||
[0.03487823687206265, 1],
|
||||
[0.06958655048003272, 2],
|
||||
[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: {
|
||||
actionType: 'dialog',
|
||||
|
|
@ -107,8 +69,8 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart1"
|
||||
type: 'chart',
|
||||
api: '/api/mock2/chart/chart1'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -117,81 +79,82 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "远程图表示例(返回值带function)",
|
||||
"name": "chart-remote",
|
||||
"body": [
|
||||
type: 'panel',
|
||||
title: '远程图表示例(返回值带function)',
|
||||
name: 'chart-remote',
|
||||
body: [
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart1"
|
||||
type: 'chart',
|
||||
api: '/api/mock2/chart/chart1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "Form+chart组合",
|
||||
"body": [
|
||||
type: 'panel',
|
||||
title: 'Form+chart组合',
|
||||
body: [
|
||||
{
|
||||
"type": "form",
|
||||
"title": "过滤条件",
|
||||
"target": "chart1,chart2",
|
||||
"submitOnInit":true,
|
||||
"className": "m-b",
|
||||
"wrapWithPanel": false,
|
||||
"mode": "inline",
|
||||
"controls": [
|
||||
type: 'form',
|
||||
title: '过滤条件',
|
||||
target: 'chart1,chart2',
|
||||
submitOnInit: true,
|
||||
className: 'm-b',
|
||||
wrapWithPanel: false,
|
||||
mode: 'inline',
|
||||
controls: [
|
||||
{
|
||||
"type": "date",
|
||||
"label": "开始日期",
|
||||
"name": "starttime",
|
||||
"value": "-8days",
|
||||
"maxDate": "${endtime}"
|
||||
type: 'date',
|
||||
label: '开始日期',
|
||||
name: 'starttime',
|
||||
value: '-8days',
|
||||
maxDate: '${endtime}'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "date",
|
||||
"label": "结束日期",
|
||||
"name": "endtime",
|
||||
"value": "-1days",
|
||||
"minDate": "${starttime}"
|
||||
type: 'date',
|
||||
label: '结束日期',
|
||||
name: 'endtime',
|
||||
value: '-1days',
|
||||
minDate: '${starttime}'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "条件",
|
||||
"name": "name",
|
||||
"addOn": {
|
||||
"type": "submit",
|
||||
"label": "搜索",
|
||||
"level": "primary"
|
||||
type: 'text',
|
||||
label: '条件',
|
||||
name: 'name',
|
||||
addOn: {
|
||||
type: 'submit',
|
||||
label: '搜索',
|
||||
level: 'primary'
|
||||
}
|
||||
}
|
||||
],
|
||||
"actions": []
|
||||
actions: []
|
||||
},
|
||||
{
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "grid",
|
||||
"className": "m-t-lg",
|
||||
"columns": [
|
||||
type: 'grid',
|
||||
className: 'm-t-lg',
|
||||
columns: [
|
||||
{
|
||||
"type": "chart",
|
||||
"name": "chart1",
|
||||
"initFetch": false,
|
||||
"api": "/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}"
|
||||
type: 'chart',
|
||||
name: 'chart1',
|
||||
initFetch: false,
|
||||
api:
|
||||
'/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}'
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"name": "chart2",
|
||||
"initFetch": false,
|
||||
"api": "/api/mock2/chart/chart2?name=$name"
|
||||
type: 'chart',
|
||||
name: 'chart2',
|
||||
initFetch: false,
|
||||
api: '/api/mock2/chart/chart2?name=$name'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export default {
|
|||
body: [
|
||||
{
|
||||
type: 'button-toolbar',
|
||||
className: "block",
|
||||
className: 'block',
|
||||
buttons: [
|
||||
{
|
||||
type: 'button',
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
title: '提示',
|
||||
body: '这是个简单的弹框'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -404,10 +404,10 @@ export default {
|
|||
title: '提示',
|
||||
closeOnEsc: true,
|
||||
resizable: true,
|
||||
body: '这是个简单的弹框',
|
||||
body: '这是个简单的弹框'
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -120,29 +120,29 @@ export default {
|
|||
}
|
||||
],
|
||||
body: {
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "常规模式",
|
||||
mode: "normal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '常规模式',
|
||||
mode: 'normal',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
required: true,
|
||||
placeholder: "请输入邮箱",
|
||||
label: "邮箱"
|
||||
placeholder: '请输入邮箱',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
placeholder: "请输入密码"
|
||||
placeholder: '请输入密码'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住登录"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -171,15 +171,15 @@ export default {
|
|||
}
|
||||
],
|
||||
body: {
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "常规模式",
|
||||
mode: "normal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '常规模式',
|
||||
mode: 'normal',
|
||||
controls: [
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "勾上我才可以确认"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '勾上我才可以确认'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -210,12 +210,12 @@ export default {
|
|||
title: '操作成功',
|
||||
body: '当前时间戳: <code>${date}</code>'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "button-toolbar",
|
||||
type: 'button-toolbar',
|
||||
className: 'm-l-none',
|
||||
buttons: [
|
||||
{
|
||||
|
|
@ -223,7 +223,7 @@ export default {
|
|||
label: 'sm 弹框',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
size: "sm",
|
||||
size: 'sm',
|
||||
title: '提示',
|
||||
body: '这是个简单的弹框'
|
||||
}
|
||||
|
|
@ -244,7 +244,7 @@ export default {
|
|||
label: 'lg 弹框',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
size: "lg",
|
||||
size: 'lg',
|
||||
title: '提示',
|
||||
body: '这是个简单的弹框'
|
||||
}
|
||||
|
|
@ -255,12 +255,12 @@ export default {
|
|||
label: 'xl 弹框',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
size: "xl",
|
||||
size: 'xl',
|
||||
title: '提示',
|
||||
body: '这是个简单的弹框'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,26 +6,28 @@ const FormComponent = makeSchemaRenderer({
|
|||
mode: 'inline',
|
||||
wrapWithPanel: false,
|
||||
className: 'pull-right m-t-sm m-r',
|
||||
controls: [{
|
||||
"type": "input-group",
|
||||
"size": "sm",
|
||||
"controls": [
|
||||
controls: [
|
||||
{
|
||||
"type": "icon",
|
||||
"addOnclassName": "no-bg",
|
||||
"className": "text-sm",
|
||||
"icon": "search",
|
||||
"vendor": "iconfont"
|
||||
type: 'input-group',
|
||||
size: 'sm',
|
||||
controls: [
|
||||
{
|
||||
type: 'icon',
|
||||
addOnclassName: 'no-bg',
|
||||
className: 'text-sm',
|
||||
icon: 'search',
|
||||
vendor: 'iconfont'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"placeholder": "搜索文档",
|
||||
"inputClassName": "b-l-none p-l-none",
|
||||
"name": "docsearch"
|
||||
type: 'text',
|
||||
placeholder: '搜索文档',
|
||||
inputClassName: 'b-l-none p-l-none',
|
||||
name: 'docsearch'
|
||||
}
|
||||
]
|
||||
}]
|
||||
})
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export default class DocSearch extends React.Component {
|
||||
componentDidMount() {
|
||||
|
|
@ -35,13 +37,11 @@ export default class DocSearch extends React.Component {
|
|||
apiKey: '469f5cf3d54f9b86127970f913dc0725',
|
||||
indexName: 'gh_pages',
|
||||
inputSelector,
|
||||
debug: false,
|
||||
debug: false
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FormComponent showCode={false} theme={this.props.theme} />
|
||||
);
|
||||
return <FormComponent showCode={false} theme={this.props.theme} />;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,48 +3,61 @@ import Editor from '../../src/editor/Editor';
|
|||
import Switch from '../../src/components/Switch';
|
||||
import Button from '../../src/components/Button';
|
||||
import schema from './Form/Test';
|
||||
import { Portal } from 'react-overlays';
|
||||
import {Portal} from 'react-overlays';
|
||||
|
||||
export default class AMisSchemaEditor extends React.Component {
|
||||
|
||||
state = {
|
||||
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));
|
||||
|
||||
this.setState({
|
||||
schema: value
|
||||
});
|
||||
}
|
||||
handlePreviewChange = (preview) => {
|
||||
};
|
||||
handlePreviewChange = preview => {
|
||||
localStorage.setItem('editting_preview', preview ? 'true' : '');
|
||||
|
||||
this.setState({
|
||||
preview: !!preview
|
||||
});
|
||||
}
|
||||
};
|
||||
clearCache = () => {
|
||||
localStorage.removeItem('editting_schema');
|
||||
this.setState({
|
||||
schema: schema
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="h-full">
|
||||
<Portal container={() => document.querySelector('#headerBar')}>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</Portal>
|
||||
|
||||
|
||||
<Editor preview={this.state.preview} value={this.state.schema} onChange={this.handleChange} className="fix-settings" />
|
||||
<Editor
|
||||
preview={this.state.preview}
|
||||
value={this.state.schema}
|
||||
onChange={this.handleChange}
|
||||
className="fix-settings"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "Combo 示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'Combo 示例',
|
||||
body: [
|
||||
{
|
||||
type: "tabs",
|
||||
type: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
title: "基本用法",
|
||||
title: '基本用法',
|
||||
hash: 'basic',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
{
|
||||
|
|
@ -27,47 +27,47 @@ export default {
|
|||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo1",
|
||||
label: "组合多条多行",
|
||||
type: 'combo',
|
||||
name: 'combo1',
|
||||
label: '组合多条多行',
|
||||
multiple: true,
|
||||
multiLine: true,
|
||||
value: [{}],
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
label: "文本",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: '',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
label: "选项",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"],
|
||||
name: 'b',
|
||||
label: '选项',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c'],
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "button",
|
||||
label: "独立排序",
|
||||
level: "dark",
|
||||
className: "m-t-n-xs",
|
||||
size: "sm",
|
||||
actionType: "dialog",
|
||||
visibleOn: "data.combo1.length > 1",
|
||||
type: 'button',
|
||||
label: '独立排序',
|
||||
level: 'dark',
|
||||
className: 'm-t-n-xs',
|
||||
size: 'sm',
|
||||
actionType: 'dialog',
|
||||
visibleOn: 'data.combo1.length > 1',
|
||||
dialog: {
|
||||
title: "对 Combo 进行 拖拽排序",
|
||||
title: '对 Combo 进行 拖拽排序',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo1",
|
||||
type: 'combo',
|
||||
name: 'combo1',
|
||||
label: false,
|
||||
multiple: true,
|
||||
draggable: true,
|
||||
|
|
@ -76,9 +76,9 @@ export default {
|
|||
value: [{}],
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "static",
|
||||
tpl: "${a} - ${b}"
|
||||
name: 'a',
|
||||
type: 'static',
|
||||
tpl: '${a} - ${b}'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -86,38 +86,38 @@ export default {
|
|||
},
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
type: 'submit',
|
||||
mergeData: true,
|
||||
label: "确认",
|
||||
level: "primary"
|
||||
label: '确认',
|
||||
level: 'primary'
|
||||
},
|
||||
|
||||
{
|
||||
type: "button",
|
||||
actionType: "close",
|
||||
label: "取消"
|
||||
type: 'button',
|
||||
actionType: 'close',
|
||||
label: '取消'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo2",
|
||||
label: "组合多条单行",
|
||||
type: 'combo',
|
||||
name: 'combo2',
|
||||
label: '组合多条单行',
|
||||
multiple: true,
|
||||
value: [{}],
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -125,44 +125,44 @@ export default {
|
|||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo3",
|
||||
label: "组合单条多行",
|
||||
type: 'combo',
|
||||
name: 'combo3',
|
||||
label: '组合单条多行',
|
||||
multiLine: true,
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
label: "文本",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: '',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
label: "选项",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
label: '选项',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo4",
|
||||
label: "组合单条单行",
|
||||
type: 'combo',
|
||||
name: 'combo4',
|
||||
label: '组合单条单行',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: '',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -172,60 +172,60 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
title: "内联样式",
|
||||
title: '内联样式',
|
||||
hash: 'inline',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
controls: [
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo11",
|
||||
label: "组合多条多行内联",
|
||||
type: 'combo',
|
||||
name: 'combo11',
|
||||
label: '组合多条多行内联',
|
||||
multiple: true,
|
||||
multiLine: true,
|
||||
inline: true,
|
||||
value: [{}],
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
label: "文本",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
label: "选项",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
label: '选项',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo22",
|
||||
label: "组合多条单行内联",
|
||||
type: 'combo',
|
||||
name: 'combo22',
|
||||
label: '组合多条单行内联',
|
||||
multiple: true,
|
||||
inline: true,
|
||||
value: [{}],
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -233,44 +233,44 @@ export default {
|
|||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo33",
|
||||
label: "组合单条多行内联",
|
||||
type: 'combo',
|
||||
name: 'combo33',
|
||||
label: '组合单条多行内联',
|
||||
multiLine: true,
|
||||
inline: true,
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
label: "文本",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
label: "选项",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
label: '选项',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo44",
|
||||
label: "组合单条单行内联",
|
||||
type: 'combo',
|
||||
name: 'combo44',
|
||||
label: '组合单条单行内联',
|
||||
inline: true,
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"]
|
||||
name: 'b',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -280,36 +280,36 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
title: "唯一验证",
|
||||
title: '唯一验证',
|
||||
hash: 'unique',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo666",
|
||||
label: "组合多条唯一",
|
||||
type: 'combo',
|
||||
name: 'combo666',
|
||||
label: '组合多条唯一',
|
||||
multiple: true,
|
||||
value: [{}],
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: '',
|
||||
unique: true
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"],
|
||||
name: 'b',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c'],
|
||||
unique: true
|
||||
}
|
||||
]
|
||||
|
|
@ -320,38 +320,36 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
title: "可拖拽排序",
|
||||
title: '可拖拽排序',
|
||||
hash: 'sortable',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo777",
|
||||
label: "可拖拽排序",
|
||||
type: 'combo',
|
||||
name: 'combo777',
|
||||
label: '可拖拽排序',
|
||||
multiple: true,
|
||||
value: [{a: '1', b: "a"}, {a: '2', b: "b"}],
|
||||
value: [{a: '1', b: 'a'}, {a: '2', b: 'b'}],
|
||||
draggable: true,
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
unique: true
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"],
|
||||
name: 'b',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c'],
|
||||
unique: true
|
||||
}
|
||||
]
|
||||
|
|
@ -362,41 +360,39 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
title: "值打平",
|
||||
title: '值打平',
|
||||
hash: 'flat',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo888",
|
||||
label: "可打平只存储值",
|
||||
type: 'combo',
|
||||
name: 'combo888',
|
||||
label: '可打平只存储值',
|
||||
multiple: true,
|
||||
flat: true,
|
||||
value: ["red", "pink"],
|
||||
value: ['red', 'pink'],
|
||||
draggable: true,
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "color",
|
||||
placeholder: "选取颜色"
|
||||
name: 'a',
|
||||
type: 'color',
|
||||
placeholder: '选取颜色'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "combo888",
|
||||
label: "当前值",
|
||||
tpl: "<pre>${combo888|json}</pre>"
|
||||
type: 'static',
|
||||
name: 'combo888',
|
||||
label: '当前值',
|
||||
tpl: '<pre>${combo888|json}</pre>'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -404,16 +400,16 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
title: "条件",
|
||||
title: '条件',
|
||||
hash: 'conditions',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
'<p class="m-b-xl">添加时可选择类型，比如这个栗子，可以选择是文本类型还是数字类型</p>',
|
||||
|
|
@ -422,7 +418,7 @@ export default {
|
|||
name: 'combo-conditions1',
|
||||
label: '单选',
|
||||
value: {
|
||||
type: "number"
|
||||
type: 'number'
|
||||
},
|
||||
multiLine: true,
|
||||
conditions: [
|
||||
|
|
@ -430,21 +426,21 @@ export default {
|
|||
label: '文本',
|
||||
test: 'this.type === "text"',
|
||||
scaffold: {
|
||||
type: "text",
|
||||
label: "文本",
|
||||
name: ""
|
||||
type: 'text',
|
||||
label: '文本',
|
||||
name: ''
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
label: "名称",
|
||||
name: "label",
|
||||
type: "text"
|
||||
label: '名称',
|
||||
name: 'label',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "字段名",
|
||||
name: "name",
|
||||
type: "text"
|
||||
},
|
||||
label: '字段名',
|
||||
name: 'name',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -452,39 +448,39 @@ export default {
|
|||
label: '数字',
|
||||
test: 'this.type === "number"',
|
||||
scaffold: {
|
||||
type: "number",
|
||||
label: "数字",
|
||||
name: ""
|
||||
type: 'number',
|
||||
label: '数字',
|
||||
name: ''
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
label: "名称",
|
||||
name: "label",
|
||||
type: "text"
|
||||
label: '名称',
|
||||
name: 'label',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "字段名",
|
||||
name: "name",
|
||||
type: "text"
|
||||
label: '字段名',
|
||||
name: 'name',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "最小值",
|
||||
name: "min",
|
||||
type: "number"
|
||||
label: '最小值',
|
||||
name: 'min',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
label: "最大值",
|
||||
name: "max",
|
||||
type: "number"
|
||||
label: '最大值',
|
||||
name: 'max',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
label: "步长",
|
||||
name: "step",
|
||||
type: "number"
|
||||
label: '步长',
|
||||
name: 'step',
|
||||
type: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -493,7 +489,7 @@ export default {
|
|||
label: '多选',
|
||||
value: [
|
||||
{
|
||||
type: "text"
|
||||
type: 'text'
|
||||
}
|
||||
],
|
||||
multiLine: true,
|
||||
|
|
@ -504,21 +500,21 @@ export default {
|
|||
label: '文本',
|
||||
test: 'this.type === "text"',
|
||||
scaffold: {
|
||||
type: "text",
|
||||
label: "文本",
|
||||
name: ""
|
||||
type: 'text',
|
||||
label: '文本',
|
||||
name: ''
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
label: "名称",
|
||||
name: "label",
|
||||
type: "text"
|
||||
label: '名称',
|
||||
name: 'label',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "字段名",
|
||||
name: "name",
|
||||
type: "text"
|
||||
},
|
||||
label: '字段名',
|
||||
name: 'name',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -526,39 +522,39 @@ export default {
|
|||
label: '数字',
|
||||
test: 'this.type === "number"',
|
||||
scaffold: {
|
||||
type: "number",
|
||||
label: "数字",
|
||||
name: ""
|
||||
type: 'number',
|
||||
label: '数字',
|
||||
name: ''
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
label: "名称",
|
||||
name: "label",
|
||||
type: "text"
|
||||
label: '名称',
|
||||
name: 'label',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "字段名",
|
||||
name: "name",
|
||||
type: "text"
|
||||
label: '字段名',
|
||||
name: 'name',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "最小值",
|
||||
name: "min",
|
||||
type: "number"
|
||||
label: '最小值',
|
||||
name: 'min',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
label: "最大值",
|
||||
name: "max",
|
||||
type: "number"
|
||||
label: '最大值',
|
||||
name: 'max',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
label: "步长",
|
||||
name: "step",
|
||||
type: "number"
|
||||
label: '步长',
|
||||
name: 'step',
|
||||
type: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -566,22 +562,22 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
title: "Tabs",
|
||||
hash: "tabs",
|
||||
title: 'Tabs',
|
||||
hash: 'tabs',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo101",
|
||||
label: "组合多条多行",
|
||||
type: 'combo',
|
||||
name: 'combo101',
|
||||
label: '组合多条多行',
|
||||
multiple: true,
|
||||
multiLine: true,
|
||||
value: [{}],
|
||||
|
|
@ -590,79 +586,77 @@ export default {
|
|||
maxLength: 3,
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
label: "文本",
|
||||
type: "text",
|
||||
placeholder: "文本",
|
||||
name: 'a',
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
placeholder: '文本',
|
||||
value: '',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
label: "选项",
|
||||
type: "select",
|
||||
options: ["a", "b", "c"],
|
||||
name: 'b',
|
||||
label: '选项',
|
||||
type: 'select',
|
||||
options: ['a', 'b', 'c'],
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: "其他",
|
||||
title: '其他',
|
||||
hash: 'others',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
mode: 'horizontal',
|
||||
wrapWithPanel: false,
|
||||
className: "m-t",
|
||||
className: 'm-t',
|
||||
// debug: true,
|
||||
controls: [
|
||||
|
||||
|
||||
{
|
||||
type: "text",
|
||||
type: 'text',
|
||||
disabled: true,
|
||||
label: "父级值",
|
||||
name: "a_super",
|
||||
value: "123"
|
||||
label: '父级值',
|
||||
name: 'a_super',
|
||||
value: '123'
|
||||
},
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo999",
|
||||
label: "可获取父级数据",
|
||||
type: 'combo',
|
||||
name: 'combo999',
|
||||
label: '可获取父级数据',
|
||||
multiple: true,
|
||||
canAccessSuperData: true,
|
||||
controls: [
|
||||
{
|
||||
name: "a_super",
|
||||
type: "text"
|
||||
name: 'a_super',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "combo",
|
||||
name: "combo9999",
|
||||
label: "显示序号",
|
||||
type: 'combo',
|
||||
name: 'combo9999',
|
||||
label: '显示序号',
|
||||
multiple: true,
|
||||
controls: [
|
||||
{
|
||||
type: "tpl",
|
||||
tpl: "<%= data.index + 1%>",
|
||||
className: "p-t-xs",
|
||||
mode: "inline"
|
||||
type: 'tpl',
|
||||
tpl: '<%= data.index + 1%>',
|
||||
className: 'p-t-xs',
|
||||
mode: 'inline'
|
||||
},
|
||||
{
|
||||
name: "a",
|
||||
type: "text"
|
||||
name: 'a',
|
||||
type: 'text'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,12 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
FormItem,
|
||||
Renderer
|
||||
} from '../../../src/index';
|
||||
import {FormItem, Renderer} from '../../../src/index';
|
||||
|
||||
@FormItem({
|
||||
type: 'custom'
|
||||
})
|
||||
class MyFormItem extends React.Component {
|
||||
render() {
|
||||
const {
|
||||
value,
|
||||
onChange
|
||||
} = this.props;
|
||||
const {value, onChange} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -20,14 +14,19 @@ class MyFormItem extends React.Component {
|
|||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@Renderer({
|
||||
test: /(^|\/)my\-renderer$/,
|
||||
test: /(^|\/)my\-renderer$/
|
||||
})
|
||||
class CustomRenderer extends React.Component {
|
||||
render() {
|
||||
|
|
@ -39,17 +38,17 @@ class CustomRenderer extends React.Component {
|
|||
}
|
||||
|
||||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "自定义组件示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '自定义组件示例',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
mode: "horizontal",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交",
|
||||
type: 'submit',
|
||||
label: '提交',
|
||||
primary: true
|
||||
}
|
||||
],
|
||||
|
|
@ -62,7 +61,12 @@ export default {
|
|||
|
||||
<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>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
definitions: {
|
||||
options: {
|
||||
type: 'combo',
|
||||
|
|
@ -10,25 +10,25 @@ export default {
|
|||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
label: "名称",
|
||||
name: "label",
|
||||
type: "text",
|
||||
label: '名称',
|
||||
name: 'label',
|
||||
type: 'text',
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
label: "值",
|
||||
name: "value",
|
||||
type: "text",
|
||||
label: '值',
|
||||
name: 'value',
|
||||
type: 'text',
|
||||
required: true
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
$ref: 'options',
|
||||
label: "子选项",
|
||||
name: "children",
|
||||
label: '子选项',
|
||||
name: 'children',
|
||||
addButtonText: '新增子选项'
|
||||
}
|
||||
]
|
||||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
typeSwitchable: false,
|
||||
conditions: [
|
||||
{
|
||||
label: "条件",
|
||||
label: '条件',
|
||||
test: "!data.hasOwnProperty('connect')",
|
||||
scaffold: {},
|
||||
controls: [
|
||||
|
|
@ -119,16 +119,16 @@ export default {
|
|||
},
|
||||
{
|
||||
label: 'in',
|
||||
value: 'in',
|
||||
value: 'in'
|
||||
},
|
||||
{
|
||||
label: 'not in',
|
||||
value: 'not in',
|
||||
value: 'not in'
|
||||
},
|
||||
{
|
||||
label: '!=',
|
||||
value: '!='
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -137,7 +137,8 @@ export default {
|
|||
type: 'text',
|
||||
placeholder: '值',
|
||||
required: true,
|
||||
visibleOn: '~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)'
|
||||
visibleOn:
|
||||
'~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -148,7 +149,7 @@ export default {
|
|||
items: {
|
||||
type: 'text',
|
||||
placeholder: '值',
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
visibleOn: '~["in", "not in"].indexOf(this.opt)'
|
||||
}
|
||||
|
|
@ -158,15 +159,15 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
label: "组合",
|
||||
label: '组合',
|
||||
test: "data.hasOwnProperty('connect')",
|
||||
scaffold: {
|
||||
connect: "&",
|
||||
connect: '&',
|
||||
exprs: [{}]
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
type: "button-group",
|
||||
type: 'button-group',
|
||||
name: 'connect',
|
||||
value: '&',
|
||||
clearable: false,
|
||||
|
|
@ -200,7 +201,7 @@ export default {
|
|||
multiLine: true,
|
||||
controls: [
|
||||
{
|
||||
type: "button-group",
|
||||
type: 'button-group',
|
||||
name: 'connect',
|
||||
value: '&',
|
||||
// label: "连接方式",
|
||||
|
|
@ -241,10 +242,12 @@ export default {
|
|||
{
|
||||
$ref: 'options',
|
||||
name: 'options',
|
||||
value: [{
|
||||
value: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1'
|
||||
}],
|
||||
}
|
||||
],
|
||||
minLength: 1,
|
||||
label: '选项配置'
|
||||
}
|
||||
|
|
@ -262,12 +265,12 @@ export default {
|
|||
label: 'Query'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "q",
|
||||
label: "当前值",
|
||||
tpl: "<pre>${q|json}</pre>"
|
||||
type: 'static',
|
||||
name: 'q',
|
||||
label: '当前值',
|
||||
tpl: '<pre>${q|json}</pre>'
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
import React from 'react';
|
||||
|
||||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "Editor",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'Editor',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
controls: [
|
||||
{
|
||||
name: "javascript",
|
||||
type: "editor",
|
||||
label: "Javascript",
|
||||
name: 'javascript',
|
||||
type: 'editor',
|
||||
label: 'Javascript',
|
||||
language: 'javascript',
|
||||
value: "console.log(1, 2, 3);"
|
||||
value: 'console.log(1, 2, 3);'
|
||||
},
|
||||
|
||||
{
|
||||
name: "html",
|
||||
type: "editor",
|
||||
name: 'html',
|
||||
type: 'editor',
|
||||
language: 'html',
|
||||
label: "Html",
|
||||
value: "<html><head><title>Hello</title></head><body><p>world</p></body></html>"
|
||||
label: 'Html',
|
||||
value:
|
||||
'<html><head><title>Hello</title></head><body><p>world</p></body></html>'
|
||||
},
|
||||
|
||||
{
|
||||
name: "css",
|
||||
type: "editor",
|
||||
name: 'css',
|
||||
type: 'editor',
|
||||
language: 'css',
|
||||
label: "CSS",
|
||||
value: "body {color: red;}"
|
||||
label: 'CSS',
|
||||
value: 'body {color: red;}'
|
||||
},
|
||||
|
||||
{
|
||||
name: "json",
|
||||
type: "editor",
|
||||
name: 'json',
|
||||
type: 'editor',
|
||||
language: 'json',
|
||||
label: "JSON",
|
||||
label: 'JSON',
|
||||
value: `{"a": 1, "b": 2}`
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "FieldSet 示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'FieldSet 示例',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
mode: "horizontal",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交",
|
||||
type: 'submit',
|
||||
label: '提交',
|
||||
primary: true
|
||||
}
|
||||
],
|
||||
|
|
@ -25,36 +25,36 @@ export default {
|
|||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: false,
|
||||
placeholder: "Password"
|
||||
placeholder: 'Password'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: false,
|
||||
option: "Remember me"
|
||||
option: 'Remember me'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -66,79 +66,79 @@ export default {
|
|||
type: 'fieldSet',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
option: "记住我"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
option: '记住我'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "FieldSet 样式集",
|
||||
type: "form",
|
||||
title: 'FieldSet 样式集',
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
title: "超级小",
|
||||
title: '超级小',
|
||||
type: 'fieldSet',
|
||||
className: "fieldset-xs",
|
||||
className: 'fieldset-xs',
|
||||
controls: [
|
||||
{
|
||||
type: "plain",
|
||||
text: "文本 ..."
|
||||
type: 'plain',
|
||||
text: '文本 ...'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "小尺寸",
|
||||
title: '小尺寸',
|
||||
type: 'fieldSet',
|
||||
className: "fieldset-sm",
|
||||
className: 'fieldset-sm',
|
||||
controls: [
|
||||
{
|
||||
type: "plain",
|
||||
text: "文本 ..."
|
||||
type: 'plain',
|
||||
text: '文本 ...'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "正常尺寸",
|
||||
title: '正常尺寸',
|
||||
type: 'fieldSet',
|
||||
className: "fieldset",
|
||||
className: 'fieldset',
|
||||
controls: [
|
||||
{
|
||||
type: "plain",
|
||||
text: "文本 ..."
|
||||
type: 'plain',
|
||||
text: '文本 ...'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "中大尺寸",
|
||||
title: '中大尺寸',
|
||||
type: 'fieldSet',
|
||||
className: "fieldset-md",
|
||||
className: 'fieldset-md',
|
||||
controls: [
|
||||
{
|
||||
type: "plain",
|
||||
text: "文本 ..."
|
||||
type: 'plain',
|
||||
text: '文本 ...'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "超大尺寸",
|
||||
title: '超大尺寸',
|
||||
type: 'fieldSet',
|
||||
className: "fieldset-lg",
|
||||
className: 'fieldset-lg',
|
||||
controls: [
|
||||
{
|
||||
type: "plain",
|
||||
text: "文本 ..."
|
||||
type: 'plain',
|
||||
text: '文本 ...'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,96 +1,96 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "FieldSet In Tabs",
|
||||
remark: "",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'FieldSet In Tabs',
|
||||
remark: '',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
collapsable: true,
|
||||
tabs: [
|
||||
{
|
||||
title: "Tab A",
|
||||
title: 'Tab A',
|
||||
fieldSet: [
|
||||
{
|
||||
title: "Group A",
|
||||
title: 'Group A',
|
||||
tabs: [
|
||||
{
|
||||
title: "SubTab A",
|
||||
title: 'SubTab A',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "SubTab B",
|
||||
title: 'SubTab B',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Group B",
|
||||
title: 'Group B',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Tab B",
|
||||
title: 'Tab B',
|
||||
fieldSet: [
|
||||
{
|
||||
title: "Group A",
|
||||
title: 'Group A',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Group B",
|
||||
title: 'Group B',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Text"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Text'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,127 +1,127 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "公式示例",
|
||||
"body": [
|
||||
"<p>通过公式，可以动态的设置目标值。</p>",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '公式示例',
|
||||
body: [
|
||||
'<p>通过公式，可以动态的设置目标值。</p>',
|
||||
{
|
||||
"type": "form",
|
||||
title: "自动应用",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
type: 'form',
|
||||
title: '自动应用',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
controls: [
|
||||
{
|
||||
"type": "number",
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
type: 'number',
|
||||
name: 'a',
|
||||
label: 'A'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "number",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
type: 'number',
|
||||
name: 'b',
|
||||
label: 'B'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "number",
|
||||
"name": "sum",
|
||||
"label": "和",
|
||||
"disabled": true,
|
||||
type: 'number',
|
||||
name: 'sum',
|
||||
label: '和',
|
||||
disabled: true,
|
||||
description: '自动计算 A + B'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "formula",
|
||||
"name": "sum",
|
||||
"value": 0,
|
||||
"formula": "a + b"
|
||||
type: 'formula',
|
||||
name: 'sum',
|
||||
value: 0,
|
||||
formula: 'a + b'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "form",
|
||||
title: "手动应用",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "number",
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "number",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
},
|
||||
|
||||
{
|
||||
type: "group",
|
||||
type: 'form',
|
||||
title: '手动应用',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
controls: [
|
||||
{
|
||||
"type": "number",
|
||||
"name": "sum",
|
||||
"label": "和",
|
||||
"disabled": true,
|
||||
"columnClassName": "col-sm-11",
|
||||
type: 'number',
|
||||
name: 'a',
|
||||
label: 'A'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "计算",
|
||||
"columnClassName": "col-sm-1 v-bottom",
|
||||
"target": "theFormula"
|
||||
type: 'number',
|
||||
name: 'b',
|
||||
label: 'B'
|
||||
},
|
||||
|
||||
{
|
||||
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",
|
||||
"name": "sum",
|
||||
"id": "theFormula",
|
||||
"value": 0,
|
||||
"formula": "a + b",
|
||||
"initSet": false,
|
||||
"autoSet": false
|
||||
type: 'formula',
|
||||
name: 'sum',
|
||||
id: 'theFormula',
|
||||
value: 0,
|
||||
formula: 'a + b',
|
||||
initSet: false,
|
||||
autoSet: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "form",
|
||||
title: "条件应用",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
type: 'form',
|
||||
title: '条件应用',
|
||||
api: '/api/mock2/form/saveForm',
|
||||
controls: [
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "radios",
|
||||
"inline": true,
|
||||
"label": "radios",
|
||||
"options": [
|
||||
type: 'radios',
|
||||
name: 'radios',
|
||||
inline: true,
|
||||
label: 'radios',
|
||||
options: [
|
||||
{
|
||||
"label": 'a',
|
||||
"value": 'a'
|
||||
label: 'a',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
"label": 'b',
|
||||
"value": 'b'
|
||||
},
|
||||
label: 'b',
|
||||
value: 'b'
|
||||
}
|
||||
],
|
||||
"description": 'radios 变化会自动清空 B'
|
||||
description: 'radios 变化会自动清空 B'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
type: 'text',
|
||||
name: 'b',
|
||||
label: 'B'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "formula",
|
||||
"name": "b",
|
||||
"value": 'some string',
|
||||
"formula": "''",
|
||||
"condition": '${radios}',
|
||||
"initSet": false,
|
||||
type: 'formula',
|
||||
name: 'b',
|
||||
value: 'some string',
|
||||
formula: "''",
|
||||
condition: '${radios}',
|
||||
initSet: false
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,94 +1,90 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "其他类型演示",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '其他类型演示',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "Hint demo",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: 'Hint demo',
|
||||
mode: 'horizontal',
|
||||
horizontal: {
|
||||
leftFixed: true
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
name: "button",
|
||||
type: "button",
|
||||
label: "ID",
|
||||
value: "",
|
||||
name: 'button',
|
||||
type: 'button',
|
||||
label: 'ID',
|
||||
value: '',
|
||||
size: 'xs',
|
||||
hint: '比如输入 a-xxxx-xxx'
|
||||
},
|
||||
|
||||
{
|
||||
"type": "input-group",
|
||||
"size": "md",
|
||||
"label": "Icon 组合",
|
||||
"controls": [
|
||||
type: 'input-group',
|
||||
size: 'md',
|
||||
label: 'Icon 组合',
|
||||
controls: [
|
||||
{
|
||||
"type": "icon",
|
||||
"addOnclassName": "no-bg",
|
||||
className: "text-sm",
|
||||
"icon": "search",
|
||||
"vendor": "iconfont"
|
||||
type: 'icon',
|
||||
addOnclassName: 'no-bg',
|
||||
className: 'text-sm',
|
||||
icon: 'search',
|
||||
vendor: 'iconfont'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"placeholder": "搜索作业ID/名称",
|
||||
"inputClassName": "b-l-none p-l-none",
|
||||
"name": "jobName"
|
||||
type: 'text',
|
||||
placeholder: '搜索作业ID/名称',
|
||||
inputClassName: 'b-l-none p-l-none',
|
||||
name: 'jobName'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "ID",
|
||||
value: "",
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'ID',
|
||||
value: '',
|
||||
size: 'xs',
|
||||
hint: '比如输入 a-xxxx-xxx'
|
||||
},
|
||||
|
||||
{
|
||||
name: "b",
|
||||
type: "text",
|
||||
label: "ID",
|
||||
value: "",
|
||||
name: 'b',
|
||||
type: 'text',
|
||||
label: 'ID',
|
||||
value: '',
|
||||
size: 'sm',
|
||||
hint: '比如输入 a-xxxx-xxx'
|
||||
},
|
||||
|
||||
{
|
||||
name: "c",
|
||||
type: "text",
|
||||
label: "ID",
|
||||
value: "",
|
||||
name: 'c',
|
||||
type: 'text',
|
||||
label: 'ID',
|
||||
value: '',
|
||||
size: 'md',
|
||||
hint: '比如输入 a-xxxx-xxx'
|
||||
},
|
||||
|
||||
{
|
||||
name: "d",
|
||||
type: "text",
|
||||
label: "ID",
|
||||
value: "",
|
||||
name: 'd',
|
||||
type: 'text',
|
||||
label: 'ID',
|
||||
value: '',
|
||||
size: 'lg',
|
||||
hint: '比如输入 a-xxxx-xxx'
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: "tag",
|
||||
type: "tag",
|
||||
label: "Tag",
|
||||
name: 'tag',
|
||||
type: 'tag',
|
||||
label: 'Tag',
|
||||
size: 'md',
|
||||
clearable: true,
|
||||
placeholder: "多个标签以逗号分隔",
|
||||
options: [
|
||||
"周小度",
|
||||
"杜小度"
|
||||
]
|
||||
placeholder: '多个标签以逗号分隔',
|
||||
options: ['周小度', '杜小度']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,78 +1,78 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "表单各种展示模式汇总",
|
||||
remark: "展示各种模式的 Form",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '表单各种展示模式汇总',
|
||||
remark: '展示各种模式的 Form',
|
||||
body: [
|
||||
{
|
||||
type: "grid",
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "常规模式",
|
||||
mode: "normal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '常规模式',
|
||||
mode: 'normal',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
required: true,
|
||||
placeholder: "请输入邮箱",
|
||||
label: "邮箱",
|
||||
placeholder: '请输入邮箱',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
placeholder: "请输入密码",
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住登录"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
btnClassName: "btn-default",
|
||||
label: "登录"
|
||||
type: 'submit',
|
||||
btnClassName: 'btn-default',
|
||||
label: '登录'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "常规模式 input md 尺寸",
|
||||
mode: "normal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '常规模式 input md 尺寸',
|
||||
mode: 'normal',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
required: true,
|
||||
placeholder: "请输入邮箱",
|
||||
label: "邮箱",
|
||||
placeholder: '请输入邮箱',
|
||||
label: '邮箱',
|
||||
size: 'md',
|
||||
remark: 'xxxx',
|
||||
hint: 'bla bla bla'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
placeholder: "请输入密码",
|
||||
placeholder: '请输入密码',
|
||||
size: 'md'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住登录"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
btnClassName: "btn-default",
|
||||
label: "登录"
|
||||
type: 'submit',
|
||||
btnClassName: 'btn-default',
|
||||
label: '登录'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -80,13 +80,13 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "grid",
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "水平模式，左右摆放 左右比率分配 ",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '水平模式，左右摆放 左右比率分配 ',
|
||||
mode: 'horizontal',
|
||||
autoFocus: false,
|
||||
horizontal: {
|
||||
left: 'col-sm-2',
|
||||
|
|
@ -95,302 +95,300 @@ export default {
|
|||
},
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
required: true,
|
||||
desc: "表单描述文字",
|
||||
|
||||
desc: '表单描述文字'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "密码",
|
||||
placeholder: "输入密码",
|
||||
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
placeholder: '输入密码'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住登录"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "水平模式，左右摆放 左侧固定宽度 input md 尺寸",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '水平模式，左右摆放 左侧固定宽度 input md 尺寸',
|
||||
mode: 'horizontal',
|
||||
autoFocus: false,
|
||||
horizontal: {
|
||||
leftFixed: 'xs'
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
required: true,
|
||||
desc: "表单描述文字",
|
||||
desc: '表单描述文字',
|
||||
size: 'md',
|
||||
remark: 'xxxx',
|
||||
hint: 'bla bla bla'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "密码",
|
||||
placeholder: "输入密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
placeholder: '输入密码',
|
||||
size: 'md'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住登录"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "内联模式",
|
||||
mode: "inline",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '内联模式',
|
||||
mode: 'inline',
|
||||
autoFocus: false,
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "Enter Email",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: 'Enter Email',
|
||||
label: '邮箱',
|
||||
size: 'auto'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
placeholder: "密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
placeholder: '密码',
|
||||
size: 'auto',
|
||||
remark: 'Bla bla bla'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住登录",
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录',
|
||||
size: 'auto'
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
label: "登录"
|
||||
type: 'submit',
|
||||
label: '登录'
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "导出",
|
||||
url: "http://www.baidu.com/",
|
||||
level: "success"
|
||||
type: 'button',
|
||||
label: '导出',
|
||||
url: 'http://www.baidu.com/',
|
||||
level: 'success'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "常规模式下用数组包起来还能控制一行显示多个",
|
||||
mode: "normal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '常规模式下用数组包起来还能控制一行显示多个',
|
||||
mode: 'normal',
|
||||
autoFocus: false,
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "name",
|
||||
placeholder: "请输入...",
|
||||
label: "名字",
|
||||
type: 'text',
|
||||
name: 'name',
|
||||
placeholder: '请输入...',
|
||||
label: '名字',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "输入邮箱",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '输入邮箱',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email2",
|
||||
type: 'email',
|
||||
name: 'email2',
|
||||
mode: 'inline',
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password2",
|
||||
label: "密码",
|
||||
type: 'password',
|
||||
name: 'password2',
|
||||
label: '密码',
|
||||
mode: 'inline',
|
||||
placeholder: "请输入密码",
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email3",
|
||||
type: 'email',
|
||||
name: 'email3',
|
||||
mode: 'inline',
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password3",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password3',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email4",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email4',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password4",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password4',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
mode: 'inline',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住我"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住我'
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
btnClassName: "btn-default",
|
||||
label: "提交"
|
||||
type: 'submit',
|
||||
btnClassName: 'btn-default',
|
||||
label: '提交'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "水平模式用数组包起来也能控制一行显示多个",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '水平模式用数组包起来也能控制一行显示多个',
|
||||
mode: 'horizontal',
|
||||
autoFocus: false,
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email2",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email2',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password2",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password2',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email3",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email3',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password3",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password3',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password3",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password3',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email4",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email4',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱',
|
||||
size: 'full',
|
||||
columnClassName: 'col-sm-6',
|
||||
horizontal: {
|
||||
|
|
@ -399,158 +397,158 @@ export default {
|
|||
}
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password4",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password4',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
mode: 'inline',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
label: "邮箱",
|
||||
label: '邮箱',
|
||||
gap: 'xs',
|
||||
controls: [
|
||||
{
|
||||
label: false,
|
||||
type: "email",
|
||||
name: "email5",
|
||||
placeholder: "请输入邮箱地址",
|
||||
type: 'email',
|
||||
name: 'email5',
|
||||
placeholder: '请输入邮箱地址',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password5",
|
||||
label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
type: 'password',
|
||||
name: 'password5',
|
||||
label: '密码',
|
||||
placeholder: '请输入密码',
|
||||
mode: 'inline',
|
||||
size: 'full'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
label: "邮箱",
|
||||
label: '邮箱',
|
||||
description: 'bla bla',
|
||||
gap: 'xs',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email6",
|
||||
placeholder: "请输入邮箱地址",
|
||||
type: 'email',
|
||||
name: 'email6',
|
||||
placeholder: '请输入邮箱地址',
|
||||
mode: 'inline'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password6",
|
||||
type: 'password',
|
||||
name: 'password6',
|
||||
// label: "密码",
|
||||
placeholder: "请输入密码",
|
||||
labelClassName: "w-auto p-r-none",
|
||||
placeholder: '请输入密码',
|
||||
labelClassName: 'w-auto p-r-none',
|
||||
mode: 'inline'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
label: "邮箱",
|
||||
label: '邮箱',
|
||||
description: 'bla bla',
|
||||
direction: "vertical",
|
||||
direction: 'vertical',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email9",
|
||||
type: 'email',
|
||||
name: 'email9',
|
||||
mode: 'normal',
|
||||
placeholder: "请输入邮箱地址",
|
||||
placeholder: '请输入邮箱地址',
|
||||
inline: true,
|
||||
description: 'Bla blamfejkf fdjk',
|
||||
description: 'Bla blamfejkf fdjk'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password9",
|
||||
type: 'password',
|
||||
name: 'password9',
|
||||
mode: 'normal',
|
||||
placeholder: "请输入密码",
|
||||
labelClassName: "w-auto p-r-none",
|
||||
placeholder: '请输入密码',
|
||||
labelClassName: 'w-auto p-r-none'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住我"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住我'
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
btnClassName: "btn-default",
|
||||
label: "Submit"
|
||||
type: 'submit',
|
||||
btnClassName: 'btn-default',
|
||||
label: 'Submit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "Inline form 用数组包起来还能控制一行显示多个",
|
||||
mode: "inline",
|
||||
type: 'form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: 'Inline form 用数组包起来还能控制一行显示多个',
|
||||
mode: 'inline',
|
||||
submitText: null,
|
||||
autoFocus: false,
|
||||
controls: [
|
||||
[
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "Enter Email",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: 'Enter Email',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
placeholder: "Password",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
placeholder: 'Password',
|
||||
size: 'full'
|
||||
}
|
||||
],
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
[
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "Enter Email",
|
||||
label: "邮箱",
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: 'Enter Email',
|
||||
label: '邮箱',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
label: "记住我",
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住我',
|
||||
size: 'full'
|
||||
},
|
||||
{
|
||||
type: 'button-toolbar',
|
||||
buttons: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "登录"
|
||||
type: 'submit',
|
||||
label: '登录'
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "导出",
|
||||
url: "http://www.baidu.com/",
|
||||
level: "success"
|
||||
type: 'button',
|
||||
label: '导出',
|
||||
url: 'http://www.baidu.com/',
|
||||
level: 'success'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,89 +1,89 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "显隐切换示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '显隐切换示例',
|
||||
body: [
|
||||
{
|
||||
name: "hiddenOn",
|
||||
type: "form",
|
||||
mode: "horizontal",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "Hide On 和 disabledOn 示例",
|
||||
name: 'hiddenOn',
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: 'Hide On 和 disabledOn 示例',
|
||||
controls: [
|
||||
{
|
||||
type: "radios",
|
||||
name: "type",
|
||||
label: "类型选择",
|
||||
type: 'radios',
|
||||
name: 'type',
|
||||
label: '类型选择',
|
||||
inline: true,
|
||||
value: "1",
|
||||
value: '1',
|
||||
options: [
|
||||
{
|
||||
label: "类型 1",
|
||||
value: "1"
|
||||
label: '类型 1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: "类型 2",
|
||||
value: "2"
|
||||
label: '类型 2',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: "类型 3",
|
||||
value: "3"
|
||||
label: '类型 3',
|
||||
value: '3'
|
||||
}
|
||||
],
|
||||
description: '<span class="text-danger">请切换类型来看效果</span>'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
label: "所有可见",
|
||||
name: "text1"
|
||||
type: 'text',
|
||||
label: '所有可见',
|
||||
name: 'text1'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
label: "类型2 可见",
|
||||
hiddenOn: "data.type != 2",
|
||||
name: "text2"
|
||||
type: 'text',
|
||||
label: '类型2 可见',
|
||||
hiddenOn: 'data.type != 2',
|
||||
name: 'text2'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
label: "类型3 不可点",
|
||||
disabledOn: "data.type == 3",
|
||||
name: "text3"
|
||||
type: 'text',
|
||||
label: '类型3 不可点',
|
||||
disabledOn: 'data.type == 3',
|
||||
name: 'text3'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
type: 'text',
|
||||
required: true,
|
||||
label: "必填字段",
|
||||
name: "test4"
|
||||
label: '必填字段',
|
||||
name: 'test4'
|
||||
},
|
||||
{
|
||||
type: "button-toolbar",
|
||||
type: 'button-toolbar',
|
||||
buttons: [
|
||||
{
|
||||
type: "submit",
|
||||
disabledOn: "data.type == 1",
|
||||
label: "类型1不可点"
|
||||
type: 'submit',
|
||||
disabledOn: 'data.type == 1',
|
||||
label: '类型1不可点'
|
||||
},
|
||||
{
|
||||
type: "reset",
|
||||
label: "类型3出现且不可点",
|
||||
visibleOn: "data.type == 3",
|
||||
disabledOn: "data.type == 3",
|
||||
type: 'reset',
|
||||
label: '类型3出现且不可点',
|
||||
visibleOn: 'data.type == 3',
|
||||
disabledOn: 'data.type == 3'
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
label: "Baidu",
|
||||
href: "http://www.baidu.com?a=1&b=$test4"
|
||||
type: 'button',
|
||||
label: 'Baidu',
|
||||
href: 'http://www.baidu.com?a=1&b=$test4'
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
actionType: "ajax",
|
||||
label: "No Submit",
|
||||
action: "/api/mock2/saveForm?waitSeconds=5"
|
||||
type: 'button',
|
||||
actionType: 'ajax',
|
||||
label: 'No Submit',
|
||||
action: '/api/mock2/saveForm?waitSeconds=5'
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
actionType: "ajax",
|
||||
label: "Submit",
|
||||
action: "/api/mock2/saveForm?waitSeconds=5"
|
||||
type: 'submit',
|
||||
actionType: 'ajax',
|
||||
label: 'Submit',
|
||||
action: '/api/mock2/saveForm?waitSeconds=5'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +1,89 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "动态拉取选项",
|
||||
name: "page-form-remote",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '动态拉取选项',
|
||||
name: 'page-form-remote',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
title: "动态表单元素示例",
|
||||
name: "demo-form",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
title: '动态表单元素示例',
|
||||
name: 'demo-form',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
mode: 'horizontal',
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交"
|
||||
type: 'submit',
|
||||
label: '提交'
|
||||
}
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
name: "select",
|
||||
type: "select",
|
||||
label: "动态选项",
|
||||
source: "/api/mock2/form/getOptions?waitSeconds=1",
|
||||
name: 'select',
|
||||
type: 'select',
|
||||
label: '动态选项',
|
||||
source: '/api/mock2/form/getOptions?waitSeconds=1',
|
||||
description: '通过接口一口气拉取选项',
|
||||
clearable: true,
|
||||
searchable: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "select2",
|
||||
type: "select",
|
||||
label: "选项自动补全",
|
||||
autoComplete: "/api/mock2/options/autoComplete?term=$term",
|
||||
placeholder: "请输入",
|
||||
name: 'select2',
|
||||
type: 'select',
|
||||
label: '选项自动补全',
|
||||
autoComplete: '/api/mock2/options/autoComplete?term=$term',
|
||||
placeholder: '请输入',
|
||||
description: '通过接口自动补全'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "text",
|
||||
label: "文本提示",
|
||||
source: "/api/mock2/form/getOptions?waitSeconds=1",
|
||||
type: 'text',
|
||||
name: 'text',
|
||||
label: '文本提示',
|
||||
source: '/api/mock2/form/getOptions?waitSeconds=1',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "text2",
|
||||
type: "text",
|
||||
label: "文本自动补全",
|
||||
name: 'text2',
|
||||
type: 'text',
|
||||
label: '文本自动补全',
|
||||
clearable: true,
|
||||
autoComplete: "/api/mock2/options/autoComplete2?term=$term",
|
||||
autoComplete: '/api/mock2/options/autoComplete2?term=$term',
|
||||
description: '通过接口自动补全'
|
||||
},
|
||||
{
|
||||
name: "chained",
|
||||
type: "chained-select",
|
||||
label: "级联选项",
|
||||
name: 'chained',
|
||||
type: 'chained-select',
|
||||
label: '级联选项',
|
||||
source:
|
||||
"/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1",
|
||||
desc: "无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.",
|
||||
value: "a,b"
|
||||
'/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1',
|
||||
desc:
|
||||
'无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.',
|
||||
value: 'a,b'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "tree",
|
||||
type: "tree",
|
||||
label: "动态树",
|
||||
source: "/api/mock2/options/tree?waitSeconds=1"
|
||||
name: 'tree',
|
||||
type: 'tree',
|
||||
label: '动态树',
|
||||
source: '/api/mock2/options/tree?waitSeconds=1'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "matrix",
|
||||
type: "matrix",
|
||||
label: "动态矩阵开关",
|
||||
source: "/api/mock2/options/matrix?waitSeconds=1"
|
||||
name: 'matrix',
|
||||
type: 'matrix',
|
||||
label: '动态矩阵开关',
|
||||
source: '/api/mock2/options/matrix?waitSeconds=1'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "富文本编辑器",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '富文本编辑器',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "Form elements",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: 'Form elements',
|
||||
controls: [
|
||||
{
|
||||
name: "html",
|
||||
type: "rich-text",
|
||||
label: "富文本",
|
||||
value: "<p>Just do <code>IT</code></p>"
|
||||
name: 'html',
|
||||
type: 'rich-text',
|
||||
label: '富文本',
|
||||
value: '<p>Just do <code>IT</code></p>'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,58 +3,56 @@ import TitleBar from '../../../src/components/TitleBar';
|
|||
import {render} from '../../../src/index';
|
||||
|
||||
const Schema = {
|
||||
"title": "Person",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"firstName": {
|
||||
"title": "First Name",
|
||||
"type": "string"
|
||||
title: 'Person',
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstName: {
|
||||
title: 'First Name',
|
||||
type: 'string'
|
||||
},
|
||||
"lastName": {
|
||||
"type": "string"
|
||||
lastName: {
|
||||
type: 'string'
|
||||
},
|
||||
"age": {
|
||||
"description": "Age in years",
|
||||
"type": "integer",
|
||||
"minimum": 0
|
||||
age: {
|
||||
description: 'Age in years',
|
||||
type: 'integer',
|
||||
minimum: 0
|
||||
},
|
||||
"tag": {
|
||||
"type": "array",
|
||||
"description": "Tags",
|
||||
"default": ["IT"],
|
||||
"items": {
|
||||
"type": "text"
|
||||
tag: {
|
||||
type: 'array',
|
||||
description: 'Tags',
|
||||
default: ['IT'],
|
||||
items: {
|
||||
type: 'text'
|
||||
}
|
||||
},
|
||||
|
||||
"clients": {
|
||||
"type": "array",
|
||||
"description": "Tags",
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"firstName": {
|
||||
"title": "First Name",
|
||||
"type": "string"
|
||||
clients: {
|
||||
type: 'array',
|
||||
description: 'Tags',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstName: {
|
||||
title: 'First Name',
|
||||
type: 'string'
|
||||
},
|
||||
"lastName": {
|
||||
"type": "string"
|
||||
lastName: {
|
||||
type: 'string'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"required": ["firstName", "lastName"]
|
||||
required: ['firstName', 'lastName']
|
||||
};
|
||||
|
||||
function property2control(property, key, schema) {
|
||||
const requiredList= schema.required || [];
|
||||
const requiredList = schema.required || [];
|
||||
const rest = {};
|
||||
const validations = {};
|
||||
let type = 'text';
|
||||
|
||||
|
||||
|
||||
if (property.type === 'integer') {
|
||||
type = 'number';
|
||||
|
||||
|
|
@ -103,9 +101,9 @@ function JSONSchme2AMisSchema(schema) {
|
|||
return {
|
||||
title: schema.title,
|
||||
type: 'form',
|
||||
mode: "horizontal",
|
||||
mode: 'horizontal',
|
||||
controls: makeControls(schema.properties, schema)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const amisFormSchema = JSONSchme2AMisSchema(Schema);
|
||||
|
|
@ -121,7 +119,8 @@ export default class JSONSchemaForm extends React.Component {
|
|||
title: '',
|
||||
body: {
|
||||
...amisFormSchema,
|
||||
onChange: values => this.setState({
|
||||
onChange: values =>
|
||||
this.setState({
|
||||
data: {
|
||||
...values
|
||||
}
|
||||
|
|
@ -137,7 +136,9 @@ export default class JSONSchemaForm extends React.Component {
|
|||
<div className="wrapper">
|
||||
<div>
|
||||
<h3>Schema</h3>
|
||||
<pre><code>{JSON.stringify(Schema, null, 2)}</code></pre>
|
||||
<pre>
|
||||
<code>{JSON.stringify(Schema, null, 2)}</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -147,7 +148,9 @@ export default class JSONSchemaForm extends React.Component {
|
|||
|
||||
<div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "所有 Form 元素列举",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '所有 Form 元素列举',
|
||||
data: {
|
||||
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: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "表单项静态展示",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: '表单项静态展示',
|
||||
mode: 'horizontal',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
label: "文本",
|
||||
value: "文本"
|
||||
type: 'static',
|
||||
label: '文本',
|
||||
value: '文本'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -23,9 +24,9 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static-tpl",
|
||||
label: "模板",
|
||||
tpl: "自己拼接 HTML 取变量 \\${id}: ${id}"
|
||||
type: 'static-tpl',
|
||||
label: '模板',
|
||||
tpl: '自己拼接 HTML 取变量 \\${id}: ${id}'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -33,9 +34,9 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static-date",
|
||||
label: "日期",
|
||||
value: Math.round(Date.now()/1000)
|
||||
type: 'static-date',
|
||||
label: '日期',
|
||||
value: Math.round(Date.now() / 1000)
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -43,9 +44,9 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static-datetime",
|
||||
label: "日期时间",
|
||||
value: Math.round(Date.now()/1000)
|
||||
type: 'static-datetime',
|
||||
label: '日期时间',
|
||||
value: Math.round(Date.now() / 1000)
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -53,8 +54,8 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static-mapping",
|
||||
label: "映射",
|
||||
type: 'static-mapping',
|
||||
label: '映射',
|
||||
value: Math.floor(Math.random() * 5),
|
||||
map: {
|
||||
'*': "<span class='label label-default'>-</span>",
|
||||
|
|
@ -62,7 +63,7 @@ export default {
|
|||
'1': "<span class='label label-success'>二</span>",
|
||||
'2': "<span class='label label-danger'>三</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",
|
||||
label: "进度",
|
||||
type: 'static-progress',
|
||||
label: '进度',
|
||||
value: 66.66
|
||||
},
|
||||
|
||||
|
|
@ -81,12 +82,13 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static-image",
|
||||
label: "图片",
|
||||
name: "image",
|
||||
type: 'static-image',
|
||||
label: '图片',
|
||||
name: 'image',
|
||||
popOver: {
|
||||
title: "查看大图",
|
||||
body: '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
||||
title: '查看大图',
|
||||
body:
|
||||
'<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -105,11 +107,11 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static",
|
||||
label: "可复制",
|
||||
value: "文本",
|
||||
type: 'static',
|
||||
label: '可复制',
|
||||
value: '文本',
|
||||
copyable: {
|
||||
content: "内容，支持变量 ${id}"
|
||||
content: '内容，支持变量 ${id}'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -118,12 +120,12 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
type: "static",
|
||||
name: "text",
|
||||
label: "可快速编辑",
|
||||
value: "文本",
|
||||
type: 'static',
|
||||
name: 'text',
|
||||
label: '可快速编辑',
|
||||
value: '文本',
|
||||
quickEdit: true
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "SubForm 示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'SubForm 示例',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
api: "/api/mock2/saveForm?waitSeconds=2",
|
||||
title: "Form elements",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
api: '/api/mock2/saveForm?waitSeconds=2',
|
||||
title: 'Form elements',
|
||||
mode: 'horizontal',
|
||||
// debug: true,
|
||||
controls: [
|
||||
{
|
||||
type: "form",
|
||||
label: "子表单单条",
|
||||
name: "subForm1",
|
||||
btnLabel: "点击设置",
|
||||
type: 'form',
|
||||
label: '子表单单条',
|
||||
name: 'subForm1',
|
||||
btnLabel: '点击设置',
|
||||
form: {
|
||||
title: "子表单",
|
||||
title: '子表单',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Foo"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Foo'
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "switch",
|
||||
label: "Boo"
|
||||
name: 'b',
|
||||
type: 'switch',
|
||||
label: 'Boo'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
type: "form",
|
||||
label: "子表单多条",
|
||||
name: "subForm2",
|
||||
type: 'form',
|
||||
label: '子表单多条',
|
||||
name: 'subForm2',
|
||||
labelField: 'a',
|
||||
btnLabel: "点击设置",
|
||||
btnLabel: '点击设置',
|
||||
multiple: true,
|
||||
form: {
|
||||
title: "子表单",
|
||||
title: '子表单',
|
||||
controls: [
|
||||
{
|
||||
name: "a",
|
||||
type: "text",
|
||||
label: "Foo"
|
||||
name: 'a',
|
||||
type: 'text',
|
||||
label: 'Foo'
|
||||
},
|
||||
{
|
||||
name: "b",
|
||||
type: "switch",
|
||||
label: "Boo"
|
||||
name: 'b',
|
||||
type: 'switch',
|
||||
label: 'Boo'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "表格编辑",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '表格编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
mode: "horizontal",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交",
|
||||
type: 'submit',
|
||||
label: '提交',
|
||||
primary: true
|
||||
}
|
||||
],
|
||||
|
|
@ -39,9 +39,9 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
label: "当前值",
|
||||
tpl: "<pre>${colors|json}</pre>"
|
||||
type: 'static',
|
||||
label: '当前值',
|
||||
tpl: '<pre>${colors|json}</pre>'
|
||||
},
|
||||
{
|
||||
type: 'table',
|
||||
|
|
@ -75,31 +75,31 @@ export default {
|
|||
actionType: 'add'
|
||||
},
|
||||
{
|
||||
"type": "table",
|
||||
"name": "table2",
|
||||
"label": "Table2",
|
||||
"editable": true,
|
||||
"addable": true,
|
||||
"removable": true,
|
||||
"draggable": true,
|
||||
"columns": [
|
||||
type: 'table',
|
||||
name: 'table2',
|
||||
label: 'Table2',
|
||||
editable: true,
|
||||
addable: true,
|
||||
removable: true,
|
||||
draggable: true,
|
||||
columns: [
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
name: 'a',
|
||||
label: 'A'
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B",
|
||||
"quickEdit": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
name: 'b',
|
||||
label: 'B',
|
||||
quickEdit: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
"label": "A",
|
||||
"value": "a"
|
||||
label: 'A',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": "b"
|
||||
label: 'B',
|
||||
value: 'b'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -108,36 +108,36 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
"type": "table",
|
||||
"name": "table3",
|
||||
"label": "Table3(指定第2列只有update时能编辑)",
|
||||
"editable": true,
|
||||
"addable": true,
|
||||
"removable": true,
|
||||
"draggable": true,
|
||||
"columns": [
|
||||
type: 'table',
|
||||
name: 'table3',
|
||||
label: 'Table3(指定第2列只有update时能编辑)',
|
||||
editable: true,
|
||||
addable: true,
|
||||
removable: true,
|
||||
draggable: true,
|
||||
columns: [
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A",
|
||||
"quickEdit": true
|
||||
name: 'a',
|
||||
label: 'A',
|
||||
quickEdit: true
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B",
|
||||
"quickEdit": false,
|
||||
"quickEditOnUpdate": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
name: 'b',
|
||||
label: 'B',
|
||||
quickEdit: false,
|
||||
quickEditOnUpdate: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
"label": "A",
|
||||
"value": "a"
|
||||
label: 'A',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": "b"
|
||||
label: 'B',
|
||||
value: 'b'
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,101 +1,103 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "Tabs 示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'Tabs 示例',
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
mode: "horizontal",
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
title: "",
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
title: '',
|
||||
actions: [
|
||||
{
|
||||
type: "button",
|
||||
actionType: "dialog",
|
||||
label: "弹框中的 Tabs",
|
||||
level: "info",
|
||||
type: 'button',
|
||||
actionType: 'dialog',
|
||||
label: '弹框中的 Tabs',
|
||||
level: 'info',
|
||||
dialog: {
|
||||
title: "",
|
||||
title: '',
|
||||
// size: "md",
|
||||
body: {
|
||||
type: "form",
|
||||
mode: "horizontal",
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
horizontal: {
|
||||
leftFixed: 'xs'
|
||||
},
|
||||
api: "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交",
|
||||
type: 'submit',
|
||||
label: '提交',
|
||||
primary: true
|
||||
}
|
||||
],
|
||||
controls: [{
|
||||
controls: [
|
||||
{
|
||||
type: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
title: "基本信息",
|
||||
title: '基本信息',
|
||||
controls: [
|
||||
[
|
||||
{
|
||||
type: "email",
|
||||
name: "email1",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email1',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
placeholder: "密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
placeholder: '密码',
|
||||
label: false
|
||||
}
|
||||
],
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
[
|
||||
{
|
||||
type: "email",
|
||||
name: "email2",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email2',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: false,
|
||||
option: "记住我"
|
||||
option: '记住我'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "其他信息",
|
||||
title: '其他信息',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email3",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email3',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe2",
|
||||
option: "记住我"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe2',
|
||||
option: '记住我'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交",
|
||||
type: 'submit',
|
||||
label: '提交',
|
||||
primary: true
|
||||
}
|
||||
],
|
||||
|
|
@ -105,59 +107,59 @@ export default {
|
|||
|
||||
tabs: [
|
||||
{
|
||||
title: "基本信息",
|
||||
title: '基本信息',
|
||||
hash: 'tab1',
|
||||
controls: [
|
||||
[
|
||||
{
|
||||
type: "email",
|
||||
name: "email",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
placeholder: "密码",
|
||||
type: 'password',
|
||||
name: 'password',
|
||||
placeholder: '密码',
|
||||
label: false
|
||||
}
|
||||
],
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
[
|
||||
{
|
||||
type: "email",
|
||||
name: "email2",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email2',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe",
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: false,
|
||||
option: "记住我"
|
||||
option: '记住我'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "其他信息",
|
||||
title: '其他信息',
|
||||
hash: 'tab2',
|
||||
controls: [
|
||||
{
|
||||
type: "email",
|
||||
name: "email3",
|
||||
placeholder: "请输入邮箱地址",
|
||||
label: "邮箱"
|
||||
type: 'email',
|
||||
name: 'email3',
|
||||
placeholder: '请输入邮箱地址',
|
||||
label: '邮箱'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
name: "rememberMe4",
|
||||
label: "记住我"
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe4',
|
||||
label: '记住我'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,126 +1,132 @@
|
|||
export default {
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"title": "详情",
|
||||
"name": "scene_detail",
|
||||
"mode": "horizontal",
|
||||
"submitText": "",
|
||||
"submitOnChange": false,
|
||||
"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: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
title: '详情',
|
||||
name: 'scene_detail',
|
||||
mode: 'horizontal',
|
||||
submitText: '',
|
||||
submitOnChange: false,
|
||||
actions: [
|
||||
{
|
||||
type: "tree",
|
||||
name: "tree",
|
||||
label: "树",
|
||||
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',
|
||||
name: 'tree',
|
||||
label: '树',
|
||||
options: [
|
||||
{
|
||||
label: "Folder A",
|
||||
label: 'Folder A',
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "file A",
|
||||
label: 'file A',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "file B",
|
||||
label: 'file B',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "file C",
|
||||
label: 'file C',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "file D",
|
||||
label: 'file D',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "tree",
|
||||
name: "trees",
|
||||
label: "树多选",
|
||||
type: 'tree',
|
||||
name: 'trees',
|
||||
label: '树多选',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: "Folder A",
|
||||
label: 'Folder A',
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "file A",
|
||||
label: 'file A',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "file B",
|
||||
label: 'file B',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "file C",
|
||||
label: 'file C',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "file D",
|
||||
label: 'file D',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
|
||||
{
|
||||
name: "select",
|
||||
type: "tree-select",
|
||||
label: "动态选项",
|
||||
source: "/api/mock2/form/getTreeOptions?waitSeconds=1",
|
||||
name: 'select',
|
||||
type: 'tree-select',
|
||||
label: '动态选项',
|
||||
source: '/api/mock2/form/getTreeOptions?waitSeconds=1',
|
||||
description: '通过接口一口气拉取选项',
|
||||
clearable: true,
|
||||
searchable: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "select2",
|
||||
type: "tree-select",
|
||||
label: "选项自动补全",
|
||||
autoComplete: "/api/mock2/tree/autoComplete?term=$term",
|
||||
placeholder: "请输入",
|
||||
name: 'select2',
|
||||
type: 'tree-select',
|
||||
label: '选项自动补全',
|
||||
autoComplete: '/api/mock2/tree/autoComplete?term=$term',
|
||||
placeholder: '请输入',
|
||||
description: '通过接口自动补全',
|
||||
multiple: true
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,110 +1,110 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "表单验证示例",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '表单验证示例',
|
||||
toolbar: "<a target='_blank' href='/docs/renderers/Form/FormItem'>文档</a>",
|
||||
body: [
|
||||
{
|
||||
type: "form",
|
||||
type: 'form',
|
||||
autoFocus: false,
|
||||
messages: {
|
||||
'validateFailed': '请仔细检查表单规则，部分表单项没通过验证'
|
||||
validateFailed: '请仔细检查表单规则，部分表单项没通过验证'
|
||||
},
|
||||
title: "表单",
|
||||
title: '表单',
|
||||
actions: [
|
||||
{
|
||||
type: "submit",
|
||||
label: "提交"
|
||||
type: 'submit',
|
||||
label: '提交'
|
||||
}
|
||||
],
|
||||
api: "/api/mock2/form/saveFormFailed?waitSeconds=2",
|
||||
mode: "horizontal",
|
||||
api: '/api/mock2/form/saveFormFailed?waitSeconds=2',
|
||||
mode: 'horizontal',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "test",
|
||||
label: "必填",
|
||||
type: 'text',
|
||||
name: 'test',
|
||||
label: '必填',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "test1",
|
||||
type: "email",
|
||||
label: "Email"
|
||||
name: 'test1',
|
||||
type: 'email',
|
||||
label: 'Email'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "url",
|
||||
type: "url",
|
||||
label: "Url"
|
||||
name: 'url',
|
||||
type: 'url',
|
||||
label: 'Url'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "num",
|
||||
type: "text",
|
||||
label: "数字",
|
||||
validations: "isNumeric"
|
||||
name: 'num',
|
||||
type: 'text',
|
||||
label: '数字',
|
||||
validations: 'isNumeric'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "alpha",
|
||||
type: "text",
|
||||
label: "字母或数字",
|
||||
validations: "isAlphanumeric"
|
||||
name: 'alpha',
|
||||
type: 'text',
|
||||
label: '字母或数字',
|
||||
validations: 'isAlphanumeric'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "int",
|
||||
type: "text",
|
||||
label: "整形",
|
||||
validations: "isInt"
|
||||
name: 'int',
|
||||
type: 'text',
|
||||
label: '整形',
|
||||
validations: 'isInt'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "minLength",
|
||||
type: "text",
|
||||
label: "长度限制",
|
||||
validations: "minLength:2,maxLength:10"
|
||||
name: 'minLength',
|
||||
type: 'text',
|
||||
label: '长度限制',
|
||||
validations: 'minLength:2,maxLength:10'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "min",
|
||||
type: "text",
|
||||
label: "数值限制",
|
||||
validations: "maximum:10,minimum:2"
|
||||
name: 'min',
|
||||
type: 'text',
|
||||
label: '数值限制',
|
||||
validations: 'maximum:10,minimum:2'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "reg",
|
||||
type: "text",
|
||||
label: "正则",
|
||||
validations: "matchRegexp:/^abc/",
|
||||
name: 'reg',
|
||||
type: 'text',
|
||||
label: '正则',
|
||||
validations: 'matchRegexp:/^abc/',
|
||||
validationErrors: {
|
||||
matchRegexp: "请输入abc开头的好么?"
|
||||
matchRegexp: '请输入abc开头的好么?'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: "test2",
|
||||
type: "text",
|
||||
label: "服务端验证"
|
||||
name: 'test2',
|
||||
type: 'text',
|
||||
label: '服务端验证'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ function buildTest(type, scaffold) {
|
|||
...scaffold,
|
||||
type,
|
||||
name: 'a22',
|
||||
inline: true,
|
||||
inline: true
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -55,7 +55,7 @@ function buildTest(type, scaffold) {
|
|||
{
|
||||
type: 'tpl',
|
||||
className: 'text-info',
|
||||
tpl: 'Group 默认模式',
|
||||
tpl: 'Group 默认模式'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -460,7 +460,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -488,7 +487,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -515,7 +513,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -544,7 +541,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -571,7 +567,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -600,7 +595,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -628,7 +622,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -658,13 +651,11 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: '水平模式',
|
||||
hash: 'horizontal',
|
||||
|
|
@ -699,7 +690,7 @@ function buildTest(type, scaffold) {
|
|||
{
|
||||
type: 'tpl',
|
||||
className: 'text-info',
|
||||
tpl: 'Group 局部正常模式',
|
||||
tpl: 'Group 局部正常模式'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1108,7 +1099,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1136,7 +1126,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1163,7 +1152,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1192,7 +1180,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1219,7 +1206,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1248,7 +1234,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1276,7 +1261,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1306,10 +1290,9 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1361,7 +1344,7 @@ function buildTest(type, scaffold) {
|
|||
{
|
||||
type: 'tpl',
|
||||
className: 'text-info',
|
||||
tpl: 'Group 局部正常模式',
|
||||
tpl: 'Group 局部正常模式'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1770,7 +1753,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1798,7 +1780,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1825,7 +1806,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1854,7 +1834,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1881,7 +1860,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1910,7 +1888,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1938,7 +1915,6 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -1968,12 +1944,10 @@ function buildTest(type, scaffold) {
|
|||
name: 'a2'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -2016,14 +1990,12 @@ const options = [
|
|||
label: '选项D',
|
||||
value: 'd'
|
||||
}
|
||||
],
|
||||
|
||||
];
|
||||
|
||||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "各种表单项的不同模式样式测试，记得切到小屏幕测试",
|
||||
"body": [
|
||||
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '各种表单项的不同模式样式测试，记得切到小屏幕测试',
|
||||
body: [
|
||||
{
|
||||
type: 'nav',
|
||||
links: [
|
||||
|
|
@ -2086,7 +2058,7 @@ export default {
|
|||
{
|
||||
label: 'Image',
|
||||
to: '?renderer=image'
|
||||
},
|
||||
}
|
||||
],
|
||||
stacked: false
|
||||
},
|
||||
|
|
@ -2095,8 +2067,12 @@ export default {
|
|||
children: ({data, render}) => {
|
||||
const type = data.renderer || 'text';
|
||||
return (
|
||||
<div>{
|
||||
render('body', buildTest(type, ({
|
||||
<div>
|
||||
{render(
|
||||
'body',
|
||||
buildTest(
|
||||
type,
|
||||
{
|
||||
text: {
|
||||
placeholder: '请输入文本',
|
||||
clearable: true,
|
||||
|
|
@ -2131,11 +2107,12 @@ export default {
|
|||
list: {
|
||||
options
|
||||
}
|
||||
|
||||
})[type]))
|
||||
}</div>
|
||||
}[type]
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,137 +1,137 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "HBox & Grid",
|
||||
"type": "page",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'HBox & Grid',
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
"type": "plain",
|
||||
"tpl": "Grid 请参考 bootstrap 的 grid 布局",
|
||||
"inline": false,
|
||||
"className": "h3 m-b-xs"
|
||||
type: 'plain',
|
||||
tpl: 'Grid 请参考 bootstrap 的 grid 布局',
|
||||
inline: false,
|
||||
className: 'h3 m-b-xs'
|
||||
},
|
||||
{
|
||||
"type": "grid",
|
||||
"columns": [
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "sm-2",
|
||||
"sm": 2,
|
||||
"className": "bg-info",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: 'sm-2',
|
||||
sm: 2,
|
||||
className: 'bg-info',
|
||||
inline: false
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "sm-4",
|
||||
"sm": 4,
|
||||
"className": "bg-success",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: 'sm-4',
|
||||
sm: 4,
|
||||
className: 'bg-success',
|
||||
inline: false
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "sm-6",
|
||||
"sm": 6,
|
||||
"className": "bg-primary",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: 'sm-6',
|
||||
sm: 6,
|
||||
className: 'bg-primary',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "plain",
|
||||
"tpl": "Hbox",
|
||||
"inline": false,
|
||||
"className": "h3 m-t m-b-xs"
|
||||
type: 'plain',
|
||||
tpl: 'Hbox',
|
||||
inline: false,
|
||||
className: 'h3 m-t m-b-xs'
|
||||
},
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
type: 'hbox',
|
||||
columns: [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "平均分配",
|
||||
"className": "bg-info",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: '平均分配',
|
||||
className: 'bg-info',
|
||||
inline: false
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "平均分配",
|
||||
"className": "bg-success",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: '平均分配',
|
||||
className: 'bg-success',
|
||||
inline: false
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "平均分配",
|
||||
"className": "bg-primary",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: '平均分配',
|
||||
className: 'bg-primary',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "plain",
|
||||
"tpl": "Hbox 部分定宽",
|
||||
"inline": false,
|
||||
"className": "h3 m-t m-b-xs"
|
||||
type: 'plain',
|
||||
tpl: 'Hbox 部分定宽',
|
||||
inline: false,
|
||||
className: 'h3 m-t m-b-xs'
|
||||
},
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
type: 'hbox',
|
||||
columns: [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "w-xs",
|
||||
"className": "bg-info",
|
||||
"inline": false,
|
||||
"columnClassName": "w-xs"
|
||||
type: 'tpl',
|
||||
tpl: 'w-xs',
|
||||
className: 'bg-info',
|
||||
inline: false,
|
||||
columnClassName: 'w-xs'
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "w-sm",
|
||||
"className": "bg-info lter",
|
||||
"inline": false,
|
||||
"columnClassName": "w-sm"
|
||||
type: 'tpl',
|
||||
tpl: 'w-sm',
|
||||
className: 'bg-info lter',
|
||||
inline: false,
|
||||
columnClassName: 'w-sm'
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "w",
|
||||
"className": "bg-info dk",
|
||||
"inline": false,
|
||||
"columnClassName": "w"
|
||||
type: 'tpl',
|
||||
tpl: 'w',
|
||||
className: 'bg-info dk',
|
||||
inline: false,
|
||||
columnClassName: 'w'
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "平均分配",
|
||||
"className": "bg-success",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: '平均分配',
|
||||
className: 'bg-success',
|
||||
inline: false
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "平均分配",
|
||||
"className": "bg-primary",
|
||||
"inline": false
|
||||
type: 'tpl',
|
||||
tpl: '平均分配',
|
||||
className: 'bg-primary',
|
||||
inline: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "plain",
|
||||
"tpl": "示例",
|
||||
"inline": false,
|
||||
"className": "h3 m-t m-b-xs"
|
||||
type: 'plain',
|
||||
tpl: '示例',
|
||||
inline: false,
|
||||
className: 'h3 m-t m-b-xs'
|
||||
},
|
||||
{
|
||||
"type": "grid",
|
||||
"columns": [
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "面板1",
|
||||
"className": "Panel--danger",
|
||||
"body": "内容",
|
||||
"sm": 4
|
||||
type: 'panel',
|
||||
title: '面板1',
|
||||
className: 'Panel--danger',
|
||||
body: '内容',
|
||||
sm: 4
|
||||
},
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "面板2",
|
||||
"className": "Panel--primary",
|
||||
"body": "内容",
|
||||
"sm": 8
|
||||
type: 'panel',
|
||||
title: '面板2',
|
||||
className: 'Panel--primary',
|
||||
body: '内容',
|
||||
sm: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "IFrame 可以用来嵌入其他网站",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'IFrame 可以用来嵌入其他网站',
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
mode: 'inline',
|
||||
|
|
@ -24,8 +24,8 @@ export default {
|
|||
{
|
||||
type: 'iframe',
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
title: "表单与列表之间的联动",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '表单与列表之间的联动',
|
||||
body: [
|
||||
{
|
||||
title: "",
|
||||
title: '',
|
||||
type: 'form',
|
||||
mode: 'inline',
|
||||
target: 'list',
|
||||
|
|
@ -11,164 +11,163 @@ export default {
|
|||
className: 'm-b',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
clearable: true,
|
||||
addOn: {
|
||||
type: 'submit',
|
||||
icon: 'fa fa-search',
|
||||
level: 'primary'
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "crud",
|
||||
type: 'crud',
|
||||
name: 'list',
|
||||
api: "/api/sample",
|
||||
mode: "list",
|
||||
api: '/api/sample',
|
||||
mode: 'list',
|
||||
listItem: {
|
||||
actions: [
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-eye",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-eye',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "查看",
|
||||
title: '查看',
|
||||
body: {
|
||||
type: "form",
|
||||
type: 'form',
|
||||
controls: [
|
||||
{
|
||||
type: "static",
|
||||
name: "engine",
|
||||
label: "Engine"
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
type: 'static',
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
type: 'static',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'static',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "static",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'static',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-pencil",
|
||||
actionType: "dialog",
|
||||
type: 'button',
|
||||
icon: 'fa fa-pencil',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: "编辑",
|
||||
title: '编辑',
|
||||
body: {
|
||||
type: "form",
|
||||
name: "sample-edit-form",
|
||||
api: "/api/sample/$id",
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "engine",
|
||||
label: "Engine",
|
||||
type: 'text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
type: 'text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
type: 'text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
type: "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
type: 'text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
icon: "fa fa-times text-danger",
|
||||
actionType: "ajax",
|
||||
confirmText: "您确认要删除?",
|
||||
api: "delete:/api/sample/$id"
|
||||
type: 'button',
|
||||
icon: 'fa fa-times text-danger',
|
||||
actionType: 'ajax',
|
||||
confirmText: '您确认要删除?',
|
||||
api: 'delete:/api/sample/$id'
|
||||
}
|
||||
],
|
||||
body: [
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine",
|
||||
labelClassName: "w-sm"
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
labelClassName: 'w-sm'
|
||||
},
|
||||
[
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser",
|
||||
labelClassName: "w-sm"
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
labelClassName: 'w-sm'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)",
|
||||
labelClassName: "w-sm"
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
labelClassName: 'w-sm'
|
||||
}
|
||||
],
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version",
|
||||
labelClassName: "w-sm"
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
labelClassName: 'w-sm'
|
||||
}
|
||||
]
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -64,4 +64,4 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@ export default {
|
|||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
type: 'grid',
|
||||
columns: [
|
||||
|
|
@ -303,4 +302,4 @@ export default {
|
|||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
inline: true,
|
||||
visibleOn: 'data.b',
|
||||
source: '/api/mock2/options/level3?b=${b}'
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -65,4 +65,4 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default {
|
||||
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
type: 'page',
|
||||
title: "地址栏变化自动更新",
|
||||
title: '地址栏变化自动更新',
|
||||
initApi: '/api/mock2/form/initData?id=${id}',
|
||||
aside: {
|
||||
type: 'wrapper',
|
||||
|
|
@ -21,17 +21,17 @@ export default {
|
|||
children: [
|
||||
{
|
||||
label: '页面2-1',
|
||||
to: '?id=2-1',
|
||||
to: '?id=2-1'
|
||||
},
|
||||
{
|
||||
label: '页面2-2',
|
||||
to: '?id=2-2',
|
||||
to: '?id=2-2'
|
||||
},
|
||||
{
|
||||
label: '页面2-3（disabled）',
|
||||
disabled: true,
|
||||
to: '?id=2-3',
|
||||
},
|
||||
to: '?id=2-3'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -44,6 +44,6 @@ export default {
|
|||
},
|
||||
body: [
|
||||
'<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
|
||||
};
|
||||
componentDidMount() {
|
||||
require(['./Play'], (component) => this.setState({
|
||||
require(['./Play'], component =>
|
||||
this.setState({
|
||||
PlayGround: component.default
|
||||
}))
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -34,19 +35,25 @@ class CodePreview extends React.Component {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<span style={{display: 'block', height: height}} ref="span"></span>
|
||||
{PlayGround ? <Overlay
|
||||
<span style={{display: 'block', height: height}} ref="span" />
|
||||
{PlayGround ? (
|
||||
<Overlay
|
||||
container={container}
|
||||
target={() => this.refs.span}
|
||||
placement="bottom"
|
||||
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">
|
||||
<PlayGround {...rest} vertical />
|
||||
</div>
|
||||
</PopOver>
|
||||
</Overlay> : null }
|
||||
</Overlay>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -76,7 +83,9 @@ export default function(doc) {
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -115,17 +124,18 @@ export default function(doc) {
|
|||
let script = scripts[i];
|
||||
let props = {};
|
||||
[].slice.apply(script.attributes).forEach(item => {
|
||||
props[item.name] = item.value
|
||||
props[item.name] = item.value;
|
||||
});
|
||||
|
||||
let dom = document.createElement('div');
|
||||
let height = props.height ? parseInt(props.height, 10) : 200;
|
||||
dom.setAttribute("class", "doc-play-ground")
|
||||
dom.setAttribute("style", `height: ${height}px;`);
|
||||
dom.setAttribute('class', 'doc-play-ground');
|
||||
dom.setAttribute('style', `height: ${height}px;`);
|
||||
script.parentNode.replaceChild(dom, script);
|
||||
|
||||
this.doms.push(dom);
|
||||
ReactDOM.unstable_renderSubtreeIntoContainer(this, (
|
||||
ReactDOM.unstable_renderSubtreeIntoContainer(
|
||||
this,
|
||||
<LazyComponent
|
||||
{...this.props}
|
||||
container={() => ReactDOM.findDOMNode(this)}
|
||||
|
|
@ -135,8 +145,9 @@ export default function(doc) {
|
|||
scope={props.scope}
|
||||
unMountOnHidden
|
||||
placeholder="加载中，请稍后。。。"
|
||||
/>
|
||||
), dom);
|
||||
/>,
|
||||
dom
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -145,15 +156,21 @@ export default function(doc) {
|
|||
|
||||
return (
|
||||
<div className="pos-rlt text-left">
|
||||
{doc.title ? (<TitleBar title={doc.title} />) : null}
|
||||
<div className="markdown-body" ref={this.divRef}>Doc</div>
|
||||
{doc.title ? <TitleBar title={doc.title} /> : null}
|
||||
<div className="markdown-body" ref={this.divRef}>
|
||||
Doc
|
||||
</div>
|
||||
{doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
|
||||
<Portal
|
||||
container={() => document.querySelector('#asideInner')}
|
||||
>
|
||||
<Portal container={() => document.querySelector('#asideInner')}>
|
||||
<NestedLinks
|
||||
navigations={[doc.toc]}
|
||||
renderLink={({link, active, toggleExpand, depth, classnames: cx}) => {
|
||||
renderLink={({
|
||||
link,
|
||||
active,
|
||||
toggleExpand,
|
||||
depth,
|
||||
classnames: cx
|
||||
}) => {
|
||||
let children = [];
|
||||
|
||||
if (link.children) {
|
||||
|
|
@ -161,23 +178,46 @@ export default function(doc) {
|
|||
<span
|
||||
key="expand-toggle"
|
||||
className={cx(`AsideNav-itemArrow`)}
|
||||
></span>
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
link.badge && children.push(
|
||||
<b key="badge" className={cx('AsideNav-itemBadge', link.badgeClassName || 'bg-info')}>{link.badge}</b>
|
||||
link.badge &&
|
||||
children.push(
|
||||
<b
|
||||
key="badge"
|
||||
className={cx(
|
||||
'AsideNav-itemBadge',
|
||||
link.badgeClassName || 'bg-info'
|
||||
)}
|
||||
>
|
||||
{link.badge}
|
||||
</b>
|
||||
);
|
||||
|
||||
depth === 1 && children.push(
|
||||
<i key="icon" className={cx("AsideNav-itemIcon fa fa-flag")} />
|
||||
depth === 1 &&
|
||||
children.push(
|
||||
<i
|
||||
key="icon"
|
||||
className={cx('AsideNav-itemIcon fa fa-flag')}
|
||||
/>
|
||||
);
|
||||
|
||||
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)}
|
||||
/>
|
||||
|
|
@ -186,5 +226,5 @@ export default function(doc) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,4 +24,4 @@ export default {
|
|||
aside: '边栏',
|
||||
toolbar: '工具栏',
|
||||
initApi: '/api/mock2/page/initDataError'
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,4 +20,4 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ export default {
|
|||
type: 'page',
|
||||
title: '标题',
|
||||
remark: '提示 Tip',
|
||||
body: "内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}",
|
||||
body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
|
||||
aside: '边栏部分',
|
||||
toolbar: '工具栏',
|
||||
initApi: '/api/mock2/page/initData'
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
toast
|
||||
} from '../../src/components/Toast';
|
||||
import {toast} from '../../src/components/Toast';
|
||||
import {render} from '../../src/index';
|
||||
import axios from 'axios';
|
||||
import Frame from 'react-frame-component';
|
||||
|
|
@ -18,14 +16,14 @@ const DEFAULT_CONTENT = `{
|
|||
}`;
|
||||
|
||||
const scopes = {
|
||||
'none': ``,
|
||||
none: ``,
|
||||
|
||||
'body': `{
|
||||
body: `{
|
||||
"type": "page",
|
||||
"body": SCHEMA_PLACEHOLDER
|
||||
}`,
|
||||
|
||||
'form': `{
|
||||
form: `{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"title": "",
|
||||
|
|
@ -53,11 +51,9 @@ const scopes = {
|
|||
"actions": []
|
||||
}
|
||||
}`
|
||||
|
||||
};
|
||||
|
||||
export default class PlayGround extends React.Component {
|
||||
|
||||
state = null;
|
||||
startX = 0;
|
||||
oldContents = '';
|
||||
|
|
@ -89,8 +85,7 @@ export default class PlayGround extends React.Component {
|
|||
}
|
||||
};
|
||||
this.env = {
|
||||
updateLocation: () => {
|
||||
},
|
||||
updateLocation: () => {},
|
||||
fetcher: config => {
|
||||
config = {
|
||||
dataType: 'json',
|
||||
|
|
@ -98,25 +93,35 @@ export default class PlayGround extends React.Component {
|
|||
};
|
||||
|
||||
if (config.dataType === 'json' && config.data) {
|
||||
config.data = JSON.stringify(config.data)
|
||||
config.data = JSON.stringify(config.data);
|
||||
config.headers = config.headers || {};
|
||||
config.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
|
||||
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);
|
||||
this.frameTemplate = `<!DOCTYPE html><html><head>${links.join('')}</head><body><div></div></body></html>`;
|
||||
const links = [].slice
|
||||
.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) {
|
||||
const props = this.props;
|
||||
|
||||
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({
|
||||
schema: schema,
|
||||
schemaCode: JSON.stringify(schema, null, 2)
|
||||
|
|
@ -139,10 +144,16 @@ export default class PlayGround extends React.Component {
|
|||
const scope = query.scope || props.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);
|
||||
} catch (e) {
|
||||
|
|
@ -154,8 +165,12 @@ export default class PlayGround extends React.Component {
|
|||
|
||||
formatMessage(message, input) {
|
||||
if (/position\s?(\d+)$/.test(message)) {
|
||||
const lines = input.substring(0, parseInt(RegExp.$1, 10)).split(/\n|\r\n|\r/);
|
||||
message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${lines[lines.length -1].length}。`;
|
||||
const lines = input
|
||||
.substring(0, parseInt(RegExp.$1, 10))
|
||||
.split(/\n|\r\n|\r/);
|
||||
message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${
|
||||
lines[lines.length - 1].length
|
||||
}。`;
|
||||
}
|
||||
|
||||
return message;
|
||||
|
|
@ -236,9 +251,7 @@ export default class PlayGround extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
vertical
|
||||
} = this.props;
|
||||
const {vertical} = this.props;
|
||||
if (vertical) {
|
||||
return (
|
||||
<div className="vbox">
|
||||
|
|
@ -250,28 +263,31 @@ export default class PlayGround extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<div className="row-row" style={{height: 200}}>
|
||||
<div className="cell">
|
||||
{this.renderEditor()}
|
||||
</div>
|
||||
<div className="cell">{this.renderEditor()}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 50,
|
||||
bottom: 0
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div className="hbox">
|
||||
<div className="col pos-rlt">
|
||||
<div className="scroll-y h-full pos-abt w-full">
|
||||
{this.renderPreview()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col bg-light lter b-l bg-auto pos-rlt" style={{width: this.state.asideWidth}}>
|
||||
<div className="resizer" onMouseDown={this.handleMouseDown}></div>
|
||||
<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()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,36 +3,41 @@ import {render} from '../../src/index';
|
|||
import axios from 'axios';
|
||||
import {toast} from '../../src/components/Toast';
|
||||
import {alert, confirm} from '../../src/components/Alert';
|
||||
import Button from '../../src/components/Button'
|
||||
import LazyComponent from '../../src/components/LazyComponent'
|
||||
import {default as DrawerContainer} from '../../src/components/Drawer'
|
||||
import { Portal } from 'react-overlays';
|
||||
import Button from '../../src/components/Button';
|
||||
import LazyComponent from '../../src/components/LazyComponent';
|
||||
import {default as DrawerContainer} from '../../src/components/Drawer';
|
||||
import {Portal} from 'react-overlays';
|
||||
import {withRouter} from 'react-router';
|
||||
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) {
|
||||
if (!schema['$schema']) {
|
||||
schema = {
|
||||
'$schema': 'https://houtai.baidu.com/v2/schemas/page.json',
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json',
|
||||
...schema
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
return withRouter(class extends React.Component {
|
||||
return withRouter(
|
||||
class extends React.Component {
|
||||
static displayName = 'SchemaRenderer';
|
||||
state = {open: false};
|
||||
toggleCode = () => this.setState({
|
||||
toggleCode = () =>
|
||||
this.setState({
|
||||
open: !this.state.open
|
||||
});
|
||||
close = () => this.setState({
|
||||
close = () =>
|
||||
this.setState({
|
||||
open: false
|
||||
});
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const {router} = props;
|
||||
const normalizeLink = (to) => {
|
||||
const normalizeLink = to => {
|
||||
to = to || '';
|
||||
const location = router.getCurrentLocation();
|
||||
|
||||
|
|
@ -44,7 +49,11 @@ export default function(schema) {
|
|||
|
||||
const idx = 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 hash = ~idx2 ? to.substring(idx2) : '';
|
||||
|
||||
|
|
@ -65,16 +74,16 @@ export default function(schema) {
|
|||
}
|
||||
|
||||
return pathname + search + hash;
|
||||
}
|
||||
};
|
||||
this.env = {
|
||||
updateLocation: (location, replace) => {
|
||||
router[replace ? 'replace' : 'push'](normalizeLink(location));
|
||||
},
|
||||
isCurrentUrl: (to) => {
|
||||
isCurrentUrl: to => {
|
||||
const link = normalizeLink(to);
|
||||
return router.isActive(link);
|
||||
},
|
||||
jumpTo: (to) => {
|
||||
jumpTo: to => {
|
||||
to = normalizeLink(to);
|
||||
|
||||
if (/^https?:\/\//.test(to)) {
|
||||
|
|
@ -83,19 +92,15 @@ export default function(schema) {
|
|||
router.push(to);
|
||||
}
|
||||
},
|
||||
fetcher: ({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
config
|
||||
}) => {
|
||||
fetcher: ({url, method, data, config}) => {
|
||||
if (data && data instanceof FormData) {
|
||||
// config.headers = config.headers || {};
|
||||
// config.headers['Content-Type'] = 'multipart/form-data';
|
||||
} else if (data
|
||||
&& typeof data !== 'string'
|
||||
&& !(data instanceof Blob)
|
||||
&& !(data instanceof ArrayBuffer)
|
||||
} else if (
|
||||
data &&
|
||||
typeof data !== 'string' &&
|
||||
!(data instanceof Blob) &&
|
||||
!(data instanceof ArrayBuffer)
|
||||
) {
|
||||
data = JSON.stringify(data);
|
||||
config = config || {};
|
||||
|
|
@ -118,10 +123,13 @@ export default function(schema) {
|
|||
return axios[method](url, data, config);
|
||||
},
|
||||
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,
|
||||
confirm,
|
||||
copy: (content) => console.log('Copy', content)
|
||||
copy: content => console.log('Copy', content)
|
||||
};
|
||||
|
||||
this.handleEditorMount = this.handleEditorMount.bind(this);
|
||||
|
|
@ -148,16 +156,16 @@ export default function(schema) {
|
|||
}
|
||||
|
||||
renderSchema() {
|
||||
const {
|
||||
router,
|
||||
location,
|
||||
theme
|
||||
} = this.props;
|
||||
const {router, location, theme} = this.props;
|
||||
|
||||
return render(schema, {
|
||||
return render(
|
||||
schema,
|
||||
{
|
||||
location,
|
||||
theme
|
||||
}, this.env);
|
||||
},
|
||||
this.env
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -175,15 +183,27 @@ export default function(schema) {
|
|||
>
|
||||
{this.state.open ? this.renderCode() : null}
|
||||
</DrawerContainer>
|
||||
) : null }
|
||||
) : null}
|
||||
{this.renderSchema()}
|
||||
{showCode !== false ? (
|
||||
<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>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
import TitleBar from '../../../src/components/TitleBar';
|
||||
import {render} from '../../../src/index';
|
||||
|
||||
|
||||
export default class SdkTest extends React.Component {
|
||||
state = {
|
||||
data: {
|
||||
|
|
@ -13,7 +12,8 @@ export default class SdkTest extends React.Component {
|
|||
};
|
||||
|
||||
renderForm() {
|
||||
return render({
|
||||
return render(
|
||||
{
|
||||
title: '',
|
||||
type: 'form',
|
||||
controls: [
|
||||
|
|
@ -41,12 +41,13 @@ export default class SdkTest extends React.Component {
|
|||
name: 'lastModified'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
data: this.state.data,
|
||||
onFailed: (reason, errors) => {
|
||||
console.log('Submit Failed', errors, '\n', reason);
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
onSubmit: values => {
|
||||
console.log('Submit', values);
|
||||
},
|
||||
onChange: (values, diff) => {
|
||||
|
|
@ -58,8 +59,9 @@ export default class SdkTest extends React.Component {
|
|||
});
|
||||
|
||||
console.log('Diff', diff);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
|
|
@ -69,7 +71,7 @@ export default class SdkTest extends React.Component {
|
|||
id: Math.round(Math.random() * 1000),
|
||||
email: 'xxx@xxx.com'
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -82,7 +84,9 @@ export default class SdkTest extends React.Component {
|
|||
<button onClick={this.handleClick}>随机修改</button>
|
||||
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -34,21 +34,20 @@ export default {
|
|||
body: [
|
||||
'当前关键字是 ${keywords}，当前时间是： ${date|date:YYYY-MM-DD HH\\:mm}',
|
||||
|
||||
|
||||
{
|
||||
type: 'table',
|
||||
className: 'm-t',
|
||||
source: '${table1}',
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
type: "text"
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
label: "文本",
|
||||
type: "text"
|
||||
name: 'text',
|
||||
label: '文本',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
|
|
@ -56,7 +55,8 @@ export default {
|
|||
name: 'image',
|
||||
popOver: {
|
||||
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}',
|
||||
columns: [
|
||||
{
|
||||
name: "progress",
|
||||
label: "进度",
|
||||
type: "progress"
|
||||
name: 'progress',
|
||||
label: '进度',
|
||||
type: 'progress'
|
||||
},
|
||||
{
|
||||
name: "boolean",
|
||||
label: "状态",
|
||||
type: "status"
|
||||
name: 'boolean',
|
||||
label: '状态',
|
||||
type: 'status'
|
||||
},
|
||||
{
|
||||
name: "boolean",
|
||||
label: "开关",
|
||||
type: "switch",
|
||||
name: 'boolean',
|
||||
label: '开关',
|
||||
type: 'switch'
|
||||
// readOnly: false // 可以开启修改模式
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "映射",
|
||||
type: "mapping",
|
||||
name: 'type',
|
||||
label: '映射',
|
||||
type: 'mapping',
|
||||
map: {
|
||||
"*": "其他：${type}",
|
||||
"1": "<span class='label label-info'>漂亮</span>",
|
||||
"2": "<span class='label label-success'>开心</span>",
|
||||
"3": "<span class='label label-danger'>惊吓</span>",
|
||||
"4": "<span class='label label-warning'>紧张</span>"
|
||||
'*': '其他：${type}',
|
||||
'1': "<span class='label label-info'>漂亮</span>",
|
||||
'2': "<span class='label label-success'>开心</span>",
|
||||
'3': "<span class='label label-danger'>惊吓</span>",
|
||||
'4': "<span class='label label-warning'>紧张</span>"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -115,4 +115,4 @@ export default {
|
|||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
{
|
||||
type: 'text',
|
||||
label: '字段一',
|
||||
name: 'filed1',
|
||||
name: 'filed1'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -58,11 +58,11 @@ export default {
|
|||
type: 'service',
|
||||
className: 'm-t',
|
||||
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',
|
||||
className: 'm-t',
|
||||
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',
|
||||
body: {
|
||||
type: "crud",
|
||||
api: "/api/sample",
|
||||
type: 'crud',
|
||||
api: '/api/sample',
|
||||
filter: {
|
||||
title: "条件搜索",
|
||||
submitText: "",
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "keywords",
|
||||
placeholder: "通过关键字搜索",
|
||||
type: 'text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
clearable: true,
|
||||
addOn: {
|
||||
label: "搜索",
|
||||
type: "submit"
|
||||
label: '搜索',
|
||||
type: 'submit'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "plain",
|
||||
text: "这里的表单项可以配置多个"
|
||||
type: 'plain',
|
||||
text: '这里的表单项可以配置多个'
|
||||
}
|
||||
]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
width: 20
|
||||
},
|
||||
{
|
||||
name: "engine",
|
||||
label: "Rendering engine"
|
||||
name: 'engine',
|
||||
label: 'Rendering engine'
|
||||
},
|
||||
{
|
||||
name: "browser",
|
||||
label: "Browser"
|
||||
name: 'browser',
|
||||
label: 'Browser'
|
||||
},
|
||||
{
|
||||
name: "platform",
|
||||
label: "Platform(s)"
|
||||
name: 'platform',
|
||||
label: 'Platform(s)'
|
||||
},
|
||||
{
|
||||
name: "version",
|
||||
label: "Engine version"
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
{
|
||||
name: "grade",
|
||||
label: "CSS grade"
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
},
|
||||
{
|
||||
type: "operation",
|
||||
label: "操作",
|
||||
type: 'operation',
|
||||
label: '操作',
|
||||
width: 100,
|
||||
buttons: [
|
||||
]
|
||||
buttons: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -159,7 +158,6 @@ export default {
|
|||
body: '选项卡内容3'
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,4 +32,4 @@ export default {
|
|||
body: '选项卡1的内容'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,4 +32,4 @@ export default {
|
|||
body: '选项卡2的内容'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,92 +30,54 @@ export default {
|
|||
type: 'wrapper',
|
||||
className: 'wrapper bg-white b-l b-b b-r',
|
||||
body: {
|
||||
"type": "chart",
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
type: 'chart',
|
||||
config: {
|
||||
title: {
|
||||
text: '极坐标双数值轴'
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
legend: {
|
||||
data: ['line']
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
polar: {
|
||||
center: ['50%', '54%']
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
},
|
||||
"series": [
|
||||
series: [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: [
|
||||
[0, 0],
|
||||
[0.03487823687206265, 1],
|
||||
[0.06958655048003272, 2],
|
||||
[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 {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "异步任务",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '异步任务',
|
||||
body: [
|
||||
'<p class="text-danger"></p>',
|
||||
{
|
||||
"type": "tasks",
|
||||
"name": "tasks",
|
||||
"items": [
|
||||
type: 'tasks',
|
||||
name: 'tasks',
|
||||
items: [
|
||||
{
|
||||
"label": "hive 任务",
|
||||
"key": "hive",
|
||||
"status": 4,
|
||||
"remark": "查看详情<a target=\"_blank\" href=\"http://www.baidu.com\">日志</a>。"
|
||||
label: 'hive 任务',
|
||||
key: 'hive',
|
||||
status: 4,
|
||||
remark:
|
||||
'查看详情<a target="_blank" href="http://www.baidu.com">日志</a>。'
|
||||
},
|
||||
{
|
||||
"label": "小流量",
|
||||
"key": "partial",
|
||||
"status": 4
|
||||
label: '小流量',
|
||||
key: 'partial',
|
||||
status: 4
|
||||
},
|
||||
{
|
||||
"label": "全量",
|
||||
"key": "full",
|
||||
"status": 4
|
||||
label: '全量',
|
||||
key: 'full',
|
||||
status: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "tasks",
|
||||
"name": "tasks",
|
||||
"className": "b-a bg-white table-responsive m-t",
|
||||
"checkApi": "/api/mock2/task"
|
||||
type: 'tasks',
|
||||
name: 'tasks',
|
||||
className: 'b-a bg-white table-responsive m-t',
|
||||
checkApi: '/api/mock2/task'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,46 +1,77 @@
|
|||
import React from 'react';
|
||||
import Button from '../../src/components/Button';
|
||||
|
||||
|
||||
export default class TestComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="wrapper">
|
||||
<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 className="m-b">
|
||||
|
||||
<Button className="m-r-xs" size="xs" classPrefix="cxd-">按钮</Button>
|
||||
<Button className="m-r-xs" size="sm" classPrefix="cxd-">按钮</Button>
|
||||
<Button className="m-r-xs" size="md" classPrefix="cxd-">按钮</Button>
|
||||
<Button className="m-r-xs" size="lg" classPrefix="cxd-">按钮</Button>
|
||||
<Button className="m-r-xs" size="xs" classPrefix="cxd-">
|
||||
按钮
|
||||
</Button>
|
||||
<Button className="m-r-xs" size="sm" classPrefix="cxd-">
|
||||
按钮
|
||||
</Button>
|
||||
<Button className="m-r-xs" size="md" classPrefix="cxd-">
|
||||
按钮
|
||||
</Button>
|
||||
<Button className="m-r-xs" size="lg" classPrefix="cxd-">
|
||||
按钮
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="m-b">
|
||||
|
||||
<Button className="m-r-xs" classPrefix="cxd-"><i className="fa fa-cloud"/><span>按钮</span></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>
|
||||
<Button className="m-r-xs" classPrefix="cxd-">
|
||||
<i className="fa fa-cloud" />
|
||||
<span>按钮</span>
|
||||
</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>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "视频播放器",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '视频播放器',
|
||||
body: [
|
||||
'<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
|
||||
{
|
||||
"type": "video",
|
||||
"autoPlay": false,
|
||||
"rates": [1.0, 1.5, 2.0],
|
||||
"src": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
|
||||
"poster": "https://video-react.js.org/assets/poster.png"
|
||||
type: 'video',
|
||||
autoPlay: false,
|
||||
rates: [1.0, 1.5, 2.0],
|
||||
src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
|
||||
poster: 'https://video-react.js.org/assets/poster.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,148 +1,142 @@
|
|||
export default {
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "表单向导",
|
||||
"body": [
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '表单向导',
|
||||
body: [
|
||||
{
|
||||
"type": "wizard",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
"initApi": "/api/mock2/form/initData?waitSeconds=2",
|
||||
"steps": [
|
||||
type: 'wizard',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
initApi: '/api/mock2/form/initData?waitSeconds=2',
|
||||
steps: [
|
||||
{
|
||||
"title": "第一步",
|
||||
"controls": [
|
||||
title: '第一步',
|
||||
controls: [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "url",
|
||||
"required": true
|
||||
name: 'website',
|
||||
label: '网址',
|
||||
type: 'url',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"name": "name",
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"required": true
|
||||
name: 'name',
|
||||
label: '名称',
|
||||
type: 'text',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"controls": [
|
||||
title: 'Step 2',
|
||||
controls: [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"required": true
|
||||
name: 'email2',
|
||||
label: '邮箱',
|
||||
type: 'email',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"controls": [
|
||||
"这是最后一步了"
|
||||
]
|
||||
title: 'Step 3',
|
||||
controls: ['这是最后一步了']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "wizard",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
"mode": "vertical",
|
||||
"steps": [
|
||||
type: 'wizard',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2',
|
||||
mode: 'vertical',
|
||||
steps: [
|
||||
{
|
||||
"title": "第一步",
|
||||
"controls": [
|
||||
title: '第一步',
|
||||
controls: [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "url",
|
||||
"required": true
|
||||
name: 'website',
|
||||
label: '网址',
|
||||
type: 'url',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"required": true
|
||||
name: 'email',
|
||||
label: '邮箱',
|
||||
type: 'email',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"controls": [
|
||||
title: 'Step 2',
|
||||
controls: [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"required": true
|
||||
name: 'email2',
|
||||
label: '邮箱',
|
||||
type: 'email',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"controls": [
|
||||
"这是最后一步了"
|
||||
]
|
||||
title: 'Step 3',
|
||||
controls: ['这是最后一步了']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "wizard",
|
||||
"steps": [
|
||||
type: 'wizard',
|
||||
steps: [
|
||||
{
|
||||
"title": "第一步",
|
||||
"controls": [
|
||||
title: '第一步',
|
||||
controls: [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "url",
|
||||
"required": true
|
||||
name: 'website',
|
||||
label: '网址',
|
||||
type: 'url',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"required": true
|
||||
name: 'email',
|
||||
label: '邮箱',
|
||||
type: 'email',
|
||||
required: true
|
||||
}
|
||||
],
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=2"
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2'
|
||||
},
|
||||
{
|
||||
"title": "第二步",
|
||||
"controls": [
|
||||
title: '第二步',
|
||||
controls: [
|
||||
{
|
||||
"name": "test1",
|
||||
"type": "email",
|
||||
"label": "Email",
|
||||
"value": "test@test.com"
|
||||
name: 'test1',
|
||||
type: 'email',
|
||||
label: 'Email',
|
||||
value: 'test@test.com'
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test2",
|
||||
"label": "必填示例",
|
||||
"required": true
|
||||
type: 'text',
|
||||
name: 'test2',
|
||||
label: '必填示例',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test3",
|
||||
"placeholder": "可选"
|
||||
type: 'text',
|
||||
name: 'test3',
|
||||
placeholder: '可选'
|
||||
}
|
||||
],
|
||||
"initApi": "/api/mock2/form/initForm",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=2"
|
||||
initApi: '/api/mock2/form/initForm',
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2'
|
||||
},
|
||||
{
|
||||
"title": "确定",
|
||||
"controls": [
|
||||
"最后一步了，确认要提交吗？"
|
||||
],
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=2"
|
||||
title: '确定',
|
||||
controls: ['最后一步了，确认要提交吗？'],
|
||||
api: '/api/mock2/form/saveForm?waitSeconds=2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import './polyfills/index';
|
||||
import React from 'react';
|
||||
import { render as renderReact } from 'react-dom';
|
||||
import {render as renderReact} from 'react-dom';
|
||||
import axios from 'axios';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
|
|
@ -14,7 +14,12 @@ import {
|
|||
render as renderAmis
|
||||
} 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') {
|
||||
container = document.querySelector(container) as HTMLElement;
|
||||
}
|
||||
|
|
@ -27,8 +32,8 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
container = div;
|
||||
}
|
||||
container.classList.add('amis-scope');
|
||||
let scoped:any;
|
||||
const normalizeLink = (to:string) => {
|
||||
let scoped: any;
|
||||
const normalizeLink = (to: string) => {
|
||||
to = to || '';
|
||||
const location = window.location;
|
||||
|
||||
|
|
@ -40,7 +45,11 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
|
||||
const idx = 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 hash = ~idx2 ? to.substring(idx2) : '';
|
||||
|
||||
|
|
@ -61,9 +70,9 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
}
|
||||
|
||||
return pathname + search + hash;
|
||||
}
|
||||
};
|
||||
|
||||
const responseAdpater = (api:any) => (value:any) => {
|
||||
const responseAdpater = (api: any) => (value: any) => {
|
||||
let response = value.data;
|
||||
if (env && env.responseAdpater) {
|
||||
const url = api.url;
|
||||
|
|
@ -88,31 +97,42 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
const result = {
|
||||
...value,
|
||||
data: response
|
||||
}
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
renderReact((
|
||||
renderReact(
|
||||
<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} />
|
||||
|
||||
{renderAmis(schema, {
|
||||
{renderAmis(
|
||||
schema,
|
||||
{
|
||||
...data,
|
||||
scopeRef: (ref:any) => scoped = ref
|
||||
}, {
|
||||
scopeRef: (ref: any) => (scoped = ref)
|
||||
},
|
||||
{
|
||||
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,
|
||||
confirm,
|
||||
updateLocation: (to:any, replace:boolean) => {
|
||||
updateLocation: (to: any, replace: boolean) => {
|
||||
if (to === 'goBack') {
|
||||
return window.history.back();
|
||||
}
|
||||
|
||||
replace || (location.href = normalizeLink(to));
|
||||
},
|
||||
isCurrentUrl: (to:string) => {
|
||||
isCurrentUrl: (to: string) => {
|
||||
const link = normalizeLink(to);
|
||||
const location = window.location;
|
||||
let pathname = link;
|
||||
|
|
@ -131,14 +151,16 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
const query = qs.parse(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) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
jumpTo: (to:string, action?:any) => {
|
||||
jumpTo: (to: string, action?: any) => {
|
||||
if (to === 'goBack') {
|
||||
return window.history.back();
|
||||
}
|
||||
|
|
@ -146,7 +168,9 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
to = normalizeLink(to);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -157,20 +181,15 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
}
|
||||
},
|
||||
fetcher: (api: any) => {
|
||||
let {
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
responseType,
|
||||
config,
|
||||
headers
|
||||
} = api;
|
||||
let {url, method, data, responseType, config, headers} = api;
|
||||
config = config || {};
|
||||
config.withCredentials = true;
|
||||
responseType && (config.responseType = responseType);
|
||||
|
||||
if (config.cancelExecutor) {
|
||||
config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
|
||||
config.cancelToken = new (axios as any).CancelToken(
|
||||
config.cancelExecutor
|
||||
);
|
||||
}
|
||||
|
||||
config.headers = headers || {};
|
||||
|
|
@ -180,18 +199,18 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
config.params = data;
|
||||
} else if (data && data instanceof FormData) {
|
||||
// config.headers['Content-Type'] = 'multipart/form-data';
|
||||
} else if (data
|
||||
&& typeof data !== 'string'
|
||||
&& !(data instanceof Blob)
|
||||
&& !(data instanceof ArrayBuffer)
|
||||
} else if (
|
||||
data &&
|
||||
typeof data !== 'string' &&
|
||||
!(data instanceof Blob) &&
|
||||
!(data instanceof ArrayBuffer)
|
||||
) {
|
||||
data = JSON.stringify(data);
|
||||
config.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
|
||||
data && (config.data = data);
|
||||
return axios(url, config)
|
||||
.then(responseAdpater(api));
|
||||
return axios(url, config).then(responseAdpater(api));
|
||||
},
|
||||
isCancel: (value: any) => (axios as any).isCancel(value),
|
||||
copy: (contents: string, options: any = {}) => {
|
||||
|
|
@ -201,8 +220,10 @@ export function embed(container: string | HTMLElement, schema: any, data: any, e
|
|||
},
|
||||
richTextToken: '',
|
||||
...env
|
||||
})}
|
||||
</div>
|
||||
), container);
|
||||
}
|
||||
)}
|
||||
</div>,
|
||||
container
|
||||
);
|
||||
return scoped;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,9 @@
|
|||
* @author liaoxuezhi@cloud.com
|
||||
*/
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import {render} from 'react-dom';
|
||||
import App from './components/App';
|
||||
|
||||
export function bootstrap(mountTo, initalState) {
|
||||
render(
|
||||
<App />,
|
||||
mountTo
|
||||
);
|
||||
render(<App />, mountTo);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,29 @@
|
|||
|
||||
const __moduleId = (str: string) => '';
|
||||
|
||||
const mapping: {
|
||||
[propName: string]: any;
|
||||
} = {
|
||||
'jquery': __moduleId('jquery'),
|
||||
'react': __moduleId('react'),
|
||||
jquery: __moduleId('jquery'),
|
||||
react: __moduleId('react'),
|
||||
'react-dom': __moduleId('react-dom'),
|
||||
'react-addons-update': __moduleId('react-addons-update'),
|
||||
'immutability-helper': __moduleId('react-addons-update'),
|
||||
'react-cropper': __moduleId('react-cropper'),
|
||||
'react-dropzone': __moduleId('react-dropzone'),
|
||||
'classnames': __moduleId('classnames'),
|
||||
'axios': __moduleId('axios'),
|
||||
'moment': __moduleId('moment'),
|
||||
'mobx': __moduleId('mobx'),
|
||||
classnames: __moduleId('classnames'),
|
||||
axios: __moduleId('axios'),
|
||||
moment: __moduleId('moment'),
|
||||
mobx: __moduleId('mobx'),
|
||||
'mobx-state-tree': __moduleId('mobx-state-tree'),
|
||||
'react-transition-group': __moduleId('react-transition-group'),
|
||||
'echarts': __moduleId('echarts'),
|
||||
'zrender': __moduleId('zrender'),
|
||||
'sortablejs': __moduleId('sortablejs'),
|
||||
'amis': __moduleId('../src'),
|
||||
echarts: __moduleId('echarts'),
|
||||
zrender: __moduleId('zrender'),
|
||||
sortablejs: __moduleId('sortablejs'),
|
||||
amis: __moduleId('../src'),
|
||||
'amis/embed': __moduleId('./embed.tsx'),
|
||||
'prop-types': __moduleId('prop-types'),
|
||||
'async': __moduleId('async'),
|
||||
'qs': __moduleId('qs')
|
||||
async: __moduleId('async'),
|
||||
qs: __moduleId('qs')
|
||||
};
|
||||
|
||||
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;
|
||||
args.unshift(id);
|
||||
return require.apply(this, args);
|
||||
};
|
||||
}
|
||||
|
||||
(window as any).amisRequire = amisRequire;
|
||||
|
|
@ -43,4 +43,4 @@ if (!Array.prototype.find) {
|
|||
configurable: true,
|
||||
writable: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
if (!Array.from) {
|
||||
Array.from = (function () {
|
||||
Array.from = (function() {
|
||||
var toStr = Object.prototype.toString;
|
||||
var isCallable = function (fn) {
|
||||
var isCallable = function(fn) {
|
||||
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
|
||||
};
|
||||
var toInteger = function (value) {
|
||||
var toInteger = function(value) {
|
||||
var number = Number(value);
|
||||
if (isNaN(number)) { return 0; }
|
||||
if (number === 0 || !isFinite(number)) { return number; }
|
||||
if (isNaN(number)) {
|
||||
return 0;
|
||||
}
|
||||
if (number === 0 || !isFinite(number)) {
|
||||
return number;
|
||||
}
|
||||
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
||||
};
|
||||
var maxSafeInteger = Math.pow(2, 53) - 1;
|
||||
var toLength = function (value) {
|
||||
var toLength = function(value) {
|
||||
var len = toInteger(value);
|
||||
return Math.min(Math.max(len, 0), maxSafeInteger);
|
||||
};
|
||||
|
||||
// The length property of the from method is 1.
|
||||
return function from(arrayLike/*, mapFn, thisArg */) {
|
||||
return function from(arrayLike /*, mapFn, thisArg */) {
|
||||
// 1. Let C be the this value.
|
||||
var C = this;
|
||||
|
||||
|
|
@ -26,7 +30,9 @@ if (!Array.from) {
|
|||
|
||||
// 3. ReturnIfAbrupt(items).
|
||||
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.
|
||||
|
|
@ -36,7 +42,9 @@ if (!Array.from) {
|
|||
// 5. else
|
||||
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
|
||||
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.
|
||||
|
|
@ -62,7 +70,10 @@ if (!Array.from) {
|
|||
while (k < len) {
|
||||
kValue = items[k];
|
||||
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 {
|
||||
A[k] = kValue;
|
||||
}
|
||||
|
|
@ -73,5 +84,5 @@ if (!Array.from) {
|
|||
// 20. Return A.
|
||||
return A;
|
||||
};
|
||||
}());
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
if (typeof Object.assign != 'function') {
|
||||
// Must be writable: true, enumerable: false, configurable: true
|
||||
Object.defineProperty(Object, "assign", {
|
||||
value: function assign(target, varArgs) { // .length of function is 2
|
||||
Object.defineProperty(Object, 'assign', {
|
||||
value: function assign(target, varArgs) {
|
||||
// .length of function is 2
|
||||
'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');
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +14,8 @@ if (typeof Object.assign != 'function') {
|
|||
for (var index = 1; index < arguments.length; 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) {
|
||||
// Avoid bugs when hasOwnProperty is shadowed
|
||||
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
* @author mdn
|
||||
*/
|
||||
if (!Element.prototype.matches) {
|
||||
Element.prototype.matches = Element.prototype.msMatchesSelector
|
||||
|| Element.prototype.webkitMatchesSelector;
|
||||
Element.prototype.matches =
|
||||
Element.prototype.msMatchesSelector ||
|
||||
Element.prototype.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
if (!Element.prototype.closest) {
|
||||
Element.prototype.closest = function (s) {
|
||||
Element.prototype.closest = function(s) {
|
||||
var el = this;
|
||||
if (!document.documentElement.contains(el)) {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "amis",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.4-beta.3",
|
||||
"description": "一种MIS页面生成工具",
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
"stop": "fis3 server stop",
|
||||
"dev": "fis3 release -cwd ./public",
|
||||
"publish2npm": "sh publish.sh && npm publish",
|
||||
"prettier": "prettier --write 'src/**/*.{tsx,ts}'"
|
||||
"prettier": "prettier --write '{src,examples}/**/*.{tsx,ts,jsx}'"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -14,10 +14,18 @@ import {noop, autobind, qsstringify} from './utils/helper';
|
|||
import {RendererData, Action} from './types';
|
||||
|
||||
export interface ScopedComponentType extends React.Component<RendererProps> {
|
||||
focus?: () =>void;
|
||||
doAction?: (action: Action, data: RendererData, throwErrors?: boolean) => void;
|
||||
focus?: () => void;
|
||||
doAction?: (
|
||||
action: Action,
|
||||
data: RendererData,
|
||||
throwErrors?: boolean
|
||||
) => 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 {
|
||||
|
|
@ -32,7 +40,11 @@ export interface IScopedContext {
|
|||
type AlisIScopedContext = IScopedContext;
|
||||
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> = [];
|
||||
|
||||
return {
|
||||
|
|
@ -78,7 +90,8 @@ function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: Ren
|
|||
|
||||
const resolved = find(
|
||||
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));
|
||||
},
|
||||
|
|
@ -94,7 +107,8 @@ function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: Ren
|
|||
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 => {
|
||||
const idx2 = name.indexOf('?');
|
||||
let query = null;
|
||||
|
|
@ -119,7 +133,8 @@ function createScopedTools(path?: string, parent?: AlisIScopedContext, env?: Ren
|
|||
|
||||
send(receive: string, values: object) {
|
||||
const scoped = this;
|
||||
let receives = typeof receive === 'string' ? receive.split(/\s*,\s*/) : receive;
|
||||
let receives =
|
||||
typeof receive === 'string' ? receive.split(/\s*,\s*/) : receive;
|
||||
|
||||
// todo 没找到做提示！
|
||||
receives.forEach(name => {
|
||||
|
|
@ -167,7 +182,8 @@ export function HocScoped<
|
|||
scopeRef?: (ref: any) => void;
|
||||
}
|
||||
> {
|
||||
static displayName = `Scoped(${ComposedComponent.displayName || ComposedComponent.name})`;
|
||||
static displayName = `Scoped(${ComposedComponent.displayName ||
|
||||
ComposedComponent.name})`;
|
||||
static contextType = ScopedContext;
|
||||
static ComposedComponent = ComposedComponent;
|
||||
ref: any;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@ function convertFieldSetTabs2Controls(schema: any) {
|
|||
const toUpdate: any = {};
|
||||
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) => {
|
||||
if (Array.isArray(control)) {
|
||||
let converted = convertFieldSetTabs2Controls({
|
||||
|
|
@ -53,7 +55,10 @@ function convertFieldSetTabs2Controls(schema: any) {
|
|||
});
|
||||
|
||||
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;
|
||||
toUpdate.controls.push({
|
||||
...convertFieldSetTabs2Controls(fieldSet),
|
||||
|
|
@ -221,7 +226,10 @@ function convertArray2Hbox(arr: Array<any>): any {
|
|||
|
||||
// CRUD/List 和 CRUD/Card 的 body 中的数组用法转成 hbox
|
||||
addSchemaFilter(function(schema: Schema, renderer) {
|
||||
if (renderer.component !== CardRenderer && renderer.component !== ListItemRenderer) {
|
||||
if (
|
||||
renderer.component !== CardRenderer &&
|
||||
renderer.component !== ListItemRenderer
|
||||
) {
|
||||
return schema;
|
||||
}
|
||||
|
||||
|
|
@ -272,11 +280,18 @@ addSchemaFilter(function(scheam: Schema, renderer) {
|
|||
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,
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -23,12 +23,16 @@ export class NotFound extends React.Component<NotFoundProps, any> {
|
|||
<div className="container w-xxl w-auto-xs">
|
||||
<div className="text-center m-b-lg">
|
||||
<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>
|
||||
|
||||
{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 ? (
|
||||
<div className="text-center">
|
||||
|
|
|
|||
|
|
@ -149,7 +149,12 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
|||
classPrefix
|
||||
} = this.props;
|
||||
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-title')}>{this.state.title || title}</div>
|
||||
</div>
|
||||
|
|
@ -157,8 +162,13 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
|||
<div ref={this.bodyRef} />
|
||||
</div>
|
||||
<div className={cx('Modal-footer')}>
|
||||
{this.state.confirm ? <Button onClick={this.handleCancel}>{cancelText}</Button> : null}
|
||||
<Button level={this.state.confirm ? confirmBtnLevel : alertBtnLevel} onClick={this.handleConfirm}>
|
||||
{this.state.confirm ? (
|
||||
<Button onClick={this.handleCancel}>{cancelText}</Button>
|
||||
) : null}
|
||||
<Button
|
||||
level={this.state.confirm ? confirmBtnLevel : alertBtnLevel}
|
||||
onClick={this.handleConfirm}
|
||||
>
|
||||
{confirmText}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -167,9 +177,13 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
|||
}
|
||||
}
|
||||
|
||||
export const alert: (content: string, title?: string) => void = (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 alert: (content: string, title?: string) => void = (
|
||||
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 default ThemedAlert;
|
||||
|
|
|
|||
|
|
@ -20,12 +20,20 @@ export interface 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',
|
||||
className: '',
|
||||
showCloseButton: false
|
||||
};
|
||||
static propsList: Array<string> = ['level', 'className', 'showCloseButton', 'onClose'];
|
||||
static propsList: Array<string> = [
|
||||
'level',
|
||||
'className',
|
||||
'showCloseButton',
|
||||
'onClose'
|
||||
];
|
||||
|
||||
constructor(props: AlertProps) {
|
||||
super(props);
|
||||
|
|
@ -46,12 +54,22 @@ export class Alert extends React.Component<AlertProps, AlertState> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {classnames: cx, className, level, children, showCloseButton} = this.props;
|
||||
const {
|
||||
classnames: cx,
|
||||
className,
|
||||
level,
|
||||
children,
|
||||
showCloseButton
|
||||
} = this.props;
|
||||
|
||||
return this.state.show ? (
|
||||
<div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
|
||||
{showCloseButton ? (
|
||||
<button className={cx('Alert-close')} onClick={this.handleClick} type="button">
|
||||
<button
|
||||
className={cx('Alert-close')}
|
||||
onClick={this.handleClick}
|
||||
type="button"
|
||||
>
|
||||
<span>×</span>
|
||||
</button>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,12 @@ interface AsideNavProps {
|
|||
isActive: Function;
|
||||
isOpen: (link: LinkItemProps) => boolean;
|
||||
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 {
|
||||
|
|
@ -51,7 +56,12 @@ interface AsideNavState {
|
|||
export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
||||
static defaultProps = {
|
||||
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 ? (
|
||||
<ul className={cx('AsideNav-subList')}>
|
||||
{link.label ? (
|
||||
|
|
@ -59,13 +69,16 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
|||
<a>{link.label}</a>
|
||||
</li>
|
||||
) : null}
|
||||
{link.children.map((link, key) => renderLink(link, key, {}, depth + 1))}
|
||||
{link.children.map((link, key) =>
|
||||
renderLink(link, key, {}, depth + 1)
|
||||
)}
|
||||
</ul>
|
||||
) : link.label && depth === 1 ? (
|
||||
<div className={cx('AsideNav-tooltip')}>{link.label}</div>
|
||||
) : null,
|
||||
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) {
|
||||
|
|
@ -78,7 +91,9 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
|||
props.navigations,
|
||||
(item: Navigation) => {
|
||||
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 {
|
||||
...item,
|
||||
|
|
@ -100,14 +115,19 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
|||
const props = this.props;
|
||||
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;
|
||||
this.setState({
|
||||
navigations: mapTree(
|
||||
nextProps.navigations,
|
||||
(item: Navigation) => {
|
||||
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 {
|
||||
...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 {
|
||||
const {renderLink, isActive, renderSubLinks, classnames: cx, ...others} = this.props;
|
||||
renderLink(
|
||||
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)({
|
||||
link,
|
||||
|
|
@ -195,7 +226,10 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
|||
|
||||
navigation.label &&
|
||||
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>
|
||||
</li>
|
||||
);
|
||||
|
|
@ -207,7 +241,9 @@ export class AsideNav extends React.Component<AsideNavProps, AsideNavState> {
|
|||
|
||||
if (navigation.affix) {
|
||||
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(
|
||||
React.cloneElement(affix, {
|
||||
...affix.props,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@ import {pickEventsProps} from '../utils/helper';
|
|||
import {ClassNamesFn, themeable} from '../theme';
|
||||
|
||||
interface ButtonProps
|
||||
extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
||||
extends React.DetailedHTMLProps<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
HTMLButtonElement
|
||||
> {
|
||||
id?: string;
|
||||
className?: string;
|
||||
href?: string;
|
||||
|
|
@ -34,7 +37,12 @@ interface ButtonProps
|
|||
export class Button extends React.Component<ButtonProps> {
|
||||
static defaultProps: Pick<
|
||||
ButtonProps,
|
||||
'componentClass' | 'level' | 'type' | 'placement' | 'tooltipTrigger' | 'tooltipRootClose'
|
||||
| 'componentClass'
|
||||
| 'level'
|
||||
| 'type'
|
||||
| 'placement'
|
||||
| 'tooltipTrigger'
|
||||
| 'tooltipRootClose'
|
||||
> = {
|
||||
componentClass: 'button',
|
||||
level: 'default',
|
||||
|
|
@ -112,7 +120,9 @@ export class Button extends React.Component<ButtonProps> {
|
|||
rootClose={tooltipRootClose}
|
||||
>
|
||||
{disabled && disabledTip ? (
|
||||
<div className={cx('Button--disabled-wrap')}>{this.renderButton()}</div>
|
||||
<div className={cx('Button--disabled-wrap')}>
|
||||
{this.renderButton()}
|
||||
</div>
|
||||
) : (
|
||||
this.renderButton()
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import React from 'react';
|
|||
import cx from 'classnames';
|
||||
import {ClassNamesFn, themeable} from '../theme';
|
||||
import {autobind} from '../utils/helper';
|
||||
import { filter } from '../utils/tpl';
|
||||
import {filter} from '../utils/tpl';
|
||||
|
||||
const sizeMap = {
|
||||
sm: 'i-checks-sm',
|
||||
|
|
@ -80,7 +80,9 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
|||
labelClassName
|
||||
} = this.props;
|
||||
|
||||
className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
||||
className =
|
||||
(className ? className : '') +
|
||||
(size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
||||
|
||||
return (
|
||||
<label
|
||||
|
|
@ -108,7 +110,9 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
|||
/>
|
||||
<i />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,10 @@ export interface OptionProps {
|
|||
|
||||
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 (typeof value === 'string') {
|
||||
value = value.split(props.delimiter || ',');
|
||||
|
|
@ -55,7 +58,9 @@ export function value2array(value: OptionValue | Array<OptionValue>, props: Part
|
|||
return (value as Array<OptionValue>)
|
||||
.map((value: OptionValue) =>
|
||||
expandValue(
|
||||
!props.joinValues && value && value.hasOwnProperty(props.valueField || 'value')
|
||||
!props.joinValues &&
|
||||
value &&
|
||||
value.hasOwnProperty(props.valueField || 'value')
|
||||
? (value as any)[props.valueField || 'value']
|
||||
: value,
|
||||
props
|
||||
|
|
@ -68,10 +73,18 @@ export function value2array(value: OptionValue | Array<OptionValue>, props: Part
|
|||
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;
|
||||
|
||||
if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean' && valueType !== 'object') {
|
||||
if (
|
||||
valueType !== 'string' &&
|
||||
valueType !== 'number' &&
|
||||
valueType !== 'boolean' &&
|
||||
valueType !== 'object'
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -81,11 +94,19 @@ export function expandValue(value: OptionValue, props: Partial<OptionProps>): Op
|
|||
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'] || '';
|
||||
}
|
||||
|
||||
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;
|
||||
classPrefix: string;
|
||||
classnames: ClassNamesFn;
|
||||
|
||||
}
|
||||
|
||||
export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||
|
|
@ -127,7 +147,15 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
|||
};
|
||||
|
||||
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, {
|
||||
multiple: true,
|
||||
|
|
@ -157,7 +185,9 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
|||
let newValue: string | Array<Option> = valueArray;
|
||||
|
||||
if (joinValues) {
|
||||
newValue = newValue.map(item => item[valueField || 'value']).join(delimiter);
|
||||
newValue = newValue
|
||||
.map(item => item[valueField || 'value'])
|
||||
.join(delimiter);
|
||||
} else if (extractValue) {
|
||||
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 css = require('dom-helpers/style');
|
||||
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';
|
||||
|
||||
const collapseStyles: {
|
||||
|
|
@ -28,7 +32,10 @@ export interface CollapseProps {
|
|||
}
|
||||
|
||||
export class Collapse extends React.Component<CollapseProps, any> {
|
||||
static defaultProps: Pick<CollapseProps, 'show' | 'mountOnEnter' | 'unmountOnExit'> = {
|
||||
static defaultProps: Pick<
|
||||
CollapseProps,
|
||||
'show' | 'mountOnEnter' | 'unmountOnExit'
|
||||
> = {
|
||||
show: false,
|
||||
mountOnEnter: false,
|
||||
unmountOnExit: false
|
||||
|
|
@ -55,7 +62,10 @@ export class Collapse extends React.Component<CollapseProps, any> {
|
|||
@autobind
|
||||
handleExit(elem: HTMLElement) {
|
||||
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`;
|
||||
|
||||
// trigger browser reflow
|
||||
|
|
@ -68,7 +78,13 @@ export class Collapse extends React.Component<CollapseProps, any> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {show, children, classnames: cx, mountOnEnter, unmountOnExit} = this.props;
|
||||
const {
|
||||
show,
|
||||
children,
|
||||
classnames: cx,
|
||||
mountOnEnter,
|
||||
unmountOnExit
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Transition
|
||||
|
|
|
|||
|
|
@ -36,7 +36,10 @@ export interface ColorControlState {
|
|||
inputValue: string;
|
||||
}
|
||||
|
||||
export class ColorControl extends React.PureComponent<ColorProps, ColorControlState> {
|
||||
export class ColorControl extends React.PureComponent<
|
||||
ColorProps,
|
||||
ColorControlState
|
||||
> {
|
||||
static defaultProps = {
|
||||
format: 'hex',
|
||||
clearable: true,
|
||||
|
|
@ -153,12 +156,16 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
|
|||
} = this.props;
|
||||
|
||||
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') {
|
||||
onChange(`rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`);
|
||||
} else if (format === 'hsl') {
|
||||
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 {
|
||||
onChange(color.hex);
|
||||
|
|
@ -227,14 +234,21 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
|
|||
|
||||
{isOpened ? (
|
||||
<Overlay
|
||||
placement={placement || 'left-bottom-left-top right-bottom-right-top'}
|
||||
placement={
|
||||
placement || 'left-bottom-left-top right-bottom-right-top'
|
||||
}
|
||||
target={() => findDOMNode(this)}
|
||||
onHide={this.close}
|
||||
container={popOverContainer || (() => findDOMNode(this))}
|
||||
rootClose={false}
|
||||
show
|
||||
>
|
||||
<PopOver classPrefix={ns} className={cx('ColorPicker-popover')} onHide={this.close} overlay>
|
||||
<PopOver
|
||||
classPrefix={ns}
|
||||
className={cx('ColorPicker-popover')}
|
||||
onHide={this.close}
|
||||
overlay
|
||||
>
|
||||
<SketchPicker
|
||||
disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
|
||||
color={value}
|
||||
|
|
|
|||
|
|
@ -43,9 +43,15 @@ class BaseDatePicker extends ReactDatePicker {
|
|||
(this as any).getComponentProps = function() {
|
||||
const props = origin.apply(this);
|
||||
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;
|
||||
};
|
||||
|
|
@ -76,7 +82,13 @@ class BaseDatePicker extends ReactDatePicker {
|
|||
|
||||
if (this.props.renderInput) {
|
||||
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 {
|
||||
children = [<input key="i" {...finalInputProps} />];
|
||||
|
|
@ -117,9 +129,20 @@ interface CustomDaysViewProps {
|
|||
onChange: (value: moment.Moment) => void;
|
||||
setDateTimeState: (state: any) => void;
|
||||
setTime: (type: string, amount: number) => void;
|
||||
subtractTime: (amount: number, type: string, toSelected?: moment.Moment) => () => void;
|
||||
addTime: (amount: number, type: string, toSelected?: moment.Moment) => () => void;
|
||||
isValidDate?: (currentDate: moment.Moment, selected?: moment.Moment) => boolean;
|
||||
subtractTime: (
|
||||
amount: number,
|
||||
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;
|
||||
updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
|
||||
handleClickOutside: () => void;
|
||||
|
|
@ -223,11 +246,16 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
const viewDate = this.props.viewDate;
|
||||
const newDate = viewDate.clone().year(option.value);
|
||||
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();
|
||||
date[type](value);
|
||||
|
||||
|
|
@ -278,14 +306,19 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
month: irrelevantMonth,
|
||||
date: irrelevantDate
|
||||
});
|
||||
const noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
|
||||
const noOfDaysInYear = parseInt(
|
||||
currentYear.endOf('year').format('DDD'),
|
||||
10
|
||||
);
|
||||
const daysInYear = Array.from(
|
||||
{
|
||||
length: noOfDaysInYear
|
||||
},
|
||||
(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) {
|
||||
break;
|
||||
|
|
@ -305,14 +338,19 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
month: irrelevantMonth,
|
||||
date: irrelevantDate
|
||||
});
|
||||
const noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
|
||||
const noOfDaysInYear = parseInt(
|
||||
currentYear.endOf('year').format('DDD'),
|
||||
10
|
||||
);
|
||||
const daysInYear = Array.from(
|
||||
{
|
||||
length: noOfDaysInYear
|
||||
},
|
||||
(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) {
|
||||
break;
|
||||
|
|
@ -351,12 +389,17 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
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) {
|
||||
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) {
|
||||
days.push(i);
|
||||
}
|
||||
|
|
@ -389,7 +432,11 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
const inputs: Array<React.ReactNode> = [];
|
||||
|
||||
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 max = type === 'hours' ? 23 : 59;
|
||||
|
||||
|
|
@ -403,7 +450,13 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
onChange={e =>
|
||||
this.setTime(
|
||||
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();
|
||||
|
||||
if (
|
||||
(prevMonth.year() === currentYear && prevMonth.month() < currentMonth) ||
|
||||
(prevMonth.year() === currentYear &&
|
||||
prevMonth.month() < currentMonth) ||
|
||||
prevMonth.year() < currentYear
|
||||
)
|
||||
classes += ' rdtOld';
|
||||
else if (
|
||||
(prevMonth.year() === currentYear && prevMonth.month() > currentMonth) ||
|
||||
(prevMonth.year() === currentYear &&
|
||||
prevMonth.month() > currentMonth) ||
|
||||
prevMonth.year() > currentYear
|
||||
)
|
||||
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';
|
||||
|
||||
|
|
@ -512,7 +568,10 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
|||
<tr>
|
||||
<th colSpan={7}>
|
||||
<div className="rdtHeader">
|
||||
<a className="rdtBtn" onClick={this.props.subtractTime(1, 'months')}>
|
||||
<a
|
||||
className="rdtBtn"
|
||||
onClick={this.props.subtractTime(1, 'months')}
|
||||
>
|
||||
<i className="rdtBtnPrev" />
|
||||
</a>
|
||||
<div className="rdtSelect">{this.renderYearsSelect()}</div>
|
||||
|
|
@ -748,7 +807,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
|||
isOpened: false,
|
||||
isFocused: false,
|
||||
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
|
||||
};
|
||||
constructor(props: DateProps) {
|
||||
|
|
@ -775,7 +837,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
|||
if (this.props.value !== nextProps.value) {
|
||||
this.setState({
|
||||
value: nextProps.value
|
||||
? (nextProps.utc ? moment.utc : moment)(nextProps.value, nextProps.format)
|
||||
? (nextProps.utc ? moment.utc : moment)(
|
||||
nextProps.value,
|
||||
nextProps.format
|
||||
)
|
||||
: undefined
|
||||
});
|
||||
}
|
||||
|
|
@ -840,7 +905,14 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
|||
}
|
||||
|
||||
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)) {
|
||||
return;
|
||||
|
|
@ -889,7 +961,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
|||
this.dom = ref;
|
||||
};
|
||||
|
||||
getAvailableShortcuts(key:string) {
|
||||
getAvailableShortcuts(key: string) {
|
||||
if (availableShortcuts[key]) {
|
||||
return availableShortcuts[key];
|
||||
}
|
||||
|
|
@ -946,7 +1018,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
|||
onClick={this.handleClick}
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
|
|
@ -981,8 +1055,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
|||
: Array.isArray(shortcuts)
|
||||
? shortcuts
|
||||
: []
|
||||
)
|
||||
.map(key => {
|
||||
).map(key => {
|
||||
const shortcut = this.getAvailableShortcuts(key);
|
||||
|
||||
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 = {
|
||||
placeholder: '请选择日期范围',
|
||||
format: 'X',
|
||||
|
|
@ -171,8 +174,16 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
popover: any;
|
||||
input?: HTMLInputElement;
|
||||
|
||||
static formatValue(newValue: any, format: string, joinValues: boolean, delimiter: string) {
|
||||
newValue = [newValue.startDate.format(format), newValue.endDate.format(format)];
|
||||
static formatValue(
|
||||
newValue: any,
|
||||
format: string,
|
||||
joinValues: boolean,
|
||||
delimiter: string
|
||||
) {
|
||||
newValue = [
|
||||
newValue.startDate.format(format),
|
||||
newValue.endDate.format(format)
|
||||
];
|
||||
|
||||
if (joinValues) {
|
||||
newValue = newValue.join(delimiter);
|
||||
|
|
@ -181,7 +192,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
return newValue;
|
||||
}
|
||||
|
||||
static unFormatValue(value: any, format: string, joinValues: boolean, delimiter: string) {
|
||||
static unFormatValue(
|
||||
value: any,
|
||||
format: string,
|
||||
joinValues: boolean,
|
||||
delimiter: string
|
||||
) {
|
||||
if (!value) {
|
||||
return {
|
||||
startDate: undefined,
|
||||
|
|
@ -329,7 +345,10 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
}
|
||||
|
||||
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({
|
||||
endDate: newValue.clone()
|
||||
});
|
||||
|
|
@ -359,7 +378,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
|
||||
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')) {
|
||||
return false;
|
||||
|
|
@ -375,7 +399,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
|
||||
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')) {
|
||||
return false;
|
||||
|
|
@ -406,9 +435,18 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
|
||||
const {isOpened, isFocused, startDate, endDate} = this.state;
|
||||
|
||||
const selectedDate = DateRangePicker.unFormatValue(value, format, joinValues, delimiter);
|
||||
const startViewValue = selectedDate.startDate ? selectedDate.startDate.format(inputFormat) : '';
|
||||
const endViewValue = selectedDate.endDate ? selectedDate.endDate.format(inputFormat) : '';
|
||||
const selectedDate = DateRangePicker.unFormatValue(
|
||||
value,
|
||||
format,
|
||||
joinValues,
|
||||
delimiter
|
||||
);
|
||||
const startViewValue = selectedDate.startDate
|
||||
? selectedDate.startDate.format(inputFormat)
|
||||
: '';
|
||||
const endViewValue = selectedDate.endDate
|
||||
? selectedDate.endDate.format(inputFormat)
|
||||
: '';
|
||||
const arr = [];
|
||||
startViewValue && arr.push(startViewValue);
|
||||
endViewValue && arr.push(endViewValue);
|
||||
|
|
@ -431,9 +469,13 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
onClick={this.handleClick}
|
||||
>
|
||||
{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 ? (
|
||||
|
|
@ -475,7 +517,9 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
.map(key => (
|
||||
<li
|
||||
className={`${ns}DateRangePicker-ranger`}
|
||||
onClick={() => this.selectRannge(availableRanges[key])}
|
||||
onClick={() =>
|
||||
this.selectRannge(availableRanges[key])
|
||||
}
|
||||
key={key}
|
||||
>
|
||||
<a>{availableRanges[key].label}</a>
|
||||
|
|
@ -518,7 +562,8 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
|
|||
<div key="button" className={`${ns}DateRangePicker-actions`}>
|
||||
<a
|
||||
className={cx('rdtBtn rdtBtnConfirm', {
|
||||
'is-disabled': !this.state.startDate || !this.state.endDate
|
||||
'is-disabled':
|
||||
!this.state.startDate || !this.state.endDate
|
||||
})}
|
||||
onClick={this.confirm}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
*/
|
||||
|
||||
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 {Icon} from './icons';
|
||||
import cx from 'classnames';
|
||||
|
|
@ -43,7 +47,12 @@ const fadeStyles: {
|
|||
export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
||||
static defaultProps: Pick<
|
||||
DrawerProps,
|
||||
'container' | 'position' | 'size' | 'overlay' | 'disableOnClickOutside' | 'enableOnClickOutside'
|
||||
| 'container'
|
||||
| 'position'
|
||||
| 'size'
|
||||
| 'overlay'
|
||||
| 'disableOnClickOutside'
|
||||
| 'enableOnClickOutside'
|
||||
> = {
|
||||
container: document.body,
|
||||
position: 'left',
|
||||
|
|
@ -78,14 +87,17 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
|||
document.activeElement && (document.activeElement as HTMLElement).blur();
|
||||
onExited && onExited();
|
||||
setTimeout(() => {
|
||||
document.querySelector('.amis-dialog-widget') || document.body.classList.remove(`is-modalOpened`);
|
||||
document.querySelector('.amis-dialog-widget') ||
|
||||
document.body.classList.remove(`is-modalOpened`);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
modalRef = (ref: any) => {
|
||||
if (ref) {
|
||||
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 {
|
||||
removeModal();
|
||||
}
|
||||
|
|
@ -147,9 +159,19 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
|||
)}
|
||||
onClick={this.handleWidgetClick} // 其实不需要插件，直接写逻辑吧
|
||||
>
|
||||
{overlay ? <div 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`}>
|
||||
{overlay ? (
|
||||
<div
|
||||
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" />
|
||||
</a>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -26,95 +26,192 @@ try {
|
|||
// fis 编译的话，能正确赋值上，如果不是，那请通过外部参数传递。
|
||||
defaultConfig.url = __uri('monaco-editor/min/vs/loader.js');
|
||||
defaultConfig.paths = {
|
||||
vs: noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(/\/vs\/.*$/, ''),
|
||||
'vs/base/worker/workerMain': noJsExt(__uri('monaco-editor/min/vs/base/worker/workerMain.js')),
|
||||
vs: noJsExt(__uri('monaco-editor/min/vs/editor/editor.main.js')).replace(
|
||||
/\/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/azcli/azcli': noJsExt(__uri('monaco-editor/min/vs/basic-languages/azcli/azcli')),
|
||||
'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/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/apex/apex': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/apex/apex')
|
||||
),
|
||||
'vs/basic-languages/azcli/azcli': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/azcli/azcli')
|
||||
),
|
||||
'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/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(
|
||||
__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/go/go': noJsExt(__uri('monaco-editor/min/vs/basic-languages/go/go')),
|
||||
'vs/basic-languages/fsharp/fsharp': noJsExt(
|
||||
__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(
|
||||
__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/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/html/html': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/html/html')
|
||||
),
|
||||
'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(
|
||||
__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/lua/lua': noJsExt(__uri('monaco-editor/min/vs/basic-languages/lua/lua')),
|
||||
'vs/basic-languages/less/less': noJsExt(
|
||||
__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(
|
||||
__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(
|
||||
__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(
|
||||
__uri('monaco-editor/min/vs/basic-languages/postiats/postiats')
|
||||
),
|
||||
'vs/basic-languages/powershell/powershell': noJsExt(
|
||||
__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/python/python': noJsExt(__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/pug/pug': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/pug/pug')
|
||||
),
|
||||
'vs/basic-languages/python/python': noJsExt(
|
||||
__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(
|
||||
__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/rust/rust': noJsExt(__uri('monaco-editor/min/vs/basic-languages/rust/rust')),
|
||||
'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/ruby/ruby': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/ruby/ruby')
|
||||
),
|
||||
'vs/basic-languages/rust/rust': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/rust/rust')
|
||||
),
|
||||
'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(
|
||||
__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/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/sql/sql': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/sql/sql')
|
||||
),
|
||||
'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(
|
||||
__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/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/basic-languages/vb/vb': noJsExt(
|
||||
__uri('monaco-editor/min/vs/basic-languages/vb/vb')
|
||||
),
|
||||
'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.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/editor.main': noJsExt(
|
||||
__uri('monaco-editor/min/vs/editor/editor.main.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_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/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/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/jsonWorker': noJsExt(__uri('monaco-editor/min/vs/language/json/jsonWorker.js')),
|
||||
'vs/language/json/jsonMode': noJsExt(
|
||||
__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/htmlWorker': noJsExt(__uri('monaco-editor/min/vs/language/html/htmlWorker.js')),
|
||||
'vs/language/html/htmlMode': noJsExt(
|
||||
__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/cssWorker': noJsExt(__uri('monaco-editor/min/vs/language/css/cssWorker.js'))
|
||||
'vs/language/css/cssMode': noJsExt(
|
||||
__uri('monaco-editor/min/vs/language/css/cssMode.js')
|
||||
),
|
||||
'vs/language/css/cssWorker': noJsExt(
|
||||
__uri('monaco-editor/min/vs/language/css/cssWorker.js')
|
||||
)
|
||||
};
|
||||
|
||||
// cdn 支持
|
||||
|
|
@ -126,7 +223,9 @@ try {
|
|||
baseUrl: '${defaultConfig.paths.vs}',
|
||||
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) {}
|
||||
|
|
@ -198,7 +297,10 @@ export class Editor extends React.Component<EditorProps, any> {
|
|||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -267,9 +369,12 @@ export class Editor extends React.Component<EditorProps, any> {
|
|||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// Call the delayed callbacks when AMD loader has been loaded
|
||||
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__) {
|
||||
// We need to avoid loading multiple loader.js when there are multiple editors loading concurrently
|
||||
// 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: this,
|
||||
fn: onGotAmdLoader
|
||||
|
|
@ -309,7 +415,8 @@ export class Editor extends React.Component<EditorProps, any> {
|
|||
}
|
||||
|
||||
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 containerElement = this.container;
|
||||
if (!containerElement) {
|
||||
|
|
@ -323,7 +430,11 @@ export class Editor extends React.Component<EditorProps, any> {
|
|||
|
||||
if (this.props.language === 'json') {
|
||||
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) {
|
||||
// ignore
|
||||
}
|
||||
|
|
@ -370,8 +481,12 @@ export class Editor extends React.Component<EditorProps, any> {
|
|||
}
|
||||
})
|
||||
);
|
||||
onFocus && editor.onDidFocusEditorWidget && this.disposes.push(editor.onDidFocusEditorWidget(onFocus));
|
||||
onBlur && editor.onDidBlurEditorWidget && this.disposes.push(editor.onDidBlurEditorWidget(onBlur));
|
||||
onFocus &&
|
||||
editor.onDidFocusEditorWidget &&
|
||||
this.disposes.push(editor.onDidFocusEditorWidget(onFocus));
|
||||
onBlur &&
|
||||
editor.onDidBlurEditorWidget &&
|
||||
this.disposes.push(editor.onDidBlurEditorWidget(onBlur));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -380,7 +495,13 @@ export class Editor extends React.Component<EditorProps, any> {
|
|||
style.width = width;
|
||||
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');
|
||||
|
||||
return <Component ref={this.htmlRef} className={cx(`${ns}Html`, className)} />;
|
||||
return (
|
||||
<Component ref={this.htmlRef} className={cx(`${ns}Html`, className)} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue