@vxe-ui/plugin-render-element 4.2.4 → 4.3.1
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/dist/index.umd.js +15 -12
- package/dist/index.umd.min.js +1 -1
- package/es/form/index.js +279 -0
- package/es/form-design/checkbox-widget.js +151 -0
- package/es/form-design/date-picker-widget.js +129 -0
- package/es/form-design/index.js +97 -0
- package/es/form-design/input-widget.js +130 -0
- package/es/form-design/number-input-widget.js +129 -0
- package/es/form-design/radio-widget.js +151 -0
- package/es/form-design/select-widget.js +149 -0
- package/es/form-design/switch-widget.js +125 -0
- package/es/form-design/textarea-widget.js +134 -0
- package/es/form-design/use.js +226 -0
- package/es/index.esm.js +111 -0
- package/es/index.js +111 -0
- package/es/store/index.js +2 -0
- package/es/style.css +38 -0
- package/es/style.min.css +1 -0
- package/es/table/index.js +633 -0
- package/es/util/comp.js +18 -0
- package/{dist → lib}/form/index.js +3 -0
- package/{dist → lib}/index.common.js +3 -3
- package/{dist → lib}/index.js +3 -3
- package/lib/index.umd.js +2962 -0
- package/lib/index.umd.min.js +1 -0
- package/lib/style.css +38 -0
- package/lib/style.min.css +1 -0
- package/package.json +14 -17
- package/src/form/index.ts +5 -2
- /package/{dist → lib}/form-design/checkbox-widget.js +0 -0
- /package/{dist → lib}/form-design/date-picker-widget.js +0 -0
- /package/{dist → lib}/form-design/index.js +0 -0
- /package/{dist → lib}/form-design/input-widget.js +0 -0
- /package/{dist → lib}/form-design/number-input-widget.js +0 -0
- /package/{dist → lib}/form-design/radio-widget.js +0 -0
- /package/{dist → lib}/form-design/select-widget.js +0 -0
- /package/{dist → lib}/form-design/switch-widget.js +0 -0
- /package/{dist → lib}/form-design/textarea-widget.js +0 -0
- /package/{dist → lib}/form-design/use.js +0 -0
- /package/{dist → lib}/store/index.js +0 -0
- /package/{dist → lib}/table/index.js +0 -0
- /package/{dist → lib}/util/comp.js +0 -0
|
@@ -0,0 +1,633 @@
|
|
|
1
|
+
import { h } from 'vue';
|
|
2
|
+
import { getCurrComponent, hasInputType } from '../util/comp';
|
|
3
|
+
import XEUtils from 'xe-utils';
|
|
4
|
+
import dayjs from 'dayjs';
|
|
5
|
+
/**
|
|
6
|
+
* 表格 - 渲染器
|
|
7
|
+
*/
|
|
8
|
+
export function defineTableRender(VxeUI) {
|
|
9
|
+
function isEmptyValue(cellValue) {
|
|
10
|
+
return cellValue === null || cellValue === undefined || cellValue === '';
|
|
11
|
+
}
|
|
12
|
+
function getOnName(type) {
|
|
13
|
+
return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1);
|
|
14
|
+
}
|
|
15
|
+
function getModelProp(renderOpts) {
|
|
16
|
+
return 'modelValue';
|
|
17
|
+
}
|
|
18
|
+
function getModelEvent(renderOpts) {
|
|
19
|
+
return 'update:modelValue';
|
|
20
|
+
}
|
|
21
|
+
function getChangeEvent(renderOpts) {
|
|
22
|
+
let type = 'change';
|
|
23
|
+
switch (renderOpts.name) {
|
|
24
|
+
case 'ElAutocomplete':
|
|
25
|
+
type = 'select';
|
|
26
|
+
break;
|
|
27
|
+
case 'ElInput':
|
|
28
|
+
case 'ElInputNumber':
|
|
29
|
+
type = 'input';
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
return type;
|
|
33
|
+
}
|
|
34
|
+
function toDayStringDate(value, format) {
|
|
35
|
+
return dayjs(value, format).toDate();
|
|
36
|
+
}
|
|
37
|
+
function toDayDateString(date, format) {
|
|
38
|
+
return dayjs(date).format(format);
|
|
39
|
+
}
|
|
40
|
+
function parseDate(value, props) {
|
|
41
|
+
return value && props.valueFormat ? toDayStringDate(value, props.valueFormat) : value;
|
|
42
|
+
}
|
|
43
|
+
function getFormatDate(value, props, defaultFormat) {
|
|
44
|
+
return value ? toDayDateString(parseDate(value, props), props.format || props.valueFormat || defaultFormat) : value;
|
|
45
|
+
}
|
|
46
|
+
function getFormatDates(values, props, separator, defaultFormat) {
|
|
47
|
+
return XEUtils.map(values, (date) => getFormatDate(date, props, defaultFormat)).join(separator);
|
|
48
|
+
}
|
|
49
|
+
function equalDateRange(cellValue, data, props, defaultFormat) {
|
|
50
|
+
cellValue = getFormatDate(cellValue, props, defaultFormat);
|
|
51
|
+
return cellValue >= getFormatDate(data[0], props, defaultFormat) && cellValue <= getFormatDate(data[1], props, defaultFormat);
|
|
52
|
+
}
|
|
53
|
+
function getCellEditFilterProps(renderOpts, params, value, defaultProps) {
|
|
54
|
+
return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value });
|
|
55
|
+
}
|
|
56
|
+
function formatText(cellValue) {
|
|
57
|
+
return '' + (isEmptyValue(cellValue) ? '' : cellValue);
|
|
58
|
+
}
|
|
59
|
+
function updateFilterChangeOption(params, checked, option) {
|
|
60
|
+
const { $table } = params;
|
|
61
|
+
$table.updateFilterOptionStatus(option, checked);
|
|
62
|
+
}
|
|
63
|
+
function saveFilterEvent(params) {
|
|
64
|
+
const { $table, column } = params;
|
|
65
|
+
$table.saveFilterByEvent(new Event('change'), column);
|
|
66
|
+
}
|
|
67
|
+
function getCellLabelVNs(renderOpts, params, cellLabel) {
|
|
68
|
+
const { placeholder } = renderOpts;
|
|
69
|
+
return [
|
|
70
|
+
h('span', {
|
|
71
|
+
class: 'vxe-cell--label'
|
|
72
|
+
}, placeholder && isEmptyValue(cellLabel)
|
|
73
|
+
? [
|
|
74
|
+
h('span', {
|
|
75
|
+
class: 'vxe-cell--placeholder'
|
|
76
|
+
}, formatText(VxeUI.getI18n(placeholder)))
|
|
77
|
+
]
|
|
78
|
+
: formatText(cellLabel))
|
|
79
|
+
];
|
|
80
|
+
}
|
|
81
|
+
const blurEvent = 'blur';
|
|
82
|
+
const clearEvent = 'clear';
|
|
83
|
+
/**
|
|
84
|
+
* 组件事件处理
|
|
85
|
+
* @param renderOpts
|
|
86
|
+
* @param params
|
|
87
|
+
* @param modelFunc
|
|
88
|
+
* @param changeFunc
|
|
89
|
+
*/
|
|
90
|
+
function getComponentOns(renderOpts, params, eFns, eventOns) {
|
|
91
|
+
const { events } = renderOpts;
|
|
92
|
+
const modelEvent = getModelEvent(renderOpts);
|
|
93
|
+
const changeEvent = getChangeEvent(renderOpts);
|
|
94
|
+
const { model: modelFunc, change: changeFunc, blur: blurFunc, clear: clearFunc } = eFns || {};
|
|
95
|
+
const ons = {};
|
|
96
|
+
XEUtils.objectEach(events, (func, key) => {
|
|
97
|
+
ons[getOnName(key)] = function (...args) {
|
|
98
|
+
if (!XEUtils.isFunction(func)) {
|
|
99
|
+
console.error(`Parameter "${func}" is not a method`);
|
|
100
|
+
}
|
|
101
|
+
func(params, ...args);
|
|
102
|
+
};
|
|
103
|
+
});
|
|
104
|
+
if (modelFunc) {
|
|
105
|
+
ons[getOnName(modelEvent)] = function (targetEvnt) {
|
|
106
|
+
modelFunc(targetEvnt);
|
|
107
|
+
if (events && events[modelEvent]) {
|
|
108
|
+
events[modelEvent](params, targetEvnt);
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
if (changeFunc) {
|
|
113
|
+
ons[getOnName(changeEvent)] = function (...args) {
|
|
114
|
+
changeFunc(...args);
|
|
115
|
+
if (events && events[changeEvent]) {
|
|
116
|
+
events[changeEvent](params, ...args);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
if (blurFunc) {
|
|
121
|
+
ons[getOnName(blurEvent)] = function (...args) {
|
|
122
|
+
blurFunc(...args);
|
|
123
|
+
if (events && events[blurEvent]) {
|
|
124
|
+
events[blurEvent](params, ...args);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
if (clearFunc) {
|
|
129
|
+
ons[getOnName(clearEvent)] = function (...args) {
|
|
130
|
+
clearFunc(...args);
|
|
131
|
+
if (events && events[clearEvent]) {
|
|
132
|
+
events[clearEvent](params, ...args);
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
return eventOns ? Object.assign(ons, eventOns) : ons;
|
|
137
|
+
}
|
|
138
|
+
function getEditOns(renderOpts, params) {
|
|
139
|
+
const { $table, row, column } = params;
|
|
140
|
+
return getComponentOns(renderOpts, params, {
|
|
141
|
+
model(value) {
|
|
142
|
+
// 处理 model 值双向绑定
|
|
143
|
+
XEUtils.set(row, column.field, value);
|
|
144
|
+
},
|
|
145
|
+
change() {
|
|
146
|
+
// 处理 change 事件相关逻辑
|
|
147
|
+
$table.updateStatus(params);
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
function getFilterOns(renderOpts, params, option, changeFunc) {
|
|
152
|
+
return getComponentOns(renderOpts, params, {
|
|
153
|
+
model(value) {
|
|
154
|
+
// 处理 model 值双向绑定
|
|
155
|
+
option.data = value;
|
|
156
|
+
},
|
|
157
|
+
change: changeFunc
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
function getFloatingFilterOns(renderOpts, params, option) {
|
|
161
|
+
const { $table, column } = params;
|
|
162
|
+
if (hasInputType(renderOpts)) {
|
|
163
|
+
return getComponentOns(renderOpts, params, {
|
|
164
|
+
model(value) {
|
|
165
|
+
// 处理 model 值双向绑定
|
|
166
|
+
option.data = value;
|
|
167
|
+
},
|
|
168
|
+
change() {
|
|
169
|
+
updateFilterChangeOption(params, !isEmptyValue(option.data), option);
|
|
170
|
+
},
|
|
171
|
+
clear() {
|
|
172
|
+
updateFilterChangeOption(params, !isEmptyValue(option.data), option);
|
|
173
|
+
saveFilterEvent(params);
|
|
174
|
+
},
|
|
175
|
+
blur() {
|
|
176
|
+
$table.saveFilterByEvent(new Event('change'), column);
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
return getComponentOns(renderOpts, params, {
|
|
181
|
+
model(value) {
|
|
182
|
+
// 处理 model 值双向绑定
|
|
183
|
+
option.data = value;
|
|
184
|
+
},
|
|
185
|
+
clear() {
|
|
186
|
+
updateFilterChangeOption(params, !isEmptyValue(option.data), option);
|
|
187
|
+
$table.saveFilterByEvent(new Event('change'), column);
|
|
188
|
+
},
|
|
189
|
+
change() {
|
|
190
|
+
updateFilterChangeOption(params, !isEmptyValue(option.data), option);
|
|
191
|
+
$table.saveFilterByEvent(new Event('change'), column);
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
function matchCascaderData(index, list, values, labels) {
|
|
196
|
+
const val = values[index];
|
|
197
|
+
if (list && values.length > index) {
|
|
198
|
+
XEUtils.each(list, (item) => {
|
|
199
|
+
if (item.value === val) {
|
|
200
|
+
labels.push(item.label);
|
|
201
|
+
matchCascaderData(++index, item.children, values, labels);
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
function getSelectCellValue(renderOpts, params) {
|
|
207
|
+
const { options = [], optionGroups, props = {}, optionProps = {}, optionGroupProps = {} } = renderOpts;
|
|
208
|
+
const { $table, rowid, row, column } = params;
|
|
209
|
+
const { filterable, multiple } = props;
|
|
210
|
+
const labelProp = optionProps.label || 'label';
|
|
211
|
+
const valueProp = optionProps.value || 'value';
|
|
212
|
+
const groupOptions = optionGroupProps.options || 'options';
|
|
213
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
214
|
+
const colid = column.id;
|
|
215
|
+
let cellData;
|
|
216
|
+
if (filterable) {
|
|
217
|
+
const { internalData } = $table;
|
|
218
|
+
const { fullAllDataRowIdData } = internalData;
|
|
219
|
+
const rest = fullAllDataRowIdData[rowid];
|
|
220
|
+
if (rest) {
|
|
221
|
+
cellData = rest.cellData;
|
|
222
|
+
if (!cellData) {
|
|
223
|
+
cellData = rest.cellData = {};
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
if (rest && cellData[colid] && cellData[colid].value === cellValue) {
|
|
227
|
+
return cellData[colid].label;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
if (!isEmptyValue(cellValue)) {
|
|
231
|
+
const selectlabel = XEUtils.map(multiple ? cellValue : [cellValue], optionGroups
|
|
232
|
+
? (value) => {
|
|
233
|
+
let selectItem;
|
|
234
|
+
for (let index = 0; index < optionGroups.length; index++) {
|
|
235
|
+
selectItem = XEUtils.find(optionGroups[index][groupOptions], (item) => item[valueProp] === value);
|
|
236
|
+
if (selectItem) {
|
|
237
|
+
break;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
return selectItem ? selectItem[labelProp] : value;
|
|
241
|
+
}
|
|
242
|
+
: (value) => {
|
|
243
|
+
const selectItem = XEUtils.find(options, (item) => item[valueProp] === value);
|
|
244
|
+
return selectItem ? selectItem[labelProp] : value;
|
|
245
|
+
}).join(', ');
|
|
246
|
+
if (cellData && options && options.length) {
|
|
247
|
+
cellData[colid] = { value: cellValue, label: selectlabel };
|
|
248
|
+
}
|
|
249
|
+
return selectlabel;
|
|
250
|
+
}
|
|
251
|
+
return '';
|
|
252
|
+
}
|
|
253
|
+
function getCascaderCellValue(renderOpts, params) {
|
|
254
|
+
const { props = {} } = renderOpts;
|
|
255
|
+
const { row, column } = params;
|
|
256
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
257
|
+
const values = cellValue || [];
|
|
258
|
+
const labels = [];
|
|
259
|
+
matchCascaderData(0, props.options, values, labels);
|
|
260
|
+
return (props.showAllLevels === false ? labels.slice(labels.length - 1, labels.length) : labels).join(` ${props.separator || '/'} `);
|
|
261
|
+
}
|
|
262
|
+
function getDatePickerCellValue(renderOpts, params) {
|
|
263
|
+
const { props = {} } = renderOpts;
|
|
264
|
+
const { row, column } = params;
|
|
265
|
+
const { rangeSeparator = '-' } = props;
|
|
266
|
+
let cellValue = XEUtils.get(row, column.field);
|
|
267
|
+
switch (props.type) {
|
|
268
|
+
case 'week':
|
|
269
|
+
cellValue = getFormatDate(cellValue, props, 'YYYYwWW');
|
|
270
|
+
break;
|
|
271
|
+
case 'month':
|
|
272
|
+
cellValue = getFormatDate(cellValue, props, 'YYYY-MM');
|
|
273
|
+
break;
|
|
274
|
+
case 'year':
|
|
275
|
+
cellValue = getFormatDate(cellValue, props, 'YYYY');
|
|
276
|
+
break;
|
|
277
|
+
case 'dates':
|
|
278
|
+
cellValue = getFormatDates(cellValue, props, ', ', 'YYYY-MM-DD');
|
|
279
|
+
break;
|
|
280
|
+
case 'daterange':
|
|
281
|
+
cellValue = getFormatDates(cellValue, props, ` ${rangeSeparator} `, 'YYYY-MM-DD');
|
|
282
|
+
break;
|
|
283
|
+
case 'datetimerange':
|
|
284
|
+
cellValue = getFormatDates(cellValue, props, ` ${rangeSeparator} `, 'YYYY-MM-DD HH:ss:mm');
|
|
285
|
+
break;
|
|
286
|
+
case 'monthrange':
|
|
287
|
+
cellValue = getFormatDates(cellValue, props, ` ${rangeSeparator} `, 'YYYY-MM');
|
|
288
|
+
break;
|
|
289
|
+
default:
|
|
290
|
+
cellValue = getFormatDate(cellValue, props, 'YYYY-MM-DD');
|
|
291
|
+
}
|
|
292
|
+
return cellValue;
|
|
293
|
+
}
|
|
294
|
+
function getTimePickerCellValue(renderOpts, params) {
|
|
295
|
+
const { props = {} } = renderOpts;
|
|
296
|
+
const { row, column } = params;
|
|
297
|
+
const { isRange, format = 'HH:mm:ss', rangeSeparator = '-' } = props;
|
|
298
|
+
let cellValue = XEUtils.get(row, column.field);
|
|
299
|
+
if (cellValue && isRange) {
|
|
300
|
+
cellValue = XEUtils.map(cellValue, (date) => toDayDateString(parseDate(date, props), format)).join(` ${rangeSeparator} `);
|
|
301
|
+
}
|
|
302
|
+
return toDayDateString(parseDate(cellValue, props), format);
|
|
303
|
+
}
|
|
304
|
+
function createEditRender(defaultProps) {
|
|
305
|
+
return function (renderOpts, params) {
|
|
306
|
+
const { row, column } = params;
|
|
307
|
+
const { name, attrs, props } = renderOpts;
|
|
308
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
309
|
+
return [
|
|
310
|
+
h(getCurrComponent(name), Object.assign(Object.assign(Object.assign(Object.assign({}, attrs), props), getCellEditFilterProps(renderOpts, params, cellValue, defaultProps)), getEditOns(renderOpts, params)))
|
|
311
|
+
];
|
|
312
|
+
};
|
|
313
|
+
}
|
|
314
|
+
function defaultButtonEditRender(renderOpts, params) {
|
|
315
|
+
const { attrs, props } = renderOpts;
|
|
316
|
+
return [
|
|
317
|
+
h(getCurrComponent('el-button'), Object.assign(Object.assign(Object.assign(Object.assign({}, attrs), props), getCellEditFilterProps(renderOpts, params, null)), getComponentOns(renderOpts, params)), cellText(renderOpts.content))
|
|
318
|
+
];
|
|
319
|
+
}
|
|
320
|
+
function defaultButtonsEditRender(renderOpts, params) {
|
|
321
|
+
const { children } = renderOpts;
|
|
322
|
+
if (children) {
|
|
323
|
+
return children.map((childRenderOpts) => defaultButtonEditRender(childRenderOpts, params)[0]);
|
|
324
|
+
}
|
|
325
|
+
return [];
|
|
326
|
+
}
|
|
327
|
+
function createFilterRender(defaultProps) {
|
|
328
|
+
return function (renderOpts, params) {
|
|
329
|
+
const { column } = params;
|
|
330
|
+
const { name, attrs, props } = renderOpts;
|
|
331
|
+
return [
|
|
332
|
+
h('div', {
|
|
333
|
+
class: 'vxe-table--filter-element-wrapper'
|
|
334
|
+
}, column.filters.map((option, oIndex) => {
|
|
335
|
+
const optionValue = option.data;
|
|
336
|
+
return h(getCurrComponent(name), Object.assign(Object.assign(Object.assign(Object.assign({ key: oIndex }, attrs), props), getCellEditFilterProps(renderOpts, params, optionValue, defaultProps)), getFilterOns(renderOpts, params, option, () => {
|
|
337
|
+
// 处理 change 事件相关逻辑
|
|
338
|
+
handleConfirmFilter(params, !!option.data, option);
|
|
339
|
+
})));
|
|
340
|
+
}))
|
|
341
|
+
];
|
|
342
|
+
};
|
|
343
|
+
}
|
|
344
|
+
function createFloatingFilterRender(defaultProps) {
|
|
345
|
+
return function (renderOpts, params) {
|
|
346
|
+
const { option } = params;
|
|
347
|
+
const { name, attrs, props } = renderOpts;
|
|
348
|
+
const optionValue = option.data;
|
|
349
|
+
return [
|
|
350
|
+
h(getCurrComponent(name), Object.assign(Object.assign(Object.assign(Object.assign({}, attrs), props), getCellEditFilterProps(renderOpts, params, optionValue, defaultProps)), getFloatingFilterOns(renderOpts, params, option)))
|
|
351
|
+
];
|
|
352
|
+
};
|
|
353
|
+
}
|
|
354
|
+
function handleConfirmFilter(params, checked, option) {
|
|
355
|
+
const { $panel } = params;
|
|
356
|
+
$panel.changeOption(null, checked, option);
|
|
357
|
+
}
|
|
358
|
+
/**
|
|
359
|
+
* 模糊匹配
|
|
360
|
+
* @param params
|
|
361
|
+
*/
|
|
362
|
+
function defaultFuzzyFilterMethod(params) {
|
|
363
|
+
const { option, row, column } = params;
|
|
364
|
+
const { data } = option;
|
|
365
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
366
|
+
return XEUtils.toValueString(cellValue).indexOf(data) > -1;
|
|
367
|
+
}
|
|
368
|
+
/**
|
|
369
|
+
* 精确匹配
|
|
370
|
+
* @param params
|
|
371
|
+
*/
|
|
372
|
+
function defaultExactFilterMethod(params) {
|
|
373
|
+
const { option, row, column } = params;
|
|
374
|
+
const { data } = option;
|
|
375
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
376
|
+
/* eslint-disable eqeqeq */
|
|
377
|
+
return cellValue === data;
|
|
378
|
+
}
|
|
379
|
+
function renderOptions(options, optionProps) {
|
|
380
|
+
const labelProp = optionProps.label || 'label';
|
|
381
|
+
const valueProp = optionProps.value || 'value';
|
|
382
|
+
return XEUtils.map(options, (item, oIndex) => {
|
|
383
|
+
return h(getCurrComponent('el-option'), {
|
|
384
|
+
key: oIndex,
|
|
385
|
+
value: item[valueProp],
|
|
386
|
+
label: item[labelProp],
|
|
387
|
+
disabled: item.disabled
|
|
388
|
+
});
|
|
389
|
+
});
|
|
390
|
+
}
|
|
391
|
+
function cellText(cellValue) {
|
|
392
|
+
return [formatText(cellValue)];
|
|
393
|
+
}
|
|
394
|
+
function createExportMethod(getExportCellValue) {
|
|
395
|
+
return function (params) {
|
|
396
|
+
const { row, column, options } = params;
|
|
397
|
+
return options && options.original ? XEUtils.get(row, column.field) : getExportCellValue(column.editRender || column.cellRender, params);
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
function defaultFilterOptions() {
|
|
401
|
+
return [
|
|
402
|
+
{ data: null }
|
|
403
|
+
];
|
|
404
|
+
}
|
|
405
|
+
VxeUI.renderer.mixin({
|
|
406
|
+
ElAutocomplete: {
|
|
407
|
+
tableAutoFocus: 'input',
|
|
408
|
+
renderTableDefault: createEditRender(),
|
|
409
|
+
renderTableEdit: createEditRender(),
|
|
410
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
411
|
+
renderTableFilter: createFilterRender(),
|
|
412
|
+
tableFilterDefaultMethod: defaultExactFilterMethod
|
|
413
|
+
},
|
|
414
|
+
ElInput: {
|
|
415
|
+
tableAutoFocus: 'input',
|
|
416
|
+
renderTableDefault: createEditRender(),
|
|
417
|
+
renderTableEdit: createEditRender(),
|
|
418
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
419
|
+
renderTableFilter: createFilterRender(),
|
|
420
|
+
renderTableFloatingFilter: createFloatingFilterRender(),
|
|
421
|
+
tableFilterDefaultMethod: defaultFuzzyFilterMethod
|
|
422
|
+
},
|
|
423
|
+
ElInputNumber: {
|
|
424
|
+
tableAutoFocus: 'input',
|
|
425
|
+
renderTableDefault: createEditRender(),
|
|
426
|
+
renderTableEdit: createEditRender(),
|
|
427
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
428
|
+
renderTableFilter: createFilterRender(),
|
|
429
|
+
renderTableFloatingFilter: createFloatingFilterRender(),
|
|
430
|
+
tableFilterDefaultMethod: defaultFuzzyFilterMethod
|
|
431
|
+
},
|
|
432
|
+
ElSelect: {
|
|
433
|
+
tableAutoFocus: 'input',
|
|
434
|
+
renderTableEdit(renderOpts, params) {
|
|
435
|
+
const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts;
|
|
436
|
+
const { row, column } = params;
|
|
437
|
+
const { attrs } = renderOpts;
|
|
438
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
439
|
+
const props = getCellEditFilterProps(renderOpts, params, cellValue);
|
|
440
|
+
const ons = getEditOns(renderOpts, params);
|
|
441
|
+
if (optionGroups) {
|
|
442
|
+
const groupOptions = optionGroupProps.options || 'options';
|
|
443
|
+
const groupLabel = optionGroupProps.label || 'label';
|
|
444
|
+
return [
|
|
445
|
+
h(getCurrComponent('el-select'), Object.assign(Object.assign(Object.assign({}, attrs), props), ons), {
|
|
446
|
+
default: () => {
|
|
447
|
+
return XEUtils.map(optionGroups, (group, gIndex) => {
|
|
448
|
+
return h(getCurrComponent('el-option-group'), {
|
|
449
|
+
key: gIndex,
|
|
450
|
+
label: group[groupLabel]
|
|
451
|
+
}, {
|
|
452
|
+
default: () => renderOptions(group[groupOptions], optionProps)
|
|
453
|
+
});
|
|
454
|
+
});
|
|
455
|
+
}
|
|
456
|
+
})
|
|
457
|
+
];
|
|
458
|
+
}
|
|
459
|
+
return [
|
|
460
|
+
h(getCurrComponent('el-select'), Object.assign(Object.assign(Object.assign({}, props), attrs), ons), {
|
|
461
|
+
default: () => renderOptions(options, optionProps)
|
|
462
|
+
})
|
|
463
|
+
];
|
|
464
|
+
},
|
|
465
|
+
renderTableCell(renderOpts, params) {
|
|
466
|
+
return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
|
|
467
|
+
},
|
|
468
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
469
|
+
renderTableFilter(renderOpts, params) {
|
|
470
|
+
const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts;
|
|
471
|
+
const groupOptions = optionGroupProps.options || 'options';
|
|
472
|
+
const groupLabel = optionGroupProps.label || 'label';
|
|
473
|
+
const { column } = params;
|
|
474
|
+
const { attrs } = renderOpts;
|
|
475
|
+
return [
|
|
476
|
+
h('div', {
|
|
477
|
+
class: 'vxe-table--filter-element-wrapper'
|
|
478
|
+
}, optionGroups
|
|
479
|
+
? column.filters.map((option, oIndex) => {
|
|
480
|
+
const optionValue = option.data;
|
|
481
|
+
const props = getCellEditFilterProps(renderOpts, params, optionValue);
|
|
482
|
+
return h(getCurrComponent('el-select'), Object.assign(Object.assign(Object.assign({ key: oIndex }, attrs), props), getFilterOns(renderOpts, params, option, () => {
|
|
483
|
+
// 处理 change 事件相关逻辑
|
|
484
|
+
handleConfirmFilter(params, props.multiple ? (option.data && option.data.length > 0) : !XEUtils.eqNull(option.data), option);
|
|
485
|
+
})), {
|
|
486
|
+
default: () => {
|
|
487
|
+
return XEUtils.map(optionGroups, (group, gIndex) => {
|
|
488
|
+
return h(getCurrComponent('el-option-group'), {
|
|
489
|
+
key: gIndex,
|
|
490
|
+
label: group[groupLabel]
|
|
491
|
+
}, {
|
|
492
|
+
default: () => renderOptions(group[groupOptions], optionProps)
|
|
493
|
+
});
|
|
494
|
+
});
|
|
495
|
+
}
|
|
496
|
+
});
|
|
497
|
+
})
|
|
498
|
+
: column.filters.map((option, oIndex) => {
|
|
499
|
+
const optionValue = option.data;
|
|
500
|
+
const props = getCellEditFilterProps(renderOpts, params, optionValue);
|
|
501
|
+
return h(getCurrComponent('el-select'), Object.assign(Object.assign(Object.assign({ key: oIndex }, attrs), props), getFilterOns(renderOpts, params, option, () => {
|
|
502
|
+
// 处理 change 事件相关逻辑
|
|
503
|
+
handleConfirmFilter(params, props.multiple ? (option.data && option.data.length > 0) : !XEUtils.eqNull(option.data), option);
|
|
504
|
+
})), {
|
|
505
|
+
default: () => renderOptions(options, optionProps)
|
|
506
|
+
});
|
|
507
|
+
}))
|
|
508
|
+
];
|
|
509
|
+
},
|
|
510
|
+
tableFilterDefaultMethod(params) {
|
|
511
|
+
const { option, row, column } = params;
|
|
512
|
+
const { data } = option;
|
|
513
|
+
const { field, filterRender: renderOpts } = column;
|
|
514
|
+
const { props = {} } = renderOpts;
|
|
515
|
+
const cellValue = XEUtils.get(row, field);
|
|
516
|
+
if (props.multiple) {
|
|
517
|
+
if (XEUtils.isArray(cellValue)) {
|
|
518
|
+
return XEUtils.includeArrays(cellValue, data);
|
|
519
|
+
}
|
|
520
|
+
return data.indexOf(cellValue) > -1;
|
|
521
|
+
}
|
|
522
|
+
/* eslint-disable eqeqeq */
|
|
523
|
+
return cellValue == data;
|
|
524
|
+
},
|
|
525
|
+
tableExportMethod: createExportMethod(getSelectCellValue)
|
|
526
|
+
},
|
|
527
|
+
ElCascader: {
|
|
528
|
+
tableAutoFocus: 'input',
|
|
529
|
+
renderTableEdit: createEditRender(),
|
|
530
|
+
renderTableCell(renderOpts, params) {
|
|
531
|
+
return getCellLabelVNs(renderOpts, params, getCascaderCellValue(renderOpts, params));
|
|
532
|
+
},
|
|
533
|
+
tableExportMethod: createExportMethod(getCascaderCellValue)
|
|
534
|
+
},
|
|
535
|
+
ElDatePicker: {
|
|
536
|
+
tableAutoFocus: 'input',
|
|
537
|
+
renderTableEdit: createEditRender(),
|
|
538
|
+
renderTableCell(renderOpts, params) {
|
|
539
|
+
return getCellLabelVNs(renderOpts, params, getDatePickerCellValue(renderOpts, params));
|
|
540
|
+
},
|
|
541
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
542
|
+
renderTableFilter(renderOpts, params) {
|
|
543
|
+
const { column } = params;
|
|
544
|
+
const { name, attrs } = renderOpts;
|
|
545
|
+
return [
|
|
546
|
+
h('div', {
|
|
547
|
+
class: 'vxe-table--filter-element-wrapper'
|
|
548
|
+
}, column.filters.map((option, oIndex) => {
|
|
549
|
+
const optionValue = option.data;
|
|
550
|
+
return h(getCurrComponent(name), Object.assign(Object.assign(Object.assign({ key: oIndex }, attrs), getCellEditFilterProps(renderOpts, params, optionValue)), getFilterOns(renderOpts, params, option, () => {
|
|
551
|
+
// 处理 change 事件相关逻辑
|
|
552
|
+
handleConfirmFilter(params, !!option.data, option);
|
|
553
|
+
})));
|
|
554
|
+
}))
|
|
555
|
+
];
|
|
556
|
+
},
|
|
557
|
+
renderTableFloatingFilter: createFloatingFilterRender(),
|
|
558
|
+
tableFilterDefaultMethod(params) {
|
|
559
|
+
const { option, row, column } = params;
|
|
560
|
+
const { data } = option;
|
|
561
|
+
const { filterRender: renderOpts } = column;
|
|
562
|
+
const { props = {} } = renderOpts;
|
|
563
|
+
const cellValue = XEUtils.get(row, column.field);
|
|
564
|
+
if (data) {
|
|
565
|
+
switch (props.type) {
|
|
566
|
+
case 'daterange':
|
|
567
|
+
return equalDateRange(cellValue, data, props, 'YYYY-MM-DD');
|
|
568
|
+
case 'datetimerange':
|
|
569
|
+
return equalDateRange(cellValue, data, props, 'YYYY-MM-DD HH:ss:mm');
|
|
570
|
+
case 'monthrange':
|
|
571
|
+
return equalDateRange(cellValue, data, props, 'YYYY-MM');
|
|
572
|
+
default:
|
|
573
|
+
return cellValue === data;
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
return false;
|
|
577
|
+
},
|
|
578
|
+
tableExportMethod: createExportMethod(getDatePickerCellValue)
|
|
579
|
+
},
|
|
580
|
+
ElTimePicker: {
|
|
581
|
+
tableAutoFocus: 'input',
|
|
582
|
+
renderTableEdit: createEditRender(),
|
|
583
|
+
renderTableCell(renderOpts, params) {
|
|
584
|
+
return getCellLabelVNs(renderOpts, params, getTimePickerCellValue(renderOpts, params));
|
|
585
|
+
},
|
|
586
|
+
tableExportMethod: createExportMethod(getTimePickerCellValue)
|
|
587
|
+
},
|
|
588
|
+
ElTimeSelect: {
|
|
589
|
+
tableAutoFocus: 'input',
|
|
590
|
+
renderTableEdit: createEditRender()
|
|
591
|
+
},
|
|
592
|
+
ElRate: {
|
|
593
|
+
renderTableDefault: createEditRender(),
|
|
594
|
+
renderTableEdit: createEditRender(),
|
|
595
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
596
|
+
renderTableFilter: createFilterRender(),
|
|
597
|
+
tableFilterDefaultMethod: defaultExactFilterMethod
|
|
598
|
+
},
|
|
599
|
+
ElSwitch: {
|
|
600
|
+
renderTableDefault: createEditRender(),
|
|
601
|
+
renderTableEdit: createEditRender(),
|
|
602
|
+
renderTableFilter(renderOpts, params) {
|
|
603
|
+
const { column } = params;
|
|
604
|
+
const { name, attrs } = renderOpts;
|
|
605
|
+
return [
|
|
606
|
+
h('div', {
|
|
607
|
+
class: 'vxe-table--filter-element-wrapper'
|
|
608
|
+
}, column.filters.map((option, oIndex) => {
|
|
609
|
+
const optionValue = option.data;
|
|
610
|
+
return h(getCurrComponent(name), Object.assign(Object.assign(Object.assign({ key: oIndex }, attrs), getCellEditFilterProps(renderOpts, params, optionValue)), getFilterOns(renderOpts, params, option, () => {
|
|
611
|
+
// 处理 change 事件相关逻辑
|
|
612
|
+
handleConfirmFilter(params, XEUtils.isBoolean(option.data), option);
|
|
613
|
+
})));
|
|
614
|
+
}))
|
|
615
|
+
];
|
|
616
|
+
},
|
|
617
|
+
tableFilterDefaultMethod: defaultExactFilterMethod
|
|
618
|
+
},
|
|
619
|
+
ElSlider: {
|
|
620
|
+
renderTableDefault: createEditRender(),
|
|
621
|
+
renderTableEdit: createEditRender(),
|
|
622
|
+
createTableFilterOptions: defaultFilterOptions,
|
|
623
|
+
renderTableFilter: createFilterRender(),
|
|
624
|
+
tableFilterDefaultMethod: defaultExactFilterMethod
|
|
625
|
+
},
|
|
626
|
+
ElButton: {
|
|
627
|
+
renderTableDefault: defaultButtonEditRender
|
|
628
|
+
},
|
|
629
|
+
ElButtons: {
|
|
630
|
+
renderTableDefault: defaultButtonsEditRender
|
|
631
|
+
}
|
|
632
|
+
});
|
|
633
|
+
}
|
package/es/util/comp.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { resolveComponent } from 'vue';
|
|
2
|
+
import { globalConfig, componentMaps } from '../store';
|
|
3
|
+
export function getCurrComponent(name) {
|
|
4
|
+
const comp = componentMaps[name] || (globalConfig.ElementPlus ? globalConfig.ElementPlus[name] : null);
|
|
5
|
+
if (comp) {
|
|
6
|
+
return comp;
|
|
7
|
+
}
|
|
8
|
+
return resolveComponent(name);
|
|
9
|
+
}
|
|
10
|
+
export function hasInputType(renderOpts) {
|
|
11
|
+
switch (renderOpts.name) {
|
|
12
|
+
case 'ElInput':
|
|
13
|
+
case 'ElInputNumber':
|
|
14
|
+
case 'ElTextarea':
|
|
15
|
+
return true;
|
|
16
|
+
}
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
@@ -97,6 +97,9 @@ function defineFormRender(VxeUI) {
|
|
|
97
97
|
}, function () {
|
|
98
98
|
// 处理 change 事件相关逻辑
|
|
99
99
|
$form.updateStatus(params);
|
|
100
|
+
if (renderOpts.changeToSubmit) {
|
|
101
|
+
$form.handleSubmitEvent(new Event('change'));
|
|
102
|
+
}
|
|
100
103
|
});
|
|
101
104
|
}
|
|
102
105
|
function renderOptions(options, optionProps) {
|
|
@@ -56,7 +56,7 @@ var VxeUIPluginRenderElement = exports.VxeUIPluginRenderElement = {
|
|
|
56
56
|
_store.componentMaps[kcName] = comp;
|
|
57
57
|
_store.componentMaps[ccName] = comp;
|
|
58
58
|
} else {
|
|
59
|
-
console.error('[@vxe-ui/plugin-render-element 4.
|
|
59
|
+
console.error('[@vxe-ui/plugin-render-element 4.3.1] error component.', comp);
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
install: function install(VxeUI, options) {
|
|
@@ -70,11 +70,11 @@ var VxeUIPluginRenderElement = exports.VxeUIPluginRenderElement = {
|
|
|
70
70
|
var pVersion = 4;
|
|
71
71
|
var sVersion = 11;
|
|
72
72
|
if (!VxeUI.checkVersion(VxeUI.tableVersion, pVersion, sVersion)) {
|
|
73
|
-
console.error("[@vxe-ui/plugin-render-element 4.
|
|
73
|
+
console.error("[@vxe-ui/plugin-render-element 4.3.1] ".concat(VxeUI.getI18n('vxe.error.errorVersion', ["vxe-table@".concat(VxeUI.tableVersion || '?'), "vxe-table v".concat(pVersion, ".").concat(sVersion, "+")]), " https://vxeui.com/other4/#/plugin-render-element/install"));
|
|
74
74
|
}
|
|
75
75
|
} else {
|
|
76
76
|
if (!/^(4)\./.test(VxeUI.uiVersion || VxeUI.tableVersion)) {
|
|
77
|
-
console.error('[@vxe-ui/plugin-render-element 4.
|
|
77
|
+
console.error('[@vxe-ui/plugin-render-element 4.3.1] Requires vxe-table 4.7.0+ version. https://vxeui.com/other4/#/plugin-render-element/install');
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
/**
|