[Frontend][圖資管理] 圖資 CURD 程序建置 | 列表下載DWG檔程序建置 | dropzone 上傳文件程序調整

Frontend/_graphManagement.html

@@ -14,8 +14,8 @@
                 </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 href="javascript:;" id="creGraMan" class="btn btn-success">
-                            +上傳
+                            +新增
                         </a>
                     </div>
 
@@ -117,17 +117,20 @@
      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">
-                <h4 class="mr-auto">確定刪除?</h4>
+                <button type="button" class="btn btn-primary" id="delGraManBtn">確定</button>
-                <button type="button" class="btn btn-primary" id="confirmDelBtn" aria-label="OK" e-prevent>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
-                    確定
+            </div>
-                </button>
-                <button type="button" class="btn btn-danger" data-dismiss="modal" aria-label="No">
-                    取消
-                </button>
             </div>
         </div>
-    </div>
 </div>
 
 <script>
@@ -135,6 +138,7 @@
     var curLayerId = null;
     var uploader = {};
     var uploadFiles = {};
+    var curActGraid = 0;
     $(function () {
         initList();
         initDropzone();
@@ -157,7 +161,7 @@
             { "targets": [1], "width": "25%", "sortable": true },
             { "targets": [2], "width": "25%", "sortable": true },
             { "targets": [3], "width": "25%", "sortable": true },
-            { "targets": [4], "width": "15%", "sortable": true },
+            { "targets": [4], "width": "15%", "sortable": false },
         ];
 
         let columns = [
@@ -174,7 +178,7 @@
                 "title": "原設計",
                 "data": "oriOrgName",
                 "render": function (data, type, row, meta) {
-                    return `<a href="javascript:;">${row.oriOrgName ?? ""}</a>`;
+                    return `<a id="oriDwgDown${row.id}" href="javascript:;">${row.oriOrgName ?? ""}</a>`;
                 }
 
             },
@@ -182,7 +186,7 @@
                 "title": "竣工圖",
                 "data": "donOrgName",
                 "render": function (data, type, row, meta) {
-                    return `<a href="javascript:;">${row.donOrgName ?? ""}</a>`;
+                    return `<a id="donDwgDown${row.id}" href="javascript:;">${row.donOrgName ?? ""}</a>`;
                 }
             },
 
@@ -192,7 +196,7 @@
                 "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" }));
+                    btnDiv.append(creBtnHtml("刪除", "graDelBtn" + data, null, ["btn", "btn-danger"]));
                     return btnDiv.outerHtml();
                 }
             },
@@ -210,15 +214,32 @@
             dictInvalidFileType: `上傳格式錯誤`,
             dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
             dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
-            maxFilesize: 3,
+            dictMaxFilesExceeded: "已超過上傳限制數量",
+            maxFilesize: 10,
             filesizeBase: 1024,
             maxFiles: 1,
             autoProcessQueue: false,
             acceptedFiles: ".dwg",
             init: function () {
                 this.on("addedfile", function (file) {
-                    $("#graMyDesignDiagram").find('.dz-progress').addClass('d-none');
+                    $(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");
+                    }
+                });
+               
             },
         };
 
@@ -232,44 +253,50 @@
         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 () {
-        let cookies = new YourTeam.Utility.Cookie();
+        saveGraMan();
-
-        let url = baseApiUrl + "/GraphManage/SaveGraMan";
-        let fd = new FormData();
-        fd.append("code", $("#graPicNum").val());
-        fd.append("layer_id", curLayerId);
-        fd.append("name", $("#graPicName").val());
-        fd.append("oriOrgName", uploadFiles["graMyDesignDiagram"]?.name ?? null);
-        fd.append("donOrgName", null);
-        fd.append("oriFile", uploadFiles["graMyDesignDiagram"] ?? null);
-        fd.append("donFile", uploadFiles["graMyAsBuilt"] ?? null);
-
-        $.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 {
-                    // console.log("ERROR: ", res.data, res.code);
-                }
-            }
-        });
     });
 
     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 cookies = new YourTeam.Utility.Cookie();
+        let rowData = graTable.row($(this).closest("tr")).data();
+        let apiUrl = baseApiUrl + `/File/Download?type=graph&savename=${rowData.oriSavName}&oriname=${rowData.oriOrgName}`;
+        let extname = rowData.oriOrgName?.split(".").slice(-1) || "dwg";
+        download(cookies.get("JWT-Authorization"), apiUrl, rowData.name + "_原設計圖" + "." + extname);
+    })
+    
+    onEvent("click", "a[id^=donDwgDown]", function () {
+        let cookies = new YourTeam.Utility.Cookie();
+        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(cookies.get("JWT-Authorization"), apiUrl, rowData.name + "_竣工圖" + "." + extname);
+    })
 
     // 上傳檔案
     var oriImg;
@@ -286,7 +313,7 @@
         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) {
@@ -301,26 +328,27 @@
     });
 
     // 刪除資料
-    onEvent('click', '#del', function () {
+    onEvent("click", "#delGraManBtn", function () {
-        pageAct.opeRecId = null;
+        delGraMan();
-        pageAct.opeFirmId = $(this).parent().data('id');
+    })
+
+    onEvent('click', '#creGraMan', function () {
+        curActGraid = 0;
+        $("#graModal").modal("show");
     });
 
-    onEvent('click', '#del', function () {
+    onEvent('show.bs.modal', "#graModal", function (e) {
-        objSendData.Data = { id: pageAct.opeFirmId ?? pageAct.opeRecId };
+        let type = $(e.relatedTarget).data("type");
-        let url = baseApiUrl + "/operation/" + (pageAct.work_type == null ? "DelOpeFirm" : "DelOpeRecord");
+        $(this).data("type", type);
-
+        $("#graPicNum").val("");
-        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+        $("#graPicName").val("");
-            if (!res || res.code != "0000" || !res.data) {
+        uploadFiles["graMyDesignDiagram"] = {};
-
+        uploadFiles["graMyAsBuilt"] = {};
-            } else {
+        uploader["graMyDesignDiagram"][0].dropzone.removeAllFiles(true);
-                //toast_ok(common.AddSuc);
+        $("#graMyDesignDiagram .dz-preview").remove();
-                //$("#delModal").modal("hide");
+        uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true);
-                $("#confirmDelCanBtn").click();
+        $("#graMyAsBuilt .dz-preview").remove();
-                // refTable();
+    })
-            }
-        }, null, "DELETE").send();
-    });
 
     function getGraCatList(callback) {
         let url = baseApiUrl + "/GraphManage/VarList";
@@ -410,7 +438,7 @@
         $('#graTree').on("select_node.jstree", function (e, data) {
             dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id) });
             graTable.ajax.reload();
-            
+
             curLayerId = parseInt(data.node.id);
             $("#graLayer").text(levelNameByNodeId(data.node));
         })
@@ -427,15 +455,15 @@
                     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;
 
@@ -482,11 +510,22 @@
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
-                $("#graPicNum").text(res.data?.code);
+                
-                $("#graPicName").text(res.data?.name);
-                $("#graLayer").text(levelNameByNodeId(res.data?.layer_id));
-
                 $("#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 };
+                    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?.oriSavName };
+                    uploader["graMyAsBuilt"][0].dropzone?.displayExistingFile(fileObj);
+                }
+
             }
         }, null, "POST").send();
     }
@@ -506,4 +545,63 @@
         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>

Frontend/index.html

@@ -37,7 +37,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <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/init.js

@@ -5,6 +5,7 @@ var varRegApiUrl = "/reg/api/";  //註冊API路徑
 var varApiUrl = "/api/";  //API路徑
 var varPathImg = "/Upload/Images/";
 var varPathFile = "/Upload/Files/";
+var varGraPath = "/upload/graph_manage";
 var statusArr = { 1: "啟用", 0: "未啟用", 9: "刪除" };
 var common = {
     AddSuc: "新增成功",

Frontend/js/style.js

@@ -1349,10 +1349,15 @@ function toBool(boolstr) {
  * @param {any} url
  * @param {any} filename
  */
-async function download(url, filename) {
+async function download(token,url, filename) {
 
     let toDataURL = function (url) {
-        return fetch(url).then((response) => {
+        return fetch(url, {
+            headers: {
+                'Content-Type': 'application/octet-stream',
+                "Authorization": "Bearer " + token,
+            },
+        }).then((response) => {
             if (!response.ok) {
                 throw new Error("Not 2xx response", { cause: response });
             } else {

FrontendWebApi/ApiControllers/GraphManageController.cs

@@ -288,7 +288,22 @@ namespace FrontendWebApi.ApiControllers
 
             try
             {
-
+                if (gii.oriOrgName == "null")
+                {
+                    gii.oriOrgName = null;
+                }
+                if (gii.donOrgName == "null")
+                {
+                    gii.donOrgName = null;
+                }
+                if (gii.oriSavName == "null")
+                {
+                    gii.oriSavName = null;
+                }
+                if (gii.donSavName == "null")
+                {
+                    gii.donSavName = null;
+                }
                 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, @layer_id = gii.layer_id});
 
@@ -315,13 +330,13 @@ namespace FrontendWebApi.ApiControllers
                 //原設計圖修改
                 var new_guid = Guid.NewGuid();
                 //刪除原本檔案
-                if (gm.oriSavName != null && gii.oriOrgName == null)
+                if (gm.oriSavName != null && gii.oriSavName != gm.oriSavName)
                 {
                     FolderFunction folderFunction = new FolderFunction();
                     folderFunction.DeleteFile(Path.Combine(graphManageFileSaveAsPath, gm.oriSavName));
                 }
 
-                string fileName = null;
+                string fileName = gii.oriSavName ?? null;
                 if (gii.oriOrgName != null && gii.oriFile != null)
                 {
                     fileName = new_guid + "." + gii.oriOrgName.Split('.')[1];
@@ -332,15 +347,16 @@ namespace FrontendWebApi.ApiControllers
                     {
                         gii.oriFile.CopyTo(stream);
                     }
+                    
                 }
                 graph_manage.Add("@oriOrgName", gii.oriOrgName);
                 graph_manage.Add("@oriSavName", fileName);
 
-                fileName = null;
+                fileName = gii.donSavName ?? null;
                 //竣工圖修改
                 new_guid = Guid.NewGuid();
                 //刪除原本檔案
-                if (gm.donSavName != null && gii.donOrgName == null)
+                if (gm.donSavName != null && gii.donSavName != gm.donSavName)
                 {
                     var folderFunction = new FolderFunction();
                     folderFunction.DeleteFile(Path.Combine(graphManageFileSaveAsPath, gm.donSavName));

FrontendWebApi/wwwroot/upload/graph_manage/352efaf2-d205-4d2a-b2c4-a8245e285bad.dwg

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

FrontendWebApi/wwwroot/upload/graph_manage/a5c2c64f-51d3-4e1c-8878-ca41e043170e.dwg

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

FrontendWebApi/wwwroot/upload/graph_manage/ad67c510-e658-474b-8d6f-5f6c4b7b7c4d.dwg

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

FrontendWebApi/wwwroot/upload/graph_manage/d64e5fdd-2f92-4ebe-a822-936ffb662a34.dwg

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

FrontendWebApi/wwwroot/upload/graph_manage/f4165ac6-75bf-472f-9200-75c02e770cc0.dwg

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