tor-univer-sheet 1.0.0

package/src/components/UniverSheet/plugins/timeConfigContextMenu/TimeConfigContextMenuPlugin.ts

@@ -0,0 +1,133 @@
+import { Inject, Injector, Plugin, CommandType, ICommandService, touchDependencies, UniverInstanceType, IUniverInstanceService, Workbook } from '@univerjs/core'
+import { ComponentManager, IMenuManagerService, MenuItemType, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup } from '@univerjs/ui'
+import type { IAccessor, ICommand, Dependency } from '@univerjs/core'
+import type { FWorkbook, FWorksheet, FSelection, FRange } from '@univerjs/preset-sheets-core'
+import { FUniver } from '@univerjs/core/facade';
+import type { ICellData } from '@univerjs/presets'
+import { createVNode, render } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+// 自定义ui
+// import { FolderSingle } from '@univerjs/icons'
+import TimeConfigMenu from './components/TimeConfigMenu.vue'
+// import TimeConfigUniverSheetConfigDialog from './components/TimeConfigUniverSheetConfigDialog.vue'
+
+
+// import saveIcon from '@/assets/icons/saveIcon.svg'
+
+// 定义一个名为 CustomButtonPlugin 的类，继承自 Plugin 类
+class TimeConfigContextMenuPlugin extends Plugin {
+  static override pluginName = 'TimeConfigContextMenuPlugin'
+  univerApi: FUniver = {} as FUniver
+  dialogRef: any = null
+
+  constructor(
+    _config: any,
+    // inject injector, required
+    @Inject(Injector) readonly _injector: Injector,
+    // inject menu service, to add toolbar button
+    @Inject(IMenuManagerService) private readonly menuManagerService: IMenuManagerService,
+    // inject command service, to register command handler
+    @Inject(ICommandService) private readonly commandService: ICommandService,
+    // inject component manager, to register icon component
+    @Inject(ComponentManager) private readonly componentManager: ComponentManager,
+  ) {
+    super()
+    this.univerApi = _config.univerAPI
+    this.dialogRef = _config.dialogRef
+  }
+
+  // 动态挂载 ConfigDialog 并显示弹窗
+  private async showConfigDialog(cellData: ICellData, title: '配置时间' | '时间配置详情') {
+    return this.dialogRef.open({ cellData, title })
+    // // 创建一个容器元素
+    // const container = document.createElement('div')
+    // document.body.appendChild(container)
+
+    // // 创建组件实例
+    // const vnode = createVNode(TimeConfigUniverSheetConfigDialog, {
+    //   // 监听 success 事件
+    //   onSuccess: (data: any) => {
+    //     console.log('表单提交数据:', data)
+    //     // 卸载组件
+    //     render(null, container)
+    //     document.body.removeChild(container)
+    //   },
+    //   // 监听关闭事件
+    //   onClose: () => {
+    //     render(null, container)
+    //     document.body.removeChild(container)
+    //   },
+    // })
+
+    // // 挂载组件
+    // render(vnode, container)
+
+    // // 调用 open 方法
+    // return vnode.component?.exposed?.open({ cellData, title })
+
+  }
+  onStarting(): void {
+    this.componentManager.register('TimeConfigMenu', TimeConfigMenu, { framework: 'vue3' })
+    // this.univerApi.registerComponent('TimeConfigMenu', TimeConfigMenu, { framework: 'vue3' })
+    const buttonId = 'time-config-context-menu-plugin'
+    const menuItemFactory = () => ({
+      id: buttonId,
+      title: '配置时间',
+      icon: 'TimeConfigMenu',
+      type: MenuItemType.BUTTON,
+    })
+    this.menuManagerService.mergeMenu({
+      [ContextMenuPosition.MAIN_AREA]: {
+        [ContextMenuGroup.OTHERS]: {
+          [buttonId]: {
+            order: 11,
+            menuItemFactory,
+          },
+        }
+      }
+    })
+    const command: ICommand = {
+      type: CommandType.OPERATION,
+      // command id, same as menu button id
+      id: buttonId,
+      handler: async (accessor: IAccessor) => {
+        const workbook: FWorkbook = this.univerApi.getActiveWorkbook() as FWorkbook;
+        const fWorksheet: FWorksheet = workbook.getActiveSheet() as FWorksheet
+        const fSelection: FSelection = fWorksheet.getSelection() as FSelection;
+        const activeRange: FRange = fSelection.getActiveRange() as FRange;
+        console.log('单元格', activeRange.getCellData())
+        const customData = await this.showConfigDialog(activeRange.getCellData() as ICellData, '配置时间')
+        console.log('customData', customData)
+        if (!customData || !Object.keys(customData).length) {
+          activeRange.setValue({
+            custom: null
+          })
+          activeRange.deleteNote()
+          return true
+        }
+        activeRange.setValue({
+          custom: {
+            ...customData,
+            cellType: 'time'
+          }
+        })
+        const rowNum = activeRange.getRow()
+        const colNum = activeRange.getColumn()
+        activeRange.createOrUpdateNote({
+          id: `${activeRange.getSheetId()}-${rowNum}-${colNum}`,
+          row: rowNum,
+          col: colNum,
+          note: `周期类型：${customData?.cycleType};时间递增量: ${customData?.timeIncrement}`,
+          width: 200,
+          height: 100,
+          show: false,
+        })
+        console.log('配置后的单元格', activeRange.getCellData())
+        return true;
+      }
+    }
+    this.commandService.registerCommand(command);
+  }
+}
+
+export default TimeConfigContextMenuPlugin

package/src/components/UniverSheet/plugins/timeConfigContextMenu/components/TimeConfigMenu.vue

@@ -0,0 +1,10 @@
+<template>
+    <svg t="1772013401059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5972" width="16" height="16">
+        <path
+            d="M536.380952 469.77219c7.41181 4.266667 13.58019 10.435048 17.846858 17.846858H633.904762a24.380952 24.380952 0 0 1 0 48.761904h-79.676952A48.761905 48.761905 0 1 1 487.619048 469.77219V365.714286a24.380952 24.380952 0 0 1 48.761904 0v104.057904zM170.666667 73.142857h585.142857l146.285714 146.285714v682.666667a48.761905 48.761905 0 0 1-48.761905 48.761905H170.666667a48.761905 48.761905 0 0 1-48.761905-48.761905V121.904762a48.761905 48.761905 0 0 1 48.761905-48.761905z m560.761904 48.761905v121.904762h121.904762l-121.904762-121.904762z m-29.354666 407.015619c0.560762-5.607619 0.902095-11.215238 0.902095-16.920381 0-5.705143-0.341333-11.312762-0.902095-16.920381l44.422095-33.889524a23.747048 23.747048 0 0 0 5.948952-31.036952l-47.396571-80.018286a25.526857 25.526857 0 0 0-31.036952-10.532571l-52.077715 20.431238a188.294095 188.294095 0 0 0-29.817904-16.920381l-7.899429-54.320762c-1.852952-11.751619-12.55619-20.601905-24.844191-20.601905h-94.768761c-12.434286 0-22.918095 8.655238-24.868572 20.796953l-7.875047 54.125714a191.463619 191.463619 0 0 0-29.842286 16.920381l-52.199619-20.48c-11.239619-4.217905-24.868571 0.414476-30.866286 10.581333l-47.37219 79.993905a23.82019 23.82019 0 0 0 6.095238 31.207619l44.227047 33.743238a168.96 168.96 0 0 0-0.902095 16.920381c0 5.705143 0.341333 11.337143 0.902095 16.920381l-44.495238 33.889524a23.79581 23.79581 0 0 0-5.851428 31.012571l47.420952 80.067048c6.022095 10.142476 19.18781 15.018667 31.036952 10.483809l52.053334-20.431238a188.708571 188.708571 0 0 0 29.817904 16.896l7.899429 54.369524c1.950476 11.946667 12.385524 20.601905 24.81981 20.601905h94.744381c12.288 0 22.942476-8.850286 24.892952-20.796953l7.875048-54.125714a190.268952 190.268952 0 0 0 29.817904-16.944762l52.199619 20.528762a25.673143 25.673143 0 0 0 30.915048-10.605714l47.299048-79.969524c6.192762-10.313143 3.803429-23.405714-6.046477-31.280762l-44.227047-33.694476z"
+            fill="#FFB63D"
+            p-id="5973"
+        ></path>
+    </svg>
+</template>
+<script setup lang="ts" name="TimeConfigMenu"></script>

package/src/components/UniverSheet/plugins/timeConfigContextMenu/components/TimeConfigUniverSheetConfigDialog.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-dialog :model-value="visible" :title="title" width="90%" @close="handleCancel" append-to-body>
+    <el-form ref="formRef" :model="formData" label-width="120px">
+      <ContentWrap
+        class="cst-card"
+        v-for="(item, index) of formSchema"
+        :key="index"
+        :title="item.title"
+      >
+        <el-row :gutter="16">
+          <el-col v-for="(schema, schemaIndex) of item.schemas" :span="6" :key="schemaIndex">
+            <el-form-item :label="schema.label" :prop="schema.field" v-bind="schema.formItemProps">
+              <component
+                :is="componentMap[schema.component!] || componentMap.Input"
+                v-model="formData[schema.field]"
+                v-bind="
+                  isFunction(schema.componentProps)
+                    ? schema.componentProps(formData)
+                    : schema.componentProps || {}
+                "
+                :placeholder="`请输入${schema.label}`"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </ContentWrap>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="handleReset">重置</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, computed } from 'vue'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import {
+  ElConfigProvider,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElButton,
+  ElMessage,
+  ElRow,
+  ElCol,
+} from 'element-plus'
+import type { ICellData } from '@univerjs/presets'
+import { componentMap } from '@/components/Form/src/componentMap'
+import { isEmpty, isFunction, isBoolean } from '@/utils/is'
+import { timeConfigFormSchemas, FormType, ExtendedFormSchema } from '../../Plugins'
+
+defineOptions({ name: 'TimeConfigUniverSheetConfigDialog' })
+
+let prResolve: any, prReject: any
+const visible = ref(false)
+const title = ref<'配置时间' | '时间详情'>('配置时间')
+const formRef = ref()
+
+const formSchema = computed<FormType[]>(() => {
+  return timeConfigFormSchemas.map((item) => {
+    const arr = item.schemas.filter((item: ExtendedFormSchema) => {
+      if (item.hasOwnProperty('hidden')) {
+        if (isFunction(item.hidden) && item.hidden(formData.value)) {
+          return false
+        }
+        if (isBoolean(item.hidden) && item.hidden) {
+          return false
+        }
+      }
+      return true
+    })
+    return {
+      ...item,
+      schemas: arr,
+    }
+  })
+})
+
+const formData = ref<Recordable>({})
+// 动态初始化 formData 默认值
+function initFormData() {
+  formSchema.value.forEach((group) => {
+    group.schemas.forEach((schema) => {
+      if (isEmpty(schema.value)) {
+        formData.value[schema.field] = null // 默认值
+      } else {
+        formData.value[schema.field] = schema.value
+      }
+    })
+  })
+}
+function close() {
+  if (prReject) prReject()
+}
+
+function handleCancel() {
+  visible.value = false
+}
+
+async function fixData(data: any) {
+  console.log('fixData', formRef.value)
+  await formRef.value?.resetFields()
+  initFormData() // 初始化 formData
+  if (!data) return
+  if (data && Object.keys(data).length > 0) {
+    for (const key of Object.keys(formData.value)) {
+      formData.value[key] = data[key]
+    }
+  }
+}
+async function open(data: { cellData: ICellData; title: '配置时间' | '时间详情' }) {
+  visible.value = true
+  await nextTick()
+
+  const custom = data?.cellData?.custom || {}
+  await fixData(custom)
+  return new Promise((resolve, reject) => {
+    prResolve = resolve
+    prReject = reject
+  })
+}
+
+async function handleReset() {
+  formRef.value?.resetFields()
+}
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate()
+    // emit('success', { ...formData.value })
+    prResolve({ ...formData.value })
+    visible.value = false
+  } catch (error) {
+    ElMessage.error('请填写完整的表单信息')
+  }
+}
+
+defineExpose({
+  handleCancel,
+  close,
+  open,
+})
+</script>
+
+<style scoped>
+.cst-card {
+  border: unset !important;
+}
+</style>

package/src/hooks/useMessage.ts

@@ -0,0 +1,93 @@
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+export const useMessage = () => {
+  return {
+    // 消息提示
+    info(content: string) {
+      ElMessage.info(content)
+    },
+    // 错误消息
+    error(content: string) {
+      ElMessage.error(content)
+    },
+    // 成功消息
+    success(content: string) {
+      ElMessage.success(content)
+    },
+    // 警告消息
+    warning(content: string) {
+      ElMessage.warning(content)
+    },
+    // 弹出提示
+    alert(content: string) {
+      ElMessageBox.alert(content, '系统提示')
+    },
+    // 错误提示
+    alertError(content: string) {
+      ElMessageBox.alert(content, '系统提示', { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content: string) {
+      ElMessageBox.alert(content, '系统提示', { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content: string) {
+      ElMessageBox.alert(content, '系统提示', { type: 'warning' })
+    },
+    // 通知提示
+    notify(content: string) {
+      ElNotification.info(content)
+    },
+    // 错误通知
+    notifyError(content: string) {
+      ElNotification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content: string) {
+      ElNotification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content: string) {
+      ElNotification.warning(content)
+    },
+    // 确认窗体
+    confirm(content: string, tip?: string) {
+      return ElMessageBox.confirm(content, tip ? tip : '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    },
+    // 删除窗体
+    delConfirm(content?: string, tip?: string) {
+      return ElMessageBox.confirm(
+        content ? content : '是否删除所选中数据？',
+        tip ? tip : '系统提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+    },
+    // 导出窗体
+    exportConfirm(content?: string, tip?: string) {
+      return ElMessageBox.confirm(
+        content ? content : '是否确认导出数据项？',
+        tip ? tip : '系统提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+    },
+    // 提交内容
+    prompt(content: string, tip: string) {
+      return ElMessageBox.prompt(content, tip, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+// src/index.ts
+export {
+  registerExternalComponents,
+  indicatorsFormSchemas,
+  timeConfigFormSchemas,
+  type ExternalComponents,
+} from './components/UniverSheet/plugins'
+
+// 导出类型声明
+export type { IndicatorPointSelectProps } from './types/external-components'

package/src/main.ts

@@ -0,0 +1,14 @@
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import { registerExternalComponents } from './index'
+import IndicatorPointSelect from './components/IndicatorPointSelect/IndicatorPointSelect.vue'
+
+// 开发环境引入 element-plus 样式
+import 'element-plus/dist/index.css'
+
+registerExternalComponents({
+  IndicatorPointSelect,
+})
+
+createApp(App).mount('#app')

package/src/types/components.d.ts

@@ -0,0 +1,52 @@
+export type ComponentName =
+  | 'Radio'
+  | 'RadioButton'
+  | 'Checkbox'
+  | 'ElCheckbox'
+  | 'CheckboxButton'
+  | 'Input'
+  | 'Autocomplete'
+  | 'InputNumber'
+  | 'Select'
+  | 'Cascader'
+  | 'Switch'
+  | 'Slider'
+  | 'TimePicker'
+  | 'DatePicker'
+  | 'Rate'
+  | 'ColorPicker'
+  | 'Transfer'
+  | 'Divider'
+  | 'TimeSelect'
+  | 'SelectV2'
+  | 'TreeSelect'
+
+export type ColProps = {
+  span?: number
+  xs?: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+  tag?: string
+}
+
+export type ComponentOptions = {
+  label?: string
+  value?: FormValueType
+  disabled?: boolean
+  key?: string | number
+  children?: ComponentOptions[]
+  options?: ComponentOptions[]
+} & Recordable
+
+export type ComponentOptionsAlias = {
+  labelField?: string
+  valueField?: string
+}
+
+export type ComponentProps = {
+  optionsAlias?: ComponentOptionsAlias
+  options?: ComponentOptions[]
+  optionsSlot?: boolean
+} & Recordable

package/src/types/external-components.d.ts

@@ -0,0 +1,16 @@
+// src/types/external-components.d.ts
+import type { Component } from 'vue'
+
+export interface IndicatorPointSelectProps {
+  modelValue?: string | number
+  type?: 'radio' | 'checkbox'
+  callback?: () => boolean
+  extra?: Record<string, any>
+  onSelect?: (data: Recordable) => void
+  onClear?: () => void
+  'onUpdate:modelValue'?: (value: string | number) => void
+}
+
+export interface ExternalComponents {
+  IndicatorPointSelect?: Component
+}

package/src/types/form.d.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties } from 'vue'
+import { ColProps, ComponentProps, ComponentName } from '@/types/components'
+import type { FormItemProps as ELementFormItemProps } from 'element-plus'
+
+export type FormSetPropsType = {
+  field: string
+  path: string
+  value: any
+}
+
+export type FormValueType = string | number | string[] | number[] | boolean | undefined | null
+
+export type FormItemProps = {
+  labelWidth?: string | number
+  required?: boolean
+  rules?: Recordable
+  error?: string
+  showMessage?: boolean
+  inlineMessage?: boolean
+  style?: CSSProperties
+  labelPosition?: 'left' | 'right' | 'top'
+}
+
+type FormItemPropsFnParams = {
+  schema: FormItemProps
+  formModel: Recordable
+}
+
+export type FormSchema = {
+  // 唯一值
+  field: string
+  // 标题
+  label?: string
+  // 提示
+  labelMessage?: string
+  // col组件属性
+  colProps?: ColProps
+  // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
+  componentProps?: { slots?: Recordable } & ComponentProps | ((formModel: Recordable) => Recordable)
+  // formItem组件属性
+  formItemProps?: FormItemProps | ((params: FormItemPropsFnParams) => FormItemProps)
+  // 渲染的组件
+  component?: ComponentName
+  // 初始值
+  value?: FormValueType
+  // 是否隐藏
+  hidden?: boolean | ((formModel: Recordable) => boolean)
+  // 远程加载下拉项
+  api?: <T = any>() => Promise<T>
+  // 自定义渲染
+  render?: ({ schema, formModel }: { schema: FormSchema; formModel: Recordable }) => VNode
+}

package/src/utils/decimal.ts

@@ -0,0 +1,98 @@
+import Decimal from 'decimal.js'
+
+class DecimalChain {
+  private value: Decimal
+
+  constructor(value: string | number | Decimal) {
+    this.value = new Decimal(value)
+  }
+
+  /**
+   * 加法运算
+   * @param num 要加的数
+   * @returns DecimalChain 实例，支持链式调用
+   */
+  add(num: string | number | Decimal): DecimalChain {
+    this.value = this.value.add(num || 0)
+    return this
+  }
+
+  /**
+   * 减法运算
+   * @param num 要减的数
+   * @returns DecimalChain 实例，支持链式调用
+   */
+  subtract(num: string | number | Decimal): DecimalChain {
+    this.value = this.value.sub(num || 0)
+    return this
+  }
+
+  /**
+   * 乘法运算
+   * @param num 要乘的数
+   * @returns DecimalChain 实例，支持链式调用
+   */
+  multiply(num: string | number | Decimal): DecimalChain {
+    this.value = this.value.mul(num || 0)
+    return this
+  }
+
+  /**
+   * 除法运算
+   * @param num 要除的数
+   * @returns DecimalChain 实例，支持链式调用
+   * @throws 当除数为0时抛出错误
+   */
+  divide(num: string | number | Decimal): DecimalChain {
+    const divisor = new Decimal(num)
+    if (divisor.isZero()) {
+      throw new Error('除数是0')
+    }
+    this.value = this.value.div(divisor)
+    return this
+  }
+
+  /**
+   * 保留小数位数
+   * @param dp 保留的小数位数
+   * @param rounding 舍入模式，默认为四舍五入
+   * @returns DecimalChain 实例，支持链式调用
+   */
+  toFixed(dp: number, rounding?: Decimal.Rounding): DecimalChain {
+    this.value = new Decimal(this.value.toFixed(dp, rounding!))
+    return this
+  }
+
+  /**
+   * 返回当前值
+   * @returns Decimal 实例
+   */
+  valueOf(): Decimal {
+    return this.value
+  }
+
+  /**
+   * 转换为字符串
+   * @returns 字符串表示
+   */
+  toString(): string {
+    return this.value.toString()
+  }
+
+  /**
+   * 转换为数字
+   * @returns 数字表示
+   */
+  toNumber(): number {
+    return this.value.toNumber()
+  }
+}
+
+/**
+ * 创建一个支持链式调用的 Decimal 实例
+ * @param value 初始值
+ * * @returns DecimalChain 实例
+ */
+export function decimal(value: string | number | Decimal = 0): DecimalChain {
+  return new DecimalChain(value)
+}