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)"

      >
        <template #icon>
          <el-icon style="font-size: 20px;" :class="index == localActive ? 'is-active' : 'is-end'" v-if="localStepSuccess.includes(index)"><SuccessFilled /></el-icon>
          <el-icon style="font-size: 20px; color: gray;" v-else><WarningFilled /></el-icon>
        </template>
      </el-step>
    </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']
  },
  //直接上报/需求征集
  reportType: {
    type: String,
    default: ''
  }
})

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',
  },
  // {
  //   title: '项目结项',
  //   key: 'end',
  // },
])

const baseForm = ref()

const schema = computed(() => {
  return [
    {
      label: '征集名称',
      prop: 'requirementName',
      colProps: {
        span: 12
      }
    },
    {
      label: '所属公司',
      prop: 'affiliatedCompany',
      colProps: {
        span: 12
      }
    },
    {
      label: '项目名称',
      prop: 'projectName',
      colProps: {
        span: 12
      }
    }

  ]
})

const localStepSuccess = ref([])

// 格式化详情步骤条
const formatProcedure = (data) => {
  let arr = []
  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
}

// 反向格式化
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 3:
          arr.push('40')
          break
        case 4:
          arr.push('50')
          break
      }
    })
  }
}

const formatActive = (val) => {
  let newVal
  if (props.reportType === 'direct') {
    newVal = val + 1
  } else {
    newVal = val
  }
  let active = ''
  newVal == 0 && (active = '00')
  newVal == 1 && (active = '10')
  newVal == 2 && (active = '20')
  // val == 3 && (active = '30')
  newVal == 3 && (active = '40')
  newVal == 4 && (active = '50')
  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
    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})
    return
  }
  ElNotification({
    title: '提示',
    message: '不能查看未完成的工作流信息',
    type: 'warning'
  })
}

const getBaseInfo = async () => {
  const loading = ElLoading.service({fullscreen: true})
  try {
    const {code, data} = await getBaseInfoApi(route.query.projectId)
    // console.log('data.procedure',data.procedure,route.query.step)
    if(route.query.step==='40'){
      if(data.procedure.indexOf('40')==-1){
        data.procedure.push('40')
      }
    }else if(route.query.step==='50'){
      if(data.procedure.indexOf('50')==-1){
        data.procedure.push('50')
      }
    }
    localStepSuccess.value = formatProcedure(data.procedure)
    baseForm.value.setValues(data)
    emits('setDetail', formatActive(localActive.value))
    loading.close()
  } catch {
    loading.close()
  }
}

getBaseInfo()

watchEffect(() => {
  localActive.value = props.active
})
watchEffect(() => {
  if (props.reportType === 'direct') {
    localSteps.value = localSteps.value.slice(1)
  }
})
</script>

<style lang="scss" scoped>
.steps-box {
  padding: 10px 0;
}

.step-success {
  cursor: pointer;
}

.step-error {
  cursor: not-allowed;
}
.is-active {
  color: #BEA266;
}
.is-end {
  color: #67c23a;
}
</style>