tor-univer-sheet 1.0.0

package/src/components/UniverSheet/UniverSheet.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="univer-wrapper">
+    <div ref="container" class="univer-container"></div>
+    <IndicatorsUniverSheetConfigDialog ref="indicatorsUniverSheetConfigDialogRef" />
+    <TimeConfigUniverSheetConfigDialog ref="timeConfigUniverSheetConfigDialogRef" />
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue'
+import {
+  createUniver,
+  defaultTheme,
+  LocaleType,
+  greenTheme,
+  mergeLocales,
+  merge,
+  Univer,
+  FUniver,
+  IWorkbookData,
+  ICellData,
+  IRange,
+  IObjectMatrixPrimitiveType,
+  FEventName,
+} from '@univerjs/presets'
+// import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
+import { CommandService, CommandType, ICommandService } from '@univerjs/core'
+import { Inject, Injector } from '@univerjs/core'
+// 导入中文语言包
+import zhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
+import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'
+import UniverPresetSheetsAdvancedZhCN from '@univerjs/preset-sheets-advanced/locales/zh-CN'
+import { UniverSheetsConditionalFormattingPreset } from '@univerjs/presets/preset-sheets-conditional-formatting'
+import sheetsConditionalFormattingZhCN from '@univerjs/presets/preset-sheets-conditional-formatting/locales/zh-CN'
+import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'
+import sheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN'
+import { UniverSheetsDataValidationPreset } from '@univerjs/presets/preset-sheets-data-validation'
+import sheetsDataValidationZhCN from '@univerjs/presets/preset-sheets-data-validation/locales/zh-CN'
+import { UniverSheetsDrawingPreset } from '@univerjs/presets/preset-sheets-drawing'
+import UniverPresetSheetsDrawingZhCN from '@univerjs/preset-sheets-drawing/locales/zh-CN'
+import sheetsDrawingZhCN from '@univerjs/presets/preset-sheets-drawing/locales/zh-CN'
+import { UniverSheetsFilterPreset } from '@univerjs/presets/preset-sheets-filter'
+import sheetsFilterZhCN from '@univerjs/presets/preset-sheets-filter/locales/zh-CN'
+import { UniverSheetsHyperLinkPreset } from '@univerjs/presets/preset-sheets-hyper-link'
+import sheetsHyperLinkZhCN from '@univerjs/presets/preset-sheets-hyper-link/locales/zh-CN'
+// 批注
+import { UniverSheetsNotePreset } from '@univerjs/preset-sheets-note'
+import UniverPresetSheetsNoteZhCN from '@univerjs/preset-sheets-note/locales/zh-CN'
+// vue3支持
+import { UniverVue3AdapterPlugin } from '@univerjs/ui-adapter-vue3'
+
+// 自定义插件
+import SaveButtonPlugin from './plugins/saveButton/SaveButton'
+import SyncContextMenuPlugin from './plugins/syncContextMenu/SyncContextMenuPlugin'
+import IndicatorsContextMenuPlugin from './plugins/indicatorsContextMenu/IndicatorsContextMenuPlugin'
+import ImportFilePlugin from './plugins/importFile/ImportFilePlugin'
+import TimeConfigContextMenuPlugin from './plugins/timeConfigContextMenu/TimeConfigContextMenuPlugin'
+// 插件内弹窗组件
+import IndicatorsUniverSheetConfigDialog from './plugins/indicatorsContextMenu/components/IndicatorsUniverSheetConfigDialog.vue'
+import TimeConfigUniverSheetConfigDialog from './plugins/timeConfigContextMenu/components/TimeConfigUniverSheetConfigDialog.vue'
+
+import '@univerjs/presets/lib/styles/preset-sheets-core.css'
+import '@univerjs/presets/lib/styles/preset-sheets-conditional-formatting.css'
+import '@univerjs/presets/lib/styles/preset-sheets-data-validation.css'
+import '@univerjs/presets/lib/styles/preset-sheets-drawing.css'
+import '@univerjs/presets/lib/styles/preset-sheets-filter.css'
+import '@univerjs/presets/lib/styles/preset-sheets-hyper-link.css'
+import '@univerjs/preset-sheets-note/lib/index.css'
+import '@univerjs/preset-sheets-drawing/lib/index.css'
+import '@univerjs/preset-sheets-advanced/lib/index.css'
+// 其他
+import { globalLoading } from '@/components/GlobalLoading/index'
+import { UniverSheetsProps, ModeEnum } from './UniverSheet.data'
+import { isEmpty, isNullOrUnDef, isNumber } from '@/utils/is'
+import { useMessage } from '@/hooks/useMessage'
+
+const props = withDefaults(defineProps<UniverSheetsProps>(), {
+  mode: ModeEnum.view,
+  showImportFilePlugin: false,
+  showIndicatorsContextMenuPlugin: false,
+  showSyncContextMenuPlugin: false,
+  showTimeConfigContextMenuPlugin: false,
+  license: '',
+})
+
+const emit = defineEmits(['active-sheet-changed'])
+
+const message = useMessage() // 消息弹窗
+const { openLoading, closeLoading } = globalLoading
+
+const indicatorsUniverSheetConfigDialogRef = ref()
+const timeConfigUniverSheetConfigDialogRef = ref()
+
+const container = ref<HTMLDivElement | null>(null)
+let globalUniverApi: FUniver | null = null
+let univer: Univer | null = null
+let ActiveSheetChangedEvent: any = null
+
+async function generate(data = {}) {
+  if (!container.value) return
+  if (globalUniverApi || univer) {
+    destroyUniver()
+  }
+  await nextTick()
+  try {
+    const { univerAPI, univer: univerInstance } = createUniver({
+      locale: LocaleType.ZH_CN,
+      locales: {
+        [LocaleType.ZH_CN]: mergeLocales(
+          zhCN,
+          sheetsCoreZhCN,
+          sheetsConditionalFormattingZhCN,
+          sheetsDataValidationZhCN,
+          sheetsDrawingZhCN,
+          sheetsFilterZhCN,
+          sheetsHyperLinkZhCN,
+          UniverPresetSheetsNoteZhCN,
+          UniverPresetSheetsDrawingZhCN,
+          UniverPresetSheetsAdvancedZhCN,
+        ),
+      },
+      theme: defaultTheme,
+      //   theme: greenTheme,
+      presets: [
+        UniverSheetsCorePreset({
+          container: container.value,
+          toolbar: props.mode !== 'view',
+          contextMenu: props.mode !== 'view',
+          formulaBar: props.mode !== 'view',
+          footer:
+            props.mode !== 'view'
+              ? { sheetBar: true, statisticBar: true, menus: true, zoomSlider: true }
+              : false,
+        }),
+        UniverSheetsConditionalFormattingPreset(),
+        UniverSheetsDataValidationPreset(),
+        UniverSheetsDrawingPreset(),
+        UniverSheetsFilterPreset(),
+        UniverSheetsHyperLinkPreset(),
+        UniverSheetsNotePreset(),
+        UniverSheetsAdvancedPreset({
+          license: props.license,
+          // universerEndpoint: import.meta.env.VITE_BASE_URL
+          // universerEndpoint: ''
+        }),
+      ],
+      plugins: [],
+    })
+
+    globalUniverApi = univerAPI
+    univer = univerInstance
+
+    // 创建一个新的工作簿
+    globalUniverApi.createWorkbook(data)
+    return Promise.resolve(true)
+  } catch (error) {
+    console.error(error)
+    return Promise.reject(error)
+  }
+}
+
+async function registerPlugin() {
+  univer?.registerPlugin(UniverVue3AdapterPlugin)
+  if (props.showImportFilePlugin) {
+    univer?.registerPlugin(ImportFilePlugin as any, { univerAPI: globalUniverApi })
+  }
+  if (props.showIndicatorsContextMenuPlugin) {
+    univer?.registerPlugin(IndicatorsContextMenuPlugin, {
+      univerAPI: globalUniverApi,
+      dialogRef: indicatorsUniverSheetConfigDialogRef.value,
+    })
+  }
+  if (props.showTimeConfigContextMenuPlugin) {
+    univer?.registerPlugin(TimeConfigContextMenuPlugin, {
+      univerAPI: globalUniverApi,
+      dialogRef: timeConfigUniverSheetConfigDialogRef.value,
+    })
+  }
+  if (props.showSyncContextMenuPlugin) {
+    univer?.registerPlugin(SyncContextMenuPlugin, { univerAPI: globalUniverApi })
+  }
+}
+
+async function setPermission() {
+  if (!globalUniverApi) {
+    return Promise.resolve(false)
+  }
+  if (props.mode === ModeEnum.edit) {
+    ActiveSheetChangedEvent = globalUniverApi.addEvent(
+      globalUniverApi.Event.ActiveSheetChanged,
+      ({ workbook, activeSheet }) => {
+        console.log('ActiveSheetChanged', { workbook, activeSheet })
+        emit('active-sheet-changed', { workbook, activeSheet })
+      },
+    )
+    // globalUniverApi.addEvent(globalUniverApi.Event.SheetEditEnded, (params: any) => {
+    //     console.log('SheetEditEnded', params)
+    //     const { workbook, worksheet, row, column, eventType } = params
+    //     console.log('123123', worksheet.getRange(row, column).getValue())
+    // })
+    return Promise.resolve(false)
+  }
+  globalUniverApi.addEvent(globalUniverApi.Event.LifeCycleChanged, ({ stage }) => {
+    if (stage === globalUniverApi?.Enum.LifecycleStages.Rendered) {
+      const fWorkbook = globalUniverApi.getActiveWorkbook()!
+
+      // disable selection
+      fWorkbook.disableSelection()
+
+      // set read only
+      const permission = fWorkbook.getWorkbookPermission()
+      permission.setReadOnly()
+    }
+  })
+}
+
+function destroyUniver() {
+  globalUniverApi?.dispose()
+  univer?.dispose()
+  globalUniverApi = null
+  univer = null
+  if (ActiveSheetChangedEvent) {
+    ActiveSheetChangedEvent.dispose()
+  }
+}
+
+function getWorkbookData() {
+  if (!globalUniverApi) {
+    message.warning('工作簿实例未创建')
+    return
+  }
+  const workbook = globalUniverApi.getActiveWorkbook()
+  return workbook?.save()
+}
+
+async function createUniverSheets(data = {}) {
+  await generate(data)
+  await registerPlugin()
+  await setPermission()
+}
+
+function executeCalculation() {
+  if (!globalUniverApi) {
+    message.warning('工作簿实例未创建')
+    return
+  }
+  // 执行公式计算
+  const formulaEngine = globalUniverApi.getFormula()
+  formulaEngine.executeCalculation()
+}
+
+// 批量更新单元格值
+async function batchUpdateCells(cells: IObjectMatrixPrimitiveType<ICellData>, sheetId: string) {
+  if (!globalUniverApi) {
+    message.warning('工作簿实例未创建')
+    return
+  }
+  if (!sheetId) return
+  if (!cells) return
+  const fWorkbook = globalUniverApi.getActiveWorkbook()
+  const fWorksheet = fWorkbook!.getActiveSheet()
+  const currentSheetId = fWorksheet?.getSheetId()
+  if (currentSheetId !== sheetId) {
+    message.warning('当前工作表与目标工作表不一致')
+    throw new Error('当前工作表与目标工作表不一致')
+  }
+  for (const [rowNum, cols] of Object.entries(cells)) {
+    for (const [colNum, cellData] of Object.entries(cols)) {
+      const { custom } = cellData as ICellData
+      const fRange = fWorksheet.getRange(Number(rowNum), Number(colNum))
+      // const itemData: ICellData = cellData as ICellData
+      // if (!isEmpty(itemData?.v)) {
+      //     itemData.v = isNaN(itemData.v)
+      // }
+
+      fRange.setValue({
+        // 优先默认内容
+        ...fRange.getCellData(),
+        ...(cellData! as ICellData),
+      })
+      if (custom?.cellType === 'indicator') {
+        fRange.createOrUpdateNote({
+          id: `${fRange.getSheetId()}-${rowNum}-${colNum}`, // Unique identifier for the note
+          row: Number(rowNum), // Row index of the cell
+          col: Number(colNum), // Column index of the cell
+          note: `指标名称：${custom?.indicatorName};指标编码: ${custom?.indicatorCode};指标ID: ${custom?.indicatorId};businessDate：${custom?.businessDate}`,
+          width: 200,
+          height: 100,
+          show: false,
+        })
+      }
+    }
+  }
+}
+
+// 获取工作表数据
+async function getActiveSheetData() {
+  if (!globalUniverApi) {
+    return Promise.resolve(false)
+  }
+  const fWorkbook = globalUniverApi.getActiveWorkbook()
+  const fWorksheet = fWorkbook!.getActiveSheet()
+  const sheetSnapshot = fWorksheet.getSheet().getSnapshot()
+  // console.log('sheetSnapshot', sheetSnapshot)
+  return Promise.resolve(sheetSnapshot)
+}
+
+defineExpose({
+  createUniverSheets,
+  destroyUniver,
+  getWorkbookData,
+  getActiveSheetData,
+  batchUpdateCells,
+  executeCalculation,
+})
+
+onMounted(async () => {
+  createUniverSheets()
+})
+
+onBeforeUnmount(() => {
+  destroyUniver()
+})
+</script>
+
+<style scoped>
+.univer-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.univer-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

package/src/components/UniverSheet/data.ts

@@ -0,0 +1,18 @@
+import { generateUUID } from '@/utils'
+import { IWorkbookData, IWorksheetData, ICellData, LocaleType } from '@univerjs/presets'
+
+type UseDataType = {
+  workbookData: IWorkbookData
+  id?: string
+  name?: string
+  appVersion?: string
+}
+export function useData(data: UseDataType): IWorkbookData {
+
+  return {
+    ...data?.workbookData,
+    id: data?.id || generateUUID(),
+    name: data?.name || '未命名',
+    appVersion: data?.appVersion || '1.0.0',
+  }
+}

package/src/components/UniverSheet/plugins/Plugins.ts

@@ -0,0 +1,246 @@
+import { h, Component } from 'vue'
+import { FormSchema } from '@/types/form'
+import { handleClearInput } from '@/utils/index'
+
+// 定义外部组件注入接口
+export interface ExternalComponents {
+  IndicatorPointSelect?: Component
+}
+
+// 全局变量存储外部组件
+let externalComponents: ExternalComponents = {}
+
+// 注册外部组件的方法
+export function registerExternalComponents(components: ExternalComponents) {
+  externalComponents = { ...externalComponents, ...components }
+}
+
+// 获取外部组件
+function getExternalComponent(name: keyof ExternalComponents): Component | undefined {
+  return externalComponents[name]
+}
+
+export enum CycleTypeEnum {
+  无 = 'no',
+  年 = 'year',
+  月 = 'month',
+  周 = 'week',
+  天 = 'day',
+  班组 = 'shift',
+  小时 = 'hour',
+  半小时 = 'half_hour'
+}
+
+export const CycleTypeOptions = [
+  { label: '无', value: 'no' },
+  { label: '年', value: 'year' },
+  { label: '月', value: 'month' },
+  { label: '周', value: 'week' },
+  { label: '天', value: 'day' },
+  { label: '班组', value: 'shift' },
+  { label: '小时', value: 'hour' },
+  { label: '半小时', value: 'half_hour' },
+]
+
+export type ExtendedFormSchema = Omit<FormSchema, 'hidden'> & {
+  hidden?: boolean | ((formModel: Recordable) => boolean)
+}
+
+// Use the new type in your FormType
+export type FormType = {
+  title: string
+  schemas: ExtendedFormSchema[]
+}
+
+const schemas: FormType[] = [
+  {
+    title: '基本信息',
+    schemas: [
+      {
+        label: '指标名称',
+        field: 'indicatorName',
+        component: 'Input',
+        formItemProps: {
+          rules: [{ required: true, message: '请输入指标名称', trigger: 'blur' }]
+        },
+        render: ({ formModel }) => {
+          const IndicatorPointSelect = getExternalComponent('IndicatorPointSelect')
+          return h(IndicatorPointSelect, {
+            modelValue: formModel.indicatorName,
+            onSelect: (select) => {
+              const obj = {
+                indicatorName: select?.indicatorName,
+                indicatorCode: select?.indicatorCoding,
+                indicatorId: select?.id,
+                indicatorDimensionName: select?.indicatorDimensionName,
+                indicatorDimensionConfig: select?.indicatorDimensionConfig
+              }
+              Object.assign(formModel, obj)
+            },
+            onClear: () => {
+              handleClearInput(formModel, [
+                'indicatorName',
+                'indicatorCode',
+                'indicatorId',
+                'indicatorDimensionName',
+                'indicatorDimensionConfig'
+              ])
+            },
+            'onUpdate:modelValue': (val) => {
+              formModel.indicatorName = val
+            }
+          })
+        }
+      },
+      {
+        label: '指标编码',
+        field: 'indicatorCode',
+        component: 'Input',
+        componentProps: {
+          disabled: true
+        },
+        formItemProps: {
+          rules: [{ required: true, message: '请输入指标编码', trigger: 'blur' }]
+        }
+      },
+      {
+        label: '指标ID',
+        field: 'indicatorId',
+        component: 'Input',
+        componentProps: {
+          disabled: true
+        },
+        formItemProps: {
+          rules: [{ required: true, message: '请输入指标指标ID', trigger: 'blur' }]
+        }
+      },
+      {
+        label: '维度名称',
+        field: 'indicatorDimensionName',
+        component: 'Input',
+        componentProps: {
+          disabled: true
+        }
+      },
+      {
+        label: '维度编码',
+        field: 'indicatorDimensionConfig',
+        component: 'Input',
+        componentProps: {
+          disabled: true
+        }
+      },
+      {
+        label: '是否必填',
+        field: 'required',
+        component: 'ElCheckbox'
+      }
+    ]
+  },
+  {
+    title: '时间条件',
+    schemas: [
+      {
+        label: '周期类型',
+        field: 'cycleType',
+        component: 'Select',
+        componentProps: (formModel) => {
+          return {
+            options: CycleTypeOptions.filter(
+              (item: any) => ![CycleTypeEnum.无, CycleTypeEnum.半小时, CycleTypeEnum.班组, CycleTypeEnum.周].includes(item.value)
+            ),
+            onChange: (val) => {
+              formModel.cycleType = val
+              formModel.timeIncrement = 0
+              formModel.defaultShift = false
+              formModel.forwardPush = false
+            }
+          }
+        }
+      },
+      {
+        label: '时间递增量',
+        field: 'timeIncrement',
+        component: 'InputNumber',
+        value: 0,
+        componentProps: {
+          min: 0,
+          precision: 0
+        }
+      },
+      {
+        label: '默认排班班次',
+        field: 'defaultShift',
+        component: 'ElCheckbox',
+        componentProps: (formModel) => {
+          return {
+            onChange: (val) => {
+              formModel.defaultShift = val
+              formModel.forwardPush = false
+            }
+          }
+        },
+        hidden: (formModel) => ![CycleTypeEnum.天, CycleTypeEnum.小时].includes(formModel.cycleType)
+      },
+      {
+        label: '向前推7天',
+        field: 'forwardPush',
+        component: 'ElCheckbox',
+        componentProps: (formModel) => {
+          return {
+            disabled: formModel.defaultShift
+          }
+        },
+        hidden: (formModel) => formModel.cycleType !== CycleTypeEnum.天
+      }
+      // {
+      //     label: '初始时间',
+      //     field: 'initialHour',
+      //     component: 'TimePicker',
+      //     componentProps: {
+      //         valueFormat: 'HH:00:00'
+      //     },
+      //     hidden: (formModel) => formModel.cycleType !== CycleTypeEnum.小时
+      // }
+    ]
+  },
+  {
+    title: '拓展形式',
+    schemas: [
+      {
+        label: '复制方式',
+        field: 'copyType',
+        component: 'Select',
+        componentProps: (formModel) => {
+          return {
+            options: [
+              { label: '向右', value: 'right' },
+              { label: '向下', value: 'down' }
+            ],
+            onClear: () => {
+              handleClearInput(formModel, ['copyType', 'copyInterval'])
+            }
+          }
+        },
+        value: null
+      },
+      {
+        label: '跨多少(行/列)复制',
+        field: 'copyInterval',
+        component: 'InputNumber',
+        value: 0,
+        componentProps: {
+          min: 0,
+          precision: 0
+        },
+        formItemProps: {
+          labelWidth: 130
+        }
+      }
+    ]
+  }
+]
+
+export const indicatorsFormSchemas = schemas
+
+export const timeConfigFormSchemas = schemas.filter((item) => item.title !== '基本信息')

package/src/components/UniverSheet/plugins/importFile/ImportFileIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    t="1741329372991"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5157"
+    width="16"
+    height="16"
+  >
+    <path
+      d="M947.26 577.96a54.296 54.296 0 0 0-54.296 54.288v230.376c0 0.504-0.56 1.208-1.608 1.208H110.5c-1.056 0-1.616-0.704-1.616-1.208V161.376c0-0.512 0.56-1.208 1.616-1.208h191.4a54.288 54.288 0 1 0 0-108.568H110.5C49.74 51.6 0.316 100.84 0.316 161.384v701.248c0 60.528 49.424 109.792 110.184 109.792h780.856c60.752 0 110.184-49.256 110.184-109.792V632.248a54.288 54.288 0 0 0-54.28-54.288z"
+      fill="#17A29E"
+      p-id="5158"
+    ></path>
+    <path
+      d="M1023.356 100.008a54.24 54.24 0 0 0-59.84-48.104c-5.344 0.592-132.504 15.096-267.216 89.432-141.632 78.16-238.824 193.08-286.072 336.552L350.692 305.76a54.28 54.28 0 1 0-102.592 35.496l106.752 308.616a54.312 54.312 0 0 0 69.088 33.552l0.632-0.224 309.424-111.584a54.296 54.296 0 0 0-36.832-102.144l-191.896 69.2c34.664-129.656 115.224-230.552 240.392-300.552 115.944-64.848 228.584-78.16 229.72-78.288a54.272 54.272 0 0 0 47.976-59.824z"
+      fill="#17A29E"
+      p-id="5159"
+    ></path>
+  </svg>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'ImportFileIcon' })
+</script>