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

修改显示处理

master
于肖磊 2025-07-31 14:38:40 +08:00
parent 239f7cb38c
commit 734bffe844
13 changed files with 448 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/form-input/components/form-input/address.vue
View File

@ -13,7 +13,7 @@
</view>
<view v-if="propDirection == 'row' && address_type == 'detailed'" class="border-line"></view>
<view v-if="address_type == 'detailed'" class="flex-row">
<textarea :value="detailed_value" class="uni-input flex-1 ht-auto" :style="com_data.common_style + propStyle + 'min-height:100rpx;' + (propDirection == 'row' ? '' : 'padding: 18rpx 22rpx;')" placeholder="请输入详细地址" @input="input_value_event" />
<textarea :value="detailed_value" class="uni-input flex-1 ht-auto" auto-height :style="com_data.common_style + propStyle + 'min-height:40rpx;' + (propDirection == 'row' ? '' : 'padding: 18rpx 22rpx;')" placeholder="请输入详细地址" @input="input_value_event" />
</view>
</view>
<component-region-picker :propProvinceId="province_id" :propCityId="city_id" :propCountyId="county_id" :propShow="region_picker_show" @onclose="close_event" @callBackEvent="region_event"></component-region-picker>
@ -143,13 +143,12 @@
city_name: data.city.name || '',
county_name: data.areal.name || '',
});
// 地址信息校验
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, data.province.id, false, 'address');
this.$emit('dataCheck', { is_error, error_text, value: [ data.province.id, data.city.id, data.areal.id ], id: this.propDataId });
// 改变对应id的数据
this.$emit('regionEvent', { value: [ data.province.id, data.city.id, data.areal.id ], province_name: data.province.name, city_name: data.city.name, county_name: data.areal.name, id: this.propDataId });
},
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, id: this.propDataId });
},
input_value_event(e) {
// 重新编辑一下历史数据
this.setData({

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

@ -106,6 +106,9 @@
dialog_value: '',
});
this.$refs.inputDialog.close();
// 执行校验逻辑
this.data_check({ detail: { value: this.form_value } });
this.$emit('dataOptionChange', { list: custom_option_list, value: this.form_value, id: this.propDataId });
} else {
this.$refs.message.open();
@ -123,6 +126,9 @@
this.setData({
form_value: e.detail.value,
});
// 执行校验逻辑
this.data_check(e);
// 将值传递给父级组件
this.$emit('dataChange', { value: e.detail.value, id: this.propDataId });
},
}

16
pages/form-input/components/form-input/date-group.vue
View File

@ -121,14 +121,19 @@
const date = time_stamp(e, this.date_style, this.date_type);
const value = this.form_value;
value[this.form_index] = date;
const data = this.date_handle(value[0], value[1]);
const new_time_data = this.date_handle(value[0], value[1]);
// 重新编辑一下历史数据
this.setData({
form_value: data,
form_value: new_time_data,
});
// 数据发生变化之后再改回原样
this.z_index_change('');
this.$emit('dataChange', { value: value, id: this.propDataId });
// 执行校验逻辑
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, new_time_data, false, 'time');
// 校验数据
this.$emit('dataCheck', { is_error, error_text, value: new_time_data, id: this.propDataId });
// 发送数据
this.$emit('dataChange', { value: new_time_data, id: this.propDataId });
},
date_handle(time0, time1) {
if (isEmpty(time0) || isEmpty(time1)) {
@ -171,6 +176,11 @@
form_value: date,
});
this.z_index_change('');
// 执行校验逻辑
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, date, false, 'time');
// 校验数据
this.$emit('dataCheck', { is_error, error_text, value: date, id: this.propDataId });
this.$emit('dataChange', { value: date, id: this.propDataId });
},
mask_click() {

9
pages/form-input/components/form-input/date.vue
View File

@ -99,10 +99,6 @@
this.$refs.option4.show();
}
},
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, id: this.propDataId });
},
data_date_change(e) {
const date = time_stamp(e, this.date_style, this.date_type);
// 重新编辑一下历史数据
@ -110,6 +106,11 @@
form_value: date,
});
this.z_index_change('');
// 执行校验逻辑
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, date, false, 'time');
// 校验数据
this.$emit('dataCheck', { is_error, error_text, value: date, id: this.propDataId });
this.$emit('dataChange', { value: date, id: this.propDataId });
},
mask_click() {

426
pages/form-input/components/form-input/form-input-base.vue
View File

@ -8,7 +8,7 @@
<iconfont name="icon-miaosha-hdgz" :size="help_icon_style" color="#999"></iconfont>
</view>
</view>
<view :class="'flex-1 wh-auto ht-auto flex-col gap-5 '+ (['date', 'date-group'].includes(item.key) ? '' : 'oh')">
<view :class="'flex-1 wh-auto ht-auto flex-col gap-5 '+ (['date', 'date-group', 'upload-img', 'upload-video'].includes(item.key) ? '' : 'oh')">
<!-- 输入框 -->
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
<component-input :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-input>
@ -23,11 +23,11 @@
</view>
<!-- 单选按钮组 -->
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction !== 'row'">
<component-radio :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-radio>
<component-radio :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @dataOuterChange="data_outer_change" @dataOuterCheck="data_outer_check"></component-radio>
</view>
<!-- 下拉框 -->
<view v-else-if="(['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select') || (['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction == 'row')" :style="item.com_data.common_style">
<component-select :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @zIndexChange="z_index_change"></component-select>
<component-select :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @zIndexChange="z_index_change" @dataOuterChange="data_outer_change" @dataOuterCheck="data_outer_check"></component-select>
</view>
<!-- 下拉复选框 -->
<view v-else-if="(['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi') || (['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox' && flex_direction == 'row')" :style="item.com_data.common_style">
@ -189,7 +189,11 @@ export default {
componentSubform
},
props: {
propValue: {
propConfig: {
type: Object,
default: () => {},
},
propData: {
type: Object,
default: () => {},
},
@ -213,7 +217,26 @@ export default {
help_icon_style: '',
mobile: {},
popup_help_content: '',
is_custom: false
is_custom: false,
// 定义字段类型与检查参数的映射
fieldCheckMap: {
'address': { is_format: false, type: 'address' },
'number': { is_format: true, type: 'number' },
'checkbox': { is_format: true, type: 'checkbox' },
'select-multi': { is_format: true, type: 'checkbox' },
'date': { is_format: false, type: 'time' },
'date-group': { is_format: false, type: 'time' },
'single-text': { is_format: true, type: '' },
'multi-text': { is_format: false, type: '' },
'rich-text': { is_format: false, type: '' },
'radio-btns': { is_format: false, type: 'radio' },
'select': { is_format: false, type: 'select' },
'pwd': { is_format: false, type: '' },
'score': { is_format: false, type: 'score' },
'upload-attachments': { is_format: false, type: 'upload' },
'upload-img': { is_format: false, type: 'upload' },
'upload-video': { is_format: false, type: 'upload' }
},
}
},
computed: {
@ -257,7 +280,7 @@ export default {
methods: {
isEmpty,
init() {
const data = this.propValue;
const data = this.propConfig;
// 公共配置信息
const overall_config = data?.overall_config || {};
const mobile = overall_config?.style_settings?.mobile || {};
@ -270,13 +293,25 @@ export default {
// 富文本只支持APP-PLUS || H5 || MP-WEIXIN
diy_data = diy_data.filter(item => item.key !== 'rich-text');
// #endif
const new_diy_data = this.set_default_values(diy_data, overall_config, mobile);
this.setData({
z_index_id: '',
data_list: new_diy_data,
mobile: mobile,
flex_direction: mobile.flex_direction || 'row',
title_style: `color:#333;font-size:${ mobile.filed_title_size_type == 'big' ? 44 : mobile.filed_title_size_type == 'middle' ? 32 : 24 }rpx;font-weight:blod;`,
component_style: `height:${mobile.filed_title_size_type == 'big' ? 108 : mobile.filed_title_size_type == 'middle' ? 80 : 60}rpx;font-size:${mobile.filed_title_size_type == 'big' ? 44 : mobile.filed_title_size_type == 'middle' ? 32 : 24}rpx;`,
help_icon_style: `font-size:${mobile.help_icon_size_type == 'big' ? 40 : mobile.help_icon_size_type == 'middle' ? 28 : 24}rpx;`,
field_label_style: `${ mobile.flex_direction == 'column'? 'justify-content:flex-start;' : `width:${ mobile.filed_title_width * 2 }rpx;justify-content: ${ mobile.filed_title_justification };` }`,
is_custom: overall_config.type_value == 'free',
});
},
set_default_values(diy_data, overall_config, mobile) {
diy_data.forEach(item => {
// 边框样式处理
item.com_data.common_style = this.get_form_border_style(item.com_data.common_config, mobile.flex_direction || 'row', overall_config.type_value);
const com_data = item.com_data;
// 子表单需要统一规整一下数据
if (item.key == 'subform') {
const { com_data } = item;
item.com_data.data_list = [];
com_data.data_list = [];
let data_list = [];
com_data.form_value.forEach(item1 => {
const data = JSON.parse(JSON.stringify(com_data?.children || []));
@ -293,20 +328,74 @@ export default {
});
}
});
item.com_data.data_list = data_list;
}
});
this.setData({
z_index_id: '',
data_list: diy_data,
mobile: mobile,
flex_direction: mobile.flex_direction || 'row',
title_style: `color:#333;font-size:${ mobile.filed_title_size_type == 'big' ? 44 : mobile.filed_title_size_type == 'middle' ? 32 : 24 }rpx;font-weight:blod;`,
component_style: `height:${mobile.filed_title_size_type == 'big' ? 108 : mobile.filed_title_size_type == 'middle' ? 80 : 60}rpx;font-size:${mobile.filed_title_size_type == 'big' ? 44 : mobile.filed_title_size_type == 'middle' ? 32 : 24}rpx;`,
help_icon_style: `font-size:${mobile.help_icon_size_type == 'big' ? 40 : mobile.help_icon_size_type == 'middle' ? 28 : 24}rpx;`,
field_label_style: `${ mobile.flex_direction == 'column'? 'justify-content:flex-start;' : `width:${ mobile.filed_title_width * 2 }rpx;justify-content: ${ mobile.filed_title_justification };` }`,
is_custom: overall_config.type_value == 'free',
if (!isEmpty(this.propData)) {
// 子表单数据重组
data_list.forEach((item1, index) => {
item1.data_list.forEach(item2 => {
const new_prop_data = this.propData[index];
const subform_com_data = item2.com_data;
const subform_name = subform_com_data.form_name;
if (item2.key == 'address') {
subform_com_data.form_value = [ new_prop_data[`${ subform_name }_province_id`] || '', new_prop_data[`${ subform_name }_city_id`] || '', new_prop_data[`${ subform_name }_county_id`] || '' ];
// 省市区中文名称
subform_com_data.province_name = new_prop_data[`${ subform_name }_province_name`] || '';
subform_com_data.city_name = new_prop_data[`${ subform_name }_city_name`] || '';
subform_com_data.county_name = new_prop_data[`${ subform_name }_county_name`] || '';
} else if (['checkbox', 'select-multi'].includes(item2.key)) {
subform_com_data.form_value = new_prop_data[subform_name] || [];
if (subform_com_data.is_add_option == '1') {
subform_com_data.custom_option_list = new_prop_data[`${ subform_name }_custom_option_list`] || [];
}
} else {
subform_com_data.form_value = new_prop_data[subform_name] || '';
}
});
});
}
com_data.data_list = data_list;
} else {
// 边框样式处理
com_data.common_style = this.get_form_border_style(com_data.common_config, mobile.flex_direction || 'row', overall_config.type_value);
if (!isEmpty(this.propData)) {
const name = item.form_name;
item.com_data.form_value = this.propData[item.form_name];
if (item.key ==='phone') {
com_data.form_value = this.propData[name] || '';
com_data.form_value_code = this.propData[`${ name }_verify`] || '';
} else if (item.key ==='date-group') {
com_data.form_value[0] = this.propData[`${ name }_start`] || '';
com_data.form_value[1] = this.propData[`${ name }_end`] || '';
} else if (item.key == 'address') {
com_data.province_id = this.propData[`${ name }_province_id`] || '';
com_data.city_id = this.propData[`${ name }_city_id`] || '';
com_data.county_id = this.propData[`${ name }_county_id`] || '';
// 省市区中文名称
com_data.province_name = this.propData[`${ name }_province_name`] || '';
com_data.city_name = this.propData[`${ name }_city_name`] || ''
com_data.county_name = this.propData[`${ name }_county_name`] || ''
// 判断类型是否包含详细地址
if (com_data.address_type == 'detailed') {
com_data.detailed_value = this.propData[`${ name }_address`] || '';
}
} else if (['select', 'radio-btns', 'single-text'].includes(item.key) && ['select', 'radio-btns'].includes(item.com_data.type)) {
com_data.form_value = this.propData[name] || '';
// 判断是否显示其他
const value_list = com_data.option_list.filter((item) => item.is_other == '1');
if (value_list.length > 0) {
com_data.other_value = this.propData[`${ name }_other_value`] || '';
}
} else if (['checkbox', 'select-multi'].includes(item.key)) {
com_data.form_value = this.propData[name] || '';
if (com_data.is_add_option == '1') {
com_data.custom_option_list = this.propData[`${ name }_custom_option_list`] || [];
}
} else {
com_data.form_value = this.propData[name] || '';
}
}
}
});
return diy_data;
},
// 获取子表单样式
get_form_border_style(item, flex_direction, type_value) {
@ -337,6 +426,21 @@ export default {
}
});
this.setData({ data_list: data });
// 触发数据修改的事件
this.verify_when_data_changes(id);
},
data_outer_change(e) {
const { value, id } = e;
// 改变对应id的数据
const data = [...this.data_list];
data.forEach(item => {
if (item.id == id && item.com_data) {
item.com_data.outer_value = value;
}
});
this.setData({ data_list: data });
// 触发数据修改的事件
this.verify_when_data_changes(id);
},
// 表单校验逻辑
data_check(e) {
@ -351,6 +455,23 @@ export default {
}
});
this.setData({ data_list: data });
// 触发数据修改的事件
this.on_item_event(e);
},
data_outer_check(e) {
const { is_error, error_text, value, id } = e;
// 改变对应id的数据
const data = [...this.data_list];
data.forEach(item => {
if (item.id == id && item.com_data && item.com_data.common_config) {
item.com_data.outer_value = value
item.com_data.common_config.is_error = is_error;
item.com_data.common_config.error_text = error_text;
}
});
this.setData({ data_list: data });
// 触发数据修改的事件
this.on_item_event(e);
},
// 添加新选项时的处理
data_option_change(e) {
@ -365,7 +486,7 @@ export default {
});
this.setData({ data_list: data });
},
// 手机号验证码的校验
// 手机号验证码的值的修改
data_code_change(e) {
const { value, id } = e;
// 改变对应id的数据
@ -377,6 +498,7 @@ export default {
});
this.setData({ data_list: data });
},
// 手机号验证码的校验
data_code_check(e) {
const { is_error, error_text, value, id } = e;
// 改变对应id的数据
@ -389,6 +511,8 @@ export default {
}
});
this.setData({ data_list: data });
// 触发数据修改的事件
this.on_item_event(e);
},
data_address_change(e) {
const { value, id } = e;
@ -411,6 +535,8 @@ export default {
}
});
this.setData({ data_list: data });
// 触发数据修改的事件
this.verify_when_data_changes(id);
},
// 地址信息更新
region_event(e) {
@ -427,7 +553,7 @@ export default {
});
this.setData({ data_list: data });
},
submit_click() {
on_submit_event() {
try {
// 校验所有的必填项和逻辑
const new_data = this.submit_data_check();
@ -453,12 +579,12 @@ export default {
return { ...item, ...match };
});
this.setData({ data_list: data_list });
this.$emit('submitData', { type: 'error', submit_data: {}, message: message });
this.$emit('submitEvent', { type: 'error', submit_data: {}, message: message });
} else {
this.submit_data_parameter_handle();
}
} catch (error) {
this.$emit('submitData', { type: 'error', submit_data: {}, message: '数据错误'});
this.$emit('submitEvent', { type: 'error', submit_data: {}, message: '数据错误'});
}
},
submit_data_parameter_handle() {
@ -473,36 +599,8 @@ export default {
const com_data = item.com_data;
if (item.key ==='subform') {
const data_list = com_data.data_list;
submit_data[name] = data_list.map((subform_item) => {
const data = {};
// 子表单中每一行的数据显示
subform_item.data_list.forEach((item1) => {
// 子表单中每个独立的数据name
const subform_name = isEmpty(item1.form_name) ? item1.id : item1.form_name;
const subform_com_data = item1.com_data;
// 对应的value
const subform_value = isEmpty(subform_com_data.form_value) ? '' : subform_com_data.form_value;
if (!filter_data.includes(item1.key)) {
if (item1.key == 'address') {
data[`${ subform_name }_province_id`] = subform_value[0] || '';
data[`${ subform_name }_city_id`] = subform_value[1] || '';
data[`${ subform_name }_county_id`] = subform_value[2] || '';
// 省市区中文名称
submit_data[`${ subform_name }_province_name`] = subform_com_data.province_name || '';
submit_data[`${ subform_name }_city_name`] = subform_com_data.city_name || ''
submit_data[`${ subform_name }_county_name`] = subform_com_data.county_name || ''
} else if (['checkbox', 'select-multi'].includes(item.key)) {
submit_data[subform_name] = subform_value;
if (subform_com_data.is_add_option == '1') {
submit_data[`${ subform_name }_custom_option_list`] = subform_com_data?.custom_option_list || [];
}
} else {
data[subform_name] = subform_value;
}
}
});
return data;
});
// 子表单中每一行的数据显示
submit_data[name] = this.subform_data_extraction(data_list);
} else if (item.key ==='phone') {
submit_data[`${ name }`] = value || '';
// 判断是否需要发送短信验证码
@ -524,7 +622,7 @@ export default {
if (com_data.address_type == 'detailed') {
submit_data[`${ name }_address`] = com_data?.detailed_value || '';
}
} else if (['select', 'radio-btns'].includes(item.key)) {
} else if (['select', 'radio-btns', 'single-text'].includes(item.key) && ['select', 'radio-btns'].includes(item.com_data.type)) {
submit_data[name] = value;
const value_list = com_data.option_list.filter((item) => item.is_other == '1');
if (value_list.length > 0) {
@ -540,48 +638,29 @@ export default {
}
}
});
this.$emit('submitData', { type: 'success', submit_data: submit_data, message: ''});
this.$emit('submitEvent', { type: 'success', submit_data: submit_data, message: ''});
} catch (error) {
this.$emit('submitData', { type: 'error', submit_data: {}, message: '数据错误'});
this.$emit('submitEvent', { type: 'error', submit_data: {}, message: '数据错误'});
}
},
submit_data_check() {
// 定义字段类型与检查参数的映射
const fieldCheckMap = {
'address': { is_format: false, type: 'address' },
'number': { is_format: true, type: 'number' },
'checkbox': { is_format: true, type: 'checkbox' },
'select-multi': { is_format: true, type: 'checkbox' },
'date': { is_format: false, type: 'time' },
'date-group': { is_format: false, type: 'time' },
'single-text': { is_format: true, type: '' },
'multi-text': { is_format: false, type: '' },
'rich-text': { is_format: false, type: '' },
'radio-btns': { is_format: false, type: 'radio' },
'select': { is_format: false, type: 'select' },
'pwd': { is_format: false, type: '' },
'score': { is_format: false, type: 'score' },
'upload-attachments': { is_format: false, type: 'upload' },
'upload-img': { is_format: false, type: 'upload' },
'upload-video': { is_format: false, type: 'upload' }
};
const data = JSON.parse(JSON.stringify(this.filteredDiyData));
// 遍历所有过滤后的自定义数据项
data?.forEach((item) => {
const com_data = item.com_data;
let com_data = item.com_data;
// 跳过非必填项
if (com_data.is_required === '1') {
// 特殊字段验证：手机号
if (item.key === 'phone') {
const { is_error = '0', error_text = '' } = this.handlePhoneValidation(com_data);
const { is_error = '0', error_text = '' } = this.handle_phone_validation(com_data);
com_data.common_config.is_error = is_error;
com_data.common_config.error_text = error_text;
}
// 其他字段的格式验证
else if (fieldCheckMap[item.key]) {
let field_data = fieldCheckMap[data_item.key];
if (['single-text', 'select', 'radio-btns'].includes(data_item.key)) {
field_data = fieldCheckMap[data_item.com_data.type];
else if (this.fieldCheckMap[item.key]) {
let field_data = this.fieldCheckMap[data_item.key];
if (['single-text', 'select', 'radio-btns'].includes(data_item.com_data.type)) {
field_data = this.fieldCheckMap[data_item.com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = get_format_checks(com_data, com_data.form_value, is_format, type);
@ -596,53 +675,91 @@ export default {
* 3. 处理子表单内各字段的验证
*/
if (item.key === 'subform') {
// 子表单整体必填验证
if (com_data.is_required === '1' && com_data.data_list.length <= 0) {
com_data.common_config.is_error = '1';
com_data.common_config.error_text = '请填写至少一条记录';
} else {
com_data.common_config.is_error = '0';
com_data.common_config.error_text = '';
}
// 处理子表单内各字段的验证
if (com_data.data_list.length > 0) {
// 验证子表单内各字段
com_data.data_list.forEach((form_item, index) => {
// 取出对应列的数据信息
const form_data = this.filtered_Data(form_item.data_list);
form_data.forEach((data_item) => {
// 跳过非必填项
if (data_item.com_data.is_required !== '1') return;
// 执行字段验证
const checkConfig = fieldCheckMap[data_item.key];
if (checkConfig) {
// 特殊字段验证：手机号
if (data_item.key === 'phone') {
const { is_error = '0', error_text = '' } = this.handlePhoneValidation(data_item);
data_item.com_data.common_config.is_error = is_error;
data_item.com_data.common_config.error_text = error_text;
}
// 其他字段的格式验证
else if (fieldCheckMap[data_item.key]) {
let field_data = fieldCheckMap[data_item.key];
if (['single-text', 'select', 'radio-btns'].includes(data_item.key)) {
field_data = fieldCheckMap[data_item.com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = get_format_checks(data_item.com_data, data_item.com_data.form_value, is_format, type);
data_item.com_data.common_config.is_error = is_error;
data_item.com_data.common_config.error_text = error_text;
}
}
});
});
}
com_data = this.subform_data_check(com_data);
}
});
return data;
},
// 子表单的数据校验
subform_data_check(com_data) {
// 子表单整体必填验证
if (com_data.is_required === '1' && com_data.data_list.length <= 0) {
com_data.common_config.is_error = '1';
com_data.common_config.error_text = '请填写至少一条记录';
} else {
com_data.common_config.is_error = '0';
com_data.common_config.error_text = '';
}
// 处理子表单内各字段的验证
if (com_data.data_list.length > 0) {
// 验证子表单内各字段
com_data.data_list.forEach((form_item, index) => {
// 取出对应列的数据信息
const form_data = this.filtered_Data(form_item.data_list);
form_data.forEach((data_item) => {
// 跳过非必填项
if (data_item.com_data.is_required !== '1') return;
// 执行字段验证
const checkConfig = this.fieldCheckMap[data_item.key];
if (checkConfig) {
// 特殊字段验证：手机号
if (data_item.key === 'phone') {
const { is_error = '0', error_text = '' } = this.handle_phone_validation(data_item);
data_item.com_data.common_config.is_error = is_error;
data_item.com_data.common_config.error_text = error_text;
}
// 其他字段的格式验证
else if (this.fieldCheckMap[data_item.key]) {
let field_data = this.fieldCheckMap[data_item.key];
if (['single-text', 'select', 'radio-btns'].includes(data_item.com_data.type)) {
field_data = this.fieldCheckMap[data_item.com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = get_format_checks(data_item.com_data, data_item.com_data.form_value, is_format, type);
data_item.com_data.common_config.is_error = is_error;
data_item.com_data.common_config.error_text = error_text;
}
}
});
});
}
return com_data;
},
// 子表单内的数据提取
subform_data_extraction(data_list) {
return data_list.map((subform_item) => {
const data = {};
// 子表单中每一行的数据显示
subform_item.data_list.forEach((item1) => {
// 子表单中每个独立的数据name
const subform_name = isEmpty(item1.form_name) ? item1.id : item1.form_name;
const subform_com_data = item1.com_data;
// 对应的value
const subform_value = isEmpty(subform_com_data.form_value) ? '' : subform_com_data.form_value;
if (!filter_data.includes(item1.key)) {
if (item1.key == 'address') {
data[`${ subform_name }_province_id`] = subform_value[0] || '';
data[`${ subform_name }_city_id`] = subform_value[1] || '';
data[`${ subform_name }_county_id`] = subform_value[2] || '';
// 省市区中文名称
submit_data[`${ subform_name }_province_name`] = subform_com_data.province_name || '';
submit_data[`${ subform_name }_city_name`] = subform_com_data.city_name || ''
submit_data[`${ subform_name }_county_name`] = subform_com_data.county_name || ''
} else if (['checkbox', 'select-multi'].includes(item.key)) {
submit_data[subform_name] = subform_value;
if (subform_com_data.is_add_option == '1') {
submit_data[`${ subform_name }_custom_option_list`] = subform_com_data?.custom_option_list || [];
}
} else {
data[subform_name] = subform_value;
}
}
});
return data;
});
},
// 处理手机号验证逻辑
handlePhoneValidation(com_data) {
handle_phone_validation(com_data) {
if (com_data.is_sms_verification === '1' && com_data.is_required === '1' && isEmpty(com_data.form_value_code)) {
com_data.common_config.is_error = '1';
com_data.common_config.error_text = '短信验证码不能为空';
@ -680,6 +797,61 @@ export default {
return isShownByRule;
});
},
/*
* 没有办法监听用户离开时进行校验逻辑的组件，直接使用数据更新时的执行校验逻辑，并抛给父级
*/
verify_when_data_changes (id) {
const data = JSON.parse(JSON.stringify(this.filteredDiyData));
const filter_data_list = data.filter((item) => ['subform', 'position', 'rich-text', 'upload-attachments', 'upload-img', 'upload-video'].includes(item.key) && item.id === id);
if (filter_data_list.length > 0) {
filter_data_list?.forEach((item) => {
let com_data = item.com_data;
if (item.key === 'subform') {
com_data = this.subform_data_check(com_data);
// 子表单中每一行的数据显示
const subform_data = this.subform_data_extraction(com_data.data_list);
let is_error = '0';
// 如果子表单外层为error直接显示名称出来
if (com_data.common_config.is_error == '1') {
is_error = '1';
message = `${com_data.title}「${com_data.common_config.error_text}」`;
} else {
// 判断子表单每一行是否有报错提示
const is_list_error = com_data.data_list.some((item1) => item1.data_list.some(list_item => list_item.com_data.common_config.is_error === '1'));
if (is_list_error) {
is_error = '1';
// 如果是内部问题，让用户自己检查子表单内的填写
message = `请检查${com_data.title}内的填写`;
}
}
this.on_item_event({ id: item.id, key: item.key, value: subform_data, is_error: is_error, error_text: message });
} else {
// 跳过非必填项
if (com_data.is_required === '1') {
if (this.fieldCheckMap[item.key]) {
let field_data = this.fieldCheckMap[item.key];
if (['single-text', 'select', 'radio-btns'].includes(com_data.type)) {
field_data = this.fieldCheckMap[com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = get_format_checks(com_data, com_data.form_value, is_format, type);
// 文件进行校验
this.on_item_event({ id: item.id, key: item.key, value: com_data.form_value, is_error, error_text });
}
}
}
});
}
},
// 单个文件更新触发的事件
on_item_event(e) {
// 取出对应id的数据
const data = this.data_list.find((item) => item.id == e.id);
// 判断是否为空，为空则不进行处理
if (data) {
this.$emit('onItemEvent', { type: e.is_error == '1' ? 'error' : 'success', message: e.error_text, value: e.value, form_name: data.form_name });
}
},
z_index_change(e) {
this.setData({
z_index_id: e

16
pages/form-input/components/form-input/form-input.vue
View File

@ -9,7 +9,7 @@
<view v-if="is_show_heading_title == '1'" class="head-title flex-row bg-white" :style="heading_title_style + (overall_config.type_value == 'default' ? '' : ('width:' + overall_config.custom_width * 2 + 'rpx;'))">{{ form_name }}</view>
<view class="data-list bg-white" :style="overall_config.type_value == 'default' ? '' : ('width:' + overall_config.custom_width * 2 + 'rpx;height:' + overall_config.custom_height * 2 + 'rpx')">
<!-- form表单子组件显示 -->
<form-input-base ref="componentForm" :propValue="propValue.config" :propDataFormId="propDataFormId" @submitData="submit_data" />
<form-input-base ref="componentForm" :propConfig="propValue.config" :propDataFormId="propDataFormId" @submitEvent="submit_event" />
</view>
</view>
<!-- 支付宝小程序 不支持同时上下左右滑动-->
@ -22,7 +22,7 @@
<iconfont name="icon-detail" size="30rpx" color="#666" propContainerDisplay="flex" ></iconfont>
{{ overall_config.save_draft_title }}
</view>
<button v-if="overall_config.is_show_submit == '1'" class="flex-1 submit_title flex-row align-c jc-c" :style="'background:' + submit_bg_color" type="default" :disable="is_submit_disable" @tap="submit_click">{{ overall_config.submit_title }}</button>
<button v-if="overall_config.is_show_submit == '1'" class="flex-1 submit_title flex-row align-c jc-c" :style="'background:' + submit_bg_color" type="default" :disable="is_submit_disable" @tap="on_submit_event">{{ overall_config.submit_title }}</button>
</view>
</view>
</view>
@ -117,10 +117,10 @@ export default {
})
}, 500);
},
submit_click() {
this.$refs.componentForm.submit_click();
on_submit_event() {
this.$refs.componentForm.on_submit_event();
},
submit_data(e) {
submit_event(e) {
const { type = 'success', message = '', submit_data = {}} = e;
if (type == 'error') {
app.globalData.showToast(message, 'error');
@ -137,7 +137,11 @@ export default {
dataType: 'json',
success: (res) => {
this.is_submit_disable = false;
app.globalData.showToast('提交成功', 'success');
if (res.data.code == 0) {
app.globalData.showToast('提交成功', 'success');
} else {
app.globalData.showToast('提交失败', 'error');
}
},
fail: (res) => {
this.is_submit_disable = false;

2
pages/form-input/components/form-input/modules/components-combination.vue
View File

@ -1,5 +1,5 @@
<template>
<view :class="'wh-auto flex-col gap-5 ' + (['date', 'date-group'].includes(data_item.key) ? '' : 'oh')">
<view :class="'wh-auto flex-col gap-5 ' + (['date', 'date-group', 'upload-img', 'upload-video'].includes(data_item.key) ? '' : 'oh')">
<!-- 输入框 -->
<view v-if="['single-text', 'radio-btns', 'select'].includes(data_item.key) && data_item.com_data.type == 'single-text'" :style="data_item.com_data.common_style">
<component-input :propValue="data_item.com_data" :propKey="propKey" :propDataId="data_item.id" :propStyle="propComponentStyle" @dataCheck="data_check" @dataChange="data_change"></component-input>

2
pages/form-input/components/form-input/modules/subform-component-show.vue
View File

@ -8,7 +8,7 @@
<iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
</view>
</view>
<view :class="'flex-1 wh-auto ht-auto flex-col gap-5 ' + (['date', 'date-group'].includes(item.key) ? '' : 'oh')">
<view :class="'flex-1 wh-auto ht-auto flex-col gap-5 ' + (['date', 'date-group', 'upload-img', 'upload-video'].includes(item.key) ? '' : 'oh')">
<!-- 输入框 -->
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
<component-input :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propStyle="propComponentStyle" @dataCheck="data_check" @dataChange="data_change"></component-input>

9
pages/form-input/components/form-input/modules/uploads.vue
View File

@ -1,18 +1,18 @@
<template>
<view :class="theme_view">
<template v-if="propType !== 'file'">
<view class="flex-row flex-wrap">
<view class="flex-row flex-wrap padding-top-xs">
<template v-if="propData.length > 0">
<view v-for="(item, index) in propData" :key="index" class="item margin-right-lg pr">
<view v-if="propDelete" class="delete-icon pa z-i-deep" @tap="upload_delete_event" :data-index="index">
<iconfont name="icon-bjdz-guanbi" size="36rpx" color="rgba(87,91,102,0.65)"></iconfont>
</view>
<template v-if="propType == 'img'">
<image :src="item.url" @tap="upload_show_event" :data-index="index" mode="aspectFill" class="img border-radius-main oh"></image>
<image :src="item.url" @tap="upload_show_event" :data-index="index" mode="aspectFill" class="img border-radius-main oh box-shadow-img"></image>
</template>
<template v-else-if="propType == 'video'">
<view class="pr show-video">
<video :src="item.url" class="video border-radius-main oh" :show-center-play-btn="false" :controls="false" objectFit="cover" style="object-fit: cover" ></video>
<video :src="item.url" class="video border-radius-main oh box-shadow-video" :show-center-play-btn="false" :controls="false" objectFit="cover" style="object-fit: cover" ></video>
<view class="video-container border-radius-main z-i flex-row align-c jc-c" :data-index="index" @tap="upload_show_event">
<iconfont name="icon-bofang" size="32rpx" color="#fff"></iconfont>
</view>
@ -348,4 +348,7 @@
background: #fff;
border-radius: 8rpx;
}
.box-shadow-img, .box-shadow-video {
box-shadow: 0px 0px 5px 0px rgba(207, 207, 207, 0.5);
}
</style>

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

@ -1,16 +1,21 @@
<template>
<radio-group @change="data_change" :class="(com_data.arrangement == 'horizontal' ? 'flex-row flex-wrap' : 'flex-col') + ' gap-10'">
<label v-for="item in option_list" :key="item.value" class="flex-row align-c margin-right-xxl">
<view>
<radio :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)" style="transform:scale(0.7)"/>
</view>
<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>
</label>
</radio-group>
<view class="flex-col gap-10">
<radio-group @change="data_change" :class="(com_data.arrangement == 'horizontal' ? 'flex-row flex-wrap' : 'flex-col') + ' gap-10'">
<label v-for="item in option_list" :key="item.value" class="flex-row align-c margin-right-xxl">
<view>
<radio :value="item.value" :checked="!isEmpty(form_value) && form_value.includes(item.value)" style="transform:scale(0.7)"/>
</view>
<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>
</label>
</radio-group>
<template v-if="!isEmpty(option_value) && form_value == option_value">
<input :value="outer_value" class="uni-input flex-1" :style="propStyle" type="text" placeholder="请输入其他内容" placeholder-style="color: gray;" @blur="data_outer_check" @input="input_outer_value_event" />
</template>
</view>
</template>
<script>
import { isEmpty, get_color_style } from '@/common/js/common/common.js';
import { isEmpty, get_color_style, get_format_checks } from '@/common/js/common/common.js';
const app = getApp();
export default {
props: {
@ -26,6 +31,10 @@
type: String,
default: '',
},
propStyle: {
type: String,
default: '',
},
propMobile: {
type: Object,
default: () => ({}),
@ -39,6 +48,8 @@
color_style: '',
is_multicolour: '0',
dialog_value: '',
option_value: '',
outer_value: '',
};
},
watch: {
@ -60,19 +71,48 @@
isEmpty,
init() {
const com_data = this.propValue;
// 判断其他的code值是什么
let option_value = '';
const value_list = com_data?.option_list.filter((item) => item.is_other == '1');
if (value_list.length > 0) {
option_value = value_list[0].value;
}
this.setData({
com_data: com_data,
is_multicolour: com_data.is_multicolour,
color_style: get_color_style(this.propMobile),
option_list: com_data?.option_list || [],
form_value: com_data?.form_value || [],
outer_value: com_data?.outer_value || '',
option_value: option_value,
});
},
input_outer_value_event(e) {
this.setData({
outer_value: e.detail.value,
});
// 执行校验逻辑
this.data_outer_check({ detail: { value: this.outer_value } });
// 传递参数给父级
this.$emit('dataOuterChange', { value: e.detail.value, id: this.propDataId });
},
data_outer_check(e) {
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value, false, '');
this.$emit('dataOuterCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
},
// 校验逻辑
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, id: this.propDataId });
},
data_change(e) {
// 重新编辑一下历史数据
this.setData({
form_value: e.detail.value,
});
// 执行校验逻辑
this.data_check(e);
// 传递参数给父级
this.$emit('dataChange', { value: e.detail.value, id: this.propDataId });
},
}

5
pages/form-input/components/form-input/score.vue
View File

@ -103,6 +103,11 @@
this.setData({
form_value: index,
});
// 执行校验逻辑
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, index, false, 'score');
// 校验数据
this.$emit('dataCheck', { is_error, error_text, value: index, id: this.propDataId });
this.$emit('dataChange', { value: index, id: this.propDataId });
}
}

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

@ -72,7 +72,7 @@
</template>
<script>
import { get_format_checks, isEmpty, get_color_style, color_change } from '@/common/js/common/common.js';
import { get_format_checks, isEmpty, get_color_style, color_change, get_math } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
@ -274,6 +274,7 @@
// 关闭弹窗
this.$refs.selectPopup.close();
this.z_index_change('');
// 执行校验逻辑
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, id: this.propDataId });

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

@ -1,19 +1,24 @@
<template>
<view class="wh-auto">
<view class="flex-row align-c wh-auto" :style="propStyle" @tap="data_value_event">
<view class="flex-1">
<template v-if="isEmpty(form_value)"><view class="placeholder cr-gray text-line-1">{{ placeholder }}</view></template>
<view class="flex-col gap-10">
<view class="flex-row align-c wh-auto" :style="propStyle" @tap="data_value_event">
<view class="flex-1">
<template v-if="isEmpty(form_value)"><view class="placeholder cr-gray text-line-1">{{ placeholder }}</view></template>
<template v-else>
<view class="flex-row align-c">
<view :style="is_multicolour == '1' ? 'background:' + form_value_data.color + ';color:' + (form_value_data.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ form_value_data.name || form_value }}</view>
</view>
</template>
</view>
<template v-if="propDirection == 'row'">
<iconfont name="icon-arrow-right" size="24rpx" color="#666" propContainerDisplay="flex"></iconfont>
</template>
<template v-else>
<view class="flex-row align-c">
<view :style="is_multicolour == '1' ? 'background:' + form_value_data.color + ';color:' + (form_value_data.is_other == '1' ? '#141E31' : '#fff') + ';border-radius:8rpx;' + color_style : color_style + 'padding-left:0rpx;padding-right:0rpx;'">{{ form_value_data.name || form_value }}</view>
</view>
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
</template>
</view>
<template v-if="propDirection == 'row'">
<iconfont name="icon-arrow-right" size="24rpx" color="#666" propContainerDisplay="flex"></iconfont>
</template>
<template v-else>
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
<template v-if="!isEmpty(option_value) && form_value == option_value">
<input :value="outer_value" class="uni-input flex-1" :style="propStyle" type="text" placeholder="请输入其他内容" placeholder-style="color: gray;" @blur="data_outer_check" @input="input_outer_value_event" />
</template>
</view>
<!-- 弹窗 -->
@ -53,7 +58,7 @@
</template>
<script>
import { isEmpty, get_color_style } from '@/common/js/common/common.js';
import { isEmpty, get_color_style, get_format_checks } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
@ -92,6 +97,8 @@
popup_search_value: '',
color_style: '',
form_value_data: {},
option_value: '',
outer_value: '',
};
},
watch: {
@ -123,6 +130,12 @@
isEmpty,
init() {
const com_data = this.propValue;
// 判断其他的code值是什么
let option_value = '';
const value_list = com_data?.option_list.filter((item) => item.is_other == '1');
if (value_list.length > 0) {
option_value = value_list[0].value;
}
// 取出选择的中文名称和内容
const data = com_data?.option_list.find(item => item.value == com_data?.form_value);
let form_value_data = {};
@ -137,6 +150,8 @@
color_style: get_color_style(this.propMobile),
form_value: com_data?.form_value || '',
form_value_data: form_value_data,
outer_value: com_data?.outer_value || '',
option_value: option_value,
});
},
/**
@ -183,8 +198,28 @@
// 关闭选择框
this.$refs.selectPopup.close();
this.z_index_change('');
// 执行校验逻辑
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, id: this.propDataId });
// 将改变的参数传递给父级
this.$emit('dataChange', { value: e.detail.value, id: this.propDataId });
},
// 其他参数内容修改
input_outer_value_event(e) {
this.setData({
outer_value: e.detail.value,
});
// 执行校验逻辑
this.data_outer_check({ detail: { value: this.outer_value } });
// 传递参数给父级
this.$emit('dataOuterChange', { value: e.detail.value, id: this.propDataId });
},
// 其他参数改变
data_outer_check(e) {
const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value, false, '');
this.$emit('dataOuterCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
},
/**
* 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部
*/