feat:网元许可快速上传功能

2025-09-10 18:08:53 +08:00
parent cdbe9a1e42
commit 5932662e7c
4 changed files with 467 additions and 1 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -712,6 +712,10 @@ export default {
        uploadFile: "Upload License",
        uploadChangeOk: 'Network Element renewed license successfully and is being calibrated in the background!',
        uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
+        quickUpload: {
+          title: 'Quick License Upload',
+          selectNe: 'Select NE',
+        },
      },
      neConfig: {
        treeTitle: "Navigation Configuration",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -601,6 +601,10 @@ export default {
          success:'成功',
          default:'失败',
        },
+        quickUpload: {
+          title: '快速许可证上传',
+          selectNe: '选择网元',
+        },
        backConf: {
          export: '配置导出',
          import: '配置导入',
@@ -712,6 +716,10 @@ export default {
        uploadFile: "上传许可证",
        uploadChangeOk: '网元更新许可证成功，正在后台校验！',
        uploadChangeFail: "部分网元更新许可证失败，请检查服务终端环境是否可用！",
+        quickUpload: {
+          title: '快速许可证上传',
+          selectNe: '选择网元',
+        },
      },
      neConfig: {
        treeTitle: "配置导航",
--- a/src/views/ne/neLicense/components/QuickLicenseModal.vue
+++ b/src/views/ne/neLicense/components/QuickLicenseModal.vue
@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { reactive, toRaw, watch, ref } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form, Progress, Upload } from 'ant-design-vue/es';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { changeNeLicense, getNeLicenseByTypeAndID } from '@/api/ne/neLicense';
+import { uploadFile } from '@/api/tool/file';
+import useNeListStore from '@/store/modules/ne_list';
+
+const { t } = useI18n();
+const neListStore = useNeListStore();
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: {
+    selectedNeList: string[];
+    licensePath: string;
+    remark: string;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**上传文件 */
+  uploadFiles: any[];
+  /**进度显示 */
+  progress: {
+    visible: boolean;
+    current: number;
+    total: number;
+    currentNe: string;
+  };
+  /**操作结果 */
+  results: Array<{
+    neType: string;
+    neId: string;
+    neName: string;
+    success: boolean;
+    message: string;
+  }>;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: t('views.ne.neLicense.quickUpload.title'),
+  from: {
+    selectedNeList: [],
+    licensePath: '',
+    remark: '',
+  },
+  confirmLoading: false,
+  uploadFiles: [],
+  progress: {
+    visible: false,
+    current: 0,
+    total: 0,
+    currentNe: '',
+  },
+  results: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    selectedNeList: [
+      {
+        required: true,
+
+      },
+    ],
+    licensePath: [
+      {
+        required: true,
+
+      },
+    ],
+  })
+);
+
+/**获取网元列表选项 */
+const neOptions = ref<Array<{ label: string; value: string; neType: string; neId: string; neName: string }>>([]);
+
+/**
+ * 初始化网元选项
+ */
+async function initNeOptions() {
+  // 确保网元列表已加载
+  await neListStore.fnNelistRefresh();
+  // 从store获取网元列表，过滤掉OMC类型
+  const neList = neListStore.getNeList.filter((ne: any) => ne.neType !== 'OMC');
+  neOptions.value = neList.map((ne: any) => ({
+    label: `${ne.neType}-${ne.neId} (${ne.neName})`,
+    value: `${ne.neType}@${ne.neId}`,
+    neType: ne.neType,
+    neId: ne.neId,
+    neName: ne.neName,
+  }));
+}
+
+/**
+ * 单个网元许可证上传（复用EditModal的逻辑）
+ * @param neType 网元类型
+ * @param neId 网元ID
+ * @param licensePath 许可证文件路径
+ * @param remark 备注
+ * @returns Promise<{success: boolean, message: string}>
+ */
+async function uploadSingleNeLicense(neType: string, neId: string, licensePath: string, remark: string = '') {
+  try {
+    // 1. 获取网元许可证信息（复用EditModal的获取逻辑）
+    const getRes = await getNeLicenseByTypeAndID(neType, neId);
+
+    if (getRes.code !== RESULT_CODE_SUCCESS) {
+      return {
+        success: false,
+        message: ` ${getRes.msg}`,
+      };
+    }
+
+    // 2. 构建上传数据（复用EditModal的数据结构）
+    const uploadData = {
+      id: getRes.data.id,
+      neType: neType,
+      neId: neId,
+      licensePath: licensePath,
+      remark: remark,
+      reload: false, // 网元授权不允许操作重启
+    };
+
+    // 3. 上传许可证（复用EditModal的上传逻辑）
+    const uploadRes = await changeNeLicense(uploadData);
+
+    if (uploadRes.code === RESULT_CODE_SUCCESS) {
+      return {
+        success: true,
+        message: t('views.ne.neInfo.quickOam.success'),
+      };
+    } else {
+      return {
+        success: false,
+        message: ` ${uploadRes.msg}`,
+      };
+    }
+  } catch (error: any) {
+    return {
+      success: false,
+      message: ` ${error.message || error}`,
+    };
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+async function fnModalOk() {
+  try {
+    await modalStateFrom.validate();
+
+    modalState.confirmLoading = true;
+    modalState.progress.visible = true;
+    modalState.progress.current = 0;
+    modalState.progress.total = modalState.from.selectedNeList.length;
+    modalState.results = [];
+
+    const { licensePath, remark } = modalState.from;
+
+    // 循环处理每个选中的网元
+    for (let i = 0; i < modalState.from.selectedNeList.length; i++) {
+      const neInfo = modalState.from.selectedNeList[i];
+      const [neType, neId] = neInfo.split('@');
+      const neName = neOptions.value.find(opt => opt.value === neInfo)?.neName || neId;
+
+      modalState.progress.current = i + 1;
+      modalState.progress.currentNe = `${neType}-${neId}`;
+
+      // 调用单个网元许可证上传函数
+      const result = await uploadSingleNeLicense(neType, neId, licensePath, remark);
+
+      modalState.results.push({
+        neType,
+        neId,
+        neName,
+        success: result.success,
+        message: result.message,
+      });
+    }
+
+    // 显示操作结果
+    const successCount = modalState.results.filter(r => r.success).length;
+    const failCount = modalState.results.length - successCount;
+
+    if (failCount === 0) {
+      message.success(`${t('views.ne.neInfo.quickOam.success')} ${successCount} `, 5);
+    } else {
+      message.warning(`${t('views.ne.neInfo.quickOam.success')} ${successCount} ，${t('views.ne.neInfo.quickOam.default')} ${failCount} `, 5);
+    }
+
+    emit('ok');
+    fnModalCancel();
+  } catch (error: any) {
+    message.error(t('common.errorFields', { num: error.errorFields?.length || 0 }), 3);
+  } finally {
+    modalState.confirmLoading = false;
+    modalState.progress.visible = false;
+  }
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.confirmLoading = false;
+  modalState.progress.visible = false;
+  modalState.progress.current = 0;
+  modalState.progress.total = 0;
+  modalState.progress.currentNe = '';
+  modalState.results = [];
+  modalStateFrom.resetFields();
+  modalState.uploadFiles = [];
+  modalState.from.licensePath = '';
+  emit('cancel');
+  emit('update:open', false);
+}
+
+/**表单上传前删除 */
+function fnBeforeRemoveFile(file: any) {
+  modalState.from.licensePath = '';
+  return true;
+}
+
+/**表单上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  if (!file.name.endsWith('.ini')) {
+    const msg = `${t('components.UploadModal.onlyAllow')} .ini`;
+    message.error(msg, 3);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt3M = file.size / 1024 / 1024 < 3;
+  if (!isLt3M) {
+    const msg = `${t('components.UploadModal.allowFilter')} 3MB`;
+    message.error(msg, 3);
+    return Upload.LIST_IGNORE;
+  }
+  return true;
+}
+
+/**表单上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  let formData = new FormData();
+  formData.append('file', up.file);
+  formData.append('subPath', 'license');
+  uploadFile(formData)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        // 改为完成状态
+        const file = modalState.uploadFiles[0];
+        file.percent = 100;
+        file.status = 'done';
+        // 预置到表单
+        modalState.from.licensePath = res.data.filePath;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.open,
+  val => {
+    if (val) {
+      initNeOptions();
+      modalState.title = t('views.ne.neLicense.quickUpload.title');
+      modalState.openByEdit = true;
+    }
+  }
+);
+</script>
+
+<template>
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
+    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
+    :keyboard="false"
+    :mask-closable="false"
+    :open="modalState.openByEdit"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    :width="500"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFrom"
+      layout="horizontal"
+      :label-col="{ span: 8 }"
+      :labelWrap="true"
+    >
+      <a-form-item
+        :label="t('views.ne.neLicense.licensePath')"
+        name="file"
+        v-bind="modalStateFrom.validateInfos.licensePath"
+      >
+        <a-upload
+          name="file"
+          v-model:file-list="modalState.uploadFiles"
+          accept=".ini"
+          list-type="text"
+          :max-count="1"
+          :show-upload-list="{
+            showPreviewIcon: false,
+            showRemoveIcon: true,
+            showDownloadIcon: false,
+          }"
+          @remove="fnBeforeRemoveFile"
+          :before-upload="fnBeforeUploadFile"
+          :custom-request="fnUploadFile"
+          :disabled="modalState.confirmLoading"
+        >
+          <a-button type="primary">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            {{ t('views.ne.neLicense.upload') }}
+          </a-button>
+        </a-upload>
+      </a-form-item>
+
+      <a-form-item :label="t('common.remark')" name="remark">
+        <a-textarea
+          v-model:value="modalState.from.remark"
+          :maxlength="200"
+          :show-count="true"
+          :placeholder="t('common.inputPlease')"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label="t('views.ne.neLicense.quickUpload.selectNe')"
+        name="selectedNeList"
+        v-bind="modalStateFrom.validateInfos.selectedNeList"
+      >
+        <a-select
+          v-model:value="modalState.from.selectedNeList"
+          mode="multiple"
+          :options="neOptions"
+          :placeholder="t('common.selectPlease')"
+          :max-tag-count="3"
+          style="width: 100%"
+        />
+      </a-form-item>
+    </a-form>
+
+    <!-- 进度显示 -->
+    <div v-if="modalState.progress.visible" style="margin-top: 20px;">
+      <a-divider>{{ t('views.ne.neInfo.quickOam.progress') }}</a-divider>
+      <div style="margin-bottom: 10px;">
+        <span>{{ t('views.ne.neInfo.quickOam.processing') }}: {{ modalState.progress.currentNe }}</span>
+        <span style="float: right;">
+          {{ modalState.progress.current }} / {{ modalState.progress.total }}
+        </span>
+      </div>
+      <Progress
+        :percent="Math.round((modalState.progress.current / modalState.progress.total) * 100)"
+        :status="modalState.progress.current === modalState.progress.total ? 'success' : 'active'"
+      />
+    </div>
+
+    <!-- 操作结果 -->
+    <div v-if="modalState.results.length > 0" style="margin-top: 20px;">
+      <a-divider>{{ t('views.ne.neInfo.quickOam.result') }}</a-divider>
+      <div style="max-height: 200px; overflow-y: auto;">
+        <div
+          v-for="(result, index) in modalState.results"
+          :key="index"
+          style="margin-bottom: 8px; padding: 8px; border-radius: 4px;"
+          :style="{
+            backgroundColor: result.success ? '#f6ffed' : '#fff2f0',
+            border: `1px solid ${result.success ? '#b7eb8f' : '#ffccc7'}`,
+          }"
+        >
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <span>
+              <a-icon
+                :type="result.success ? 'check-circle' : 'close-circle'"
+                :style="{ color: result.success ? '#52c41a' : '#ff4d4f', marginRight: '8px' }"
+              />
+              {{ result.neType }}-{{ result.neId }} ({{ result.neName }})
+            </span>
+            <span :style="{ color: result.success ? '#52c41a' : '#ff4d4f', fontSize: '12px' }">
+              {{ result.message }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ProModal>
+</template>
+
+<style lang="less" scoped>
+.ant-progress-text {
+  color: #1890ff;
+}
+</style>
--- a/src/views/ne/neLicense/index.vue
+++ b/src/views/ne/neLicense/index.vue
@@ -16,6 +16,10 @@ const neListStore = useNeListStore();
 const EditModal = defineAsyncComponent(
  () => import('./components/EditModal.vue')
 );
+// 快速许可证上传
+const QuickLicenseModal = defineAsyncComponent(
+  () => import('./components/QuickLicenseModal.vue')
+);

 /**字典数据-状态 */
 let dictStatus = ref<DictType[]>([]);
@@ -210,7 +214,7 @@ function fnGetList(pageNum?: number) {
      tablePagination.total = totalV;
      if (
        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        (queryParams.pageNum - 1) * tablePagination.pageSize &&
        queryParams.pageNum !== 1
      ) {
        tableState.loading = false;
@@ -228,6 +232,8 @@ function fnGetList(pageNum?: number) {
 type ModalStateType = {
  /**新增框或修改框是否显示 */
  openByEdit: boolean;
+  /**快速许可证上传框是否显示 */
+  openByQuickUpload: boolean;
  /**授权记录ID */
  licenseId: number;
  /**确定按钮 loading */
@@ -237,6 +243,7 @@ type ModalStateType = {
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
  openByEdit: false,
+  openByQuickUpload: false,
  licenseId: 0,
  confirmLoading: false,
 });
@@ -270,6 +277,7 @@ function fnModalOk(e: any) {
 */
 function fnModalCancel() {
  modalState.openByEdit = false;
+  modalState.openByQuickUpload = false;
  modalState.licenseId = 0;
 }

@@ -410,6 +418,14 @@ onMounted(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8" align="center">
+          <a-button
+            type="primary"
+            :loading="modalState.confirmLoading"
+            @click.prevent="modalState.openByQuickUpload = true"
+          >
+            <template #icon><UploadOutlined /></template>
+            {{ t('views.ne.neLicense.quickUpload.title') }}
+          </a-button>
          <a-button
            type="default"
            :loading="modalState.confirmLoading"
@@ -514,6 +530,13 @@ onMounted(() => {
      @ok="fnModalOk"
      @cancel="fnModalCancel"
    ></EditModal>
+
+    <!-- 快速许可证上传框 -->
+    <QuickLicenseModal
+      v-model:open="modalState.openByQuickUpload"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    ></QuickLicenseModal>
  </PageContainer>
 </template>