@10yun/cv-mobile-ui 0.3.25 → 0.4.1

package/ui-cv/cv-form-item/cv-form-item.vue

@@ -1,238 +1,546 @@
 <template>
-  <view class="cv-form-item" :class="localLayout == 'col' ? 'cv-form-item-col' : 'cv-form-item-row'">
-    <text class="cv-form-item-lebel-title-must" v-if="must == true">*</text>
-    <view class="cv-form-item-area">
-      <view :class="localLayout == 'col' ? 'cv-form-item-area-col' : 'cv-form-item-area-row'">
-        <view
-          class="cv-form-item-label"
-          :class="localLayout == 'col' ? 'cv-form-item-right-col' : 'cv-form-item-right-row'"
-          v-bind:style="labelStyle"
-        >
-          <view class="cv-form-item-lebel-title">
-            <text>{{ label }}</text>
-            <text class="cv-form-item-lebel-tip" v-if="localLayout == 'col' && tip != ''">（{{ tip }}）</text>
-          </view>
+  <view
+    class="cv-form-item"
+    :class="{ 'cv-form-item--border': border, 'is-first-border': border && isFirstBorder, 'cv-form-item-error': msg }"
+  >
+    <view class="cv-form-item__box">
+      <view class="cv-form-item__inner" :class="['is-direction-' + labelPos]">
+        <view class="cv-form-item__label" :style="{ width: labelWid, justifyContent: justifyContent }">
+          <slot name="left">
+            <uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" />
+            <text v-if="required" class="is-required">*</text>
+            <text class="label-text">{{ label }}</text>
+            <view v-if="label" class="label-seat"></view>
+          </slot>
         </view>
-        <view
-          class="cv-form-item-right"
-          :class="localLayout == 'col' ? 'cv-form-item-right-col' : 'cv-form-item-right-row'"
-          v-bind:style="labelRightStyle"
-        >
-          <view class="cv-form-item-right-item">
-            <!-- 插槽 -->
-            <slot />
-            <!-- 三角形图标 -->
-            <view class="cv-form-item-right-item-icon" v-if="isIcon">
-              <view class="cv-form-item-right-item-icon-box" :class="iconTop ? 'cv-form-item-right-item-icon-box-top' : ''">
-                <view class="cv-form-item-right-item-icon-item"></view>
-              </view>
-            </view>
-            <!-- 输入框右侧信息 -->
-            <view class="cv-form-item-right-item-right">
-              <!-- 一键清空 -->
-              <view class="cv-form-item-right-item-right-rtip" v-if="rtip != ''">
-                {{ rtip }}
-              </view>
-              <view class="cv-form-item-right-item-empty-icon" @click="onEmpty" v-if="onQClear == true && inputValue != ''">
-                X
-              </view>
-            </view>
-          </view>
-          <view class="cv-form-item-right-message" v-if="messageDisplay == true">
-            <text>{{ message }}</text>
-          </view>
+        <view class="cv-form-item__content" :class="{ 'is-input-error-border': msg }">
+          <slot></slot>
         </view>
       </view>
-      <view class="cv-form-item-right-tip" v-if="localLayout == 'row' && tip != ''">
-        <text>{{ tip }}</text>
+      <view
+        v-if="msg"
+        class="uni-error-message"
+        :class="{ 'uni-error-msg--boeder': border }"
+        :style="{
+          paddingLeft: labelLeft
+        }"
+      >
+        <text class="uni-error-message-text">{{ showMsg === 'undertext' ? msg : '' }}</text>
       </view>
+      <view class="cv-form-item__tip"><slot name="tip"></slot></view>
     </view>
+    <view class="cv-form-item__line" v-if="localLine"></view>
   </view>
 </template>
+
 <script>
-import MixinsCommon from '../mixins/mixins-common.js';
+/**
+ * Field 输入框
+ * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=21001
+ * @property {Boolean} 	required 			是否必填，左边显示红色"*"号（默认false）
+ * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit 可选
+ * 	@value bind 	发生变化时触发
+ * 	@value submit 	提交时触发
+ * @property {String } 	leftIcon 			label左边的图标，限 uni-ui 的图标名称
+ * @property {String } 	iconColor 			左边通过icon配置的图标的颜色（默认#606266）
+ * @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 } 	labelPosition = [top|left] label的文字的位置（默认left）
+ * 	@value top	顶部显示 label
+ * 	@value left	左侧显示 label
+ * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
+ */
+
 export default {
-  mixins: [MixinsCommon],
   name: 'cvFormItem',
   props: {
-    isIcon: {
+    // 自定义内容
+    custom: {
       type: Boolean,
       default: false
     },
-    iconTop: {
+    // 是否显示报错信息
+    showMessage: {
       type: Boolean,
-      default: false
+      default: true
     },
-    //右侧提示(一般用作单位)
-    rtip: {
+    name: String,
+    required: Boolean,
+    validateTrigger: {
       type: String,
       default: ''
     },
-    //一键清除按钮
-    onQClear: {
-      type: Boolean,
-      default: false
+    leftIcon: String,
+    iconColor: {
+      type: String,
+      default: '#606266'
     },
-    //父级输入框内容
-    inputValue: {
-      type: [String, Number],
+    label: String,
+    // 左边标题的宽度单位px
+    labelWidth: {
+      type: [Number, String],
       default: ''
     },
-    message: {
+    // 对齐方式，left|center|right
+    labelAlign: {
       type: String,
       default: ''
     },
-    messageDisplay: {
+    // lable的位置，可选为 left-左边，top-上边
+    labelPosition: {
+      type: String,
+      default: ''
+    },
+    errorMessage: {
+      type: [String, Boolean],
+      default: ''
+    },
+    // 表单校验规则
+    rules: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * 自定义
+     */
+    line: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
   data() {
     return {
-      labelStyle: ''
+      errorTop: false,
+      errorBottom: false,
+      labelMarginBottom: '',
+      errorWidth: '',
+      errMsg: '',
+      val: '',
+      labelPos: '',
+      labelWid: '',
+      labelAli: '',
+      showMsg: 'undertext',
+      border: false,
+      isFirstBorder: false,
+      isArray: false,
+      arrayField: '',
+      /**
+       * 自定义
+       */
+      localLine: true
     };
   },
-  created: function () {
-    this.localLayout = this.layout == 'col' ? 'col' : 'row';
-    this.labelStyle =
-      this.localLayout == 'row' ? (this.labelWidth > 0 ? 'width:' + this.labelWidth + 'px;' : 'display:none;') : '';
-    this.labelRightStyle =
-      this.localLayout == 'row' && this.labelWidth > 0
-        ? 'width:' + 'calc(100% - 8px - 20px - ' + this.labelWidth + 'px);'
-        : 'padding-left:0;';
-    this.$forceUpdate();
+  computed: {
+    msg() {
+      return this.errorMessage || this.errMsg;
+    },
+    fieldStyle() {
+      let style = {};
+      if (this.labelPos == 'top') {
+        style.padding = '0 0';
+        this.labelMarginBottom = '6px';
+      }
+      if (this.labelPos == 'left' && this.msg !== false && this.msg != '') {
+        style.paddingBottom = '0px';
+        this.errorBottom = true;
+        this.errorTop = false;
+      } else if (this.labelPos == 'top' && this.msg !== false && this.msg != '') {
+        this.errorBottom = false;
+        this.errorTop = true;
+      } else {
+        // style.paddingBottom = ''
+        this.errorTop = false;
+        this.errorBottom = false;
+      }
+      return style;
+    },
+
+    // uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
+    justifyContent() {
+      if (this.labelAli === 'left') return 'flex-start';
+      if (this.labelAli === 'center') return 'center';
+      if (this.labelAli === 'right') return 'flex-end';
+    },
+    labelLeft() {
+      return (this.labelPos === 'left' ? parseInt(this.labelWid) : 0) + 'px';
+    }
+  },
+  watch: {
+    validateTrigger(trigger) {
+      this.formTrigger = trigger;
+    }
+  },
+  created() {
+    this.form = this.getForm();
+    this.group = this.getForm('cvFormGroup');
+    this.formRules = [];
+    this.formTrigger = this.validateTrigger;
+    // 处理 name，是否数组
+    if (this.name && this.name.indexOf('[') !== -1 && this.name.indexOf(']') !== -1) {
+      this.isArray = true;
+      this.arrayField = this.name;
+      // fix by mehaotian 修改不修改的情况，动态值不检验的问题
+      this.form.formData[this.name] = this.form._getValue(this.name, '');
+    }
+  },
+  mounted() {
+    if (this.form) {
+      this.form.childrens.push(this);
+    }
+    this.init();
   },
+  // #ifndef VUE3
+  destroyed() {
+    if (this.__isUnmounted) return;
+    this.unInit();
+  },
+  // #endif
+  // #ifdef VUE3
+  unmounted() {
+    this.__isUnmounted = true;
+    this.unInit();
+  },
+  // #endif
   methods: {
-    onEmpty(e) {
-      this.$parent.onEmpty();
+    init() {
+      if (this.form) {
+        // return false;
+        let { formRules, validator, formData, value, labelPosition, labelWidth, labelAlign, errShowType, line } = this.form;
+
+        /**
+         * 自定义 start
+         */
+        this.localLine = this.line ? this.line : line;
+        /**
+         * 自定义 end
+         */
+
+        this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;
+
+        // if(){}
+
+        if (this.label) {
+          this.labelWid = this.labelWidth ? this.labelWidth : labelWidth || 70;
+        } else {
+          this.labelWid = this.labelWidth ? this.labelWidth : labelWidth || 'auto';
+        }
+        if (this.labelWid && this.labelWid !== 'auto') {
+          this.labelWid = parseInt(this.labelWid);
+          this.labelWid += 'px';
+        }
+
+        this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+
+        // 判断第一个 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;
+        this.showMsg = errShowType;
+        let name = this.isArray ? this.arrayField : this.name;
+        if (formRules) {
+          if (!formRules[name]) {
+            formRules[name] = {
+              rules: this.rules
+            };
+          }
+          this.formRules = formRules[name];
+        }
+        if (this.rules.length > 0) {
+          validator.updateSchema(formRules);
+        }
+        this.validator = validator;
+      } else {
+        this.labelPos = this.labelPosition || 'left';
+        this.labelWid = this.labelWidth || 65;
+        this.labelWid = parseInt(this.labelWid);
+
+        this.labelAli = this.labelAlign || 'left';
+        this.localLine = this.line || true;
+      }
+    },
+    unInit() {
+      if (this.form) {
+        this.form.childrens.forEach((item, index) => {
+          if (item === this) {
+            this.form.childrens.splice(index, 1);
+            delete this.form.formData[item.name];
+          }
+        });
+      }
+    },
+    /**
+     * 获取父元素实例
+     */
+    getForm(name = 'cvFormBase') {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    },
+
+    /**
+     * 移除该表单项的校验结果
+     */
+    clearValidate() {
+      this.errMsg = '';
+    },
+    /**
+     * 子组件调用，如 easyinput
+     * @param {Object} value
+     */
+    setValue(value) {
+      let name = this.isArray ? this.arrayField : this.name;
+      if (name) {
+        if (this.errMsg) this.errMsg = '';
+        // 给组件赋值
+        this.form.formData[name] = this.form._getValue(name, value);
+        if (!this.formRules || (typeof this.formRules && JSON.stringify(this.formRules) === '{}')) return;
+        this.triggerCheck(this.form._getValue(this.name, value));
+      }
+    },
+
+    /**
+     * 校验规则
+     * @param {Object} value
+     */
+    async triggerCheck(value, formTrigger) {
+      let promise = null;
+      this.errMsg = '';
+      if (!this.validator) return;
+      const isNoField = this.isRequired(this.formRules.rules || []);
+      let isTrigger = this.isTrigger(this.formRules.validateTrigger, this.validateTrigger, this.form.validateTrigger);
+      let result = null;
+      if (!!isTrigger || formTrigger) {
+        let name = this.isArray ? this.arrayField : this.name;
+        result = await this.validator.validateUpdate(
+          {
+            [name]: value
+          },
+          this.form.formData
+        );
+      }
+      // 判断是否必填,非必填，不填不校验，填写才校验
+      if (!isNoField && (value === undefined || value === '')) {
+        result = null;
+      }
+      const inputComp = this.form.inputChildrens.find((child) => child.rename === this.name);
+      if ((isTrigger || formTrigger) && result && result.errorMessage) {
+        if (inputComp) {
+          inputComp.errMsg = result.errorMessage;
+        }
+        if (this.form.errShowType === 'toast') {
+          uni.showToast({
+            title: result.errorMessage || '校验错误',
+            icon: 'none'
+          });
+        }
+        if (this.form.errShowType === 'modal') {
+          uni.showModal({
+            title: '提示',
+            content: result.errorMessage || '校验错误'
+          });
+        }
+      } else {
+        if (inputComp) {
+          inputComp.errMsg = '';
+        }
+      }
+
+      this.errMsg = !result ? '' : result.errorMessage;
+      // 触发validate事件
+      this.form.validateCheck(result ? result : null);
+      // typeof callback === 'function' && callback(result ? result : null);
+      // if (promise) return promise
+      return result ? result : null;
+    },
+    /**
+     * 触发时机
+     * @param {Object} event
+     */
+    isTrigger(rule, itemRlue, parentRule) {
+      let rl = true;
+      //  bind  submit
+      if (rule === 'submit' || !rule) {
+        if (rule === undefined) {
+          if (itemRlue !== 'bind') {
+            if (!itemRlue) {
+              return parentRule === 'bind' ? true : false;
+            }
+            return false;
+          }
+          return true;
+        }
+        return false;
+      }
+      return true;
+    },
+    // 是否有必填字段
+    isRequired(rules) {
+      let isNoField = false;
+      for (let i = 0; i < rules.length; i++) {
+        const ruleData = rules[i];
+        if (ruleData.required) {
+          isNoField = true;
+          break;
+        }
+      }
+      return isNoField;
     }
   }
 };
 </script>
 
-<style>
+<style scoped>
 .cv-form-item {
+  position: relative;
+  padding: 0px;
+  text-align: left;
+  color: #333;
   font-size: 14px;
-  padding-left: 15px;
-  background-color: #ffffff;
+}
+
+.cv-form-item__box {
   position: relative;
 }
-.cv-form-item-area {
-  padding: 5px 0px;
-  border-bottom: solid 1px #eee;
+
+.cv-form-item__inner {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  /* padding-bottom: 22px; */
 }
-/* #ifndef  MP-WEIXIN */
-.cv-form-item:last-child .cv-form-item-area {
-  border: none;
+
+.is-direction-left {
+  flex-direction: row;
 }
-/* #endif  */
-/* #ifdef MP-WEIXIN */
 
-/* #endif  */
-.cv-form-item-area-row {
+.is-direction-top {
+  flex-direction: column;
+}
+
+.cv-form-item__label {
+  /* #ifndef APP-NVUE */
   display: flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  width: 65px;
+  padding: 5px 0;
+  height: 36px;
 }
-.cv-input-text-item-placeholder {
+
+.cv-form-item__label .label-text {
   font-size: 14px;
+  color: #333;
 }
-.cv-form-item-label {
-  height: 35px;
-  line-height: 35px;
-  width: 60px;
-  padding-right: 4px;
-  overflow: hidden;
-  color: #303133;
-  padding-left: 4px;
-  box-sizing: unset;
-}
-.cv-form-item-right {
-  /* width: calc(100% - 60px - 4px - 4px - 20px); */
+
+.cv-form-item__label .label-seat {
+  margin-right: 5px;
+}
+
+.cv-form-item__content {
+  /* #ifndef APP-NVUE */
   width: 100%;
-  padding-left: 5px;
-  padding-right: 15px;
-  box-sizing: unset;
+  box-sizing: border-box;
+  min-height: 36px;
+  /* #endif */
+  flex: 1;
 }
-.cv-form-item-right-item {
-  min-height: 35px;
-  line-height: 35px;
-  position: relative;
-  overflow: auto;
+
+.label-icon {
+  margin-right: 5px;
+  margin-top: -1px;
 }
-.cv-form-item-right-item-icon {
+
+.is-required {
+  color: #dd524d;
+  padding-right: 5px;
+}
+
+.uni-error-message {
   position: absolute;
-  width: 15px;
-  height: 15px;
-  top: 10px;
-  right: 10px;
-}
-.cv-form-item-right-item-icon-box {
-  padding-top: 1px;
-  transform: rotate(0deg);
-  transition: transform 0.4s;
-}
-.cv-form-item-right-item-icon-box-top {
-  transform: rotate(-180deg);
-}
-.cv-form-item-right-item-icon-item {
-  width: 0;
-  height: 0;
-  border-left: 7.5px solid transparent;
-  border-right: 7.5px solid transparent;
-  border-top: 11px solid #c0c4cc;
-}
-.cv-form-item-right-message {
+  bottom: 0px;
+  left: 0;
+  text-align: left;
+}
+
+.uni-error-message-text {
+  line-height: 22px;
+  color: #dd524d;
   font-size: 12px;
-  color: #fa3534;
-  margin-top: 6px;
-  line-height: 12px;
 }
-.cv-form-item-right-col {
-  /* padding-left: 0; */
-  width: auto;
+
+.uni-error-msg--boeder {
+  position: relative;
+  bottom: 0;
+  line-height: 22px;
 }
-.cv-form-item-right-tip {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.4);
-  /* margin-top: 5px; */
-  line-height: 1.5em;
-  padding-right: 15px;
+
+.is-input-error-border {
+  border-color: #dd524d;
 }
-.cv-form-item-lebel-title-must {
-  color: #fa3534;
-  /* margin-right: 5px; */
-  position: absolute;
-  top: 15px;
-  left: 8px;
+
+.cv-form-item--border {
+  margin-bottom: 0;
+  padding: 10px 0;
+  border-top: 1px #eee solid;
 }
-.cv-form-item-lebel-tip {
-  color: rgba(0, 0, 0, 0.4);
+
+.cv-form-item--border .cv-form-item__inner {
+  padding: 0;
 }
-.cv-form-item-right-item-right {
-  height: 16px;
-  position: absolute;
-  top: 10px;
-  right: 0px;
-  overflow: auto;
-  z-index: 2;
-}
-.cv-form-item-right-item-empty-icon {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.4);
-  font-size: 8px;
-  line-height: 16px;
-  text-align: center;
-  color: #fff;
-  float: left;
-  margin-left: 10px;
-}
-.cv-form-item-right-item-right-rtip {
-  width: auto;
-  height: 16px;
+
+.is-first-border {
+  /* #ifndef APP-NVUE */
+  border: none;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  border-width: 0;
+  /* #endif */
+}
+
+.uni-forms--no-padding {
+  padding: 0;
+}
+.cv-form-item__tip {
+  color: rgba(0, 0, 0, 0.4);
   font-size: 12px;
-  line-height: 16px;
-  float: left;
-  color: rgba(0, 0, 0, 0.6);
+  padding-bottom: 5px;
+}
+
+.cv-form-item__line {
+  vertical-align: middle;
+  margin: 0px;
+  border-bottom: 1px solid rgb(214, 215, 217);
+  width: 100%;
+  transform: scaleY(0.5);
+  border-top-color: rgb(214, 215, 217);
+  border-right-color: rgb(214, 215, 217);
+  border-left-color: rgb(214, 215, 217);
 }
 </style>