feat: 网元信息配置文件导入导出

src/api/configManage/neManage.ts

@@ -139,7 +139,7 @@ export async function delNeInfo(data: Record<string, any>) {
 
 /**
  * 导出网元配置文件
- * @param
+ * @param data data {neType neId}
  * @returns bolb
  */
 export function exportSet(data: Record<string, any>) {

src/i18n/locales/en-US.ts

@@ -650,6 +650,19 @@ export default {
           kpiTimer: 'Reporting Cycle',
           kpiTimerPlease: 'Please enter the reporting period (in seconds)',
         },
+        backConf: {
+          export: 'Config Export',
+          import: 'Config Import',
+          title: 'Configuration File Import',  
+          importType: 'Source of File',  
+          server:'Server File',
+          local:'Local File',
+          localUpload:'Local Upload',
+          exportTip:'Confirm that you want to export the network element configuration file?',
+          exportMsg:'Exported successfully, please download from [Backup Management].',
+          filePlease: "Please upload a file", 
+          fileNamePlease: 'Please select the server file',
+        },
       },
       neHost: {
         hostType: "Type",

src/i18n/locales/zh-CN.ts

@@ -650,6 +650,19 @@ export default {
           kpiTimer: '上报周期',
           kpiTimerPlease: '请输入上报周期（单位秒）',
         },
+        backConf: {
+          export: '配置导出',
+          import: '配置导入',
+          title: '配置文件导入',  
+          importType: '文件来源',  
+          server:'服务器文件',
+          local:'本地文件',
+          localUpload:'本地上传',
+          exportTip:'确认要导出网元配置信息到文件？',
+          exportMsg:'导出成功,请到【备份管理】进行下载',
+          filePlease: "请上传文件", 
+          fileNamePlease: '请选择服务器文件',
+        },
       },
       neHost: {
         hostType: "主机类型",

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

@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import { reactive, toRaw, watch } from 'vue';
+import { Form, Modal, Upload, message } from 'ant-design-vue/lib';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import {
+  exportSet,
+  importFile,
+  listServerFile,
+} from '@/api/configManage/neManage';
+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: '',
+  },
+});
+
+/**表格所需option */
+const neManageOption = reactive({
+  importType: [
+    { label: t('views.ne.neInfo.backConf.server'), value: 'server' },
+    { label: t('views.ne.neInfo.backConf.local'), value: 'local' },
+  ],
+  serverFileName: <any[]>[],
+});
+
+/**查询网元远程服务器备份文件 */
+function typeChange(value: any) {
+  if (value === 'server') {
+    modalState.from.fileName = undefined;
+    listServerFile(modalState.from).then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neManageOption.serverFileName = [];
+        res.data.forEach((item: any) => {
+          neManageOption.serverFileName.push({
+            label: item.fileName,
+            value: item.fileName,
+          });
+        });
+      }
+    });
+  } else {
+    modalState.from.file = null;
+  }
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: {
+    neType: string;
+    neId: string;
+    importType: 'local' | 'server';
+    file: File | null;
+    fileName: string | undefined;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**上传文件 */
+  uploadFiles: any[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '配置文件导入',
+  from: {
+    neType: '',
+    neId: '',
+    importType: 'local',
+    file: null,
+    fileName: undefined,
+  },
+  confirmLoading: false,
+  uploadFiles: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    file: [
+      {
+        required: true,
+        message: t('views.ne.neInfo.backConf.filePlease'),
+      },
+    ],
+    fileName: [
+      {
+        required: true,
+        message: t('views.ne.neInfo.backConf.fileNamePlease'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  if (modalState.confirmLoading) return;
+
+  const from = toRaw(modalState.from);
+  let validateName = ['importType'];
+  if (from.importType === 'local') {
+    validateName.push('file');
+  } else {
+    validateName.push('fileName');
+  }
+
+  modalStateFrom
+    .validate(validateName)
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      importFile(from)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('common.operateOk'), 3);
+            // 返回无引用信息
+            emit('ok', JSON.parse(JSON.stringify(from)));
+            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();
+  modalState.uploadFiles = [];
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**表单上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  if (!file.name.endsWith('.zip')) {
+    const msg = `${t('components.UploadModal.onlyAllow')} .zip`;
+    message.error(msg, 3);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt3M = file.size / 1024 / 1024 < 100;
+  if (!isLt3M) {
+    const msg = `${t('components.UploadModal.allowFilter')} 100MB`;
+    message.error(msg, 3);
+    return Upload.LIST_IGNORE;
+  }
+  return true;
+}
+
+/**表单上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 改为完成状态
+  const file = modalState.uploadFiles[0];
+  file.percent = 100;
+  file.status = 'done';
+  // 预置到表单
+  modalState.from.file = up.file as File;
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      if (props.neType && props.neId) {
+        modalState.from.neType = props.neType;
+        modalState.from.neId = props.neId;
+        modalState.title = t('views.ne.neInfo.backConf.title');
+        modalState.visibleByEdit = true;
+      }
+    }
+  }
+);
+
+/**
+ * 网元导出配置
+ * @param row 网元编号ID
+ */
+function fnExportConf(neType: string, neId: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.ne.neInfo.backConf.exportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      exportSet({ neType, neId })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('views.ne.neInfo.backConf.exportMsg'), 3);
+          } else {
+            message.error(`${res.msg}`, 3);
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+// 给组件设置属性 ref="xxxBackConf"
+// setup内使用 const xxxBackConf = ref();
+defineExpose({
+  /**导出文件 */
+  exportConf: fnExportConf,
+});
+</script>
+
+<template>
+  <a-modal
+    width="800px"
+    :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: 6 }">
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.common.neType')"
+            name="neType"
+            v-bind="modalStateFrom.validateInfos.neType"
+          >
+            {{ modalState.from.neType }}
+          </a-form-item>
+          <a-form-item
+            :label="t('views.ne.neInfo.backConf.importType')"
+            name="importType"
+          >
+            <a-select
+              v-model:value="modalState.from.importType"
+              default-value="server"
+              :options="neManageOption.importType"
+              @change="typeChange"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.common.neId')"
+            name="neId"
+            v-bind="modalStateFrom.validateInfos.neId"
+          >
+            {{ modalState.from.neId }}
+          </a-form-item>
+          <a-form-item
+            :label="t('views.ne.neInfo.backConf.server')"
+            name="fileName"
+            v-bind="modalStateFrom.validateInfos.fileName"
+            v-if="modalState.from.importType === 'server'"
+          >
+            <a-select
+              v-model:value="modalState.from.fileName"
+              :options="neManageOption.serverFileName"
+              :placeholder="t('common.selectPlease')"
+            >
+            </a-select>
+          </a-form-item>
+
+          <a-form-item
+            :label="t('views.ne.neInfo.backConf.local')"
+            name="file"
+            v-bind="modalStateFrom.validateInfos.file"
+            v-if="modalState.from.importType === 'local'"
+          >
+            <a-upload
+              name="file"
+              v-model:file-list="modalState.uploadFiles"
+              accept=".zip"
+              list-type="text"
+              :max-count="1"
+              :show-upload-list="{
+                showPreviewIcon: false,
+                showRemoveIcon: false,
+                showDownloadIcon: false,
+              }"
+              :before-upload="fnBeforeUploadFile"
+              :custom-request="fnUploadFile"
+              :disabled="modalState.confirmLoading"
+            >
+              <a-button type="primary">
+                <template #icon>
+                  <UploadOutlined />
+                </template>
+                {{ t('views.ne.neInfo.backConf.localUpload') }}
+              </a-button>
+            </a-upload>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>

src/views/ne/neInfo/hooks/useNeOptions.ts

@@ -1,4 +1,3 @@
-import { restartNf, startNf, stopNf } from '@/api/configManage/neManage';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { Modal, message } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';

src/views/ne/neInfo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, defineAsyncComponent } from 'vue';
+import { reactive, onMounted, toRaw, defineAsyncComponent, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal } from 'ant-design-vue/lib';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
@@ -23,6 +23,11 @@ const EditModal = defineAsyncComponent(
 const OAMModal = defineAsyncComponent(
   () => import('./components/OAMModal.vue')
 );
+// 配置备份文件导入
+const BackConfModal = defineAsyncComponent(
+  () => import('./components/BackConfModal.vue')
+);
+const backConf = ref(); // 引用句柄，取导出函数
 
 /**字典数据 */
 let dict: {
@@ -171,6 +176,8 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
+  /**配置备份框是否显示 */
+  visibleByBackConf: boolean;
   /**OAM文件配置框是否显示 */
   visibleByOAM: boolean;
   /**新增框或修改框是否显示 */
@@ -186,6 +193,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
+  visibleByBackConf: false,
   visibleByOAM: false,
   visibleByEdit: false,
   editId: '',
@@ -223,6 +231,7 @@ function fnModalEditCancel() {
   modalState.editId = '';
   modalState.visibleByEdit = false;
   modalState.visibleByOAM = false;
+  modalState.visibleByBackConf = false;
 }
 
 /**
@@ -290,6 +299,14 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
       modalState.neType = row.neType;
       modalState.visibleByOAM = !modalState.visibleByOAM;
       break;
+    case 'backConfExport':
+      backConf.value.exportConf(row.neType, row.neId);
+      break;
+    case 'backConfImport':
+      modalState.neId = row.neId;
+      modalState.neType = row.neType;
+      modalState.visibleByBackConf = !modalState.visibleByBackConf;
+      break;
     default:
       console.warn(type);
       break;
@@ -572,6 +589,15 @@ onMounted(() => {
                         <FileTextOutlined />
                         {{ t('views.ne.common.oam') }}
                       </a-menu-item>
+                      <!-- 配置备份 -->
+                      <a-menu-item key="backConfExport">
+                        <ExportOutlined />
+                        {{ t('views.ne.neInfo.backConf.export') }}
+                      </a-menu-item>
+                      <a-menu-item key="backConfImport">
+                        <ImportOutlined />
+                        {{ t('views.ne.neInfo.backConf.import') }}
+                      </a-menu-item>
                     </a-menu>
                   </template>
                 </a-dropdown>
@@ -684,13 +710,22 @@ onMounted(() => {
       @cancel="fnModalEditCancel"
     ></EditModal>
 
-    <!-- 新增框或修改框 -->
+    <!-- OAM编辑框 -->
     <OAMModal
       v-model:visible="modalState.visibleByOAM"
       :ne-id="modalState.neId"
       :ne-type="modalState.neType"
       @cancel="fnModalEditCancel"
     ></OAMModal>
+
+    <!-- 配置文件备份框 -->
+    <BackConfModal
+      ref="backConf"
+      v-model:visible="modalState.visibleByBackConf"
+      :ne-id="modalState.neId"
+      :ne-type="modalState.neType"
+      @cancel="fnModalEditCancel"
+    ></BackConfModal>
   </PageContainer>
 </template>