✨ feat(数字输入控件): 根据新需求，调整新属性显示提交

max，min，count

✨ feat(数字输入控件): 根据新需求，调整新属性显示提交
max，min，count
hookehuyr
Commit 0df1e62309ca3d16a0bd85847f911f4e974d8262 0df1e623 1 parent 521d4472
Showing 2 changed files with 77 additions and 61 deletions
src/components/NumberField/index.vue
src/views/index.vue
--- a/src/components/NumberField/index.vue
View file @0df1e62
+++ b/src/components/NumberField/index.vue
View file @0df1e62
 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-18 13:50:50
+ * @LastEditTime: 2022-12-21 18:24:37
  * @FilePath: /data-table/src/components/NumberField/index.vue
  * @Description: 数字输入框
 -->
@@ -16,7 +16,7 @@
       :id="item.name"
       :name="item.name"
       :placeholder="item.component_props.placeholder"
-      :rules="item.rules"
+      :rules="rules"
       :required="item.component_props.required"
       readonly
       @touchstart.stop="showKeyboard($event)"
@@ -65,12 +65,12 @@ watch(
     if (v !== props.item.name) {
       // 还原border颜色
       $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
-      if (props.item.component_props.type === "decimal") {
+      if (props.item.component_props.max_fraction_count === 0) {
-        // 显示小数键盘
-        showDecimal.value = false;
-      } else {
         // 显示整数键盘
         showInteger.value = false;
+      } else {
+        // 显示小数键盘
+        showDecimal.value = false;
       }
       document.getElementById("app").style.paddingBottom = "0";
     }
@@ -99,24 +99,24 @@ const showKeyboard = (e) => {
   // TAG: 自定义主题颜色
   content.css("border-color", "#c2915f");
   setTimeout(() => {
-    if (props.item.component_props.type === "decimal") {
+    if (props.item.component_props.max_fraction_count === 0) {
-      // 显示小数键盘
-      showDecimal.value = true;
-    } else {
       // 显示整数键盘
       showInteger.value = true;
+    } else {
+      // 显示小数键盘
+      showDecimal.value = true;
     }
   }, 300);
   // 记录点击field名
   store.changeFieldName(props.item.name);
 };
 const blurKeyboard = () => {
-  if (props.item.component_props.type === "decimal") {
+  if (props.item.component_props.max_fraction_count === 0) {
-    // 显示小数键盘
-    showDecimal.value = false;
-  } else {
     // 显示整数键盘
     showInteger.value = false;
+  } else {
+    // 显示小数键盘
+    showDecimal.value = false;
   }
   document.getElementById("app").style.paddingBottom = "0";
   // 还原border颜色
@@ -126,25 +126,38 @@ const blurKeyboard = () => {
 const showDecimal = ref(false);
 const showInteger = ref(false);
-// // 校验函数返回 true 表示校验通过，false 表示不通过
+// 校验函数返回 true 表示校验通过，false 表示不通过
-// // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+const required = props.item.component_props.required;
-// const validator = (val) => {
+const min = props.item.component_props.min;
-//   if (!props.item.component_props.required) {
+const max = props.item.component_props.max;
-//     // 非必填
+const max_count = props.item.component_props.max_fraction_count; // 保留小数个数 null=不限，0=没有小数，大于0=最多只能输入的小数个数
-//     return true;
+const reg = new RegExp("^([0-9]+)(\\.(\\d){" + max_count +"," + max_count +"})$", "g");
-//   } else {
+const validator = (val) => {
-//     return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
+  if (required && !val) { // 必填
-//   }
+    return false;
-// };
+  } else if (min && (val < min)) { // 小于最小值
-// // 错误提示文案
+    return false;
-// const validatorMessage = (val, rule) => {
+  } else if (max && (val > max)) { // 大于最大值
-//   if (!val) {
+    return false;
-//     return "身份证号码不能为空";
+  } else if (max_count && !reg.test(val)) { // 不符合保留小数个数
-//   } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
+    return false;
-//     return "请输入正确身份证号码";
+  } else {
-//   }
+    return true;
-// };
+  }
-// const rules = [{ validator, message: validatorMessage }];
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && !val) {
+    return "输入不能为空";
+  } else if (min && (val < min)) { // 小于最小值
+    return "最小值为" + min;
+  } else if (max && (val > max)) { // 大于最大值
+    return "最大值为" + max;
+  } else if (max_count && !reg.test(val)) { // 不符合保留小数个数
+    return "保留小数点后" + max_count + "位";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
 const onInput = (value) => {};
 const onDelete = () => {};
--- a/src/views/index.vue
View file @0df1e62
+++ b/src/views/index.vue
View file @0df1e62
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-19 18:09:55
+ * @LastEditTime: 2022-12-21 18:14:56
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -212,21 +212,24 @@ onMounted(async () => {
     };
   }
   formData.value = formatData(page_form);
-  // mockData.value = [
+  mockData.value = [
-  //   {
+    {
-  //     key: "",
+      key: "111",
-  //     value: "",
+      value: "",
-  //     component: "",
+      component: "",
-  //     component_props: {
+      component_props: {
-  //       name: "multi_rule",
+        name: "number",
-  //       label: "同意活动规则之后才可提交",
+        tag: "number",
-  //       required: "1",
+        label: "数字",
-  //       count: "2",
+        required: true,
-  //     },
+        max_fraction_count: null,
-  //   },
+        min: 30,
-  // ];
+        max: 100
+      },
+    },
+  ];
   // 生成自定义组件
-  // createComponentType(mockData.value);
+  createComponentType(mockData.value);
   createComponentType(formData.value);
   // 过期时间显示
   notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
@@ -369,19 +372,19 @@ const onSubmit = async (values) => {
   // 检查非表单输入项
   if (validOther().status) {
     console.warn(postData.value);
-    // 编辑模式不能提交数据
+    // // 编辑模式不能提交数据
-    if (model === 'edit') return false;
+    // if (model === 'edit') return false;
-    // 通过验证
+    // // 通过验证
-    const result = await addFormDataAPI({
+    // const result = await addFormDataAPI({
-      form_code: $route.query.code,
+    //   form_code: $route.query.code,
-      data: postData.value,
+    //   data: postData.value,
-    });
+    // });
-    if (result.code) {
+    // if (result.code) {
-      showSuccessToast("提交成功");
+    //   showSuccessToast("提交成功");
-      $router.push({
+    //   $router.push({
-        path: "/success",
+    //     path: "/success",
-      });
+    //   });
-    }
+    // }
   } else {
     console.warn(validOther().key + "不通过验证");
     // // 图片上传控件报错提示