add.html 7.43 KB
<div class="page-head">
    <div class="page-title">
        <h1>$$$$$${txt-2983}</h1>
    </div>
</div>

<ul class="page-breadcrumb breadcrumb">
    <li><a href="/pages/home.html" data-pjax>$$$$$${txt-3807}</a> <i class="fa fa-circle"></i></li>
    <li><span class="active">$$$$$${txt-2397}</span> <i class="fa fa-circle"></i></li>
    <li><a href="list.html" data-pjax>$$$$$${txt-2940}</a> <i class="fa fa-circle"></i></li>
    <li><span class="active">$$$$$${txt-2983}</span></li>
</ul>

<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-equalizer font-red-sunglo"></i> <span
                class="caption-subject font-red-sunglo bold uppercase">$$$$$${txt-3849}</span>
        </div>
    </div>
    <div class="portlet-body form">
        <form action="/resource" class="form-horizontal" id="resource_add_form">
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="alert"></button>
                $$$$$${txt-135}
            </div>
            <div class="form-body">
                <div class="form-group">
                    <label class="col-md-3 control-label">$$$$$${txt-3198}</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <select class="form-control" name="module.id" id="moduleSelect">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">$$$$$${txt-3197}</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">$$$$$${txt-2683}</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="url">
                        <span class="help-block"> $$$$$${txt-934}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">$$$$$${txt-3405}</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <select class="form-control" name="method" style="width: 160px;">
                                <option value="get">get</option>
                                <option value="post">post</option>
                                <option value="delete">delete</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">$$$$$${txt-3199}</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <select class="form-control" name="enable" style="width: 160px;">
                                <option value="1">$$$$$${txt-3992}</option>
                                <option value="0">$$$$$${txt-4160}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">$$$$$${txt-4476}</label>
                    <div class="col-md-4">
                        <textarea class="form-control" rows="3" name="descriptions"></textarea>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-4">
                        <button type="submit" class="btn green"><i class="fa fa-check"></i> 提交</button>
                        <a type="button" class="btn default" href="list.html" data-pjax><i class="fa fa-times"></i>
                            $$$$$${txt-3817}</a>
                    </div>
                </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>
<script>
    $(function () {

        var form = $('#resource_add_form');
        var error = $('.alert-danger', form);

        //form validate
        form.validate({
            errorElement: 'span',
            errorClass: 'help-block help-block-error',
            focusInvalid: false,
            rules: {
                'name': {
                    required: true
                },
                'url': {
                    required: true
                },
                'module.id': {
                    required: true
                }
            },
            invalidHandler: function (event, validator) {
                error.show();
                App.scrollTo(error, -200);
            },

            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },

            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },

            success: function (label) {
                label.closest('.form-group').removeClass('has-error');
            },

            submitHandler: function (f) {
                var params = form.serializeJSON();
                error.hide();
                console.log(params);

                $post('/resource', params, function (res) {
                    layer.msg(i18n('txt-1424'));
                });
            }
        });

        //模块下拉框
        getModuleTreeData(function (treeData) {
            var options = '<option value="">$$$$$${txt-3432}</option>';

            $.each(treeData, function (i, g) {
                var dArray = g.children;
                if (!dArray)
                    return true;
                for (var i = 0, d; d = dArray[i++];) {
                    options += '<optgroup label="' + d.name + '">';
                    if (!d.children)
                        continue;

                    $.each(d.children, function (i, m) {
                        options += '<option value="' + m.id + '">' + m.name + '</option>'
                    });
                    options += '</optgroup>';
                }
            });

            console.log(options);

            $('#moduleSelect').html(options).select2();
        });

        function getModuleTreeData(cb) {
            var treeData = [];
            $get('/module/all', null, function (arr) {
                treeData = createTreeData(arr);
                cb && cb(treeData)
            });
        }

        /**
         * 将模块List 转换为树结构
         * @param arr
         * @returns {Array}
         */
        function createTreeData(arr) {
            var treeData = [];
            var len = arr.length;
            for (var i = 0; i < len; i++) {
                var pId = arr[i].pId;
                arr[i].text = arr[i].name;
                if (!pId) {
                    treeData.push(arr[i]);
                }

                for (var j = 0; j < len; j++) {
                    if (pId == arr[j].id) {
                        if (!arr[j].children)
                            arr[j].children = [];
                        arr[j].children.push(arr[i]);
                        break;
                    }
                }
            }
            return treeData;
        }

    });
</script>