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

Frontend/_graphManagement.html

@@ -7,16 +7,20 @@
 
             <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="my-2">
+                    <div class="row my-2">
                         <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">
@@ -42,7 +46,7 @@
             <form id="uploadForm">
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-md-6">
+                        <!--<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">
@@ -53,14 +57,14 @@
                                 <label class="form-label" for="upPicName">圖名</label>
                                 <input type="text" id="graPicName" name="graPicName" class="form-control">
                             </div>
-                        </div>
-                        <div class="col-md-6 mt-3">
+                        </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-6">
+                        <div class="col-md-12 mt-2">
                             <label>原設計</label>
                         </div>
                         <div class="col-md-12">
@@ -82,7 +86,7 @@
                             </div>
 
                         </div>
-                        <div class="col-md-12 mt-3">
+                        <!--<div class="col-md-12 mt-3">
                             <label>竣工圖</label>
                         </div>
                         <div class="col-md-12">
@@ -100,7 +104,7 @@
                                     <input name="file" type="file" multiple />
                                 </div>
                             </div>
-                        </div>
+                        </div>-->
                     </div>
                 </div>
                 <div class="modal-footer">
@@ -129,8 +133,8 @@
                 <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>
 </div>
 
 <script>
@@ -159,39 +163,25 @@
         let tag = "#graTable";
 
         let column_defs = [
-            { "targets": [0], "width": "10%", "sortable": true },
-            { "targets": [1], "width": "25%", "sortable": true },
-            { "targets": [2], "width": "25%", "sortable": true },
-            { "targets": [3], "width": "25%", "sortable": true },
-            { "targets": [4], "width": "15%", "sortable": false },
+            { "targets": [0], "width": "20%", "sortable": true },
+            { "targets": [1], "width": "60%", "sortable": true },
+            { "targets": [2], "width": "20%", "sortable": true },
         ];
 
         let columns = [
             {
-                "title": "圖號",
-                "data": "code",
+                "title": "編號",
+                "data": "id",
 
             },
             {
-                "title": "圖名",
-                "data": "name",
-            },
-            {
-                "title": "原設計",
+                "title": "檔案",
                 "data": "oriOrgName",
                 "render": function (data, type, row, meta) {
                     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": "功能",
                 "data": "id",
@@ -241,30 +231,30 @@
                         $(file.previewElement).removeClass("dz-image-preview").addClass("dz-file-preview");
                     }
                 });
-               
+
             },
         };
 
         uploader.graMyDesignDiagram = $("#graMyDesignDiagram").dropzone(option);
-        uploader.graMyAsBuilt = $("#graMyAsBuilt").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["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();
-        })
+        //uploader["graMyAsBuilt"][0].dropzone.on("removedfile", file => {
+        //    uploadFiles["graMyAsBuilt"] = {};
+        //    file.previewElement.remove();
+        //})
     }
 
     // 新增資料
@@ -277,13 +267,13 @@
         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();
@@ -293,7 +283,7 @@
             $(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();
@@ -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>');
     });
 
-
-
     // 關閉 modal
     $('#uploadPicture').on('hidden.bs.modal', function (e) {
         console.log("123456789");
@@ -349,11 +337,11 @@
         $("#graPicNum").val("");
         $("#graPicName").val("");
         uploadFiles["graMyDesignDiagram"] = {};
-        uploadFiles["graMyAsBuilt"] = {};
+        /*uploadFiles["graMyAsBuilt"] = {};*/
         uploader["graMyDesignDiagram"][0].dropzone.removeAllFiles(true);
         $("#graMyDesignDiagram .dz-preview").remove();
-        uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true);
-        $("#graMyAsBuilt .dz-preview").remove();
+        //uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true);
+        //$("#graMyAsBuilt .dz-preview").remove();
     })
 
     function getGraCatList(callback) {
@@ -365,18 +353,19 @@
             } 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 == 0 ? "#" : x.parent);
+                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: data,
+                data: setTreeData(data),
                 themes: {
                     name: "default-dark"
                 },
@@ -440,6 +429,7 @@
         $('#graTree').on("loaded.jstree", function (e, data) {
             let topNode = $('#graTree').jstree(true).get_node("#");
             $('#graTree').jstree(true).select_node(topNode.children[0]);
+            $("#graTree").jstree("open_node", 0);
         })
         $('#graTree').on("select_node.jstree", function (e, data) {
             dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id) });
@@ -447,6 +437,7 @@
 
             curLayerId = parseInt(data.node.id);
             $("#graLayer").text(levelNameByNodeId(data.node));
+            $("#curLevText").text(levelNameByNodeId(data.node));
         })
         $("#graTree").on('create_node.jstree', function (e, data) {
             let main = {};
@@ -479,7 +470,7 @@
                     toast_error(res.msg || common.SysErr);
                 } else {
                     getGraCatList((graCatData) => {
-                        data.instance.settings.core.data = graCatData;
+                        data.instance.settings.core.data = setTreeData(graCatData);
                         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) {
         let url = baseApiUrl + "/GraphManage/GraManRead";
         objSendData.Data = { id: parseInt(id) };
@@ -516,7 +513,7 @@
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
-                
+
                 $("#graModal").modal("show");
 
                 let fileObj = {};
@@ -524,13 +521,13 @@
                 $("#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 };
+                    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);
-                }
+                //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();
@@ -539,14 +536,15 @@
     function levelNameByNodeId(node) {
         let names = [];
         let curNode = $('#graTree').jstree(true).get_node(node);
-
-        $.each(curNode.parents, (idx, nodeId) => {
-            if (nodeId != "#") {
-                let node = $('#graTree').jstree(true).get_node(nodeId);
+        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("/");
 
@@ -556,18 +554,18 @@
         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 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("donOrgName", graMyAsBuiFile?.name ?? 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("donFile", graMyAsBuiFile?.savename ? null : graMyAsBuiFile ?? null);
-        
+        /*fd.append("donFile", graMyAsBuiFile?.savename ? null : graMyAsBuiFile ?? null);*/
+
         if (curActGraid == 0) {
             url = baseApiUrl + "/GraphManage/SaveGraMan";
         } else {
@@ -608,6 +606,6 @@
                     graTable.ajax.reload();
                 }
             }, null, "POST").send();
-        } 
+        }
     }
 </script>