@veltra/desktop 1.1.35 → 1.2.0

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>

package/src/components/form-item/helper.ts

@@ -1,5 +1,7 @@
 import { o } from '@cat-kit/core'
-import { bem, type BEM, type FormComponentProps } from '@veltra/utils'
+import { bem, type BEM, type FormFieldItem } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from '../../types/form-field'
 
 /**
  * 获取表单项的属性
@@ -7,12 +9,16 @@ import { bem, type BEM, type FormComponentProps } from '@veltra/utils'
  * @returns
  */
 export function getFormItemProps(
-  props: FormComponentProps
-): Pick<FormComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
+  props: FormFieldComponentProps
+): Pick<FormFieldComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
   return o(props).pick(['label', 'field', 'readonly', 'span', 'tips']) as Pick<
-    FormComponentProps,
+    FormFieldComponentProps,
     'label' | 'field' | 'readonly' | 'span' | 'tips'
   >
 }
 
 export const formItemCls: BEM<'form-item'> = bem('form-item')
+
+export function defineField(field: FormFieldItem) {
+  return field
+}

package/src/components/form-item/validate.ts

@@ -0,0 +1,155 @@
+import { isEmpty, o } from '@cat-kit/core'
+import type { Undef } from '@veltra/utils'
+
+export type PresetRule = 'email' | 'phone' | 'num' | 'url' | 'idCard'
+
+/** 字段校验规则 */
+export interface ValidateRule {
+  /** 是否必填 */
+  required?: boolean | string
+  /** 长度单位 */
+  length?: number | [number, string]
+  /** 最小值 */
+  min?: number | [number, string]
+  /** 最大值 */
+  max?: number | [number, string]
+  /** 最小长度 */
+  minLen?: number | [number, string]
+  /** 最大长度 */
+  maxLen?: number | [number, string]
+  /** 匹配 */
+  match?: RegExp | [RegExp, string] | string
+  /** 预设 */
+  preset?: PresetRule
+  /** 自定义校验 */
+  validator?: (value: any, data: Record<string, any>) => Promise<string> | string
+}
+
+const presetRules: Record<PresetRule, (value: string) => string | undefined> = {
+  email(v) {
+    const re = /^([\w_-]+)@([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}$/
+    if (!re.test(v)) {
+      return '邮箱格式不正确'
+    }
+  },
+  phone(v) {
+    const re = /^\d{11}$/
+    if (!re.test(v)) {
+      return '手机号格式不正确'
+    }
+  },
+  num(v) {
+    const re = /^\d+$/
+    if (!re.test(v)) {
+      return '数字格式不正确'
+    }
+  },
+  url(v) {
+    const re = /^(ftp|https?):\/\/([\w_-]+)\.([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}(.*)/
+    if (!re.test(v)) {
+      return '链接格式不正确'
+    }
+  },
+
+  idCard(v) {
+    const re = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
+    if (!re.test(v)) {
+      return '身份证格式不正确'
+    }
+  }
+}
+
+/** 预设规则 */
+const ruleTypes = {
+  required(value: any, required: ValidateRule['required']): Undef<string> {
+    if (required === false) return
+
+    const errMsg = typeof required === 'string' ? required : '该项不能为空'
+    if (isEmpty(value)) return errMsg
+
+    if (Array.isArray(value) && !value.length) return errMsg
+    if (typeof value === 'string' && !value) return errMsg
+  },
+  min(value: any, rule: ValidateRule['min']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须大于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value < _rule) return errMsg
+  },
+  max(value: any, rule: ValidateRule['max']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须小于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value > _rule) return errMsg
+  },
+
+  minLen(value: any, rule: ValidateRule['minLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须大于等于${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length < _rule) return errMsg
+  },
+  maxLen(value: any, rule: ValidateRule['maxLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须小于等于:${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length > _rule) return errMsg
+  },
+  match(value: any, rule: ValidateRule['match']): Undef<string> {
+    if (isEmpty(value) || value === '') return
+    if (typeof rule === 'string') {
+      if (!rule) return
+      rule = new RegExp(rule)
+    }
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项不匹配正则:${_rule}`
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    if (!_rule.test(value)) return errMsg
+  },
+  preset(value: any, rule: ValidateRule['preset']): Undef<string> {
+    if (isEmpty(value) || value === '' || !rule) return
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    const ruleValidator = presetRules[rule]
+    return ruleValidator(value)
+  }
+}
+
+export async function validateField(
+  formData: Record<string, any>,
+  field: string,
+  rules: ValidateRule
+): Promise<Undef<string>> {
+  const value = o(formData).get(field)
+
+  if (!rules) return
+
+  const { validator, required, ...normalRules } = rules
+
+  // 必填要先去校验
+  if (required) {
+    const err = ruleTypes.required(value, required)
+    if (err) return err
+  }
+
+  // 校验规则
+  for (const ruleKey in normalRules) {
+    const validate = ruleTypes[ruleKey as keyof typeof ruleTypes]
+    if (!validate) continue
+
+    const err = validate(value, normalRules[ruleKey])
+
+    if (err) return err
+  }
+
+  // 自定义校验最火校验
+  if (validator) {
+    const err = await validator(value, formData)
+    if (err) return err
+  }
+
+  return
+}