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

package/uni-ui/lib/uni-file-picker/upload-file.vue

@@ -0,0 +1 @@
+<template>
  <view class="uni-file-picker__files">
    <view v-if="!readonly" class="files-button" @click="choose">
      <slot></slot>
    </view>
    <!-- :class="{'is-text-box':showType === 'list'}" -->
    <view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
      <!-- ,'is-list-card':showType === 'list-card' -->
      <view
        class="uni-file-picker__lists-box"
        v-for="(item, index) in list"
        :key="index"
        :class="{
          'files-border': index !== 0 && styles.dividline
        }"
        :style="index !== 0 && styles.dividline && borderLineStyle"
      >
        <view class="uni-file-picker__item">
          <!-- :class="{'is-text-image':showType === 'list'}" -->
          <!-- 	<view class="files__image is-text-image">
          <view class="files__name">{{ item.name }}</view>
          <view v-if="delIcon && !readonly" class="icon-del-box icon-files" @click="delFile(index)">
            <view class="icon-del icon-files"></view>
            <view class="icon-del rotate"></view>
          </view>
        </view>
        <view v-if="(item.progress && item.progress !== 100) || item.progress === 0" class="file-picker__progress">
          <progress
            class="file-picker__progress-item"
            :percent="item.progress === -1 ? 0 : item.progress"
            stroke-width="4"
            :backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
          />
        </view>
        <view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item, index)">点击重试</view>
      </view>
    </view>
  </view>
  name: 'uploadFile',
  emits: ['uploadFiles', 'choose', 'delFile'],
  props: {
    filesList: {
      type: Array,
      default() {
        return [];
      }
    },
    delIcon: {
      type: Boolean,
      default: true
    },
    limit: {
      type: [Number, String],
      default: 9
    },
    showType: {
      type: String,
      default: ''
    },
    listStyles: {
      type: Object,
      default() {
        return {
          // 是否显示边框
          border: true,
          // 是否显示分隔线
          dividline: true,
          // 线条样式
          borderStyle: {}
        };
      }
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    list() {
      let files = [];
      this.filesList.forEach((v) => {
        files.push(v);
      });
      return files;
    },
    styles() {
      let styles = {
        border: true,
        dividline: true,
        'border-style': {}
      };
      return Object.assign(styles, this.listStyles);
    },
    borderStyle() {
      let { borderStyle, border } = this.styles;
      let obj = {};
      if (!border) {
        obj.border = 'none';
      } else {
        let width = (borderStyle && borderStyle.width) || 1;
        width = this.value2px(width);
        let radius = (borderStyle && borderStyle.radius) || 5;
        radius = this.value2px(radius);
        obj = {
          'border-width': width,
          'border-style': (borderStyle && borderStyle.style) || 'solid',
          'border-color': (borderStyle && borderStyle.color) || '#eee',
          'border-radius': radius
        };
      }
      let classles = '';
      for (let i in obj) {
        classles += `${i}:${obj[i]};`;
      }
      return classles;
    },
    borderLineStyle() {
      let obj = {};
      let { borderStyle } = this.styles;
      if (borderStyle && borderStyle.color) {
        obj['border-color'] = borderStyle.color;
      }
      if (borderStyle && borderStyle.width) {
        let width = (borderStyle && borderStyle.width) || 1;
        let style = (borderStyle && borderStyle.style) || 0;
        if (typeof width === 'number') {
          width += 'px';
        } else {
          width = width.indexOf('px') ? width : width + 'px';
        }
        obj['border-width'] = width;
        if (typeof style === 'number') {
          style += 'px';
        } else {
          style = style.indexOf('px') ? style : style + 'px';
        }
        obj['border-top-style'] = style;
      }
      let classles = '';
      for (let i in obj) {
        classles += `${i}:${obj[i]};`;
      }
      return classles;
    }
  },
  methods: {
    uploadFiles(item, index) {
      this.$emit('uploadFiles', {
        item,
        index
      });
    },
    choose() {
      this.$emit('choose');
    },
    delFile(index) {
      this.$emit('delFile', index);
    },
    value2px(value) {
      if (typeof value === 'number') {
        value += 'px';
      } else {
        value = value.indexOf('px') !== -1 ? value : value + 'px';
      }
      return value;
    }
  }

package/uni-ui/lib/uni-file-picker/upload-image.vue

@@ -0,0 +1 @@
+<template>
  <view class="uni-file-picker__container">
    <view class="file-picker__box" v-for="(item, index) in filesList" :key="index" :style="boxStyle">
      <view class="file-picker__box-content" :style="borderStyle">
        <image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item, index)"></image>
        <view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
          <view class="icon-del"></view>
          <view class="icon-del rotate"></view>
        </view>
        <view v-if="(item.progress && item.progress !== 100) || item.progress === 0" class="file-picker__progress">
          <progress
            class="file-picker__progress-item"
            :percent="item.progress === -1 ? 0 : item.progress"
            stroke-width="4"
            :backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
          />
        </view>
        <view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item, index)">点击重试</view>
      </view>
    </view>
    <view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
      <view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
        <slot>
          <view class="icon-add"></view>
          <view class="icon-add rotate"></view>
        </slot>
      </view>
    </view>
  </view>
  name: 'uploadImage',
  emits: ['uploadFiles', 'choose', 'delFile'],
  props: {
    filesList: {
      type: Array,
      default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    disablePreview: {
      type: Boolean,
      default: false
    },
    limit: {
      type: [Number, String],
      default: 9
    },
    imageStyles: {
      type: Object,
      default() {
        return {
          width: 'auto',
          height: 'auto',
          border: {}
        };
      }
    },
    delIcon: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    styles() {
      let styles = {
        width: 'auto',
        height: 'auto',
        border: {}
      };
      return Object.assign(styles, this.imageStyles);
    },
    boxStyle() {
      const { width = 'auto', height = 'auto' } = this.styles;
      let obj = {};
      if (height === 'auto') {
        if (width !== 'auto') {
          obj.height = this.value2px(width);
          obj['padding-top'] = 0;
        } else {
          obj.height = 0;
        }
      } else {
        obj.height = this.value2px(height);
        obj['padding-top'] = 0;
      }
      if (width === 'auto') {
        if (height !== 'auto') {
          obj.width = this.value2px(height);
        } else {
          obj.width = '33.3%';
        }
      } else {
        obj.width = this.value2px(width);
      }
      let classles = '';
      for (let i in obj) {
        classles += `${i}:${obj[i]};`;
      }
      return classles;
    },
    borderStyle() {
      let { border } = this.styles;
      let obj = {};
      const widthDefaultValue = 1;
      const radiusDefaultValue = 3;
      if (typeof border === 'boolean') {
        obj.border = border ? '1px #eee solid' : 'none';
      } else {
        let width = (border && border.width) || widthDefaultValue;
        width = this.value2px(width);
        let radius = (border && border.radius) || radiusDefaultValue;
        radius = this.value2px(radius);
        obj = {
          'border-width': width,
          'border-style': (border && border.style) || 'solid',
          'border-color': (border && border.color) || '#eee',
          'border-radius': radius
        };
      }
      let classles = '';
      for (let i in obj) {
        classles += `${i}:${obj[i]};`;
      }
      return classles;
    }
  },
  methods: {
    uploadFiles(item, index) {
      this.$emit('uploadFiles', item);
    },
    choose() {
      this.$emit('choose');
    },
    delFile(index) {
      this.$emit('delFile', index);
    },
    prviewImage(img, index) {
      let urls = [];
      if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
        this.$emit('choose');
      }
      if (this.disablePreview) return;
      this.filesList.forEach((i) => {
        urls.push(i.url);
      });
      uni.previewImage({
        urls: urls,
        current: index
      });
    },
    value2px(value) {
      if (typeof value === 'number') {
        value += 'px';
      } else {
        if (value.indexOf('%') === -1) {
          value = value.indexOf('px') !== -1 ? value : value + 'px';
        }
      }
      return value;
    }
  }

package/uni-ui/lib/uni-forms/style.scss

@@ -0,0 +1,3 @@
+
+.uni-forms {
+}

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

@@ -0,0 +1 @@
+<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
  }