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.

574 lines
26 KiB
Plaintext

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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 src="../../../Scripts/layui/layui/layui.js"></script>
<link href="../../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
<script src="../../../Scripts/layui/layui/lay/modules/laytpl.js"></script>
<script type="text/javascript">
//页面启动函数.
var initData = {};
var pageData = {};
var radioValue = -1;//当前选定的列表值number类型
var IsEnableJS = "0";//是否启用 string类型
var Sys_MapAttr = [];
var FrmAttachments = [];//附件
var MapDtls = [];//从表
var Sys_FrmRB = [];//不同列表值的配置
var AttrTableData;
var DtlTableData;
var AthTableData;
var attrTable;
let currentSaveRb = [];//要配置的选项
var expStrs = "AtPara,FID,OID,Title,MyNum,FK_NY,Emps,RDT,EDT,CDT,Rec,";
layui.use(['element', 'table', 'form', 'laydate', 'layer'], function () {
var layer = layui.layer;
var laydate = layui.laydate;
var AttrTable = layui.table;
var DtlTable = layui.table;
var AthTable = layui.table;
var form = layui.form;
$(function () {
InitPage();
});
async function InitPage() {
const loading = await asyncLoad('正在加载,请稍后...');
try {
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);
if (attr.AtPara.indexOf('@IsEnableJS=1') >= 0) {
IsEnableJS = "1";
}
//获得的数据.
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);
Sys_MapAttr = initData['Sys_MapAttr'];//字段集合
FrmAttachments = initData['FrmAttachments'];//附件集合
MapDtls = initData['MapDtls'];//从表集合
Sys_FrmRB = initData['Sys_FrmRB'];//列表配置
renderRadioList();//渲染列表值单选框
rederIsEnableJS();//渲染启用禁用下拉框
Reload();
form.render(); //更新全部
setTimeout(() => {
layer.close(loading);
}, 1000);
} catch (e) {
layer.msg('获取数据失败' + e, { icon: 2 });
layer.close(loading);
}
}
//刷新表单
function Reload() {
if (IsEnableJS === "1") {
$("#tabBox").show();
$("#listValue").show();
} else {
$("#tabBox").hide();
$("#listValue").hide();
}
setData();
renderTable();
}
//渲染是否启用下拉框
function rederIsEnableJS() {
var html = "";
html += '<select id="IsEnableJS" name="IsEnableJS" lay-filter="IsEnableJS">';
html += '<option value="1" ' + `${IsEnableJS === "1" ? "selected" : ""}` + '>启用</option>';
html += '<option value="0" ' + `${IsEnableJS === "0" ? "selected" : ""}` + ' >禁用</option>';
html += '</select>';
$("#selectIsEnableJS").html(html);
};
//监听是否启用
form.on('select(IsEnableJS)', function (data) {
IsEnableJS = data.value;
Reload();
});
//渲染列表值单选框
function renderRadioList() {
var html = "";
initData.Sys_FrmRB.forEach((item, index) => {
var checked = "";
if (index === 0) {//首先展示第一个选项的各种值
checked = "checked";
radioValue = item.IntKey;
};
html += '<input type="radio" name="radio" value="' + item.IntKey + '" title="' + item.Lab + '" ' + checked + ' lay-filter="radioList"/>';
});
$("#radioList").html(html);
};
//监听列表值单选框,更新当前选中的列表值
form.on('radio(radioList)', function (data) {
//changeSys_FrmRB();//保存当前打开的列表配置
radioValue = parseInt(data.value);//更改当前选中的列表值
Reload();
});
//根据列表值构造表格数据和配置数据
function setData() {
AttrTableData = [];
DtlTableData = [];
AthTableData = [];
var sys_frmRB = Sys_FrmRB.filter((item) => item.IntKey === radioValue)[0];
if (sys_frmRB.FieldsCfg == null) {
sys_frmRB.FieldsCfg = "";
}
if (sys_frmRB.SetVal == null) {
sys_frmRB.SetVal = "";
}
if (sys_frmRB.Tip == null) {
sys_frmRB.Tip = "";
}
if (sys_frmRB.Script == null) {
sys_frmRB.Script = "";
}
var fieldsCfg = sys_frmRB.FieldsCfg.split('@');//数据格式:["xxx=0","xxx=1"],值0-4
fieldsCfg.splice(0, 1);
var setVal = sys_frmRB.SetVal.split('@');//数据格式:["xxx=123","xxx=李四"]
Sys_MapAttr.forEach((item) => {
var thisRowData = {};
if (item.UIVisible == 1 && expStrs.indexOf(item.KeyOfEn) < 0) {
var thisFieldsCfg = fieldsCfg.filter((i) => i.indexOf(item.KeyOfEn) > -1)[0];
thisFieldsCfg = thisFieldsCfg ? thisFieldsCfg.split('=')[1] : "0";
var thisSetVal = setVal.filter((i) => i.indexOf(item.KeyOfEn) > -1)[0];
thisSetVal = thisSetVal ? thisSetVal.split('=')[1] : "";
thisRowData = {
title: item.Name,
id: item.KeyOfEn,
fieldsCfg: thisFieldsCfg,
setVal: thisSetVal,
UIBindKey: item.UIBindKey,
KeyOfEn: item.KeyOfEn,
MyDataType: item.MyDataType,
LGType: item.LGType,
UIContralType: item.UIContralType,
}
AttrTableData.push(thisRowData);
}
});
MapDtls.forEach((item) => {
var thisRowData = {};
var thisFieldsCfg = fieldsCfg.filter((i) => i.indexOf(item.No) > -1)[0];
thisFieldsCfg = thisFieldsCfg ? thisFieldsCfg.split('=')[1] : "0";
thisRowData = {
title: item.Name,
id: item.No,
fieldsCfg: thisFieldsCfg,
KeyOfEn: item.No
}
DtlTableData.push(thisRowData);
});
FrmAttachments.forEach((item) => {
var thisRowData = {};
var thisFieldsCfg = fieldsCfg.filter((i) => i.indexOf(item.MyPK) > -1)[0];
thisFieldsCfg = thisFieldsCfg ? thisFieldsCfg.split('=')[1] : "0";
thisRowData = {
title: item.Name,
id: item.MyPK,
fieldsCfg: thisFieldsCfg,
KeyOfEn: item.MyPK,
}
AthTableData.push(thisRowData);
});
$("#TB_Script").val(sys_frmRB.Script);
$("#TB_Tip").val(sys_frmRB.Tip);
}
//渲染AttrTable属性值表格
function renderTable() {
attrTable = AttrTable.render({
elem: '#AttrTable'
, page: false
, height: 'full-200'
, limit: AttrTableData.length
, data: AttrTableData
, cols: [[ //表头
{ type: 'numbers', fixed: 'left', }
, { field: 'title', title: '名称', align: 'center', width: 100 }
, { field: 'fieldsCfg', title: '设置', templet: '#radioFieldsCfg', align: 'center', width: 400, unresize: true }
, { field: 'setVal', title: '设置值', align: 'center', templet: '#setValue', unresize: true }
]]
, done: function (res, curr, count) {
laydate.render({
elem: '#DateTime', //指定元素
type: 'datetime',
});
laydate.render({
elem: '#Date', //指定元素
type: 'date',
});
}
});
dtlTable = DtlTable.render({
elem: '#DtlTable'
, page: false
, height: 'full-200'
, limit: DtlTableData.length
, data: DtlTableData
, cols: [[ //表头
{ type: 'numbers', fixed: 'left', }
, { field: 'title', title: '名称', align: 'center', width: 100, unresize: true }
, { field: 'fieldsCfg', title: '设置', templet: '#radioFieldsCfg', align: 'center', unresize: true }
]]
});
athTable = AthTable.render({
elem: '#AthTable'
, page: false
, height: 'full-200'
, limit: AthTableData.length
, data: AthTableData
, cols: [[ //表头
{ type: 'numbers', fixed: 'left', }
, { field: 'title', title: '名称', align: 'center', width: 100, unresize: true }
, { field: 'fieldsCfg', title: '设置', templet: '#radioFieldsCfg', align: 'center', unresize: true }
]]
});
};
form.on("select(setValue)", function (data) {
var key = $(data.elem).attr("name").split("-")[1];
AttrTableData = $.map(AttrTableData, function (item) {
if (item.KeyOfEn == key) {
return {
...item,
setVal: data.value.toString(),
}
} else return item;
});
});
form.on("radio(radioFieldsCfg)", function (data) {//改变设置
var key = $(data.elem).attr("name").split("-")[1];
AttrTableData = $.map(AttrTableData, function (item) {
if (item.KeyOfEn == key) {
return {
...item,
fieldsCfg: data.value.toString(),
}
} else return item;
});
DtlTableData = $.map(DtlTableData, function (item) {
if (item.KeyOfEn == key) {
return {
...item,
fieldsCfg: data.value.toString(),
}
} else return item;
})
AthTableData = $.map(AthTableData, function (item) {
if (item.KeyOfEn == key) {
return {
...item,
fieldsCfg: data.value.toString(),
}
} else return item;
})
});
//监听保存
$("#save").click(function () {
Save();
});
//执行保存
async function Save() {
const loading = await asyncLoad('正在保存...');
try {
if (IsEnableJS == "0") {
SaveEnableJS("0");
Sys_FrmRB = $.map(Sys_FrmRB, function (item) {
return {
...item,
FieldsCfg: '',
Script: '',
SetVal: '',
Tip: '',
};
});
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_MapExt");
handler.AddPara("data", JSON.stringify(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");
} else {
//保存当前列表值
changeSys_FrmRB();
console.log("保存的数据:", Sys_FrmRB);
SaveEnableJS("1");
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_MapExt");
handler.AddPara("data", JSON.stringify(currentSaveRb));
handler.AddPara("FK_MapData", pageData.FK_MapData);
handler.AddPara("FK_MapExt", pageData.MyPK);
handler.AddPara("KeyOfEn", pageData.KeyOfEn);
var data = handler.DoMethodReturnString("RadioBtns_Save");
}
} catch (e) {
layer.close(loading);
layer.msg('保存失败:' + e, { icon: 2 });
return;
}
setTimeout(() => {
layer.close(loading);
}, 2000);
layer.msg('保存成功', { icon: 1 });
Reload();
}
var layer_Tip;
//提示信息
$("#AttrTableTips").on("mouseenter", function () {
layer_Tip = layer.tips("注意:被联动的控件在傻瓜表单模式下要占三行", '#AttrTableTips', {
tips: [1, "#"], //1-4表示上右下左四个方向# 可带背景色
area: ['auto', 'auto'], // 提示框宽高
time: 0 //自动关闭所需毫秒,0表示不自动关闭
});
});
$("#AttrTableTips").on('mouseleave', function () { // 监听鼠标移出事件
layer.close(layer_Tip);
});
//提示信息
$("#SettingTips").on("mouseenter", function () {
layer_Tip = layer.tips("需要为每个选择项设置显示与隐藏的内容设置js, top的提示信息.", '#SettingTips', {
tips: [1, "#"], //1-4表示上右下左四个方向# 可带背景色
area: ['auto', 'auto'], // 提示框宽高
time: 0 //自动关闭所需毫秒,0表示不自动关闭
});
});
$("#SettingTips").on('mouseleave', function () { // 监听鼠标移出事件
layer.close(layer_Tip);
});
});
//改变当前列表值的值
function changeSys_FrmRB() {
var fieldsCfg = '';
var setVal = '';
$.each(AttrTableData, function (index, item) {
if (item.FieldsCfg == null && item.SetVal == null && item.Tip == null && item.Script == null) {
item.FieldsCfg = "";
item.SetVal = "";
item.Tip = "";
item.Script = "";
}
if (item.fieldsCfg != null && item.fieldsCfg != undefined && item.fieldsCfg != "" && item.fieldsCfg != "0") {
fieldsCfg += `@${item.KeyOfEn}=${item.fieldsCfg}`;
};
if (item.setVal != "" && item.setVal != null && item.setVal != undefined) {
setVal += `@${item.KeyOfEn}=${item.setVal}`;
};
});
$.each(DtlTableData, function (index, item) {
if (item.fieldsCfg != null && item.fieldsCfg != undefined && item.fieldsCfg != "" && item.fieldsCfg != "0") {
fieldsCfg += `@${item.KeyOfEn}=${item.fieldsCfg}`;
};
if (item.setVal != "" && item.setVal != null && item.setVal != undefined) {
setVal += `@${item.KeyOfEn}=${item.setVal}`;
};
});
$.each(AthTableData, function (index, item) {
if (item.fieldsCfg != null && item.fieldsCfg != undefined && item.fieldsCfg != "" && item.fieldsCfg != "0") {
fieldsCfg += `@${item.KeyOfEn}=${item.fieldsCfg}`;
};
if (item.setVal != "" && item.setVal != null && item.setVal != undefined) {
setVal += `@${item.KeyOfEn}=${item.setVal}`;
};
});
var allValues = $("input[type='text']:not(.layui-input)");
currentSaveRb = [];
Sys_FrmRB.forEach((it) => {
if (it.IntKey == radioValue) {
currentSaveRb.push(it);
}
});
$.each(allValues, function (index, item) {
var key = $(item).attr("name").split("_")[1];
var value = $(item).val();
if (value != "" && value != null && value != undefined) {
setVal += `@${key}=${value}`;
}
});
currentSaveRb[0].FieldsCfg = fieldsCfg;
currentSaveRb[0].SetVal = setVal;
currentSaveRb[0].Script = $("#TB_Script").val();
currentSaveRb[0].Tip = $("#TB_Tip").val();
};
//设置是否启用value="0" "1"
function SaveEnableJS(value) {
var pkval = GetQueryString("FK_MapData") + "_" + GetQueryString("KeyOfEn");
var attr = new Entity("BP.Sys.MapAttr", pkval);
attr.SetPara("IsEnableJS", value);
attr.Update();
}
</script>
</head>
<style>
.IsEnableJS {
float: left;
display: block;
padding: 9px 5px;
width: 110px;
font-weight: 400;
line-height: 20px;
text-align: right;
font-size: 18px;
}
#turnOn .layui-form-select {
width: 400px;
}
.layui-table-cell {
overflow: visible;
}
td .layui-input.layui-unselect {
height: 33px;
}
</style>
<body>
<form class="layui-form">
<div class="layui-form-item">
<div class="IsEnableJS">选项联动控件</div>
<div style="display:flex;justify-content:flex-end" id="turnOn">
<div id="selectIsEnableJS">
</div>
<button type="button" class="layui-btn" id="save">保存</button>
</div>
</div>
<hr />
</form>
<form class="layui-form" id="listValue">
<!--列表值单选框---start-->
<div class="layui-form-item">
<label class="layui-form-label">列表值</label>
<div class="layui-input-block" id="radioList">
列表值未渲染
</div>
</div>
</form>
<!--列表值单选框---end-->
<!--Tab---start-->
<div class="layui-tab layui-tab-brief" lay-filter="tab" id="tabBox">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="Attr">属性值</li>
<li lay-id="Dtl">从表</li>
<li lay-id="Ath">附件</li>
<li lay-id="Setting">高级设置</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div style="margin-left: 10px">
联动其他的控件使其属性该表(可见,只读)
<i class="layui-icon" style="vertical-align: middle;" id="AttrTableTips">&#xe60b;</i>
</div>
<table id="AttrTable" lay-filter="AttrTable"></table>
</div>
<div class="layui-tab-item">
<div style="margin-left: 10px">联动从表控件使其属性该表(可见)</div>
<table id="DtlTable" lay-filter="DtlTable"></table>
</div>
<div class="layui-tab-item">
<div style="margin-left: 10px">联动附件控件使其属性该表(可见)</div>
<table id="AthTable" lay-filter="AthTable"></table>
</div>
<div class="layui-tab-item">
<div style="margin-left:10px">
高级设置
<i class="layui-icon" style="vertical-align: middle;" id="SettingTips">&#xe60b;</i>
</div>
<div style="margin:10px 20px">
<div>JS脚本</div>
<textarea id="TB_Script" placeholder="请输入" class="layui-textarea"></textarea>
<div>提示信息</div>
<textarea id="TB_Tip" name="" placeholder="请输入" class="layui-textarea"></textarea>
</div>
</div>
</div>
</div>
<!--Tab---end-->
<!--设置列---start-->
<script type="text/html" id="radioFieldsCfg">
<div style="text-align:center;">
<input type="radio" lay-filter="radioFieldsCfg" value="0" name="{{"radio-" + d.KeyOfEn}}" title="不设置" {{d.fieldsCfg=='0'?'checked':''}}= />
<input type="radio" lay-filter="radioFieldsCfg" value="1" name="{{"radio-" + d.KeyOfEn}}" title="可用" {{d.fieldsCfg=='1'?'checked':''}}= />
<input type="radio" lay-filter="radioFieldsCfg" value="2" name="{{"radio-" + d.KeyOfEn}}" title="可见" {{d.fieldsCfg=='2'?'checked':''}}= />
<input type="radio" lay-filter="radioFieldsCfg" value="3" name="{{"radio-" + d.KeyOfEn}}" title="不可见" {{d.fieldsCfg=='3'?'checked':''}}= />
<input type="radio" lay-filter="radioFieldsCfg" value="4" name="{{"radio-" + d.KeyOfEn}}" title="可用且必填" {{d.fieldsCfg=='4'?'checked':''}}= />
</div>
</script>
<!--设置列---end-->
<!--设置值列---start-->
<script type="text/html" id="setValue">
{{# if ((d.MyDataType == 2 && d.LGType == 1)||(d.UIContralType == 2 && d.MyDataType == 1)) {}}
{{# var ses = new Entities("BP.Sys.SysEnums");}}
{{# ses.Retrieve("EnumKey", d.UIBindKey);}}
<div id="{{"DIV_" + d.KeyOfEn}}">
<select class='form-control' name="{{"DDL-" + d.KeyOfEn}}" id="{{"DDL-" + d.KeyOfEn}}" lay-filter="setValue">
<option value="" {{d.setVal == "" ? "selected" : ""}}=>请选择</option>
{{# layui.each(ses, function(index, i){ }}
<option value="{{i.IntKey}}" {{d.setVal == i.IntKey.toString() ? "selected" : ""}}=> {{i.Lab}} </option>
{{# }); }}
</select>
</div>
{{# } else if (d.LGType == "0" && d.MyDataType == "1" && d.UIContralType == 1) { }}<!--外键下拉-->
{{# var sfTable = new Entity("BP.Sys.SFTable", d.UIBindKey);}}
{{# var ens = sfTable.DoMethodReturnJSON("GenerDataOfJson");}}
<div id="{{"DIV_" + d.KeyOfEn}}">
<select class='form-control' name="{{"DDL-" + d.KeyOfEn}}" id="{{"DDL-" + d.KeyOfEn}}" lay-filter="setValue">
<option value="" {{d.setVal == "" ? "selected" : ""}}=>请选择</option>
{{# layui.each(ens, function(index, i){ }}
<option value="{{i.No}}" {{d.setVal == i.No.toString() ? "selected" : ""}}=> {{i.Name}} </option>
{{# }); }}
</select>
</div>
{{# } else if (d.MyDataType==7) { }}
<div class="layui-input-inline">
<input type="text" id="DateTime" name="{{"DT_" + d.KeyOfEn }}" value="{{d.setVal}}" />
</div>
{{# } else if (d.MyDataType==6) {}}
<input type="text" id="Date" name="{{"Date_" + d.KeyOfEn }}" value="{{d.setVal}}" />
{{# } else { }}
<input type="text" id="{{"TB_" + d.KeyOfEn }}" value="{{d.setVal}}" name="{{"TB_" + d.KeyOfEn }}" />
{{# } }}
</script>
<!--设置值列---end-->
</body>
</html>