【17.0.5】报表插件属性面板无法通过齿轮⚙打开

收藏

如下图，在报表设计界面中，点击单元格右上角的齿轮后，没有任何反应，没有出现属性小面板

image.png99277648.png

vue组件部分的代码如下：

<script lang="ts" setup>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-slicers";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-ganttsheet";
import "@grapecity/spread-sheets-reportsheet-addon";
import "@grapecity/spread-sheets-formula-panel";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import "@grapecity/spread-sheets-designer-resources-en";
import GCDesigner from "@grapecity/spread-sheets-designer";
import GcSpreadSheetsDesignerVue from "@grapecity/spread-sheets-designer-vue";
import { gt } from "@src/i18n";
import { routerInst } from "@src/router";
import { MdaAgileReport } from "@src/store/MultidimensionalAnalysis/AgileReport";
import { cloneDeep } from "lodash-es";
type IProps = { store: MdaAgileReport.IStore };
const props = withDefaults(defineProps<IProps>(), {});
const spreadRef = ref();
const { toggle, enter, exit, isFullscreen, isSupported } = useFullscreen(spreadRef);
// @ts-ignore
let fontFamilyCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontFamily);
fontFamilyCommand.dropdownList.unshift({ text: "宋体", value: "simsun" }, { text: "宋体(粗)", value: "simsunbd" }, { text: "微软雅黑", value: "msyh" });
GC.Spread.Common.CultureManager.culture("zh-cn");
const designerConfig = cloneDeep(GCDesigner.Spread.Sheets.Designer.DefaultConfig);
// @ts-ignore
designerConfig.ribbon?.unshift({
id: "actions",
text: gt("actions"),
buttonGroups: [
{
label: "",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "horizontal",
commands: ["save", "archive"],
},
],
},
},
{
label: "execute",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["execute"],
},
],
},
},
],
});
designerConfig.contextMenu?.unshift("pasteFormulaMD", "fullscreen");
designerConfig.commandMap = {
save: {
title: gt("save"),
text: gt("save"),
iconClass: "uc-spread-save",
bigButton: "false",
commandName: "save",
execute: async (context, propertyName, fontItalicChecked) => {
await props.store.activeInst.viewer.saveState();
},
},
archive: {
title: gt("archive"),
text: gt("archive"),
iconClass: "uc-spread-archive",
bigButton: "false",
commandName: "archive",
execute: async (context, propertyName, fontItalicChecked) => {},
},
execute: {
title: gt("execute"),
text: gt("execute"),
iconClass: "uc-spread-execute",
bigButton: "false",
commandName: "execute",
execute: async (context, propertyName, fontItalicChecked) => {
await props.store.activeInst.viewer.execute();
},
},
pasteFormulaMD: {
text: "粘贴多维公式",
commandName: "pasteFormulaMD",
visibleContext: "clickViewPort",
subCommands: ["pasteFormulaMDAbsolute", "pasteFormulaMDRelative"],
},
pasteFormulaMDAbsolute: {
text: "绝对引用",
commandName: "pasteFormulaMDAbsolute",
execute: () => {
props.store.activeInst.viewer.pasteAbsoluteQueryFormula();
},
},
pasteFormulaMDRelative: {
text: "相对引用",
commandName: "pasteFormulaMDRelative",
execute: () => {
props.store.activeInst.viewer.pasteRelativeQueryFormula();
},
},
fullscreen: {
text: "全屏",
commandName: "fullscreen",
execute: async () => {
await toggle();
},
},
};
// @ts-ignore
designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.FontFamily] = fontFamilyCommand;
let timer: NodeJS.Timeout | null = null;
function onSave(event: KeyboardEvent) {
if (!routerInst.currentRoute.value.fullPath?.includes("/boot/mda_agile_report/")) return;
const ctrlKey = event.ctrlKey || event.metaKey;
if (ctrlKey && event.key === "s") {
event.preventDefault();
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(() => {
props.store.activeInst.viewer.saveState();
}, 1000);
}
}
const viewPortWidthRef = ref(0);
const viewPortHeightRef = ref(0);
onMounted(() => {
viewPortWidthRef.value = window.innerWidth;
viewPortHeightRef.value = window.innerHeight;
document.addEventListener("keydown", onSave);
});
onUnmounted(() => {
document.removeEventListener("keydown", onSave);
});
</script>
<template>
<GcSpreadSheetsDesignerVue
ref="spreadRef"
:style="{ height: viewPortHeightRef - 70 + 'px' }"
:config="designerConfig"
:spreadOptions="props.store.activeInst.viewer.spreadOptions"
@designerInitialized="(designer) => props.store.activeInst.viewer.onDesignerInitialized(designer)"
/>
</template>
<style scoped></style>