✨ feat(数字录入控件): 样式和功能调整

hookehuyr
Commit 3b455eb8bf8fcf2264f906f6f2867afc19f0dda8 3b455eb8 1 parent 3594cac4
Showing 4 changed files with 157 additions and 91 deletions
components.d.ts
src/components/NumberField/index.vue
src/hooks/useComponentType.js
src/pages/table/index.vue
--- a/components.d.ts
View file @3b455eb
+++ b/components.d.ts
View file @3b455eb
@@ -35,6 +35,7 @@ declare module '@vue/runtime-core' {
     NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutNoticebar: typeof import('@nutui/nutui-taro')['Noticebar']
+    NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
     NutOverlay: typeof import('@nutui/nutui-taro')['Overlay']
     NutPicker: typeof import('@nutui/nutui-taro')['Picker']
     NutPopup: typeof import('@nutui/nutui-taro')['Popup']
--- a/src/components/NumberField/index.vue
View file @3b455eb
+++ b/src/components/NumberField/index.vue
View file @3b455eb
 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-09 15:54:02
+ * @LastEditTime: 2023-04-06 15:51:54
- * @FilePath: /data-table/src/components/NumberField/index.vue
+ * @FilePath: /custom_form/src/components/NumberField/index.vue
  * @Description: 数字输入框
 -->
 <template>
   <div v-if="HideShow" class="number-page">
     <div class="label">
-      <span v-if="item.component_props.required">&nbsp;*</span>
+      <text v-if="item.component_props.required">&nbsp;*</text>
       {{ item.component_props.label }}
     </div>
     <div
@@ -16,44 +16,52 @@
       v-html="item.component_props.note"
       style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
     />
-    <van-field
+    <nut-input
-      v-model="item.value"
+      ref="inputRef"
-      :id="item.name"
+      v-model="input_value"
-      :name="item.name"
+      :id="item.name + '_input'"
+      :label="item.name"
       :placeholder="item.component_props.placeholder"
-      :rules="rules"
-      :required="item.component_props.required"
       :disabled="item.component_props.readonly"
       readonly
-      @touchstart.stop="showKeyboard($event)"
+      @click-input="showKeyboard($event)"
       :border="false"
+      style="border: 1px solid #eaeaea; border-radius: 0.25rem; padding: 0.25rem 0.5rem;"
     >
-    </van-field>
+    </nut-input>
-    <van-number-keyboard
+    <div
-      v-model="item.value"
+      v-if="show_error"
-      :show="showInteger"
+      style="padding-left: 20px; color: red; font-size: 12px;"
-      @blur="blurKeyboard()"
+    >
+      {{ error_msg }}
+    </div>
+    <nut-number-keyboard
+      v-model="input_value"
+      v-model:visible="showInteger"
+      :overlay="true"
+      @close="blurKeyboard"
       @input="onInput"
       @delete="onDelete"
-      safe-area-inset-bottom
     />
-    <van-number-keyboard
+    <nut-number-keyboard
-      v-model="item.value"
+      v-model="input_value"
-      :show="showDecimal"
+      v-model:visible="showDecimal"
-      theme="custom"
+      type="rightColumn"
-      extra-key="."
+      :custom-key="customKey"
       close-button-text="完成"
-      @blur="blurKeyboard()"
+      @close="blurKeyboard"
       @input="onInput"
       @delete="onDelete"
-      safe-area-inset-bottom
     />
   </div>
 </template>
 <script setup>
-import $ from "jquery";
+import Taro, { useLoad } from '@tarojs/taro'
-import { storeToRefs, mainStore } from "@/utils/generatePackage";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+import { $ } from '@tarojs/extend';
+import { storeToRefs } from "pinia";
+import { mainStore } from '@/stores'
 const props = defineProps({
   item: Object,
@@ -63,9 +71,13 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 let content = "";
+const customKey = ref(['.']);
+const input_value = ref('');
+const inputRef = ref(null)
 const store = mainStore();
 const { fieldName } = storeToRefs(store);
+const emit = defineEmits(["active"]);
 // 监听字段变化
 watch(
@@ -75,14 +87,18 @@ watch(
     if (v !== props.item.name) {
       // 还原border颜色
       $(`#${props.item.name}`).parent().css("border-color", "#eaeaea");
-      if (props.item.component_props.max_fraction_count === 0) {
+      if (props.item.component_props.max_fraction_count > 0) {
+        // 显示小数键盘
+        showDecimal.value = false;
+      } else {
         // 显示整数键盘
         showInteger.value = false;
+      }
+      if (process.env.TARO_ENV === 'h5') {
+        $('#app').css('padding-bottom', '0')
       } else {
-        // 显示小数键盘
+        $('.table-page').css('padding-bottom', '0')
-        showDecimal.value = false;
       }
-      document.getElementById("app").style.paddingBottom = "0";
     }
   }
 );
@@ -90,15 +106,27 @@ const readonly = props.item.component_props.readonly;
 const showKeyboard = (e) => {
   if (readonly) return false; // 如果为只读，不能设置
   // 键盘上移动
-  const target_to_view_height =
+  const windowHeight = Taro.getSystemInfoSync().windowHeight; // 可使用窗口高度
-    window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度
+  Taro.createSelectorQuery().select(`#${props.item.name}`).boundingClientRect(async (res) => {
-  const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
+    const target_to_view_height = windowHeight - res.bottom; // 元素到视口高度
-  let scroll_height = "";
+    // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
-  if (target_to_view_height <= 250) {
+    // let scroll_height = "";
-    document.getElementById("app").style.paddingBottom = "250px";
+    if (target_to_view_height <= 250) {
-    // 向上滚动位置
+      if (process.env.TARO_ENV === 'h5') {
-    document.documentElement.scrollTop = $(e.target).offset().top - 244;
+        $('#app').css('padding-bottom', '250px')
-  }
+      } else {
+        $('.table-page').css('padding-bottom', '250px')
+      }
+      // 向上滚动位置
+      setTimeout(() => {
+        Taro.pageScrollTo({
+          scrollTop: res.top,
+          duration: 300
+        })
+      }, 500);
+    }
+  }).exec()
+
   // if (target_top < 250) {
   //   window.scrollTo(0, $("#app").height());
   // } else {
@@ -106,32 +134,44 @@ const showKeyboard = (e) => {
   //   document.documentElement.scrollTop = (target_top > 500 ? 0 : target_top) + 250;
   // }
   // 选中添加border颜色
-  content = $(e.target).parent();
+  content = $(`#${props.item.name}_input`);
   // TAG: 自定义主题颜色
   content.css("border-color", "#c2915f");
   setTimeout(() => {
-    if (props.item.component_props.max_fraction_count === 0) {
+    if (props.item.component_props.max_fraction_count > 0) {
-      // 显示整数键盘
-      showInteger.value = true;
-    } else {
       // 显示小数键盘
       showDecimal.value = true;
+    } else {
+      // 显示整数键盘
+      showInteger.value = true;
     }
   }, 300);
   // 记录点击field名
   store.changeFieldName(props.item.name);
 };
 const blurKeyboard = () => {
-  if (props.item.component_props.max_fraction_count === 0) {
+  if (props.item.component_props.max_fraction_count > 0) {
+    // 显示小数键盘
+    showDecimal.value = false;
+  } else {
     // 显示整数键盘
     showInteger.value = false;
+  }
+  if (process.env.TARO_ENV === 'h5') {
+    $('#app').css('padding-bottom', '0')
   } else {
-    // 显示小数键盘
+    $('.table-page').css('padding-bottom', '0')
-    showDecimal.value = false;
   }
-  document.getElementById("app").style.paddingBottom = "0";
   // 还原border颜色
   content.css("border-color", "#eaeaea");
+  // 发送自定义回调数字
+  props.item.value = {
+    key: "number",
+    filed_name: props.item.key,
+    value: input_value.value,
+  };
+  emit("active", props.item.value);
+  validNumber()
 };
 const showDecimal = ref(false);
@@ -143,59 +183,64 @@ const min = props.item.component_props.min;
 const max = props.item.component_props.max;
 const max_count = props.item.component_props.max_fraction_count; // 保留小数个数 null=不限，0=没有小数，大于0=最多只能输入的小数个数
 const reg = new RegExp("^([0-9]+)(\\.(\\d){" + max_count +"," + max_count +"})$", "g");
-const validator = (val) => {
+
-  if (required && !val) { // 必填
+const show_error = ref(false);
-    return false;
+const error_msg = ref('');
-  } else if (val && min && (val < min)) { // 小于最小值
+// 校验模块
-    return false;
+const validNumber = () => {
-  } else if (val && max && (val > max)) { // 大于最大值
+  // 必填项
-    return false;
+  if (required && !input_value.value) { // 必填
-  } else if (val && max_count && !reg.test(val)) { // 不符合保留小数个数
+    show_error.value = true;
-    return false;
+    error_msg.value = '必填项不能为空';
+  } else if (input_value.value && min && (input_value.value < min)) { // 小于最小值
+    show_error.value = true;
+    error_msg.value = `最小值为 ${min}`;
+  } else if (input_value.value && max && (input_value.value > max)) { // 大于最大值
+    show_error.value = true;
+    error_msg.value = `最大值为 ${max}`;
+  } else if (input_value.value && max_count && !reg.test(input_value.value)) { // 不符合保留小数个数
+    show_error.value = true;
+    error_msg.value = `保留小数点后 ${max_count} 位`;
   } else {
-    return true;
+    show_error.value = false;
-  }
+    error_msg.value = '';
-};
-// 错误提示文案
-const validatorMessage = (val, rule) => {
-  if (required && !val) {
-    return "必填项不能为空";
-  } else if (val && min && (val < min)) { // 小于最小值
-    return "最小值为" + min;
-  } else if (val && max && (val > max)) { // 大于最大值
-    return "最大值为" + max;
-  } else if (val && max_count && !reg.test(val)) { // 不符合保留小数个数
-    return "保留小数点后" + max_count + "位";
   }
+  return !show_error.value;
 };
-const rules = [{ validator, message: validatorMessage }];
-const onInput = (value) => {};
+defineExpose({ validNumber, id: props.item.key });
+
+const onInput = (value) => {
+};
 const onDelete = () => {};
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .number-page {
   .label {
-    padding: 1rem 1rem 0 1rem;
+    padding: 30px 30px 0 30px;
-    font-size: 0.9rem;
+    font-size: 26px;
     font-weight: bold;
-    span {
+    text {
       color: red;
     }
   }
-}
-:deep(.van-field__body) {
+  .nut-input {
-  border: 1px solid #eaeaea;
+    padding: 20px 25px;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  input {
-    color: #323233;
   }
 }
-:deep(.van-number-keyboard__title) {
+// :deep(.van-field__body) {
-  font-size: 1.05rem;
+//   border: 1px solid #eaeaea;
-}
+//   border-radius: 0.25rem;
+//   padding: 0.25rem 0.5rem;
+//   input {
+//     color: #323233;
+//   }
+// }
+
+// :deep(.van-number-keyboard__title) {
+//   font-size: 1.05rem;
+// }
 </style>
--- a/src/hooks/useComponentType.js
View file @3b455eb
+++ b/src/hooks/useComponentType.js
View file @3b455eb
@@ -16,7 +16,7 @@ import PickerField from '@/components/PickerField/index.vue'
 // import RatePickerField from '@/components/RatePickerField/index.vue'
 // import CalendarField from '@/components/CalendarField/index.vue'
 // import IdentityField from '@/components/IdentityField/index.vue'
-// import NumberField from '@/components/NumberField/index.vue'
+import NumberField from '@/components/NumberField/index.vue'
 // import DesField from '@/components/DesField/index.vue'
 // import DividerField from '@/components/DividerField/index.vue'
 // import VideoField from '@/components/VideoField/index.vue'
@@ -80,10 +80,10 @@ export function createComponentType(data) {
       item.name = item.key
       item.component = TextareaField
     }
-    // if (item.component_props.tag === 'number') {
+    if (item.component_props.tag === 'number') {
-    //   item.name = item.key
+      item.name = item.key
-    //   item.component = NumberField
+      item.component = NumberField
-    // }
+    }
     if (item.component_props.tag === 'radio') {
       item.component = RadioField
     }
--- a/src/pages/table/index.vue
View file @3b455eb
+++ b/src/pages/table/index.vue
View file @3b455eb
 <!--
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-04-06 13:37:04
+ * @LastEditTime: 2023-04-06 14:35:26
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
 -->
@@ -132,6 +132,7 @@ const radio = ref([]);
 const checkbox = ref([]);
 const multi_rule = ref([]);
 const picker = ref([]);
+const number = ref([]);
 const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
@@ -158,6 +159,9 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "select") {
       picker.value.push(el);
     }
+    if (item.component_props.tag === "number") {
+      number.value.push(el);
+    }
     if (item.component_props.tag === "area_picker") {
       area_picker.value.push(el);
     }
@@ -417,6 +421,9 @@ const onActive = (item) => {
   if (item.key === "area_picker") {
     postData.value[item.filed_name] = item.value;
   }
+  if (item.key === "number") {
+    postData.value[item.filed_name] = item.value;
+  }
   if (item.key === "image_uploader") {
     postData.value[item.filed_name] = item.value;
   }
@@ -521,6 +528,19 @@ const validOther = () => {
       }
     });
   }
+  if (number.value) {
+    // 下拉框
+    number.value.forEach((item, index) => {
+      if (!number.value[index].validNumber()) {
+        valid = {
+          status: number.value[index].validNumber(),
+          key: "number",
+          id: number.value[index]?.id
+        };
+        return false;
+      }
+    });
+  }
   if (area_picker.value) {
     // 省市区地址
     area_picker.value.forEach((item, index) => {