Skip to content

Commit 8bd5b86

Browse files
huangshuweihuangshuwei
committed
bug fixed
1 parent 38599c6 commit 8bd5b86

File tree

1 file changed

+95
-93
lines changed

1 file changed

+95
-93
lines changed

‎packages/ve-table/src/index.jsx‎

Lines changed: 95 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import {
6262
CELL_SELECTION_DIRECTION,
6363
LOCALE_COMP_NAME,
6464
CONTEXTMENU_TYPES,
65+
CONTEXTMENU_NODE_TYPES,
6566
AUTOFILLING_DIRECTION,
6667
CURRENT_CELL_SELECTION_TYPES,
6768
COLUMN_FIXED_TYPE,
@@ -281,8 +282,7 @@ export default {
281282
virtualPhantomRef: "virtualPhantomRef",
282283
editInputRef: "editInputRef",
283284
cellSelectionRef: "cellSelectionRef",
284-
headerContextmenuRef: "headerContextmenuRef",
285-
bodyContextmenuRef: "bodyContextmenuRef",
285+
contextmenuRef: "contextmenuRef",
286286
cloneColumns: [],
287287
// is group header
288288
isGroupHeader: false,
@@ -435,14 +435,10 @@ export default {
435435
like Excel:If you directly enter content in an editable cell, press the up, down, left and right buttons to directly select other cells and stop editing the current cell
436436
*/
437437
enableStopEditing: true,
438-
// header contextmenu event target
439-
headerContextmenuEventTarget: "",
440-
// body contextmenu event target
441-
bodyContextmenuEventTarget: "",
442-
// body contextmenu options
443-
bodyContextmenuOptions: [],
444-
// header contextmenu options
445-
headerContextmenuOptions: [],
438+
// contextmenu event target
439+
contextmenuEventTarget: "",
440+
// contextmenu options
441+
contextmenuOptions: [],
446442
};
447443
},
448444
computed: {
@@ -679,6 +675,14 @@ export default {
679675
}
680676
return result;
681677
},
678+
// contextmenu type
679+
contextMenuType() {
680+
if (this.headerIndicatorColKeys.startColKeyIndex > -1) {
681+
return CONTEXTMENU_TYPES.HEADER_CONTEXTMENU;
682+
} else {
683+
return CONTEXTMENU_TYPES.BODY_CONTEXTMENU;
684+
}
685+
},
682686
/*
683687
enable cell selection
684688
单元格编辑、剪贴板都依赖单元格选择
@@ -2157,22 +2161,7 @@ export default {
21572161
});
21582162
}
21592163

2160-
// set body contextmenu options before contextmen show
2161-
this.bodyContextmenuOptions = setBodyContextmenuOptions({
2162-
enableBodyContextmenu: this.enableBodyContextmenu,
2163-
contextmenuBodyOption: this.contextmenuBodyOption,
2164-
cellSelectionRangeData: this.cellSelectionRangeData,
2165-
colgroups: this.colgroups,
2166-
allRowKeys: this.allRowKeys,
2167-
bodyIndicatorRowKeys: this.bodyIndicatorRowKeys,
2168-
t,
2169-
});
2170-
2171-
// close header contextmenu panel
2172-
const headerContextmenuRef = this.$refs[this.headerContextmenuRef];
2173-
if (headerContextmenuRef) {
2174-
headerContextmenuRef.hideContextmenu();
2175-
}
2164+
this.setContextmenuOptions(column);
21762165
},
21772166

21782167
/*
@@ -2239,14 +2228,14 @@ export default {
22392228
const rowKey = getRowKey(rowData, rowKeyFieldName);
22402229
const colKey = column.key;
22412230

2242-
// clear header indicator colKeys
2243-
this.clearHeaderIndicatorColKeys();
2244-
22452231
const { currentCell } = cellSelectionData;
22462232

22472233
const mouseEventClickType = getMouseEventClickType(event);
22482234

22492235
if (isOperationColumn(colKey, colgroups)) {
2236+
// clear header indicator colKeys
2237+
this.clearHeaderIndicatorColKeys();
2238+
22502239
const { bodyIndicatorRowKeys } = this;
22512240
this.isBodyOperationColumnMousedown = true;
22522241

@@ -2304,6 +2293,8 @@ export default {
23042293
});
23052294

23062295
if (isClearByRightClick) {
2296+
// clear header indicator colKeys
2297+
this.clearHeaderIndicatorColKeys();
23072298
// clear body indicator colKeys
23082299
this.clearBodyIndicatorRowKeys();
23092300

@@ -2402,22 +2393,39 @@ export default {
24022393

24032394
// header cell contextmenu
24042395
headerCellContextmenu({ event, column }) {
2405-
// set header contextmenu options before contextmen show
2406-
this.headerContextmenuOptions = setHeaderContextmenuOptions({
2407-
column,
2408-
contextmenuHeaderOption: this.contextmenuHeaderOption,
2409-
cellSelectionRangeData: this.cellSelectionRangeData,
2410-
colgroups: this.colgroups,
2411-
allRowKeys: this.allRowKeys,
2412-
headerIndicatorColKeys: this.headerIndicatorColKeys,
2413-
enableHeaderContextmenu: this.enableHeaderContextmenu,
2414-
t,
2415-
});
2416-
2417-
// close body contextmenu panel
2418-
const bodyContextmenuRef = this.$refs[this.bodyContextmenuRef];
2419-
if (bodyContextmenuRef) {
2420-
bodyContextmenuRef.hideContextmenu();
2396+
this.setContextmenuOptions(column);
2397+
},
2398+
2399+
// set contextmenu options
2400+
setContextmenuOptions(column) {
2401+
const { contextMenuType } = this;
2402+
2403+
// header contextmenu
2404+
if (contextMenuType === CONTEXTMENU_TYPES.HEADER_CONTEXTMENU) {
2405+
// set header contextmenu options before contextmen show
2406+
this.contextmenuOptions = setHeaderContextmenuOptions({
2407+
column,
2408+
contextmenuHeaderOption: this.contextmenuHeaderOption,
2409+
cellSelectionRangeData: this.cellSelectionRangeData,
2410+
colgroups: this.colgroups,
2411+
allRowKeys: this.allRowKeys,
2412+
headerIndicatorColKeys: this.headerIndicatorColKeys,
2413+
enableHeaderContextmenu: this.enableHeaderContextmenu,
2414+
t,
2415+
});
2416+
}
2417+
// body contextmenu
2418+
else {
2419+
// set body contextmenu options before contextmen show
2420+
this.contextmenuOptions = setBodyContextmenuOptions({
2421+
enableBodyContextmenu: this.enableBodyContextmenu,
2422+
contextmenuBodyOption: this.contextmenuBodyOption,
2423+
cellSelectionRangeData: this.cellSelectionRangeData,
2424+
colgroups: this.colgroups,
2425+
allRowKeys: this.allRowKeys,
2426+
bodyIndicatorRowKeys: this.bodyIndicatorRowKeys,
2427+
t,
2428+
});
24212429
}
24222430
},
24232431

@@ -2694,6 +2702,18 @@ export default {
26942702
};
26952703
},
26962704

2705+
// contextmenu item click
2706+
contextmenuItemClick(type) {
2707+
// header contextmenu
2708+
if (this.contextMenuType === CONTEXTMENU_TYPES.HEADER_CONTEXTMENU) {
2709+
this.headerContextmenuItemClick(type);
2710+
}
2711+
// body contextmenu
2712+
else {
2713+
this.bodyContextmenuItemClick(type);
2714+
}
2715+
},
2716+
26972717
// header contextmenu item click
26982718
headerContextmenuItemClick(type) {
26992719
const {
@@ -2731,21 +2751,21 @@ export default {
27312751
const editInputEditor = this.$refs[this.editInputRef];
27322752

27332753
// cut
2734-
if (CONTEXTMENU_TYPES.CUT === type) {
2754+
if (CONTEXTMENU_NODE_TYPES.CUT === type) {
27352755
editInputEditor.textareaSelect();
27362756
document.execCommand("cut");
27372757
}
27382758
// copy
2739-
else if (CONTEXTMENU_TYPES.COPY === type) {
2759+
else if (CONTEXTMENU_NODE_TYPES.COPY === type) {
27402760
editInputEditor.textareaSelect();
27412761
document.execCommand("copy");
27422762
}
27432763
// empty column
2744-
else if (CONTEXTMENU_TYPES.EMPTY_COLUMN === type) {
2764+
else if (CONTEXTMENU_NODE_TYPES.EMPTY_COLUMN === type) {
27452765
this.deleteCellSelectionRangeValue();
27462766
}
27472767
// left fixed column to
2748-
else if (CONTEXTMENU_TYPES.LEFT_FIXED_COLUMN_TO === type) {
2768+
else if (CONTEXTMENU_NODE_TYPES.LEFT_FIXED_COLUMN_TO === type) {
27492769
this.cloneColumns = setColumnFixed({
27502770
cloneColumns: this.cloneColumns,
27512771
cellSelectionRangeData,
@@ -2754,7 +2774,7 @@ export default {
27542774
}
27552775
// cancel left fixed column to
27562776
else if (
2757-
CONTEXTMENU_TYPES.CANCEL_LEFT_FIXED_COLUMN_TO === type
2777+
CONTEXTMENU_NODE_TYPES.CANCEL_LEFT_FIXED_COLUMN_TO === type
27582778
) {
27592779
this.cloneColumns = cancelColumnFixed({
27602780
cloneColumns: this.cloneColumns,
@@ -2763,7 +2783,9 @@ export default {
27632783
});
27642784
}
27652785
// right fixed column to
2766-
else if (CONTEXTMENU_TYPES.RIGHT_FIXED_COLUMN_TO === type) {
2786+
else if (
2787+
CONTEXTMENU_NODE_TYPES.RIGHT_FIXED_COLUMN_TO === type
2788+
) {
27672789
this.cloneColumns = setColumnFixed({
27682790
cloneColumns: this.cloneColumns,
27692791
cellSelectionRangeData,
@@ -2772,7 +2794,7 @@ export default {
27722794
}
27732795
// cancel right fixed column to
27742796
else if (
2775-
CONTEXTMENU_TYPES.CANCEL_RIGHT_FIXED_COLUMN_TO === type
2797+
CONTEXTMENU_NODE_TYPES.CANCEL_RIGHT_FIXED_COLUMN_TO === type
27762798
) {
27772799
this.cloneColumns = cancelColumnFixed({
27782800
cloneColumns: this.cloneColumns,
@@ -2829,45 +2851,45 @@ export default {
28292851
const editInputEditor = this.$refs[this.editInputRef];
28302852

28312853
// cut
2832-
if (CONTEXTMENU_TYPES.CUT === type) {
2854+
if (CONTEXTMENU_NODE_TYPES.CUT === type) {
28332855
editInputEditor.textareaSelect();
28342856
document.execCommand("cut");
28352857
}
28362858
// copy
2837-
else if (CONTEXTMENU_TYPES.COPY === type) {
2859+
else if (CONTEXTMENU_NODE_TYPES.COPY === type) {
28382860
editInputEditor.textareaSelect();
28392861
document.execCommand("copy");
28402862
}
28412863
// paste todo
2842-
// else if (CONTEXTMENU_TYPES.PASTE === type) {
2864+
// else if (CONTEXTMENU_NODE_TYPES.PASTE === type) {
28432865
// editInputEditor.textareaSelect();
28442866
// document.execCommand("paste", null, null);
28452867
// }
28462868
// remove rows
2847-
else if (CONTEXTMENU_TYPES.REMOVE_ROW === type) {
2869+
else if (CONTEXTMENU_NODE_TYPES.REMOVE_ROW === type) {
28482870
tableData.splice(
28492871
startRowIndex,
28502872
endRowIndex - startRowIndex + 1,
28512873
);
28522874
}
28532875
// empty rows
2854-
else if (CONTEXTMENU_TYPES.EMPTY_ROW === type) {
2876+
else if (CONTEXTMENU_NODE_TYPES.EMPTY_ROW === type) {
28552877
this.deleteCellSelectionRangeValue();
28562878
}
28572879
// empty rows
2858-
else if (CONTEXTMENU_TYPES.EMPTY_CELL === type) {
2880+
else if (CONTEXTMENU_NODE_TYPES.EMPTY_CELL === type) {
28592881
this.deleteCellSelectionRangeValue();
28602882
}
28612883
// insert row above
2862-
else if (CONTEXTMENU_TYPES.INSERT_ROW_ABOVE === type) {
2884+
else if (CONTEXTMENU_NODE_TYPES.INSERT_ROW_ABOVE === type) {
28632885
tableData.splice(
28642886
currentRowIndex,
28652887
0,
28662888
createEmptyRowData({ colgroups, rowKeyFieldName }),
28672889
);
28682890
}
28692891
// insert row below
2870-
else if (CONTEXTMENU_TYPES.INSERT_ROW_BELOW === type) {
2892+
else if (CONTEXTMENU_NODE_TYPES.INSERT_ROW_BELOW === type) {
28712893
tableData.splice(
28722894
currentRowIndex + 1,
28732895
0,
@@ -3478,13 +3500,9 @@ export default {
34783500
mounted() {
34793501
this.parentRendered = true;
34803502

3481-
// set header contextmenu event target
3482-
this.headerContextmenuEventTarget = this.$el.querySelector(
3483-
`.${clsName("header")}`,
3484-
);
3485-
// set body contextmenu event target
3486-
this.bodyContextmenuEventTarget = this.$el.querySelector(
3487-
`.${clsName("body")}`,
3503+
// set contextmenu event target
3504+
this.contextmenuEventTarget = this.$el.querySelector(
3505+
`.${clsName("content")}`,
34883506
);
34893507

34903508
// create hook instance
@@ -3625,8 +3643,7 @@ export default {
36253643
showVirtualScrollingPlaceholder,
36263644
cellSelectionData,
36273645
editOption,
3628-
bodyContextmenuOptions,
3629-
headerContextmenuOptions,
3646+
contextmenuOptions,
36303647
allRowKeys,
36313648
enableCellSelection,
36323649
cellSelectionRangeData,
@@ -3885,27 +3902,15 @@ export default {
38853902
};
38863903

38873904
// 直接在组件上写事件，单元测试无法通过。如 on={{"on-node-click":()=>{}}}
3888-
const headerContextmenuProps = {
3889-
ref: this.headerContextmenuRef,
3905+
const contextmenuProps = {
3906+
ref: this.contextmenuRef,
38903907
props: {
3891-
eventTarget: this.headerContextmenuEventTarget,
3892-
options: headerContextmenuOptions,
3908+
eventTarget: this.contextmenuEventTarget,
3909+
options: contextmenuOptions,
38933910
},
38943911
on: {
38953912
"on-node-click": (type) => {
3896-
this.headerContextmenuItemClick(type);
3897-
},
3898-
},
3899-
};
3900-
const bodyContextmenuProps = {
3901-
ref: this.bodyContextmenuRef,
3902-
props: {
3903-
eventTarget: this.bodyContextmenuEventTarget,
3904-
options: bodyContextmenuOptions,
3905-
},
3906-
on: {
3907-
"on-node-click": (type) => {
3908-
this.bodyContextmenuItemClick(type);
3913+
this.contextmenuItemClick(type);
39093914
},
39103915
},
39113916
};
@@ -3935,13 +3940,10 @@ export default {
39353940
</div>
39363941
{/* edit input */}
39373942
{enableCellSelection && <EditInput {...editInputProps} />}
3938-
{/* header contextmenu */}
3939-
{this.enableHeaderContextmenu && (
3940-
<VeContextmenu {...headerContextmenuProps} />
3941-
)}
3942-
{/* body contextmenu */}
3943-
{this.enableBodyContextmenu && (
3944-
<VeContextmenu {...bodyContextmenuProps} />
3943+
{/* contextmenu */}
3944+
{(this.enableHeaderContextmenu ||
3945+
this.enableBodyContextmenu) && (
3946+
<VeContextmenu {...contextmenuProps} />
39453947
)}
39463948
</VueDomResizeObserver>
39473949
);

0 commit comments

Comments
 (0)