feat: 需求上报详情

src/components/steps/api/index.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export const getBaseInfoApi = (projectId) => {
+  return request({
+    url: '/workflow/details/info/'+projectId,
+    method: 'get',
+  })
+}
+
+export const getMapProjectStateInfo = (projectId, state) => {
+  return request({
+    url: `/workflow/details/${projectId}/${state}`,
+    method: 'get'
+  })
+}

src/components/steps/index.vue

@@ -1,27 +1,34 @@
 <template>
+  <baseTitle title="基础信息"></baseTitle>
+  <fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm>
+  <baseTitle title="各流程信息"></baseTitle>
   <div class="steps-box">
-    <el-steps :active="localActive">
+    <el-steps :active="localActive" finish-status="success">
       <el-step 
-        v-for="(item, index) in localSteps"
-        :key="item.key"
-        :title="item.title"
+        v-for="(item, index) in localSteps" 
+        :key="item.key" 
+        :title="item.title" 
         :class="stepClass(index)"
-        @click="handleStep(item.key, index)"
-      ></el-step>
+        @click="handleStep(item.key, index)" 
+        
+      />
     </el-steps>
   </div>
 
   <!-- 步骤内容 -->
   <div>
-    <template v-for="(item, index) in stepList" :key="item.key" >
-      <component v-show="localActive == index" :is="item.component"/>
-    </template>
+    <slot name="content" :localActive="localActive"></slot>
+    <!-- <template v-for="(item, index) in stepList" :key="item.key">
+      <component v-if="localActive == index" v-bind="item.props || {}" :is="item.component" />
+    </template> -->
   </div>
 </template>
 
 <script setup lang="jsx">
-import { ElNotification } from 'element-plus';
-import { computed, ref, watchEffect } from 'vue';
+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
@@ -37,13 +44,20 @@ const props = defineProps({
   // 已完成的工作流步骤
   stepSuccess: {
     type: Array,
-    default: [0]
+    default: ['00']
   }
 })
 
-const emits = defineEmits(['stepChange'])
+const route = useRoute()
+
+const emits = defineEmits(['stepChange', 'setDetail'])
+
+const localData = reactive({
+
+})
 
 const localActive = ref(0) // 当前激活步骤
+
 const localSteps = ref([
   {
     title: '需求征集',
@@ -67,17 +81,133 @@ const localSteps = ref([
   },
 ])
 
+const baseForm = ref()
+
+const schema = computed(()=>{
+  return [
+    {
+      label: '所属公司',
+      prop: 'affiliatedCompany',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+    {
+      label: '征集类型',
+      prop: 'collectType',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+    {
+      label: '截止时间',
+      prop: 'deadline',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+    {
+      label: '需求名称',
+      prop: 'requirementName',
+      colProps: {
+        span: 12
+      }
+      // component: 
+    },
+  ]
+})
+
+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(4)
+          break
+      }
+    })
+  }
+  return arr
+}
+
+// 反向格式化
+const formatReProcedure = (data) => {
+  let arr = []
+  if(data instanceof Array) {
+    data.forEach(item=>{
+      switch (item) {
+        case 0: arr.push('00')
+          break
+        case 1: arr.push('10')
+          break
+        case 2: arr.push('20')
+          break
+        case 3: arr.push('30')
+          break
+        case 4: arr.push('40')
+          break
+      }
+    })
+  }
+}
+
+const formatActive = (val) => {
+  console.log(val, 'val');
+  let active = ''
+  switch(val) {
+    case '0' || 0 : active = '00'
+      break
+    case '1' || 1 : active = '10'
+      break
+    case '2' || 2 : active = '20'
+      break
+    case '3' || 3 : active = '30'
+      break
+    case '4' || 4 : active = '40'
+      break
+  }
+  console.log(active, 'active--');
+  return active
+}
+
 const stepClass = (val) => {
-  if(props.stepSuccess.includes(val)) {
+  if (localStepSuccess.value.includes(val)) {
     return 'step-success'
   }
   return 'step-error'
 }
 
 const handleStep = (key, index) => {
-  if(props.stepSuccess.includes(index)) {
+  if (localStepSuccess.value.includes(index)) {
+    let active = ''
     localActive.value = index
-    emits('stepChange', {key, active: index})
+    switch(index) {
+      case 0: active = '00'
+        break
+      case 1: active = '10'
+        break
+      case 2: active = '20'
+        break
+      case 3: active = '30'
+        break
+      case 4: active = '40'
+        break
+    }
+    emits('stepChange', { key, active })
     return
   }
   ElNotification({
@@ -87,18 +217,37 @@ const handleStep = (key, index) => {
   })
 }
 
-watchEffect(()=>{
+const getBaseInfo = async () => {
+  const loading = ElLoading.service({fullscreen: true})
+  try {
+    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 {
+    loading.close()
+  }
+}
+
+getBaseInfo()
+
+watchEffect(() => {
+  console.log(props.active, 'props.active');
   localActive.value = props.active
 })
 </script>
 
 <style lang="scss" scoped>
-.steps-box{
+.steps-box {
   padding: 10px 0;
 }
+
 .step-success {
   cursor: pointer;
 }
+
 .step-error {
   cursor: not-allowed;
 }