1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
| import React, {Component} from 'react'
| import { is, fromJS } from 'immutable'
|
| import SourceWrap from './dragsource'
| import './index.scss'
|
| class ElementSource extends Component {
| state = {
| options: [
| {
| title: '卡片元素',
| span: 8,
| children: [
| { value: 'text', text: '文本', type: 'action', class: 'element', $init: true},
| { value: 'number', text: '数值', type: 'action', class: 'element', $init: true},
| { value: 'picture', text: '图片', type: 'action', class: 'element', $init: true},
| { value: 'video', text: '视频', type: 'action', class: 'element', $init: true},
| { value: 'icon', text: '图标', type: 'action', class: 'element', $init: true},
| { value: 'slider', text: '进度条', type: 'action', class: 'element', $init: true},
| { value: 'splitline', text: '分割线', type: 'action', class: 'element', $init: true},
| { value: 'barcode', text: '条形码', type: 'action', class: 'element', $init: true},
| { value: 'qrcode', text: '二维码', type: 'action', class: 'element', $init: true},
| { value: 'currentDate', text: '当前时间', type: 'action', class: 'element', $init: true},
| { value: 'formula', text: '公式', type: 'action', class: 'element', $init: true},
| { value: 'color', text: '颜色', type: 'action', class: 'element', $init: true},
| { value: 'sequence', text: '序号', type: 'action', class: 'element', $init: true }
| ]
| },
| {
| title: '按钮元素',
| span: 12,
| children: [
| { value: 'pop', text: '弹窗(表单)', type: 'action', class: 'button', $init: true },
| { value: 'prompt', text: '提示框', type: 'action', class: 'button', $init: true },
| { value: 'exec', text: '直接执行', type: 'action', class: 'button', $init: true },
| { value: 'excelIn', text: '导入Excel', type: 'action', class: 'button', $init: true },
| { value: 'excelOut', text: '导出Excel', type: 'action', class: 'button', $init: true },
| { value: 'popview', text: '弹窗(标签)', type: 'action', class: 'button', $init: true },
| { value: 'tab', text: '标签页', type: 'action', class: 'button', $init: true },
| { value: 'innerpage', text: '新页面', type: 'action', class: 'button', $init: true },
| { value: 'funcbutton', text: '功能按钮', type: 'action', class: 'button', $init: true },
| { value: 'form', text: '表单', type: 'action', class: 'button', $init: true }
| ]
| },
| {
| title: '表单元素',
| span: 12,
| children: [
| { subType: 'text', text: '文本', type: 'form' },
| { subType: 'number', text: '数字', type: 'form' },
| { subType: 'select', text: '下拉选择', type: 'form' },
| { subType: 'textarea', text: '多行文本', type: 'form' },
| { subType: 'multiselect', text: '下拉多选', type: 'form' },
| { subType: 'link', text: '联动菜单', type: 'form' },
| { subType: 'popSelect', text: '选择器', type: 'form' },
| { subType: 'switch', text: '开关', type: 'form' },
| { subType: 'checkbox', text: '多选框', type: 'form' },
| { subType: 'radio', text: '单选框', type: 'form' },
| { subType: 'checkcard', text: '选项卡', type: 'form' },
| { subType: 'fileupload', text: '文件上传', type: 'form' },
| { subType: 'date', text: '日期（天）', type: 'form' },
| { subType: 'datemonth', text: '日期（月）', type: 'form' },
| { subType: 'cascader', text: '级联菜单', type: 'form' },
| { subType: 'rate', text: '评分', type: 'form' },
| { subType: 'color', text: '颜色', type: 'form' },
| { subType: 'brafteditor', text: '富文本', type: 'form' },
| { subType: 'funcvar', text: '函数变量', type: 'form' },
| { subType: 'hint', text: '提示', type: 'form' },
| { subType: 'split', text: '分隔线', type: 'form' },
| { subType: 'linkMain', text: '关联主表', type: 'form' },
| { subType: 'formula', text: '公式', type: 'form' },
| { subType: 'vercode', text: '验证码', type: 'form' }
| ]
| },
| {
| title: '搜索元素',
| span: 12,
| children: [
| { subType: 'text', text: '文本', type: 'search' },
| { subType: 'select', text: '下拉选择', type: 'search' },
| { subType: 'multiselect', text: '下拉多选', type: 'search' },
| { subType: 'link', text: '联动菜单', type: 'search' },
| { subType: 'checkcard', text: '选项卡', type: 'search' },
| { subType: 'date', text: '日期（天）', type: 'search' },
| { subType: 'dateweek', text: '日期（周）', type: 'search' },
| { subType: 'datemonth', text: '日期（月）', type: 'search' },
| { subType: 'daterange', text: '日期（区间）', type: 'search' },
| { subType: 'group', text: '日期（组合）', type: 'search' },
| { subType: 'range', text: '数值（区间）', type: 'search' },
| { subType: 'switch', text: '开关', type: 'search' },
| { subType: 'radio', text: '单选框', type: 'search' },
| { subType: 'check', text: '勾选框', type: 'search' },
| ]
| },
| {
| title: '显示列元素',
| span: 12,
| children: [
| { subType: 'text', text: '文本', type: 'col', $init: true },
| { subType: 'number', text: '数字', type: 'col', $init: true },
| { subType: 'custom', text: '自定义列', type: 'col', $init: true },
| { subType: 'formula', text: '公式', type: 'col', $init: true },
| { subType: 'picture', text: '图片', type: 'col', $init: true },
| { subType: 'video', text: '视频', type: 'col', $init: true },
| { subType: 'link', text: '链接', type: 'col', $init: true },
| { subType: 'textarea', text: '多行文本', type: 'col', $init: true },
| { subType: 'colspan', text: '合并列', type: 'col', $init: true },
| { subType: 'index', text: '序号', type: 'col', $init: true }
| ]
| }
| ]
| }
|
| UNSAFE_componentWillMount() {
| let appType = sessionStorage.getItem('appType')
| let viewType = sessionStorage.getItem('editMenuType') // 弹窗 popview
| let options = fromJS(this.state.options).toJS()
|
| if (appType === 'mob') {
| options[1].children = options[1].children.filter(item => ['pop', 'prompt', 'exec', 'excelOut', 'innerpage', 'funcbutton'].includes(item.value))
| options[2].children = options[2].children.filter(item => {
| if (item.subType === 'select') {
| item.text = '选择器'
| }
|
| return item.subType !== 'brafteditor' && item.subType !== 'multiselect'
| })
| options = options.filter(option => option.title !== '搜索元素')
| } else if (appType === 'pc') {
| options[1].children = options[1].children.filter(item => item.value !== 'tab')
| }
|
| if (viewType === 'popview') { // 弹窗标签
| options[1].children = options[1].children.filter(item => item.value !== 'popview' && item.value !== 'funcbutton')
| }
|
| this.setState({options})
| }
|
| shouldComponentUpdate (nextProps, nextState) {
| return !is(fromJS(this.state), fromJS(nextState))
| }
|
| render() {
| const { options } = this.state
|
| return (
| <div className="mk-source-box">
| <div className="tip">注：当元素类型不受支持时会被重置。</div>
| {options.map((item, index) => (<div className="mk-class" span={item.span} key={index}>
| <div className="title">{item.title}</div>
| {item.children.map(cell => <SourceWrap key={cell.value || cell.subType} item={cell}/>)}
| </div>))}
| </div>
| )
| }
| }
|
| export default ElementSource
|
|
