{"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            type: 'start',\n            url: '/recruitment/start'\n          }, {\n            title: '发布招聘需求',\n            type: 'process',\n            url: '/recruitment/publish'\n          }, {\n            title: '简历筛选',\n            type: 'condition',\n            url: '/recruitment/screen',\n            branches: [{\n              label: '通过',\n              direction: 'right'\n            }, {\n              label: '不通过',\n              direction: 'left'\n            }]\n          }, {\n            title: '面试流程',\n            type: 'process',\n            url: '/interview/process'\n          }, {\n            title: '面试评估',\n            type: 'condition',\n            url: '/interview/evaluate',\n            branches: [{\n              label: '通过',\n              direction: 'right'\n            }, {\n              label: '不通过',\n              direction: 'left'\n            }]\n          }, {\n            title: 'Offer发放',\n            type: 'process',\n            url: '/offer/send'\n          }, {\n            title: 'Offer确认',\n            type: 'condition',\n            url: '/offer/confirm',\n            branches: [{\n              label: '接受',\n              direction: 'right'\n            }, {\n              label: '拒绝',\n              direction: 'left'\n            }]\n          }, {\n            title: '入职准备',\n            type: 'process',\n            url: '/onboarding/prepare'\n          }, {\n            title: '入职完成',\n            type: 'end',\n            url: '/onboarding/complete'\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","type","url","branches","label","direction","sales","icon","development","computed","currentProcess","processType","$route","params","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      <div class=\"flow-container\">\n        <div class=\"flowchart\">\n          <!-- 使用自定义的流程图样式 -->\n          <div v-for=\"(step, index) in processSteps\" :key=\"index\" class=\"flow-step\" :class=\"step.type\">\n            <!-- 开始/结束节点使用圆角矩形 -->\n            <div v-if=\"step.type === 'start' || step.type === 'end'\"\n                 class=\"node start-end\"\n                 @click=\"handleStepClick(step.url)\">\n              {{ step.title }}\n            </div>\n            <!-- 判断节点使用菱形 -->\n            <div v-else-if=\"step.type === 'condition'\"\n                 class=\"node condition\"\n                 @click=\"handleStepClick(step.url)\">\n              {{ step.title }}\n              <div v-if=\"step.branches\" class=\"branch-paths\">\n                <div v-for=\"(branch, bIndex) in step.branches\" \n                     :key=\"bIndex\"\n                     class=\"branch-label\"\n                     :class=\"branch.direction\">\n                  {{ branch.label }}\n                </div>\n              </div>\n            </div>\n            <!-- 普通节点使用矩形 -->\n            <div v-else\n                 class=\"node process\"\n                 @click=\"handleStepClick(step.url)\">\n              {{ step.title }}\n            </div>\n            <!-- 连接线 -->\n            <div v-if=\"index < processSteps.length - 1\" \n                 class=\"connector\"\n                 :class=\"{'with-branch': step.branches}\">\n              <div v-if=\"step.branches\" class=\"branch-lines\">\n                <div v-for=\"(branch, bIndex) in step.branches\"\n                     :key=\"bIndex\"\n                     class=\"branch-line\"\n                     :class=\"branch.direction\">\n                </div>\n              </div>\n              <i v-else class=\"el-icon-arrow-down\"></i>\n            </div>\n          </div>\n        </div>\n      </div>\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              type: 'start',\n              url: '/recruitment/start'\n            },\n            {\n              title: '发布招聘需求',\n              type: 'process',\n              url: '/recruitment/publish'\n            },\n            {\n              title: '简历筛选',\n              type: 'condition',\n              url: '/recruitment/screen',\n              branches: [\n                { label: '通过', direction: 'right' },\n                { label: '不通过', direction: 'left' }\n              ]\n            },\n            {\n              title: '面试流程',\n              type: 'process',\n              url: '/interview/process'\n            },\n            {\n              title: '面试评估',\n              type: 'condition',\n              url: '/interview/evaluate',\n              branches: [\n                { label: '通过', direction: 'right' },\n                { label: '不通过', direction: 'left' }\n              ]\n            },\n            {\n              title: 'Offer发放',\n              type: 'process',\n              url: '/offer/send'\n            },\n            {\n              title: 'Offer确认',\n              type: 'condition',\n              url: '/offer/confirm',\n              branches: [\n                { label: '接受', direction: 'right' },\n                { label: '拒绝', direction: 'left' }\n              ]\n            },\n            {\n              title: '入职准备',\n              type: 'process',\n              url: '/onboarding/prepare'\n            },\n            {\n              title: '入职完成',\n              type: 'end',\n              url: '/onboarding/complete'\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;\n  background-color: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);\n}\n\n.flow-container {\n  position: relative;\n  padding: 20px;\n}\n\n.flowchart {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: 600px;\n}\n\n.flow-step {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: 600px;\n}\n\n.node {\n  padding: 15px 30px;\n  margin: 10px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 150px;\n  text-align: center;\n}\n\n.node:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n/* 开始/结束节点样式 */\n.start-end {\n  background-color: #ffd980;\n  border-radius: 20px;\n  color: #7d5700;\n}\n\n/* 流程节点样式 */\n.process .node {\n  background-color: #e1f3d8;\n  border: 2px solid #67c23a;\n  color: #529b2e;\n}\n\n/* 条件节点样式 */\n.condition .node {\n  background-color: #fdf6ec;\n  border: 2px solid #e6a23c;\n  color: #b88230;\n  transform: rotate(45deg);\n  width: 120px;\n  height: 120px;\n  padding: 0;\n}\n\n.condition .node > span {\n  transform: rotate(-45deg);\n  width: 100%;\n  text-align: center;\n}\n\n/* 连接线样式 */\n.connector {\n  height: 40px;\n  width: 2px;\n  background-color: #dcdfe6;\n  position: relative;\n  margin: 10px 0;\n}\n\n.connector i {\n  position: absolute;\n  bottom: -1px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #dcdfe6;\n}\n\n/* 分支样式 */\n.branch-paths {\n  position: absolute;\n  width: 200px;\n  display: flex;\n  justify-content: space-between;\n}\n\n.branch-label {\n  position: absolute;\n  color: #909399;\n  font-size: 12px;\n}\n\n.branch-label.right {\n  right: -60px;\n}\n\n.branch-label.left {\n  left: -60px;\n}\n\n.branch-lines {\n  position: absolute;\n  width: 200px;\n  height: 40px;\n}\n\n.branch-line {\n  position: absolute;\n  background-color: #dcdfe6;\n}\n\n.branch-line.right {\n  width: 100px;\n  height: 2px;\n  right: -100px;\n  top: 19px;\n}\n\n.branch-line.left {\n  width: 100px;\n  height: 2px;\n  left: -100px;\n  top: 19px;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n  .process-flow {\n    padding: 20px;\n  }\n\n  .node {\n    padding: 10px 20px;\n    min-width: 120px;\n  }\n\n  .condition .node {\n    width: 100px;\n    height: 100px;\n  }\n\n  .branch-paths {\n    width: 160px;\n  }\n\n  .branch-label.right {\n    right: -40px;\n  }\n\n  .branch-label.left {\n    left: -40px;\n  }\n}\n</style> "],"mappings":";;;AAiFA;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,IAAA;YACAC,GAAA;UACA,GACA;YACAT,KAAA;YACAQ,IAAA;YACAC,GAAA;UACA,GACA;YACAT,KAAA;YACAQ,IAAA;YACAC,GAAA;YACAC,QAAA,GACA;cAAAC,KAAA;cAAAC,SAAA;YAAA,GACA;cAAAD,KAAA;cAAAC,SAAA;YAAA;UAEA,GACA;YACAZ,KAAA;YACAQ,IAAA;YACAC,GAAA;UACA,GACA;YACAT,KAAA;YACAQ,IAAA;YACAC,GAAA;YACAC,QAAA,GACA;cAAAC,KAAA;cAAAC,SAAA;YAAA,GACA;cAAAD,KAAA;cAAAC,SAAA;YAAA;UAEA,GACA;YACAZ,KAAA;YACAQ,IAAA;YACAC,GAAA;UACA,GACA;YACAT,KAAA;YACAQ,IAAA;YACAC,GAAA;YACAC,QAAA,GACA;cAAAC,KAAA;cAAAC,SAAA;YAAA,GACA;cAAAD,KAAA;cAAAC,SAAA;YAAA;UAEA,GACA;YACAZ,KAAA;YACAQ,IAAA;YACAC,GAAA;UACA,GACA;YACAT,KAAA;YACAQ,IAAA;YACAC,GAAA;UACA;QAEA;QACAI,KAAA;UACAb,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;UACAC,KAAA,GACA;YACAP,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA;QAEA;QACAc,WAAA;UACAf,KAAA;UACAC,WAAA;UACAC,MAAA;UACAC,UAAA;UACAC,UAAA;UACAC,cAAA;UACAC,WAAA;UACAC,KAAA,GACA;YACAP,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA,GACA;YACAD,KAAA;YACAS,GAAA;YACAK,IAAA;YACAb,WAAA;UACA;QAEA;MACA;IACA;EACA;EACAe,QAAA;IACAC,cAAA,WAAAA,eAAA;MACA,IAAAC,WAAA,QAAAC,MAAA,CAAAC,MAAA,CAAAZ,IAAA;MACA,YAAAV,YAAA,CAAAoB,WAAA;IACA;IACAG,YAAA,WAAAA,aAAA;MACA,YAAAJ,cAAA,CAAAV,KAAA;IACA;EACA;EACAe,OAAA;IACAC,eAAA,WAAAA,gBAAAd,GAAA;MAAA,IAAAe,KAAA;MACA,IAAAf,GAAA,CAAAgB,UAAA;QACAC,MAAA,CAAAC,IAAA,CAAAlB,GAAA;MACA;QACA,KAAAmB,OAAA,CAAAC,IAAA,CAAApB,GAAA,qBAAAqB,GAAA;UACA,IAAAA,GAAA,CAAAlC,IAAA;YACA4B,KAAA,CAAAO,QAAA;cACAvB,IAAA;cACAwB,OAAA;YACA;UACA;QACA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}