请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Universail
金牌服务用户   /  发表于:2024-4-2 01:45  /   查看:257  /  回复:8

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

image.png99277648.png

vue组件部分的代码如下:
  1. <!-- @format -->

  2. <script lang="ts" setup>
  3. import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
  4. import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
  5. import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
  6. import GC from "@grapecity/spread-sheets";
  7. import "@grapecity/spread-sheets-pdf";
  8. import "@grapecity/spread-sheets-print";
  9. import "@grapecity/spread-sheets-shapes";
  10. import "@grapecity/spread-sheets-slicers";
  11. import "@grapecity/spread-sheets-pivot-addon";
  12. import "@grapecity/spread-sheets-tablesheet";
  13. import "@grapecity/spread-sheets-ganttsheet";
  14. import "@grapecity/spread-sheets-reportsheet-addon";
  15. import "@grapecity/spread-sheets-formula-panel";
  16. import "@grapecity/spread-sheets-resources-zh";
  17. import "@grapecity/spread-sheets-designer-resources-cn";
  18. import "@grapecity/spread-sheets-designer-resources-en";
  19. import GCDesigner from "@grapecity/spread-sheets-designer";
  20. import GcSpreadSheetsDesignerVue from "@grapecity/spread-sheets-designer-vue";
  21. import { gt } from "@src/i18n";
  22. import { routerInst } from "@src/router";
  23. import { MdaAgileReport } from "@src/store/MultidimensionalAnalysis/AgileReport";
  24. import { cloneDeep } from "lodash-es";

  25. type IProps = { store: MdaAgileReport.IStore };
  26. const props = withDefaults(defineProps<IProps>(), {});
  27. const spreadRef = ref();
  28. const { toggle, enter, exit, isFullscreen, isSupported } = useFullscreen(spreadRef);
  29. // @ts-ignore
  30. let fontFamilyCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontFamily);
  31. fontFamilyCommand.dropdownList.unshift({ text: "宋体", value: "simsun" }, { text: "宋体(粗)", value: "simsunbd" }, { text: "微软雅黑", value: "msyh" });
  32. GC.Spread.Common.CultureManager.culture("zh-cn");
  33. const designerConfig = cloneDeep(GCDesigner.Spread.Sheets.Designer.DefaultConfig);
  34. // @ts-ignore
  35. designerConfig.ribbon?.unshift({
  36.   id: "actions",
  37.   text: gt("actions"),
  38.   buttonGroups: [
  39.     {
  40.       label: "",
  41.       thumbnailClass: "",
  42.       commandGroup: {
  43.         children: [
  44.           {
  45.             direction: "horizontal",
  46.             commands: ["save", "archive"],
  47.           },
  48.         ],
  49.       },
  50.     },
  51.     {
  52.       label: "execute",
  53.       thumbnailClass: "",
  54.       commandGroup: {
  55.         children: [
  56.           {
  57.             direction: "vertical",
  58.             commands: ["execute"],
  59.           },
  60.         ],
  61.       },
  62.     },
  63.   ],
  64. });
  65. designerConfig.contextMenu?.unshift("pasteFormulaMD", "fullscreen");
  66. designerConfig.commandMap = {
  67.   save: {
  68.     title: gt("save"),
  69.     text: gt("save"),
  70.     iconClass: "uc-spread-save",
  71.     bigButton: "false",
  72.     commandName: "save",
  73.     execute: async (context, propertyName, fontItalicChecked) => {
  74.       await props.store.activeInst.viewer.saveState();
  75.     },
  76.   },
  77.   archive: {
  78.     title: gt("archive"),
  79.     text: gt("archive"),
  80.     iconClass: "uc-spread-archive",
  81.     bigButton: "false",
  82.     commandName: "archive",
  83.     execute: async (context, propertyName, fontItalicChecked) => {},
  84.   },
  85.   execute: {
  86.     title: gt("execute"),
  87.     text: gt("execute"),
  88.     iconClass: "uc-spread-execute",
  89.     bigButton: "false",
  90.     commandName: "execute",
  91.     execute: async (context, propertyName, fontItalicChecked) => {
  92.       await props.store.activeInst.viewer.execute();
  93.     },
  94.   },
  95.   pasteFormulaMD: {
  96.     text: "粘贴多维公式",
  97.     commandName: "pasteFormulaMD",
  98.     visibleContext: "clickViewPort",
  99.     subCommands: ["pasteFormulaMDAbsolute", "pasteFormulaMDRelative"],
  100.   },
  101.   pasteFormulaMDAbsolute: {
  102.     text: "绝对引用",
  103.     commandName: "pasteFormulaMDAbsolute",
  104.     execute: () => {
  105.       props.store.activeInst.viewer.pasteAbsoluteQueryFormula();
  106.     },
  107.   },
  108.   pasteFormulaMDRelative: {
  109.     text: "相对引用",
  110.     commandName: "pasteFormulaMDRelative",
  111.     execute: () => {
  112.       props.store.activeInst.viewer.pasteRelativeQueryFormula();
  113.     },
  114.   },
  115.   fullscreen: {
  116.     text: "全屏",
  117.     commandName: "fullscreen",
  118.     execute: async () => {
  119.       await toggle();
  120.     },
  121.   },
  122. };
  123. // @ts-ignore
  124. designerConfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.FontFamily] = fontFamilyCommand;
  125. let timer: NodeJS.Timeout | null = null;
  126. function onSave(event: KeyboardEvent) {
  127.   if (!routerInst.currentRoute.value.fullPath?.includes("/boot/mda_agile_report/")) return;
  128.   const ctrlKey = event.ctrlKey || event.metaKey;
  129.   if (ctrlKey && event.key === "s") {
  130.     event.preventDefault();
  131.     if (timer !== null) {
  132.       clearTimeout(timer);
  133.     }
  134.     timer = setTimeout(() => {
  135.       props.store.activeInst.viewer.saveState();
  136.     }, 1000);
  137.   }
  138. }
  139. const viewPortWidthRef = ref(0);
  140. const viewPortHeightRef = ref(0);
  141. onMounted(() => {
  142.   viewPortWidthRef.value = window.innerWidth;
  143.   viewPortHeightRef.value = window.innerHeight;
  144.   document.addEventListener("keydown", onSave);
  145. });
  146. onUnmounted(() => {
  147.   document.removeEventListener("keydown", onSave);
  148. });
  149. </script>

  150. <template>
  151.   <GcSpreadSheetsDesignerVue
  152.     ref="spreadRef"
  153.     :style="{ height: viewPortHeightRef - 70 + 'px' }"
  154.     :config="designerConfig"
  155.     :spreadOptions="props.store.activeInst.viewer.spreadOptions"
  156.     @designerInitialized="(designer) => props.store.activeInst.viewer.onDesignerInitialized(designer)"
  157.   />
  158. </template>

  159. <style scoped></style>
复制代码


8 个回复

倒序浏览
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-4-2 13:38:06
沙发
您可以检查下是否存在样式冲突,

点击齿轮后属性小面板的样式如下:
image.png826882934.png
回复 使用道具 举报
Universail
金牌服务用户   /  发表于:2024-4-2 14:08:51
板凳
Ellia.Duan 发表于 2024-4-2 13:38
您可以检查下是否存在样式冲突,

点击齿轮后属性小面板的样式如下:

好的,我检查一下样式吧,按理说应该不冲突
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-4-2 17:47:19
地板
回复 使用道具 举报
Universail
金牌服务用户   /  发表于:2024-4-2 20:21:07
5#
Ellia.Duan 发表于 2024-4-2 13:38
您可以检查下是否存在样式冲突,

点击齿轮后属性小面板的样式如下:


没看出来有啥冲突,css我也不是很懂,具体要检查什么?

image.png518051757.png
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-4-3 16:22:04
6#
您好,看到您提供的代码不全,无法运行复现问题,您可以整理一个可以复现问题的demo上传上来,我们根据项目来判断此问题。
回复 使用道具 举报
Universail
金牌服务用户   /  发表于:2024-4-3 16:45:10
7#
Ellia.Duan 发表于 2024-4-3 16:22
您好,看到您提供的代码不全,无法运行复现问题,您可以整理一个可以复现问题的demo上传上来,我们根据项目 ...

项目太大了,不太好抽离出部分代码,尽量吧
回复 使用道具 举报
Universail
金牌服务用户   /  发表于:2024-4-3 16:46:51
8#
PS:目前观察发现好几处需要弹出的小窗口,都有这个问题,点击后没法弹出
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-4-3 17:57:51
9#
您好,您尽量抽离一个可以复现问题的demo 。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部