pref: 网元快速安装页面重构

src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Modal, message } from 'ant-design-vue/lib';
-import { defineAsyncComponent, onMounted, reactive, ref, toRaw } from 'vue';
-import { fnToStepName, stepState } from '../hooks/useStep';
+import { Modal } from 'ant-design-vue/lib';
+import { defineAsyncComponent, onMounted, onUnmounted, reactive } from 'vue';
+import { fnRestStepState, stepState } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
-import { getNeLicenseByTypeAndID } from '@/api/ne/neLicense';
+import { codeNeLicense, stateNeLicense } from '@/api/ne/neLicense';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 const { t } = useI18n();
 const EditModal = defineAsyncComponent(
@@ -12,42 +12,62 @@ const EditModal = defineAsyncComponent(
 
 /**对象信息信息状态类型 */
 type StateType = {
-  /**是否可以下一步 */
-  stepNext: boolean;
   /**文件上传 */
   visibleByFile: boolean;
   /**授权信息数据 */
   from: {
-    id: undefined | string;
     neType: string;
     neId: string;
-    activationRequestCode: string;
-    licensePath: string;
-    reload: boolean;
+    // 下面是状态检查结果
+    expire: string;
+    sn: string;
   };
   /**确定按钮 loading */
   confirmLoading: boolean;
+  /**定时调度 */
+  timeInterval: any;
+  timeCount: number;
 };
 
 /**对象信息状态 */
 let state: StateType = reactive({
-  stepNext: false,
-  optionType: 'option',
   visibleByFile: false,
   from: {
-    id: undefined,
     neType: '',
     neId: '',
-    activationRequestCode: '',
-    licensePath: '',
-    reload: true,
+    expire: '',
+    sn: '',
   },
   confirmLoading: false,
+  timeInterval: null,
+  timeCount: 30,
 });
 
 /**对话框弹出确认执行函数*/
 function fnModalOk(e: any) {
-  Object.assign(state.from, e);
+  state.timeInterval = setInterval(() => {
+    if (state.timeCount <= 0) {
+      state.from.sn = '';
+      state.from.expire = '';
+      clearInterval(state.timeInterval);
+      state.timeInterval = null;
+      state.timeCount = 30;
+      return;
+    }
+    if (state.timeCount % 5 === 0) {
+      stateNeLicense(e.neType, e.neId).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          state.from.sn = res.data.sn;
+          state.from.expire = res.data.expire;
+
+          clearInterval(state.timeInterval);
+          state.timeInterval = null;
+          state.timeCount = 30;
+        }
+      });
+    }
+    state.timeCount--;
+  }, 1_000);
 }
 
 /**对话框弹出关闭执行函数*/
@@ -55,166 +75,84 @@ function fnModalCancel() {
   state.visibleByFile = false;
 }
 
-/**启动服务验证 */
-function fnRunCheck() {
-  if (state.confirmLoading) return;
-  const form = toRaw(state.from);
-  // if (form.licensePath === '') {
-  //   message.error(t('common.errorFields', { num: 1 }), 3);
-  //   return;
-  // }
-  state.confirmLoading = true;
-  const hide = message.loading(t('common.loading'), 0);
-  // changeNeLicense(form)
-  //   .then(res => {
-  //     if (res.code === RESULT_CODE_SUCCESS) {
-  //       message.success('网元开始进行校验', 3);
-  //       fnVerifyTask();
-  //     } else {
-  //       message.error(res.msg, 3);
-  //     }
-  //   })
-  //   .finally(() => {
-  //     hide();
-  //     state.confirmLoading = false;
-  //   });
-}
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param id id
- */
- function fnModalVisibleByTypeAndId(neType: string, neId: string) {
-  const hide = message.loading(t('common.loading'), 0);
-  getNeLicenseByTypeAndID(neType, neId)
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        Object.assign(state.from, res.data);
-        
-      } else {
-        message.error(res.msg, 3);
-      }
-    })
-    .finally(() => {
-      state.confirmLoading = false;
-      hide();
-    });
-}
-
-/**返回上一步 */
-function fnStepPrev() {
+/**结束操作 */
+function fnStepEnd() {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: '确认要放弃当前变更返回上一步吗？',
+    content: '确认要结束安装吗？',
     onOk() {
-      fnToStepName('NeInfoSoftwareInstall');
+      fnRestStepState();
     },
   });
 }
 
-/**下一步操作 */
-function fnStepNext(stepName: 'Done') {
-  if (stepName === 'Done') {
-    Modal.confirm({
-      title: t('common.tipTitle'),
-      content: '确认要结束网元安装吗？',
-      onOk() {
-        fnToStepName('Done');
-      },
-    });
-  }
-}
-
 onMounted(() => {
   const { neType, neId } = stepState.neInfo;
   if (neId) {
     state.from.neType = neType;
     state.from.neId = neId;
+    codeNeLicense(neType, neId);
   }
 });
+
+onUnmounted(() => {
+  clearInterval(state.timeInterval);
+  state.timeInterval = null;
+  state.timeCount = 30;
+});
 </script>
 
 <template>
-  <div class="ne">
-    <a-form
-      name="modalStateFrom"
-      layout="horizontal"
-      autocomplete="off"
-      :validate-on-rule-change="false"
-      :validateTrigger="[]"
-      :label-col="{ span: 3 }"
-      :wrapper-col="{ span: 12 }"
-      :label-wrap="true"
+  <a-result
+    :status="!state.from.sn ? 'info' : 'success'"
+    :title="!state.from.sn ? '是否立即授权激活' : '成功激活'"
+  >
+    <template #extra>
+      <a-button
+        type="primary"
+        :disabled="state.from.sn !== ''"
+        :loading="state.timeCount < 30"
+        @click="() => (state.visibleByFile = !state.visibleByFile)"
+      >
+        授权激活
+      </a-button>
+      <a-button
+        type="default"
+        :disabled="state.timeCount < 30"
+        @click="fnStepEnd()"
+      >
+        结束
+      </a-button>
+    </template>
+
+    <div
+      v-if="
+        state.timeInterval === null && state.timeCount === 30 && !state.from.sn
+      "
     >
-      <a-form-item label="授权申请码" name="comment" :required="true">
-        <a-input-group compact>
-          <a-input
-            v-model:value="state.from.activationRequestCode"
-            :disabled="true"
-            style="width: calc(100% - 64px)"
-          />
-          <a-tooltip title="复制">
-            <a-button type="default">
-              <template #icon><CopyOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip title="下载">
-            <a-button type="primary">
-              <template #icon><DownloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-        </a-input-group>
-      </a-form-item>
-
-      <a-form-item name="check" :wrapper-col="{ span: 14, offset: 3 }">
-        <div style="align-items: center">
-          <a-button
-            type="primary"
-            shape="round"
-            @click="fnRunCheck()"
-            :loading="state.confirmLoading"
-          >
-            <template #icon><LinkOutlined /></template>
-            授权校验
-          </a-button>
-        </div>
-      </a-form-item>
-    </a-form>
-
-    <!-- 文件上传框 -->
-    <EditModal
-      v-model:visible="state.visibleByFile"
-      :ne-type="state.from.neType"
-      :ne-id="state.from.neId"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    ></EditModal>
-
-    <div class="ne-oper">
-      <a-space direction="horizontal" :size="18">
-        <a-button type="default" danger :loading="state.confirmLoading">
-          <template #icon><ReloadOutlined /></template>
-          Refresh State
-        </a-button>
-
-        <a-button type="ghost" :loading="state.confirmLoading">
-          <template #icon><DownloadOutlined /></template>
-          Download Activation Code
-        </a-button>
-
-        <a-button type="dashed" @click="fnStepNext('Done')"> 结束 </a-button>
+      <p>授权激活可获取授权激活码，得到授权文件后上传激活</p>
+      <p>结束将返回第一步</p>
+    </div>
+    <div v-if="state.timeInterval !== null">
+      <a-space direction="horizontal" :size="16">
+        <a-spin />
+        等待网元验证 {{ state.timeCount }}s
       </a-space>
     </div>
-  </div>
+    <div v-if="state.from.sn !== ''">
+      <p style="font-size: 16px">序列号：{{ state.from.sn }}</p>
+      <p style="font-size: 16px">许可证到期时间：{{ state.from.expire }}</p>
+    </div>
+  </a-result>
+
+  <!-- 文件上传框 -->
+  <EditModal
+    v-model:visible="state.visibleByFile"
+    :ne-type="state.from.neType"
+    :ne-id="state.from.neId"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  ></EditModal>
 </template>
 
-<style lang="less" scoped>
-.ne {
-  padding-top: 12px;
-
-  &-oper {
-    padding-top: 24px;
-    text-align: end;
-  }
-}
-</style>
+<style lang="less" scoped></style>