diff --git a/package-lock.json b/package-lock.json index 78791df4f..6c256ccd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -390,9 +390,18 @@ } }, "@logicflow/core": { - "version": "0.2.9", - "resolved": "https://registry.npm.taobao.org/@logicflow/core/download/@logicflow/core-0.2.9.tgz", - "integrity": "sha1-wTU8PV0P58QNm7jPq+PMbVmF5PE=" + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@logicflow/core/-/core-0.3.0.tgz", + "integrity": "sha512-FPRTuj0y6Yny+YDZ+faTzA8pZyouEWX1Vr6rH91wJR0J3NOHgb7pV/TJoHSosavFuyyw87nLw9UsyUUgHKVV+A==" + }, + "@logicflow/extension": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@logicflow/extension/-/extension-0.3.0.tgz", + "integrity": "sha512-vMmYT8H53oFhOpNftCYQMbNYbTiXqQUxOOKlPcrKkZb0FsXSiEZ/MUKBF3mAarvFlzdMaB5xJjakMfy07/bdvw==", + "requires": { + "@logicflow/core": "^0.3.0", + "ids": "^1.0.0" + } }, "@nodelib/fs.scandir": { "version": "2.1.4", @@ -1235,6 +1244,11 @@ "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=", "dev": true }, + "ids": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/ids/-/ids-1.0.0.tgz", + "integrity": "sha512-Zvtq1xUto4LttpstyOlFum8lKx+i1OmRfg+6A9drFS9iSZsDPMHG4Sof/qwNR4kCU7jBeWFPrY2ocHxiz7cCRw==" + }, "indexes-of": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/indexes-of/download/indexes-of-1.0.1.tgz", @@ -1958,6 +1972,11 @@ "@vue/devtools-api": "^6.0.0-beta.7" } }, + "vue-json-pretty": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-2.0.2.tgz", + "integrity": "sha512-Vn7SX3XR9cfvGRNoTDNID89GmvVUMb7/fLUX3C3n0Qptga0N7hp7Zwspui1I1XN5pE+PeoVghCSYty+bi8KnjA==" + }, "vue-router": { "version": "4.0.6", "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.6.tgz", diff --git a/package.json b/package.json index 82191772f..fd2e4f0da 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ }, "dependencies": { "@amap/amap-jsapi-loader": "^1.0.1", - "@logicflow/core": "^0.2.9", + "@logicflow/core": "^0.3.0", + "@logicflow/extension": "^0.3.0", "@vueuse/core": "^4.8.1", "await-to-js": "^2.1.1", "axios": "^0.21.1", @@ -27,6 +28,7 @@ "v-contextmenu": "^3.0.0-alpha.4", "vue": "^3.0.11", "vue-i18n": "^9.1.2", + "vue-json-pretty": "^2.0.2", "vue-router": "^4.0.6", "vue-types": "^3.0.2", "vuedraggable": "^4.0.1", diff --git a/src/components/FlowChart/index.ts b/src/components/FlowChart/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/FlowChart/src/AddPanel.vue b/src/components/FlowChart/src/AddPanel.vue new file mode 100644 index 000000000..d61ba14f1 --- /dev/null +++ b/src/components/FlowChart/src/AddPanel.vue @@ -0,0 +1,115 @@ + + + + + diff --git a/src/components/FlowChart/src/Bpmn.vue b/src/components/FlowChart/src/Bpmn.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/FlowChart/src/Control.vue b/src/components/FlowChart/src/Control.vue new file mode 100644 index 000000000..3b57f33f6 --- /dev/null +++ b/src/components/FlowChart/src/Control.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/src/components/FlowChart/src/DataDialog.vue b/src/components/FlowChart/src/DataDialog.vue new file mode 100644 index 000000000..c83352a95 --- /dev/null +++ b/src/components/FlowChart/src/DataDialog.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/src/components/FlowChart/src/NodePanel.vue b/src/components/FlowChart/src/NodePanel.vue new file mode 100644 index 000000000..cf22fada8 --- /dev/null +++ b/src/components/FlowChart/src/NodePanel.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/src/components/FlowChart/src/adpterForTurbo.ts b/src/components/FlowChart/src/adpterForTurbo.ts new file mode 100644 index 000000000..5b98a377c --- /dev/null +++ b/src/components/FlowChart/src/adpterForTurbo.ts @@ -0,0 +1,166 @@ + +const TurboType = { + SEQUENCE_FLOW: 1, + START_EVENT: 2, + END_EVENT: 3, + USER_TASK: 4, + SERVICE_TASK: 5, + EXCLUSIVE_GATEWAY: 6, +} + +function getTurboType(type) { + switch (type) { + case 'bpmn:sequenceFlow': + return TurboType.SEQUENCE_FLOW + case 'bpmn:startEvent': + return TurboType.START_EVENT + case 'bpmn:endEvent': + return TurboType.END_EVENT + case 'bpmn:userTask': + return TurboType.USER_TASK + case 'bpmn:serviceTask': + return TurboType.SERVICE_TASK + case 'bpmn:exclusiveGateway': + return TurboType.EXCLUSIVE_GATEWAY + default: + return type + } +} + +function convertNodeToTurboElement(node) { + const { id, type, x, y, text = '', properties } = node + return { + incoming: [], + outgoing: [], + dockers: [], + type: getTurboType(node.type), + properties: { + ...properties, + name: text && text.value || '', + x: x, + y: y, + text, + logicFlowType: type, + }, + key: id, + } +} + +function convertEdgeToTurboElement(edge) { + const { + id, + type, + sourceNodeId, + targetNodeId, + startPoint, + endPoint, + pointsList, + text = '', + properties } = edge + return { + incoming: [sourceNodeId], + outgoing: [targetNodeId], + type: getTurboType(type), + dockers: [], + properties: { + ...properties, + name: text && text.value || '', + text, + startPoint, + endPoint, + pointsList, + logicFlowType: type, + }, + key: id, + } +} + +export function toTurboData(data) { + const nodeMap = new Map() + const turboData = { + flowElementList: [], + } + data.nodes.forEach((node) => { + const flowElement = convertNodeToTurboElement(node) + turboData.flowElementList.push(flowElement) + nodeMap.set(node.id, flowElement) + }) + data.edges.forEach((edge) => { + const flowElement = convertEdgeToTurboElement(edge) + const sourceElement = nodeMap.get(edge.sourceNodeId) + sourceElement.outgoing.push(flowElement.key) + const targetElement = nodeMap.get(edge.targetNodeId) + targetElement.incoming.push(flowElement.key) + turboData.flowElementList.push(flowElement) + }) + return turboData +} + + +function convertFlowElementToEdge(element) { + const { incoming, outgoing, properties, key } = element + const { + text, + startPoint, + endPoint, + pointsList, + logicFlowType + } = properties + const edge = { + id: key, + type: logicFlowType, + sourceNodeId: incoming[0], + targetNodeId: outgoing[0], + text, + startPoint, + endPoint, + pointsList, + properties: {} + } + const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType'] + Object.keys(element.properties).forEach(property => { + if (excludeProperties.indexOf(property) === -1) { + edge.properties[property] = element.properties[property] + } + }) + return edge +} + +function convertFlowElementToNode(element) { + const { properties, key } = element + const { x, y, text, logicFlowType } = properties + const node = { + id: key, + type: logicFlowType, + x, + y, + text, + properties: {} + } + const excludeProperties = ['x', 'y', 'text', 'logicFlowType'] + Object.keys(element.properties).forEach(property => { + if (excludeProperties.indexOf(property) === -1) { + node.properties[property] = element.properties[property] + } + }) + return node + +} + +export function toLogicflowData(data) { + const lfData = { + nodes: [], + edges: [], + } + const list = data.flowElementList + list && list.length > 0 && list.forEach(element => { + if (element.type === TurboType.SEQUENCE_FLOW) { + const edge = convertFlowElementToEdge(element) + lfData.edges.push(edge) + } else { + const node = convertFlowElementToNode(element) + lfData.nodes.push(node) + } + }) + return lfData +} \ No newline at end of file diff --git a/src/components/FlowChart/src/background/click.png b/src/components/FlowChart/src/background/click.png new file mode 100644 index 000000000..9679fb5e7 Binary files /dev/null and b/src/components/FlowChart/src/background/click.png differ diff --git a/src/components/FlowChart/src/background/download.png b/src/components/FlowChart/src/background/download.png new file mode 100644 index 000000000..d28cf951e Binary files /dev/null and b/src/components/FlowChart/src/background/download.png differ diff --git a/src/components/FlowChart/src/background/end.png b/src/components/FlowChart/src/background/end.png new file mode 100644 index 000000000..09899692f Binary files /dev/null and b/src/components/FlowChart/src/background/end.png differ diff --git a/src/components/FlowChart/src/background/push.png b/src/components/FlowChart/src/background/push.png new file mode 100644 index 000000000..be493f4d1 Binary files /dev/null and b/src/components/FlowChart/src/background/push.png differ diff --git a/src/components/FlowChart/src/background/start.png b/src/components/FlowChart/src/background/start.png new file mode 100644 index 000000000..b1c3a5014 Binary files /dev/null and b/src/components/FlowChart/src/background/start.png differ diff --git a/src/components/FlowChart/src/background/time.png b/src/components/FlowChart/src/background/time.png new file mode 100644 index 000000000..a88350439 Binary files /dev/null and b/src/components/FlowChart/src/background/time.png differ diff --git a/src/components/FlowChart/src/background/user.png b/src/components/FlowChart/src/background/user.png new file mode 100644 index 000000000..061b8efbc Binary files /dev/null and b/src/components/FlowChart/src/background/user.png differ diff --git a/src/components/FlowChart/src/config.ts b/src/components/FlowChart/src/config.ts new file mode 100644 index 000000000..970be6ebf --- /dev/null +++ b/src/components/FlowChart/src/config.ts @@ -0,0 +1,55 @@ +export const nodeList = [ + { + text: '开始', + type: 'start', + class: 'node-start' + }, + { + text: '矩形', + type: 'rect', + class: 'node-rect' + }, + { + type: 'user', + text: '用户', + class: 'node-user' + }, + { + type: 'push', + text: '推送', + class: 'node-push' + }, + { + type: 'download', + text: '位置', + class: 'node-download' + }, + { + type: 'end', + text: '结束', + class: 'node-end' + }, +] + +export const BpmnNode = [ + { + type: 'bpmn:startEvent', + text: '开始', + class: 'bpmn-start' + }, + { + type: 'bpmn:endEvent', + text: '结束', + class: 'bpmn-end' + }, + { + type: 'bpmn:exclusiveGateway', + text: '网关', + class: 'bpmn-exclusiveGateway' + }, + { + type: 'bpmn:userTask', + text: '用户', + class: 'bpmn-user' + }, +] diff --git a/src/router/index.ts b/src/router/index.ts index 7fd7c040d..bded36e31 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -131,25 +131,24 @@ const routes: Array = [ } }, { - path: '/user', - name: 'user', + path: '/flowChart', + name: 'flowChart', component: Layout, - redirect: '/user/base', + redirect: '/flowChart/index', children: [ { - path: '/user/base', - component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'), + path: '/flowChart/index', + component: () => import(/* webpackChunkName: "user" */ '../views/flow-chart/index.vue'), meta: { - // icon: 'el-icon-user', - title: 'baseinfo', + title: 'flowChart', showLink: false, savedPosition: true } }, ], meta: { - icon: 'el-icon-user', - title: 'usermanagement', + icon: 'el-icon-set-up', + title: 'flowChart', showLink: true, savedPosition: true } @@ -178,6 +177,30 @@ const routes: Array = [ savedPosition: true } }, + { + path: '/user', + name: 'user', + component: Layout, + redirect: '/user/base', + children: [ + { + path: '/user/base', + component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'), + meta: { + // icon: 'el-icon-user', + title: 'baseinfo', + showLink: false, + savedPosition: true + } + }, + ], + meta: { + icon: 'el-icon-user', + title: 'usermanagement', + showLink: true, + savedPosition: true + } + }, { path: '/error', name: 'error', diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue index 18209383f..20e2494a1 100644 --- a/src/views/components/seamless-scroll/index.vue +++ b/src/views/components/seamless-scroll/index.vue @@ -4,10 +4,18 @@ diff --git a/src/views/flow-chart/dataTurbo.json b/src/views/flow-chart/dataTurbo.json new file mode 100644 index 000000000..639a67e6f --- /dev/null +++ b/src/views/flow-chart/dataTurbo.json @@ -0,0 +1,272 @@ +{ + "flowElementList": [ + { + "incoming": [], + "outgoing": [ + "Flow_33inf2k" + ], + "dockers": [], + "type": 2, + "properties": { + "a": "efrwe", + "b": "wewe", + "name": "开始", + "x": 280, + "y": 200, + "text": { + "x": 280, + "y": 200, + "value": "开始" + }, + "logicFlowType": "bpmn:startEvent" + }, + "key": "Event_1d42u4p" + }, + { + "incoming": [ + "Flow_379e0o9" + ], + "outgoing": [], + "dockers": [], + "type": 3, + "properties": { + "a": "efrwe", + "b": "wewe", + "name": "结束", + "x": 920, + "y": 200, + "text": { + "x": 920, + "y": 200, + "value": "结束" + }, + "logicFlowType": "bpmn:endEvent" + }, + "key": "Event_08p8i6q" + }, + { + "incoming": [ + "Flow_0pfouf0" + ], + "outgoing": [ + "Flow_3918lhh" + ], + "dockers": [], + "type": 6, + "properties": { + "a": "efrwe", + "b": "wewe", + "name": "网关", + "x": 580, + "y": 200, + "text": { + "x": 580, + "y": 200, + "value": "网关" + }, + "logicFlowType": "bpmn:exclusiveGateway" + }, + "key": "Gateway_1fngqgj" + }, + { + "incoming": [ + "Flow_33inf2k" + ], + "outgoing": [ + "Flow_0pfouf0" + ], + "dockers": [], + "type": 4, + "properties": { + "a": "efrwe", + "b": "wewe", + "name": "用户", + "x": 420, + "y": 200, + "text": { + "x": 420, + "y": 200, + "value": "用户" + }, + "logicFlowType": "bpmn:userTask" + }, + "key": "Activity_2mgtaia" + }, + { + "incoming": [ + "Flow_3918lhh" + ], + "outgoing": [ + "Flow_379e0o9" + ], + "dockers": [], + "type": 5, + "properties": { + "a": "efrwe", + "b": "wewe", + "name": "服务", + "x": 760, + "y": 200, + "text": { + "x": 760, + "y": 200, + "value": "服务" + }, + "logicFlowType": "bpmn:serviceTask" + }, + "key": "Activity_1sp8qc8" + }, + { + "incoming": [ + "Event_1d42u4p" + ], + "outgoing": [ + "Activity_2mgtaia" + ], + "type": 1, + "dockers": [], + "properties": { + "name": "边", + "text": { + "x": 331, + "y": 200, + "value": "边" + }, + "startPoint": { + "x": 298, + "y": 200 + }, + "endPoint": { + "x": 370, + "y": 200 + }, + "pointsList": [ + { + "x": 298, + "y": 200 + }, + { + "x": 370, + "y": 200 + } + ], + "logicFlowType": "bpmn:sequenceFlow" + }, + "key": "Flow_33inf2k" + }, + { + "incoming": [ + "Activity_2mgtaia" + ], + "outgoing": [ + "Gateway_1fngqgj" + ], + "type": 1, + "dockers": [], + "properties": { + "name": "边2", + "text": { + "x": 507, + "y": 200, + "value": "边2" + }, + "startPoint": { + "x": 470, + "y": 200 + }, + "endPoint": { + "x": 555, + "y": 200 + }, + "pointsList": [ + { + "x": 470, + "y": 200 + }, + { + "x": 555, + "y": 200 + } + ], + "logicFlowType": "bpmn:sequenceFlow" + }, + "key": "Flow_0pfouf0" + }, + { + "incoming": [ + "Gateway_1fngqgj" + ], + "outgoing": [ + "Activity_1sp8qc8" + ], + "type": 1, + "dockers": [], + "properties": { + "name": "边3", + "text": { + "x": 664, + "y": 200, + "value": "边3" + }, + "startPoint": { + "x": 605, + "y": 200 + }, + "endPoint": { + "x": 710, + "y": 200 + }, + "pointsList": [ + { + "x": 605, + "y": 200 + }, + { + "x": 710, + "y": 200 + } + ], + "logicFlowType": "bpmn:sequenceFlow" + }, + "key": "Flow_3918lhh" + }, + { + "incoming": [ + "Activity_1sp8qc8" + ], + "outgoing": [ + "Event_08p8i6q" + ], + "type": 1, + "dockers": [], + "properties": { + "name": "边4", + "text": { + "x": 871, + "y": 200, + "value": "边4" + }, + "startPoint": { + "x": 810, + "y": 200 + }, + "endPoint": { + "x": 902, + "y": 200 + }, + "pointsList": [ + { + "x": 810, + "y": 200 + }, + { + "x": 902, + "y": 200 + } + ], + "logicFlowType": "bpmn:sequenceFlow" + }, + "key": "Flow_379e0o9" + } + ] +} \ No newline at end of file diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue new file mode 100644 index 000000000..398b607b1 --- /dev/null +++ b/src/views/flow-chart/index.vue @@ -0,0 +1,132 @@ + + + +