/* * @Descripttion : * @Author : liuzhifang * @Date : 2022-06-15 11:19:09 * @LastEditors : QianFox Team * @LastEditTime : 2024-08-13 09:21:59 */ // 添加字段 $('.select-field-box .field-item').on('click', function () { let $this = $(this), $diyContainer = $('#previewDiyForm'), $formContainer = $('#diyFormSet'), type = $this.attr('data-type'), diyId = 'diyid' + new Date().getTime(), fieldHtml = '', itemHtml = ''; switch (type) { case 'inputtext': fieldHtml = _inputPreviewHtml(); break; case 'textarea': fieldHtml = _textareaPreviewHtml(); break; case 'radio': fieldHtml = _radioPreviewHtml(); break; case 'checkbox': fieldHtml = _checkboxPreviewHtml(); break; case 'select': fieldHtml = _selectPreviewHtml(); break; case 'switch': fieldHtml = _switchPreviewHtml(); break; case 'datepicker': case 'timepicker': case 'datetimepicker': fieldHtml = _datetimepickerPreviewHtml(type); break; case 'image': fieldHtml = _imagePreviewHtml(); break; case 'color': fieldHtml = _colorPreviewHtml(); break; } switch (type) { case 'inputtext': itemHtml = _inputDiyHtml(); break; case 'textarea': itemHtml = _textareaDiyHtml(); break; case 'radio': itemHtml = _radioDiyHtml(); break; case 'checkbox': itemHtml = _checkboxDiyHtml(); break; case 'select': itemHtml = _selectDiyHtml(); break; case 'switch': itemHtml = _switchDiyHtml(); break; case 'datepicker': case 'timepicker': case 'datetimepicker': itemHtml = _datetimepickerDiyHtml(type); break; case 'image': itemHtml = _imageDiyHtml(); break; case 'color': itemHtml = _colorDiyHtml(); break; } if (fieldHtml && itemHtml) { $diyContainer.append(`'); $formContainer.append( [ `', ].join('') ); $(`#${diyId}`).slideDown(); $(`.foxui-drag-item[data-diyid="${diyId}"]`).slideDown(); } }); // 修改label $(document).on('input', '#diyFormSet .form-label', function () { let $this = $(this), value = $this.val(), id = $this.closest('.foxui-drag-item').attr('data-diyid'); $(`#${id} .form-label`).text(value); }); // 修改 placeholder $(document).on('input', '#diyFormSet .form-input-placeholder', function () { let $this = $(this), value = $this.val(), id = $this.closest('.foxui-drag-item').attr('data-diyid'); $(`#${id} .form-input-placeholder`).attr('placeholder', value); }); // 修改是否必填 $(document).on('click', '#diyFormSet .form-label-require', function () { let $this = $(this), isChecked = $this.is('.is-checked'), id = $this.closest('.foxui-drag-item').attr('data-diyid'), $label = $(`#${id} .form-label`); isChecked ? $label.addClass('foxui-required') : $label.removeClass('foxui-required'); }); // 删除选项 $(document).on('click', '#diyFormSet .delete-option-btn', function () { let $this = $(this), $option = $this.closest('.foxui-input-group'), index = $option.index(), id = $this.closest('.foxui-drag-item').attr('data-diyid'), len = $(`#${id}`).find('.form-option').length; $(`#${id}`) .find('.form-option') .eq(index) .fadeOut(function () { $(this).remove(); }); $option.slideUp(function () { $(this).remove(); }); if (len <= 2) { $('#diyFormSet').find('.delete-option-btn').attr('disabled', true).addClass('is-disabled'); } }); // 添加选项 $(document).on('click', '#diyFormSet .add-option-btn', function () { let $this = $(this), $optionContainer = $this.parent().siblings('.option-box'), $option = $optionContainer.find('.foxui-input-group'), type = $this.attr('data-type'), len = $option.length, id = $this.closest('.foxui-drag-item').attr('data-diyid'), html = '', optionHtml = ''; if (len < 2) { $option.find('.delete-option-btn').attr('disabled', false).removeClass('is-disabled'); } if (type === 'radio') { html = [ '

', '

', '

选项

', '', '

', '', '

', ].join(''); optionHtml = [ '', ].join(''); } else if (type === 'checkbox') { html = [ '

', '

', '

选项

', '', '

', '', '

', ].join(''); optionHtml = [ '', ].join(''); } else if (type === 'select') { html = [ '

', '

', '

选项

', '', '

', '', '

', ].join(''); optionHtml = [''].join(''); } $optionContainer.append(html); $optionContainer.find('.foxui-input-group:last-child').slideDown(); $(`#${id}`).find('.form-option-group').append(optionHtml); $(`#${id} .form-option-group .form-option:last-child`).fadeIn(); }); // 修改选项 $(document).on('input', '#diyFormSet .option-box .form-input-option', function () { let $this = $(this), index = $this.closest('.foxui-input-group').index(), value = $this.val(), id = $this.closest('.foxui-drag-item').attr('data-diyid'); $(`#${id} .form-option`).eq(index).find('.option-label').text(value); }); // 修改图片数量 $(document).on('input', '#diyFormSet .image-count', function () { let $this = $(this), count = $this.val(), id = $this.closest('.foxui-drag-item').attr('data-diyid'); $(`#${id} .foxui-images`).attr('data-count', count); }); // input 预览 html function _inputPreviewHtml() { return [ '

', '单行文本：', '', '

', ].join(''); } // input 表单设置 html function _inputDiyHtml() { return [ '

', '', '

', '

', '单行文本', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

提示语

', '', '

', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // textarea 预览 html function _textareaPreviewHtml() { return [ '

', '多行文本：', '

', '', '

', '

', ].join(''); } // textarea 表单设置 html function _textareaDiyHtml() { return [ '

', '', '

', '

', '多行文本', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

提示语

', '', '

', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // radio 预览 html function _radioPreviewHtml() { return [ '

', '单选：', '

', '

', '', '', '', '', '选项', '

', '

', '', '', '', '', '选项', '

', '

', '

', ].join(''); } // radio 表单设置 html function _radioDiyHtml() { return [ '

', '', '

', '

', '单选', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

', '

选项

', '', '

', '', '

', '

', '

', '

选项

', '', '

', '', '

', '

', '

', '', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // checkbox 预览 html function _checkboxPreviewHtml() { return [ '

', '多选项：', '

', '

', '', '', '', '', '选项', '

', '

', '', '', '', '', '选项', '

', '

', '

', ].join(''); } // checkbox 表单设置 html function _checkboxDiyHtml() { return [ '

', '', '

', '

', '多选', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

', '

选项

', '', '

', '', '

', '

', '

', '

选项

', '', '

', '', '

', '

', '

', '', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // select 预览 html function _selectPreviewHtml() { return [ '

', '下拉框：', '

', '

', '', '

', '', '

', '

', ].join(''); } // select 表单设置 html function _selectDiyHtml() { return [ '

', '', '

', '

', '下拉框', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

提示语

', '', '

', '

', '

', '

', '

', '

选项

', '', '

', '', '

', '

', '

', '

选项

', '', '

', '', '

', '

', '

', '', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // switch 预览 html function _switchPreviewHtml() { return [ '

', 'Switch开关：', '

', '

', '', '', '

', '

', '

', ].join(''); } // switch 表单设置 html function _switchDiyHtml() { return [ '

', '', '

', '

', 'Switch开关', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // datepicker、timepicker、datetimepicker 预览 html function _datetimepickerPreviewHtml(type) { return [ '

', `${type === 'datepicker' ? '日期' : type === 'timepicker' ? '时间' : '日期时间'}：`, `

`, '

', ``, '', '', '

', '

', '

', ].join(''); } // datepicker、timepicker、datetimepicker 表单设置 html function _datetimepickerDiyHtml(type) { return [ '

', '', '

', '

', `${type === 'datepicker' ? '日期' : type === 'timepicker' ? '时间' : type === 'datetimepicker' ? '日期时间' : ''}`, '

', '

', '

', '

', '

标题

', ``, '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

提示语

', '', '

', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // image 预览 html function _imagePreviewHtml() { return [ '

', '图片文件：', '

', '

', '

', '

', '', '添加图片', '

', '

', '

', '

', '

' ].join(''); } // image 表单设置 html function _imageDiyHtml() { return [ '

', '', '

', '

', '图片文件', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

上传图片数量

', '', '

', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // color 预览 html function _colorPreviewHtml() { return [ '

', '颜色选择：', '

', '

', '', '', '', '', '

', '

', '

', ].join(''); } // color 表单设置 html function _colorDiyHtml() { return [ '

', '', '

', '

', '颜色选择', '

', '

', '

', '

', '

标题

', '', '

', '

', '

', '

', '

', '

', '

说明

', '', '

', '

', '

', '

', '

', '

', '', '', '

', '必填', '

', '

', '

', '', '

', ].join(''); } // 滚动定位 let $selectFieldBox = $('.select-field-box'), sHeight = $selectFieldBox.height(); $('.diy_form_edit_content .foxui-col-sm-16 .section').on('scroll', function () { let scollTop = $(this).scrollTop(); if (scollTop >= 260) { $selectFieldBox.addClass('is-fixed'); $selectFieldBox.closest('.section-main').css('height', `${sHeight}px`); } else { $selectFieldBox.removeClass('is-fixed'); $selectFieldBox.closest('.section-main').css('height', `auto`); } }); // 拖拽排序 $(document).on('dragend', '.foxui-drag.foxui-drag-container', function () { let diyidList = [], htmlList = []; $('#diyFormSet .foxui-drag-item').each(function () { diyidList.push($(this).attr('data-diyid')); }); $('#previewDiyForm .item').each(function () { htmlList.push(this); }); // 清空 $('#previewDiyForm').empty(); // 追加节点 diyidList.forEach(id => { htmlList.forEach(html => { if ($(html).attr('id') === id) { $('#previewDiyForm').append(html); return false; } }); }); });