feat:网元信息快速OAM功能

src/i18n/locales/en-US.ts

@@ -590,6 +590,17 @@ export default {
           kpiTimerPlease: 'Please enter the reporting period (in seconds)',
           omcIP: 'OMC IP',
         },
+        quickOam: {
+          title: 'Quick OAM Configuration',
+          selectNe: 'Select NE',
+          omcIP: 'OMC IP',
+          oamPort: 'OAM Port',
+          progress:'Progress',
+          processing:'Progressing',
+          result:'Result',
+          success:'Success',
+          default:'Default',
+        },
         backConf: {
           export: 'Config Export',
           import: 'Config Import',

src/i18n/locales/zh-CN.ts

@@ -590,6 +590,17 @@ export default {
           kpiTimerPlease: '请输入上报周期（单位秒）',
           omcIP: 'OMC IP',
         },
+        quickOam: {
+          title: '快速OAM配置',
+          selectNe: '选择网元',
+          omcIP: 'OMC IP地址',
+          oamPort: 'OAM端口',
+          progress:'配置进度',
+          processing:'正在处理',
+          result:'操作结果',
+          success:'成功',
+          default:'失败',
+        },
         backConf: {
           export: '配置导出',
           import: '配置导入',

src/views/ne/neInfo/components/QuickOAMModal.vue

@@ -0,0 +1,408 @@
+<script setup lang="ts">
+import { reactive, toRaw, watch, ref } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form, Progress } from 'ant-design-vue/es';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { getOAMFile, saveOAMFile, serviceNeAction } from '@/api/ne/neInfo';
+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[];
+    omcIP: string;
+    oamPort: number;
+    restart: boolean;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**进度显示 */
+  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: '快速OAM配置',
+  from: {
+    selectedNeList: [],
+    omcIP: '127.0.0.1',
+    oamPort: 33030,
+    restart: false,
+  },
+  confirmLoading: false,
+  progress: {
+    visible: false,
+    current: 0,
+    total: 0,
+    currentNe: '',
+  },
+  results: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    selectedNeList: [
+      {
+        required: true,
+        message: t('views.ne.neInfo.quickOam.selectNe'),
+      },
+    ],
+    omcIP: [
+      {
+        required: true,
+
+      },
+      {
+        pattern: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
+
+      },
+    ],
+    oamPort: [
+      {
+        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,
+  }));
+}
+
+/**
+ * 单个网元OAM配置（复用OAMModal的逻辑）
+ * @param neType 网元类型
+ * @param neId 网元ID
+ * @param omcIP OMC IP地址
+ * @param oamPort OAM端口
+ * @param restart 是否重启网元
+ * @returns Promise<{success: boolean, message: string}>
+ */
+async function configureSingleNeOAM(neType: string, neId: string, omcIP: string, oamPort: number, restart: boolean = false) {
+  try {
+    // 1. 获取当前OAM配置（复用OAMModal的获取逻辑）
+    const getRes = await getOAMFile(neType, neId);
+
+    if (getRes.code !== RESULT_CODE_SUCCESS) {
+      return {
+        success: false,
+        message: `${getRes.msg}`,
+      };
+    }
+
+    // 2. 构建保存数据（复用OAMModal的数据结构转换逻辑）
+    const data = getRes.data;
+    const ipType = data?.oamConfig?.ipType || 'ipv4';
+
+    const saveContent = {
+      omcIP: omcIP,
+      oamEnable: data?.oamConfig?.enable || false,
+      oamPort: oamPort,
+      snmpEnable: data?.snmpConfig?.enable || false,
+      snmpPort: data?.snmpConfig?.port || 4957,
+      kpiEnable: data?.kpiConfig?.enable || false,
+      kpiTimer: data?.kpiConfig?.timer || 60,
+    };
+
+    // 3. 保存配置（复用OAMModal的保存逻辑）
+    const saveRes = await saveOAMFile({
+      neType,
+      neId,
+      content: saveContent,
+      sync: true,
+    });
+
+    if (saveRes.code === RESULT_CODE_SUCCESS) {
+      // 如果需要重启网元，调用重启服务（复用OAMModal的重启逻辑）
+      if (restart) {
+        try {
+          await serviceNeAction({
+            neType,
+            neId,
+            action: 'restart',
+          });
+        } catch (restartError: any) {
+          return {
+            success: true,
+            message: `${restartError.message || restartError}`,
+          };
+        }
+      }
+
+      return {
+        success: true,
+        message: restart ? `${t('views.ne.neInfo.quickOam.success')}` : `${t('views.ne.neInfo.quickOam.success')}`,
+      };
+    } else {
+      return {
+        success: false,
+        message: `${saveRes.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 { omcIP, oamPort, restart } = 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 configureSingleNeOAM(neType, neId, omcIP, oamPort, restart);
+
+      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();
+  emit('cancel');
+  emit('update:open', false);
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.open,
+  val => {
+    if (val) {
+      initNeOptions();
+      modalState.title = t('views.ne.neInfo.quickOam.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.neInfo.oam.restart')"
+        name="restart"
+      >
+        <a-switch
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
+          v-model:checked="modalState.from.restart"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label="t('views.ne.neInfo.quickOam.omcIP')"
+        name="omcIP"
+        v-bind="modalStateFrom.validateInfos.omcIP"
+      >
+        <a-input
+          v-model:value="modalState.from.omcIP"
+          :maxlength="128"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label="t('views.ne.neInfo.quickOam.oamPort')"
+        name="oamPort"
+        v-bind="modalStateFrom.validateInfos.oamPort"
+      >
+        <a-input-number
+          v-model:value="modalState.from.oamPort"
+          :min="3000"
+          :max="65535"
+          :step="1"
+          style="width: 100%"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label="t('views.ne.neInfo.quickOam.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>

src/views/ne/neInfo/index.vue

@@ -33,6 +33,10 @@ const OAMModal = defineAsyncComponent(
 const BackConfModal = defineAsyncComponent(
   () => import('./components/BackConfModal.vue')
 );
+// 快速OAM配置
+const QuickOAMModal = defineAsyncComponent(
+  () => import('./components/QuickOAMModal.vue')
+);
 const backConf = ref(); // 引用句柄，取导出函数
 
 /**字典数据 */
@@ -186,6 +190,8 @@ type ModalStateType = {
   openByBackConf: boolean;
   /**OAM文件配置框是否显示 */
   openByOAM: boolean;
+  /**快速OAM配置框是否显示 */
+  openByQuickOAM: boolean;
   /**新增框或修改框是否显示 */
   openByEdit: boolean;
   /**新增框或修改框ID */
@@ -201,6 +207,7 @@ type ModalStateType = {
 let modalState: ModalStateType = reactive({
   openByBackConf: false,
   openByOAM: false,
+  openByQuickOAM: false,
   openByEdit: false,
   editId: 0,
   neId: '',
@@ -275,6 +282,7 @@ function fnModalEditCancel() {
   modalState.openByEdit = false;
   modalState.openByOAM = false;
   modalState.openByBackConf = false;
+  modalState.openByQuickOAM = false;
 }
 
 /**
@@ -360,6 +368,9 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
       modalState.neType = row.neType;
       modalState.openByBackConf = !modalState.openByBackConf;
       break;
+    case 'quickOAM':
+      modalState.openByQuickOAM = !modalState.openByQuickOAM;
+      break;
     default:
       console.warn(type);
       break;
@@ -467,6 +478,14 @@ onMounted(() => {
             <template #icon><PlusOutlined /></template>
             {{ t('common.addText') }}
           </a-button>
+          <a-button
+            type="default"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordMore('quickOAM', {})"
+          >
+            <template #icon><SettingOutlined /></template>
+            {{ t('views.ne.neInfo.quickOam.title') }}
+          </a-button>
           <a-button
             type="default"
             danger
@@ -732,6 +751,12 @@ onMounted(() => {
       :ne-type="modalState.neType"
       @cancel="fnModalEditCancel"
     ></BackConfModal>
+
+    <!-- 快速OAM配置框 -->
+    <QuickOAMModal
+      v-model:open="modalState.openByQuickOAM"
+      @cancel="fnModalEditCancel"
+    ></QuickOAMModal>
   </PageContainer>
 </template>