feat: 网元配置OAM弹窗表单

src/api/ne/neInfo.ts

@@ -107,6 +107,36 @@ export function getNeInfoByTypeAndID(neType: string, neId: string) {
   });
 }
 
+/**
+ * 网元端OAM配置文件读取
+ * @param neType 网元类型
+ * @param neId 网元ID
+ * @returns object
+ */
+export function getOAMFile(neType: string, neId: string) {
+  return request({
+    url: '/ne/info/oamFile',
+    method: 'get',
+    params: { neType, neId },
+  });
+}
+
+/**
+ * 网元端配置文件写入
+ * @param neType 网元类型
+ * @param neId 网元ID
+ * @param content 用json对象
+ * @param sync  同步到网元
+ * @returns object
+ */
+export function saveOAMFile(data: Record<string, any>) {
+  return request({
+    url: `/ne/info/oamFile`,
+    method: 'put',
+    data: data,
+  });
+}
+
 /**
  * 网元端公共配置文件读取
  * @returns object

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

@@ -745,36 +745,6 @@ onMounted(() => {
           </a-form-item>
         </a-collapse-panel>
       </a-collapse>
-
-      <!-- OAM配置 -->
-      <a-divider orientation="left"> OAM Config </a-divider>
-      <a-collapse class="collapse" ghost>
-        <a-collapse-panel header="KPI Config">
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.addr')">
-                <a-input
-                  allow-clear
-                  :maxlength="128"
-                  :placeholder="t('common.inputPlease')"
-                >
-                </a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.port')" name="port">
-                <a-input-number
-                  :min="10"
-                  :max="65535"
-                  :step="1"
-                  :maxlength="5"
-                  style="width: 100%"
-                ></a-input-number>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-collapse-panel>
-      </a-collapse>
     </a-form>
   </DraggableModal>
 </template>

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

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { reactive, toRaw, watch } from 'vue';
+import { message, Form } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { getOAMFile, saveOAMFile } from '@/api/ne/neInfo';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  /**网元ID */
+  neId: {
+    type: String,
+    default: '',
+  },
+  neType: {
+    type: String,
+    default: '',
+  },
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**是否同步 */
+  sync: boolean;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: 'OAM Configuration',
+  sync: true,
+  from: {
+    oamEnable: true,
+    oamPort: 33030,
+    snmpEnable: true,
+    snmpPort: 4957,
+    kpiEnable: true,
+    kpiTimer: 60,
+  },
+  confirmLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    kpiTimer: [
+      {
+        required: true,
+        message: '请输入KPI上报周期（单位秒）',
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param neType 网元类型
+ * @param neId 网元ID
+ */
+function fnModalVisibleByTypeAndId(neType: string, neId: string) {
+  const hide = message.loading(t('common.loading'), 0);
+  getOAMFile(neType, neId)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        const data = res.data;
+        Object.assign(modalState.from, {
+          oamEnable: data.oamConfig.enable,
+          oamPort: data.oamConfig.port,
+          snmpEnable: data.snmpConfig.enable,
+          snmpPort: data.snmpConfig.port,
+          kpiEnable: data.kpiConfig.enable,
+          kpiTimer: data.kpiConfig.timer,
+        });
+        modalState.title = 'OAM Configuration';
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+      hide();
+    });
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      const from = toRaw(modalState.from);
+      saveOAMFile({
+        neType: props.neType,
+        neId: props.neId,
+        content: from,
+        sync: modalState.sync,
+      })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: '操作成功',
+              duration: 3,
+            });
+            emit('ok');
+            fnModalCancel();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      if (props.neType && props.neId) {
+        fnModalVisibleByTypeAndId(props.neType, props.neId);
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <DraggableModal
+    width="500px"
+    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="modalState.visibleByEdit"
+    :title="modalState.title"
+    :confirm-loading="modalState.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFrom"
+      layout="horizontal"
+      :label-col="{ span: 12 }"
+      :labelWrap="true"
+    >
+      <a-form-item
+        label="Sync To NE"
+        name="sync"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-switch
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
+          v-model:checked="modalState.sync"
+        ></a-switch>
+      </a-form-item>
+
+      <a-collapse class="collapse" ghost>
+        <a-collapse-panel header="OAM">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item label="Enable" name="from.oamEnable">
+                <a-switch
+                  :checked-children="t('common.switch.open')"
+                  :un-checked-children="t('common.switch.shut')"
+                  v-model:checked="modalState.from.oamEnable"
+                ></a-switch>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item label="Port" name="from.oamPort">
+                <a-input-number
+                  :min="3000"
+                  :max="65535"
+                  :step="1"
+                  :maxlength="4"
+                  v-model:value="modalState.from.oamPort"
+                  style="width: 100%"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-collapse-panel>
+        <a-collapse-panel header="SNMP">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item label="Enable" name="from.snmpEnable">
+                <a-switch
+                  :checked-children="t('common.switch.open')"
+                  :un-checked-children="t('common.switch.shut')"
+                  v-model:checked="modalState.from.snmpEnable"
+                ></a-switch>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item label="Port" name="from.snmpPort">
+                <a-input-number
+                  :min="3000"
+                  :max="65535"
+                  :step="1"
+                  :maxlength="4"
+                  v-model:value="modalState.from.snmpPort"
+                  style="width: 100%"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-collapse-panel>
+        <a-collapse-panel header="KPI">
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item label="Enable" name="from.kpiEnable">
+                <a-switch
+                  :checked-children="t('common.switch.open')"
+                  :un-checked-children="t('common.switch.shut')"
+                  v-model:checked="modalState.from.kpiEnable"
+                ></a-switch>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item label="Timer" name="from.kpiTimer">
+                <a-input-number
+                  :min="5"
+                  :max="3600"
+                  :step="1"
+                  :maxlength="4"
+                  v-model:value="modalState.from.kpiTimer"
+                  style="width: 100%"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-form>
+  </DraggableModal>
+</template>
+
+<style lang="less" scoped>
+.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
+  padding-left: 0;
+  padding-right: 0;
+}
+.collapse-header {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+</style>

src/views/ne/neInfo/index.vue

@@ -20,6 +20,9 @@ const { fnNeStart, fnNeRestart, fnNeStop, fnNeReload, fnNeLogFile } =
 const EditModal = defineAsyncComponent(
   () => import('./components/EditModal.vue')
 );
+const OAMModal = defineAsyncComponent(
+  () => import('./components/OAMModal.vue')
+);
 
 /**字典数据 */
 let dict: {
@@ -168,18 +171,26 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
+  /**OAM文件配置框是否显示 */
+  visibleByOAM: boolean;
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
   /**新增框或修改框ID */
   editId: string;
+  /**OAM框网元类型ID */
+  neId: string;
+  neType: string;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
+  visibleByOAM: false,
   visibleByEdit: false,
   editId: '',
+  neId: '',
+  neType: '',
   confirmLoading: false,
 });
 
@@ -211,6 +222,7 @@ function fnModalEditOk() {
 function fnModalEditCancel() {
   modalState.editId = '';
   modalState.visibleByEdit = false;
+  modalState.visibleByOAM = false;
 }
 
 /**
@@ -288,6 +300,11 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
     case 'log':
       fnNeLogFile(row);
       break;
+    case 'oam':
+      modalState.neId = row.neId;
+      modalState.neType = row.neType;
+      modalState.visibleByOAM = !modalState.visibleByOAM;
+      break;
     default:
       console.warn(type);
       break;
@@ -569,6 +586,10 @@ onMounted(() => {
                         <DeleteOutlined />
                         {{ t('common.deleteText') }}
                       </a-menu-item>
+                      <a-menu-item key="oam">
+                        <FileTextOutlined />
+                        OAM
+                      </a-menu-item>
                     </a-menu>
                   </template>
                 </a-dropdown>
@@ -680,6 +701,14 @@ onMounted(() => {
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
     ></EditModal>
+
+    <!-- 新增框或修改框 -->
+    <OAMModal
+      v-model:visible="modalState.visibleByOAM"
+      :ne-id="modalState.neId"
+      :ne-type="modalState.neType"
+      @cancel="fnModalEditCancel"
+    ></OAMModal>
   </PageContainer>
 </template>