@10yun/cv-mobile-ui 0.5.20 → 0.5.21

package/uni-ui/lib/uni-forms/uni-forms.vue

@@ -1 +1,375 @@
-<template>
  <view class="uni-forms">
    <form>
      <slot></slot>
    </form>
  </view>
  deepCopy,
  getValue,
  isRequiredField,
  setDataValue,
  getDataValue,
  realName,
  isRealName,
  rawData,
  isEqual
  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|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} 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	提交时触发
 * @event {Function} validate	校验结果发生变化触发
 */
  name: 'uniForms',
  emits: ['validate', 'submit'],
  options: {
    virtualHost: true
  },
  props: {
    // 即将弃用
    value: {
      type: Object,
      default() {
        return null;
      }
    },
    // vue3 替换 value 属性
    modelValue: {
      type: Object,
      default() {
        return null;
      }
    },
    // 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
    model: {
      type: Object,
      default() {
        return null;
      }
    },
    // 表单校验规则
    rules: {
      type: Object,
      default() {
        return {};
      }
    },
    //校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
    errShowType: {
      type: String,
      default: 'undertext'
    },
    // 校验触发器方式 默认 bind 取值 [bind|submit]
    validateTrigger: {
      type: String,
      default: 'submit'
    },
    // label 位置，默认 left 取值  top/left
    labelPosition: {
      type: String,
      default: 'left'
    },
    // label 宽度
    labelWidth: {
      type: [String, Number],
      default: ''
    },
    // label 居中方式，默认 left 取值 left/center/right
    labelAlign: {
      type: String,
      default: 'left'
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  provide() {
    return {
      uniForm: this
    };
  },
  data() {
    return {
      // 表单本地值的记录，不应该与传如的值进行关联
      formData: {},
      formRules: {}
    };
  },
  computed: {
    // 计算数据源变化的
    localData() {
      const localVal = this.model || this.modelValue || this.value;
      if (localVal) {
        return deepCopy(localVal);
      }
      return {};
    }
  },
  watch: {
    // 监听数据变化 ,暂时不使用，需要单独赋值
    // localData: {},
    // 监听规则变化
    rules: {
      handler: function (val, oldVal) {
        this.setRules(val);
      },
      deep: true,
      immediate: true
    }
  },
  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
    // 子组件实例数组
    this.childrens = [];
    // TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
    this.inputChildrens = [];
    this.setRules(this.rules);
  },
  methods: {
    /**
     * 外部调用方法
     * 设置规则 ，主要用于小程序自定义检验规则
     * @param {Array} rules 规则源数据
     */
    setRules(rules) {
      // TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
      this.formRules = Object.assign({}, this.formRules, rules);
      // 初始化校验函数
      this.validator = new Validator(rules);
    },
    /**
     * 外部调用方法
     * 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
     * @param {Object} key
     * @param {Object} value
     */
    setValue(key, value) {
      let example = this.childrens.find((child) => child.name === key);
      if (!example) return null;
      this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || []);
      return example.onFieldChange(this.formData[key]);
    },
    /**
     * 外部调用方法
     * 手动提交校验表单
     * 对整个表单进行校验的方法，参数为一个回调函数。
     * @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) {
        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.checkAll(this.formData, keepitem, callback, 'submit');
    },
    // 校验所有
    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);
        }
      }
      // 如果validate第一个参数是funciont ,那就走回调
      if (!callback && typeof keepitem === 'function') {
        callback = keepitem;
      }
      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;
        }
      }
      if (Array.isArray(results)) {
        if (results.length === 0) results = null;
      }
      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;
      }
    },
    /**
     * 返回validate事件
     * @param {Object} result
     */
    validateCheck(result) {
      this.$emit('validate', result);
    },
    _getValue: getValue,
    _isRequiredField: isRequiredField,
    _setDataValue: setDataValue,
    _getDataValue: getDataValue,
    _realName: realName,
    _isRealName: isRealName,
    _isEqual: isEqual
  }
+<template>
+  <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) {
+    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
+/**
+ * Forms 表单
+ * @description 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+ * @property {Object} rules	表单校验规则
+ * @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} 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	提交时触发
+ * @event {Function} validate	校验结果发生变化触发
+ */
+export default {
+  name: 'uniForms',
+  emits: ['validate', 'submit'],
+  options: {
+    virtualHost: true
+  },
+  props: {
+    // 即将弃用
+    value: {
+      type: Object,
+      default() {
+        return null;
+      }
+    },
+    // vue3 替换 value 属性
+    modelValue: {
+      type: Object,
+      default() {
+        return null;
+      }
+    },
+    // 1.4.0 开始将不支持 v-model ，且废弃 value 和 modelValue
+    model: {
+      type: Object,
+      default() {
+        return null;
+      }
+    },
+    // 表单校验规则
+    rules: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    //校验错误信息提示方式 默认 undertext 取值 [undertext|toast|modal]
+    errShowType: {
+      type: String,
+      default: 'undertext'
+    },
+    // 校验触发器方式 默认 bind 取值 [bind|submit]
+    validateTrigger: {
+      type: String,
+      default: 'submit'
+    },
+    // label 位置，默认 left 取值  top/left
+    labelPosition: {
+      type: String,
+      default: 'left'
+    },
+    // label 宽度
+    labelWidth: {
+      type: [String, Number],
+      default: ''
+    },
+    // label 居中方式，默认 left 取值 left/center/right
+    labelAlign: {
+      type: String,
+      default: 'left'
+    },
+    border: {
+      type: Boolean,
+      default: false
+    }
+  },
+  provide() {
+    return {
+      uniForm: this
+    };
+  },
+  data() {
+    return {
+      // 表单本地值的记录，不应该与传如的值进行关联
+      formData: {},
+      formRules: {}
+    };
+  },
+  computed: {
+    // 计算数据源变化的
+    localData() {
+      const localVal = this.model || this.modelValue || this.value;
+      if (localVal) {
+        return deepCopy(localVal);
+      }
+      return {};
+    }
+  },
+  watch: {
+    // 监听数据变化 ,暂时不使用，需要单独赋值
+    // localData: {},
+    // 监听规则变化
+    rules: {
+      handler: function (val, oldVal) {
+        this.setRules(val);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  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
+    // 子组件实例数组
+    this.childrens = [];
+    // TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
+    this.inputChildrens = [];
+    this.setRules(this.rules);
+  },
+  methods: {
+    /**
+     * 外部调用方法
+     * 设置规则 ，主要用于小程序自定义检验规则
+     * @param {Array} rules 规则源数据
+     */
+    setRules(rules) {
+      // TODO 有可能子组件合并规则的时机比这个要早，所以需要合并对象 ，而不是直接赋值，可能会被覆盖
+      this.formRules = Object.assign({}, this.formRules, rules);
+      // 初始化校验函数
+      this.validator = new Validator(rules);
+    },
+    /**
+     * 外部调用方法
+     * 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
+     * @param {Object} key
+     * @param {Object} value
+     */
+    setValue(key, value) {
+      let example = this.childrens.find((child) => child.name === key);
+      if (!example) return null;
+      this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || []);
+      return example.onFieldChange(this.formData[key]);
+    },
+    /**
+     * 外部调用方法
+     * 手动提交校验表单
+     * 对整个表单进行校验的方法，参数为一个回调函数。
+     * @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) {
+        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.checkAll(this.formData, keepitem, callback, 'submit');
+    },
+    // 校验所有
+    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);
+        }
+      }
+      // 如果validate第一个参数是funciont ,那就走回调
+      if (!callback && typeof keepitem === 'function') {
+        callback = keepitem;
+      }
+      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;
+        }
+      }
+      if (Array.isArray(results)) {
+        if (results.length === 0) results = null;
+      }
+      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;
+      }
+    },
+    /**
+     * 返回validate事件
+     * @param {Object} result
+     */
+    validateCheck(result) {
+      this.$emit('validate', result);
+    },
+    _getValue: getValue,
+    _isRequiredField: isRequiredField,
+    _setDataValue: setDataValue,
+    _getDataValue: getDataValue,
+    _realName: realName,
+    _isRealName: isRealName,
+    _isEqual: isEqual
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>