@jetlinks-web/components 2.0.36 → 2.0.38
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/es/CardSelect/style/index.js +1 -0
- package/es/CheckButton/style/index.js +1 -0
- package/es/DragModal/DragModal.js +307 -0
- package/es/DragModal/index.js +5 -0
- package/es/DragModal/style/index.css +81 -0
- package/es/DragModal/style/index.js +1 -0
- package/es/DragModal/style/index.less +96 -0
- package/es/EditTable/Body.js +365 -0
- package/es/EditTable/EditTable.js +401 -0
- package/es/EditTable/Header.js +242 -0
- package/es/EditTable/components/ContextMenu/Menu.js +154 -0
- package/es/EditTable/components/ContextMenu/index.js +81 -0
- package/es/EditTable/components/Search/Search.js +290 -0
- package/es/EditTable/components/Search/index.js +1 -0
- package/es/EditTable/consts.js +7 -0
- package/es/EditTable/hooks/index.js +40 -0
- package/es/EditTable/hooks/useResizeObserver.js +31 -0
- package/es/EditTable/hooks/useValidate.js +87 -0
- package/es/EditTable/index.js +9 -0
- package/es/EditTable/props.js +50 -0
- package/es/EditTable/style/body.less +76 -0
- package/es/EditTable/style/header.less +77 -0
- package/es/EditTable/style/index.css +219 -0
- package/es/EditTable/style/index.js +1 -0
- package/es/EditTable/style/index.less +42 -0
- package/es/EditTable/style/table.less +42 -0
- package/es/EditTable/utils.js +98 -0
- package/es/Ellipsis/style/index.js +1 -0
- package/es/FullPage/FullPage.js +1 -1
- package/es/ProTable/Content.js +5 -2
- package/es/ProTable/style/ProTable.less +134 -134
- package/es/Search/Advanced/SaveHistory.js +1 -1
- package/es/Search/Item.js +1 -1
- package/es/Search/Search.js +1 -1
- package/es/components.js +3 -1
- package/es/style/index.css +292 -3
- package/es/style/index.less +9 -7
- package/es/style.js +3 -1
- package/lib/CardSelect/style/index.js +3 -0
- package/lib/CheckButton/style/index.js +3 -0
- package/lib/DragModal/DragModal.js +307 -0
- package/lib/DragModal/index.js +12 -0
- package/lib/DragModal/style/index.css +81 -0
- package/lib/DragModal/style/index.js +3 -0
- package/lib/DragModal/style/index.less +96 -0
- package/lib/EditTable/Body.js +365 -0
- package/lib/EditTable/EditTable.js +401 -0
- package/lib/EditTable/Header.js +242 -0
- package/lib/EditTable/components/ContextMenu/Menu.js +154 -0
- package/lib/EditTable/components/ContextMenu/index.js +88 -0
- package/lib/EditTable/components/Search/Search.js +290 -0
- package/lib/EditTable/components/Search/index.js +13 -0
- package/lib/EditTable/consts.js +13 -0
- package/lib/EditTable/hooks/index.js +79 -0
- package/lib/EditTable/hooks/useResizeObserver.js +38 -0
- package/lib/EditTable/hooks/useValidate.js +94 -0
- package/lib/EditTable/index.js +16 -0
- package/lib/EditTable/props.js +56 -0
- package/lib/EditTable/style/body.less +76 -0
- package/lib/EditTable/style/header.less +77 -0
- package/lib/EditTable/style/index.css +219 -0
- package/lib/EditTable/style/index.js +3 -0
- package/lib/EditTable/style/index.less +42 -0
- package/lib/EditTable/style/table.less +42 -0
- package/lib/EditTable/utils.js +105 -0
- package/lib/Ellipsis/style/index.js +3 -0
- package/lib/FullPage/FullPage.js +1 -1
- package/lib/ProTable/Content.js +5 -2
- package/lib/ProTable/style/ProTable.less +134 -134
- package/lib/Search/Advanced/SaveHistory.js +1 -1
- package/lib/Search/Item.js +1 -1
- package/lib/Search/Search.js +1 -1
- package/lib/components.js +14 -0
- package/lib/style/components.less +2 -0
- package/lib/style/index.css +292 -3
- package/lib/style/index.less +9 -7
- package/lib/style.js +3 -1
- package/package.json +5 -3
|
@@ -0,0 +1,401 @@
|
|
|
1
|
+
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
|
|
2
|
+
const op = ops[i];
|
|
3
|
+
const fn = ops[i + 1];
|
|
4
|
+
i += 2;
|
|
5
|
+
if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
|
|
6
|
+
return undefined;
|
|
7
|
+
}
|
|
8
|
+
if (op === 'access' || op === 'optionalAccess') {
|
|
9
|
+
lastAccessLHS = value;
|
|
10
|
+
value = fn(value);
|
|
11
|
+
}
|
|
12
|
+
else if (op === 'call' || op === 'optionalCall') {
|
|
13
|
+
value = fn((...args) => value.call(lastAccessLHS, ...args));
|
|
14
|
+
lastAccessLHS = undefined;
|
|
15
|
+
}
|
|
16
|
+
} return value; }
|
|
17
|
+
/* Analyzed bindings: {
|
|
18
|
+
"serial": "props",
|
|
19
|
+
"validateRowKey": "props",
|
|
20
|
+
"FULL_SCREEN": "setup-maybe-ref",
|
|
21
|
+
"RIGHT_MENU": "setup-maybe-ref",
|
|
22
|
+
"TABLE_DATA_SOURCE": "setup-maybe-ref",
|
|
23
|
+
"TABLE_ERROR": "setup-maybe-ref",
|
|
24
|
+
"TABLE_TOOL": "setup-maybe-ref",
|
|
25
|
+
"TABLE_WRAPPER": "setup-maybe-ref",
|
|
26
|
+
"handleColumnsWidth": "setup-maybe-ref",
|
|
27
|
+
"useResizeObserver": "setup-maybe-ref",
|
|
28
|
+
"useValidate": "setup-maybe-ref",
|
|
29
|
+
"useFormContext": "setup-maybe-ref",
|
|
30
|
+
"tableProps": "setup-maybe-ref",
|
|
31
|
+
"Header": "setup-const",
|
|
32
|
+
"Body": "setup-const",
|
|
33
|
+
"useFullscreen": "setup-maybe-ref",
|
|
34
|
+
"provide": "setup-const",
|
|
35
|
+
"useAttrs": "setup-const",
|
|
36
|
+
"useSlots": "setup-const",
|
|
37
|
+
"ref": "setup-const",
|
|
38
|
+
"reactive": "setup-const",
|
|
39
|
+
"defineOptions": "setup-const",
|
|
40
|
+
"bodyProps": "setup-maybe-ref",
|
|
41
|
+
"defaultProps": "setup-maybe-ref",
|
|
42
|
+
"findIndex": "setup-maybe-ref",
|
|
43
|
+
"get": "setup-maybe-ref",
|
|
44
|
+
"sortBy": "setup-maybe-ref",
|
|
45
|
+
"emit": "setup-const",
|
|
46
|
+
"props": "setup-reactive-const",
|
|
47
|
+
"slots": "setup-maybe-ref",
|
|
48
|
+
"attrs": "setup-maybe-ref",
|
|
49
|
+
"myColumns": "setup-ref",
|
|
50
|
+
"tableWrapper": "setup-ref",
|
|
51
|
+
"tableBody": "setup-ref",
|
|
52
|
+
"horizontalScrollRef": "setup-ref",
|
|
53
|
+
"scrollMap": "setup-reactive-const",
|
|
54
|
+
"tableStyle": "setup-reactive-const",
|
|
55
|
+
"fields": "setup-const",
|
|
56
|
+
"fieldsErrMap": "setup-ref",
|
|
57
|
+
"sortData": "setup-reactive-const",
|
|
58
|
+
"_dataSource": "setup-maybe-ref",
|
|
59
|
+
"isFullscreen": "setup-maybe-ref",
|
|
60
|
+
"toggle": "setup-maybe-ref",
|
|
61
|
+
"rules": "setup-maybe-ref",
|
|
62
|
+
"validateItem": "setup-maybe-ref",
|
|
63
|
+
"validate": "setup-maybe-ref",
|
|
64
|
+
"errorMap": "setup-maybe-ref",
|
|
65
|
+
"addField": "setup-const",
|
|
66
|
+
"removeField": "setup-const",
|
|
67
|
+
"findField": "setup-const",
|
|
68
|
+
"removeFieldError": "setup-const",
|
|
69
|
+
"addFieldError": "setup-const",
|
|
70
|
+
"scrollWidth": "setup-maybe-ref",
|
|
71
|
+
"onHorizontalScroll": "setup-const",
|
|
72
|
+
"onResize": "setup-const",
|
|
73
|
+
"onScrollDown": "setup-const",
|
|
74
|
+
"rightMenu": "setup-const",
|
|
75
|
+
"scrollToById": "setup-const",
|
|
76
|
+
"scrollToByIndex": "setup-const",
|
|
77
|
+
"getTableWrapperRef": "setup-const"
|
|
78
|
+
} */
|
|
79
|
+
import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
|
|
80
|
+
const _hoisted_1 = { class: "jetlinks-edit-table-extra" };
|
|
81
|
+
const _hoisted_2 = { class: "jetlinks-edit-table" };
|
|
82
|
+
const _hoisted_3 = {
|
|
83
|
+
key: 0,
|
|
84
|
+
class: "jetlinks-edit-table-horizontal-scroll"
|
|
85
|
+
};
|
|
86
|
+
const _hoisted_4 = /*#__PURE__*/ _createElementVNode("div", { class: "jetlinks-edit-table-horizontal-scroll-hidden" }, null, -1 /* HOISTED */);
|
|
87
|
+
import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_TOOL, TABLE_WRAPPER } from './consts';
|
|
88
|
+
import { handleColumnsWidth } from './utils';
|
|
89
|
+
import { useResizeObserver, useValidate, useFormContext } from './hooks';
|
|
90
|
+
import { tableProps } from 'ant-design-vue/lib/table';
|
|
91
|
+
import Header from './header.js';
|
|
92
|
+
import Body from './body.js';
|
|
93
|
+
import { useFullscreen } from '@vueuse/core';
|
|
94
|
+
import { provide, useAttrs, useSlots, ref, reactive, } from 'vue';
|
|
95
|
+
import { bodyProps, defaultProps } from "./props";
|
|
96
|
+
import { findIndex, get, sortBy } from 'lodash-es';
|
|
97
|
+
const __sfc_main__ = Object.assign({
|
|
98
|
+
name: 'JEditTable'
|
|
99
|
+
}, {
|
|
100
|
+
props: {
|
|
101
|
+
...tableProps(),
|
|
102
|
+
...defaultProps(),
|
|
103
|
+
...bodyProps(),
|
|
104
|
+
serial: {
|
|
105
|
+
type: [Object, Boolean],
|
|
106
|
+
default: () => ({})
|
|
107
|
+
},
|
|
108
|
+
validateRowKey: {
|
|
109
|
+
type: Boolean,
|
|
110
|
+
default: false
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange'],
|
|
114
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
115
|
+
const emit = __emit;
|
|
116
|
+
const props = __props;
|
|
117
|
+
const slots = useSlots();
|
|
118
|
+
const attrs = useAttrs();
|
|
119
|
+
const myColumns = ref([]);
|
|
120
|
+
const tableWrapper = ref();
|
|
121
|
+
const tableBody = ref();
|
|
122
|
+
const horizontalScrollRef = ref();
|
|
123
|
+
const scrollMap = reactive({
|
|
124
|
+
x: 0,
|
|
125
|
+
y: 0,
|
|
126
|
+
down: undefined
|
|
127
|
+
});
|
|
128
|
+
const tableStyle = reactive({
|
|
129
|
+
width: '100%',
|
|
130
|
+
height: props.height
|
|
131
|
+
});
|
|
132
|
+
const fields = {};
|
|
133
|
+
const fieldsErrMap = ref({});
|
|
134
|
+
const sortData = reactive({
|
|
135
|
+
key: undefined,
|
|
136
|
+
order: undefined,
|
|
137
|
+
orderKeys: [],
|
|
138
|
+
dataIndex: undefined
|
|
139
|
+
});
|
|
140
|
+
const _dataSource = computed(() => {
|
|
141
|
+
const sortDataSource = sortData.key ?
|
|
142
|
+
sortBy(props.dataSource, (val) => {
|
|
143
|
+
if (!val.id)
|
|
144
|
+
return 99999999;
|
|
145
|
+
const index = findIndex(sortData.orderKeys, val2 => get(val, sortData.key) === val2);
|
|
146
|
+
return sortData.order === 'desc' ? index : ~index + 1;
|
|
147
|
+
}) : props.dataSource;
|
|
148
|
+
sortDataSource.forEach((item, index) => {
|
|
149
|
+
item.__dataIndex = index;
|
|
150
|
+
item.__serial = index + 1;
|
|
151
|
+
});
|
|
152
|
+
return sortDataSource;
|
|
153
|
+
});
|
|
154
|
+
useResizeObserver(tableWrapper, onResize);
|
|
155
|
+
const { isFullscreen, toggle } = useFullscreen(tableWrapper);
|
|
156
|
+
const { rules, validateItem, validate, errorMap } = useValidate(_dataSource, props.columns, props.rowKey, {
|
|
157
|
+
onError: (err) => {
|
|
158
|
+
fieldsErrMap.value = {};
|
|
159
|
+
const errMap = {};
|
|
160
|
+
// 显示全部err红标
|
|
161
|
+
err.forEach((item, errIndex) => {
|
|
162
|
+
item.forEach((e, eIndex) => {
|
|
163
|
+
const field = findField(e.__dataIndex, e.field);
|
|
164
|
+
const _eventKey = field ? field.eventKey : `${e.__dataIndex}-${e.field}`;
|
|
165
|
+
if (field) {
|
|
166
|
+
field.showErrorTip(e.message);
|
|
167
|
+
}
|
|
168
|
+
errMap[_eventKey] = e.message;
|
|
169
|
+
if (errIndex === 0 && eIndex === 0) {
|
|
170
|
+
setTimeout(() => {
|
|
171
|
+
tableBody.value.scrollTo(e.__serial - 1);
|
|
172
|
+
}, 10);
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
fieldsErrMap.value = errMap;
|
|
177
|
+
},
|
|
178
|
+
onSuccess: () => {
|
|
179
|
+
fieldsErrMap.value = {};
|
|
180
|
+
},
|
|
181
|
+
onEdit: () => {
|
|
182
|
+
emit('editChange', true);
|
|
183
|
+
},
|
|
184
|
+
validateRowKey: props.validateRowKey
|
|
185
|
+
});
|
|
186
|
+
provide(TABLE_WRAPPER, tableWrapper);
|
|
187
|
+
provide(FULL_SCREEN, isFullscreen);
|
|
188
|
+
provide(RIGHT_MENU, { click: rightMenu, getPopupContainer: () => tableWrapper.value });
|
|
189
|
+
provide(TABLE_ERROR, fieldsErrMap);
|
|
190
|
+
provide(TABLE_DATA_SOURCE, _dataSource);
|
|
191
|
+
provide(TABLE_TOOL, {
|
|
192
|
+
scrollTo: (record) => {
|
|
193
|
+
setTimeout(() => {
|
|
194
|
+
tableBody.value.scrollTo(record.__serial);
|
|
195
|
+
}, 10);
|
|
196
|
+
},
|
|
197
|
+
selected: (keys) => {
|
|
198
|
+
tableBody.value.updateSelectedKeys(keys);
|
|
199
|
+
},
|
|
200
|
+
order: (type, key, orderKeys, dataIndex) => {
|
|
201
|
+
sortData.key = key;
|
|
202
|
+
sortData.order = type;
|
|
203
|
+
sortData.orderKeys = orderKeys;
|
|
204
|
+
sortData.dataIndex = dataIndex;
|
|
205
|
+
},
|
|
206
|
+
cleanOrder: () => {
|
|
207
|
+
sortData.key = undefined;
|
|
208
|
+
sortData.order = undefined;
|
|
209
|
+
sortData.orderKeys = [];
|
|
210
|
+
sortData.dataIndex = undefined;
|
|
211
|
+
},
|
|
212
|
+
searchVisible: (v) => {
|
|
213
|
+
emit('searchVisibleChange', v);
|
|
214
|
+
},
|
|
215
|
+
scrollMap,
|
|
216
|
+
sortData
|
|
217
|
+
});
|
|
218
|
+
const addField = (key, field) => {
|
|
219
|
+
fields[key] = field;
|
|
220
|
+
};
|
|
221
|
+
const removeField = (key) => {
|
|
222
|
+
delete fields[key];
|
|
223
|
+
};
|
|
224
|
+
function findField(index, name) {
|
|
225
|
+
const fieldId = Object.keys(fields).find(key => {
|
|
226
|
+
const { names } = fields[key];
|
|
227
|
+
return names[0] === index && names[1] === name;
|
|
228
|
+
});
|
|
229
|
+
return fields[fieldId];
|
|
230
|
+
}
|
|
231
|
+
function removeFieldError(key) {
|
|
232
|
+
delete fieldsErrMap.value[key];
|
|
233
|
+
}
|
|
234
|
+
function addFieldError(key, message) {
|
|
235
|
+
fieldsErrMap.value[key] = message;
|
|
236
|
+
}
|
|
237
|
+
const scrollWidth = computed(() => {
|
|
238
|
+
return (props.dataSource.length * props.cellHeight) > props.height ? 17 : 0;
|
|
239
|
+
});
|
|
240
|
+
const onHorizontalScroll = () => {
|
|
241
|
+
if (!horizontalScrollRef.value)
|
|
242
|
+
return;
|
|
243
|
+
const { clientWidth, scrollLeft, scrollWidth } = horizontalScrollRef.value;
|
|
244
|
+
scrollMap.x = scrollLeft;
|
|
245
|
+
if (clientWidth + scrollLeft >= scrollWidth) {
|
|
246
|
+
scrollMap.down = 'right';
|
|
247
|
+
}
|
|
248
|
+
else if (scrollLeft === 0) {
|
|
249
|
+
scrollMap.down = undefined;
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
scrollMap.down = 'left';
|
|
253
|
+
}
|
|
254
|
+
};
|
|
255
|
+
function onResize({ width = 0, height }) {
|
|
256
|
+
const _width = width - scrollWidth.value;
|
|
257
|
+
tableStyle.width = width || '100%';
|
|
258
|
+
let newColumns = [...props.columns];
|
|
259
|
+
if (props.serial) {
|
|
260
|
+
const options = Object.assign({
|
|
261
|
+
title: '序号',
|
|
262
|
+
width: 66,
|
|
263
|
+
fixed: 'left'
|
|
264
|
+
}, props.serial);
|
|
265
|
+
const serial = {
|
|
266
|
+
dataIndex: '__serial',
|
|
267
|
+
title: options.title,
|
|
268
|
+
customRender: (customData) => {
|
|
269
|
+
if (_optionalChain([props, 'access', _2 => _2.serial, 'optionalAccess', _3 => _3.customRender])) {
|
|
270
|
+
return _optionalChain([props, 'access', _4 => _4.serial, 'optionalAccess', _5 => _5.customRender, 'call', _6 => _6(customData)]);
|
|
271
|
+
}
|
|
272
|
+
return customData.index + 1;
|
|
273
|
+
},
|
|
274
|
+
width: options.width,
|
|
275
|
+
fixed: options.fixed
|
|
276
|
+
};
|
|
277
|
+
newColumns = [serial, ...props.columns];
|
|
278
|
+
}
|
|
279
|
+
myColumns.value = handleColumnsWidth(newColumns, _width, _optionalChain([props, 'access', _7 => _7.scroll, 'optionalAccess', _8 => _8.x]));
|
|
280
|
+
console.log(width, _width, myColumns.value);
|
|
281
|
+
}
|
|
282
|
+
const onScrollDown = (len) => {
|
|
283
|
+
emit('scrollDown', len);
|
|
284
|
+
};
|
|
285
|
+
function rightMenu(menuType, record, copyValue) {
|
|
286
|
+
emit('rightMenuClick', menuType, record, copyValue);
|
|
287
|
+
}
|
|
288
|
+
const scrollToById = (key) => {
|
|
289
|
+
const _index = _dataSource.value.findIndex(item => item[props.rowKey] === key);
|
|
290
|
+
tableBody.value.scrollTo(_index);
|
|
291
|
+
};
|
|
292
|
+
const scrollToByIndex = (index) => {
|
|
293
|
+
tableBody.value.scrollTo(index);
|
|
294
|
+
};
|
|
295
|
+
const getTableWrapperRef = () => {
|
|
296
|
+
return tableWrapper.value;
|
|
297
|
+
};
|
|
298
|
+
watch(() => scrollWidth.value, () => {
|
|
299
|
+
onResize({ width: tableStyle.width });
|
|
300
|
+
});
|
|
301
|
+
useFormContext({
|
|
302
|
+
dataSource: computed(() => {
|
|
303
|
+
return props.dataSource;
|
|
304
|
+
}),
|
|
305
|
+
errorMap,
|
|
306
|
+
rules,
|
|
307
|
+
addField,
|
|
308
|
+
removeField,
|
|
309
|
+
removeFieldError,
|
|
310
|
+
addFieldError,
|
|
311
|
+
validateItem
|
|
312
|
+
});
|
|
313
|
+
__expose({
|
|
314
|
+
validate,
|
|
315
|
+
tableWrapper,
|
|
316
|
+
scrollToById,
|
|
317
|
+
scrollToByIndex,
|
|
318
|
+
getTableWrapperRef,
|
|
319
|
+
});
|
|
320
|
+
return (_ctx, _cache) => {
|
|
321
|
+
return (_openBlock(), _createElementBlock("div", {
|
|
322
|
+
class: _normalizeClass({
|
|
323
|
+
'jetlinks-edit-table-wrapper': true,
|
|
324
|
+
'table-full-screen': _unref(isFullscreen)
|
|
325
|
+
}),
|
|
326
|
+
ref_key: "tableWrapper",
|
|
327
|
+
ref: tableWrapper
|
|
328
|
+
}, [
|
|
329
|
+
_createElementVNode("div", _hoisted_1, [
|
|
330
|
+
_renderSlot(_ctx.$slots, "extra", {
|
|
331
|
+
isFullscreen: _unref(isFullscreen),
|
|
332
|
+
fullScreenToggle: _unref(toggle)
|
|
333
|
+
})
|
|
334
|
+
]),
|
|
335
|
+
_createElementVNode("div", _hoisted_2, [
|
|
336
|
+
_createElementVNode("div", {
|
|
337
|
+
class: "jetlinks-edit-table-header",
|
|
338
|
+
style: _normalizeStyle([{ "height": "50px" }, { paddingRight: _unref(scrollWidth) + 'px' }])
|
|
339
|
+
}, [
|
|
340
|
+
_createVNode(Header, {
|
|
341
|
+
columns: myColumns.value,
|
|
342
|
+
style: _normalizeStyle({ width: tableStyle.width }),
|
|
343
|
+
rowKey: _ctx.rowKey
|
|
344
|
+
}, null, 8 /* PROPS */, ["columns", "style", "rowKey"]),
|
|
345
|
+
_createElementVNode("div", {
|
|
346
|
+
class: "jetlinks-edit-table-header-scroll-hidden",
|
|
347
|
+
style: _normalizeStyle({ width: _unref(scrollWidth) + 'px' })
|
|
348
|
+
}, null, 4 /* STYLE */)
|
|
349
|
+
], 4 /* STYLE */),
|
|
350
|
+
_createElementVNode("div", {
|
|
351
|
+
class: "jetlinks-edit-table-body",
|
|
352
|
+
style: _normalizeStyle({ width: tableStyle.width, height: `${_ctx.height}px` })
|
|
353
|
+
}, [
|
|
354
|
+
_createVNode(Body, {
|
|
355
|
+
ref_key: "tableBody",
|
|
356
|
+
ref: tableBody,
|
|
357
|
+
dataSource: _unref(_dataSource),
|
|
358
|
+
columns: myColumns.value,
|
|
359
|
+
cellHeight: _ctx.cellHeight,
|
|
360
|
+
height: _ctx.height,
|
|
361
|
+
disableMenu: _ctx.disableMenu,
|
|
362
|
+
rowKey: _ctx.rowKey,
|
|
363
|
+
rowSelection: _ctx.rowSelection,
|
|
364
|
+
onScrollDown: onScrollDown
|
|
365
|
+
}, _createSlots({ _: 2 /* DYNAMIC */ }, [
|
|
366
|
+
_renderList(_unref(slots), (_, name) => {
|
|
367
|
+
return {
|
|
368
|
+
name: name,
|
|
369
|
+
fn: _withCtx((slotData) => [
|
|
370
|
+
_renderSlot(_ctx.$slots, name, _normalizeProps(_guardReactiveProps(slotData || {})))
|
|
371
|
+
])
|
|
372
|
+
};
|
|
373
|
+
})
|
|
374
|
+
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "rowSelection"]),
|
|
375
|
+
_renderSlot(_ctx.$slots, "bodyExtra")
|
|
376
|
+
], 4 /* STYLE */),
|
|
377
|
+
(_ctx.scroll.x)
|
|
378
|
+
? (_openBlock(), _createElementBlock("div", _hoisted_3, [
|
|
379
|
+
_createElementVNode("div", {
|
|
380
|
+
class: "jetlinks-edit-table-horizontal-scroll-viewport",
|
|
381
|
+
ref_key: "horizontalScrollRef",
|
|
382
|
+
ref: horizontalScrollRef,
|
|
383
|
+
onScroll: onHorizontalScroll
|
|
384
|
+
}, [
|
|
385
|
+
_createElementVNode("div", {
|
|
386
|
+
style: _normalizeStyle({
|
|
387
|
+
width: _ctx.scroll.x + 'px',
|
|
388
|
+
minWidth: _ctx.scroll.x + 'px',
|
|
389
|
+
maxWidth: _ctx.scroll.x + 'px'
|
|
390
|
+
})
|
|
391
|
+
}, null, 4 /* STYLE */)
|
|
392
|
+
], 544 /* NEED_HYDRATION, NEED_PATCH */),
|
|
393
|
+
_hoisted_4
|
|
394
|
+
]))
|
|
395
|
+
: _createCommentVNode("v-if", true)
|
|
396
|
+
])
|
|
397
|
+
], 2 /* CLASS */));
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
export default __sfc_main__;
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
|
|
2
|
+
const op = ops[i];
|
|
3
|
+
const fn = ops[i + 1];
|
|
4
|
+
i += 2;
|
|
5
|
+
if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
|
|
6
|
+
return undefined;
|
|
7
|
+
}
|
|
8
|
+
if (op === 'access' || op === 'optionalAccess') {
|
|
9
|
+
lastAccessLHS = value;
|
|
10
|
+
value = fn(value);
|
|
11
|
+
}
|
|
12
|
+
else if (op === 'call' || op === 'optionalCall') {
|
|
13
|
+
value = fn((...args) => value.call(lastAccessLHS, ...args));
|
|
14
|
+
lastAccessLHS = undefined;
|
|
15
|
+
}
|
|
16
|
+
} return value; }
|
|
17
|
+
/* Analyzed bindings: {
|
|
18
|
+
"serial": "props",
|
|
19
|
+
"style": "props",
|
|
20
|
+
"SearchModal": "setup-maybe-ref",
|
|
21
|
+
"reactive": "setup-const",
|
|
22
|
+
"defineOptions": "setup-const",
|
|
23
|
+
"computed": "setup-const",
|
|
24
|
+
"defaultProps": "setup-maybe-ref",
|
|
25
|
+
"handleColumnFixed": "setup-maybe-ref",
|
|
26
|
+
"useTableTool": "setup-maybe-ref",
|
|
27
|
+
"props": "setup-reactive-const",
|
|
28
|
+
"tableTool": "setup-maybe-ref",
|
|
29
|
+
"columnFixedMap": "setup-ref",
|
|
30
|
+
"searchData": "setup-reactive-const",
|
|
31
|
+
"showFilter": "setup-const"
|
|
32
|
+
} */
|
|
33
|
+
import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
|
34
|
+
const _hoisted_1 = ["id"];
|
|
35
|
+
const _hoisted_2 = { class: "table-header-cell-title" };
|
|
36
|
+
const _hoisted_3 = {
|
|
37
|
+
key: 0,
|
|
38
|
+
class: "header-cell-required"
|
|
39
|
+
};
|
|
40
|
+
const _hoisted_4 = {
|
|
41
|
+
key: 0,
|
|
42
|
+
class: "table-header-cell-trigger"
|
|
43
|
+
};
|
|
44
|
+
const _hoisted_5 = ["id"];
|
|
45
|
+
const _hoisted_6 = { class: "table-header-cell-title" };
|
|
46
|
+
const _hoisted_7 = {
|
|
47
|
+
key: 0,
|
|
48
|
+
class: "header-cell-required"
|
|
49
|
+
};
|
|
50
|
+
const _hoisted_8 = {
|
|
51
|
+
key: 0,
|
|
52
|
+
class: "table-header-cell-trigger"
|
|
53
|
+
};
|
|
54
|
+
const _hoisted_9 = ["id"];
|
|
55
|
+
const _hoisted_10 = { class: "table-header-cell-title" };
|
|
56
|
+
const _hoisted_11 = {
|
|
57
|
+
key: 0,
|
|
58
|
+
class: "header-cell-required"
|
|
59
|
+
};
|
|
60
|
+
const _hoisted_12 = {
|
|
61
|
+
key: 0,
|
|
62
|
+
class: "table-header-cell-trigger"
|
|
63
|
+
};
|
|
64
|
+
import { Search as SearchModal } from './components/Search';
|
|
65
|
+
import { reactive, computed } from 'vue';
|
|
66
|
+
import { defaultProps } from "./props";
|
|
67
|
+
import { handleColumnFixed } from "./utils";
|
|
68
|
+
import { useTableTool } from "./hooks";
|
|
69
|
+
const __sfc_main__ = Object.assign({
|
|
70
|
+
name: 'JEditTableHeader'
|
|
71
|
+
}, {
|
|
72
|
+
props: {
|
|
73
|
+
...defaultProps(),
|
|
74
|
+
serial: {
|
|
75
|
+
type: Boolean,
|
|
76
|
+
default: false
|
|
77
|
+
},
|
|
78
|
+
style: {
|
|
79
|
+
type: Object,
|
|
80
|
+
default: undefined
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
setup(__props) {
|
|
84
|
+
const props = __props;
|
|
85
|
+
const tableTool = useTableTool();
|
|
86
|
+
const columnFixedMap = computed(() => {
|
|
87
|
+
return handleColumnFixed(props.columns);
|
|
88
|
+
});
|
|
89
|
+
const searchData = reactive({
|
|
90
|
+
visible: false,
|
|
91
|
+
key: undefined
|
|
92
|
+
});
|
|
93
|
+
const showFilter = (key) => {
|
|
94
|
+
searchData.visible = true;
|
|
95
|
+
searchData.key = key;
|
|
96
|
+
};
|
|
97
|
+
return (_ctx, _cache) => {
|
|
98
|
+
const _component_AIcon = _resolveComponent("AIcon");
|
|
99
|
+
return (_openBlock(), _createElementBlock(_Fragment, null, [
|
|
100
|
+
_createElementVNode("div", {
|
|
101
|
+
class: "jetlinks-edit-table-header-container",
|
|
102
|
+
style: _normalizeStyle(__props.style)
|
|
103
|
+
}, [
|
|
104
|
+
(columnFixedMap.value.left.keys.length)
|
|
105
|
+
? (_openBlock(), _createElementBlock("div", {
|
|
106
|
+
key: 0,
|
|
107
|
+
class: "jetlinks-header-left",
|
|
108
|
+
style: _normalizeStyle({
|
|
109
|
+
maxWidth: columnFixedMap.value.left.width + 'px',
|
|
110
|
+
minWidth: columnFixedMap.value.left.width + 'px',
|
|
111
|
+
width: columnFixedMap.value.left.width + 'px',
|
|
112
|
+
boxShadow: _unref(tableTool).scrollMap.x ? '0 0 12px 0 rgba(0 ,0, 0, .2)' : ''
|
|
113
|
+
})
|
|
114
|
+
}, [
|
|
115
|
+
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(columnFixedMap.value.left.keys, (item, index) => {
|
|
116
|
+
return (_openBlock(), _createElementBlock("div", {
|
|
117
|
+
class: "jetlinks-edit-table-header-cell",
|
|
118
|
+
id: item.dataIndex,
|
|
119
|
+
style: _normalizeStyle({ width: `${item._width}px` })
|
|
120
|
+
}, [
|
|
121
|
+
_createElementVNode("div", {
|
|
122
|
+
class: _normalizeClass({ 'jetlinks-edit-table-header-cell-box': true, 'header-cell-box-tool': !!(item.sort || item.filter) })
|
|
123
|
+
}, [
|
|
124
|
+
_createElementVNode("div", _hoisted_2, [
|
|
125
|
+
_createElementVNode("span", null, _toDisplayString(item.title), 1 /* TEXT */),
|
|
126
|
+
(_optionalChain([item, 'access', _ => _.form, 'optionalAccess', _2 => _2.required]))
|
|
127
|
+
? (_openBlock(), _createElementBlock("span", _hoisted_3, "*"))
|
|
128
|
+
: _createCommentVNode("v-if", true)
|
|
129
|
+
]),
|
|
130
|
+
(!!(item.filter))
|
|
131
|
+
? (_openBlock(), _createElementBlock("div", _hoisted_4, [
|
|
132
|
+
(item.filter)
|
|
133
|
+
? (_openBlock(), _createBlock(_component_AIcon, {
|
|
134
|
+
key: 0,
|
|
135
|
+
type: "SearchOutlined",
|
|
136
|
+
style: { "color": "rgba(0,0,0, 0.25)" },
|
|
137
|
+
onClick: () => { showFilter(item.filter.key || item.dataIndex); }
|
|
138
|
+
}, null, 8 /* PROPS */, ["onClick"]))
|
|
139
|
+
: _createCommentVNode("v-if", true)
|
|
140
|
+
]))
|
|
141
|
+
: _createCommentVNode("v-if", true)
|
|
142
|
+
], 2 /* CLASS */)
|
|
143
|
+
], 12 /* STYLE, PROPS */, _hoisted_1));
|
|
144
|
+
}), 256 /* UNKEYED_FRAGMENT */))
|
|
145
|
+
], 4 /* STYLE */))
|
|
146
|
+
: _createCommentVNode("v-if", true),
|
|
147
|
+
_createElementVNode("div", {
|
|
148
|
+
class: "jetlinks-header-center",
|
|
149
|
+
style: _normalizeStyle({ webkitTransform: `translate3d(-${_unref(tableTool).scrollMap.x}px, 0, 0)` })
|
|
150
|
+
}, [
|
|
151
|
+
_createElementVNode("div", {
|
|
152
|
+
style: _normalizeStyle({ width: columnFixedMap.value.center.width + 'px' })
|
|
153
|
+
}, [
|
|
154
|
+
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(columnFixedMap.value.center.keys, (item, index) => {
|
|
155
|
+
return (_openBlock(), _createElementBlock("div", {
|
|
156
|
+
class: "jetlinks-edit-table-header-cell",
|
|
157
|
+
id: item.dataIndex,
|
|
158
|
+
style: _normalizeStyle({ width: `${item._width}px` })
|
|
159
|
+
}, [
|
|
160
|
+
_createElementVNode("div", {
|
|
161
|
+
class: _normalizeClass({ 'jetlinks-edit-table-header-cell-box': true, 'header-cell-box-tool': !!(item.sort || item.filter) })
|
|
162
|
+
}, [
|
|
163
|
+
_createElementVNode("div", _hoisted_6, [
|
|
164
|
+
_createElementVNode("span", null, _toDisplayString(item.title), 1 /* TEXT */),
|
|
165
|
+
(_optionalChain([item, 'access', _3 => _3.form, 'optionalAccess', _4 => _4.required]))
|
|
166
|
+
? (_openBlock(), _createElementBlock("span", _hoisted_7, "*"))
|
|
167
|
+
: _createCommentVNode("v-if", true)
|
|
168
|
+
]),
|
|
169
|
+
(!!(item.filter))
|
|
170
|
+
? (_openBlock(), _createElementBlock("div", _hoisted_8, [
|
|
171
|
+
(item.filter)
|
|
172
|
+
? (_openBlock(), _createBlock(_component_AIcon, {
|
|
173
|
+
key: 0,
|
|
174
|
+
type: "SearchOutlined",
|
|
175
|
+
style: { "color": "rgba(0,0,0, 0.25)" },
|
|
176
|
+
onClick: () => { showFilter(item.filter.key || item.dataIndex); }
|
|
177
|
+
}, null, 8 /* PROPS */, ["onClick"]))
|
|
178
|
+
: _createCommentVNode("v-if", true)
|
|
179
|
+
]))
|
|
180
|
+
: _createCommentVNode("v-if", true)
|
|
181
|
+
], 2 /* CLASS */)
|
|
182
|
+
], 12 /* STYLE, PROPS */, _hoisted_5));
|
|
183
|
+
}), 256 /* UNKEYED_FRAGMENT */))
|
|
184
|
+
], 4 /* STYLE */)
|
|
185
|
+
], 4 /* STYLE */),
|
|
186
|
+
(columnFixedMap.value.right.keys.length)
|
|
187
|
+
? (_openBlock(), _createElementBlock("div", {
|
|
188
|
+
key: 1,
|
|
189
|
+
class: "jetlinks-header-right",
|
|
190
|
+
style: _normalizeStyle({
|
|
191
|
+
maxWidth: columnFixedMap.value.right.width + 'px',
|
|
192
|
+
minWidth: columnFixedMap.value.right.width + 'px',
|
|
193
|
+
width: columnFixedMap.value.right.width + 'px',
|
|
194
|
+
boxShadow: _unref(tableTool).scrollMap.down !== 'right' ? '0 0 12px 0 rgba(0 ,0, 0, .2)' : ''
|
|
195
|
+
})
|
|
196
|
+
}, [
|
|
197
|
+
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(columnFixedMap.value.right.keys, (item, index) => {
|
|
198
|
+
return (_openBlock(), _createElementBlock("div", {
|
|
199
|
+
class: "jetlinks-edit-table-header-cell",
|
|
200
|
+
id: item.dataIndex,
|
|
201
|
+
style: _normalizeStyle({ width: `${item._width}px` })
|
|
202
|
+
}, [
|
|
203
|
+
_createElementVNode("div", {
|
|
204
|
+
class: _normalizeClass({ 'jetlinks-edit-table-header-cell-box': true, 'header-cell-box-tool': !!(item.sort || item.filter) })
|
|
205
|
+
}, [
|
|
206
|
+
_createElementVNode("div", _hoisted_10, [
|
|
207
|
+
_createElementVNode("span", null, _toDisplayString(item.title), 1 /* TEXT */),
|
|
208
|
+
(_optionalChain([item, 'access', _5 => _5.form, 'optionalAccess', _6 => _6.required]))
|
|
209
|
+
? (_openBlock(), _createElementBlock("span", _hoisted_11, "*"))
|
|
210
|
+
: _createCommentVNode("v-if", true)
|
|
211
|
+
]),
|
|
212
|
+
(!!(item.filter))
|
|
213
|
+
? (_openBlock(), _createElementBlock("div", _hoisted_12, [
|
|
214
|
+
(item.filter)
|
|
215
|
+
? (_openBlock(), _createBlock(_component_AIcon, {
|
|
216
|
+
key: 0,
|
|
217
|
+
type: "SearchOutlined",
|
|
218
|
+
style: { "color": "rgba(0,0,0, 0.25)" },
|
|
219
|
+
onClick: () => { showFilter(item.filter.key || item.dataIndex); }
|
|
220
|
+
}, null, 8 /* PROPS */, ["onClick"]))
|
|
221
|
+
: _createCommentVNode("v-if", true)
|
|
222
|
+
]))
|
|
223
|
+
: _createCommentVNode("v-if", true)
|
|
224
|
+
], 2 /* CLASS */)
|
|
225
|
+
], 12 /* STYLE, PROPS */, _hoisted_9));
|
|
226
|
+
}), 256 /* UNKEYED_FRAGMENT */))
|
|
227
|
+
], 4 /* STYLE */))
|
|
228
|
+
: _createCommentVNode("v-if", true)
|
|
229
|
+
], 4 /* STYLE */),
|
|
230
|
+
(searchData.visible)
|
|
231
|
+
? (_openBlock(), _createBlock(_unref(SearchModal), {
|
|
232
|
+
key: 0,
|
|
233
|
+
searchKey: searchData.key,
|
|
234
|
+
rowKey: _ctx.rowKey,
|
|
235
|
+
onClose: _cache[0] || (_cache[0] = $event => (searchData.visible = false))
|
|
236
|
+
}, null, 8 /* PROPS */, ["searchKey", "rowKey"]))
|
|
237
|
+
: _createCommentVNode("v-if", true)
|
|
238
|
+
], 64 /* STABLE_FRAGMENT */));
|
|
239
|
+
};
|
|
240
|
+
}
|
|
241
|
+
});
|
|
242
|
+
export default __sfc_main__;
|