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.

749 lines
31 KiB
Plaintext

11 months ago
<!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">
<title>正在加载请稍候...</title>
<link href="../Comm/fonts/font-icons.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<!--表单样式-->
<link href="../Admin/CSS/FoolFrmBody.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>
<!--通用的JS-->
<script src="JS/jquery.mousewheel.min.js"></script>
<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="ChapterFrmGener.js"></script>
<script src="./JS/jspdf.min.js"></script>
<script src="./JS/html2canvas.min.js"></script>
<script src="JS/FrmDBRemark.js" type="text/javascript"></script>
<script src="../../WF/CCForm/FrmEnd.js"></script>
<script src="../Comm/JScript.js"></script>
<script src="../../WF/Portal/layui/layui.js" type="text/javascript"></script>
<script src="FrmFool.js" type="text/javascript">></script>
<script language="javascript" type="text/javascript">
var pageData = {
IsReadonly : 1
};
layui.use(['tree', 'dropdown', 'form', 'jquery'], function () {
var tree = layui.tree, $ = layui.jquery, dropdown = layui.dropdown;
var frmID = null;
var oid = null;
var key = GetQueryString('attrKey');
var isFrm = false;
var isDtl = false;
var name = null;
var treelist = null;
var oper = 1;
var apArr = [];
var group = [];
var num = 0;
var ptype = null;
var form = layui.form;
var showGroup;//存储章节的显示状态,空则全部显示
var showAttrs;//存储字段的显示状态,空则全部显示
var groupFields = [];//章节分组.
var attrs = [];//字段.
var data = [];//表单所有信息ChapterFrm_Init获取
//页面启动函数.
$(function () {
frmID = GetQueryString("FrmID");
oid = GetQueryString("WorkID");
if (oid == null)
oid = GetQueryString("OID");
var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
handler.AddPara("FrmID", frmID);
handler.AddPara("OID", oid);
data = handler.DoMethodReturnJSON("ChapterFrm_Init");
console.log('表单信息:',data);
groupFields = data["GroupFields"];//章节分组.
attrs = data["Sys_MapAttr"];//字段.
//获取显示状态信息
var en = new Entity(frmID, oid);
console.log("获取的表单设置信息:", en);
//存储显示状态
showGroup = en.GetPara("ShowGroup");
if (showGroup == undefined || showGroup == '' || showGroup == null)
showGroup = [];
else showGroup = showGroup.split(',');
showAttrs = en.GetPara("ShowAttrs");
if (showAttrs == undefined || showAttrs == '' || showAttrs == null)
showAttrs = [];
else showAttrs = showAttrs.split(',');
console.log("显示状态", showGroup, showAttrs);
//获得第一个Key值.
//GenerFistKey(key, groupFields, attrs);
//形成树形数据
groupFields.forEach((item) => {
if (item.ParentOID === "" || item.ParentOID == null) {
var child = {
id: item.OID.toString(),
title: item.Lab,
children: [],
...item,
};
if ((showGroup.length > 0 && showGroup.indexOf(child.id) > -1) || showGroup.length === 0) {//看设置是否显示
if (item.CtrlType === "Attr") {//Attr控件将其下的字段值放在attrChildren 中方便解析
child.attrChildren = getAttrChildren(item.OID.toString(), item.CtrlType);
} else {
child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
};
group.push(child);
};
}
});
console.log("树形数组",group);
//解析Attr类型分组
function IniAttr(group) {
var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
handler.AddPara("FK_MapData", frmID);
handler.AddPara("OID", GetQueryString("WorkID"));
var result = handler.DoMethodReturnString("ChapterFrm_AttrInit");
if (result.indexOf('err@') == -1) {
data.MainTable[0] = JSON.parse(result);
}
var attrhtm = "";
var thisAttrData = {//改造数据主要是Sys_MapAttr的字段显示与隐藏
...data,
Sys_MapAttr: group.attrChildren,
}
attrhtm += '<div id="Group_' + group.OID + '">';
var tableCol = data.Sys_MapData[0].TableCol === 0 ? 4 : 6;
attrhtm += InitMapAttr(thisAttrData, tableCol, group.OID);
attrhtm += '</div>';
$("#divCCForm").html(attrhtm);
//占一行的元素标签靠左
var hang = $(".layui-col-sm12.layui-col-md12.layui-col-xm12.FoolFrmFieldLabel>.layui-form-label");
$(hang).attr("style", "text-align:left");
//装载表单数据与修改表单元素风格.
LoadFrmDataAndChangeEleStyle(thisAttrData);
//渲染表单
form.render();
form.render('checkbox');
//解析表单的扩展功能
AfterBindEn_DealMapExt(thisAttrData);
$.each($(".ccdate"), function (i, item) {
var format = $(item).attr("data-info");
var type = $(item).attr("data-type");
if (format.indexOf("HH") != -1) {
layui.laydate.render({
elem: '#' + item.id,
format: $(item).attr("data-info"), //可任意组合
type: type,
trigger: 'click',
ready: function (date) {
var now = new Date();
var mm = "";
if (now.getMinutes() < 10)
mm = "0" + now.getMinutes();
else
mm = now.getMinutes();
var ss = "";
if (now.getSeconds() < 10)
ss = "0" + now.getSeconds();
else
ss = now.getSeconds();
this.dateTime.hours = now.getHours();
this.dateTime.minutes = mm;
this.dateTime.seconds = ss;
},
change: function (value, date, endDate) {
$('.laydate-btns-confirm').click();
},
done: function (value, date, endDate) {
var data = $(this.elem).data();
$(this.elem).val(value);
if (data && data.ReqDay != null && data.ReqDay != undefined)
ReqDays(data.ReqDay);
}
});
} else {
layui.laydate.render({
elem: '#' + item.id,
format: $(item).attr("data-info"), //可任意组合
type: type,
done: function (value, date, endDate) {
var data = $(this.elem).data();
$(this.elem).val(value);
if (data && data.ReqDay != null && data.ReqDay != undefined)
ReqDays(data.ReqDay);
}
});
}
})
$("#toIframe").hide();
$("#textRea").hide();
$("#divCCForm").show();
$("#welcome").hide();
}
tree.render({
elem: '#test1' //默认是点击节点可进行收缩
, data: group,
click: function (obj) {
ptype = null;
//$("#print").hide();
//$("#docs").show();
$('.layui-tree-set').removeClass("tree-txt-active");
$(".layui-card-header").show();
if (!obj.data.children) {
$("#toIframe").hide();
$("#divCCForm").hide();
$("#textRea").show();
if (name != obj.data.Name) {
name = obj.data.Name;
key = obj.data.KeyOfEn;
ChapterFrmShow(key)
$("#Title").html(name);
$("#layui-card-header").show();
}
isFrm = false;
isDtl = false;
$(obj.elem[0]).addClass("tree-txt-active");
} else {
$(".layui-card-header").hide();
//如果点击章.
if (obj.data.CtrlType == "") {
return;
}
if (obj.data.CtrlType == "Dtl") {
$("#toIframe").show();
$("#Title").html('')
var url = Ele_Dtl_Chapter(obj.data.CtrlID, 1);
$("#toIframe").attr("src", url);
$("#textRea").hide();
$("#divCCForm").hide();
isFrm = false;
isDtl = true;
key = obj.data.CtrlID;
name = obj.data.Lab;
}
if (obj.data.CtrlType == "Attr") {
IniAttr(obj.data);
}
if (obj.data.CtrlType == "Ath") {
$("#toIframe").show();
$("#Title").html('')
var url = basePath + "/WF/CCForm/Ath.htm?1=1&AthPK=" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
$("#toIframe").attr("src", url);
$("#textRea").hide();
$("#divCCForm").hide();
}
if (obj.data.CtrlType == "ChapterFrmLinkFrm") {
$("#toIframe").show();
var url = basePath + "/WF/CCForm/Frm.htm?IsReadonly=1&FrmID=" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + obj.data.CtrlID + "&FK_Node=" + GetQueryString("FK_Node");
$("#toIframe").attr("src", url);
$("#textRea").hide();
$("#Title").html('')
$("#divCCForm").hide();
isFrm = true;
key = obj.data.CtrlID;
isDtl = false;
}
if (obj.data.CtrlType == "ChapterFrmSelfUrl") {
$("#toIframe").show();
var url = '';
if (obj.data.CtrlID.indexOf('http') == 0)
if (obj.data.CtrlID.indexOf('?') > -1) {
url = obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
} else {
url = obj.data.CtrlID + "?" + "OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
}
else {
if (obj.data.CtrlID.indexOf('?') > -1) {
url = basePath + "/" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
} else {
url = basePath + "/" + obj.data.CtrlID + "?" + "OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
}
}
$("#toIframe").attr("src", url);
$("#textRea").hide();
$("#divCCForm").hide();
$("#Title").html('')
}
$('.layui-tree-set').removeClass("tree-txt-active");
$(obj.elem[0]).addClass("tree-txt-active");
}
}
});
// 判断第一项是否有子集 并选中状态 跳转iframe页面
function treeSet() {
treelist = document.querySelectorAll('.layui-tree-pack >.layui-tree-set');
treelist.forEach((item, index) => {
//var main = $(item).find('.layui-tree-txt');
//var hm = `<span>(${index + 1})&nbsp;</span>`;
//$(main).before(hm);
//$(item).find('.layui-tree-iconClick').hide();
db.push({
"attrKey": item.dataset.id,
"vals": '',
});
})
Tree_set = document.querySelectorAll('.layui-tree>.layui-tree-set');
Tree_set.forEach((item, index) => {
$(item).attr("title", group[index].title);
$(item).attr("id", "Pnode" + group[index].OID);
var main = $(item).find('.layui-tree-pack ');
// var h = `<i class="icon-check rate"></i>`;
// $(item).find(".layui-tree-main").append(h);
//替换 tree icon
if (item.childNodes.length == 1) {
var sclass = $(item).find('.layui-tree-iconClick');
$(sclass).empty();
if (group[index].CtrlType == "Dtl") {
// let i = `<i class="icon-notebook"></i>`
let i = `<i class="icon-folder"></i>`
$(sclass).html(i);
}
if (group[index].CtrlType == "Attr") {
// let i = `<i class="icon-notebook"></i>`
let i = `<i class="icon-folder"></i>`
$(sclass).html(i);
}
if (group[index].CtrlType == "Ath") {
let i = `<i class="icon-paper-clip"></i>`
$(sclass).html(i);
}
if (group[index].CtrlType == "ChapterFrmLinkFrm") {
let i = `<i class="icon-folder"></i>`
$(sclass).html(i);
}
if (group[index].CtrlType == "ChapterFrmSelfUrl") {
let i = `<i class="icon-folder"></i>`
$(sclass).html(i);
}
} else {
var sclass = $(item).find('.layui-tree-iconClick');
$(sclass).empty();
$(sclass).removeClass("layui-tree-icon")
let i = `<i class="icon-folder"></i>`
$(sclass).html(i);
}
})
showType(group, Tree_set)
}
treeSet();
});
//递归构造章节树形结构获取parentId的孩子
function getChildren(parentId) {
var children = [];
groupFields.forEach((item) => {
if (item.ParentOID === parentId) {
var child = {
id: item.OID.toString(),
title: item.Lab,
children: [],
attrChildren: [],
...item,
};
if ((showGroup.length > 0 && showGroup.indexOf(child.id) > -1) || showGroup.length === 0) {//看设置是否显示
if (item.CtrlType === "Attr") {
child.attrChildren = getAttrChildren(item.OID.toString(), item.CtrlType);
} else {
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 [];
for (var i = 0; i < attrs.length; i++) {
var attr = attrs[i];
if (attr.MyDataType != 1 && ctrlType == "")
continue;
if (attr.GroupID === groupId && attr.UIVisible === 1) {//只显示可见的字段
var attr = {
id: attr.KeyOfEn,
title: attr.Name,
...attr,
};
if (attr.UIContralType == 1) {//如果是下拉框,存储下拉列表值
if (attr.MyDataType == 2)//枚举下拉
attr.DDLlist = $.grep(data['Sys_Enum'], function (item, index) {
return item.EnumKey == attr.KeyOfEn;
});
else if (attr.MyDataType == 1)//下拉单选
attr.DDLlist = data[attr.KeyOfEn];
}
else if (attr.UIContralType == 3 && attr.MyDataType == 2) {//枚举单选 radio
attr.DDLlist = $.grep(data['Sys_Enum'], function (item, index) {
return item.EnumKey == attr.KeyOfEn;
});
}
if ((showAttrs.length > 0 && showAttrs.indexOf(attr.KeyOfEn) > -1) || showAttrs.length === 0) {//看是否设置显示
if ((ctrlType === "" || ctrlType == null) && attr.TextModel != 1) {//默认型控件,只显示文本字段
if (attr.MyDataType == 1 && attr.UIContralType == 0) {
attrList.push(attr);
};
} else if (ctrlType === "Attr") {//Attr控件所有类型的字段都显示
attrList.push(attr);
};
};
};
};
return attrList;
}
function showType(group, Tree_set) {
let n = 0;
group.forEach((item, index) => {
if (item.ShowType == 2) {
n = n + 1;
const Id = item.OID;
console.log($(`#Pnode${Id}`))
$(`#Pnode${Id}`).hide()
}
})
if (n == group.length) {
$("#menuShow").hide()
}
}
function ChapterFrmShow(attrKey) {
InitPara();
if (attrKey == null || attrKey == "") {
alert("字段值为空.");
return;
}
var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
handler.AddPara("FrmID", frmID);
handler.AddPara("OID", oid);
handler.AddPara("KeyOfEn", attrKey);
var data = handler.DoMethodReturnString("ChapterFrm_InitOneField");
AddNoDuplicateElements(attrKey, data);
}
//添加title名
function addtitle(key) {
group.forEach((item, index) => {
if (item.children.length > 0) {
item.children.forEach(ite => {
if (ite.id == key) {
name = ite.Name;
$("#Title").html(name)
}
})
}
});
}
//append html
function AddNoDuplicateElements(ele, data) {
if (ptype != 'print') {
var aphtml = `<div class="itemlist" id="ele_${ele}">
<div id="title_${ele}"></div>
<div><h4 id="n_${ele}"></h4><p>${data}</p></div>
</div>`
var arr = []
arr.push(ele)
for (var i = 0; i < arr.length; i++) {
if (apArr.indexOf(arr[i]) === -1) {
apArr.push(arr[i]);
$("#docs").append(aphtml);
}
}
$("#docs .itemlist").hide();
$("#ele_" + ele).show();
addtitle(ele)
} else {
var aphtml = `<div class="itemlist">
<div id="tit_${ele}"></div>
<div><h4 id="nt_${ele}"></h4><p>${data}</p></div>
</div>`
$("#print").append(aphtml);
addtitle(ele)
}
}
function getContent(KeyOfEn) {
//var cdata = ChapterFrmShow(KeyOfEn);
//changeDBval(cdata, KeyOfEn);
//var Cdata = tinymce.activeEditor.getContent();
//ChapterFrmSave(key, Cdata);
//key = KeyOfEn;
//var Data = ChapterFrmShow(key);
//tinymce.activeEditor.setContent(Data);
var cdata = ChapterFrmShow(KeyOfEn);
changeDBval(cdata, KeyOfEn);
var Cdata = '';
if (tinymce.activeEditor !== null) {
Cdata = tinymce.activeEditor.getContent();
}
//ChapterFrmSave(key, Cdata);
key = KeyOfEn;
var Data = ChapterFrmShow(key);
if (tinymce.activeEditor !== null) {
tinymce.activeEditor.setContent(Data);
}
// setTimeout(ArcScorll('#mytextarea_ifr'), 3000)
}
})
</script>
<style type="text/css">
html, body {
height: 100%;
}
.app {
height: 100%;
width: 100%;
display: flex;
}
.border_1 {
border: 1px solid #ccc;
height: 100%;
}
.padding-5 {
padding: 10px;
}
.tree-txt-active {
background: #dcdcdc;
}
.layui-tree-entry .layui-tree-txt {
font-weight: 600;
}
.layui-tree-pack .layui-tree-txt {
font-weight: 300;
}
.layui-tab-title {
text-align: center
}
.layui-tab-content {
padding: 0;
}
.h-100 {
height: 100vh;
overflow: auto;
}
#textRea {
height: 100%;
}
#toIframe {
display: none;
width: 100%;
border: none;
height: 94.5vh !important;
}
.tipsul {
padding: 20px;
}
.tipsul h3 {
font-weight: bold !important;
margin-bottom: 5px !important;
}
.tipsul li {
font-size: 18px;
}
.tipsul small {
font-size: 16px !important;
margin-left: 20px !important;
}
.labelTitle {
height: 40px;
text-align: center;
padding-right: 28px;
line-height: 40px;
background: #fff;
}
.labelTitle #Title {
font-size: 18px;
font-weight: bold;
}
.layui-right {
float: right;
margin-top: 5px;
}
.layui-row {
/*height: 100vh;*/
}
.tox-tinymce {
height: calc(100% - 40px) !important;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px #999;
background-color: #999;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #ddd;
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 4px;
height: 0px;
background-color: #F5F5F5;
}
.rate {
color: green;
font-size: 12px;
display: none;
margin-left: 5px;
}
#menu {
display: none;
width: 30%;
}
#scrollDiv {
width: 100%
}
.Card_body {
width: 70%;
}
.welcome {
height: calc(100% - 120px);
background-color: white;
display: flex;
justify-content: center;
align-items: flex-start;
color: #2396e5;
font-size: 30px;
}
.layui-form-label {
width: calc(100% - 48px);
}
</style>
</head>
<body id="content" style="overflow:hidden">
<!--startprint1-->
<div class="layui-row">
<div class="layui-col-sm3 layui-col-md3 layui-col-xs3">
<div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div id="test1" class="demo-tree demo-tree-box" style="height: calc(100vh - 70px); overflow-x: auto "></div>
</div>
</div>
</div>
</div>
<div class="layui-col-sm9 layui-col-md9 layui-col-xs9" style="overflow-y:hidden">
<div class="layui-card">
<div class="layui-card-header">
<!--<div class="labelTitle" id="Title"></div>-->
<!--<div class="layui-right" id="template">
<button class="layui-btn layui-btn-primary layui-btn-sm">审阅&版本</button>
</div>-->
</div>
<div class="layui-card-body" >
<div class="layui-form" id="textRea">
<div id="docs"></div>
</div>
<div class="layui-form">
<iframe id="toIframe" frameborder="0" style="width: 100%; overflow-y: scroll;" ></iframe>
</div>
<!--表单内部信息-->
<div class="layui-fluid fluid">
<div class="layui-row layui-col-space15" id="ContentDiv">
<!-- 内容主体区域 -->
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<form id="divCCForm" class="layui-form">
<!--加载表单的信息-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--endprint1-->
</body>
</html>