607 lines
23 KiB
HTML
607 lines
23 KiB
HTML
<main id="js-page-content" role="main" class="page-content">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-xl-12">
|
|
|
|
<h1 class="p-2 mb-0">圖資管理</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<div class="row d-inline-block col-12 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">
|
|
<a href="javascript:;" id="creGraMan" class="btn btn-success">
|
|
+新增
|
|
</a>
|
|
</div>
|
|
|
|
<table id="graTable" class="table table-bordered table-striped text-center m-0">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- upload modal -->
|
|
<div class="modal fade" id="graModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
|
|
data-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
圖資上傳
|
|
</h4>
|
|
</div>
|
|
<form id="uploadForm">
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="upPicNum">圖號</label>
|
|
<input type="text" id="graPicNum" name="graPicNum" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="upPicName">圖名</label>
|
|
<input type="text" id="graPicName" name="graPicName" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mt-3">
|
|
<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">
|
|
<label>原設計</label>
|
|
</div>
|
|
<div class="col-md-12">
|
|
|
|
<div id="graMyDesignDiagram" class="dropzone">
|
|
<div class="dz-message">
|
|
<div class="drag-icon-cph">
|
|
<i class="material-icons">backup</i>
|
|
</div>
|
|
<h3>選擇一個文件或拖放到這裡</h3>
|
|
<p class="mb-0 col-grey">
|
|
DWG檔案不超過 10MB
|
|
</p>
|
|
</div>
|
|
<div class="fallback">
|
|
<input name="file" type="file" multiple />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-12 mt-3">
|
|
<label>竣工圖</label>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div id="graMyAsBuilt" class="dropzone">
|
|
<div class="dz-message">
|
|
<div class="drag-icon-cph">
|
|
<i class="material-icons">backup</i>
|
|
</div>
|
|
<h3>選擇一個文件或拖放到這裡</h3>
|
|
<p class="mb-0 col-grey">
|
|
DWG檔案不超過 10MB
|
|
</p>
|
|
</div>
|
|
<div class="fallback">
|
|
<input name="file" type="file" multiple />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" id="graSendBtn">儲存</button>
|
|
<button type="button" class="btn btn-secondary" id="close" data-dismiss="modal">取消</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- delete modal -->
|
|
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
|
|
data-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
確認刪除
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body py-1">
|
|
<label>確認要刪除此筆圖資資料？</label>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" id="delGraManBtn">確定</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var graTable = null;
|
|
var curLayerId = null;
|
|
var uploader = {};
|
|
var uploadFiles = {};
|
|
var curActGraid = 0;
|
|
$(function () {
|
|
initList();
|
|
initDropzone();
|
|
getGraCatList(initTree);
|
|
})
|
|
|
|
// 讀取列表資料
|
|
function initList() {
|
|
let ajaxObj = {
|
|
url: baseApiUrl + "/GraphManage/GraManList",
|
|
method: "POST",
|
|
data: {
|
|
layer_id: 0,
|
|
},
|
|
}
|
|
let tag = "#graTable";
|
|
|
|
let column_defs = [
|
|
{ "targets": [0], "width": "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 },
|
|
];
|
|
|
|
let columns = [
|
|
{
|
|
"title": "圖號",
|
|
"data": "code",
|
|
|
|
},
|
|
{
|
|
"title": "圖名",
|
|
"data": "name",
|
|
},
|
|
{
|
|
"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",
|
|
"render": function (data, type, row, meta) {
|
|
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
|
|
btnDiv.append(creBtnHtml("修改", "graEdiBtn" + data, null, ["btn", "btn-info"]));
|
|
btnDiv.append(creBtnHtml("刪除", "graDelBtn" + data, null, ["btn", "btn-danger"]));
|
|
return btnDiv.outerHtml();
|
|
}
|
|
},
|
|
];
|
|
|
|
graTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
|
|
}
|
|
|
|
function initDropzone() {
|
|
Dropzone.autoDiscover = false;
|
|
let option = {
|
|
url: "/",
|
|
addRemoveLinks: true,
|
|
dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
|
|
dictInvalidFileType: `上傳格式錯誤`,
|
|
dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎？`,
|
|
dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
|
|
dictMaxFilesExceeded: "已超過上傳限制數量",
|
|
maxFilesize: 10,
|
|
filesizeBase: 1024,
|
|
maxFiles: 1,
|
|
autoProcessQueue: false,
|
|
acceptedFiles: ".dwg",
|
|
init: function () {
|
|
this.on("addedfile", function (file) {
|
|
$(this.previewsContainer).find('.dz-progress').addClass('d-none');
|
|
if (file.savename) {
|
|
file.accepted = true;
|
|
this.files.push(file);
|
|
}
|
|
});
|
|
this.on("complete", function (file) {
|
|
if (file.savename) {
|
|
$(file.previewElement).find('.dz-image img').remove();
|
|
}
|
|
});
|
|
this.on("thumbnail", function (file) {
|
|
// 若為讀取檔案時
|
|
if (file.savename) {
|
|
$(file.previewElement).removeClass("dz-image-preview").addClass("dz-file-preview");
|
|
}
|
|
});
|
|
|
|
},
|
|
};
|
|
|
|
uploader.graMyDesignDiagram = $("#graMyDesignDiagram").dropzone(option);
|
|
uploader.graMyAsBuilt = $("#graMyAsBuilt").dropzone(option);
|
|
|
|
uploader["graMyDesignDiagram"][0].dropzone.on("addedfile", file => {
|
|
uploadFiles["graMyDesignDiagram"] = file;
|
|
})
|
|
|
|
uploader["graMyAsBuilt"][0].dropzone.on("addedfile", file => {
|
|
uploadFiles["graMyAsBuilt"] = file;
|
|
})
|
|
|
|
uploader["graMyDesignDiagram"][0].dropzone.on("removedfile", file => {
|
|
uploadFiles["graMyDesignDiagram"] = {};
|
|
file.previewElement.remove();
|
|
})
|
|
|
|
uploader["graMyAsBuilt"][0].dropzone.on("removedfile", file => {
|
|
uploadFiles["graMyAsBuilt"] = {};
|
|
file.previewElement.remove();
|
|
})
|
|
}
|
|
|
|
// 新增資料
|
|
onEvent('click', '#graSendBtn', function () {
|
|
saveGraMan();
|
|
});
|
|
|
|
onEvent("click", "button[id^=graEdiBtn]", function () {
|
|
let id = $(this).prop("id").split("graEdiBtn")[1];
|
|
curActGraid = parseInt(id);
|
|
readGraph(id);
|
|
})
|
|
|
|
onEvent("click", "button[id^=graDelBtn]", function () {
|
|
let id = $(this).prop("id").split("graDelBtn")[1];
|
|
curActGraid = parseInt(id);
|
|
$("#delModal").modal("show");
|
|
})
|
|
|
|
onEvent("click", "a[id^=oriDwgDown]", function () {
|
|
let 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) {
|
|
let fileHelper = new YourTeam.Utility.File();
|
|
oriImg = this.files[0];
|
|
fileHelper.readAndPreviewImages(this.files, 'upForDesignDiagram', 0, 86, '<div class="file-item">', '<button class="del-small-trash" name="btnDelImg" ><i class="fa fa-times"></i></button></div>');
|
|
});
|
|
|
|
var donImg;
|
|
$("#upMyAsBuilt").on("change", function (e) {
|
|
let fileHelper = new YourTeam.Utility.File();
|
|
donImg = this.files[0];
|
|
fileHelper.readAndPreviewImages(this.files, 'upForAsBuilt', 0, 86, '<div class="file-item">', '<button class="del-small-trash" name="btnDelImg" ><i class="fa fa-times"></i></button></div>');
|
|
});
|
|
|
|
|
|
|
|
// 關閉 modal
|
|
$('#uploadPicture').on('hidden.bs.modal', function (e) {
|
|
console.log("123456789");
|
|
});
|
|
$('#colorModal').on('hidden.bs.modal', function () {
|
|
// # 可以设置下拉框为初始值
|
|
$("#colorCodeSelect").val(-1);
|
|
// # 清空表单校验信息
|
|
$("#add").Validform().resetForm();
|
|
$(".Validform_checktip").html("");
|
|
});
|
|
|
|
// 刪除資料
|
|
onEvent("click", "#delGraManBtn", function () {
|
|
delGraMan();
|
|
})
|
|
|
|
onEvent('click', '#creGraMan', function () {
|
|
curActGraid = 0;
|
|
$("#graModal").modal("show");
|
|
});
|
|
|
|
onEvent('show.bs.modal', "#graModal", function (e) {
|
|
let type = $(e.relatedTarget).data("type");
|
|
$(this).data("type", type);
|
|
$("#graPicNum").val("");
|
|
$("#graPicName").val("");
|
|
uploadFiles["graMyDesignDiagram"] = {};
|
|
uploadFiles["graMyAsBuilt"] = {};
|
|
uploader["graMyDesignDiagram"][0].dropzone.removeAllFiles(true);
|
|
$("#graMyDesignDiagram .dz-preview").remove();
|
|
uploader["graMyAsBuilt"][0].dropzone.removeAllFiles(true);
|
|
$("#graMyAsBuilt .dz-preview").remove();
|
|
})
|
|
|
|
function getGraCatList(callback) {
|
|
let url = baseApiUrl + "/GraphManage/VarList";
|
|
|
|
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
|
|
} else {
|
|
res.data.forEach(x => x.parent = x.system_parent_id);
|
|
res.data.forEach(x => x.text = x.system_key);
|
|
res.data.forEach(x => x.parent = x.parent == 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,
|
|
icon: "fas fa-folder text-warning"
|
|
},
|
|
},
|
|
plugins: ["themes", "contextmenu", "sort", "conditionalselect", "search", "types"],
|
|
|
|
search: {
|
|
case_insensitive: true,
|
|
show_only_matches: true,
|
|
},
|
|
contextmenu: {
|
|
items: function ($node) {
|
|
let tree = this;
|
|
let depth = $node.parents.length; //抓出該節點深度(第幾層)
|
|
return {
|
|
Create: {
|
|
label: "新增",
|
|
_disabled: function (data) {
|
|
if (depth >= 3) {
|
|
return true; //第五層後無法新增
|
|
}
|
|
return false;
|
|
},
|
|
action: function (obj) {
|
|
$node = tree.create_node($node, { text: '新類別', type: 'default' });
|
|
tree.deselect_all();
|
|
tree.select_node($node);
|
|
tree.edit($node);
|
|
|
|
}
|
|
},
|
|
Rename: {
|
|
label: "重新命名",
|
|
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();
|
|
|
|
curLayerId = parseInt(data.node.id);
|
|
$("#graLayer").text(levelNameByNodeId(data.node));
|
|
})
|
|
$("#graTree").on('create_node.jstree', function (e, data) {
|
|
let main = {};
|
|
main.system_key = data.node.text;
|
|
main.system_parent_id = parseInt(data.node.parent);
|
|
|
|
objSendData.Data = main;
|
|
|
|
ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/SaveVar", objSendData, function (res) {
|
|
if (!res || res.code != "0000") {
|
|
data.instance.delete_node(data.node);
|
|
toast_error(res.msg || common.SysErr);
|
|
} else {
|
|
data.instance.set_id(data.node, res.data);
|
|
|
|
|
|
}
|
|
}, null, "POST").send();
|
|
|
|
});
|
|
$("#graTree").on('rename_node.jstree', function (e, data) {
|
|
let main = {}
|
|
|
|
main.id = parseInt(data.node.id);
|
|
main.system_key = data.node.text;
|
|
|
|
objSendData.Data = main;
|
|
ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/EditVar", objSendData, function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
toast_error(res.msg || common.SysErr);
|
|
} else {
|
|
getGraCatList((graCatData) => {
|
|
data.instance.settings.core.data = graCatData;
|
|
data.instance.refresh(true);
|
|
})
|
|
}
|
|
}, null, "POST").send();
|
|
|
|
});
|
|
$("#graTree").on('delete_node.jstree', function (e, data) {
|
|
let main = {};
|
|
if (!isNaN(parseInt(data.node.id))) {
|
|
main.id = parseInt(data.node.id);
|
|
objSendData.Data = main;
|
|
ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/DelVar", objSendData, function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
toast_error(res.msg || common.SysErr);
|
|
} else {
|
|
getGraCatList((graCatData) => {
|
|
data.settings.core.data = graCatData;
|
|
data.instance.refresh(true);
|
|
})
|
|
}
|
|
}, null, "POST").send();
|
|
}
|
|
});
|
|
|
|
onEvent("keyup", "#graCatSearch", function () {
|
|
$("#graTree").jstree("search", $(this).val());
|
|
})
|
|
}
|
|
|
|
function readGraph(id) {
|
|
let url = baseApiUrl + "/GraphManage/GraManRead";
|
|
objSendData.Data = { id: parseInt(id) };
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
|
|
} else {
|
|
|
|
$("#graModal").modal("show");
|
|
|
|
let fileObj = {};
|
|
$("#graPicNum").val(res.data?.code);
|
|
$("#graPicName").val(res.data?.name);
|
|
$("#graLayer").text(levelNameByNodeId(res.data?.layer_id));
|
|
if (res.data?.oriSavName != null) {
|
|
fileObj = { name: res.data?.oriOrgName, dataUrl: baseApiUrl + varGraPath + res.data?.oriSavName, savename: res.data?.oriSavName };
|
|
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();
|
|
}
|
|
|
|
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);
|
|
names.push(node.text);
|
|
}
|
|
})
|
|
|
|
names.push(curNode.text);
|
|
return names.join("/");
|
|
|
|
}
|
|
|
|
function saveGraMan() {
|
|
let cookies = new YourTeam.Utility.Cookie();
|
|
let url = "";
|
|
let graMyDesDiaFile = uploader["graMyDesignDiagram"][0].dropzone.files.filter(x => x.accepted == true)[0];
|
|
let graMyAsBuiFile = uploader["graMyAsBuilt"][0].dropzone.files.filter(x => x.accepted == true)[0];
|
|
let fd = new FormData();
|
|
fd.append("code", $("#graPicNum").val());
|
|
fd.append("layer_id", curLayerId);
|
|
fd.append("name", $("#graPicName").val());
|
|
fd.append("oriOrgName", graMyDesDiaFile?.name ?? null);
|
|
fd.append("donOrgName", graMyAsBuiFile?.name ?? null);
|
|
fd.append("oriSavName", graMyDesDiaFile?.savename ?? null);
|
|
fd.append("donSavName", graMyAsBuiFile?.savename ?? null);
|
|
fd.append("oriFile", graMyDesDiaFile?.savename ? null : graMyDesDiaFile ?? null);
|
|
fd.append("donFile", graMyAsBuiFile?.savename ? null : graMyAsBuiFile ?? null);
|
|
|
|
if (curActGraid == 0) {
|
|
url = baseApiUrl + "/GraphManage/SaveGraMan";
|
|
} else {
|
|
fd.append("id", curActGraid);
|
|
url = baseApiUrl + "/GraphManage/EdtOneGraMan";
|
|
}
|
|
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
data: fd,
|
|
async: false,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Bearer " + cookies.get("JWT-Authorization")) },
|
|
success: function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
} else {
|
|
$("#graModal").modal("hide");
|
|
toast_ok(curActGraid == 0 ? common.AddSuc : common.EditSuc);
|
|
graTable.ajax.reload();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function delGraMan() {
|
|
if (curActGraid != 0) {
|
|
let url = baseApiUrl + "/GraphManage/DelOneGraMan";
|
|
objSendData.Data = { id: curActGraid };
|
|
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
|
if (!res || res.code != "0000" || !res.data) {
|
|
|
|
} else {
|
|
$("#delModal").modal("hide");
|
|
toast_ok(common.DelSuc);
|
|
graTable.ajax.reload();
|
|
}
|
|
}, null, "POST").send();
|
|
}
|
|
}
|
|
</script> |