zhaobao
/
scyf


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表单构建器</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
    <style>
        .flow-default li {
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            width: 18%;
            margin-bottom: 10px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #eee;
        }

        ul.customerlist {
            min-height: 400px;
            padding-left: 0
        }

        ul.customerlist .tips {
            text-align: center;
            line-height: 400px;
            font-size: 16px;
            color: #aaa
        }

        ul.customerlist li {
            min-height: 50px;
            line-height: 40px;
            margin: 10px 0;
            box-shadow: 0 0 20px #ddd;
            list-style: none;
            margin-left: 0;
            padding: 10px
        }

        ul.customerlist li .delete {
            color: rgba(255, 0, 0, .6);
            background: #eee;
            padding: 5px 10px;
            right: 2px;
            top: 2px;
            border-radius: 5px;
            z-index: 2;
            line-height: 15px;
            cursor: pointer;
            font-size: 12px;
            float: right;
            transition: all ease .3s
        }

        ul.customerlist li .delete:hover {
            background: #ddd;
            color: rgba(255, 0, 0, 1)
        }

        ul.customerlist li.placeholder {
            position: relative;
            visibility: hidden;
            transition: all 1s ease
        }

        ul.customerlist li.placeholder:before {
            position: absolute
        }

        ul.customerlist li.dragged {
            box-shadow: 0 0 10px #999
        }

        ul.customerlist li .customeritem {
            cursor: pointer
        }

        ul.customerlist li .customeritem .value {
            border: 1px solid #ddd;
            border-radius: 3px;
            height: 40px;
            color: #969696;
            padding-left: 5px
        }

        ul.customerlist li .customeritem .value.textarea {
            height: 80px
        }

        ul.customerlist li .customeritem .value.file {
            height: 100px;
            width: 100px;
            line-height: 100px;
            text-align: center
        }
    </style>
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-card">
                    <div class="layui-card-header">
                        元素
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row" style="min-height: 700px;">
                            <ul class="flow-default">
                                <li class="add" data-target="_oneline">单行输入框</li>
                                <li class="add" data-target="_multiline">多行输入域</li>
                                <li class="add" data-target="_password">密码框</li>
                                <li class="add" data-target="_select">下拉选择</li>
                                <li class="add" data-target="_label">纯文本</li>
                                <li class="add" data-target="_checkbox">多选框</li>
                                <li class="add" data-target="_radio">单选框</li>
                                <li class="add" data-target="_data">日期</li>
                            </ul>
                        </div>
                        <div style="display:none;">
                            <ul class="originlist" style="display:none;">
                                <li class="_oneline">
                                    <span class="delete fa fa-trash-o"> 删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="标题">标题</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <div class="value input" data-type="text" data-placeholder="请填写标题">请填写标题</div>
                                    </div>
                                </li>
                                <li class="_multiline">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="说明">说明</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <div class="value textarea" data-type="textarea" data-placeholder="请填写说明">
                                            请填写说明
                                        </div>
                                    </div>
                                </li>
                                <li class="_password">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="说明">密码框</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <input type="password" name="password" data-type="password" value=""
                                               autocomplete="off" data-placeholder="请输入密码" class="layui-input">
                                    </div>
                                </li>
                                <li class="_select">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="搜索选择框">下拉选择框</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <select name="select" data-type="select-search" lay-search="" lay-ignore>
                                            <option>下拉选择框</option>
                                        </select>
                                        <input type="text" name="text" value="" data-type="label"
                                               placeholder="选择框下拉值（1,2,3）" class="layui-input">
                                    </div>
                                </li>
                                <li class="_label">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="纯文本">纯文本</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <input type="text" name="text" type="label" value="" data-type="label"
                                               placeholder="辅助文字" class="layui-input">
                                    </div>
                                </li>
                                <li class="_checkbox">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="复选框">复选框</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <input type="checkbox" data-type="checkbox" name="option1" lay-skin="primary"
                                               title="选项1">选项1
                                        <input type="checkbox" name="option2" lay-skin="primary" title="选项2">选项2
                                        <input type="text" name="text" value="" placeholder="复选框值（1,2,3）"
                                               class="layui-input">
                                    </div>
                                </li>
                                <li class="_radio">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="单选框">单选框</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <input type="radio" data-type="radio" name="optionsRadios" value="选项1"
                                               title="选项1" checked="">选项1
                                        <input type="radio" name="optionsRadios" value="选项2" title="选项2">选项2
                                        <input type="text" name="text" value="" placeholder="单选框值（1,2）"
                                               class="layui-input">
                                    </div>
                                </li>
                                <li class="_data">
                                    <span class="delete fa fa-trash-o">删除</span>
                                    <div class="customeritem">
                                        <span class="key" data-title="日期">日期</span>
                                        <i class="layui-icon">&#xe642;</i>
                                        <input type="text" name="date" data-type="date" placeholder="yyyy-MM-dd"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </li>
                            </ul>
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开关-默认开</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" checked="" name="status" lay-skin="switch">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">验证日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="date" id="date" lay-verify="date"
                                               placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交
                                        </button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6" style="min-height: 700px">
            <div class="grid-demo">
                <div class="layui-card">
                    <div class="layui-card-header">
                        拖拽左侧表单元素到此区域
                    </div>
                    <div class="layui-card-body" style="min-height: 660px;">
                        <ul class="customerlist">
                            <p class="tips">请点击左侧按钮,添加自定义控件</p>
                        </ul>
                    </div>
                    <button type="button" class="layui-btn layui-btn-fluid layui-btn-normal showjson"
                            lay-filter="modelSubmit" lay-submit>保 存
                    </button>
                    <div class="console">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
<script type="text/javascript" src="../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/libs/jquery/jquery-sortable_0.9.13_jquery-sortable-min.js"></script>
<script>

</script>
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'util', 'upload', 'zTree', 'admin', 'uParas', 'element','baseCache'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var uParas = layui.uParas;
        var element = layui.element, laydate = layui.laydate;

        /**
         * @Author: NanKeYang
         * @Description: 用户操作必带参数
         * @Data: 2020/1/8 15:17
         */
        var aId = layui.baseCache.getAId();
        var cId = layui.baseCache.getCId();

        // 渲染表格
        var id = uParas.getUrlParam("id");
        $('.add').on('click', function () {
            var that = $(this);
            var target = that.data('target');
            $('.customerlist').append('<li> ' + $('.originlist>.' + target).html() + '</li>');
            $("ul.customerlist").sortable();
            //off 先取消绑定，否则会调用多次
            $('.customeritem>i').off('click').on('click', modifytitle);
            $('.delete').off('click').on('click', deleteitem);
            $('.tips').hide();
            // form.render();
        });
        form.on('submit(modelSubmit)', function (data) {
            if ($('.customerlist .customeritem').length == 0) return;
            var temp = [];
            var t;
            $('.customerlist .customeritem').each(function (index, element) {
                t = $(this).children();
                var valIndex = t.length - 1
                var vs_ = $(t[2]).data('type')
                if (vs_ == "radio" || vs_ =="checkbox" || vs_ == "select-search") {
                    temp.push({
                        "type": vs_,
                        "title": $(t[0]).data('title'),
                        "value": "",
                        "label": t[valIndex].value
                    });
                } else {
                    temp.push({
                        "type": vs_,
                        "title": $(t[0]).data('title'),
                        "value": t[valIndex].value
                    });
                }
            });
            // $('.console').html(JSON.stringify(temp));
            layer.load();
            data.field.id = id;
            data.field.formJson = JSON.stringify(temp);
            data.field.aId = aId;
            data.field.cId = cId;

            var url = uParas.baseUrl + '/toolEntForm/update';
            admin.req(url, data.field, function (resp) {
                layer.closeAll('loading');
                if (resp.code == 1) {
                    layer.msg(resp.msg);
                    parent.layer.closeAll();
                } else {
                    layer.msg(resp.msg);
                }
            }, 'POST');
            return false;
        });

        function modifytitle(e) {
            var that = $(this).parent();
            var key = that.find('.key').eq(0);
            var value = that.find('.value').eq(0);
            layer.prompt({title: '请填写标题，并确认', formType: 0}, function (text, index) {
                layer.close(index);
                if ($.trim(text).length > 8) {
                    layer.msg("标题长度不能超过8位");
                } else if ($.trim(text).length > 0) {
                    key.data('title', text).html(text);
                    if (value.data('type') != 'file')
                        value.data('placeholder', text).html('请填写' + text);
                }
            });
        }

        function deleteitem(e) {
            // if (confirm('确定要删除吗？')) {
            var that = $(this);
            var parent = that.parent();
            parent.remove();
            if ($('.customerlist .customeritem').length == 0) $('.tips').show();
            // }
            // layer.confirm('确定要删除吗？', {
            //     btn: ['确定','取消'] //按钮
            // }, function(){
            //     var that = $(this);
            //     console.log(that);
            //     var parent = that.parent();
            //     parent.remove();
            //     if ($('.customerlist .customeritem').length == 0) $('.tips').show();
            // });
        }

        laydate.render({
            elem: '#date'
        });
    });
</script>

</body>
</html>