<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"> DWG檔案不超過 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: "已超過上傳限制數量", maxFilesize: 10, filesizeBase: 1024, maxFiles: 1, autoProcessQueue: false, acceptedFiles: ".dwg", 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.graMyAsBuilt = $("#graMyAsBuilt").dropzone(option);*/ uploader["graMyDesignDiagram"][0].dropzone.on("addedfile", file => { uploadFiles["graMyDesignDiagram"] = file; }) //uploader["graMyAsBuilt"][0].dropzone.on("addedfile", file => { // uploadFiles["graMyAsBuilt"] = file; //}) uploader["graMyDesignDiagram"][0].dropzone.on("removedfile", file => { uploadFiles["graMyDesignDiagram"] = {}; file.previewElement.remove(); }) //uploader["graMyAsBuilt"][0].dropzone.on("removedfile", file => { // uploadFiles["graMyAsBuilt"] = {}; // 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) || "dwg"; 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("code", $("#graPicNum").val()); fd.append("layer_id", curLayerId); fd.append("name", $("#graPicName").val()); 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>