jie
/
tp6_imooc_shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加商品分类</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>商品分类管理</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 200px;">父级分类</label>
            <div class="layui-input-inline">
                <select name="parent" id="classif"></select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 200px;">商品分类</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入标分类名称"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 200px;"></label>
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>
<script src="../lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script>
    layui.use(['form','laypage'], function () {
        var form = layui.form;

        function _classif(res=[]) {
            // res 分类数据 先期模拟
            let temps = '<option value="0">-| 顶级菜单</option>';
            var data = [
                {id: 1, name: "办公管理", pid: 0},
                {id: 2, name: "请假申请", pid: 1},
                {id: 3, name: "出差申请", pid: 1},
                {id: 4, name: "请假记录", pid: 2},
                {id: 5, name: "系统设置", pid: 0},
                {id: 6, name: "权限管理", pid: 5},
                {id: 7, name: "用户角色", pid: 6},
                {id: 8, name: "菜单设置", pid: 6},
            ];

            let toTrees = toTree(data);
            for (let item of toTrees) {
                temps += `<optgroup  data-id="${item["id"]}">`;
                temps += `<option  data-id="${item['id']}" value="${item['id']}">-| ${item["name"]}</option>`
                if (item['children'] && item['children'].length > 0) {
                    for (let child of item['children']) {
                        temps += `<option  data-id="${child['id']}" value="${child['id']}"> &nbsp;&nbsp;&nbsp;--| ${child["name"]} </option>`
                    }
                }
                temps += `</optgroup>`;
            }
            $('#classif').html(temps)
            form.render('select');
        }


        function queryClassif() { // 请求分类 后端接口
            let url = '';
            layObj.get(url,function (res) {
                console.log(res)
            }); // 封装的ajax
            _classif()
        }
        queryClassif(); // 获取后端分类数据

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field, '最终的提交信息')
            let url = '';
            layObj.post(url,data,function (res) {

            });
            // $ajax({
            //     url: '{:u("admin/add")}?val=' + data.field,
            //     success: (res) => {
            //        setTimeout('window.location.reload()',1000);
            //     }
            // })

            return false;
        });

    })
</script>
</body>
</html>