` + (index + 1) + `
复制到下一行
复制到最后一行
向上插入一行
向下插入一行
`;
if (['single-text', 'select', 'radio-btns'].includes(item_data.key) && item_data.com_data.type == 'single-text') {
subform_html += `
`;
} else if (item_data.key == 'score') {
subform_html += `
`;
} else if (item_data.key == 'attachments') {
if (!IsEmpty(item_data.com_data.file)) {
subform_html += `
`;
} else if (item_data.key == 'upload-img') {
subform_html += `
`
} else if (['checkbox', 'select-multi'].includes(item_data.key)) {
subform_html += `
`;
} else if (item_data.key == 'address') {
subform_html += `
`;
}
subform_html += '
';
})
}
return subform_html;
}
/*
* 表单提交校验逻辑
*/
function ForminputSubmitDataCheck() {
const data = JSON.parse(JSON.stringify(ForminputShowHiddenChange('data')));
// 遍历所有过滤后的自定义数据项
data?.forEach((item) => {
let com_data = item.com_data;
// 跳过非必填项
// 特殊字段验证：手机号
if (item.key === 'phone') {
// 判断输入框内容是否为空,为空的话获取验证码取消
if (com_data.is_sms_verification === '1' && !IsEmpty(com_data.form_value) && IsEmpty(com_data.form_value_code)) {
com_data.common_config.is_error = '1';
com_data.common_config.error_text = '短信验证码不能为空';
} else {
const { is_error = '0', error_text = '' } = ForminputHandlePhoneValidation(com_data);
com_data.common_config.is_error = is_error;
com_data.common_config.error_text = error_text;
}
} else {
if (com_data.is_required === '1') {
// 其他字段的格式验证
if (ForminputFieldCheckMap[item.key]) {
let field_data = ForminputFieldCheckMap[item.key];
if (['single-text', 'select', 'radio-btns'].includes(item.com_data.type)) {
field_data = ForminputFieldCheckMap[item.com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = ForminputGetFormatChecks(com_data, com_data.form_value, is_format, type);
com_data.common_config.is_error = is_error;
com_data.common_config.error_text = error_text;
}
};
}
/**
* 子表单处理逻辑
* 1. 检查子表单中是否有必填项
* 2. 验证子表单整体必填性
* 3. 处理子表单内各字段的验证
*/
if (item.key === 'subform') {
com_data = ForminputSubformDataCheck(com_data);
}
});
return data;
}
/*
* 子表单的校验逻辑
*/
function ForminputSubformDataCheck(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 = ForminputFilteredData(form_item);
form_data.forEach((data_item) => {
// 跳过非必填项
if (data_item.com_data.is_required !== '1') return;
// 执行字段验证
const checkConfig = ForminputFieldCheckMap[data_item.key];
if (checkConfig) {
// 特殊字段验证：手机号
if (data_item.key === 'phone') {
// 判断输入框内容是否为空,为空的话获取验证码取消
if (data_item.com_data.is_sms_verification === '1' && !IsEmpty(data_item.com_data.form_value) && IsEmpty(data_item.com_data.form_value_code)) {
data_item.com_data.common_config.is_error = '1';
data_item.com_data.common_config.error_text = '短信验证码不能为空';
} else {
const { is_error = '0', error_text = '' } = ForminputHandlePhoneValidation(data_item);
data_item.com_data.common_config.is_error = is_error;
data_item.com_data.common_config.error_text = error_text;
}
}
// 其他字段的格式验证
else if (ForminputFieldCheckMap[data_item.key]) {
let field_data = ForminputFieldCheckMap[data_item.key];
if (['single-text', 'select', 'radio-btns'].includes(data_item.com_data.type)) {
field_data = ForminputFieldCheckMap[data_item.com_data.type];
}
const { is_format, type } = field_data;
const { is_error = '0', error_text = '' } = ForminputGetFormatChecks(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;
}
/*
* 子表单显隐规则数据处理
*/
function ForminputFilteredData(children) {
const componentMap = new Map(children.map((item) => [item.id, item]));
// 取出所有设置显隐规则的组件
const list = children.filter((item) => ['single-text', 'select', 'radio-btns'].includes(item.key) && ['select', 'radio-btns'].includes(item.com_data.type) && item.com_data.show_hidden_list.length > 0);
const list_map = list.map((item) => ({ id: item.id, list: item.com_data.show_hidden_list }));
return children.filter((item) => {
// 优先判断是否启用
if (item.is_enable !== '1') return false;
if (list_map.length === 0) return true;
// 将所有的内容的组件进行筛选
const isShownByRule = list_map.some((list_item) => {
const targetComponent = componentMap.get(list_item.id);
// 判断显隐规则对应的组件是否存在
if (!targetComponent) return false;
return list_item.list.some(hidden_item => {
// 判断当前组件是否在显隐规则中，如果不在，直接显示，否则的话判断值是否存在
if (hidden_item.is_show.includes(item.id)) {
return targetComponent.com_data.form_value.includes(hidden_item.value);
} else {
return true;
}
});
});
return isShownByRule;
});
}
/*
* 提交数据处理逻辑
*/
function ForminputOnSubmitEvent() {
try {
// 校验所有的必填项和逻辑
const new_data = ForminputSubmitDataCheck();
// 处理所有的错误项
const data = new_data.find((item) => item.com_data.common_config.is_error === '1' || (item.key === 'subform' && item.com_data.data_list.some((item1) => item1.some(list_item => list_item.com_data.common_config.is_error === '1'))));
if (!IsEmpty(data)) {
let message = '';
if (data.key === 'subform') {
// 如果子表单外层为error直接显示名称出来
if (data.com_data.common_config.is_error == '1') {
message = `${data.com_data.title}「${data.com_data.common_config.error_text}」`;
} else {
// 如果是内部问题，让用户自己检查子表单内的填写
message = `请检查${data.com_data.title}内的填写`;
}
} else {
message = `${data.com_data.title}「${data.com_data.common_config.error_text}」`;
}
// 更新数据，将报错信息或者解除报错信息赋值给原数据
const old_data = [...$forminput_data_list];
const data_list = old_data.map(item => {
const match = new_data.find(el => el.id === item.id);
return { ...item, ...match };
});
data_list.forEach(item => {
if (item.key === 'subform') {
item.com_data.data_list.forEach((item1, index) => {
item1.forEach((list_item) => {
if (list_item.com_data.common_config.is_error === '1') {
ForminputErrorHandle(list_item, list_item.id + '-' + index);
}
});
});
} else {
if (item.com_data.common_config.is_error === '1') {
ForminputErrorHandle(item, item.id);
}
}
})
return { forminput_id: $forminput_id, status: 'error', submit_data: {}, message: message };
} else {
return ForminputSubmitDataParameterHandle();
}
} catch (error) {
return { forminput_id: $forminput_id, status: 'error', submit_data: {}, message: '数据错误'};
}
}
/*
* 提交数据时页面显示错误样式
*/
function ForminputErrorHandle(item, id) {
if ((['single-text', 'select', 'radio-btns'].includes(item.key) && ['radio-btns', 'select'].includes(item.com_data.type)) || (['checkbox', 'select-multi'].includes(item.key) && ['select-multi'].includes(item.com_data.type))) {
const selected_parent = $(`#${id}`).find('.am-selected-btn.am-btn');
if (!selected_parent.hasClass('forminput-data-item-error')) {
selected_parent.addClass('forminput-data-item-error');
}
} else if (item.key === 'address') {
const selected_parent = $(`#${id}`).find('.am-cascader-suffix .forminput-data-item-content');
if (!selected_parent.hasClass('forminput-data-item-error')) {
selected_parent.addClass('forminput-data-item-error');
}
} else {
const input_parent = $(`#${id}`).find('.forminput-input').parent();
if (!input_parent.hasClass('forminput-data-item-error')) {
input_parent.addClass('forminput-data-item-error');
}
}
}
/*
* 子表单内的数据提取
*/
function ForminputSubformDataExtraction(data_list) {
return data_list.map((subform_item) => {
const data = {};
// 子表单中每一行的数据显示
subform_item.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 (!ForminputFilterData.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] || '';
// 省市区中文名称
data[`${ subform_name }_province_name`] = subform_com_data.province_name || '';
data[`${ subform_name }_city_name`] = subform_com_data.city_name || ''
data[`${ subform_name }_county_name`] = subform_com_data.county_name || ''
} else if (item1.key ==='date-group') {
data[`${ subform_name }_start`] = subform_value[0] || '';
data[`${ subform_name }_end`] = subform_value[1] || '';
} else if (['checkbox', 'select-multi'].includes(item1.key)) {
data[subform_name] = subform_value;
if (subform_com_data.is_add_option == '1') {
data[`${ subform_name }_custom_option_list`] = subform_com_data?.custom_option_list || [];
}
} else {
data[subform_name] = subform_value;
}
}
});
return data;
});
}
// 过滤掉一些不需要提交的字段
const ForminputFilterData = ['video', 'img', 'auxiliary-line', 'position', 'rect', 'round', 'text', 'attachments'];
/*
* 表单提交参数处理
*/
function ForminputSubmitDataParameterHandle() {
try {
const submit_data = {};
const filteredDiyData = ForminputShowHiddenChange('data');
// 规整字段信息
filteredDiyData.forEach((item) => {
if (!ForminputFilterData.includes(item.key)) {
const name = IsEmpty(item.form_name) ? item.id : item.form_name;
const value = IsEmpty(item.com_data.form_value) ? '' : item.com_data.form_value;
const com_data = item.com_data;
if (item.key ==='subform') {
const data_list = com_data.data_list;
// 子表单中每一行的数据显示
submit_data[name] = ForminputSubformDataExtraction(data_list);
} else if (item.key ==='phone') {
submit_data[`${ name }`] = value || '';
// 判断是否需要发送短信验证码
if (com_data.is_sms_verification == '1') {
submit_data[`${ name }_verify`] = com_data?.form_value_code || '';
}
} else if (item.key ==='date-group') {
submit_data[`${ name }_start`] = value[0] || '';
submit_data[`${ name }_end`] = value[1] || '';
} else if (item.key == 'address') {
submit_data[`${ name }_province_id`] = value[0] || '';
submit_data[`${ name }_city_id`] = value[1] || '';
submit_data[`${ name }_county_id`] = value[2] || '';
// 省市区中文名称
submit_data[`${ name }_province_name`] = com_data.province_name || '';
submit_data[`${ name }_city_name`] = com_data.city_name || ''
submit_data[`${ name }_county_name`] = com_data.county_name || ''
// 判断类型是否包含详细地址
if (com_data.address_type == 'detailed') {
submit_data[`${ name }_address`] = com_data?.address || '';
}
} 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) {
submit_data[`${ name }_other_value`] = com_data?.other_value || '';
}
} else if (['checkbox', 'select-multi'].includes(item.key)) {
submit_data[name] = value;
if (com_data.is_add_option == '1') {
submit_data[`${ name }_custom_option_list`] = com_data?.custom_option_list || [];
}
} else {
submit_data[name] = value;
}
}
});
return { forminput_id: $forminput_id, status: 'success', submit_data: submit_data, message: ''};
} catch (error) {
return { forminput_id: $forminput_id, status: 'error', submit_data: {}, message: '数据错误'};
}
}
`+ ((item_data.com_data.is_limit_num == '1' && item_data.com_data.max_num > 0) ? `
`;
} else if (item_data.key == 'number') {
subform_html += ``+ item_data.com_data.form_value.length +`/` + item_data.com_data.max_num + `
` : ``) +`
`+ (item_data.com_data.is_display_money == '1' ? `
`;
} else if (item_data.key == 'multi-text') {
subform_html += `` + item_data.com_data.money_sign + `
` : ``) +`
`+ (item_data.com_data.format == 'percentage' ? `%` : ``) +`
`+ (item_data.com_data.is_limit_num == '1' && !IsEmpty(item_data.com_data.max_num) ? `
`;
} else if (item_data.key == 'pwd') {
subform_html += ``+ item_data.com_data.form_value.length +`/`+ item_data.com_data.max_num +`
` : '') +`
`+ (!IsEmpty(item_data.com_data.icon_name) ? `` : ``) +`
`;
} else if (item_data.key == 'date-group') {
subform_html += `
`+ (['option1', 'option2'].includes(item_data.com_data.date_type) ?
`
`
} else if (item_data.key == 'date') {
subform_html += `
-
` :
`
-
` ) +`
`
// 评分样式
const array = Array(item_data.com_data.total).fill(0);
for (let index1 = 0; index1 < array.length; index1++) {
if (item_data.com_data.score_type == 0) {
subform_html += ``
} else if (item_data.com_data.score_type == 1) {
subform_html += ``
} else if (item_data.com_data.score_type == 2) {
subform_html += ``
}
}
subform_html += `
`;
} else if (item_data.key == 'text') {
subform_html += ``+ item_data.com_data.form_value +`
`;
} else if (item_data.key == 'img') {
subform_html += ``;
if (IsEmpty(item_data.com_data.img_src)) {
subform_html += `
`;
} else {
subform_html += `
`
}
subform_html += `
`;
} else if (item_data.key == 'video') {
subform_html += `
`;
if (!IsEmpty(item_data.com_data.video)) {
subform_html += ``;
}
subform_html += `
`;
} else if (item_data.key == 'position') {
subform_html += `请在移动端打开表单进行定位
`+ item_data.com_data.file[0].original +`
`
} else {
subform_html += `暂无文件`
}
} else if (item_data.key == 'phone') {
subform_html += `
`
if (!IsEmpty(item_data.com_data.form_value)) {
subform_html += `
`
}
subform_html += `
`;
} else if (item_data.key == 'upload-video') {
subform_html += ``
item_data.com_data.form_value.forEach((form_value_item, form_value_index) => {
subform_html += ForminputFileUploadImg(form_value_index, form_value_item, subform_data, item_data.id, index);
});
subform_html += `
`
} else {
subform_html += `
`
if (!IsEmpty(item_data.com_data.form_value)) {
subform_html += `
`
}
subform_html += `
`;
} else if (item_data.key == 'upload-attachments') {
subform_html += ``
item_data.com_data.form_value.forEach((form_value_item, form_value_index) => {
subform_html += ForminputFileUploadVideo(form_value_index, form_value_item, subform_data, item_data.id, index);
});
subform_html += `
`
} else {
subform_html += `
`
if (!IsEmpty(item_data.com_data.form_value)) {
subform_html += `
`
}
subform_html += `
`;
} else if (['single-text', 'select', 'radio-btns'].includes(item_data.key) && ['radio-btns', 'select'].includes(item_data.com_data.type)) {
subform_html += ``
item_data.com_data.form_value.forEach((form_value_item, form_value_index) => {
subform_html += ForminputFileUploadAttachments(form_value_index, form_value_item, subform_data, item_data.id, index);
});
subform_html += `
`
} else {
subform_html += `- `;
subform_html += option_html;
subform_html += `
- `
subform_html += option_html;
subform_html += `
添加选项
`
}
subform_html += `