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

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

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

/**对象信息状态 */
let state: StateType = reactive({
  openByFile: false,
  from: {
    neUid: '',
    neType: '',
    // 下面是状态检查结果
    expire: '',
    sn: '',
    ueNumber: '',
    nbNumber: '',
  },
  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) {
      getNeInfo(stepState.neInfo.id).then(res => {
        if (res.code === RESULT_CODE_SUCCESS && res.data) {
          state.from.sn = res.data.serialNum;
          state.from.expire = res.data.expiryDate;
          state.from.ueNumber = res.data.ueNumber;
          state.from.nbNumber = res.data.ueNumber;

          clearInterval(state.timeInterval);
          state.timeInterval = null;
          state.timeCount = 30;
        }
      });
    }
    state.timeCount--;
  }, 1_000);
}

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

/**结束操作 */
function fnStepEnd() {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.ne.neQuickSetup.licenseEndTip'),
    onOk() {
      fnRestStepState(t);
    },
  });
}

onMounted(() => {
  const { id, neUid } = stepState.neInfo;
  if (id && neUid) {
    state.from.neUid = neUid;
    state.confirmLoading = true;
    getNeInfo(id)
      .then(res => {
        if (res.code === RESULT_CODE_SUCCESS && res.data) {
          state.from.sn = res.data.serialNum;
          state.from.expire = res.data.expiryDate;
        } else {
          return codeNeLicense(neUid);
        }
      })
      .finally(() => {
        state.confirmLoading = false;
      });
  }
});

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 || state.confirmLoading"
        @click="() => (state.openByFile = !state.openByFile)"
      >
        {{ t('views.ne.neQuickSetup.licenseUpload') }}
      </a-button>
      <a-button
        type="default"
        :disabled="state.timeCount < 30 || state.confirmLoading"
        @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.neType') }}：{{ state.from.neType }}</p>
      <p>{{ t('views.ne.common.neUid') }}：{{ state.from.neUid }}</p>
      <p>{{ t('views.ne.common.serialNum') }}：{{ state.from.sn }}</p>
      <p>{{ t('views.ne.common.expiryDate') }}：{{ state.from.expire }}</p>
      <p>{{ t('views.ne.common.ueNumber') }}：{{ state.from.ueNumber }}</p>
      <p>{{ t('views.ne.common.nbNumber') }}：{{ state.from.nbNumber }}</p>
    </div>
  </a-result>

  <!-- 许可证上传框 -->
  <EditModal
    v-model:open="state.openByFile"
    :ne-type="state.from.neType"
    :ne-uid="state.from.neUid"
    :reload="true"
    @ok="fnModalOk"
    @cancel="fnModalCancel"
  ></EditModal>
</template>

<style lang="less" scoped></style>