ibms-dome/Frontend/_graphManagement.html

622 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-sm-12 col-xl-12">
<h1 class="p-2 mb-0">圖資管理</h1>
<div class="row">
<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">
<input id="graCatSearch" name="graCatSearch" type="text" class="form-control form-control-sm d-inline-block" placeholder="搜尋" />
</div>
<div class="d-flex" id="graTree"></div>
</div>
<div class="col-10">
<div class="row my-2 mx-0">
<a href="javascript:;" id="creGraMan" class="btn btn-success">
+新增
</a>
<label id="curLevText" class="ml-3 mb-0 row m-0 align-items-center fs-1"></label>
</div>
<table id="graTable" class="table table-bordered table-striped text-center m-0">
</table>
</div>
</div>
</div>
</div>
</main>
<!-- upload modal -->
<div class="modal fade" id="graModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
圖資上傳
</h4>
</div>
<form id="uploadForm">
<div class="modal-body">
<div class="row">
<!--<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="upPicNum">圖號</label>
<input type="text" id="graPicNum" name="graPicNum" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="upPicName">圖名</label>
<input type="text" id="graPicName" name="graPicName" class="form-control">
</div>
</div>-->
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="graSelMain">圖資類別</label>
<label id="graLayer" class="m-0 fs-1 col-12 p-0"></label>
</div>
</div>
<div class="col-md-12 mt-2">
<label>檔案</label>
</div>
<div class="col-md-12">
<div id="graMyDesignDiagram" class="dropzone">
<div class="dz-message">
<div class="drag-icon-cph">
<i class="material-icons">backup</i>
</div>
<h3>選擇一個文件或拖放到這裡</h3>
<p class="mb-0 col-grey">
(圖片檔, 文字檔, word, ppt, excel, pdf)檔案不超過 10MB
</p>
</div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</div>
<!--<div class="col-md-12 mt-3">
<label>竣工圖</label>
</div>
<div class="col-md-12">
<div id="graMyAsBuilt" class="dropzone">
<div class="dz-message">
<div class="drag-icon-cph">
<i class="material-icons">backup</i>
</div>
<h3>選擇一個文件或拖放到這裡</h3>
<p class="mb-0 col-grey">
DWG檔案不超過 10MB
</p>
</div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</div>-->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="graSendBtn">儲存</button>
<button type="button" class="btn btn-secondary" id="close" data-dismiss="modal">取消</button>
</div>
</form>
</div>
</div>
</div>
<!-- delete modal -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
確認刪除
</h4>
</div>
<div class="modal-body py-1">
<label>確認要刪除此筆圖資資料?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="delGraManBtn">確定</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<script>
var graTable = null;
var curLayerId = null;
var uploader = {};
var uploadFiles = {};
var curActGraid = 0;
var cookies = new YourTeam.Utility.Cookie();
var token = cookies.get("JWT-Authorization");
$(function () {
initList();
initDropzone();
getGraCatList(initTree);
})
// 讀取列表資料
function initList() {
let ajaxObj = {
url: baseApiUrl + "/GraphManage/GraManList",
method: "POST",
data: {
layer_id: 0,
},
}
let tag = "#graTable";
let column_defs = [
{ "targets": [0], "width": "20%", "sortable": true },
{ "targets": [1], "width": "60%", "sortable": true },
{ "targets": [2], "width": "20%", "sortable": true },
];
let columns = [
{
"title": "編號",
"data": "id",
},
{
"title": "檔案",
"data": "oriOrgName",
"render": function (data, type, row, meta) {
return `<a id="oriDwgDown${row.id}" href="javascript:;">${row.oriOrgName ?? ""}</a>`;
}
},
{
"title": "功能",
"data": "id",
"render": function (data, type, row, meta) {
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
btnDiv.append(creBtnHtml("修改", "graEdiBtn" + data, null, ["btn", "btn-info"]));
btnDiv.append(creBtnHtml("刪除", "graDelBtn" + data, null, ["btn", "btn-danger"]));
return btnDiv.outerHtml();
}
},
];
graTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
}
function initDropzone() {
Dropzone.autoDiscover = false;
let option = {
url: "/",
addRemoveLinks: true,
dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
dictInvalidFileType: `上傳格式錯誤`,
dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎?`,
dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
dictMaxFilesExceeded: "已超過上傳限制數量",
dictFileTooBig:"已超出上傳限制,最大{{maxFilesize}}MB而您的檔案{{filesize}}MB。",
maxFilesize: 10,
filesizeBase: 1024,
maxFiles: 1,
autoProcessQueue: false,
acceptedFiles: ".dwg,.jpeg,.jpg,.png,.gif,.doc,.docx,.ppt,.pptx,.xlsx,.xls,.opt,.pdf,.txt",
init: function () {
this.on("addedfile", function (file) {
$(this.previewsContainer).find('.dz-progress').addClass('d-none');
if (file.savename) {
file.accepted = true;
this.files.push(file);
}
});
this.on("complete", function (file) {
if (file.savename) {
$(file.previewElement).find('.dz-image img').remove();
}
});
this.on("thumbnail", function (file) {
// 若為讀取檔案時
if (file.savename) {
$(file.previewElement).removeClass("dz-image-preview").addClass("dz-file-preview");
}
});
},
};
uploader.graMyDesignDiagram = $("#graMyDesignDiagram").dropzone(option);
uploader["graMyDesignDiagram"][0].dropzone.on("addedfile", file => {
uploadFiles["graMyDesignDiagram"] = file;
})
uploader["graMyDesignDiagram"][0].dropzone.on("removedfile", file => {
uploadFiles["graMyDesignDiagram"] = {};
file.previewElement.remove();
})
}
// 新增資料
onEvent('click', '#graSendBtn', function () {
saveGraMan();
});
onEvent("click", "button[id^=graEdiBtn]", function () {
let id = $(this).prop("id").split("graEdiBtn")[1];
curActGraid = parseInt(id);
readGraph(id);
})
onEvent("click", "button[id^=graDelBtn]", function () {
let id = $(this).prop("id").split("graDelBtn")[1];
curActGraid = parseInt(id);
$("#delModal").modal("show");
})
onEvent("click", "a[id^=oriDwgDown]", function () {
let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true);
let rowData = graTable.row($(this).closest("tr")).data();
let apiUrl = baseApiUrl + `/File/Download?type=graph&savename=${rowData.oriSavName}&oriname=${rowData.oriOrgName}`;
download(token, apiUrl, rowData.oriOrgName, function () {
$(dowLoaEle.ele).YTAlert().hide();
});
})
onEvent("click", "a[id^=donDwgDown]", function () {
let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true);
let rowData = graTable.row($(this).closest("tr")).data();
let apiUrl = baseApiUrl + `/File/Download?type=graph&savename=${rowData.donSavName}&oriname=${rowData.donOrgName}`;
let extname = rowData.donOrgName?.split(".").slice(-1);
download(token, apiUrl, rowData.name + "_竣工圖" + "." + extname, function () {
$(dowLoaEle.ele).YTAlert().hide();
});
})
// 上傳檔案
var oriImg;
$("#upMyDesignDiagram").on("change", function (e) {
let fileHelper = new YourTeam.Utility.File();
oriImg = this.files[0];
fileHelper.readAndPreviewImages(this.files, 'upForDesignDiagram', 0, 86, '<div class="file-item">', '<button class="del-small-trash" name="btnDelImg" ><i class="fa fa-times"></i></button></div>');
});
var donImg;
$("#upMyAsBuilt").on("change", function (e) {
let fileHelper = new YourTeam.Utility.File();
donImg = this.files[0];
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
$('#uploadPicture').on('hidden.bs.modal', function (e) {
console.log("123456789");
});
$('#colorModal').on('hidden.bs.modal', function () {
// # 可以设置下拉框为初始值
$("#colorCodeSelect").val(-1);
// # 清空表单校验信息
$("#add").Validform().resetForm();
$(".Validform_checktip").html("");
});
// 刪除資料
onEvent("click", "#delGraManBtn", function () {
delGraMan();
})
onEvent('click', '#creGraMan', function () {
curActGraid = 0;
$("#graModal").modal("show");
});
onEvent('show.bs.modal', "#graModal", function (e) {
let type = $(e.relatedTarget).data("type");
$(this).data("type", type);
$("#graPicNum").val("");
$("#graPicName").val("");
uploadFiles["graMyDesignDiagram"] = {};
/*uploadFiles["graMyAsBuilt"] = {};*/
uploader["graMyDesignDiagram"][0].dropzone.removeAllFiles(true);
$("#graMyDesignDiagram .dz-preview").remove();
//uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true);
//$("#graMyAsBuilt .dz-preview").remove();
})
function getGraCatList(callback) {
let url = baseApiUrl + "/GraphManage/VarList";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
res.data.forEach(x => x.parent = x.system_parent_id);
res.data.forEach(x => x.text = x.system_key);
res.data.forEach(x => x.parent = x.parent);
callback ? callback(res.data) : "";
}
}, null, "POST").send();
}
function initTree(data) {
treeEvent();
let option = {
core: {
"check_callback": true,
data: setTreeData(data),
themes: {
name: "default-dark"
},
},
types: {
default: {
max_depth: 3,
icon: "fas fa-folder text-warning"
},
},
plugins: ["themes", "contextmenu", "sort", "conditionalselect", "search", "types"],
search: {
case_insensitive: true,
show_only_matches: true,
},
contextmenu: {
items: function ($node) {
let tree = this;
let depth = $node.parents.length; //抓出該節點深度(第幾層)
return {
Create: {
label: "新增",
_disabled: function (data) {
if (depth >= 4) {
return true; //第三層後無法新增
}
return false;
},
action: function (obj) {
$node = tree.create_node($node, { text: '新類別', type: 'default' });
tree.deselect_all();
tree.select_node($node);
tree.edit($node);
}
},
Rename: {
label: "重新命名",
_disabled: function (data) {
if ($node.id == "0") {
return true; //最上層無法編輯
}
return false;
},
action: function (obj) {
tree.edit($node);
/* tree.sort($node, true)*/
}
},
Remove: {
label: "移除",
_disabled: function (data) {
if ($node.id == "0") {
return true; //最上層無法移除
}
return false;
},
action: function (obj) {
tree.delete_node($node);
}
}
}
}
}
}
$("#graTree").jstree(option);
}
function treeEvent() {
let selectedNode = [];
$('#graTree').on("loaded.jstree", function (e, data) {
let topNode = $('#graTree').jstree(true).get_node("0");
$('#graTree').jstree(true).select_node(topNode.children[0]);
$("#graTree").jstree("open_node", 0);
})
$('#graTree').on("select_node.jstree", function (e, data) {
if (data.node.id != "0") {
dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id) });
graTable.ajax.reload();
selectedNode.unshift(data.node.id);
if (selectedNode.length > 3) {
selectedNode.splice(selectedNode.length - 1, 1);
}
curLayerId = parseInt(data.node.id);
$("#graLayer").text(levelNameByNodeId(data.node));
$("#curLevText").text(levelNameByNodeId(data.node));
} else {
$("#graTree").jstree(true).deselect_node(data.node);
$("#graTree").jstree(true).select_node(selectedNode[0]);
}
})
$("#graTree").on('create_node.jstree', function (e, data) {
let main = {};
main.system_key = data.node.text;
main.system_parent_id = parseInt(data.node.parent);
objSendData.Data = main;
ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/SaveVar", objSendData, function (res) {
if (!res || res.code != "0000") {
data.instance.delete_node(data.node);
toast_error(res.msg || common.SysErr);
} else {
data.instance.set_id(data.node, res.data);
}
}, null, "POST").send();
});
$("#graTree").on('rename_node.jstree', function (e, data) {
let main = {}
main.id = parseInt(data.node.id);
main.system_key = data.node.text;
objSendData.Data = main;
ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/EditVar", objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
toast_error(res.msg || common.SysErr);
} else {
getGraCatList((graCatData) => {
data.instance.settings.core.data = setTreeData(graCatData);
data.instance.refresh(true);
})
}
}, null, "POST").send();
});
$("#graTree").on('delete_node.jstree', function (e, data) {
let main = {};
if (!isNaN(parseInt(data.node.id))) {
main.id = parseInt(data.node.id);
objSendData.Data = main;
ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/DelVar", objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
toast_error(res.msg || common.SysErr);
} else {
getGraCatList((graCatData) => {
data.settings.core.data = graCatData;
data.instance.refresh(true);
})
}
}, null, "POST").send();
}
});
onEvent("keyup", "#graCatSearch", function () {
$("#graTree").jstree("search", $(this).val());
})
}
function setTreeData(dataList) {
let parent = { parent: "#", text: "圖資管理", id: 0 };
dataList.push(parent);
return dataList;
}
function readGraph(id) {
let url = baseApiUrl + "/GraphManage/GraManRead";
objSendData.Data = { id: parseInt(id) };
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
$("#graModal").modal("show");
let fileObj = {};
$("#graPicNum").val(res.data?.code);
$("#graPicName").val(res.data?.name);
$("#graLayer").text(levelNameByNodeId(res.data?.layer_id));
if (res.data?.oriSavName != null) {
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);
}
//if (res.data?.donSavName != null) {
// 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);
//}
}
}, null, "POST").send();
}
function levelNameByNodeId(node) {
let names = [];
let curNode = $('#graTree').jstree(true).get_node(node);
let parents = curNode.parents.reverse();
for (let i = parents.length - 1; i >= 0; i--) {
if (parents[i] != "#") {
let node = $('#graTree').jstree(true).get_node(parents[i]);
names.push(node.text);
}
}
names.push(curNode.text);
return names.join("/");
}
function saveGraMan() {
let cookies = new YourTeam.Utility.Cookie();
let url = "";
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 fd = new FormData();
fd.append("layer_id", curLayerId);
fd.append("oriOrgName", graMyDesDiaFile?.name ?? null);
/*fd.append("donOrgName", graMyAsBuiFile?.name ?? null);*/
fd.append("oriSavName", graMyDesDiaFile?.savename ?? null);
/*fd.append("donSavName", graMyAsBuiFile?.savename ?? null);*/
fd.append("oriFile", graMyDesDiaFile?.savename ? null : graMyDesDiaFile ?? null);
/*fd.append("donFile", graMyAsBuiFile?.savename ? null : graMyAsBuiFile ?? null);*/
if (curActGraid == 0) {
url = baseApiUrl + "/GraphManage/SaveGraMan";
} else {
fd.append("id", curActGraid);
url = baseApiUrl + "/GraphManage/EdtOneGraMan";
}
$.ajax({
url: url,
type: "POST",
data: fd,
async: false,
cache: false,
contentType: false,
processData: false,
beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
success: function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
$("#graModal").modal("hide");
toast_ok(curActGraid == 0 ? common.AddSuc : common.EditSuc);
graTable.ajax.reload();
}
}
});
}
function delGraMan() {
if (curActGraid != 0) {
let url = baseApiUrl + "/GraphManage/DelOneGraMan";
objSendData.Data = { id: curActGraid };
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
$("#delModal").modal("hide");
toast_ok(common.DelSuc);
graTable.ajax.reload();
}
}, null, "POST").send();
}
}
</script>