頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

推薦jquery或Vue實現的仿釘釘后臺審批流程設計器

表單 其它源碼 HTML我幫您 2天前  次瀏覽

自定義表單設計器,這是一個現代化應用中一個加分的模塊,目前很多大型的系統都會存在很多表單,針對不同的客戶,可能表單都會不一樣,而且不夠靈活,可能針對不同的場景都得去定制化的開發很多不一樣的表單,因此現在很多大型應用程序都提供了自定義表單的功能。

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();
        }
});

相關鏈接

發表評論

腾讯彩票兑奖