地图编辑器增加隐藏显示按钮

Junjie

2023-06-03 77122f644a596b95bc4ee5b1bcedaeb8f05e7b33

 src/main/webapp/views/node/node.html

@@ -35,20 +35,8 @@
        <button lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;
        <button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" id="btn-print-batch" lay-event="printBatch">批量打印</button>
        <!-- 商品/物料 数据中心 -->
        <div class="dropdown-menu" style="margin-left: 0">
            <button class="layui-btn layui-btn-sm icon-btn layui-btn-primary" style="margin-top: 2px">&nbsp;数据同步 <i class="layui-icon layui-icon-drop"></i></button>
            <ul class="dropdown-menu-nav dark">
                <div class="dropdown-anchor"></div>
                <li class="title">1st menu</li>
                <li><a onclick="excelMouldDownload()" style="font-size: 12px"><i class="layui-icon layui-icon-template-1"></i>模板下载</a></li>
                <li><a onclick="importExcel()" style="font-size: 12px"><i class="layui-icon layui-icon-upload"></i>导入 Excel</a></li>
                <li style="display: none"><input id="importExcel" type="file" onchange="upload(this)" ></li>
                <hr>
                <li class="title">2nd menu</li>
                <li><a onclick="exportExcel()" style="font-size: 12px"><i class="layui-icon layui-icon-export"></i>导出 Excel</a></li>
            </ul>
        </div>
        <button class="layui-btn layui-btn-sm layui-btn-warm" id="btn-node-init" lay-event="nodeInit">库位初始化</button>

    </div>
</script>

@@ -143,289 +131,73 @@
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/node/node.js" charset="utf-8"></script>

<script>
    var insTb;
    var admin;
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).extend({
        dropdown: 'dropdown/dropdown',
    }).use(['form','treeTable', 'admin', 'xmSelect', 'dropdown', 'element'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        admin = layui.admin;
        var treeTable = layui.treeTable;
        var xmSelect = layui.xmSelect;
        var tbDataList = [];
<!-- 重置库位弹窗 -->
<div id="resetLocDiv" style="margin: 20px 0 10px 30px; display: none">
    <div class="layui-form layui-form-pane">

        insTb = treeTable.render({
            elem: '#node',
            url: baseUrl+'/node/list/tree/auth',
            headers: {token: localStorage.getItem('token')},
            height: 'full-200',
            toolbar: '#toolbar',
            tree: {
                iconIndex: 2,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'id',           // id字段名称
                pidName: 'parentId'     // pid字段名称
            },
            cols: [[
                {type: 'checkbox'}
                ,{type: 'numbers'}
                ,{field: 'name', align: 'left',title: '编号/名称', minWidth: 150}
                // ,{field: 'uuid', left: 'center',title: '编号/名称', minWidth: 150}
                ,{field: 'type$', align: 'center',title: '类型', templet: '#typeTpl'}
                // ,{field: 'leading', align: 'center',title: '负责人'}
                // ,{field: 'img', align: 'center',title: '图片', hide: true}
                // ,{field: 'brief', align: 'center',title: '简要描述'}
                // ,{field: 'count', align: 'center',title: '数量'}
                // ,{field: 'sort', align: 'center',title: '排序'}
                ,{field: 'status$', align: 'center',title: '状态', hide: true}
                ,{field: 'updateTime$', align: 'center',title: '修改时间'}
                ,{field: 'updateBy$', align: 'center',title: '修改人员'}
                ,{field: 'memo', align: 'center',title: '备注', hide: true}
        <!-- 库位类型 -->
        <div class="layui-form-item">
            <label class="layui-form-label">库区</label>
            <div class="layui-input-inline">
                    <div id="mat" name="areaId">
                    </div>
            </div>
        </div>

                ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:150}
            ]],
            done: function (data) {
                console.log(data)
                $('.ew-tree-table-box').css('height', '100%');
                insTb.expandAll();
                tbDataList = data;
            }
        });
        <!-- 排 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">起止排</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="startRow" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="endRow" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
            </div>
        </div>
        <!-- 列 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">起止列</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="startBay" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="endBay" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
            </div>
        </div>
        <!-- 层 -->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">起止层</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="startLev" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="endLev" autocomplete="off" class="layui-input" lay-verify="required|number">
                </div>
            </div>
        </div>

        /* 表格头工具栏点击事件 */
        treeTable.on('toolbar(node)', function (obj) {
            var checkRows = insTb.checkStatus();
            if (obj.event === 'add') { // 添加
                showEditModel();
            } else if (obj.event === 'del') { // 删除
                if (checkRows.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.map(function (d) {
                    if (!d.LAY_INDETERMINATE) {
                        return d.id;
                    } else {
                        return null;
                    }
                });
                doDel({ids: ids});
            } else if (obj.event === 'printBatch') {
                if (checkRows.length === 0) {
                    layer.msg('请选择要打印的数据', {icon: 2});
                    return;
                }
                var printContent = checkRows.map(function (d) {
                    if (!d.LAY_INDETERMINATE && d.type === 3) {
                        return d.name;
                    } else {
                        return null;
                    }
                });
                printBatch(printContent, 1);
            }
        });

        /* 表格操作列点击事件 */
        treeTable.on('tool(node)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            }
        });
        <div id="prompt" style="text-indent: 10px;">
            <span class="not-null">初始化库位后将删除库存明细，请谨慎操作！</span>
        </div>
        <!-- 按钮 -->
        <div style="text-align: center; margin-top: 20px">
            <button class="layui-btn layui-btn-radius layui-btn-normal" id="initDo" lay-submit lay-filter="initDo">确定</button>
        </div>
    </div>
</div>

        /* 显示表单弹窗 */
        function showEditModel(mData) {
            admin.open({
                type: 1,
                area: '600px',
                title: (mData ? '修改' : '添加') + '货位',
                content: $('#editDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('detail', mData);
                    // 表单提交事件
                    form.on('submit(editSubmit)', function (data) {
                        data.field.parentId = insXmSel.getValue('valueStr');
                        var loadIndex = layer.load(2);
                        $.ajax({
                            url: baseUrl+"/node/"+(mData?'update':'add')+"/auth",
                            headers: {'token': localStorage.getItem('token')},
                            data: data.field,
                            method: 'POST',
                            success: function (res) {
                                layer.close(loadIndex);
                                if (res.code === 200){
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    insTb.refresh();
                                } else if (res.code === 403){
                                    top.location.href = baseUrl+"/";
                                }else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                    // 渲染下拉树
                    var insXmSel = xmSelect.render({
                        el: '#nodeParentSel',
                        height: '250px',
                        data: insTb.options.data,
                        initValue: mData ? [mData.parentId] : [],
                        model: {label: {type: 'text'}},
                        prop: {
                            name: 'name',
                            value: 'id'
                        },
                        radio: true,
                        clickClose: true,
                        tree: {
                            show: true,
                            indent: 15,
                            strict: false,
                            expandedKeys: true
                        }
                    });
                    // 弹窗不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    layui.form.render('select');
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                var ids;
                if (obj.data) {
                    ids = [];
                    ids[0] = obj.data.id;
                } else {
                    ids = obj.ids;
                }
                $.ajax({
                    url: baseUrl+"/node/delete0/auth",
                    headers: {'token': localStorage.getItem('token')},
                    data: {ids: ids},
                    method: 'POST',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === 200){
                            layer.msg(res.msg, {icon: 1});
                            insTb.refresh();
                        } else if (res.code === 403){
                            top.location.href = baseUrl+"/";
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                })
            });
        }

        // 批量打印
        function printBatch(printMsgList, type) {
            var data = [];
            for (var i = 0; i<printMsgList.length; i ++) {
                if (printMsgList[i] != null && printMsgList[i] !== '') {
                    var barcodeUrl;
                    if (type === 1) {
                        barcodeUrl = baseUrl+"/barcode/qrcode/auth?type="+type+"&param="+printMsgList[i]+"&width="+200+"&height="+70;
                    } else {
                        barcodeUrl = baseUrl+"/barcode/qrcode/auth?type="+type+"&param="+printMsgList[i]+"&width="+400+"&height="+180;
                    }
                    data.push({
                        item: printMsgList[i],
                        barcodeUrl: barcodeUrl
                    })
                }
            }
            var tpl = $('#locPrintTpl').html();
            var template = Handlebars.compile(tpl);
            var html = template({data: data});
            var box = $("#printBox");
            box.html(html);
            box.show();
            box.print({mediaPrint:true});
            box.hide();
        }

    });

    // excel导入模板下载
    function excelMouldDownload(){
        layer.load(1, {shade: [0.1,'#fff']});
        location.href = baseUrl + "/node/excel/import/mould";
        layer.closeAll('loading');
    }

    // excel导入
    function importExcel() {
        $("#importExcel").trigger("click");
    }
    function upload(obj){
        if(!obj.files) {
            return;
        }
        var file = obj.files[0];
        admin.confirm('确认同步 [' + file.name +'] 文件吗？', function (index) {
            layer.load(1, {shade: [0.1,'#fff']});
            var url = baseUrl + "/node/excel/import/auth";
            var form = new FormData();
            form.append("file", file);
            xhr = new XMLHttpRequest();
            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            xhr.setRequestHeader('token', localStorage.getItem('token'));
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror =  uploadFailed; //请求失败
            xhr.onloadend = function () { // // 上传完成重置文件流
                layer.closeAll('loading');
                $("#importExcel").val("");
            };
            // xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function(){//上传开始执行方法
                ot = new Date().getTime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时，以上传的文件大小为0
            };
            xhr.send(form);
        }, function(index){
            $("#importExcel").val("");
        });
    }
    function uploadComplete(evt) {
        var res = JSON.parse(evt.target.responseText);
        if(res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    }
    function uploadFailed(evt) {
        var res = JSON.parse(evt.target.responseText);
        layer.msg(res.msg, {icon: 2});
    }

    // excel导出
    function exportExcel() {

    }

</script>
</body>
</html>