@ftjs/core 0.1.3 → 0.2.1

package/dist/form/columns.d.ts

@@ -27,11 +27,11 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
      *
      * 如： [startTime, endTime]
      *
-     * 注意： 第一个字段需要尽量是基础类型的值(这个值会用于watch, expect等操作)，后面可以包含详情
+     * 注意： 第一个字段需要尽量是基础类型的值(这个值会用于watch, expect等操作)，中间字段则可以用'-'来忽略，后面字段可以直接忽略
      *
      * 如人员信息: [staffId, staffInfoObj, deptInfoObj, ...]
      */
-    fields?: string[];
+    fields?: (RecordPath<FormData> | "-")[];
     /**
      * 字段标题
      *
@@ -72,6 +72,10 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
     }[];
     valueGetter?: (val: any) => any;
     valueSetter?: (val: any) => any;
+    /**
+     * getFormData 时，对数据进行格式化，不会影响 Form 中的值
+     */
+    formatGetFormData?: (val: any) => any;
     /**
      * props 配置，子类定义
      */

package/dist/form/define-component.d.ts

@@ -25,6 +25,10 @@ export interface FtFormIntrinsicProps<FormData extends Record<string, any>, Type
      * 如果`formData`不为`undefined`或者`null`，则双向绑定这个值，否则 FtForm内部会生成一个内部值
      */
     formData?: FormData;
+    /**
+     * 是否查看模式
+     */
+    isView?: boolean;
     /**
      * 内部 form 组件 props
      */

package/dist/form/use-form-item.d.ts

@@ -1,5 +1,14 @@
+import { VNodeChild } from 'vue';
 import { FtFormColumnBase } from './columns';
 import { CommonFormItemProps, FormTypeMap } from './define-component';
+type Slots = (props: {
+    value: any;
+    isView: boolean;
+    [key: string]: any;
+}) => VNodeChild;
+export type CommonSlots<T extends readonly string[]> = {
+    [K in T[number]]?: Slots;
+};
 interface UseFormItemOptions<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
     /** 通用 props */
     props: CommonFormItemProps<FormTypeMap<FormData>[Type]["columns"]>;
@@ -17,6 +26,6 @@ interface UseFormItemOptions<FormData extends Record<string, any>, Type extends
  */
 export declare const useFormItem: <FromData extends Record<string, any>, Type extends keyof FormTypeMap<FromData>>(options: UseFormItemOptions<FtFormColumnBase<FormData>, Type>) => {
     valueComputed: import('vue').WritableComputedRef<any, any>;
-    isView: import('vue').ComputedRef<boolean>;
+    slots: Record<string, (props?: any) => VNodeChild> | undefined;
 };
 export {};

package/dist/index.js

@@ -345,7 +345,11 @@ const useForm = (props, formData, runtimePropsKeys) => {
     visibleColumns.value.forEach((usefulColumn) => {
       const { fields } = getFieldsAndValues(usefulColumn);
       fields.forEach((field) => {
-        set(formData2, field, get(form.value, field));
+        let value = get(form.value, field);
+        if (usefulColumn.formatGetFormData) {
+          value = usefulColumn.formatGetFormData(value);
+        }
+        set(formData2, field, value);
       });
     });
     return formData2;
@@ -388,13 +392,25 @@ const useFormItem = (options) => {
     valueSetter = props.column.valueSetter;
   }
   const { form } = useFormInject();
+  const fieldsData = ref([]);
   const valueComputed = computed({
     get() {
       let val;
       if (props.column.fields) {
-        val = props.column.fields.map((field) => {
-          return get(form.value, field);
-        }).filter((e) => !isEmptyStrOrNull(e));
+        const length = Math.max(
+          props.column.fields.length,
+          fieldsData.value.length
+        );
+        const valArr = Array(length).fill(void 0);
+        for (let i = 0; i < length; i++) {
+          const field = props.column.fields[i];
+          if (field && field !== "-") {
+            valArr[i] = get(form.value, field);
+          } else if (fieldsData.value[i]) {
+            valArr[i] = fieldsData.value[i];
+          }
+        }
+        val = valArr;
       } else if (props.column.field) {
         val = get(form.value, props.column.field);
       } else {
@@ -406,8 +422,14 @@ const useFormItem = (options) => {
     set(val) {
       if (valueSetter) val = valueSetter(val);
       if (props.column.fields) {
+        const valArr = val ?? [];
+        fieldsData.value = valArr;
         props.column.fields.forEach((field, index) => {
-          set(form.value, field, val == null ? void 0 : val[index]);
+          const v = valArr[index];
+          if (field === "-") {
+            return;
+          }
+          set(form.value, field, v);
         });
       } else if (props.column.field) {
         set(form.value, props.column.field, val);
@@ -416,12 +438,24 @@ const useFormItem = (options) => {
       }
     }
   });
-  const isView = computed(() => {
-    return toValue(props.column.isView) ?? props.isView;
-  });
+  let slots;
+  if (props.column.slots) {
+    slots = Object.fromEntries(
+      Object.entries(props.column.slots).map(([key, value]) => {
+        return [
+          key,
+          (scopedProps) => value({
+            value: valueComputed.value,
+            isView: props.isView,
+            scopedProps
+          })
+        ];
+      })
+    );
+  }
   return {
     valueComputed,
-    isView
+    slots
   };
 };
 const defineFtForm = (setup, renderMap, _runtimeProps) => {
@@ -435,6 +469,7 @@ const defineFtForm = (setup, renderMap, _runtimeProps) => {
     "formData",
     "internalFormProps",
     "onSubmit",
+    "isView",
     "onUpdate:formData",
     ..._runtimeProps
   ];
@@ -462,10 +497,11 @@ const defineFtForm = (setup, renderMap, _runtimeProps) => {
             return null;
           }
           const component = renderMap.get(column.type);
+          const isView = toValue(column.isView) ?? props.isView;
           return h(component, {
             column,
             // 是否为查看模式
-            isView: column.isView,
+            isView,
             key: getField(column)
           });
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftjs/core",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "keywords": [],
   "author": "",
   "license": "MIT",