feat: 网元快速安装页面模块化

src/views/tool/neQuickSetup/index.vue

@@ -1,96 +1,99 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal } from 'ant-design-vue/lib';
-import TerminalSSH from '@/components/TerminalSSH/index.vue';
-import TerminalTelnet from '@/components/TerminalTelnet/index.vue';
+import { Modal, message } from 'ant-design-vue/lib';
+import StepCheck from './components/StepCheck.vue';
+import StepInstall from './components/StepInstall.vue';
+import StepConfig from './components/StepConfig.vue';
+import StepActivate from './components/StepActivate.vue';
+import StepFinish from './components/StepFinish.vue';
 import { reactive, toRaw } from 'vue';
 import { parseDuration } from '@/utils/date-utils';
 import { listNeHost } from '@/api/ne/neHost';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { useRouter } from 'vue-router';
+import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const router = useRouter();
-
-/**安装步骤信息状态类型 */
-type SetupStateType = {
-  /**步骤下标 */
-  stepIndex: number;
-  /**加载等待 */
-  loading: boolean;
-  /**查询参数 */
-  params: {
-    pageNum: number;
-    pageSize: number;
-  };
-  /**数据总数 */
-  total: number;
-  data: Record<string, any>[];
-};
-
-/**主机对象信息状态 */
-const setupState: SetupStateType = reactive({
-  stepIndex: 0,
-  loading: false,
-  params: {
-    pageNum: 1,
-    pageSize: 20,
-  },
-  total: 0,
-  data: [],
-});
-
- 
-
-/**标签对象信息状态类型 */
-type TabStateType = {
-  /**激活选中 */
-  activeKey: string;
-  /**页签数据 */
-  panes: {
-    id: string;
-    status: boolean;
-    host: Record<string, any>;
-    connectStamp?: string;
-  }[];
-};
-
-/**标签对象信息状态 */
-const tabState: TabStateType = reactive({
-  activeKey: '0',
-  panes: [
-    {
-      id: '0',
-      host: {
-        hostId: '0',
-        title: t('views.tool.terminal.start'),
-        type: '0',
-      },
-      status: true,
-    },
-  ],
-});
-
- 
- 
 </script>
 
 <template>
   <PageContainer>
-    <a-card
-      :bordered="false"
-      :body-style="{ marginBottom: '24px'  }"
-    >
-      <a-steps v-model:current="setupState.stepIndex">
-        <a-step title="Step 1" description="This is a description." />
-        <a-step title="Step 2" description="This is a description." />
-        <a-step title="Step 3" description="This is a description." />
-        <a-step title="Step 3" description="This is a description." />
+    <!-- 步骤进度 -->
+    <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' }">
-     
+    <a-card
+      :bordered="false"
+      :body-style="{ padding: '12px', minHeight: '450px' }"
+    >
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <div>
+          {{ stepState.steps[stepState.current].title }}
+          Check, 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>
+
+      <!-- 步骤页面 -->
+      <StepCheck
+        v-if="stepState.current === 0"
+        :state="stepState.states[stepState.current]"
+        @next="e => fnStepNext(e)"
+      ></StepCheck>
+      <StepInstall
+        v-if="stepState.current === 1"
+        @next="fnStepNext"
+      ></StepInstall>
+      <StepConfig
+        v-if="stepState.current === 2"
+        @next="fnStepNext"
+      ></StepConfig>
+      <StepActivate
+        v-if="stepState.current === 3"
+        @next="fnStepNext"
+      ></StepActivate>
+      <StepFinish
+        v-if="stepState.current === 4"
+        @next="fnStepNext"
+      ></StepFinish>
     </a-card>
   </PageContainer>
 </template>