ttk-app-core
Version:
enterprise develop framework
386 lines (384 loc) • 10.5 kB
JavaScript
export function getMeta() {
return {
name: 'root',
component: '::div',
className: 'ttk-edf-app-step-form',
children: [{
name: 'title',
component: '::div',
className: 'ttk-edf-app-step-form-title',
children: [{
name: 'header-title',
component: '::h2',
children: '分布表单'
}, {
name: 'header-title-detail',
component: '::p',
children: '将一个复杂冗长的表单，分成若干的步骤。'
}]
}, {
name: 'main',
component: '::div',
className: 'ttk-edf-app-step-form-main',
children: [{
name: 'steps',
component: 'Steps',
current: '{{data.current}}',
children: [{
name: 'step1',
component: 'Steps.Step',
title: '填写用户信息'
}, {
name: 'step2',
component: 'Steps.Step',
title: '确认用户信息'
}, {
name: 'step1',
component: 'Steps.Step',
title: '完成'
}]
}, {
name: 'stepContent1',
component: '::div',
_visible: '{{data.current == 0 ? true : false}}',
className: 'ttk-edf-app-step-form-main-content',
children: [{
name: 'form',
component: 'Form',
className: 'ttk-edf-app-step-form-main-content-form',
children: [{
name: 'name',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '姓名',
validateStatus: '{{data.error.name ? "error" : "success"}}',
help: '{{data.error.name ? data.error.name : ""}}',
children: {
name: 'input',
component: 'Input',
value: '{{data.form.name}}',
onChange: '{{function(e){$valueChange("name", e.target.value)}}}'
}
}, {
name: 'age',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '年龄',
validateStatus: '{{data.error.age ? "error" : "success"}}',
help: '{{data.error.age ? data.error.age : ""}}',
children: {
name: 'input',
component: 'Input.Number',
value: '{{data.form.age}}',
onChange: '{{function(value){$valueChange("age", value)}}}'
}
}, {
name: 'sex',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '性别',
validateStatus: '{{data.error.sex ? "error" : "success"}}',
help: '{{data.error.sex ? data.error.sex : ""}}',
children: [{
name: 'radiogroup',
component: 'Radio.Group',
value: '{{data.form.sex}}',
onChange: '{{function(e){$valueChange("sex", e.target.value)}}}',
children: [{
name: 'radio1',
component: 'Radio',
value: '1',
children: '男'
},{
name: 'radio2',
component: 'Radio',
value: '2',
children: '女'
}]
}]
}, {
name: 'deparment',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '部门',
validateStatus: '{{data.error.deparment ? "error" : "success"}}',
help: '{{data.error.deparment ? data.error.deparment : ""}}',
children: {
name: 'Select',
component: 'Select',
value: '{{data.form.deparment}}',
onChange: '{{function(value){$valueChange("deparment", value)}}}',
children: [{
name: 'select1',
component: 'Select.Option',
value: '1',
children: '部门1'
}, {
name: 'select1',
component: 'Select.Option',
value: '2',
children: '部门2'
}, {
name: 'select1',
component: 'Select.Option',
value: '3',
children: '部门3'
}]
}
}, {
name: 'detail',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '描述',
validateStatus: '{{data.error.detail ? "error" : "success"}}',
help: '{{data.error.detail ? data.error.detail : ""}}',
children: {
name: 'textrea',
component: 'Input.TextArea',
placeholder: '请输入你想说明的内容',
value: '{{data.form.detail}}',
onChange: '{{function(e){$valueChange("detail", e.target.value)}}}',
autosize:{ minRows: 2, maxRows: 6 }
}
}]
}]
}, {
name: 'stepContent2',
_visible: '{{data.current == 1 ? true : false}}',
component: '::div',
className: 'ttk-edf-app-step-form-main-content',
children: [{
name: 'form',
component: 'Form',
className: 'ttk-edf-app-step-form-main-content-form',
children: [{
name: 'address',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '地址',
validateStatus: '{{data.error.address ? "error" : "success"}}',
help: '{{data.error.address ? data.error.address : ""}}',
children: {
name: 'input',
component: 'Input.TextArea',
value: '{{data.form.address}}',
onChange: '{{function(e){$valueChange("address", e.target.value)}}}',
autosize:{ minRows: 2, maxRows: 6 }
}
}, {
name: 'level',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '等级',
validateStatus: '{{data.error.level ? "error" : "success"}}',
help: '{{data.error.level ? data.error.level : ""}}',
children: {
name: 'Select',
component: 'Select',
value: '{{data.form.level}}',
onChange: '{{function(value){$valueChange("level", value)}}}',
children: [{
name: 'select1',
component: 'Select.Option',
value: '1',
children: '初级'
}, {
name: 'select1',
component: 'Select.Option',
value: '2',
children: '中级'
}, {
name: 'select1',
component: 'Select.Option',
value: '3',
children: '高级'
}]
}
}, {
name: 'time',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '时间',
validateStatus: '{{data.error.time ? "error" : "success"}}',
help: '{{data.error.time ? data.error.time : ""}}',
children: {
name: 'DatePicker',
component: 'DatePicker',
value: '{{data.form.time}}',
onChange: '{{function(value){$valueChange("time", value)}}}'
}
}, {
name: 'checkbox',
component: 'Form.Item',
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
label: '接受协议',
validateStatus: '{{data.error.checkbox ? "error" : "success"}}',
help: '{{data.error.checkbox ? data.error.checkbox : ""}}',
children: {
name: 'Checkbox',
component: 'Checkbox',
checked: '{{data.form.checkbox}}',
value: '{{data.form.checkbox}}',
onChange: '{{function(e){$valueChange("checkbox", e.target.checked)}}}',
children: '同意该协议'
}
}]
}]
},{
name: 'stepContent2',
_visible: '{{data.current == 2 ? true : false}}',
component: '::div',
className: 'ttk-edf-app-step-form-main-content',
children: {
name: 'successTitle',
component: '::div',
className: 'ttk-edf-app-step-form-main-content-showSuccess',
children: [{
name: 'showicon',
component: '::div',
children: {
name: 'icon',
component: 'Icon',
type: 'check-circle-o'
}
},{
name: 'success',
component: '::div',
className: 'ttk-edf-app-step-form-main-content-showSuccess-1',
children: '创建成功！'
},{
name: 'success2',
component: '::div',
className: 'ttk-edf-app-step-form-main-content-showSuccess-2',
children: '预计生效时间2小时'
}]
}
}]
}, {
name: 'footer',
component: '::div',
className: 'ttk-edf-app-step-form-footer',
children: {
name: 'detail',
component: '::div',
children: [{
name: 'btn-pre',
component: 'Button',
_visible: '{{data.current == 1 ? true : false}}',
children: '上一步',
onClick: '{{function(){$preClick(data.current)}}}'
}, {
name: 'btn',
component: 'Button',
type: 'primary',
children: '下一步',
_visible: '{{data.current == 0 ? true : false}}',
onClick: '{{function(){$nextClick(data.current)}}}'
}, {
name: 'btn',
component: 'Button',
type: 'primary',
children: '重新创建',
_visible: '{{data.current == 2 ? true : false}}',
onClick: '{{function(){$nextClick(data.current)}}}'
},{
name: 'btn',
component: 'Button',
type: 'primary',
children: '提交',
_visible: '{{data.current == 1 ? true : false}}',
onClick: '{{function(){$nextClick(data.current)}}}'
}, {
name: 'btn-cancel',
component: 'Button',
children: '取消',
_visible: '{{data.current <= 1 ? true : false}}',
onClick: '{{function(){$cancelClick()}}}'
}]
}
}]
}
}
export function getInitState() {
return {
data: {
form: {
name: '',
age: '',
sex: '',
deparment: '',
detail: '',
address: '',
level: '',
time: '',
checkbox: ''
},
error: {
},
current: 0,
}
}
}