You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
447 lines
12 KiB
447 lines
12 KiB
<template> |
|
<!-- --> |
|
<view class="uni-forms" :class="{'uni-forms--top':!border}"> |
|
<form @submit.stop="submitForm" @reset="resetForm"> |
|
<slot></slot> |
|
</form> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import Vue from 'vue' |
|
import Validator from './validate.js' |
|
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) |
|
} |
|
} |
|
|
|
/** |
|
* Forms 表单 |
|
* @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 |
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=2773 |
|
* @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: 'uniForms', |
|
props: { |
|
value: { |
|
type: Object, |
|
default () { |
|
return {} |
|
} |
|
}, |
|
// 表单校验规则 |
|
rules: { |
|
type: Object, |
|
default () { |
|
return {} |
|
} |
|
}, |
|
// 校验触发器方式，默认 关闭 |
|
validateTrigger: { |
|
type: String, |
|
default: '' |
|
}, |
|
// label 位置，可选值 top/left |
|
labelPosition: { |
|
type: String, |
|
default: 'left' |
|
}, |
|
// label 宽度，单位 px |
|
labelWidth: { |
|
type: [String, Number], |
|
default: 65 |
|
}, |
|
// label 居中方式，可选值 left/center/right |
|
labelAlign: { |
|
type: String, |
|
default: 'left' |
|
}, |
|
errShowType: { |
|
type: String, |
|
default: 'undertext' |
|
}, |
|
border: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
formData: {} |
|
}; |
|
}, |
|
watch: { |
|
rules(newVal) { |
|
this.init(newVal) |
|
}, |
|
trigger(trigger) { |
|
this.formTrigger = trigger |
|
}, |
|
}, |
|
created() { |
|
let _this = this |
|
this.childrens = [] |
|
this.inputChildrens = [] |
|
this.checkboxChildrens = [] |
|
this.formRules = [] |
|
// this.init(this.rules) |
|
}, |
|
mounted() { |
|
this.init(this.rules) |
|
}, |
|
methods: { |
|
init(formRules) { |
|
// 判断是否有规则 |
|
if (Object.keys(formRules).length > 0) { |
|
this.formTrigger = this.trigger |
|
this.formRules = formRules |
|
// if (!this.validator) { |
|
this.validator = new Validator(formRules) |
|
// } |
|
} else { |
|
return |
|
} |
|
// 判断表单存在那些实例 |
|
for (let i in this.value) { |
|
const itemData = this.childrens.find(v => v.name === i) |
|
if (itemData) { |
|
this.formData[i] = this.value[i] |
|
itemData.init() |
|
} |
|
} |
|
|
|
// watch 每个属性 ，需要知道具体那个属性发变化 |
|
Object.keys(this.value).forEach((key) => { |
|
this.$watch('value.' + key, (newVal) => { |
|
const itemData = this.childrens.find(v => v.name === key) |
|
if (itemData) { |
|
this.formData[key] = this._getValue(key, newVal) |
|
itemData.init() |
|
} else { |
|
this.formData[key] = this.value[key] || null |
|
} |
|
}) |
|
}) |
|
}, |
|
/** |
|
* 设置校验规则 |
|
* @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 |
|
this.$emit('input', Object.assign({}, this.value, this.formData)) |
|
return example.triggerCheck(value, callback) |
|
}, |
|
|
|
/** |
|
* TODO 表单提交， 小程序暂不支持这种用法 |
|
* @param {Object} event |
|
*/ |
|
submitForm(event) { |
|
const value = event.detail.value |
|
return this.validateAll(value || this.formData, 'submit') |
|
}, |
|
|
|
/** |
|
* 表单重置 |
|
* @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 = '' |
|
inputComp.$emit('input', inputComp.multiple ? [] : '') |
|
} |
|
}) |
|
|
|
this.childrens.forEach((item) => { |
|
if (item.name) { |
|
this.formData[item.name] = this._getValue(item.name, '') |
|
} |
|
}) |
|
|
|
this.$emit('input', this.formData) |
|
this.$emit('reset', event) |
|
}, |
|
|
|
/** |
|
* 触发表单校验，通过 @validate 获取 |
|
* @param {Object} validate |
|
*/ |
|
validateCheck(validate) { |
|
if (validate === null) validate = null |
|
this.$emit('validate', validate) |
|
}, |
|
/** |
|
* 校验所有或者部分表单 |
|
*/ |
|
async validateAll(invalidFields, type, callback) { |
|
this.childrens.forEach(item => { |
|
item.errMsg = '' |
|
}) |
|
|
|
let promise; |
|
if (!callback && typeof callback !== 'function' && Promise) { |
|
promise = new Promise((resolve, reject) => { |
|
callback = function(valid, invalidFields) { |
|
!valid ? resolve(invalidFields) : reject(valid); |
|
}; |
|
}); |
|
} |
|
|
|
let fieldsValue = {} |
|
let tempInvalidFields = Object.assign({}, invalidFields) |
|
|
|
Object.keys(this.formRules).forEach(item => { |
|
const values = this.formRules[item] |
|
const rules = (values && values.rules) || [] |
|
let isNoField = false |
|
for (let i = 0; i < rules.length; i++) { |
|
const rule = rules[i] |
|
if (rule.required) { |
|
isNoField = true |
|
break |
|
} |
|
} |
|
// 如果存在 required 才会将内容插入校验对象 |
|
if (!isNoField && |
|
((tempInvalidFields[item] === undefined || |
|
tempInvalidFields[item] === '') && |
|
tempInvalidFields[item] !== false |
|
)) { |
|
delete tempInvalidFields[item] |
|
} |
|
}) |
|
|
|
// 循环字段是否存在于校验规则中 |
|
for (let i in this.formRules) { |
|
for (let j in tempInvalidFields) { |
|
const index = this.childrens.findIndex(v => v.name === j) |
|
if (i === j && index !== -1) { |
|
fieldsValue[i] = tempInvalidFields[i] |
|
} |
|
} |
|
} |
|
let result = [] |
|
let example = null |
|
|
|
let newFormData = {} |
|
this.childrens.forEach(v => { |
|
newFormData[v.name] = this._getValue(v.name, invalidFields[v.name]) |
|
}) |
|
if (this.validator) { |
|
for (let i in fieldsValue) { |
|
// 循环校验，目的是异步校验 |
|
const resultData = await this.validator.validateUpdate({ |
|
[i]: fieldsValue[i] |
|
}, this.formData) |
|
|
|
// 未通过 |
|
if (resultData) { |
|
// 获取当前未通过子组件实例 |
|
example = this.childrens.find(child => child.name === resultData.key) |
|
// 获取easyInput 组件实例 |
|
const inputComp = this.inputChildrens.find(child => child.rename === (example && example |
|
.name)) |
|
if (inputComp) { |
|
inputComp.errMsg = resultData.errorMessage |
|
} |
|
result.push(resultData) |
|
// 区分触发类型 |
|
if (this.errShowType === 'undertext') { |
|
if (example) example.errMsg = resultData.errorMessage |
|
} else { |
|
if (this.errShowType === 'toast') { |
|
uni.showToast({ |
|
title: resultData.errorMessage || '校验错误', |
|
icon: 'none' |
|
}) |
|
break |
|
} else if (this.errShowType === 'modal') { |
|
uni.showModal({ |
|
title: '提示', |
|
content: resultData.errorMessage || '校验错误' |
|
}) |
|
break |
|
} else { |
|
if (example) example.errMsg = resultData.errorMessage |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
if (Array.isArray(result)) { |
|
if (result.length === 0) result = null |
|
} |
|
|
|
if (type === 'submit') { |
|
this.$emit('submit', { |
|
detail: { |
|
value: newFormData, |
|
errors: result |
|
} |
|
}) |
|
} else { |
|
this.$emit('validate', result) |
|
} |
|
|
|
callback && typeof callback === 'function' && callback(result, newFormData) |
|
|
|
if (promise && callback) { |
|
return promise |
|
} else { |
|
return null |
|
} |
|
}, |
|
|
|
/** |
|
* 外部调用方法 |
|
* 手动提交校验表单 |
|
* 对整个表单进行校验的方法，参数为一个回调函数。 |
|
*/ |
|
submit(callback) { |
|
// Object.assign(this.formData,formData) |
|
for (let i in this.value) { |
|
const itemData = this.childrens.find(v => v.name === i) |
|
if (itemData) { |
|
if (this.formData[i] === undefined) { |
|
this.formData[i] = this._getValue(i, this.value[i]) |
|
} |
|
} |
|
} |
|
return this.validateAll(this.formData, 'submit', callback) |
|
}, |
|
|
|
/** |
|
* 外部调用方法 |
|
* 校验表单 |
|
* 对整个表单进行校验的方法，参数为一个回调函数。 |
|
*/ |
|
validate(callback) { |
|
return this.validateAll(this.formData, '', callback) |
|
}, |
|
|
|
/** |
|
* 部分表单校验 |
|
* @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, '', 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 scoped></style> |