1
This commit is contained in:
houjunxiang
@@ -1,3 +1,43 @@
|
||||
## 1.4.13（2024-10-08）
|
||||
- 修复 校验规则在抖音开发者工具上不生效的bug，详见：[https://ask.dcloud.net.cn/question/191933](https://ask.dcloud.net.cn/question/191933)
|
||||
## 1.4.12 (2024-9-21)
|
||||
- 修复 form上次修改的问题
|
||||
## 1.4.11 (2024-9-14)
|
||||
- 修复 binddata的兼容性问题
|
||||
## 1.4.10（2023-11-03）
|
||||
- 优化 labelWidth 描述错误
|
||||
## 1.4.9（2023-02-10）
|
||||
- 修复 required 参数无法动态绑定
|
||||
## 1.4.8（2022-08-23）
|
||||
- 优化 根据 rules 自动添加 required 的问题
|
||||
## 1.4.7（2022-08-22）
|
||||
- 修复 item 未设置 require 属性，rules 设置 require 后，星号也显示的 bug，详见：[https://ask.dcloud.net.cn/question/151540](https://ask.dcloud.net.cn/question/151540)
|
||||
## 1.4.6（2022-07-13）
|
||||
- 修复 model 需要校验的值没有声明对应字段时，导致第一次不触发校验的bug
|
||||
## 1.4.5（2022-07-05）
|
||||
- 新增 更多表单示例
|
||||
- 优化 子表单组件过期提示的问题
|
||||
- 优化 子表单组件uni-datetime-picker、uni-data-select、uni-data-picker的显示样式
|
||||
## 1.4.4（2022-07-04）
|
||||
- 更新 删除组件日志
|
||||
## 1.4.3（2022-07-04）
|
||||
- 修复 由 1.4.0 引发的 label 插槽不生效的bug
|
||||
## 1.4.2（2022-07-04）
|
||||
- 修复 子组件找不到 setValue 报错的bug
|
||||
## 1.4.1（2022-07-04）
|
||||
- 修复 uni-data-picker 在 uni-forms-item 中报错的bug
|
||||
- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
|
||||
## 1.4.0（2022-06-30）
|
||||
- 【重要】组件逻辑重构，部分用法用旧版本不兼容，请注意兼容问题
|
||||
- 【重要】组件使用 Provide/Inject 方式注入依赖，提供了自定义表单组件调用 uni-forms 校验表单的能力
|
||||
- 新增 model 属性，等同于原 value/modelValue 属性，旧属性即将废弃
|
||||
- 新增 validateTrigger 属性的 blur 值，仅 uni-easyinput 生效
|
||||
- 新增 onFieldChange 方法，可以对子表单进行校验，可替代binddata方法
|
||||
- 新增 子表单的 setRules 方法，配合自定义校验函数使用
|
||||
- 新增 uni-forms-item 的 setRules 方法，配置动态表单使用可动态更新校验规则
|
||||
- 优化 动态表单校验方式，废弃拼接name的方式
|
||||
## 1.3.3（2022-06-22）
|
||||
- 修复 表单校验顺序无序问题
|
||||
## 1.3.2（2021-12-09）
|
||||
-
|
||||
## 1.3.1（2021-11-19）
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,27 @@
|
||||
<template>
|
||||
<view class="uni-forms" :class="{ 'uni-forms--top': !border }">
|
||||
<form @submit.stop="submitForm" @reset="resetForm">
|
||||
<view class="uni-forms">
|
||||
<form>
|
||||
<slot></slot>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Validator from './validate.js';
|
||||
import {
|
||||
deepCopy,
|
||||
getValue,
|
||||
isRequiredField,
|
||||
setDataValue,
|
||||
getDataValue,
|
||||
realName,
|
||||
isRealName,
|
||||
rawData,
|
||||
isEqual
|
||||
} from './utils.js'
|
||||
|
||||
// #ifndef VUE3
|
||||
// 后续会慢慢废弃这个方法
|
||||
import Vue from 'vue';
|
||||
Vue.prototype.binddata = function(name, value, formName) {
|
||||
if (formName) {
|
||||
@@ -26,22 +40,19 @@
|
||||
}
|
||||
};
|
||||
// #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
|
||||
* @property {String} validateTrigger = [bind|submit|blur] 校验触发器方式 默认 submit
|
||||
* @value bind 发生变化时触发
|
||||
* @value submit 提交时触发
|
||||
* @value blur 失去焦点时触发
|
||||
* @property {String} labelPosition = [top|left] label 位置 默认 left
|
||||
* @value top 顶部显示 label
|
||||
* @value left 左侧显示 label
|
||||
* @property {String} labelWidth label 宽度，默认 65px
|
||||
* @property {String} labelWidth label 宽度，默认 70px
|
||||
* @property {String} labelAlign = [left|center|right] label 居中方式 默认 left
|
||||
* @value left label 左侧显示
|
||||
* @value center label 居中
|
||||
@@ -51,25 +62,39 @@
|
||||
* @value toast 错误信息toast显示
|
||||
* @value modal 错误信息modal显示
|
||||
* @event {Function} submit 提交时触发
|
||||
* @event {Function} validate 校验结果发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniForms',
|
||||
components: {},
|
||||
emits:['input','reset','validate','submit'],
|
||||
emits: ['validate', 'submit'],
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
// 即将弃用
|
||||
value: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 替换 value 属性
|
||||
// vue3 替换 value 属性
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
|
||||
model: {
|
||||
type: Object,
|
||||
default () {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 表单校验规则
|
||||
@@ -79,58 +104,68 @@
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 校验触发器方式，默认 关闭
|
||||
//校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
|
||||
errShowType: {
|
||||
type: String,
|
||||
default: 'undertext'
|
||||
},
|
||||
// 校验触发器方式 默认 bind 取值 [bind|submit]
|
||||
validateTrigger: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: 'submit'
|
||||
},
|
||||
// label 位置，可选值 top/left
|
||||
// label 位置，默认 left 取值 top/left
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// label 宽度，单位 px
|
||||
// label 宽度
|
||||
labelWidth: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// label 居中方式，可选值 left/center/right
|
||||
// label 居中方式，默认 left 取值 left/center/right
|
||||
labelAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
errShowType: {
|
||||
type: String,
|
||||
default: 'undertext'
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
uniForm: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {}
|
||||
// 表单本地值的记录，不应该与传如的值进行关联
|
||||
formData: {},
|
||||
formRules: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dataValue() {
|
||||
if (JSON.stringify(this.modelValue) === '{}') {
|
||||
return this.value
|
||||
} else {
|
||||
return this.modelValue
|
||||
// 计算数据源变化的
|
||||
localData() {
|
||||
const localVal = this.model || this.modelValue || this.value
|
||||
if (localVal) {
|
||||
return deepCopy(localVal)
|
||||
}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rules(newVal) {
|
||||
// 如果规则发生变化，要初始化组件
|
||||
this.init(newVal);
|
||||
},
|
||||
labelPosition() {
|
||||
this.childrens.forEach(vm => {
|
||||
vm.init()
|
||||
})
|
||||
// 监听数据变化 ,暂时不使用，需要单独赋值
|
||||
// localData: {},
|
||||
// 监听规则变化
|
||||
rules: {
|
||||
handler: function(val, oldVal) {
|
||||
this.setRules(val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -150,213 +185,102 @@
|
||||
}
|
||||
}
|
||||
if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
|
||||
formVm.setValue(name, value);
|
||||
if(formVm.model)formVm.model[name] = value
|
||||
if(formVm.modelValue)formVm.modelValue[name] = value
|
||||
if(formVm.value)formVm.value[name] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 存放watch 监听数组
|
||||
this.unwatchs = [];
|
||||
// 存放子组件数组
|
||||
this.childrens = [];
|
||||
// 存放 easyInput 组件
|
||||
this.inputChildrens = [];
|
||||
// 存放 dataCheckbox 组件
|
||||
this.checkboxChildrens = [];
|
||||
// 存放规则
|
||||
this.formRules = [];
|
||||
this.init(this.rules);
|
||||
// 子组件实例数组
|
||||
this.childrens = []
|
||||
// TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
|
||||
this.inputChildrens = []
|
||||
this.setRules(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
|
||||
* 外部调用方法
|
||||
* 设置规则 ，主要用于小程序自定义检验规则
|
||||
* @param {Array} rules 规则源数据
|
||||
*/
|
||||
setRules(formRules) {
|
||||
this.init(formRules);
|
||||
setRules(rules) {
|
||||
// TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
|
||||
this.formRules = Object.assign({}, this.formRules, rules)
|
||||
// 初始化校验函数
|
||||
this.validator = new Validator(rules);
|
||||
},
|
||||
|
||||
/**
|
||||
* 公开给用户使用
|
||||
* 设置自定义表单组件 value 值
|
||||
* @param {String} name 字段名称
|
||||
* @param {String} value 字段值
|
||||
* 外部调用方法
|
||||
* 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
|
||||
* @param {Object} key
|
||||
* @param {Object} value
|
||||
*/
|
||||
setValue(name, value, callback) {
|
||||
let example = this.childrens.find(child => child.name === name);
|
||||
setValue(key, value) {
|
||||
let example = this.childrens.find(child => child.name === key);
|
||||
if (!example) return null;
|
||||
value = this._getValue(example.name, value);
|
||||
this.formData[name] = value;
|
||||
example.val = value;
|
||||
return example.triggerCheck(value, callback);
|
||||
this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || [])
|
||||
return example.onFieldChange(this.formData[key]);
|
||||
},
|
||||
|
||||
/**
|
||||
* 表单重置
|
||||
* @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() {},
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 手动提交校验表单
|
||||
* 对整个表单进行校验的方法，参数为一个回调函数。
|
||||
* @param {Array} keepitem 保留不参与校验的字段
|
||||
* @param {type} callback 方法回调
|
||||
*/
|
||||
validate(keepitem, callback) {
|
||||
return this.checkAll(this.formData, keepitem, callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 部分表单校验
|
||||
* @param {Array|String} props 需要校验的字段
|
||||
* @param {Function} 回调函数
|
||||
*/
|
||||
validateField(props = [], callback) {
|
||||
props = [].concat(props);
|
||||
let invalidFields = {};
|
||||
this.childrens.forEach(item => {
|
||||
const name = realName(item.name)
|
||||
if (props.indexOf(name) !== -1) {
|
||||
invalidFields = Object.assign({}, invalidFields, {
|
||||
[name]: this.formData[name]
|
||||
});
|
||||
}
|
||||
});
|
||||
return this.checkAll(invalidFields, [], callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
|
||||
* @param {Array|String} props 需要移除校验的字段 ，不填为所有
|
||||
*/
|
||||
clearValidate(props = []) {
|
||||
props = [].concat(props);
|
||||
this.childrens.forEach(item => {
|
||||
if (props.length === 0) {
|
||||
item.errMsg = '';
|
||||
} else {
|
||||
const name = realName(item.name)
|
||||
if (props.indexOf(name) !== -1) {
|
||||
item.errMsg = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法 ，即将废弃
|
||||
* 手动提交校验表单
|
||||
* 对整个表单进行校验的方法，参数为一个回调函数。
|
||||
* @param {Array} keepitem 保留不参与校验的字段
|
||||
* @param {type} callback 方法回调
|
||||
*/
|
||||
submit(keepitem, callback, type) {
|
||||
for (let i in this.dataValue) {
|
||||
@@ -367,106 +291,114 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!type) {
|
||||
console.warn('submit 方法即将废弃，请使用validate方法代替！');
|
||||
}
|
||||
return this.validateAll(this.formData, 'submit', keepitem, callback);
|
||||
|
||||
return this.checkAll(this.formData, keepitem, callback, 'submit');
|
||||
},
|
||||
|
||||
/**
|
||||
* 外部调用方法
|
||||
* 校验表单
|
||||
* 对整个表单进行校验的方法，参数为一个回调函数。
|
||||
*/
|
||||
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]
|
||||
});
|
||||
// 校验所有
|
||||
async checkAll(invalidFields, keepitem, callback, type) {
|
||||
// 不存在校验规则 ，则停止校验流程
|
||||
if (!this.validator) return
|
||||
let childrens = []
|
||||
// 处理参与校验的item实例
|
||||
for (let i in invalidFields) {
|
||||
const item = this.childrens.find(v => realName(v.name) === i)
|
||||
if (item) {
|
||||
childrens.push(item)
|
||||
}
|
||||
});
|
||||
return this.validateAll(invalidFields, 'submit', [], callback);
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
|
||||
*/
|
||||
resetFields() {
|
||||
this.resetForm();
|
||||
},
|
||||
// 如果validate第一个参数是funciont ,那就走回调
|
||||
if (!callback && typeof keepitem === 'function') {
|
||||
callback = keepitem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除表单项的校验结果。传入待移除的表单项的 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 = '';
|
||||
}
|
||||
}
|
||||
let promise;
|
||||
// 如果不存在回调，那么使用 Promise 方式返回
|
||||
if (!callback && typeof callback !== 'function' && Promise) {
|
||||
promise = new Promise((resolve, reject) => {
|
||||
callback = function(valid, invalidFields) {
|
||||
!valid ? resolve(invalidFields) : reject(valid);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
let results = [];
|
||||
// 避免引用错乱 ，建议拷贝对象处理
|
||||
let tempFormData = JSON.parse(JSON.stringify(invalidFields))
|
||||
// 所有子组件参与校验,使用 for 可以使用 awiat
|
||||
for (let i in childrens) {
|
||||
const child = childrens[i]
|
||||
let name = realName(child.name);
|
||||
const result = await child.onFieldChange(tempFormData[name]);
|
||||
if (result) {
|
||||
results.push(result);
|
||||
// toast ,modal 只需要执行第一次就可以
|
||||
if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 把 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;
|
||||
|
||||
|
||||
if (Array.isArray(results)) {
|
||||
if (results.length === 0) results = null;
|
||||
}
|
||||
return value;
|
||||
if (Array.isArray(keepitem)) {
|
||||
keepitem.forEach(v => {
|
||||
let vName = realName(v);
|
||||
let value = getDataValue(v, this.localData)
|
||||
if (value !== undefined) {
|
||||
tempFormData[vName] = value
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TODO submit 即将废弃
|
||||
if (type === 'submit') {
|
||||
this.$emit('submit', {
|
||||
detail: {
|
||||
value: tempFormData,
|
||||
errors: results
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$emit('validate', results);
|
||||
}
|
||||
|
||||
// const resetFormData = rawData(tempFormData, this.localData, this.name)
|
||||
let resetFormData = {}
|
||||
resetFormData = rawData(tempFormData, this.name)
|
||||
callback && typeof callback === 'function' && callback(results, resetFormData);
|
||||
|
||||
if (promise && callback) {
|
||||
return promise;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 过滤数字类型
|
||||
* @param {Object} format
|
||||
* 返回validate事件
|
||||
* @param {Object} result
|
||||
*/
|
||||
type_filter(format) {
|
||||
return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
|
||||
}
|
||||
validateCheck(result) {
|
||||
this.$emit('validate', result);
|
||||
},
|
||||
_getValue: getValue,
|
||||
_isRequiredField: isRequiredField,
|
||||
_setDataValue: setDataValue,
|
||||
_getDataValue: getDataValue,
|
||||
_realName: realName,
|
||||
_isRealName: isRealName,
|
||||
_isEqual: isEqual
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-forms {
|
||||
// overflow: hidden;
|
||||
// padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-forms--top {
|
||||
// padding: 10px 15px;
|
||||
// padding-top: 22px;
|
||||
}
|
||||
<style lang="scss">
|
||||
.uni-forms {}
|
||||
</style>
|
||||
|
||||
293
uni_modules/uni-forms/components/uni-forms/utils.js
Normal file
293
uni_modules/uni-forms/components/uni-forms/utils.js
Normal file
@@ -0,0 +1,293 @@
|
||||
/**
|
||||
* 简单处理对象拷贝
|
||||
* @param {Obejct} 被拷贝对象
|
||||
* @@return {Object} 拷贝对象
|
||||
*/
|
||||
export const deepCopy = (val) => {
|
||||
return JSON.parse(JSON.stringify(val))
|
||||
}
|
||||
/**
|
||||
* 过滤数字类型
|
||||
* @param {String} format 数字类型
|
||||
* @@return {Boolean} 返回是否为数字类型
|
||||
*/
|
||||
export const typeFilter = (format) => {
|
||||
return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
|
||||
}
|
||||
|
||||
/**
|
||||
* 把 value 转换成指定的类型，用于处理初始值，原因是初始值需要入库不能为 undefined
|
||||
* @param {String} key 字段名
|
||||
* @param {any} value 字段值
|
||||
* @param {Object} rules 表单校验规则
|
||||
*/
|
||||
export const getValue = (key, value, rules) => {
|
||||
const isRuleNumType = rules.find(val => val.format && typeFilter(val.format));
|
||||
const isRuleBoolType = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
|
||||
// 输入类型为 number
|
||||
if (!!isRuleNumType) {
|
||||
if (!value && value !== 0) {
|
||||
value = null
|
||||
} else {
|
||||
value = isNumber(Number(value)) ? Number(value) : value
|
||||
}
|
||||
}
|
||||
|
||||
// 输入类型为 boolean
|
||||
if (!!isRuleBoolType) {
|
||||
value = isBoolean(value) ? value : false
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @param {String|Array} name 真实名称，需要使用 realName 获取
|
||||
* @param {Object} data 原始数据
|
||||
* @param {any} value 需要设置的值
|
||||
*/
|
||||
export const setDataValue = (field, formdata, value) => {
|
||||
formdata[field] = value
|
||||
return value || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @param {String|Array} field 真实名称，需要使用 realName 获取
|
||||
* @param {Object} data 原始数据
|
||||
*/
|
||||
export const getDataValue = (field, data) => {
|
||||
return objGet(data, field)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单类型
|
||||
* @param {String|Array} field 真实名称，需要使用 realName 获取
|
||||
*/
|
||||
export const getDataValueType = (field, data) => {
|
||||
const value = getDataValue(field, data)
|
||||
return {
|
||||
type: type(value),
|
||||
value
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单可用的真实name
|
||||
* @param {String|Array} name 表单name
|
||||
* @@return {String} 表单可用的真实name
|
||||
*/
|
||||
export const realName = (name, data = {}) => {
|
||||
const base_name = _basePath(name)
|
||||
if (typeof base_name === 'object' && Array.isArray(base_name) && base_name.length > 1) {
|
||||
const realname = base_name.reduce((a, b) => a += `#${b}`, '_formdata_')
|
||||
return realname
|
||||
}
|
||||
return base_name[0] || name
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否表单可用的真实name
|
||||
* @param {String|Array} name 表单name
|
||||
* @@return {String} 表单可用的真实name
|
||||
*/
|
||||
export const isRealName = (name) => {
|
||||
const reg = /^_formdata_#*/
|
||||
return reg.test(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取表单数据的原始格式
|
||||
* @@return {Object|Array} object 需要解析的数据
|
||||
*/
|
||||
export const rawData = (object = {}, name) => {
|
||||
let newData = JSON.parse(JSON.stringify(object))
|
||||
let formData = {}
|
||||
for(let i in newData){
|
||||
let path = name2arr(i)
|
||||
objSet(formData,path,newData[i])
|
||||
}
|
||||
return formData
|
||||
}
|
||||
|
||||
/**
|
||||
* 真实name还原为 array
|
||||
* @param {*} name
|
||||
*/
|
||||
export const name2arr = (name) => {
|
||||
let field = name.replace('_formdata_#', '')
|
||||
field = field.split('#').map(v => (isNumber(v) ? Number(v) : v))
|
||||
return field
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象中设置值
|
||||
* @param {Object|Array} object 源数据
|
||||
* @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
|
||||
* @param {String} value 需要设置的值
|
||||
*/
|
||||
export const objSet = (object, path, value) => {
|
||||
if (typeof object !== 'object') return object;
|
||||
_basePath(path).reduce((o, k, i, _) => {
|
||||
if (i === _.length - 1) {
|
||||
// 若遍历结束直接赋值
|
||||
o[k] = value
|
||||
return null
|
||||
} else if (k in o) {
|
||||
// 若存在对应路径，则返回找到的对象，进行下一次遍历
|
||||
return o[k]
|
||||
} else {
|
||||
// 若不存在对应路径，则创建对应对象，若下一路径是数字，新对象赋值为空数组，否则赋值为空对象
|
||||
o[k] = /^[0-9]{1,}$/.test(_[i + 1]) ? [] : {}
|
||||
return o[k]
|
||||
}
|
||||
}, object)
|
||||
// 返回object
|
||||
return object;
|
||||
}
|
||||
|
||||
// 处理 path， path有三种形式：'a[0].b.c'、'a.0.b.c' 和 ['a','0','b','c']，需要统一处理成数组，便于后续使用
|
||||
function _basePath(path) {
|
||||
// 若是数组，则直接返回
|
||||
if (Array.isArray(path)) return path
|
||||
// 若有 '[',']'，则替换成将 '[' 替换成 '.',去掉 ']'
|
||||
return path.replace(/\[/g, '.').replace(/\]/g, '').split('.')
|
||||
}
|
||||
|
||||
/**
|
||||
* 从对象中获取值
|
||||
* @param {Object|Array} object 源数据
|
||||
* @param {String| Array} path 'a.b.c' 或 ['a',0,'b','c']
|
||||
* @param {String} defaultVal 如果无法从调用链中获取值的默认值
|
||||
*/
|
||||
export const objGet = (object, path, defaultVal = 'undefined') => {
|
||||
// 先将path处理成统一格式
|
||||
let newPath = _basePath(path)
|
||||
// 递归处理，返回最后结果
|
||||
let val = newPath.reduce((o, k) => {
|
||||
return (o || {})[k]
|
||||
}, object);
|
||||
return !val || val !== undefined ? val : defaultVal
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 是否为 number 类型
|
||||
* @param {any} num 需要判断的值
|
||||
* @return {Boolean} 是否为 number
|
||||
*/
|
||||
export const isNumber = (num) => {
|
||||
return !isNaN(Number(num))
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否为 boolean 类型
|
||||
* @param {any} bool 需要判断的值
|
||||
* @return {Boolean} 是否为 boolean
|
||||
*/
|
||||
export const isBoolean = (bool) => {
|
||||
return (typeof bool === 'boolean')
|
||||
}
|
||||
/**
|
||||
* 是否有必填字段
|
||||
* @param {Object} rules 规则
|
||||
* @return {Boolean} 是否有必填字段
|
||||
*/
|
||||
export const isRequiredField = (rules) => {
|
||||
let isNoField = false;
|
||||
for (let i = 0; i < rules.length; i++) {
|
||||
const ruleData = rules[i];
|
||||
if (ruleData.required) {
|
||||
isNoField = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return isNoField;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取数据类型
|
||||
* @param {Any} obj 需要获取数据类型的值
|
||||
*/
|
||||
export const type = (obj) => {
|
||||
var class2type = {};
|
||||
|
||||
// 生成class2type映射
|
||||
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
|
||||
class2type["[object " + item + "]"] = item.toLowerCase();
|
||||
})
|
||||
if (obj == null) {
|
||||
return obj + "";
|
||||
}
|
||||
return typeof obj === "object" || typeof obj === "function" ?
|
||||
class2type[Object.prototype.toString.call(obj)] || "object" :
|
||||
typeof obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断两个值是否相等
|
||||
* @param {any} a 值
|
||||
* @param {any} b 值
|
||||
* @return {Boolean} 是否相等
|
||||
*/
|
||||
export const isEqual = (a, b) => {
|
||||
//如果a和b本来就全等
|
||||
if (a === b) {
|
||||
//判断是否为0和-0
|
||||
return a !== 0 || 1 / a === 1 / b;
|
||||
}
|
||||
//判断是否为null和undefined
|
||||
if (a == null || b == null) {
|
||||
return a === b;
|
||||
}
|
||||
//接下来判断a和b的数据类型
|
||||
var classNameA = toString.call(a),
|
||||
classNameB = toString.call(b);
|
||||
//如果数据类型不相等，则返回false
|
||||
if (classNameA !== classNameB) {
|
||||
return false;
|
||||
}
|
||||
//如果数据类型相等，再根据不同数据类型分别判断
|
||||
switch (classNameA) {
|
||||
case '[object RegExp]':
|
||||
case '[object String]':
|
||||
//进行字符串转换比较
|
||||
return '' + a === '' + b;
|
||||
case '[object Number]':
|
||||
//进行数字转换比较,判断是否为NaN
|
||||
if (+a !== +a) {
|
||||
return +b !== +b;
|
||||
}
|
||||
//判断是否为0或-0
|
||||
return +a === 0 ? 1 / +a === 1 / b : +a === +b;
|
||||
case '[object Date]':
|
||||
case '[object Boolean]':
|
||||
return +a === +b;
|
||||
}
|
||||
//如果是对象类型
|
||||
if (classNameA == '[object Object]') {
|
||||
//获取a和b的属性长度
|
||||
var propsA = Object.getOwnPropertyNames(a),
|
||||
propsB = Object.getOwnPropertyNames(b);
|
||||
if (propsA.length != propsB.length) {
|
||||
return false;
|
||||
}
|
||||
for (var i = 0; i < propsA.length; i++) {
|
||||
var propName = propsA[i];
|
||||
//如果对应属性对应值不相等，则返回false
|
||||
if (a[propName] !== b[propName]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
//如果是数组类型
|
||||
if (classNameA == '[object Array]') {
|
||||
if (a.toString() == b.toString()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "uni-forms",
|
||||
"displayName": "uni-forms 表单",
|
||||
"version": "1.3.2",
|
||||
"version": "1.4.13",
|
||||
"description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
@@ -17,11 +17,7 @@
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
@@ -38,7 +34,8 @@
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
@@ -49,7 +46,8 @@
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
@@ -74,7 +72,8 @@
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
"QQ": "y",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
|
||||
Reference in New Issue
Block a user