jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dev01 2022-12-14 15:57:49 +08:00
parent d43e0e9c5f
commit d9d1a4d736
16 changed files with 203 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
Frontend/_graphManagement.html
View File

@ -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="confirmDelBtn" aria-label="OK" e-prevent>
確定
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" aria-label="No">
取消
</button>
<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>
@ -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,45 +253,51 @@
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();
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);
}
}
});
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 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;
$("#upMyDesignDiagram").on("change", function (e) {
@ -301,26 +328,27 @@
});
// 刪除資料
onEvent('click', '#del', function () {
pageAct.opeRecId = null;
pageAct.opeFirmId = $(this).parent().data('id');
onEvent("click", "#delGraManBtn", function () {
delGraMan();
})
onEvent('click', '#creGraMan', function () {
curActGraid = 0;
$("#graModal").modal("show");
});
onEvent('click', '#del', function () {
objSendData.Data = { id: pageAct.opeFirmId ?? pageAct.opeRecId };
let url = baseApiUrl + "/operation/" + (pageAct.work_type == null ? "DelOpeFirm" : "DelOpeRecord");
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
//toast_ok(common.AddSuc);
//$("#delModal").modal("hide");
$("#confirmDelCanBtn").click();
// refTable();
}
}, null, "DELETE").send();
});
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";
@ -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>

1
Frontend/index.html
View File

@ -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">

1
Frontend/js/init.js
View File

@ -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: "新增成功",

9
Frontend/js/style.js
View File

@ -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 {

26
FrontendWebApi/ApiControllers/GraphManageController.cs
View File

@ -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));

BIN
FrontendWebApi/wwwroot/upload/graph_manage/072b74e4-a418-4e98-9d90-c8d48cfb7e4b.dwg Normal file
View File

Binary file not shown.

1
FrontendWebApi/wwwroot/upload/graph_manage/352efaf2-d205-4d2a-b2c4-a8245e285bad.dwg Normal file
View File

@ -0,0 +1 @@
false

BIN
FrontendWebApi/wwwroot/upload/graph_manage/56f192c7-1ce5-4e3f-83d6-cd8227a484dd.dwg Normal file
View File

Binary file not shown.

BIN
FrontendWebApi/wwwroot/upload/graph_manage/59ef4b28-e1a9-4edf-80de-d1ba3c7ee7fc.dwg Normal file
View File

Binary file not shown.

1
FrontendWebApi/wwwroot/upload/graph_manage/a5c2c64f-51d3-4e1c-8878-ca41e043170e.dwg Normal file
View File

@ -0,0 +1 @@
false

1
FrontendWebApi/wwwroot/upload/graph_manage/ad67c510-e658-474b-8d6f-5f6c4b7b7c4d.dwg Normal file
View File

@ -0,0 +1 @@
false

BIN
FrontendWebApi/wwwroot/upload/graph_manage/af620d4c-9f63-441b-bf06-4de11907dd4a.dwg Normal file
View File

Binary file not shown.

BIN
FrontendWebApi/wwwroot/upload/graph_manage/bddbf316-2e56-43f5-8e97-e701595ed1a2.dwg Normal file
View File

Binary file not shown.

BIN
FrontendWebApi/wwwroot/upload/graph_manage/d2f203c5-e150-4554-9a83-c48bd38cba34.dwg Normal file
View File

Binary file not shown.

1
FrontendWebApi/wwwroot/upload/graph_manage/d64e5fdd-2f92-4ebe-a822-936ffb662a34.dwg Normal file
View File

@ -0,0 +1 @@
false

1
FrontendWebApi/wwwroot/upload/graph_manage/f4165ac6-75bf-472f-9200-75c02e770cc0.dwg Normal file
View File

@ -0,0 +1 @@
false