ibms-dome/Frontend/_graphManagement.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 alert alert-secondary p-1 px-2 mb-0">
                        <span><i class="fas fa-exclamation-circle mr-2"></i>按右鍵即可展開選單</span>
                    </div>
                    <div class="row d-inline-block col-12 p-0 my-2 text-center">
                        <input id="graCatSearch" name="graCatSearch" type="text" class="form-control form-control-sm  d-inline-block" placeholder="搜尋" />
                    </div>
                    <div class="d-flex" id="graTree"></div>
                </div>
                <div class="col-10">
                    <div class="row my-2 mx-0">
                        <a href="javascript:;" id="creGraMan" class="btn btn-success">
                            +新增
                        </a>
                        <label id="curLevText" class="ml-3 mb-0 row m-0 align-items-center fs-1"></label>
                    </div>

                    <table id="graTable" class="table table-bordered table-striped text-center m-0">
                    </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">
                            <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-2">
                            <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">
                                        (圖片檔, 文字檔, word, ppt, excel, pdf)檔案不超過 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;
    var cookies = new YourTeam.Utility.Cookie();
    
    var token = cookies.get("JWT-Authorization");
    $(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": "20%", "sortable": true },
            { "targets": [1], "width": "60%", "sortable": true },
            { "targets": [2], "width": "20%", "sortable": true },
        ];

        let columns = [
            {
                "title": "編號",
                "data": "id",

            },
            {
                "title": "檔案",
                "data": "oriOrgName",
                "render": function (data, type, row, meta) {
                    return `<a id="oriDwgDown${row.id}" href="javascript:;">${row.oriOrgName ?? ""}</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: "已超過上傳限制數量",
            dictFileTooBig:"已超出上傳限制，最大{{maxFilesize}}MB，而您的檔案{{filesize}}MB。",
            maxFilesize: 10,
            filesizeBase: 1024,
            maxFiles: 1,
            autoProcessQueue: false,
            acceptedFiles: ".dwg,.jpeg,.jpg,.png,.gif,.doc,.docx,.ppt,.pptx,.xlsx,.xls,.opt,.pdf,.txt",
            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["graMyDesignDiagram"][0].dropzone.on("addedfile", file => {
            uploadFiles["graMyDesignDiagram"] = file;
        })

        uploader["graMyDesignDiagram"][0].dropzone.on("removedfile", file => {
            uploadFiles["graMyDesignDiagram"] = {};
            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 dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true);
        let rowData = graTable.row($(this).closest("tr")).data();
        let apiUrl = baseApiUrl + `/File/Download?type=graph&savename=${rowData.oriSavName}&oriname=${rowData.oriOrgName}`;
        
        download(token, apiUrl, rowData.oriOrgName, function () {
            $(dowLoaEle.ele).YTAlert().hide();
        });
    })

    onEvent("click", "a[id^=donDwgDown]", function () {
        let dowLoaEle = YT.Alert.Tip("準備下載中...", "show", true);
        let rowData = graTable.row($(this).closest("tr")).data();
        let apiUrl = baseApiUrl + `/File/Download?type=graph&savename=${rowData.donSavName}&oriname=${rowData.donOrgName}`;
        let extname = rowData.donOrgName?.split(".").slice(-1);
        download(token, apiUrl, rowData.name + "_竣工圖" + "." + extname, function () {
            $(dowLoaEle.ele).YTAlert().hide();
        });
    })

    // 上傳檔案
    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/GraphManageTreeList";

        ytAjax = new YourTeam.Ajax(url, null, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {
                res.data.forEach(x => x.parent = x.parent_id);
                res.data.forEach(x => x.text = x.name);
                // res.data.forEach(x => x.parent = x.parent);
                callback ? callback(res.data) : "";
            }
        }, null, "POST").send();
    }

    function initTree(data) {

        treeEvent();
        let option = {
            core: {
                "check_callback": true,
                data: setTreeData(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 >= 4) {
                                    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: "重新命名",
                            _disabled: function (data) {
                                if ($node.id == "0") {
                                    return true;   //最上層無法編輯
                                }
                                return false;
                            },
                            action: function (obj) {
                                tree.edit($node);
                                /*                                tree.sort($node, true)*/
                            }
                        },
                        Remove: {
                            label: "移除",
                            _disabled: function (data) {
                                if ($node.id == "0") {
                                    return true;   //最上層無法移除
                                }
                                return false;
                            },
                            action: function (obj) {
                                tree.delete_node($node);
                            }

                        }
                    }
                }
            }
        }
        $("#graTree").jstree(option);

    }

    function treeEvent() {
        let selectedNode = [];
        $('#graTree').on("loaded.jstree", function (e, data) {
            let topNode = $('#graTree').jstree(true).get_node("0");
            $('#graTree').jstree(true).select_node(topNode.children[0]);
            $("#graTree").jstree("open_node", 0);
        })
        $('#graTree').on("select_node.jstree", function (e, data) {
            if (data.node.id != "0") {
                dtAjaxResetSendData(graTable, { layer_id: parseInt(data.node.id) });
                graTable.ajax.reload();
                selectedNode.unshift(data.node.id);
                if (selectedNode.length > 3) {
                    selectedNode.splice(selectedNode.length - 1, 1);
                }
                curLayerId = parseInt(data.node.id);
                $("#graLayer").text(levelNameByNodeId(data.node));
                $("#curLevText").text(levelNameByNodeId(data.node));
            } else {
                $("#graTree").jstree(true).deselect_node(data.node);
                $("#graTree").jstree(true).select_node(selectedNode[0]);
            }
        })
        $("#graTree").on('create_node.jstree', function (e, data) {
            let main = {};
            main.name = data.node.text;
            main.parent_id = parseInt(data.node.parent);

            objSendData.Data = main;

            ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/SaveGraphManageTree", 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.name = data.node.text;

            objSendData.Data = main;
            ytAjax = new YourTeam.Ajax(baseApiUrl + "/GraphManage/EditGraphManageTree", objSendData, function (res) {
                if (!res || res.code != "0000" || !res.data) {
                    toast_error(res.msg || common.SysErr);
                } else {
                    getGraCatList((graCatData) => {
                        data.instance.settings.core.data = setTreeData(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/DelGraphManageTree", 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 setTreeData(dataList) {
        let parent = { parent: "#", text: "圖資管理", id: 0 };
        dataList.push(parent);
        return dataList;
    }

    function readGraph(id) {
        let url = baseApiUrl + "/GraphManage/GraManRead";
        objSendData.Data = { id: parseInt(id) };
        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, size: res.data?.oriSize };
                    uploader["graMyDesignDiagram"][0].dropzone?.displayExistingFile(fileObj);
                }
                //if (res.data?.donSavName != null) {
                //    fileObj = { name: res.data?.donOrgName, dataUrl: baseApiUrl + varGraPath + res.data?.donSavName, savename: res.data?.donSavName, size: res.data?.donSize };
                //    uploader["graMyAsBuilt"][0].dropzone?.displayExistingFile(fileObj);
                //}

            }
        }, null, "POST").send();
    }

    function levelNameByNodeId(node) {
        let names = [];
        let curNode = $('#graTree').jstree(true).get_node(node);
        let parents = curNode.parents.reverse();

        for (let i = parents.length - 1; i >= 0; i--) {
            if (parents[i] != "#") {
                let node = $('#graTree').jstree(true).get_node(parents[i]);
                names.push(node.text);
            }
        }

        names.push(curNode.text);
        return names.join("/");

    }

    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("layer_id", curLayerId);
        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>