feat: 详情组件， 实例文件

src/components/steps/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="steps-box">
+    <el-steps :active="localActive">
+      <el-step 
+        v-for="(item, index) in localSteps"
+        :key="item.key"
+        :title="item.title"
+        :class="stepClass(index)"
+        @click="handleStep(item.key, index)"
+      ></el-step>
+    </el-steps>
+  </div>
+
+  <!-- 步骤内容 -->
+  <div>
+    <template v-for="(item, index) in stepList" :key="item.key" >
+      <component v-show="localActive == index" :is="item.component"/>
+    </template>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ElNotification } from 'element-plus';
+import { computed, ref, watchEffect } from 'vue';
+
+const props = defineProps({
+  // 步骤对应内容list
+  stepList: {
+    type: Array,
+    default: []
+  },
+  // 当前显示步骤
+  active: {
+    type: Number,
+    default: 0
+  },
+  // 已完成的工作流步骤
+  stepSuccess: {
+    type: Array,
+    default: [0]
+  }
+})
+
+const emits = defineEmits(['stepChange'])
+
+const localActive = ref(0) // 当前激活步骤
+const localSteps = ref([
+  {
+    title: '需求征集',
+    key: 'collect',
+  },
+  {
+    title: '需求上报',
+    key: 'report',
+  },
+  {
+    title: '项目立项',
+    key: 'approve',
+  },
+  {
+    title: '项目实施',
+    key: 'execute',
+  },
+  {
+    title: '项目归档',
+    key: 'archivist',
+  },
+])
+
+const stepClass = (val) => {
+  if(props.stepSuccess.includes(val)) {
+    return 'step-success'
+  }
+  return 'step-error'
+}
+
+const handleStep = (key, index) => {
+  if(props.stepSuccess.includes(index)) {
+    localActive.value = index
+    emits('stepChange', {key, active: index})
+    return
+  }
+  ElNotification({
+    title: '提示',
+    message: '不能查看未完成的工作流信息',
+    type: 'warning'
+  })
+}
+
+watchEffect(()=>{
+  localActive.value = props.active
+})
+</script>
+
+<style lang="scss" scoped>
+.steps-box{
+  padding: 10px 0;
+}
+.step-success {
+  cursor: pointer;
+}
+.step-error {
+  cursor: not-allowed;
+}
+</style>