@veltra/desktop 1.2.7 → 1.2.9

package/src/components/batch-edit/di.ts

@@ -1,25 +1,26 @@
 import type { BEM } from '@veltra/utils'
-import type { ComputedRef, InjectionKey, ShallowRef, Ref } from 'vue'
+import type { ComputedRef, InjectionKey, ShallowRef } from 'vue'
 
 import type {
   BatchEditEmits,
   BatchEditFeature,
   BatchEditProps,
-  TableExposed,
+  BatchEditStates,
   TableRow
 } from '../../types'
-import type { EditReturned } from './use-edit'
+import type { EditReturned } from './use-handlers'
+
 export const BatchEditDIKey: InjectionKey<
   {
     cls: BEM<'batch-edit', 'u-'>
     props: BatchEditProps
     emit: BatchEditEmits
-    tableRef: ShallowRef<TableExposed | undefined>
+    state: BatchEditStates
     staticFeatures: ComputedRef<Set<BatchEditFeature>>
     dynamicFeatures: ComputedRef<
       Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
     >
     /** 组件或其子节点是否处于聚焦状态 */
-    focused: Ref<boolean>
+    focused: ShallowRef<boolean>
   } & EditReturned
 > = Symbol('BatchEditDIKey')

package/src/components/batch-edit/form-action-header.ts

@@ -0,0 +1,21 @@
+import { AddChild, EditPen, Plus, View } from '@veltra/icons/normal'
+import type { Component } from 'vue'
+
+import type { BatchEditStates } from '../../types'
+
+/** 表单操作类型对应的头部展示信息 */
+export interface FormActionHeaderInfo {
+  icon: Component
+  title: string
+}
+
+/** 按 formActionType 映射的表单头部信息 */
+export const FORM_ACTION_HEADER_MAP: Record<
+  BatchEditStates['formActionType'],
+  FormActionHeaderInfo
+> = {
+  create: { icon: Plus, title: '新增' },
+  update: { icon: EditPen, title: '编辑' },
+  view: { icon: View, title: '查看详情' },
+  createChild: { icon: AddChild, title: '新增子级' }
+}

package/src/components/batch-edit/style.scss

@@ -121,20 +121,6 @@ $root-name: batch-edit;
     }
   }
 
-  @include m.e(form-chip) {
-    display: inline-block;
-    padding: 1px 8px;
-    font-size: 12px;
-    line-height: 18px;
-    border-radius: fn.use-var(radius, default);
-    background-color: fn.use-var(bg-color, default);
-    color: fn.use-var(text-color, second);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 60%;
-  }
-
   @include m.e(form-close) {
     flex-shrink: 0;
   }

package/src/components/batch-edit/use-dialog-effect.ts

@@ -0,0 +1,21 @@
+import { inject, watch } from 'vue'
+
+import { DialogDIKey } from '../dialog/di'
+
+interface Options {
+  /** 关闭表单 */
+  closeForm: () => void
+}
+
+/**
+ * 在表单上的副作用。
+ * 包括：关闭表单
+ */
+export function useDialogEffect(options: Options) {
+  const dialogCtx = inject(DialogDIKey, undefined)
+  if (!dialogCtx) return
+
+  watch(dialogCtx.visible, (visible) => {
+    !visible && options.closeForm?.()
+  })
+}

package/src/components/batch-edit/use-edit-state.ts

@@ -0,0 +1,55 @@
+import { o } from '@cat-kit/core'
+import { shallowReactive, watch } from 'vue'
+
+import type { BatchEditProps, BatchEditStates } from '../../types'
+
+interface Options {
+  props: BatchEditProps
+}
+
+export function useEditState(options: Options) {
+  const { props } = options
+
+  const defaultState: BatchEditStates = {
+    depth: -1,
+    formVisible: false,
+    formActionType: 'create',
+    loading: false,
+    indexPath: []
+  }
+
+  const state = shallowReactive({ ...defaultState })
+
+  function resetState() {
+    if (state.row) {
+      state.row.isCurrent = false
+    }
+
+    Object.keys(state).forEach((key) => {
+      delete state[key]
+    })
+
+    Object.assign(state, defaultState)
+  }
+
+  watch(
+    () => state.row,
+    (row) => {
+      if (row) {
+        if (props.model) {
+          o(props.model).deepExtend(row.data)
+        }
+        state.formActionType = props.readonly ? 'view' : 'update'
+        state.formVisible = true
+        state.depth = row.depth
+        state.indexPath = [...row.indexes]
+
+        return
+      }
+
+      resetState()
+    }
+  )
+
+  return { state, resetState }
+}

package/src/components/batch-edit/use-handlers.ts

@@ -0,0 +1,226 @@
+import { last, o } from '@cat-kit/core'
+import { computed, nextTick, type ShallowRef } from 'vue'
+
+import type {
+  TableRow,
+  BatchEditEmits,
+  BatchEditProps,
+  BatchEditStates,
+  FormExposed
+} from '../../types'
+
+/** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */
+function visitDataByIndexPath<T extends Record<string, unknown>>(
+  roots: T[],
+  indexPath: number[],
+  childrenKey: string
+): T | undefined {
+  if (!indexPath.length) return undefined
+  let currentList: T[] | undefined = roots
+  let node: T | undefined
+  for (let i = 0; i < indexPath.length; i++) {
+    const idx = indexPath[i]!
+    if (!currentList) return undefined
+    node = currentList[idx]
+    if (node === undefined) return undefined
+    if (i < indexPath.length - 1) {
+      const next = node[childrenKey]
+      currentList = Array.isArray(next) ? (next as T[]) : undefined
+    }
+  }
+  return node
+}
+
+interface Options {
+  props: BatchEditProps
+  emit: BatchEditEmits
+  state: BatchEditStates
+  formRef: ShallowRef<FormExposed | null>
+  resetState: () => void
+}
+
+export interface EditReturned {
+  handleSave: () => Promise<void>
+  handleClose: () => void
+  handleCreate: () => void
+  handleDelete: (row: TableRow) => Promise<void>
+  handleInsertToNext: (row: TableRow) => void
+  handleInsertToPrev: (row: TableRow) => void
+  handleInsertChild: (row: TableRow) => void
+}
+
+export function useHandlers(options: Options): EditReturned {
+  const { props, emit, state, resetState, formRef } = options
+
+  const childrenKey = computed(() => {
+    return typeof props.tree === 'string' ? props.tree : 'children'
+  })
+
+  function getInsertData(): Record<string, any> {
+    return o(props.model ?? {}).copy()
+  }
+
+  /**
+   * 插入数据
+   * @param item 数据
+   */
+  function insert(item: Record<string, any>) {
+    const data = [...(props.data ?? [])]
+
+    const parent = visitDataByIndexPath(data ?? [], state.indexPath.slice(0, -1), childrenKey.value)
+
+    if (parent) {
+      const children = parent[childrenKey.value]
+      if (!children) {
+        parent[childrenKey.value] = [item]
+      } else {
+        children.splice(last(state.indexPath), 0, item)
+      }
+    } else {
+      data.splice(last(state.indexPath), 0, item)
+    }
+
+    emit('update:data', data)
+
+    return item
+  }
+
+  /**
+   * 点击新增按钮
+   */
+  function handleCreate() {
+    const { data } = props
+
+    resetState()
+
+    nextTick(() => {
+      state.formActionType = 'create'
+      state.formVisible = true
+      state.depth = 1
+      state.indexPath = [data?.length ?? 0]
+    })
+  }
+
+  function handleInsertToPrev(row: TableRow) {
+    resetState()
+    state.formActionType = 'create'
+    state.formVisible = true
+    state.depth = row.depth
+    state.indexPath = [...row.indexes]
+  }
+
+  function handleInsertToNext(row: TableRow) {
+    resetState()
+    state.formActionType = 'create'
+    state.formVisible = true
+    state.depth = row.depth
+    state.indexPath = [...row.indexes.slice(0, -1), row.index + 1]
+  }
+
+  function handleInsertChild(row: TableRow) {
+    resetState()
+    state.formActionType = 'createChild'
+    state.formVisible = true
+    state.parentRow = row
+    state.depth = row.depth + 1
+    row.expanded = true
+    state.indexPath = [...row.indexes, row.children?.length ?? 0]
+  }
+
+  function runWithLoading<Arg extends any[]>(fn: (...args: Arg) => Promise<void> | void) {
+    return async (...args: Arg) => {
+      state.loading = true
+      if (state.row) {
+        state.row.operating = true
+      }
+      try {
+        await fn.apply(null, args)
+      } catch (error) {
+        console.error(error)
+      }
+      state.loading = false
+      if (state.row) {
+        state.row.operating = false
+      }
+    }
+  }
+
+  /** 保存 */
+  const handleSave = runWithLoading(async () => {
+    const { model, saveMethod } = props
+    const valid = await formRef.value?.validate()
+    if (!model || !valid) return
+
+    let item = getInsertData()
+
+    // 新增
+    if (state.formActionType === 'create' || state.formActionType === 'createChild') {
+      await props.beforeCreate?.(item, state.parentRow?.data)
+      if (saveMethod) {
+        const result = await saveMethod(item, state.formActionType, state.parentRow?.data)
+        if (result) {
+          item = result
+        }
+      }
+      insert(item)
+      return
+    }
+
+    // 普通模式下的编辑
+    if (saveMethod) {
+      const result = await saveMethod(item, state.formActionType, state.parentRow?.data)
+      if (result) {
+        item = result
+      }
+    }
+
+    const { row } = state
+    row &&
+      Object.keys(item).forEach((key) => {
+        o(row.data).set(key, o(item).get(key))
+      })
+  })
+
+  const handleDelete = runWithLoading(async (row: TableRow) => {
+    const { deleteMethod } = props
+
+    if (deleteMethod) {
+      await deleteMethod([row.data])
+    }
+
+    const data = [...(props.data ?? [])]
+
+    const parent = visitDataByIndexPath(data, row.indexes.slice(0, -1), childrenKey.value)
+
+    if (parent) {
+      const children = parent[childrenKey.value]
+      if (children) {
+        children.splice(row.index, 1)
+      } else {
+        console.error('行路径不正确')
+      }
+    } else {
+      data.splice(row.index, 1)
+    }
+
+    if (state.row === row) {
+      resetState()
+    }
+
+    emit('update:data', data)
+  })
+
+  function handleClose() {
+    resetState()
+  }
+
+  return {
+    handleDelete,
+    handleInsertChild,
+    handleInsertToNext,
+    handleInsertToPrev,
+    handleCreate,
+    handleClose,
+    handleSave
+  }
+}

package/src/components/batch-edit/use-shortcut-key.ts

@@ -0,0 +1,58 @@
+import { shallowRef } from 'vue'
+
+import type { BatchEditProps, BatchEditStates } from '../../types'
+
+interface Options {
+  props: BatchEditProps
+  onSave: () => void
+  onClose: () => void
+  state: BatchEditStates
+}
+export function useShortcutKey(options: Options) {
+  const { props, onClose, onSave, state } = options
+  const focused = shallowRef(false)
+
+  function handleFocusIn() {
+    focused.value = true
+  }
+
+  function handleFocusOut(e: FocusEvent) {
+    const root = e.currentTarget as HTMLElement
+    if (!root.contains(e.relatedTarget as Node | null)) {
+      focused.value = false
+    }
+  }
+
+  function runEscape(e: KeyboardEvent) {
+    e.preventDefault()
+    onClose()
+  }
+
+  function runSave(e: KeyboardEvent) {
+    if (!state.formVisible) return
+    if (props.quickEdit && state.formActionType === 'update') return
+    e.preventDefault()
+    onSave()
+  }
+
+  /**
+   * 键盘快捷键（仅组件获焦时生效）：
+   * - Esc          关闭表单
+   * - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）
+   */
+  function handleKeydown(e: KeyboardEvent) {
+    if (!focused.value) return
+    if (props.readonly && e.key !== 'Escape') return
+
+    if (e.key === 'Escape') return runEscape(e)
+
+    const meta = e.metaKey || e.ctrlKey
+    if (!meta) return
+
+    const key = e.key.toLowerCase()
+
+    if (key === 's') return runSave(e)
+  }
+
+  return { focused, handleFocusIn, handleFocusOut, handleKeydown }
+}

package/src/components/form/form.vue

@@ -27,9 +27,9 @@
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
-import { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'
+import { nextTick, toRef, useTemplateRef } from 'vue'
 
-import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
+import type { BreakCols, FormProps, _FormExposed, FormEmits } from '../../types'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
 import { useFormFields } from './use-form-fields'
@@ -39,6 +39,8 @@ defineOptions({ name: 'Form' })
 
 const props = defineProps<FormProps>()
 
+const emit = defineEmits<FormEmits>()
+
 defineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()
 
 const cls = bem('form')
@@ -68,12 +70,17 @@ async function validate(keys?: string[]) {
   return valid
 }
 
+function handleFieldChange(field: string, value: any) {
+  emit('field:change', field, value)
+}
+
 provideFormContext({
   formProps: props,
   registerField,
   unregisterField,
   validateFields: validate,
-  shouldValidate
+  shouldValidate,
+  handleFieldChange
 })
 
 const { getSlotsNodes } = useNodeInterceptor()

package/src/components/form-item/form-item.vue

@@ -56,7 +56,8 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const { formProps, registerField, unregisterField, shouldValidate } = injectFormContext()
+const { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } =
+  injectFormContext()
 
 const { config } = useConfig()
 
@@ -127,7 +128,8 @@ watch(
 
     stopWatchFieldValue = watch(
       () => o(model).get(field),
-      () => {
+      (value) => {
+        handleFieldChange?.(field, value)
         fieldItem.validate()
       }
     )

package/src/types/batch-edit.ts

@@ -1,25 +1,32 @@
 import type { DeconstructValue } from '@veltra/utils'
 
 import type { ActionProps } from './action'
-import type { TableColumn, TableEmits, TableProps, TableRow } from './table'
+import type { TableColumn, TableColumnSlotsScope, TableEmits, TableProps, TableRow } from './table'
 
 /** 批量编辑列 */
-export interface BatchEditColumn extends TableColumn {
-  // /**
-  //  * 是否在列中显示
-  //  * @default true
-  //  */
-  // visible?: boolean
-  // /** 校验规则 */
-  // rules?: ValidateRule
-  // /** 默认值 */
-  // defaultValue?: any | (() => any)
-}
+export interface BatchEditColumn extends TableColumn {}
+
+export type BatchEditFeature = 'create' | 'update' | 'delete' | 'view' | 'createChild'
 
-export type BatchEditFeature = 'create' | 'update' | 'copy' | 'delete' | 'view' | 'createChild'
+export type BatchEditFormStatus = 'hidden'
 
-/** 批量编辑模式 */
-export type BatchEditMode = 'normal' | 'quick'
+/** 批量编辑状态 */
+export interface BatchEditStates {
+  /** 层级 */
+  depth: number
+  /** 表单可见性 */
+  formVisible: boolean
+  /** 表单操作类型 */
+  formActionType: 'create' | 'update' | 'view' | 'createChild'
+  /** 加载状态 */
+  loading: boolean
+  /** 当前编辑行 */
+  row?: TableRow
+  /** 当前编辑或者新增的父级行 */
+  parentRow?: TableRow
+  /** 行索引路径， */
+  indexPath: number[]
+}
 
 /** 批量编辑组件属性 */
 export interface BatchEditProps extends TableProps {
@@ -37,14 +44,13 @@ export interface BatchEditProps extends TableProps {
   /** 只读模式 */
   readonly?: boolean
   /**
-   * 编辑模式
-   * @default 'normal'
-   * @description `quick` 模式下编辑行时表单直接绑定 `row.data` 实时更新，且不调用 `saveMethod`
+   * 开启快速编辑
+   * @description 开启后，编辑行时表单实时写回 `row.data`（经 `model` 中转），且不调用 `saveMethod`
    */
-  mode?: BatchEditMode
+  quickEdit?: boolean
   /**
    * 新增前的钩子
-   * @description 仅作用于 create 类操作。`normal` 模式在保存时调用；`quick` 模式在点击新增类按钮时立即调用。可直接修改传入的 draft 对象
+   * @description 仅作用于 create 类操作，在保存时调用。可直接修改传入的 draft 对象
    */
   beforeCreate?: (
     data: Record<string, any>,
@@ -56,14 +62,14 @@ export interface BatchEditProps extends TableProps {
   deleteMethod?: (data: Record<string, any>[]) => any
   /**
    * 保存方法
-   * @description 仅在 `normal` 模式下、保存时调用（create / update）
+   * @description 保存时调用。`quick` 模式下编辑行时实时写回，不调用此方法；新增时与 `normal` 模式一致
    * @returns 如果返回一个值，那么这个值会被插入，否则插入的为表单值
    */
   saveMethod?: (
     /** 表单数据 */
     data: Record<string, any>,
     /** 操作类型 */
-    actionType: 'create' | 'update',
+    actionType: BatchEditStates['formActionType'],
     /** 父级数据 */
     parentData?: Record<string, any>
   ) => any
@@ -109,6 +115,21 @@ export interface BatchEditEmits extends TableEmits {
   (e: 'update:data', value: Record<string, any>[]): void
 }
 
+export type BatchEditSlots = {
+  form?: (props: {
+    /** 当前编辑的层级 */
+    depth?: number
+    /** 当前编辑的行 */
+    row?: TableRow
+    /** 当前编辑的行索引 */
+    index?: number
+    /** 操作的目标行索引路径 */
+    indexes?: number[]
+  }) => any
+
+  header?: () => any
+} & Partial<{ [key: `column:${string}`]: (props: TableColumnSlotsScope) => any }>
+
 /** 批量编辑组件暴露的属性和方法(组件内部使用) */
 export interface _BatchEditExposed {}
 

package/src/types/form.ts

@@ -21,6 +21,10 @@ export interface FormProps extends ComponentProps {
   disabled?: boolean
 }
 
+export interface FormEmits {
+  (e: 'field:change', field: string, value: any): void
+}
+
 export interface _FormExposed {
   el: ShallowRef<HTMLElement | null | undefined>
   validate: (keys?: string[]) => Promise<boolean>