cloud-web-corejs 1.0.54-dev.54 → 1.0.54-dev.541

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/univerSheet.vue

@@ -0,0 +1,200 @@
+<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 { 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-hyper-link/lib/index.css";
+import "@univerjs/preset-sheets-find-replace/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 {
+      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 localeFiles = [
+        sheetsCoreZhCN,
+        SheetsSortZhCN,
+        UniverPresetSheetsFilterZhCN,
+        sheetsConditionalFormattingZhCN,
+        sheetsDataValidationZhCN,
+        UniverPresetSheetsFindReplaceZhCN,
+        sheetsHyperLinkZhCN,
+        SheetsCrosshairHighlightZhCN,
+        SheetsZenEditorZhCN,
+      ];
+
+      // 基础预设
+      const presets = [
+        UniverSheetsCorePreset({
+          container: this.$refs.container,
+          menu: {
+            "sheet.contextMenu.permission": {
+              hidden: true,
+            },
+            "sheet.command.add-range-protection-from-toolbar": {
+              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(...localeFiles),
+        },
+        presets,
+        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;
+
+      // 获取工作表
+      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);
+        }
+      });
+    },
+    async getValue() {
+      const fWorkbook = this.univerAPIInstance.getActiveWorkbook();
+      await fWorkbook.endEditingAsync(true);
+      const snapshot = fWorkbook.save();
+      return snapshot;
+    },
+  },
+};
+</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],
+.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/vb-tabs/x-tabs.vue

@@ -1,8 +1,14 @@
 <template>
-  <el-tabs v-model="activeName" class="tab-box tab-morenav" @tab-remove="removeTab" @tab-click="tabClick" ref="tabs">
+  <el-tabs
+    v-model="activeName"
+    class="tab-box tab-morenav"
+    @tab-remove="removeTab"
+    @tab-click="tabClick"
+    ref="tabs"
+  >
     <slot name="default"></slot>
-    <template v-for="(tab,index) in tabs">
-      <slot name="editTab" v-bind="{tab,index,tabs,reloadTabContent}"></slot>
+    <template v-for="(tab, index) in tabs">
+      <slot name="editTab" v-bind="{ tab, index, tabs, reloadTabContent }"></slot>
     </template>
   </el-tabs>
 </template>
@@ -13,14 +19,18 @@ export default {
     value: String,
     paneKeyName: {
       type: String,
-      default: () => "id"
-    }
+      default: () => "id",
+    },
+    tabNameEnable: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   data() {
     return {
       activeName: "0",
-      tabs: []
-    }
+      tabs: [],
+    };
   },
   watch: {
     value(val) {
@@ -28,7 +38,7 @@ export default {
     },
     activeName(val) {
       this.$emit("input", val);
-    }
+    },
   },
   created() {
     if (this.value) {
@@ -36,15 +46,20 @@ export default {
     }
   },
   methods: {
-    openEditTab(row) {
+    openEditTab(row, param, option) {
       let paneKeyName = this.paneKeyName;
-      let tab = this.tabs.find(tab => tab.data[paneKeyName] === row[paneKeyName])
+      let tab = this.tabs.find((tab) => tab.data[paneKeyName] === row[paneKeyName]);
+      let tabParam = option?.tabParam || {};
+      let dataId = row ? row[paneKeyName] : null;
+      let newTab = {
+        data: row,
+        showContent: false,
+        dataId: dataId,
+        param,
+        ...tabParam,
+      };
       if (!tab) {
-        tab = {
-          data: row,
-          showContent: false,
-          dataId: row[paneKeyName]
-        }
+        tab = newTab;
         if (this.tabs.length >= 30) {
           this.tabs.splice(0, 1, tab);
         } else {
@@ -52,23 +67,35 @@ export default {
         }
         this.$nextTick(() => {
           let paneName = this.getCurrentPaneName();
-          tab.paneName = paneName
-        })
+          tab.paneName = paneName;
+        });
+      } else {
+        Object.assign(tab, newTab);
       }
-      this.activeName = row[paneKeyName] + '';
+      let tabNameEnable = this.tabNameEnable;
+      this.activeName = row ? (tabNameEnable ? tab.tabName : row[paneKeyName] + "") : "";
       tab.showContent = false;
       setTimeout(() => {
         tab.showContent = true;
       }, 200);
     },
     removeTab(targetName) {
+      let tabNameEnable = this.tabNameEnable;
       let paneKeyName = this.paneKeyName;
-      let tabIndex = this.tabs.findIndex(tab => tab.data[paneKeyName] + '' === targetName);
+      let tabIndex = this.tabs.findIndex((tab) => {
+        if (tabNameEnable) {
+          return tab.tabName === targetName;
+        } else {
+          return tab.data[paneKeyName] + "" === targetName;
+        }
+      });
       if (this.activeName === targetName) {
         if (tabIndex > 0) {
-          this.activeName = this.tabs[tabIndex - 1].data[paneKeyName] + '';
+          this.activeName = tabNameEnable
+            ? tab.tabName
+            : this.tabs[tabIndex - 1].data[paneKeyName] + "";
         } else {
-          this.activeName = 'second';
+          this.activeName = "second";
         }
       }
       if (tabIndex !== -1) {
@@ -81,18 +108,19 @@ export default {
     },
     getCurrntPaneTarget() {
       let panes = this.$refs.tabs.panes;
-      let target = panes.find(pane => pane.active)
+      let target = panes.find((pane) => pane.active);
       return target;
     },
     reloadTabContent(target, param, tab) {
-      let updateParam = param != null && param.updateParam != null ? param.updateParam : {};
+      let updateParam =
+        param != null && param.updateParam != null ? param.updateParam : {};
       for (let key in updateParam) {
         target.$emit("update:" + key, updateParam[key]);
       }
 
       if (!tab) {
         let activeName = this.activeName;
-        tab = this.tabs.find(item => item.paneName == activeName)
+        tab = this.tabs.find((item) => item.paneName == activeName);
       }
       if (tab) {
         tab.showContent = false;
@@ -103,10 +131,8 @@ export default {
     },
     tabClick(targetName) {
       this.$emit("tabClick", targetName);
-    }
-  }
-}
+    },
+  },
+};
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/wf/addOpinionButton.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-button type="primary" class="button-sty" @click="openDialog"
+              icon="el-icon-plus">{{ $t1('补充意见') }}
+  <el-dialog
+        v-if="showDialog"
+        :visible.sync="showDialog"
+        :modal-append-to-body="false"
+        :close-on-click-modal="false"
+        :modal="false"
+        custom-class="dialog-style wf-dialog"
+        :destroy-on-close="true"
+        :append-to-body="true"
+        v-el-drag-dialog
+        v-el-dialog-center
+      >
+        <template #title>
+          <span class="el-dialog__title">{{ $t1('补充意见') }}</span>
+        </template>
+        <el-form ref="form" :model="formData">
+          <div id="containt">
+            <table class="table-detail">
+              <tbody>
+              <tr>
+                <th>
+                    <span class="t">
+                      {{ $t1('内容') }}
+                    </span>
+                </th>
+                <td>
+                  <el-form-item label="" field="opinion">
+                    <el-input type="textarea" :rows="8" v-model="formData.opinion"></el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" plain class="button-sty" @click="showDialog=false">
+            <i class="el-icon-close el-icon"></i>
+            {{ $t2('取 消', 'system.button.cancel2') }}
+          </el-button>
+          <el-button type="primary" @click="confirmDialog" class="button-sty">
+            <i class="el-icon-check el-icon"></i>
+            {{ $t2('确 定', 'system.button.confirm2') }}
+          </el-button>
+        </span>
+      </el-dialog>
+  </el-button>
+</template>
+<script>
+import mixin from "./mixins/addOpinionButton";
+export default {
+  mixins: [mixin],
+}
+</script>