| 1 |
- {"ast":null,"code":"import _objectSpread from \"/Users/zyh/Desktop/demo001/node_modules/@babel/runtime/helpers/esm/objectSpread2.js\";\nimport \"core-js/modules/es.array.find.js\";\nimport \"core-js/modules/es.array.for-each.js\";\nimport \"core-js/modules/es.array.includes.js\";\nimport \"core-js/modules/es.array.push.js\";\nimport \"core-js/modules/es.function.name.js\";\nimport \"core-js/modules/es.iterator.constructor.js\";\nimport \"core-js/modules/es.iterator.find.js\";\nimport \"core-js/modules/es.iterator.for-each.js\";\nimport \"core-js/modules/es.object.to-string.js\";\nimport \"core-js/modules/es.string.includes.js\";\nimport \"core-js/modules/es.string.starts-with.js\";\nimport \"core-js/modules/web.dom-collections.for-each.js\";\nimport { Graph, Shape, Addon } from '@antv/x6';\nimport { register } from '@antv/x6-vue-shape';\nimport { ElMessage } from 'element-ui';\n\n// 自定义Vue节点组件\nvar FlowNode = {\n template: \"\\n <div :class=\\\"['custom-node', node.type]\\\">\\n <div class=\\\"node-label\\\">{{ node.label }}</div>\\n </div>\\n \",\n props: {\n node: {\n type: Object,\n required: true\n }\n }\n};\n\n// 注册自定义Vue节点\nregister({\n shape: 'flow-node',\n component: FlowNode,\n width: 120,\n height: 60,\n ports: {\n groups: {\n \"in\": {\n position: 'top',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: '#C2C8D5',\n strokeWidth: 1,\n fill: '#fff'\n }\n }\n },\n out: {\n position: 'bottom',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: '#C2C8D5',\n strokeWidth: 1,\n fill: '#fff'\n }\n }\n }\n }\n }\n});\nexport default {\n name: 'X6EmployeeFlow',\n data: function data() {\n return {\n graph: null,\n selectedNode: null,\n flowNodes: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/process/start'\n }, {\n id: 'interview',\n type: 'condition',\n label: '面试',\n x: 400,\n y: 150,\n url: '/interview'\n }, {\n id: 'pass',\n type: 'process',\n label: '发录用通知书',\n x: 600,\n y: 150,\n url: '/offer'\n }, {\n id: 'prepare',\n type: 'process',\n label: '准备入职材料',\n x: 600,\n y: 250,\n url: '/prepare'\n }, {\n id: 'verify',\n type: 'condition',\n label: '材料核实',\n x: 600,\n y: 350,\n url: '/verify'\n }, {\n id: 'onboard',\n type: 'process',\n label: '办理入职',\n x: 600,\n y: 450,\n url: '/onboard'\n }, {\n id: 'reject',\n type: 'process',\n label: '发送拒绝通知',\n x: 200,\n y: 250,\n url: '/reject'\n }, {\n id: 'archive',\n type: 'process',\n label: '归档简历',\n x: 200,\n y: 350,\n url: '/archive'\n }, {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 550,\n url: '/process/end'\n }],\n flowEdges: [{\n source: 'start',\n target: 'interview',\n label: ''\n }, {\n source: 'interview',\n target: 'pass',\n label: '通过'\n }, {\n source: 'interview',\n target: 'reject',\n label: '不通过'\n }, {\n source: 'pass',\n target: 'prepare',\n label: ''\n }, {\n source: 'prepare',\n target: 'verify',\n label: ''\n }, {\n source: 'verify',\n target: 'onboard',\n label: '材料无误'\n }, {\n source: 'reject',\n target: 'archive',\n label: ''\n }, {\n source: 'onboard',\n target: 'end',\n label: ''\n }, {\n source: 'archive',\n target: 'end',\n label: ''\n }]\n };\n },\n mounted: function mounted() {\n this.initGraph();\n },\n beforeDestroy: function beforeDestroy() {\n if (this.graph) {\n this.graph.dispose();\n }\n },\n methods: {\n initGraph: function initGraph() {\n var _this = this;\n // 创建画布\n this.graph = new Graph({\n container: this.$refs.graphContainer,\n width: 800,\n height: 600,\n grid: {\n visible: true,\n type: 'doubleMesh',\n size: 10,\n args: [{\n color: '#E7E8EA',\n thickness: 1\n }, {\n color: '#CBCFD3',\n thickness: 1,\n factor: 4\n }]\n },\n connecting: {\n router: {\n name: 'manhattan',\n args: {\n padding: 20\n }\n },\n connector: {\n name: 'rounded',\n args: {\n radius: 8\n }\n },\n anchor: 'center',\n connectionPoint: 'anchor',\n allowBlank: false,\n snap: {\n radius: 20\n },\n createEdge: function createEdge() {\n return new Shape.Edge({\n attrs: {\n line: {\n stroke: '#409EFF',\n strokeWidth: 2,\n targetMarker: {\n name: 'block',\n width: 12,\n height: 8\n }\n }\n },\n zIndex: 0,\n label: {\n attrs: {\n label: {\n fill: '#409EFF',\n fontSize: 12\n }\n }\n }\n });\n }\n },\n highlighting: {\n magnetAvailable: {\n name: 'stroke',\n args: {\n padding: 3,\n attrs: {\n 'stroke-width': 2,\n stroke: '#409EFF'\n }\n }\n }\n },\n mousewheel: {\n enabled: true,\n zoomAtMousePosition: true,\n modifiers: 'ctrl',\n minScale: 0.5,\n maxScale: 3\n },\n interacting: {\n nodeMovable: true,\n edgeMovable: false,\n edgeLabelMovable: true\n }\n });\n\n // 添加缩放控制\n var scroller = new Addon.Scroller({\n graph: this.graph,\n autoResize: true,\n pageVisible: false,\n pageBreak: false\n });\n\n // 添加小地图\n new Addon.MiniMap({\n graph: this.graph,\n container: document.createElement('div'),\n width: 150,\n height: 100,\n padding: 10\n });\n\n // 渲染节点\n this.renderNodes();\n\n // 渲染连线\n this.renderEdges();\n\n // 节点点击事件\n this.graph.on('node:click', function (_ref) {\n var node = _ref.node;\n var nodeId = node.id;\n var nodeData = _this.flowNodes.find(function (n) {\n return n.id === nodeId;\n });\n if (nodeData) {\n _this.selectedNode = _objectSpread({}, nodeData);\n }\n });\n\n // 画布点击事件，关闭面板\n this.graph.on('blank:click', function () {\n _this.selectedNode = null;\n });\n\n // 自动调整画布大小\n scroller.center();\n },\n renderNodes: function renderNodes() {\n var _this2 = this;\n // 创建节点\n this.flowNodes.forEach(function (node) {\n var fillColor, strokeColor;\n\n // 根据节点类型设置不同样式\n switch (node.type) {\n case 'start':\n case 'end':\n fillColor = '#409EFF';\n strokeColor = '#409EFF';\n break;\n case 'condition':\n fillColor = '#FFF';\n strokeColor = '#E6A23C';\n break;\n case 'process':\n default:\n fillColor = '#FFF';\n strokeColor = '#409EFF';\n break;\n }\n\n // 计算节点宽度根据文本长度\n var width = Math.max(80, node.label.length * 16);\n\n // 创建节点形状\n var nodeShape = node.type === 'condition' ? 'flow-node-diamond' // 条件节点用菱形\n : node.type === 'start' || node.type === 'end' ? 'flow-node-circle' // 开始/结束用圆形\n : 'flow-node-rect'; // 其它用矩形\n\n // 添加节点到画布\n _this2.graph.addNode({\n id: node.id,\n x: node.x - width / 2,\n y: node.y - 30,\n width: node.type === 'condition' ? 80 : width,\n height: node.type === 'condition' ? 80 : 60,\n shape: nodeShape,\n attrs: {\n body: {\n fill: fillColor,\n stroke: strokeColor,\n strokeWidth: 2,\n rx: node.type === 'process' ? 6 : 0,\n ry: node.type === 'process' ? 6 : 0\n },\n label: {\n text: node.label,\n fill: node.type === 'start' || node.type === 'end' ? '#FFF' : '#333',\n fontSize: 14,\n fontWeight: 500\n }\n },\n data: {\n type: node.type,\n url: node.url\n },\n ports: {\n groups: {\n \"in\": {\n position: 'top',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: strokeColor,\n fill: '#FFF'\n }\n }\n },\n out: {\n position: 'bottom',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: strokeColor,\n fill: '#FFF'\n }\n }\n }\n },\n items: [{\n id: \"\".concat(node.id, \"-in\"),\n group: 'in'\n }, {\n id: \"\".concat(node.id, \"-out\"),\n group: 'out'\n }]\n }\n });\n });\n },\n renderEdges: function renderEdges() {\n var _this3 = this;\n // 绘制连线\n this.flowEdges.forEach(function (edge) {\n var _this3$flowNodes$find;\n // 确定连线样式\n var isConditionEdge = ((_this3$flowNodes$find = _this3.flowNodes.find(function (n) {\n return n.id === edge.source;\n })) === null || _this3$flowNodes$find === void 0 ? void 0 : _this3$flowNodes$find.type) === 'condition';\n var strokeColor = isConditionEdge ? '#E6A23C' : '#409EFF';\n var strokeDasharray = edge.label.includes('不通过') ? '5,2' : undefined;\n _this3.graph.addEdge({\n source: {\n cell: edge.source,\n port: \"\".concat(edge.source, \"-out\")\n },\n target: {\n cell: edge.target,\n port: \"\".concat(edge.target, \"-in\")\n },\n label: edge.label,\n attrs: {\n line: {\n stroke: strokeColor,\n strokeWidth: 2,\n targetMarker: {\n name: 'block',\n width: 12,\n height: 8,\n fill: strokeColor\n },\n strokeDasharray: strokeDasharray\n }\n },\n labels: [{\n attrs: {\n text: {\n text: edge.label,\n fill: strokeColor,\n fontSize: 12,\n textAnchor: 'middle',\n textVerticalAnchor: 'middle'\n },\n rect: {\n fill: '#FFF',\n stroke: strokeColor,\n strokeWidth: 0.5,\n rx: 3,\n ry: 3,\n refWidth: '100%',\n refHeight: '100%',\n refX: 0,\n refY: 0\n }\n },\n position: {\n distance: 0.5\n }\n }]\n });\n });\n },\n zoomGraph: function zoomGraph(delta) {\n var zoom = this.graph.zoom();\n if (delta > 0 && zoom < 2 || delta < 0 && zoom > 0.5) {\n this.graph.zoom(delta);\n }\n },\n resetGraph: function resetGraph() {\n this.graph.zoomTo(1);\n this.graph.centerContent();\n },\n openNodeUrl: function openNodeUrl() {\n var _this4 = this;\n if (!this.selectedNode) return;\n var url = this.selectedNode.url;\n if (url) {\n if (url.startsWith('http')) {\n window.open(url, '_blank');\n } else {\n this.$router.push(url)[\"catch\"](function (err) {\n if (err.name !== 'NavigationDuplicated') {\n ElMessage({\n type: 'info',\n message: \"\\u6B63\\u5728\\u8DF3\\u8F6C\\u5230\".concat(_this4.selectedNode.label, \"\\u9875\\u9762...\")\n });\n }\n });\n }\n }\n },\n closePanel: function closePanel() {\n this.selectedNode = null;\n },\n addNewNode: function addNewNode() {\n // 打开节点添加对话框\n this.$confirm('此功能将在完整版中提供节点添加与编辑功能，确认查看设计方案?', '新增节点', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(function () {\n // 显示设计方案信息\n ElMessage({\n type: 'success',\n message: '完整版将支持：1.拖拽添加新节点 2.编辑节点属性 3.保存自定义流程 4.流程模板管理',\n duration: 5000\n });\n })[\"catch\"](function () {});\n }\n }\n};","map":{"version":3,"names":["Graph","Shape","Addon","register","ElMessage","FlowNode","template","props","node","type","Object","required","shape","component","width","height","ports","groups","position","attrs","circle","r","magnet","stroke","strokeWidth","fill","out","name","data","graph","selectedNode","flowNodes","id","label","x","y","url","flowEdges","source","target","mounted","initGraph","beforeDestroy","dispose","methods","_this","container","$refs","graphContainer","grid","visible","size","args","color","thickness","factor","connecting","router","padding","connector","radius","anchor","connectionPoint","allowBlank","snap","createEdge","Edge","line","targetMarker","zIndex","fontSize","highlighting","magnetAvailable","mousewheel","enabled","zoomAtMousePosition","modifiers","minScale","maxScale","interacting","nodeMovable","edgeMovable","edgeLabelMovable","scroller","Scroller","autoResize","pageVisible","pageBreak","MiniMap","document","createElement","renderNodes","renderEdges","on","_ref","nodeId","nodeData","find","n","_objectSpread","center","_this2","forEach","fillColor","strokeColor","Math","max","length","nodeShape","addNode","body","rx","ry","text","fontWeight","items","concat","group","_this3","edge","_this3$flowNodes$find","isConditionEdge","strokeDasharray","includes","undefined","addEdge","cell","port","labels","textAnchor","textVerticalAnchor","rect","refWidth","refHeight","refX","refY","distance","zoomGraph","delta","zoom","resetGraph","zoomTo","centerContent","openNodeUrl","_this4","startsWith","window","open","$router","push","err","message","closePanel","addNewNode","$confirm","confirmButtonText","cancelButtonText","then","duration"],"sources":["src/views/X6EmployeeFlow.vue"],"sourcesContent":["<template>\n <div class=\"x6-flow-container\">\n <div class=\"flow-header\">\n <h2>员工入职流程图 (X6版本)</h2>\n <div class=\"flow-actions\">\n <el-button size=\"small\" type=\"primary\" @click=\"zoomGraph(0.1)\">\n <i class=\"el-icon-zoom-in\"></i>\n </el-button>\n <el-button size=\"small\" type=\"primary\" @click=\"zoomGraph(-0.1)\">\n <i class=\"el-icon-zoom-out\"></i>\n </el-button>\n <el-button size=\"small\" type=\"success\" @click=\"resetGraph\">\n <i class=\"el-icon-refresh\"></i>\n </el-button>\n <el-button size=\"small\" type=\"warning\" @click=\"addNewNode\">\n 新增节点\n </el-button>\n </div>\n </div>\n \n <!-- 图形容器 -->\n <div class=\"graph-container\">\n <div id=\"x6-graph-container\" ref=\"graphContainer\"></div>\n \n <!-- 信息面板 -->\n <div class=\"node-info-panel\" v-if=\"selectedNode\">\n <h3>节点详情</h3>\n <div class=\"info-item\">\n <span class=\"label\">ID:</span>\n <span class=\"value\">{{ selectedNode.id }}</span>\n </div>\n <div class=\"info-item\">\n <span class=\"label\">名称:</span>\n <span class=\"value\">{{ selectedNode.label }}</span>\n </div>\n <div class=\"info-item\">\n <span class=\"label\">类型:</span>\n <span class=\"value\">{{ selectedNode.type }}</span>\n </div>\n <div class=\"info-item\">\n <span class=\"label\">链接:</span>\n <span class=\"value\">{{ selectedNode.url }}</span>\n </div>\n <div class=\"actions\">\n <el-button size=\"small\" type=\"primary\" @click=\"openNodeUrl\">\n 打开链接\n </el-button>\n <el-button size=\"small\" type=\"danger\" @click=\"closePanel\">\n 关闭\n </el-button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { Graph, Shape, Addon } from '@antv/x6'\nimport { register } from '@antv/x6-vue-shape'\nimport { ElMessage } from 'element-ui'\n\n// 自定义Vue节点组件\nconst FlowNode = {\n template: `\n <div :class=\"['custom-node', node.type]\">\n <div class=\"node-label\">{{ node.label }}</div>\n </div>\n `,\n props: {\n node: {\n type: Object,\n required: true\n }\n }\n}\n\n// 注册自定义Vue节点\nregister({\n shape: 'flow-node',\n component: FlowNode,\n width: 120,\n height: 60,\n ports: {\n groups: {\n in: {\n position: 'top',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: '#C2C8D5',\n strokeWidth: 1,\n fill: '#fff'\n }\n }\n },\n out: {\n position: 'bottom',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: '#C2C8D5',\n strokeWidth: 1,\n fill: '#fff'\n }\n }\n }\n }\n }\n})\n\nexport default {\n name: 'X6EmployeeFlow',\n data() {\n return {\n graph: null,\n selectedNode: null,\n flowNodes: [\n { \n id: 'start', \n type: 'start', \n label: '开始', \n x: 400, \n y: 50,\n url: '/process/start'\n },\n { \n id: 'interview', \n type: 'condition', \n label: '面试', \n x: 400, \n y: 150,\n url: '/interview'\n },\n { \n id: 'pass', \n type: 'process', \n label: '发录用通知书', \n x: 600, \n y: 150,\n url: '/offer'\n },\n { \n id: 'prepare', \n type: 'process', \n label: '准备入职材料', \n x: 600, \n y: 250,\n url: '/prepare'\n },\n { \n id: 'verify', \n type: 'condition', \n label: '材料核实', \n x: 600, \n y: 350,\n url: '/verify'\n },\n { \n id: 'onboard', \n type: 'process', \n label: '办理入职', \n x: 600, \n y: 450,\n url: '/onboard'\n },\n { \n id: 'reject', \n type: 'process', \n label: '发送拒绝通知', \n x: 200, \n y: 250,\n url: '/reject'\n },\n { \n id: 'archive', \n type: 'process', \n label: '归档简历', \n x: 200, \n y: 350,\n url: '/archive'\n },\n { \n id: 'end', \n type: 'end', \n label: '结束', \n x: 400, \n y: 550,\n url: '/process/end'\n }\n ],\n flowEdges: [\n { source: 'start', target: 'interview', label: '' },\n { source: 'interview', target: 'pass', label: '通过' },\n { source: 'interview', target: 'reject', label: '不通过' },\n { source: 'pass', target: 'prepare', label: '' },\n { source: 'prepare', target: 'verify', label: '' },\n { source: 'verify', target: 'onboard', label: '材料无误' },\n { source: 'reject', target: 'archive', label: '' },\n { source: 'onboard', target: 'end', label: '' },\n { source: 'archive', target: 'end', label: '' }\n ]\n }\n },\n mounted() {\n this.initGraph()\n },\n beforeDestroy() {\n if (this.graph) {\n this.graph.dispose()\n }\n },\n methods: {\n initGraph() {\n // 创建画布\n this.graph = new Graph({\n container: this.$refs.graphContainer,\n width: 800,\n height: 600,\n grid: {\n visible: true,\n type: 'doubleMesh',\n size: 10,\n args: [\n {\n color: '#E7E8EA',\n thickness: 1\n },\n {\n color: '#CBCFD3',\n thickness: 1,\n factor: 4\n }\n ]\n },\n connecting: {\n router: {\n name: 'manhattan',\n args: {\n padding: 20\n }\n },\n connector: {\n name: 'rounded',\n args: {\n radius: 8\n }\n },\n anchor: 'center',\n connectionPoint: 'anchor',\n allowBlank: false,\n snap: {\n radius: 20\n },\n createEdge() {\n return new Shape.Edge({\n attrs: {\n line: {\n stroke: '#409EFF',\n strokeWidth: 2,\n targetMarker: {\n name: 'block',\n width: 12,\n height: 8\n }\n }\n },\n zIndex: 0,\n label: {\n attrs: {\n label: {\n fill: '#409EFF',\n fontSize: 12\n }\n }\n }\n })\n }\n },\n highlighting: {\n magnetAvailable: {\n name: 'stroke',\n args: {\n padding: 3,\n attrs: {\n 'stroke-width': 2,\n stroke: '#409EFF'\n }\n }\n }\n },\n mousewheel: {\n enabled: true,\n zoomAtMousePosition: true,\n modifiers: 'ctrl',\n minScale: 0.5,\n maxScale: 3\n },\n interacting: {\n nodeMovable: true,\n edgeMovable: false,\n edgeLabelMovable: true\n }\n })\n\n // 添加缩放控制\n const scroller = new Addon.Scroller({\n graph: this.graph,\n autoResize: true,\n pageVisible: false,\n pageBreak: false\n })\n\n // 添加小地图\n new Addon.MiniMap({\n graph: this.graph,\n container: document.createElement('div'),\n width: 150,\n height: 100,\n padding: 10\n })\n\n // 渲染节点\n this.renderNodes()\n \n // 渲染连线\n this.renderEdges()\n \n // 节点点击事件\n this.graph.on('node:click', ({ node }) => {\n const nodeId = node.id\n const nodeData = this.flowNodes.find(n => n.id === nodeId)\n if (nodeData) {\n this.selectedNode = { ...nodeData }\n }\n })\n \n // 画布点击事件，关闭面板\n this.graph.on('blank:click', () => {\n this.selectedNode = null\n })\n\n // 自动调整画布大小\n scroller.center()\n },\n \n renderNodes() {\n // 创建节点\n this.flowNodes.forEach(node => {\n let fillColor, strokeColor\n \n // 根据节点类型设置不同样式\n switch (node.type) {\n case 'start':\n case 'end':\n fillColor = '#409EFF'\n strokeColor = '#409EFF'\n break\n case 'condition':\n fillColor = '#FFF'\n strokeColor = '#E6A23C'\n break\n case 'process':\n default:\n fillColor = '#FFF'\n strokeColor = '#409EFF'\n break\n }\n \n // 计算节点宽度根据文本长度\n let width = Math.max(80, node.label.length * 16)\n \n // 创建节点形状\n const nodeShape = node.type === 'condition'\n ? 'flow-node-diamond' // 条件节点用菱形\n : (node.type === 'start' || node.type === 'end')\n ? 'flow-node-circle' // 开始/结束用圆形\n : 'flow-node-rect' // 其它用矩形\n \n // 添加节点到画布\n this.graph.addNode({\n id: node.id,\n x: node.x - width / 2,\n y: node.y - 30,\n width: node.type === 'condition' ? 80 : width,\n height: node.type === 'condition' ? 80 : 60,\n shape: nodeShape,\n attrs: {\n body: {\n fill: fillColor,\n stroke: strokeColor,\n strokeWidth: 2,\n rx: node.type === 'process' ? 6 : 0,\n ry: node.type === 'process' ? 6 : 0\n },\n label: {\n text: node.label,\n fill: node.type === 'start' || node.type === 'end' ? '#FFF' : '#333',\n fontSize: 14,\n fontWeight: 500\n }\n },\n data: {\n type: node.type,\n url: node.url\n },\n ports: {\n groups: {\n in: {\n position: 'top',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: strokeColor,\n fill: '#FFF'\n }\n }\n },\n out: {\n position: 'bottom',\n attrs: {\n circle: {\n r: 4,\n magnet: true,\n stroke: strokeColor,\n fill: '#FFF'\n }\n }\n }\n },\n items: [\n { id: `${node.id}-in`, group: 'in' },\n { id: `${node.id}-out`, group: 'out' }\n ]\n }\n })\n })\n },\n \n renderEdges() {\n // 绘制连线\n this.flowEdges.forEach(edge => {\n // 确定连线样式\n const isConditionEdge = this.flowNodes.find(n => n.id === edge.source)?.type === 'condition'\n const strokeColor = isConditionEdge ? '#E6A23C' : '#409EFF'\n const strokeDasharray = edge.label.includes('不通过') ? '5,2' : undefined\n \n this.graph.addEdge({\n source: { cell: edge.source, port: `${edge.source}-out` },\n target: { cell: edge.target, port: `${edge.target}-in` },\n label: edge.label,\n attrs: {\n line: {\n stroke: strokeColor,\n strokeWidth: 2,\n targetMarker: {\n name: 'block',\n width: 12,\n height: 8,\n fill: strokeColor\n },\n strokeDasharray\n }\n },\n labels: [\n {\n attrs: {\n text: {\n text: edge.label,\n fill: strokeColor,\n fontSize: 12,\n textAnchor: 'middle',\n textVerticalAnchor: 'middle'\n },\n rect: {\n fill: '#FFF',\n stroke: strokeColor,\n strokeWidth: 0.5,\n rx: 3,\n ry: 3,\n refWidth: '100%',\n refHeight: '100%',\n refX: 0,\n refY: 0\n }\n },\n position: {\n distance: 0.5\n }\n }\n ]\n })\n })\n },\n \n zoomGraph(delta) {\n const zoom = this.graph.zoom()\n if ((delta > 0 && zoom < 2) || (delta < 0 && zoom > 0.5)) {\n this.graph.zoom(delta)\n }\n },\n \n resetGraph() {\n this.graph.zoomTo(1)\n this.graph.centerContent()\n },\n \n openNodeUrl() {\n if (!this.selectedNode) return\n \n const url = this.selectedNode.url\n if (url) {\n if (url.startsWith('http')) {\n window.open(url, '_blank')\n } else {\n this.$router.push(url).catch(err => {\n if (err.name !== 'NavigationDuplicated') {\n ElMessage({\n type: 'info',\n message: `正在跳转到${this.selectedNode.label}页面...`\n })\n }\n })\n }\n }\n },\n \n closePanel() {\n this.selectedNode = null\n },\n \n addNewNode() {\n // 打开节点添加对话框\n this.$confirm('此功能将在完整版中提供节点添加与编辑功能，确认查看设计方案?', '新增节点', {\n confirmButtonText: '确定',\n cancelButtonText: '取消',\n type: 'warning'\n }).then(() => {\n // 显示设计方案信息\n ElMessage({\n type: 'success',\n message: '完整版将支持：1.拖拽添加新节点 2.编辑节点属性 3.保存自定义流程 4.流程模板管理',\n duration: 5000\n })\n }).catch(() => {})\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.x6-flow-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: #f7f9fc;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n}\n\n.flow-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 10px;\n border-bottom: 1px solid #ebeef5;\n \n h2 {\n margin: 0;\n color: #2c3e50;\n font-size: 22px;\n font-weight: 600;\n }\n \n .flow-actions {\n display: flex;\n gap: 10px;\n }\n}\n\n.graph-container {\n position: relative;\n flex: 1;\n min-height: 600px;\n border: 1px solid #ebeef5;\n border-radius: 4px;\n background-color: #fff;\n overflow: hidden;\n}\n\n#x6-graph-container {\n width: 100%;\n height: 100%;\n}\n\n// 自定义节点样式\n:global(.flow-node-rect) {\n &:hover {\n filter: drop-shadow(0px 4px 10px rgba(64, 158, 255, 0.3));\n }\n}\n\n:global(.flow-node-diamond) {\n &:hover {\n filter: drop-shadow(0px 4px 10px rgba(230, 162, 60, 0.3));\n }\n}\n\n:global(.flow-node-circle) {\n &:hover {\n filter: drop-shadow(0px 4px 10px rgba(64, 158, 255, 0.4));\n }\n}\n\n// 节点信息面板\n.node-info-panel {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 250px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);\n padding: 15px;\n z-index: 100;\n \n h3 {\n margin-top: 0;\n margin-bottom: 15px;\n font-size: 16px;\n color: #2c3e50;\n border-bottom: 1px solid #ebeef5;\n padding-bottom: 10px;\n }\n \n .info-item {\n display: flex;\n margin-bottom: 10px;\n \n .label {\n width: 60px;\n color: #606266;\n font-weight: 600;\n }\n \n .value {\n flex: 1;\n color: #303133;\n word-break: break-all;\n }\n }\n \n .actions {\n display: flex;\n justify-content: flex-end;\n margin-top: 15px;\n gap: 10px;\n }\n}\n\n// 响应式布局\n@media screen and (max-width: 768px) {\n .x6-flow-container {\n padding: 10px;\n }\n \n .flow-header {\n flex-direction: column;\n align-items: flex-start;\n \n h2 {\n margin-bottom: 10px;\n font-size: 18px;\n }\n }\n \n .node-info-panel {\n width: calc(100% - 40px);\n top: auto;\n bottom: 20px;\n }\n}\n\n// 自定义Vue节点组件样式\n.custom-node {\n width: 100%;\n height: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n \n &.start, &.end {\n background-color: #409EFF;\n color: #fff;\n border-radius: 30px;\n }\n \n &.condition {\n background-color: #fff;\n border: 2px solid #E6A23C;\n color: #E6A23C;\n transform: rotate(45deg);\n \n .node-label {\n transform: rotate(-45deg);\n }\n }\n \n &.process {\n background-color: #fff;\n border: 2px solid #409EFF;\n color: #303133;\n }\n \n .node-label {\n font-size: 14px;\n font-weight: 500;\n text-align: center;\n padding: 0 6px;\n }\n}\n</style> "],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
