@aspire-ui/element-component-pro 1.0.4 → 1.0.6

package/src/ProForm/ProForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="formWrapRef" class="ecp-pro-form">
-    <el-form class="ecp-pro-form" ref="formRef" :model="formModel" :rules="formRules" :label-width="effectiveProps.labelWidth"
+    <el-form class="ecp-pro-form" ref="formRef" :model="currentFormModel" :rules="formRules" :label-width="effectiveProps.labelWidth"
       :label-position="effectiveProps.labelPosition" :size="effectiveProps.size" :disabled="effectiveProps.disabled"
       v-bind="$attrs" v-on="formListeners">
       <slot name="formHeader" />
@@ -8,12 +8,12 @@
         <template v-for="schema in displaySchemas">
           <el-col v-if="shouldShow(schema)" :key="schema.field" v-bind="getColProps(schema)"
             :offset="schema.colProps?.offset ?? effectiveProps.baseColProps?.offset ?? 0" :data-field="schema.field">
-            <ProFormItem :schema="schema" :form-model="formModel" :form-disabled="effectiveProps.disabled"
+            <ProFormItem :schema="schema" :form-model="currentFormModel" :form-disabled="effectiveProps.disabled"
               :auto-placeholder="effectiveProps.autoSetPlaceholder" :form-action-type="formActionRef"
-              :custom-components="formCustomComponents">
+              :custom-components="formCustomComponents" :on-field-change="handleFieldChange">
               <template v-if="slots[getSlotName(schema)]">
-                <slot :name="getSlotName(schema)" :model="formModel" :schema="schema" :field="schema.field"
-                  :values="formModel" />
+                <slot :name="getSlotName(schema)" :model="currentFormModel" :schema="schema" :field="schema.field"
+                  :values="currentFormModel" />
               </template>
             </ProFormItem>
           </el-col>
@@ -65,6 +65,7 @@ import type { ProFormSchema, ProFormProps, FormActionType, ColEx, ScrollToFieldO
 const props = withDefaults(
   defineProps<{
     schemas?: ProFormSchema[]
+    modelValue?: Record<string, unknown>
     initialValues?: Record<string, unknown>
     labelWidth?: string
     labelPosition?: 'left' | 'right' | 'top'
@@ -118,6 +119,7 @@ const emit = defineEmits<{
   (e: 'submit', values: Record<string, unknown>): void
   (e: 'reset'): void
   (e: 'register', formAction: FormActionType): void
+  (e: 'update:modelValue', values: Record<string, unknown>): void
 }>()
 const slots = useSlots()
 const formRef = ref()
@@ -148,10 +150,17 @@ const getEffectiveSpan = (colProps?: ColEx | null, baseColProps?: ColEx | null,
 
 const { getSetting: getComponentSetting } = useComponentSetting()
 const effectiveProps = computed(() => ({ ...getComponentSetting('ProForm'), ...props, ...innerProps.value }))
+const controlledModelValue = computed(() => effectiveProps.value.modelValue)
+const isControlled = computed(() => controlledModelValue.value !== undefined)
+const currentFormModel = computed<Record<string, unknown>>(() => {
+  return isControlled.value
+    ? (controlledModelValue.value ?? {})
+    : formModel.value
+})
 /** 传给 ProFormItem 的自定义组件映射：显式合并 setSetting 与 props，避免响应式代理导致组件引用丢失 */
 const formCustomComponents = computed(() => ({
   ...(getComponentSetting('ProForm').components as Record<string, unknown> | undefined) ?? {},
-  ...(props.components ?? {}),
+  ...(effectiveProps.value.components ?? {}),
   ...(innerProps.value.components ?? {}),
 }))
 const effectiveActionColOptions = computed(() => effectiveProps.value.actionColOptions ?? { span: 24 })
@@ -190,7 +199,6 @@ const hasMoreFields = computed(() => {
   const lines = effectiveProps.value.alwaysShowLines ?? 1
   const baseColProps = effectiveProps.value.baseColProps
   const maxVisible = getVisibleSchemaCount(schemas, baseColProps, lines, windowWidth.value)
-  console.log(schemas.length, maxVisible)
   return schemas.length > maxVisible
 })
 
@@ -213,13 +221,13 @@ const shouldShow = (schema: ProFormSchema) => {
   let ifShow = true
   let show = true
   if (typeof schema.ifShow === 'function') {
-    ifShow = schema.ifShow({ schema, values: formModel.value, model: formModel.value, field: schema.field })
+    ifShow = schema.ifShow({ schema, values: currentFormModel.value, model: currentFormModel.value, field: schema.field })
   }
   if (typeof schema.ifShow === 'boolean') {
     ifShow = schema.ifShow
   }
   if (typeof schema.show === 'function') {
-    show = schema.show({ schema, values: formModel.value, model: formModel.value, field: schema.field })
+    show = schema.show({ schema, values: currentFormModel.value, model: currentFormModel.value, field: schema.field })
   }
   if (typeof schema.show === 'boolean') {
     show = schema.show
@@ -230,16 +238,44 @@ const getColProps = (schema: ProFormSchema) => {
   return schema.colProps ?? effectiveProps.value.baseColProps ?? {}
 }
 const getSlotName = (schema: ProFormSchema) => schema.slot || schema.field
+/**
+ * 
+ * @param baseModel 
+ * @param preserveExisting 
+ */
+const resolveSchemaModel = (baseModel?: Record<string, unknown>, preserveExisting = true) => {
+  const nextModel = preserveExisting ? { ...(baseModel ?? {}) } : {}
+  const initialValues = effectiveProps.value.initialValues ?? props.initialValues
+  innerSchemas.value.forEach((schema) => {
+    if (preserveExisting && Object.prototype.hasOwnProperty.call(nextModel, schema.field)) return
+    if (schema.defaultValue !== undefined) {
+      nextModel[schema.field] = schema.defaultValue
+      return
+    }
+    if (initialValues && Object.prototype.hasOwnProperty.call(initialValues, schema.field)) {
+      nextModel[schema.field] = initialValues[schema.field]
+    }
+  })
+  return nextModel
+}
+
+const applyFormModel = (nextModel: Record<string, unknown>, shouldEmit = true) => {
+  formModel.value = nextModel
+  if (shouldEmit) emit('update:modelValue', nextModel)
+}
+
+const updateFormModel = (values: Record<string, unknown>) => {
+  const nextModel = resolveSchemaModel({ ...currentFormModel.value, ...values })
+  applyFormModel(nextModel)
+  return nextModel
+}
 
 const initForm = () => {
-  const model: Record<string, unknown> = {}
   const rules: Record<string, unknown[]> = {}
-  const initialValues = effectiveProps.value.initialValues ?? props.initialValues
   innerSchemas.value.forEach((schema) => {
-    model[schema.field] = schema.defaultValue ?? initialValues?.[schema.field]
     if (schema.rules?.length) rules[schema.field] = schema.rules
   })
-  formModel.value = { ...formModel.value, ...model }
+  applyFormModel(resolveSchemaModel(currentFormModel.value), false)
   formRules.value = rules
 }
 
@@ -277,7 +313,7 @@ const handleSubmit = async () => {
       await effectiveProps.value.submitFunc()
     } else {
       submitLoading.value = true
-      emit('submit', processFieldMapToTime({ ...formModel.value }))
+      emit('submit', processFieldMapToTime({ ...currentFormModel.value }))
     }
   } catch (e) {
     console.error('Form validation failed:', e)
@@ -298,15 +334,19 @@ const handleReset = async () => {
 }
 
 const setFieldsValue = (values: Record<string, unknown>) => {
-  formModel.value = { ...formModel.value, ...values }
+  updateFormModel(values)
   return Promise.resolve()
 }
 
-const getFieldsValue = () => processFieldMapToTime({ ...formModel.value })
+const getFieldsValue = () => processFieldMapToTime({ ...currentFormModel.value })
 
 const resetFields = async () => {
   formRef.value?.resetFields()
-  initForm()
+  applyFormModel(resolveSchemaModel(undefined, false))
+}
+
+const handleFieldChange = (field: string, value: unknown) => {
+  updateFormModel({ [field]: value })
 }
 
 const validate = (nameList?: string[]) =>
@@ -398,6 +438,11 @@ onUnmounted(() => {
   if (typeof window !== 'undefined') window.removeEventListener('resize', handleResize)
 })
 
+watch(() => controlledModelValue.value, (value) => {
+  if (!isControlled.value || value === undefined) return
+  applyFormModel(resolveSchemaModel(value), false)
+}, { deep: true, immediate: true })
+
 watch(() => [props.schemas, props.initialValues], syncSchemas, { deep: true })
 </script>
 

package/src/ProForm/ProFormItem.vue

@@ -181,6 +181,7 @@ const props = defineProps<{
   formDisabled?: boolean
   autoPlaceholder?: boolean
   formActionType?: import('../types').FormActionType
+  onFieldChange?: (field: string, value: unknown) => void
   /** 自定义组件映射（由 ProForm 传入） */
   customComponents?: Record<string, unknown>
 }>()
@@ -266,7 +267,7 @@ const resolvedCustomComponent = computed(() => {
 })
 
 const setFieldValue = (v: unknown) => {
-  props.formModel[props.schema.field] = v
+  props.onFieldChange?.(props.schema.field, v)
 }
 
 const renderComponent = computed(() => {

package/src/index.ts

@@ -1,15 +1,19 @@
 import type { VueConstructor } from 'vue'
 import ProTable, { TableAction } from './ProTable'
 import ProForm, { ProFormItem, FormActions } from './ProForm'
+import ProDescriptions from './ProDescriptions'
 import { useForm } from './ProForm/useForm'
+import { useDescription } from './ProDescriptions/useDescription'
 import { useProTable } from './ProTable/useProTable'
 import { useComponentSetting } from './useComponentSetting'
 
 export { ProForm, ProFormItem, FormActions, useForm }
 export { ProTable, useProTable, TableAction }
+export { ProDescriptions, useDescription }
 export { useComponentSetting }
 export type { UseComponentSettingReturn } from './useComponentSetting'
 export type { UseProTableReturn, UseProTablePropsReactive } from './ProTable/useProTable'
+export type { UseDescriptionReturn, UseDescriptionPropsReactive } from './ProDescriptions/useDescription'
 export * from './ProTable/types'
 export * from './types'
 
@@ -19,6 +23,7 @@ const components = [
   { name: 'ProForm', component: ProForm },
   { name: 'ProFormItem', component: ProFormItem },
   { name: 'FormActions', component: FormActions },
+  { name: 'ProDescriptions', component: ProDescriptions },
 ]
 
 export function install(Vue: VueConstructor) {
@@ -31,5 +36,6 @@ export default {
   install,
   ProTable,
   ProForm,
+  ProDescriptions,
   TableAction,
 }

package/src/types/index.ts

@@ -56,6 +56,7 @@ export type FormListeners = Record<string, ((...args: unknown[]) => unknown) | (
 /** ProForm Props */
 export interface ProFormProps {
   schemas?: ProFormSchema[]
+  modelValue?: Record<string, unknown>
   initialValues?: Record<string, unknown>
   labelWidth?: string
   labelPosition?: 'left' | 'right' | 'top'
@@ -159,3 +160,67 @@ export interface ProDescriptionsSchema {
   /** 栅格占位 */
   span?: number
 }
+
+/** Description 列数配置 */
+export type DescriptionColumn = number | {
+  xxl?: number
+  xl?: number
+  lg?: number
+  md?: number
+  sm?: number
+  xs?: number
+}
+
+/** Description 描述项配置 */
+export interface DescriptionSchema {
+  /** 标签 */
+  label: string
+  /** 数据字段（兼容 Vben Description 的 field） */
+  field?: string
+  /** 数据字段 */
+  dataIndex: string
+  /** 栅格占位 */
+  span?: number
+  /** 是否显示 */
+  show?: boolean | ((data: Record<string, unknown>) => boolean)
+  /** 标签最小宽度 */
+  labelMinWidth?: number
+  /** 内容最小宽度 */
+  contentMinWidth?: number
+  /** 标签样式 */
+  labelStyle?: Record<string, string | number>
+  /** 内容样式 */
+  contentStyle?: Record<string, string | number>
+  /** 自定义插槽名称 */
+  slot?: string
+  /** 自定义渲染 */
+  render?: (value: unknown, record: Record<string, unknown>) => VNode | string | number | null | undefined
+}
+
+/** Description Props */
+export interface DescriptionProps {
+  title?: string
+  helpMessage?: string | string[]
+  size?: 'medium' | 'small'
+  bordered?: boolean
+  column?: DescriptionColumn
+  schema?: DescriptionSchema[]
+  data?: Record<string, unknown>
+  emptyText?: string
+  useCollapse?: boolean
+  collapseOptions?: {
+    canExpand?: boolean
+    defaultExpand?: boolean
+    expandButtonText?: string
+    collapseButtonText?: string
+    helpMessage?: string | string[]
+    visibleRows?: number
+  }
+}
+
+/** Description 操作实例 */
+export interface DescriptionActionType {
+  setProps: (props: Partial<DescriptionProps>) => Promise<void>
+  setData: (data: Record<string, unknown>) => Promise<void>
+  getData: () => Record<string, unknown>
+}