@carefrees/form-utils-vue-hooks 0.0.13

package/src/instance/formInstance.ts

@@ -0,0 +1,220 @@
+import { FormListInstanceBase } from './formListInstance';
+import { FormItemInstanceBase } from './formItemInstance';
+import { ErrorDataField, ValidateErrorEntity } from '../interface';
+import { get, set, cloneByNamePathList, has } from './../utils';
+import { Ref, ref, toValue } from 'vue';
+
+/**基础实例*/
+export class FormInstanceBase<T = any> {
+  /**表单数据*/
+  formData: Ref<Partial<T>> = ref({});
+  /**表单每一项实例*/
+  formItemInstances: Ref<FormItemInstanceBase>[] = [];
+  /**表单中List实例集合*/
+  formListInstances: Map<string, Ref<FormListInstanceBase>> = new Map([]);
+
+  // ======================================隐藏组件=====================================
+  /**隐藏组件字段对应的值*/
+  hideState: Ref<Record<string, boolean>> = ref({});
+
+  /**是否保护值(不进行表单项组件卸载重置初始值)*/
+  preserve?: boolean = true;
+
+  //===================================挂载方法====================================================
+  /**值更新触发*/
+  onValuesChange?: (changedValues: any, values: T) => void;
+  /**提交保存 验证成功*/
+  onFinish?: (values: T) => void;
+  /**提交保存 验证失败*/
+  onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
+
+  /**
+   * 重置字段数据值
+   */
+  resetFieldsValue = (initial: Partial<T> = {}) => {
+    this.formData.value = Object.assign(this.formData.value, initial);
+    return this;
+  };
+
+  /**注册一个 formIList 实例*/
+  registerFormList = (name: string, itemInstance: Ref<FormListInstanceBase>) => {
+    this.formListInstances.set(name, itemInstance);
+    return () => {
+      this.formListInstances.delete(name);
+    };
+  };
+
+  /**注册一个 formItem 实例*/
+  registerFormItem = (itemInstance: Ref<FormItemInstanceBase>) => {
+    this.formItemInstances.push(itemInstance);
+    return () => {
+      const instanceItem = toValue(itemInstance);
+      this.formItemInstances = this.formItemInstances.filter((ite) => ite !== itemInstance);
+      let preserve = this.preserve;
+      if (instanceItem?.preserve === false) {
+        preserve = instanceItem.preserve;
+      }
+      const name = `${instanceItem?.name}`;
+      const formData = toValue(this.formData);
+      // 判断路径是否存在
+      if (name && has(formData, name) && !preserve) {
+        this.formData.value = set(formData, instanceItem.name, undefined);
+      }
+    };
+  };
+
+  /**更新字段是否隐藏*/
+  updatedFieldHideValue = (value: Record<string, boolean>) => {
+    // 字段对应的 form item 进行更新
+    const names = Object.keys(value || {});
+    names.forEach((key) => {
+      this.hideState.value = set(this.hideState.value, key, value[key]);
+    });
+    return this;
+  };
+
+  /**更新字段value值
+   *
+   * @param name 字段
+   * @param value 字段值
+   * @param validateType 校验规则处理
+   * @param isOnlySave 仅用于存储
+   *
+   */
+  updatedFieldValue = (name: string, value: any, validateType: 'validate' | 'clear' | 'none' = 'validate') => {
+    // 字段对应的 form item 进行更新
+    this.formData.value = set(this.formData.value, name, value);
+    /**验证数据 */
+    if (validateType === 'validate') {
+      this.onlyValidate(name);
+    } else if (validateType === 'clear') {
+      /**清空验证提示信息*/
+      const formItemInstance = this.formItemInstances.find((ite) => ite.value.name === name);
+      const instanceItem = toValue(formItemInstance);
+      const instanceItemRule = toValue(instanceItem?.rule);
+      if (instanceItemRule) {
+        instanceItemRule?.updatedMessages?.([]);
+      }
+    }
+    return this;
+  };
+
+  /**获取 formList 实例或者集合*/
+  getFormListInstance = (name: string) => {
+    return this.formListInstances.get(name);
+  };
+
+  /**获取字段值*/
+  getFieldValue = (name?: string) => {
+    const fromData = toValue(this.formData);
+    if (name) {
+      if (has(fromData, name)) {
+        return get(fromData, name);
+      }
+      return undefined;
+    }
+    return fromData;
+  };
+
+  /**获取字段隐藏值*/
+  getFieldHideValue = (name?: string) => {
+    const hideData = toValue(this.hideState);
+    if (name) {
+      return get(hideData, name);
+    }
+    return hideData;
+  };
+
+  /**
+   * 只进行验证，没有返回值
+   * */
+  onlyValidate = async (name: string | string[]) => {
+    try {
+      /**校验数据*/
+      if (Array.isArray(name)) {
+        await this.validate(name, false);
+      } else {
+        await this.validate([name], false);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+    return this;
+  };
+
+  /**规则验证 ，默认不传递验证所有 */
+  validate = (names?: string[], isGetAllData: boolean = true): Promise<T> => {
+    return new Promise(async (resolve, reject) => {
+      const errorFields: ErrorDataField[] = [];
+      const notErrorFields: ErrorDataField[] = [];
+
+      /**去除 watch 字段*/
+      const newFormItemInstances = this.formItemInstances;
+      const nameListPath = newFormItemInstances.map((item) => item.value.name);
+      const lg = newFormItemInstances.length;
+      const isNames = Array.isArray(names) && names.length;
+      for (let index = 0; index < lg; index++) {
+        const instanceItemRef = newFormItemInstances[index];
+        const instanceItem = toValue(instanceItemRef);
+        const rule = toValue(instanceItem.rule);
+        /**判断实例是否存在 & 是否需要验证规则*/
+        if (rule && rule.isValidate()) {
+          let isValidate = true;
+          if (isNames) {
+            /**判断是否存在当前需要验证的项*/
+            const findx = names.find((name) => name === instanceItem.name);
+            if (!findx) {
+              isValidate = false;
+            }
+          }
+          try {
+            /**判断是否需要进行验证*/
+            if (isValidate) {
+              await rule.validate();
+              notErrorFields.push({
+                errors: [],
+                sort: instanceItem.sort,
+                name: instanceItem.name,
+              });
+            }
+          } catch (errors: any) {
+            if (errors)
+              errorFields.push({
+                errors,
+                sort: instanceItem.sort,
+                name: instanceItem.name,
+              });
+          }
+        } else {
+          notErrorFields.push({
+            errors: [],
+            sort: instanceItem.sort,
+            name: instanceItem.name,
+          });
+        }
+      }
+      /**所有值*/
+      const values = isGetAllData ? (cloneByNamePathList(this.getFieldValue(), nameListPath) as T) : ({} as T);
+      /**判断是否存在验证失败的*/
+      if (errorFields.length) {
+        reject({ errorFields, values: values });
+      } else {
+        resolve(values);
+      }
+    });
+  };
+
+  /**
+   * 提交
+   */
+  submit = async () => {
+    try {
+      const result = await this.validate();
+      if (result) {
+        this?.onFinish?.(result);
+      }
+    } catch (error: any) {
+      this.onFinishFailed?.(error);
+    }
+  };
+}

package/src/instance/formItemBaseInstance.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+import { FormInstanceBase } from './formInstance';
+export class FormItemBaseInstance {
+  /**
+   * 顺序
+   * @example
+   * "0"
+   * "0-0"
+   * "0-0-0"
+   */
+  sort?: string;
+  /**
+   * 字段 ，分割方式与lodash的get和set方法值更新或设置路径一致
+   * @example
+   * 默认："name"
+   * 嵌套字段："name.a.doc"
+   * 嵌套字段："name[1].a.doc"
+   * 嵌套字段："name.a[2].doc"
+   */
+  name: string = '';
+  /**表单实例*/
+  instance?: Ref<FormInstanceBase>;
+}

package/src/instance/formItemInstance.ts

@@ -0,0 +1,23 @@
+import { RuleInstanceBase } from './ruleIntsnace';
+import { FormInstanceBase } from './formInstance';
+import { FormItemBaseInstance } from './formItemBaseInstance';
+import { Ref } from 'vue';
+export class FormItemInstanceBase extends FormItemBaseInstance {
+  /**父级字段*/
+  parentDataField?: string;
+  /**通知 只用于校验规则提示 字段 */
+  noticeOnlyRuleDataField?: string[];
+  htmlFor?: string;
+  control?: Ref<any>;
+  /**规则*/
+  rule?: Ref<RuleInstanceBase>;
+  /**是否保护值(不进行表单项组件卸载重置初始值)*/
+  preserve?: boolean = true;
+  /**触发数据更新之后触发（用于数据联动之类的）*/
+  onAfterUpdate?: (
+    value: any,
+    instance: Ref<FormInstanceBase>,
+    instanceAttr: Ref<FormItemInstanceBase>,
+    event: any,
+  ) => void;
+}

package/src/instance/formListInstance.ts

@@ -0,0 +1,108 @@
+import { FormItemBaseInstance } from './formItemBaseInstance';
+import { RuleInstanceBase } from './ruleIntsnace';
+import { FormItemInstanceBase } from './formItemInstance';
+import { Ref, toValue } from 'vue';
+
+export class FormListInstanceBase extends FormItemBaseInstance {
+  /**规则*/
+  rule?: Ref<RuleInstanceBase>;
+  /**表单实例*/
+  formItemInstance?: Ref<FormItemInstanceBase>;
+  /**父级字段*/
+  parentDataField?: string;
+  /**记录key值*/
+  keys: number[] = [];
+  /**累加数据，唯一性*/
+  id: number = 0;
+  /**
+   * 初始化
+   * @param name 字段
+   */
+  ctor = (name: string) => {
+    this.name = name;
+    return this;
+  };
+
+  /**获取值*/
+  getLastValue = () => {
+    const form = toValue(this.instance);
+    const value = form?.getFieldValue?.(this.name);
+    /**对值进行处理*/
+    const lastValue = Array.isArray(value) ? value : [];
+    return lastValue;
+  };
+
+  /**
+   * 添加一条
+   * @param initialValue 初始值
+   * @param unshift 是否加入数组前面
+   */
+  onAdd = (initialValue: Object = {}, unshift?: boolean) => {
+    const form = toValue(this.instance);
+    /**获取值*/
+    const value = this.getLastValue();
+    if (unshift) {
+      const listData = [initialValue || {}, ...value];
+      this.keys = [this.id, ...this.keys];
+      this.id++; // 累加
+      form?.updatedFieldValue?.(this.name, listData);
+    } else {
+      const listData = [...value, initialValue || {}];
+      this.keys = [...this.keys, this.id];
+      this.id++; // 累加
+      form?.updatedFieldValue?.(this.name, listData);
+    }
+  };
+
+  /**
+   * 删除
+   * @param index 删除数据下标
+   */
+  onDelete = (index: number | number[]) => {
+    const form = toValue(this.instance);
+    /**获取值*/
+    const value = this.getLastValue();
+    const newIndexs = Array.isArray(index) ? index : [index];
+    this.keys = this.keys.filter((_, index) => !newIndexs.includes(index));
+    const listData = value.filter((_, index) => !newIndexs.includes(index));
+    form?.updatedFieldValue?.(this.name, listData);
+  };
+
+  /**移动*/
+  onMove = (from: number, to: number) => {
+    const form = toValue(this.instance);
+    /**从那个移动到那个*/
+    const newList = this.getLastValue();
+    const fromItem = newList[from];
+    const toItem = newList[to];
+    newList[from] = toItem;
+    newList[to] = fromItem;
+    form?.updatedFieldValue?.(this.name, [...newList]);
+  };
+
+  /**更新某个item数据*/
+  updatedItem = (index: number, item: any) => {
+    const form = toValue(this.instance);
+    const newList = this.getLastValue();
+    const newItem = newList[index];
+    newList[index] = { ...newItem, ...item };
+    form?.updatedFieldValue?.(this.name, [...newList]);
+  };
+
+  /**获取渲染 list 字段拼接*/
+  getFields = () => {
+    const values = this.getLastValue();
+    return values.map((__, index) => {
+      let key = this.keys[index];
+      if (key === undefined) {
+        this.keys[index] = this.id;
+        key = this.keys[index];
+        this.id++; // 累加
+      }
+      return {
+        name: index,
+        key,
+      };
+    });
+  };
+}

package/src/instance/index.ts

@@ -0,0 +1,5 @@
+export * from './formInstance';
+export * from './formItemInstance';
+export * from './formListInstance';
+export * from './multipleInstance';
+export * from './ruleIntsnace';

package/src/instance/multipleInstance.ts

@@ -0,0 +1,109 @@
+import type { FormInstanceBase } from './formInstance';
+import { cloneByNamePathList } from '../utils';
+import { ValidateErrorEntity } from '../interface';
+import { Ref, toValue } from 'vue';
+
+export class MultipleInstanceBase {
+  instanceMap: Map<string, Ref<FormInstanceBase>> = new Map([]);
+  /**
+   * 注册表单实例
+   * @param name 表单名称
+   * @param form 表单实例
+   */
+  ctor = (name: string, form: Ref<FormInstanceBase>) => {
+    this.instanceMap.set(name, form);
+    return () => {
+      this.instanceMap.delete(name);
+    };
+  };
+  /**
+   * 获取表单实例
+   * @param name 表单名称
+   */
+  getInstance = (name?: string) => {
+    if (name) {
+      return this.instanceMap.get(name);
+    }
+    return this.instanceMap;
+  };
+
+  /**
+   * 验证表单规则
+   * @param namePath 表单名称(如果不传递表单名称,则验证所有表单)
+   *
+   * @example
+   */
+  validate = (namePath?: string | string[] | Record<string, string[]>) => {
+    return new Promise(async (resolve, reject) => {
+      const listFormErrors: Record<string, ValidateErrorEntity> = {};
+      let isSuccess = true;
+      let nameKeys: string[] = [];
+      let isObject = false;
+      if (namePath) {
+        if (Array.isArray(namePath)) {
+          nameKeys = namePath;
+        } else if (Object.prototype.toString.call(namePath) === '[object Object]') {
+          isObject = true;
+          nameKeys = Object.keys(namePath);
+        } else {
+          nameKeys = [namePath] as string[];
+        }
+      } else {
+        nameKeys = Array.from(this.instanceMap.keys());
+      }
+
+      const lg = nameKeys.length;
+      for (let index = 0; index < lg; index++) {
+        const name = nameKeys[index];
+        const form = this.instanceMap.get(name);
+        const formInstacne = toValue(form);
+        try {
+          if (formInstacne) {
+            const paths = isObject ? (namePath as Record<string, string[]>)[name] : undefined;
+            const result = await formInstacne.validate(paths);
+            listFormErrors[name] = { errorFields: [], values: result };
+          }
+        } catch (errs: any) {
+          isSuccess = false;
+          listFormErrors[name] = errs;
+        }
+      }
+      /**成功抛出数据*/
+      if (isSuccess) {
+        resolve(listFormErrors);
+      } else {
+        /**失败抛出数据*/
+        reject(listFormErrors);
+      }
+    });
+  };
+  /**
+   * 获取表单中值
+   * @param name 表单名称 (不存在时，获取所有表单值)
+   * @param path 字段路径 (不存在的时候直接获取对应表单所有值)
+   *
+   */
+  getFormFieldValue = (name?: string, dataField?: string | string[]) => {
+    if (!name) {
+      const data: Record<string, unknown> = {};
+      this.instanceMap.forEach((form, key) => {
+        data[key] = form.value.getFieldValue();
+      });
+      return data;
+    }
+    const form = this.instanceMap.get(name);
+    const formInstacne = toValue(form);
+
+    if (formInstacne) {
+      if (typeof dataField === 'string') {
+        return { [name]: formInstacne.getFieldValue(dataField) };
+      }
+      if (dataField) {
+        const formData = formInstacne.getFieldValue();
+        const data = cloneByNamePathList(formData, dataField);
+        return { [name]: data };
+      }
+    }
+    return { [name]: {} };
+  };
+}

package/src/instance/ruleIntsnace.ts

@@ -0,0 +1,89 @@
+import AsyncValidator, { RuleItem } from 'async-validator';
+import { FormInstanceBase } from './formInstance';
+import { MessageType } from '../interface';
+import { Ref, ref, toValue } from 'vue';
+
+export class RuleInstanceBase {
+  /**
+   * 顺序
+   * @example
+   * "0"
+   * "0-0"
+   * "0-0-0"
+   */
+  sort?: string;
+  /**表单实例*/
+  instance?: Ref<FormInstanceBase<any>>;
+  /**
+   * 字段 ，分割方式与lodash的get和set方法值更新或设置路径一致
+   * @example
+   * 默认："name"
+   * 嵌套字段："name.a.doc"
+   * 嵌套字段："name[1].a.doc"
+   * 嵌套字段："name.a[2].doc"
+   */
+  name: string = '';
+  /**规则*/
+  rules: Ref<RuleItem[]> = ref([]);
+  /**错误提示内容*/
+  messages: Ref<MessageType[] | undefined> = ref([]);
+  /**判断是否必填*/
+  isRequired = () => {
+    const findItem = (toValue(this.rules) || []).find((item) => item?.required);
+    return !!findItem;
+  };
+
+  /**判断是否需要验证*/
+  isValidate = () => {
+    const rules = toValue(this.rules);
+    return Array.isArray(rules) && rules.length;
+  };
+  /**更新提示信息*/
+  updatedMessages = (messages?: MessageType[]) => {
+    this.messages.value = messages;
+  };
+
+  /**更新规则*/
+  updatedRules = (rules: RuleItem[]) => {
+    /**更新当前规则*/
+    this.rules.value = rules;
+    /**当前组件重新渲染*/
+    this.updatedMessages?.([]);
+  };
+
+  /**验证规则
+   */
+  validate = () => {
+    return new Promise((resolve, reject) => {
+      const rules = toValue(this.rules);
+      const form = toValue(this.instance);
+      const value = form?.getFieldValue?.(this.name);
+      new AsyncValidator({ [this.name]: rules || [] })
+        .validate({ [this.name]: value })
+        .then((values) => {
+          this.updatedMessages([]);
+          resolve(values);
+        })
+        .catch(({ errors }) => {
+          if (Array.isArray(errors)) {
+            this.updatedMessages(errors);
+            reject(errors);
+          } else {
+            reject();
+          }
+        });
+    });
+  };
+
+  /**获取校验结果*/
+  getValidateResult = () => {
+    const msg = toValue(this.messages);
+    const tip = Array.isArray(msg) ? msg.map((it) => it.message) : '';
+    const isInvalid = Array.isArray(tip) ? !!tip.length : !!tip;
+
+    return {
+      tip,
+      isInvalid,
+    };
+  };
+}

package/src/interface/index.ts

@@ -0,0 +1,38 @@
+import { ComputedRef, Ref } from 'vue';
+
+export interface MessageType {
+  /**信息*/
+  message?: string;
+  [s: string]: unknown;
+}
+
+export interface ErrorDataField {
+  /**字段*/
+  name: string;
+  /**排序*/
+  sort?: string;
+  /**错误信息*/
+  errors: MessageType[];
+}
+
+export interface ValidateErrorEntity<Values = any> {
+  /*值*/
+  values: Values;
+  /**错误信息*/
+  errorFields: ErrorDataField[];
+}
+
+export interface Callbacks<Values = any> {
+  /**值更新触发*/
+  onValuesChange?: (changedValues: any, values: Values) => void;
+  /**提交保存 验证成功*/
+  onFinish?: (values: Values) => void;
+  /**提交保存 验证失败*/
+  onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
+}
+
+export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
+
+export type PartialComputedRefs<T> = {
+  [K in keyof T]: ComputedRefBase<T[K]>;
+};

package/src/utils/cloneByNamePathList.ts

@@ -0,0 +1,13 @@
+import { PropertyName } from './interface';
+import { get } from './get';
+import { set } from './set';
+
+/**获取路径数据*/
+export function cloneByNamePathList(store: Record<string, any>, namePathList: PropertyName[]): Record<string, any> {
+  let newStore = {};
+  namePathList.forEach((namePath) => {
+    const value = get(store, namePath);
+    newStore = set(newStore, namePath, value);
+  });
+  return newStore;
+}

package/src/utils/get.ts

@@ -0,0 +1,53 @@
+/**
+ * @description [从lodash中搬了部分需要的代码块](https://www.lodashjs.com/)
+ */
+import { castPath, toKey } from './utils';
+import { PropertyPath } from './interface';
+
+/**
+ * The base implementation of `get` without support for default values.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {Array|string} path The path of the property to get.
+ * @returns {*} Returns the resolved value.
+ */
+function baseGet(object: any, path: PropertyPath) {
+  path = castPath(path, object);
+  let index = 0;
+  const length = path.length;
+
+  while (object != null && index < length) {
+    object = object[toKey(path[index++])];
+  }
+  return index && index === length ? object : undefined;
+}
+
+/**
+ * Gets the value at `path` of `object`. If the resolved value is
+ * `undefined`, the `defaultValue` is returned in its place.
+ *
+ * @since 3.7.0
+ * @category Object
+ * @param {Object} object The object to query.
+ * @param {Array|string} path The path of the property to get.
+ * @param {*} [defaultValue] The value returned for `undefined` resolved values.
+ * @returns {*} Returns the resolved value.
+ * @see has, hasIn, set, unset
+ * @example
+ *
+ * const object = { 'a': [{ 'b': { 'c': 3 } }] }
+ *
+ * get(object, 'a[0].b.c')
+ * // => 3
+ *
+ * get(object, ['a', '0', 'b', 'c'])
+ * // => 3
+ *
+ * get(object, 'a.b.c', 'default')
+ * // => 'default'
+ */
+export const get = (object: Object, path: PropertyPath, defaultValue?: any) => {
+  const result = object == null ? undefined : baseGet(object, path);
+  return result === undefined ? defaultValue : result;
+};

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './get';
+export * from './set';
+export * from './utils';
+export * from './cloneByNamePathList';

package/src/utils/interface.ts

@@ -0,0 +1,4 @@
+export type Many<T> = T | readonly T[];
+
+export type PropertyName = string | number | symbol | undefined;
+export type PropertyPath = Many<PropertyName>;