chuchu2/components/Yl_Field/index.js

const verify = require('../../utils/Check');
Component({
	externalClasses: [],
	properties: {
		form: {
			type: Array
		},
		showAll: {
			type: Boolean,
			value: true
		}, //不显示必填项
		onConfirm: {
			type: Function
		},
		interrupt: {
			type: Function
		}, //打断处理,用于条件判断 把form返回到上个页面处理重新传入
	},
	data: {
		temporary: null, //route选择暂存选中项
	},
	options: {
		multipleSlots: true //允许使用多个slot
	},
	methods: {
		route(e) {
			const {
				item
			} = e.currentTarget.dataset;
			getApp().globalData.handleSelect = this.handleRoute.bind(this);
			wx.navigateTo({
				url: item.url + '?params=' + JSON.stringify(item.params) + item.query
			})
			this.setData({
				temporary: {
					item: item,
					index: this.data.form.findIndex(v => v.valueName == item.valueName)
				}
			})
		},
		/* 处理路由返回结果 */
		handleRoute(data) {
			let temporary = this.data.temporary;
			if (temporary.item.interrupt) {
				this.triggerEvent("interrupt", {
					data,
					form: this.data.form,
					temporary
				});
			} else {
				wx.navigateBack();
				this.setData({
					[`form[${temporary.index}].value`]: data.value
				});
				this.confirm()
			}
		},
		/* 改变值 */
		inputChange(e) {
			let item = e.target.dataset.item,
				index = this.data.form.findIndex(v => v.valueName === item.valueName),
				value = e.detail;
			//开始校验  //校验规则 不填:不校验  "base":默认校验 "phone":手机号  "mail":邮箱  "正则表达式"：以自定义内容为校验标准
			if (item.checking) {
				let reg = item.checking;
				switch (item.checking) {
					case 'base':
						value = verify.queryStr(value);
						break;
					case 'phone':
						reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
						this.setData({
							[`form[${index}].errMsg`]: !reg.test(value) ? '请输入正确11位手机号码' : ''
						});
						break;
					case 'mail':
						reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
						this.setData({
							[`form[${index}].errMsg`]: !reg.test(value) ? '请输入正确的邮箱格式' : ''
						});
						break;
					default:
						reg = new RegExp(reg);
						this.setData({
							[`form[${index}].errMsg`]: !reg.test(value) ? item.hint || '输入文本不符合条件!' : ''
						});
						break;
				};
			};
			this.setData({
				[`form[${index}].value`]: value,
				[`form[${index}].error`]: false,
			});
			if (!item.required && value == '') this.setData({
				[`form[${index}].errMsg`]: "",
			});
			this.confirm();
		},
		/* 单列选择器 */
		bindSelectorChange(e) {
			let {
				item,
				index
			} = e.target.dataset,
				value = e.detail.value;
			this.setData({
				[`form[${index}].value`]: item.range[value][item.rangeKey],
				[`form[${index}].rangeIndex`]: value,
				[`form[${index}].error`]: false,
			});
			if (item.interrupt) this.triggerEvent("interrupt", {
				data: this.data.form[index],
				form: this.data.form,
				temporary: {
					item,
					index,
				},
				result: item.range[value]
			});
			this.confirm();
		},
		/* 日期,时间 选择器 */
		bindDateChange(e) {
			let item = e.target.dataset.item,
				index = this.data.form.findIndex(v => v.valueName === item.valueName),
				value = e.detail.value;

			this.setData({
				[`form[${index}].value`]: value,
				[`form[${index}].error`]: false,
			});
			if (item.interrupt) this.triggerEvent("interrupt", {
				data: this.data.form[index],
				form: this.data.form
			});
			this.confirm();
		},
		/* 时间范围选择器 */
		rangeDateChange(e) {
			let item = e.target.dataset.item,
				i = e.target.dataset.index,
				index = this.data.form.findIndex(v => v.valueName === item.valueName),
				value = e.detail.value;
			this.setData({
				[`form[${index}].value[${i}]`]: value,
				[`form[${index}].error`]: false,
			});
			this.confirm();
		},
		/* 省市县 */
		bindRegionChange(e) {
			let item = e.currentTarget.dataset.item,
				index = this.data.form.findIndex(v => v.valueName === item.valueName),
				value = e.detail.value;
			this.setData({
				[`form[${index}].value`]: value,
				[`form[${index}].error`]: false,
			});
			this.confirm();
		},
		toOptions(e) {
			const {
				item
			} = e.currentTarget.dataset;
			wx.navigateTo({
				url: '/packageA/options/index?data=' + JSON.stringify(item),
			})
		},
		/* 自定义选项 */
		setOption(item) {
			let i = this.data.form.findIndex(v => v.valueName == item.valueName);
			this.setData({
				[`form[${i}].value`]: item.value
			});
			this.confirm();
		},
		/* 是否完成必填项 */
		confirm() {
			this.triggerEvent("onConfirm", this.data.form.some(v => {
				if (v.type == "dateRange" && v.required) {
					return v.value[0] == "" || v.value[1] == "";
				} else {
					return v.required && v.value === '';
				}
			}));
			this.setData({
				temporary: null
			})
		},
		/* 性别 */
		sexChange(e) {
			let item = e.currentTarget.dataset.item,
				index = this.data.form.findIndex(v => v.valueName === item.valueName);
			this.setData({
				[`form[${index}].value`]: e.detail,
				[`form[${index}].error`]: false,
			});
			this.confirm();
		},
		/* 单选 选择器改变 */
		radioChange(e) {
			let item = e.currentTarget.dataset.item,
				index = this.data.form.findIndex(v => v.valueName == item.valueName);
			this.setData({
				[`form[${index}].value`]: e.detail,
				[`form[${index}].error`]: false,
			});
			if (item.interrupt) this.triggerEvent("interrupt", {
				data: this.data.form[index],
				form: this.data.form
			});
			this.confirm();
		},
		/* 提交 */
		submit() {
			let obj = {},
				isPass = false;
			this.data.form.forEach((v, i) => {
				obj[v.valueName] = v.value;
				if (v.errMsg != '') {
					this.setData({
						[`form[${i}].error`]: true
					});
					isPass = true;
				}
			});
			if (isPass) {
				wx.showToast({
					title: '请检查表单内容',
					icon: "none"
				})
			} else {
				return obj;
			}
		},
		/* 查询结果 不验证是否必填 */
		query() {
			let obj = {};
			this.data.form.forEach(v => {
				obj[v.valueName] = v.value;
			});
			return obj;
		}
	}
})