feat: 日志备份FTP服务配置项

src/api/logManage/exportFile.ts

@@ -51,3 +51,41 @@ 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,
+  });
+}
+
+/**
+ * 获取FTP信息
+ * @param data 数据
+ * @returns object
+ */
+export function getFTPInfo() {
+  return request({
+    url: `/lm/table/ftp`,
+    method: 'get',
+  });
+}
+
+/**
+ * 发送FTP文件
+ * @param data 数据
+ * @returns object
+ */
+export function putFTPInfo(filePath: string, fileName: string) {
+  return request({
+    url: `/lm/table/ftp`,
+    method: 'put',
+    data: { filePath, fileName },
+  });
+}

src/views/logManage/exportFile/index.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, 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 { Modal, message } from 'ant-design-vue/es';
+import { Form, Modal, message } from 'ant-design-vue/es';
 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';
 const { t } = useI18n();
 
 /**网元参数 */
@@ -269,6 +274,130 @@ onMounted(() => {
   //   fnGetList();
   // });
 });
+
+/**对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**FTP日志对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: 'FTP上报服务设置',
+  from: {
+    useranme: '',
+    password: '',
+    toIp: '',
+    toPort: 22,
+    protocol: 'ftp',
+    dir: '',
+  },
+  confirmLoading: false,
+});
+
+/**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 = 'FTP Info';
+      modalState.openByEdit = true;
+    } else {
+      message.error(res.msg, 3);
+      modalState.title = 'FTP Info';
+      modalState.openByEdit = true;
+    }
+  });
+}
+
+/**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(`FTP configuration saved successfully`, 3);
+        } else {
+          message.warning(`FTP 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(`OK`, 3);
+      } else {
+        message.warning(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+    });
+}
 </script>
 
 <template>
@@ -305,6 +434,12 @@ onMounted(() => {
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>Setting</template>
+            <a-button type="text" @click.prevent="fnModalVisibleByEdit()">
+              <template #icon><DeliveredProcedureOutlined /></template>
+            </a-button>
+          </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
@@ -328,6 +463,14 @@ onMounted(() => {
         <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"
@@ -349,6 +492,113 @@ onMounted(() => {
         </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-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-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="Protocol" name="protocol">
+              <a-select
+                v-model:value="modalState.from.protocol"
+                default-value="N"
+                :placeholder="t('common.selectPlease')"
+                :options="[
+                  { value: 'ftp', label: 'FTP' },
+                  { value: 'ssh', label: 'SSH' },
+                ]"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="Save Dir"
+              name="dir"
+              v-bind="modalStateFrom.validateInfos.dir"
+            >
+              <a-input
+                v-model:value="modalState.from.dir"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </ProModal>
   </PageContainer>
 </template>
 

src/views/system/config/index.vue

@@ -93,7 +93,7 @@ let tableState: TabeStateType = reactive({
 });
 
 /**表格字段列 */
-let tableColumns: ColumnsType = [
+let tableColumns = ref<ColumnsType>([
   {
     title: t('common.rowId'),
     dataIndex: 'configId',
@@ -117,6 +117,7 @@ let tableColumns: ColumnsType = [
     dataIndex: 'configValue',
     align: 'left',
     width: 200,
+    ellipsis: true,
   },
   {
     title: t('views.system.config.configType'),
@@ -140,7 +141,7 @@ let tableColumns: ColumnsType = [
     key: 'configId',
     align: 'left',
   },
-];
+]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({