/**
+------------------------------------------------------------------------------------+
+ ayq-layui-form-designer(layui表单设计器)
+------------------------------------------------------------------------------------+
+ ayq-layui-form-designer v1.1.6
* MIT License By http://116.62.237.101:8009/
+ 作者：谁家没一个小强
+ 官方：
+ 时间：2021-06-23
+------------------------------------------------------------------------------------+
+ 版权声明：该版权完全归谁家没一个小强所有，可转载使用和学习，但请务必保留版权信息
+------------------------------------------------------------------------------------+
+ 本项目是一个基于layui表单组件的表单设计器
+ 1.本项目基于Layui、Jquery、Sortable
+ 2.项目已经基本实现了拖动布局，父子布局
+ 3.项目实现了大部分基于Layui的Form表单控件布局，包括输入框、编辑器、下拉、单选、单选组、多选组、日期、滑块、评分、轮播、图片、颜色选择、图片上传、文件上传
+ 4.表单数据的获取与回显,禁用全表单
+------------------------------------------------------------------------------------+
*/
layui.define(["layer", "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "carousel", "upload", "formField","numberInput","iconPicker", "cron","labelGeneration"]
, function (exports) {
var $ = layui.jquery
, layer = layui.layer
, laytpl = layui.laytpl
, setter = layui.cache
, element = layui.element
, slider = layui.slider
, laydate = layui.laydate
, rate = layui.rate
, colorpicker = layui.colorpicker
, carousel = layui.carousel
, form = layui.form
, upload = layui.upload
, formField = layui.formField
, hint = layui.hint
, numberInput = layui.numberInput
, iconPicker = layui.iconPicker
, cron = layui.cron
, labelGeneration = layui.labelGeneration
, iceEditorObjects = {}
, guid = function () {
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function") {
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
, lang = {
id: "标识",
label: "标题",
index: "序号",
tag: "表单类型",
tagIcon: '图标',
width: '宽度',
height: "高度",
span: '网格宽度',
placeholder: "placeholder",
defaultValue: "默认值",
dateDefaultValue:'默认时间',
labelWidth: "文本宽度",
clearable: "是否清楚",
prepend: "前缀",
append: "追加",
prefixIcon: '前缀图标',
suffixIcon: '后缀图标',
maxlength: "最大长度",
showWordLimit: "是否限制字符",
readonly: "只读",
disabled: "禁用",
required: "必填",
columns: "列数",
options: "选项",
switchValue: "默认值",
maxValue: "最大值",
minValue: "最小值",
dataMaxValue: "最大日期",
dataMinValue: "最小日期",
stepValue: "步长",
datetype: "日期类型",
dateformat: "日期格式",
half: "显示半星",
theme: "皮肤",
rateLength: "星星个数",
interval: "间隔毫秒",
startIndex: "开始位置",
full: "是否全屏",
arrow: "鼠标样式",
contents: "内容",
document: '帮助文档',
input: "输入框",
select: "下拉",
checkbox: "多选组",
radio: "单选组",
date: "日期",
editor: "iceEditor编辑器",
slider: "滑块",
image: "图片",
grid: "一行多列",
colorpicker: "颜色选择器",
textarea: "多行文本",
rate: "评分控件",
switch: "开关",
password: "密码框",
carousel: "轮播",
text: "显示文本",
uploadUrl: "上传路径",
urlPrefix: "上传前缀",
uploadData: '上传参数',
expression: "验证",
file: "文件",
autoplay: "自动切换",
anim: "切换方式",
arrow: "切换箭头",
tab:"tab选项卡",
tabHeaders:"tab标题",
isInput:"显示输入框",
dateRange:"日期范围",
dateRangeDefaultValue:"默认范围",
numberInput:"排序文本框",
iconPicker:"图标选择器",
iconPickerSearch:"是否搜索",
iconPickerPage:"是否分页",
iconPickerLimit:"显示数量",
iconPickerCellWidth:"图标宽度",
cron:"Cron表达式",
cronUrl:"运行路径",
labelGeneration:"标签组件",
isEnter:"是否回车",
buttonIcon:"按钮图标",
buttonType:"按钮类型",
isLabel:"显示标签",
buttonSize:"组件尺寸",
bottom:"按钮组件",
buttonVlaue:"按钮文字",
sign:"sign签名组件",
}
, expressions = [{text: '默认', value: ""}
, {text: '数字', value: 'number'}
, {text: '邮箱', value: 'email'}
, {text: '手机', value: 'phone'}
, {text: '身份证', value: 'identity'}
, {text: '日期', value: 'date'}
, {text: '网址', value: 'url'}
, {text: '密码', value: 'pass'}
], anims = [{text: '左右切换', value: 'default'}
, {text: '上下切换', value: 'updown'}
, {text: '渐隐渐显切换', value: 'fade'}
], arrows = [{text: '悬停显示', value: 'hover'}
, {text: '始终显示', value: 'always'}
, {text: '始终不显示', value: 'none'}]
, datetypes = [{text: '年选择器', value: 'year'}
, {text: '年月选择器', value: 'month'}
, {text: '时间选择器', value: 'time'}
, {text: '日期选择器', value: 'date'}
, {text: '日期时间选择器', value: 'datetime'}]
, buttonTypes = [{text: '原始', value: 'layui-btn-primary'}
, {text: '默认', value: ""}
, {text: '百搭', value: 'layui-btn-normal'}
, {text: '暖色', value: 'layui-btn-warm'}
, {text: '警告', value: ' layui-btn-danger'}]
, buttonSizes = [{text: '大型', value: 'layui-btn-lg'}
, {text: '默认', value: ""}
, {text: '小型', value: 'layui-btn-sm'}
, {text: '迷你', value: 'layui-btn-xs'}]
, dateformats = ["yyyy年MM月", "yyyy-MM-dd", "dd/MM/yyyy", "yyyyMMdd", "yyyy-MM-dd HH:mm:ss", "yyyy年MM月dd日 HH时mm分ss秒"]
, renderCommonProperty = function (json) {
var _html = '';
for (var key in json) {
if (key === 'index') {
continue;
}
if (key === 'tag' || key === 'id' || key === 'uploadUrl' || key === 'urlPrefix' || key === 'uploadData' || key === 'document' || key === 'interval' || key === 'cronUrl') { //只读字段
_html += '';
} else if (key === 'readonly' || key === 'disabled' || key === 'required' || key === 'half' || key === "text" || key === "autoplay"
|| key === "full" || key === "verification" || key === 'autoplay' || key === 'isInput' || key === 'expression' || key === 'iconPickerSearch'
|| key === 'iconPickerPage' || key === 'isEnter' || key === 'isLabel') {
var yes = "是";
var no = "否";
if (key === 'isInput') {
_html += '';
}
if (key === 'autoplay' || key === 'iconPickerSearch'|| key === 'iconPickerPage') {
_html += '';
}
if (key === 'readonly') {
yes = "只读";
no = "可写";
_html += '';
}
if (key === 'isEnter' || key === 'isLabel') {
_html += '';
}
if (key === 'disabled') {
yes = "隐藏";
no = "显示";
_html += '';
}
if (key === 'required') {
yes = "必填";
no = "可选";
_html += '';
}
if (key === 'expression') {
_html += '';
}
} else if (key === 'defaultValue' || key === 'label' || key === 'height' || key === 'placeholder' || key === 'document'
|| key === 'minValue' || key === 'maxValue' || key === 'stepValue' || key === 'rateLength'
|| key === 'iconPickerLimit' || key === 'iconPickerCellWidth'|| key === 'buttonVlaue') {
_html += '';
} else if (key === 'width' || key === 'labelWidth') {
_html += '';
} else if (key === 'switchValue') {
_html += '';
} else if (key === 'datetype') {
_html += '';
} else if (key === 'dateformat') {
_html += '';
} else if (key === 'contents') {
//处理
_html += '';
_html += ''.format(json.tag);
//选项
for (var i = 0; i < json.contents.length; i++) {
_html += '
'.format(i);
_html += '
';
_html += ' '.format(json.tag, json.contents[i]);
_html += '
';
_html += '
';
_html += ' ';
_html += ' ';
_html += '
';
_html += '
';
//向 .option .layui-inline 添加drag事件并且必须设在 contents-option-drag 中才能拖动
}
_html += '
'.format(json.tag);
//选项
for (var i = 0; i < json.options.length; i++) {
_html += '
';
//向 .option .layui-inline 添加drag事件并且必须设在 select-option-drag 中才能拖动
}
_html += '
'
, ''
, '
'
, '
'
, '
'
, '
';
_html += '
'.format(json.required ? 'layui-form-required' : '', json.label,json.labelWidth);
_html += '
'.format(json.tag + json.id,_disabledStyle);
_html += '
';
_html += ''.format(json.tag + json.id,_disabledClass,json.id,_required);
_html += '
';
_html += '
-
';
_html += '
';
_html += ''.format(json.tag + json.id,_disabledClass,json.id,_required);
_html += '
';
_html += '
';
_html += '
'.format(json.tag + json.id);
_html += '
';
for (var i = 0; i < json.options.length; i++) {
_html += '
'.format(json.options[i].value);
}
_html += '
';//end for div carousel-item
_html += '
'.format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += '
'.format(json.required ? 'layui-form-required' : '', json.label);
_html += '
';
_html += ''
.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
_html += '
';
_html += '
'.format(json.id, json.tag, selected ? 'active' : '', json.index,json.width);
_html += '
'.format(json.label,json.width);
_html += '
';
// if(selected){
// _html +='
';
// }
_html += '
';
var len = $(this).children().length;
if (len <= 12) {
//先删除元素
$("#formDesignerForm .layui-form-item .widget-view-action").remove();
$("#formDesignerForm .layui-form-item .widget-view-drag").remove();
// console.log("显示子节点");
// console.log($(this).children());
if ($('#widget-view-action')) {//已存在
$('#widget-view-action').remove();
}
$(this).children(len - 1).after(_draghtml1);
}
/* 向 拷贝 删除 按钮添加 click 动作 */
that.addCopyDeleteClick();
//重新渲染
form.render();
if (options.data.length != 0) {
for (var i = 0; i < options.data.length ; i++) {
if (options.data[i].tag === 'grid') {
for (var j = 0; j < options.data[i].columns.length; j++) {
for (var k = 0; k < options.data[i].columns[j].list.length; k++) {
if (options.data[i].columns[j].list[k].tag === 'select') {
$('#' + options.data[i].columns[j].list[k].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].columns[j].list[k].width)});
}
}
}
} else {
if (options.data[i].tag === 'select') {
$('#' + options.data[i].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].width)});
}
}
}
}
});
};
/* 给字段属性绑定事件 实现双向绑定？*/
Class.prototype.bindPropertyEvent = function (_json) {
var that = this
, options = that.config;
if (options.data === undefined) {
return;
}
if (typeof (options.data) === 'string') {
options.data = JSON.parse(options.data);
}
var _property = $('#columnProperty');
var _columns = _property.find('input,textarea,select,checkbox');
var _json = options.selectItem;
//没有可以选择的
if (_json === undefined) {
return;
}
laydate.render({
elem: '#dataMaxValue' + _json.tag + _json.id,
format: 'yyyy-MM-dd',
btns: ['now','confirm'],
value: _json.dataMaxValue,
done: function(value, date, endDate){
_json.dataMaxValue = value;
that.components[_json.tag].update(_json);
}
});
laydate.render({
elem: '#dataMinValue' + _json.tag + _json.id,
format: 'yyyy-MM-dd',
btns: ['now','confirm'],
value: _json.dataMinValue,
done: function(value, date, endDate){
_json.dataMinValue = value;
that.components[_json.tag].update(_json);
}
});
laydate.render({
elem: '#dateDefaultValue' + _json.tag + _json.id,
type: _json.datetype,
format: _json.dateformat,
value: _json.dateDefaultValue,
done: function(value, date, endDate){
_json.dateDefaultValue = value;
that.components[_json.tag].update(_json);
}
});
laydate.render({
elem: '#dateRangeDefaultValue' + _json.tag + _json.id,
type: _json.datetype,
format: _json.dateformat,
value: _json.dateRangeDefaultValue,
range:"-",
done: function(value, date, endDate){
_json.dateRangeDefaultValue = value;
that.components[_json.tag].update(_json);
}
});
iconPicker.render({
// 选择器，推荐使用input
elem: '#' + _json.tag + _json.id + "property",
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false，默认true
search: true,
// 是否开启分页：true/false，默认true
page: true,
// 每页显示数量，默认12
limit: 12,
// 每个图标格子的宽度：'43px'或'20%'
cellWidth: '43px',
// 点击回调
click: function (data) {
_json.buttonIcon = data.icon;
that.components[_json.tag].update(_json);
},
// 渲染成功后的回调
success: function(d) {
//console.log(d);
}
});
iconPicker.checkIcon(_json.tag + _json.id + "property", '');
if (_json.width !== undefined) {
//定义初始值
slider.render({
elem: '#width',
value: _json.width.replace("%",""), //初始值
min: 20,
max: 100,
step: 1,
input:true,
change: function(value){
_json.width = value + "%";
that.components[_json.tag].update(_json);
}
});
}
if (_json.labelWidth !== undefined) {
//定义初始值
slider.render({
elem: '#labelWidth',
value: _json.labelWidth, //初始值
min: 80,
max: 300,
step: 1,
input:true,
change: function(value){
_json.labelWidth = value;
that.components[_json.tag].update(_json);
}
});
}
form.on('checkbox', function (data) {
//data.elem.closest('.layui-form-item')
if (_json.tag === 'checkbox') {
var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-checkbox").index(data.othis[0]));
if ($(data.othis[0]).parent().parent().parent().attr("id") === 'checkbox') {
_index = parseInt($(data.othis[0]).parent().parent().attr("data-index"));
}
for (var i = 0; i < _json.options.length; i++) {
if (i === _index) {
_json.options[i].checked = data.elem.checked;
break;
}
}
that.components[_json.tag].update(_json);
}
});
form.on('radio', function (data) {
//data.elem.closest('.layui-form-item')
if (_json.tag === 'radio') {
var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-radio").index(data.othis[0]));
if ($(data.othis[0]).parent().parent().parent().attr("id") === 'radio') {
_index = parseInt($(data.othis[0]).parent().parent().attr("data-index"));
}
for (var i = 0; i < _json.options.length; i++) {
if (i === _index) {
_json.options[i].checked = true;
continue;
}
_json.options[i].checked = false;
}
that.components[_json.tag].update(_json);
} else if (_json.tag === 'select') {
var _index = parseInt(data.elem.closest('.layui-form-item').dataset.index);
for (var i = 0; i < _json.options.length; i++) {
if (i === _index) {
_json.options[i].checked = true;
continue;
}
_json.options[i].checked = false;
}
that.components[_json.tag].update(_json);
}
});
form.on('select', function (data) {
var _key = data.elem.name;
var _value = parseInt(data.value);
var _json = options.selectItem;
if (_key === 'columns') {
var columnCount = _json[_key].length;
var nullJson = {
span: 12,
list: []
};
if (_value > columnCount) {
for (var i = columnCount + 1; i <= _value; i++) {
_json[_key].splice(i, 0, nullJson);
}
} else {
_json[_key].splice(_value, columnCount);
}
that.renderForm();
} else if (_key === 'dateformat') {
if (_json.tag === 'date') {
var _html = ''.format('dateDefaultValue' + _json.tag + _json.id);
$('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
$('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
_json.dateformat = data.value;
var dateClass = laydate.render({
elem: '#dateDefaultValue' + _json.tag + _json.id,
type: _json.datetype,
format: _json.dateformat,
value: new Date(),
done: function(value, date, endDate){
_json.dateDefaultValue = value;
that.components[_json.tag].update(_json);
}
});
_json.dateDefaultValue = dateClass.config.elem[0].innerText;
that.components[_json.tag].update(_json);
}
if (_json.tag === 'dateRange') {
var _html = ''.format('dateDefaultValue' + _json.tag + _json.id);
$('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
$('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
_json.dateformat = data.value;
var _v = layui.util.toDateString(new Date(), _json.dateformat) + " - " + layui.util.toDateString(new Date(), _json.dateformat);
laydate.render({
elem: '#dateRangeDefaultValue' + _json.tag + _json.id,
type: _json.datetype,
format: _json.dateformat,
value: _v,
range:"-",
done: function(value, date, endDate){
_json.dateRangeDefaultValue = value;
that.components[_json.tag].update(_json);
}
});
_json.dateRangeDefaultValue = _v;
that.components[_json.tag].update(_json);
}
} else if (_key === 'datetype') {
if (_json.tag === 'date') {
var _html = ''.format('dateDefaultValue' + _json.tag + _json.id);
$('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
$('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
_json.datetype = data.value;
var dateClass = laydate.render({
elem: '#dateDefaultValue' + _json.tag + _json.id,
type: _json.datetype,
format: _json.dateformat,
value: new Date(),
done: function(value, date, endDate){
_json.dateDefaultValue = value;
that.components[_json.tag].update(_json);
}
});
_json.dateDefaultValue = dateClass.config.elem[0].innerText;
that.components[_json.tag].update(_json);
}
if (_json.tag === 'dateRange') {
var _html = ''.format('dateDefaultValue' + _json.tag + _json.id);
$('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
$('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
_json.datetype = data.value;
laydate.render({
elem: '#dateRangeDefaultValue' + _json.tag + _json.id,
type: _json.datetype,
format: _json.dateformat,
value: _json.dateRangeDefaultValue,
range:"-",
done: function(value, date, endDate){
_json.dateRangeDefaultValue = value;
that.components[_json.tag].update(_json);
}
});
that.components[_json.tag].update(_json);
}
}else if (_key === 'required') {
_json.expression = data.value;
that.components[_json.tag].update(_json);
}else if (_key === 'expression') {
_json.expression = data.value;
that.components[_json.tag].update(_json);
} else if (_key === 'anim' || _key === 'arrow') {
_json[data.elem.name] = data.value;
that.components[_json.tag].update(_json);
}else if (_key === 'buttonType') {
_json.buttonType = data.value;
that.components[_json.tag].update(_json);
}else if (_key === 'buttonSize') {
_json.buttonSize = data.value;
that.components[_json.tag].update(_json);
}
});
form.on('switch', function (data) {
var _key = data.elem.name;
var _value = data.elem.checked ? true : false;
if (_key === 'readonly' || _key == 'disabled' || _key === 'required' || _key === 'half' || _key === 'text' || _key === 'switchValue' || _key === 'isInput'
|| _key == 'iconPickerSearch' || _key === 'iconPickerPage' || _key === 'isEnter'|| _key === 'isLabel') {
_json[_key] = _value;
that.components[_json.tag].update(_json);//局部更新
}
});
//options 的添加事件
if (_json.hasOwnProperty('options')) {
$('#select-option-add').on('click', function () {
//添加html
_json.options.splice(_json.options.length + 1, 0, {text: 'option', value: 'value', checked: false});
var _htmloption = '';
_htmloption += '';
$('#columnProperty .select-options').last().after(_htmloption);
_html = '';
if (_json.tag === 'checkbox') {
//同步到设计视图checkbox
_html += ''.format(_json.tag, 'option');
$('#' + _json.id + ' .layui-input-block').append(_html);
} else if (_json.tag === 'radio') {
//同步到设计视图radio
_html += ''.format(_json.tag, 'option');
$('#' + _json.id + ' .layui-input-block').append(_html);
} else if (_json.tag === 'carousel') {
}
if (_json.tag === 'checkbox') {
form.render('checkbox');
} else if (_json.tag === 'radio') {
form.render('radio');
} else if (_json.tag == 'carousel') {
that.components[_json.tag].update(_json);
form.render('radio');
carousel.render({
elem: '#' + item.tag + item.id,
width: item.width,//设置容器宽度
arrow: item.arrow, //始终显示箭头
//anim: 'updown' //切换动画方式
});
} else if (_json.tag == 'select') {
form.render('select');
form.render('radio');
}
});
//委托监听先关闭在增加 click
$(document).off('click', '#columnProperty .select-option-delete').on('click', '#columnProperty .select-option-delete', function (e) {
e.preventDefault();
e.stopPropagation();
//从数据源 options.data 中删除节点
if (_json.options.length <= 1) {
layer.msg('已达到最低选项，不能继续删除');
return;
}
var _index = $(this).closest('.layui-form-item')[0].dataset.index;
if (_index !== undefined) {
_json.options.splice(_index, 1);//删除此节点
}
var checkedDefual = true;
for (var i = 0; i < _json.options.length; i++) {
if (_json.options[i].checked) {
vv = false
}
}
if (checkedDefual) {
_json.options[0].checked = true;
}
//从html中删除节点 改成全部重绘
// $(this).closest('.layui-form-item').remove()
$('#' + _json.tag).empty();
//删除所有的选项
//选项
var _html = '';
for (var i = 0; i < _json.options.length; i++) {
_html += '';
}
$('#' + _json.tag).append(_html);
//更新设计区节点
that.components[_json.tag].update(_json);
if (_json.tag === 'checkbox') {
form.render('checkbox');
} else if (_json.tag === 'radio') {
form.render('radio');
} else if (_json.tag == 'select') {
form.render('select');
form.render('radio');
}
//向 .option .layui-inline 添加drag事件并且必须设在 select-option-drag 中才能拖动
});
}
$(document).off('click', '.select-options input[type=checkbox]').on('click', '.select-options input[type=checkbox]', function (e) {
// console.log(e);
//判断是否选中
//找到 id=key 下的 option值
var _options = [];
//遍历options 的值
$('#columnProperty .select-options').each(function () {
_options.push({
text: $(this).find('input[name=select-text]').val(),
value: $(this).find('input[name=select-value]').val()
});
// console.log($(this));
});
//_json.options 节点值替换为 _options 值
_json.options = JSON.parse(JSON.stringify(_options));
});
//属性模块的 input keyup
$(document).off('keyup', '#columnProperty .layui-input').on('keyup', '#columnProperty .layui-input', function () {
if ($(this).attr("name") !== undefined) {
//去改变值
//改变json的值
var _key = $(this).attr("name");
var _value = $(this).val();
var _json = options.selectItem;
if (_key === 'id') {
return;
}
if (_key === 'label' || _key === 'width' || _key === 'interval'
|| _key === 'iconPickerLimit' || _key === 'iconPickerCellWidth'
|| _key === 'buttonVlaue') {
_json[_key] = _value;
that.components[_json.tag].update(_json);//局部更新
}
if (_key === 'uploadUrl' || _key === 'uploadData' || _key === 'urlPrefix' ||_key === 'cronUrl') {
_json[_key] = _value;
}
if (_key === 'placeholder') {
_json[_key] = _value;
$('#' + _json.id).find('.layui-input').attr('placeholder', _value);
}
if (_key === 'height') {
_json[_key] = _value;
if (_json.tag === 'editor') {
that.components[_json.tag].update(_json);//局部更新
}
if (_json.tag === 'carousel') {
_json[_key] = _value;
that.components[_json.tag].update(_json);//局部更新
}
}
if (_key === 'defaultValue') {
_json[_key] = _value;
if (_json.tag === 'slider') {
var resultNumber = that.replaceNumber(_value);
_json[_key] = resultNumber;
$(this).val(resultNumber);
slider.render({
elem: '#' + _json.tag + _json.id,
value: _json.defaultValue, //初始值
min: _json.minValue,
max: _json.maxValue,
step: _json.stepValue,
disabled: _json.disabled
});
} else if (_json.tag === 'rate') {
rate.render({
elem: '#' + _json.tag + _json.id,
value: _json.defaultValue,
text: _json.text,
length: _json.rateLength,
half: _json.half,
readonly: _json.readonly
});
} else if (_json.tag == 'textarea') {
$('#' + _json.id).find('.layui-textarea').text(_value);
} else if (_json.tag == 'colorpicker') {
that.components[_json.tag].update(_json);//局部更新
} else if (_json.tag == 'iconPicker') {
that.components[_json.tag].update(_json);//局部更新
} else if (_json.tag == 'numberInput') {
var resultNumber = that.replaceNumber(_value);
_json[_key] = resultNumber;
$(this).val(resultNumber);
that.components[_json.tag].update(_json);//局部更新
} else {
$('#' + _json.id).find('.layui-input').val(_value);
}
}
if (_key === "minValue" || _key === "maxValue" || _key === "stepValue") {
var resultNumber = that.replaceNumber(_value);
_json[_key] = resultNumber;
$(this).val(resultNumber);
if (_json.tag === 'slider') {
slider.render({
elem: '#' + _json.tag + _json.id,
value: _json.defaultValue, //初始值
min: _json.minValue,
max: _json.maxValue,
step: _json.stepValue,
disabled: _json.disabled
});
}else if (_json.tag == 'numberInput') {
that.components[_json.tag].update(_json);//局部更新
}
}
if (_key === 'rateLength') {
_json[_key] = _value;
if (_json.tag === 'rate') {
rate.render({
elem: '#' + _json.tag + _json.id,
value: _json.defaultValue,
text: _json.text,
length: _json.rateLength,
half: _json.half,
readonly: _json.readonly
});
}
}
if (_key === 'document') {
_json[_key] = _value;
}
if (_key === 'readonly') {
_json[_key] = _value;
$('#' + _json.id).find('.layui-input').attr('readonly', _value);
}
if (_key === 'select-text' || _key === 'select-value' || _key === 'radio-text' || _key === 'radio-value' || _key === 'checkbox-text' || _key === 'checkbox-value') {
//找到 id=key 下的 option值
var _index = parseInt($(this).parent().parent().attr("data-index"));
if (_key === 'select-text' || _key === 'radio-text' || _key === 'checkbox-text') {
_json.options[_index].text = $(this).val();
} else {
_json.options[_index].value = $(this).val();
}
that.components[_json.tag].update(_json);//局部更新
}
if (_key === 'carousel-text' || _key === 'carousel-value') {
//找到 id=key 下的 option值
var _options = [];
//遍历options 的值
$('#columnProperty .select-options').each(function () {
_options.push({
text: $(this).find('input[name=carousel-text]').val(),
value: $(this).find('input[name=carousel-value]').val()
});
// console.log($(this));
});
//_json.options 节点值替换为 _options 值
_json.options = JSON.parse(JSON.stringify(_options));
that.components[_json.tag].update(_json);//局部更新
}
}
});
$(document).off('blur', '#columnProperty .layui-input').on('blur', '#columnProperty .layui-input', function () {
if ($(this).attr("name") !== undefined) {
//改变json的值
var _key = $(this).attr("name");
var _value = $(this).val();
var _json = options.selectItem;
var _oldid = _json.id;
if (_key === 'id' && _value !== _oldid) {//标识的更改
//检测id是否存在重复
var _checkid = that.findJsonItem(options.data, _value);
if (_checkid === undefined) {
_json[_key] = _value;
that.renderForm();
} else {
//提示层
layer.msg('ID已经存在');
}
}
}
});
//预览
}
//递归赋值
Class.prototype.replaceNumber = function (value) {
value = value.replace(/[^\d]/g,'');
if(''!=value){
value = parseInt(value);
}
return value;
}
/* 加入copy选项删除 */
Class.prototype.addCopyDeleteClick = function () {
var that = this
, options = that.config;
if (options.data === undefined) {
return;
}
if (typeof (options.data) === 'string') {
options.data = JSON.parse(options.data);
}
//复制当前节点
$('#formDesignerForm .layui-form-item .widget-view-action .layui-icon-file').on('click', function (e) {
e.stopPropagation();
//在json中插入
if (options.data === undefined) {
return;
}
if (typeof (options.data) === 'string') {
options.data = JSON.parse(options.data);
}
var _id = document.elementFromPoint(e.pageX, e.pageY).parentElement.parentElement.dataset.id;
if (_id !== undefined) {
options.selectItem = that.copyJsonAfterItem(options.data, _id);
}
that.renderForm();
});
$('#formDesignerForm .layui-form-item .layui-icon-delete').on('click', function (e) {
e.stopPropagation();
//获取当前组件的组件id
var _id = document.elementFromPoint(e.pageX, e.pageY).parentElement.parentElement.dataset.id;
if (_id !== undefined) {
options.selectItem = that.deleteJsonItem(options.data, _id);
delete iceEditorObjects["editor" + _id]
}
//document.elementFromPoint(e.pageX,e.pageY).parentElement.parentElement.parentElement.dataset 获取父grid的信息
that.renderForm();
// console.log('click layui-icon layui-icon-delete');
});
};
/* 触发 grid 的 sortablejs 事件*/
Class.prototype.bindGridSortEvent = function (json) {
var that = this
, options = that.config;
var objs = $('#' + json.id + ' .widget-col-list');
//遍历他下面的节点
for (var i = 0; i < objs.length; i++) {
var el = objs[i];
var ops = {
group: {
name: 'formgroup'
},
handle: '.widget-view-drag',
ghostClass: "ghost",
animation: 150,
onAdd: function (evt) {
var parentItem = JSON.parse(JSON.stringify(that.findJsonItem(options.data, evt.item.parentElement.parentElement.dataset.id)));
var index = evt.newIndex;
var colIndex = evt.item.parentElement.dataset.index;
if (evt.item.dataset.id != undefined) {
//表示从其他地方移动过来
var _fromItem = JSON.parse(JSON.stringify(that.findJsonItem(options.data, evt.item.dataset.id)));
var _oldid = _fromItem.id;
_fromItem.id = that.autoId(_fromItem.tag);
_fromItem.index = index;
parentItem.columns[colIndex].list.splice(index + 1, 0, _fromItem);
that.findAndCopyJson(options.data,parentItem,evt.item.parentElement.parentElement.dataset.id);
that.deleteJsonItem(options.data, _oldid);
} else {
/* 向指定目标放入数据 splice */
var tag = evt.item.dataset.tag;
_id = that.autoId(tag);
var _newitem = that.components[tag].jsonData(_id, evt.newIndex);
_newitem.index = index;
parentItem.columns[colIndex].list.splice(index + 1, 0, _newitem);
that.findAndCopyJson(options.data,parentItem,evt.item.parentElement.parentElement.dataset.id);
options.selectItem = _newitem;
}
that.renderForm();
},
//拖动结束
onEnd: function (evt) {
//console.log(evt);
}};
var gridSortable = Sortable.create(el,ops);
}
};
//递归赋值
Class.prototype.findAndCopyJson = function (json,parentItem,id) {
var that = this;
for (var i = 0; i < json.length; i++) {
if (json[i].id === id) {
json[i] = parentItem;
} else {
if (json[i].tag === 'grid') {
for (var j = 0; j < json[i].columns.length; j++) {
if (json[i].columns[j].list.length > 0) {
that.findAndCopyJson(json[i].columns[j].list,parentItem,id);
}
}
}
}
}
}
//渲染视图
Class.prototype.render = function () {
var that = this
, options = that.config;
options.elem = $(options.elem);
options.id = options.id || options.elem.attr('id') || that.index;
//cache 模式
/* 输入型组件 开始*/
var _listhtml = ""
_listhtml += '{0}
'.format(formField.c1.name);
_listhtml += '';
$.each(formField.c1.list
, function (index
, item) {
_listhtml += '
'.format(item
, lang[item]);
});
_listhtml += '
{0}
'.format(formField.c2.name);
_listhtml += '';
/* 选择型组件 开始*/
$.each(formField.c2.list
, function (index
, item) {
_listhtml += '
'.format(item
, lang[item]);
});
_listhtml += '
{0}
'.format(formField.c3.name);
_listhtml += '';
/* 布局型组件 开始*/
$.each(formField.c3.list
, function (index
, item) {
_listhtml += '
'.format(item
, lang[item]);
});
_listhtml += '
{0}
'.format(formField.c4.name);
_listhtml += '';
/* 选择型组件 开始*/
$.each(formField.c4.list
, function (index
, item) {
_listhtml += '
'.format(item
, lang[item]);
});
_listhtml += '
{0}
'.format(formField.c5.name);
_listhtml += '';
/* 选择型组件 开始*/
$.each(formField.c5.list
, function (index
, item) {
_listhtml += '
'.format(item
, lang[item]);
});
_listhtml += '
' +
'
' +
'
' +
'
' + res.data.title + '
' +
'
'
, '| ' + file.name + ' | '
, '' + (file.size / 1014).toFixed(1) + 'kb | '
, ' | '
, ''
, ''
, ''
, ' | '
, '
'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
, done: function (res, index, upload) { //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
}
, allDone: function (obj) { //多文件上传完毕后的状态回调
console.log(obj)
}
, error: function (index, upload) { //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
, progress: function (n, elem, e, index) {
element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
}
});
};
/* 生成 Html 代码 */
Class.prototype.generateHtml = function (jsondata, elem) {
var that = this
, options = that.config;
$.each(jsondata, function (index, item) {
elem.append(that.components[item.tag].render(item, true));
if (item.tag === 'grid') {
$.each(item.columns, function (index2, item2) {
//获取当前的 DOM 对象
var elem2 = elem.find('#' + item.id + ' .widget-col-list').filter('.column' + index2);
if (item2.list.length > 0) {
that.generateHtml(item2.list, elem2);
}
});
} else if (item.tag === 'slider') {
//定义初始值
options.htmlCode.script += ['slider.render({',
, 'elem: "#' + item.tag + item.id + '" ,'
, 'value: ' + item.defaultValue + ','
, 'min: ' + item.minValue + ','
, 'max: ' + item.maxValue + ','
, 'step: ' + item.stepValue + ','
, 'input:' + item.isInput + ','
, 'change: function(value){'
, '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);'
, ' }'
, '});'].join('');
} else if (item.tag === 'date') {
options.htmlCode.script += ['laydate.render({'
, 'elem: "#' + item.tag + item.id + '" ,'
, 'type:"' + item.datetype + '",'
, 'format:"' + item.dateformat + '",'
, 'value:"' + item.dateDefaultValue + '",'
, 'min:"' + item.dataMinValue + '",'
, 'max:"' + item.dataMaxValue + '"});'].join('');
} else if (item.tag === 'rate') {
options.htmlCode.script += ['rate.render({'
, 'elem: "#' + item.tag + item.id + '" ,'
, 'value: ' + item.defaultValue + ','
, 'text: ' + item.text + ','
, 'length: ' + item.rateLength + ','
, 'half: ' + item.half + ','
, 'readonly: ' + item.readonly + ','
, 'choose: function(value){'
, '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);'
, '}'
, '});'].join('');
} else if (item.tag === 'colorpicker') {
options.htmlCode.script += ['colorpicker.render({'
, 'elem: "#' + item.tag + item.id + '"'
, ',format: \'rgb\''
, ',predefine: true'
, ',alpha: true'
, ',done: function (color) {'
, '$("#' + item.id + '").find("input[name="'+ item.id + '"]").val(color);'
, '}'
, '});'].join('');
} else if (item.tag === 'editor') {
options.htmlCode.script += ['var e = new ice.editor('+ item.tag + item.id +');'
,'e.width=' + item.width + '; //宽度'
,'e.height=' + item.height + '; //高度'
,'e.uploadUrl=' + item.uploadUrl + '; //上传文件路径'
,'e.disabled=' + item.disabled + ';'
,'e.create();'].join('');
} else if (item.tag === 'carousel') {
options.htmlCode.script += ['carousel.render({'
, 'elem: "#' + item.tag + item.id + '" '
, ',width: "' + item.width + '"'
, ',height: "' + item.height + '"'
, ',arrow: "' + item.arrow + '"'
, ',interval: "' + item.interval + '"'
, ',anim: "' + item.anim + '"'
, ',autoplay: "' + item.autoplay + '"'
, '});'].join('');
} else if (item.tag === 'numberInput') {
options.htmlCode.script += [' numberInput.render({'
,'elem:"#' + item.tag + item.id + '"'
,'});var _width = ' + item.width.replace(/[^\d]/g,'') + ';'
,'if(""!=_width){_width = 100 - parseInt(_width);}'
,'$("#' + item.id + ' .layui-input-block .layui-number-input-btn").css("right",_width + "%");'
,'if (item.disabled) { $("#' + item.id + ' .layui-input-block .layui-number-input-btn").css("z-index","-1");}'].join('');
} else if (item.tag === 'labelGeneration') {
options.htmlCode.script += ['labelGeneration.render({'
,'elem:"#' + item.tag + item.id + '",'
,'data:' + item.dateDefaultValue + ','
,'isEnter:' + item.isEnter + ''
,'});'].join('');
} else if (item.tag === 'iconPicker') {
options.htmlCode.script += ['iconPicker.render({'
,'elem:"#' + item.tag + item.id + '",'
,'type:"fontClass",'
,'search:' + item.iconPickerSearch + ''
,'page:' + item.iconPickerPage + ''
,'limit:' + item.iconPickerLimit + ''
,'cellWidth:' + item.iconPickerCellWidth + ''
,' click: function (data) {},'
,'success: function(d) {}'
,'});'
,'iconPicker.checkIcon(' + item.tag + item.id + ',"");'].join('');
} else if (item.tag === 'dateRange') {
options.htmlCode.script += ['laydate.render({'
,'elem:"#' + item.tag + item.id + '",'
,'type:' + item.datetype + ','
,'format:' + item.dateformat + ''
,'min:' + item.dataMinValue + ''
,'max:' + item.dataMaxValue + ''
,'range:["#start-' + item.tag + item.id + '", "#end-' + item.tag + item.id + '"]'
,'});'].join('');
} else if (item.tag === 'cron' && !item.disabled) {
options.htmlCode.script += ['cron.render({'
,'elem:"#' + item.tag + item.id + '-button",'
,'url:' + item.cronUrl + ','
,'done: function (cronStr) {'
,'$("#' + item.tag + item.id + '").val(cronStr);'
,'},'
,'});'].join('');
}else if (item.tag === 'file') {
options.htmlCode.script += ['upload.render({'
, 'elem: "#' + item.tag + item.id + '" '
, ', url: "' + item.uploadUrl + '"'
, ' ,elemList: $("#list-' + item.id + '")'
, ',accept: "file"'
, ',multiple: true'
, ',number: 3'
, ',auto: false'
, ',bindAction: "#listAction-' + item.id + '"'
, ',choose: function(obj){'
, 'var that = this;'
, 'var files = this.files = obj.pushFile();'
, 'obj.preview(function(index, file, result){'
, 'var tr = $([""'
, ',"| "+ file.name +" | "'
, ',""+ (file.size/1014).toFixed(1) +"kb | "'
, '," | "'
, ',"","",""," | "'
, ',"
"].join(""));'
, 'tr.find(".demo-reload").on("click", function(){obj.upload(index, file);});'
, 'tr.find(".demo-delete").on("click", function(){delete files[index];tr.remove();uploadListIns.config.elem.next()[0].value = ""; });'
, 'that.elemList.append(tr);'
, 'element.render("progress");}'
, ',done: function(res, index, upload)'
, '{var that = this;if(res.code == 0){var tr = that.elemList.find("tr#upload-"+ index),tds = tr.children();tds.eq(3).html("");delete this.files[index];return;}this.error(index, upload);}'
, ',allDone: function(obj){console.log(obj)}'
, ',error: function(index, upload){var that = this;var tr = that.elemList.find("tr#upload-"+ index),'
, 'tds = tr.children();tds.eq(3).find(".demo-reload").removeClass("layui-hide");}'
, ',progress: function(n, elem, e, index){element.progress("progress-demo-"+ index, n + "%");}'
, '});'].join('');
} else if (item.tag === 'image') {
options.htmlCode.script += ['upload.render({'
, 'elem: "#' + item.tag + item.id + '" '
, ', url: "' + item.uploadUrl + '"'
, ', multiple: true'
, ', before: function (obj) {'
, 'layer.msg("图片上传中...", {'
, 'icon: 16,'
, 'shade: 0.01,'
, 'time: 0'
, '})'
, '}'
, ', done: function (res) {'
, 'layer.close(layer.msg());'
, '$("#uploader-list-' + item.id + '").append('
, '\'
'
, '
\'+ res.data.title+\'
'
, '
';
var len = $('#' + options.selectItem.id).children().length;
if ($('#widget-view-action')) {//已存在
$('#widget-view-action').remove();
}
$('#' + options.selectItem.id).children(len - 1).after(_draghtml1);
$('#formDesignerForm .layui-form-item').removeClass('active');
//给当前元素增加class
$('#' + options.selectItem.id).addClass('active');
//设置当前选择项目的拷贝删除的事件
//显示当前的属性
that.components[options.selectItem.tag].property(options.selectItem);
if (options.selectItem.tag === "select" || options.selectItem.tag === "checkbox"
|| options.selectItem.tag === "radio" || options.selectItem.tag === "carousel") {
var sortable = Sortable.create(document.getElementById(options.selectItem.tag), {
group: {
name: 'propertygroup',
},
ghostClass: "ghost",
handle: '.select-option-drag',
dataIdAttr: 'data-index',
animation: 150,
onEnd: function (evt) {
if (options.selectItem === undefined) {
return;
}
var indexArray = sortable.toArray();
var newJson = [];
for (var i = 0; i < indexArray.length; i++) {
newJson.push(options.selectItem.options[indexArray[i]]);
}
options.selectItem.options = newJson;
//that.renderForm();
that.components[options.selectItem.tag].update(options.selectItem);
}
});
}
that.bindPropertyEvent(options.selectItem);
}
that.addClick();
/* 向 拷贝 删除 按钮添加 click 动作 */
that.addCopyDeleteClick();
form.render();
if (options.data.length != 0) {
for (var i = 0; i < options.data.length ; i++) {
if (options.data[i].tag === 'grid') {
for (var j = 0; j < options.data[i].columns.length; j++) {
for (var k = 0; k < options.data[i].columns[j].list.length; k++) {
if (options.data[i].columns[j].list[k].tag === 'select') {
$('#' + options.data[i].columns[j].list[k].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].columns[j].list[k].width)});
}
}
}
} else {
if (options.data[i].tag === 'select') {
$('#' + options.data[i].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].width)});
}
}
}
}
};
/* 渲染预览框 */
Class.prototype.renderPreview = function () {
var that = this
, options = that.config;
};
Class.prototype.reload = function (id
, options) {
var that = this;
options = options || {};//如果是空的话，就赋值 {}
that.render();
}
//核心入口 初始化一个 regionSelect 类
formDesigner.render = function (options) {
var defaults = {
formStyle: false,//是否方框
};
options = $.extend(defaults, options);
var ins = new Class(options);
return thisIns.call(ins);
};
exports('formDesigner'
, formDesigner);
}); 
'.format(json.data);
}
_html += '