ref: 统一ftp操作功能，备份文件查看下载删除功能
This commit is contained in:
TsMask
230
src/views/ne/neConfigBackup/components/BackupModal.vue
Normal file
230
src/views/ne/neConfigBackup/components/BackupModal.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user