bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-form/u-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,214 @@
<template>
   <view class="u-form">
      <slot />
   </view>
</template>

<script>
   import props from "./props.js";
   import Schema from "../../libs/util/async-validator";
   // åŽ»é™¤è­¦å‘Šä¿¡æ¯
   Schema.warning = function() {};
   /**
    * Form è¡¨å•
    * @description æ­¤ç»„件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
    * @tutorial https://www.uviewui.com/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 <u--formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></u--form>
    */
   export default {
      name: "u-form",
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      provide() {
         return {
            uForm: this,
         };
      },
      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 = uni.$u.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) {
               uni.$u.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 = uni.$u.getProperty(this.originalModel, prop);
               uni.$u.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) {
            // $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
            this.$nextTick(() => {
               // æ ¡éªŒé”™è¯¯ä¿¡æ¯ï¼Œè¿”回给回调方法，用于存放所有form-item的错误信息
               const errorsRes = [];
               // å¦‚果为字符串，转为数组
               value = [].concat(value);
               // åŽ†échildren所有子form-item
               this.children.map((child) => {
                  // ç”¨äºŽå­˜æ”¾form-item的错误信息
                  const childErrors = [];
                  if (value.includes(child.prop)) {
                     // èŽ·å–对应的属性，通过类似'a.b.c'的形式
                     const propertyVal = uni.$u.getProperty(
                        this.model,
                        child.prop
                     );
                     // å±žæ€§é“¾æ•°ç»„
                     const propertyChain = child.prop.split(".");
                     const propertyName =
                        propertyChain[propertyChain.length - 1];

                     const rule = this.formRules[child.prop];
                     // å¦‚果不存在对应的规则，直接返回，否则校验器会报错
                     if (!rule) return;
                     // rule规则可为数组形式，也可为对象形式，此处拼接成为数组
                     const rules = [].concat(rule);

                     // å¯¹rules数组进行校验
                     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)) continue;
                        // å®žä¾‹åŒ–校验对象，传入构造规则
                        const validator = new Schema({
                           [propertyName]: ruleItem,
                        });
                        validator.validate({
                              [propertyName]: propertyVal,
                           },
                           (errors, fields) => {
                              if (uni.$u.test.array(errors)) {
                                 errorsRes.push(...errors);
                                 childErrors.push(...errors);
                              }
                              child.message =
                                 childErrors[0]?.message ?? null;
                           }
                        );
                     }
                  }
               });
               // æ‰§è¡Œå›žè°ƒå‡½æ•°
               typeof callback === "function" && callback(errorsRes);
            });
         },
         // æ ¡éªŒå…¨éƒ¨æ•°æ®
         validate(callback) {
            // å¼€å‘环境才提示，生产环境不会提示
            if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
               uni.$u.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
                  );
                  this.validateField(formItemProps, (errors) => {
                     if(errors.length) {
                        // å¦‚果错误提示方式为toast，则进行提示
                        this.errorType === 'toast' && uni.$u.toast(errors[0].message)
                        reject(errors)
                     } else {
                        resolve(true)
                     }
                  });
               });
            });
         },
      },
   };
</script>

<style lang="scss" scoped>
</style>