sasp-flow-render 1.0.1

package/src/views/popup/js/controls/CustomRenderer.js

@@ -0,0 +1,219 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer' // 引入默认的renderer
+import { customElements, customConfig,hasLabelElements } from '../utils/utils'
+import {
+    append as svgAppend,
+    attr as svgAttr,
+    create as svgCreate
+} from 'tiny-svg';
+
+const HIGH_PRIORITY = 1500;// 最高优先级
+
+export default class CustomRenderer extends BaseRenderer { // 继承BaseRenderer
+    constructor(eventBus, bpmnRenderer) {
+        super(eventBus, HIGH_PRIORITY);
+        this.bpmnRenderer = bpmnRenderer;
+
+        // 重新定义原有画线方法，避免死循环
+        this.bpmnRenderer.drawConnectionOld = this.bpmnRenderer.drawConnection;
+    }
+
+    canRender(element) {
+        // ignore labels
+        return !element.labelTarget;
+    }
+
+    /**
+     * 绘制节点
+     * @param parentNode
+     * @param element
+     * @returns {*}
+     */
+    drawShape(parentNode, element) { // 核心函数就是绘制shape
+        const type = element.type;// 获取到类型
+        let tmpType = "";
+        if (customElements.includes(type)) { // or customConfig[type]
+            tmpType = type;
+            if(element.id.indexOf('Activity_draft')>-1 || (element.hasOwnProperty("nodeType")&&element.nodeType=="draft")){
+                tmpType = "bpmn:AcivitiyDraft";
+            }
+            const { url, attr } = customConfig[tmpType];
+            const customIcon = svgCreate('image', { // 在这里创建了一个image
+                ...attr,
+                href: url
+            });
+            if(type != 'bpmn:UserTask'){ //用户任务单独设置
+                element['width'] = attr.width; // 这里我是取了巧, 直接修改了元素的宽高
+                element['height'] = attr.height;
+                svgAppend(parentNode, customIcon);
+            }
+
+            // 判断是否有name属性来决定是否要渲染出label
+            if (!hasLabelElements.includes(type) && element.businessObject) {
+                if(!element.businessObject.name){
+                    element.businessObject['name'] = '';
+                }
+                let name = element.businessObject.name;
+                const text = svgCreate('foreignObject', {
+                    x: (attr.x + attr.width)/2 + 10,
+                    y: 30, // y取的是父元素的y+height+20
+                    width:"70px",
+                    height:"60px",
+                    "font-size": "12",
+                    "fill": "#00000",
+                    "overflow-wrap":"break-word",
+                    "text-anchor": "middle",
+                    "dominant-baseline": "middle"
+                });
+
+                const rect = svgCreate('rect',{
+                    "width": 100,
+                    'height':80,
+                    "x":0,
+                    "y":0,
+                    "rx": 5,
+                    "ry": 5,
+                    "fill":"white",
+                    "fill-opacity":0.95,
+                    "stroke":"#3384fe",
+                    "stroke-width":"2px"
+                });
+                text.innerHTML = name; //默认用户任务
+                svgAppend(parentNode,rect);
+                svgAppend(parentNode, text);
+                if(type == 'bpmn:UserTask' || tmpType == "bpmn:AcivitiyDraft"){
+                    element['width'] = 100;
+                    element['height'] = 80;
+                    element['rx'] = 5;
+                    element['ry'] = 5;
+                    element['style'] = "stroke: black;stroke-width: 2px;fill: white;fill-opacity: 0.95;";
+                    svgAppend(parentNode, customIcon);
+                }
+            }
+            return customIcon;
+        }
+
+        const shape = this.bpmnRenderer.drawShape(parentNode, element);
+        setShapeProperties(shape, element); //初始化颜色
+        return shape;
+    }
+
+    getShapePath(shape) {
+        return this.bpmnRenderer.getShapePath(shape);
+    }
+
+    drawConnection(parentNode, element) {
+        const bpmnRenderer = this.bpmnRenderer;
+        let vm = this;
+        let customConnectionColor = function(visuals, connection){
+            let res = bpmnRenderer.drawConnectionOld(visuals, connection);
+            if(!document.getElementById("gateWayLineColorRange")){
+                let defsDoc;
+                let arr = Array.prototype.slice.call( document.getElementsByTagName("svg") );
+                for(let elem of arr){
+                    if(elem.getAttribute("data-element-id")){
+                        defsDoc = elem.getElementsByTagName("defs")[0];
+                        break;
+                    }
+                }
+                let addElement = function(x, y) {
+                    let markerElement = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+                    markerElement.setAttribute('refX', x);
+                    markerElement.setAttribute('refY', y);
+                    markerElement.setAttribute('viewBox', "0 0 20 20");
+                    markerElement.setAttribute('markerWidth', "10");
+                    markerElement.setAttribute('markerHeight', "10");
+                    markerElement.setAttribute('orient', "auto");
+                    markerElement.setAttribute('id', "gateWayLineColorRange");
+                    markerElement.setAttribute('fill', 'red');
+                    let pathDom = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    pathDom.setAttribute("d","M 1 5 L 11 10 L 1 15 Z");
+                    pathDom.setAttribute("style","fill: #409EFF; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: rgb(64, 158, 255);");
+                    markerElement.appendChild(pathDom);
+                    defsDoc.appendChild(markerElement);
+                };
+                addElement(10,10);
+            }
+            if(connection.source){
+                if(connection.source.type == "bpmn:ParallelGateway" || connection.source.type == "bpmn:ExclusiveGateway" || connection.source.type == "bpmn:InclusiveGateway"){
+                    visuals.childNodes[0].style.stroke = "#FF8C1A";
+
+                    visuals.childNodes[0].style['marker-end'] = 'url("#gateWayLineColorRange")';
+                    let marker = document.querySelector("#gateWayLineColorRange");
+
+                    if (marker != null) {
+                        marker.childNodes[0].style.fill = "#FF8C1A";
+                        marker.childNodes[0].style.stroke = "#FF8C1A";
+                    }
+                }else{
+                    visuals.childNodes[0].style.stroke = "black"; // #409EFF
+
+                    let eleId = visuals.childNodes[0].style['marker-end'].split('"')[1];
+                    let marker = document.querySelector(eleId);
+                    if (marker != null) {
+                        marker.childNodes[0].style.fill = "black";
+                        marker.childNodes[0].style.stroke = "black";
+                    }
+                }
+            }
+            return res;
+        };
+        vm.bpmnRenderer.drawConnection = customConnectionColor;
+    }
+}
+
+CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];
+
+const propertiesConfig = { //默认颜色
+    'bpmn:StartEvent': {
+        fill: '#12c2e9'
+    },
+    'bpmn:UserTask': {
+        stroke: '#3384fe',
+        strokeWidth: 2,
+    },
+    'bpmn:EndEvent': {
+        // stroke: '#f64f59',
+        fill: '#f64f59'
+    },
+    'bpmn:ExclusiveGateway':{ //排他网关
+        stroke: '#ed8d21',
+        strokeWidth: 4
+    },
+
+    'bpmn:InclusiveGateway':{ //包容网关
+        stroke: '#ed8d21',
+        strokeWidth: 4
+    },
+    // ParallelGateway
+    'bpmn:ParallelGateway':{ //并行网关
+        stroke: '#ed8d21',
+        strokeWidth: 4
+    },
+
+    'bpmn:Participant':{ //泳道
+        stroke: '#3384fe',
+        strokeWidth: 1,
+    },
+
+    'bpmn:Group':{ //分组
+        stroke: '#3384fe',
+        strokeWidth: 2,
+    },
+
+    'bpmn:SubProcess':{ //子流程
+        stroke:'3384fe',
+        strokeWidth:2,
+    }
+
+};
+
+function setShapeProperties(shape, element){
+    const type = element.type; // 获取到的类型
+    if (propertiesConfig[type]) {
+        const properties = propertiesConfig[type];
+        Object.keys(properties).forEach(prop => {
+            shape.style.setProperty(prop, properties[prop])
+        });
+    }
+
+}

package/src/views/popup/js/controls/index.js

@@ -0,0 +1,11 @@
+import CustomContextPad from './CustomContextPad';
+import CustomeRender from './CustomRenderer';
+import CustomPalette from './CustomPalette';
+
+
+export default {
+  __init__: [ 'customContextPad','customeRender', 'customPalette' ],
+  customContextPad: [ 'type', CustomContextPad ],
+  customeRender:    ['type',CustomeRender],
+  customPalette: [ 'type', CustomPalette ]
+};

package/src/views/popup/js/customModeler/CustomModeler.js

@@ -0,0 +1,22 @@
+//不用系统默认控件，使用自定义方便顺序调整
+import Modeler from 'bpmn-js/lib/Modeler'
+import inherits from 'inherits'
+import CustomModule from '../controls'
+
+
+export default function CustomModeler(options) {
+    Modeler.call(this, options);
+    this._customElements = []
+}
+
+inherits(CustomModeler, Modeler);
+
+CustomModeler.prototype.bindEditBtnCallBack = function(func){
+    CustomModule.customContextPad[1].prototype.editBtnCallBack = func;
+}
+
+CustomModeler.prototype._modules = [].concat(
+    CustomModeler.prototype._modules, [
+        CustomModule
+    ]
+);

package/src/views/popup/js/translations/customTranslate.js

@@ -0,0 +1,14 @@
+import translations from './translations';
+
+
+export default function customTranslate(template, replacements) {
+    replacements = replacements || {};
+
+    // Translate
+    template = translations[template] || template;
+
+    // Replace
+    return template.replace(/{([^}]+)}/g, function (_, key) {
+        return replacements[key] || '{' + key + '}';
+    });
+}

package/src/views/popup/js/translations/translations.js

@@ -0,0 +1,234 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+    'Activate the hand tool': '选择',
+    'Activate the lasso tool': '批量选择',
+    'Activate the create/remove space tool': '从横/纵切面批量调整',
+    'Activate the global connect tool': '连线',
+    'Create StartEvent': '添加开始节点',
+
+    'Create Intermediate/Boundary Event': '添加中间/边界事件',
+
+    'Create EndEvent': '添加结束节点',
+    'Create Gateway': '添加条件流转',
+    'Create Task': '添加任务',
+    'Create UserTask': '添加用户任务',
+    "Create Timer": '添加定时器',
+    'Create expanded SubProcess': '添加子流程',
+    'Create Pool/Participant': '添加泳道',
+    'Create Group': '添加分组',
+    'Create DataStoreReference': '添加数据操作节点',
+    'Create ExclusiveGateway': '添加条件流转节点',
+    'Create process block': '添加公共流程块节点',
+
+    'User Task': '用户任务',
+
+    'Append Gateway': '添加条件流转',
+    'Append Task': '添加任务',
+    'Append UserTask': '添加用户任务',
+    'Append TextAnnotation': '添加说明文本',
+    'Append NodeEdit': '节点编辑',
+
+    'Exclusive Gateway': '专用网关',
+    'Parallel Gateway': '并行网关',
+    'Inclusive Gateway': '包容性网关',
+    'Complex Gateway': '复杂网关',
+    'Event based Gateway': '基于事件的网格',
+    'Message Start Event': '消息启动事件',
+    'Timer Start Event': '定时启动事件',
+    'Conditional Start Event': '条件启动事件',
+    'Signal Start Event': '信号启动事件',
+    'Error Start Event': '错误启动事件',
+    'Escalation Start Event': '升级启动事件',
+    'Compensation Start Event': '补偿启动事件',
+    'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+    'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+    'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+    'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+    'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)',
+
+
+    'Append {type}': '添加 {type}',
+    'Add Lane above': '在上面添加道',
+    'Divide into two Lanes': '分割成两个道',
+    'Divide into three Lanes': '分割成三个道',
+    'Add Lane below': '在下面添加道',
+    'Append compensation activity': '追加补偿活动',
+    'Change type': '修改类型',
+    'Connect using Association': '使用关联连接',
+    'Connect using Sequence/MessageFlow or Association': '添加连接线',
+    'Connect using DataInputAssociation': '使用数据输入关联连接',
+    'Remove': '移除',
+    'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
+    'Parallel Multi Instance': '并行多重事件',
+    'Sequential Multi Instance': '时序多重事件',
+    'DataObjectReference': '数据对象参考',
+    'DataStoreReference': '数据存储参考',
+    'Loop': '循环',
+    'Ad-hoc': '即席',
+    'Create {type}': '创建 {type}',
+    'Task': '任务',
+    'Send Task': '发送任务',
+    'Receive Task': '接收任务',
+    'Manual Task': '手工任务',
+    'Business Rule Task': '业务规则任务',
+    'Service Task': '服务任务',
+    'Script Task': '脚本任务',
+    'Call Activity': '调用活动',
+    'Sub Process (collapsed)': '子流程（折叠的）',
+    'Sub Process (expanded)': '子流程（展开的）',
+    'Start Event': '开始事件',
+    'StartEvent': '开始事件',
+    'Intermediate Throw Event': '中间事件',
+    'End Event': '结束事件',
+    'EndEvent': '结束事件',
+    'Message Intermediate Catch Event': '消息中间捕获事件',
+    'Message Intermediate Throw Event': '消息中间抛出事件',
+    'Timer Intermediate Catch Event': '定时中间捕获事件',
+    'Escalation Intermediate Throw Event': '升级中间抛出事件',
+    'Conditional Intermediate Catch Event': '条件中间捕获事件',
+    'Link Intermediate Catch Event': '链接中间捕获事件',
+    'Link Intermediate Throw Event': '链接中间抛出事件',
+    'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+    'Signal Intermediate Catch Event': '信号中间捕获事件',
+    'Signal Intermediate Throw Event': '信号中间抛出事件',
+    'Message End Event': '消息结束事件',
+    'Escalation End Event': '定时结束事件',
+    'Error End Event': '错误结束事件',
+    'Cancel End Event': '取消结束事件',
+    'Compensation End Event': '补偿结束事件',
+    'Signal End Event': '信号结束事件',
+    'Terminate End Event': '终止结束事件',
+    'Message Boundary Event': '消息边界事件',
+    'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+    'Timer Boundary Event': '定时边界事件',
+    'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+    'Escalation Boundary Event': '升级边界事件',
+    'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+    'Conditional Boundary Event': '条件边界事件',
+    'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+    'Error Boundary Event': '错误边界事件',
+    'Cancel Boundary Event': '取消边界事件',
+    'Signal Boundary Event': '信号边界事件',
+    'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+    'Compensation Boundary Event': '补偿边界事件',
+    'Transaction': '转运',
+    'Sub Process': '子流程',
+    'Event Sub Process': '事件子流程',
+    'Collapsed Pool': '折叠池',
+    'Expanded Pool': '展开池',
+
+    // Errors
+    'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+    'no shape type specified': '没有指定的形状类型',
+    'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
+    'out of bounds release': 'out of bounds release',
+    'more than {count} child lanes': '子道大于{count} ',
+    'element required': '元素不能为空',
+    'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+    'no diagram to display': '没有可展示的流程图',
+    'no process or collaboration to display': '没有可展示的流程/协作',
+    'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
+    'already rendered {element}': '{element} 已被渲染',
+    'failed to import {element}': '导入{element}失败',
+    //属性面板的参数
+    'Id': '编号',
+    'Name': '名称',
+    'General': '常规',
+    'Details': '详情',
+    'Message Name': '消息名称',
+    'Message': '消息',
+    'Initiator': '创建者',
+    'Asynchronous Continuations': '持续异步',
+    'Asynchronous Before': '异步前',
+    'Asynchronous After': '异步后',
+    'Job Configuration': '工作配置',
+    'Exclusive': '排除',
+    'Job Priority': '工作优先级',
+    'Retry Time Cycle': '重试时间周期',
+    'Documentation': '文档',
+    'Element Documentation': '元素文档',
+    'History Configuration': '历史配置',
+    'History Time To Live': '历史的生存时间',
+    'Forms': '表单',
+    'Form Key': '表单key',
+    'Form Fields': '表单字段',
+    'Business Key': '业务key',
+    'Form Field': '表单字段',
+    'ID': '编号',
+    'Type': '类型',
+    'Label': '名称',
+    'Default Value': '默认值',
+    'Validation': '校验',
+    'Add Constraint': '添加约束',
+    'Config': '配置',
+    'Properties': '属性',
+    'Add Property': '添加属性',
+    'Value': '值',
+    'Listeners': '监听器',
+    'Execution Listener': '执行监听',
+    'Event Type': '事件类型',
+    'Listener Type': '监听器类型',
+    'Java Class': 'Java类',
+    'Expression': '表达式',
+    'Must provide a value': '必须提供一个值',
+    'Delegate Expression': '代理表达式',
+    'Script': '脚本',
+    'Script Format': '脚本格式',
+    'Script Type': '脚本类型',
+    'Inline Script': '内联脚本',
+    'External Script': '外部脚本',
+    'Resource': '资源',
+    'Field Injection': '字段注入',
+    'Extensions': '扩展',
+    'Input/Output': '输入/输出',
+    'Input Parameters': '输入参数',
+    'Output Parameters': '输出参数',
+    'Parameters': '参数',
+    'Output Parameter': '输出参数',
+    'Timer Definition Type': '定时器定义类型',
+    'Timer Definition': '定时器定义',
+    'Date': '日期',
+    'Duration': '持续',
+    'Cycle': '循环',
+    'Signal': '信号',
+    'Signal Name': '信号名称',
+    'Escalation': '升级',
+    'Error': '错误',
+    'Link Name': '链接名称',
+    'Condition': '条件名称',
+    'Variable Name': '变量名称',
+    'Variable Event': '变量事件',
+    'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
+    'Wait for Completion': '等待完成',
+    'Activity Ref': '活动参考',
+    'Version Tag': '版本标签',
+    'Executable': '可执行文件',
+    'External Task Configuration': '扩展任务配置',
+    'Task Priority': '任务优先级',
+    'External': '外部',
+    'Connector': '连接器',
+    'Must configure Connector': '必须配置连接器',
+    'Connector Id': '连接器编号',
+    'Implementation': '实现方式',
+    'Field Injections': '字段注入',
+    'Fields': '字段',
+    'Result Variable': '结果变量',
+    'Topic': '主题',
+    'Configure Connector': '配置连接器',
+    'Input Parameter': '输入参数',
+    'Assignee': '代理人',
+    'Candidate Users': '候选用户',
+    'Candidate Groups': '候选组',
+    'Due Date': '到期时间',
+    'Follow Up Date': '跟踪日期',
+    'Priority': '优先级',
+    'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+    'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+    'Variables': '变量',
+    'Open minimap':'小地图',
+};

package/src/views/popup/js/utils/utils.js

@@ -0,0 +1,53 @@
+const customElements = ['bpmn:StartEvent','bpmn:EndEvent','bpmn:DataStoreReference','bpmn:IntermediateCatchEvent','bpmn:ParallelGateway','bpmn:InclusiveGateway','bpmn:ExclusiveGateway','bpmn:AcivitiyDraft','bpmn:UserTask','bpmn:BoundaryEvent'];
+const customConfig = { // 自定义元素的配置
+    'bpmn:StartEvent': { //开始节点
+        'url': require('../../../../assets/images/start.png'),//vue 引入图片方式
+        'attr': { x: 0, y: 0, width: 36, height: 36 }
+    },
+
+    'bpmn:AcivitiyDraft':{ //开始草稿
+        'url': require('../../../../assets/images/draft.png'),//
+        'attr': { x: 4, y: 4, width: 24, height: 24 }
+    },
+
+    'bpmn:EndEvent':{ //结束节点
+        'url': require('../../../../assets/images/end.png'),//vue 引入图片方式
+        'attr': { x: 0, y: 0, width: 36, height: 36 }
+    },
+    'bpmn:DataStoreReference':{//数据操作节点
+        'url': require('../../../../assets/images/dataStore.png'),//
+        'attr': { x: 0, y: 0, width: 36, height: 36 }
+    },
+
+    'bpmn:IntermediateCatchEvent':{//定时器节点
+        'url': require('../../../../assets/images/timer.png'),//
+        'attr': { x: 0, y: 0, width: 36, height: 36 }
+    },
+
+    'bpmn:BoundaryEvent':{//定时器节点
+        'url': require('../../../../assets/images/timer.png'),//
+        'attr': { x: 0, y: 0, width: 36, height: 36 }
+    },
+
+    'bpmn:UserTask':{ //用户任务图标
+        'url': require('../../../../assets/images/userTask_icon.png'),//
+        'attr': { x: 4, y: 4, width: 24, height: 24 }
+    },
+    'bpmn:ParallelGateway':{ //并行网关
+        'url': require('../../../../assets/images/gateway.png'),//
+        'attr': { x: 0, y: 0, width: 50, height: 50 }
+    },
+    'bpmn:InclusiveGateway':{ //并行网关
+        'url': require('../../../../assets/images/gateway.png'),//
+        'attr': { x: 0, y: 0, width: 50, height: 50 }
+    },
+    'bpmn:ExclusiveGateway':{ //排他网关
+        'url': require('../../../../assets/images/gateway.png'),//
+        'attr': { x: 0, y: 0, width: 50, height: 50 }
+    },
+    'bpmn:Group':{ //公共区域图标
+
+    }
+};
+const hasLabelElements = ['bpmn:StartEvent','bpmn:EndEvent','bpmn:DataStoreReference','bpmn:IntermediateCatchEvent','bpmn:ParallelGateway','bpmn:InclusiveGateway','bpmn:ExclusiveGateway','bpmn:BoundaryEvent']; // 一开始就有label标签的元素类型
+export { customElements, customConfig, hasLabelElements }

package/src/views/test.vue

@@ -0,0 +1,79 @@
+<template>
+    <flow-inst-view :flow-id="flowId"
+                    :loginUser="loginUser"
+                    :saveFormInfo="saveFormInfo"
+                    :initFormInfo="initFormInfo"
+    >
+        <div slot="formInfo">
+            <el-form :model="formData" size="small">
+                <el-row>
+                    <template v-for="(item,index) in arr">
+                        <el-col :span="12">
+                            <el-form-item label="键" label-width="80px">
+                                <el-input v-model="item.key"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="值" label-width="80px">
+                                <el-input v-model="item.value"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </template>
+                </el-row>
+                <el-button @click="arr.push({key:'',value:''})">添加</el-button>
+            </el-form>
+        </div>
+    </flow-inst-view>
+</template>
+
+<script>
+    import FlowInstView from "./flowInstView";
+    export default {
+        name: "test",
+        components: {FlowInstView},
+        data(){
+            return {
+                userId:this.$route.query.userCode,
+                userName:this.$route.query.userName,
+                loginUser:{id:'263a310920b64074a0fc916a99aa4d41',userName:'武玉峰'},
+                param:this.$route.query,
+                flowId:this.$route.query.flowId,
+                formData:{},
+                arr:[{key:'',value:''}],
+            }
+        },
+        created() {
+            if(this.userId){
+                this.loginUser.id = this.userId;
+                this.loginUser.userName = this.userName;
+            }
+            if(!this.flowId){
+                this.$message.error("请设置流程ID，否则流程无法正常运行!");
+            }
+        },
+        methods:{
+            initFormInfo(type,dataId,fieldOperate,flowInstId){
+                console.log(type);
+                console.log(dataId);
+                console.log("操作权限：");
+                console.log(fieldOperate);
+                console.log("操作权限end");
+                console.log(flowInstId);
+            },
+            saveFormInfo(){
+                let formData = {};
+                this.arr.forEach(item => {
+                    if(item.key){
+                        formData[item.key] = item.value || '';
+                    }
+                })
+                console.log(formData);
+                return formData;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>