mosr-web/src/components/steps/index.vue

<template>
  <baseTitle title="基础信息"></baseTitle>
  <fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm>
  <baseTitle title="各流程信息"></baseTitle>
  <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)"

      />
    </el-steps>
  </div>

  <!-- 步骤内容 -->
  <div>
    <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 { 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
  stepList: {
    type: Array,
    default: []
  },
  // 当前显示步骤
  active: {
    type: Number,
    default: '0'
  },
  // 已完成的工作流步骤
  stepSuccess: {
    type: Array,
    default: ['00']
  }
})

const route = useRoute()

const emits = defineEmits(['stepChange', 'setDetail'])

const localData = reactive({

})

const localActive = ref(0) // 当前激活步骤

const localSteps = ref([
  {
    title: '需求征集',
    key: 'collect',
  },
  {
    title: '需求上报',
    key: 'report',
  },
  {
    title: '项目立项',
    key: 'approve',
  },
  {
    title: '项目实施',
    key: 'execute',
  },
  {
    title: '项目归档',
    key: 'archivist',
  },
])

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' : active = '00'
  //     break
  //   case '1' : active = '10'
  //     break
  //   case '2' : active = '20'
  //     break
  //   case '3' : active = '30'
  //     break
  //   case '4' : active = '40'
  //     break
  // }
  val == 0 && (active = '00')
  val == 1 && (active = '10')
  val == 2 && (active = '20')
  val == 3 && (active = '30')
  val == 4 && (active = '40')
  console.log(active, 'active--');
  return active
}

const stepClass = (val) => {
  if (localStepSuccess.value.includes(val)) {
    return 'step-success'
  }
  return 'step-error'
}

const handleStep = (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 4: active = '40'
        break
    }
    emits('stepChange', { key, active })
    return
  }
  ElNotification({
    title: '提示',
    message: '不能查看未完成的工作流信息',
    type: 'warning'
  })
}

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 {
  padding: 10px 0;
}

.step-success {
  cursor: pointer;
}

.step-error {
  cursor: not-allowed;
}
</style>