hy-dispatch-ui-v3 0.2.34 → 0.2.36
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/components/hyDialog/dialog.vue.mjs +24 -19
- package/es/components/hyForm/style/form.scss +0 -4
- package/es/components/hySearch/cpns/searchItem.vue.mjs +2 -1
- package/es/components/hyTable/cpns/columnSelect.vue.mjs +28 -44
- package/es/components/hyTable/cpns/virtualTable.vue.mjs +3 -3
- package/es/components/hyTable/js/index.mjs +69 -53
- package/es/components/hyTable/js/useAppTable.mjs +20 -6
- package/es/components/hyTable/style/table.scss +9 -4
- package/es/components/hyTable/table.vue.mjs +1 -1
- package/es/style/element/hy-element.scss +17 -0
- package/es/version.mjs +1 -1
- package/lib/components/hyDialog/dialog.vue.js +23 -18
- package/lib/components/hyForm/style/form.scss +0 -4
- package/lib/components/hySearch/cpns/searchItem.vue.js +2 -1
- package/lib/components/hyTable/cpns/columnSelect.vue.js +33 -49
- package/lib/components/hyTable/cpns/virtualTable.vue.js +3 -3
- package/lib/components/hyTable/js/index.js +68 -52
- package/lib/components/hyTable/js/useAppTable.js +19 -5
- package/lib/components/hyTable/style/table.scss +9 -4
- package/lib/components/hyTable/table.vue.js +1 -1
- package/lib/style/element/hy-element.scss +17 -0
- package/lib/version.js +1 -1
- package/package.json +11 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useModel, ref, openBlock, createElementBlock, Fragment, createCommentVNode, createVNode, unref, mergeProps, withCtx, createElementVNode, normalizeClass, renderSlot, createBlock, withModifiers, createTextVNode, toDisplayString, mergeModels, defineComponent } from 'vue';
|
|
1
|
+
import { useModel, ref, computed, openBlock, createElementBlock, Fragment, createCommentVNode, createVNode, unref, mergeProps, withCtx, createElementVNode, normalizeClass, renderSlot, createBlock, withModifiers, createTextVNode, toDisplayString, mergeModels, defineComponent } from 'vue';
|
|
2
2
|
import { ElDialog } from 'element-plus';
|
|
3
3
|
import { useLocale } from '../../hooks/useLocale.mjs';
|
|
4
4
|
import { HyButton } from '../hyButton/index.mjs';
|
|
@@ -23,11 +23,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
23
23
|
type: String,
|
|
24
24
|
default: "default"
|
|
25
25
|
},
|
|
26
|
-
zIndex: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
},
|
|
26
|
+
// zIndex: {
|
|
27
|
+
// type: Number,
|
|
28
|
+
// default: null, // default-默认类型 right-右侧弹窗 fullscreen-全屏
|
|
29
|
+
// },
|
|
31
30
|
top: String,
|
|
32
31
|
// 支持缩小化
|
|
33
32
|
showShrink: { type: Boolean, default: false },
|
|
@@ -132,7 +131,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
132
131
|
onEnd?.();
|
|
133
132
|
}, 750);
|
|
134
133
|
}
|
|
135
|
-
function
|
|
134
|
+
function setDragLevelIndex(initDragLevelIndex) {
|
|
136
135
|
dragLevelIndex.value = initDragLevelIndex;
|
|
137
136
|
if (minimized.value) runAnim();
|
|
138
137
|
minimized.value = false;
|
|
@@ -147,11 +146,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
147
146
|
}
|
|
148
147
|
const dialogTestRef = ref();
|
|
149
148
|
function dialogMousedown(e) {
|
|
150
|
-
if (props.zIndex != null) return;
|
|
151
149
|
emits("onDialogMousedown", e);
|
|
152
150
|
}
|
|
151
|
+
const modalClass = computed(() => {
|
|
152
|
+
const classes = [];
|
|
153
|
+
if (animating.value || minimized.value) {
|
|
154
|
+
classes.push("hy-dialog-app-shrink");
|
|
155
|
+
}
|
|
156
|
+
if (minimized.value) {
|
|
157
|
+
classes.push("hy-dialog-is-minimized");
|
|
158
|
+
}
|
|
159
|
+
return classes.join(" ");
|
|
160
|
+
});
|
|
153
161
|
__expose({
|
|
154
|
-
|
|
162
|
+
setDragLevelIndex,
|
|
155
163
|
hideToWorkspace
|
|
156
164
|
});
|
|
157
165
|
return (_ctx, _cache) => {
|
|
@@ -160,14 +168,15 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
160
168
|
null,
|
|
161
169
|
[
|
|
162
170
|
createCommentVNode(" @mousedown.stop"),
|
|
163
|
-
createCommentVNode(' :z-index="zIndex || dragLevelIndex"'),
|
|
164
|
-
createCommentVNode(" draggable"),
|
|
165
171
|
createCommentVNode(` :align-center="!['right', 'fullscreen'].includes(props.dialogType)"`),
|
|
166
172
|
createCommentVNode(' body-class="h-0 flex-1"'),
|
|
167
173
|
createCommentVNode(' :class="dialogClass"'),
|
|
168
|
-
createCommentVNode(' :overflow="false"'),
|
|
169
|
-
createCommentVNode(' :modal="false"'),
|
|
170
174
|
createVNode(unref(ElDialog), mergeProps({
|
|
175
|
+
"z-index": dragLevelIndex.value,
|
|
176
|
+
draggable: props.showShrink,
|
|
177
|
+
modal: !props.showShrink,
|
|
178
|
+
overflow: !props.showShrink,
|
|
179
|
+
"modal-penetrable": "",
|
|
171
180
|
ref_key: "dialogTestRef",
|
|
172
181
|
ref: dialogTestRef,
|
|
173
182
|
onMousedown: dialogMousedown,
|
|
@@ -175,11 +184,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
175
184
|
"close-on-click-modal": false,
|
|
176
185
|
"close-on-press-escape": false,
|
|
177
186
|
"show-close": false,
|
|
178
|
-
"modal-
|
|
179
|
-
"modal-class": {
|
|
180
|
-
"hy-dialog-app-shrink": animating.value || minimized.value,
|
|
181
|
-
"hy-dialog-is-minimized": minimized.value
|
|
182
|
-
},
|
|
187
|
+
"modal-class": modalClass.value,
|
|
183
188
|
modelValue: visible.value,
|
|
184
189
|
"onUpdate:modelValue": ($event) => visible.value = $event,
|
|
185
190
|
width: props.width,
|
|
@@ -285,7 +290,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
285
290
|
]),
|
|
286
291
|
_: 3
|
|
287
292
|
/* FORWARDED */
|
|
288
|
-
}, 16, ["modal-class", "modelValue", "onUpdate:modelValue", "width", "top"])
|
|
293
|
+
}, 16, ["z-index", "draggable", "modal", "overflow", "modal-class", "modelValue", "onUpdate:modelValue", "width", "top"])
|
|
289
294
|
],
|
|
290
295
|
2112
|
|
291
296
|
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
|
|
@@ -218,7 +218,8 @@ const _sfc_main = {
|
|
|
218
218
|
modelValue: bindValue.value,
|
|
219
219
|
"onUpdate:modelValue": ($event) => bindValue.value = $event
|
|
220
220
|
}, __props.column.attrs, {
|
|
221
|
-
disabled: unref(isDisabled)(props, __props.column)
|
|
221
|
+
disabled: unref(isDisabled)(props, __props.column),
|
|
222
|
+
onChange: onChangeHandler
|
|
222
223
|
}), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
|
|
223
224
|
],
|
|
224
225
|
2112
|
|
@@ -2,7 +2,7 @@ import { useTemplateRef, ref, computed, unref, watch, openBlock, createBlock, wi
|
|
|
2
2
|
import Sortable from 'sortablejs';
|
|
3
3
|
import { ElPopover, ElIcon, ElCheckboxGroup, ElMessage } from 'element-plus';
|
|
4
4
|
import { CircleClose, Warning, Edit } from '@element-plus/icons-vue';
|
|
5
|
-
import { tableColumnHandler } from '../js/index.mjs';
|
|
5
|
+
import { tableColumnShowHandler, tableColumnHandler } from '../js/index.mjs';
|
|
6
6
|
import _sfc_main$1 from './columnSelectItem.vue.mjs';
|
|
7
7
|
import { useLocale } from '../../../hooks/useLocale.mjs';
|
|
8
8
|
import { HyTooltip } from '../../hyTooltip/index.mjs';
|
|
@@ -36,11 +36,11 @@ const _sfc_main = {
|
|
|
36
36
|
const tableEditableColumns = ref([]);
|
|
37
37
|
const showColumnsLength = computed(() => {
|
|
38
38
|
return (tableColumns.value || []).reduce((total, column) => {
|
|
39
|
-
return total + (
|
|
39
|
+
return total + (isShowColumn(column) ? 1 : 0);
|
|
40
40
|
}, 0);
|
|
41
41
|
});
|
|
42
|
-
function
|
|
43
|
-
return
|
|
42
|
+
function isShowColumn(column) {
|
|
43
|
+
return tableColumnShowHandler(column) && column.editable.edit;
|
|
44
44
|
}
|
|
45
45
|
function showPopover() {
|
|
46
46
|
initColumnsInfo(props.columns, props.columnsEditable);
|
|
@@ -53,26 +53,20 @@ const _sfc_main = {
|
|
|
53
53
|
popoverRef.value?.hide?.();
|
|
54
54
|
}
|
|
55
55
|
function initColumnsInfo(columns, columnsEditable) {
|
|
56
|
+
const columnArr = [];
|
|
56
57
|
const checkedArr = [];
|
|
57
|
-
|
|
58
|
-
if (
|
|
59
|
-
|
|
58
|
+
for (const column of columns) {
|
|
59
|
+
if (isShowColumn(column) && !column.editable.lock) {
|
|
60
|
+
columnArr.push({
|
|
60
61
|
...column,
|
|
61
|
-
sortIndex:
|
|
62
|
+
sortIndex: columnsEditable[column.prop].sortIndex
|
|
62
63
|
});
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
for (const key in columnsEditable || {}) {
|
|
67
|
-
const target = columnsEditable[key];
|
|
68
|
-
const { column } = target;
|
|
69
|
-
if (isFilterColumn(column) || column.editable.lock) {
|
|
70
|
-
continue;
|
|
71
|
-
}
|
|
72
|
-
if (target.checked) {
|
|
73
|
-
checkedArr.push(column.prop);
|
|
64
|
+
if (columnsEditable[column.prop].checked) {
|
|
65
|
+
checkedArr.push(column.prop);
|
|
66
|
+
}
|
|
74
67
|
}
|
|
75
68
|
}
|
|
69
|
+
tableEditableColumns.value = columnArr;
|
|
76
70
|
checkedList.value = checkedArr;
|
|
77
71
|
}
|
|
78
72
|
const showClear = ref(true);
|
|
@@ -105,7 +99,7 @@ const _sfc_main = {
|
|
|
105
99
|
}
|
|
106
100
|
const editableObj = tableEditableColumns.value.reduce(
|
|
107
101
|
(editableObj2, column) => {
|
|
108
|
-
editableObj2[column.prop].
|
|
102
|
+
editableObj2[column.prop].sortIndex = column.sortIndex;
|
|
109
103
|
editableObj2[column.prop].checked = checkMap.value.has(column.prop);
|
|
110
104
|
return editableObj2;
|
|
111
105
|
},
|
|
@@ -133,29 +127,19 @@ const _sfc_main = {
|
|
|
133
127
|
const { oldIndex, newIndex } = event;
|
|
134
128
|
if (isEmpty(oldIndex) || isEmpty(newIndex) || oldIndex === newIndex)
|
|
135
129
|
return;
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
tableEditableColumns.value.
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
} else {
|
|
150
|
-
tableEditableColumns.value.splice(
|
|
151
|
-
newIndex,
|
|
152
|
-
1,
|
|
153
|
-
tableEditableColumns.value.splice(
|
|
154
|
-
oldIndex,
|
|
155
|
-
1,
|
|
156
|
-
tableEditableColumns.value[newIndex]
|
|
157
|
-
)[0]
|
|
158
|
-
);
|
|
130
|
+
const minIndex = Math.min(oldIndex, newIndex);
|
|
131
|
+
const maxIndex = Math.max(oldIndex, newIndex);
|
|
132
|
+
const sortList = [];
|
|
133
|
+
for (let i = minIndex; i <= maxIndex; i++) {
|
|
134
|
+
sortList[i] = tableEditableColumns.value[i].sortIndex;
|
|
135
|
+
}
|
|
136
|
+
tableEditableColumns.value.splice(
|
|
137
|
+
newIndex,
|
|
138
|
+
0,
|
|
139
|
+
tableEditableColumns.value.splice(oldIndex, 1)[0]
|
|
140
|
+
);
|
|
141
|
+
for (let i = minIndex; i <= maxIndex; i++) {
|
|
142
|
+
tableEditableColumns.value[i].sortIndex = sortList[i];
|
|
159
143
|
}
|
|
160
144
|
showClear.value = true;
|
|
161
145
|
}
|
|
@@ -250,7 +234,7 @@ const _sfc_main = {
|
|
|
250
234
|
Fragment,
|
|
251
235
|
{ key: index },
|
|
252
236
|
[
|
|
253
|
-
|
|
237
|
+
isShowColumn(item) && item.editable.lock ? (openBlock(), createBlock(_sfc_main$1, {
|
|
254
238
|
key: 0,
|
|
255
239
|
column: item,
|
|
256
240
|
checkMap: checkMap.value
|
|
@@ -308,8 +308,8 @@ const _sfc_main = {
|
|
|
308
308
|
width: __props.width,
|
|
309
309
|
height: __props.height,
|
|
310
310
|
"header-height": __props.showHeader ? 44 : 0,
|
|
311
|
-
"row-height":
|
|
312
|
-
"estimated-row-height":
|
|
311
|
+
"row-height": 64,
|
|
312
|
+
"estimated-row-height": 64,
|
|
313
313
|
"expand-column-key": expandColumn.value?.key,
|
|
314
314
|
fixed: "",
|
|
315
315
|
"row-class": rowClass,
|
|
@@ -435,7 +435,7 @@ const _sfc_main = {
|
|
|
435
435
|
/* STABLE_FRAGMENT */
|
|
436
436
|
)) : column.type === "operator" ? (openBlock(), createElementBlock("div", {
|
|
437
437
|
key: 4,
|
|
438
|
-
class: "w-full flex items-center justify-end gap-
|
|
438
|
+
class: "w-full flex items-center justify-end gap-3 text-main",
|
|
439
439
|
onClick: withModifiers(() => {
|
|
440
440
|
}, ["stop"]),
|
|
441
441
|
onContextmenu: withModifiers(() => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ref, computed, watchEffect, unref, nextTick } from 'vue';
|
|
2
2
|
import { ElLoading } from 'element-plus';
|
|
3
|
-
import { isString, isBoolean, isFunction, isPermission,
|
|
3
|
+
import { isString, isBoolean, isFunction, isPermission, isNumber, isArray } from '../../../utils/is.mjs';
|
|
4
4
|
import { useLocale } from '../../../hooks/useLocale.mjs';
|
|
5
5
|
import { usePermissionMap } from '../../../hooks/usePermissionMap.mjs';
|
|
6
6
|
|
|
@@ -13,67 +13,67 @@ function tableColumnShowHandler(column) {
|
|
|
13
13
|
if (isFunction(show)) return show(column);
|
|
14
14
|
return true;
|
|
15
15
|
}
|
|
16
|
-
function tableColumnsEditableleHandler(columns, columnsEditablele
|
|
17
|
-
const searchLabelSet = /* @__PURE__ */ new Set();
|
|
16
|
+
function tableColumnsEditableleHandler(columns, columnsEditablele) {
|
|
18
17
|
const columnsEditableleObj = {};
|
|
18
|
+
const sortSet = /* @__PURE__ */ new Set();
|
|
19
19
|
for (const column of columns) {
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
if (!columnsEditableleObj[
|
|
24
|
-
columnsEditableleObj[
|
|
20
|
+
const columnsEditableleItem = columnsEditablele[column.prop];
|
|
21
|
+
const { sortIndex } = columnsEditableleItem;
|
|
22
|
+
sortSet.add(sortIndex);
|
|
23
|
+
if (!columnsEditableleObj[sortIndex]) {
|
|
24
|
+
columnsEditableleObj[sortIndex] = [];
|
|
25
25
|
}
|
|
26
|
-
columnsEditableleObj[
|
|
27
|
-
|
|
26
|
+
columnsEditableleObj[sortIndex].push({
|
|
27
|
+
editable: columnsEditableleItem,
|
|
28
28
|
column
|
|
29
29
|
});
|
|
30
|
-
if (column.isSearch) {
|
|
31
|
-
searchLabelSet.add(column.label);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
if (searchArr?.length > 0) {
|
|
35
|
-
searchArr.forEach((item) => {
|
|
36
|
-
searchLabelSet.add(item.label);
|
|
37
|
-
});
|
|
38
30
|
}
|
|
39
|
-
|
|
40
|
-
|
|
31
|
+
Array.from(sortSet.values()).reduce((a, b) => a - b);
|
|
32
|
+
const columnsList = Object.keys(columnsEditableleObj).reduce(
|
|
33
|
+
(columnsList2, key) => {
|
|
41
34
|
const list = columnsEditableleObj[key];
|
|
42
35
|
for (let i = 0; i < list.length; i++) {
|
|
43
36
|
const target = list[i];
|
|
44
|
-
|
|
45
|
-
...target,
|
|
46
|
-
index: columnsList.length + i
|
|
47
|
-
};
|
|
48
|
-
columnsList.push(target.column);
|
|
37
|
+
columnsList2.push(target.column);
|
|
49
38
|
}
|
|
50
|
-
return
|
|
39
|
+
return columnsList2;
|
|
51
40
|
},
|
|
52
|
-
|
|
53
|
-
columnsEditablele: {},
|
|
54
|
-
columnsList: [],
|
|
55
|
-
searchText: Array.from(searchLabelSet.values()).join("\u3001")
|
|
56
|
-
}
|
|
41
|
+
[]
|
|
57
42
|
);
|
|
43
|
+
return {
|
|
44
|
+
columnsList,
|
|
45
|
+
columnsEditablele
|
|
46
|
+
};
|
|
58
47
|
}
|
|
59
|
-
function tableColumnHandler(columns, cacheKey
|
|
60
|
-
const cacheColumnsValue = cacheKey ? JSON.parse(sessionStorage.getItem(cacheKey) || "{}") :
|
|
48
|
+
function tableColumnHandler(columns, cacheKey) {
|
|
49
|
+
const cacheColumnsValue = cacheKey && sessionStorage.getItem(cacheKey) ? JSON.parse(sessionStorage.getItem(cacheKey) || "{}") : null;
|
|
50
|
+
const otherColumns = [];
|
|
51
|
+
let maxIndex = 0;
|
|
61
52
|
const cacheColumnsEditablele = columns.reduce((obj, column) => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
53
|
+
const { editable, prop, type, permission } = column;
|
|
54
|
+
if (cacheColumnsValue && (!cacheColumnsValue[prop] || type === "operator") || permission && !isPermission(permission)) {
|
|
55
|
+
otherColumns.push(column);
|
|
56
|
+
} else {
|
|
57
|
+
let { sortIndex, checked } = cacheColumnsValue?.[prop] || {};
|
|
58
|
+
obj[prop] = {
|
|
59
|
+
prop,
|
|
60
|
+
sortIndex: isNumber(sortIndex) ? sortIndex : editable.index,
|
|
61
|
+
checked: isBoolean(checked) ? checked : editable.checked
|
|
62
|
+
};
|
|
63
|
+
maxIndex = Math.max(maxIndex, obj[prop].sortIndex);
|
|
64
|
+
}
|
|
70
65
|
return obj;
|
|
71
66
|
}, {});
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
67
|
+
otherColumns.forEach((item, index) => {
|
|
68
|
+
const { prop, type } = item;
|
|
69
|
+
maxIndex = maxIndex < item.editable.index ? item.editable.index : maxIndex + index + 1;
|
|
70
|
+
cacheColumnsEditablele[prop] = {
|
|
71
|
+
prop,
|
|
72
|
+
sortIndex: maxIndex,
|
|
73
|
+
checked: type !== "checked"
|
|
74
|
+
};
|
|
75
|
+
});
|
|
76
|
+
return tableColumnsEditableleHandler(columns, cacheColumnsEditablele);
|
|
77
77
|
}
|
|
78
78
|
function operatorShowHandler(operator, scope) {
|
|
79
79
|
if (operator.permission && !isPermission(operator.permission)) {
|
|
@@ -159,17 +159,35 @@ const useAppTableWrapper = (hy) => {
|
|
|
159
159
|
const tableColumnsList = computed(() => {
|
|
160
160
|
return tableColumns.value.filter((column) => tableColumnShowHandler(column));
|
|
161
161
|
});
|
|
162
|
-
const searchPlaceholder =
|
|
162
|
+
const searchPlaceholder = computed(() => {
|
|
163
|
+
const searchLabelSet = tableColumnsList.value.reduce(
|
|
164
|
+
(searchLabelSet2, column) => {
|
|
165
|
+
if (column.isSearch) {
|
|
166
|
+
searchLabelSet2.add(column.label);
|
|
167
|
+
}
|
|
168
|
+
return searchLabelSet2;
|
|
169
|
+
},
|
|
170
|
+
/* @__PURE__ */ new Set()
|
|
171
|
+
);
|
|
172
|
+
if (props.searchArr?.length > 0) {
|
|
173
|
+
props.searchArr.forEach((item) => {
|
|
174
|
+
searchLabelSet.add(item.label);
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
return Array.from(searchLabelSet.values());
|
|
178
|
+
});
|
|
163
179
|
function getRowKey(row = {}) {
|
|
164
180
|
if (isString(props.rowKey)) return row[props.rowKey];
|
|
165
181
|
if (isFunction(props.rowKey)) return props.rowKey(row);
|
|
166
182
|
return row.id;
|
|
167
183
|
}
|
|
168
184
|
function onTableColumnsSelectHandler(value) {
|
|
169
|
-
const {
|
|
185
|
+
const { columnsList, searchText } = tableColumnsEditableleHandler(
|
|
186
|
+
props.tableColumns,
|
|
187
|
+
value
|
|
188
|
+
);
|
|
170
189
|
tableColumns.value = columnsList;
|
|
171
|
-
tableColumnsEditablele.value =
|
|
172
|
-
searchPlaceholder.value = searchText;
|
|
190
|
+
tableColumnsEditablele.value = value;
|
|
173
191
|
sessionStorage.setItem(CACHE_COLUMNS_KEY, JSON.stringify(value));
|
|
174
192
|
}
|
|
175
193
|
function doLayout() {
|
|
@@ -335,12 +353,10 @@ const useAppTableWrapper = (hy) => {
|
|
|
335
353
|
watchEffect(() => {
|
|
336
354
|
const { columnsList, columnsEditablele, searchText } = tableColumnHandler(
|
|
337
355
|
props.tableColumns,
|
|
338
|
-
CACHE_COLUMNS_KEY
|
|
339
|
-
props.searchArr
|
|
356
|
+
CACHE_COLUMNS_KEY
|
|
340
357
|
);
|
|
341
358
|
tableColumns.value = columnsList;
|
|
342
359
|
tableColumnsEditablele.value = columnsEditablele;
|
|
343
|
-
searchPlaceholder.value = searchText;
|
|
344
360
|
});
|
|
345
361
|
return {
|
|
346
362
|
// 表格配置项
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { toRef } from 'vue';
|
|
2
|
-
import { isEmpty, isBoolean, isString, isObject } from '../../../utils/is.mjs';
|
|
2
|
+
import { isEmpty, isBoolean, isString, isObject, isPermission } from '../../../utils/is.mjs';
|
|
3
3
|
import { useAppSearch } from '../../hySearch/js/useAppSearch.mjs';
|
|
4
4
|
import { useLocale } from '../../../hooks/useLocale.mjs';
|
|
5
5
|
|
|
@@ -13,7 +13,7 @@ function getColumnDefaultConfig(column) {
|
|
|
13
13
|
};
|
|
14
14
|
case "index":
|
|
15
15
|
return {
|
|
16
|
-
|
|
16
|
+
prop: `${column.type}_prop`,
|
|
17
17
|
label: t("table.index")
|
|
18
18
|
};
|
|
19
19
|
case "expand":
|
|
@@ -34,7 +34,21 @@ function getColumnDefaultWidth(column) {
|
|
|
34
34
|
if (column.type === "expand" && column.expandType === "expand") return 40;
|
|
35
35
|
if (column.type === "selection") return 40;
|
|
36
36
|
if (column.type === "index") return 80;
|
|
37
|
-
if (column.type === "operator")
|
|
37
|
+
if (column.type === "operator") {
|
|
38
|
+
const length = (column.operator || []).reduce((total, item) => {
|
|
39
|
+
if (!item.permission && isPermission(item.permission)) {
|
|
40
|
+
total++;
|
|
41
|
+
}
|
|
42
|
+
return total;
|
|
43
|
+
}, 0);
|
|
44
|
+
if (length >= 3) {
|
|
45
|
+
return 168;
|
|
46
|
+
} else if (length === 2) {
|
|
47
|
+
return 168 - 52;
|
|
48
|
+
} else {
|
|
49
|
+
return 168 - 52 * 2;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
38
52
|
return;
|
|
39
53
|
}
|
|
40
54
|
function generateColumnItem(column) {
|
|
@@ -58,13 +72,13 @@ function getColumnEditable(column, index) {
|
|
|
58
72
|
};
|
|
59
73
|
}
|
|
60
74
|
return {
|
|
61
|
-
index: type === "operator" ? 1e3 : index,
|
|
62
75
|
lock: false,
|
|
63
76
|
edit: !type || type === "default",
|
|
64
77
|
checked: !type || type !== "default" || type === "operator",
|
|
65
78
|
desc: void 0,
|
|
66
79
|
examples: [],
|
|
67
|
-
...editable || {}
|
|
80
|
+
...editable || {},
|
|
81
|
+
index: type === "operator" ? 1e3 : index
|
|
68
82
|
};
|
|
69
83
|
}
|
|
70
84
|
function getColumnSort(column) {
|
|
@@ -88,7 +102,7 @@ function getColumnSort(column) {
|
|
|
88
102
|
return sort;
|
|
89
103
|
}
|
|
90
104
|
const useAppTable = (config = {}) => {
|
|
91
|
-
const { columns, filterModel, filterColumns } = config || {};
|
|
105
|
+
const { columns, filterModel = {}, filterColumns } = config || {};
|
|
92
106
|
const tableColumns = [];
|
|
93
107
|
let defaultSortInfo = null;
|
|
94
108
|
try {
|
|
@@ -6,21 +6,26 @@
|
|
|
6
6
|
color: rgb(var(--hy-main));
|
|
7
7
|
font-size: 14px;
|
|
8
8
|
background-color: rgb(var(--hy-background));
|
|
9
|
-
.el-table {
|
|
9
|
+
.hy-el-table {
|
|
10
10
|
&.hideSelect {
|
|
11
11
|
/* 禁用全选 */
|
|
12
|
-
.el-table__header-wrapper .el-checkbox {
|
|
12
|
+
.hy-el-table__header-wrapper .hy-el-checkbox {
|
|
13
13
|
display: none !important;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
.el-table__cell .cell {
|
|
16
|
+
.hy-el-table__cell .cell {
|
|
17
17
|
display: flex;
|
|
18
18
|
align-items: center;
|
|
19
|
-
.el-table__expand-icon {
|
|
19
|
+
.hy-el-table__expand-icon {
|
|
20
20
|
flex-shrink: 0;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
+
.hy-el-table-v2 {
|
|
25
|
+
.hy-el-table-v2__row-cell {
|
|
26
|
+
padding: 8px 12px;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
24
29
|
.hy-table-search {
|
|
25
30
|
width: 160px;
|
|
26
31
|
.hy-el-input__inner::placeholder {
|
|
@@ -482,7 +482,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
482
482
|
default: withCtx((scope) => [
|
|
483
483
|
column?.slot ? renderSlot(_ctx.$slots, column?.slot, mergeProps({ ref_for: true }, scope), void 0, void 0, 0) : column.type === "operator" ? (openBlock(), createElementBlock("div", {
|
|
484
484
|
key: 1,
|
|
485
|
-
class: "flex items-center justify-end gap-
|
|
485
|
+
class: "w-full flex items-center justify-end gap-3 text-main"
|
|
486
486
|
}, [
|
|
487
487
|
(openBlock(true), createElementBlock(
|
|
488
488
|
Fragment,
|
|
@@ -216,6 +216,16 @@
|
|
|
216
216
|
white-space: nowrap;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
+
.hy-el-textarea__clear {
|
|
220
|
+
position: absolute;
|
|
221
|
+
right: 11px;
|
|
222
|
+
top: 15px;
|
|
223
|
+
transform: translateY(-50%);
|
|
224
|
+
color: var(--el-input-icon-color);
|
|
225
|
+
font-size: 14px;
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
}
|
|
228
|
+
|
|
219
229
|
// 日期选择器
|
|
220
230
|
.hy-el-popper.hy-el-tooltip.hy-el-picker__popper {
|
|
221
231
|
--hy-el-border-color-light: rgba(var(--hy-auxiliary), 1);
|
|
@@ -921,6 +931,12 @@
|
|
|
921
931
|
position: relative;
|
|
922
932
|
height: 38px;
|
|
923
933
|
padding-left: 20px;
|
|
934
|
+
|
|
935
|
+
.hy-el-collapse-item__title {
|
|
936
|
+
overflow: hidden;
|
|
937
|
+
text-overflow: ellipsis;
|
|
938
|
+
white-space: nowrap;
|
|
939
|
+
}
|
|
924
940
|
}
|
|
925
941
|
|
|
926
942
|
.hy-el-collapse-item__wrap {
|
|
@@ -954,6 +970,7 @@
|
|
|
954
970
|
td.is-selected {
|
|
955
971
|
box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
|
|
956
972
|
background: rgba(var(--hy-background-2), 1);
|
|
973
|
+
|
|
957
974
|
.hy-el-calendar-day {
|
|
958
975
|
border: 1px solid rgba(var(--hy-theme), 1);
|
|
959
976
|
}
|
package/es/version.mjs
CHANGED
|
@@ -27,11 +27,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
27
27
|
type: String,
|
|
28
28
|
default: "default"
|
|
29
29
|
},
|
|
30
|
-
zIndex: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
30
|
+
// zIndex: {
|
|
31
|
+
// type: Number,
|
|
32
|
+
// default: null, // default-默认类型 right-右侧弹窗 fullscreen-全屏
|
|
33
|
+
// },
|
|
35
34
|
top: String,
|
|
36
35
|
// 支持缩小化
|
|
37
36
|
showShrink: { type: Boolean, default: false },
|
|
@@ -136,7 +135,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
136
135
|
onEnd?.();
|
|
137
136
|
}, 750);
|
|
138
137
|
}
|
|
139
|
-
function
|
|
138
|
+
function setDragLevelIndex(initDragLevelIndex) {
|
|
140
139
|
dragLevelIndex.value = initDragLevelIndex;
|
|
141
140
|
if (minimized.value) runAnim();
|
|
142
141
|
minimized.value = false;
|
|
@@ -151,11 +150,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
151
150
|
}
|
|
152
151
|
const dialogTestRef = vue.ref();
|
|
153
152
|
function dialogMousedown(e) {
|
|
154
|
-
if (props.zIndex != null) return;
|
|
155
153
|
emits("onDialogMousedown", e);
|
|
156
154
|
}
|
|
155
|
+
const modalClass = vue.computed(() => {
|
|
156
|
+
const classes = [];
|
|
157
|
+
if (animating.value || minimized.value) {
|
|
158
|
+
classes.push("hy-dialog-app-shrink");
|
|
159
|
+
}
|
|
160
|
+
if (minimized.value) {
|
|
161
|
+
classes.push("hy-dialog-is-minimized");
|
|
162
|
+
}
|
|
163
|
+
return classes.join(" ");
|
|
164
|
+
});
|
|
157
165
|
__expose({
|
|
158
|
-
|
|
166
|
+
setDragLevelIndex,
|
|
159
167
|
hideToWorkspace
|
|
160
168
|
});
|
|
161
169
|
return (_ctx, _cache) => {
|
|
@@ -164,14 +172,15 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
164
172
|
null,
|
|
165
173
|
[
|
|
166
174
|
vue.createCommentVNode(" @mousedown.stop"),
|
|
167
|
-
vue.createCommentVNode(' :z-index="zIndex || dragLevelIndex"'),
|
|
168
|
-
vue.createCommentVNode(" draggable"),
|
|
169
175
|
vue.createCommentVNode(` :align-center="!['right', 'fullscreen'].includes(props.dialogType)"`),
|
|
170
176
|
vue.createCommentVNode(' body-class="h-0 flex-1"'),
|
|
171
177
|
vue.createCommentVNode(' :class="dialogClass"'),
|
|
172
|
-
vue.createCommentVNode(' :overflow="false"'),
|
|
173
|
-
vue.createCommentVNode(' :modal="false"'),
|
|
174
178
|
vue.createVNode(vue.unref(elementPlus.ElDialog), vue.mergeProps({
|
|
179
|
+
"z-index": dragLevelIndex.value,
|
|
180
|
+
draggable: props.showShrink,
|
|
181
|
+
modal: !props.showShrink,
|
|
182
|
+
overflow: !props.showShrink,
|
|
183
|
+
"modal-penetrable": "",
|
|
175
184
|
ref_key: "dialogTestRef",
|
|
176
185
|
ref: dialogTestRef,
|
|
177
186
|
onMousedown: dialogMousedown,
|
|
@@ -179,11 +188,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
179
188
|
"close-on-click-modal": false,
|
|
180
189
|
"close-on-press-escape": false,
|
|
181
190
|
"show-close": false,
|
|
182
|
-
"modal-
|
|
183
|
-
"modal-class": {
|
|
184
|
-
"hy-dialog-app-shrink": animating.value || minimized.value,
|
|
185
|
-
"hy-dialog-is-minimized": minimized.value
|
|
186
|
-
},
|
|
191
|
+
"modal-class": modalClass.value,
|
|
187
192
|
modelValue: visible.value,
|
|
188
193
|
"onUpdate:modelValue": ($event) => visible.value = $event,
|
|
189
194
|
width: props.width,
|
|
@@ -289,7 +294,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
289
294
|
]),
|
|
290
295
|
_: 3
|
|
291
296
|
/* FORWARDED */
|
|
292
|
-
}, 16, ["modal-class", "modelValue", "onUpdate:modelValue", "width", "top"])
|
|
297
|
+
}, 16, ["z-index", "draggable", "modal", "overflow", "modal-class", "modelValue", "onUpdate:modelValue", "width", "top"])
|
|
293
298
|
],
|
|
294
299
|
2112
|
|
295
300
|
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
|
|
@@ -222,7 +222,8 @@ const _sfc_main = {
|
|
|
222
222
|
modelValue: bindValue.value,
|
|
223
223
|
"onUpdate:modelValue": ($event) => bindValue.value = $event
|
|
224
224
|
}, __props.column.attrs, {
|
|
225
|
-
disabled: vue.unref(index.isDisabled)(props, __props.column)
|
|
225
|
+
disabled: vue.unref(index.isDisabled)(props, __props.column),
|
|
226
|
+
onChange: onChangeHandler
|
|
226
227
|
}), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"])
|
|
227
228
|
],
|
|
228
229
|
2112
|
|
@@ -6,11 +6,11 @@ var vue = require('vue');
|
|
|
6
6
|
var Sortable = require('sortablejs');
|
|
7
7
|
var elementPlus = require('element-plus');
|
|
8
8
|
var iconsVue = require('@element-plus/icons-vue');
|
|
9
|
-
var index
|
|
9
|
+
var index = require('../js/index.js');
|
|
10
10
|
var columnSelectItem = require('./columnSelectItem.vue.js');
|
|
11
11
|
var useLocale = require('../../../hooks/useLocale.js');
|
|
12
|
-
var index = require('../../hyTooltip/index.js');
|
|
13
|
-
var index$
|
|
12
|
+
var index$1 = require('../../hyTooltip/index.js');
|
|
13
|
+
var index$2 = require('../../hyButton/index.js');
|
|
14
14
|
var is = require('../../../utils/is.js');
|
|
15
15
|
|
|
16
16
|
const _sfc_main = {
|
|
@@ -40,11 +40,11 @@ const _sfc_main = {
|
|
|
40
40
|
const tableEditableColumns = vue.ref([]);
|
|
41
41
|
const showColumnsLength = vue.computed(() => {
|
|
42
42
|
return (tableColumns.value || []).reduce((total, column) => {
|
|
43
|
-
return total + (
|
|
43
|
+
return total + (isShowColumn(column) ? 1 : 0);
|
|
44
44
|
}, 0);
|
|
45
45
|
});
|
|
46
|
-
function
|
|
47
|
-
return
|
|
46
|
+
function isShowColumn(column) {
|
|
47
|
+
return index.tableColumnShowHandler(column) && column.editable.edit;
|
|
48
48
|
}
|
|
49
49
|
function showPopover() {
|
|
50
50
|
initColumnsInfo(props.columns, props.columnsEditable);
|
|
@@ -57,26 +57,20 @@ const _sfc_main = {
|
|
|
57
57
|
popoverRef.value?.hide?.();
|
|
58
58
|
}
|
|
59
59
|
function initColumnsInfo(columns, columnsEditable) {
|
|
60
|
+
const columnArr = [];
|
|
60
61
|
const checkedArr = [];
|
|
61
|
-
|
|
62
|
-
if (
|
|
63
|
-
|
|
62
|
+
for (const column of columns) {
|
|
63
|
+
if (isShowColumn(column) && !column.editable.lock) {
|
|
64
|
+
columnArr.push({
|
|
64
65
|
...column,
|
|
65
|
-
sortIndex:
|
|
66
|
+
sortIndex: columnsEditable[column.prop].sortIndex
|
|
66
67
|
});
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
for (const key in columnsEditable || {}) {
|
|
71
|
-
const target = columnsEditable[key];
|
|
72
|
-
const { column } = target;
|
|
73
|
-
if (isFilterColumn(column) || column.editable.lock) {
|
|
74
|
-
continue;
|
|
75
|
-
}
|
|
76
|
-
if (target.checked) {
|
|
77
|
-
checkedArr.push(column.prop);
|
|
68
|
+
if (columnsEditable[column.prop].checked) {
|
|
69
|
+
checkedArr.push(column.prop);
|
|
70
|
+
}
|
|
78
71
|
}
|
|
79
72
|
}
|
|
73
|
+
tableEditableColumns.value = columnArr;
|
|
80
74
|
checkedList.value = checkedArr;
|
|
81
75
|
}
|
|
82
76
|
const showClear = vue.ref(true);
|
|
@@ -109,7 +103,7 @@ const _sfc_main = {
|
|
|
109
103
|
}
|
|
110
104
|
const editableObj = tableEditableColumns.value.reduce(
|
|
111
105
|
(editableObj2, column) => {
|
|
112
|
-
editableObj2[column.prop].
|
|
106
|
+
editableObj2[column.prop].sortIndex = column.sortIndex;
|
|
113
107
|
editableObj2[column.prop].checked = checkMap.value.has(column.prop);
|
|
114
108
|
return editableObj2;
|
|
115
109
|
},
|
|
@@ -119,7 +113,7 @@ const _sfc_main = {
|
|
|
119
113
|
closePopover();
|
|
120
114
|
}
|
|
121
115
|
function onClearHandler() {
|
|
122
|
-
const { columnsList, columnsEditablele } = index
|
|
116
|
+
const { columnsList, columnsEditablele } = index.tableColumnHandler(
|
|
123
117
|
props.originColumns
|
|
124
118
|
);
|
|
125
119
|
initColumnsInfo(columnsList, columnsEditablele);
|
|
@@ -137,29 +131,19 @@ const _sfc_main = {
|
|
|
137
131
|
const { oldIndex, newIndex } = event;
|
|
138
132
|
if (is.isEmpty(oldIndex) || is.isEmpty(newIndex) || oldIndex === newIndex)
|
|
139
133
|
return;
|
|
140
|
-
const
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
tableEditableColumns.value.
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
} else {
|
|
154
|
-
tableEditableColumns.value.splice(
|
|
155
|
-
newIndex,
|
|
156
|
-
1,
|
|
157
|
-
tableEditableColumns.value.splice(
|
|
158
|
-
oldIndex,
|
|
159
|
-
1,
|
|
160
|
-
tableEditableColumns.value[newIndex]
|
|
161
|
-
)[0]
|
|
162
|
-
);
|
|
134
|
+
const minIndex = Math.min(oldIndex, newIndex);
|
|
135
|
+
const maxIndex = Math.max(oldIndex, newIndex);
|
|
136
|
+
const sortList = [];
|
|
137
|
+
for (let i = minIndex; i <= maxIndex; i++) {
|
|
138
|
+
sortList[i] = tableEditableColumns.value[i].sortIndex;
|
|
139
|
+
}
|
|
140
|
+
tableEditableColumns.value.splice(
|
|
141
|
+
newIndex,
|
|
142
|
+
0,
|
|
143
|
+
tableEditableColumns.value.splice(oldIndex, 1)[0]
|
|
144
|
+
);
|
|
145
|
+
for (let i = minIndex; i <= maxIndex; i++) {
|
|
146
|
+
tableEditableColumns.value[i].sortIndex = sortList[i];
|
|
163
147
|
}
|
|
164
148
|
showClear.value = true;
|
|
165
149
|
}
|
|
@@ -254,7 +238,7 @@ const _sfc_main = {
|
|
|
254
238
|
vue.Fragment,
|
|
255
239
|
{ key: index },
|
|
256
240
|
[
|
|
257
|
-
|
|
241
|
+
isShowColumn(item) && item.editable.lock ? (vue.openBlock(), vue.createBlock(columnSelectItem.default, {
|
|
258
242
|
key: 0,
|
|
259
243
|
column: item,
|
|
260
244
|
checkMap: checkMap.value
|
|
@@ -336,13 +320,13 @@ const _sfc_main = {
|
|
|
336
320
|
_: 1
|
|
337
321
|
/* STABLE */
|
|
338
322
|
}),
|
|
339
|
-
checkedList.value?.length >= 8 ? (vue.openBlock(), vue.createBlock(vue.unref(index.HyTooltip), {
|
|
323
|
+
checkedList.value?.length >= 8 ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.HyTooltip), {
|
|
340
324
|
key: 0,
|
|
341
325
|
"is-always": false,
|
|
342
326
|
content: vue.unref(t)("table.tooManyFieldsWillAffectReadability"),
|
|
343
327
|
class: "mr-2 text-auxiliary"
|
|
344
328
|
}, null, 8, ["content"])) : vue.createCommentVNode("v-if", true),
|
|
345
|
-
vue.createVNode(vue.unref(index$
|
|
329
|
+
vue.createVNode(vue.unref(index$2.HyButton), {
|
|
346
330
|
type: "primary",
|
|
347
331
|
size: "small",
|
|
348
332
|
onClick: onConfirmHandler
|
|
@@ -312,8 +312,8 @@ const _sfc_main = {
|
|
|
312
312
|
width: __props.width,
|
|
313
313
|
height: __props.height,
|
|
314
314
|
"header-height": __props.showHeader ? 44 : 0,
|
|
315
|
-
"row-height":
|
|
316
|
-
"estimated-row-height":
|
|
315
|
+
"row-height": 64,
|
|
316
|
+
"estimated-row-height": 64,
|
|
317
317
|
"expand-column-key": expandColumn.value?.key,
|
|
318
318
|
fixed: "",
|
|
319
319
|
"row-class": rowClass,
|
|
@@ -439,7 +439,7 @@ const _sfc_main = {
|
|
|
439
439
|
/* STABLE_FRAGMENT */
|
|
440
440
|
)) : column.type === "operator" ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
441
441
|
key: 4,
|
|
442
|
-
class: "w-full flex items-center justify-end gap-
|
|
442
|
+
class: "w-full flex items-center justify-end gap-3 text-main",
|
|
443
443
|
onClick: vue.withModifiers(() => {
|
|
444
444
|
}, ["stop"]),
|
|
445
445
|
onContextmenu: vue.withModifiers(() => {
|
|
@@ -15,67 +15,67 @@ function tableColumnShowHandler(column) {
|
|
|
15
15
|
if (is.isFunction(show)) return show(column);
|
|
16
16
|
return true;
|
|
17
17
|
}
|
|
18
|
-
function tableColumnsEditableleHandler(columns, columnsEditablele
|
|
19
|
-
const searchLabelSet = /* @__PURE__ */ new Set();
|
|
18
|
+
function tableColumnsEditableleHandler(columns, columnsEditablele) {
|
|
20
19
|
const columnsEditableleObj = {};
|
|
20
|
+
const sortSet = /* @__PURE__ */ new Set();
|
|
21
21
|
for (const column of columns) {
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
if (!columnsEditableleObj[
|
|
26
|
-
columnsEditableleObj[
|
|
22
|
+
const columnsEditableleItem = columnsEditablele[column.prop];
|
|
23
|
+
const { sortIndex } = columnsEditableleItem;
|
|
24
|
+
sortSet.add(sortIndex);
|
|
25
|
+
if (!columnsEditableleObj[sortIndex]) {
|
|
26
|
+
columnsEditableleObj[sortIndex] = [];
|
|
27
27
|
}
|
|
28
|
-
columnsEditableleObj[
|
|
29
|
-
|
|
28
|
+
columnsEditableleObj[sortIndex].push({
|
|
29
|
+
editable: columnsEditableleItem,
|
|
30
30
|
column
|
|
31
31
|
});
|
|
32
|
-
if (column.isSearch) {
|
|
33
|
-
searchLabelSet.add(column.label);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
if (searchArr?.length > 0) {
|
|
37
|
-
searchArr.forEach((item) => {
|
|
38
|
-
searchLabelSet.add(item.label);
|
|
39
|
-
});
|
|
40
32
|
}
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
Array.from(sortSet.values()).reduce((a, b) => a - b);
|
|
34
|
+
const columnsList = Object.keys(columnsEditableleObj).reduce(
|
|
35
|
+
(columnsList2, key) => {
|
|
43
36
|
const list = columnsEditableleObj[key];
|
|
44
37
|
for (let i = 0; i < list.length; i++) {
|
|
45
38
|
const target = list[i];
|
|
46
|
-
|
|
47
|
-
...target,
|
|
48
|
-
index: columnsList.length + i
|
|
49
|
-
};
|
|
50
|
-
columnsList.push(target.column);
|
|
39
|
+
columnsList2.push(target.column);
|
|
51
40
|
}
|
|
52
|
-
return
|
|
41
|
+
return columnsList2;
|
|
53
42
|
},
|
|
54
|
-
|
|
55
|
-
columnsEditablele: {},
|
|
56
|
-
columnsList: [],
|
|
57
|
-
searchText: Array.from(searchLabelSet.values()).join("\u3001")
|
|
58
|
-
}
|
|
43
|
+
[]
|
|
59
44
|
);
|
|
45
|
+
return {
|
|
46
|
+
columnsList,
|
|
47
|
+
columnsEditablele
|
|
48
|
+
};
|
|
60
49
|
}
|
|
61
|
-
function tableColumnHandler(columns, cacheKey
|
|
62
|
-
const cacheColumnsValue = cacheKey ? JSON.parse(sessionStorage.getItem(cacheKey) || "{}") :
|
|
50
|
+
function tableColumnHandler(columns, cacheKey) {
|
|
51
|
+
const cacheColumnsValue = cacheKey && sessionStorage.getItem(cacheKey) ? JSON.parse(sessionStorage.getItem(cacheKey) || "{}") : null;
|
|
52
|
+
const otherColumns = [];
|
|
53
|
+
let maxIndex = 0;
|
|
63
54
|
const cacheColumnsEditablele = columns.reduce((obj, column) => {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
55
|
+
const { editable, prop, type, permission } = column;
|
|
56
|
+
if (cacheColumnsValue && (!cacheColumnsValue[prop] || type === "operator") || permission && !is.isPermission(permission)) {
|
|
57
|
+
otherColumns.push(column);
|
|
58
|
+
} else {
|
|
59
|
+
let { sortIndex, checked } = cacheColumnsValue?.[prop] || {};
|
|
60
|
+
obj[prop] = {
|
|
61
|
+
prop,
|
|
62
|
+
sortIndex: is.isNumber(sortIndex) ? sortIndex : editable.index,
|
|
63
|
+
checked: is.isBoolean(checked) ? checked : editable.checked
|
|
64
|
+
};
|
|
65
|
+
maxIndex = Math.max(maxIndex, obj[prop].sortIndex);
|
|
66
|
+
}
|
|
72
67
|
return obj;
|
|
73
68
|
}, {});
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
69
|
+
otherColumns.forEach((item, index) => {
|
|
70
|
+
const { prop, type } = item;
|
|
71
|
+
maxIndex = maxIndex < item.editable.index ? item.editable.index : maxIndex + index + 1;
|
|
72
|
+
cacheColumnsEditablele[prop] = {
|
|
73
|
+
prop,
|
|
74
|
+
sortIndex: maxIndex,
|
|
75
|
+
checked: type !== "checked"
|
|
76
|
+
};
|
|
77
|
+
});
|
|
78
|
+
return tableColumnsEditableleHandler(columns, cacheColumnsEditablele);
|
|
79
79
|
}
|
|
80
80
|
function operatorShowHandler(operator, scope) {
|
|
81
81
|
if (operator.permission && !is.isPermission(operator.permission)) {
|
|
@@ -161,17 +161,35 @@ const useAppTableWrapper = (hy) => {
|
|
|
161
161
|
const tableColumnsList = vue.computed(() => {
|
|
162
162
|
return tableColumns.value.filter((column) => tableColumnShowHandler(column));
|
|
163
163
|
});
|
|
164
|
-
const searchPlaceholder = vue.
|
|
164
|
+
const searchPlaceholder = vue.computed(() => {
|
|
165
|
+
const searchLabelSet = tableColumnsList.value.reduce(
|
|
166
|
+
(searchLabelSet2, column) => {
|
|
167
|
+
if (column.isSearch) {
|
|
168
|
+
searchLabelSet2.add(column.label);
|
|
169
|
+
}
|
|
170
|
+
return searchLabelSet2;
|
|
171
|
+
},
|
|
172
|
+
/* @__PURE__ */ new Set()
|
|
173
|
+
);
|
|
174
|
+
if (props.searchArr?.length > 0) {
|
|
175
|
+
props.searchArr.forEach((item) => {
|
|
176
|
+
searchLabelSet.add(item.label);
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
return Array.from(searchLabelSet.values());
|
|
180
|
+
});
|
|
165
181
|
function getRowKey(row = {}) {
|
|
166
182
|
if (is.isString(props.rowKey)) return row[props.rowKey];
|
|
167
183
|
if (is.isFunction(props.rowKey)) return props.rowKey(row);
|
|
168
184
|
return row.id;
|
|
169
185
|
}
|
|
170
186
|
function onTableColumnsSelectHandler(value) {
|
|
171
|
-
const {
|
|
187
|
+
const { columnsList, searchText } = tableColumnsEditableleHandler(
|
|
188
|
+
props.tableColumns,
|
|
189
|
+
value
|
|
190
|
+
);
|
|
172
191
|
tableColumns.value = columnsList;
|
|
173
|
-
tableColumnsEditablele.value =
|
|
174
|
-
searchPlaceholder.value = searchText;
|
|
192
|
+
tableColumnsEditablele.value = value;
|
|
175
193
|
sessionStorage.setItem(CACHE_COLUMNS_KEY, JSON.stringify(value));
|
|
176
194
|
}
|
|
177
195
|
function doLayout() {
|
|
@@ -337,12 +355,10 @@ const useAppTableWrapper = (hy) => {
|
|
|
337
355
|
vue.watchEffect(() => {
|
|
338
356
|
const { columnsList, columnsEditablele, searchText } = tableColumnHandler(
|
|
339
357
|
props.tableColumns,
|
|
340
|
-
CACHE_COLUMNS_KEY
|
|
341
|
-
props.searchArr
|
|
358
|
+
CACHE_COLUMNS_KEY
|
|
342
359
|
);
|
|
343
360
|
tableColumns.value = columnsList;
|
|
344
361
|
tableColumnsEditablele.value = columnsEditablele;
|
|
345
|
-
searchPlaceholder.value = searchText;
|
|
346
362
|
});
|
|
347
363
|
return {
|
|
348
364
|
// 表格配置项
|
|
@@ -15,7 +15,7 @@ function getColumnDefaultConfig(column) {
|
|
|
15
15
|
};
|
|
16
16
|
case "index":
|
|
17
17
|
return {
|
|
18
|
-
|
|
18
|
+
prop: `${column.type}_prop`,
|
|
19
19
|
label: t("table.index")
|
|
20
20
|
};
|
|
21
21
|
case "expand":
|
|
@@ -36,7 +36,21 @@ function getColumnDefaultWidth(column) {
|
|
|
36
36
|
if (column.type === "expand" && column.expandType === "expand") return 40;
|
|
37
37
|
if (column.type === "selection") return 40;
|
|
38
38
|
if (column.type === "index") return 80;
|
|
39
|
-
if (column.type === "operator")
|
|
39
|
+
if (column.type === "operator") {
|
|
40
|
+
const length = (column.operator || []).reduce((total, item) => {
|
|
41
|
+
if (!item.permission && is.isPermission(item.permission)) {
|
|
42
|
+
total++;
|
|
43
|
+
}
|
|
44
|
+
return total;
|
|
45
|
+
}, 0);
|
|
46
|
+
if (length >= 3) {
|
|
47
|
+
return 168;
|
|
48
|
+
} else if (length === 2) {
|
|
49
|
+
return 168 - 52;
|
|
50
|
+
} else {
|
|
51
|
+
return 168 - 52 * 2;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
40
54
|
return;
|
|
41
55
|
}
|
|
42
56
|
function generateColumnItem(column) {
|
|
@@ -60,13 +74,13 @@ function getColumnEditable(column, index) {
|
|
|
60
74
|
};
|
|
61
75
|
}
|
|
62
76
|
return {
|
|
63
|
-
index: type === "operator" ? 1e3 : index,
|
|
64
77
|
lock: false,
|
|
65
78
|
edit: !type || type === "default",
|
|
66
79
|
checked: !type || type !== "default" || type === "operator",
|
|
67
80
|
desc: void 0,
|
|
68
81
|
examples: [],
|
|
69
|
-
...editable || {}
|
|
82
|
+
...editable || {},
|
|
83
|
+
index: type === "operator" ? 1e3 : index
|
|
70
84
|
};
|
|
71
85
|
}
|
|
72
86
|
function getColumnSort(column) {
|
|
@@ -90,7 +104,7 @@ function getColumnSort(column) {
|
|
|
90
104
|
return sort;
|
|
91
105
|
}
|
|
92
106
|
const useAppTable = (config = {}) => {
|
|
93
|
-
const { columns, filterModel, filterColumns } = config || {};
|
|
107
|
+
const { columns, filterModel = {}, filterColumns } = config || {};
|
|
94
108
|
const tableColumns = [];
|
|
95
109
|
let defaultSortInfo = null;
|
|
96
110
|
try {
|
|
@@ -6,21 +6,26 @@
|
|
|
6
6
|
color: rgb(var(--hy-main));
|
|
7
7
|
font-size: 14px;
|
|
8
8
|
background-color: rgb(var(--hy-background));
|
|
9
|
-
.el-table {
|
|
9
|
+
.hy-el-table {
|
|
10
10
|
&.hideSelect {
|
|
11
11
|
/* 禁用全选 */
|
|
12
|
-
.el-table__header-wrapper .el-checkbox {
|
|
12
|
+
.hy-el-table__header-wrapper .hy-el-checkbox {
|
|
13
13
|
display: none !important;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
.el-table__cell .cell {
|
|
16
|
+
.hy-el-table__cell .cell {
|
|
17
17
|
display: flex;
|
|
18
18
|
align-items: center;
|
|
19
|
-
.el-table__expand-icon {
|
|
19
|
+
.hy-el-table__expand-icon {
|
|
20
20
|
flex-shrink: 0;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
+
.hy-el-table-v2 {
|
|
25
|
+
.hy-el-table-v2__row-cell {
|
|
26
|
+
padding: 8px 12px;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
24
29
|
.hy-table-search {
|
|
25
30
|
width: 160px;
|
|
26
31
|
.hy-el-input__inner::placeholder {
|
|
@@ -486,7 +486,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
|
|
|
486
486
|
default: vue.withCtx((scope) => [
|
|
487
487
|
column?.slot ? vue.renderSlot(_ctx.$slots, column?.slot, vue.mergeProps({ ref_for: true }, scope), void 0, void 0, 0) : column.type === "operator" ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
488
488
|
key: 1,
|
|
489
|
-
class: "flex items-center justify-end gap-
|
|
489
|
+
class: "w-full flex items-center justify-end gap-3 text-main"
|
|
490
490
|
}, [
|
|
491
491
|
(vue.openBlock(true), vue.createElementBlock(
|
|
492
492
|
vue.Fragment,
|
|
@@ -216,6 +216,16 @@
|
|
|
216
216
|
white-space: nowrap;
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
+
.hy-el-textarea__clear {
|
|
220
|
+
position: absolute;
|
|
221
|
+
right: 11px;
|
|
222
|
+
top: 15px;
|
|
223
|
+
transform: translateY(-50%);
|
|
224
|
+
color: var(--el-input-icon-color);
|
|
225
|
+
font-size: 14px;
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
}
|
|
228
|
+
|
|
219
229
|
// 日期选择器
|
|
220
230
|
.hy-el-popper.hy-el-tooltip.hy-el-picker__popper {
|
|
221
231
|
--hy-el-border-color-light: rgba(var(--hy-auxiliary), 1);
|
|
@@ -921,6 +931,12 @@
|
|
|
921
931
|
position: relative;
|
|
922
932
|
height: 38px;
|
|
923
933
|
padding-left: 20px;
|
|
934
|
+
|
|
935
|
+
.hy-el-collapse-item__title {
|
|
936
|
+
overflow: hidden;
|
|
937
|
+
text-overflow: ellipsis;
|
|
938
|
+
white-space: nowrap;
|
|
939
|
+
}
|
|
924
940
|
}
|
|
925
941
|
|
|
926
942
|
.hy-el-collapse-item__wrap {
|
|
@@ -954,6 +970,7 @@
|
|
|
954
970
|
td.is-selected {
|
|
955
971
|
box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
|
|
956
972
|
background: rgba(var(--hy-background-2), 1);
|
|
973
|
+
|
|
957
974
|
.hy-el-calendar-day {
|
|
958
975
|
border: 1px solid rgba(var(--hy-theme), 1);
|
|
959
976
|
}
|
package/lib/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hy-dispatch-ui-v3",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.36",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "es/index.mjs",
|
|
6
6
|
"scripts": {
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
"body-parser": "^2.3.0",
|
|
23
23
|
"crypto-js": "^4.2.0",
|
|
24
24
|
"dayjs": "^1.11.20",
|
|
25
|
-
"element-plus": "^2.14.2",
|
|
26
25
|
"express": "^5.2.1",
|
|
27
26
|
"hy-virtual-tree": "^2.4.4",
|
|
28
27
|
"lodash-unified": "^1.0.3",
|
|
@@ -30,13 +29,12 @@
|
|
|
30
29
|
"mysql": "^2.18.1",
|
|
31
30
|
"sortablejs": "^1.15.7",
|
|
32
31
|
"vite-plugin-svg-icons": "^2.0.1",
|
|
33
|
-
"vue": "^3.5.25",
|
|
34
32
|
"vue-cropper": "^1.1.4",
|
|
35
|
-
"vue-router": "^5.0.3",
|
|
36
33
|
"xlsx": "^0.17.3"
|
|
37
34
|
},
|
|
38
35
|
"devDependencies": {
|
|
39
36
|
"@babel/eslint-parser": "^7.28.6",
|
|
37
|
+
"@babel/parser": "^8.0.4",
|
|
40
38
|
"@pnpm/find-workspace-packages": "^6.0.9",
|
|
41
39
|
"@rollup/plugin-alias": "^6.0.0",
|
|
42
40
|
"@rollup/plugin-babel": "7.0.0",
|
|
@@ -136,8 +134,17 @@
|
|
|
136
134
|
"./tailwind.css": "./dist/tailwind.css"
|
|
137
135
|
},
|
|
138
136
|
"peerDependencies": {
|
|
137
|
+
"element-plus": ">=2.13.0",
|
|
139
138
|
"vue": ">=3.5.25"
|
|
140
139
|
},
|
|
140
|
+
"pnpm": {
|
|
141
|
+
"onlyBuiltDependencies": [
|
|
142
|
+
"@parcel/watcher",
|
|
143
|
+
"es5-ext",
|
|
144
|
+
"esbuild",
|
|
145
|
+
"fsevents"
|
|
146
|
+
]
|
|
147
|
+
},
|
|
141
148
|
"author": "sailor-lin",
|
|
142
149
|
"license": "MIT"
|
|
143
150
|
}
|