@epxing/designer 5.3.0-beta.2 → 5.3.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/API.md +160 -160
  2. package/README.md +46 -46
  3. package/dist/src/page-designer/PageDesigner.js +11 -0
  4. package/dist/src/page-designer/designer.js +21 -0
  5. package/dist/src/page-designer/previews/add-form/Preview.js +1 -1
  6. package/dist/src/page-designer/previews/add-form/Preview.vue.js +19 -8
  7. package/dist/src/page-designer/setting-panel/Setting.js +46 -10
  8. package/dist/src/visual/config-page/ComponentLibraryDialog.js +8 -2
  9. package/dist/src/visual/config-page/DashboardMobile.js +1 -1
  10. package/dist/style.css +116 -112
  11. package/package.json +8 -8
  12. package/src/index.js +27 -27
  13. package/src/page-designer/PageDesigner.vue +11 -0
  14. package/src/page-designer/designer.js +1322 -1299
  15. package/src/page-designer/previews/add-form/Preview.vue +43 -44
  16. package/src/page-designer/setting-panel/Setting.vue +24 -2
  17. package/src/page-designer/widget-preview/Mixin.js +285 -285
  18. package/src/page-designer/widget-preview/Preview.vue +322 -322
  19. package/src/page-designer/widget-preview/WidgetWrapper.vue +197 -197
  20. package/src/page-designer/widget-preview/directive.js +258 -258
  21. package/src/visual/CategoryList.vue +563 -563
  22. package/src/visual/ComponentList.vue +280 -280
  23. package/src/visual/CreatePage.vue +389 -389
  24. package/src/visual/EntityCardList.vue +449 -449
  25. package/src/visual/EntityList.vue +838 -838
  26. package/src/visual/config-page/ComponentLibraryDialog.vue +7 -1
  27. package/src/visual/config-page/DashboardMobile.vue +934 -934
  28. package/src/visual/widgets/ProcessFormItemVisual.vue +58 -58
  29. package/types/index.d.ts +22 -22
  30. package/types/page-designer.d.ts +3 -3
  31. package/types/visual-component.d.ts +1 -1
  32. package/types/visual-entity-list.d.ts +1 -1
  33. package/types/visual-entity-sub-list.d.ts +1 -1
@@ -1,280 +1,280 @@
1
- <script>
2
- import EntityListVue from './EntityList.vue'
3
- export default {
4
- name: 'epx-visual-component-list',
5
- extends: EntityListVue,
6
- data () {
7
- return {
8
- FunctionOption: []
9
- }
10
- },
11
- watch: {
12
- allConfigs: {
13
- handler (v) {
14
- this.componentMetaId = v.metaId
15
- },
16
- immediate: true
17
- }
18
- },
19
- methods: {
20
- initDefaultConfigs () {
21
- const { addPage = 'entity-add-page', editPage = 'entity-edit-page', openMode = '3', addPageFlag = 'v_add' } = this.allConfigs
22
- let keywords = []
23
- const { label, keyNames = [] } = this.currentMeta
24
- let metaKey = 'ID'
25
- if (this.currentMeta) {
26
- metaKey = this.currentMeta.getKey()
27
- keywords = [...keyNames]
28
- if (label) {
29
- keywords.push(label)
30
- }
31
- }
32
- // 获取到该组件的默认配置
33
- this.commonOperates = [
34
- {
35
- text: '新增',
36
- handler: 'goPage',
37
- ui: 'primary',
38
- pageFlag: addPageFlag,
39
- num: 0,
40
- component: addPage,
41
- pageType: 'ADD',
42
- openMode
43
- }, {
44
- text: '编辑',
45
- handler: 'goPage',
46
- pageFlag: addPageFlag,
47
- num: 1,
48
- component: addPage,
49
- pageType: 'EDIT',
50
- openMode
51
- }, {
52
- text: '详情',
53
- handler: 'goPage',
54
- pageFlag: addPageFlag,
55
- num: 1,
56
- component: addPage,
57
- pageType: 'DETAIL',
58
- openMode
59
- },
60
- {
61
- text: '删除',
62
- handler: 'commonAction',
63
- action: 'removeMulti',
64
- num: 'n',
65
- confirmMsg: this.$t('Confirm the deletion') + '?',
66
- successMsg: '删除成功',
67
- failMsg: '删除失败',
68
- params: {
69
- ids: `#[${metaKey}]`
70
- }
71
- },
72
- {
73
- text: '导入',
74
- handler: 'goPage',
75
- pageFlag: 'v_import',
76
- component: 'import-page'
77
- },
78
- {
79
- text: '导出',
80
- handler: 'goPage',
81
- pageFlag: 'v_export',
82
- component: 'export-page',
83
- params: {
84
- selects: `#[${metaKey}]`,
85
- total: '$[total]',
86
- params: '$[params]',
87
- fields: '$[listFields]'
88
- }
89
- },
90
- {
91
- text: '打印',
92
- handler: 'print'
93
- },
94
- {
95
- text: '批量编辑',
96
- handler: 'editMultiEntity'
97
- },
98
- {
99
- text: '打开审核页面',
100
- handler: 'goCheckPage'
101
- },
102
- {
103
- text: '流程审批',
104
- handler: 'checkEntity'
105
- },
106
- {
107
- text: '返回',
108
- handler: 'backPage'
109
- },
110
- {
111
- text: '自定义按钮'
112
- }
113
- ]
114
- this.defaultConfigs = {
115
- flex: false,
116
- componentName: this.componentInfo.title,
117
- addPageFlag: 'v_add',
118
- editPageFlag: 'v_add',
119
- detailPageFlag: 'v_add',
120
- metaId: this.pageMetaId,
121
- searchFlag: true,
122
- searchMode: 'keyword',
123
- keywords,
124
- searchFields: [],
125
- listFields: this.currentMeta.getAllFields(),
126
- pageFlag: true,
127
- pageSize: 20,
128
- operateFlag: true,
129
- operateEllipsis: 2,
130
- multiSelectColumnFlag: true, // 是否显示多选框列
131
- serialColumnFlag: true, // 是否显示序号列
132
- operateColumnFlag: true, // 是否显示操作列
133
- totalFlag: true,
134
- operateColumnWidth: 100,
135
- operateColumnEllipsis: 2,
136
- operateColumnPosition: 'start',
137
- span: 24,
138
- operates: [
139
- {
140
- text: '新增',
141
- handler: 'goPage',
142
- ui: 'primary',
143
- num: 0,
144
- openMode,
145
- component: addPage,
146
- params: {}
147
- },
148
- // {
149
- // text: '删除',
150
- // handler: 'commonAction',
151
- // action: 'removeMulti',
152
- // num: 'n',
153
- // confirmMsg: this.$t('Confirm the deletion') + '?',
154
- // successMsg: '删除成功',
155
- // params: {
156
- // ids: `#[${metaKey}]`
157
- // }
158
- // },
159
- {
160
- text: '导入',
161
- handler: 'goPage',
162
- component: 'import-page',
163
- params: {}
164
- },
165
- {
166
- text: '导出',
167
- handler: 'goPage',
168
- component: 'export-page',
169
- params: {
170
- selects: `#[${metaKey}]`,
171
- total: '$[total]',
172
- params: '$[params]',
173
- fields: '$[listFields]'
174
- }
175
- }
176
- ],
177
- columnOperates: [
178
- {
179
- text: '编辑',
180
- handler: 'goPage',
181
- num: 1,
182
- openMode,
183
- component: editPage,
184
- pageType: 'EDIT'
185
- }
186
- // {
187
- // text: '删除',
188
- // handler: 'commonAction',
189
- // action: 'removeMulti',
190
- // num: 'n',
191
- // confirmMsg: this.$t('Confirm the deletion') + '?',
192
- // successMsg: '删除成功',
193
- // params: {
194
- // ids: `#[${this.$metaKey}]`
195
- // }
196
- // }
197
- ]
198
- }
199
- },
200
- initConfigOptions () {
201
- const configOptions = [
202
- { key: 'componentName', label: '组件名称', type: 'input' },
203
- { key: 'metaId', label: '组件对象', type: 'object', object: 'FM_ENTITY' },
204
- { key: 'detailPageId', label: '详情页面', type: 'object', object: 'FM_PAGE_CONFIG' },
205
- { key: 'searchFlag', label: '是否显示查询', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
206
- { key: 'keywords', label: '关键词字段', type: 'field' },
207
- { key: 'searchFields', label: '筛选字段', type: 'field' },
208
- { key: 'filterFields', label: '高级查询字段', type: 'field' },
209
- { key: 'listFields', label: '组件字段', type: 'list-field' },
210
- { key: 'orderFields', label: '排序字段', type: 'order-field' },
211
- { key: 'scopeParams', label: '查询范围', type: 'scope' },
212
- { key: 'operateFlag', label: '是否需要按钮', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
213
- { key: 'operates', label: '操作按钮', type: 'operates' },
214
- { key: 'operateEllipsis', label: '按钮显示数量', type: 'num' },
215
- { key: 'operateColumnFlag', label: '是否需要操作列', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
216
- { key: 'columnOperates', label: '操作列', type: 'operates' },
217
- { key: 'operateColumnWidth', label: '操作列宽度', type: 'num' },
218
- { key: 'operateColumnEllipsis', label: '操作列显示数量', type: 'num' },
219
- { key: 'operateColumnPosition', label: '操作列位置', type: 'radio', options: [{ label: '开始', value: 'start' }, { label: '结束', value: 'end' }] },
220
- { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
221
- { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
222
- { key: 'height', label: '高度' },
223
- { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
224
- ]
225
- // if (this.pageGlobalConfigs.layout === 'flex') {
226
- // configOptions.splice(1, 0, { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] })
227
- // }
228
- this.configOptions = configOptions
229
- },
230
- initConfig () {
231
- const config = this.$_.cloneDeep(this.compConfig)
232
- if (this.componentInfo.span) {
233
- config.span = this.componentInfo.span
234
- }
235
- this.config = config
236
- for (const key in this.config) {
237
- if (key === 'order_field') {
238
- const orderFields = []
239
- const orderMode = this.config.order_mode || []
240
- this.config[key].forEach((item, index) => {
241
- let field = item
242
- if (typeof item === 'string') {
243
- field = { attriName: item }
244
- }
245
- orderFields.push({ ...field, sort: orderMode[index] || 'asc' })
246
- })
247
- this.config.orderFields = orderFields
248
- }
249
- }
250
- },
251
- getFieldOptions () {
252
- this.getFunctionOption()
253
- this.fieldOptions = [
254
- { key: 'attriName', label: '字段', readonly: true },
255
- { key: 'configWay', label: '配置方式', type: 'radio', options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }], defaultValue: 'default' },
256
- { key: 'attriLabel', label: '名称', type: 'text' },
257
- { key: 'state', label: '字段状态', type: 'radio', options: [{ label: '显示', value: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }], defaultValue: 'DETAIL' },
258
- {
259
- key: 'detailPageId',
260
- label: '字段详情页面',
261
- type: 'object',
262
- object: 'FM_PAGE_CONFIG',
263
- showFlag: {
264
- dataType: ['object', 'multiobject']
265
- }
266
- },
267
- { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
268
- { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
269
- { key: 'function', label: '函数', type: 'function' },
270
- { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
271
- { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' }
272
- ]
273
- }
274
- }
275
- }
276
- </script>
277
-
278
- <style>
279
-
280
- </style>
1
+ <script>
2
+ import EntityListVue from './EntityList.vue'
3
+ export default {
4
+ name: 'epx-visual-component-list',
5
+ extends: EntityListVue,
6
+ data () {
7
+ return {
8
+ FunctionOption: []
9
+ }
10
+ },
11
+ watch: {
12
+ allConfigs: {
13
+ handler (v) {
14
+ this.componentMetaId = v.metaId
15
+ },
16
+ immediate: true
17
+ }
18
+ },
19
+ methods: {
20
+ initDefaultConfigs () {
21
+ const { addPage = 'entity-add-page', editPage = 'entity-edit-page', openMode = '3', addPageFlag = 'v_add' } = this.allConfigs
22
+ let keywords = []
23
+ const { label, keyNames = [] } = this.currentMeta
24
+ let metaKey = 'ID'
25
+ if (this.currentMeta) {
26
+ metaKey = this.currentMeta.getKey()
27
+ keywords = [...keyNames]
28
+ if (label) {
29
+ keywords.push(label)
30
+ }
31
+ }
32
+ // 获取到该组件的默认配置
33
+ this.commonOperates = [
34
+ {
35
+ text: '新增',
36
+ handler: 'goPage',
37
+ ui: 'primary',
38
+ pageFlag: addPageFlag,
39
+ num: 0,
40
+ component: addPage,
41
+ pageType: 'ADD',
42
+ openMode
43
+ }, {
44
+ text: '编辑',
45
+ handler: 'goPage',
46
+ pageFlag: addPageFlag,
47
+ num: 1,
48
+ component: addPage,
49
+ pageType: 'EDIT',
50
+ openMode
51
+ }, {
52
+ text: '详情',
53
+ handler: 'goPage',
54
+ pageFlag: addPageFlag,
55
+ num: 1,
56
+ component: addPage,
57
+ pageType: 'DETAIL',
58
+ openMode
59
+ },
60
+ {
61
+ text: '删除',
62
+ handler: 'commonAction',
63
+ action: 'removeMulti',
64
+ num: 'n',
65
+ confirmMsg: this.$t('Confirm the deletion') + '?',
66
+ successMsg: '删除成功',
67
+ failMsg: '删除失败',
68
+ params: {
69
+ ids: `#[${metaKey}]`
70
+ }
71
+ },
72
+ {
73
+ text: '导入',
74
+ handler: 'goPage',
75
+ pageFlag: 'v_import',
76
+ component: 'import-page'
77
+ },
78
+ {
79
+ text: '导出',
80
+ handler: 'goPage',
81
+ pageFlag: 'v_export',
82
+ component: 'export-page',
83
+ params: {
84
+ selects: `#[${metaKey}]`,
85
+ total: '$[total]',
86
+ params: '$[params]',
87
+ fields: '$[listFields]'
88
+ }
89
+ },
90
+ {
91
+ text: '打印',
92
+ handler: 'print'
93
+ },
94
+ {
95
+ text: '批量编辑',
96
+ handler: 'editMultiEntity'
97
+ },
98
+ {
99
+ text: '打开审核页面',
100
+ handler: 'goCheckPage'
101
+ },
102
+ {
103
+ text: '流程审批',
104
+ handler: 'checkEntity'
105
+ },
106
+ {
107
+ text: '返回',
108
+ handler: 'backPage'
109
+ },
110
+ {
111
+ text: '自定义按钮'
112
+ }
113
+ ]
114
+ this.defaultConfigs = {
115
+ flex: false,
116
+ componentName: this.componentInfo.title,
117
+ addPageFlag: 'v_add',
118
+ editPageFlag: 'v_add',
119
+ detailPageFlag: 'v_add',
120
+ metaId: this.pageMetaId,
121
+ searchFlag: true,
122
+ searchMode: 'keyword',
123
+ keywords,
124
+ searchFields: [],
125
+ listFields: this.currentMeta.getAllFields(),
126
+ pageFlag: true,
127
+ pageSize: 20,
128
+ operateFlag: true,
129
+ operateEllipsis: 2,
130
+ multiSelectColumnFlag: true, // 是否显示多选框列
131
+ serialColumnFlag: true, // 是否显示序号列
132
+ operateColumnFlag: true, // 是否显示操作列
133
+ totalFlag: true,
134
+ operateColumnWidth: 100,
135
+ operateColumnEllipsis: 2,
136
+ operateColumnPosition: 'start',
137
+ span: 24,
138
+ operates: [
139
+ {
140
+ text: '新增',
141
+ handler: 'goPage',
142
+ ui: 'primary',
143
+ num: 0,
144
+ openMode,
145
+ component: addPage,
146
+ params: {}
147
+ },
148
+ // {
149
+ // text: '删除',
150
+ // handler: 'commonAction',
151
+ // action: 'removeMulti',
152
+ // num: 'n',
153
+ // confirmMsg: this.$t('Confirm the deletion') + '?',
154
+ // successMsg: '删除成功',
155
+ // params: {
156
+ // ids: `#[${metaKey}]`
157
+ // }
158
+ // },
159
+ {
160
+ text: '导入',
161
+ handler: 'goPage',
162
+ component: 'import-page',
163
+ params: {}
164
+ },
165
+ {
166
+ text: '导出',
167
+ handler: 'goPage',
168
+ component: 'export-page',
169
+ params: {
170
+ selects: `#[${metaKey}]`,
171
+ total: '$[total]',
172
+ params: '$[params]',
173
+ fields: '$[listFields]'
174
+ }
175
+ }
176
+ ],
177
+ columnOperates: [
178
+ {
179
+ text: '编辑',
180
+ handler: 'goPage',
181
+ num: 1,
182
+ openMode,
183
+ component: editPage,
184
+ pageType: 'EDIT'
185
+ }
186
+ // {
187
+ // text: '删除',
188
+ // handler: 'commonAction',
189
+ // action: 'removeMulti',
190
+ // num: 'n',
191
+ // confirmMsg: this.$t('Confirm the deletion') + '?',
192
+ // successMsg: '删除成功',
193
+ // params: {
194
+ // ids: `#[${this.$metaKey}]`
195
+ // }
196
+ // }
197
+ ]
198
+ }
199
+ },
200
+ initConfigOptions () {
201
+ const configOptions = [
202
+ { key: 'componentName', label: '组件名称', type: 'input' },
203
+ { key: 'metaId', label: '组件对象', type: 'object', object: 'FM_ENTITY' },
204
+ { key: 'detailPageId', label: '详情页面', type: 'object', object: 'FM_PAGE_CONFIG' },
205
+ { key: 'searchFlag', label: '是否显示查询', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }] },
206
+ { key: 'keywords', label: '关键词字段', type: 'field' },
207
+ { key: 'searchFields', label: '筛选字段', type: 'field' },
208
+ { key: 'filterFields', label: '高级查询字段', type: 'field' },
209
+ { key: 'listFields', label: '组件字段', type: 'list-field' },
210
+ { key: 'orderFields', label: '排序字段', type: 'order-field' },
211
+ { key: 'scopeParams', label: '查询范围', type: 'scope' },
212
+ { key: 'operateFlag', label: '是否需要按钮', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
213
+ { key: 'operates', label: '操作按钮', type: 'operates' },
214
+ { key: 'operateEllipsis', label: '按钮显示数量', type: 'num' },
215
+ { key: 'operateColumnFlag', label: '是否需要操作列', type: 'radio', options: [{ label: '需要', value: true }, { label: '不需要', value: false }] },
216
+ { key: 'columnOperates', label: '操作列', type: 'operates' },
217
+ { key: 'operateColumnWidth', label: '操作列宽度', type: 'num' },
218
+ { key: 'operateColumnEllipsis', label: '操作列显示数量', type: 'num' },
219
+ { key: 'operateColumnPosition', label: '操作列位置', type: 'radio', options: [{ label: '开始', value: 'start' }, { label: '结束', value: 'end' }] },
220
+ { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
221
+ { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
222
+ { key: 'height', label: '高度' },
223
+ { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
224
+ ]
225
+ // if (this.pageGlobalConfigs.layout === 'flex') {
226
+ // configOptions.splice(1, 0, { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] })
227
+ // }
228
+ this.configOptions = configOptions
229
+ },
230
+ initConfig () {
231
+ const config = this.$_.cloneDeep(this.compConfig)
232
+ if (this.componentInfo.span) {
233
+ config.span = this.componentInfo.span
234
+ }
235
+ this.config = config
236
+ for (const key in this.config) {
237
+ if (key === 'order_field') {
238
+ const orderFields = []
239
+ const orderMode = this.config.order_mode || []
240
+ this.config[key].forEach((item, index) => {
241
+ let field = item
242
+ if (typeof item === 'string') {
243
+ field = { attriName: item }
244
+ }
245
+ orderFields.push({ ...field, sort: orderMode[index] || 'asc' })
246
+ })
247
+ this.config.orderFields = orderFields
248
+ }
249
+ }
250
+ },
251
+ getFieldOptions () {
252
+ this.getFunctionOption()
253
+ this.fieldOptions = [
254
+ { key: 'attriName', label: '字段', readonly: true },
255
+ { key: 'configWay', label: '配置方式', type: 'radio', options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }], defaultValue: 'default' },
256
+ { key: 'attriLabel', label: '名称', type: 'text' },
257
+ { key: 'state', label: '字段状态', type: 'radio', options: [{ label: '显示', value: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }], defaultValue: 'DETAIL' },
258
+ {
259
+ key: 'detailPageId',
260
+ label: '字段详情页面',
261
+ type: 'object',
262
+ object: 'FM_PAGE_CONFIG',
263
+ showFlag: {
264
+ dataType: ['object', 'multiobject']
265
+ }
266
+ },
267
+ { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
268
+ { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
269
+ { key: 'function', label: '函数', type: 'function' },
270
+ { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
271
+ { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' }
272
+ ]
273
+ }
274
+ }
275
+ }
276
+ </script>
277
+
278
+ <style>
279
+
280
+ </style>