ttk-app-core
Version:
@ttk/recat enterprise develop framework
659 lines (658 loc) • 113 kB
JavaScript
import { Tax72 } from '@ttk/component';
export function getMeta() {
return {
name: 'root',
component: '::div',
className: 'ttk-tax72-demo',
children: [
{
name: 'head',
component: 'Tax72.Header',
logoType: 'bj',
hasLogin: '{{data.userInfo.hasLogin}}',
userName: '{{data.userInfo.userName}}',
onSearch: '{{function(value) { $onShowSuccessMsg("点击搜索" + value) }}}',
onHomeClick: '{{function(value) { $onShowSuccessMsg("点击主页") }}}',
onLogin: "{{function(value) { $setField('data.userInfo.hasLogin', true) }}}",
onLogout: "{{function(value) { $setField('data.userInfo.hasLogin', false) }}}",
onChangeUser: '{{function(value) { $onShowSuccessMsg("点击切换身份") }}}',
onChangeDepartment: '{{function(value) { $onShowSuccessMsg("点击选择主管税务机关" + value) }}}',
},
{
name: 'main',
component: '::div',
className: 'ttk-tax72-demo-main',
children: [
{
name: 'left',
component: '::div',
className: 'ttk-tax72-demo-left',
children: [
{
name: 'menuBox',
component: '::div',
style: { width: '228px' },
children: [
{ name: 'menuHeader', component: '::div', className: 'tax72-menu-header', children: 'Demo' },
{
name: 'menu',
component: 'Menu',
mode: 'inline',
inlineIndent: '20px',
style: { width: '228px' },
defaultOpenKeys: ['1'],
selectedKeys: '{{data.selectedKeys}}',
onSelect: "{{function({ item, key, keyPath, selectedKeys, domEvent }){$setField('data.selectedKeys', [key])}}}",
children: [
{
name: 'SubMenu1',
component: 'Menu.SubMenu',
title: '页面元素',
key: '1',
children: [
{ name: 'MenuItem11', component: 'Menu.Item', key: '11', children : 'LOGO图标' },
{ name: 'MenuItem12', component: 'Menu.Item', key: '12', children : 'PNG图标'},
{ name: 'MenuItem13', component: 'Menu.Item', key: '13', children : 'css字体图标' },
{ name: 'MenuItem14', component: 'Menu.Item', key: '14', children : '页头' },
{ name: 'MenuItem15', component: 'Menu.Item', key: '15', children : '标题/文本' },
{ name: 'MenuItem16', component: 'Menu.Item', key: '16', children : '按钮' },
{ name: 'MenuItem17', component: 'Menu.Item', key: '17', children : '提示/提醒' },
{ name: 'MenuItem18', component: 'Menu.Item', key: '18', children : '表单' },
{ name: 'MenuItem19', component: 'Menu.Item', key: '19', children : '选项卡' },
{ name: 'MenuItem20', component: 'Menu.Item', key: '20', children : 'Breadcrumb-面包屑' },
{ name: 'MenuItem21', component: 'Menu.Item', key: '21', children : '表格' },
{ name: 'MenuItem22', component: 'Menu.Item', key: '22', children : '弹出窗口' },
{ name: 'MenuItem23', component: 'Menu.Item', key: '23', children : '日期控件' },
{ name: 'MenuItem24', component: 'Menu.Item', key: '24', children : '左菜单' },
{ name: 'MenuItem25', component: 'Menu.Item', key: '25', children : 'loading-加载层' },
]
},
{
name: 'SubMenu2',
component: 'Menu.SubMenu',
title: '第三方组件',
key: '2',
children: [
{ name: 'MenuItem21', component: 'Menu.Item', key: '21',children : '二级菜单'},
{ name: 'MenuItem22', component: 'Menu.Item', key: '22',children : '二级菜单'},
]
},
{
name: 'SubMenu3',
component: 'Menu.SubMenu',
title: '自主变更',
key: '3',
children: [
{ name: 'MenuItem31', component: 'Menu.Item', key: '31',children : '二级菜单'},
{ name: 'MenuItem32', component: 'Menu.Item', key: '32',children : '二级菜单'},
]
},
{ name: 'MenuItem4', component: 'Menu.Item', children : '违法违章处理'},
{ name: 'MenuItem5', component: 'Menu.Item', children : '涉税代理业务服务'},
]
},
]
},
]
},
{
name: 'right',
component: '::div',
className: 'ttk-tax72-demo-right',
children: [
{ name: 'content11', component: '::div', _visible: "{{data.selectedKeys.includes('11')}}", children: [
{ name: 'header', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: '系统功能大图标(520*83 规格)' },
{ name: 'div', component: '::div', className: 'ttk-tax72-demo-logo', children: { name: 'logo', component: 'Tax72.Logo', type: '{{data.logoList[_rowIndex]}}'}, _power: 'for in data.logoList' },
] },
{ name: 'content12', component: '::div', _visible: "{{data.selectedKeys.includes('12')}}", children: [
{ name: 'header', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: '系统功能大图标(52*52 规格)——点击图标可复制代码' },
{ name: 'div', component: '::div', className: 'ttk-tax72-demo-png', children: {
name: 'pngLayout',
component: '::div',
className: 'ttk-tax72-demo-png-layout',
onClick: "{{function(){$copyPngCode(data.pngList[_rowIndex])}}}",
children: [
{ name: 'png', component: 'Tax72.Png', type: '{{data.pngList[_rowIndex].type}}' },
{ name: 'name', component: '::p', children: '{{data.pngList[_rowIndex].name}}' }
],
_power: 'for in data.pngList'
} },
] },
{ name: 'content13', component: '::div', _visible: "{{data.selectedKeys.includes('13')}}", children: [
{ name: 'header', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: 'fsicon 图标——点击图标可复制代码' },
{ name: 'div', component: '::div', className: 'ttk-tax72-demo-font', children: {
name: 'pngLayout',
component: '::div',
className: 'ttk-tax72-demo-font-layout',
onClick: "{{function(){$copyFontCode(data.fontList[_rowIndex])}}}",
children: [
{ name: 'icon', component: 'Icon', fontFamily: 'fsicon', type: '{{data.fontList[_rowIndex].type}}' },
{ name: 'name', component: '::p', children: '{{data.fontList[_rowIndex].name}}' }
],
_power: 'for in data.fontList'
} },
] },
{ name: 'content14', component: '::div', _visible: "{{data.selectedKeys.includes('14')}}", children: '见本页面页头' },
{ name: 'content15', component: '::div', _visible: "{{data.selectedKeys.includes('15')}}", children: [
{ name: 'header1', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: '标题' },
{ name: 'h1', component: '::h1', children : 'h1 电子税务局UI4.0' },
{ name: 'h2', component: '::h2', children : 'h2 电子税务局UI4.0' },
{ name: 'h3', component: '::h3', children : 'h3 电子税务局UI4.0' },
{ name: 'h4', component: '::h4', children : 'h4 电子税务局UI4.0' },
{ name: 'h5', component: '::h5', children : 'h5 电子税务局UI4.0' },
{ name: 'h6', component: '::h6', children : 'h6 电子税务局UI4.0' },
{ name: 'header2', component: 'Tax72.Title', style: { margin: '20px 0' }, title: '文本颜色(默认color:#333)' },
{ name: 'p1', component: '::p', className: 'ttk-tax72-font-strong', children : 'class="ttk-tax72-font-strong" 电子税务局UI4.0 color:#000' },
{ name: 'p2', component: '::p', children : '站点默认 电子税务局UI4.0 color:#333' },
{ name: 'p3', component: '::p', className: 'ttk-tax72-font-medium', children : 'class="ttk-tax72-font-medium" 电子税务局UI4.0 color:#666' },
{ name: 'p4', component: '::p', className: 'ttk-tax72-font-weak', children : 'class="ttk-tax72-font-weak" 电子税务局UI4.0 color:#999' },
{ name: 'p5', component: '::p', className: 'ttk-tax72-font-weakest', children : 'class="ttk-tax72-font-weakest" 电子税务局UI4.0 color:#aaa' },
{ name: 'p6', component: '::p', className: 'ttk-tax72-font-blue', children : 'class="ttk-tax72-font-blue" 电子税务局UI4.0 color:#0994dc' },
{ name: 'p7', component: '::p', className: 'ttk-tax72-font-orange', children : 'class="ttk-tax72-font-orange" 电子税务局UI4.0 color:#ff8939' },
{ name: 'p8', component: '::p', className: 'ttk-tax72-font-red', children : 'class="ttk-tax72-font-red" 电子税务局UI4.0 color:#ff0000' },
{ name: 'header3', component: 'Tax72.Title', style: { margin: '20px 0' }, title: '字体大小(默认14px)' },
{ name: 'p9', component: '::p', className: 'ttk-tax72-font-s24', children : 'class="ttk-tax72-font-s24" font-size:24px' },
{ name: 'p10', component: '::p', className: 'ttk-tax72-font-s20', children : 'class="ttk-tax72-font-s20" font-size:20px' },
{ name: 'p11', component: '::p', className: 'ttk-tax72-font-s18', children : 'class="ttk-tax72-font-s18" font-size:18px' },
{ name: 'p12', component: '::p', className: 'ttk-tax72-font-s16', children : 'class="ttk-tax72-font-s16" font-size:16px' },
{ name: 'p13', component: '::p', children : '站点默认 font-size:14px' },
{ name: 'p14', component: '::p', className: 'ttk-tax72-font-s12', children : 'class="ttk-tax72-font-s12" font-size:12px' },
{ name: 'header4', component: 'Tax72.Title', style: { margin: '20px 0' }, title: '区块标题' },
] },
{ name: 'content16', component: '::div', _visible: "{{data.selectedKeys.includes('16')}}", children: [
{ name: 'header2', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: 'Button-页面底部操作按钮' },
{
name: 'title',
component: '::div',
children: [
{ name: 'btn1', component: 'Button', children : '一般行动点' },
{ name: 'btn2', component: 'Button', type: 'primary', children : '强行动点' },
{ name: 'btn3', component: 'Button', type: 'warm', children : '暖色按钮' },
{ name: 'btn3', component: 'Button', type: 'danger', children : '警告按钮' },
{ name: 'btn4', component: 'Button', disabled: true, children : '禁用按钮' },
],
},
{ name: 'header3', component: 'Tax72.Title', style: { margin: '20px 0' }, title: 'Button-列表操作按钮' },
{
name: 'title',
component: '::div',
style: { lineHeight: '35px' },
children: [
{ name: 'btn1', component: 'Button', size: 'small', iconFontFamily: 'fsicon', icon: 'btn-invalidation', children : '申报作废' },
{ name: 'btn2', component: 'Button', size: 'small', iconFontFamily: 'fsicon', icon: 'btn-edit', children : '修改' },
{ name: 'btn3', component: 'Button', size: 'small', iconFontFamily: 'fsicon', icon: 'btn-del', children : '删除' },
{ name: 'btn4', component: 'Button', size: 'small', iconFontFamily: 'fsicon', icon: 'btn-Sync', children : '同步' },
{ name: 'btn5', component: 'Button', size: 'small', iconFontFamily: 'fsicon', icon: 'btn-refresh', children : '刷新' },
{ name: 'btn6', component: 'Button', size: 'small', iconFontFamily: 'fsicon', icon: 'btn-print', children : '打印' },
{ name: 'br', component: '::br' },
{ name: 'btn7', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-table', children : '申请表' },
{ name: 'btn8', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-review', children : '审核' },
{ name: 'btn9', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-pay', children : '缴款' },
{ name: 'btn10', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-check', children : '查看' },
{ name: 'btn11', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-tracking', children : '进度追踪' },
{ name: 'btn12', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-add', children : '添加' },
{ name: 'btn13', component: 'Button', size: 'small', type: 'primary', iconFontFamily: 'fsicon', icon: 'btn-save', children : '设置保存' },
{ name: 'btn14', component: 'Button', size: 'small', disabled: true, iconFontFamily: 'fsicon', icon: 'btn-add', children : '添加' },
],
},
{ name: 'header4', component: 'Tax72.Title', style: { margin: '20px 0' }, title: 'Button-页面底部操作按钮' },
{
name: 'title',
component: '::div',
children: [
{ name: 'btn1', component: 'Button', size: 'small', children : '普通操作' },
{ name: 'btn2', component: 'Button', size: 'small', type: 'primary', children : '推荐操作' },
{ name: 'btn3', component: 'Button', size: 'small', type: 'danger', children : '警惕操作' },
],
},
{ name: 'header5', component: 'Tax72.Title', style: { margin: '20px 0' }, title: '文字链接' },
{
name: 'title',
component: '::div',
children: [
{ name: 'link1', component: 'Link', children : '新开页面跳转(强)' },
{ name: 'link2', component: 'Link', className: 'mk-link-medium', style: { marginLeft: '10px' }, children : '新开页面跳转(中)' },
{ name: 'link3', component: 'Link', className: 'mk-link-weak', style: { marginLeft: '10px' }, children : '新开页面跳转(弱)' },
{ name: 'link4', component: 'Link', className: 'mk-link-weakest', style: { marginLeft: '10px' }, children : '新开页面跳转(最弱)' },
{ name: 'link5', component: 'Link', className: 'mk-link-blank', style: { marginLeft: '10px' }, children : '外部超链接' },
],
},
] },
{ name: 'content17', component: '::div', _visible: "{{data.selectedKeys.includes('17')}}", children: [
{ name: 'header6', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: 'Notice-提示' },
{ name: 'alert1', component: 'Alert', style: { marginTop: '10px' }, message: '温馨提醒primary', type: "warning", showIcon: true, closable: true, onClose: '{{function(value) { $onShowSuccessMsg("温馨提醒primary关闭") }}}' },
{ name: 'alert2', component: 'Alert', style: { marginTop: '10px' }, message: '通知info', type: "info", showIcon: true, closable: true, onClose: '{{function(value) { $onShowSuccessMsg("通知info关闭") }}}' },
{ name: 'alert3', component: 'Alert', style: { marginTop: '10px' }, message: '严重警告warning', type: "error", showIcon: true, closable: true, onClose: '{{function(value) { $onShowSuccessMsg("严重警告warning关闭") }}}' },
{ name: 'alert7', component: 'Tax72.Reminder', style: { marginTop: '10px' }, title: '温馨提示', children: [
'事项进度管理可以进行查看、修改、删除和跟踪事项申请记录，便于纳税人跟进税务机关的受理进度',
{ name: 'li1', component: 'Tax72.Reminder.Li', children: [
'可进行',
{ name: 'link1', component: 'Link', children : '修改' },
'操作的办理状态有：“资料已保存” “资料已提交，带受理（可修改）” “受理不通过，待补齐补正” “预审不通过，待受理（可修改）”',
] },
{ name: 'li2', component: 'Tax72.Reminder.Li', children: [
'可进行',
{ name: 'link1', component: 'Link', children : '删除' },
'操作的办理状态有：“资料已保存” “资料已提交，带受理（可修改）” “预审不通过，待受理（可修改）”',
] },
] },
] },
{ name: 'content18', component: '::div', _visible: "{{data.selectedKeys.includes('18')}}", children: [
{ name: 'header7', component: 'Tax72.Title', style: { marginBottom: '20px' }, title: '表单集合演示' },
{
name: 'form',
component: 'Form',
hideRequiredMark: true,
style: { width: '100%' },
children: [
{
name: 'item1',
component: 'Form.Item',
label: '单行输入框',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
validateStatus: "{{data.other.error.name?'error':'success'}}",
help: '{{data.other.error.name}}',
children: {
name: 'property',
component: 'Input',
placeholder: '请输入标题',
value: "{{data.form.name}}",
onChange: "{{function(e){$setFields({ 'data.form.name': e.target.value, 'data.other.error.name': undefined })}}}",
}
},
{
name: 'item2',
component: 'Form.Item',
label: '验证必填项',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
validateStatus: "{{data.other.error.verify?'error':'success'}}",
help: '{{data.other.error.verify}}',
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
value: "{{data.form.verify}}",
onChange: "{{function(e){$setFields({ 'data.form.verify': e.target.value, 'data.other.error.verify': undefined })}}}",
}
},
{
name: 'row1',
component: 'Row',
children: [
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '验证手机',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
}
}
},
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '验证邮箱',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
}
}
},
]
},
{
name: 'row1',
component: 'Row',
children: [
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '多规则验证',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
}
}
},
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '验证日期',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
}
}
},
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '验证链接',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
}
}
},
]
},
{
name: 'item3',
component: 'Form.Item',
label: '验证身份证',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'property',
component: 'Input',
placeholder: '请输入',
}
},
{
name: 'item3',
component: 'Form.Item',
label: '自定义验证',
labelCol: { span: 3 },
wrapperCol: { span: 5 },
children: {
name: 'property',
component: 'Input',
type: 'password',
placeholder: '请填写6到12位密码',
}
},
{
name: 'item3',
component: 'Form.Item',
label: '范围',
labelCol: { span: 3 },
wrapperCol: { span: 5 },
children: {
name: 'div',
component: '::div',
style: { display: 'flex' },
children: [
{
name: 'property',
component: 'Input',
placeholder: '￥',
},
{
name: 'p',
component: '::p',
style: { margin: '0 10px'},
children: '-',
},
{
name: 'property',
component: 'Input',
placeholder: '￥',
}
]
}
},
{
name: 'item3',
component: 'Form.Item',
label: '单行选择框',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'select',
component: 'Select',
placeholder: '请选择',
showSearch: false,
children: [
{ name: 'opt1', component: 'Select.Option', value: 'optId1', children: '写作' },
{ name: 'opt2', component: 'Select.Option', value: 'optId2', children: '阅读' },
{ name: 'opt3', component: 'Select.Option', value: 'optId3', children: '音乐' },
{ name: 'opt4', component: 'Select.Option', value: 'optId4', children: '游戏' },
{ name: 'opt5', component: 'Select.Option', value: 'optId5', children: '旅行' },
],
style: { width: '100%' }
}
},
{
name: 'row1',
component: 'Row',
children: [
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '分组选择框',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'select',
component: 'Select',
showSearch: false,
placeholder: '请选择问题',
children: [
{
name: 'OptGroup1',
component: 'Select.OptGroup',
label: '城市记忆',
children: [
{
name: 'opt11',
component: 'Select.Option',
value: 'fistcity',
children: '你工作的第一个城市',
},
],
},
{
name: 'OptGroup2',
component: 'Select.OptGroup',
label: '学生时代',
children: [
{
name: 'opt21',
component: 'Select.Option',
value: 'yournum',
children: '你的工号',
},
{
name: 'opt22',
component: 'Select.Option',
value: 'teacher',
children: '你最喜欢的老师',
},
],
}
],
style: {width: '100%'}
}
}
},
{
name: 'row1',
component: 'Col',
span: '8',
children: {
name: 'item3',
component: 'Form.Item',
label: '搜索选择框',
labelCol: { span: 9 },
wrapperCol: { span: 15 },
children: {
name: 'select',
component: 'Select',
showSearch: true,
placeholder: '直接选择或搜索选择',
value: '{{data.searchSelectedValue}}',
onChange: "{{function(value){$setField('data.searchSelectedValue', value)}}}",
filterOption: "{{function(input, option) {return option.props.children.includes(input)}}}",
children: {
name: 'option',
component: 'Select.Option',
value: "{{data.searchSelectList && data.searchSelectList[_rowIndex].value}}",
children: '{{data.searchSelectList && data.searchSelectList[_rowIndex].label}}',
_power: 'for in data.searchSelectList'
},
style: {width: '100%'}
}
}
},
]
},
{
name: 'item3',
component: 'Form.Item',
label: '联动选择框',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'property',
component: 'Address',
value: { disabled: false },
showDetail: false,
width: 123,
height: 50,
// provinces: '{{data.form.registeredProvincial}}',
// citys: '{{data.form.registeredCity}}',
// districts: '{{data.form.registeredCounty}}',
// text: '{{data.form.registeredAddress}}',
// onChange: "{{function(e) {$setAddress(e)}}}",
getPopupContainer:".ttk-tax72-demo",
}
},
{
name: 'item3',
component: 'Form.Item',
label: '原始复选框',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'cgroup',
component: 'Checkbox.Group',
children: [
{
name: 'check1',
component: 'Checkbox',
value: 'check1',
children: '写作'
},
{
name: 'check2',
component: 'Checkbox',
value: 'check2',
children: '阅读'
},
{
name: 'check3',
component: 'Checkbox',
value: 'check3',
disabled: true,
children: '游戏'
}
]
}
},
{
name: 'item3',
component: 'Form.Item',
label: '开关-默认关',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'Switch',
component: 'Switch',
checkedChildren: 'ON',
unCheckedChildren: 'OFF',
defaultChecked: false,
}
},
{
name: 'item3',
component: 'Form.Item',
label: '开关-默认开',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'Switch',
component: 'Switch',
checkedChildren: 'ON',
unCheckedChildren: 'OFF',
defaultChecked: true,
}
},
{
name: 'item3',
component: 'Form.Item',
label: '单选框',
labelCol: { span: 3 },
wrapperCol: { span: 21 },
children: {
name: 'cgroup',
component: 'Radio.Group',
defaultValue: 'radio1',
children: [
{
name: 'radio1',
component: 'Radio',
value: 'radio1',
children: '男'
},
{
name: 'radio2',
component: 'Radio',
value: 'radio2',
children: '女'
},
{
name: 'radio3',
component: 'Radio',
value: 'radio3',
disabled: true,
children: '禁用'
}
]
}
},
{
name: 'item3',
component: 'Form.Item',
label: '普通文本域',