jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend][圖資管理] 麵包屑文字顯示 | 列表欄位調整

Browse Source
This commit is contained in:
dev01 2023-01-03 18:30:34 +08:00
parent c4a1360677
commit 0fef2791c1
1 changed files with 64 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
Frontend/_graphManagement.html
View File

@ -7,16 +7,20 @@
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-2">
<div class="row d-inline-block col-12 alert alert-secondary p-1 px-2 mb-0">
<span><i class="fas fa-exclamation-circle mr-2"></i>按右鍵即可展開選單</span>
</div>
<div class="row d-inline-block col-12 p-0 my-2 text-center"> <div class="row d-inline-block col-12 p-0 my-2 text-center">
<input id="graCatSearch" name="graCatSearch" type="text" class="form-control form-control-sm d-inline-block" placeholder="搜尋" /> <input id="graCatSearch" name="graCatSearch" type="text" class="form-control form-control-sm d-inline-block" placeholder="搜尋" />
</div> </div>
<div class="d-flex" id="graTree"></div> <div class="d-flex" id="graTree"></div>
</div> </div>
<div class="col-10"> <div class="col-10">
<div class="my-2"> <div class="row my-2">
<a href="javascript:;" id="creGraMan" class="btn btn-success"> <a href="javascript:;" id="creGraMan" class="btn btn-success">
+新增 +新增
</a> </a>
<label id="curLevText" class="ml-3 mb-0 row m-0 align-items-center fs-1"></label>
</div> </div>
<table id="graTable" class="table table-bordered table-striped text-center m-0"> <table id="graTable" class="table table-bordered table-striped text-center m-0">
@ -42,7 +46,7 @@
<form id="uploadForm"> <form id="uploadForm">
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
<div class="col-md-6"> <!--<div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="upPicNum">圖號</label> <label class="form-label" for="upPicNum">圖號</label>
<input type="text" id="graPicNum" name="graPicNum" class="form-control"> <input type="text" id="graPicNum" name="graPicNum" class="form-control">
@ -53,14 +57,14 @@
<label class="form-label" for="upPicName">圖名</label> <label class="form-label" for="upPicName">圖名</label>
<input type="text" id="graPicName" name="graPicName" class="form-control"> <input type="text" id="graPicName" name="graPicName" class="form-control">
</div> </div>
</div> </div>-->
<div class="col-md-6 mt-3"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="graSelMain">圖資類別</label> <label class="form-label" for="graSelMain">圖資類別</label>
<label id="graLayer" class="m-0 fs-1 col-12 p-0"></label> <label id="graLayer" class="m-0 fs-1 col-12 p-0"></label>
</div> </div>
</div> </div>
<div class="col-md-12 mt-6"> <div class="col-md-12 mt-2">
<label>原設計</label> <label>原設計</label>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
@ -82,7 +86,7 @@
</div> </div>
</div> </div>
<div class="col-md-12 mt-3"> <!--<div class="col-md-12 mt-3">
<label>竣工圖</label> <label>竣工圖</label>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
@ -100,7 +104,7 @@
<input name="file" type="file" multiple /> <input name="file" type="file" multiple />
</div> </div>
</div> </div>
</div> </div>-->
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -129,8 +133,8 @@
<button type="button" class="btn btn-primary" id="delGraManBtn">確定</button> <button type="button" class="btn btn-primary" id="delGraManBtn">確定</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<script> <script>
@ -159,39 +163,25 @@
let tag = "#graTable"; let tag = "#graTable";
let column_defs = [ let column_defs = [
{ "targets": [0], "width": "10%", "sortable": true }, { "targets": [0], "width": "20%", "sortable": true },
{ "targets": [1], "width": "25%", "sortable": true }, { "targets": [1], "width": "60%", "sortable": true },
{ "targets": [2], "width": "25%", "sortable": true }, { "targets": [2], "width": "20%", "sortable": true },
{ "targets": [3], "width": "25%", "sortable": true },
{ "targets": [4], "width": "15%", "sortable": false },
]; ];
let columns = [ let columns = [
{ {
"title": "圖號", "title": "編號",
"data": "code", "data": "id",
}, },
{ {
"title": "圖名", "title": "檔案",
"data": "name",
},
{
"title": "原設計",
"data": "oriOrgName", "data": "oriOrgName",
"render": function (data, type, row, meta) { "render": function (data, type, row, meta) {
return `<a id="oriDwgDown${row.id}" href="javascript:;">${row.oriOrgName ?? ""}</a>`; return `<a id="oriDwgDown${row.id}" href="javascript:;">${row.oriOrgName ?? ""}</a>`;
} }
}, },
{
"title": "竣工圖",
"data": "donOrgName",
"render": function (data, type, row, meta) {
return `<a id="donDwgDown${row.id}" href="javascript:;">${row.donOrgName ?? ""}</a>`;
}
},
{ {
"title": "功能", "title": "功能",
"data": "id", "data": "id",
@ -241,30 +231,30 @@
$(file.previewElement).removeClass("dz-image-preview").addClass("dz-file-preview"); $(file.previewElement).removeClass("dz-image-preview").addClass("dz-file-preview");
} }
}); });
}, },
}; };
uploader.graMyDesignDiagram = $("#graMyDesignDiagram").dropzone(option); uploader.graMyDesignDiagram = $("#graMyDesignDiagram").dropzone(option);
uploader.graMyAsBuilt = $("#graMyAsBuilt").dropzone(option); /*uploader.graMyAsBuilt = $("#graMyAsBuilt").dropzone(option);*/
uploader["graMyDesignDiagram"][0].dropzone.on("addedfile", file => { uploader["graMyDesignDiagram"][0].dropzone.on("addedfile", file => {
uploadFiles["graMyDesignDiagram"] = file; uploadFiles["graMyDesignDiagram"] = file;
}) })
uploader["graMyAsBuilt"][0].dropzone.on("addedfile", file => { //uploader["graMyAsBuilt"][0].dropzone.on("addedfile", file => {
uploadFiles["graMyAsBuilt"] = file; // uploadFiles["graMyAsBuilt"] = file;
}) //})
uploader["graMyDesignDiagram"][0].dropzone.on("removedfile", file => { uploader["graMyDesignDiagram"][0].dropzone.on("removedfile", file => {
uploadFiles["graMyDesignDiagram"] = {}; uploadFiles["graMyDesignDiagram"] = {};
file.previewElement.remove(); file.previewElement.remove();
}) })
uploader["graMyAsBuilt"][0].dropzone.on("removedfile", file => { //uploader["graMyAsBuilt"][0].dropzone.on("removedfile", file => {
uploadFiles["graMyAsBuilt"] = {}; // uploadFiles["graMyAsBuilt"] = {};
file.previewElement.remove(); // file.previewElement.remove();
}) //})
} }
// 新增資料 // 新增資料
@ -277,13 +267,13 @@
curActGraid = parseInt(id); curActGraid = parseInt(id);
readGraph(id); readGraph(id);
}) })
onEvent("click", "button[id^=graDelBtn]", function () { onEvent("click", "button[id^=graDelBtn]", function () {
let id = $(this).prop("id").split("graDelBtn")[1]; let id = $(this).prop("id").split("graDelBtn")[1];
curActGraid = parseInt(id); curActGraid = parseInt(id);
$("#delModal").modal("show"); $("#delModal").modal("show");
}) })
onEvent("click", "a[id^=oriDwgDown]", function () { onEvent("click", "a[id^=oriDwgDown]", function () {
let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true); let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true);
let rowData = graTable.row($(this).closest("tr")).data(); let rowData = graTable.row($(this).closest("tr")).data();
@ -293,7 +283,7 @@
$(dowLoaEle.ele).YTAlert().hide(); $(dowLoaEle.ele).YTAlert().hide();
}); });
}) })
onEvent("click", "a[id^=donDwgDown]", function () { onEvent("click", "a[id^=donDwgDown]", function () {
let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true); let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true);
let rowData = graTable.row($(this).closest("tr")).data(); let rowData = graTable.row($(this).closest("tr")).data();
@ -319,8 +309,6 @@
fileHelper.readAndPreviewImages(this.files, 'upForAsBuilt', 0, 86, '<div class="file-item">', '<button class="del-small-trash" name="btnDelImg" ><i class="fa fa-times"></i></button></div>'); fileHelper.readAndPreviewImages(this.files, 'upForAsBuilt', 0, 86, '<div class="file-item">', '<button class="del-small-trash" name="btnDelImg" ><i class="fa fa-times"></i></button></div>');
}); });
// 關閉 modal // 關閉 modal
$('#uploadPicture').on('hidden.bs.modal', function (e) { $('#uploadPicture').on('hidden.bs.modal', function (e) {
console.log("123456789"); console.log("123456789");
@ -349,11 +337,11 @@
$("#graPicNum").val(""); $("#graPicNum").val("");
$("#graPicName").val(""); $("#graPicName").val("");
uploadFiles["graMyDesignDiagram"] = {}; uploadFiles["graMyDesignDiagram"] = {};
uploadFiles["graMyAsBuilt"] = {}; /*uploadFiles["graMyAsBuilt"] = {};*/
uploader["graMyDesignDiagram"][0].dropzone.removeAllFiles(true); uploader["graMyDesignDiagram"][0].dropzone.removeAllFiles(true);
$("#graMyDesignDiagram .dz-preview").remove(); $("#graMyDesignDiagram .dz-preview").remove();
uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true); //uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true);
$("#graMyAsBuilt .dz-preview").remove(); //$("#graMyAsBuilt .dz-preview").remove();
}) })
function getGraCatList(callback) { function getGraCatList(callback) {
@ -365,18 +353,19 @@
} else { } else {
res.data.forEach(x => x.parent = x.system_parent_id); res.data.forEach(x => x.parent = x.system_parent_id);
res.data.forEach(x => x.text = x.system_key); res.data.forEach(x => x.text = x.system_key);
res.data.forEach(x => x.parent = x.parent == 0 ? "#" : x.parent); res.data.forEach(x => x.parent = x.parent);
callback ? callback(res.data) : ""; callback ? callback(res.data) : "";
} }
}, null, "POST").send(); }, null, "POST").send();
} }
function initTree(data) { function initTree(data) {
treeEvent(); treeEvent();
let option = { let option = {
core: { core: {
"check_callback": true, "check_callback": true,
data: data, data: setTreeData(data),
themes: { themes: {
name: "default-dark" name: "default-dark"
}, },
@ -440,6 +429,7 @@
$('#graTree').on("loaded.jstree", function (e, data) { $('#graTree').on("loaded.jstree", function (e, data) {
let topNode = $('#graTree').jstree(true).get_node("#"); let topNode = $('#graTree').jstree(true).get_node("#");
$('#graTree').jstree(true).select_node(topNode.children[0]); $('#graTree').jstree(true).select_node(topNode.children[0]);
$("#graTree").jstree("open_node", 0);
}) })
$('#graTree').on("select_node.jstree", function (e, data) { $('#graTree').on("select_node.jstree", function (e, data) {
dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id) }); dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id) });
@ -447,6 +437,7 @@
curLayerId = parseInt(data.node.id); curLayerId = parseInt(data.node.id);
$("#graLayer").text(levelNameByNodeId(data.node)); $("#graLayer").text(levelNameByNodeId(data.node));
$("#curLevText").text(levelNameByNodeId(data.node));
}) })
$("#graTree").on('create_node.jstree', function (e, data) { $("#graTree").on('create_node.jstree', function (e, data) {
let main = {}; let main = {};
@ -479,7 +470,7 @@
toast_error(res.msg || common.SysErr); toast_error(res.msg || common.SysErr);
} else { } else {
getGraCatList((graCatData) => { getGraCatList((graCatData) => {
data.instance.settings.core.data = graCatData; data.instance.settings.core.data = setTreeData(graCatData);
data.instance.refresh(true); data.instance.refresh(true);
}) })
} }
@ -509,6 +500,12 @@
}) })
} }
function setTreeData(dataList) {
let parent = { parent: "#", text: "圖資管理", id: 0 };
dataList.push(parent);
return dataList;
}
function readGraph(id) { function readGraph(id) {
let url = baseApiUrl + "/GraphManage/GraManRead"; let url = baseApiUrl + "/GraphManage/GraManRead";
objSendData.Data = { id: parseInt(id) }; objSendData.Data = { id: parseInt(id) };
@ -516,7 +513,7 @@
if (!res || res.code != "0000" || !res.data) { if (!res || res.code != "0000" || !res.data) {
} else { } else {
$("#graModal").modal("show"); $("#graModal").modal("show");
let fileObj = {}; let fileObj = {};
@ -524,13 +521,13 @@
$("#graPicName").val(res.data?.name); $("#graPicName").val(res.data?.name);
$("#graLayer").text(levelNameByNodeId(res.data?.layer_id)); $("#graLayer").text(levelNameByNodeId(res.data?.layer_id));
if (res.data?.oriSavName != null) { if (res.data?.oriSavName != null) {
fileObj = { name: res.data?.oriOrgName, dataUrl: baseApiUrl + varGraPath + res.data?.oriSavName, savename: res.data?.oriSavName, size:res.data?.oriSize }; fileObj = { name: res.data?.oriOrgName, dataUrl: baseApiUrl + varGraPath + res.data?.oriSavName, savename: res.data?.oriSavName, size: res.data?.oriSize };
uploader["graMyDesignDiagram"][0].dropzone?.displayExistingFile(fileObj); uploader["graMyDesignDiagram"][0].dropzone?.displayExistingFile(fileObj);
} }
if (res.data?.donSavName != null) { //if (res.data?.donSavName != null) {
fileObj = { name: res.data?.donOrgName, dataUrl: baseApiUrl + varGraPath + res.data?.donSavName, savename: res.data?.donSavName, size: res.data?.donSize }; // fileObj = { name: res.data?.donOrgName, dataUrl: baseApiUrl + varGraPath + res.data?.donSavName, savename: res.data?.donSavName, size: res.data?.donSize };
uploader["graMyAsBuilt"][0].dropzone?.displayExistingFile(fileObj); // uploader["graMyAsBuilt"][0].dropzone?.displayExistingFile(fileObj);
} //}
} }
}, null, "POST").send(); }, null, "POST").send();
@ -539,14 +536,15 @@
function levelNameByNodeId(node) { function levelNameByNodeId(node) {
let names = []; let names = [];
let curNode = $('#graTree').jstree(true).get_node(node); let curNode = $('#graTree').jstree(true).get_node(node);
let parents = curNode.parents.reverse();
$.each(curNode.parents, (idx, nodeId) => {
if (nodeId != "#") { for (let i = parents.length - 1; i >= 0; i--) {
let node = $('#graTree').jstree(true).get_node(nodeId); if (parents[i] != "#") {
let node = $('#graTree').jstree(true).get_node(parents[i]);
names.push(node.text); names.push(node.text);
} }
}) }
names.push(curNode.text); names.push(curNode.text);
return names.join("/"); return names.join("/");
@ -556,18 +554,18 @@
let cookies = new YourTeam.Utility.Cookie(); let cookies = new YourTeam.Utility.Cookie();
let url = ""; let url = "";
let graMyDesDiaFile = uploader["graMyDesignDiagram"][0].dropzone.files.filter(x => x.accepted == true)[0]; let graMyDesDiaFile = uploader["graMyDesignDiagram"][0].dropzone.files.filter(x => x.accepted == true)[0];
let graMyAsBuiFile = uploader["graMyAsBuilt"][0].dropzone.files.filter(x => x.accepted == true)[0]; /*let graMyAsBuiFile = uploader["graMyAsBuilt"][0].dropzone.files.filter(x => x.accepted == true)[0];*/
let fd = new FormData(); let fd = new FormData();
fd.append("code", $("#graPicNum").val()); fd.append("code", $("#graPicNum").val());
fd.append("layer_id", curLayerId); fd.append("layer_id", curLayerId);
fd.append("name", $("#graPicName").val()); fd.append("name", $("#graPicName").val());
fd.append("oriOrgName", graMyDesDiaFile?.name ?? null); fd.append("oriOrgName", graMyDesDiaFile?.name ?? null);
fd.append("donOrgName", graMyAsBuiFile?.name ?? null); /*fd.append("donOrgName", graMyAsBuiFile?.name ?? null);*/
fd.append("oriSavName", graMyDesDiaFile?.savename ?? null); fd.append("oriSavName", graMyDesDiaFile?.savename ?? null);
fd.append("donSavName", graMyAsBuiFile?.savename ?? null); /*fd.append("donSavName", graMyAsBuiFile?.savename ?? null);*/
fd.append("oriFile", graMyDesDiaFile?.savename ? null : graMyDesDiaFile ?? null); fd.append("oriFile", graMyDesDiaFile?.savename ? null : graMyDesDiaFile ?? null);
fd.append("donFile", graMyAsBuiFile?.savename ? null : graMyAsBuiFile ?? null); /*fd.append("donFile", graMyAsBuiFile?.savename ? null : graMyAsBuiFile ?? null);*/
if (curActGraid == 0) { if (curActGraid == 0) {
url = baseApiUrl + "/GraphManage/SaveGraMan"; url = baseApiUrl + "/GraphManage/SaveGraMan";
} else { } else {
@ -608,6 +606,6 @@
graTable.ajax.reload(); graTable.ajax.reload();
} }
}, null, "POST").send(); }, null, "POST").send();
} }
} }
</script> </script>