@vxe-ui/plugin-render-antd 4.3.0 → 4.4.0

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.
package/src/form/index.ts CHANGED
@@ -1,313 +1,313 @@
1
- import { h, ComponentOptions } from 'vue'
2
- import { getCurrComponent } from '../util/comp'
3
- import XEUtils from 'xe-utils'
4
-
5
- import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormConstructor, VxeFormPrivateMethods } from 'vxe-pc-ui'
6
-
7
- /**
8
- * 表单 - 渲染器
9
- */
10
- export function defineFormRender (VxeUI: VxeUIExport) {
11
- function isEmptyValue (cellValue: any) {
12
- return cellValue === null || cellValue === undefined || cellValue === ''
13
- }
14
-
15
- function getOnName (type: string) {
16
- return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
17
- }
18
-
19
- function getModelProp (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
20
- let prop = 'value'
21
- switch (renderOpts.name) {
22
- case 'ASwitch':
23
- prop = 'checked'
24
- break
25
- }
26
- return prop
27
- }
28
-
29
- function getModelEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
30
- let type = 'update:value'
31
- switch (renderOpts.name) {
32
- case 'ASwitch':
33
- type = 'update:checked'
34
- break
35
- }
36
- return type
37
- }
38
-
39
- function getChangeEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
40
- return 'change'
41
- }
42
-
43
- function getItemProps (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams, value: any, defaultProps?: { [prop: string]: any }) {
44
- return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
45
- }
46
-
47
- function formatText (cellValue: any) {
48
- return '' + (isEmptyValue(cellValue) ? '' : cellValue)
49
- }
50
-
51
- function getOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderParams, inputFunc?: Function, changeFunc?: Function) {
52
- const { events } = renderOpts
53
- const modelEvent = getModelEvent(renderOpts)
54
- const changeEvent = getChangeEvent(renderOpts)
55
- const isSameEvent = changeEvent === modelEvent
56
- const ons: { [type: string]: Function } = {}
57
- XEUtils.objectEach(events, (func: Function, key: string) => {
58
- ons[getOnName(key)] = function (...args: any[]) {
59
- func(params, ...args)
60
- }
61
- })
62
- if (inputFunc) {
63
- ons[getOnName(modelEvent)] = function (targetEvnt: any) {
64
- inputFunc(targetEvnt)
65
- if (events && events[modelEvent]) {
66
- events[modelEvent](params, targetEvnt)
67
- }
68
- if (isSameEvent && changeFunc) {
69
- changeFunc(targetEvnt)
70
- }
71
- }
72
- }
73
- if (!isSameEvent && changeFunc) {
74
- ons[getOnName(changeEvent)] = function (...args: any[]) {
75
- changeFunc(...args)
76
- if (events && events[changeEvent]) {
77
- events[changeEvent](params, ...args)
78
- }
79
- }
80
- }
81
- return ons
82
- }
83
-
84
- function getItemOns (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
85
- const { $form, data, field } = params
86
- return getOns(renderOpts, params, (value: any) => {
87
- // 处理 model 值双向绑定
88
- XEUtils.set(data, field, value)
89
- }, () => {
90
- // 处理 change 事件相关逻辑
91
- $form.updateStatus(params)
92
- if (renderOpts.changeToSubmit) {
93
- ($form as VxeFormConstructor & VxeFormPrivateMethods).handleSubmitEvent(new Event('change'))
94
- }
95
- })
96
- }
97
-
98
- function cellText (cellValue: any): string[] {
99
- return [formatText(cellValue)]
100
- }
101
-
102
- function createFormItemRender (defaultProps?: { [key: string]: any }) {
103
- return function (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions & { name: string }, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
104
- const { data, field } = params
105
- const { name } = renderOpts
106
- const { attrs } = renderOpts
107
- const itemValue = XEUtils.get(data, field)
108
- return [
109
- h(getCurrComponent(name), {
110
- ...attrs,
111
- ...getItemProps(renderOpts, params, itemValue, defaultProps),
112
- ...getItemOns(renderOpts, params)
113
- })
114
- ]
115
- }
116
- }
117
-
118
- function defaultButtonItemRender (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
119
- const { attrs } = renderOpts
120
- const props = getItemProps(renderOpts, params, null)
121
- return [
122
- h(getCurrComponent('a-button') as ComponentOptions, {
123
- ...attrs,
124
- ...props,
125
- ...getItemOns(renderOpts, params)
126
- }, {
127
- default: () => cellText(renderOpts.content || props.content)
128
- })
129
- ]
130
- }
131
-
132
- function defaultButtonsItemRender (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
133
- const { children } = renderOpts
134
- if (children) {
135
- return children.map((childRenderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions) => defaultButtonItemRender(childRenderOpts, params)[0])
136
- }
137
- return []
138
- }
139
-
140
- /**
141
- *
142
- * 已废弃
143
- * @deprecated
144
- */
145
- function createOldFormItemRadioAndCheckboxRender () {
146
- return function (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions & { name: string }, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
147
- const { name, options = [], optionProps = {} } = renderOpts
148
- const { data, field } = params
149
- const { attrs } = renderOpts
150
- const labelProp = optionProps.label || 'label'
151
- const valueProp = optionProps.value || 'value'
152
- const itemValue = XEUtils.get(data, field)
153
- return [
154
- h(getCurrComponent(`${name}Group`) as ComponentOptions, {
155
- ...attrs,
156
- ...getItemProps(renderOpts, params, itemValue),
157
- ...getItemOns(renderOpts, params)
158
- }, {
159
- default: () => {
160
- return options.map((option, oIndex) => {
161
- return h(getCurrComponent(name) as ComponentOptions, {
162
- key: oIndex,
163
- value: option[valueProp],
164
- disabled: option.disabled
165
- }, {
166
- default: () => cellText(option[labelProp])
167
- })
168
- })
169
- }
170
- })
171
- ]
172
- }
173
- }
174
-
175
- VxeUI.renderer.mixin({
176
- AAutoComplete: {
177
- renderFormItemContent: createFormItemRender()
178
- },
179
- AInput: {
180
- renderFormItemContent: createFormItemRender()
181
- },
182
- AInputNumber: {
183
- renderFormItemContent: createFormItemRender()
184
- },
185
- ASelect: {
186
- renderFormItemContent (renderOpts, params) {
187
- const { options = [], optionGroups } = renderOpts
188
- const { data, field } = params
189
- const { attrs } = renderOpts
190
- const itemValue = XEUtils.get(data, field)
191
- const props = getItemProps(renderOpts, params, itemValue)
192
- const ons = getItemOns(renderOpts, params)
193
- if (optionGroups) {
194
- return [
195
- h(getCurrComponent('a-select') as ComponentOptions, {
196
- ...attrs,
197
- ...props,
198
- options: optionGroups,
199
- ...ons
200
- })
201
- ]
202
- }
203
- return [
204
- h(getCurrComponent('a-select') as ComponentOptions, {
205
- ...attrs,
206
- ...props,
207
- options: props.options || options,
208
- ...ons
209
- })
210
- ]
211
- }
212
- },
213
- ACascader: {
214
- renderFormItemContent: createFormItemRender()
215
- },
216
- ADatePicker: {
217
- renderFormItemContent: createFormItemRender()
218
- },
219
- AMonthPicker: {
220
- renderFormItemContent: createFormItemRender()
221
- },
222
- ARangePicker: {
223
- renderFormItemContent: createFormItemRender()
224
- },
225
- AWeekPicker: {
226
- renderFormItemContent: createFormItemRender()
227
- },
228
- ATimePicker: {
229
- renderFormItemContent: createFormItemRender()
230
- },
231
- ATreeSelect: {
232
- renderFormItemContent: createFormItemRender()
233
- },
234
- ARate: {
235
- renderFormItemContent: createFormItemRender()
236
- },
237
- ASwitch: {
238
- renderFormItemContent: createFormItemRender()
239
- },
240
- ARadioGroup: {
241
- renderFormItemContent (renderOpts, params) {
242
- const { options = [], optionProps = {} } = renderOpts
243
- const { data, field } = params
244
- const { attrs } = renderOpts
245
- const labelProp = optionProps.label || 'label'
246
- const valueProp = optionProps.value || 'value'
247
- const itemValue = XEUtils.get(data, field)
248
- return [
249
- h(getCurrComponent('a-radio-group'), {
250
- ...attrs,
251
- ...getItemProps(renderOpts, params, itemValue),
252
- ...getItemOns(renderOpts, params)
253
- }, {
254
- default: () => {
255
- return options.map((option, oIndex) => {
256
- return h(getCurrComponent('a-radio'), {
257
- key: oIndex,
258
- value: option[valueProp],
259
- disabled: option.disabled
260
- }, {
261
- default: () => cellText(option[labelProp])
262
- })
263
- })
264
- }
265
- })
266
- ]
267
- }
268
- },
269
- ACheckboxGroup: {
270
- renderFormItemContent (renderOpts, params) {
271
- const { options = [], optionProps = {} } = renderOpts
272
- const { data, field } = params
273
- const { attrs } = renderOpts
274
- const labelProp = optionProps.label || 'label'
275
- const valueProp = optionProps.value || 'value'
276
- const itemValue = XEUtils.get(data, field)
277
- return [
278
- h(getCurrComponent('a-checkbox-group'), {
279
- ...attrs,
280
- ...getItemProps(renderOpts, params, itemValue),
281
- ...getItemOns(renderOpts, params)
282
- }, {
283
- default: () => {
284
- return options.map((option, oIndex) => {
285
- return h(getCurrComponent('a-checkbox'), {
286
- key: oIndex,
287
- value: option[valueProp],
288
- disabled: option.disabled
289
- }, {
290
- default: () => cellText(option[labelProp])
291
- })
292
- })
293
- }
294
- })
295
- ]
296
- }
297
- },
298
- AButton: {
299
- renderFormItemContent: defaultButtonItemRender
300
- },
301
-
302
- // 已废弃
303
- ARadio: {
304
- renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
305
- },
306
- ACheckbox: {
307
- renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
308
- },
309
- AButtons: {
310
- renderFormItemContent: defaultButtonsItemRender
311
- }
312
- })
313
- }
1
+ import { h, ComponentOptions } from 'vue'
2
+ import { getCurrComponent } from '../util/comp'
3
+ import XEUtils from 'xe-utils'
4
+
5
+ import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormConstructor, VxeFormPrivateMethods } from 'vxe-pc-ui'
6
+
7
+ /**
8
+ * 表单 - 渲染器
9
+ */
10
+ export function defineFormRender (VxeUI: VxeUIExport) {
11
+ function isEmptyValue (cellValue: any) {
12
+ return cellValue === null || cellValue === undefined || cellValue === ''
13
+ }
14
+
15
+ function getOnName (type: string) {
16
+ return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
17
+ }
18
+
19
+ function getModelProp (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
20
+ let prop = 'value'
21
+ switch (renderOpts.name) {
22
+ case 'ASwitch':
23
+ prop = 'checked'
24
+ break
25
+ }
26
+ return prop
27
+ }
28
+
29
+ function getModelEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
30
+ let type = 'update:value'
31
+ switch (renderOpts.name) {
32
+ case 'ASwitch':
33
+ type = 'update:checked'
34
+ break
35
+ }
36
+ return type
37
+ }
38
+
39
+ function getChangeEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
40
+ return 'change'
41
+ }
42
+
43
+ function getItemProps (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams, value: any, defaultProps?: { [prop: string]: any }) {
44
+ return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
45
+ }
46
+
47
+ function formatText (cellValue: any) {
48
+ return '' + (isEmptyValue(cellValue) ? '' : cellValue)
49
+ }
50
+
51
+ function getOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderParams, inputFunc?: Function, changeFunc?: Function) {
52
+ const { events } = renderOpts
53
+ const modelEvent = getModelEvent(renderOpts)
54
+ const changeEvent = getChangeEvent(renderOpts)
55
+ const isSameEvent = changeEvent === modelEvent
56
+ const ons: { [type: string]: Function } = {}
57
+ XEUtils.objectEach(events, (func: Function, key: string) => {
58
+ ons[getOnName(key)] = function (...args: any[]) {
59
+ func(params, ...args)
60
+ }
61
+ })
62
+ if (inputFunc) {
63
+ ons[getOnName(modelEvent)] = function (targetEvnt: any) {
64
+ inputFunc(targetEvnt)
65
+ if (events && events[modelEvent]) {
66
+ events[modelEvent](params, targetEvnt)
67
+ }
68
+ if (isSameEvent && changeFunc) {
69
+ changeFunc(targetEvnt)
70
+ }
71
+ }
72
+ }
73
+ if (!isSameEvent && changeFunc) {
74
+ ons[getOnName(changeEvent)] = function (...args: any[]) {
75
+ changeFunc(...args)
76
+ if (events && events[changeEvent]) {
77
+ events[changeEvent](params, ...args)
78
+ }
79
+ }
80
+ }
81
+ return ons
82
+ }
83
+
84
+ function getItemOns (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
85
+ const { $form, data, field } = params
86
+ return getOns(renderOpts, params, (value: any) => {
87
+ // 处理 model 值双向绑定
88
+ XEUtils.set(data, field, value)
89
+ }, () => {
90
+ // 处理 change 事件相关逻辑
91
+ $form.updateStatus(params)
92
+ if (renderOpts.changeToSubmit) {
93
+ ($form as VxeFormConstructor & VxeFormPrivateMethods).handleSubmitEvent(new Event('change'))
94
+ }
95
+ })
96
+ }
97
+
98
+ function cellText (cellValue: any): string[] {
99
+ return [formatText(cellValue)]
100
+ }
101
+
102
+ function createFormItemRender (defaultProps?: { [key: string]: any }) {
103
+ return function (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions & { name: string }, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
104
+ const { data, field } = params
105
+ const { name } = renderOpts
106
+ const { attrs } = renderOpts
107
+ const itemValue = XEUtils.get(data, field)
108
+ return [
109
+ h(getCurrComponent(name), {
110
+ ...attrs,
111
+ ...getItemProps(renderOpts, params, itemValue, defaultProps),
112
+ ...getItemOns(renderOpts, params)
113
+ })
114
+ ]
115
+ }
116
+ }
117
+
118
+ function defaultButtonItemRender (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
119
+ const { attrs } = renderOpts
120
+ const props = getItemProps(renderOpts, params, null)
121
+ return [
122
+ h(getCurrComponent('a-button') as ComponentOptions, {
123
+ ...attrs,
124
+ ...props,
125
+ ...getItemOns(renderOpts, params)
126
+ }, {
127
+ default: () => cellText(renderOpts.content || props.content)
128
+ })
129
+ ]
130
+ }
131
+
132
+ function defaultButtonsItemRender (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
133
+ const { children } = renderOpts
134
+ if (children) {
135
+ return children.map((childRenderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions) => defaultButtonItemRender(childRenderOpts, params)[0])
136
+ }
137
+ return []
138
+ }
139
+
140
+ /**
141
+ *
142
+ * 已废弃
143
+ * @deprecated
144
+ */
145
+ function createOldFormItemRadioAndCheckboxRender () {
146
+ return function (renderOpts: VxeGlobalRendererHandles.RenderFormItemContentOptions & { name: string }, params: VxeGlobalRendererHandles.RenderFormItemContentParams) {
147
+ const { name, options = [], optionProps = {} } = renderOpts
148
+ const { data, field } = params
149
+ const { attrs } = renderOpts
150
+ const labelProp = optionProps.label || 'label'
151
+ const valueProp = optionProps.value || 'value'
152
+ const itemValue = XEUtils.get(data, field)
153
+ return [
154
+ h(getCurrComponent(`${name}Group`) as ComponentOptions, {
155
+ ...attrs,
156
+ ...getItemProps(renderOpts, params, itemValue),
157
+ ...getItemOns(renderOpts, params)
158
+ }, {
159
+ default: () => {
160
+ return options.map((option, oIndex) => {
161
+ return h(getCurrComponent(name) as ComponentOptions, {
162
+ key: oIndex,
163
+ value: option[valueProp],
164
+ disabled: option.disabled
165
+ }, {
166
+ default: () => cellText(option[labelProp])
167
+ })
168
+ })
169
+ }
170
+ })
171
+ ]
172
+ }
173
+ }
174
+
175
+ VxeUI.renderer.mixin({
176
+ AAutoComplete: {
177
+ renderFormItemContent: createFormItemRender()
178
+ },
179
+ AInput: {
180
+ renderFormItemContent: createFormItemRender()
181
+ },
182
+ AInputNumber: {
183
+ renderFormItemContent: createFormItemRender()
184
+ },
185
+ ASelect: {
186
+ renderFormItemContent (renderOpts, params) {
187
+ const { options = [], optionGroups } = renderOpts
188
+ const { data, field } = params
189
+ const { attrs } = renderOpts
190
+ const itemValue = XEUtils.get(data, field)
191
+ const props = getItemProps(renderOpts, params, itemValue)
192
+ const ons = getItemOns(renderOpts, params)
193
+ if (optionGroups) {
194
+ return [
195
+ h(getCurrComponent('a-select') as ComponentOptions, {
196
+ ...attrs,
197
+ ...props,
198
+ options: optionGroups,
199
+ ...ons
200
+ })
201
+ ]
202
+ }
203
+ return [
204
+ h(getCurrComponent('a-select') as ComponentOptions, {
205
+ ...attrs,
206
+ ...props,
207
+ options: props.options || options,
208
+ ...ons
209
+ })
210
+ ]
211
+ }
212
+ },
213
+ ACascader: {
214
+ renderFormItemContent: createFormItemRender()
215
+ },
216
+ ADatePicker: {
217
+ renderFormItemContent: createFormItemRender()
218
+ },
219
+ AMonthPicker: {
220
+ renderFormItemContent: createFormItemRender()
221
+ },
222
+ ARangePicker: {
223
+ renderFormItemContent: createFormItemRender()
224
+ },
225
+ AWeekPicker: {
226
+ renderFormItemContent: createFormItemRender()
227
+ },
228
+ ATimePicker: {
229
+ renderFormItemContent: createFormItemRender()
230
+ },
231
+ ATreeSelect: {
232
+ renderFormItemContent: createFormItemRender()
233
+ },
234
+ ARate: {
235
+ renderFormItemContent: createFormItemRender()
236
+ },
237
+ ASwitch: {
238
+ renderFormItemContent: createFormItemRender()
239
+ },
240
+ ARadioGroup: {
241
+ renderFormItemContent (renderOpts, params) {
242
+ const { options = [], optionProps = {} } = renderOpts
243
+ const { data, field } = params
244
+ const { attrs } = renderOpts
245
+ const labelProp = optionProps.label || 'label'
246
+ const valueProp = optionProps.value || 'value'
247
+ const itemValue = XEUtils.get(data, field)
248
+ return [
249
+ h(getCurrComponent('a-radio-group'), {
250
+ ...attrs,
251
+ ...getItemProps(renderOpts, params, itemValue),
252
+ ...getItemOns(renderOpts, params)
253
+ }, {
254
+ default: () => {
255
+ return options.map((option, oIndex) => {
256
+ return h(getCurrComponent('a-radio'), {
257
+ key: oIndex,
258
+ value: option[valueProp],
259
+ disabled: option.disabled
260
+ }, {
261
+ default: () => cellText(option[labelProp])
262
+ })
263
+ })
264
+ }
265
+ })
266
+ ]
267
+ }
268
+ },
269
+ ACheckboxGroup: {
270
+ renderFormItemContent (renderOpts, params) {
271
+ const { options = [], optionProps = {} } = renderOpts
272
+ const { data, field } = params
273
+ const { attrs } = renderOpts
274
+ const labelProp = optionProps.label || 'label'
275
+ const valueProp = optionProps.value || 'value'
276
+ const itemValue = XEUtils.get(data, field)
277
+ return [
278
+ h(getCurrComponent('a-checkbox-group'), {
279
+ ...attrs,
280
+ ...getItemProps(renderOpts, params, itemValue),
281
+ ...getItemOns(renderOpts, params)
282
+ }, {
283
+ default: () => {
284
+ return options.map((option, oIndex) => {
285
+ return h(getCurrComponent('a-checkbox'), {
286
+ key: oIndex,
287
+ value: option[valueProp],
288
+ disabled: option.disabled
289
+ }, {
290
+ default: () => cellText(option[labelProp])
291
+ })
292
+ })
293
+ }
294
+ })
295
+ ]
296
+ }
297
+ },
298
+ AButton: {
299
+ renderFormItemContent: defaultButtonItemRender
300
+ },
301
+
302
+ // 已废弃
303
+ ARadio: {
304
+ renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
305
+ },
306
+ ACheckbox: {
307
+ renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
308
+ },
309
+ AButtons: {
310
+ renderFormItemContent: defaultButtonsItemRender
311
+ }
312
+ })
313
+ }