EDFS-EPM/src/views/engineering/config/index.vue

<template>
  <div class="engineering-config h-full flex flex-col bg-white">
    <div class="border-b border-gray-200">
      <div class="px-6 py-4">
        <el-page-header @back="goBack" title="返回">
          <template #content>
            <div class="flex flex-col gap-1">
              <div class="flex items-center gap-3">
                <span class="text-xl font-bold text-gray-900">{{
                  projectName || '未命名工程'
                }}</span>
                <el-tag type="success" v-if="projectVersion">{{ projectVersion }}</el-tag>
              </div>
              <span class="text-xs text-gray-500">工程配置</span>
            </div>
          </template>
        </el-page-header>
      </div>

      <div class="px-6 pb-4">
        <div class="w-full">
          <el-steps :active="activeStep" finish-status="success" simple align-center>
            <el-step title="通道管理" :icon="Connection" />
            <el-step title="设备类别" :icon="Collection" />
            <el-step title="设备管理" :icon="Monitor" />
          </el-steps>
        </div>
      </div>
    </div>

    <div class="flex-1 overflow-hidden flex flex-col">
      <div class="flex-1 overflow-hidden p-6">
        <transition name="fade" mode="out-in">
          <keep-alive>
            <component
              :is="currentStepComponent"
              v-model="currentModel"
              v-bind="currentProps"
            />
          </keep-alive>
        </transition>
      </div>

      <div class="p-4 border-t border-gray-100 flex justify-center gap-4 bg-white">
        <el-button v-if="activeStep > 0" @click="prevStep" :icon="ArrowLeft"
          >上一步</el-button
        >
        <el-button v-if="activeStep < 2" type="primary" @click="nextStep">
          下一步<el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
        <el-button
          v-if="activeStep === 2"
          type="success"
          @click="handleFinish"
          :icon="Check"
          >完成</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Connection,
  Collection,
  Monitor,
  ArrowLeft,
  ArrowRight,
  Check,
} from '@element-plus/icons-vue'
import StepChannel from './components/StepChannel.vue'
import StepDeviceCategory from './components/StepDeviceCategory.vue'
import StepDevice from './components/StepDevice.vue'

import type { IChannel } from '@/api/module/channel/index.d'
import type { IDevice, IDeviceCategory } from '@/api/module/device/index.d'

const router = useRouter()
const route = useRoute()

const projectName = computed(() => route.query.name as string)
const projectVersion = computed(() => route.query.version as string)

const activeStep = ref(0)
const channels = ref<IChannel[]>([])
const categories = ref<IDeviceCategory[]>([])
const devices = ref<IDevice[]>([])

const currentStepComponent = computed(() => {
  switch (activeStep.value) {
    case 0:
      return StepChannel
    case 1:
      return StepDeviceCategory
    case 2:
      return StepDevice
    default:
      return null
  }
})

const currentModel = computed({
  get: () => {
    switch (activeStep.value) {
      case 0:
        return channels.value
      case 1:
        return categories.value
      case 2:
        return devices.value
      default:
        return []
    }
  },
  set: (val: any) => {
    switch (activeStep.value) {
      case 0:
        channels.value = val
        break
      case 1:
        categories.value = val
        break
      case 2:
        devices.value = val
        break
    }
  },
})

const currentProps = computed(() => {
  if (activeStep.value === 2) {
    return {
      channels: channels.value,
      categories: categories.value,
    }
  }
  return {}
})

const goBack = () => {
  router.push('/engineering')
}

const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

const nextStep = () => {
  activeStep.value++
}

const handleFinish = () => {
  ElMessage.success('配置完成')
  goBack()
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

:deep(.el-page-header__back) {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

:deep(.el-page-header__back:hover) {
  background-color: rgba(64, 158, 255, 0.1);
  color: var(--el-color-primary);
}

:deep(.el-page-header__back:active) {
  background-color: rgba(64, 158, 255, 0.2);
  transform: scale(0.95);
}
:deep(.el-steps--simple) {
  padding-left: 16%;
}
</style>