uni-forms.vue

<template>
	<view class="uni-forms">
		<form>
			<slot></slot>
		</form>
	</view>
</template>

<script>
	import Validator from './validate.js';
	import {
		deepCopy,
		getValue,
		isRequiredField,
		setDataValue,
		getDataValue,
		realName,
		isRealName,
		rawData,
		isEqual
	} from './utils.js'

	// #ifndef VUE3
	// 后续会慢慢废弃这个方法
	import Vue from 'vue';
	Vue.prototype.binddata = function(name, value, formName) {
		if (formName) {
			this.$refs[formName].setValue(name, value);
		} else {
			let formVm;
			for (let i in this.$refs) {
				const vm = this.$refs[i];
				if (vm && vm.$options && vm.$options.name === 'uniForms') {
					formVm = vm;
					break;
				}
			}
			if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
			formVm.setValue(name, value);
		}
	};
	// #endif
	/**
	 * Forms 表单
	 * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
	 * @property {Object} rules	表单校验规则
	 * @property {String} validateTrigger = [bind|submit|blur]	校验触发器方式 默认 submit
	 * @value bind		发生变化时触发
	 * @value submit	提交时触发
	 * @value blur	  失去焦点时触发
	 * @property {String} labelPosition = [top|left]	label 位置 默认 left
	 * @value top		顶部显示 label
	 * @value left	左侧显示 label
	 * @property {String} labelWidth	label 宽度，默认 65px
	 * @property {String} labelAlign = [left|center|right]	label 居中方式  默认 left
	 * @value left		label 左侧显示
	 * @value center	label 居中
	 * @value right		label 右侧对齐
	 * @property {String} errShowType = [undertext|toast|modal]	校验错误信息提示方式
	 * @value undertext	错误信息在底部显示
	 * @value toast			错误信息toast显示
	 * @value modal			错误信息modal显示
	 * @event {Function} submit	提交时触发
	 * @event {Function} validate	校验结果发生变化触发
	 */
	export default {
		name: 'uniForms',
		emits: ['validate', 'submit'],
		options: {
			virtualHost: true
		},
		props: {
			// 即将弃用
			value: {
				type: Object,
				default () {
					return null;
				}
			},
			// vue3 替换 value 属性
			modelValue: {
				type: Object,
				default () {
					return null;
				}
			},
			// 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
			model: {
				type: Object,
				default () {
					return null;
				}
			},
			// 表单校验规则
			rules: {
				type: Object,
				default () {
					return {};
				}
			},
			//校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
			errShowType: {
				type: String,
				default: 'undertext'
			},
			// 校验触发器方式 默认 bind 取值 [bind|submit]
			validateTrigger: {
				type: String,
				default: 'submit'
			},
			// label 位置，默认 left 取值  top/left
			labelPosition: {
				type: String,
				default: 'left'
			},
			// label 宽度
			labelWidth: {
				type: [String, Number],
				default: ''
			},
			// label 居中方式，默认 left 取值 left/center/right
			labelAlign: {
				type: String,
				default: 'left'
			},
			border: {
				type: Boolean,
				default: false
			}
		},
		provide() {
			return {
				uniForm: this
			}
		},
		data() {
			return {
				// 表单本地值的记录，不应该与传如的值进行关联
				formData: {},
				formRules: {}
			};
		},
		computed: {
			// 计算数据源变化的
			localData() {
				const localVal = this.model || this.modelValue || this.value
				if (localVal) {
					return deepCopy(localVal)
				}
				return {}
			}
		},
		watch: {
			// 监听数据变化 ,暂时不使用，需要单独赋值
			// localData: {},
			// 监听规则变化
			rules: {
				handler: function(val, oldVal) {
					this.setRules(val)
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			// #ifdef VUE3
			let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata
			if (!getbinddata) {
				getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) {
					if (formName) {
						this.$refs[formName].setValue(name, value);
					} else {
						let formVm;
						for (let i in this.$refs) {
							const vm = this.$refs[i];
							if (vm && vm.$options && vm.$options.name === 'uniForms') {
								formVm = vm;
								break;
							}
						}
						if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
						formVm.setValue(name, value);
					}
				}
			}
			// #endif

			// 子组件实例数组
			this.childrens = []
			// TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
			this.inputChildrens = []
			this.setRules(this.rules)
		},
		methods: {
			/**
			 * 外部调用方法
			 * 设置规则 ，主要用于小程序自定义检验规则
			 * @param {Array} rules 规则源数据
			 */
			setRules(rules) {
				// TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
				this.formRules = Object.assign({}, this.formRules, rules)
				// 初始化校验函数
				this.validator = new Validator(rules);
			},

			/**
			 * 外部调用方法
			 * 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
			 * @param {Object} key
			 * @param {Object} value
			 */
			setValue(key, value) {
				let example = this.childrens.find(child => child.name === key);
				if (!example) return null;
				this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || [])
				return example.onFieldChange(this.formData[key]);
			},

			/**
			 * 外部调用方法
			 * 手动提交校验表单
			 * 对整个表单进行校验的方法，参数为一个回调函数。
			 * @param {Array} keepitem 保留不参与校验的字段
			 * @param {type} callback 方法回调
			 */
			validate(keepitem, callback) {
				return this.checkAll(this.formData, keepitem, callback);
			},

			/**
			 * 外部调用方法
			 * 部分表单校验
			 * @param {Array|String} props 需要校验的字段
			 * @param {Function} 回调函数
			 */
			validateField(props = [], callback) {
				props = [].concat(props);
				let invalidFields = {};
				this.childrens.forEach(item => {
					const name = realName(item.name)
					if (props.indexOf(name) !== -1) {
						invalidFields = Object.assign({}, invalidFields, {
							[name]: this.formData[name]
						});
					}
				});
				return this.checkAll(invalidFields, [], callback);
			},

			/**
			 * 外部调用方法
			 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
			 * @param {Array|String} props 需要移除校验的字段 ，不填为所有
			 */
			clearValidate(props = []) {
				props = [].concat(props);
				this.childrens.forEach(item => {
					if (props.length === 0) {
						item.errMsg = '';
					} else {
						const name = realName(item.name)
						if (props.indexOf(name) !== -1) {
							item.errMsg = '';
						}
					}
				});
			},

			/**
			 * 外部调用方法 ，即将废弃
			 * 手动提交校验表单
			 * 对整个表单进行校验的方法，参数为一个回调函数。
			 * @param {Array} keepitem 保留不参与校验的字段
			 * @param {type} callback 方法回调
			 */
			submit(keepitem, callback, type) {
				for (let i in this.dataValue) {
					const itemData = this.childrens.find(v => v.name === i);
					if (itemData) {
						if (this.formData[i] === undefined) {
							this.formData[i] = this._getValue(i, this.dataValue[i]);
						}
					}
				}

				if (!type) {
					console.warn('submit 方法即将废弃，请使用validate方法代替！');
				}

				return this.checkAll(this.formData, keepitem, callback, 'submit');
			},

			// 校验所有
			async checkAll(invalidFields, keepitem, callback, type) {
				// 不存在校验规则 ，则停止校验流程
				if (!this.validator) return
				let childrens = []
				// 处理参与校验的item实例
				for (let i in invalidFields) {
					const item = this.childrens.find(v => realName(v.name) === i)
					if (item) {
						childrens.push(item)
					}
				}

				// 如果validate第一个参数是funciont ,那就走回调
				if (!callback && typeof keepitem === 'function') {
					callback = keepitem;
				}

				let promise;
				// 如果不存在回调，那么使用 Promise 方式返回
				if (!callback && typeof callback !== 'function' && Promise) {
					promise = new Promise((resolve, reject) => {
						callback = function(valid, invalidFields) {
							!valid ? resolve(invalidFields) : reject(valid);
						};
					});
				}

				let results = [];
				// 避免引用错乱 ，建议拷贝对象处理
				let tempFormData = JSON.parse(JSON.stringify(invalidFields))
				// 所有子组件参与校验,使用 for 可以使用  awiat
				for (let i in childrens) {
					const child = childrens[i]
					let name = realName(child.name);
					const result = await child.onFieldChange(tempFormData[name]);
					if (result) {
						results.push(result);
						// toast ,modal 只需要执行第一次就可以
						if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
					}
				}


				if (Array.isArray(results)) {
					if (results.length === 0) results = null;
				}
				if (Array.isArray(keepitem)) {
					keepitem.forEach(v => {
						let vName = realName(v);
						let value = getDataValue(v, this.localData)
						if (value !== undefined) {
							tempFormData[vName] = value
						}
					});
				}

				// TODO submit 即将废弃
				if (type === 'submit') {
					this.$emit('submit', {
						detail: {
							value: tempFormData,
							errors: results
						}
					});
				} else {
					this.$emit('validate', results);
				}

				// const resetFormData = rawData(tempFormData, this.localData, this.name)
				let resetFormData = {}
				resetFormData = rawData(tempFormData, this.name)
				callback && typeof callback === 'function' && callback(results, resetFormData);

				if (promise && callback) {
					return promise;
				} else {
					return null;
				}

			},

			/**
			 * 返回validate事件
			 * @param {Object} result
			 */
			validateCheck(result) {
				this.$emit('validate', result);
			},
			_getValue: getValue,
			_isRequiredField: isRequiredField,
			_setDataValue: setDataValue,
			_getDataValue: getDataValue,
			_realName: realName,
			_isRealName: isRealName,
			_isEqual: isEqual
		}
	};
</script>

<style lang="scss">
	.uni-forms {}
</style>