(function ($, zou) {
|
"use strict";
|
|
//数据验证下拉
|
var verifyDatalist = [
|
{ id: "", text: "==请选择==" },
|
{ id: "NotNull", text: "不能为空" },
|
{ id: "Num", text: "必须为数字" },
|
{ id: "NumOrNull", text: "数字或空" },
|
{ id: "Email", text: "必须为E-mail格式" },
|
{ id: "EmailOrNull", text: "E-mail格式或空" },
|
{ id: "EnglishStr", text: "必须为字符串" },
|
{ id: "EnglishStrOrNull", text: "字符串或空" },
|
{ id: "Phone", text: "必须电话格式" },
|
{ id: "PhoneOrNull", text: "电话格式或者空" },
|
{ id: "Fax", text: "必须为传真格式" },
|
{ id: "Mobile", text: "必须为手机格式" },
|
{ id: "MobileOrNull", text: "手机格式或者空" },
|
{ id: "MobileOrPhone", text: "电话格式或手机格式" },
|
{ id: "MobileOrPhoneOrNull", text: "电话格式或手机格式或空" },
|
{ id: "Uri", text: "必须为网址格式" },
|
{ id: "UriOrNull", text: "网址格式或空" }
|
];
|
|
var verifyDatalist2 = [
|
{ id: "NotNull", text: "不能为空" }
|
];
|
|
//行占比下拉
|
var proportionList = [
|
{ id: "1", text: "1" },
|
{ id: "2", text: "1/2" },
|
{ id: "3", text: "1/3" }
|
];
|
|
//数据来源下拉
|
var dataSourceTypeList = [
|
{ id: "1", text: "数据字典" },
|
{ id: "2", text: "物理地址" }
|
];
|
|
var dataformatList = [
|
{ id: "0", text: "仅日期" },
|
{ id: "1", text: "日期和时间" },
|
{ id: "2", text: "仅月份" }
|
];
|
|
$.formComponents = {
|
text: {//文本框
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="text" ><i class="fa fa-italic"></i>文本框</div>');
|
return $html;
|
},
|
|
render: function ($component) {
|
$component[0].dfop = $component[0].dfop || {
|
title: '文本框',
|
type: "text",
|
table: '',
|
field: "",
|
proportion: '1',
|
verify: ''
|
};
|
$component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "文本框" }));
|
},
|
|
property: function ($component) {
|
var $html = initComponentPropertyHtml($component, verifyDatalist);
|
}
|
},
|
textarea: {//文本区
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="textarea" ><i class="fa fa-align-justify"></i>文本域</div>');
|
return $html;
|
},
|
|
render: function ($component) {
|
$component[0].dfop = $component[0].dfop || {
|
title: '文本域',
|
type: "textarea",
|
table: '',
|
field: "",
|
proportion: '1',
|
verify: '',
|
height: '90'
|
};
|
$component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "文本域" }));
|
},
|
property: function ($component) {
|
var $html = initComponentPropertyHtml($component, verifyDatalist);
|
}
|
},
|
radio: {//单选框
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="radio" ><i class="fa fa-circle-thin"></i>单选框</div>');
|
return $html;
|
},
|
render: function ($component) {
|
$component[0].dfop = $component[0].dfop || {
|
title: '单选项',
|
type: "radio",
|
table: '',
|
field: "",
|
proportion: '1',
|
dataSourceType: '1', // 1数据字典 2 物理地址
|
dataSource: '',
|
dataSourceUrl: ''
|
};
|
$component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "单选项" }));
|
},
|
property: function ($component) {
|
var dfop = $component[0].dfop;
|
var $html = initComponentPropertyHtml($component);
|
var html = '';
|
html += '<div class="z-component-title">数据来源</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_dataSourceType"></select></div>';
|
html += '<div class="z-component-title dataItemCode">数据字典</div>';
|
html += '<div class="z-component-control dataItemCode"><select class="form-control" id="component_dataSource"></select></div>';
|
html += '<div class="z-component-title dataItemUrl">URL数据源</div>';
|
html += '<div class="z-component-control dataItemUrl"><input id="component_dataSourceUrl" type="text" class="form-control" placeholder="URL数据源"/></div>';
|
$html.append(html);
|
createDatasource(dfop);
|
// 数据源地址设置
|
$html.find('#component_dataSourceUrl').val(dfop.dataSourceUrl);
|
$html.find('#component_dataSourceUrl').keyup(function () {
|
var value = $(this).val();
|
dfop.dataSourceUrl = value;
|
});
|
}
|
},
|
checkbox: {//多选框
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="checkbox" ><i class="fa fa-square-o"></i>多选框</div>');
|
return $html;
|
},
|
render: function ($component) {
|
$component[0].dfop = $component[0].dfop || {
|
title: '多选框',
|
type: "checkbox",
|
table: '',
|
field: "",
|
proportion: '1',
|
dataSourceType: '1', // 1数据字典 2 物理地址
|
dataSource: '',
|
dataSourceUrl: ''
|
};
|
$component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "多选项" }));
|
},
|
property: function ($component) {
|
var dfop = $component[0].dfop;
|
var $html = initComponentPropertyHtml($component);
|
var html = '';
|
html += '<div class="z-component-title">数据来源</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_dataSourceType"></select></div>';
|
html += '<div class="z-component-title dataItemCode">数据字典</div>';
|
html += '<div class="z-component-control dataItemCode"><select class="form-control" id="component_dataSource"></select></div>';
|
html += '<div class="z-component-title dataItemUrl">URL数据源</div>';
|
html += '<div class="z-component-control dataItemUrl"><input id="component_dataSourceUrl" type="text" class="form-control" placeholder="URL数据源"/></div>';
|
$html.append(html);
|
createDatasource(dfop);
|
// 数据源地址设置
|
$html.find('#component_dataSourceUrl').val(dfop.dataSourceUrl);
|
$html.find('#component_dataSourceUrl').keyup(function () {
|
var value = $(this).val();
|
dfop.dataSourceUrl = value;
|
});
|
}
|
},
|
combox: {//下拉框
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="combox" ><i class="fa fa-caret-square-o-right"></i>下拉框</div>');
|
return $html;
|
},
|
render: function ($component) {
|
// console.log(JSON.stringify($component));
|
|
$component[0].dfop = $component[0].dfop || {
|
title: '下拉框',
|
type: "combox",
|
table: '',
|
field: "",
|
proportion: '1',
|
dataSourceType: '1', // 1数据字典 2 物理地址
|
dataSource: '',
|
dataSourceUrl: ''
|
};
|
$component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "下拉框" }));
|
},
|
property: function ($component) {
|
var dfop = $component[0].dfop;
|
var $html = initComponentPropertyHtml($component);
|
var html = '';
|
html += '<div class="z-component-title">数据来源</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_dataSourceType"></select></div>';
|
html += '<div class="z-component-title dataItemCode">数据字典</div>';
|
html += '<div class="z-component-control dataItemCode"><select class="form-control" id="component_dataSource"></select></div>';
|
html += '<div class="z-component-title dataItemUrl">URL数据源</div>';
|
html += '<div class="z-component-control dataItemUrl"><input id="component_dataSourceUrl" type="text" class="form-control" placeholder="URL数据源"/></div>';
|
$html.append(html);
|
createDatasource(dfop);
|
// 数据源地址设置
|
$html.find('#component_dataSourceUrl').val(dfop.dataSourceUrl);
|
$html.find('#component_dataSourceUrl').keyup(function () {
|
var value = $(this).val();
|
dfop.dataSourceUrl = value;
|
});
|
}
|
},
|
datetime: {//日期框
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="datetime" ><i class="fa fa-calendar"></i>日期框</div>');
|
return $html;
|
},
|
render: function ($component) {
|
$component[0].dfop = $component[0].dfop || {
|
title: '日期框',
|
type: "datetime",
|
table: '',
|
field: "",
|
proportion: '1',
|
verify: '',
|
dateformat: '0'
|
};
|
$component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: '日期框' }));
|
},
|
property: function ($component) {
|
var dfop = $component[0].dfop;
|
var $html = initComponentPropertyHtml($component, verifyDatalist2);
|
var html = '';
|
html += '<div class="z-component-title">日期格式</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_dateformat"></select></div>';
|
$html.append(html);
|
|
// 日期格式
|
var $dateformat = $(document).find("#component_dateformat");
|
$.each(dataformatList, function (index, obj) {
|
if (dfop.dateformat === obj.id)//设置默认选项
|
$dateformat.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
|
else
|
$dateformat.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
|
});
|
|
|
// 日期格式选择
|
$('#component_dateformat').on('change', function () {
|
var format = $('#component_dateformat').find("option:selected").val();
|
dfop.dateformat = format;
|
});
|
}
|
},
|
girdtable: {
|
init: function () {
|
var $html = $('<div class="z-custmerform-component" data-type="girdtable" ><i class="fa fa-table"></i>编辑表格</div>');
|
return $html;
|
},
|
render: function ($component) {
|
$component[0].dfop = $component[0].dfop || {
|
title: '编辑表格',
|
table: '',
|
type: "girdtable",
|
proportion: '1',
|
icon: "fa fa-table",
|
minheight: 400, // 表格默认的行数
|
columns: []//设置的字段数据
|
};
|
|
$component.html(getComponentRowHtml({ name: '编辑表格', text: '编辑表格' }));
|
},
|
property: function ($component) {
|
var $html = initGridTable($component);
|
|
}
|
}
|
}
|
|
// 获取组件行显示html
|
function getComponentRowHtml(data) {
|
var html = '<div class="z-compont-title"><span>' + data.name + '</span><div class="z-compont-remove"><i title="移除组件" class="del fa fa-close"></i></div></div><div class="z-compont-value">' + data.text + '</div>';
|
return html;
|
};
|
// 设置组件公共属性设置html
|
function initComponentPropertyHtml($component) {
|
var dfop = $component[0].dfop;
|
var $html = $(".z-custmerform-designer-layout-right .mCSB_container");
|
var html = '';
|
html += '<div class="z-component-title">绑定表</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_table"></select></div>';
|
html += '<div class="z-component-title">绑定字段</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_field"></select></div>';
|
html += '<div class="z-component-title">组件标题</div>';
|
html += '<div class="z-component-control"><input id="component_title" type="text" class="form-control" placeholder="必填项"/></div>';
|
html += '<div class="z-component-title">字段验证</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_verify"></select></div>';
|
html += '<div class="z-component-title">所占比例</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_proportion"></select></div>';
|
$html.html(html);
|
|
// 标题设置
|
$html.find('#component_title').val(dfop.title);
|
$html.find('#component_title').keyup(function () {
|
var value = $(this).val();
|
$component.find('.z-compont-title span').text(value);
|
dfop.title = value;
|
});
|
//数据表设置
|
var $table = $(document).find("#component_table");
|
var url = "/FormDesigner/FindPrimaryTable?keyValue=" + window.keyValue;
|
window.$.ajax({
|
url: url,
|
type: "get",
|
dataType: "json",
|
success: function (data) {
|
$.each(data, function (index, obj) {
|
if (dfop.table === obj.Value)//设置默认选项
|
$table.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
|
else
|
$table.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
|
});
|
},
|
complete: function () {
|
var table = $('#component_table').find("option:selected").val();
|
initColumn(table, dfop.field);
|
dfop.table = table;
|
}
|
});
|
|
// 验证初始化
|
var $verify = $(document).find("#component_verify");
|
$.each(verifyDatalist, function (index, obj) {
|
if (dfop.verify === obj.id)//设置默认选项
|
$verify.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
|
else
|
$verify.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
|
});
|
|
// 所占行比例初始化
|
var $proportion = $(document).find("#component_proportion");
|
$.each(proportionList, function (index, obj) {
|
if (dfop.proportion === obj.id)//设置默认选项
|
$proportion.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
|
else
|
$proportion.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
|
});
|
|
// 数据表选择
|
$('#component_table').on('change', function () {
|
var table = $('#component_table').find("option:selected").val();
|
initColumn(table, dfop.field);
|
dfop.table = table;
|
});
|
|
// 数据字段选择
|
$('#component_field').on('change', function () {
|
var field = $('#component_field').find("option:selected").val();
|
dfop.field = field;
|
});
|
|
// 字段验证选择
|
$('#component_verify').on('change', function () {
|
var verify = $('#component_verify').find("option:selected").val();
|
dfop.verify = verify;
|
});
|
|
// 所占比例选择
|
$('#component_proportion').on('change', function () {
|
var proportion = $('#component_proportion').find("option:selected").val();
|
dfop.proportion = proportion;
|
$component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
|
});
|
|
return $html;
|
};
|
|
// 数据字典选择初始化、数据源选择初始化
|
function createDatasource(dfop) {
|
|
// 数据源类型
|
var $sourceType = $(document).find("#component_dataSourceType");
|
$.each(dataSourceTypeList, function (index, obj) {
|
if (dfop.dataSourceType === obj.id)//设置默认选项
|
$sourceType.append("<option value='" + obj.id + "' selected='selected'>" + obj.text + "</option>");
|
else
|
$sourceType.append("<option value='" + obj.id + "'>" + obj.text + "</option>");
|
});
|
|
//根据数据类型展示数据源选项或地址
|
var sourceType = $("#component_dataSourceType").find("option:selected").val();
|
if (sourceType === "1") {//数据字典
|
initDataSource(dfop.dataSource);
|
$(".dataItemCode").show();
|
$(".dataItemUrl").hide();
|
} else {
|
$(".dataItemCode").hide();
|
$(".dataItemUrl").show();
|
}
|
dfop.dataSourceType = sourceType;
|
|
// 数据源选择
|
$('#component_dataSourceType').on('change', function () {
|
sourceType = $('#component_dataSourceType').find("option:selected").val();
|
if (sourceType === "1") {//数据字典
|
initDataSource(dfop.dataSource);
|
$(".dataItemCode").show();
|
$(".dataItemUrl").hide();
|
} else {
|
$(".dataItemCode").hide();
|
$(".dataItemUrl").show();
|
}
|
dfop.dataSourceType = sourceType;
|
});
|
|
// 数据字典选择
|
$("#component_dataSource").on('change', function () {
|
var dataSource = $('#component_dataSource').find("option:selected").val();
|
dfop.dataSource = dataSource;
|
});
|
}
|
|
// 编辑表格初始化
|
function initGridTable($component) {
|
var dfop = $component[0].dfop;
|
var $html = $(".z-custmerform-designer-layout-right .mCSB_container");
|
var html = '<div class="z-component-title">绑定表</div>';
|
html += '<div class="z-component-control"><select class="form-control" id="component_table"></select></div>';
|
html += '<div class="z-component-title">组件标题</div>';
|
html += '<div class="z-component-control"><input id="component_title" type="text" class="form-control" placeholder="必填项"/></div>';
|
html += '<div class="z-component-title">组件图标</div>';
|
html += '<div class="z-component-control"><input id="component_icon" type="text" class="form-control" placeholder="组件图标"/></div>';
|
html += '<div class="z-component-title">最小高度</div>';
|
html += '<div class="z-component-control"><input id="component_minheight" type="text" class="form-control" placeholder="必填项"/></div>';
|
html += '<div class="z-component-control" style="text-align: center;padding-top: 10px;" ><a id="fieldsDataCreate" class="btn btn-primary btn-block">设置表格字段</a></div>';
|
$html.html(html);
|
|
// 标题设置
|
$html.find('#component_title').val(dfop.title);
|
$html.find('#component_title').keyup(function () {
|
var value = $(this).val();
|
$component.find('.z-compont-title span').text(value);
|
dfop.title = value;
|
});
|
|
// 组件图标
|
$html.find('#component_icon').val(dfop.icon);
|
$html.find('#component_icon').keyup(function () {
|
var value = $(this).val();
|
dfop.icon = value;
|
});
|
|
// 最小高度设置
|
$html.find('#component_minheight').val(dfop.minheight);
|
$html.find('#component_minheight').keyup(function (e) {
|
var value = $(this).val();
|
dfop.minheight = value;
|
});
|
|
dfop.proportion = "1";
|
|
//数据表设置
|
var $table = $(document).find("#component_table");
|
var url = "/FormDesigner/FindChildTable?keyValue=" + window.keyValue;
|
window.$.ajax({
|
url: url,
|
type: "get",
|
dataType: "json",
|
success: function (data) {
|
$.each(data, function (index, obj) {
|
if (dfop.table === obj.Value)//设置默认选项
|
$table.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
|
else
|
$table.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
|
});
|
},
|
complete: function () {
|
var table = $('#component_table').find("option:selected").val();
|
initColumn(table, dfop.field);
|
dfop.table = table;
|
}
|
});
|
|
// 数据表选择
|
$('#component_table').on('change', function () {
|
var table = $('#component_table').find("option:selected").val();
|
initColumn(table, dfop.field);
|
dfop.table = table;
|
});
|
|
$('#fieldsDataCreate').on('click', function () {
|
window.formGridSetting = {
|
columns: dfop.columns,
|
tableName: dfop.table
|
};
|
var gridUrl = "/FormDesigner/InitGridTableIndex?keyValue=formGridSetting";
|
layer.open({
|
type: 2,
|
title: '从表数据设置',
|
shadeClose: true,
|
shade: 0.4,
|
area: ['75%', '75%'],
|
content: gridUrl
|
});
|
});
|
}
|
|
function initColumn(table, dfvalue) {
|
var $field = $(document).find("#component_field");
|
var url = "/FormDesigner/FindColumnList?table=" + table;
|
window.$.ajax({
|
url: url,
|
type: "get",
|
dataType: "json",
|
success: function (data) {
|
$.each(data, function (index, obj) {
|
if (dfvalue === obj.Value)
|
$field.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
|
else
|
$field.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
|
});
|
}
|
});
|
}
|
|
// 初始化数据字典下拉
|
function initDataSource(dfvalue) {
|
//数据字典
|
var $dataSource = $(document).find("#component_dataSource");
|
var url = "/DropDown/DataSource";
|
window.$.ajax({
|
url: url,
|
type: "get",
|
dataType: "json",
|
success: function (data) {
|
$.each(data, function (index, obj) {
|
if (dfvalue === obj.Value)//设置默认选项
|
$dataSource.append("<option value='" + obj.Value + "' selected='selected'>" + obj.Text + "</option>");
|
else
|
$dataSource.append("<option value='" + obj.Value + "'>" + obj.Text + "</option>");
|
});
|
},
|
complete: function () {
|
$('#component_dataSource').chosen();
|
//$('#component_dataSource').trigger("chosen:updated");
|
}
|
});
|
}
|
|
})(jQuery, top.zou);
|
