cloud-web-corejs 1.0.54-dev.533 → 1.0.54-dev.536

package/src/components/univer/index.vue

@@ -0,0 +1,161 @@
+<script>
+import { UniverSheetsConditionalFormattingPreset } from "@univerjs/preset-sheets-conditional-formatting";
+import sheetsConditionalFormattingZhCN from "@univerjs/preset-sheets-conditional-formatting/locales/zh-CN";
+import { UniverSheetsCorePreset } from "@univerjs/preset-sheets-core";
+import sheetsCoreZhCN from "@univerjs/preset-sheets-core/locales/zh-CN";
+import { UniverSheetsDataValidationPreset } from "@univerjs/preset-sheets-data-validation";
+import sheetsDataValidationZhCN from "@univerjs/preset-sheets-data-validation/locales/zh-CN";
+import { UniverSheetsDrawingPreset } from "@univerjs/preset-sheets-drawing";
+import sheetsDrawingZhCN from "@univerjs/preset-sheets-drawing/locales/zh-CN";
+import { UniverSheetsFilterPreset } from "@univerjs/preset-sheets-filter";
+import UniverPresetSheetsFilterZhCN from "@univerjs/preset-sheets-filter/locales/zh-CN";
+import { UniverSheetsFindReplacePreset } from "@univerjs/preset-sheets-find-replace";
+import UniverPresetSheetsFindReplaceZhCN from "@univerjs/preset-sheets-find-replace/locales/zh-CN";
+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";
+import { UniverSheetsZenEditorPlugin } from "@univerjs/sheets-zen-editor";
+import SheetsZenEditorZhCN from "@univerjs/sheets-zen-editor/locale/zh-CN";
+// import { UniverWatermarkPlugin } from "@univerjs/watermark";
+
+// import { WORKBOOK_DATA } from "./data";
+
+// import "./styles.css";
+import "@univerjs/preset-sheets-core/lib/index.css";
+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";
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      univerInstance: null,
+      univerAPIInstance: null,
+      workbook: null,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeUnmount() {
+    this.univerInstance?.dispose();
+    this.univerAPIInstance?.dispose();
+    this.univerInstance = null;
+    this.univerAPIInstance = null;
+  },
+  methods: {
+    initStyle() {},
+    init() {
+      const { univer, univerAPI } = createUniver({
+        locale: LocaleType.ZH_CN,
+        locales: {
+          [LocaleType.ZH_CN]: mergeLocales(
+            sheetsCoreZhCN,
+            SheetsSortZhCN,
+            UniverPresetSheetsFilterZhCN,
+            sheetsConditionalFormattingZhCN,
+            sheetsDataValidationZhCN,
+            UniverPresetSheetsFindReplaceZhCN,
+            sheetsDrawingZhCN,
+            sheetsHyperLinkZhCN,
+            UniverPresetSheetsThreadCommentZhCN,
+            SheetsCrosshairHighlightZhCN,
+            SheetsZenEditorZhCN
+          ),
+        },
+        presets: [
+          UniverSheetsCorePreset({
+            container: this.$refs.container,
+            // zIndex: 3000,
+          }),
+          UniverSheetsFindReplacePreset(),
+          UniverSheetsSortPreset(),
+          UniverSheetsFilterPreset(),
+          UniverSheetsConditionalFormattingPreset(),
+          UniverSheetsDataValidationPreset(),
+          UniverSheetsDrawingPreset(),
+          UniverSheetsFilterPreset(),
+          UniverSheetsHyperLinkPreset(),
+          UniverSheetsThreadCommentPreset(),
+        ],
+        plugins: [
+          /* [
+            UniverWatermarkPlugin,
+            {
+              textWatermarkSettings: {
+                content: "Hello, Univer!",
+                fontSize: 16,
+                color: "rgb(0,0,0)",
+                bold: false,
+                italic: false,
+                direction: "ltr",
+                x: 60,
+                y: 36,
+                repeat: true,
+                spacingX: 200,
+                spacingY: 100,
+                rotate: 0,
+                opacity: 0.15,
+              },
+            },
+          ], */
+          UniverSheetsCrosshairHighlightPlugin,
+          UniverSheetsZenEditorPlugin,
+        ],
+      });
+
+      // univerAPI.createWorkbook(WORKBOOK_DATA);
+      this.workbook = univerAPI.createWorkbook(this.data);
+
+      this.univerInstance = univer;
+      this.univerAPIInstance = univerAPI;
+    },
+    getValue() {
+      const fWorkbook = this.univerAPIInstance.getActiveWorkbook();
+      const snapshot = fWorkbook.save();
+      return snapshot;
+      // return this.workbook.save();
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="univer" ref="container" />
+</template>
+
+<style scoped>
+#univer {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+::v-deep aside.univer-h-full {
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>
+<style>
+div[data-radix-popper-content-wrapper] {
+  z-index: 999999 !important;
+}
+</style>

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

@@ -0,0 +1,184 @@
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    v-el-drag-dialog
+    v-el-dialog-center
+    v-bind="dialogConfig"
+    :fullscreen="true"
+    @close="close"
+  >
+    <div class="cont designer-view" v-bind="bodyConfig" id="containt">
+      <univer ref="univer" :data="option.data"></univer>
+    </div>
+    <span
+      slot="footer"
+      class="dialog-footer"
+      v-if="option.showFooter !== false"
+      v-bind="option.footerConfig"
+    >
+      <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 "@base/components/univer";
+
+export default {
+  // name: "vabSearchDialog",
+  components: { univer },
+  props: {
+    visiable: Boolean,
+    option: Object,
+  },
+  mixins: [],
+  inject: ["getFormConfig"],
+
+  mounted() {},
+  data() {
+    var that = this;
+    return {
+      showFormField: "_tt",
+      showDialog: true,
+      falseValue: false,
+      selectMulti: true,
+
+      formJson: {},
+      formData: {},
+      optionData: {},
+      showRender: false,
+      formTemplate: {},
+      /*      formCode: null,*/
+      layoutType: null,
+      conditionParam: null,
+      formInsData: null,
+      $grid: null,
+      currentLayoutType: null,
+      dataId: null,
+      formConfig: {},
+    };
+  },
+  computed: {
+    formCode() {
+      return this.option.formCode;
+    },
+    dialogParam() {
+      return this.option?.param;
+    },
+    /* formConfig() {
+      return this.option?.formConfig;
+    }, */
+    dialogConfig() {
+      let customClass = "dialog-style list-dialog dialog-checkbox pd_0";
+      if (this.option.dialogConfig?.customClass) {
+        customClass = customClass + " " + this.option.dialogConfig.customClass;
+      }
+      let config = {
+        title: this.formTemplate.formName,
+        appendToBody: true,
+        modalAppendToBody: true,
+        // appendToBody: false,
+        // modalAppendToBody: false,
+        closeOnClickModal: false,
+        modal: false,
+        width: "1200px",
+        fullscreen: this.option.fullscreen,
+      };
+      config = Object.assign({}, config, this.option.dialogConfig, { customClass });
+      config.title = this.$t1(config.title);
+      return config;
+    },
+    bodyConfig() {
+      let config = {};
+      let classStr = this.currentLayoutType;
+      if (this.option.bodyConfig?.class) {
+        classStr = classStr + " " + this.option.bodyConfig.class;
+      }
+      if (this.option.showFooter == false) {
+        classStr = classStr + " nfootBtn";
+      }
+      config = Object.assign({}, config, this.option.bodyConfig, { class: classStr });
+      return config;
+    },
+  },
+  created() {
+    this.formConfig = this.option?.formConfig || {};
+
+    let currentFormConfig = this.getFormConfig();
+    this.currentLayoutType = currentFormConfig.layoutType;
+  },
+  methods: {
+    reload(e, option) {
+      let updateParam = option?.updateParam || {};
+      if (this.formConfig) Object.assign(this.formConfig, updateParam);
+      this.showRender = false;
+    },
+
+    close() {
+      let univerRef = this.$refs.univer;
+      this.showDialog = false;
+      this.$emit("update:visiable", false);
+      this.option.close && this.option.close(univerRef, this);
+    },
+    dialogSubmit() {
+      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();
+        }
+      } else {
+        this.close();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .H5 .h5-fixed-bottom-btns {
+  bottom: 95px;
+}
+
+.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>