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