自定义表单数字迁移

common/js/common/common.js

@@ -907,4 +907,29 @@ export const color_change = (length) => {
     } else {
         return predefine_colors[length];
     }
+};
+
+/**
+ * 格式化数字字符串或数值
+ * 此函数根据是否需要转换，将输入的数字字符串或数值格式化为带有逗号分隔的字符串
+ * 如果不需要转换，则移除输入中的所有逗号
+ *
+ * @param num - 输入的数字字符串或数值
+ * @param is_convert - 指示是否需要转换的布尔值
+ * @returns 格式化后的数字字符串
+ */
+export const formatNumber = (num, is_convert) => {
+    if (is_convert) {
+        // 将输入转换为字符串形式以便处理
+        const number = num.toString();
+        // 使用正则表达式将整数部分每三位用逗号分隔
+        const integerPart = number.split('.')[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        // 避免小数为空的时候也处理
+        const decimalPart = number.split('.')[1] == null ? '' : '.' + number.split('.')[1];
+        // 组合整数部分和小数部分
+        return integerPart + decimalPart;
+    } else {
+        // 如果不需要转换，移除所有逗号并返回
+        return num.toString().replace(/,/g, '');
+    }
 };

pages/form-input/components/form-input/checkbox.vue

@@ -2,7 +2,7 @@
     <view class="flex-col gap-5">
         <checkbox-group :value="form_value" @change="data_change" class="flex-row gap-10 flex-wrap">
             <label v-for="item in option_list" :key="item.value">
-                <checkbox :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)">
+                <checkbox :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)" class="flex-row align-c">
                     <view :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name }}</view>
                 </checkbox>
             </label>

pages/form-input/components/form-input/number.vue

@@ -1,12 +1,17 @@
 <template>
     <view class="flex-row align-c wh-auto" :style="propStyle">
-        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" :maxlength="max_length" @blur="data_check" @input="input_value_event" />
+        <template v-if="com_data.is_display_money == '1'">
-        <view class="input-limit-num" v-if="com_data.is_limit_num == '1' && !isEmpty(com_data.max_num)">{{ form_value.length }}/{{ com_data.max_num }}</view>
+            <view class="number-icon padding-right-sm">{{ com_data.money_sign }}</view>
+        </template>
+        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" @focus="focus_input" @blur="blur_input" @input="input_value_event" />
+        <template v-if="com_data.format == 'percentage'">
+             <view class="number-icon padding-left">%</view>
+        </template>
     </view>
 </template>
 
 <script>
-    import { get_format_checks, isEmpty } from '@/common/js/common/common.js';
+    import { get_format_checks, isEmpty, formatNumber } from '@/common/js/common/common.js';
     const app = getApp();
     export default {
         name: 'diy',
@@ -33,7 +38,10 @@
                 placeholder: '请输入内容...',
                 form_value: '',
                 com_data: {},
-                max_length: '-1'
+                max_length: '-1',
+                decimal_num: 0,
+                is_thousandths_symbol: '0',
+                format: '',
             };
         },
         watch: {
@@ -54,11 +62,50 @@
                     max_length: com_data.is_limit_num == '1' && !isEmpty(com_data.max_num) ? com_data.max_num : '-1',
                     placeholder: com_data?.placeholder || '请输入内容...',
                     form_value: com_data?.form_value || '', 
+                    decimal_num: com_data.is_decimal == '1' ? com_data.decimal_num : 0,
+                    is_thousandths_symbol: com_data.is_thousandths_symbol,
+                    format: com_data.format,
                 });
             },
-            data_check(e) {
+            focus_input(e) {
-                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value);
+                let value = '';
-                this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, index: this.propDataIndex });
+                // 不为空的时候，获取焦点的时候将千分位的转化为数字避免用户输入的时候出现问题
+                if (!isEmpty(e.detail.value)) {
+                    value = Number(formatNumber(e.detail.value, false)).toFixed(this.decimal_num);
+                }
+                this.setData({
+                    form_value: value,
+                });
+            },
+            blur_input(e){
+                if (!isEmpty(e.detail.value)) {
+                    let all_list = e.detail.value.replace(/[^0-9.]/g, '');
+                    // 去除不是数字和.的值
+                    let num = Number(formatNumber(all_list, false)).toFixed(this.decimal_num);
+                    // 为数字并且时千分位的是你
+                    if (this.format == 'num' && this.is_thousandths_symbol == '1') {
+                        // 如果有多个.的话，去除多个.
+                        const parts = all_list.split('.');
+                        if (parts.length > 2) {
+                            // 如果有多个小数点，则只保留第一个
+                            all_list = parts[0] + '.' + parts.slice(1).join('');
+                        }
+                        num = formatNumber(Number(formatNumber(all_list, false)).toFixed(this.decimal_num).toString(), true)
+                    }
+                    this.data_check(num);
+                    this.setData({ 
+                        form_value: num,
+                    });
+                } else {
+                    this.setData({ 
+                        form_value: '',
+                    });
+                    this.data_check('');
+                }
+            },
+            data_check(val) {
+                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, val, true, 'number');
+                this.$emit('dataCheck', { is_error, error_text, value: val, index: this.propDataIndex });
             },
             input_value_event(e) {
                 // 重新编辑一下历史数据
@@ -72,7 +119,7 @@
 </script>
 
 <style lang="scss" scoped>
-.input-limit-num {
+.number-icon {
-    margin-left: 20rpx;
+    color: #ccc;
-} 
+}
 </style>

pages/form-input/components/form-input/radio.vue

@@ -62,10 +62,6 @@
                     form_value: com_data?.form_value || [], 
                 });
             },
-            data_check(e) {
-                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value, false, 'radio');
-                this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, index: this.propDataIndex });
-            },
             data_change(e) {
                 // 重新编辑一下历史数据
                 this.setData({

pages/form-input/components/form-input/select-multi.vue

@@ -5,7 +5,7 @@
                 <template v-if="isEmpty(form_value)"><view class="placeholder">{{ placeholder }}</view></template>
                 <template v-else>
                     <view :class="'flex-row align-c' + (is_multicolour == '1' ? ' gap-10' : '')">
-                        <view class="text-size-sm nowrap" v-for="(item, index) in form_value_data" :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name || item.value  }}{{ index != form_value_data.length - 1 && is_multicolour !== '1' ? ',' : ''}}</view>
+                        <view class="text-size-sm nowrap" v-for="(item, index) in form_value_data" :key="index" :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name || item.value  }}{{ index != form_value_data.length - 1 && is_multicolour !== '1' ? ',' : ''}}</view>
                     </view>
                 </template>
             </view>
@@ -34,12 +34,12 @@
                         <view :class="'flex-col gap-10 mt-10' + ( com_data.is_add_option == '1' ? 'popup-add-list' : 'popup-list')">
                            <checkbox-group :value="select_value" @change="data_all_change" class="flex-col gap-10">
                                 <label class="popup-checkbox">
-                                    <checkbox value="all" :checked="select_value == 'all'"><view :style="color_style + 'padding-left:0rpx;padding-right:0rpx;'">全选</view></checkbox>
+                                    <checkbox value="all" :checked="select_value == 'all'" class="flex-row align-c"><view :style="color_style + 'padding-left:0rpx;padding-right:0rpx;'">全选</view></checkbox>
                                 </label>
                             </checkbox-group>
                             <checkbox-group :value="popup_list" @change="data_checkbox_change" class="flex-col gap-10">
                                 <label v-for="item in new_option_list" class="popup-checkbox" :key="item.value">
-                                    <checkbox :value="item.value" :checked="!isEmpty(popup_list) && popup_list.includes(item.value)">
+                                    <checkbox :value="item.value" :checked="!isEmpty(popup_list) && popup_list.includes(item.value)" class="flex-row align-c">
                                         <view :style="is_multicolour == '1' ? 'background:' + item.color + ';color:' + (item.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ item.name }}</view>
                                     </checkbox>
                                 </label>
@@ -163,10 +163,6 @@
                     form_value_data: form_value_data,
                 });
             },
-            data_check(e) {
-                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value);
-                this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, index: this.propDataIndex });
-            },
             /**
              * 下拉框选择事件
              */
@@ -274,6 +270,10 @@
                     popup_status: false,
                     form_value_data: form_value_data,
                 });
+                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, this.popup_list, true, 'checkbox');
+                // 校验数据
+                this.$emit('dataCheck', { is_error, error_text, value: this.popup_list, index: this.propDataIndex });
+                // 数据更新时的处理
                 this.$emit('dataChange', { value: this.popup_list, index: this.propDataIndex });
             }
         }

pages/form-input/components/form-input/select.vue

@@ -141,10 +141,6 @@
                     form_value_data: form_value_data,
                 });
             },
-            data_check(e) {
-                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value);
-                this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, index: this.propDataIndex });
-            },
             /**
              * 下拉框选择事件
              */