WZC2/fe/PDA/components/uni-forms-item/uni-forms-item.vue

<template>
	<view class="uni-forms-item" :class="{ 'uni-forms-item--border': border, 'is-first-border': border && isFirstBorder, 'uni-forms-item-error': msg }">
		<view class="uni-forms-item__box">
			<view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
				<view class="uni-forms-item__label" :style="{ width: labelWid , justifyContent: justifyContent }">
					<slot name="left">
						<uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" />
						<text class="label-text">{{ label }}</text>
						<text v-if="required" class="is-required">*</text>
						<view v-if="label" class="label-seat"></view>
					</slot>
				</view>
				<view class="uni-forms-item__content" :class="{ 'is-input-error-border': msg }">
					<slot></slot>
				</view>
			</view>
			<view v-if="msg" class="uni-error-message" :class="{ 'uni-error-msg--boeder': border }" :style="{
					paddingLeft: labelLeft
				}">
				<text class="uni-error-message-text">{{ showMsg === 'undertext' ? msg : '' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * Field 输入框
	 * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=21001
	 * @property {Boolean} 	required 			是否必填，左边显示红色"*"号（默认false）
	 * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit 可选
	 * 	@value bind 	发生变化时触发
	 * 	@value submit 	提交时触发
	 * @property {String } 	leftIcon 			label左边的图标，限 uni-ui 的图标名称
	 * @property {String } 	iconColor 			左边通过icon配置的图标的颜色（默认#606266）
	 * @property {String } 	label 				输入框左边的文字提示
	 * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
	 * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
	 * 	@value left		label 左侧显示
	 * 	@value center	label 居中
	 * 	@value right	label 右侧对齐
	 * @property {String } 	labelPosition = [top|left] label的文字的位置（默认left）
	 * 	@value top	顶部显示 label
	 * 	@value left	左侧显示 label
	 * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
	 * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
	 */

	export default {
		name: 'uniFormsItem',
		props: {
			// 自定义内容
			custom: {
				type: Boolean,
				default: false
			},
			// 是否显示报错信息
			showMessage: {
				type: Boolean,
				default: true
			},
			name: String,
			required: Boolean,
			validateTrigger: {
				type: String,
				default: ''
			},
			leftIcon: String,
			iconColor: {
				type: String,
				default: '#606266'
			},
			label: String,
			// 左边标题的宽度单位px
			labelWidth: {
				type: [Number, String],
				default: ''
			},
			// 对齐方式，left|center|right
			labelAlign: {
				type: String,
				default: ''
			},
			// lable的位置，可选为 left-左边，top-上边
			labelPosition: {
				type: String,
				default: ''
			},
			errorMessage: {
				type: [String, Boolean],
				default: ''
			},
			// 表单校验规则
			rules: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				errorTop: false,
				errorBottom: false,
				labelMarginBottom: '',
				errorWidth: '',
				errMsg: '',
				val: '',
				labelPos: '',
				labelWid: '',
				labelAli: '',
				showMsg: 'undertext',
				border: false,
				isFirstBorder: false,
				isArray: false,
				arrayField: ''
			};
		},
		computed: {
			msg() {
				return this.errorMessage || this.errMsg;
			},
			fieldStyle() {
				let style = {};
				if (this.labelPos == 'top') {
					style.padding = '0 0';
					this.labelMarginBottom = '6px';
				}
				if (this.labelPos == 'left' && this.msg !== false && this.msg != '') {
					style.paddingBottom = '0px';
					this.errorBottom = true;
					this.errorTop = false;
				} else if (this.labelPos == 'top' && this.msg !== false && this.msg != '') {
					this.errorBottom = false;
					this.errorTop = true;
				} else {
					// style.paddingBottom = ''
					this.errorTop = false;
					this.errorBottom = false;
				}
				return style;
			},

			// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
			justifyContent() {
				if (this.labelAli === 'left') return 'flex-start';
				if (this.labelAli === 'center') return 'center';
				if (this.labelAli === 'right') return 'flex-end';
			},
			labelLeft() {
				return (this.labelPos === 'left' ? parseInt(this.labelWid) : 0) + 'px'
			}
		},
		watch: {
			validateTrigger(trigger) {
				this.formTrigger = trigger;
			}
		},
		created() {
			this.form = this.getForm();
			this.group = this.getForm('uniGroup');
			this.formRules = [];
			this.formTrigger = this.validateTrigger;
			// 处理 name，是否数组
			if (this.name && this.name.indexOf('[') !== -1 && this.name.indexOf(']') !== -1) {
				this.isArray = true;
				this.arrayField = this.name
				// fix by mehaotian 修改不修改的情况，动态值不检验的问题
				this.form.formData[this.name] = this.form._getValue(this.name, '')
			}
		},
		mounted() {
			if (this.form) {
				this.form.childrens.push(this);
			}
			this.init();
		},
		// #ifndef VUE3
		destroyed() {
			if (this.__isUnmounted) return
			this.unInit()
		},
		// #endif
		// #ifdef VUE3
		unmounted() {
			this.__isUnmounted = true
			this.unInit()
		},
		// #endif
		methods: {
			init() {
				if (this.form) {
					let {
						formRules,
						validator,
						formData,
						value,
						labelPosition,
						labelWidth,
						labelAlign,
						errShowType
					} = this.form;
					this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;

					if (this.label) {
						this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth || 70))
					} else {
						this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth || 'auto'))
					}
					if (this.labelWid && this.labelWid !== 'auto') {
						this.labelWid += 'px'
					}
					this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;

					// 判断第一个 item
					if (!this.form.isFirstBorder) {
						this.form.isFirstBorder = true;
						this.isFirstBorder = true;
					}

					// 判断 group 里的第一个 item
					if (this.group) {
						if (!this.group.isFirstBorder) {
							this.group.isFirstBorder = true;
							this.isFirstBorder = true;
						}
					}

					this.border = this.form.border;
					this.showMsg = errShowType;
					let name = this.isArray ? this.arrayField : this.name;
					if (formRules) {
						if (!formRules[name]) {
							formRules[name] = {
								rules: this.rules
							}
						}
						this.formRules = formRules[name];
					}
					if (this.rules.length > 0) {
						validator.updateSchema(formRules);
					}

					this.validator = validator;
				} else {
					this.labelPos = this.labelPosition || 'left';
					this.labelWid = this.labelWidth || 65;
					this.labelAli = this.labelAlign || 'left';
				}
			},
			unInit() {
				if (this.form) {
					this.form.childrens.forEach((item, index) => {
						if (item === this) {
							this.form.childrens.splice(index, 1)
							delete this.form.formData[item.name]
						}
					})
				}
			},
			/**
			 * 获取父元素实例
			 */
			getForm(name = 'uniForms') {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== name) {
					parent = parent.$parent;
					if (!parent) return false;
					parentName = parent.$options.name;
				}
				return parent;
			},

			/**
			 * 移除该表单项的校验结果
			 */
			clearValidate() {
				this.errMsg = '';
			},
			/**
			 * 子组件调用，如 easyinput
			 * @param {Object} value
			 */
			setValue(value) {
				let name = this.isArray ? this.arrayField : this.name;
				if (name) {
					if (this.errMsg) this.errMsg = '';
					// 给组件赋值
					this.form.formData[name] = this.form._getValue(name, value);
					if (!this.formRules || (typeof this.formRules && JSON.stringify(this.formRules) === '{}')) return;
					this.triggerCheck(this.form._getValue(this.name, value));
				}
			},

			/**
			 * 校验规则
			 * @param {Object} value
			 */
			async triggerCheck(value, formTrigger) {
				let promise = null;
				this.errMsg = '';
				if (!this.validator) return;
				const isNoField = this.isRequired(this.formRules.rules || []);
				let isTrigger = this.isTrigger(this.formRules.validateTrigger, this.validateTrigger, this.form.validateTrigger);
				let result = null;
				if (!!isTrigger || formTrigger) {
					let name = this.isArray ? this.arrayField : this.name;
					result = await this.validator.validateUpdate({
							[name]: value
						},
						this.form.formData
					);
				}
				// 判断是否必填,非必填，不填不校验，填写才校验
				if (!isNoField && (value === undefined || value === '')) {
					result = null;
				}
				const inputComp = this.form.inputChildrens.find(child => child.rename === this.name);
				if ((isTrigger || formTrigger) && result && result.errorMessage) {
					if (inputComp) {
						inputComp.errMsg = result.errorMessage;
					}
					if (this.form.errShowType === 'toast') {
						uni.showToast({
							title: result.errorMessage || '校验错误',
							icon: 'none'
						});
					}
					if (this.form.errShowType === 'modal') {
						uni.showModal({
							title: '提示',
							content: result.errorMessage || '校验错误'
						});
					}
				} else {
					if (inputComp) {
						inputComp.errMsg = '';
					}
				}

				this.errMsg = !result ? '' : result.errorMessage;
				// 触发validate事件
				this.form.validateCheck(result ? result : null);
				// typeof callback === 'function' && callback(result ? result : null);
				// if (promise) return promise
				return result ? result : null;
			},
			/**
			 * 触发时机
			 * @param {Object} event
			 */
			isTrigger(rule, itemRlue, parentRule) {
				let rl = true;
				//  bind  submit
				if (rule === 'submit' || !rule) {
					if (rule === undefined) {
						if (itemRlue !== 'bind') {
							if (!itemRlue) {
								return parentRule === 'bind' ? true : false;
							}
							return false;
						}
						return true;
					}
					return false;
				}
				return true;
			},
			// 是否有必填字段
			isRequired(rules) {
				let isNoField = false;
				for (let i = 0; i < rules.length; i++) {
					const ruleData = rules[i];
					if (ruleData.required) {
						isNoField = true;
						break;
					}
				}
				return isNoField;
			}
		}
	};
</script>

<style scoped>
	.uni-forms-item {
		position: relative;
		padding: 0px;
		text-align: left;
		color: #333;
		font-size: 14px;
	}

	.uni-forms-item__box {
		position: relative;
	}

	.uni-forms-item__inner {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding-bottom: 22px;
	}

	.is-direction-left {
		flex-direction: row;
	}

	.is-direction-top {
		flex-direction: column;
	}

	.uni-forms-item__label {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-shrink: 0;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		width: 65px;
		padding: 5px 0;
		height: 36px;
	}

	.uni-forms-item__label .label-text {
		font-size: 14px;
		color: #333;
	}

	.uni-forms-item__label .label-seat {
		margin-right: 5px;
	}

	.uni-forms-item__content {
		/* #ifndef APP-NVUE */
		width: 100%;
		box-sizing: border-box;
		min-height: 36px;
		/* #endif */
		flex: 1;
	}

	.label-icon {
		margin-right: 5px;
		margin-top: -1px;
	}

	.is-required {
		color: #dd524d;
	}

	.uni-error-message {
		position: absolute;
		bottom: 0px;
		left: 0;
		text-align: left;
	}

	.uni-error-message-text {
		line-height: 22px;
		color: #dd524d;
		font-size: 12px;
	}

	.uni-error-msg--boeder {
		position: relative;
		bottom: 0;
		line-height: 22px;
	}

	.is-input-error-border {
		border-color: #dd524d;
	}

	.uni-forms-item--border {
		margin-bottom: 0;
		padding: 10px 0;
		border-top: 1px #eee solid;
	}

	.uni-forms-item--border .uni-forms-item__inner {
		padding: 0;
	}

	.is-first-border {
		/* #ifndef APP-NVUE */
		border: none;
		/* #endif */
		/* #ifdef APP-NVUE */
		border-width: 0;
		/* #endif */
	}

	.uni-forms--no-padding {
		padding: 0;
	}
</style>