mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-20 17:42:57 +00:00
664 lines
27 KiB
Plaintext
664 lines
27 KiB
Plaintext
<div className="editor">
|
||
<DesignView
|
||
eventPipe={editor}
|
||
defaultSchema={{
|
||
componentsTree: [
|
||
{
|
||
componentName: 'Page',
|
||
fileName: 'form',
|
||
props: { style: { paddingTop: 20, paddingRight: 20, paddingLeft: 20 } },
|
||
children: [
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { height: '255px' } },
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: { text: '内容筛选', style: { fontWeight: 'bold', fontSize: '16px' } },
|
||
},
|
||
{
|
||
componentName: 'Form',
|
||
props: {
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
marginTop: 10,
|
||
paddingLeft: 10,
|
||
textAlign: 'center',
|
||
float: 'left',
|
||
minWidth: '900px',
|
||
},
|
||
labelTextAlign: 'right',
|
||
wrapperCol: 12,
|
||
labelAlign: 'left',
|
||
inline: false,
|
||
labelCol: 6,
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: {
|
||
type: 'JSSlot',
|
||
value: {
|
||
componentName: 'Fragment',
|
||
children: '所属应用：'
|
||
}
|
||
},
|
||
// '所属应用：',
|
||
name: 'appApply',
|
||
initValue: '22',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
labelTextAlign: 'right',
|
||
asterisk: false,
|
||
labelAlign: 'left',
|
||
size: 'medium',
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Input',
|
||
props: { placeholder: '请输入', size: 'medium', style: { width: '200px' } },
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '分类ID：',
|
||
name: 'typeId',
|
||
initValue: '22',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'NumberPicker',
|
||
props: { size: 'medium', type: 'normal', style: { width: '200px' } },
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '标签ID：',
|
||
name: 'tagId',
|
||
initValue: '22',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'NumberPicker',
|
||
props: { size: 'medium', type: 'normal', style: { width: '200px' } },
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '开始时间：',
|
||
name: 'startTime',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
},
|
||
children: [{ componentName: 'TimePicker', props: {} }],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '结束时间：',
|
||
name: 'workendTIme',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
},
|
||
children: [{ componentName: 'TimePicker', props: {} }],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '尺寸：',
|
||
name: 'size',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
labelTextAlign: 'right',
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Select',
|
||
props: {
|
||
dataSource: [
|
||
{ label: '教师', value: 't' },
|
||
{ label: '医生', value: 'd' },
|
||
{ label: '歌手', value: 's' },
|
||
],
|
||
style: { width: '200px' },
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '删除状态：',
|
||
name: 'isRemoved',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Select',
|
||
props: {
|
||
dataSource: [
|
||
{ label: '教师', value: 't' },
|
||
{ label: '医生', value: 'd' },
|
||
{ label: '歌手', value: 's' },
|
||
],
|
||
style: { width: '200px' },
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '讨论ID：',
|
||
name: 'talkId',
|
||
initValue: '22',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
labelTextAlign: 'right',
|
||
asterisk: false,
|
||
labelAlign: 'left',
|
||
size: 'medium',
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Input',
|
||
props: { placeholder: '请输入', size: 'medium', style: { width: '200px' } },
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'FormItem',
|
||
props: {
|
||
label: '置顶：',
|
||
name: 'isTop',
|
||
style: {
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
alignItems: 'center',
|
||
flexWrap: 'nowrap',
|
||
width: '33.33%',
|
||
height: '40px',
|
||
verticalAlign: 'middle',
|
||
float: 'left',
|
||
},
|
||
},
|
||
children: [
|
||
{
|
||
componentName: 'Select',
|
||
props: {
|
||
dataSource: [
|
||
{ label: '教师', value: 't' },
|
||
{ label: '医生', value: 'd' },
|
||
{ label: '歌手', value: 's' },
|
||
],
|
||
style: { width: '200px' },
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { display: 'block', width: '100%', textAlign: 'left' } },
|
||
children: [
|
||
{
|
||
componentName: 'ButtonGroup',
|
||
props: {},
|
||
children: [
|
||
{
|
||
componentName: 'Button',
|
||
props: { type: 'normal', style: { margin: '0 5px 0 5px' }, htmlType: 'reset' },
|
||
children: '重置',
|
||
},
|
||
{
|
||
componentName: 'Button',
|
||
props: { type: 'primary', style: { margin: '0 5px 0 5px' }, htmlType: 'submit' },
|
||
children: '确定',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
dataSource: {
|
||
dataHandler: function dataHandler(dataMap) {
|
||
let dataSource = [
|
||
{
|
||
id: 1,
|
||
title: '2017秋冬新款背带裙复古格子连衣裙清新背心裙a字裙短裙子',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '2017秋冬新款 高质感特定纱线欧美宽松马海毛羊毛毛衣',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '日式天然玉米皮草编碗垫锅垫隔热垫茶垫加厚餐垫GD-29',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '2017秋冬新款 绑带腰封设计感超顺滑质感落肩铜氨丝连衣裙',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '日式糖果色陶瓷柄不锈钢餐具西餐牛扒刀叉勺子咖啡勺',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '日式和风深蓝素色文艺餐巾餐垫围裙锅垫隔热手套厨房桌布',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 7,
|
||
title: '日式雪点樱花手绘陶瓷餐具米饭碗拉面碗寿司盘子汤碗',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
{
|
||
id: 8,
|
||
title: '川岛屋 釉下彩复古日式陶瓷盘子菜盘圆盘调味碟 米饭碗日式餐具',
|
||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||
type: '清单',
|
||
publishTime: '17-04-28 20:29:20',
|
||
publishStatus: '已发布',
|
||
pushStatus: '已推送至订阅号',
|
||
operation: { edit: true },
|
||
},
|
||
];
|
||
return { ...dataMap, dataSource };
|
||
},
|
||
},
|
||
},
|
||
{
|
||
componentName: 'Page',
|
||
fileName: 'list',
|
||
props: { style: { paddingTop: 20, paddingRight: 20, paddingLeft: 20 } },
|
||
children: [
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { height: '90px', lineHeight: '30px' } },
|
||
children: [
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { float: 'left' } },
|
||
children: [
|
||
{ componentName: 'Text', props: { style: { paddingLeft: 5, cursor: 'pointer' }, text: '最热' } },
|
||
{
|
||
componentName: 'Icon',
|
||
props: {
|
||
size: 'small',
|
||
style: { paddingRight: 5, paddingLeft: 5, fontSize: 14, color: '#4a90e2', cursor: 'pointer' },
|
||
type: 'sorting',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { float: 'left' } },
|
||
children: [
|
||
{ componentName: 'Text', props: { text: '最新', style: { paddingLeft: 10, cursor: 'pointer' } } },
|
||
{
|
||
componentName: 'Icon',
|
||
props: {
|
||
size: 'small',
|
||
style: {
|
||
paddingRight: 5,
|
||
paddingLeft: 5,
|
||
fontSize: '14px',
|
||
color: '#9b9b9b',
|
||
cursor: 'pointer',
|
||
},
|
||
type: 'sorting',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { float: 'left' } },
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: { text: '距离接稿日期最近', style: { paddingLeft: 10, cursor: 'pointer' } },
|
||
},
|
||
{
|
||
componentName: 'Icon',
|
||
props: {
|
||
size: 'small',
|
||
style: { fontSize: '14px', color: '#9b9b9b', cursor: 'pointer' },
|
||
type: 'sorting',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { marginTop: 5, marginBottom: 15, borderBottom: '1px solid rgba(244,244,244)' } },
|
||
children: [
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { marginBottom: 15 } },
|
||
children: [
|
||
{
|
||
componentName: 'Text',
|
||
props: { text: '{{this.item.title}}', style: { color: 'rgba(51,51,51)' } },
|
||
},
|
||
{
|
||
componentName: 'Text',
|
||
props: {
|
||
text: '{{this.item.datetime}}',
|
||
style: { fontSize: '12px', color: '#666', float: 'right' },
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { paddingBottom: 15, fontSize: '13px', color: '#666' } },
|
||
children: '{{this.item.description}}',
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { marginBottom: 15 } },
|
||
children: [
|
||
{
|
||
componentName: 'Button',
|
||
props: { type: 'normal', style: { marginRight: 5, marginLeft: 5 }, size: 'small' },
|
||
children: '{{this.item}}',
|
||
loop: '{{this.item.tags}}',
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: { style: { marginBottom: 15, float: 'right' } },
|
||
children: [
|
||
{
|
||
componentName: 'Div',
|
||
props: {
|
||
style: {
|
||
display: 'inline-block',
|
||
marginRight: 5,
|
||
marginBottom: 15,
|
||
marginLeft: 5,
|
||
fontSize: 12,
|
||
color: '#666',
|
||
float: 'none',
|
||
},
|
||
},
|
||
children: '{{"点赞："+this.item.star}}',
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: {
|
||
style: {
|
||
display: 'inline-block',
|
||
marginRight: 5,
|
||
marginBottom: 15,
|
||
marginLeft: 5,
|
||
fontSize: 12,
|
||
color: '#666',
|
||
float: 'none',
|
||
},
|
||
},
|
||
children: '{{"喜爱："+this.item.like}}',
|
||
},
|
||
{
|
||
componentName: 'Div',
|
||
props: {
|
||
style: {
|
||
display: 'inline-block',
|
||
marginRight: 5,
|
||
marginBottom: 15,
|
||
marginLeft: 5,
|
||
fontSize: 12,
|
||
color: '#66',
|
||
float: 'none',
|
||
},
|
||
},
|
||
children: '{{"评论："+this.item.comment}}',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
loop: '{{this.state.dataSource}}',
|
||
},
|
||
{
|
||
componentName: 'Pagination',
|
||
props: {
|
||
shape: 'normal',
|
||
type: 'normal',
|
||
size: 'medium',
|
||
style: { marginTop: 10, marginBottom: 30, textAlign: 'right' },
|
||
},
|
||
},
|
||
],
|
||
dataSource: {
|
||
dataHandler: function dataHandler(dataMap) {
|
||
const dataSource = [
|
||
{
|
||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||
description:
|
||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||
tags: ['直播', '大促', '简介'],
|
||
datetime: '2017年12月12日 18:00',
|
||
star: Math.floor(Math.random() * 100) + 100,
|
||
like: Math.floor(Math.random() * 100) + 200,
|
||
comment: Math.floor(Math.random() * 100) + 100,
|
||
},
|
||
{
|
||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||
description:
|
||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||
tags: ['直播', '大促', '简介'],
|
||
datetime: '2017年12月12日 18:00',
|
||
star: Math.floor(Math.random() * 100) + 100,
|
||
like: Math.floor(Math.random() * 100) + 200,
|
||
comment: Math.floor(Math.random() * 100) + 100,
|
||
},
|
||
{
|
||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||
description:
|
||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||
tags: ['直播', '大促', '简介'],
|
||
datetime: '2017年12月12日 18:00',
|
||
star: Math.floor(Math.random() * 100) + 100,
|
||
like: Math.floor(Math.random() * 100) + 200,
|
||
comment: Math.floor(Math.random() * 100) + 100,
|
||
},
|
||
{
|
||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||
description:
|
||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||
tags: ['直播', '大促', '简介'],
|
||
datetime: '2017年12月12日 18:00',
|
||
star: Math.floor(Math.random() * 100) + 100,
|
||
like: Math.floor(Math.random() * 100) + 200,
|
||
comment: Math.floor(Math.random() * 100) + 100,
|
||
},
|
||
{
|
||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||
description:
|
||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||
tags: ['直播', '大促', '简介'],
|
||
datetime: '2017年12月12日 18:00',
|
||
star: Math.floor(Math.random() * 100) + 100,
|
||
like: Math.floor(Math.random() * 100) + 200,
|
||
comment: Math.floor(Math.random() * 100) + 100,
|
||
},
|
||
];
|
||
return { dataSource };
|
||
},
|
||
},
|
||
},
|
||
],
|
||
}}
|
||
simulatorProps={{
|
||
componentsAsset: [
|
||
{
|
||
type: 'jsUrl',
|
||
content: 'https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js',
|
||
id: 'next',
|
||
level: 2,
|
||
},
|
||
{
|
||
type: 'cssUrl',
|
||
content: 'https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.css',
|
||
id: 'next',
|
||
level: 2,
|
||
},
|
||
],
|
||
simulatorUrl: ['/build/simulator-renderer.css', '/build/simulator-renderer.js'],
|
||
}}
|
||
componentsDescription={[
|
||
{
|
||
description: 'Button',
|
||
npm: { package: '@ali/deep', subName: 'Button', destructuring: false, exportName: 'Next', version: '1.17.2' },
|
||
componentName: 'Button',
|
||
title: 'Button',
|
||
},
|
||
]}
|
||
ref="d"
|
||
/>
|
||
|
||
<SettingsPane editor={editor} />
|
||
|
||
</div>
|
||
<div ref="pane">
|
||
<a href="afeawef">aewfawfe</a>
|
||
</div>
|