mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
677 lines
32 KiB
JavaScript
677 lines
32 KiB
JavaScript
export default {
|
|
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
|
|
title: "Combo 示例",
|
|
body: [
|
|
{
|
|
type: "tabs",
|
|
tabs: [
|
|
{
|
|
title: "基本用法",
|
|
hash: 'basic',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
{
|
|
type: 'text',
|
|
label: '文本',
|
|
name: 'a'
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
type: "combo",
|
|
name: "combo1",
|
|
label: "组合多条多行",
|
|
multiple: true,
|
|
multiLine: true,
|
|
value: [{}],
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
label: "文本",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: '',
|
|
size: 'full'
|
|
},
|
|
{
|
|
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",
|
|
dialog: {
|
|
title: "对 Combo 进行 拖拽排序",
|
|
body: {
|
|
type: "form",
|
|
controls: [
|
|
{
|
|
type: "combo",
|
|
name: "combo1",
|
|
label: false,
|
|
multiple: true,
|
|
draggable: true,
|
|
addable: false,
|
|
removable: false,
|
|
value: [{}],
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "static",
|
|
tpl: "${a} - ${b}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
actions: [
|
|
{
|
|
type: "submit",
|
|
mergeData: true,
|
|
label: "确认",
|
|
level: "primary"
|
|
},
|
|
|
|
{
|
|
type: "button",
|
|
actionType: "close",
|
|
label: "取消"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo2",
|
|
label: "组合多条单行",
|
|
multiple: true,
|
|
value: [{}],
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: ''
|
|
},
|
|
{
|
|
name: "b",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
type: "combo",
|
|
name: "combo3",
|
|
label: "组合单条多行",
|
|
multiLine: true,
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
label: "文本",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: '',
|
|
size: 'full'
|
|
},
|
|
{
|
|
name: "b",
|
|
label: "选项",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo4",
|
|
label: "组合单条单行",
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: '',
|
|
size: 'full'
|
|
},
|
|
{
|
|
name: "b",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "内联样式",
|
|
hash: 'inline',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
controls: [
|
|
{
|
|
type: "combo",
|
|
name: "combo11",
|
|
label: "组合多条多行内联",
|
|
multiple: true,
|
|
multiLine: true,
|
|
inline: true,
|
|
value: [{}],
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
label: "文本",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: ''
|
|
},
|
|
{
|
|
name: "b",
|
|
label: "选项",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo22",
|
|
label: "组合多条单行内联",
|
|
multiple: true,
|
|
inline: true,
|
|
value: [{}],
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: ''
|
|
},
|
|
{
|
|
name: "b",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
type: "combo",
|
|
name: "combo33",
|
|
label: "组合单条多行内联",
|
|
multiLine: true,
|
|
inline: true,
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
label: "文本",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: ''
|
|
},
|
|
{
|
|
name: "b",
|
|
label: "选项",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo44",
|
|
label: "组合单条单行内联",
|
|
inline: true,
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: ''
|
|
},
|
|
{
|
|
name: "b",
|
|
type: "select",
|
|
options: ["a", "b", "c"]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "唯一验证",
|
|
hash: 'unique',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
{
|
|
type: "combo",
|
|
name: "combo666",
|
|
label: "组合多条唯一",
|
|
multiple: true,
|
|
value: [{}],
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: '',
|
|
unique: true
|
|
},
|
|
{
|
|
name: "b",
|
|
type: "select",
|
|
options: ["a", "b", "c"],
|
|
unique: true
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "可拖拽排序",
|
|
hash: 'sortable',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo777",
|
|
label: "可拖拽排序",
|
|
multiple: true,
|
|
value: [{a: '1', b: "a"}, {a: '2', b: "b"}],
|
|
draggable: true,
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
unique: true
|
|
},
|
|
{
|
|
name: "b",
|
|
type: "select",
|
|
options: ["a", "b", "c"],
|
|
unique: true
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "值打平",
|
|
hash: 'flat',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo888",
|
|
label: "可打平只存储值",
|
|
multiple: true,
|
|
flat: true,
|
|
value: ["red", "pink"],
|
|
draggable: true,
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
type: "color",
|
|
placeholder: "选取颜色"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "static",
|
|
name: "combo888",
|
|
label: "当前值",
|
|
tpl: "<pre>${combo888|json}</pre>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "条件",
|
|
hash: 'conditions',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
'<p class="m-b-xl">添加时可选择类型，比如这个栗子，可以选择是文本类型还是数字类型</p>',
|
|
{
|
|
type: 'combo',
|
|
name: 'combo-conditions1',
|
|
label: '单选',
|
|
value: {
|
|
type: "number"
|
|
},
|
|
multiLine: true,
|
|
conditions: [
|
|
{
|
|
label: '文本',
|
|
test: 'this.type === "text"',
|
|
scaffold: {
|
|
type: "text",
|
|
label: "文本",
|
|
name: ""
|
|
},
|
|
controls: [
|
|
{
|
|
label: "名称",
|
|
name: "label",
|
|
type: "text"
|
|
},
|
|
{
|
|
label: "字段名",
|
|
name: "name",
|
|
type: "text"
|
|
},
|
|
]
|
|
},
|
|
|
|
{
|
|
label: '数字',
|
|
test: 'this.type === "number"',
|
|
scaffold: {
|
|
type: "number",
|
|
label: "数字",
|
|
name: ""
|
|
},
|
|
controls: [
|
|
{
|
|
label: "名称",
|
|
name: "label",
|
|
type: "text"
|
|
},
|
|
{
|
|
label: "字段名",
|
|
name: "name",
|
|
type: "text"
|
|
},
|
|
{
|
|
label: "最小值",
|
|
name: "min",
|
|
type: "number"
|
|
},
|
|
{
|
|
label: "最大值",
|
|
name: "max",
|
|
type: "number"
|
|
},
|
|
{
|
|
label: "步长",
|
|
name: "step",
|
|
type: "number"
|
|
}
|
|
]
|
|
}
|
|
],
|
|
},
|
|
|
|
{
|
|
type: 'combo',
|
|
name: 'combo-conditions2',
|
|
label: '多选',
|
|
value: [
|
|
{
|
|
type: "text"
|
|
}
|
|
],
|
|
multiLine: true,
|
|
multiple: true,
|
|
typeSwitchable: false,
|
|
conditions: [
|
|
{
|
|
label: '文本',
|
|
test: 'this.type === "text"',
|
|
scaffold: {
|
|
type: "text",
|
|
label: "文本",
|
|
name: ""
|
|
},
|
|
controls: [
|
|
{
|
|
label: "名称",
|
|
name: "label",
|
|
type: "text"
|
|
},
|
|
{
|
|
label: "字段名",
|
|
name: "name",
|
|
type: "text"
|
|
},
|
|
]
|
|
},
|
|
|
|
{
|
|
label: '数字',
|
|
test: 'this.type === "number"',
|
|
scaffold: {
|
|
type: "number",
|
|
label: "数字",
|
|
name: ""
|
|
},
|
|
controls: [
|
|
{
|
|
label: "名称",
|
|
name: "label",
|
|
type: "text"
|
|
},
|
|
{
|
|
label: "字段名",
|
|
name: "name",
|
|
type: "text"
|
|
},
|
|
{
|
|
label: "最小值",
|
|
name: "min",
|
|
type: "number"
|
|
},
|
|
{
|
|
label: "最大值",
|
|
name: "max",
|
|
type: "number"
|
|
},
|
|
{
|
|
label: "步长",
|
|
name: "step",
|
|
type: "number"
|
|
}
|
|
]
|
|
}
|
|
],
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "Tabs",
|
|
hash: "tabs",
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
{
|
|
type: "combo",
|
|
name: "combo101",
|
|
label: "组合多条多行",
|
|
multiple: true,
|
|
multiLine: true,
|
|
value: [{}],
|
|
tabsMode: true,
|
|
tabsStyle: 'card',
|
|
maxLength: 3,
|
|
controls: [
|
|
{
|
|
name: "a",
|
|
label: "文本",
|
|
type: "text",
|
|
placeholder: "文本",
|
|
value: '',
|
|
size: 'full'
|
|
},
|
|
{
|
|
name: "b",
|
|
label: "选项",
|
|
type: "select",
|
|
options: ["a", "b", "c"],
|
|
size: 'full'
|
|
}
|
|
]
|
|
},
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
title: "其他",
|
|
hash: 'others',
|
|
body: [
|
|
{
|
|
type: "form",
|
|
api: "/api/mock2/saveForm?waitSeconds=2",
|
|
title: "",
|
|
mode: "horizontal",
|
|
wrapWithPanel: false,
|
|
className: "m-t",
|
|
// debug: true,
|
|
controls: [
|
|
|
|
|
|
{
|
|
type: "text",
|
|
disabled: true,
|
|
label: "父级值",
|
|
name: "a_super",
|
|
value: "123"
|
|
},
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo999",
|
|
label: "可获取父级数据",
|
|
multiple: true,
|
|
canAccessSuperData: true,
|
|
controls: [
|
|
{
|
|
name: "a_super",
|
|
type: "text"
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
type: "combo",
|
|
name: "combo9999",
|
|
label: "显示序号",
|
|
multiple: true,
|
|
controls: [
|
|
{
|
|
type: "tpl",
|
|
tpl: "<%= data.index + 1%>",
|
|
className: "p-t-xs",
|
|
mode: "inline"
|
|
},
|
|
{
|
|
name: "a",
|
|
type: "text"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|