hy-app 0.1.1

package/components/u-form/u-form.vue

@@ -0,0 +1,267 @@
+<template>
+  <view class="u-form">
+    <slot />
+  </view>
+</template>
+
+<script>
+import { props } from "./props.js";
+import Schema from "./schema";
+import { getProperty, setProperty } from "./utils";
+import { deepClone, error } from "../../utils";
+// 去除警告信息
+Schema.warning = function () {};
+/**
+ * Form 表单
+ * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+ * @tutorial https://ijry.github.io/uview-plus/components/form.html
+ * @property {Object}						model			当前form的需要验证字段的集合
+ * @property {Object | Function | Array}	rules			验证规则
+ * @property {String}						errorType		错误的提示方式，见上方说明 ( 默认 message )
+ * @property {Boolean}						borderBottom	是否显示表单域的下划线边框   ( 默认 true ）
+ * @property {String}						labelPosition	表单域提示文字的位置，left-左侧，top-上方 ( 默认 'left' ）
+ * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
+ * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 ‘left' ）
+ * @property {Object}						labelStyle		lable的样式，对象形式
+ * @example <up-formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></up-form>
+ */
+export default {
+  name: "u-form",
+  mixins: [props],
+  provide() {
+    return {
+      uForm: this.validateField
+    };
+  },
+  data() {
+    return {
+      formRules: {},
+      // 规则校验器
+      validator: {},
+      // 原始的model快照，用于resetFields方法重置表单时使用
+      originalModel: null
+    };
+  },
+  watch: {
+    // 监听规则的变化
+    rules: {
+      immediate: true,
+      handler(n) {
+        this.setRules(n);
+      }
+    },
+    // 监听属性的变化，通知子组件u-form-item重新获取信息
+    propsChange(n) {
+      if (this.children?.length) {
+        this.children.map((child) => {
+          // 判断子组件(u-form-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+          typeof child.updateParentData == "function" &&
+            child.updateParentData();
+        });
+      }
+    },
+    // 监听model的初始值作为重置表单的快照
+    model: {
+      immediate: true,
+      handler(n) {
+        if (!this.originalModel) {
+          this.originalModel = deepClone(n);
+        }
+      }
+    }
+  },
+  computed: {
+    propsChange() {
+      return [
+        this.errorType,
+        this.borderBottom,
+        this.labelPosition,
+        this.labelWidth,
+        this.labelAlign,
+        this.labelStyle
+      ];
+    }
+  },
+  created() {
+    // 存储当前form下的所有u-form-item的实例
+    // 不能定义在data中，否则微信小程序会造成循环引用而报错
+    this.children = [];
+  },
+  methods: {
+    // 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+    setRules(rules) {
+      // 判断是否有规则
+      if (Object.keys(rules).length === 0) return;
+      if (
+        process.env.NODE_ENV === "development" &&
+        Object.keys(this.model).length === 0
+      ) {
+        error("设置rules，model必须设置！如果已经设置，请刷新页面。");
+        return;
+      }
+      this.formRules = rules;
+      // 重新将规则赋予Validator
+      this.validator = new Schema(rules);
+    },
+    // 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
+    resetFields() {
+      this.resetModel();
+    },
+    // 重置model为初始值的快照
+    resetModel(obj) {
+      // 历遍所有u-form-item，根据其prop属性，还原model的原始快照
+      this.children.map((child) => {
+        const prop = child?.prop;
+        const value = getProperty(this.originalModel, prop);
+        setProperty(this.model, prop, value);
+      });
+    },
+    // 清空校验结果
+    clearValidate(props) {
+      props = [].concat(props);
+      this.children.map((child) => {
+        // 如果u-form-item的prop在props数组中，则清除对应的校验结果信息
+        if (props[0] === undefined || props.includes(child.prop)) {
+          child.message = null;
+        }
+      });
+    },
+    // 对部分表单字段进行校验
+    async validateField(value, callback, event = null, options) {
+      // $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
+      this.$nextTick(() => {
+        debugger;
+        // 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
+        const errorsRes = [];
+        // 如果为字符串，转为数组
+        value = [].concat(value);
+        // 历遍children所有子form-item
+        let promises = this.children.map((child) => {
+          return new Promise((resolve, reject) => {
+            // 用于存放form-item的错误信息
+            const childErrors = [];
+            if (value.includes(child.prop)) {
+              // 获取对应的属性，通过类似'a.b.c'的形式
+              const propertyVal = getProperty(this.model, child.prop);
+              // 属性链数组
+              const propertyChain = child.prop.split(".");
+              const propertyName = propertyChain[propertyChain.length - 1];
+
+              let rule = [];
+              if (child.itemRules && child.itemRules.length > 0) {
+                rule = child.itemRules;
+              } else {
+                rule = this.formRules[child.prop];
+              }
+              // 如果不存在对应的规则，直接返回，否则校验器会报错
+              if (!rule) {
+                resolve();
+                return;
+              }
+              // rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+              const rules = [].concat(rule);
+
+              // 对rules数组进行校验
+              if (!rules.length) {
+                resolve();
+              }
+              for (let i = 0; i < rules.length; i++) {
+                const ruleItem = rules[i];
+                // 将u-form-item的触发器转为数组形式
+                const trigger = [].concat(ruleItem?.trigger);
+                // 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
+                if (event && !trigger.includes(event)) {
+                  resolve();
+                  continue;
+                }
+                // 实例化校验对象，传入构造规则
+                const validator = new Schema({
+                  [propertyName]: ruleItem
+                });
+                validator.validate(
+                  {
+                    [propertyName]: propertyVal
+                  },
+                  (errors, fields) => {
+                    if (Array.isArray(errors)) {
+                      errors.forEach((element) => {
+                        element.prop = child.prop;
+                      });
+                      errorsRes.push(...errors);
+                      childErrors.push(...errors);
+                    }
+                    //没有配置，或者配置了showErrorMsg为true时候，才修改子组件message，默认没有配置
+                    if (!options || options?.showErrorMsg == true) {
+                      child.message = childErrors[0]?.message
+                        ? childErrors[0].message
+                        : null;
+                    }
+                    if (i == rules.length - 1) {
+                      resolve(errorsRes);
+                    }
+                  }
+                );
+              }
+            } else {
+              resolve({});
+            }
+          });
+        });
+
+        // 使用Promise.all来等待所有Promise完成
+        Promise.all(promises)
+          .then((results) => {
+            // 执行回调函数
+            typeof callback === "function" && callback(errorsRes);
+          })
+          .catch((error) => {
+            console.error("An error occurred:", error);
+          });
+      });
+    },
+    /**
+     * 校验全部数据
+     * @param {Object} options
+     * @param {Boolean} options.showErrorMsg -是否显示校验信息，
+     */
+    validate(options) {
+      // 开发环境才提示，生产环境不会提示
+      if (
+        process.env.NODE_ENV === "development" &&
+        Object.keys(this.formRules).length === 0
+      ) {
+        error("未设置rules，请看文档说明！如果已经设置，请刷新页面。");
+        return;
+      }
+      return new Promise((resolve, reject) => {
+        // $nextTick是必须的，否则model的变更，可能会延后于validate方法
+        this.$nextTick(() => {
+          // 获取所有form-item的prop，交给validateField方法进行校验
+          const formItemProps = this.children.map((item) => item.prop);
+          // console.log(formItemProps)
+          this.validateField(
+            formItemProps,
+            (errors) => {
+              if (errors.length) {
+                // 如果错误提示方式为toast，则进行提示
+                this.errorType === "toast" &&
+                  uni.showToast({
+                    title: String(errors[0].message),
+                    icon: "none"
+                  });
+                reject(errors);
+              } else {
+                resolve(true);
+              }
+            },
+            null,
+            options
+          );
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/u-form/utils.js

@@ -0,0 +1,65 @@
+/**
+ * @description 获取某个对象下的属性，用于通过类似'a.b.c'的形式去获取一个对象的的属性的形式
+ * @param {object} obj 对象
+ * @param {string} key 需要获取的属性字段
+ * @returns {*}
+ */
+export function getProperty(obj, key) {
+  if (typeof obj !== "object" || null == obj) {
+    return "";
+  }
+  if (typeof key !== "string" || key === "") {
+    return "";
+  }
+  if (key.indexOf(".") !== -1) {
+    const keys = key.split(".");
+    let firstObj = obj[keys[0]] || {};
+
+    for (let i = 1; i < keys.length; i++) {
+      if (firstObj) {
+        firstObj = firstObj[keys[i]];
+      }
+    }
+    return firstObj;
+  }
+  return obj[key];
+}
+
+/**
+ * @description 设置对象的属性值，如果'a.b.c'的形式进行设置
+ * @param {object} obj 对象
+ * @param {string} key 需要设置的属性
+ * @param {string} value 设置的值
+ */
+export function setProperty(obj, key, value) {
+  if (typeof obj !== "object" || null == obj) {
+    return;
+  }
+  // 递归赋值
+  const inFn = function (_obj, keys, v) {
+    // 最后一个属性key
+    if (keys.length === 1) {
+      _obj[keys[0]] = v;
+      return;
+    }
+    // 0~length-1个key
+    while (keys.length > 1) {
+      const k = keys[0];
+      if (!_obj[k] || typeof _obj[k] !== "object") {
+        _obj[k] = {};
+      }
+      const key = keys.shift();
+      // 自调用判断是否存在属性，不存在则自动创建对象
+      inFn(_obj[k], keys, v);
+    }
+  };
+
+  if (typeof key !== "string" || key === "") {
+  } else if (key.indexOf(".") !== -1) {
+    // 支持多层级赋值操作
+    const keys = key.split(".");
+    inFn(obj, keys, value);
+  } else {
+    obj[key] = value;
+  }
+}

package/components/u-form-item/formItem.js

@@ -0,0 +1,24 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:04:32
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/formItem.js
+ */
+export default {
+    // formItem 组件
+    formItem: {
+        label: '',
+        prop: '',
+        rules: [],
+        borderBottom: '',
+        labelPosition: '',
+        labelWidth: '',
+        rightIcon: '',
+        leftIcon: '',
+        required: false,
+        leftIconStyle: '',
+    }
+}