{"ast":null,"code":"import \"core-js/modules/es.array.find.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 { Flowchart } from 'vue2-flowchart';\nimport 'vue2-flowchart/dist/vue2-flowchart.css';\nexport default {\n  name: 'ProcessFlow',\n  components: {\n    Flowchart: Flowchart\n  },\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        x: 100,\n        y: 50,\n        type: 'start',\n        label: '开始',\n        width: 100,\n        height: 40\n      }, {\n        id: 'interview',\n        x: 100,\n        y: 150,\n        type: 'condition',\n        label: '面试',\n        width: 120,\n        height: 60\n      }, {\n        id: 'pass',\n        x: 300,\n        y: 150,\n        type: 'process',\n        label: '发录用通知书',\n        width: 120,\n        height: 60\n      }, {\n        id: 'prepare',\n        x: 300,\n        y: 250,\n        type: 'process',\n        label: '准备入职材料',\n        width: 120,\n        height: 60\n      }, {\n        id: 'verify',\n        x: 300,\n        y: 350,\n        type: 'condition',\n        label: '材料核实',\n        width: 120,\n        height: 60\n      }, {\n        id: 'onboard',\n        x: 300,\n        y: 450,\n        type: 'process',\n        label: '办理入职',\n        width: 120,\n        height: 60\n      }, {\n        id: 'reject',\n        x: -100,\n        y: 250,\n        type: 'process',\n        label: '发送拒绝通知',\n        width: 120,\n        height: 60\n      }, {\n        id: 'archive',\n        x: -100,\n        y: 350,\n        type: 'process',\n        label: '归档简历',\n        width: 120,\n        height: 60\n      }, {\n        id: 'end',\n        x: 100,\n        y: 550,\n        type: 'end',\n        label: '结束',\n        width: 100,\n        height: 40\n      }],\n      connections: [{\n        source: 'start',\n        target: 'interview',\n        type: 'line'\n      }, {\n        source: 'interview',\n        target: 'pass',\n        type: 'line',\n        label: '通过'\n      }, {\n        source: 'interview',\n        target: 'reject',\n        type: 'line',\n        label: '不通过'\n      }, {\n        source: 'pass',\n        target: 'prepare',\n        type: 'line'\n      }, {\n        source: 'prepare',\n        target: 'verify',\n        type: 'line'\n      }, {\n        source: 'verify',\n        target: 'onboard',\n        type: 'line',\n        label: '完整'\n      }, {\n        source: 'verify',\n        target: 'prepare',\n        type: 'line',\n        label: '需补充',\n        connector: 'flowchart'\n      }, {\n        source: 'reject',\n        target: 'archive',\n        type: 'line'\n      }, {\n        source: 'onboard',\n        target: 'end',\n        type: 'line'\n      }, {\n        source: 'archive',\n        target: 'end',\n        type: 'line'\n      }]\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    handleEditNode: function handleEditNode(nodeConfig) {\n      console.log('Node edited:', nodeConfig);\n    },\n    handleEditConnection: function handleEditConnection(connectionConfig) {\n      console.log('Connection edited:', connectionConfig);\n    },\n    handleNodeClick: function handleNodeClick(nodeId) {\n      var node = this.nodes.find(function (n) {\n        return n.id === nodeId;\n      });\n      if (node) {\n        this.$message({\n          message: \"\\u70B9\\u51FB\\u4E86\\u8282\\u70B9: \".concat(node.label),\n          type: 'info'\n        });\n      }\n    }\n  }\n};","map":{"version":3,"names":["Flowchart","name","components","data","processTypes","employee","title","description","status","statusType","totalSteps","completedSteps","avgDuration","nodes","id","x","y","type","label","width","height","connections","source","target","connector","computed","currentProcess","processType","$route","params","methods","handleEditNode","nodeConfig","console","log","handleEditConnection","connectionConfig","handleNodeClick","nodeId","node","find","n","$message","message","concat"],"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\">\n      <flowchart\n        :nodes=\"nodes\"\n        :connections=\"connections\"\n        @editnode=\"handleEditNode\"\n        @editconnection=\"handleEditConnection\"\n        @nodeclick=\"handleNodeClick\"\n        :height=\"600\"\n        :width=\"1000\"\n        :readonly=\"true\"\n        :snapToGrid=\"true\"\n      ></flowchart>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { Flowchart } from 'vue2-flowchart'\nimport 'vue2-flowchart/dist/vue2-flowchart.css'\n\nexport default {\n  name: 'ProcessFlow',\n  components: {\n    Flowchart\n  },\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        {\n          id: 'start',\n          x: 100,\n          y: 50,\n          type: 'start',\n          label: '开始',\n          width: 100,\n          height: 40\n        },\n        {\n          id: 'interview',\n          x: 100,\n          y: 150,\n          type: 'condition',\n          label: '面试',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'pass',\n          x: 300,\n          y: 150,\n          type: 'process',\n          label: '发录用通知书',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'prepare',\n          x: 300,\n          y: 250,\n          type: 'process',\n          label: '准备入职材料',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'verify',\n          x: 300,\n          y: 350,\n          type: 'condition',\n          label: '材料核实',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'onboard',\n          x: 300,\n          y: 450,\n          type: 'process',\n          label: '办理入职',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'reject',\n          x: -100,\n          y: 250,\n          type: 'process',\n          label: '发送拒绝通知',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'archive',\n          x: -100,\n          y: 350,\n          type: 'process',\n          label: '归档简历',\n          width: 120,\n          height: 60\n        },\n        {\n          id: 'end',\n          x: 100,\n          y: 550,\n          type: 'end',\n          label: '结束',\n          width: 100,\n          height: 40\n        }\n      ],\n      connections: [\n        {\n          source: 'start',\n          target: 'interview',\n          type: 'line'\n        },\n        {\n          source: 'interview',\n          target: 'pass',\n          type: 'line',\n          label: '通过'\n        },\n        {\n          source: 'interview',\n          target: 'reject',\n          type: 'line',\n          label: '不通过'\n        },\n        {\n          source: 'pass',\n          target: 'prepare',\n          type: 'line'\n        },\n        {\n          source: 'prepare',\n          target: 'verify',\n          type: 'line'\n        },\n        {\n          source: 'verify',\n          target: 'onboard',\n          type: 'line',\n          label: '完整'\n        },\n        {\n          source: 'verify',\n          target: 'prepare',\n          type: 'line',\n          label: '需补充',\n          connector: 'flowchart'\n        },\n        {\n          source: 'reject',\n          target: 'archive',\n          type: 'line'\n        },\n        {\n          source: 'onboard',\n          target: 'end',\n          type: 'line'\n        },\n        {\n          source: 'archive',\n          target: 'end',\n          type: 'line'\n        }\n      ]\n    }\n  },\n  computed: {\n    currentProcess() {\n      const processType = this.$route.params.type || 'employee'\n      return this.processTypes[processType]\n    }\n  },\n  methods: {\n    handleEditNode(nodeConfig) {\n      console.log('Node edited:', nodeConfig)\n    },\n    handleEditConnection(connectionConfig) {\n      console.log('Connection edited:', connectionConfig)\n    },\n    handleNodeClick(nodeId) {\n      const node = this.nodes.find(n => n.id === nodeId)\n      if (node) {\n        this.$message({\n          message: `点击了节点: ${node.label}`,\n          type: 'info'\n        })\n      }\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  overflow: hidden;\n}\n\n/* 自定义流程图节点样式 */\n:deep(.vue-flowchart) {\n  background: #f5f7fa;\n}\n\n:deep(.vue-flowchart-node) {\n  background: #fff;\n  border: 2px solid #409EFF;\n  border-radius: 4px;\n  padding: 8px;\n  font-size: 14px;\n  color: #303133;\n}\n\n:deep(.vue-flowchart-node.start),\n:deep(.vue-flowchart-node.end) {\n  background: #409EFF;\n  color: #fff;\n  border-radius: 20px;\n}\n\n:deep(.vue-flowchart-node.condition) {\n  border-color: #E6A23C;\n  background: #fdf6ec;\n  color: #E6A23C;\n}\n\n:deep(.vue-flowchart-connection) {\n  stroke: #409EFF;\n  stroke-width: 2px;\n}\n\n:deep(.vue-flowchart-connection-label) {\n  background: #fff;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 12px;\n  color: #606266;\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":";;;;AA8CA,SAAAA,SAAA;AACA;AAEA;EACAC,IAAA;EACAC,UAAA;IACAF,SAAA,EAAAA;EACA;EACAG,IAAA,WAAAA,KAAA;IACA;MACAC,YAAA;QACAC,QAAA;UACAC,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;QACA;MACA;MACAC,KAAA,GACA;QACAC,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,GACA;QACAN,EAAA;QACAC,CAAA;QACAC,CAAA;QACAC,IAAA;QACAC,KAAA;QACAC,KAAA;QACAC,MAAA;MACA,EACA;MACAC,WAAA,GACA;QACAC,MAAA;QACAC,MAAA;QACAN,IAAA;MACA,GACA;QACAK,MAAA;QACAC,MAAA;QACAN,IAAA;QACAC,KAAA;MACA,GACA;QACAI,MAAA;QACAC,MAAA;QACAN,IAAA;QACAC,KAAA;MACA,GACA;QACAI,MAAA;QACAC,MAAA;QACAN,IAAA;MACA,GACA;QACAK,MAAA;QACAC,MAAA;QACAN,IAAA;MACA,GACA;QACAK,MAAA;QACAC,MAAA;QACAN,IAAA;QACAC,KAAA;MACA,GACA;QACAI,MAAA;QACAC,MAAA;QACAN,IAAA;QACAC,KAAA;QACAM,SAAA;MACA,GACA;QACAF,MAAA;QACAC,MAAA;QACAN,IAAA;MACA,GACA;QACAK,MAAA;QACAC,MAAA;QACAN,IAAA;MACA,GACA;QACAK,MAAA;QACAC,MAAA;QACAN,IAAA;MACA;IAEA;EACA;EACAQ,QAAA;IACAC,cAAA,WAAAA,eAAA;MACA,IAAAC,WAAA,QAAAC,MAAA,CAAAC,MAAA,CAAAZ,IAAA;MACA,YAAAb,YAAA,CAAAuB,WAAA;IACA;EACA;EACAG,OAAA;IACAC,cAAA,WAAAA,eAAAC,UAAA;MACAC,OAAA,CAAAC,GAAA,iBAAAF,UAAA;IACA;IACAG,oBAAA,WAAAA,qBAAAC,gBAAA;MACAH,OAAA,CAAAC,GAAA,uBAAAE,gBAAA;IACA;IACAC,eAAA,WAAAA,gBAAAC,MAAA;MACA,IAAAC,IAAA,QAAA1B,KAAA,CAAA2B,IAAA,WAAAC,CAAA;QAAA,OAAAA,CAAA,CAAA3B,EAAA,KAAAwB,MAAA;MAAA;MACA,IAAAC,IAAA;QACA,KAAAG,QAAA;UACAC,OAAA,qCAAAC,MAAA,CAAAL,IAAA,CAAArB,KAAA;UACAD,IAAA;QACA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}