fe.ems.vue3/src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue

<script setup lang="ts">
import { Modal } from 'ant-design-vue/lib';
import { defineAsyncComponent, onMounted, onUnmounted, reactive } from 'vue';
import { fnRestStepState, fnToStepName, stepState } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n';
import { codeNeLicense, stateNeLicense } from '@/api/ne/neLicense';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n();
const EditModal = defineAsyncComponent(
  () => import('../../../ne/neLicense/components/EditModal.vue')
);

/**对象信息信息状态类型 */
type StateType = {
  /**文件上传 */
  visibleByFile: boolean;
  /**授权信息数据 */
  from: {
    neType: string;
    neId: string;
    // 下面是状态检查结果
    expire: string;
    sn: string;
  };
  /**确定按钮 loading */
  confirmLoading: boolean;
  /**定时调度 */
  timeInterval: any;
  timeCount: number;
};

/**对象信息状态 */
let state: StateType = reactive({
  visibleByFile: false,
  from: {
    neType: '',
    neId: '',
    expire: '',
    sn: '',
  },
  confirmLoading: false,
  timeInterval: null,
  timeCount: 30,
});

/**对话框弹出确认执行函数*/
function fnModalOk(e: any) {
  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);
}

/**对话框弹出关闭执行函数*/
function fnModalCancel() {
  state.visibleByFile = false;
}

/**结束操作 */
function fnStepEnd() {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: '确认要结束安装吗？',
    onOk() {
      fnRestStepState();
    },
  });
}

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>
  <a-result
    :status="!state.from.sn ? 'info' : 'success'"
    :title="
      t(
        !state.from.sn
          ? 'views.ne.neQuickSetup.licenseResultTitle'
          : 'views.ne.neQuickSetup.licenseResultTitleOk'
      )
    "
  >
    <template #extra>
      <a-button
        type="primary"
        :disabled="state.from.sn !== ''"
        :loading="state.timeCount < 30"
        @click="() => (state.visibleByFile = !state.visibleByFile)"
      >
        {{ t('views.ne.neQuickSetup.licenseUpload') }}
      </a-button>
      <a-button
        type="default"
        :disabled="state.timeCount < 30"
        @click="fnStepEnd()"
      >
        {{ t('views.ne.neQuickSetup.licenseEnd') }}
      </a-button>
    </template>

    <div
      v-if="
        state.timeInterval === null && state.timeCount === 30 && !state.from.sn
      "
    >
      <p>{{ t('views.ne.neQuickSetup.licenseTip1') }}</p>
      <p>{{ t('views.ne.neQuickSetup.licenseTip2') }}</p>
    </div>
    <div v-if="state.timeInterval !== null">
      <a-space direction="horizontal" :size="16">
        <a-spin />
        {{ t('views.ne.neQuickSetup.licenseCheack') }} {{ state.timeCount }}s
      </a-space>
    </div>
    <div v-if="state.from.sn !== ''" style="font-size: 16px">
      <p>{{ t('views.ne.common.serialNum') }}：{{ state.from.sn }}</p>
      <p>{{ t('views.ne.common.expiryDate') }}：{{ 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></style>