@veltra/desktop 1.7.9 → 1.7.10

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

@@ -17,7 +17,7 @@
 
     <section :class="cls.e('wrapper')">
       <div :class="cls.e('content')">
-        <slot></slot>
+        <ContentSlot />
       </div>
 
       <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->
@@ -37,9 +37,18 @@ 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, onBeforeUnmount, shallowRef, watch } from 'vue'
-
-import type { FormItemProps, ComponentSize } from '../../types'
+import {
+  type CSSProperties,
+  type VNode,
+  cloneVNode,
+  computed,
+  onBeforeUnmount,
+  shallowRef,
+  useSlots,
+  watch
+} from 'vue'
+
+import type { FormItemEmits, FormItemProps, ComponentSize } from '../../types'
 import { UGridItem } from '../grid'
 import { UTip } from '../tip'
 import { formItemCls as cls, defineField } from './helper'
@@ -49,6 +58,10 @@ defineOptions({ name: 'UFormItem' })
 
 const props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })
 
+const emit = defineEmits<FormItemEmits>()
+
+const slots = useSlots()
+
 defineSlots<{
   /** 标签插槽 */
   label?: () => any
@@ -56,8 +69,30 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } =
-  injectFormContext()
+const {
+  formProps,
+  registerField,
+  unregisterField,
+  shouldValidate,
+  handleFieldUpdate,
+  handleFieldChange
+} = injectFormContext()
+
+function wrapControlChange(node: VNode) {
+  if (!node || typeof node.type === 'symbol') return node
+
+  return cloneVNode(node, {
+    onChange: (...args: any[]) => {
+      emit('change', ...args)
+      if (props.field) handleFieldChange?.(props.field, ...args)
+    }
+  })
+}
+
+function ContentSlot() {
+  const nodes = slots.default?.() ?? []
+  return nodes.map(wrapControlChange)
+}
 
 const { config } = useConfig()
 
@@ -137,7 +172,7 @@ watch(
     stopWatchFieldValue = watch(
       () => o(model).get(field),
       (value) => {
-        handleFieldChange?.(field, value)
+        handleFieldUpdate?.(field, value)
         fieldItem.validate()
       }
     )

package/src/types/batch-edit.ts

@@ -115,6 +115,8 @@ export interface BatchEditProps extends TableProps {
 
 /** 批量编辑组件定义的事件 */
 export interface BatchEditEmits extends TableEmits {
+  /** 表单控件 change，透传自 UForm */
+  (e: 'field:change', field: string, ...args: any[]): void
   /** 更新数据 */
   (e: 'update:data', value: Record<string, any>[]): void
   /** 点击底部「新增一行」 */

package/src/types/form-item.ts

@@ -9,7 +9,10 @@ export interface FormItemProps extends FormComponentProps {
 }
 
 /** 组件项组件定义的事件 */
-export interface FormItemEmits {}
+export interface FormItemEmits {
+  /** 内部控件 change，参数与控件一致 */
+  (e: 'change', ...args: any[]): void
+}
 
 /** 组件项组件暴露的属性和方法 */
 export interface FormItemExposed {}

package/src/types/form.ts

@@ -10,7 +10,12 @@ export interface FormProps extends ComponentProps {
   cols?: number
   /** 表单数据 */
   model?: Record<string, any>
-  // showModified?: boolean
+  /** 开启后，字段当前值与基准值不同时，在控件下方展示「变更前」 */
+  showModified?: boolean
+  /** 「变更前」标签文案，默认「变更前：」 */
+  modifiedLabel?: string
+  /** 变更前基准数据；未传时回退到 model 引用首次传入时的快照（与 reset 一致） */
+  initialModel?: Record<string, any>
   /** 表单项label宽度 */
   labelWidth?: string | number
   /** 表单项 label 位置 */
@@ -24,7 +29,10 @@ export interface FormProps extends ComponentProps {
 }
 
 export interface FormEmits {
-  (e: 'field:change', field: string, value: any): void
+  /** 控件 change 事件，仅用户操作触发 */
+  (e: 'field:change', field: string, ...args: any[]): void
+  /** model 字段值更新，含编程写入 */
+  (e: 'field:update', field: string, value: any): void
 }
 
 export interface _FormExposed {