You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

553 lines
21 KiB
Plaintext

11 months ago
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项联动控件</title>
<script type="text/javascript" src="../../../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../../Scripts/QueryString.js"></script>
<link href="../../../../DataUser/Style/ccbpm.css" rel="stylesheet" />
<script src="../../../Scripts/config.js" type="text/javascript"></script>
<script src="../../../Comm/Gener.js" type="text/javascript"></script>
<script type="text/javascript">
//页面启动函数.
var initData = {};
var pageData = {};
var expStrs = ",FID,OID,Title,MyNum,FK_NY,Emps,RDT,EDT,CDT,Rec,";
$(function () {
pageData = {
FK_MapData: GetQueryString("FK_MapData"),
KeyOfEn: GetQueryString("KeyOfEn"),
SelectIntKey: GetQueryString("SelectIntKey"),
MyPK: GetQueryString("MyPK")
};
if (pageData.selectIntKey == null)
pageData.selectIntKey = "0";
//设置是否启用?
var pkval = GetQueryString("FK_MapData") + "_" + GetQueryString("KeyOfEn");
var attr = new Entity("BP.Sys.MapAttr", pkval);
document.getElementById("RB_IsEnableJS_0").checked = true;
if (attr.AtPara.indexOf('@IsEnableJS=1') >= 0)
document.getElementById("RB_IsEnableJS_1").checked = true;
//获得的数据.
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_MapExt");
handler.AddUrlData();
var data = handler.DoMethodReturnString("RadioBtns_Init");
if (data != undefined && data.indexOf('err@') == 0) {
console.error(data);
return;
}
initData = JSON.parse(data);
//从表组件集合
var mapDtls = initData.MapDtls;
//附件组件集合
var frmAttachments = initData.FrmAttachments;
//绑定左侧的列表值
var ulListValuesLiHtml = '';
//显示枚举/外键值
$.each(initData.Sys_FrmRB, function (i, rb) {
ulListValuesLiHtml += '<li style="list-style-type:none;float:left;" >' + '<input id="RB_' + rb.KeyOfEn + rb.IntKey + '"' + (rb.IntKey == pageData.selectIntKey ? ' checked="true" ' : '') + ' type="radio" name="' + pageData.KeyOfEn + '" value="' + rb.IntKey + '" /> <label for="RB_' + rb.KeyOfEn + rb.IntKey + '" > ' + rb.Lab + '</label></li>';
})
$('#ulListValues').html(ulListValuesLiHtml);
//绑定选择事件
$('[name=' + pageData.KeyOfEn + ']').bind('change', function (obj) {
SaveCurrentConfig();
pageData.selectIntKey = $(obj.target).val();
BindConfig();
})
//绑定表单的所有字段
var mapAttrHtml = '';
var showMapAttr = [];
var myIdx = 0;
//加载表单字段
$.each(initData.Sys_MapAttr, function (i, attr) {
//过滤不显示的字段.
if (expStrs.indexOf(attr.KeyOfEn) != -1)
return;
showMapAttr.push(attr);
myIdx++;
mapAttrHtml += '<tr>';
mapAttrHtml += '<td>' + myIdx + '</td>';
mapAttrHtml += '<td alt=' + attr.keyOfEn + ' >' + attr.Name + '</td>';
//mapAttrHtml += '<td>' + attr.Name + '</td>';
mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '0" name="' + attr.KeyOfEn + '" value="0"/><label for="' + attr.KeyOfEn + '0" >不设置</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '1" name="' + attr.KeyOfEn + '" value="1"/><label for="' + attr.KeyOfEn + '1" >可用</label></td>';
if (attr.UIContralType == 6)
mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '4" name="' + attr.KeyOfEn + '" value="4" disabled=disabled/><label for="' + attr.KeyOfEn + '4" >可用且必填</label></td>';
else
mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '4" name="' + attr.KeyOfEn + '" value="4" /><label for="' + attr.KeyOfEn + '4" >可用且必填</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '2" name="' + attr.KeyOfEn + '" value="2"/><label for="' + attr.KeyOfEn + '2" >可见</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + attr.KeyOfEn + '3" name="' + attr.KeyOfEn + '" value="3"/><label for="' + attr.KeyOfEn + '3" >不可见</label></td>';
//设置的值.
//判断是否枚举类型
if (attr.MyDataType == 2 && attr.LGType == 1) {
var ses = new Entities("BP.Sys.SysEnums");
ses.Retrieve("EnumKey", attr.UIBindKey);
var operations = "<option value=''><label>&nbsp;&nbsp;&nbsp;</label></option>";
$.each(ses, function (i, obj) {
operations += "<option value='" + obj.IntKey + "'>" + obj.Lab + "</option>";
});
mapAttrHtml += "<td><div id='DIV_" + attr.KeyOfEn + "'><select class='form-control' name='DDL_" + attr.KeyOfEn + "' id='DDL_" + attr.KeyOfEn + "' style='width:140px'>" + operations + "</select></div></td>";
} else {
mapAttrHtml += '<td><input type="text" id="TB_' + attr.KeyOfEn + '" name="TB_' + attr.KeyOfEn + '" value="" /></td>';
}
mapAttrHtml += '</tr>';
})
$('#Fields tbody').html(mapAttrHtml);
//加载从表组件
mapAttrHtml = '';
$.each(mapDtls, function (i, dtl) {
myIdx++;
mapAttrHtml += '<tr>';
mapAttrHtml += '<td>' + myIdx + '</td>';
mapAttrHtml += '<td>' + dtl.No + '</td>';
mapAttrHtml += '<td>' + dtl.Name + '</td>';
mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '0" name="' + dtl.No + '" value="0"/><label for="' + dtl.No + '0" >不设置</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '1" name="' + dtl.No + '" value="1"/><label for="' + dtl.No + '1" >可用</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '2" name="' + dtl.No + '" value="2"/><label for="' + dtl.No + '2" >可见</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + dtl.No + '3" name="' + dtl.No + '" value="3"/><label for="' + dtl.No + '3" >不可见</label></td>';
mapAttrHtml += '</tr>';
})
$('#mapDtls tbody').html(mapAttrHtml);
//加载附件组件
mapAttrHtml = '';
$.each(frmAttachments, function (i, ath) {
myIdx++;
mapAttrHtml += '<tr>';
mapAttrHtml += '<td>' + myIdx + '</td>';
mapAttrHtml += '<td>' + ath.MyPK + '</td>';
mapAttrHtml += '<td>' + ath.Name + '</td>';
mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '0" name="' + ath.MyPK + '" value="0"/><label for="' + ath.MyPK + '0" >不设置</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '1" name="' + ath.MyPK + '" value="1"/><label for="' + ath.MyPK + '1" >可用</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '2" name="' + ath.MyPK + '" value="2"/><label for="' + ath.MyPK + '2" >可见</label></td>';
mapAttrHtml += '<td><input type="radio" id="' + ath.MyPK + '3" name="' + ath.MyPK + '" value="3"/><label for="' + ath.MyPK + '3" >不可见</label></td>';
mapAttrHtml += '</tr>';
})
$('#aths tbody').html(mapAttrHtml);
//为表单字段绑定DATA
$.each($('#Fields tbody tr'), function (i, tr) {
var mapAttr = showMapAttr[i];
$(tr).data(mapAttr);
});
BindConfig();
});
function bindData() {
//保存切换配置前的
//绑定切换后的配置
BindConfigData();
}
//保存当前配置
function SaveCurrentConfig() {
var currentSaveRb = $.grep(initData.Sys_FrmRB, function (value) {
return value.IntKey == pageData.selectIntKey;
});
if (currentSaveRb.length == 0)
return;
var configData = $('#formFields').serialize();
//中文序列化乱码
configData = decodeURIComponent(configData, true);
configDataArr = configData.split('&');
configDataArr = $.grep(configDataArr, function (value) {
return (value.split('=').length == 2 && value.split('=')[1].length > 0);
});
var fieldsCfg = "";
var setValue = "";
if (configDataArr.length > 0) {
for (var i = 0; i < configDataArr.length; i++) {
if (configDataArr[i].indexOf("TB_") == -1 && configDataArr[i].indexOf("DDL_") == -1)
fieldsCfg += '@' + configDataArr[i];
else
if (configDataArr[i].indexOf("TB_") >= 0)
setValue += '@' + configDataArr[i].replace("TB_", "");
else
setValue += '@' + configDataArr[i].replace("DDL_", "");
}
}
var script = $('#TB_Script').val();
var tip = $('#TB_Tip').val();
currentSaveRb[0].Script = script;
currentSaveRb[0].FieldsCfg = fieldsCfg;
currentSaveRb[0].Tip = tip;
currentSaveRb[0].SetVal = setValue;
}
function SaveEditData() {
var selectRb = $.grep(initData.Sys_FrmRB, function (value) {
return value.IntKey == pageData.selectIntKey;
});
$('#TB_Script').val(selectRb.Script);
$('#TB_Tip').val(selectRb.Tip);
}
//绑定右侧配置信息
function BindConfig() {
var selectRb = $.grep(initData.Sys_FrmRB, function (value) {
return value.IntKey == pageData.selectIntKey;
});
if (selectRb.length == 0) {
$(':text').val(""); //转换之前的文本框设置值清空
$('select').val(''); //转换之前的下拉框设置值清空
$('#TB_Script').val("");
$('#TB_Tip').val("");
return;
}
$(':text').val(""); //转换之前的文本框设置值清空
$('select').val(''); //转换之前的下拉框设置值清空
$('#TB_Script').val(selectRb[0].Script);
$('#TB_Tip').val(selectRb[0].Tip);
//解析下面的元素显示与否
var setVal = selectRb[0].SetVal;
if (setVal != null && setVal != "") {
var setVals = setVal.split("@");
for (var i = 0; i < setVals.length; i++) {
if (setVals[i] != '' && setVals[i]) {
var valObjs = setVals[i].split('=');
if ($("#TB_" + valObjs[0]).length > 0)
$("#TB_" + valObjs[0]).val(valObjs[1]);
if ($("#DDL_" + valObjs[0]).length > 0)
$("#DDL_" + valObjs[0]).val(valObjs[1]);
}
}
}
var fieldsCfg = selectRb[0].FieldsCfg;
//'@ConfigInfo:' + $('[name=xx]:checked').val() + '@ViewSta:' +
//开始绑定字段状态信息
if (fieldsCfg != undefined) {
var viewStaStr = fieldsCfg;
var viewStaArr = viewStaStr.split('@');
var viewStaObj = {};
$.each(viewStaArr, function (i, viewSta) {
if (viewSta != '' && viewSta)
viewStaObj[viewSta.split('=')[0]] = viewSta.split('=')[1];
});
//为表单字段绑定DATA
$.each($('#Fields tbody tr'), function (i, tr) {
var keyOfEn = $(tr).data().KeyOfEn;
if (viewStaObj[keyOfEn] != undefined) {
$('#' + keyOfEn + viewStaObj[keyOfEn]).attr('checked', true);
} else {
$('#' + keyOfEn + '0').attr('checked', true);
}
});
//为从表绑定DATA
$.each(initData.MapDtls, function (i, dtl) {
var keyOfEn = dtl.No;
if (viewStaObj[keyOfEn] != undefined) {
$('#' + keyOfEn + viewStaObj[keyOfEn]).attr('checked', true);
} else {
$('#' + keyOfEn + '0').attr('checked', true);
}
});
//为附件组件绑定DATA
$.each(initData.FrmAttachments, function (i, ath) {
var keyOfEn = ath.MyPK;
if (viewStaObj[keyOfEn] != undefined) {
$('#' + keyOfEn + viewStaObj[keyOfEn]).attr('checked', true);
} else {
$('#' + keyOfEn + '0').attr('checked', true);
}
});
} else {
//为表单字段绑定DATA
$.each($('#Fields tbody tr'), function (i, tr) {
var keyOfEn = $(tr).data().KeyOfEn;
$('#' + keyOfEn + '0').attr('checked', true);
});
//为从表绑定DATA
$.each(initData.MapDtls, function (i, dtl) {
var keyOfEn = dtl.No;
$('#' + keyOfEn + '0').attr('checked', true);
});
//为附件组件绑定DATA
$.each(initData.FrmAttachments, function (i, ath) {
var keyOfEn = ath.MyPK;
$('#' + keyOfEn + '0').attr('checked', true);
});
}
}
//执行保存
function Save() {
$("#Btn_Save").text("正在保存请稍后...");
console.trace('保存数据', initData.Sys_FrmRB);
//保存当前打开表单信息
SaveCurrentConfig();
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_MapExt");
handler.AddPara("data", JSON.stringify(initData.Sys_FrmRB));
handler.AddPara("FK_MapData", pageData.FK_MapData);
handler.AddPara("FK_MapExt", pageData.MyPK);
handler.AddPara("KeyOfEn", pageData.KeyOfEn);
var data = handler.DoMethodReturnString("RadioBtns_Save");
Reload();
}
function SaveAndClose() {
Save();
if (parent && parent.parent && typeof parent.parent.doCloseDialog === 'function') {
parent.parent.doCloseDialog.call();
} else {
window.close();
}
}
//设置是否启用
function SaveEnableJS(ctrl) {
var pkval = GetQueryString("FK_MapData") + "_" + GetQueryString("KeyOfEn");
var attr = new Entity("BP.Sys.MapAttr", pkval);
attr.SetPara("IsEnableJS", ctrl.value);
attr.Update();
}
function Close() {
if (parent && parent.parent && typeof parent.parent.doCloseDialog === 'function') {
parent.parent.doCloseDialog.call();
} else {
window.close();
}
}
</script>
</head>
<body>
<!--<fieldset>
<legend>选项联动控件</legend>
<h4>
</h4>
</fieldset>-->
<fieldset>
<legend>是否启用?</legend>
<input type="radio" value="1" id="RB_IsEnableJS_1" onclick="SaveEnableJS(this)" name="RB_IsEnableJS" />
<label for="RB_IsEnableJS_1">
启用
</label>
<input type="radio" value="0" id="RB_IsEnableJS_0" onclick="SaveEnableJS(this)" name="RB_IsEnableJS" />
<label for="RB_IsEnableJS_0">
禁用
</label>
<button onclick="Save()" type="button" id="Btn_Save">
保存
</button>
<ul>
<li>禁用当前的配置就不生效.</li>
</ul>
<legend>列表值 </legend>
<ul id="ulListValues" style="margin: 0; border: 0; padding: 0;">
</ul>
<br />
<legend>联动其他的控件使其属性该表(可见,只读) </legend>
<form id="formFields">
<div id="Fields">
<table>
<thead>
<tr>
<th>
#
</th>
<th>
字段
</th>
<th>
不设置
</th>
<th>
可编辑
</th>
<th>
可编辑且必填
</th>
<th>
可见?
</th>
<th>
不可见
</th>
<th>
设置值
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
注意:<font color=red>被联动的控件在傻瓜表单模式下要占三行</font>
</div>
<br />
<legend>联动<font color=red>从表控件</font>使其属性该表(可见) </legend>
<div id="mapDtls">
<table>
<thead>
<tr>
<th>
#
</th>
<th>
从表ID
</th>
<th>
从表名
</th>
<th>
不设置
</th>
<th>
可以编辑
</th>
<th>
可见?
</th>
<th>
不可见
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br />
<legend>联动<font color=red>附件控件</font>使其属性该表(可见) </legend>
<div id="aths">
<table>
<thead>
<tr>
<th>
#
</th>
<th>
附件组件ID
</th>
<th>
附件组件名
</th>
<th>
不设置
</th>
<th>
可以编辑
</th>
<th>
可见?
</th>
<th>
不可见
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</fieldset>
<fieldset>
<legend>高级设置</legend>
<ul>
<li>需要为每个选择项设置显示与隐藏的内容设置js,top的提示信息.</li>
</ul>
<legend>执行JS脚本(可以为空)</legend>
<div id="JS">
<textarea rows="3" cols="50" id="TB_Script"></textarea>
</div>
<legend>Tip 提示信息(可以为空)</legend>
<div id="Tip">
<textarea rows="3" cols="50" id="TB_Tip"></textarea>
</div>
</fieldset>
<div id='sqlexp' style='color: Gray; display: none'>
<ul>
<li>当下拉框或者radionbuttn选择的值改变时,需要联动其他的控件也要跟着隐藏与显示.</li>
<li>该功能为每个枚举值的展现都设置为状态.</li>
</ul>
</div>
</body>
</html>