dykj-outsource-12123/uni_modules/uni-ui/components/uni-forms/uni-forms.vue

421 lines
11 KiB
Vue
Raw Normal View History

2024-06-26 09:12:03 +08:00
<template>
<!-- -->
<view class="uni-forms" :class="{'uni-forms--top':!border}">
<form @submit.stop="submitForm" @reset="resetForm">
<slot></slot>
</form>
</view>
</template>
<script>
/**
* 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 提交时触发
*/
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)
}
}
import Validator from './validate.js'
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
},
value: {
handler(newVal) {
if (this.isChildEdit) {
this.isChildEdit = false
return
}
this.childrens.forEach((item) => {
if (item.name) {
const formDataValue = newVal.hasOwnProperty(item.name) ? newVal[item.name] : null
this.formData[item.name] = this._getValue(item, formDataValue)
}
})
},
deep: true
}
},
created() {
let _this = this
this.childrens = []
this.inputChildrens = []
this.checkboxChildrens = []
this.formRules = []
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)
}
}
this.childrens.forEach((item) => {
item.init()
})
},
/**
* 设置校验规则
* @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
this.isChildEdit = true
value = this._getValue(example, 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.isChildEdit = true
this.childrens.forEach((item) => {
if (item.name) {
this.formData[item.name] = this._getValue(item, '')
}
})
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] && tempInvalidFields[item] !== false)) {
delete tempInvalidFields[item]
}
})
// 循环字段是否存在于校验规则中
for (let i in this.formRules) {
for (let j in tempInvalidFields) {
if (i === j) {
fieldsValue[i] = tempInvalidFields[i]
}
}
}
let result = []
let example = null
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)
const inputComp = this.inputChildrens.find(child => child.rename === 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: invalidFields,
errors: result
}
})
} else {
this.$emit('validate', result)
}
callback && typeof callback === 'function' && callback(result, invalidFields)
if (promise && callback) {
return promise
} else {
return null
}
},
/**
* 外部调用方法
* 手动提交校验表单
* 对整个表单进行校验的方法参数为一个回调函数
*/
submit(callback) {
// Object.assign(this.formData,formData)
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 => {
// item.parentVal((val, name) => {
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 转换成指定的类型
_getValue(item, value) {
const rules = item.formRules.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 = value === '' || value === null ? null : Number(value)
}
// 简单判断真假值
if (isRuleBool) {
value = !value ? false : true
}
return value
},
// 过滤数字类型
type_filter(format) {
return format === 'int' || format === 'double' || format === 'number'
}
}
}
</script>
<style lang="scss" scoped>
.uni-forms {
overflow: hidden;
// padding: 10px 15px;
// background-color: #fff;
}
.uni-forms--top {
padding: 10px 15px;
// padding-top: 22px;
}
</style>