fix : 修复直接上报的详情组件渲染

src/components/steps/index.vue

@@ -5,11 +5,11 @@
   <div class="steps-box">
     <el-steps :active="localActive" finish-status="success">
       <el-step
-        v-for="(item, index) in localSteps"
-        :key="item.key"
-        :title="item.title"
-        :class="stepClass(index)"
-        @click="handleStep(item.key, index)"
+          v-for="(item, index) in localSteps"
+          :key="item.key"
+          :title="item.title"
+          :class="stepClass(index)"
+          @click="handleStep(item.key, index)"
 
       />
     </el-steps>
@@ -25,10 +25,10 @@
 </template>
 
 <script setup lang="jsx">
-import { ElLoading, ElNotification } from 'element-plus';
-import { computed, reactive, ref, watchEffect } from 'vue';
-import { useRoute } from 'vue-router';
-import { getBaseInfoApi } from './api';
+import {ElLoading, ElNotification} from 'element-plus';
+import {computed, reactive, ref, watchEffect} from 'vue';
+import {useRoute} from 'vue-router';
+import {getBaseInfoApi} from './api';
 
 const props = defineProps({
   // 步骤对应内容list
@@ -39,7 +39,7 @@ const props = defineProps({
   // 当前显示步骤
   active: {
     type: Number,
-    default:0
+    default: 0
   },
   // 已完成的工作流步骤
   stepSuccess: {
@@ -47,7 +47,7 @@ const props = defineProps({
     default: ['00']
   },
   //直接上报/需求征集
-  reportType:{
+  reportType: {
     type: String,
     default: ''
   }
@@ -57,9 +57,7 @@ const route = useRoute()
 
 const emits = defineEmits(['stepChange', 'setDetail'])
 
-const localData = reactive({
-
-})
+const localData = reactive({})
 
 const localActive = ref(0) // 当前激活步骤
 
@@ -92,7 +90,7 @@ const localSteps = ref([
 
 const baseForm = ref()
 
-const schema = computed(()=>{
+const schema = computed(() => {
   return [
     {
       label: '所属公司',
@@ -134,22 +132,43 @@ const localStepSuccess = ref([])
 // 格式化详情步骤条
 const formatProcedure = (data) => {
   let arr = []
-  if(data instanceof Array) {
-    data.forEach(item=>{
-      switch (item) {
-        case '00': arr.push(0)
-          break
-        case '10': arr.push(1)
-          break
-        case '20': arr.push(2)
-          break
-        // case '30': arr.push(3)
-        //   break
-        case '40': arr.push(3)
-          break
-        case '50': arr.push(4)
-          break
+  if (data instanceof Array) {
+    data.forEach(item => {
+      if (props.reportType === 'direct') {
+        switch (item) {
+          case '10':
+            arr.push(0)
+            break
+          case '20':
+            arr.push(1)
+            break
+          case '40':
+            arr.push(2)
+            break
+          case '50':
+            arr.push(3)
+            break
+        }
+      } else {
+        switch (item) {
+          case '00':
+            arr.push(0)
+            break
+          case '10':
+            arr.push(1)
+            break
+          case '20':
+            arr.push(2)
+            break
+          case '40':
+            arr.push(3)
+            break
+          case '50':
+            arr.push(4)
+            break
+        }
       }
+
     })
   }
   return arr
@@ -158,20 +177,25 @@ const formatProcedure = (data) => {
 // 反向格式化
 const formatReProcedure = (data) => {
   let arr = []
-  if(data instanceof Array) {
-    data.forEach(item=>{
+  if (data instanceof Array) {
+    data.forEach(item => {
       switch (item) {
-        case 0: arr.push('00')
+        case 0:
+          arr.push('00')
           break
-        case 1: arr.push('10')
+        case 1:
+          arr.push('10')
           break
-        case 2: arr.push('20')
+        case 2:
+          arr.push('20')
           break
-        // case 3: arr.push('30')
-        //   break
-        case 3: arr.push('40')
+          // case 3: arr.push('30')
+          //   break
+        case 3:
+          arr.push('40')
           break
-        case 4: arr.push('50')
+        case 4:
+          arr.push('50')
           break
       }
     })
@@ -179,17 +203,24 @@ const formatReProcedure = (data) => {
 }
 
 const formatActive = (val) => {
+  let newVal
+  if (props.reportType === 'direct') {
+    newVal = val + 1
+  } else {
+    newVal = val
+  }
   let active = ''
-  val == 0 && (active = '00')
-  val == 1 && (active = '10')
-  val == 2 && (active = '20')
+  newVal == 0 && (active = '00')
+  newVal == 1 && (active = '10')
+  newVal == 2 && (active = '20')
   // val == 3 && (active = '30')
-  val == 3 && (active = '40')
-  val == 4 && (active = '50')
+  newVal == 3 && (active = '40')
+  newVal == 4 && (active = '50')
   return active
 }
 
 const stepClass = (val) => {
+  console.log('localStepSuccess.value',localStepSuccess.value,val)
   if (localStepSuccess.value.includes(val)) {
     return 'step-success'
   }
@@ -197,24 +228,45 @@ const stepClass = (val) => {
 }
 
 const handleStep = (key, index) => {
+  console.log('key, index',key, index)
   if (localStepSuccess.value.includes(index)) {
     let active = ''
     localActive.value = index
-    switch(index) {
-      case 0: active = '00'
-        break
-      case 1: active = '10'
-        break
-      case 2: active = '20'
-        break
-      // case 3: active = '30'
-      //   break
-      case 3: active = '40'
-        break
-      case 4: active = '50'
-        break
+    if (props.reportType === 'direct') {
+      switch (index) {
+        case 0:
+          active = '10'
+          break
+        case 1:
+          active = '20'
+          break
+        case 2:
+          active = '40'
+          break
+        case 3:
+          active = '50'
+          break
+      }
+    } else {
+      switch (index) {
+        case 0:
+          active = '00'
+          break
+        case 1:
+          active = '10'
+          break
+        case 2:
+          active = '20'
+          break
+        case 3:
+          active = '40'
+          break
+        case 4:
+          active = '50'
+          break
+      }
     }
-    emits('stepChange', { key, active })
+    emits('stepChange', {key, active})
     return
   }
   ElNotification({
@@ -227,10 +279,9 @@ const handleStep = (key, index) => {
 const getBaseInfo = async () => {
   const loading = ElLoading.service({fullscreen: true})
   try {
-    const { code, data } = await getBaseInfoApi(route.query.projectId)
+    const {code, data} = await getBaseInfoApi(route.query.projectId)
     localStepSuccess.value = formatProcedure(data.procedure)
     baseForm.value.setValues(data)
-    console.log(formatActive(localActive.value), 'formatActive(localActive.value)');
     emits('setDetail', formatActive(localActive.value))
     loading.close()
   } catch {
@@ -244,8 +295,8 @@ watchEffect(() => {
   localActive.value = props.active
 })
 watchEffect(() => {
-  if(props.reportType==='direct'){
-    localSteps.value=localSteps.value.slice(1)
+  if (props.reportType === 'direct') {
+    localSteps.value = localSteps.value.slice(1)
   }
 })
 </script>