aiot-app/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue

<template>
  <view
    class="uni-forms-item"
    :class="[
      'is-direction-' + localLabelPos,
      border ? 'uni-forms-item--border' : '',
      border && isFirstBorder ? 'is-first-border' : ''
    ]"
  >
    <slot name="label">
      <view
        class="uni-forms-item__label"
        :class="{ 'no-label': !label && !required }"
        :style="{ width: localLabelWidth, justifyContent: localLabelAlign }"
      >
        <text v-if="required" class="is-required">*</text>
        <text>{{ label }}</text>
      </view>
    </slot>
    <!-- #ifndef APP-NVUE -->
    <view class="uni-forms-item__content">
      <slot></slot>
      <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
        <text>{{ msg }}</text>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <view class="uni-forms-item__nuve-content">
      <view class="uni-forms-item__content">
        <slot></slot>
      </view>
      <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
        <text class="error-text">{{ msg }}</text>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
/**
 * uni-fomrs-item 表单子组件
 * @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
 * @property {Boolean} required 是否必填，左边显示红色"*"号
 * @property {String } 	label 				输入框左边的文字提示
 * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
 * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
 * 	@value left		label 左侧显示
 * 	@value center	label 居中
 * 	@value right	label 右侧对齐
 * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
 * @property {String } 	leftIcon 			【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
 * @property {String } 	iconColor 		【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
 * @property {String} validateTrigger = [bind|submit|blur]	【1.4.0废弃】校验触发器方式 默认 submit
 * 	@value bind 	发生变化时触发
 * 	@value submit 提交时触发
 * 	@value blur 	失去焦点触发
 * @property {String } 	labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
 * 	@value top	顶部显示 label
 * 	@value left	左侧显示 label
 */

export default {
  name: 'uniFormsItem',
  options: {
    virtualHost: true
  },
  provide () {
    return {
      uniFormItem: this
    }
  },
  inject: {
    form: {
      from: 'uniForm',
      default: null
    }
  },
  props: {
    // 表单校验规则
    rules: {
      type: Array,
      default () {
        return null
      }
    },
    // 表单域的属性名，在使用校验规则时必填
    name: {
      type: [String, Array],
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    // label的宽度 ，默认 80
    labelWidth: {
      type: [String, Number],
      default: ''
    },
    // label 居中方式，默认 left 取值 left/center/right
    labelAlign: {
      type: String,
      default: ''
    },
    // 强制显示错误信息
    errorMessage: {
      type: [String, Boolean],
      default: ''
    },
    // 1.4.0 弃用，统一使用 form 的校验时机
    // validateTrigger: {
    // 	type: String,
    // 	default: ''
    // },
    // 1.4.0 弃用，统一使用 form 的label 位置
    // labelPosition: {
    // 	type: String,
    // 	default: ''
    // },
    // 1.4.0 以下属性已经废弃，请使用  #label 插槽代替
    leftIcon: String,
    iconColor: {
      type: String,
      default: '#606266'
    }
  },
  data () {
    return {
      errMsg: '',
      userRules: null,
      localLabelAlign: 'left',
      localLabelWidth: '65px',
      localLabelPos: 'left',
      border: false,
      isFirstBorder: false
    }
  },
  computed: {
    // 处理错误信息
    msg () {
      return this.errorMessage || this.errMsg
    }
  },
  watch: {
    // 规则发生变化通知子组件更新
    'form.formRules' (val) {
      // TODO 处理头条vue3 watch不生效的问题
      // #ifndef MP-TOUTIAO
      this.init()
      // #endif
    },
    'form.labelWidth' (val) {
      // 宽度
      this.localLabelWidth = this._labelWidthUnit(val)
    },
    'form.labelPosition' (val) {
      // 标签位置
      this.localLabelPos = this._labelPosition()
    },
    'form.labelAlign' (val) {}
  },
  created () {
    this.init(true)
    if (this.name && this.form) {
      // TODO 处理头条vue3 watch不生效的问题
      // #ifdef MP-TOUTIAO
      this.$watch('form.formRules', () => {
        this.init()
      })
      // #endif

      // 监听变化
      this.$watch(
        () => {
          const val = this.form._getDataValue(this.name, this.form.localData)
          return val
        },
        (value, oldVal) => {
          const isEqual = this.form._isEqual(value, oldVal)
          // 简单判断前后值的变化，只有发生变化才会发生校验
          // TODO  如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
          // fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
          if (!isEqual) {
            const val = this.itemSetValue(value)
            this.onFieldChange(val, false)
          }
        },
        {
          immediate: false
        }
      )
    }
  },
  // #ifndef VUE3
  destroyed () {
    if (this.__isUnmounted) return
    this.unInit()
  },
  // #endif
  // #ifdef VUE3
  unmounted () {
    this.__isUnmounted = true
    this.unInit()
  },
  // #endif
  methods: {
    /**
     * 外部调用方法
     * 设置规则 ，主要用于小程序自定义检验规则
     * @param {Array} rules 规则源数据
     */
    setRules (rules = null) {
      this.userRules = rules
      this.init(false)
    },
    // 兼容老版本表单组件
    setValue () {
      // console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
    },
    /**
     * 外部调用方法
     * 校验数据
     * @param {any} value 需要校验的数据
     * @param {boolean} 是否立即校验
     * @return {Array|null} 校验内容
     */
    async onFieldChange (value, formtrigger = true) {
      const {
        formData,
        localData,
        errShowType,
        validateCheck,
        validateTrigger,
        _isRequiredField,
        _realName
      } = this.form
      const name = _realName(this.name)
      if (!value) {
        value = this.form.formData[name]
      }
      // fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
      // this.errMsg = '';

      // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
      const ruleLen = this.itemRules.rules && this.itemRules.rules.length
      if (!this.validator || !ruleLen || ruleLen === 0) return

      // 检验时机
      // let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
      const isRequiredField = _isRequiredField(this.itemRules.rules || [])
      let result = null
      // 只有等于 bind 时 ，才能开启时实校验
      if (validateTrigger === 'bind' || formtrigger) {
        // 校验当前表单项
        result = await this.validator.validateUpdate(
          {
            [name]: value
          },
          formData
        )

        // 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
        if (!isRequiredField && (value === undefined || value === '')) {
          result = null
        }

        // 判断错误信息显示类型
        if (result && result.errorMessage) {
          if (errShowType === 'undertext') {
            // 获取错误信息
            this.errMsg = !result ? '' : result.errorMessage
          }
          if (errShowType === 'toast') {
            uni.showToast({
              title: result.errorMessage || '校验错误',
              icon: 'none'
            })
          }
          if (errShowType === 'modal') {
            uni.showModal({
              title: '提示',
              content: result.errorMessage || '校验错误'
            })
          }
        } else {
          this.errMsg = ''
        }
        // 通知 form 组件更新事件
        validateCheck(result ? result : null)
      } else {
        this.errMsg = ''
      }
      return result ? result : null
    },
    /**
     * 初始组件数据
     */
    init (type = false) {
      const {
        validator,
        formRules,
        childrens,
        formData,
        localData,
        _realName,
        labelWidth,
        _getDataValue,
        _setDataValue
      } = this.form || {}
      // 对齐方式
      this.localLabelAlign = this._justifyContent()
      // 宽度
      this.localLabelWidth = this._labelWidthUnit(labelWidth)
      // 标签位置
      this.localLabelPos = this._labelPosition()
      // 将需要校验的子组件加入form 队列
      this.form && type && childrens.push(this)

      if (!validator || !formRules) return
      // 判断第一个 item
      if (!this.form.isFirstBorder) {
        this.form.isFirstBorder = true
        this.isFirstBorder = true
      }

      // 判断 group 里的第一个 item
      if (this.group) {
        if (!this.group.isFirstBorder) {
          this.group.isFirstBorder = true
          this.isFirstBorder = true
        }
      }
      this.border = this.form.border
      // 获取子域的真实名称
      const name = _realName(this.name)
      const itemRule = this.userRules || this.rules
      if (typeof formRules === 'object' && itemRule) {
        // 子规则替换父规则
        formRules[name] = {
          rules: itemRule
        }
        validator.updateSchema(formRules)
      }
      // 注册校验规则
      const itemRules = formRules[name] || {}
      this.itemRules = itemRules
      // 注册校验函数
      this.validator = validator
      // 默认值赋予
      this.itemSetValue(_getDataValue(this.name, localData))
    },
    unInit () {
      if (this.form) {
        const { childrens, formData, _realName } = this.form
        childrens.forEach((item, index) => {
          if (item === this) {
            this.form.childrens.splice(index, 1)
            delete formData[_realName(item.name)]
          }
        })
      }
    },
    // 设置item 的值
    itemSetValue (value) {
      const name = this.form._realName(this.name)
      const rules = this.itemRules.rules || []
      const val = this.form._getValue(name, value, rules)
      this.form._setDataValue(name, this.form.formData, val)
      return val
    },

    /**
     * 移除该表单项的校验结果
     */
    clearValidate () {
      this.errMsg = ''
    },

    // 是否显示星号
    _isRequired () {
      // TODO 不根据规则显示 星号，考虑后续兼容
      // if (this.form) {
      // 	if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
      // 		return true
      // 	}
      // 	return false
      // }
      return this.required
    },

    // 处理对齐方式
    _justifyContent () {
      if (this.form) {
        const { labelAlign } = this.form
        let labelAli = this.labelAlign ? this.labelAlign : labelAlign
        if (labelAli === 'left') return 'flex-start'
        if (labelAli === 'center') return 'center'
        if (labelAli === 'right') return 'flex-end'
      }
      return 'flex-start'
    },
    // 处理 label宽度单位 ,继承父元素的值
    _labelWidthUnit (labelWidth) {
      // if (this.form) {
      // 	const {
      // 		labelWidth
      // 	} = this.form
      return this.num2px(
        this.labelWidth
          ? this.labelWidth
          : labelWidth || (this.label ? 65 : 'auto')
      )
      // }
      // return '65px'
    },
    // 处理 label 位置
    _labelPosition () {
      if (this.form) return this.form.labelPosition || 'left'
      return 'left'
    },

    /**
     * 触发时机
     * @param {Object} rule 当前规则内时机
     * @param {Object} itemRlue 当前组件时机
     * @param {Object} parentRule 父组件时机
     */
    isTrigger (rule, itemRlue, parentRule) {
      //  bind  submit
      if (rule === 'submit' || !rule) {
        if (rule === undefined) {
          if (itemRlue !== 'bind') {
            if (!itemRlue) {
              return parentRule === '' ? 'bind' : 'submit'
            }
            return 'submit'
          }
          return 'bind'
        }
        return 'submit'
      }
      return 'bind'
    },
    num2px (num) {
      if (typeof num === 'number') {
        return `${num}px`
      }
      return num
    }
  }
}
</script>

<style lang="scss">
.uni-forms-item {
  position: relative;
  display: flex;
  /* #ifdef APP-NVUE */
  // 在 nvue 中，使用 margin-bottom error 信息会被隐藏
  padding-bottom: 22px;
  /* #endif */
  /* #ifndef APP-NVUE */
  margin-bottom: 22px;
  /* #endif */
  flex-direction: row;

  &__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    font-size: 32rpx;
    color: #606266;
    height: 36px;
    padding: 0 12px 0 0;
    /* #ifndef APP-NVUE */
    vertical-align: middle;
    flex-shrink: 0;
    /* #endif */

    /* #ifndef APP-NVUE */
    box-sizing: border-box;

    /* #endif */
    &.no-label {
      padding: 0;
    }
  }

  &__content {
    /* #ifndef MP-TOUTIAO */
    // display: flex;
    // align-items: center;
    /* #endif */
    position: relative;
    font-size: 32rpx;
    flex: 1;
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;

    /* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
    // TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
    & > uni-easyinput,
    & > uni-data-picker {
      width: 100%;
    }

    /* #endif */
  }

  & .uni-forms-item__nuve-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  &__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    /* #ifndef APP-NVUE */
    top: 100%;
    left: 0;
    transition: transform 0.3s;
    transform: translateY(-100%);
    /* #endif */
    /* #ifdef APP-NVUE */
    bottom: 5px;
    /* #endif */

    opacity: 0;

    .error-text {
      // 只有 nvue 下这个样式才生效
      color: #f56c6c;
      font-size: 12px;
    }

    &.msg--active {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  // 位置修饰样式
  &.is-direction-left {
    flex-direction: row;
  }

  &.is-direction-top {
    flex-direction: column;

    .uni-forms-item__label {
      padding: 0 0 8px;
      line-height: 1.5715;
      text-align: left;
      /* #ifndef APP-NVUE */
      white-space: initial;
      /* #endif */
    }
  }

  .is-required {
    // color: $uni-color-error;
    color: #dd524d;
    font-weight: bold;
  }
}

.uni-forms-item--border {
  margin-bottom: 0;
  padding: 10px 0;
  // padding-bottom: 0;
  border-top: 1px #eee solid;

  /* #ifndef APP-NVUE */
  .uni-forms-item__content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .uni-forms-item__error {
      position: relative;
      top: 5px;
      left: 0;
      padding-top: 0;
    }
  }

  /* #endif */

  /* #ifdef APP-NVUE */
  display: flex;
  flex-direction: column;

  .uni-forms-item__error {
    position: relative;
    top: 0px;
    left: 0;
    padding-top: 0;
    margin-top: 5px;
  }

  /* #endif */
}

.is-first-border {
  /* #ifndef APP-NVUE */
  border: none;
  /* #endif */
  /* #ifdef APP-NVUE */
  border-width: 0;
  /* #endif */
}
</style>