表单组件，输入实时校验功能封装开发

fe/PC/README.md

@@ -107,8 +107,19 @@ active          步骤控制
 pageStatus      结合active控制返回结果
 
 [字段设置：rowDrop]
-
 @radio="rowDrop"                数据更新方法
 :tableColumns="tableColumns"    表头数据
 :visible="visible"              是否显示
-@closeRowDrop="closeRowDrop"    关闭方法
+@closeRowDrop="closeRowDrop"    关闭方法
+
+[表单组件补充:currenForm]
+validType           type仅等于input时：实时keyUp校验，类型如下：
+                    1、number:正整数, 
+                    2、pointNumber:数字+带小数点(只能输入一个小数点, 小数点后方保留位数见<pointNumberFixed>), 
+                    3、numberLetter: 数字+字母, 
+                    4、letter:纯字母, 
+                    5、letterCn:字母+中文
+pointNumberFixed    组合上方validType值仅等于pointNumber时：
+                    小数点后方保留位数,如不填写默认为100位
+<validType>+<pointNumberFixed>示例：
+{ type:"input", label:"金额", prop:"money", validType:'pointNumber',pointNumberFixed:2},

fe/PC/src/components/currenForm/index.vue

@@ -23,11 +23,12 @@
             v-if="!hide ? true : false"
           >
             <!-- 输入框 onkeyup: 正则表达式，用于前端输入校验工作-->
+              <!-- :onkeyup="item.onkeyup" -->
             <el-input
               v-if="item.type === 'input'"
               v-model="searchData[item.prop]"
               :maxlength="item.maxlength"
-              :onkeyup="item.onkeyup"
+              :onkeyup="itemOnKeyUp(item,searchData[item.prop])"
               clearable
               :disabled="Boolean(item.disabled)"
               :placeholder="item.placeholder || '请输入' + item.label"
@@ -422,6 +423,7 @@ import currenUpload from "@/components/currenUpload";
 import currenUploadList from "@/components/currenUploadList";
 import currenUploadPictureCard from "@/components/currenUploadPictureCard";
 import filterSelect from "@/components/filterSelect"
+import { getMatchRegConformValue } from "@/utils/index"
 export default {
   name: "currenForm",
   components: {
@@ -574,6 +576,16 @@ export default {
     })
   },
   methods: {
+    // type=input情况下，框实时校验
+    itemOnKeyUp(item,value){
+      if(item.onkeyup){
+        return item.onkeyup()
+      }else{
+        if(value && item.validType){
+          this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed)
+        }
+      }
+    },
     // 数字类型input框onkeyup最大最小值处理
     typeNumberOnkeyup(item,value){
       if(value){

fe/PC/src/components/currenTable/index.vue

@@ -36,6 +36,7 @@
         <el-form>
         <el-form-item
           v-if="item.type == 'input'"
+          :onkeyup="itemOnKeyUp(item,searchData[item.prop])"
           :prop="'details.' + scope.$index + '.' + item.prop"
           :rules="item.rules"
         >
@@ -307,6 +308,7 @@
 <script>
 import Sortable from "sortablejs";
 import { parseTime, debounce } from "@/utils/index";
+import { getMatchRegConformValue } from "@/utils/index"
 import _ from "lodash";
 export default {
   name: "currenTable",
@@ -434,6 +436,16 @@ export default {
     // })
   },
   methods: {
+    // type=input情况下，框实时校验
+    itemOnKeyUp(item,value){
+      if(item.onkeyup){
+        return item.onkeyup()
+      }else{
+        if(value && item.validType){
+          this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed)
+        }
+      }
+    },
     // 数字类型input框onkeyup最大最小值处理
     typeNumberOnkeyup(item,value){
       if(value){

fe/PC/src/components/umyTable/index.vue

@@ -41,6 +41,7 @@
         <el-form>
         <el-form-item
           v-if="item.type == 'input'"
+          :onkeyup="itemOnKeyUp(item,searchData[item.prop])"
           :prop="'details.' + scope.$index + '.' + item.prop"
           :rules="item.rules"
         >
@@ -321,6 +322,7 @@
 <script>
 import { parseTime } from "@/utils/index";
 import _ from "lodash";
+import { getMatchRegConformValue } from "@/utils/index"
 export default {
   name: "currenTable",
   filters: {
@@ -493,6 +495,16 @@ export default {
       }
       return _re
     },
+    // type=input情况下，框实时校验
+    itemOnKeyUp(item,value){
+      if(item.onkeyup){
+        return item.onkeyup()
+      }else{
+        if(value && item.validType){
+          this.searchData[item.prop]=getMatchRegConformValue(item.validType,value,item.pointNumberFixed)
+        }
+      }
+    },
     // 数字类型input框onkeyup最大最小值处理
     typeNumberOnkeyup(item,value){
       if(value){

fe/PC/src/utils/index.js

@@ -447,6 +447,48 @@ export function getImgsDetailPopData(row,sucess,faild) {
   return imgsrcList
 }
 
+// 匹配正则返回值
+/** 具体参数详细，可参照README.md的[表单组件补充:currenForm]说明
+ * @param {*} type      需要匹配的正则类型
+ * @param {*} value     当前传入值（即需要校验值）
+ * @param {*} fixedNum  如果type为pointNumber，需要保留小数点后的位数
+ * @returns 
+ */
+export function getMatchRegConformValue(type,value,fixedNum){
+  let _conformValue = ""
+  switch(type){
+    // 正整数
+    case "number":
+      _conformValue=value.replace(/[^\d]/g,'');
+      break;
+
+    // 数字+带小数点，只能输入一个小数点
+    case "pointNumber":
+      //小数点后保留位数
+      let _fixed = fixedNum ? Number(fixedNum) : 100
+      let reg = new RegExp(`\\d+\\.?\\d{0,${_fixed}}`);
+      let _match = String(value).match(reg)
+      _conformValue = _match ? _match[0] : _match
+      break;
+
+    // 数字+字母
+    case "numberLetter":
+      _conformValue=value.replace(/[\W]/g,'');
+      break;
+      
+    // 字母
+    case "letter":
+      _conformValue=value.replace(/[^a-zA-Z]/g,'');
+      break;
+
+    // 字母+中文
+    case "letterCn":
+      _conformValue=value.replace(/[\d]/g,'');
+      break;
+  }
+  return _conformValue
+}
+
 // 字典格式化数据结构
 export function dictFormatData() {
   return new Promise(resolve => {
@@ -496,3 +538,5 @@ export function dictFormatData() {
 //     })
 //   })
 // }
+
+