ref: 统一ftp操作功能，备份文件查看下载删除功能

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>