页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

推荐jquery或Vue实现的仿钉钉后台审批流程设计器

表单 其它源码 HTML我帮您 1月前  次浏览

自定义表单设计器,这是一个现代化应用中一个加分的模块,目前很多大型的系统都会存在很多表单,针对不同的客户,可能表单都会不一样,而且不够灵活,可能针对不同的场景都得去定制化的开发很多不一样的表单,因此现在很多大型应用程序都提供了自定义表单的功能。

VUE版实现https://github.com/wxjaa/ddvue

<template>
    <div id="app" class="wf-wrapper" v-on:mouseup="moveend" v-on:mousemove="move">
        <Header></Header>
        <div class="wf-main">
            <mainleft></mainleft>
            <formcanvas></formcanvas>
            <setting></setting>
        </div>
        <dragging></dragging>
    </div>
</template>

<script type="text/ecmascript-6">
    import Header from './components/header'
    import mainleft from './components/mainLeft'
    import formcanvas from './components/formcanvas'
    import setting from './components/setting'
    import dragging from './components/dragging'
    export default {
        name: 'app',
        components: {
            Header,
            mainleft,
            formcanvas,
            setting,
            dragging
        },
        data: function () {
            return {
                isstart: false,
                componentView: {}
            }
        },
        methods: {
            move: function (e) {
                if (this.isstart) {
                    document.querySelector('html').classList.add('wf-cursor-move')
                    let obj = {
                        componentName: this.componentView.componentName,
                        clientX: e.clientX,
                        clientY: e.clientY
                    }
                    drag.$emit("moveInCanvas", obj)
                    drag.$emit('move', e)
                }
            },
            moveend: function (e) {
                if (this.isstart) {
                    let obj = {
                        componentView: this.componentView
                    }
                    drag.$emit("moveend", obj)
                    this.isstart = false
                }
            }
        },
        created: function () {
            let self = this
            drag.$on('movestart', function (obj) {
                self.isstart = true
                self.componentView = obj.componentView
            })
        },
        mounted: function () {
        }
    }
</script>
<style>
    @import "style/design.css";
</style>
<style>
    #app {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>

pc端自定义表单,手机端扫码预览

用到jquery + jquery-ui + artTemplate + webpack  https://github.com/xiedajian/dingding

  require('./index.css');
    require('./xiedajian.css');
    var template = require('./template-web');
    var Temp = require('./index-component.js');



    // 开启控件监听
    Temp.startWatch();
    /**
     * 动态生成组件模板
     *  that  {obj}  组件dom对象
     * */
    function renderTemp(that) {
        var data = $(that).find('.wf-component')[0].dataset;
        // console.log(data);

        var templateStr='';
        for (var x in data){
            templateStr += Temp[x];
        }
        // console.log(templateStr);
        var render = template.compile(templateStr);
        var html = render(data);

        return html;
    }

    /**
     * 拓展对象
     * newconfig = extend({},defaultConfig,myconfig)
     */

    function extend(target) {
        var sources = Array.prototype.slice.call(arguments, 1);

        for (var i = 0; i < sources.length; i += 1) {
            var source = sources[i];
            for (var key in source) {
                if (source.hasOwnProperty(key)) {
                    target[key] = source[key];
                }
            }
        }
        return target;
    };

    /**
     * 保存配置清单
     * */
    function getConf() {
        var config = [];
        $('.wf-formcanvas .item ').each(function () {
            var columnType = $(this).attr('data-columnType');
            var componentData = $(this).find('.wf-component')[0].dataset;
            if(componentData.secondtitle){
                componentData.secondTitle =  componentData.secondtitle;
            }

            // componentData.columnType = columnType;
            var newconfig = extend({},componentData,{columnType:columnType});
            config.push(newconfig);
        })

        var formName = $('#xdj-formName').val() || '名称';
        var formType = $('#xdj-fenlei').attr('data-formType');
        var organ = $('#xdj-formType').val() ||  '描述';

        var data = {
            formName:formName,
            formType:formType,
            organ:organ,
            config:JSON.stringify(config),
        }
        // console.log(data);
        return data;
    }

    /**
     * ajax 保存配置
     * */
    function save(callback,fail) {

        $.ajax({
            url:'xx/save.json',
            data:getConf(),
            type:'POST',
            success:function (res) {
                callback(res);
            },
            error:function (err) {
                showErr('出了一点小问题,请稍后再试')
            }
        })
    }


    /**
     * 预览-生成二维码
     * */
    function preview(formId) {
        $("#xdj-qrcode").empty();
        $("#xdj-qrcode").qrcode({
            width: 200, //宽度
            height:200, //高度
            text: "./preview.html?formId="+formId
        });
        $('#xdj-preview').show();
    }
    // 关闭预览
    $('#xdj-preview').hide();
    $('#xdj-preview-close').on('click',function () {
        $('#xdj-preview').hide();
    })

    // 右侧tab页面切换
    function selectTab1() {
        $('.ant-tabs-content2').css('marginLeft','0');
        $('.ant-tabs-ink-bar2').css('transform','translate3d(0px, 0px, 0px)');
        $('.ant-tabs-nav-container2 div.ant-tabs-tab').addClass('ant-tabs-tab-active');
        $('.ant-tabs-nav-container2 div.ant-tabs-tab:last-of-type').removeClass('ant-tabs-tab-active');

    }
    function selectTab2() {
        $('.ant-tabs-content2').css('marginLeft','-100%');
        $('.ant-tabs-ink-bar2').css('transform','translate3d(175px, 0px, 0px)');
        $('.ant-tabs-nav-container2 div.ant-tabs-tab').removeClass('ant-tabs-tab-active');
        $('.ant-tabs-nav-container2 div.ant-tabs-tab:last-of-type').addClass('ant-tabs-tab-active');
    }
    $('.ant-tabs-nav-container2 .ant-tabs-tab').on('click',function () {
        ($(this).attr('data-i') == 1) ? selectTab1() : selectTab2() ;
    })


    /**
     *  选中某项item
     * */
    function selectItem(that){
        $('.wf-formcanvas .item .wf-component').removeClass('active');
        $(that).find('.wf-component').addClass('active');

        var html = renderTemp(that);

        // 更改右侧参数设置模块
        $('#wf-widgetsettings').html(html);
        selectTab1();
    }

    // 选中中侧的item
    $('.wf-formcanvas').on('click','.item',function () {
        if( $(this).find('.wf-component').hasClass('active'))return;
        selectItem(this);
    })

    // hover中侧的itrm
    $('.wf-formcanvas ').on('mouseover','.item',function () {
        $('.wf-formcanvas .item .wf-component').removeClass('hover');
        $(this).find('.wf-component').addClass('hover');
    }).on('mouseout','.item',function () {
        $('.wf-formcanvas .item .wf-component').removeClass('hover');
    });

    // 删除item
    $('.wf-formcanvas').on('click','.wf-remove',function (event) {
        event.stopPropagation();
        var parent=$(this).parent();
        // 删除的是否是当前选中的
        if(parent.hasClass('active')){
            console.log('active');
            selectTab2();
        }
        $('#wf-widgetsettings').empty();
        parent.parent().remove();

        if($('.wf-formcanvas .item').length < 1){
            $('.wf-formcanvas-body').show();
        }
    })

    // 表单分类下拉框
    $('.select-main .select').on('click',function () {
        $('#xdj-select').show();
    });

    $('#xdj-select  .select-option').on('click',function () {
        var val=$(this).html();
        var formType=$(this).attr('data-formType');
        $('#xdj-fenlei').html(val);
        $('#xdj-fenlei').attr('data-formType',formType);
        $('#xdj-select').hide();
    })

    // 预览
    $('#xdj-yulan').on('click',function () {
        // 手机扫码预览
        // save(function (res) {
        //     var data=JSON.parse(res);
        //     if(data.message == "保存成功"){
        //         preview(data.formId);
        //     }
        //
        // });

        // 本地预览
        var configStr = JSON.stringify(getConf());
        window.localStorage.setItem('configStr',configStr);
        console.log(configStr);
        window.open('./preview.html')

    });
    // 保存按钮
    $('#xdj-saveBtn').on('click',function () {
        alert('保存成功');
    })

    //保存并启用 按钮
    $('#xdj-use').on('click',function () {
        alert('启动成功');
    })

    // 错误提示
    var errTimeout=null;
    function showErr(text){
        if(errTimeout){
            clearTimeout(errTimeout);
        }
        $('#xdj-err-text').html(text);
        $('#xdj-err').slideDown("slow");

        errTimeout = setTimeout(function () {
            $('#xdj-err').slideUp("slow");
        },3000);
    }
     // 关闭错误提示
    $('#xdj-close-err').on('click',function () {
        $('#xdj-err').slideUp("slow");
    })



    // 排序
    $( ".wf-formcanvas-inner" ).sortable({
        revert: true,
        scroll: false,
        // placeholder: "",
        start:function( event, ui ){
            $('.wf-formcanvas-body').hide();
        },
        stop: function (event,ui) {
            // console.log(ui);
            // 排序结束选中当前的item
            selectItem(ui.item)

        }
    });
    // 拖拽
    $( ".item" ).draggable({
        addClasses: false,
        connectToSortable: ".wf-formcanvas-inner",
        helper: "clone",
        appendTo: "body",
        cursorAt: { left: 25 ,top: 15},
        // refreshPositions: true,
        // revert: "invalid",
        // stack: ".wf-formcanvas-inner",
        // zIndex:100,
        scroll: false,
        // opacity:2,

        stop:function (event,ui) {
            if($('.wf-formcanvas .item').length < 1) $('.wf-formcanvas-body').show();
        }
});

相关链接

发表评论