cloud-web-corejs 1.0.54-dev.537 → 1.0.54-dev.539

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.537",
+  "version": "1.0.54-dev.539",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/univer/button.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-button
+    @click="openUniverDialog"
+    type="primary"
+    class="button-sty"
+    icon="el-icon-edit"
+  >
+    {{ !!value ? "已维护" : "" }}
+    <univerDialog
+      v-if="showDialog"
+      :visiable.sync="showDialog"
+      :data.sync="value"
+      title="title"
+      :readonly="readonly"
+      @confirm="confirmUniverDialog"
+      :univerConfig="univerConfig"
+    ></univerDialog>
+  </el-button>
+</template>
+<script>
+import univerDialog from "./dialog.vue";
+export default {
+  name: "univerButton",
+  props: {
+    value: String,
+    title: {
+      type: String,
+      default: "excel",
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    univerConfig: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {
+    univerDialog,
+  },
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  methods: {
+    openUniverDialog() {
+      this.showDialog = true;
+    },
+    confirmUniverDialog(result) {
+      this.$emit("input", result);
+      this.$emit("change", result);
+    },
+  },
+};
+</script>

package/src/components/univer/dialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    :fullscreen="true"
+    @close="close"
+    :appendToBody="true"
+    :modalAppendToBody="true"
+    :closeOnClickModal="false"
+    :modal="false"
+    :title="title"
+    custom-class="dialog-style list-dialog dialog-checkbox pd_0"
+  >
+    <div class="cont" id="containt" :class="{ nfootBtn: readonly }">
+      <univer
+        ref="univer"
+        :data="json"
+        v-if="showUniver"
+        :readonly="readonly"
+        :options="univerConfig"
+      ></univer>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="!readonly">
+      <el-button type="primary" plain class="button-sty" @click="close">
+        <i class="el-icon-close el-icon"></i>
+        {{ $t2("取 消", "system.button.cancel2") }}
+      </el-button>
+      <el-button type="primary" @click="dialogSubmit" class="button-sty">
+        <i class="el-icon-check el-icon"></i>
+        {{ $t2("确 定", "system.button.confirm2") }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import univer from "./univerSheet.vue";
+
+export default {
+  name: "univerDialog",
+  components: { univer },
+  props: {
+    visiable: Boolean,
+    data: String,
+    title: {
+      type: String,
+      default: "excel",
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    univerConfig: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  mounted() {},
+  data() {
+    return {
+      showDialog: true,
+      json: {},
+      showUniver: false,
+    };
+  },
+  computed: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      if (this.data) {
+        this.json = JSON.parse(this.data);
+      }
+      this.$nextTick(() => {
+        this.showUniver = true;
+      });
+    },
+    close() {
+      this.showDialog = false;
+      this.$emit("update:visiable", false);
+    },
+    dialogSubmit() {
+      let univerRef = this.$refs.univer;
+      this.$refs.univer.getValue().then((value) => {
+        let result = JSON.stringify(value);
+        this.$emit("confirm", result);
+        this.close();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.list-dialog {
+  .el-dialog__body {
+    height: calc(100% - 42px);
+    .cont {
+      height: calc(100vh - 210px);
+
+      &.nfootBtn {
+        height: calc(100vh - 158px);
+      }
+      &#containt {
+        padding: 0;
+        ::v-deep .grid-container {
+          outline: none;
+          &.detail-wrap .d-cont {
+            height: calc(100vh - 150px);
+            .title .field-wrapper {
+              display: inline-block !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.is-fullscreen .el-dialog__body {
+    .cont {
+      height: calc(100vh - 110px);
+
+      &.nfootBtn {
+        height: calc(100vh - 58px);
+      }
+    }
+  }
+}
+</style>

package/src/components/univer/index.js

@@ -0,0 +1,95 @@
+import Vue from 'vue';
+import dialogComponent from './dialog.vue';
+
+export { default as univerSheet } from "./univerSheet.vue";
+export { default as asuniverDialog } from "./dialog.vue";
+export { default as asuniverButton } from "./button.vue";
+
+/**
+ * 打开univerDialog对话框
+ * @param {Object} options - 对话框配置选项
+ * @param {Boolean} options.visiable - 是否可见
+ * @param {String} options.data - Excel数据（JSON字符串）
+ * @param {String} options.title - 对话框标题
+ * @param {Boolean} options.readonly - 是否只读
+ * @param {Object} options.options - univer配置选项
+ * @param {Function} options.onConfirm - 确认回调函数
+ * @param {Function} options.onClose - 关闭回调函数
+ * @returns {Object} 对话框实例，包含close方法
+ */
+export function openUniverSheetDialog(options = {}) {
+  const {
+    visiable = true,
+    data = '',
+    title = 'excel',
+    readonly = false,
+    onConfirm,
+    onClose,
+    univerConfig = {},
+  } = options;
+
+  // 创建组件实例
+  const DialogConstructor = Vue.extend(dialogComponent);
+  const instance = new DialogConstructor({
+    propsData: {
+      visiable,
+      data,
+      title,
+      readonly,
+      univerConfig: univerConfig,
+    }
+  });
+
+  // 挂载组件
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+
+  // 定义销毁函数
+  const destroyDialog = () => {
+    // 延迟销毁，确保动画完成
+    setTimeout(() => {
+      // 从DOM中移除
+      if (instance.$el && instance.$el.parentNode) {
+        instance.$el.parentNode.removeChild(instance.$el);
+      }
+      // 销毁组件实例
+      instance.$destroy();
+    }, 300);
+  };
+
+  // 监听确认事件
+  if (onConfirm) {
+    instance.$on('confirm', (result) => {
+      onConfirm(result);
+      // 确认后也需要销毁
+      destroyDialog();
+    });
+  } else {
+    // 如果没有传入onConfirm，也要确保确认后销毁
+    instance.$on('confirm', destroyDialog);
+  }
+
+  // 监听关闭事件
+  if (onClose) {
+    instance.$on('update:visiable', (value) => {
+      if (!value) {
+        onClose();
+        // 关闭后销毁
+        destroyDialog();
+      }
+    });
+  } else {
+    // 如果没有传入onClose，也要确保关闭后销毁
+    instance.$on('update:visiable', (value) => {
+      if (!value) destroyDialog();
+    });
+  }
+
+  // 返回实例，允许外部控制
+  return {
+    instance,
+    close: () => {
+      instance.close();
+    }
+  };
+}

package/src/components/univer/{index.vue → univerSheet.vue}

@@ -15,8 +15,6 @@ import { UniverSheetsHyperLinkPreset } from "@univerjs/preset-sheets-hyper-link"
 import sheetsHyperLinkZhCN from "@univerjs/preset-sheets-hyper-link/locales/zh-CN";
 import { UniverSheetsSortPreset } from "@univerjs/preset-sheets-sort";
 import SheetsSortZhCN from "@univerjs/preset-sheets-sort/locales/zh-CN";
-import { UniverSheetsThreadCommentPreset } from "@univerjs/preset-sheets-thread-comment";
-import UniverPresetSheetsThreadCommentZhCN from "@univerjs/preset-sheets-thread-comment/locales/zh-CN";
 import { createUniver, LocaleType, mergeLocales } from "@univerjs/presets";
 import { UniverSheetsCrosshairHighlightPlugin } from "@univerjs/sheets-crosshair-highlight";
 import SheetsCrosshairHighlightZhCN from "@univerjs/sheets-crosshair-highlight/locale/zh-CN";
@@ -32,19 +30,27 @@ import "@univerjs/preset-sheets-sort/lib/index.css";
 import "@univerjs/preset-sheets-filter/lib/index.css";
 import "@univerjs/preset-sheets-conditional-formatting/lib/index.css";
 import "@univerjs/preset-sheets-data-validation/lib/index.css";
-import "@univerjs/preset-sheets-drawing/lib/index.css";
 import "@univerjs/preset-sheets-hyper-link/lib/index.css";
 import "@univerjs/preset-sheets-find-replace/lib/index.css";
-import "@univerjs/preset-sheets-thread-comment/lib/index.css";
 import "@univerjs/sheets-zen-editor/lib/index.css";
 import "@univerjs/sheets-crosshair-highlight/lib/index.css";
+import "@univerjs/preset-sheets-drawing/lib/index.css";
 
 export default {
+  name: "univerSheet",
   props: {
     data: {
       type: Object,
       default: () => {},
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -65,38 +71,50 @@ export default {
   methods: {
     initStyle() {},
     init() {
+      // 基础国际化文件
+      const localeFiles = [
+        sheetsCoreZhCN,
+        SheetsSortZhCN,
+        UniverPresetSheetsFilterZhCN,
+        sheetsConditionalFormattingZhCN,
+        sheetsDataValidationZhCN,
+        UniverPresetSheetsFindReplaceZhCN,
+        sheetsHyperLinkZhCN,
+        SheetsCrosshairHighlightZhCN,
+        SheetsZenEditorZhCN,
+      ];
+
+      // 基础预设
+      const presets = [
+        UniverSheetsCorePreset({
+          container: this.$refs.container,
+          menu: {
+            "sheet.contextMenu.permission": {
+              hidden: true,
+            },
+          },
+        }),
+        UniverSheetsFindReplacePreset(),
+        UniverSheetsSortPreset(),
+        UniverSheetsFilterPreset(),
+        UniverSheetsConditionalFormattingPreset(),
+        UniverSheetsDataValidationPreset(),
+        UniverSheetsFilterPreset(),
+        UniverSheetsHyperLinkPreset(),
+      ];
+
+      // 根据options.enableImage参数条件性添加图片相关功能
+      if (this.options?.enableImage) {
+        localeFiles.push(sheetsDrawingZhCN);
+        presets.push(UniverSheetsDrawingPreset());
+      }
+
       const { univer, univerAPI } = createUniver({
         locale: LocaleType.ZH_CN,
         locales: {
-          [LocaleType.ZH_CN]: mergeLocales(
-            sheetsCoreZhCN,
-            SheetsSortZhCN,
-            UniverPresetSheetsFilterZhCN,
-            sheetsConditionalFormattingZhCN,
-            sheetsDataValidationZhCN,
-            UniverPresetSheetsFindReplaceZhCN,
-            sheetsDrawingZhCN,
-            sheetsHyperLinkZhCN,
-            UniverPresetSheetsThreadCommentZhCN,
-            SheetsCrosshairHighlightZhCN,
-            SheetsZenEditorZhCN
-          ),
+          [LocaleType.ZH_CN]: mergeLocales(...localeFiles),
         },
-        presets: [
-          UniverSheetsCorePreset({
-            container: this.$refs.container,
-            // zIndex: 3000,
-          }),
-          UniverSheetsFindReplacePreset(),
-          UniverSheetsSortPreset(),
-          UniverSheetsFilterPreset(),
-          UniverSheetsConditionalFormattingPreset(),
-          UniverSheetsDataValidationPreset(),
-          UniverSheetsDrawingPreset(),
-          UniverSheetsFilterPreset(),
-          UniverSheetsHyperLinkPreset(),
-          UniverSheetsThreadCommentPreset(),
-        ],
+        presets,
         plugins: [
           /* [
             UniverWatermarkPlugin,
@@ -128,12 +146,25 @@ export default {
 
       this.univerInstance = univer;
       this.univerAPIInstance = univerAPI;
+
+      // 获取工作表
+      const worksheets = this.workbook.getSheets();
+
+      this.$nextTick(() => {
+        const fWorkbook = univerAPI.getActiveWorkbook();
+        const permission = fWorkbook.getWorkbookPermission();
+        if (this.readonly) {
+          // 设置为只读模式
+          permission.setMode("viewer");
+          permission.setPoint(univerAPI.Enum.WorkbookPermissionPoint.CopyContent, true);
+        }
+      });
     },
-    getValue() {
+    async getValue() {
       const fWorkbook = this.univerAPIInstance.getActiveWorkbook();
+      await fWorkbook.endEditingAsync(true);
       const snapshot = fWorkbook.save();
       return snapshot;
-      // return this.workbook.save();
     },
   },
 };
@@ -155,7 +186,12 @@ export default {
 }
 </style>
 <style>
-div[data-radix-popper-content-wrapper] {
+div[data-radix-popper-content-wrapper],
+.univer-popup.univer-popup-enter-done,
+.univer-menu-submenu,
+[data-u-comp="rect-popup"],
+.univer-grid,
+div[role="tooltip"] {
   z-index: 999999 !important;
 }
 </style>

package/src/components/xform/form-designer/form-widget/dialog/univerDialog.vue

@@ -8,7 +8,7 @@
     @close="close"
   >
     <div class="cont designer-view" v-bind="bodyConfig" id="containt">
-      <univer ref="univer" :data="option.data"></univer>
+      <univerSheet ref="univer" :data="json" v-if="showUniver"></univerSheet>
     </div>
     <span
       slot="footer"
@@ -29,11 +29,12 @@
 </template>
 
 <script>
-import univer from "@base/components/univer";
+// import univerSheet from "@base/components/univer/univerSheet.vue";
+import { univerSheet } from "@base/components/univer/index.js";
 
 export default {
   // name: "vabSearchDialog",
-  components: { univer },
+  components: { univerSheet },
   props: {
     visiable: Boolean,
     option: Object,
@@ -41,7 +42,9 @@ export default {
   mixins: [],
   inject: ["getFormConfig"],
 
-  mounted() {},
+  mounted() {
+    this.init();
+  },
   data() {
     var that = this;
     return {
@@ -63,6 +66,8 @@ export default {
       currentLayoutType: null,
       dataId: null,
       formConfig: {},
+      showUniver: true,
+      json: {},
     };
   },
   computed: {
@@ -115,6 +120,14 @@ export default {
     this.currentLayoutType = currentFormConfig.layoutType;
   },
   methods: {
+    init() {
+      if (this.option.data) {
+        this.json = JSON.parse(this.option.data);
+      }
+      this.$nextTick(() => {
+        this.showRender = true;
+      });
+    },
     reload(e, option) {
       let updateParam = option?.updateParam || {};
       if (this.formConfig) Object.assign(this.formConfig, updateParam);
@@ -131,9 +144,12 @@ export default {
       let univerRef = this.$refs.univer;
       if (this.option.confirm) {
         let excelJson = this.$refs.univer.getValue();
-        if (this.option.confirm(excelJson, univerRef, this) !== false) {
-          this.close();
-        }
+        this.$refs.univer.getValue().then((value) => {
+          let result = JSON.stringify(value);
+          if (this.option.confirm(result, univerRef, this) !== false) {
+            this.close();
+          }
+        });
       } else {
         this.close();
       }

package/src/components/xform/form-render/index.vue

@@ -98,14 +98,13 @@
       :option="baseFormulaDialogOption"
     ></baseFormulaDialog>
     <template v-if="showQrCanvas">
-      <canvas
-        ref="qrCanvas"
-        v-show="false"
-        :width="qrWidth"
-        :height="qrHeight"
-      ></canvas>
+      <canvas ref="qrCanvas" v-show="false" :width="qrWidth" :height="qrHeight"></canvas>
     </template>
-    <univerDialog v-if="showUniverDialog" :visiable.sync="showUniverDialog" :option="univerDialogOption"></univerDialog>
+    <univerDialog
+      v-if="showUniverDialog"
+      :visiable.sync="showUniverDialog"
+      :option="univerDialogOption"
+    ></univerDialog>
   </div>
 </template>
 
@@ -114,6 +113,7 @@
 import "./container-item/index";
 import FieldComponents from "../../../components/xform/form-designer/form-widget/field-widget/index";
 import indexMixin from "../../../components/xform/form-render/indexMixin";
+import univerDialog from "../../../components/xform/form-designer/form-widget/dialog/univerDialog.vue";
 
 export default {
   name: "VFormRender",
@@ -135,8 +135,11 @@ export default {
       import(
         "../../../components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue"
       ),
-    univerDialog: () =>
-      import("../../../components/xform/form-designer/form-widget/dialog/univerDialog.vue"),
+    univerDialog,
+    /* univerDialog: () =>
+      import(
+        "../../../components/xform/form-designer/form-widget/dialog/univerDialog.vue"
+      ), */
   },
   mixins: [indexMixin],
 };

package/src/router/modules/customer.js

@@ -80,6 +80,16 @@ export const constantRoutes = [
         },
       },
 
+      {
+        path: "/test_univer2",
+        component: () =>
+          import("@/views/test/test_univer2.vue"),
+        name: "test_univer2",
+        meta: {
+          title: "测试excel",
+        },
+      },
+
       // {
       //   path: "/test_table",
       //   component: () =>