@lx-frontend/wrap-element-ui 1.0.0-beta.3 → 1.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -4
- package/src/components/EditableTable/index.less +34 -26
- package/src/components/EditableTable/index.vue +104 -34
- package/src/components/EditableTable/types.ts +32 -10
- package/src/components/EditableTable/useColumnHeaderOperation.ts +166 -28
- package/src/components/EditableTable/useDefaultOperation.ts +10 -10
- package/src/components/EditableTable/useDragSort.ts +4 -5
- package/src/components/EditableTable/usePagination.ts +4 -7
- package/src/components/EditableTable/useRowBgColor.ts +3 -3
- package/src/components/EditableTable/useViewSetting.ts +44 -1
- package/src/components/index.ts +3 -1
- package/dist/AddMembers/index.vue.d.ts +0 -31
- package/dist/AuditSteps/index.vue.d.ts +0 -46
- package/dist/DemoComponent/index.vue.d.ts +0 -2
- package/dist/EditableTable/index.vue.d.ts +0 -186
- package/dist/EditableTable/types.d.ts +0 -123
- package/dist/EditableTable/useCellHover.d.ts +0 -11
- package/dist/EditableTable/useColumnHeaderOperation.d.ts +0 -106
- package/dist/EditableTable/useDefaultOperation.d.ts +0 -22
- package/dist/EditableTable/useDragSort.d.ts +0 -15
- package/dist/EditableTable/usePagination.d.ts +0 -13
- package/dist/EditableTable/useRowBgColor.d.ts +0 -16
- package/dist/EditableTable/useViewSetting.d.ts +0 -58
- package/dist/Ellipsis/MultilineEllipsis.vue.d.ts +0 -91
- package/dist/Ellipsis/index.vue.d.ts +0 -89
- package/dist/LxTable/index.vue.d.ts +0 -2
- package/dist/PopoverForm/index.vue.d.ts +0 -50
- package/dist/SearchForm/index.vue.d.ts +0 -105
- package/dist/SearchSelect/index.vue.d.ts +0 -53
- package/dist/index.css +0 -1
- package/dist/index.d.ts +0 -11
- package/dist/index.mjs +0 -40808
- package/dist/singleMessage/index.d.ts +0 -4
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { computed, ref, watch, nextTick } from "vue"
|
|
2
|
-
import { IColumnConfig, IProps } from './types';
|
|
1
|
+
import { computed, ref, watch, nextTick, Ref } from "vue"
|
|
2
|
+
import { IColumnConfig, IEmits, IProps } from './types';
|
|
3
3
|
|
|
4
4
|
interface IUseColumnHeaderOperationParams {
|
|
5
5
|
props: IProps
|
|
6
6
|
tableDomRef: any
|
|
7
7
|
sortFilterPopoverRef: any
|
|
8
|
+
emit: IEmits;
|
|
9
|
+
showingColumns: Ref<string[]>
|
|
8
10
|
}
|
|
9
11
|
|
|
10
|
-
export default function useColumnHeaderOperation({props, tableDomRef, sortFilterPopoverRef}: IUseColumnHeaderOperationParams) {
|
|
12
|
+
export default function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopoverRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
|
|
11
13
|
|
|
12
14
|
// column如果有sortable属性,点击列头部,会直接触发排序,为了在弹窗点确定时再触发排序,需要阻止点击立即排序
|
|
13
15
|
// 所以,初始渲染时,将sortable设置为false,在触发排序逻辑时再设置成真实的值,再利用el-table自身的排序逻辑触发排序
|
|
@@ -22,8 +24,8 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
22
24
|
const tempSortingColumn = ref<IColumnConfig | null>(null);
|
|
23
25
|
|
|
24
26
|
// 生效中的过滤配置 和 临时过滤配置
|
|
25
|
-
const filteredValue = ref<Record<string, string[]>>({});
|
|
26
|
-
const tempFilteredValue = ref<Record<string, string[]>>({});
|
|
27
|
+
const filteredValue = ref<Record<string, string | number | number[] | string[]>>({});
|
|
28
|
+
const tempFilteredValue = ref<Record<string, string | number | number[] | string[]>>({});
|
|
27
29
|
|
|
28
30
|
// 生效中的统计配置 和 临时统计配置
|
|
29
31
|
const tempSummaryList = ref<string[]>([]);
|
|
@@ -33,14 +35,17 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
33
35
|
const searchValue = ref<Record<string, string>>({});
|
|
34
36
|
const tempSearchValue = ref<Record<string, string>>({});
|
|
35
37
|
|
|
36
|
-
const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k =>
|
|
38
|
+
const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => {
|
|
39
|
+
if (!Array.isArray(tempFilteredValue.value[k])) return tempFilteredValue.value[k]
|
|
40
|
+
return tempFilteredValue.value[k]?.length;
|
|
41
|
+
}));
|
|
37
42
|
|
|
38
|
-
const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.
|
|
43
|
+
const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary;
|
|
39
44
|
|
|
40
45
|
watch(
|
|
41
46
|
() => props.columnConfig,
|
|
42
47
|
(val) => {
|
|
43
|
-
filteredValue.value = val.reduce((prev, curr) => ({...prev, [curr.prop]: []}), {});
|
|
48
|
+
filteredValue.value = val.reduce((prev, curr) => ({ ...prev, [curr.prop]: [] }), {});
|
|
44
49
|
tempFilteredValue.value = { ...filteredValue.value };
|
|
45
50
|
},
|
|
46
51
|
{ immediate: true }
|
|
@@ -63,14 +68,24 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
63
68
|
sums[index] = summaryMethod(values);
|
|
64
69
|
}
|
|
65
70
|
})
|
|
66
|
-
|
|
71
|
+
|
|
67
72
|
return sums
|
|
68
73
|
}
|
|
69
74
|
|
|
70
75
|
const isColumnHeadActive = (column: IColumnConfig) => {
|
|
71
|
-
return
|
|
76
|
+
return (
|
|
77
|
+
column.filters && (Array.isArray(column.filters)
|
|
78
|
+
? (filteredValue.value[column.prop] as any[]).length
|
|
79
|
+
: column.filters.type === 'radio'
|
|
80
|
+
? filteredValue.value[column.prop]
|
|
81
|
+
: (filteredValue.value[column.prop] as any[]).length)
|
|
82
|
+
) ||
|
|
83
|
+
(
|
|
84
|
+
column.search
|
|
85
|
+
? Array.isArray(column.search) && column.search?.some(v => searchValue.value[v.prop])
|
|
86
|
+
: searchValue.value[column.prop]
|
|
87
|
+
) ||
|
|
72
88
|
sortingColumn.value?.prop === column.prop ||
|
|
73
|
-
searchValue.value[column.prop] ||
|
|
74
89
|
summaryList.value.includes(column.prop);
|
|
75
90
|
}
|
|
76
91
|
|
|
@@ -82,7 +97,7 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
82
97
|
tempSortType.value = sortType.value;
|
|
83
98
|
tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
|
|
84
99
|
// 临时合计项设置成实际的合计项
|
|
85
|
-
tempSummaryList.value = [
|
|
100
|
+
tempSummaryList.value = [...summaryList.value];
|
|
86
101
|
}
|
|
87
102
|
|
|
88
103
|
const closeSortAndFilterPopover = (exceptProp?: string) => {
|
|
@@ -98,21 +113,81 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
98
113
|
tempSortingColumn.value = column;
|
|
99
114
|
}
|
|
100
115
|
|
|
101
|
-
const
|
|
102
|
-
|
|
103
|
-
|
|
116
|
+
const columnMap = computed(() => {
|
|
117
|
+
const obj: Record<string, IColumnConfig> = {}
|
|
118
|
+
props.columnConfig.forEach(column => {
|
|
119
|
+
obj[column.prop] = column
|
|
120
|
+
})
|
|
121
|
+
return obj
|
|
122
|
+
})
|
|
123
|
+
|
|
124
|
+
const emitSearch = () => {
|
|
125
|
+
const params: Record<string, any> = {};
|
|
126
|
+
// 仅提交显示的列的相关数据
|
|
127
|
+
showingColumns.value.forEach(prop => {
|
|
128
|
+
const column = columnMap.value[prop]
|
|
129
|
+
if (column.filters) {
|
|
130
|
+
params[prop] = filteredValue.value[prop]
|
|
131
|
+
}
|
|
132
|
+
if (column.search) {
|
|
133
|
+
if (Array.isArray(column.search)) {
|
|
134
|
+
column.search.forEach(v => {
|
|
135
|
+
params[v.prop] = searchValue.value[v.prop]
|
|
136
|
+
})
|
|
137
|
+
} else {
|
|
138
|
+
params[prop] = searchValue.value[prop]
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
})
|
|
142
|
+
|
|
143
|
+
Object.keys(params).forEach(key => {
|
|
144
|
+
if (params[key] === undefined) delete params[key]
|
|
145
|
+
})
|
|
146
|
+
|
|
147
|
+
emit('search', params);
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
const handleHeaderOperationConfirm = async (column: IColumnConfig, scope) => {
|
|
151
|
+
if (column.search) {
|
|
152
|
+
// 校验
|
|
153
|
+
if (Array.isArray(column.search)) {
|
|
154
|
+
let validate = true;
|
|
155
|
+
column.search.forEach(v => {
|
|
156
|
+
if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
|
|
157
|
+
if (!validate) return
|
|
158
|
+
if (v.validator) {
|
|
159
|
+
const result = v.validator(tempSearchValue.value[v.prop]);
|
|
160
|
+
if (validate && !result) validate = false;
|
|
161
|
+
}
|
|
162
|
+
})
|
|
163
|
+
// 校验未通过
|
|
164
|
+
if (!validate) return
|
|
165
|
+
} else {
|
|
166
|
+
if (!tempSearchValue.value[column.prop]) tempSearchValue.value[column.prop] = ''
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
summaryList.value = [...tempSummaryList.value];
|
|
171
|
+
sortingColumn.value = tempSortingColumn.value ? { ...tempSortingColumn.value } : null;
|
|
104
172
|
sortType.value = tempSortType.value;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
173
|
+
|
|
174
|
+
if (sortingColumn.value) { // 确认时提交排序
|
|
175
|
+
if (props.localSort) {
|
|
176
|
+
// 恢复列配置的sortable属性,只有列配置的sortable为true,才能用下面的sort方法
|
|
177
|
+
inSorting.value = true;
|
|
178
|
+
await nextTick();
|
|
179
|
+
tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
|
|
180
|
+
inSorting.value = false
|
|
181
|
+
} else {
|
|
182
|
+
emit('sort-change', { order: sortType.value, prop: sortingColumn.value.prop });
|
|
183
|
+
}
|
|
111
184
|
}
|
|
112
185
|
|
|
113
186
|
filteredValue.value = { ...tempFilteredValue.value };
|
|
114
187
|
searchValue.value = { ...tempSearchValue.value };
|
|
115
188
|
|
|
189
|
+
emitSearch();
|
|
190
|
+
|
|
116
191
|
filterColumns(scope.store);
|
|
117
192
|
|
|
118
193
|
closeSortAndFilterPopover();
|
|
@@ -120,18 +195,52 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
120
195
|
tableDomRef.value?.doLayout();
|
|
121
196
|
}
|
|
122
197
|
|
|
123
|
-
const
|
|
124
|
-
|
|
198
|
+
const clearSort = () => {
|
|
199
|
+
sortingColumn.value = null;
|
|
200
|
+
sortType.value = null;
|
|
201
|
+
if (props.localSort) { // 前端过滤
|
|
125
202
|
tableDomRef.value?.clearSort();
|
|
126
|
-
|
|
127
|
-
|
|
203
|
+
} else { // 接口过滤
|
|
204
|
+
emit('sort-change', { order: null, prop: '' });
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
const setSort = (params: { order: 'ascending' | 'descending', prop: string }) => {
|
|
209
|
+
const column = props.columnConfig.find(c => c.prop === params.prop);
|
|
210
|
+
if (column) {
|
|
211
|
+
sortingColumn.value = column;
|
|
212
|
+
sortType.value = params.order;
|
|
213
|
+
if (props.localSort) {
|
|
214
|
+
tableDomRef.value?.sort(params.prop, params.order);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
|
|
220
|
+
if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
|
|
221
|
+
clearSort();
|
|
128
222
|
}
|
|
129
223
|
|
|
130
224
|
// 合计
|
|
131
225
|
summaryList.value = summaryList.value.filter(item => item !== column.prop);
|
|
132
226
|
|
|
133
|
-
|
|
134
|
-
|
|
227
|
+
if (column.filters) {
|
|
228
|
+
filteredValue.value[column.prop] = Array.isArray(column.filters)
|
|
229
|
+
? []
|
|
230
|
+
: column.filters.default ?? []
|
|
231
|
+
}
|
|
232
|
+
if (column.search) {
|
|
233
|
+
if (!Array.isArray(column.search)) {
|
|
234
|
+
searchValue.value[column.prop] = '';
|
|
235
|
+
} else {
|
|
236
|
+
column.search.forEach(v => {
|
|
237
|
+
searchValue.value[v.prop] = '';
|
|
238
|
+
})
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
emitSearch();
|
|
243
|
+
|
|
135
244
|
filterColumns(scope.store);
|
|
136
245
|
|
|
137
246
|
closeSortAndFilterPopover();
|
|
@@ -140,6 +249,7 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
140
249
|
}
|
|
141
250
|
|
|
142
251
|
const filterColumns = (store) => {
|
|
252
|
+
if (!props.localFilter) return
|
|
143
253
|
store.states.columns.forEach(column => {
|
|
144
254
|
if (filteredValue.value[column.property]) {
|
|
145
255
|
store.commit('filterChange', {
|
|
@@ -165,7 +275,35 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
165
275
|
store.states.data = data;
|
|
166
276
|
}
|
|
167
277
|
|
|
278
|
+
const setSearchParams = (params: Record<string, any>) => {
|
|
279
|
+
const _searchValue = {};
|
|
280
|
+
const _filteredValue = {};
|
|
281
|
+
|
|
282
|
+
// 设置搜索和过滤参数时,如果使用 showingColumns 遍历,会导致通过外部设置未显示的列的搜索和过滤参数丢失
|
|
283
|
+
props.columnConfig.forEach(column => {
|
|
284
|
+
if (column.search) {
|
|
285
|
+
if (Array.isArray(column.search)) {
|
|
286
|
+
column.search.forEach(v => {
|
|
287
|
+
_searchValue[v.prop] = params[v.prop];
|
|
288
|
+
});
|
|
289
|
+
} else {
|
|
290
|
+
_searchValue[column.prop] = params[column.prop] ?? '';
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
if (column.filters) {
|
|
294
|
+
const value = params[column.prop] ?? (Array.isArray(column.filters) ? [] : column.filters.default);
|
|
295
|
+
_filteredValue[column.prop] = value;
|
|
296
|
+
}
|
|
297
|
+
})
|
|
298
|
+
|
|
299
|
+
searchValue.value = { ...searchValue.value, ..._searchValue }
|
|
300
|
+
filteredValue.value = { ...filteredValue.value, ..._filteredValue }
|
|
301
|
+
}
|
|
302
|
+
|
|
168
303
|
return {
|
|
304
|
+
setSort,
|
|
305
|
+
clearSort,
|
|
306
|
+
setSearchParams,
|
|
169
307
|
isColumnHeadActive,
|
|
170
308
|
handleHeaderPopoverShow,
|
|
171
309
|
handleSort,
|
|
@@ -183,6 +321,6 @@ export default function useColumnHeaderOperation({props, tableDomRef, sortFilter
|
|
|
183
321
|
sortingColumn,
|
|
184
322
|
isColumnFiltering,
|
|
185
323
|
searchValue,
|
|
186
|
-
inSorting
|
|
324
|
+
inSorting,
|
|
187
325
|
}
|
|
188
326
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Ref, ref } from "vue"
|
|
2
|
-
import { IEmits } from "./types"
|
|
2
|
+
import { IEmits, IProps } from "./types"
|
|
3
3
|
|
|
4
4
|
interface IParams {
|
|
5
5
|
emit: IEmits;
|
|
6
6
|
pageSize: Ref<number>;
|
|
7
|
-
|
|
7
|
+
props: IProps
|
|
8
8
|
tableDomRef: Ref<any>;
|
|
9
9
|
hasExpandRow: boolean
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export default function useDefaultOperation({emit, pageSize,
|
|
12
|
+
export default function useDefaultOperation({ emit, pageSize, props, tableDomRef, hasExpandRow }: IParams) {
|
|
13
13
|
const operationPopoverRef = ref<any>(null);
|
|
14
14
|
const editingRowData = ref<Record<string, any>>({});
|
|
15
15
|
const editingRowIndex = ref<number>(-1);
|
|
@@ -18,7 +18,7 @@ export default function useDefaultOperation({emit, pageSize, currentPage, tableD
|
|
|
18
18
|
emit('row-delete', {
|
|
19
19
|
row,
|
|
20
20
|
index,
|
|
21
|
-
page: currentPage
|
|
21
|
+
page: props.currentPage,
|
|
22
22
|
size: pageSize.value
|
|
23
23
|
})
|
|
24
24
|
closeOperationPopover();
|
|
@@ -39,9 +39,9 @@ export default function useDefaultOperation({emit, pageSize, currentPage, tableD
|
|
|
39
39
|
// 折叠所有展开的行
|
|
40
40
|
closeAllExpandedRows();
|
|
41
41
|
const { row, $index: index } = scope;
|
|
42
|
-
editingRowData.value = {...row};
|
|
42
|
+
editingRowData.value = { ...row };
|
|
43
43
|
editingRowIndex.value = index;
|
|
44
|
-
emit('row-edit', { row, index, page: currentPage
|
|
44
|
+
emit('row-edit', { row, index, page: props.currentPage, size: pageSize.value });
|
|
45
45
|
closeOperationPopover();
|
|
46
46
|
}
|
|
47
47
|
|
|
@@ -52,9 +52,9 @@ export default function useDefaultOperation({emit, pageSize, currentPage, tableD
|
|
|
52
52
|
...dataList.slice(0, index),
|
|
53
53
|
...dataList.slice(index + 1)
|
|
54
54
|
];
|
|
55
|
-
newList.unshift({...row, isPinned: true});
|
|
55
|
+
newList.unshift({ ...row, isPinned: true });
|
|
56
56
|
store.states.data = newList;
|
|
57
|
-
emit('row-pin-to-top', { row, rawIndex: index, page: currentPage
|
|
57
|
+
emit('row-pin-to-top', { row, rawIndex: index, page: props.currentPage, size: pageSize.value });
|
|
58
58
|
closeOperationPopover();
|
|
59
59
|
}
|
|
60
60
|
|
|
@@ -68,7 +68,7 @@ export default function useDefaultOperation({emit, pageSize, currentPage, tableD
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
emit('row-edit-save', {
|
|
71
|
-
page: currentPage
|
|
71
|
+
page: props.currentPage,
|
|
72
72
|
size: pageSize.value,
|
|
73
73
|
row,
|
|
74
74
|
changedData
|
|
@@ -79,7 +79,7 @@ export default function useDefaultOperation({emit, pageSize, currentPage, tableD
|
|
|
79
79
|
const handleEditCancel = (row) => {
|
|
80
80
|
editingRowIndex.value = -1;
|
|
81
81
|
editingRowData.value = {};
|
|
82
|
-
emit('row-edit-cancel', { row, page: currentPage
|
|
82
|
+
emit('row-edit-cancel', { row, page: props.currentPage, size: pageSize.value });
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
return {
|
|
@@ -8,11 +8,10 @@ interface IUseDragSortParams {
|
|
|
8
8
|
viewSettingDragSortOptions: Ref<IColumnConfig[]>
|
|
9
9
|
beforeDragStart: () => boolean
|
|
10
10
|
currScope: Ref<any>
|
|
11
|
-
currentPage: Ref<number>
|
|
12
11
|
pageSize: Ref<number>
|
|
13
12
|
tableDomRef: Ref<any>
|
|
14
13
|
}
|
|
15
|
-
export default function useDragSort({props, emit, viewSettingDragSortOptions,
|
|
14
|
+
export default function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
|
|
16
15
|
|
|
17
16
|
const draggingData = ref<IDraggingData>({}); // 拖拽相关数据
|
|
18
17
|
const isMouseDown = ref(false);
|
|
@@ -21,7 +20,7 @@ export default function useDragSort({props, emit, viewSettingDragSortOptions, cu
|
|
|
21
20
|
const isOperating = ref(false);
|
|
22
21
|
|
|
23
22
|
onMounted(() => {
|
|
24
|
-
tableDomRef.value.$el.addEventListener('mousedown', () => {isOperating.value = true});
|
|
23
|
+
tableDomRef.value.$el.addEventListener('mousedown', () => { isOperating.value = true });
|
|
25
24
|
document.addEventListener('mousedown', handleDocumentMouseDown);
|
|
26
25
|
document.addEventListener('mousemove', handleDocumentMouseMove);
|
|
27
26
|
document.addEventListener('mouseup', handleDocumentMouseUp);
|
|
@@ -201,7 +200,7 @@ export default function useDragSort({props, emit, viewSettingDragSortOptions, cu
|
|
|
201
200
|
row: movedRow,
|
|
202
201
|
fromIndex: draggingIndex,
|
|
203
202
|
toIndex: dropIndex,
|
|
204
|
-
page: currentPage
|
|
203
|
+
page: props.currentPage,
|
|
205
204
|
size: pageSize.value
|
|
206
205
|
});
|
|
207
206
|
// 清理工作
|
|
@@ -210,7 +209,7 @@ export default function useDragSort({props, emit, viewSettingDragSortOptions, cu
|
|
|
210
209
|
|
|
211
210
|
const handleViewSettingDragMouseDown = (event, index) => {
|
|
212
211
|
const rowDoms = [...document.getElementsByClassName('view-setting-draggable-item')]
|
|
213
|
-
.reduce((pre, item, index) => ({...pre, [index]: [item]}), {});
|
|
212
|
+
.reduce((pre, item, index) => ({ ...pre, [index]: [item] }), {});
|
|
214
213
|
draggingData.value.isDragging = true;
|
|
215
214
|
draggingData.value.rowDoms = rowDoms;
|
|
216
215
|
draggingData.value.draggingIndex = +index;
|
|
@@ -6,29 +6,26 @@ interface IParams {
|
|
|
6
6
|
beforePageChange: () => void
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export default function usePagination({emit, beforePageChange}: IParams) {
|
|
9
|
+
export default function usePagination({ emit, beforePageChange }: IParams) {
|
|
10
10
|
|
|
11
11
|
const pageSize = ref(10);
|
|
12
|
-
const currentPage = ref(1);
|
|
13
12
|
|
|
14
13
|
const handlePageSizeChange = (size: number) => {
|
|
15
14
|
pageSize.value = size;
|
|
16
|
-
currentPage.value = 1;
|
|
17
15
|
// searchValue.value = {};
|
|
18
16
|
beforePageChange();
|
|
19
|
-
emit('page-change', {size, page:
|
|
17
|
+
emit('page-change', { size, page: 1 });
|
|
20
18
|
}
|
|
21
19
|
|
|
22
20
|
const handleCurrPageChange = (curr: number) => {
|
|
23
21
|
// searchValue.value = {};
|
|
24
22
|
beforePageChange();
|
|
25
|
-
emit('page-change', {size: pageSize.value, page: curr});
|
|
23
|
+
emit('page-change', { size: pageSize.value, page: curr });
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
return {
|
|
29
27
|
pageSize,
|
|
30
|
-
currentPage,
|
|
31
28
|
handlePageSizeChange,
|
|
32
|
-
handleCurrPageChange
|
|
29
|
+
handleCurrPageChange,
|
|
33
30
|
}
|
|
34
31
|
}
|
|
@@ -6,7 +6,7 @@ interface IUseRowBgColorParams {
|
|
|
6
6
|
emit: IEmits;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export default function useRowBgColor({colorList, emit}: IUseRowBgColorParams) {
|
|
9
|
+
export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
|
|
10
10
|
const colorPopoverRef = ref<any>(null);
|
|
11
11
|
|
|
12
12
|
const isDefaultColor = (id: number) => {
|
|
@@ -31,11 +31,11 @@ export default function useRowBgColor({colorList, emit}: IUseRowBgColorParams) {
|
|
|
31
31
|
const handleColorChange = async (colorId: number, scope) => {
|
|
32
32
|
const { row, $index: rowIndex, store } = scope;
|
|
33
33
|
const dataList = store.states.data;
|
|
34
|
-
const curRow = {...dataList[rowIndex], colorId: +colorId};
|
|
34
|
+
const curRow = { ...dataList[rowIndex], colorId: +colorId };
|
|
35
35
|
const newList = [...dataList];
|
|
36
36
|
newList.splice(rowIndex, 1, curRow);
|
|
37
37
|
store.states.data = newList;
|
|
38
|
-
emit('row-bg-change', {colorId, row, rowIndex});
|
|
38
|
+
emit('row-bg-change', { colorId, row, rowIndex });
|
|
39
39
|
await nextTick();
|
|
40
40
|
// TODO: 为什么不是数组?为什么关闭弹窗不生效了?
|
|
41
41
|
colorPopoverRef.value?.doClose();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref, nextTick, watch, ComputedRef, Ref, onMounted } from "vue"
|
|
1
|
+
import { ref, nextTick, watch, ComputedRef, Ref, onMounted, computed } from "vue"
|
|
2
2
|
import { IColumnConfig, IProps } from "./types"
|
|
3
3
|
|
|
4
4
|
interface IViewSettingParams {
|
|
@@ -14,6 +14,45 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
|
|
|
14
14
|
const viewSettingVisible = ref(false);
|
|
15
15
|
const leftFixedColumnCount = ref(0);
|
|
16
16
|
|
|
17
|
+
const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
|
|
18
|
+
|
|
19
|
+
const saveSettingToStorge = () => localStorage.setItem(storageKey.value, JSON.stringify({
|
|
20
|
+
showingColumns: showingColumns.value,
|
|
21
|
+
leftFixedColumnCount: leftFixedColumnCount.value
|
|
22
|
+
}));
|
|
23
|
+
|
|
24
|
+
watch(
|
|
25
|
+
() => props.columnConfig,
|
|
26
|
+
(val) => {
|
|
27
|
+
const _keys = new Set(props.columnConfig.map(c => (c.prop)));
|
|
28
|
+
const _cache = localStorage.getItem(storageKey.value);
|
|
29
|
+
const setColumns = () => (showingColumns.value = val.filter(v => !v.defaultHide).map(c => c.prop));
|
|
30
|
+
if (!_cache) {
|
|
31
|
+
setColumns();
|
|
32
|
+
leftFixedColumnCount.value = props.leftFixedCount as number;
|
|
33
|
+
} else {
|
|
34
|
+
try {
|
|
35
|
+
// 缓存数据字段可能随着更新导致对不上,清理无效数据,防止出问题
|
|
36
|
+
const cache = JSON.parse(_cache);
|
|
37
|
+
if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
|
|
38
|
+
setColumns();
|
|
39
|
+
} else {
|
|
40
|
+
showingColumns.value = cache.keys.filter(key => _keys.has(key));
|
|
41
|
+
}
|
|
42
|
+
const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
|
|
43
|
+
leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
|
|
44
|
+
// 写入清理后的数据
|
|
45
|
+
saveSettingToStorge();
|
|
46
|
+
} catch (error) {
|
|
47
|
+
console.error('缓存数据异常');
|
|
48
|
+
localStorage.removeItem(storageKey.value);
|
|
49
|
+
setColumns();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
{ immediate: true }
|
|
54
|
+
)
|
|
55
|
+
|
|
17
56
|
watch(
|
|
18
57
|
() => columnsToBeShown.value,
|
|
19
58
|
(val) => {
|
|
@@ -51,6 +90,10 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
|
|
|
51
90
|
const handleViewSettingConfirm = async () => {
|
|
52
91
|
viewSettingVisible.value = false;
|
|
53
92
|
showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
|
|
93
|
+
localStorage.setItem(storageKey.value, JSON.stringify({
|
|
94
|
+
keys: showingColumns.value,
|
|
95
|
+
leftFixedColumnCount: leftFixedColumnCount.value,
|
|
96
|
+
}));
|
|
54
97
|
await nextTick();
|
|
55
98
|
tableDomRef.value?.doLayout();
|
|
56
99
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ import SearchSelect from './SearchSelect/index.vue'
|
|
|
8
8
|
import AddMembers from './AddMembers/index.vue'
|
|
9
9
|
import PopoverForm from './PopoverForm/index.vue'
|
|
10
10
|
import EditableTable from './EditableTable/index.vue'
|
|
11
|
+
import SingleMessage from './singleMessage/index'
|
|
11
12
|
|
|
12
13
|
export {
|
|
13
14
|
DemoComponent,
|
|
@@ -18,5 +19,6 @@ export {
|
|
|
18
19
|
SearchSelect,
|
|
19
20
|
AddMembers,
|
|
20
21
|
PopoverForm,
|
|
21
|
-
EditableTable
|
|
22
|
+
EditableTable,
|
|
23
|
+
SingleMessage
|
|
22
24
|
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
declare const _default: import('vue').DefineComponent<{
|
|
2
|
-
/** 成员数据 */
|
|
3
|
-
technicianOptions: ArrayConstructor;
|
|
4
|
-
/** 获取数据加载中 */
|
|
5
|
-
fetchTechniciansLoading: BooleanConstructor;
|
|
6
|
-
/** 弹窗标题 */
|
|
7
|
-
title: {
|
|
8
|
-
type: StringConstructor;
|
|
9
|
-
default: string;
|
|
10
|
-
};
|
|
11
|
-
}, {}, {
|
|
12
|
-
techniciansSearchQuery: string;
|
|
13
|
-
}, {}, {
|
|
14
|
-
handleCloseTechniciansSelectPopup(show: any): void;
|
|
15
|
-
handleInputTechniciansSearch(query: any): void;
|
|
16
|
-
handleAddTechnician(id: any, item: any): void;
|
|
17
|
-
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
|
|
18
|
-
/** 成员数据 */
|
|
19
|
-
technicianOptions: ArrayConstructor;
|
|
20
|
-
/** 获取数据加载中 */
|
|
21
|
-
fetchTechniciansLoading: BooleanConstructor;
|
|
22
|
-
/** 弹窗标题 */
|
|
23
|
-
title: {
|
|
24
|
-
type: StringConstructor;
|
|
25
|
-
default: string;
|
|
26
|
-
};
|
|
27
|
-
}>>, {
|
|
28
|
-
fetchTechniciansLoading: boolean;
|
|
29
|
-
title: string;
|
|
30
|
-
}>;
|
|
31
|
-
export default _default;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
declare const _default: import('vue').DefineComponent<{
|
|
2
|
-
candidates: {
|
|
3
|
-
type: ArrayConstructor;
|
|
4
|
-
};
|
|
5
|
-
value: {
|
|
6
|
-
type: ArrayConstructor;
|
|
7
|
-
default(): never[];
|
|
8
|
-
};
|
|
9
|
-
maxSelect: {
|
|
10
|
-
type: NumberConstructor;
|
|
11
|
-
default: number;
|
|
12
|
-
};
|
|
13
|
-
stepNum: {
|
|
14
|
-
type: NumberConstructor;
|
|
15
|
-
default: number;
|
|
16
|
-
};
|
|
17
|
-
}, {}, {}, {
|
|
18
|
-
isAdd(): boolean;
|
|
19
|
-
}, {
|
|
20
|
-
syncSteps(modification: any): void;
|
|
21
|
-
handleEditCandidate(val: any, index: any): void;
|
|
22
|
-
handleDeleteStep(i: any): void;
|
|
23
|
-
handleAddStep(): void;
|
|
24
|
-
isValidateSteps(): boolean;
|
|
25
|
-
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
|
|
26
|
-
candidates: {
|
|
27
|
-
type: ArrayConstructor;
|
|
28
|
-
};
|
|
29
|
-
value: {
|
|
30
|
-
type: ArrayConstructor;
|
|
31
|
-
default(): never[];
|
|
32
|
-
};
|
|
33
|
-
maxSelect: {
|
|
34
|
-
type: NumberConstructor;
|
|
35
|
-
default: number;
|
|
36
|
-
};
|
|
37
|
-
stepNum: {
|
|
38
|
-
type: NumberConstructor;
|
|
39
|
-
default: number;
|
|
40
|
-
};
|
|
41
|
-
}>>, {
|
|
42
|
-
value: unknown[];
|
|
43
|
-
maxSelect: number;
|
|
44
|
-
stepNum: number;
|
|
45
|
-
}>;
|
|
46
|
-
export default _default;
|