[Frontend][圖資管理] jstree 圖資類別 程序建置 | 最多三層限制程序建置 | 圖資類別 CRUD 程序建置 | 圖資 Create 程序建置 | dropzone 上傳程序建置 | variable 增加 layer_id 程序建置 | 後端 api variable 不依據 main_system_tag 和 sub_system_tag 程序調整

Frontend/_graphManagement.html

@@ -5,51 +5,23 @@
 
             <h1 class="p-2 mb-0">圖資管理</h1>
 
-            <div class="row bg-dark p-2">
-                <div class="col-auto">
-                    <div class="btn-group">
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed" key="建築">
-                            建築</button>
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed" key="電力管線">
-                            電力管線</button>
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed" ket="水力管線">
-                            水力管線</button>
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed" key="控制系統">
-                            控制系統</button>
-                    </div>
-                </div>
-
-                <div class="col-auto">
-                    <div class="form-group">
-                        <input type="text" id="simpleinput" class="form-control" placeholder="關鍵字">
-                    </div>
-                </div>
-
-                <div class="col-auto">
-                    <a href="#" class="btn btn-info">查詢</a>
-                </div>
-                <hr>
-            </div>
-
             <div class="row">
-                <div class="my-2">
+                <div class="col-2">
-                    <a href="#" id="upload" class="btn btn-success" data-toggle="modal" data-target="#uploadPicture">
+                    <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="搜尋" />
-                    </a>
+                    </div>
+                    <div class="d-flex" id="graTree"></div>
                 </div>
+                <div class="col-10">
+                    <div class="my-2">
+                        <a href="javascript:;" id="upload" class="btn btn-success" data-toggle="modal" data-target="#graModal">
+                            +上傳
+                        </a>
+                    </div>
 
-                <table class="table table-bordered table-striped text-center m-0">
+                    <table id="graTable" class="table table-bordered table-striped text-center m-0">
-                    <thead class="thead-themed">
+                    </table>
-                        <tr>
+                </div>
-                            <th>圖號</th>
-                            <th>圖名</th>
-                            <th>原設計</th>
-                            <th>竣工圖</th>
-                            <th>功能</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
             </div>
 
         </div>
@@ -58,8 +30,8 @@
 </main>
 
 <!-- upload modal -->
-<div class="modal fade" id="uploadPicture" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+<div class="modal fade" id="graModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
-    data-keyboard="false">
+     data-keyboard="false">
     <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -73,120 +45,67 @@
                         <div class="col-md-6">
                             <div class="form-group">
                                 <label class="form-label" for="upPicNum">圖號</label>
-                                <input type="text" id="upPicNum" name="upPicNum" class="form-control">
+                                <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="upPicName" name="upPicName" class="form-control">
+                                <input type="text" id="graPicName" name="graPicName" class="form-control">
                             </div>
                         </div>
                         <div class="col-md-6 mt-3">
                             <div class="form-group">
-                                <label class="form-label" for="upSelMain">主要類別</label>
+                                <label class="form-label" for="graSelMain">圖資類別</label>
-                                <select class="form-control" id="upSelMain">
+                                <label id="graLayer" class="m-0 fs-1 col-12 p-0"></label>
-                                    <option>建築</option>
-                                    <option>電力控制</option>
-                                    <option>水力控制</option>
-                                    <option>系統控制</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col-md-6 mt-3">
-                            <div class="form-group">
-                                <label class="form-label" for="upSelSub">子類別</label>
-                                <select class="form-control" id="upSelSub">
-                                    <option>施工詳圖</option>
-                                    <option>設備規範</option>
-                                    <option>工程介面圖說</option>
-                                    <option>門禁規範</option>
-                                    <option>監控平面圖</option>
-                                    <option>其它</option>
-                                </select>
                             </div>
                         </div>
                         <div class="col-md-12 mt-6">
                             <label>原設計</label>
                         </div>
                         <div class="col-md-12">
-                            <input id="upMyDesignDiagram" type="file" style="display:none" />
-                            <label for="upMyDesignDiagram" type="button" class="file-upload btn btn-info"
-                                style="cursor : pointer ">上傳檔案</label>
-                            <div id='upForDesignDiagram' class="col-sm-12 forimage mt-2 offset-3 p-0"></div>
-                        </div>
-                        <div id="upDesignDiagram" class="col-md-12 ml-3"></div>
-                        <div class="col-md-12 mt-3">
-                            <label>竣工圖</label>
-                        </div>
-                        <div class="col-md-12">
-                            <input id="upMyAsBuilt" type="file" style="display:none" />
-                            <label for="upMyAsBuilt" type="button" class="file-upload btn btn-info"
-                                style="cursor : pointer ">上傳檔案</label>
-                            <div id='upForAsBuilt' class="col-sm-12 forimage mt-2 offset-3 p-0"></div>
-                        </div>
-                        <div id="upAsBuiltDrawing" class="col-md-12 ml-3"></div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" id="accManSendBtn">儲存</button>
-                    <button type="button" class="btn btn-danger" id="close" data-dismiss="modal">取消</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
 
-<!-- edit modal -->
+                            <div id="graMyDesignDiagram" class="dropzone">
-<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
+                                <div class="dz-message">
-    data-keyboard="false">
+                                    <div class="drag-icon-cph">
-    <div class="modal-dialog modal-dialog-centered" role="document">
+                                        <i class="material-icons">backup</i>
-        <div class="modal-content">
+                                    </div>
-            <div class="modal-header">
+                                    <h3>選擇一個文件或拖放到這裡</h3>
-                <h4 class="modal-title">
+                                    <p class="mb-0 col-grey">
-                    編輯
+                                        DWG檔案不超過 10MB
-                </h4>
+                                    </p>
-            </div>
+                                </div>
-            <form id="editForm">
+                                <div class="fallback">
-                <div class="modal-body">
+                                    <input name="file" type="file" multiple />
-                    <div class="row">
+                                </div>
-                        <div class="col-md-6">
+
-                            <div class="form-group">
-                                <label class="form-label" for="editPicNum">圖號</label>
-                                <input type="text" id="editPicNum" name="editPicNum" class="form-control">
                             </div>
+
                         </div>
-                        <div class="col-md-6">
-                            <div class="form-group">
-                                <label class="form-label" for="editPicName">圖名</label>
-                                <input type="text" id="editPicName" name="editPicName" class="form-control">
-                            </div>
-                        </div>
-                        <div class="col-md-12 mt-6">
-                            <label>原設計</label>
-                        </div>
-                        <div class="col-md-12">
-                            <input id="editMyDesignDiagram" type="file" style="display:none" />
-                            <label for="editMyDesignDiagram" type="button" class="file-upload btn btn-info"
-                                style="cursor : pointer ">上傳檔案</label>
-                            <div id='editForDesignDiagram' class="col-sm-12 forimage mt-2 offset-3 p-0"></div>
-                        </div>
-                        <div id="editDesignDiagram" class="col-md-12 ml-3"></div>
                         <div class="col-md-12 mt-3">
                             <label>竣工圖</label>
                         </div>
                         <div class="col-md-12">
-                            <input id="editMyAsBuilt" type="file" style="display:none" />
+                            <div id="graMyAsBuilt" class="dropzone">
-                            <label for="editMyAsBuilt" type="button" class="file-upload btn btn-info"
+                                <div class="dz-message">
-                                style="cursor : pointer ">上傳檔案</label>
+                                    <div class="drag-icon-cph">
-                            <div id='editForAsBuilt' class="col-sm-12 forimage mt-2 offset-3 p-0"></div>
+                                        <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 id="editAsBuiltDrawing" class="col-md-12 ml-3"></div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary" id="editManSendBtn">儲存</button>
+                    <button type="button" class="btn btn-primary" id="graSendBtn">儲存</button>
-                    <button type="button" class="btn btn-danger" id="close" data-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-secondary" id="close" data-dismiss="modal">取消</button>
                 </div>
             </form>
         </div>
@@ -195,7 +114,7 @@
 
 <!-- delete modal -->
 <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
-    data-keyboard="false">
+     data-keyboard="false">
     <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-footer">
@@ -205,59 +124,129 @@
                 </button>
                 <button type="button" class="btn btn-danger" data-dismiss="modal" aria-label="No">
                     取消
+                </button>
             </div>
         </div>
     </div>
 </div>
 
 <script>
-
+    var graTable = null;
+    var curLayerId = null;
+    var uploader = {};
+    var uploadFiles = {};
     $(function () {
         initList();
+        initDropzone();
+        getGraCatList(initTree);
     })
 
     // 讀取列表資料
     function initList() {
-        let sendData = {
+        let ajaxObj = {
-            building_tag: pageAct.buiTag
+            url: baseApiUrl + "/GraphManage/GraManList",
+            method: "POST",
+            data: {
+                layer_id: 0,
+            },
         }
-        objSendData.Data = sendData;
+        let tag = "#graTable";
-        // console.log("查看pageAct", pageAct);
+
-        let url = baseApiUrl + "/GraphManage/GraManRead";
+        let column_defs = [
-        function success(res) {
+            { "targets": [0], "width": "10%", "sortable": true },
-            console.log("查看", res);
+            { "targets": [1], "width": "25%", "sortable": true },
-            let strHtml = ``;
+            { "targets": [2], "width": "25%", "sortable": true },
-            $.each(res, function (index, val) {
+            { "targets": [3], "width": "25%", "sortable": true },
-                strHtml = `<tr>
+            { "targets": [4], "width": "15%", "sortable": true },
-                                <td>${res.oriOrgName}</td>
+        ];
-                                <td>${res.donOrgName}</td>
+
-                                <td>${res.code}</td>
+        let columns = [
-                                <td>${res.code}</td>
+            {
-                                <td>
+                "title": "圖號",
-                                    <a href="#" class="btn btn-primary mr-2" id="edit" data-toggle="modal" data-target="#editModal">編輯</a>
+                "data": "code",
-                                    <a href="#" class="btn btn-danger" id="del" data-toggle="modal" data-target="#delModal">刪除</a>
+                
-                                </td>
+            },
-                            </tr>`;
+            {
-            });
+                "title": "圖名",
-            $('tbody').html(strHtml);
+                "data": "name",
-        }
+            },
-        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+            {
+                "title": "原設計",
+                "data": "oriOrgName",
+                "render": function (data, type, row, meta) {
+                    return `<a href="javascript:;">${row.oriOrgName ?? ""}</a>`;
+                }
+
+            },
+            {
+                "title": "竣工圖",
+                "data": "donOrgName",
+                "render": function (data, type, row, meta) {
+                    return `<a href="javascript:;">${row.donOrgName ?? ""}</a>`;
+                }
+            },
+
+            {
+                "title": "功能",
+                "data": "userinfo_guid",
+                "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"], { "toggle": "modal", "target": "#delModal" }));
+                    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>`,
+            maxFilesize: 3,
+            filesizeBase: 1024,
+            maxFiles: 1,
+            autoProcessQueue: false,
+            acceptedFiles: ".dwg",
+            init: function () {
+                this.on("addedfile", function (file) {
+                    $("#graMyDesignDiagram").find('.dz-progress').addClass('d-none');
+                });
+            },
+        };
+
+        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;
+        })
     }
 
     // 新增資料
-    onEvent('click', '#accManSendBtn', function () {
+    onEvent('click', '#graSendBtn', function () {
+        let cookies = new YourTeam.Utility.Cookie();
  
         let url = baseApiUrl + "/GraphManage/SaveGraMan";
-        var myCode = (+new Date());
         let fd = new FormData();
-        fd.append("code", myCode);
+        fd.append("code", $("#graPicNum").val());
-        fd.append("main_system_tag", $("#upSelMain").val());
+        fd.append("layer_id", curLayerId);
-        fd.append("sub_system_tag", $("#upSelSub").val());
+        fd.append("name", $("#graPicName").val());
-        fd.append("name", $("#upPicName").val());
+        fd.append("oriOrgName", uploadFiles["graMyDesignDiagram"]?.name ?? null);
-        fd.append("oriOrgName", $("#upMyDesignDiagram").val());
+        fd.append("donOrgName", null);
-        fd.append("donOrgName", $("#upMyAsBuilt").val());
+        fd.append("oriFile", uploadFiles["graMyDesignDiagram"] ?? null);
-        fd.append("oriFile", oriImg);
+        fd.append("donFile", uploadFiles["graMyAsBuilt"] ?? null);
-        fd.append("donFile", donImg);
         
         $.ajax({
             url: url,
@@ -267,7 +256,7 @@
             cache: false,
             contentType: false,
             processData: false,
-            beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + localStorage.getItem("JWT-Authorization")) },
+            beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
             success: function (res) {
                 if (!res || res.code != "0000" || !res.data) {
                 } else {
@@ -278,25 +267,23 @@
     });
 
     // 上傳檔案
-    let oriImg;
+    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>');
     });
 
-    let donImg;
+    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>');
     });
 
-    // 編輯
+    onEvent("click", "button[id^=graEdiBtn]", function () {
-    $("#edit").click(function () {
+
-        $("#editPicNum").val() = $("#upPicNum").data();
+    })
-        console.log($("#editPicNum").val());
-    });
 
     // 關閉 modal
     $('#uploadPicture').on('hidden.bs.modal', function (e) {
@@ -332,4 +319,177 @@
         }, null, "DELETE").send();
     });
 
+    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 == 0 ? "#" : x.parent);
+                callback ? callback(res.data) : "";
+            }
+        }, null, "POST").send();
+    }
+
+    function initTree(data) {
+        treeEvent();
+        let option = {
+            core: {
+                check_callback: true,
+                data: data,
+                themes: {
+                    name: "default-dark"
+                },
+            },
+            types: {
+                default: {
+                    max_depth: 3,
+                    valid_children: "default",
+                    icon: "fas fa-folder text-warning"
+                },
+            },
+            plugins: ["themes", "contextmenu", "sort", "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 >= 3) {
+                                    return true;   //第五層後無法新增
+                                }
+                            },
+                            action: function (obj) {
+                                $node = tree.create_node($node, { text: '新類別', type: 'default' });
+                                tree.deselect_all();
+                                tree.select_node($node);
+                                tree.edit($node);
+                            }
+                        },
+                        Rename: {
+                            label: "重新命名",
+                            action: function (obj) {
+                                tree.edit($node);
+                                /*                                tree.sort($node, true)*/
+                            }
+                        },
+                        Remove: {
+                            label: "移除",
+                            action: function (obj) {
+                                tree.delete_node($node);
+                            }
+
+                        }
+                    }
+                }
+            }
+        }
+        $("#graTree").jstree(option);
+
+    }
+
+    function treeEvent() {
+        $('#graTree').on("loaded.jstree", function (e, data) {
+            let topNode = $('#graTree').jstree(true).get_node("#");
+            $('#graTree').jstree(true).select_node(topNode.children[0]);
+        })
+        $('#graTree').on("select_node.jstree", function (e, data) {
+            dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id)});
+            graTable.ajax.reload();
+            
+            let names = [];
+            let curNode = $('#graTree').jstree(true).get_node(data.node);
+            curLayerId = parseInt(data.node.id);
+            $.each(curNode.parents, (idx, nodeId) => {
+                if (nodeId != "#") {
+                    let node = $('#graTree').jstree(true).get_node(nodeId);
+                    names.push(node.text);
+                }
+            })
+
+            names.push(data.node.text);
+            $("#graLayer").text(names.join("/"));
+        })
+        $("#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") {
+
+                } 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) {
+
+                } else {
+                    getGraCatList((graCatData) => {
+                        data.settings.core.data = graCatData;
+                        data.instance.refresh(true);
+                    })
+                }
+            }, null, "POST").send();
+
+        });
+        $("#graTree").on('delete_node.jstree', function (e, data) {
+            let main = {};
+            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) {
+
+                } 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 readGraph() {
+        let url = baseApiUrl + "/GraphManage/GraManRead";
+
+        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 == 0 ? "#" : x.parent);
+                callback ? callback(res.data) : "";
+            }
+        }, null, "POST").send();
+    }
+
 </script>

Frontend/css/site.css

@@ -154,6 +154,59 @@ input.toggle:checked {
     animation-delay: -0.15s;
 }
 
+/* js-tree */
+.jstree-node {
+    padding-bottom:3px;
+}
+.jstree-default-dark {
+    background-color:transparent;
+}
+.jstree a.jstree-anchor {
+    color:#d6d6d6 !important;
+}
+
+.dropzone .dz-preview.dz-file-preview .dz-image {
+    background: linear-gradient(to bottom, #675d72, #4d4a56) !important;
+}
+
+.dz-remove {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    z-index: 100;
+}
+
+.dz-remove span {
+    width: 30px;
+    height: 30px;
+    font-size: 24px;
+    border-radius: 10px;
+    color: white;
+    cursor: pointer !important;
+    padding-top: 3px;
+    transition: 0.2s;
+}
+
+.dz-remove span.mi-delete {
+    background: var(--danger);
+}
+
+.dz-remove span.mi-cancel {
+    font-size: 30px;
+    color: var(--color_grey);
+}
+
+.dz-remove:hover span {
+    transform: scale(1.1);
+    transition: 0.2s;
+}
+.dropzone .dz-preview.dz-image-preview {
+    background-color:transparent !important;
+}
+
+input:-webkit-autofill {
+     background-color:rgba(0, 0, 0, 0.15)!important;
+}
 @keyframes lds-ring {
     0% {
         transform: rotate(0deg);
@@ -365,6 +418,10 @@ input.toggle:checked {
     font-size: 0.9rem;
 }
 
+.fs-1 {
+    font-size: 1rem;
+}
+
 .fs-1-05 {
     font-size: 1.05rem;
 }

Frontend/index.html

@@ -35,7 +35,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <!-- Font Awesome -->
     <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
     <link href="lib/chart.js/Chart.min.css" rel="stylesheet" />
+    <link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" />
     <link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" />
+    <link href="lib/jstree-master/themes/proton/style.min.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
     <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">

Frontend/js/yourteam/yourteam.ajax.class.js

@@ -58,7 +58,6 @@ class Ajax {
     * @return {Object} data
     */
     successFunction = function (data, callback) {
-        debugger
         if (data && data.unauthorized == 401) {
             let cookies = new YourTeam.Utility.Cookie();
             let href = location.href;

FrontendWebApi/ApiControllers/GraphManageController.cs

@@ -21,6 +21,7 @@ namespace FrontendWebApi.ApiControllers
     {
         private readonly IBackendRepository backendRepository;
         private readonly IFrontendRepository frontendRepository;
+        private string graph_manage_layer = "graph_manage_layer";
         private string graph_manage_layer1 = "graph_manage_layer1";
         private string graph_manage_layer2 = "graph_manage_layer2";
 
@@ -33,65 +34,6 @@ namespace FrontendWebApi.ApiControllers
             graphManageFileSaveAsPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "upload", "graph_manage");
         }
 
-        [HttpPost]
-        public async Task<ApiResult<List<Variable>>> MaiSysList()
-        {
-            ApiResult<List<Variable>> apiResult = new ApiResult<List<Variable>>();
-            List<Variable> main_system_list = new List<Variable>();
-
-            try
-            {
-                var sqlString = @$"SELECT *
-                                    FROM variable 
-                                    WHERE system_type = @graph_manage_layer1 AND deleted = 0
-                                    ORDER BY system_priority, created_at desc";
-
-                var param = new { @graph_manage_layer1 = graph_manage_layer1 };
-                main_system_list = await backendRepository.GetAllAsync<Variable>(sqlString, param);
-
-                apiResult.Code = "0000";
-                apiResult.Data = main_system_list;
-            }
-            catch (Exception exception)
-            {
-                apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
-                Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
-            }
-
-            return apiResult;
-        }
-
-        [HttpPost]
-        public async Task<ApiResult<List<Variable>>> SubSysList([FromBody] int main_system_tag)
-        {
-            ApiResult<List<Variable>> apiResult = new ApiResult<List<Variable>>();
-            List<Variable> sub_system_list = new List<Variable>();
-
-            try
-            {
-                var sqlString = @$"SELECT v2.*
-                                    FROM variable v2
-                                    JOIN variable v1 ON v2.system_parent_id = v1.id AND v1.system_type = @graph_manage_layer1 AND v1.deleted = 0
-                                    WHERE v2.system_type = @graph_manage_layer2 AND v2.deleted = 0 AND v1.system_value = @main_system_tag
-                                    ORDER BY v2.system_priority, v2.created_at desc";
-
-                var param = new { @graph_manage_layer1 = graph_manage_layer1, @graph_manage_layer2 = graph_manage_layer2, @main_system_tag = main_system_tag };
-                sub_system_list = await backendRepository.GetAllAsync<Variable>(sqlString, param);
-
-                apiResult.Code = "0000";
-                apiResult.Data = sub_system_list;
-            }
-            catch (Exception exception)
-            {
-                apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
-                Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
-            }
-
-            return apiResult;
-
-        }
        
         /// <summary>
         /// 圖資類別列表
@@ -106,7 +48,7 @@ namespace FrontendWebApi.ApiControllers
             try
             {
                 var sqlString = @$"select * from variable 
-                                    where system_type like 'graph_manage_layer%' and deleted = 0
+                                    where system_type = 'graph_manage_layer' and deleted = 0
                                     order by id asc";
                 
                 variables = await backendRepository.GetAllAsync<Variable>(sqlString);
@@ -137,20 +79,20 @@ namespace FrontendWebApi.ApiControllers
             try
             {
                 Dictionary<string, object> variable = new Dictionary<string, object>();
-                var system_value = backendRepository.GetOneAsync<string>("select system_value from variable where system_type = @system_type and deleted = 0 order by system_value desc limit 1", new { @system_type = gv.system_type }).Result;
+                var system_value = backendRepository.GetOneAsync<string>("select system_priority from variable where system_type = @graph_manage_layer and deleted = 0 order by system_priority desc limit 1", new { @system_type = graph_manage_layer }).Result;
                 variable.Add("@deleted", 0);
-                variable.Add("@system_type", gv.system_type);
+                variable.Add("@graph_manage_layer", graph_manage_layer);
                 variable.Add("@system_key", gv.system_key);
                 variable.Add("@system_parent_id", gv.system_parent_id);
                 variable.Add("@system_remark", "圖資管理-" + gv.system_key);
-                variable.Add("@priority", Int32.Parse(system_value) + 1);
+                variable.Add("@system_priority", Int32.Parse(system_value) + 1);
-                variable.Add("@system_value", Int32.Parse(system_value) + 1);
+
                 variable.Add("@created_by", myUser.userinfo_guid);
                 variable.Add("@created_at", DateTime.Now);
 
-                await backendRepository.AddOneByCustomTable(variable, "variable");
+                var id = await backendRepository.AddOneByCustomTableReturnId(variable, "variable");
                 apiResult.Code = "0000";
-                apiResult.Data = "新增成功";
+                apiResult.Data = id.ToString();
             }
             catch (Exception exception)
             {
@@ -175,7 +117,7 @@ namespace FrontendWebApi.ApiControllers
             ApiResult<string> apiResult = new ApiResult<string>();
             var gm = await backendRepository.GetOneAsync<GraphInsInfo>("select * from variable where id = @id and deleted = 0", new { @id = gv.id });
 
-            if (gm != null)
+            if (gm == null)
             {
                 apiResult.Code = "0002";
                 apiResult.Data = "無法找到圖資";
@@ -185,7 +127,6 @@ namespace FrontendWebApi.ApiControllers
             try
             {
                 Dictionary<string, object> variable = new Dictionary<string, object>();
-                var system_value = backendRepository.GetOneAsync<string>("select system_value from variable where system_type = @system_type and deleted = 0 order by system_value desc limit 1", new { @system_type = gv.system_type }).Result;
                 
                 variable.Add("@system_key", gv.system_key);
                 variable.Add("@updated_by", myUser.userinfo_guid);
@@ -213,7 +154,7 @@ namespace FrontendWebApi.ApiControllers
         /// <param name="gv"></param>
         /// <returns></returns>
         [HttpPost]
-        public async Task<ApiResult<string>> DelOneGraMan([FromBody] GraphVar gv)
+        public async Task<ApiResult<string>> DelVar([FromBody] GraphVar gv)
         {
             ApiResult<string> apiResult = new ApiResult<string>();
 
@@ -244,14 +185,13 @@ namespace FrontendWebApi.ApiControllers
             List<GraphList> graManList = new List<GraphList>();
             try
             {
-                var param = new { @graph_manage_layer1 = graph_manage_layer1, @graph_manage_layer2 = graph_manage_layer2, @sub_system_tag = gi.sub_system_tag, @main_system_tag = gi.main_system_tag };
+                var param = new { layer_id = gi.layer_id , graph_manage_layer = graph_manage_layer };
                 if (gi.keyWord != null && !string.IsNullOrEmpty(gi.keyWord))
                 {
                     graManList = await backendRepository.GetAllAsync<GraphList>(@$"SELECT gm.*
                                     FROM graph_manage gm
-                                    JOIN variable v1 ON v1.system_value = @main_system_tag and v1.system_type = @graph_manage_layer1 and v1.deleted = 0 AND convert(v1.system_value, nchar) = gm.main_system_tag
+                                    JOIN variable v1 ON v1.id = @layer_id and v1.system_type = @graph_manage_layer and v1.deleted = 0
-                                    JOIN variable v2 ON v1.id = v2.system_parent_id AND v2.system_type = @graph_manage_layer2 AND v2.deleted = 0 and convert(v2.system_value, nchar) = gm.sub_system_tag
+                                    WHERE gm.deleted = 0
-                                    WHERE v2.system_value in @sub_system_tag AND gm.deleted = 0
                                             AND (gm.code like '%{gi.keyWord}%' OR gm.name like '%{gi.keyWord}%' OR gm.oriOrgName like '%{gi.keyWord}%' OR gm.donOrgName like '%{gi.keyWord}%')
                                     ORDER BY gm.priority, gm.created_at desc", param);
                 }
@@ -259,9 +199,8 @@ namespace FrontendWebApi.ApiControllers
                 {
                     var sqlString = @$"SELECT gm.*
                                     FROM graph_manage gm
-                                    JOIN variable v1 ON v1.system_value = @main_system_tag and v1.system_type = @graph_manage_layer1 and v1.deleted = 0 AND convert(v1.system_value, nchar) = gm.main_system_tag
+                                    JOIN variable v1 ON v1.id = @layer_id and v1.system_type = @graph_manage_layer and v1.deleted = 0
-                                    JOIN variable v2 ON v1.id = v2.system_parent_id AND v2.system_type = @graph_manage_layer2 AND v2.deleted = 0 AND convert(v2.system_value, nchar) = gm.sub_system_tag
+                                    WHERE gm.deleted = 0 and gm.layer_id = @layer_id
-                                    WHERE v2.system_value in @sub_system_tag AND gm.deleted = 0
                                     ORDER BY gm.priority, gm.created_at desc";
 
                     graManList = await backendRepository.GetAllAsync<GraphList>(sqlString, param);
@@ -289,12 +228,11 @@ namespace FrontendWebApi.ApiControllers
             {
                 var sqlString = @$"SELECT *
                                     FROM graph_manage gm
-                                    JOIN variable v1 ON convert(v1.system_value, nchar) = gm.main_system_tag and v1.system_type = @graph_manage_layer1 and v1.deleted = 0
+                                    JOIN variable v1 ON convert(v1.id, nchar) = gm.layer_id and v1.system_type = @graph_manage_layer and v1.deleted = 0
-                                    JOIN variable v2 ON v1.id = v2.system_parent_id AND v2.system_type = @graph_manage_layer2 AND v2.deleted = 0 and convert(v2.system_value, nchar) = gm.sub_system_tag
                                     WHERE gm.id = @id
                                     ORDER BY gm.priority, gm.created_at desc";
 
-                var param = new { @id = gi.id, @graph_manage_layer1 = graph_manage_layer1, @graph_manage_layer2 = graph_manage_layer2 };
+                var param = new { @id = gi.id, @layer_id = gi.layer_id };
 
                 graManList = await backendRepository.GetOneAsync<GraphList>(sqlString, param);
 
@@ -351,8 +289,8 @@ namespace FrontendWebApi.ApiControllers
             try
             {
 
-                var sWhere = $@"deleted = 0 and id != @id and code = @code and sub_system_tag = @sub_system_tag and main_system_tag = @main_system_tag";
+                var sWhere = $@"deleted = 0 and id != @id and code = @code and layer_id = @layer_id";
-                var gm = await backendRepository.GetOneAsync<GraphInsInfo>("graph_manage", sWhere, new { @id = gii.id, @code = gii.code, @sub_system_tag = gii.sub_system_tag, @main_system_tag = gii.main_system_tag });
+                var gm = await backendRepository.GetOneAsync<GraphInsInfo>("graph_manage", sWhere, new { @id = gii.id, @code = gii.code, @layer_id = gii.layer_id});
 
                 if (gm != null)
                 {
@@ -425,8 +363,9 @@ namespace FrontendWebApi.ApiControllers
 
                 graph_manage.Add("@code", gii.code);
                 graph_manage.Add("@name", gii.name);
-                graph_manage.Add("@main_system_tag", gii.main_system_tag);
+                //graph_manage.Add("@main_system_tag", gii.main_system_tag);
-                graph_manage.Add("@sub_system_tag", gii.sub_system_tag);
+                //graph_manage.Add("@sub_system_tag", gii.sub_system_tag);
+                graph_manage.Add("@layer_id", gii.layer_id);
                 graph_manage.Add("@updated_at", DateTime.Now);
                 graph_manage.Add("@updated_by", myUser.userinfo_guid);
                 //graph_manage.Add("@priority", gii.priority);
@@ -454,8 +393,16 @@ namespace FrontendWebApi.ApiControllers
 
             try
             {
-                var sWhere = @$"deleted = 0 AND code = @code AND sub_system_tag = @sub_system_tag AND main_system_tag = @main_system_tag";
+                if (gii.oriOrgName == "null") {
-                var gm = await backendRepository.GetOneAsync<GraphInsInfo>("graph_manage", sWhere, new { @code = gii.code, @sub_system_tag = gii.sub_system_tag, @main_system_tag = gii.main_system_tag });
+                    gii.oriOrgName = null;
+                }
+                if (gii.donOrgName == "null")
+                {
+                    gii.donOrgName = null;
+                }
+
+                var sWhere = @$"deleted = 0 AND code = @code AND layer_id = @layer_id";
+                var gm = await backendRepository.GetOneAsync<GraphInsInfo>("graph_manage", sWhere, new { @code = gii.code, @layer_id = gii.layer_id});
 
                 if (gm != null)
                 {
@@ -509,8 +456,9 @@ namespace FrontendWebApi.ApiControllers
 
                 var newPriority = await backendRepository.GetCurrentPriority("graph_manage");
                 graph_manage.Add("@code", gii.code);
-                graph_manage.Add("@main_system_tag", gii.main_system_tag);
+                //graph_manage.Add("@main_system_tag", gii.main_system_tag);
-                graph_manage.Add("@sub_system_tag", gii.sub_system_tag);
+                //graph_manage.Add("@sub_system_tag", gii.sub_system_tag);
+                graph_manage.Add("@layer_id", gii.layer_id);
                 graph_manage.Add("@name", gii.name);
                 graph_manage.Add("@deleted", 0);
                 graph_manage.Add("@priority", newPriority + 1);

FrontendWebApi/Models/GraphManage.cs

@@ -12,6 +12,7 @@ namespace FrontendWebApi.Models
         public string code { get; set; }
         public string main_system_tag { get; set; }
         public int sub_system_tag { get; set; } 
+        public int layer_id { get; set; } 
         public string name { get; set; }
         public string oriOrgName { get; set; }
         public string oriSavName { get; set; }
@@ -23,6 +24,7 @@ namespace FrontendWebApi.Models
     {
         public int id { get; set; }
         public string code { get; set; }
+        public int layer_id { get; set; }
         public string main_system_tag { get; set; }
         public string sub_system_tag { get; set; }
         public string name { get; set; }
@@ -40,8 +42,9 @@ namespace FrontendWebApi.Models
         public int id { get; set; }
         public string code { get; set; }
         public string main_system_tag { get; set; }
-        public List<int> sub_system_tag { get; set; }
+        public List<int> sub_system_tag { get; set; } = new List<int>();
         public string keyWord { get; set; }
+        public int? layer_id { get; set; }
     }
 
     public class GraphVar

FrontendWebApi/wwwroot/upload/graph_manage/028ed274-df48-4fcd-8b33-7cb70d60a9e2.dwg

@@ -0,0 +1 @@
+false

FrontendWebApi/wwwroot/upload/graph_manage/070dead0-bcb9-462f-839c-aae24a80f7e9.dwg

@@ -0,0 +1 @@
+false

FrontendWebApi/wwwroot/upload/graph_manage/4f161325-fba9-428d-8fb7-df19deba0503.dwg

@@ -0,0 +1 @@
+false

FrontendWebApi/wwwroot/upload/graph_manage/645e3ad8-bf0e-42b5-810e-1bb2431a9136.dwg

@@ -0,0 +1 @@
+false

FrontendWebApi/wwwroot/upload/graph_manage/c62a7825-7575-4985-ae4a-731adf1a13ff.dwg

@@ -0,0 +1 @@
+false

FrontendWebApi/wwwroot/upload/graph_manage/cc390df6-9ef7-486f-804b-a5b8c18214b3.dwg

@@ -0,0 +1 @@
+false

FrontendWebApi/wwwroot/upload/graph_manage/d1a089ce-8d35-4793-bc3e-694c6fadc2a7.dwg

@@ -0,0 +1 @@
+false

Repository/BaseRepository/Implement/BaseRepository.cs

@@ -866,7 +866,7 @@ namespace Repository.BaseRepository.Implement
                         string sql = InsertGenerateString(properties, Table_name);
                         if (returnId)
                         {
-                            sql += " SELECT SCOPE_IDENTITY()";
+                            sql += " SELECT LAST_INSERT_ID()";
                         }
                         id = await conn.QueryFirstOrDefaultAsync<int>(sql, dict, trans);
                         //await conn.ExecuteAsync(sql, dict, trans);