{"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      scale: 1,\n      isMobile: false\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    checkDevice: function checkDevice() {\n      this.isMobile = window.innerWidth < 768;\n      if (this.isMobile) {\n        this.scale = 0.6; // 移动端默认缩小到60%\n      } else {\n        this.scale = 1;\n      }\n      this.applyScale();\n    },\n    applyScale: function applyScale() {\n      var flowElement = document.querySelector('.process-flow');\n      if (flowElement) {\n        flowElement.style.transform = \"scale(\".concat(this.scale, \")\");\n      }\n    },\n    handleResize: function handleResize() {\n      this.checkDevice();\n    }\n  },\n  mounted: function mounted() {\n    var _this2 = this;\n    this.checkDevice();\n    window.addEventListener('resize', this.handleResize);\n\n    // 在移动设备上添加缩放支持\n    if (this.isMobile) {\n      var mc = new window.Hammer.Manager(document.querySelector('.process-flow'));\n\n      // 添加缩放手势识别\n      var pinch = new window.Hammer.Pinch();\n      mc.add(pinch);\n\n      // 手势处理\n      mc.on('pinch', function (e) {\n        _this2.scale = Math.max(0.3, Math.min(1.5, _this2.scale * e.scale));\n        _this2.applyScale();\n      });\n    }\n  },\n  beforeDestroy: function beforeDestroy() {\n    window.removeEventListener('resize', this.handleResize);\n  }\n};","map":{"version":3,"names":["name","data","nodes","id","type","label","x","y","url","scale","isMobile","methods","handleNodeClick","nodeId","_this","node","find","n","startsWith","window","open","$router","push","err","$message","message","concat","nodeStyle","left","top","checkDevice","innerWidth","applyScale","flowElement","document","querySelector","style","transform","handleResize","mounted","_this2","addEventListener","mc","Hammer","Manager","pinch","Pinch","add","on","e","Math","max","min","beforeDestroy","removeEventListener"],"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      scale: 1,\n      isMobile: false\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    checkDevice() {\n      this.isMobile = window.innerWidth < 768\n      if (this.isMobile) {\n        this.scale = 0.6 // 移动端默认缩小到60%\n      } else {\n        this.scale = 1\n      }\n      this.applyScale()\n    },\n    applyScale() {\n      const flowElement = document.querySelector('.process-flow')\n      if (flowElement) {\n        flowElement.style.transform = `scale(${this.scale})`\n      }\n    },\n    handleResize() {\n      this.checkDevice()\n    }\n  },\n  mounted() {\n    this.checkDevice()\n    window.addEventListener('resize', this.handleResize)\n    \n    // 在移动设备上添加缩放支持\n    if (this.isMobile) {\n      let mc = new window.Hammer.Manager(document.querySelector('.process-flow'))\n      \n      // 添加缩放手势识别\n      let pinch = new window.Hammer.Pinch()\n      mc.add(pinch)\n      \n      // 手势处理\n      mc.on('pinch', (e) => {\n        this.scale = Math.max(0.3, Math.min(1.5, this.scale * e.scale))\n        this.applyScale()\n      })\n    }\n  },\n  beforeDestroy() {\n    window.removeEventListener('resize', this.handleResize)\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    overflow-x: auto;\n    overflow-y: auto;\n    height: auto;\n    min-height: 800px;\n    transform-origin: top left;\n  }\n\n  .process-container {\n    padding: 10px;\n    overflow-x: hidden;\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,EACA;MACAC,KAAA;MACAC,QAAA;IACA;EACA;EACAC,OAAA;IACAC,eAAA,WAAAA,gBAAAC,MAAA;MAAA,IAAAC,KAAA;MACA,IAAAC,IAAA,QAAAb,KAAA,CAAAc,IAAA,WAAAC,CAAA;QAAA,OAAAA,CAAA,CAAAd,EAAA,KAAAU,MAAA;MAAA;MACA,IAAAE,IAAA,IAAAA,IAAA,CAAAP,GAAA;QACA,IAAAO,IAAA,CAAAP,GAAA,CAAAU,UAAA;UACAC,MAAA,CAAAC,IAAA,CAAAL,IAAA,CAAAP,GAAA;QACA;UACA,KAAAa,OAAA,CAAAC,IAAA,CAAAP,IAAA,CAAAP,GAAA,qBAAAe,GAAA;YACA,IAAAA,GAAA,CAAAvB,IAAA;cACAc,KAAA,CAAAU,QAAA;gBACApB,IAAA;gBACAqB,OAAA,mCAAAC,MAAA,CAAAX,IAAA,CAAAV,KAAA;cACA;YACA;UACA;QACA;MACA;IACA;IACAsB,SAAA,WAAAA,UAAAZ,IAAA;MACA;QACAa,IAAA,EAAAb,IAAA,CAAAT,CAAA;QACAuB,GAAA,EAAAd,IAAA,CAAAR,CAAA;MACA;IACA;IACAuB,WAAA,WAAAA,YAAA;MACA,KAAApB,QAAA,GAAAS,MAAA,CAAAY,UAAA;MACA,SAAArB,QAAA;QACA,KAAAD,KAAA;MACA;QACA,KAAAA,KAAA;MACA;MACA,KAAAuB,UAAA;IACA;IACAA,UAAA,WAAAA,WAAA;MACA,IAAAC,WAAA,GAAAC,QAAA,CAAAC,aAAA;MACA,IAAAF,WAAA;QACAA,WAAA,CAAAG,KAAA,CAAAC,SAAA,YAAAX,MAAA,MAAAjB,KAAA;MACA;IACA;IACA6B,YAAA,WAAAA,aAAA;MACA,KAAAR,WAAA;IACA;EACA;EACAS,OAAA,WAAAA,QAAA;IAAA,IAAAC,MAAA;IACA,KAAAV,WAAA;IACAX,MAAA,CAAAsB,gBAAA,gBAAAH,YAAA;;IAEA;IACA,SAAA5B,QAAA;MACA,IAAAgC,EAAA,OAAAvB,MAAA,CAAAwB,MAAA,CAAAC,OAAA,CAAAV,QAAA,CAAAC,aAAA;;MAEA;MACA,IAAAU,KAAA,OAAA1B,MAAA,CAAAwB,MAAA,CAAAG,KAAA;MACAJ,EAAA,CAAAK,GAAA,CAAAF,KAAA;;MAEA;MACAH,EAAA,CAAAM,EAAA,oBAAAC,CAAA;QACAT,MAAA,CAAA/B,KAAA,GAAAyC,IAAA,CAAAC,GAAA,MAAAD,IAAA,CAAAE,GAAA,MAAAZ,MAAA,CAAA/B,KAAA,GAAAwC,CAAA,CAAAxC,KAAA;QACA+B,MAAA,CAAAR,UAAA;MACA;IACA;EACA;EACAqB,aAAA,WAAAA,cAAA;IACAlC,MAAA,CAAAmC,mBAAA,gBAAAhB,YAAA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}