<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 === 'uniForms') {
|
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://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',
|
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 宽度，单位 px
|
labelWidth: {
|
type: [String, Number],
|
default: ''
|
},
|
// label 居中方式，可选值 left/center/right
|
labelAlign: {
|
type: String,
|
default: 'left'
|
},
|
errShowType: {
|
type: String,
|
default: 'undertext'
|
},
|
border: {
|
type: Boolean,
|
default: false
|
}
|
},
|
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 === 'uniForms') {
|
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);
|
},
|
// mounted() {
|
// 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>
|
