{"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":[]}