style: 移动网元快速安装到ne目录

src/views/ne/neQuickSetup/index.vue

@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import { PageContainer } from 'antdv-pro-layout';
+import { message } from 'ant-design-vue/lib';
+import { defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
+import { stepState, fnStepPrev, fnStepNext, fnRestStepState } from './hooks/useStep';
+
+// 异步加载组件
+const StepCheck = defineAsyncComponent(
+  () => import('./components/StepCheck.vue')
+);
+
+// 当前组件
+const currentComponent = shallowRef(StepCheck);
+
+watch(
+  () => stepState.current,
+  v => {
+    if (v === 0) {
+      currentComponent.value = StepCheck;
+      return;
+    }
+    if (v === 1) {
+      const StepNeInfo = defineAsyncComponent(
+        () => import('./components/StepNeInfo.vue')
+      );
+      currentComponent.value = StepNeInfo;
+      return;
+    }
+    if (v === 2) {
+      const StepInstall = defineAsyncComponent(
+        () => import('./components/StepInstall.vue')
+      );
+      currentComponent.value = StepInstall;
+      return;
+    }
+    if (v === 3) {
+      // 读取第二步的网元信息
+      const stepNeInfo = stepState.states[1].from;
+      if (stepNeInfo.neType === 'SMF') {
+        const StepConfigSMF = defineAsyncComponent(
+          () => import('./components/StepConfigSMF.vue')
+        );
+        currentComponent.value = StepConfigSMF;
+      } else if (stepNeInfo.neType === 'AMF') {
+        const StepConfigText = defineAsyncComponent(
+          () => import('./components/StepConfigText.vue')
+        );
+        currentComponent.value = StepConfigText;
+      } else {
+        const StepConfig = defineAsyncComponent(
+          () => import('./components/StepConfig.vue')
+        );
+        currentComponent.value = StepConfig;
+      }
+      return;
+    }
+    if (v === 4) {
+      const StepActivate = defineAsyncComponent(
+        () => import('./components/StepActivate.vue')
+      );
+      currentComponent.value = StepActivate;
+      return;
+    }
+    if (v === 5) {
+      const StepFinish = defineAsyncComponent(
+        () => import('./components/StepFinish.vue')
+      );
+      currentComponent.value = StepFinish;
+      return;
+    }
+  }
+);
+
+onMounted(()=>{
+  fnRestStepState()
+})
+</script>
+
+<template>
+  <PageContainer>
+    <!-- 步骤进度 -->
+    <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
+      <a-steps :current="stepState.current" direction="horizontal">
+        <a-step
+          v-for="s in stepState.steps"
+          :key="s.title"
+          :title="s.title"
+          :description="s.description"
+          :disabled="true"
+        />
+      </a-steps>
+    </a-card>
+
+    <a-card
+      :bordered="false"
+      :body-style="{ padding: '12px', minHeight: '450px' }"
+    >
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <div>
+          {{ stepState.steps[stepState.current].title }}
+          Check, NeInfo, Install, Config, Activate, Finish
+        </div>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-button
+            v-if="stepState.current > 0"
+            style="margin-left: 8px"
+            @click="fnStepPrev()"
+          >
+            上一步
+          </a-button>
+          <a-button
+            v-if="stepState.current < stepState.steps.length - 1"
+            type="primary"
+            :disabled="!stepState.stepNext"
+            @click="fnStepNext()"
+          >
+            下一步
+          </a-button>
+          <a-button
+            v-if="stepState.current == stepState.steps.length - 1"
+            type="primary"
+            @click="message.success('Processing complete!')"
+          >
+            完成
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 步骤页面 -->
+      <component :is="currentComponent" />
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.pane-box {
+  padding: 16px;
+  height: calc(100vh - 320px);
+  overflow-x: hidden;
+}
+</style>