| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.filter.js\";\nimport \"core-js/modules/es.array.find.js\";\nimport \"core-js/modules/es.array.for-each.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.starts-with.js\";\nimport \"core-js/modules/web.dom-collections.for-each.js\";\nimport \"core-js/modules/web.timers.js\";\nimport jsPlumb from 'jsplumb';\nexport default {\n name: 'ProcessFlow',\n data: function data() {\n return {\n processTypes: {\n employee: {\n title: '员工入职业务流程',\n description: '本流程规范了新员工从招聘到入职的完整过程，确保人才招聘和入职流程的规范化和标准化。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 7,\n completedSteps: 4,\n avgDuration: '15天'\n },\n sales: {\n title: '销售订单业务流程',\n description: '规范销售订单从创建到完成的全过程，包括报价、合同签订、订单处理等环节，提高销售效率和客户满意度。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 6,\n completedSteps: 3,\n avgDuration: '3天'\n },\n shipping: {\n title: '发货业务流程',\n description: '管理产品从仓库出库到送达客户的完整过程，包括库存检查、包装、物流等环节，确保准确及时交付。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 5,\n completedSteps: 4,\n avgDuration: '2天'\n }\n },\n processNodes: {\n employee: [{\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 sales: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/sales/start'\n }, {\n id: 'inquiry',\n type: 'process',\n label: '客户询价',\n x: 400,\n y: 150,\n url: '/sales/inquiry'\n }, {\n id: 'quote',\n type: 'process',\n label: '报价审核',\n x: 400,\n y: 250,\n url: '/sales/quote'\n }, {\n id: 'negotiate',\n type: 'condition',\n label: '价格协商',\n x: 400,\n y: 350,\n url: '/sales/negotiate'\n }, {\n id: 'reject',\n type: 'process',\n label: '结束谈判',\n x: 200,\n y: 450,\n url: '/sales/reject'\n }, {\n id: 'contract',\n type: 'process',\n label: '合同签订',\n x: 600,\n y: 450,\n url: '/sales/contract'\n }, {\n id: 'payment',\n type: 'condition',\n label: '付款确认',\n x: 600,\n y: 550,\n url: '/sales/payment'\n }, {\n id: 'order',\n type: 'process',\n label: '生成订单',\n x: 600,\n y: 650,\n url: '/sales/order'\n }, {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 750,\n url: '/sales/end'\n }],\n shipping: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/shipping/start'\n }, {\n id: 'stock',\n type: 'condition',\n label: '库存确认',\n x: 400,\n y: 150,\n url: '/shipping/stock'\n }, {\n id: 'purchase',\n type: 'process',\n label: '采购补货',\n x: 200,\n y: 250,\n url: '/shipping/purchase'\n }, {\n id: 'prepare',\n type: 'process',\n label: '备货打包',\n x: 600,\n y: 250,\n url: '/shipping/prepare'\n }, {\n id: 'quality',\n type: 'condition',\n label: '质检',\n x: 600,\n y: 350,\n url: '/shipping/quality'\n }, {\n id: 'rework',\n type: 'process',\n label: '返工处理',\n x: 400,\n y: 350,\n url: '/shipping/rework'\n }, {\n id: 'delivery',\n type: 'process',\n label: '发货配送',\n x: 600,\n y: 450,\n url: '/shipping/delivery'\n }, {\n id: 'confirm',\n type: 'condition',\n label: '签收确认',\n x: 600,\n y: 550,\n url: '/shipping/confirm'\n }, {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 650,\n url: '/shipping/end'\n }]\n },\n processConnections: {\n employee: [{\n source: 'start',\n target: 'interview'\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 }, {\n source: 'prepare',\n target: 'verify'\n }, {\n source: 'verify',\n target: 'onboard',\n label: '完整'\n }, {\n source: 'verify',\n target: 'prepare',\n label: '需补充'\n }, {\n source: 'reject',\n target: 'archive'\n }, {\n source: 'onboard',\n target: 'end'\n }, {\n source: 'archive',\n target: 'end'\n }],\n sales: [{\n source: 'start',\n target: 'inquiry'\n }, {\n source: 'inquiry',\n target: 'quote'\n }, {\n source: 'quote',\n target: 'negotiate'\n }, {\n source: 'negotiate',\n target: 'reject',\n label: '不通过'\n }, {\n source: 'negotiate',\n target: 'contract',\n label: '通过'\n }, {\n source: 'contract',\n target: 'payment'\n }, {\n source: 'payment',\n target: 'order',\n label: '已付款'\n }, {\n source: 'payment',\n target: 'negotiate',\n label: '未付款'\n }, {\n source: 'order',\n target: 'end'\n }, {\n source: 'reject',\n target: 'end'\n }],\n shipping: [{\n source: 'start',\n target: 'stock'\n }, {\n source: 'stock',\n target: 'purchase',\n label: '不足'\n }, {\n source: 'stock',\n target: 'prepare',\n label: '充足'\n }, {\n source: 'purchase',\n target: 'prepare'\n }, {\n source: 'prepare',\n target: 'quality'\n }, {\n source: 'quality',\n target: 'rework',\n label: '不通过'\n }, {\n source: 'quality',\n target: 'delivery',\n label: '通过'\n }, {\n source: 'rework',\n target: 'quality'\n }, {\n source: 'delivery',\n target: 'confirm'\n }, {\n source: 'confirm',\n target: 'end',\n label: '确认'\n }, {\n source: 'confirm',\n target: 'delivery',\n label: '异常'\n }]\n },\n jsPlumbInstance: null\n };\n },\n computed: {\n currentProcess: function currentProcess() {\n var processType = this.$route.params.type || 'employee';\n return this.processTypes[processType];\n },\n nodes: function nodes() {\n var processType = this.$route.params.type || 'employee';\n return this.processNodes[processType];\n },\n connections: function connections() {\n var processType = this.$route.params.type || 'employee';\n return this.processConnections[processType];\n }\n },\n methods: {\n handleNodeClick: function handleNodeClick(nodeId) {\n var _this = this;\n var node = this.nodes.find(function (n) {\n return n.id === nodeId;\n });\n if (node && node.url) {\n if (node.url.startsWith('http')) {\n window.open(node.url, '_blank');\n } else {\n this.$router.push(node.url)[\"catch\"](function (err) {\n if (err.name !== 'NavigationDuplicated') {\n _this.$message({\n type: 'info',\n message: \"\\u6B63\\u5728\\u8DF3\\u8F6C\\u5230\".concat(node.label, \"\\u9875\\u9762...\")\n });\n }\n });\n }\n }\n },\n nodeStyle: function nodeStyle(node) {\n return {\n left: node.x + 'px',\n top: node.y + 'px'\n };\n },\n destroyJsPlumb: function destroyJsPlumb() {\n if (this.jsPlumbInstance) {\n this.jsPlumbInstance.deleteEveryConnection();\n this.jsPlumbInstance.deleteEveryEndpoint();\n this.jsPlumbInstance.destroy();\n this.jsPlumbInstance = null;\n }\n },\n initJsPlumb: function initJsPlumb() {\n // 确保先销毁旧实例\n this.destroyJsPlumb();\n\n // 创建新实例\n this.jsPlumbInstance = jsPlumb.jsPlumb.getInstance({\n Container: this.$refs.processFlow,\n Connector: ['Flowchart', {\n cornerRadius: 8,\n stub: 50,\n midpoint: 0.7,\n gap: 10,\n alwaysRespectStubs: true\n }],\n Endpoint: ['Dot', {\n radius: 6\n }],\n Anchor: [['Left', 'Right', 'Top'], ['Left', 'Right', 'Bottom']],\n PaintStyle: {\n strokeWidth: 3,\n stroke: '#409EFF',\n outlineWidth: 1,\n outlineStroke: '#ddd'\n },\n EndpointStyle: {\n fill: '#409EFF',\n stroke: '#fff',\n strokeWidth: 2,\n radius: 5\n },\n HoverPaintStyle: {\n stroke: '#67C23A',\n strokeWidth: 3\n }\n });\n\n // 初始化节点和连接\n this.initNodes();\n this.initConnections();\n },\n initNodes: function initNodes() {\n var _this2 = this;\n // 为每个节点添加端点\n this.nodes.forEach(function (node) {\n var element = document.getElementById(node.id);\n if (element) {\n _this2.jsPlumbInstance.makeSource(element, {\n filter: '.flow-node',\n anchor: ['Left', 'Right', 'Top'],\n maxConnections: -1\n });\n _this2.jsPlumbInstance.makeTarget(element, {\n filter: '.flow-node',\n anchor: ['Left', 'Right', 'Bottom'],\n maxConnections: -1\n });\n }\n });\n },\n initConnections: function initConnections() {\n var _this3 = this;\n // 添加连接\n this.connections.forEach(function (conn) {\n var connection = _this3.jsPlumbInstance.connect({\n source: conn.source,\n target: conn.target,\n detachable: false,\n overlays: [['Arrow', {\n location: 1\n }], conn.label ? ['Label', {\n label: conn.label,\n location: 0.5,\n cssClass: 'connection-label',\n events: {\n click: function click() {\n _this3.$message.info(conn.label || '流程连接');\n }\n }\n }] : null].filter(Boolean)\n });\n\n // 特别处理付款确认到价格协商的返回连接\n if (conn.source === 'payment' && conn.target === 'negotiate') {\n connection.setConnector(['Flowchart', {\n stub: [50, 50],\n cornerRadius: 8,\n alwaysRespectStubs: true\n }]);\n }\n });\n }\n },\n watch: {\n '$route.params.type': {\n handler: function handler() {\n var _this4 = this;\n // 等待 DOM 更新后重新初始化\n this.$nextTick(function () {\n setTimeout(function () {\n _this4.initJsPlumb();\n }, 100);\n });\n }\n }\n },\n mounted: function mounted() {\n var _this5 = this;\n // 等待 DOM 完全渲染后再初始化 jsPlumb\n setTimeout(function () {\n _this5.initJsPlumb();\n }, 500);\n },\n beforeDestroy: function beforeDestroy() {\n this.destroyJsPlumb();\n }\n};","map":{"version":3,"names":["jsPlumb","name","data","processTypes","employee","title","description","status","statusType","totalSteps","completedSteps","avgDuration","sales","shipping","processNodes","id","type","label","x","y","url","processConnections","source","target","jsPlumbInstance","computed","currentProcess","processType","$route","params","nodes","connections","methods","handleNodeClick","nodeId","_this","node","find","n","startsWith","window","open","$router","push","err","$message","message","concat","nodeStyle","left","top","destroyJsPlumb","deleteEveryConnection","deleteEveryEndpoint","destroy","initJsPlumb","getInstance","Container","$refs","processFlow","Connector","cornerRadius","stub","midpoint","gap","alwaysRespectStubs","Endpoint","radius","Anchor","PaintStyle","strokeWidth","stroke","outlineWidth","outlineStroke","EndpointStyle","fill","HoverPaintStyle","initNodes","initConnections","_this2","forEach","element","document","getElementById","makeSource","filter","anchor","maxConnections","makeTarget","_this3","conn","connection","connect","detachable","overlays","location","cssClass","events","click","info","Boolean","setConnector","watch","handler","_this4","$nextTick","setTimeout","mounted","_this5","beforeDestroy"],"sources":["src/views/EmployeeProcess.vue"],"sourcesContent":["<template>\n <div class=\"process-container\">\n <el-card class=\"process-intro\">\n <div class=\"intro-header\">\n <h2>{{ currentProcess.title }}</h2>\n <el-tag size=\"medium\" :type=\"currentProcess.statusType\">{{ currentProcess.status }}</el-tag>\n </div>\n <div class=\"intro-content\">\n <div class=\"intro-description\">\n <p>{{ currentProcess.description }}</p>\n </div>\n <div class=\"intro-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ currentProcess.totalSteps }}</div>\n <div class=\"stat-label\">总步骤</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ currentProcess.completedSteps }}</div>\n <div class=\"stat-label\">已完成</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">{{ currentProcess.avgDuration }}</div>\n <div class=\"stat-label\">平均耗时</div>\n </div>\n </div>\n </div>\n </el-card>\n\n <div class=\"process-flow\" ref=\"processFlow\">\n <div \n v-for=\"node in nodes\" \n :key=\"node.id\" \n :id=\"node.id\" \n :class=\"['flow-node', node.type]\" \n :style=\"nodeStyle(node)\"\n @click=\"handleNodeClick(node.id)\"\n >\n <span class=\"node-label\">{{ node.label }}</span>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport jsPlumb from 'jsplumb'\n\nexport default {\n name: 'ProcessFlow',\n data() {\n return {\n processTypes: {\n employee: {\n title: '员工入职业务流程',\n description: '本流程规范了新员工从招聘到入职的完整过程，确保人才招聘和入职流程的规范化和标准化。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 7,\n completedSteps: 4,\n avgDuration: '15天',\n },\n sales: {\n title: '销售订单业务流程',\n description: '规范销售订单从创建到完成的全过程，包括报价、合同签订、订单处理等环节，提高销售效率和客户满意度。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 6,\n completedSteps: 3,\n avgDuration: '3天',\n },\n shipping: {\n title: '发货业务流程',\n description: '管理产品从仓库出库到送达客户的完整过程，包括库存检查、包装、物流等环节，确保准确及时交付。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 5,\n completedSteps: 4,\n avgDuration: '2天',\n }\n },\n processNodes: {\n employee: [\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 sales: [\n {\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/sales/start'\n },\n {\n id: 'inquiry',\n type: 'process',\n label: '客户询价',\n x: 400,\n y: 150,\n url: '/sales/inquiry'\n },\n {\n id: 'quote',\n type: 'process',\n label: '报价审核',\n x: 400,\n y: 250,\n url: '/sales/quote'\n },\n {\n id: 'negotiate',\n type: 'condition',\n label: '价格协商',\n x: 400,\n y: 350,\n url: '/sales/negotiate'\n },\n {\n id: 'reject',\n type: 'process',\n label: '结束谈判',\n x: 200,\n y: 450,\n url: '/sales/reject'\n },\n {\n id: 'contract',\n type: 'process',\n label: '合同签订',\n x: 600,\n y: 450,\n url: '/sales/contract'\n },\n {\n id: 'payment',\n type: 'condition',\n label: '付款确认',\n x: 600,\n y: 550,\n url: '/sales/payment'\n },\n {\n id: 'order',\n type: 'process',\n label: '生成订单',\n x: 600,\n y: 650,\n url: '/sales/order'\n },\n {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 750,\n url: '/sales/end'\n }\n ],\n shipping: [\n {\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/shipping/start'\n },\n {\n id: 'stock',\n type: 'condition',\n label: '库存确认',\n x: 400,\n y: 150,\n url: '/shipping/stock'\n },\n {\n id: 'purchase',\n type: 'process',\n label: '采购补货',\n x: 200,\n y: 250,\n url: '/shipping/purchase'\n },\n {\n id: 'prepare',\n type: 'process',\n label: '备货打包',\n x: 600,\n y: 250,\n url: '/shipping/prepare'\n },\n {\n id: 'quality',\n type: 'condition',\n label: '质检',\n x: 600,\n y: 350,\n url: '/shipping/quality'\n },\n {\n id: 'rework',\n type: 'process',\n label: '返工处理',\n x: 400,\n y: 350,\n url: '/shipping/rework'\n },\n {\n id: 'delivery',\n type: 'process',\n label: '发货配送',\n x: 600,\n y: 450,\n url: '/shipping/delivery'\n },\n {\n id: 'confirm',\n type: 'condition',\n label: '签收确认',\n x: 600,\n y: 550,\n url: '/shipping/confirm'\n },\n {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 650,\n url: '/shipping/end'\n }\n ]\n },\n processConnections: {\n employee: [\n { source: 'start', target: 'interview' },\n { source: 'interview', target: 'pass', label: '通过' },\n { source: 'interview', target: 'reject', label: '不通过' },\n { source: 'pass', target: 'prepare' },\n { source: 'prepare', target: 'verify' },\n { source: 'verify', target: 'onboard', label: '完整' },\n { source: 'verify', target: 'prepare', label: '需补充' },\n { source: 'reject', target: 'archive' },\n { source: 'onboard', target: 'end' },\n { source: 'archive', target: 'end' }\n ],\n sales: [\n { source: 'start', target: 'inquiry' },\n { source: 'inquiry', target: 'quote' },\n { source: 'quote', target: 'negotiate' },\n { source: 'negotiate', target: 'reject', label: '不通过' },\n { source: 'negotiate', target: 'contract', label: '通过' },\n { source: 'contract', target: 'payment' },\n { source: 'payment', target: 'order', label: '已付款' },\n { source: 'payment', target: 'negotiate', label: '未付款' },\n { source: 'order', target: 'end' },\n { source: 'reject', target: 'end' }\n ],\n shipping: [\n { source: 'start', target: 'stock' },\n { source: 'stock', target: 'purchase', label: '不足' },\n { source: 'stock', target: 'prepare', label: '充足' },\n { source: 'purchase', target: 'prepare' },\n { source: 'prepare', target: 'quality' },\n { source: 'quality', target: 'rework', label: '不通过' },\n { source: 'quality', target: 'delivery', label: '通过' },\n { source: 'rework', target: 'quality' },\n { source: 'delivery', target: 'confirm' },\n { source: 'confirm', target: 'end', label: '确认' },\n { source: 'confirm', target: 'delivery', label: '异常' }\n ]\n },\n jsPlumbInstance: null\n }\n },\n computed: {\n currentProcess() {\n const processType = this.$route.params.type || 'employee'\n return this.processTypes[processType]\n },\n nodes() {\n const processType = this.$route.params.type || 'employee'\n return this.processNodes[processType]\n },\n connections() {\n const processType = this.$route.params.type || 'employee'\n return this.processConnections[processType]\n }\n },\n methods: {\n handleNodeClick(nodeId) {\n const node = this.nodes.find(n => n.id === nodeId)\n if (node && node.url) {\n if (node.url.startsWith('http')) {\n window.open(node.url, '_blank')\n } else {\n this.$router.push(node.url).catch(err => {\n if (err.name !== 'NavigationDuplicated') {\n this.$message({\n type: 'info',\n message: `正在跳转到${node.label}页面...`\n })\n }\n })\n }\n }\n },\n nodeStyle(node) {\n return {\n left: node.x + 'px',\n top: node.y + 'px'\n }\n },\n destroyJsPlumb() {\n if (this.jsPlumbInstance) {\n this.jsPlumbInstance.deleteEveryConnection()\n this.jsPlumbInstance.deleteEveryEndpoint()\n this.jsPlumbInstance.destroy()\n this.jsPlumbInstance = null\n }\n },\n initJsPlumb() {\n // 确保先销毁旧实例\n this.destroyJsPlumb()\n\n // 创建新实例\n this.jsPlumbInstance = jsPlumb.jsPlumb.getInstance({\n Container: this.$refs.processFlow,\n Connector: ['Flowchart', { \n cornerRadius: 8, \n stub: 50, \n midpoint: 0.7,\n gap: 10,\n alwaysRespectStubs: true\n }],\n Endpoint: ['Dot', { radius: 6 }],\n Anchor: [\n ['Left', 'Right', 'Top'],\n ['Left', 'Right', 'Bottom']\n ],\n PaintStyle: {\n strokeWidth: 3,\n stroke: '#409EFF',\n outlineWidth: 1,\n outlineStroke: '#ddd'\n },\n EndpointStyle: { \n fill: '#409EFF',\n stroke: '#fff',\n strokeWidth: 2,\n radius: 5\n },\n HoverPaintStyle: {\n stroke: '#67C23A',\n strokeWidth: 3\n }\n })\n\n // 初始化节点和连接\n this.initNodes()\n this.initConnections()\n },\n initNodes() {\n // 为每个节点添加端点\n this.nodes.forEach(node => {\n const element = document.getElementById(node.id)\n if (element) {\n this.jsPlumbInstance.makeSource(element, {\n filter: '.flow-node',\n anchor: ['Left', 'Right', 'Top'],\n maxConnections: -1\n })\n this.jsPlumbInstance.makeTarget(element, {\n filter: '.flow-node',\n anchor: ['Left', 'Right', 'Bottom'],\n maxConnections: -1\n })\n }\n })\n },\n initConnections() {\n // 添加连接\n this.connections.forEach(conn => {\n const connection = this.jsPlumbInstance.connect({\n source: conn.source,\n target: conn.target,\n detachable: false,\n overlays: [\n ['Arrow', { location: 1 }],\n conn.label ? ['Label', { \n label: conn.label, \n location: 0.5, \n cssClass: 'connection-label',\n events: {\n click: () => {\n this.$message.info(conn.label || '流程连接')\n }\n }\n }] : null\n ].filter(Boolean)\n })\n\n // 特别处理付款确认到价格协商的返回连接\n if (conn.source === 'payment' && conn.target === 'negotiate') {\n connection.setConnector(['Flowchart', { \n stub: [50, 50],\n cornerRadius: 8,\n alwaysRespectStubs: true\n }])\n }\n })\n }\n },\n watch: {\n '$route.params.type': {\n handler() {\n // 等待 DOM 更新后重新初始化\n this.$nextTick(() => {\n setTimeout(() => {\n this.initJsPlumb()\n }, 100)\n })\n }\n }\n },\n mounted() {\n // 等待 DOM 完全渲染后再初始化 jsPlumb\n setTimeout(() => {\n this.initJsPlumb()\n }, 500)\n },\n beforeDestroy() {\n this.destroyJsPlumb()\n }\n}\n</script>\n\n<style scoped>\n.process-container {\n padding: 20px;\n background: #f8f9fa;\n min-height: 100vh;\n}\n\n.process-intro {\n margin-bottom: 30px;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n border: none;\n}\n\n.intro-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #ebeef5;\n}\n\n.intro-header h2 {\n margin: 0;\n font-size: 22px;\n color: #2c3e50;\n font-weight: 600;\n}\n\n.intro-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.intro-description {\n flex: 1;\n padding-right: 40px;\n}\n\n.intro-description p {\n margin: 0;\n color: #5c6b77;\n line-height: 1.8;\n font-size: 15px;\n}\n\n.intro-stats {\n display: flex;\n gap: 40px;\n padding: 20px;\n background: #f8fafc;\n border-radius: 8px;\n}\n\n.stat-item {\n text-align: center;\n padding: 0 20px;\n position: relative;\n}\n\n.stat-item:not(:last-child)::after {\n content: '';\n position: absolute;\n right: -20px;\n top: 50%;\n transform: translateY(-50%);\n height: 70%;\n width: 1px;\n background: #e0e6ed;\n}\n\n.stat-value {\n font-size: 28px;\n font-weight: 600;\n color: #409EFF;\n margin-bottom: 8px;\n line-height: 1;\n}\n\n.stat-label {\n font-size: 14px;\n color: #8492a6;\n}\n\n.process-flow {\n margin: 40px 0;\n padding: 40px;\n position: relative;\n height: 600px;\n min-width: 800px;\n overflow: visible;\n}\n\n/* 流程图节点样式 */\n.flow-node {\n position: absolute;\n min-width: 120px;\n padding: 15px 25px;\n text-align: center;\n background: #fff;\n border: 2px solid #409EFF;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 10;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n}\n\n.flow-node:hover {\n box-shadow: 0 8px 16px rgba(64, 158, 255, 0.2);\n transform: translateY(-4px);\n}\n\n.flow-node.start,\n.flow-node.end {\n background: linear-gradient(135deg, #409EFF, #3a8ee6);\n color: #fff;\n border-radius: 25px;\n min-width: 100px;\n border: none;\n font-weight: 500;\n box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);\n}\n\n.flow-node.condition {\n border-color: #E6A23C;\n background: #fff;\n color: #E6A23C;\n transform: rotate(45deg);\n width: 90px;\n height: 90px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n box-shadow: 0 4px 15px rgba(230, 162, 60, 0.2);\n}\n\n.flow-node.condition:hover {\n box-shadow: 0 8px 20px rgba(230, 162, 60, 0.3);\n transform: rotate(45deg) translateY(-4px);\n}\n\n.flow-node.condition .node-label {\n transform: rotate(-45deg);\n white-space: nowrap;\n font-weight: 500;\n font-size: 14px;\n}\n\n.flow-node.process {\n border-color: #409EFF;\n color: #2c3e50;\n background: linear-gradient(to bottom, #fff, #f8fafc);\n}\n\n.node-label {\n font-size: 14px;\n font-weight: 500;\n}\n\n/* 连接线标签样式 */\n:deep(.connection-label) {\n background: #fff;\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 12px;\n color: #5c6b77;\n border: 1px solid #e0e6ed;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n z-index: 5;\n font-weight: 500;\n}\n\n/* jsPlumb 连接点样式 */\n:deep(.jtk-endpoint) {\n z-index: 15;\n transition: all 0.3s ease;\n}\n\n:deep(.jtk-endpoint:hover) {\n transform: scale(1.2);\n}\n\n:deep(.jtk-connector) {\n z-index: 4;\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n:deep(.jtk-overlay) {\n z-index: 6;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n .process-flow {\n padding: 20px;\n margin: 20px 0;\n }\n\n .intro-content {\n flex-direction: column;\n }\n\n .intro-description {\n padding-right: 0;\n margin-bottom: 20px;\n }\n\n .intro-stats {\n flex-wrap: wrap;\n gap: 20px;\n padding: 15px;\n }\n\n .stat-item {\n padding: 0 15px;\n }\n\n .stat-item:not(:last-child)::after {\n display: none;\n }\n\n .stat-value {\n font-size: 24px;\n }\n}\n</style> "],"mappings":";;;;;;;;;;;;AA4CA,OAAAA,OAAA;AAEA;EACAC,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,YAAA;QACAC,QAAA;UACAC,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;QACA;QACAC,KAAA;UACAP,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;QACA;QACAE,QAAA;UACAR,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;QACA;MACA;MACAG,YAAA;QACAV,QAAA,GACA;UACAW,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,EACA;QACAR,KAAA,GACA;UACAG,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,EACA;QACAP,QAAA,GACA;UACAE,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GACA;UACAL,EAAA;UACAC,IAAA;UACAC,KAAA;UACAC,CAAA;UACAC,CAAA;UACAC,GAAA;QACA,GAC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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
