|
|
<!DOCTYPE html>
|
|
|
<html lang="cn">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="renderer" content="webkit">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<link href="../Comm/fonts/font-icons.min.css" rel="stylesheet" />
|
|
|
<title>正在加载请稍候...</title>
|
|
|
|
|
|
<script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
|
|
|
<!--表单样式-->
|
|
|
<link href="../Admin/CSS/FoolFrmBody.css" rel="stylesheet" />
|
|
|
<link href="../../DataUser/Style/FoolFrmStyle/Default.css" rel="stylesheet" />
|
|
|
<!-- layui -->
|
|
|
<link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
|
|
|
<link href="../Scripts/layui/style/admin.css" rel="stylesheet" />
|
|
|
<link href="../Scripts/layui/layui/css/autocomplete.css" rel="stylesheet" />
|
|
|
<script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jquery-form.js" type="text/javascript"></script>
|
|
|
<!--通用的JS-->
|
|
|
<script src="../Scripts/config.js" type="text/javascript"></script>
|
|
|
<script src="../Comm/Gener.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/QueryString.js" type="text/javascript"></script>
|
|
|
<script src="./JS/tinymce/tinymce.min.js"></script>
|
|
|
<script src="JS/jquery.mousewheel.min.js"></script>
|
|
|
<script src="ChapterFrmGener.js"></script>
|
|
|
<script src="../Scripts/Tools/jsPdf.debug.js"></script>
|
|
|
<script src="../Scripts/Tools/html2canvas.js"></script>
|
|
|
<script src="../../WF/CCForm/FrmFool.js"></script>
|
|
|
<script src="../../WF/CCForm/FrmEnd.js"></script>
|
|
|
<script src="../Comm/JScript.js"></script>
|
|
|
<script src="../Scripts/layui/treeTable.js"></script>
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
var frmID = null;
|
|
|
var oid = null;
|
|
|
var treeList = [];
|
|
|
var groupFields = null;
|
|
|
var attrs = null;
|
|
|
var hideGroup;
|
|
|
var hideAttrs;
|
|
|
var hideGroupRes = [];
|
|
|
var hideAttrRes = [];
|
|
|
var table;
|
|
|
layui.use(['tree', 'jquery', 'laypage', 'form', 'treeTable', 'table', 'layer'], function () {
|
|
|
var treeTable = layui.treeTable, form = layui.form;
|
|
|
//页面启动函数.
|
|
|
$(function () {
|
|
|
frmID = GetQueryString("FrmID");
|
|
|
oid = GetQueryString("OID");
|
|
|
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
|
|
|
handler.AddPara("FrmID", frmID);
|
|
|
handler.AddPara("OID", oid);
|
|
|
var data = handler.DoMethodReturnJSON("ChapterFrm_Init");
|
|
|
console.log("获取的表单数据：", data)
|
|
|
|
|
|
groupFields = data["GroupFields"];//章节
|
|
|
attrs = data["Sys_MapAttr"];//字段
|
|
|
|
|
|
var en = new Entity(frmID, oid);
|
|
|
console.log("获取的表单设置信息：", en);
|
|
|
//存储显示状态
|
|
|
hideGroup = en.GetPara("HideGroup");
|
|
|
if (hideGroup == undefined || hideGroup == null || hideGroup == '')
|
|
|
hideGroup = [];
|
|
|
else hideGroup = hideGroup.split(',');
|
|
|
hideAttrs = en.GetPara("HideAttrs");
|
|
|
if (hideAttrs == undefined || hideAttrs == null || hideAttrs == '')
|
|
|
hideAttrs = [];
|
|
|
else hideAttrs = hideAttrs.split(',');
|
|
|
hideAttrRes = hideAttrs;
|
|
|
hideGroupRes = hideGroup;
|
|
|
console.log(hideAttrRes, hideGroupRes);
|
|
|
|
|
|
//形成树形数据
|
|
|
groupFields.forEach((item) => {
|
|
|
if (item.ParentOID === "" || item.ParentOID == null) {
|
|
|
var child = {
|
|
|
id: item.OID.toString(),
|
|
|
title: item.Lab,
|
|
|
children: [],
|
|
|
parentId: "0",
|
|
|
treeType:'field',//章节
|
|
|
IsShow: hideOrShow(item.OID.toString(), "field"),//判断是否显示
|
|
|
...item,
|
|
|
};
|
|
|
child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
|
|
|
treeList.push(child);
|
|
|
}
|
|
|
});
|
|
|
console.log(treeList);
|
|
|
//渲染表格
|
|
|
tableRender();
|
|
|
table.expandAll();
|
|
|
//渲染表格方法
|
|
|
function tableRender() {
|
|
|
table = treeTable.render({
|
|
|
elem: '#menu',//容器的id
|
|
|
data: treeList,//数据源
|
|
|
//toolbar: 'default',
|
|
|
//height: 'full-200',
|
|
|
//数据源是列表也行，根据parentId构造树形结构；是树形的也可以，根children构造树形结构
|
|
|
tree: {
|
|
|
treeSpid: '0', //最上级的父级id
|
|
|
iconIndex: 1,//展开符号在哪一列
|
|
|
isPidData: true,//根据parentId来构造树形结构
|
|
|
idName: 'id',//父ID
|
|
|
pidName: 'parentId',//子ID
|
|
|
openName: 'open',// 是否默认展开的字段名
|
|
|
},
|
|
|
defaultToolbar: ['filter', 'print', 'exports'],//右上角
|
|
|
cols: [[
|
|
|
{ type: 'numbers', fixed: 'left' }//复选，单选
|
|
|
, { field: 'title', title: '名称' }
|
|
|
, {
|
|
|
field: 'CtrlType', title: '内容类型', align: 'center', templet: function (record) {
|
|
|
//自定义渲染
|
|
|
return '<span>' + getCtrlTypeText(record.CtrlType) + '</span>';
|
|
|
}
|
|
|
}
|
|
|
, { field: 'IsShow', title: '打开为显示/关闭为隐藏',templet: '#switchTpl', unresize: true, align: 'center' }
|
|
|
//, { toolbar: '#menusState', width: 200, align: 'center', title: '操作' }
|
|
|
]],
|
|
|
style: 'margin-top:0;'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 全部展开
|
|
|
$('#btnExpandAll').click(function () {
|
|
|
table.expandAll();
|
|
|
});
|
|
|
|
|
|
// 全部折叠
|
|
|
$('#btnFoldAll').click(function () {
|
|
|
table.foldAll();
|
|
|
});
|
|
|
|
|
|
//保存测试使用
|
|
|
$('#SaveBtn').click(function () {
|
|
|
Save();
|
|
|
});
|
|
|
|
|
|
//监听显示状态操作
|
|
|
form.on('radio(hideOrShow)', function (data) {
|
|
|
var id = data.value.split('+')[0];//节点id
|
|
|
var isChecked = data.value.split('+')[1] === "true" ? true : false;//节点显示或者隐藏
|
|
|
|
|
|
EachList(id, treeList, isChecked);
|
|
|
// 获取垂直滚动条的位置
|
|
|
var scrollTopPosition = $(window).scrollTop();
|
|
|
|
|
|
// 获取水平滚动条的位置
|
|
|
var scrollLeftPosition = $(window).scrollLeft();
|
|
|
table.expandAll
|
|
|
tableRender();
|
|
|
//table.expand(id, true);//刷新表格后展开当前行
|
|
|
table.expandAll();
|
|
|
// 调整滚动条的垂直位置
|
|
|
$(window).scrollTop(scrollTopPosition);
|
|
|
|
|
|
// 调整滚动条的水平位置
|
|
|
$(window).scrollLeft(scrollLeftPosition);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
});
|
|
|
//递归寻找当前节点(显示隐藏状态改变的当前节点),参数：要寻找的id，要遍历的列表,要改变的状态
|
|
|
function EachList(id, list, isShow) {
|
|
|
$(list).each(function (i, item) {
|
|
|
if (item.id === id) {
|
|
|
item.IsShow = isShow;
|
|
|
changeRes(item.id, isShow, item.treeType);//改变结果数组
|
|
|
if (item.children && item.children.length > 0 && isShow === false) {
|
|
|
//当本节点的状态变为隐藏，递归改变本节点的子节点状态
|
|
|
EachChildern(item.children, isShow);
|
|
|
return;
|
|
|
}
|
|
|
else if (isShow === true) {
|
|
|
//当本节点的状态变为显示，递归改变本节点的父节点状态
|
|
|
EachParent(id, treeList, isShow);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (item.children && item.children.length > 0) {
|
|
|
EachList(id, item.children, isShow)
|
|
|
};
|
|
|
});
|
|
|
};
|
|
|
|
|
|
//递归遍历treeList改变表格的状态,如果父亲变为隐藏，则他的后代都变为隐藏；如果父亲变为显示，他的后代状态不变
|
|
|
function EachChildern(data, isShow) {
|
|
|
$(data).each(function (i, item) {
|
|
|
if (!isShow) {
|
|
|
item.IsShow = isShow;
|
|
|
changeRes(item.id, isShow, item.treeType);//改变结果数组
|
|
|
}
|
|
|
|
|
|
if (Array.isArray(item.children)&&item.children.length > 0) {
|
|
|
EachChildern(item.children, isShow);
|
|
|
}
|
|
|
if (item.children == undefined)
|
|
|
return true;
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//递归改变父级的状态，如果某一个节点是显示状态，则他的父辈也是显示状态
|
|
|
function EachParent(id, list, isShow) {
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
|
var item = list[i];
|
|
|
if (item.id == id) {
|
|
|
item.IsShow = isShow;
|
|
|
return "FindChild";
|
|
|
};
|
|
|
if (item.children && item.children.length > 0) {
|
|
|
var findChild = EachParent(id, item.children, isShow);
|
|
|
if (findChild == "FindChild") {
|
|
|
item.IsShow = isShow;
|
|
|
changeRes(item.id, isShow, item.treeType);//改变结果数组
|
|
|
return "FindChild";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return "NotChild";
|
|
|
};
|
|
|
|
|
|
//改变显示结果数组hideGroupRes和hideAttrRes
|
|
|
function changeRes(id, isShow, treeType) {
|
|
|
if (isShow) {//如果是显示状态,从hide结果数组中去掉这一个
|
|
|
if (treeType == "attr") {//attr是字段
|
|
|
hideAttrRes = hideAttrRes.filter((item) => item != id)
|
|
|
} else {
|
|
|
hideGroupRes = hideGroupRes.filter((item) => item != id);
|
|
|
}
|
|
|
} else {//如果是隐藏状态，往hide结果数组中加入这个id
|
|
|
if (treeType == "attr") {//attr是字段
|
|
|
if (hideAttrRes.indexOf(id) == -1)
|
|
|
hideAttrRes.push(id);
|
|
|
} else {
|
|
|
if (hideGroupRes.indexOf(id) == -1)
|
|
|
hideGroupRes.push(id);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 保存，测试使用，保存方法在父级
|
|
|
function Save() {
|
|
|
console.log(hideGroupRes.join(','), hideAttrRes.join(','));
|
|
|
return;
|
|
|
var en = new Entity(frmID, oid);
|
|
|
//if (hideGroupRes.length != 0 )
|
|
|
en.SetPara("HideGroup", '');
|
|
|
//if (hideAttrRes.length != 0)
|
|
|
en.SetPara("HideAttrs", '');
|
|
|
en.Update();
|
|
|
}
|
|
|
})
|
|
|
//递归构造章节树形结构(获取parentId的孩子)
|
|
|
function getChildren(parentId) {
|
|
|
var children = [];
|
|
|
groupFields.forEach((item) => {
|
|
|
if (item.ParentOID === parentId) {
|
|
|
var child = {
|
|
|
id: item.OID.toString(),
|
|
|
title: item.Lab,
|
|
|
children: [],
|
|
|
parentId: parentId.toString(),
|
|
|
treeType:'field',
|
|
|
IsShow: hideOrShow(item.OID.toString(), "field"),//判断是否显示
|
|
|
...item,
|
|
|
};
|
|
|
child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
|
|
|
children.push(child);
|
|
|
}
|
|
|
});
|
|
|
return children;
|
|
|
}
|
|
|
//获取本章节下的attr字段(groupId下的字段)
|
|
|
function getAttrChildren(groupId, ctrlType) {
|
|
|
var attrList = [];
|
|
|
//非Attr型控件，非默认控件，不显示其下字段
|
|
|
if (ctrlType != "Attr" && ctrlType != "" && ctrlType != null)
|
|
|
return [];
|
|
|
|
|
|
attrs.forEach((item) => {
|
|
|
if (item.GroupID === groupId && item.UIVisible === 1) {//只显示可见的字段
|
|
|
var attr = {
|
|
|
id: item.KeyOfEn,
|
|
|
title: item.Name,
|
|
|
parentId: groupId.toString(),
|
|
|
treeType:'attr',//字段
|
|
|
IsShow: hideOrShow(item.KeyOfEn, "attr"),//判断是否显示
|
|
|
...item,
|
|
|
}
|
|
|
if ((ctrlType === "" || ctrlType == null) && attr.TextModel != 1) {//默认型控件，只显示文本字段
|
|
|
if (attr.MyDataType == 1 && attr.UIContralType == 0) {
|
|
|
//if (attr.IsShow) hideAttrRes.push(attr.id);
|
|
|
attrList.push(attr);
|
|
|
};
|
|
|
|
|
|
} else if (ctrlType === "Attr") {//Attr控件所有类型的字段都显示
|
|
|
//if (attr.IsShow) hideAttrRes.push(attr.id);
|
|
|
attrList.push(attr);
|
|
|
};
|
|
|
};
|
|
|
});
|
|
|
return attrList;
|
|
|
}
|
|
|
|
|
|
//获取控件类型的文本 "Dtl":从表；"Ath":附件；"":目录；"Attr":目录；"Dir":目录；
|
|
|
function getCtrlTypeText(ctrlType) {
|
|
|
switch (ctrlType) {
|
|
|
case "Attr":
|
|
|
case "":
|
|
|
case "Dir":
|
|
|
case null:
|
|
|
return "目录";
|
|
|
case "Dtl":
|
|
|
return "从表";
|
|
|
case "Ath":
|
|
|
return "附件";
|
|
|
case "ChapterFrmSelfUrl":
|
|
|
return "自定义Url";
|
|
|
case "ChapterFrmLinkFrm":
|
|
|
return "自定义表单";
|
|
|
case undefined:
|
|
|
return "字段";
|
|
|
};
|
|
|
}
|
|
|
|
|
|
//判断这一个章节或字段是否显示
|
|
|
function hideOrShow(key, fieldOrAttr) {
|
|
|
if (fieldOrAttr == "field") {
|
|
|
return hideGroup.indexOf(key) > -1 ? false : true;
|
|
|
} else if (fieldOrAttr == "attr") {
|
|
|
return hideAttrs.indexOf(key) > -1 ? false : true;
|
|
|
};
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="layui-fluid">
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
<div class="layui-col-md12">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-body ">
|
|
|
<!--搜索栏-->
|
|
|
<!--<div class="demoTable">
|
|
|
<div class="layui-inline layui-show-xs-block">
|
|
|
<input type="text" name="UserName" id="demoReload" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
|
|
|
</div>
|
|
|
<div class="layui-inline layui-show-xs-block" id="demoTable">
|
|
|
<button class="layui-btn" id="search" data-type="reload" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-card-header">
|
|
|
<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
|
<i class="layui-icon"></i>展开全部
|
|
|
</button>
|
|
|
<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
|
<i class="layui-icon"></i>折叠全部
|
|
|
</button>
|
|
|
<!--保存按钮，测试使用-->
|
|
|
<!--<button class="layui-btn" id="SaveBtn">保存</button>-->
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-card-body layui-table-body layui-table-main">
|
|
|
<table class="layui-hide" id="menu" lay-filter="menu"></table>
|
|
|
</div>
|
|
|
|
|
|
<script type="text/html" id="switchTpl">
|
|
|
<input type="radio" value="{{d.id}}+{{true}}+{{d.treeType}}" title="显示" {{ d.IsShow == true ? "checked" : "" }} lay-filter="hideOrShow">
|
|
|
<input type="radio" value="{{d.id}}+{{false}}+{{d.treeType}}" title="隐藏" {{ d.IsShow == false ? "checked" : "" }} lay-filter="hideOrShow">
|
|
|
</script>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="text/html" id="menusState">
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="up" style="width:auto"><i class="layui-icon"></i>上移</a>
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="down" style="width:auto"><i class="layui-icon"></i>下移</a>
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|