#

luxiaotao1123

2021-04-13 15670bf4839412f88a669e20e8a70553172a9332

 src/main/webapp/views/pda/selectMat.html

@@ -19,6 +19,14 @@
            height: 100%;
            background-color: #f1f1f1;
            padding: 5px;
            position: relative;
        }

        /*header {*/
        /*    position: absolute;*/
        /*}*/
        main {
            padding-bottom: 5px;
        }

        /* 头部搜索栏 */
@@ -31,7 +39,7 @@
            border-radius: 20px;
            height: 30px;
            box-shadow: 0 0 3px rgba(0,0,0,.3);
            width: 75%;
            width: 73%;
            padding-left: 15px;
            vertical-align: middle;
        }
@@ -40,7 +48,7 @@
            background-color: white;
            box-shadow: 0 0 3px rgba(0,0,0,.3);
            height: 33px;
            margin-left: 15px;
            margin-left: 5px;
            border-radius: 20px;
            width: 15%;
            vertical-align: middle;
@@ -49,8 +57,10 @@
            background-color: #dedede;
        }

        /* 主体卡片 */
        .box-item {
        /* 主体 */

        /* 归类标签 */
        .box-tag-item {
            height: 100px;
            border-bottom: 1px solid #dedede;
            background-color: #fff;
@@ -58,13 +68,42 @@
            box-shadow: 0 0 3px rgba(0,0,0,.3);
            margin-top: 2px;
        }
        .box-item:hover {
        .box-tag-item:hover {
            background-color: #eaeaea;
        }
        .box-item-label {
        .box-tag-item-label {
            padding: 5px 10px;
            border-bottom: 1px solid #f6f6f6;
        }
        .box-tag-item-content {
            font-size: x-large;
            font-weight: bold;
            padding: 10px 0 0 20px;
            padding: 15px 0 0 20px;
        }

        /* 商品标签 */
        .box-mat-item {
            height: 100px;
            border-bottom: 1px solid #dedede;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 3px rgba(0,0,0,.3);
            margin-top: 2px;
        }
        .box-mat-item:hover {
            background-color: #eaeaea;
        }
        .box-mat-item-content {
            padding: 15px 0 0 20px;
        }
        .box-mat-item-content-matnr {
            font-size: small;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .box-mat-item-content-maktx {
            font-size: large;

        }
</style>
</head>
@@ -72,53 +111,160 @@

<header>
    <div class="search-box">
        <input type="text">
        <button>
        <input id="search-msg" type="text" placeholder="请输入商品编码/名称">
        <button onclick="search()">
            <i class="layui-icon">&#xe615;</i>
        </button>
    </div>
</header>

<main>
    <div class="box-item">
        <div class="box-item-label">尼龙头螺丝盒装</div>
    </div>
    <div class="box-item">
        <div class="box-item-label">尼龙头螺丝盒装</div>
    </div>
    <div class="box-item">
        <div class="box-item-label">尼龙头螺丝盒装</div>
    </div>
    <div class="box-item">
        <div class="box-item-label">尼龙头螺丝盒装</div>
    </div>
    <div class="box-item">
        <div class="box-item-label">尼龙头螺丝盒装</div>
    </div>
    <div class="box-item">
        <div class="box-item-label">尼龙头螺丝盒装</div>
    </div>

<main id="main-contain">
</main>

</body>
<script>
    $(function () {


        showTag();
    })

    $(document).on('click','.box-item', function () {
    // 搜索
    function search(){
        var condition = $('#search-msg').val();
        $.ajax({
            url: baseUrl + "/mat/search/pda/auth",
            headers: {'token': localStorage.getItem('token')},
            data: {
                condition: condition
            },
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    if (res.data != null && res.data.length > 0) {
                        var tplDom = $("#matTpl");
                        var tpl = tplDom.html();
                        var template = Handlebars.compile(tpl);
                        var html = template(res);
                        $('#main-contain').html(html);
                    } else {
                        $('#main-contain').html('<div style="text-align: center; margin-top: 15px"><span style="font-size: large">暂无商品</span></div>');
                    }
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/pda";
                } else {
                    parent.layer.msg(res.msg, {icon: 2});
                }
            }
        })
    }

    // 归类点击
    $(document).on('click','.box-tag-item', function () {
        var tagId = $(this).children('input').get(0).value;
        showTag(tagId);
    })

    // 商品点击
    $(document).on('click','.box-mat-item', function () {
        parent.findBySelect($(this).children('input').get(0))
    })

    // 展示归类
    function showTag(parentId){
        $.ajax({
            url: baseUrl + "/tag/list/pda/auth",
            headers: {'token': localStorage.getItem('token')},
            data: {
                parentId: parentId
            },
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    if (res.data != null && res.data.length > 0) {
                        var tplDom = $("#tagTpl");
                        var tpl = tplDom.html();
                        var template = Handlebars.compile(tpl);
                        var html = template(res);
                        $('#main-contain').html(html);
                        toTop();
                    } else {
                        var tagId = parentId;
                        showMat(tagId);
                    }
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/pda";
                } else {
                    parent.layer.msg(res.msg, {icon: 2});
                }
            }
        })
    }

    // 展示商品
    function showMat(tagId) {
        if (isEmpty(tagId)) {
            return;
        }
        $.ajax({
            url: baseUrl + "/mat/list/pda/auth",
            headers: {'token': localStorage.getItem('token')},
            data: {
                tagId: tagId
            },
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    if (res.data != null && res.data.length > 0) {
                        var tplDom = $("#matTpl");
                        var tpl = tplDom.html();
                        var template = Handlebars.compile(tpl);
                        var html = template(res);
                        $('#main-contain').html(html);
                        toTop();
                    } else {
                        $('#main-contain').html('<div style="text-align: center; margin-top: 15px"><span style="font-size: large">暂无商品</span></div>');
                    }
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/pda";
                } else {
                    parent.layer.msg(res.msg, {icon: 2});
                }
            }
        })
    }

    function toTop() {
        window.scrollTo({
            left: 0,
            top: 0,
            behavior: 'smooth'
        })
    }


</script>
<script type="text/template" id="tagTpl">
    {{#each data}}
    <option value="{{this}}">{{this}}</option>
    <div class="box-tag-item">
        <input name="tagId" type="hidden" value="{{this.id}}">
        <div class="box-tag-item-label">
            <span class="layui-badge layui-badge-green pull-right">归类</span>
        </div>
        <div class="box-tag-item-content">{{this.name}}</div>
    </div>
    {{/each}}
</script>
<script type="text/template" id="matTpl">
    {{#each data}}
    <option value="{{this}}">{{this}}</option>
    <div class="box-mat-item">
        <input name="matnr" type="hidden" value="{{this.matnr}}">
        <div class="box-tag-item-label">
            <span class="layui-badge layui-badge-blue pull-right">商品</span>
        </div>
        <div class="box-mat-item-content">
            <div class="box-mat-item-content-matnr">{{this.matnr}}</div>
            <div class="box-mat-item-content-maktx">{{this.maktx}}</div>
        </div>
    </div>
    {{/each}}
</script>
</html>