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.

396 lines
16 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 language="JavaScript" src="../../Comm/JScript.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/bootstrap/js/jquery.min.js"></script>
<script src="../../Scripts/QueryString.js" type="text/javascript"></script>
<!--<link href="../../../DataUser/Style/table0.css" rel="stylesheet" type="text/css" />-->
<!--layui的引用-->
<link href="../../Scripts/easyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
<script src="../../Scripts/layui/layui/layui.js" type="text/javascript"></script>
<!-- end -->
<!-- 引用通用的js文件. -->
<script type="text/javascript" src="../../Scripts/config.js"></script>
<script type="text/javascript" src="../../Scripts/PinYin.js"></script>
<script type="text/javascript" src="../../Comm/Gener.js"></script>
<script src="../../Scripts/layui/treeTable.js"></script>
<script type="text/javascript" language="javascript">
var maxIndx = 0; //定义新增之后的最大序号
var fk_sftable = GetQueryString("FK_SFTable");
var QueryType = GetQueryString("QueryType");
var ens;//获取的字典表的数据
var data = [];//表格的数据
var table;//表格
layui.use(['tree', 'jquery', 'laypage', 'treeTable', 'table', 'layer', 'dropdown'], function () {
var treeTable = layui.treeTable;
var form = layui.form;
var dropdown = layui.dropdown;
$(function () {
InitPage();
});
//初始化页面
function InitPage() {
data = [];
ens = new Entities("BP.Sys.SFTableDtls");
ens.Retrieve("FK_SFTable", fk_sftable);
if (ens.toString().indexOf("err@") != -1) {
alert(ens);
return;
}
//ens对象变为数组
var keys = Object.keys(ens);
keys.forEach((key, index) => {
if (!isNaN(parseInt(key))) {
var node = {
...ens[key],
id: ens[key].BH,
index: index,
tool:"toolbar"
}
data.push(node);
}
});
console.log("树形表格数据:", data,ens);
maxIndx = ens.length-1;
//渲染表格
tableRender();
//外键是sql形式的时候只能查看
if (QueryType == "Sql") {
$(".layui-card-header").hide();
$(".droplist").hide();
}
};
//渲染表格方法
function tableRender() {
table = treeTable.render({
elem: '#treeTable',
data: data,
id: 'treeTable',
tree: {
treeSpid: '0', //最上级的父级id
iconIndex: 1,
isPidData: true,
idName: 'BH',//父ID
pidName: 'ParentNo',//子ID
openName: 'open',// 是否默认展开的字段名
},
cols: [[
{ type: 'numbers', fixed: 'left' ,title:"#"}
, { field: 'BH', title: '编号', width: 300, templet: "<span name='TB_BH_{{ d.index }}' id='TB_BH_{{ d.index }}'>{{d.BH}}<span>" }
, { field: 'Name', title: '名称', templet: "<div><input class='layui-input' name='TB_Name_{{d.index}}' id='TB_Name_{{d.index}}' type='text' value='{{d.Name}}' style='width:98%;'/></div>" }
, { width: 100, align: 'center', title: '操作', toolbar: "#tool", fixed: 'right' }
]],
style: 'margin-top:0;',
done: function (res, curr, count) {
dropdown.render({
elem: ".droplist",
data: [{
id: "0",
title: "addBro",
templet: "<div>新建同级<div>"
},
{
id: "1",
title: "addChild",
templet: "<div>新建下级<div>"
},
{
id: "2",
title: "levelUp",
templet: "<div>升级<div>"
},
{
id: "3",
title: "levelDown",
templet: "<div>降级<div>"
},
{
id: "4",
title: "delete",
templet: "<div>删除<div>"
}
],
click: function (data, othis) {
var elem = $(this.elem)
, rowId = elem.data('id'); //表格列表的预埋数据
if (data.title === "addBro") {
addBro(rowId);
} else if (data.title === "addChild") {
addChild(rowId);
} else if (data.title === "delete") {
Delete(rowId, res);
} else if (data.title === "levelUp") {
levelUp(rowId);
} else if (data.title === "levelDown") {
levelDown(rowId,res);
};
}
});
}
});
}
//新建同级 id:本条数据的id
function addBro(id) {
//获取本条数据
var thisRow = data.filter((item) => item.BH === id)[0];
if (thisRow.ParentNo === "0") {
layer.msg('只能有一个根节点', { icon: 7 });
return;
};
maxIndx++;
var en = new Entity("BP.Sys.SFTableDtl");
en.SetValByKey("FK_SFTable", fk_sftable);
en.SetValByKey("ParentNo", thisRow.ParentNo);
var newNode = {
...en,
id: maxIndx,
index: maxIndx,
};
data.push(newNode);
tableRender();
table.expand(thisRow.id, true);
};
//新建下级
function addChild(id) {
//获取本条数据
var thisRow = data.filter((item) => item.BH === id)[0];
maxIndx++;
var en = new Entity("BP.Sys.SFTableDtl");
en.SetValByKey("FK_SFTable", fk_sftable);
en.SetValByKey("ParentNo", thisRow.BH);
var newNode = {
...en,
id: maxIndx,
index: maxIndx,
};
data.push(newNode);
tableRender();
table.expand(thisRow.id, true);
};
//升级
function levelUp(id) {
//获取本条数据
var thisRow = data.filter((item) => item.BH === id)[0];
if (thisRow.ParentNo === "0") {
layer.msg('当前节点已经是根节点,不能升级', { icon: 7 });
return;
}
//获取父亲节点,如果父亲节点是根节点不能升级
var thisRowParent = data.filter((item) => item.BH === thisRow.ParentNo && item.ParentNo != "0")[0];
if (!thisRowParent) {
layer.msg('只能有一个根节点', { icon: 7 });
return;
}
var en = new Entity("BP.Sys.SFTableDtl");
var { id, index, children, ...item } = thisRow;
en.CopyJSON(item);
en.SetValByKey("ParentNo", thisRowParent.ParentNo);
en.SetPKVal(item.MyPK);
en.Update();
InitPage();
};
//降级 成为相邻兄弟的孩子,没有兄弟不能降级
function levelDown(id, list) {
//获取本条数据
var thisRow = data.filter((item) => item.BH === id)[0];
//获取本节点的父节点结构,判断是否有兄弟
var parentNode = findNode(thisRow.ParentNo, list);
if (!parentNode || !parentNode.children || parentNode.children.length <= 1) {
layer.msg('当前节点不可降级', { icon: 7 });
return;
}
var thisIndex;
parentNode.children.forEach((item, index) => {
if (item.BH === thisRow.BH) {
thisIndex = index;
}
});
thisIndex = thisIndex == 0 ? thisIndex + 1 : thisIndex - 1;
var { id, index, children, ...item } = thisRow;
var en = new Entity("BP.Sys.SFTableDtl");
en.CopyJSON(item);
en.SetValByKey("ParentNo", parentNode.children[thisIndex].BH);
en.SetPKVal(item.MyPK);
en.Update();
InitPage();
}
//监听保存
$("#save").click(function () {
Save();
});
//保存.
function Save() {
//保存更新
for (var i = 0; i < ens.length; i++) {
var newName = $("#TB_Name_" + i).val();
if (data[i].Name != newName) {//名称改变了才更新数据库
var en = new Entity("BP.Sys.SFTableDtl");
var {id,index,...item } = data[i];
en.CopyJSON(item);
en.SetPKVal(data[i].MyPK);
en.SetValByKey("Name", newName);
en.Update();
};
};
//保存新增
for (var j = ens.length; j < maxIndx + 1; j++) {
var Name = $("#TB_Name_" + j).val();
if (Name) {
var en = new Entity("BP.Sys.SFTableDtl");
en.SetValByKey("FK_SFTable", fk_sftable);
en.SetValByKey("Name", Name);
en.SetValByKey("ParentNo", data[j].ParentNo);
en.Insert();
}
}
InitPage(); //刷新.
table.expandAll();
}
//删除 id:本行的idlist:树形数组
function Delete(id, list) {
var thisNode = findNode(id, list);
deleteAllSon(thisNode);
InitPage(); //刷新.
return;
if (window.confirm('将会删除所有子节点,您确定要删除吗?') == false)
return;
InitPage(); //刷新.
table.expand(id);
};
//递归寻找当前节点 返回当前节点 及其孩子结构
function findNode(id, list) {
for (var i = 0; i < list.length; i++) {
if (list[i].id === id) {
return list[i];
};
if (list[i].children && list[i].children.length > 0) {
var findRes = findNode(id, list[i].children);
if (findRes != null)
return findRes;
}
};
return null;
};
//递归删除本节点及所有后代节点
function deleteAllSon(node) {
if (node.children && node.children.length > 0) {
for (var i = 0; i < node.children.length; i++) {
var haveChild = deleteAllSon(node.children[i]);
if (haveChild === "noChild") {
var en = new Entity("BP.Sys.SFTableDtl");
en.SetValByKey("FK_SFTable", fk_sftable);
en.SetPKVal(node.MyPK);
en.Delete();
}
return "noChild";
}
} else {
var en = new Entity("BP.Sys.SFTableDtl");
en.SetValByKey("FK_SFTable", fk_sftable);
en.SetPKVal(node.MyPK);
en.Delete();
return "noChild";
}
};
});
//选中所有
function SelectAll(obj) {
var checkeds = $("input[type='checkbox']");
if (obj.checked == true) {
//获取name=box的复选框 遍历输出复选框
for (var i = 0; i < checkeds.length; i++) {
checkeds[i].checked = true;
}
} else {
for (var i = 0; i < checkeds.length; i++) {
checkeds[i].checked = false;
}
}
}
</script>
<style>
#divCCForm {
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
td[data-field="tool"] .ew-tree-table-cell.single-line .ew-tree-table-cell-content {
overflow: visible;
}
.ew-tree-table .ew-tree-table-box {
height: calc(100vh - 88px);
}
.layui-table-body {
height: calc(100vh - 77px);
}
</style>
</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-header" style="align-items: center;display: flex; justify-content: flex-end;">
<button id="save" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-file"></i>保存
</button>
</div>
<div class="layui-card-body layui-table-body layui-table-main">
<table class="layui-hide" id="treeTable" lay-filter="treeTable"></table>
</div>
<!-- 表格操作列---start -->
<script id="tool" type="text/html">
<button class="layui-btn layui-btn-xs droplist" data-id={{d.id}}>
<span>操作</span>
<i class="layui-icon layui-icon-triangle-d"></i>
</button>
</script>
<script id="toolbar_content" type="text/html">
<ul class="layui-dropdown-menu lay_menu">
<li lay-event="addBro">新建同级</li>
<li lay-event="addChild">新建下级</li>
<li lay-event="delete">新建删除级</li>
</ul>
</script>
<!-- 表格操作列---end -->
</div>
</div>
</div>
</div>
</body>
</html>