sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

自定义表单数字迁移

master
于肖磊 2025-06-26 16:38:20 +08:00
parent c80f5219b4
commit 7392774e3a
6 changed files with 90 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
common/js/common/common.js
View File

@ -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, '');
}
};

2
pages/form-input/components/form-input/checkbox.vue
View File

@ -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>

67
pages/form-input/components/form-input/number.vue
View File

@ -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" />
<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>
<template v-if="com_data.is_display_money == '1'">
<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) {
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 });
focus_input(e) {
let value = '';
// 不为空的时候，获取焦点的时候将千分位的转化为数字避免用户输入的时候出现问题
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 {
margin-left: 20rpx;
}
.number-icon {
color: #ccc;
}
</style>

4
pages/form-input/components/form-input/radio.vue
View File

@ -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({

14
pages/form-input/components/form-input/select-multi.vue
View File

@ -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 });
}
}

4
pages/form-input/components/form-input/select.vue
View File

@ -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 });
},
/**
* 下拉框选择事件
*/