gxd-uni-library-editx 1.0.0

package/src/components/XdForm/XdForm.vue

@@ -0,0 +1,481 @@
+<template>
+	<view class="uni-forms" :class="{ 'uni-forms--top': !border }">
+		<form @submit.stop="submitForm" @reset="resetForm">
+			<slot></slot>
+		</form>
+	</view>
+</template>
+
+<script>
+	// #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 === 'XdForm') {
+					formVm = vm;
+					break;
+				}
+			}
+			if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+			formVm.setValue(name, value);
+		}
+	};
+	// #endif
+
+
+
+	import Validator from './validate.js';
+	/**
+	 * Forms 表单
+	 * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-forms.html
+	 * @property {Object} rules	表单校验规则
+	 * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit
+	 * @value bind		发生变化时触发
+	 * @value submit	提交时触发
+	 * @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	提交时触发
+	 */
+
+	export default {
+		name: 'XdForm',
+		components: {},
+		emits:['input','reset','validate','submit'],
+		props: {
+			// 即将弃用
+			value: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 替换 value 属性
+			modelValue: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 表单校验规则
+			rules: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 校验触发器方式，默认 关闭
+			validateTrigger: {
+				type: String,
+				default: ''
+			},
+			// label 位置，可选值 top/left
+			labelPosition: {
+				type: String,
+				default: 'left'
+			},
+			// label 宽度，单位 rpx
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// label 居中方式，可选值 left/center/right
+			labelAlign: {
+				type: String,
+				default: 'right'
+			},
+      // label 居中方式，可选值 left/center/right
+      contentAlign: {
+        type: String,
+        default: 'right'
+      },
+			errShowType: {
+				type: String,
+				default: 'undertext'
+			},
+			border: {
+				type: Boolean,
+				default: false
+			},
+      // form item 左右边距，单位 rpx
+      paddingBetween: {
+        type: [String, Number],
+        default: 62
+      }
+		},
+		data() {
+			return {
+				formData: {}
+			};
+		},
+		computed: {
+			dataValue() {
+				if (JSON.stringify(this.modelValue) === '{}') {
+					return this.value
+				} else {
+					return this.modelValue
+				}
+			}
+		},
+		watch: {
+			rules(newVal) {
+				// 如果规则发生变化，要初始化组件
+				this.init(newVal);
+			},
+			labelPosition() {
+				this.childrens.forEach(vm => {
+					vm.init()
+				})
+			}
+		},
+		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 === 'XdForm') {
+								formVm = vm;
+								break;
+							}
+						}
+						if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
+						formVm.setValue(name, value);
+					}
+				}
+			}
+			// #endif
+
+			// 存放watch 监听数组
+			this.unwatchs = [];
+			// 存放子组件数组
+			this.childrens = [];
+			// 存放 easyInput 组件
+			this.inputChildrens = [];
+			// 存放 dataCheckbox 组件
+			this.checkboxChildrens = [];
+			// 存放规则
+			this.formRules = [];
+			this.init(this.rules);
+		},
+
+		methods: {
+			init(formRules) {
+				// 判断是否有规则
+				if (Object.keys(formRules).length === 0) {
+					this.formData = this.dataValue
+					return
+				};
+				this.formRules = formRules;
+				this.validator = new Validator(formRules);
+				this.registerWatch();
+			},
+			// 监听 watch
+			registerWatch() {
+				// 取消监听,避免多次调用 init 重复执行 $watch
+				this.unwatchs.forEach(v => v());
+				this.childrens.forEach((v) => {
+					v.init()
+				})
+				// watch 每个属性 ，需要知道具体那个属性发变化
+				Object.keys(this.dataValue).forEach(key => {
+					let watch = this.$watch(
+						'dataValue.' + key,
+						value => {
+							if (!value) return
+							// 如果是对象 ，则平铺内容
+							if (value.toString() === '[object Object]') {
+								for (let i in value) {
+									let name = `${key}[${i}]`;
+									this.formData[name] = this._getValue(name, value[i]);
+								}
+							} else {
+								this.formData[key] = this._getValue(key, value);
+							}
+						},
+						{
+							deep: true,
+							immediate: true
+						}
+					);
+					this.unwatchs.push(watch);
+				});
+			},
+			/**
+			 * 公开给用户使用
+			 * 设置校验规则
+			 * @param {Object} formRules
+			 */
+			setRules(formRules) {
+				this.init(formRules);
+			},
+			/**
+			 * 公开给用户使用
+			 * 设置自定义表单组件 value 值
+			 *  @param {String} name 字段名称
+			 *  @param {String} value 字段值
+			 */
+			setValue(name, value, callback) {
+				let example = this.childrens.find(child => child.name === name);
+				if (!example) return null;
+				value = this._getValue(example.name, value);
+				this.formData[name] = value;
+				example.val = value;
+				return example.triggerCheck(value, callback);
+			},
+
+			/**
+			 * 表单重置
+			 * @param {Object} event
+			 */
+			resetForm(event) {
+				this.childrens.forEach(item => {
+					item.errMsg = '';
+					const inputComp = this.inputChildrens.find(child => child.rename === item.name);
+					if (inputComp) {
+						inputComp.errMsg = '';
+						// fix by mehaotian 不触发其他组件的 setValue
+						inputComp.is_reset = true
+						inputComp.$emit('input', inputComp.multiple ? [] : '');
+						inputComp.$emit('update:modelValue', inputComp.multiple ? [] : '');
+					}
+				});
+
+				this.childrens.forEach(item => {
+					if (item.name) {
+						this.formData[item.name] = this._getValue(item.name, '');
+					}
+				});
+
+				this.$emit('reset', event);
+			},
+
+			/**
+			 * 触发表单校验，通过 @validate 获取
+			 * @param {Object} validate
+			 */
+			validateCheck(validate) {
+				if (validate === null) validate = null;
+				this.$emit('validate', validate);
+			},
+			/**
+			 * 校验所有或者部分表单
+			 */
+			async validateAll(invalidFields, type, keepitem, callback) {
+				let childrens = []
+				for (let i in invalidFields) {
+					const item = this.childrens.find(v => v.name === i)
+					if (item) {
+						childrens.push(item)
+					}
+				}
+
+				if (!callback && typeof keepitem === 'function') {
+					callback = keepitem;
+				}
+
+
+				let promise;
+				if (!callback && typeof callback !== 'function' && Promise) {
+					promise = new Promise((resolve, reject) => {
+						callback = function(valid, invalidFields) {
+							!valid ? resolve(invalidFields) : reject(valid);
+						};
+					});
+				}
+
+				let results = [];
+				let newFormData = {};
+				if (this.validator) {
+					for (let key in childrens) {
+						const child = childrens[key];
+						let name = child.isArray ? child.arrayField : child.name;
+						if (child.isArray) {
+							if (child.name.indexOf('[') !== -1 && child.name.indexOf(']') !== -1) {
+								const fieldData = child.name.split('[');
+								const fieldName = fieldData[0];
+								const fieldValue = fieldData[1].replace(']', '');
+								if (!newFormData[fieldName]) {
+									newFormData[fieldName] = {};
+								}
+								newFormData[fieldName][fieldValue] = this._getValue(name, invalidFields[name]);
+							}
+						} else {
+							newFormData[name] = this._getValue(name, invalidFields[name]);
+						}
+						const result = await child.triggerCheck(invalidFields[name], true);
+						if (result) {
+							results.push(result);
+							if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
+						}
+					}
+				} else {
+					newFormData = invalidFields
+				}
+				if (Array.isArray(results)) {
+					if (results.length === 0) results = null;
+				}
+
+				if (Array.isArray(keepitem)) {
+					keepitem.forEach(v => {
+						newFormData[v] = this.dataValue[v];
+					});
+				}
+
+				if (type === 'submit') {
+					this.$emit('submit', {
+						detail: {
+							value: newFormData,
+							errors: results
+						}
+					});
+				} else {
+					this.$emit('validate', results);
+				}
+
+				callback && typeof callback === 'function' && callback(results, newFormData);
+
+				if (promise && callback) {
+					return promise;
+				} else {
+					return null;
+				}
+			},
+			submitForm() {},
+			/**
+			 * 外部调用方法
+			 * 手动提交校验表单
+			 * 对整个表单进行校验的方法，参数为一个回调函数。
+			 */
+			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.validateAll(this.formData, 'submit', keepitem, callback);
+			},
+
+			/**
+			 * 外部调用方法
+			 * 校验表单
+			 * 对整个表单进行校验的方法，参数为一个回调函数。
+			 */
+			validate(keepitem, callback) {
+				return this.submit(keepitem, callback, true);
+			},
+
+			/**
+			 * 部分表单校验
+			 * @param {Object} props
+			 * @param {Object} cb
+			 */
+			validateField(props, callback) {
+				props = [].concat(props);
+				let invalidFields = {};
+				this.childrens.forEach(item => {
+					if (props.indexOf(item.name) !== -1) {
+						invalidFields = Object.assign({}, invalidFields, {
+							[item.name]: this.formData[item.name]
+						});
+					}
+				});
+				return this.validateAll(invalidFields, 'submit', [], callback);
+			},
+
+			/**
+			 * 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
+			 */
+			resetFields() {
+				this.resetForm();
+			},
+
+			/**
+			 * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+			 */
+			clearValidate(props) {
+				props = [].concat(props);
+				this.childrens.forEach(item => {
+					const inputComp = this.inputChildrens.find(child => child.rename === item.name);
+					if (props.length === 0) {
+						item.errMsg = '';
+						if (inputComp) {
+							inputComp.errMsg = '';
+						}
+					} else {
+						if (props.indexOf(item.name) !== -1) {
+							item.errMsg = '';
+							if (inputComp) {
+								inputComp.errMsg = '';
+							}
+						}
+					}
+				});
+			},
+			/**
+			 * 把 value 转换成指定的类型
+			 * @param {Object} key
+			 * @param {Object} value
+			 */
+			_getValue(key, value) {
+				const rules = (this.formRules[key] && this.formRules[key].rules) || [];
+				const isRuleNum = rules.find(val => val.format && this.type_filter(val.format));
+				const isRuleBool = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
+				// 输入值为 number
+				if (isRuleNum) {
+					value = isNaN(value) ? value : value === '' || value === null ? null : Number(value);
+				}
+				// 简单判断真假值
+				if (isRuleBool) {
+					value = !value ? false : true;
+				}
+				return value;
+			},
+			/**
+			 * 过滤数字类型
+			 * @param {Object} format
+			 */
+			type_filter(format) {
+				return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
+			}
+		}
+	};
+</script>
+
+<style lang="scss" >
+	.uni-forms {
+		// overflow: hidden;
+		// padding: 10px 15px;
+	}
+
+	.uni-forms--top {
+		// padding: 10px 15px;
+		// padding-top: 22px;
+	}
+</style>