@veltra/desktop 1.1.36 → 1.2.0

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

@@ -2,6 +2,7 @@ import { last, o, safeRun } from '@cat-kit/core'
 import { computed, nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
 
 import type { TableRow, BatchEditEmits, BatchEditProps, TableExposed } from '../../types'
+import type { FormExposed } from '../../types/form'
 
 /** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */
 function visitDataByIndexPath<T extends Record<string, unknown>>(
@@ -29,6 +30,7 @@ interface Options {
   props: BatchEditProps
   emit: BatchEditEmits
   tableRef: ShallowRef<TableExposed | undefined>
+  formRef: ShallowRef<FormExposed | undefined>
 }
 
 export interface BatchEditStates {
@@ -58,8 +60,19 @@ export interface EditReturned {
   handleInsertChild: (row: TableRow) => void
 }
 
+function snapshotData(data?: Record<string, any>) {
+  return safeRun(() => JSON.parse(JSON.stringify(data ?? {})), {})
+}
+
+function replaceModelData(model: Record<string, any>, data: Record<string, any>) {
+  for (const key of Object.keys(model)) {
+    delete model[key]
+  }
+  Object.assign(model, data)
+}
+
 export function useEdit(options: Options): EditReturned {
-  const { props, emit, tableRef } = options
+  const { props, emit, tableRef, formRef } = options
 
   /** 组件状态 */
   const state = shallowReactive<BatchEditStates>({
@@ -88,19 +101,39 @@ export function useEdit(options: Options): EditReturned {
    * 阶段把规范化后的值再写回模型时被误判为「用户已修改」
    */
   let baselineSnapshot: Record<string, any> | undefined
+  let emptySnapshot: Record<string, any> | undefined
 
   function snapshotModelData() {
-    return safeRun(() => JSON.parse(JSON.stringify(props.model?.data ?? {})), {})
+    return snapshotData(props.model)
+  }
+
+  function resetFormData(data?: Record<string, any>) {
+    if (!props.model) return
+    replaceModelData(props.model, snapshotData(data ?? emptySnapshot))
+    formRef.value?.clearValidate()
+  }
+
+  function setFormData(formData: Record<string, any>) {
+    if (!props.model) return
+    replaceModelData(props.model, snapshotData(formData))
   }
 
+  watch(
+    () => props.model,
+    (model) => {
+      emptySnapshot = snapshotData(model)
+    },
+    { immediate: true }
+  )
+
   watch(
     () => state.row,
     (row) => {
-      props.model?.resetData()
+      resetFormData()
       if (row) {
         state.type = 'update'
         state.visible = true
-        props.model?.setData(row.data)
+        setFormData(row.data)
       } else {
         state.visible = false
       }
@@ -111,16 +144,14 @@ export function useEdit(options: Options): EditReturned {
     { flush: 'sync' }
   )
 
-  const changeCb = (field: string, val: any) => {
-    // 与基线比较 — 同值（如组件 mount 时把当前值再写一次）不算"用户修改"
-    if (baselineSnapshot) {
-      const baseVal = o(baselineSnapshot).get(field)
-      if (isSameValue(baseVal, val)) {
-        return
-      }
-    }
-    state.dataUpdated = true
-  }
+  watch(
+    () => props.model,
+    () => {
+      if (!baselineSnapshot || !state.visible) return
+      state.dataUpdated = !isSameValue(baselineSnapshot, snapshotModelData())
+    },
+    { deep: true }
+  )
 
   function isSameValue(a: any, b: any) {
     if (a === b) return true
@@ -136,19 +167,6 @@ export function useEdit(options: Options): EditReturned {
     return false
   }
 
-  watch(
-    () => props.model,
-    (model, oldModel) => {
-      if (oldModel) {
-        oldModel.offChange(changeCb)
-      }
-      if (model) {
-        model.onChange(changeCb)
-      }
-    },
-    { immediate: true }
-  )
-
   const childrenKey = computed(() => {
     return typeof props.tree === 'string' ? props.tree : 'children'
   })
@@ -183,7 +201,7 @@ export function useEdit(options: Options): EditReturned {
   }
 
   function getInsertData(): Record<string, any> {
-    return safeRun(() => JSON.parse(JSON.stringify(props.model?.data ?? {})), {})
+    return snapshotModelData()
   }
 
   async function runCreate(cb: () => void) {
@@ -193,7 +211,7 @@ export function useEdit(options: Options): EditReturned {
     }
     state.row = undefined
     state.type = 'create'
-    props.model?.resetData()
+    resetFormData()
     cb()
 
     let item: Record<string, any> | undefined = undefined
@@ -201,6 +219,8 @@ export function useEdit(options: Options): EditReturned {
     await nextTick()
 
     state.visible = true
+    baselineSnapshot = snapshotModelData()
+    state.dataUpdated = false
 
     if (item) {
       const row = tableRef.value?.getRowByData(item)
@@ -256,8 +276,9 @@ export function useEdit(options: Options): EditReturned {
     runCreate(() => {
       state.depth = row.depth
       insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1]
-      const cloned = safeRun(() => JSON.parse(JSON.stringify(row.data ?? {})), {})
-      props.model?.setData(cloned)
+      setFormData(row.data)
+      baselineSnapshot = snapshotModelData()
+      state.dataUpdated = false
     })
   }
 
@@ -285,8 +306,8 @@ export function useEdit(options: Options): EditReturned {
 
     if (!model) return
 
-    model.clearValidate()
-    const valid = await model.validate()
+    formRef.value?.clearValidate()
+    const valid = await formRef.value?.validate()
 
     if (!valid) return
 
@@ -304,13 +325,14 @@ export function useEdit(options: Options): EditReturned {
     if (state.type === 'create') {
       insert(item)
 
-      return model?.resetData()
+      resetFormData()
+      return
     }
     // 更新
     if (state.type === 'update') {
       const { row } = state
       row &&
-        model.allKeys.forEach((key) => {
+        Object.keys(item).forEach((key) => {
           o(row.data).set(key, o(item).get(key))
         })
     }
@@ -354,7 +376,7 @@ export function useEdit(options: Options): EditReturned {
     state.row = undefined
     state.parentRow = undefined
     state.depth = undefined
-    props.model?.resetData()
+    resetFormData()
     insertIndexes.value = []
   }
 

package/src/components/date-range-picker/date-range-picker.vue

@@ -127,6 +127,8 @@ watch(
     if (isUserActive()) return
     if (val?.length === 2) {
       currentRangeDate.value = [date(val[0]), date(val[1])]
+    } else {
+      currentRangeDate.value = undefined
     }
   },
   { immediate: true }

package/src/components/form/form.vue

@@ -10,26 +10,20 @@
       v-for="{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()"
       :key="node.key"
     >
-      <component v-if="isFormItem || !field" :is="node" />
-
-      <u-form-item v-else v-bind="formItemProps">
+      <u-form-item v-if="!isFormItem && field" v-bind="formItemProps">
         <component
           :is="node"
-          :model-value="modelValue ?? o(model?.data ?? {}).get(field)"
+          :model-value="modelValue ?? o(model ?? {}).get(field)"
           @update:model-value="handleUpdateValue(field, $event)"
         />
-
-        <div :class="cls.e('data-before')" v-if="showInitialNode(field)">
-          <i :class="cls.e('changed-tag')">变更前：</i>
-
-          <component :is="node" readonly :model-value="o(model?.initialData ?? {}).get(field)" />
-        </div>
       </u-form-item>
+
+      <component v-else :is="node" />
     </template>
   </u-grid>
 </template>
 
-<script lang="tsx" setup generic="Model extends FormModel | DynamicFormModel">
+<script lang="tsx" setup>
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
@@ -38,48 +32,38 @@ import { shallowRef, toRef } from 'vue'
 import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
-import type { DynamicFormModel } from './dynamic-form-model'
-import type { FormModel } from './form-model'
+import { useFormFields } from './use-form-fields'
 import { useNodeInterceptor } from './use-node-interceptor'
 
 defineOptions({ name: 'Form' })
 
-const props = defineProps<FormProps<Model>>()
+const props = defineProps<FormProps>()
 
-defineSlots<{
-  default(props: {
-    /** 表单数据 */
-    data: Model['data']
-    /** 表单模型 */
-    model: Model
-  }): any
-}>()
+defineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()
 
 const cls = bem('form')
 
 const breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }
 
-provideFormContext(props)
+const { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } =
+  useFormFields({ props })
 
-const { getSlotsNodes } = useNodeInterceptor({ props })
+provideFormContext({
+  formProps: props,
+  registerField,
+  unregisterField,
+  validateFields: validate,
+  shouldValidate
+})
 
-function handleUpdateValue(field: string, value: any) {
-  const { model } = props
-  if (!model) return
-  o(model.data).set(field, value)
-}
-
-function showInitialNode(field: string) {
-  const { data, initialData } = props.model || {}
+const { getSlotsNodes } = useNodeInterceptor()
 
-  const currentValue = o(data ?? {}).get(field)
-  const initialValue = o(initialData ?? {}).get(field)
-  const notEqual = !(initialValue === currentValue || (!initialValue && !currentValue))
-
-  return props.showInitialData && notEqual
+function handleUpdateValue(field: string, value: any) {
+  if (!props.model) return
+  o(props.model).set(field, value)
 }
 
 const gridRef = shallowRef<GridExposed>()
 
-defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el) })
+defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })
 </script>

package/src/components/form/index.ts

@@ -1,7 +1 @@
 export { default as UForm } from './form.vue'
-
-export { formField, nestField } from './helper'
-export type { NestedFieldMarker } from './helper'
-
-export { FormModel } from './form-model'
-export { DynamicFormModel } from './dynamic-form-model'

package/src/components/form/use-form-fields.ts

@@ -0,0 +1,126 @@
+import { o } from '@cat-kit/core'
+import type { FormFieldItem } from '@veltra/utils'
+import { nextTick, watch } from 'vue'
+
+import type { FormProps } from '../../types/form'
+
+interface Options {
+  props: FormProps
+}
+
+/** 深拷贝 model，保留 undefined 等 o().copy() 会丢弃的值 */
+function snapshotModel(model: Record<string, any>): Record<string, any> {
+  const result: Record<string, any> = {}
+
+  for (const key of Object.keys(model)) {
+    const value = model[key]
+    if (Array.isArray(value)) {
+      result[key] = value.map((item) =>
+        item !== null && typeof item === 'object' ? snapshotModel(item) : item
+      )
+    } else if (value !== null && typeof value === 'object') {
+      result[key] = snapshotModel(value)
+    } else {
+      result[key] = value
+    }
+  }
+
+  return result
+}
+
+/** 按快照逐字段写回 model，支持 undefined 与嵌套对象 */
+function applySnapshot(target: Record<string, any>, source: Record<string, any>) {
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key]
+    const targetValue = target[key]
+
+    if (
+      sourceValue !== null &&
+      typeof sourceValue === 'object' &&
+      !Array.isArray(sourceValue) &&
+      targetValue !== null &&
+      typeof targetValue === 'object' &&
+      !Array.isArray(targetValue)
+    ) {
+      applySnapshot(targetValue, sourceValue)
+      continue
+    }
+
+    if (Array.isArray(sourceValue)) {
+      o(target).set(
+        key,
+        sourceValue.map((item) =>
+          item !== null && typeof item === 'object' ? snapshotModel(item) : item
+        )
+      )
+      continue
+    }
+
+    o(target).set(key, sourceValue)
+  }
+}
+
+export function useFormFields(options: Options) {
+  const { props } = options
+  const fields: Record<string, FormFieldItem> = {}
+
+  let willValidate = true
+
+  /** model 初始快照，供 reset 恢复 */
+  let initialSnapshot: Record<string, any> | undefined
+
+  function runWithoutChangeValidate(fn: () => void) {
+    willValidate = false
+    fn()
+    nextTick(() => {
+      willValidate = true
+    })
+  }
+
+  function shouldValidate() {
+    return willValidate
+  }
+
+  watch(
+    () => props.model,
+    (model) => {
+      initialSnapshot = model ? snapshotModel(model) : undefined
+    },
+    { immediate: true, deep: false }
+  )
+
+  function registerField(field: string, item: FormFieldItem) {
+    fields[field] = item
+  }
+
+  function unregisterField(field: string) {
+    delete fields[field]
+  }
+
+  function clearValidate() {
+    Object.values(fields).forEach((item) => item.clearValidate?.())
+  }
+
+  async function validate(keys?: string[]) {
+    let validList: boolean[]
+    if (keys) {
+      validList = await Promise.all(
+        keys.map((key) => fields[key]?.validate() ?? Promise.resolve(true))
+      )
+    } else {
+      validList = await Promise.all(Object.values(fields).map((field) => field.validate()))
+    }
+    return validList.every((valid) => valid)
+  }
+
+  function reset() {
+    if (!props.model || !initialSnapshot) return
+
+    runWithoutChangeValidate(() => {
+      applySnapshot(props.model!, initialSnapshot!)
+      Object.values(fields).forEach((item) => item.clearValidate?.())
+    })
+  }
+
+  return { fields, registerField, validate, unregisterField, clearValidate, reset, shouldValidate }
+}

package/src/components/form/use-node-interceptor.ts

@@ -1,87 +1,58 @@
 import { o } from '@cat-kit/core'
-import { createIncrease, extractNormalVNodes } from '@veltra/utils'
-import { onBeforeUnmount, useSlots, type VNode } from 'vue'
-
-import type { FormProps } from '../../types'
-
-interface Options {
-  props: FormProps
+import { extractNormalVNodes } from '@veltra/utils'
+import { useSlots, type VNode } from 'vue'
+
+export type SlotRenderItem = {
+  isFormItem: boolean
+  formItemProps?: Record<string, any>
+  node: VNode
+  field?: string
+  modelValue?: any
 }
 
-export type SlotRenderItem =
-  | {
-      isFormItem: true
-      formItemProps: Record<string, any>
-      node: VNode
-      field: undefined
-      modelValue?: any
-    }
-  | {
-      isFormItem: false
-      formItemProps: Record<string, any>
-      node: VNode
-      field: string
-      modelValue?: any
-    }
-
-const id = createIncrease(1)
-
 /**
  * 虚拟node拦截
- * @param options 选项
  * @returns
  */
-export function useNodeInterceptor(options: Options): {
-  getSlotsNodes: () => SlotRenderItem[] | null
-} {
-  const { props } = options
+export function useNodeInterceptor(): { getSlotsNodes: () => SlotRenderItem[] | null } {
   const slots = useSlots()
 
-  const formId = id()
-
   function getSlotsNodes() {
-    const { model } = props
-    const nodes = slots.default?.({ model, data: model?.data })
+    const nodes = slots.default?.()
     if (!nodes?.length) return null
 
     const flattedNodes = extractNormalVNodes(nodes)
 
     const results: SlotRenderItem[] = []
 
-    // 渲染表单后得到的应当校验的字段
-    const fields: string[] = []
-
     let i = 0
     while (i < flattedNodes.length) {
       const node = flattedNodes[i]!
       i++
 
       const { props, type } = node
-      const item = {
-        isFormItem: (type as any)?.name === 'FormItem',
-        formItemProps: o((props ?? {}) as Record<string, any>).pick([
-          'label',
-          'field',
-          'span',
-          'tips',
-          'readonly'
-        ]),
+      const field = props?.field as string | undefined
+      const isFormItem = (type as any)?.name === 'FormItem'
+      const formItemProps = o((props ?? {}) as Record<string, any>).pick([
+        'label',
+        'rules',
+        'span',
+        'tips',
+        'readonly',
+        'field'
+      ]) as Record<string, any>
+
+      results.push({
+        isFormItem,
+        formItemProps,
         node,
-        field: props?.field,
+        field,
         modelValue: props?.['model-value'] ?? props?.modelValue
-      }
-
-      item.field && fields.push(item.field)
-      results.push(item)
+      })
     }
 
-    model.formKeys.set(formId, fields)
     return results
   }
 
-  onBeforeUnmount(() => {
-    props.model?.formKeys.delete(formId)
-  })
-
   return { getSlotsNodes }
 }

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

@@ -2,7 +2,7 @@
   <u-grid-item :span="span" :class="className">
     <label
       v-if="props.label || $slots.label"
-      :class="[cls.e('label'), bem.is('required', fieldRequired)]"
+      :class="[cls.e('label'), bem.is('required', !!rules?.required)]"
       :style="labelStyles"
     >
       <u-tip v-if="tips" :content="tips" :class="cls.e('tips')">
@@ -21,10 +21,10 @@
       </div>
 
       <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->
-      <section :class="cls.e('error')" v-if="!formProps?.readonly && !formProps?.noTips">
+      <section :class="cls.e('error')" v-if="!readonly && !formProps?.noTips">
         <transition name="form-item-tips" mode="out-in">
-          <span :class="cls.e('error-text')" v-if="!!errorTips">
-            {{ errorTips }}
+          <span :class="cls.e('error-text')" v-if="!!errorTip">
+            {{ errorTip }}
           </span>
         </transition>
       </section>
@@ -33,15 +33,17 @@
 </template>
 
 <script lang="tsx" setup>
+import { o } from '@cat-kit/core'
 import { useConfig, useFallbackProps } from '@veltra/compositions'
 import { bem, withUnit } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { type CSSProperties, computed } from 'vue'
+import { type CSSProperties, computed, onBeforeUnmount, shallowRef, watch } from 'vue'
 
 import type { FormItemProps, ComponentSize } from '../../types'
 import { UGridItem } from '../grid'
 import { UTip } from '../tip'
-import { formItemCls as cls } from './helper'
+import { formItemCls as cls, defineField } from './helper'
+import { validateField } from './validate'
 
 defineOptions({ name: 'FormItem' })
 
@@ -54,7 +56,7 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const { formProps } = injectFormContext()
+const { formProps, registerField, unregisterField, shouldValidate } = injectFormContext()
 
 const { config } = useConfig()
 
@@ -63,8 +65,14 @@ const { size, readonly } = useFallbackProps([formProps ?? {}, props], {
   readonly: false
 })
 
+const errorTip = shallowRef<string>()
+/** 递增序号，丢弃过期的异步校验结果 */
+let validateSeq = 0
+/** 最近一次 validate 的 Promise，供过期调用等待最新结果 */
+let latestValidatePromise: Promise<boolean> = Promise.resolve(true)
+
 const className = computed(() => {
-  return [cls.b, cls.m(size.value), bem.is('error', !!errorTips.value)].join(' ')
+  return [cls.b, cls.m(size.value), bem.is('error', !!errorTip.value)].join(' ')
 })
 
 /** label样式 */
@@ -74,17 +82,60 @@ const labelStyles = computed<CSSProperties>(() => {
   }
 })
 
-/** 错误提示 */
-const errorTips = computed<string | undefined>(() => {
-  if (!props.field) return undefined
-  return formProps?.model?.errors.get(props.field)?.[0]
+const fieldItem = defineField({
+  clearValidate() {
+    errorTip.value = ''
+  },
+  async validate() {
+    if (!props.field || !formProps?.model || !props.rules || !shouldValidate?.()) return true
+
+    const seq = ++validateSeq
+
+    latestValidatePromise = validateField(formProps.model!, props.field!, props.rules!).then(
+      (tip) => {
+        if (seq !== validateSeq) return latestValidatePromise
+
+        errorTip.value = tip
+        return !errorTip.value
+      }
+    )
+    return latestValidatePromise
+  }
 })
 
-/** 字段是否必须 */
-const fieldRequired = computed<boolean>(() => {
-  const { field } = props
-  if (!field || readonly.value) return false
-  const required = formProps?.model?.fields[field]?.required
-  return Boolean(required)
+watch(
+  () => props.field,
+  (field, oldField) => {
+    if (oldField) {
+      unregisterField?.(oldField)
+    }
+    if (field) {
+      registerField?.(field, fieldItem)
+    }
+  },
+  { immediate: true }
+)
+
+let stopWatchFieldValue: (() => void) | undefined
+
+watch(
+  [() => formProps?.model, () => props.field],
+  ([model, field]) => {
+    stopWatchFieldValue?.()
+
+    if (!field || !model) return
+
+    stopWatchFieldValue = watch(
+      () => o(model).get(field),
+      () => {
+        fieldItem.validate()
+      }
+    )
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  props.field && unregisterField?.(props.field)
 })
 </script>