From 204d19881959a35fa37547284402a36e2b554c33 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 25 Apr 2025 16:16:09 +0800
Subject: [PATCH] =?UTF-8?q?ref:=20=E7=BB=9F=E4=B8=80ftp=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=A4=87=E4=BB=BD=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E4=B8=8B=E8=BD=BD=E5=88=A0=E9=99=A4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/logManage/exportFile.ts               |  40 --
 src/api/ne/neConfigBackup.ts                  |  40 --
 src/api/neData/backup.ts                      |  38 ++
 src/api/tool/file.ts                          |  44 ++
 src/utils/parse-utils.ts                      |   9 +-
 src/views/logManage/exportFile/index.vue      | 433 +++++-------------
 .../neConfigBackup/components/BackupModal.vue | 230 ++++++++++
 src/views/ne/neConfigBackup/index.vue         | 248 ++--------
 8 files changed, 473 insertions(+), 609 deletions(-)
 create mode 100644 src/api/neData/backup.ts
 create mode 100644 src/views/ne/neConfigBackup/components/BackupModal.vue

diff --git a/src/api/logManage/exportFile.ts b/src/api/logManage/exportFile.ts
index 19f7b068..2ce72877 100644
--- a/src/api/logManage/exportFile.ts
+++ b/src/api/logManage/exportFile.ts
@@ -53,43 +53,3 @@ export function delFile(query: Record<string, any>) {
     params: query,
   });
 }
-
-/**
- * 更新FTP信息
- * @param data 数据
- * @returns object
- */
-export function updateFTPInfo(data: Record<string, any>) {
-  return request({
-    url: `/lm/table/ftp`,
-    method: 'POST',
-    data: data,
-    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
-  });
-}
-
-/**
- * 获取FTP信息
- * @param data 数据
- * @returns object
- */
-export function getFTPInfo() {
-  return request({
-    url: `/lm/table/ftp`,
-    method: 'GET',
-    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
-  });
-}
-
-/**
- * 发送FTP文件
- * @param data 数据
- * @returns object
- */
-export function putFTPInfo(filePath: string, fileName: string) {
-  return request({
-    url: `/lm/table/ftp`,
-    method: 'PUT',
-    data: { filePath, fileName },
-  });
-}
diff --git a/src/api/ne/neConfigBackup.ts b/src/api/ne/neConfigBackup.ts
index e6b8c817..af63fdea 100644
--- a/src/api/ne/neConfigBackup.ts
+++ b/src/api/ne/neConfigBackup.ts
@@ -83,43 +83,3 @@ export function importNeConfigBackup(data: Record<string, any>) {
     data: data,
   });
 }
-
-/**
- * 更新FTP信息
- * @param data 数据
- * @returns object
- */
-export function updateFTPInfo(data: Record<string, any>) {
-  return request({
-    url: `/ne/config/backup/ftp`,
-    method: 'POST',
-    data: data,
-    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
-  });
-}
-
-/**
- * 获取FTP信息
- * @param data 数据
- * @returns object
- */
-export function getFTPInfo() {
-  return request({
-    url: `/ne/config/backup/ftp`,
-    method: 'GET',
-    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
-  });
-}
-
-/**
- * 发送FTP文件
- * @param data 数据
- * @returns object
- */
-export function putFTPInfo(path: string) {
-  return request({
-    url: `/ne/config/backup/ftp`,
-    method: 'PUT',
-    data: { path },
-  });
-}
diff --git a/src/api/neData/backup.ts b/src/api/neData/backup.ts
new file mode 100644
index 00000000..eeb3781c
--- /dev/null
+++ b/src/api/neData/backup.ts
@@ -0,0 +1,38 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 备份文件-获取FTP配置
+ * @returns object
+ */
+export function getBackupFTP() {
+  return request({
+    url: '/neData/backup/ftp',
+    method: 'GET',
+  });
+}
+
+/**
+ * 备份文件-文件FTP发送
+ * @param data 对象
+ * @returns object
+ */
+export function pushBackupFTP(data: Record<string, any>) {
+  return request({
+    url: '/neData/backup/ftp',
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * 备份文件-更新FTP配置
+ * @param data 对象
+ * @returns object
+ */
+export function updateBackupFTP(data: Record<string, any>) {
+  return request({
+    url: '/neData/backup/ftp',
+    method: 'PUT',
+    data,
+  });
+}
diff --git a/src/api/tool/file.ts b/src/api/tool/file.ts
index 5a29df83..ff31c5ae 100644
--- a/src/api/tool/file.ts
+++ b/src/api/tool/file.ts
@@ -210,6 +210,50 @@ export function chunkUpload(data: FormData) {
   });
 }
 
+/**
+ * 本地文件列表
+ * @param path 文件路径
+ * @param search search prefix
+ * @returns object
+ */
+export async function listFile(query: Record<string, any>) {
+  return request({
+    url: `/file/list`,
+    method: 'GET',
+    params: query,
+  });
+}
+
+/**
+ * 本地文件获取下载
+ * @param path 文件路径
+ * @param fileName 文件名
+ * @returns object
+ */
+export async function getFile(path: string, fileName: string) {
+  return request({
+    url: `/file`,
+    method: 'GET',
+    params: { path, fileName },
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}
+
+/**
+ * 本地文件删除
+ * @param path 文件路径
+ * @param fileName 文件名
+ * @returns object
+ */
+export async function delFile(path: string, fileName: string) {
+  return request({
+    url: `/file`,
+    method: 'DELETE',
+    params: { path, fileName },
+  });
+}
+
 /**
  * 转存上传文件到静态资源
  * @returns object
diff --git a/src/utils/parse-utils.ts b/src/utils/parse-utils.ts
index 8e13fd43..ada8afec 100644
--- a/src/utils/parse-utils.ts
+++ b/src/utils/parse-utils.ts
@@ -101,7 +101,14 @@ export function parseObjLineToHump(obj: any): any {
  * @param decimalPlaces 保留小数位,默认2位
  * @returns 单位 xB
  */
-export function parseSizeFromFile(bytes: number, decimalPlaces: number = 2) {
+export function parseSizeFromFile(
+  bytes: number,
+  decimalPlaces: number = 2
+): string {
+  if (typeof bytes !== 'number' || isNaN(bytes) || bytes < 0) {
+    return `${bytes}`;
+  }
+  if (bytes === 0) return '0 B';
   const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   let i = 0;
   while (bytes >= 1024 && i < units.length - 1) {
diff --git a/src/views/logManage/exportFile/index.vue b/src/views/logManage/exportFile/index.vue
index b39391db..d7a2ba2a 100644
--- a/src/views/logManage/exportFile/index.vue
+++ b/src/views/logManage/exportFile/index.vue
@@ -1,38 +1,57 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
+import { reactive, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ProModal } from 'antdv-pro-modal';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { ColumnsType } from 'ant-design-vue/es/table';
-import { Form, Modal, message } from 'ant-design-vue/es';
+import { Modal, message } from 'ant-design-vue/es';
+import BackupModal from '@/views/ne/neConfigBackup/components/BackupModal.vue';
 import { parseDateToStr } from '@/utils/date-utils';
-import {
-  getBakFile,
-  getBakFileList,
-  downFile,
-  delFile,
-  updateFTPInfo,
-  getFTPInfo,
-  putFTPInfo,
-} from '@/api/logManage/exportFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 import saveAs from 'file-saver';
-import { regExpIPv4 } from '@/utils/regular-utils';
+import { delFile, getFile, listFile } from '@/api/tool/file';
+import { parseSizeFromFile } from '@/utils/parse-utils';
+import { pushBackupFTP } from '@/api/neData/backup';
 const { t } = useI18n();
 
-/**网元参数 */
-let logSelect = ref<string[]>([]);
-
-/**文件列表 */
-let fileList = ref<any>([]);
+/**文件来源 */
+let sourceState = reactive({
+  /**文件列表 */
+  list: [
+    {
+      value: '/log/operate_log',
+      label: t('views.logManage.exportFile.operateLog'),
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/cdr/ims_cdr',
+      label: t('views.logManage.exportFile.cdrIMS'),
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/cdr/smf_cdr',
+      label: t('views.logManage.exportFile.cdrSMF'),
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/cdr/smsc_cdr',
+      label: t('views.logManage.exportFile.cdrSMSC'),
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/cdr/sgwc_cdr',
+      label: t('views.logManage.exportFile.cdrSGWC'),
+      path: '/usr/local/omc/backup',
+    },
+  ],
+  /**选择value */
+  value: undefined,
+});
 
 /**查询参数 */
 let queryParams = reactive({
   /**读取路径 */
   path: '',
-  /**表名 */
-  tableName: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -80,6 +99,9 @@ let tableColumns: ColumnsType = [
     title: t('views.logManage.neFile.size'),
     dataIndex: 'size',
     align: 'left',
+    customRender(opt) {
+      return parseSizeFromFile(opt.value);
+    },
     width: 100,
   },
   {
@@ -88,9 +110,9 @@ let tableColumns: ColumnsType = [
     align: 'left',
     customRender(opt) {
       if (!opt.value) return '';
-      return parseDateToStr(opt.value * 1000);
+      return parseDateToStr(opt.value);
     },
-    width: 150,
+    width: 200,
   },
   {
     title: t('views.logManage.neFile.fileName'),
@@ -135,10 +157,6 @@ let tablePagination = reactive({
 
 /**下载触发等待 */
 let downLoading = ref<boolean>(false);
-
-/**删除触发等待 */
-let delLoading = ref<boolean>(false);
-
 /**信息文件下载 */
 function fnDownloadFile(row: Record<string, any>) {
   if (downLoading.value) return;
@@ -150,10 +168,7 @@ function fnDownloadFile(row: Record<string, any>) {
     onOk() {
       downLoading.value = true;
       const hide = message.loading(t('common.loading'), 0);
-      downFile({
-        path: queryParams.path,
-        fileName: row.fileName,
-      })
+      getFile(queryParams.path, row.fileName)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -178,6 +193,9 @@ function fnDownloadFile(row: Record<string, any>) {
   });
 }
 
+/**删除触发等待 */
+let delLoading = ref<boolean>(false);
+/**信息文件删除 */
 function fnRecordDelete(row: Record<string, any>) {
   if (delLoading.value) return;
   Modal.confirm({
@@ -186,30 +204,27 @@ function fnRecordDelete(row: Record<string, any>) {
       fileName: row.fileName,
     }),
     onOk() {
-      const key = 'delFile';
       delLoading.value = true;
-      message.loading({ content: t('common.loading'), key });
-      delFile({
-        fileName: row.fileName,
-        path: queryParams.path,
-      })
+      const hide = message.loading(t('common.loading'), 0);
+      delFile(queryParams.path, row.fileName)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
-              content: t('views.system.user.delSuss'),
-              key,
+              content: t('common.msgSuccess', {
+                msg: t('common.deleteText'),
+              }),
               duration: 2,
             });
             fnGetList();
           } else {
             message.error({
-              content: `${res.msg}`,
-              key: key,
+              content: t('views.logManage.exportFile.deleteTipErr'),
               duration: 2,
             });
           }
         })
         .finally(() => {
+          hide();
           delLoading.value = false;
         });
     },
@@ -217,17 +232,18 @@ function fnRecordDelete(row: Record<string, any>) {
 }
 
 /**网元类型选择对应修改 */
-function fnNeChange(keys: any, opt: any) {
-  queryParams.tableName = keys;
-  queryParams.path = opt.path;
+function fnNeChange(_: any, opt: any) {
+  queryParams.path = `${opt.path}${opt.value}`;
+  ftpInfo.path = queryParams.path;
+  ftpInfo.tag = opt.value;
   fnGetList(1);
 }
 
 /**查询备份信息列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
-  if (queryParams.tableName === '') {
+  if (queryParams.path === '') {
     message.warning({
-      content: t('views.logManage.exportFile.selectTip'),
+      content: t('views.logManage.exportFile.fileSourcePlease'),
       duration: 2,
     });
     return;
@@ -237,7 +253,7 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  getBakFileList(toRaw(queryParams)).then(res => {
+  listFile(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
       const { total, rows } = res.data;
       tablePagination.total = total;
@@ -259,147 +275,34 @@ function fnGetList(pageNum?: number) {
   });
 }
 
-onMounted(() => {
-  getBakFile().then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      res.data.forEach((item: any) => {
-        fileList.value.push({
-          value: item.tableName,
-          label: item.tableDisplay,
-          path: item.filePath,
-        });
-      });
-    }
-  });
-  // .finally(() => {
-  //   fnGetList();
-  // });
-});
+/**打开FTP配置窗口 */
+const openFTPModal = ref<boolean>(false);
+function fnFTPModalOpen() {
+  openFTPModal.value = !openFTPModal.value;
+}
 
-/**对象信息状态类型 */
-type ModalStateType = {
-  /**新增框或修改框是否显示 */
-  openByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
+type FTPInfoType = {
+  path: string;
+  tag: string;
+  fileName: string;
 };
-
-/**FTP日志对象信息状态 */
-let modalState: ModalStateType = reactive({
-  openByEdit: false,
-  title: '设置远程备份配置',
-  from: {
-    username: '',
-    password: '',
-    toIp: '',
-    toPort: 22,
-    enable: false,
-    dir: '',
-  },
-  confirmLoading: false,
+const ftpInfo = reactive<FTPInfoType>({
+  path: '',
+  tag: '',
+  fileName: '',
 });
 
-/**FTP日志对象信息内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    toIp: [
-      {
-        required: true,
-        pattern: regExpIPv4,
-        message: 'Please enter the service login IP',
-      },
-    ],
-    username: [
-      {
-        required: true,
-        trigger: 'blur',
-        message: 'Please enter the service login user name',
-      },
-    ],
-    dir: [
-      {
-        required: true,
-        trigger: 'blur',
-        message: 'Please enter the service address target file directory',
-      },
-    ],
-  })
-);
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param configId 参数编号id, 不传为新增
- */
-function fnModalVisibleByEdit() {
-  if (modalState.confirmLoading) return;
-  const hide = message.loading(t('common.loading'), 0);
-  modalState.confirmLoading = true;
-  getFTPInfo().then(res => {
-    modalState.confirmLoading = false;
-    hide();
-    if (res.code === RESULT_CODE_SUCCESS && res.data) {
-      modalState.from = Object.assign(modalState.from, res.data);
-      modalState.title = 'Setting Remote Backup';
-      modalState.openByEdit = true;
+/**同步文件到FTP */
+function fnSyncFileToFTP(fileName: string) {
+  ftpInfo.fileName = fileName;
+  pushBackupFTP(toRaw(ftpInfo)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success(t('common.operateOk'), 3);
     } else {
-      message.error(res.msg, 3);
-      modalState.title = 'Setting Remote Backup';
-      modalState.openByEdit = false;
+      message.warning(res.msg, 3);
     }
   });
 }
-
-/**FTP对象保存 */
-function fnModalOk() {
-  modalStateFrom.validate().then(() => {
-    modalState.confirmLoading = true;
-    const from = toRaw(modalState.from);
-    updateFTPInfo(from)
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success(`Configuration saved successfully`, 3);
-          fnModalCancel();
-        } else {
-          message.warning(`Configuration save exception`, 3);
-        }
-      })
-      .finally(() => {
-        modalState.confirmLoading = false;
-      });
-  });
-}
-
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalStateFrom.resetFields();
-}
-
-/**
- * 同步文件到FTP
- * @param row
- */
-function fnSyncFileToFTP(row: Record<string, any>) {
-  putFTPInfo(row.filePath, row.fileName)
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success(t('common.operateOk'), 3);
-      } else {
-        message.warning(res.msg, 3);
-      }
-    })
-    .finally(() => {
-      modalState.confirmLoading = false;
-    });
-}
 </script>
 
 <template>
@@ -410,12 +313,14 @@ function fnSyncFileToFTP(row: Record<string, any>) {
         <a-form :model="queryParams" name="queryParams" layout="horizontal">
           <a-row :gutter="16" align="middle">
             <a-col>
-              <span>{{ t('views.logManage.exportFile.fileName') }}:</span>&nbsp;
+              <span>{{ t('views.logManage.exportFile.fileSource') }}:</span
+              >&nbsp;
               <a-select
-                v-model:value="logSelect"
-                :options="fileList"
+                v-model:value="sourceState.value"
+                :options="sourceState.list"
                 @change="fnNeChange"
                 :allow-clear="false"
+                :placeholder="t('common.selectPlease')"
                 style="width: 200px"
               />
             </a-col>
@@ -436,9 +341,11 @@ function fnSyncFileToFTP(row: Record<string, any>) {
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>Setting Remote Backup</template>
-            <a-button type="text" @click.prevent="fnModalVisibleByEdit()">
+          <a-tooltip placement="topRight">
+            <template #title>
+              {{ t('views.ne.neConfigBackup.backupModal.title') }}
+            </template>
+            <a-button type="text" @click.prevent="fnFTPModalOpen()">
               <template #icon><DeliveredProcedureOutlined /></template>
             </a-button>
           </a-tooltip>
@@ -465,135 +372,45 @@ function fnSyncFileToFTP(row: Record<string, any>) {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'fileName'">
             <a-space :size="8" align="center">
-              <a-button
-                type="link"
-                :loading="downLoading"
-                @click.prevent="fnSyncFileToFTP(record)"
-                v-if="record.fileType === 'file'"
-              >
-                <template #icon><CloudServerOutlined /></template>
-              </a-button>
-              <a-button
-                type="link"
-                :loading="downLoading"
-                @click.prevent="fnDownloadFile(record)"
-                v-if="record.fileType === 'file'"
-              >
-                <template #icon><DownloadOutlined /></template>
-              </a-button>
-              <a-button
-                type="link"
-                :loading="delLoading"
-                @click.prevent="fnRecordDelete(record)"
-                v-if="record.fileType === 'file'"
-              >
-                <template #icon><DeleteOutlined /></template>
-              </a-button>
+              <a-tooltip placement="topRight" v-if="record.fileType === 'file'">
+                <template #title>
+                  {{ t('views.ne.neConfigBackup.backupModal.pushFileOper') }}
+                </template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnSyncFileToFTP(record.fileName)"
+                >
+                  <template #icon><CloudServerOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="topRight" v-if="record.fileType === 'file'">
+                <template #title>{{ t('common.downloadText') }}</template>
+                <a-button
+                  type="link"
+                  :loading="downLoading"
+                  @click.prevent="fnDownloadFile(record)"
+                >
+                  <template #icon><DownloadOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="topRight" v-if="record.fileType === 'file'">
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  :loading="delLoading"
+                  @click.prevent="fnRecordDelete(record)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
             </a-space>
           </template>
         </template>
       </a-table>
     </a-card>
 
-    <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :destroyOnClose="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :open="modalState.openByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :label-wrap="true"
-      >
-        <a-form-item label="Enable" name="enable" :label-col="{ span: 3 }">
-          <a-switch
-            v-model:checked="modalState.from.enable"
-            :checked-children="t('common.switch.open')"
-            :un-checked-children="t('common.switch.shut')"
-          />
-        </a-form-item>
-
-        <template v-if="modalState.from.enable">
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="Service IP"
-                name="toIp"
-                v-bind="modalStateFrom.validateInfos.toIp"
-              >
-                <a-input
-                  v-model:value="modalState.from.toIp"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="Service Port"
-                name="toPort"
-                v-bind="modalStateFrom.validateInfos.toPort"
-              >
-                <a-input-number
-                  v-model:value="modalState.from.toPort"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input-number>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="UserName"
-                name="username"
-                v-bind="modalStateFrom.validateInfos.username"
-              >
-                <a-input
-                  v-model:value="modalState.from.username"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="Password"
-                name="password"
-                v-bind="modalStateFrom.validateInfos.password"
-              >
-                <a-input-password
-                  v-model:value="modalState.from.password"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input-password>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-form-item
-            label="Save Dir"
-            name="dir"
-            v-bind="modalStateFrom.validateInfos.dir"
-            :label-col="{ span: 3 }"
-          >
-            <a-input
-              v-model:value="modalState.from.dir"
-              allow-clear
-              :placeholder="t('common.inputPlease')"
-            ></a-input>
-          </a-form-item>
-        </template>
-      </a-form>
-    </ProModal>
+    <!-- FTP配置窗口 -->
+    <BackupModal v-model:open="openFTPModal"></BackupModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/ne/neConfigBackup/components/BackupModal.vue b/src/views/ne/neConfigBackup/components/BackupModal.vue
new file mode 100644
index 00000000..74cb751d
--- /dev/null
+++ b/src/views/ne/neConfigBackup/components/BackupModal.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { reactive, watch, toRaw } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import useI18n from '@/hooks/useI18n';
+import { Form, message } from 'ant-design-vue';
+import { regExpIPv4 } from '@/utils/regular-utils';
+import { getBackupFTP, updateBackupFTP } from '@/api/neData/backup';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+});
+
+/**对话框对象信息状态类型 */
+type StateType = {
+  /**框是否显示 */
+  open: boolean;
+  /**标题 */
+  title: string;
+  /**查看命令 */
+  form: Record<string, any>;
+  /**等待 */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let state: StateType = reactive({
+  open: false,
+  title: '设置远程备份配置',
+  form: {
+    username: '',
+    password: '',
+    toIp: '',
+    toPort: 22,
+    enable: false,
+    dir: '',
+  },
+  confirmLoading: false,
+});
+
+/**FTP对象信息内表单属性和校验规则 */
+const stateFrom = Form.useForm(
+  state.form,
+  reactive({
+    toIp: [
+      {
+        required: true,
+        pattern: regExpIPv4,
+        message: t('views.ne.neConfigBackup.backupModal.toIpPleace'),
+      },
+    ],
+    username: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: t('views.ne.neConfigBackup.backupModal.usernamePleace'),
+      },
+    ],
+    dir: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: t('views.ne.neConfigBackup.backupModal.dirPleace'),
+      },
+    ],
+  })
+);
+
+/**对象保存 */
+function fnModalOk() {
+  stateFrom.validate().then(() => {
+    state.confirmLoading = true;
+    const from = toRaw(state.form);
+    updateBackupFTP(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(t('common.operateOk'), 3);
+          fnModalCancel();
+        } else {
+          message.warning(t('common.operateErr'), 3);
+        }
+      })
+      .finally(() => {
+        state.confirmLoading = false;
+      });
+  });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  stateFrom.resetFields();
+  state.open = false;
+  emit('cancel');
+  emit('update:open', false);
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ */
+function fnModalVisible() {
+  if (state.confirmLoading) return;
+  const hide = message.loading(t('common.loading'), 0);
+  state.confirmLoading = true;
+  getBackupFTP()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        state.form = Object.assign(state.form, res.data);
+      }
+    })
+    .finally(() => {
+      state.confirmLoading = false;
+      hide();
+      state.title = t('views.ne.neConfigBackup.backupModal.title');
+      state.open = true;
+    });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.open,
+  val => {
+    if (val) {
+      fnModalVisible();
+    }
+  }
+);
+</script>
+
+<template>
+  <ProModal
+    :drag="true"
+    :width="520"
+    :destroyOnClose="true"
+    :keyboard="false"
+    :mask-closable="false"
+    :open="state.open"
+    :title="state.title"
+    :confirm-loading="state.confirmLoading"
+    @ok="fnModalOk"
+    @cancel="fnModalCancel"
+  >
+    <a-form
+      name="modalStateFTPFrom"
+      layout="horizontal"
+      :label-col="{ span: 6 }"
+      :label-wrap="true"
+    >
+      <a-form-item
+        :label="t('views.ne.neConfigBackup.backupModal.enable')"
+        name="enable"
+      >
+        <a-switch
+          v-model:checked="state.form.enable"
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
+        />
+      </a-form-item>
+
+      <template v-if="state.form.enable">
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.backupModal.toIp')"
+          name="toIp"
+          v-bind="stateFrom.validateInfos.toIp"
+        >
+          <a-input
+            v-model:value="state.form.toIp"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+          ></a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.backupModal.toPort')"
+          name="toPort"
+          v-bind="stateFrom.validateInfos.toPort"
+        >
+          <a-input-number
+            v-model:value="state.form.toPort"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+          ></a-input-number>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.backupModal.username')"
+          name="username"
+          v-bind="stateFrom.validateInfos.username"
+        >
+          <a-input
+            v-model:value="state.form.username"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+          ></a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.backupModal.password')"
+          name="password"
+          v-bind="stateFrom.validateInfos.password"
+        >
+          <a-input-password
+            v-model:value="state.form.password"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+          ></a-input-password>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.backupModal.dir')"
+          name="dir"
+          v-bind="stateFrom.validateInfos.dir"
+        >
+          <a-input
+            v-model:value="state.form.dir"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+          ></a-input>
+        </a-form-item>
+      </template>
+    </a-form>
+  </ProModal>
+</template>
+
+<style scoped></style>
diff --git a/src/views/ne/neConfigBackup/index.vue b/src/views/ne/neConfigBackup/index.vue
index 3cd1e855..2f24ed70 100644
--- a/src/views/ne/neConfigBackup/index.vue
+++ b/src/views/ne/neConfigBackup/index.vue
@@ -5,22 +5,20 @@ import { ProModal } from 'antdv-pro-modal';
 import { Form, Modal, TableColumnsType, message } from 'ant-design-vue/es';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import BackupModal from './components/BackupModal.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseDateToStr } from '@/utils/date-utils';
-import { regExpIPv4 } from '@/utils/regular-utils';
 import {
   delNeConfigBackup,
   downNeConfigBackup,
   listNeConfigBackup,
   updateNeConfigBackup,
-  getFTPInfo,
-  putFTPInfo,
-  updateFTPInfo,
 } from '@/api/ne/neConfigBackup';
+import { pushBackupFTP } from '@/api/neData/backup';
 import saveAs from 'file-saver';
 const { t } = useI18n();
 const { getDict } = useDictStore();
@@ -389,119 +387,26 @@ onMounted(() => {
     });
 });
 
-/**FTP日志对象信息状态 */
-let modalStateFTP: ModalStateType = reactive({
-  openByEdit: false,
-  title: '设置远程备份配置',
-  from: {
-    username: '',
-    password: '',
-    toIp: '',
-    toPort: 22,
-    enable: false,
-    dir: '',
-  },
-  confirmLoading: false,
-});
+/**打开FTP配置窗口 */
+const openFTPModal = ref<boolean>(false);
+function fnFTPModalOpen() {
+  openFTPModal.value = !openFTPModal.value;
+}
 
-/**FTP日志对象信息内表单属性和校验规则 */
-const modalStateFTPFrom = Form.useForm(
-  modalStateFTP.from,
-  reactive({
-    toIp: [
-      {
-        required: true,
-        pattern: regExpIPv4,
-        message: 'Please enter the service login IP',
-      },
-    ],
-    username: [
-      {
-        required: true,
-        trigger: 'blur',
-        message: 'Please enter the service login user name',
-      },
-    ],
-    dir: [
-      {
-        required: true,
-        trigger: 'blur',
-        message: 'Please enter the service address target file directory',
-      },
-    ],
-  })
-);
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param configId 参数编号id, 不传为新增
- */
-function fnModalFTPVisibleByEdit() {
-  if (modalStateFTP.confirmLoading) return;
-  const hide = message.loading(t('common.loading'), 0);
-  modalStateFTP.confirmLoading = true;
-  getFTPInfo().then(res => {
-    modalStateFTP.confirmLoading = false;
-    hide();
-    if (res.code === RESULT_CODE_SUCCESS && res.data) {
-      modalStateFTP.from = Object.assign(modalStateFTP.from, res.data);
-      modalStateFTP.title = 'Setting Remote Backup';
-      modalStateFTP.openByEdit = true;
+/**同步文件到FTP */
+function fnSyncFileToFTP(row: Record<string, any>) {
+  pushBackupFTP({
+    path: row.path.substring(0, row.path.lastIndexOf('/')),
+    fileName: row.name,
+    tag: 'ne_config',
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success(t('common.operateOk'), 3);
     } else {
-      message.error(res.msg, 3);
-      modalStateFTP.title = 'Setting Remote Backup';
-      modalStateFTP.openByEdit = false;
+      message.warning(res.msg, 3);
     }
   });
 }
-
-/**FTP对象保存 */
-function fnModalFTPOk() {
-  modalStateFTPFrom.validate().then(() => {
-    modalStateFTP.confirmLoading = true;
-    const from = toRaw(modalStateFTP.from);
-    updateFTPInfo(from)
-      .then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success(`Configuration saved successfully`, 3);
-          fnModalFTPCancel();
-        } else {
-          message.warning(`Configuration save exception`, 3);
-        }
-      })
-      .finally(() => {
-        modalStateFTP.confirmLoading = false;
-      });
-  });
-}
-
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalFTPCancel() {
-  modalStateFTP.openByEdit = false;
-  modalStateFTPFrom.resetFields();
-}
-
-/**
- * 同步文件到FTP
- * @param row
- */
-function fnSyncFileToFTP(row: Record<string, any>) {
-  modalStateFTP.confirmLoading = true;
-  putFTPInfo(row.path)
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success(t('common.operateOk'), 3);
-      } else {
-        message.warning(res.msg, 3);
-      }
-    })
-    .finally(() => {
-      modalStateFTP.confirmLoading = false;
-    });
-}
 </script>
 
 <template>
@@ -572,8 +477,10 @@ function fnSyncFileToFTP(row: Record<string, any>) {
       <template #extra>
         <a-space :size="8" align="center">
           <a-tooltip placement="topRight">
-            <template #title>Setting Remote Backup</template>
-            <a-button type="text" @click.prevent="fnModalFTPVisibleByEdit()">
+            <template #title>
+              {{ t('views.ne.neConfigBackup.backupModal.title') }}
+            </template>
+            <a-button type="text" @click.prevent="fnFTPModalOpen()">
               <template #icon><DeliveredProcedureOutlined /></template>
             </a-button>
           </a-tooltip>
@@ -632,12 +539,10 @@ function fnSyncFileToFTP(row: Record<string, any>) {
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip placement="topRight">
-                <template #title>Send Current File To Remote Backup</template>
-                <a-button
-                  type="link"
-                  :loading="modalStateFTP.confirmLoading"
-                  @click.prevent="fnSyncFileToFTP(record)"
-                >
+                <template #title>
+                  {{ t('views.ne.neConfigBackup.backupModal.pushFileOper') }}
+                </template>
+                <a-button type="link" @click.prevent="fnSyncFileToFTP(record)">
                   <template #icon><CloudServerOutlined /></template>
                 </a-button>
               </a-tooltip>
@@ -676,7 +581,7 @@ function fnSyncFileToFTP(row: Record<string, any>) {
     <!-- 新增框或修改框 -->
     <ProModal
       :drag="true"
-      :width="512"
+      :width="520"
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
@@ -719,105 +624,8 @@ function fnSyncFileToFTP(row: Record<string, any>) {
       </a-form>
     </ProModal>
 
-    <!-- FTP -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :destroyOnClose="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :open="modalStateFTP.openByEdit"
-      :title="modalStateFTP.title"
-      :confirm-loading="modalStateFTP.confirmLoading"
-      @ok="fnModalFTPOk"
-      @cancel="fnModalFTPCancel"
-    >
-      <a-form
-        name="modalStateFTPFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :label-wrap="true"
-      >
-        <a-form-item label="Enable" name="enable" :label-col="{ span: 3 }">
-          <a-switch
-            v-model:checked="modalStateFTP.from.enable"
-            :checked-children="t('common.switch.open')"
-            :un-checked-children="t('common.switch.shut')"
-          />
-        </a-form-item>
-
-        <template v-if="modalStateFTP.from.enable">
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="Service IP"
-                name="toIp"
-                v-bind="modalStateFTPFrom.validateInfos.toIp"
-              >
-                <a-input
-                  v-model:value="modalStateFTP.from.toIp"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="Service Port"
-                name="toPort"
-                v-bind="modalStateFTPFrom.validateInfos.toPort"
-              >
-                <a-input-number
-                  v-model:value="modalStateFTP.from.toPort"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input-number>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="UserName"
-                name="username"
-                v-bind="modalStateFTPFrom.validateInfos.username"
-              >
-                <a-input
-                  v-model:value="modalStateFTP.from.username"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                label="Password"
-                name="password"
-                v-bind="modalStateFTPFrom.validateInfos.password"
-              >
-                <a-input-password
-                  v-model:value="modalStateFTP.from.password"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                ></a-input-password>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-form-item
-            label="Save Dir"
-            name="dir"
-            v-bind="modalStateFTPFrom.validateInfos.dir"
-            :label-col="{ span: 3 }"
-          >
-            <a-input
-              v-model:value="modalStateFTP.from.dir"
-              allow-clear
-              :placeholder="t('common.inputPlease')"
-            ></a-input>
-          </a-form-item>
-        </template>
-      </a-form>
-    </ProModal>
+    <!-- FTP配置窗口 -->
+    <BackupModal v-model:open="openFTPModal"></BackupModal>
   </PageContainer>
 </template>