pref: 重构网元安装页面流程

src/views/ne/neQuickSetup/hooks/useStep.ts

@@ -2,65 +2,123 @@ import { reactive } from 'vue';
 
 /**步骤信息状态类型 */
 type StepStateType = {
-  /**当前选中 */
+  /**步骤名称 */
+  stepName: string;
+  /**安装网元步骤信息 */
+  steps: any[];
+  /**安装网元步骤当前选中 */
   current: number;
-  /**步骤项 */
+  /**连接主机 */
-  steps: {
+  neHost: Record<string, any>;
-    title: string;
+  /**网元信息 */
-    description: string;
+  neInfo: Record<string, any>;
-  }[];
-  /**步骤下一步 */
-  stepNext: boolean;
-  /**步骤信息状态 */
-  states: any[];
 };
 
 /**步骤信息状态 */
 export const stepState: StepStateType = reactive({
-  current: 0,
+  stepName: 'Start',
   steps: [
     {
-      title: '环境检查',
+      title: '服务器环境',
-      description: '服务器检查，触发免密脚本',
+      description: '服务端与网元服务',
     },
     {
-      title: '网元信息',
+      title: '配置网元信息',
-      description: '记录下所安装网元基础信息',
+      description: '网元信息设置',
     },
     {
-      title: '网元安装',
+      title: '网元软件安装',
-      description: '安装包上传执行安装启动服务等待10秒停止服务',
+      description: '软件安装到服务端',
     },
     {
-      title: '网元配置',
+      title: '网元授权激活',
-      description: '修改网元的配置文件',
+      description: '网元服务授权激活',
-    },
-    {
-      title: '网元激活',
-      description: '获取激活码和上传授权文件，启动验证激活码',
-    },
-    {
-      title: '完成安装',
-      description: '获取网元服务状态',
     },
   ],
-  stepNext: false,
+  current: 0,
-  states: [],
+  neHost: {},
+  neInfo: {},
 });
 
 /**步骤信息状态复位 */
 export function fnRestStepState() {
+  stepState.stepName = 'Start';
   stepState.current = 0;
-  stepState.stepNext = false;
+  stepState.neHost = {};
-  stepState.states = [];
+  stepState.neInfo = {};
 }
 
-export function fnStepNext() {
+/**跳转步骤组件 */
-  stepState.current++;
+export function fnToStepName(stepName: string) {
-  stepState.stepNext = false;
+  stepState.current = [
+    'Start',
+    'NeInfoConfig',
+    'NeInfoSoftwareInstall',
+    'NeInfoSoftwareLicense',
+  ].indexOf(stepName);
+
+  stepState.stepName = stepName;
 }
 
-export function fnStepPrev() {
+// import { reactive } from 'vue';
-  stepState.current--;
+
-  stepState.stepNext = true;
+// /**步骤信息状态类型 */
-}
+// type StepStateType = {
+//   /**当前选中 */
+//   current: number;
+//   /**步骤项 */
+//   steps: {
+//     title: string;
+//     description: string;
+//   }[];
+//   /**步骤下一步 */
+//   stepNext: boolean;
+//   /**步骤信息状态 */
+//   states: any[];
+// };
+
+// /**步骤信息状态 */
+// export const stepState: StepStateType = reactive({
+//   current: 0,
+//   steps: [
+//     {
+//       title: '网元信息',
+//       description: '网元基础信息',
+//     },
+//     {
+//       title: '网元安装',
+//       description: '执行安装启动服务等待10秒停止服务',
+//     },
+//     {
+//       title: '网元配置',
+//       description: '修改网元的配置文件',
+//     },
+//     {
+//       title: '网元激活',
+//       description: '获取激活码和上传授权文件',
+//     },
+//     {
+//       title: '完成安装',
+//       description: '获取网元服务状态',
+//     },
+//   ],
+//   stepNext: false,
+//   states: [],
+// });
+
+// /**步骤信息状态复位 */
+// export function fnRestStepState() {
+//   stepState.current = 0;
+//   stepState.stepNext = false;
+//   stepState.states = [];
+// }
+
+// export function fnStepNext() {
+//   stepState.current++;
+//   stepState.stepNext = false;
+// }
+
+// export function fnStepPrev() {
+//   stepState.current--;
+//   stepState.stepNext = true;
+// }

src/views/ne/neQuickSetup/index.vue

@@ -1,134 +1,49 @@
 <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';
+import { stepState, fnRestStepState } from './hooks/useStep';
 
 // 异步加载组件
-const StepCheck = defineAsyncComponent(
+const Start = defineAsyncComponent(
-  () => import('./components/StepCheck.vue')
+  () => import('./components/NeInfoSoftwareLicense.vue')
 );
 
 // 当前组件
-const currentComponent = shallowRef(StepCheck);
+const currentComponent = shallowRef(Start);
 
 watch(
-  () => stepState.current,
+  () => stepState.stepName,
   v => {
-    if (v === 0) {
+    const loadComponent = defineAsyncComponent(
-      currentComponent.value = StepCheck;
+      () => import(`./components/${v}.vue`)
-      return;
+    );
-    }
+    currentComponent.value = loadComponent;
-    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(()=>{
+onMounted(() => {
-  fnRestStepState()
+  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 }}
+        <a-steps :current="stepState.current" direction="horizontal">
-          Check, NeInfo, Install, Config, Activate, Finish
+          <a-step
-        </div>
+            v-for="s in stepState.steps"
-      </template>
+            :key="s.title"
-
+            :title="s.title"
-      <!-- 插槽-卡片右侧 -->
+            :description="s.description"
-      <template #extra>
+            :disabled="true"
-        <a-space :size="8" align="center">
+          />
-          <a-button
+        </a-steps>
-            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>
 
       <!-- 步骤页面 -->
@@ -137,10 +52,4 @@ onMounted(()=>{
   </PageContainer>
 </template>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-.pane-box {
-  padding: 16px;
-  height: calc(100vh - 320px);
-  overflow-x: hidden;
-}
-</style>