{"ast":null,"code":"import \"core-js/modules/es.array.filter.js\";\nimport \"core-js/modules/es.array.for-each.js\";\nimport \"core-js/modules/es.iterator.constructor.js\";\nimport \"core-js/modules/es.iterator.for-each.js\";\nimport \"core-js/modules/es.object.to-string.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      },\n      nodes: [{\n        id: 'start',\n        type: 'start',\n        label: '开始',\n        x: 350,\n        y: 50\n      }, {\n        id: 'interview',\n        type: 'condition',\n        label: '面试',\n        x: 350,\n        y: 150\n      }, {\n        id: 'pass',\n        type: 'process',\n        label: '发录用通知书',\n        x: 550,\n        y: 150\n      }, {\n        id: 'prepare',\n        type: 'process',\n        label: '准备入职材料',\n        x: 550,\n        y: 250\n      }, {\n        id: 'verify',\n        type: 'condition',\n        label: '材料核实',\n        x: 550,\n        y: 350\n      }, {\n        id: 'onboard',\n        type: 'process',\n        label: '办理入职',\n        x: 550,\n        y: 450\n      }, {\n        id: 'reject',\n        type: 'process',\n        label: '发送拒绝通知',\n        x: 150,\n        y: 250\n      }, {\n        id: 'archive',\n        type: 'process',\n        label: '归档简历',\n        x: 150,\n        y: 350\n      }, {\n        id: 'end',\n        type: 'end',\n        label: '结束',\n        x: 350,\n        y: 550\n      }],\n      connections: [{\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      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  },\n  methods: {\n    nodeStyle: function nodeStyle(node) {\n      return {\n        left: node.x + 'px',\n        top: node.y + 'px'\n      };\n    },\n    initJsPlumb: function initJsPlumb() {\n      var _this = this;\n      this.jsPlumbInstance = jsPlumb.jsPlumb.getInstance({\n        Container: this.$refs.processFlow,\n        Connector: ['Flowchart', {\n          cornerRadius: 5,\n          stub: 30,\n          midpoint: 0.7\n        }],\n        Endpoint: ['Dot', {\n          radius: 5\n        }],\n        Anchor: [['Left', 'Right', 'Top'],\n        // source anchors\n        ['Left', 'Right', 'Bottom'] // target anchors\n        ],\n        PaintStyle: {\n          strokeWidth: 2,\n          stroke: '#409EFF'\n        },\n        EndpointStyle: {\n          fill: '#409EFF',\n          radius: 4\n        },\n        HoverPaintStyle: {\n          stroke: '#67C23A'\n        }\n      });\n\n      // 为每个节点添加端点\n      this.nodes.forEach(function (node) {\n        var 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      // 添加连接\n      this.connections.forEach(function (conn) {\n        var connection = _this.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                _this.$message.info(conn.label || '流程连接');\n              }\n            }\n          }] : null].filter(Boolean)\n        });\n        if (conn.source === 'verify' && conn.target === 'prepare') {\n          connection.setConnector(['Flowchart', {\n            stub: [30, 30],\n            cornerRadius: 5,\n            alwaysRespectStubs: true\n          }]);\n        }\n      });\n    }\n  },\n  mounted: function mounted() {\n    var _this2 = this;\n    // 等待 DOM 完全渲染后再初始化 jsPlumb\n    setTimeout(function () {\n      _this2.initJsPlumb();\n    }, 500);\n  },\n  beforeDestroy: function beforeDestroy() {\n    if (this.jsPlumbInstance) {\n      this.jsPlumbInstance.destroy();\n    }\n  }\n};","map":{"version":3,"names":["jsPlumb","name","data","processTypes","employee","title","description","status","statusType","totalSteps","completedSteps","avgDuration","nodes","id","type","label","x","y","connections","source","target","jsPlumbInstance","computed","currentProcess","processType","$route","params","methods","nodeStyle","node","left","top","initJsPlumb","_this","getInstance","Container","$refs","processFlow","Connector","cornerRadius","stub","midpoint","Endpoint","radius","Anchor","PaintStyle","strokeWidth","stroke","EndpointStyle","fill","HoverPaintStyle","forEach","element","document","getElementById","makeSource","filter","anchor","maxConnections","makeTarget","conn","connection","connect","detachable","overlays","location","cssClass","events","click","$message","info","Boolean","setConnector","alwaysRespectStubs","mounted","_this2","setTimeout","beforeDestroy","destroy"],"sources":["src/views/EmployeeProcess.vue"],"sourcesContent":["<template>\n  <div class=\"process-container\">\n    <!-- 添加业务介绍区域 -->\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 v-for=\"node in nodes\" :key=\"node.id\" :id=\"node.id\" :class=\"['flow-node', node.type]\" :style=\"nodeStyle(node)\">\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      },\n      nodes: [\n        { id: 'start', type: 'start', label: '开始', x: 350, y: 50 },\n        { id: 'interview', type: 'condition', label: '面试', x: 350, y: 150 },\n        { id: 'pass', type: 'process', label: '发录用通知书', x: 550, y: 150 },\n        { id: 'prepare', type: 'process', label: '准备入职材料', x: 550, y: 250 },\n        { id: 'verify', type: 'condition', label: '材料核实', x: 550, y: 350 },\n        { id: 'onboard', type: 'process', label: '办理入职', x: 550, y: 450 },\n        { id: 'reject', type: 'process', label: '发送拒绝通知', x: 150, y: 250 },\n        { id: 'archive', type: 'process', label: '归档简历', x: 150, y: 350 },\n        { id: 'end', type: 'end', label: '结束', x: 350, y: 550 }\n      ],\n      connections: [\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      jsPlumbInstance: null\n    }\n  },\n  computed: {\n    currentProcess() {\n      const processType = this.$route.params.type || 'employee'\n      return this.processTypes[processType]\n    }\n  },\n  methods: {\n    nodeStyle(node) {\n      return {\n        left: node.x + 'px',\n        top: node.y + 'px'\n      }\n    },\n    initJsPlumb() {\n      this.jsPlumbInstance = jsPlumb.jsPlumb.getInstance({\n        Container: this.$refs.processFlow,\n        Connector: ['Flowchart', { cornerRadius: 5, stub: 30, midpoint: 0.7 }],\n        Endpoint: ['Dot', { radius: 5 }],\n        Anchor: [\n          ['Left', 'Right', 'Top'],  // source anchors\n          ['Left', 'Right', 'Bottom']  // target anchors\n        ],\n        PaintStyle: {\n          strokeWidth: 2,\n          stroke: '#409EFF'\n        },\n        EndpointStyle: { \n          fill: '#409EFF',\n          radius: 4\n        },\n        HoverPaintStyle: {\n          stroke: '#67C23A'\n        }\n      })\n\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      // 添加连接\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        if (conn.source === 'verify' && conn.target === 'prepare') {\n          connection.setConnector(['Flowchart', { \n            stub: [30, 30],\n            cornerRadius: 5,\n            alwaysRespectStubs: true\n          }])\n        }\n      })\n    }\n  },\n  mounted() {\n    // 等待 DOM 完全渲染后再初始化 jsPlumb\n    setTimeout(() => {\n      this.initJsPlumb()\n    }, 500)\n  },\n  beforeDestroy() {\n    if (this.jsPlumbInstance) {\n      this.jsPlumbInstance.destroy()\n    }\n  }\n}\n</script>\n\n<style scoped>\n.process-container {\n  padding: 20px;\n}\n\n.process-intro {\n  margin-bottom: 30px;\n}\n\n.intro-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.intro-header h2 {\n  margin: 0;\n  font-size: 20px;\n  color: #303133;\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: #606266;\n  line-height: 1.6;\n}\n\n.intro-stats {\n  display: flex;\n  gap: 30px;\n}\n\n.stat-item {\n  text-align: center;\n  padding: 0 20px;\n}\n\n.stat-value {\n  font-size: 24px;\n  font-weight: bold;\n  color: #409EFF;\n  margin-bottom: 8px;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: #909399;\n}\n\n.process-flow {\n  margin: 40px 0;\n  padding: 40px;\n  background-color: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);\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 20px;\n  text-align: center;\n  background: #fff;\n  border: 2px solid #409EFF;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.3s;\n  z-index: 10;\n}\n\n.flow-node:hover {\n  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);\n  transform: translateY(-2px);\n}\n\n.flow-node.start,\n.flow-node.end {\n  background: #409EFF;\n  color: #fff;\n  border-radius: 20px;\n  min-width: 80px;\n}\n\n.flow-node.condition {\n  border-color: #E6A23C;\n  background: #fdf6ec;\n  color: #E6A23C;\n  transform: rotate(45deg);\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n}\n\n.flow-node.condition .node-label {\n  transform: rotate(-45deg);\n  white-space: nowrap;\n}\n\n.flow-node.process {\n  border-color: #409EFF;\n  color: #303133;\n}\n\n/* 连接线标签样式 */\n:deep(.connection-label) {\n  background: #fff;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 12px;\n  color: #606266;\n  border: 1px solid #dcdfe6;\n  z-index: 5;\n}\n\n/* jsPlumb 连接点样式 */\n:deep(.jtk-endpoint) {\n  z-index: 15;\n}\n\n:deep(.jtk-connector) {\n  z-index: 4;\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  }\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    justify-content: space-around;\n  }\n}\n</style> "],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}