n20-common-lib 2.5.5-beta.8 → 2.5.5-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.5.5-beta.8",
+  "version": "2.5.5-beta.9",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/filter.scss

@@ -19,7 +19,7 @@
 
     .el-form-item,
     .el-form-item--small.el-form-item {
-      margin-bottom: 10px;
+      margin-bottom: 16px;
     }
 
     .el-form-item__content {
@@ -53,9 +53,6 @@
       margin-right: 4px;
     }
 
-    .n20-date-editor.el-input--prefix {
-      max-width: 166px;
-    }
 
     .el-range-editor.el-input__inner {
       min-width: 168px;
@@ -66,6 +63,11 @@
       }
     }
 
+    .n20-date-editor.el-date-editor--datetimerange.el-range-editor--small.has-value {
+      min-width: 168px;
+      max-width: 380px;
+    }
+
     .el-input,
     .el-input__inner {
       border: none;
@@ -73,6 +75,8 @@
       background-color: transparent;
     }
 
+
+
     .el-input__inner:active,
     .el-input__inner:focus {
       box-shadow: none;

package/src/components/AdvancedFilter/form-item-input.vue

@@ -2,7 +2,11 @@
   <el-input
     v-if="item.type === 'text' || item.type === undefined"
     v-model="form[item.value]"
-    :clearable="(item.props && item.props.clearable) || false"
+    v-rule-key
+    :ruleErrorHide="item.ruleErrorHide"
+    :rules="item.rules"
+    rule-form="ruleValidate"
+    :clearable="(item.props && item.props.clearable) ?? true"
     :style="{
       width:
         form[item.value] && form[item.value].length > 0
@@ -11,7 +15,7 @@
               : context.measureText(form[item.value]).width * 1.4 + 45 > 396
               ? 396
               : context.measureText(form[item.value]).width * 1.4 + 45) + 'px'
-          : item.width || 100
+          : item.width || '100px'
     }"
     :value-data="context.measureText(form[item.value]).width * 1.4 + 45 + 'px'"
     v-bind="item.props"
@@ -19,14 +23,17 @@
     @blur="handleBlur"
   />
   <el-input
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="item.type === 'search'"
     v-model="form[item.value]"
-    :clearable="(item.props && item.props.clearable) || false"
+    :clearable="(item.props && item.props.clearable) ?? true"
     :style="{
       width:
         form[item.value] && form[item.value].length > 0
-          ? context.measureText(form[item.value]).width * 1.4 + 50 + 'px'
-          : item.width || 100
+          ? context.measureText(form[item.value]).width * 1.4 + 40 + 'px'
+          : item.width || '100px'
     }"
     readonly
     v-bind="item.props"
@@ -43,9 +50,12 @@
     ></i>
   </el-input>
   <el-select
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="item.type === 'select'"
     v-model="form[item.value]"
-    :clearable="(item.props && item.props.clearable) || false"
+    :clearable="(item.props && item.props.clearable) ?? true"
     :multiple="item.multiple"
     collapse-tags
     :style="{
@@ -59,9 +69,9 @@
               )
             ).width *
               1.4 +
-            48 +
+            68 +
             'px'
-          : item.width || 100
+          : item.width || '100px'
     }"
     v-bind="item.props"
     @change="handleChange"
@@ -86,6 +96,9 @@
     </template>
   </el-select>
   <inputNumber
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="item.type === 'number'"
     v-model="form[item.value]"
     :style="{
@@ -96,12 +109,15 @@
               : context.measureText(form[item.value]).width * 1.6 + 60 > 396
               ? 396
               : context.measureText(form[item.value]).width * 1.6 + 60) + 'px'
-          : item.width || 100
+          : item.width || '100px'
     }"
     v-bind="item.props"
     @blur="handleChange"
   />
   <inputNumberRange
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="item.type === 'numberrange'"
     :start-value.sync="form[item.startValue]"
     :end-value.sync="form[item.endValue]"
@@ -114,25 +130,34 @@
     @blur="handleChange"
   />
   <datePickerPor
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="['date', 'datetime', 'year', 'month', 'week'].includes(item.type)"
     v-model="form[item.value]"
     :type="item.type"
-    :clearable="(item.props && item.props.clearable) || false"
-    :style="{ width: item.width || 166 + 'px' }"
+    :clearable="(item.props && item.props.clearable) ?? true"
+    :style="{ width: item.width || 175 + 'px' }"
     v-bind="item.props"
     @change="handleChange"
   />
   <datePickerPor
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="['daterange', 'datetimerange', ' monthrange'].includes(item.type)"
     :type="item.type"
     :start-date.sync="form[item.startDate]"
     :end-date.sync="form[item.endDate]"
-    :clearable="(item.props && item.props.clearable) || false"
-    :style="{ width: item.width || 100 }"
+    :clearable="(item.props && item.props.clearable) ?? true"
+    :style="{ width: item.width }"
     v-bind="item.props"
     @change="handleChange"
   />
   <el-checkbox-group
+    v-rule-key
+    :rules="item.rules"
+    rule-form="ruleValidate"
     v-else-if="item.type === 'checkbox'"
     v-model="form[item.value]"
     v-bind="item.props"
@@ -142,7 +167,15 @@
       c.label
     }}</el-checkbox>
   </el-checkbox-group>
-  <el-radio-group v-else-if="item.type === 'radio'" v-model="form[item.value]" v-bind="item.props" v-on="item.on">
+  <el-radio-group
+    v-rule-key
+    rule-form="ruleValidate"
+    :rules="item.rules"
+    v-else-if="item.type === 'radio'"
+    v-model="form[item.value]"
+    v-bind="item.props"
+    v-on="item.on"
+  >
     <el-radio v-for="c in item.options" :key="c.value" :label="c.value" :disabled="c.disabled">{{ c.label }}</el-radio>
   </el-radio-group>
 </template>

package/src/components/AdvancedFilter/index.vue

@@ -7,6 +7,7 @@
         :key="i"
         :class="[prefixCls + '-item', activeClass(item)]"
         :label="item.label"
+        :required="item.required ?? false"
         :disabled="item.props && item.props.disabled"
       >
         <div :class="prefixCls + '-content'">

package/src/components/InputNumber/index.vue

@@ -4,6 +4,7 @@
       ref="input"
       v-model="valueStr"
       class="n20-stc"
+      v-bind="$attrs"
       :disabled="disabled"
       :placeholder="phd"
       :clearable="isClearable"
@@ -14,6 +15,12 @@
       @change="changeFn"
       @keydown.native="stepFn"
     >
+      <template slot="suffix">
+        <slot name="suffix"></slot>
+      </template>
+      <template slot="prefix">
+        <slot name="prefix"></slot>
+      </template>
       <template v-if="type === 'rate'">
         <span v-if="suffixV" slot="suffix" class="el-input__icon">{{ suffix }}</span>
       </template>

package/src/directives/VRuleKey/index.js

@@ -1,94 +1,64 @@
-const VD = '_v-rule-key_validate_'
-
-function getRules(rules, evType) {
-  if (rules) {
-    let _rules = []
-    if (Array.isArray(rules)) {
-      _rules = rules
-    } else if (typeof rules === 'object') {
-      _rules.push(rules)
-    }
-    if (evType === 'submit') {
-      return _rules
-    } else {
-      return _rules.filter((r) => r.trigger.includes(evType))
-    }
-  } else {
+const VALIDATE = '_v-rule-key_validate_'
+
+/**
+ *
+ * @param {object|| array} rules
+ * @param {string} type
+ * @returns array
+ */
+function getRules(rules, type) {
+  if (!rules) {
     return []
   }
+  let _rules = []
+  if (Array.isArray(rules)) {
+    _rules = rules
+  } else if (typeof rules === 'object') {
+    _rules.push(rules)
+  }
+  return type === 'submit' ? _rules : _rules.filter((r) => r.trigger.includes(type))
 }
 
-function validateRoule(rule, value) {
-  return new Promise(function (resolve, reject) {
-    if (rule.required) {
-      if (value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0)) {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'string') {
-      if (typeof value !== 'string') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'number') {
-      if (typeof value !== 'number') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'boolean') {
-      if (typeof value !== 'boolean') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'array') {
-      if (!(Array.isArray(value) && value.length > 0)) {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.type === 'date') {
-      if (new Date(value).toString() === 'Invalid Date') {
-        reject(rule.message)
-        return
-      }
-    }
-    if (rule.min !== undefined || rule.max !== undefined) {
-      if (value === undefined || value === null) {
-        reject(rule.message)
-        return
-      } else {
-        let _v = value.toString()
-        if (_v.length < rule.min || _v.length > rule.max) {
-          reject(rule.message)
-          return
-        }
-      }
-    }
-    if (rule.regexp) {
-      if (new RegExp(rule.regexp).test(value)) {
-        reject(rule.message)
-        return
+// 函数用于验证规则
+async function validateRule(rule, value) {
+  // 判断是否必填
+  if (
+    rule.required &&
+    (value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0))
+  ) {
+    throw new Error(rule.message)
+  }
+  // 判断值类型
+  const typeValidations = {
+    string: typeof value === 'string',
+    number: typeof value === 'number',
+    boolean: typeof value === 'boolean',
+    array: Array.isArray(value) && value.length > 0,
+    date: new Date(value).toString() !== 'Invalid Date'
+  }
+  if (rule.type && !typeValidations[rule.type]) {
+    throw new Error(rule.message)
+  }
+
+  // 判断值范围
+  const length = value && value.toString().length
+  if ((rule.min !== undefined && length < rule.min) || (rule.max !== undefined && length > rule.max)) {
+    throw new Error(rule.message)
+  }
+
+  // 判断正则表达式
+  if (rule.regexp && new RegExp(rule.regexp).test(value)) {
+    throw new Error(rule.message)
+  }
+
+  // 判断自定义验证函数
+  if (rule.validator) {
+    await rule.validator(rule, value, (err) => {
+      if (err) {
+        throw new Error(err === true ? rule.message : err)
       }
-    }
-    if (!rule.validator) {
-      resolve()
-      return
-    }
-    if (rule.validator) {
-      rule.validator(rule, value, (err) => {
-        if (err === undefined || err === false) {
-          resolve()
-          return
-        } else {
-          reject(err === true ? rule.message : err)
-        }
-      })
-    }
-  })
+    })
+  }
 }
 
 function showErr(el, err = '', rErr) {
@@ -99,10 +69,10 @@ function showErr(el, err = '', rErr) {
     if (!msgEl) {
       let msgEl = document.createElement('div')
       msgEl.classList.add('rule-key__error_msg')
-      msgEl.innerText = err.toString()
+      msgEl.innerText = err.message.toString()
       el.appendChild(msgEl)
     } else if (msgEl) {
-      msgEl.innerText = err.toString()
+      msgEl.innerText = err.message.toString()
     }
   }
 }
@@ -118,78 +88,81 @@ function hideErr(el, rErr) {
 }
 
 const directive = {}
+// 定义指令
 directive.install = (Vue) => {
+  // 注册指令
   Vue.directive('rule-key', {
+    // 绑定指令
     bind(el, binding, node) {
+      // 获取当前节点
       let _this = node.child
-
       // 获取表单验证规则
       let ruleForm = _this.$attrs['rule-form'] || _this.$attrs['ruleForm']
       ruleForm && el.classList.add(ruleForm)
 
       // 获取表单验证错误隐藏
-      let rErr = _this.$attrs['rule-error-hide'] || _this.$attrs['ruleErrorHide']
-      rErr = rErr !== 'true' && rErr !== true
+      let errorHide = _this.$attrs['rule-error-hide'] || _this.$attrs['ruleErrorHide']
+      errorHide = errorHide !== 'true' && errorHide !== true
 
       // 表单验证
-      el[VD] = (val, type) => {
-        let _val = _this[binding.value || 'value']
+      el[VALIDATE] = async (type) => {
+        let _value = _this[binding.value || 'value']
+
         let _rules = getRules(_this.$attrs['rules'], type)
+
         if (_rules.length > 0) {
           // 验证表单
-          return Promise.all(_rules.map((rule) => validateRoule(rule, _val)))
-            .then(() => {
-              // 验证通过，隐藏错误
-              hideErr(el, rErr)
-              return Promise.resolve(true)
-            })
-            .catch((err) => {
-              // 验证失败，显示错误
-              showErr(el, err, rErr)
-              return Promise.resolve(false)
-            })
+          try {
+            let res = await Promise.all(_rules.map((rule) => validateRule(rule, _value)))
+            hideErr(el, errorHide)
+            return true
+          } catch (error) {
+            showErr(el, error, errorHide) // 验证失败，显示错误
+            return false
+          }
         } else {
-          return Promise.resolve()
+          return true
         }
       }
 
+      // 监听change事件
       _this.$on('change', () => {
-        setTimeout(() => el[VD](undefined, 'change'))
+        setTimeout(() => el[VALIDATE]('change'))
       })
-      // el.addEventListener('change', () => {
-      //   el[VD](undefined, 'change')
-      // })
 
+      // 监听blur事件
       _this.$on('blur', () => {
-        setTimeout(() => el[VD](undefined, 'blur'))
+        setTimeout(() => el[VALIDATE]('blur'))
       })
-      // el.addEventListener('blur', () => {
-      //   el[VD](undefined, 'blur')
-      // })
     }
   })
+  // 添加规则验证表单方法
   Vue.prototype.$rulesValidateForm = rulesValidateForm
+  // 添加规则验证表单清除方法
   Vue.prototype.$rulesValidateFormClear = rulesValidateFormClear
 }
 
-function rulesValidateForm(query, fn) {
+async function rulesValidateForm(query, fn) {
   let nodeList = document.querySelectorAll('.' + query)
-  if (nodeList.length) {
+  let length = nodeList.length
+  if (length > 0) {
     let validateList = []
-    nodeList.forEach((el) => {
-      typeof el[VD] === 'function' && validateList.push(el[VD](undefined, 'submit'))
-    })
-    return Promise.all(validateList)
-      .then((res) => {
-        if (res.includes(false)) {
-          fn && fn(false)
-        } else {
-          fn && fn(true)
-        }
-      })
-      .catch(() => {
+    for (let i = 0; i < length; i++) {
+      let el = nodeList[i]
+      if (typeof el[VALIDATE] === 'function') {
+        validateList.push(el[VALIDATE]('submit'))
+      }
+    }
+    try {
+      let res = await Promise.all(validateList)
+      if (res.includes(false)) {
         fn && fn(false)
-      })
+      } else {
+        fn && fn(true)
+      }
+    } catch (err) {
+      fn && fn(false)
+    }
   } else {
     fn && fn(true)
     return Promise.resolve()