b-print-designer

快速开始

1. 安装

 cnpm install b-print-designer --save

2. 示例代码

<style lang="less">
    .demo {
        width: auto;
        height: auto;
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
        position: absolute;
    }
    .designer-wrapper {
        width: auto;
        height: auto;
        /* border: 1px solid blue; */
        position: absolute;
        top: 40px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        box-shadow: 0 2px 6px 0 rgba(16, 19, 23, 0.1);
        /* text-align: center; */
        /* border: 1px solid gray; */
        /* background-color: gray; */
    }
    .designer-wrapper:hover {
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    }

</style>
<template>
    <div class="demo">
        <div class="designer-wrapper">
            <bPrintDesigner
                    :config="previewerConfig" 
                    urlPrefix=""
                    :loadFn="load"
                    :initFn="init"
                    :requestInterceptor="requestInterceptor"
            ></bPrintDesigner>
            <Modal v-model="isShowTableSetting">helloworld</Modal>
        </div>
    </div>
</template>
<script>

    import PD from 'b-print-designer';

    var { defaultConfigGetter, propertyPanelDefaultFactory } = PD;

    var customConfig = defaultConfigGetter();


    export default {
        data(){
            return {
                isShowTableSetting: false,
            };
        },
        created(){
            const that = this;
            const propertyPanelFactory = {
                getView(kind){
                    //TODO 可以对指定类型返回自定义的vue组件
                    return propertyPanelDefaultFactory.getView(kind);
                },
                getConfig(kind){
                    if (kind == 'table') {
                        return {
                            'onTableAdvanceSettingClick': that.showTableSetting.bind(that),
                        };
                    }
                }
            };

            customConfig.toolbar[0].handler = ({
                action,
                API
            })=>{
               //do something here before action execute
               API.executeAction(action.name).then(()=>{
                   //do somthieng after action executed.
                   console.log('save completed');
                   return null;
               }).catch(()=>{
                   console.error('save error');
               });
            };

            this.config = {
                ...customConfig,
                propertyPanelFactory
            };
        },
        methods: {
            load(id){ //designer id
                //调用后端接口装载数据
                return Promise.resolve('');
            },
            init(){
                return Promise.resolve('');
            },
            requestInterceptor(config){
                //对headers等进行处理
                // config.headers.a = 1;
                return config;
            }
        },
        components: {
            // bPrintDesigner
        },
    };
</script>

3. 其他组件

    //属性编辑相关组件
    BarcodePropertyPanel,
    ImagePropertyPanel,
    LinePropertyPanel,
    PagePropertyPanel,
    TablePropertyPanel,
    TextPropertyPanel,

    PropertyGroup,
    Property,
    
    BarcodePropertyGroup,
    BasicPropertyGroup,
    ImagePropertyGroup,
    LinePropertyGroup,
    PagePropertyGroup,
    PrintPropertyGroup,
    TablePropertyGroup,
    TextPropertyGroup,

4. 工具

//都在PropertyUtil中
    getWatches,
    getPropGetters,
    getPropDefinesFromTemplate,
    formateNumber,
    colorNumberToCss,
    colorCssToNumber

5. methods

    reload // 重新加载

contribution

1. 启动测试服务 先把后端服务启动好，再进入前端的demo目录中，执行npm run install, 然后执行npm run dev。

2. 如需要修改，可新建自己的分支或者fork自己的库，修改好后进行充分的测试再提交merge request，等待审核通过后合并进master分支。 修改时应该从组件角度进行考虑，进行良好的设计。