414 lines
13 KiB
JavaScript
414 lines
13 KiB
JavaScript
var setting = {
|
|
view: {
|
|
showIcon: false,
|
|
showLine: false,
|
|
nameIsHTML: true,
|
|
selectedMulti: false,
|
|
autoCancelSelected: false,
|
|
},
|
|
callback: {
|
|
beforeClick: onClick,
|
|
onDrop: zTreeOnDrop,
|
|
onRemove: zTreeOnRemove,
|
|
beforeDrop: zTreeBeforeDrop,
|
|
beforeDrag: zTreeBeforeDrag,
|
|
beforeRemove: zTreeBeforeRemove,
|
|
beforeRename: zTreeBeforeRename,
|
|
},
|
|
edit: {
|
|
drag: {
|
|
isCopy: false,
|
|
isMove: true,
|
|
prev: true,
|
|
inner: canInner,
|
|
next: true,
|
|
},
|
|
enable: true,
|
|
showRenameBtn: false,
|
|
showRemoveBtn: false
|
|
},
|
|
data: {
|
|
simpleData: {
|
|
enable: true
|
|
}
|
|
}
|
|
};
|
|
|
|
var infoTree = {};
|
|
var detailTree = {};
|
|
|
|
$(function () {
|
|
setSummaryType(pageObj.SummaryType);
|
|
$("#myTab li a").on("click", function (e) {
|
|
setSummaryType($(e.target).text());
|
|
});
|
|
});
|
|
|
|
function syncValue(obj) {
|
|
if (obj.id.endsWith("_ColumnType")) {
|
|
var optionIdStr = obj.id.replace("ColumnType", "ColumnOptions");
|
|
$("#" + optionIdStr).attr('readonly', $(obj).val() < 3)
|
|
}
|
|
var idStr = '#' + $(obj).prop('id') + '_span';
|
|
$(idStr).text($(obj).val());
|
|
}
|
|
|
|
function setSummaryType(summaryType) {
|
|
$("#myTab li").removeClass("active");
|
|
$("#myTab :contains('" + summaryType + "')").parent().addClass("active");
|
|
$("[tag]").hide();
|
|
$("[tag*='" + summaryType + "']").show();
|
|
|
|
LoadStructureInfo($("#myTab a:contains('" + summaryType + "')").attr("value"));
|
|
}
|
|
|
|
function canInner(treeId, nodes, targetNode) {
|
|
return !(targetNode && targetNode.level === 0);
|
|
}
|
|
|
|
function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
|
|
return !(targetNode == null || targetNode.id <= 0);
|
|
}
|
|
|
|
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
|
|
var objs = [];
|
|
var tree = treeId == "infoTree" ? infoTree : detailTree;
|
|
var notes = tree.getNodes();
|
|
notes.forEach((item) => {
|
|
if (item.id > 0) {
|
|
var obj = ConvertNoteToObj(treeId, item);
|
|
objs.push(obj);
|
|
}
|
|
});
|
|
if (!save(treeId, objs)) {
|
|
treeId == "infoTree"
|
|
? LoadStructureInfo(objs[0].Range)
|
|
: LoadStructureDetail(objs[0].StructureId)
|
|
}
|
|
}
|
|
|
|
function zTreeOnRemove(event, treeId, treeNode) {
|
|
var tree = treeId == "infoTree" ? infoTree : detailTree;
|
|
var nodes = tree.getNodes();
|
|
if (nodes.length > 2) {
|
|
tree.selectNode(nodes[1]);
|
|
if (treeId == "infoTree") {
|
|
onClick("infoTree", nodes[1], 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
function zTreeBeforeDrag(treeId, treeNodes) {
|
|
var status = true;
|
|
treeNodes.forEach((item, index) => { if (item.id <= 0) { status = false; } });
|
|
return status;
|
|
}
|
|
|
|
function zTreeBeforeRemove(treeId, treeNode) {
|
|
var status = true;
|
|
if (treeNode.id > 0) {
|
|
status = false;
|
|
var url = "/StructureInfo/{0}".template(treeId == "infoTree" ? "DeleteStructureInfo" : "DeleteStructureDetails")
|
|
var opt = {
|
|
url: url,
|
|
async: false,
|
|
data: { id: treeNode.id },
|
|
success: function (res) {
|
|
status = res.success;
|
|
res.msg && main.message(res.msg);
|
|
},
|
|
error: function (res) {
|
|
main.alert("删除失败:" + res.msg);
|
|
}
|
|
};
|
|
main.ajax(opt);
|
|
}
|
|
return status;
|
|
}
|
|
|
|
function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
|
|
if (!newName) { return false; }
|
|
treeNode.name = newName;
|
|
var obj = ConvertNoteToObj(treeId, treeNode);
|
|
var objs = [obj];
|
|
var status = save(treeId, objs);
|
|
if (status) {
|
|
treeId == "infoTree"
|
|
? LoadStructureInfo(objs[0].Range)
|
|
: LoadStructureDetail(objs[0].StructureId)
|
|
}
|
|
return status;
|
|
}
|
|
|
|
function save(treeId, objs) {
|
|
var postData = { objs: objs };
|
|
if (treeId === "infoTree") {
|
|
url = "/StructureInfo/SaveStructureInfo";
|
|
postData["range"] = $("#myTab .active a").attr("value");
|
|
}
|
|
else {
|
|
url = "/StructureInfo/SaveStructureDetails";
|
|
postData["id"] = objs[0].StructureId;
|
|
}
|
|
var status = false;
|
|
var opt = {
|
|
url: url,
|
|
data: postData,
|
|
async: false,
|
|
success: function (res) {
|
|
status = res.success;
|
|
res.msg && main.message(res.msg);
|
|
},
|
|
error: function (res) {
|
|
main.alert("保存失败:" + res.msg);
|
|
}
|
|
};
|
|
main.ajax(opt);
|
|
return status;
|
|
}
|
|
|
|
function onClick(event, treeNode, treeId) {
|
|
if (treeNode == null || treeNode.id < 0) {
|
|
return false;
|
|
}
|
|
if (treeNode.id > 0) {
|
|
if (event == "infoTree") {
|
|
LoadStructureDetail(treeNode.id);
|
|
}
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function OptFunc(treeName, optType) {
|
|
var selecter = "";
|
|
if (treeName == "infoTree") {
|
|
selecter = ".rename";
|
|
} else {
|
|
selecter = "[edit]:visible";
|
|
}
|
|
if (optType < 3 && $(selecter).length) {
|
|
return;
|
|
}
|
|
var tree = treeName == "infoTree" ? infoTree : detailTree;
|
|
var notes = tree.getSelectedNodes();
|
|
switch (optType) {
|
|
case 1://新增
|
|
AddNote(treeName);
|
|
break;
|
|
case 2://修改
|
|
if (notes.length) {
|
|
notes.forEach((item) => {
|
|
if (treeName === "infoTree") {
|
|
tree.editName(item);
|
|
} else {
|
|
$("#" + item.id + "_Info [show]").hide()
|
|
$("#" + item.id + "_Info [edit]").show()
|
|
$("[edit]:visible:first").focus();
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
case 3://删除
|
|
if (notes.length) {
|
|
notes.forEach((item) => {
|
|
tree.removeNode(item, true);
|
|
});
|
|
}
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
|
|
function AddNote(treeName) {
|
|
var tree = treeName == "infoTree" ? infoTree : detailTree;
|
|
var newNode = { id: 0, name: "" };
|
|
if (treeName != "infoTree") {
|
|
var structureNotes = infoTree.getSelectedNodes();
|
|
if (!structureNotes.length || !structureNotes.find((O) => O.id > 0)) { return; }
|
|
newNode = GetDetailNote(0, structureNotes[0].id, "", "", "", "", true);
|
|
}
|
|
var index = tree.getNodes().length - 1;
|
|
newNode = tree.addNodes(null, index, newNode);
|
|
if (treeName == "infoTree") {
|
|
tree.editName(newNode[0]);
|
|
InitDetailTree([]);
|
|
} else {
|
|
var focus = false;
|
|
$("#0_Info [edit]").bind("focus", function (e) {
|
|
console.log("focus ==> " + e.target.id)
|
|
focus = true;
|
|
}).bind("blur", function (e) {
|
|
console.log("blur ==> " + e.target.id)
|
|
focus = false;
|
|
setTimeout(() => {
|
|
if (focus) { return; }
|
|
var obj = ConvertNoteToObj(treeName, newNode[0]);
|
|
if (!obj.ColumnName) { return; }
|
|
var objs = [obj];
|
|
if (save(treeName, objs)) {
|
|
LoadStructureDetail(obj.StructureId)
|
|
}
|
|
}, 500);
|
|
});
|
|
detailTree.selectNode(newNode[0]);
|
|
$("[edit]:visible:first").focus();
|
|
}
|
|
}
|
|
|
|
function ConvertNoteToObj(treeName, treeNote) {
|
|
var tree = treeName == "infoTree" ? infoTree : detailTree;
|
|
var obj = {
|
|
id: treeNote.id,
|
|
SortIndex: tree.getNodeIndex(treeNote)
|
|
};
|
|
if (treeName === "infoTree") {
|
|
obj["StructureName"] = treeNote.name;
|
|
obj["Range"] = $("#myTab .active a").attr("value");
|
|
}
|
|
else {
|
|
var detailNotes = detailTree.getSelectedNodes();
|
|
obj["StructureId"] = $("#" + treeNote.id + "_Structure_span").text();
|
|
obj["ColumnName"] = $("#" + treeNote.id + "_ColumnName").val();
|
|
obj["ColumnType"] = $("#" + treeNote.id + "_ColumnType").val();
|
|
obj["ColumnOptions"] = $("#" + treeNote.id + "_ColumnOptions").val();
|
|
obj["ColumnDefaultValue"] = $("#" + treeNote.id + "_ColumnDefaultValue").val();
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
function GetOptNote(treeName) {
|
|
var optHtml = "<div title='操作区域'>";
|
|
optHtml += "<input type='button' class='wentiEdit' onclick='OptFunc(\"{0}\",1)' title='增加' value='增加'></input>"
|
|
optHtml += "<input type='button' class='wentiEdit' onclick='OptFunc(\"{0}\",2)' title='修改' value='修改'></input>";
|
|
optHtml += "<input type='button' class='wentiEdit' onclick='OptFunc(\"{0}\",3)' title='删除' value='删除'></input>";
|
|
optHtml += "</div>";
|
|
optHtml = optHtml.template(treeName);
|
|
return { id: -1, name: optHtml };
|
|
}
|
|
|
|
function InitInfoTree(items) {
|
|
var nodes = [{ id: -2, name: "结构名" }];
|
|
items.forEach((item, index) => {
|
|
nodes.push(item);
|
|
});
|
|
nodes.push(GetOptNote("infoTree"));
|
|
if (infoTree.setting) {
|
|
infoTree.destroy();
|
|
}
|
|
infoTree = $.fn.zTree.init($("#infoTree"), setting, nodes);
|
|
//infoTree.expandAll(true);
|
|
var nodes = infoTree.getNodes();
|
|
InitDetailTree([]);
|
|
if (items.length > 0) {
|
|
infoTree.selectNode(nodes[1]);
|
|
onClick("infoTree", nodes[1], 1);
|
|
}
|
|
}
|
|
|
|
function InitDetailTree(items) {
|
|
var nodes = [GetDetailNote(-2, 0, "字段名", "字段类型", "可选值", "默认值")];
|
|
items.forEach((item, index) => {
|
|
nodes.push(item);
|
|
});
|
|
nodes.push(GetOptNote("detailTree"));
|
|
if (detailTree.setting) {
|
|
detailTree.destroy();
|
|
}
|
|
detailTree = $.fn.zTree.init($("#detailTree"), setting, nodes);
|
|
//detailTree.expandAll(true);
|
|
if (items.length > 0) {
|
|
var nodes = detailTree.getNodes();
|
|
detailTree.selectNode(nodes[1]);
|
|
}
|
|
var focus = false;
|
|
$("[edit]").bind("focus", function (e) {
|
|
console.log("focus ==> " + e.target.id)
|
|
focus = true;
|
|
}).bind("blur", function (e) {
|
|
console.log("blur ==> " + e.target.id)
|
|
focus = false;
|
|
setTimeout(() => {
|
|
if (!focus) {
|
|
var tid = $("#" + e.currentTarget.id).parents("li[class='level0']").attr("id");
|
|
var note = detailTree.getNodeByTId(tid);
|
|
var obj = ConvertNoteToObj("detailTree", note);
|
|
var objs = [obj];
|
|
if (save("detailTree", objs)) {
|
|
LoadStructureDetail(obj.StructureId)
|
|
}
|
|
}
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
function LoadStructureInfo(range) {
|
|
var opt = {
|
|
url: "/StructureInfo/QueryStructureInfo",
|
|
data: { range: range },
|
|
success: function (res) {
|
|
if (res.success) {
|
|
var nodes = [];
|
|
res.obj.forEach((item, index) => {
|
|
nodes.push({ id: item.id, name: item.StructureName });
|
|
});
|
|
InitInfoTree(nodes);
|
|
}
|
|
},
|
|
error: function (res) {
|
|
main.alert("error:" + res.msg);
|
|
}
|
|
};
|
|
main.ajax(opt);
|
|
}
|
|
|
|
function GetDetailNote(id, structureId, columnName, columnType, columnOptions, columnDefaultValue, editStatus = false) {
|
|
html = "<span id='{0}_Info'>";
|
|
if (id >= 0) {
|
|
html += "<input id='{0}_ColumnName' class='columnInfo' {5} edit value='{1}' title='字段名' type='text' onchange='syncValue(this)'>";
|
|
html += "<select id='{0}_ColumnType' class='columnInfo' {5} edit title='字段类型' onchange='syncValue(this)'>";
|
|
for (var key in pageObj.ColumnTypes) {
|
|
html += "<option value='" + key + "'" + (key == columnType ? "selected" : "") + ">" + pageObj.ColumnTypes[key] + "</option>";
|
|
}
|
|
html += "</select>";
|
|
html += "<input id='{0}_ColumnOptions' class='columnInfo' {5} edit value='{3}' title='可选值\r\n仅当字段类型为下拉列表时可用\r\n多个选项之间用逗号分隔' type='text' " + (columnType > 2 ? "" : "readonly") + " onchange='syncValue(this)'>";
|
|
html += "<input id='{0}_ColumnDefaultValue' class='columnInfo' {5} edit value='{4}' title='默认值' type='text' onchange='syncValue(this)'>";
|
|
}
|
|
html += "<span id='{0}_Structure_span' class='columnInfo' style='display: none;'>{7}</span>";
|
|
html += "<span id='{0}_ColumnName_span' class='columnInfo' title='字段名' {6} show>{1}</span>";
|
|
html += "<span id='{0}_ColumnType_span' class='columnInfo' title='字段值' {6} show>{2}</span>";
|
|
html += "<span id='{0}_ColumnOptions_span' class='columnInfo' {6} title='可选值' show>{3}</span>";
|
|
html += "<span id='{0}_ColumnDefaultValue_span' class='columnInfo' {6} title='默认值' show>{4}</span>";
|
|
html += "</span>";
|
|
html = html.template(
|
|
id,
|
|
columnName,
|
|
pageObj.ColumnTypes[columnType] || columnType,
|
|
columnOptions,
|
|
columnDefaultValue,
|
|
(editStatus ? "" : "style='display: none;'"),
|
|
(editStatus ? "style='display: none;'" : ""),
|
|
structureId);
|
|
return { id: id, name: html };
|
|
}
|
|
|
|
function LoadStructureDetail(structureId) {
|
|
var opt = {
|
|
url: "/StructureInfo/QueryStructureDetails",
|
|
data: { id: structureId },
|
|
success: function (res) {
|
|
if (res.success) {
|
|
var nodes = [];
|
|
res.obj.forEach((item, index) => {
|
|
nodes.push(GetDetailNote(item.id, structureId, item.ColumnName, item.ColumnType, item.ColumnOptions, item.ColumnDefaultValue));
|
|
});
|
|
InitDetailTree(nodes);
|
|
}
|
|
},
|
|
error: function (res) {
|
|
main.alert("error:" + res.msg);
|
|
}
|
|
};
|
|
main.ajax(opt);
|
|
} |