| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport \"core-js/modules/es.function.name.js\";\nimport \"core-js/modules/es.string.starts-with.js\";\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: 6,\n avgDuration: '15天',\n steps: [{\n title: '发布招聘申请',\n url: '/recruitment/apply',\n icon: 'edit-outline',\n description: '点击发起招聘申请'\n }, {\n title: 'HR发布招聘信息',\n url: '/recruitment/publish',\n icon: 'share',\n description: '查看招聘发布详情'\n }, {\n title: '面试流程',\n url: '/interview/process',\n icon: 'chat-dot-round',\n description: '查看面试流程安排'\n }, {\n title: '面试意见流转',\n url: '/interview/feedback',\n icon: 'document',\n description: '查看面试反馈'\n }, {\n title: '入职确认/放弃报到通知单',\n url: '/onboarding/confirm',\n icon: 'finished',\n description: '处理入职确认'\n }, {\n title: '员工入职通知单',\n url: '/onboarding/notice',\n icon: 'message',\n description: '查看入职通知'\n }, {\n title: '新员工入职状况报告调查问卷',\n url: '/onboarding/survey',\n icon: 'notebook-2',\n description: '填写入职调查'\n }]\n },\n sales: {\n title: '销售订单业务流程',\n description: '规范销售订单从创建到完成的全过程，包括报价、合同签订、订单处理等环节，提高销售效率和客户满意度。',\n status: '部分维护中',\n statusType: 'warning',\n totalSteps: 5,\n completedSteps: 3,\n avgDuration: '7天',\n steps: [{\n title: '客户询价',\n url: '/sales/inquiry',\n icon: 'message',\n description: '处理客户询价'\n }, {\n title: '报价审核',\n url: '/sales/quote',\n icon: 'document-checked',\n description: '查看报价详情'\n }, {\n title: '合同签订',\n url: '/sales/contract',\n icon: 'edit',\n description: '处理合同签订'\n }, {\n title: '订单确认',\n url: '/sales/order',\n icon: 'finished',\n description: '确认订单信息'\n }, {\n title: '订单完成',\n url: '/sales/complete',\n icon: 'success',\n description: '完成订单处理'\n }]\n },\n development: {\n title: '发货业务流程',\n description: '管理产品从仓库出库到送达客户的完整流程，包括库存检查、包装、物流等环节，确保准确及时交付。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 4,\n completedSteps: 4,\n avgDuration: '3天',\n steps: [{\n title: '库存确认',\n url: '/shipping/stock',\n icon: 'box',\n description: '确认库存状态'\n }, {\n title: '发货准备',\n url: '/shipping/prepare',\n icon: 'goods',\n description: '准备发货物品'\n }, {\n title: '物流配送',\n url: '/shipping/delivery',\n icon: 'truck',\n description: '跟踪物流状态'\n }, {\n title: '签收确认',\n url: '/shipping/confirm',\n icon: 'checked',\n description: '确认收货状态'\n }]\n }\n }\n };\n },\n computed: {\n currentProcess: function currentProcess() {\n var processType = this.$route.params.type || 'employee';\n return this.processTypes[processType];\n },\n processSteps: function processSteps() {\n return this.currentProcess.steps;\n }\n },\n methods: {\n handleStepClick: function handleStepClick(url) {\n var _this = this;\n if (url.startsWith('http')) {\n window.open(url, '_blank');\n } else {\n this.$router.push(url)[\"catch\"](function (err) {\n if (err.name !== 'NavigationDuplicated') {\n _this.$message({\n type: 'warning',\n message: '该功能正在开发中'\n });\n }\n });\n }\n }\n }\n};","map":{"version":3,"names":["name","data","processTypes","employee","title","description","status","statusType","totalSteps","completedSteps","avgDuration","steps","url","icon","sales","development","computed","currentProcess","processType","$route","params","type","processSteps","methods","handleStepClick","_this","startsWith","window","open","$router","push","err","$message","message"],"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 <el-steps :active=\"currentProcess.completedSteps\" finish-status=\"success\" align-center>\n <el-step \n v-for=\"(step, index) in processSteps\" \n :key=\"index\"\n :title=\"step.title\"\n :description=\"step.description || '点击查看详情'\"\n @click.native=\"handleStepClick(step.url)\"\n class=\"clickable-step\">\n <template slot=\"icon\">\n <div class=\"custom-icon-wrapper\">\n <i :class=\"['el-icon-' + (step.icon || 'connection')]\"></i>\n </div>\n </template>\n </el-step>\n </el-steps>\n </div>\n </div>\n</template>\n\n<script>\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: 6,\n avgDuration: '15天',\n steps: [\n {\n title: '发布招聘申请',\n url: '/recruitment/apply',\n icon: 'edit-outline',\n description: '点击发起招聘申请'\n },\n {\n title: 'HR发布招聘信息',\n url: '/recruitment/publish',\n icon: 'share',\n description: '查看招聘发布详情'\n },\n {\n title: '面试流程',\n url: '/interview/process',\n icon: 'chat-dot-round',\n description: '查看面试流程安排'\n },\n {\n title: '面试意见流转',\n url: '/interview/feedback',\n icon: 'document',\n description: '查看面试反馈'\n },\n {\n title: '入职确认/放弃报到通知单',\n url: '/onboarding/confirm',\n icon: 'finished',\n description: '处理入职确认'\n },\n {\n title: '员工入职通知单',\n url: '/onboarding/notice',\n icon: 'message',\n description: '查看入职通知'\n },\n {\n title: '新员工入职状况报告调查问卷',\n url: '/onboarding/survey',\n icon: 'notebook-2',\n description: '填写入职调查'\n }\n ]\n },\n sales: {\n title: '销售订单业务流程',\n description: '规范销售订单从创建到完成的全过程，包括报价、合同签订、订单处理等环节，提高销售效率和客户满意度。',\n status: '部分维护中',\n statusType: 'warning',\n totalSteps: 5,\n completedSteps: 3,\n avgDuration: '7天',\n steps: [\n {\n title: '客户询价',\n url: '/sales/inquiry',\n icon: 'message',\n description: '处理客户询价'\n },\n {\n title: '报价审核',\n url: '/sales/quote',\n icon: 'document-checked',\n description: '查看报价详情'\n },\n {\n title: '合同签订',\n url: '/sales/contract',\n icon: 'edit',\n description: '处理合同签订'\n },\n {\n title: '订单确认',\n url: '/sales/order',\n icon: 'finished',\n description: '确认订单信息'\n },\n {\n title: '订单完成',\n url: '/sales/complete',\n icon: 'success',\n description: '完成订单处理'\n }\n ]\n },\n development: {\n title: '发货业务流程',\n description: '管理产品从仓库出库到送达客户的完整流程，包括库存检查、包装、物流等环节，确保准确及时交付。',\n status: '正常运行',\n statusType: 'success',\n totalSteps: 4,\n completedSteps: 4,\n avgDuration: '3天',\n steps: [\n {\n title: '库存确认',\n url: '/shipping/stock',\n icon: 'box',\n description: '确认库存状态'\n },\n {\n title: '发货准备',\n url: '/shipping/prepare',\n icon: 'goods',\n description: '准备发货物品'\n },\n {\n title: '物流配送',\n url: '/shipping/delivery',\n icon: 'truck',\n description: '跟踪物流状态'\n },\n {\n title: '签收确认',\n url: '/shipping/confirm',\n icon: 'checked',\n description: '确认收货状态'\n }\n ]\n }\n }\n }\n },\n computed: {\n currentProcess() {\n const processType = this.$route.params.type || 'employee'\n return this.processTypes[processType]\n },\n processSteps() {\n return this.currentProcess.steps\n }\n },\n methods: {\n handleStepClick(url) {\n if (url.startsWith('http')) {\n window.open(url, '_blank')\n } else {\n this.$router.push(url).catch(err => {\n if (err.name !== 'NavigationDuplicated') {\n this.$message({\n type: 'warning',\n message: '该功能正在开发中'\n })\n }\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 20px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);\n}\n\n.process-description {\n margin-top: 30px;\n}\n\n.description-card {\n width: 100%;\n margin-bottom: 20px;\n}\n\n.description-card ol {\n margin: 0;\n padding-left: 20px;\n}\n\n.description-card li {\n line-height: 2;\n color: #606266;\n}\n\n/* 自定义步骤样式 */\n.clickable-step {\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.clickable-step:hover {\n transform: translateY(-2px);\n}\n\n.clickable-step:hover .el-step__title {\n color: #409EFF !important;\n}\n\n.clickable-step:hover .el-step__description {\n color: #409EFF !important;\n}\n\n.clickable-step:hover .custom-icon-wrapper {\n background-color: #409EFF;\n transform: scale(1.1);\n}\n\n/* 自定义图标样式 */\n.custom-icon-wrapper {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: #C0C4CC;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n}\n\n.custom-icon-wrapper i {\n color: #fff;\n font-size: 20px;\n}\n\n/* 确保步骤标题可以完整显示 */\n.el-step__title {\n white-space: normal;\n line-height: 1.4;\n font-size: 14px;\n transition: color 0.3s ease;\n}\n\n.el-step__description {\n font-size: 12px;\n transition: color 0.3s ease;\n}\n\n/* 活跃状态的图标 */\n.el-step.is-success .custom-icon-wrapper {\n background-color: #67C23A;\n}\n\n.el-step.is-process .custom-icon-wrapper {\n background-color: #409EFF;\n}\n\n/* 添加响应式间距 */\n@media screen and (max-width: 768px) {\n .process-flow {\n padding: 20px 10px;\n }\n \n .custom-icon-wrapper {\n width: 32px;\n height: 32px;\n }\n \n .custom-icon-wrapper i {\n font-size: 16px;\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 width: 100%;\n justify-content: space-around;\n }\n\n .stat-item {\n padding: 0 10px;\n }\n}\n</style> "],"mappings":";;;AAkDA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,YAAA;QACAC,QAAA;UACAC,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;UACAC,KAAA,GACA;YACAP,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA;QAEA;QACAS,KAAA;UACAV,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;UACAC,KAAA,GACA;YACAP,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA;QAEA;QACAU,WAAA;UACAX,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;UACAC,KAAA,GACA;YACAP,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA,GACA;YACAD,KAAA;YACAQ,GAAA;YACAC,IAAA;YACAR,WAAA;UACA;QAEA;MACA;IACA;EACA;EACAW,QAAA;IACAC,cAAA,WAAAA,eAAA;MACA,IAAAC,WAAA,QAAAC,MAAA,CAAAC,MAAA,CAAAC,IAAA;MACA,YAAAnB,YAAA,CAAAgB,WAAA;IACA;IACAI,YAAA,WAAAA,aAAA;MACA,YAAAL,cAAA,CAAAN,KAAA;IACA;EACA;EACAY,OAAA;IACAC,eAAA,WAAAA,gBAAAZ,GAAA;MAAA,IAAAa,KAAA;MACA,IAAAb,GAAA,CAAAc,UAAA;QACAC,MAAA,CAAAC,IAAA,CAAAhB,GAAA;MACA;QACA,KAAAiB,OAAA,CAAAC,IAAA,CAAAlB,GAAA,qBAAAmB,GAAA;UACA,IAAAA,GAAA,CAAA/B,IAAA;YACAyB,KAAA,CAAAO,QAAA;cACAX,IAAA;cACAY,OAAA;YACA;UACA;QACA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
