zhaobao
/
layui_back


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
							<!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="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="height: 700px">-->
        <div class="grid-demo">
            <div class="layui-card">
                <div class="layui-card-header">
                    表单数据
                </div>
                <div class="layui-card-body">
                    <ul class="customerlist">

                    </ul>
                </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>

</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");
        var url = uParas.baseUrl + "/3rd/flow/queryById";
        admin.req(url, {id: id, aId: aId, cId: cId}, function (res) {
            if (res.code === 1) {
                var data = res.data;
                var json = JSON.parse(data.formJson);
                for (var i = 0; i < json.length; i++) {
                    $('.customerlist').append('<li>' + html(json[i]) + '</li>');
                }
            }
        });

        function html(htmlTagData) {
            var html = '';
            html += `<span class="key" data-title="${htmlTagData.title}">${htmlTagData.title}</span>`;
            html += `<div class="value input" data-type="text" data-placeholder="${htmlTagData.userVal}">${htmlTagData.userVal}</div>`;
            // if (htmlTagData.type == "select-search") {
            //     html += ` <select name="select" data-type="select-search" lay-search="" lay-ignore>
            //     <option>下拉选择框</option>
            //    </select>`;
            //
            // } else {
            //     html += `<div class="value input" data-type="text" data-placeholder="${htmlTagData.userVal}">${htmlTagData.userVal}</div>`;
            // }
            return html;
        }

        // $('.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();
        // });
        //
        // $('.showjson').on('click', function () {
        //     if ($('.customerlist .customeritem').length == 0) return;
        //     var temp = [];
        //     var t;
        //     $('.customerlist .customeritem').each(function (index, element) {
        //         t = $(this).children();
        //         var valIndex = t.length - 1;
        //         temp.push({"type": $(t[2]).data('type'), "title": $(t[0]).data('title'), "value": t[valIndex].value});
        //     })
        //     console.log(temp);
        //     $('.console').html(JSON.stringify(temp))
        // })
        //
        // 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) {
            var that = $(this);
            var parent = that.parent();
            parent.remove();
            if ($('.customerlist .customeritem').length == 0) $('.tips').show();
        }

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

</body>
</html>