sasp-flow-render 1.0.1

package/src/views/popup/css/flowMain.scss

@@ -0,0 +1,156 @@
+
+.flow-define-info {
+
+.js-canvas {
+    height: 100%;
+    width: 100%;
+
+    /* 背景网格 */
+    background-color: white;
+    background-image: linear-gradient(
+            90deg,
+            rgba(220, 220, 220, 0.5) 6%,
+            transparent 0
+    ),
+    linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0) !important;
+    background-size: 20px 20px;
+
+/deep/ {
+.djs-palette{
+    position: absolute;
+    left: -50px;
+    top: 0px;
+}
+
+.djs-palette.two-column.open{
+    width: min-content;
+}
+.bjs-powered-by{
+    display: none;
+}
+.bpmn-icon-end-event-none:before {
+    color: #3384fe;
+    cursor: pointer;
+}
+.bpmn-icon-gateway-none:before{
+    color: #3384fe;
+}
+
+.bpmn-icon-connection-multi:before{
+    color: #3384fe;
+    cursor: pointer;
+}
+.bpmn-icon-hand-tool:before{
+    color: #3384fe;
+    cursor: pointer;
+}
+.bpmn-icon-lasso-tool:before{
+    color: #3384fe;
+    cursor: pointer;
+}
+.bpmn-icon-space-tool:before{
+    color: #3384fe;
+    cursor: pointer;
+}
+
+/**重写系统默认图标先执行隐藏 以下隐藏不需要的栏目**/
+.bpmn-icon-intermediate-event-none{ //中间事件
+display: none;
+}
+.bpmn-icon-data-object{ //
+display: none;
+}
+.bpmn-icon-task {
+    display: none;
+}
+
+.bpmn-icon-start-event-none{
+    display: none;
+}
+.bpmn-icon-end-event-none{
+    display: none;
+}
+.bpmn-icon-hand-tool{
+    display: none;
+}
+.bpmn-icon-lasso-tool{
+    display: none;
+}
+.bpmn-icon-space-tool{
+    display: none;
+}
+.bpmn-icon-screw-wrench{
+    display: none;
+}
+
+.demo-data-timer{ /* 暂时隐藏 计时器*/
+    display: none;
+}
+.demo-data-store{ /* 暂时隐藏 数据操作*/
+    display: none;
+}
+.bpmn-icon-text-annotation{ /*隐藏 文本注释*/
+    display: none;
+}
+
+.bpmn-icon-trash[data-action="delete"]{ /* 隐藏系统默认删除按钮 */
+    display: none;
+}
+.djs-palette-entries .bpmn-icon-connection-multi{
+    display: none;
+}
+
+
+}
+}
+
+
+#bpmnContainer {
+    display: flex;
+    flex: 1;
+}
+
+
+.properties-panel-parent {
+    position: relative;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 260px;
+    height: 100%;
+    z-index: 10;
+    border-left: 1px solid #ccc;
+    overflow: auto;
+
+&:empty {
+     display: none;
+ }
+
+> .djs-properties-panel {
+    padding-bottom: 70px;
+    min-height: 100%;
+}
+}
+    .right-content{
+        position: absolute;right: 0;top: 0;width: 350px;box-sizing: border-box;height: 100%;
+        border-left: 1px solid #c2c2c2;background-color: #FFF;
+    }
+    .right-content /deep/ .el-tabs__nav-scroll{
+        padding: 0 10px;
+    }
+    .right-content /deep/ .el-tabs__header{
+        margin: 0;
+    }
+    .right-content /deep/ .el-tabs__nav-wrap::after{
+        height: 1px;
+        background-color: #c2c2c2;
+    }
+    .right-content /deep/ .el-tabs__content{
+        height: calc(100% - 40px);
+        overflow-y: auto;
+    }
+    .right-content /deep/ .el-tabs__item span{
+        font-size: 16px;
+    }
+
+}

package/src/views/popup/event/compoment/diy/info.txt

@@ -0,0 +1 @@
+自定义组件

package/src/views/popup/event/compoment/eventParentConfig.vue

@@ -0,0 +1,45 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: "event-parent-config",
+        props:{
+            configData:{required:true},
+            dataTypeArr:{type:Array,default:() => {return [];}},
+            dataTreeObj:{type:Object,default:() => {return {};}},
+            dataTreeArr:{type:Array,default:() => {return [];}},
+            formBaseObj:{type:Object,default:() => {return {};}},
+            nodePowerDataArr:{type:Array,default:() =>{return []}}, //可配置字段
+            allSysDataObj:{type:Object,default:() =>{return {};}},//数据字段对象
+        },
+        data(){
+            return{
+                eventSource:'',//控件来源
+                eventName:'', //控件显示名称
+                eventData:this.configData,
+                nodeObj:this.configData,
+            }
+        },
+        created(){
+
+        },
+        methods:{
+            getConfigDatas(){
+                return this.configData;
+            },
+            /**
+             * 校验方法
+             */
+            validateMethod(){
+                return true;
+            },
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

package/src/views/popup/event/js/loadFlowEventPlugin.js

@@ -0,0 +1,279 @@
+import {eventPlugin} from "sasp-base";
+import axios from "axios/index";
+import apiFlow from "../../../../assets/js/api/apiFlow";
+
+/*读取自定义表单事件文件*/
+const diyComponents = require.context(
+    '../compoment/diy/',
+    // 是否查询其子目录
+    true,
+    // 匹配vue后缀文件名的文件
+    /\.vue$/
+);
+
+/*读取系统事件目录**/
+const sysComponents = require.context(
+    '../compoment/system/',
+    // 是否查询其子目录
+    true,
+    // 匹配vue后缀文件名的文件
+    /\.vue$/
+);
+
+
+let eventComponent = {}; // 加载格式化中所有配置与渲染组件
+
+let systemEventComponent = {}; //加载系统事件规则配置
+let eventRuleComponent = {}; //
+diyComponents.keys().forEach(fileName => {//自定义
+    const component = diyComponents(fileName).default;
+    if(component.name){
+        eventComponent[component.name]= component;
+    }
+});
+sysComponents.keys().forEach(fileName =>{ //系统
+    const component = sysComponents(fileName).default;
+    if(component.name){
+        systemEventComponent[component.name]= component;
+    }
+});
+
+
+let tableViewEvent = []; //表单事件arr
+let eventObj = {}; //事件对象
+
+// Object.keys(eventRuleComponent).forEach(key =>{
+//     // 组件转换存储数据库并读取恢复start
+//     let componentTemp = eventRuleComponent[key];
+//     let obj = {};
+//     dealComponent(componentTemp,obj);
+//     // JSON.stringify(componentTemp)和JSON.stringify(obj)就是虚拟的存储到数据库的数据
+//     let tempComp = JSON.parse(JSON.stringify(componentTemp));
+//     obj = JSON.parse(JSON.stringify(obj));
+//     recoverComponent(obj);
+//     assignLevel(tempComp,obj);
+//     if(tempComp.eventType){
+//         eventObj[tempComp.name] = {
+//             id:tempComp.name,
+//             name:tempComp.eventName,
+//             config:tempComp, // 配置组件
+//             render:tempComp.renderKey? eventComponent[tempComp.renderKey] : null, // 渲染组件
+//             // getConfigDatas:"getConfigDatas", // 获取配置组件内容的方法，不写默认getConfigDatas
+//             reqBefore:eventComponent["test-before"], // 请求前加载组件
+//             reqAfter:eventComponent["test-after"], // 请求后加载组件
+//         };
+//     }
+//     if(tempComp.eventType == 'form'){ //表单
+//         tableViewEvent.push({
+//             id : tempComp.name,
+//             name: tempComp.eventShowName,
+//             config:tempComp, // 配置组件
+//             render:eventComponent["code-formatter-render"], // 渲染组件
+//             // getConfigDatas:"getConfigDatas", // 获取配置组件内容的方法，不写默认getConfigDatas
+//             reqBefore:eventComponent["test-before"], // 请求前加载组件
+//             reqAfter:eventComponent["test-after"], // 请求后加载组件
+//         })
+//
+//     }else if(tempComp.eventType == 'list') { //列表
+//
+//     }else if(tempComp.eventType == 'flow'){//流程
+//
+//     }
+// });
+// 组件转换存储数据库并读取恢复start
+// let componentTemp = eventComponent["code-formatter-config"];
+// let obj = {};
+// // 处理组件函数
+// dealComponent(componentTemp,obj);
+
+// function dealComponent(methodComponent,result){
+//     Object.keys(methodComponent).forEach(key => {
+//         if(Array.isArray(methodComponent[key])){
+//             result[key] = methodComponent[key].slice(0);
+//             result[key].forEach((item,index) => {
+//                 if(typeof item === "function"){
+//                     result[key][index] = item.toString();
+//                 }
+//             })
+//         }
+//         if(typeof methodComponent[key] === "function"){
+//             result[key] = methodComponent[key].toString();
+//         }
+//         if(typeof methodComponent[key] === "object" && !Array.isArray(methodComponent[key])){
+//             if(methodComponent[key]["beforeCreate"] && methodComponent[key]["beforeDestroy"]){ // 继承的组件
+//                 result[key] = {};
+//                 dealComponent(methodComponent[key],result[key]);
+//             }else{
+//                 Object.keys(methodComponent[key]).forEach(temKey => {
+//                     if(typeof methodComponent[key][temKey] === "function"){
+//                         if(!result[key]){
+//                             result[key] = {};
+//                         }
+//                         result[key][temKey] = methodComponent[key][temKey].toString();
+//                     }
+//                 })
+//             }
+//         }
+//     })
+// }
+// // JSON.stringify(componentTemp)和JSON.stringify(obj)就是虚拟的存储到数据库的数据
+// let tempComp = JSON.parse(JSON.stringify(componentTemp));
+
+
+
+
+    let diyEventObjs = {}; //事件中已经存在
+    //遍历自定义组件
+    Object.keys(eventComponent).forEach(key =>{
+        if(eventComponent[key].eventType){ //组件中存在事件来源
+            if(!diyEventObjs[eventComponent[key].eventType]){
+                diyEventObjs[eventComponent[key].eventType] = [];
+            }
+            diyEventObjs[eventComponent[key].eventType].push({
+                id : key,
+                name : eventComponent[key]['eventName'],
+                eventType: eventComponent[key]["eventType"],
+                eventSource:'2',
+                dataSource:'1',
+                config: eventComponent[key],
+                render:eventComponent[key]['renderKey'] ?
+                        eventComponent[eventComponent[key]['renderKey']] : null, // 渲染组件
+            });
+
+        }
+    });
+
+    //加载系统事件规则
+    let sysEventObjs = {}; //事件中已经存在
+    //遍历自定义组件
+    Object.keys(systemEventComponent).forEach(key =>{
+        if(systemEventComponent[key].eventType){ //组件中存在事件来源
+            if(!sysEventObjs[systemEventComponent[key].eventType]){
+                sysEventObjs[systemEventComponent[key].eventType] = [];
+            }
+            sysEventObjs[systemEventComponent[key].eventType].push({
+                id : key,
+                name : systemEventComponent[key]['eventName'],
+                eventType: systemEventComponent[key]["eventType"],
+                eventSource:'1',
+                dataSource:'1',
+                config: systemEventComponent[key],
+                render:systemEventComponent[key]['renderKey'] ?
+                    systemEventComponent[systemEventComponent[key]['renderKey']] : null, // 渲染组件
+            });
+
+        }
+    });
+
+export default {
+    name: "loadEventPlugin",
+    installAll(){
+        axios.post(apiFlow.apis.eventRule.findByVersion,{"eventTypes":"flow"}).then(res =>{ //查询流程相关事件规则
+            if(res){
+                Object.keys(diyEventObjs).forEach(key =>{
+                    //加载列格式化
+                    diyEventObjs[key].forEach(item =>{
+                        eventPlugin.preActiveEventRule(item);
+                    })
+                });
+                //加载系统事件规则
+                Object.keys(sysEventObjs).forEach(key =>{
+                    //加载列格式化
+                    sysEventObjs[key].forEach(item =>{
+                        eventPlugin.installEventRule(item);
+                    })
+                });
+
+                (res.data || []).forEach(item =>{
+                    if(item.eventUse == '1' && item.dataSource == '2')
+                    {
+                        //将后台返回的配置字符串转换为config组件,渲染字符串转化为render组件
+                        let configStr = item.eventConfigurationStr; //配置文件字符串
+                        let renderStr = item.eventRenderStr; //渲染文件字符串
+                        let eventComp = {"id":item.eventKey,
+                            "name":item.eventName,
+                            "eventSource": item.eventSource,
+                            "eventType":item.eventType,
+                            "dataSource":item.dataSource,
+                            "config":null,
+                            "render":null};
+                        if(configStr){
+                            let configObj = JSON.parse(configStr);
+                            let tempComp = configObj["comp"];
+                            let method = configObj["method"];
+                            // 转化
+                            try {
+                                recoverComponent(method);
+                            }catch (e) {
+                                console.log(e);
+                            }
+                            assignLevel(tempComp,method);
+                            Object.assign(eventComp,{"config":tempComp});
+                        }
+                        if(renderStr){
+                            let renderObj = JSON.parse(renderStr);
+                            let tempComp = renderObj["comp"];
+                            let obj = renderObj["method"];
+                            recoverComponent(obj);
+                            assignLevel(tempComp,obj);
+                            Object.assign(eventComp,{"render":tempComp});
+                        }
+                        eventPlugin.installEventRule(eventComp); //执行注册
+
+                        function recoverComponent(result){
+                            Object.keys(result).forEach(key => {
+                                if(Array.isArray(result[key])){
+                                    if(key == "beforeCreate" || key == "beforeDestroy"){
+                                        result[key] = [];
+                                    }else{
+                                        result[key].forEach((item,index) => {
+                                            let name = item.name || "a";
+                                            result[key][index] = new Function("let " + name + " = "+ item +";return " + name + ";")();
+                                        })
+                                    }
+                                }else if (typeof result[key]  === "object"){
+                                    if(result[key]["beforeCreate"] && result[key]["beforeDestroy"]){
+                                        recoverComponent(result[key]);
+                                    }else{
+                                        Object.keys(result[key]).forEach(temKey => {
+                                            let name = result[key][temKey].name || temKey;
+                                            if(Number(name) || Number(name) === 0){
+                                                name = "a";
+                                            }
+                                            result[key][temKey] = new Function("let " + name + " = " + result[key][temKey] +";return  " + name + ";")();
+                                        })
+                                    }
+                                }else{
+                                    let name = result[key].name || key;
+                                    result[key] = new Function("let " + name + " = " + result[key] +";return " + name + ";")();
+                                }
+                            })
+                        }
+                        // 多级对象复制方法
+                        function assignLevel(target,source){
+                            let value = {};
+                            Object.keys(target).forEach(key => {
+                                if(typeof target[key]  === "object" && target[key]["beforeCreate"] && target[key]["beforeDestroy"]){
+                                    value[key] = target[key];
+                                    assignLevel(value[key],source[key]);
+                                    delete target[key];
+                                }
+                            })
+                            Object.assign(target,source,value);
+                        }
+                    }
+                    else if(item.dataSource == '1') { //数据库已经保存得组件注册
+                        Object.keys(diyEventObjs).forEach(key => {
+                            diyEventObjs[key].forEach(comp =>{
+                                if(comp.id == item.eventKey){
+                                    eventPlugin.installEventRule(comp);//全局注册
+                                }
+                            });
+                        });
+                    }
+                });
+            }
+        });
+
+    }
+}