(function ($, zou) {
|
"use strict";
|
|
$.lrCustmerFormDesigner = {
|
init: function ($self, op) {
|
var dfop = {
|
data: [{// 选项卡数据
|
id: zou.newGuid(),
|
title: '主表信息',
|
columns: []
|
}]
|
}
|
$.extend(dfop, op || {});
|
dfop.id = $self.attr('id');
|
$self[0].zCustmerFormDesigner = { dfop: dfop };
|
$self.addClass('z-custmerform-designer-layout');
|
var _html = '';
|
_html += '<div class="custmerform-designer-layout-left" id="lr_custmerform_compont_list_' + dfop.id + '"></div>';
|
|
_html += '<div class="z-custmerform-designer-layout-center">';
|
_html += '<div class="z-custmerform-designer-layout-header">';
|
_html += '<div class="z-custmerform-designer-tabs" id="lr_custmerform_designer_tabs_' + dfop.id + '">';
|
_html += '<ul class="nav nav-tabs z-form-tab">';
|
_html += '</ul>';
|
_html += '</div>';
|
_html += '</div>';
|
|
_html += '<div class="z-custmerform-designer-layout-area" id="lr_custmerform_designer_layout_area_' + dfop.id + '" ></div>';
|
_html += '<div class="z-custmerform-designer-layout-footer">';
|
//_html += '<div class="z-custmerform-designer-layout-footer-item" id="lr_custmerform_preview_btn_' + dfop.id + '"><i class="fa fa-eye"></i><span>预览表单</span></div>';
|
_html += '</div>';
|
_html += '<div class="z-custmerform-designer-layout-center-bg"><img src="/Scripts/Form/images/tableform.png" /></div>';
|
|
_html += '</div>';
|
|
_html += '<div class="z-custmerform-designer-layout-right" id="lr_custmerform_compont_property_' + dfop.id + '"></div>';
|
|
$self.html(_html);
|
$.lrCustmerFormDesigner.bind($self);
|
$.lrCustmerFormDesigner.compontinit($self);
|
$.lrCustmerFormDesigner.compontbind($self);
|
|
$.lrCustmerFormDesigner.renderTabs($self);
|
$.lrCustmerFormDesigner.renderComponts($self);
|
},
|
// 绑定表单设计器的全局事件
|
bind: function ($self) {
|
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
// 优化滚动条
|
$('#lr_custmerform_compont_list_' + dfop.id).mCustomScrollbar({
|
theme: "minimal-dark"
|
});
|
$('#lr_custmerform_designer_tabs_' + dfop.id).mCustomScrollbar({
|
axis: "x",
|
theme: "minimal-dark"
|
});
|
$('#lr_custmerform_designer_layout_area_' + dfop.id).mCustomScrollbar({
|
theme: "minimal-dark"
|
});
|
$('#lr_custmerform_compont_property_' + dfop.id).mCustomScrollbar({
|
theme: "minimal-dark"
|
});
|
$('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container')[0].dfop = dfop;
|
|
// 预览表单
|
$self.find('#lr_custmerform_preview_btn_' + dfop.id).on('click', function () {
|
$.lrCustmerFormDesigner.saveComponts($self);
|
var url = "/FormDesigner/PreviewForm?key=" + window.keyValue;
|
layer.open({
|
type: 2,
|
title: '预览表单',
|
shadeClose: true,
|
shade: 0.4,
|
area: ['80%', '80%'],
|
content: url
|
});
|
});
|
},
|
// 组件初始化
|
compontinit: function ($self) {// 组件初始化
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
var $compontList = $self.find('#lr_custmerform_compont_list_' + dfop.id + ' .mCSB_container');
|
$.each($.formComponents, function (i, component) {
|
var $component = component.init();
|
$compontList.append($component);
|
});
|
$compontList.find('.z-custmerform-component').draggable({
|
connectToSortable: '#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container',
|
helper: "clone",
|
revert: "invalid"
|
});
|
|
$('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container').sortable({
|
opacity: 0.4,
|
delay: 300,
|
cursor: 'move',
|
placeholder: "ui-state-highlight",
|
stop: function (event, ui) {
|
var $compont = $(ui.item[0]);
|
var componttype = $compont.attr('data-type');
|
if (!!componttype) {//如果是第一次移入，需要对单元项进行初始化处理
|
$compont.addClass('z-compont-item').css({ 'width': '100%' });
|
$compont.removeClass('z-custmerform-component');
|
$compont.removeAttr('data-type');
|
$.formComponents[componttype].render($compont);
|
$compont[0].dfop.id = zou.newGuid();
|
$compont.trigger("click");
|
}
|
else {
|
$compont.trigger("click");
|
}
|
},
|
start: function (event, ui) {
|
$self.find(".z-custmerform-designer-layout-center-bg").hide();
|
var $highlight = $self.find(".ui-state-highlight");
|
$highlight.html('拖放控件到这里');
|
var $compont = $(ui.item[0]);
|
var componttype = $compont.attr('data-type');
|
if (!componttype) {
|
$highlight.css({ width: ((100 / $compont[0].dfop.proportion) + "%") });
|
}
|
},
|
out: function (event, ui) {
|
if (ui.helper != null) {
|
var $componts = $('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item');
|
if ($componts.length <= 1) {
|
if ($componts.length === 1) {
|
if ($componts.find('.z-compont-value').length === 0) {
|
$(".z-custmerform-designer-layout-center-bg").show();
|
}
|
}
|
else {
|
$(".z-custmerform-designer-layout-center-bg").show();
|
}
|
}
|
}
|
}
|
});
|
},
|
// 组件事件注册
|
compontbind: function ($self) {
|
$self.delegate('.z-compont-item', 'click', function () {
|
var $this = $(this);
|
if (!$this.hasClass('active')) {
|
$('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item').removeClass('active');
|
$this.addClass('active');
|
if ($('.z-custmerform-designer-layout').css('padding-right') === '0px') {
|
$('.z-custmerform-designer-layout').animate({ 'padding-right': '240px', speed: 2000 });
|
$('.z-custmerform-designer-layout-right').animate({ right: 0, speed: 2000 });
|
}
|
setTimeout(function () {
|
$.formComponents[$this[0].dfop.type].property($this);
|
}, 150);
|
}
|
});
|
$self.delegate('.z-compont-remove i', 'click', function () {
|
var $compont = $(this).parents('.z-compont-item');
|
$compont.remove();
|
if ($('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item').length === 0) {
|
$('.z-custmerform-designer-layout-right').animate({ right: '-240px', speed: 2000 });
|
$('.z-custmerform-designer-layout').animate({ 'padding-right': '0px', speed: 2000 });
|
$(".z-custmerform-designer-layout-center-bg").show();
|
}
|
else {
|
$('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item').eq(0).trigger('click');
|
}
|
});
|
},
|
// 渲染选项卡
|
renderTabs: function ($self) {// 渲染选项卡
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
var $tabs = $('#lr_custmerform_designer_tabs_' + dfop.id + ' ul');
|
var tabsLength = dfop.data.length;
|
var index = 0;
|
$tabs.html("");
|
for (var i = 0; i < tabsLength; i++) {
|
var tabItem = dfop.data[i];
|
$tabs.append('<li data-value="' + tabItem.id + '"><a>' + tabItem.text + '</a></li>');
|
if (dfop._currentTabId === tabItem.id) {
|
index = i;
|
}
|
}
|
// 获取当前选项卡的组件数据并渲染
|
if (dfop._currentTabId !== dfop.data[index].id) {
|
dfop._currentTabId = dfop.data[index].id;
|
dfop._currentComponts = dfop.data[index].columns;
|
dfop._isRenderComponts = true;
|
$.lrCustmerFormDesigner.renderComponts($self);
|
}
|
|
if (tabsLength <= 1) {
|
$self.find('.z-custmerform-designer-layout-center').removeClass('hasTab');
|
}
|
else {
|
$self.find('.z-custmerform-designer-layout-center').addClass('hasTab');
|
$tabs.find('li').eq(index).addClass('active');
|
}
|
},
|
// 渲染数据
|
renderData: function ($self) {
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
var $tabs = $('#lr_custmerform_designer_tabs_' + dfop.id + ' ul');
|
var tabsLength = 1;
|
$tabs.html("");
|
for (var i = 0; i < tabsLength; i++) {
|
var tabItem = dfop.data[i];
|
$tabs.append('<li data-value="' + tabItem.id + '"><a>' + tabItem.text + '</a></li>');
|
if (i === 0) {
|
dfop._currentTabId = tabItem.id;
|
dfop._currentComponts = dfop.data[0].columns;
|
dfop._isRenderComponts = true;
|
$.lrCustmerFormDesigner.renderComponts($self);
|
}
|
}
|
if (tabsLength <= 1) {
|
$self.find('.z-custmerform-designer-layout-center').removeClass('hasTab');
|
}
|
else {
|
$self.find('.z-custmerform-designer-layout-center').addClass('hasTab');
|
$tabs.find('li').eq(0).addClass('active');
|
}
|
},
|
// 保存当前选项卡的组件数据
|
saveComponts: function ($self) {
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
var columns = [];
|
var compontsLayout = $('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container');
|
compontsLayout.find('.z-compont-item').each(function () {
|
var column = $(this)[0].dfop;
|
columns.push(column);
|
});
|
for (var i = 0, l = dfop.data.length; i < l; i++) {
|
if (dfop.data[i].id === dfop._currentTabId) {
|
dfop.data[i].columns = columns;
|
break;
|
}
|
}
|
},
|
// 渲染组件
|
renderComponts: function ($self) {
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
if (dfop._isRenderComponts) {
|
var compontsLayout = $('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container');
|
compontsLayout.html('');
|
//console.log(JSON.stringify(dfop._currentComponts));
|
if (dfop._currentComponts.length > 0) {
|
$self.find(".z-custmerform-designer-layout-center-bg").hide();
|
for (var i = 0, l = dfop._currentComponts.length; i < l; i++) {
|
var compontItem = dfop._currentComponts[i];
|
var $column = $('<div class="z-compont-item" ></div>');
|
$column[0].dfop = compontItem;
|
$column.css({ 'width': 100 / parseInt(compontItem.proportion) + '%' });
|
$.formComponents[compontItem.type].render($column);
|
compontsLayout.append($column);
|
|
if (i === 0) {
|
$column.trigger("click");
|
}
|
}
|
}
|
else {
|
$('.z-custmerform-designer-layout-right').animate({ right: '-240px', speed: 2000 });
|
$('.z-custmerform-designer-layout').animate({ 'padding-right': '0px', speed: 2000 });
|
$(".z-custmerform-designer-layout-center-bg").show();
|
}
|
dfop._isRenderComponts = false;
|
}
|
},
|
// 判定所有组件数据是否输入完整（主要是数据库绑定信息）
|
validData: function ($self) {
|
var dfop = $self[0].zCustmerFormDesigner.dfop;
|
var _data = {};
|
var res = true;
|
for (var i = 0, l = dfop.data.length; i < l; i++) {
|
for (var j = 0, jl = dfop.data[i].columns.length; j < jl; j++) {
|
if (dfop.data[i].columns[j].type !== 'label') {
|
var table = dfop.data[i].columns[j].table;
|
var field = dfop.data[i].columns[j].field;
|
var title = dfop.data[i].columns[j].title;
|
if (table !== '' && field !== '' && (table !== undefined && field !== undefined)) {
|
//console.log(JSON.stringify(_data));
|
if (!!_data[table + '_' + field]) {
|
layer.alert('【' + title + '】绑定数据表字段与【' + _data[table + '_' + field] + '】重复！');
|
res = false;
|
}
|
else {
|
_data[table + '_' + field] = title;
|
}
|
}
|
else {
|
if (dfop.data[i].columns[j].type === 'girdtable') {
|
if (table === '' || table === undefined) {
|
layer.alert('【' + title + '】请绑定数据表！');
|
res = false;
|
}
|
} else {
|
if (table === '' || table === undefined) {
|
layer.alert('【' + title + '】请绑定数据表！');
|
res = false;
|
}
|
else if (field === '' || field === undefined) {
|
layer.alert('【' + title + '】请绑定数据字段！');
|
res = false;
|
}
|
}
|
}
|
}
|
}
|
}
|
return res;
|
}
|
};
|
|
//对外暴露接口
|
$.fn.lrCustmerFormDesigner = function (type, op) {
|
var $this = $(this);
|
if (!$this.attr('id')) {
|
return false;
|
}
|
var dfop;
|
switch (type) {
|
// 初始化设计器
|
case "init":
|
$.lrCustmerFormDesigner.init($this, op);
|
break;
|
// 判定所有组件数据是否输入完整（主要是数据库绑定信息）
|
case 'valid':
|
$.lrCustmerFormDesigner.saveComponts($this);
|
return $.lrCustmerFormDesigner.validData($this);
|
case "get":
|
$.lrCustmerFormDesigner.saveComponts($this);
|
dfop = $this[0].zCustmerFormDesigner.dfop;
|
var $json = dfop.data[0].columns;
|
$.each($json, function (i, item) {
|
if (item != null && item != undefined && item.type === "girdtable") {//指标
|
dfop.data[0].columns.splice(i, 1);
|
json.children = item;
|
}
|
});
|
json.maindata = dfop.data;
|
return json;
|
case "set":
|
dfop = $this[0].zCustmerFormDesigner.dfop;
|
dfop.data = op.data;
|
$.lrCustmerFormDesigner.renderData($this);
|
break;
|
}
|
};
|
|
})(jQuery, top.zou);
|
