phone_uni/uni_modules/uview-plus/components/u-form/u-form.vue

<template>
	<view class="u-form">
		<slot />
	</view>
</template>

<script>
	import { props } from "./props.js";
	import { mpMixin } from '../../libs/mixin/mpMixin';
	import { mixin } from '../../libs/mixin/mixin';
	import Schema from "../../libs/util/async-validator";
	import { toast, getProperty, setProperty, deepClone, error } from '../../libs/function/index';
	import test from '../../libs/function/test';
	// 去除警告信息
	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: [mpMixin, 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 = 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) {
				// $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
				this.$nextTick(() => {
					// 校验错误信息，返回给回调方法，用于存放所有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 (test.array(errors)) {
												errors.forEach(element => {
													element.prop = child.prop;
												});
												errorsRes.push(...errors);
												childErrors.push(...errors);
											}
											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);
						});
				});
			},
			// 校验全部数据
			validate(callback) {
				// 开发环境才提示，生产环境不会提示
				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' && toast(errors[0].message)
								reject(errors)
							} else {
								resolve(true)
							}
						});
					});
				});
			},
		},
	};
</script>

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