| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.find.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.object.to-string.js\";\nimport \"core-js/modules/es.string.starts-with.js\";\nexport default {\n name: 'EmployeeProcess',\n data: function data() {\n return {\n nodes: [{\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 };\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 }\n};","map":{"version":3,"names":["name","data","nodes","id","type","label","x","y","url","methods","handleNodeClick","nodeId","_this","node","find","n","startsWith","window","open","$router","push","err","$message","message","concat","nodeStyle","left","top"],"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>员工入职业务流程</h2>\n <el-tag size=\"medium\" type=\"success\">正常运行</el-tag>\n </div>\n <div class=\"intro-content\">\n <div class=\"intro-description\">\n <p>本流程规范了新员工从招聘到入职的完整过程，确保人才招聘和入职流程的规范化和标准化。</p>\n </div>\n <div class=\"intro-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">7</div>\n <div class=\"stat-label\">总步骤</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">4</div>\n <div class=\"stat-label\">已完成</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">15天</div>\n <div class=\"stat-label\">平均耗时</div>\n </div>\n </div>\n </div>\n </el-card>\n\n <div class=\"process-flow\">\n <!-- 静态连接线 -->\n <svg class=\"flow-lines\" width=\"100%\" height=\"100%\">\n <!-- 定义箭头标记 -->\n <defs>\n <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\">\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#409EFF\" />\n </marker>\n </defs>\n \n <!-- 员工入职流程线条 -->\n <path d=\"M400,80 L400,120\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M400,190 L600,190\" class=\"flow-line\" data-label=\"通过\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M400,190 L200,190 L200,250\" class=\"flow-line\" data-label=\"不通过\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M600,190 L600,250\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M600,250 L600,350\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M600,350 L600,450\" class=\"flow-line\" data-label=\"完整\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M600,350 L550,350 L550,300 L600,300\" class=\"flow-line\" data-label=\"需补充\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M200,250 L200,350\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M600,450 L400,450 L400,550\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n <path d=\"M200,350 L400,350 L400,550\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n \n <!-- 添加文本标签 -->\n <text x=\"500\" y=\"180\" class=\"flow-text\">通过</text>\n <text x=\"300\" y=\"180\" class=\"flow-text\">不通过</text>\n <text x=\"610\" y=\"400\" class=\"flow-text\">完整</text>\n <text x=\"550\" y=\"290\" class=\"flow-text\">需补充</text>\n </svg>\n\n <!-- 节点 -->\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>\nexport default {\n name: 'EmployeeProcess',\n data() {\n return {\n nodes: [\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 }\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 }\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: 800px;\n min-width: 800px;\n overflow: visible;\n}\n\n.flow-lines {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.flow-line {\n stroke: #409EFF;\n stroke-width: 3;\n fill: none;\n}\n\n.flow-text {\n font-size: 12px;\n fill: #606266;\n font-weight: 500;\n text-anchor: middle;\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@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":";;;;;;;AAyEA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,KAAA,GACA;QACAC,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA;IAEA;EACA;EACAC,OAAA;IACAC,eAAA,WAAAA,gBAAAC,MAAA;MAAA,IAAAC,KAAA;MACA,IAAAC,IAAA,QAAAX,KAAA,CAAAY,IAAA,WAAAC,CAAA;QAAA,OAAAA,CAAA,CAAAZ,EAAA,KAAAQ,MAAA;MAAA;MACA,IAAAE,IAAA,IAAAA,IAAA,CAAAL,GAAA;QACA,IAAAK,IAAA,CAAAL,GAAA,CAAAQ,UAAA;UACAC,MAAA,CAAAC,IAAA,CAAAL,IAAA,CAAAL,GAAA;QACA;UACA,KAAAW,OAAA,CAAAC,IAAA,CAAAP,IAAA,CAAAL,GAAA,qBAAAa,GAAA;YACA,IAAAA,GAAA,CAAArB,IAAA;cACAY,KAAA,CAAAU,QAAA;gBACAlB,IAAA;gBACAmB,OAAA,mCAAAC,MAAA,CAAAX,IAAA,CAAAR,KAAA;cACA;YACA;UACA;QACA;MACA;IACA;IACAoB,SAAA,WAAAA,UAAAZ,IAAA;MACA;QACAa,IAAA,EAAAb,IAAA,CAAAP,CAAA;QACAqB,GAAA,EAAAd,IAAA,CAAAN,CAAA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
