1Panel/frontend/src/views/setting/backup-account/operate/index.vue
2024-08-22 10:46:54 +00:00

552 lines
24 KiB
Vue

<template>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
<el-form-item :label="$t('commons.table.name')" prop="name" :rules="Rules.requiredInput">
<el-tag v-if="dialogData.title === 'edit'">{{ dialogData.rowData!.name }}</el-tag>
<el-input v-else v-model="dialogData.rowData!.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag v-if="dialogData.title === 'edit'">{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
<el-select v-else v-model="dialogData.rowData!.type" @change="changeType">
<el-option :label="$t('setting.COS')" value="COS"></el-option>
<el-option :label="$t('setting.KODO')" value="KODO"></el-option>
<el-option :label="$t('setting.MINIO')" value="MINIO"></el-option>
<el-option :label="$t('setting.OneDrive')" value="OneDrive"></el-option>
<el-option :label="$t('setting.OSS')" value="OSS"></el-option>
<el-option :label="$t('setting.S3')" value="S3"></el-option>
<el-option :label="$t('setting.SFTP')" value="SFTP"></el-option>
<el-option :label="$t('setting.WebDAV')" value="WebDAV"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="hasAccessKey()" label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="dialogData.rowData!.accessKey" />
</el-form-item>
<el-form-item v-if="hasAccessKey()" label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="dialogData.rowData!.credential" />
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'WebDAV'"
:label="$t('setting.address')"
prop="varsJson.address"
:rules="Rules.requiredInput"
>
<el-input v-model="dialogData.rowData!.varsJson['address']" />
<span class="input-help">
{{ $t('setting.WebDAVAlist') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toWebDAVDoc()"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<div v-if="dialogData.rowData!.type === 'SFTP'">
<el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.host">
<el-input v-model.trim="dialogData.rowData!.varsJson['address']" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[Rules.port]">
<el-input-number :min="0" :max="65535" v-model.number="dialogData.rowData!.varsJson['port']" />
</el-form-item>
</div>
<div v-if="hasPassword()">
<el-form-item :label="$t('commons.login.username')" prop="accessKey" :rules="[Rules.requiredInput]">
<el-input v-model.trim="dialogData.rowData!.accessKey" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="credential" :rules="[Rules.requiredInput]">
<el-input type="password" clearable show-password v-model.trim="dialogData.rowData!.credential" />
</el-form-item>
</div>
<el-form-item
v-if="dialogData.rowData!.type !== 'LOCAL' && dialogData.rowData!.type !== 'OneDrive'"
prop="rememberAuth"
>
<el-checkbox v-model="dialogData.rowData!.rememberAuth">
{{ $t('terminal.rememberPassword') }}
</el-checkbox>
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'COS'"
label="Region"
prop="varsJson.region"
:rules="Rules.requiredInput"
>
<el-checkbox v-model="regionInput" :label="$t('container.input')" />
<el-select v-if="!regionInput" v-model="dialogData.rowData!.varsJson['region']" filterable clearable>
<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
<span class="float-left">{{ item.label }}</span>
<span class="option-help">
{{ item.value }}
</span>
</el-option>
</el-select>
<el-input v-else v-model.trim="dialogData.rowData!.varsJson['region']" />
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'S3'"
label="Region"
prop="varsJson.region"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="dialogData.rowData!.varsJson['region']" />
</el-form-item>
<el-form-item
v-if="hasAccessKey()"
:label="dialogData.rowData!.type === 'KODO' ? $t('setting.domain') : 'Endpoint'"
prop="varsJson.endpointItem"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="dialogData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="domainProto" class="p-w-100">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="hasAccessKey()" label="Bucket" prop="bucket">
<el-select @change="errBuckets = false" class="!w-4/5" v-model="dialogData.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button class="!w-1/5" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'COS'"
:label="$t('setting.scType')"
prop="varsJson.scType"
:rules="[Rules.requiredSelect]"
>
<el-select v-model="dialogData.rowData!.varsJson['scType']">
<el-option value="Standard" :label="$t('setting.scStandard')" />
<el-option value="Standard_IA" :label="$t('setting.scStandard_IA')" />
<el-option value="Archive" :label="$t('setting.scArchive')" />
<el-option value="Deep_Archive" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="dialogData.rowData!.varsJson['scType'] === 'Archive' || dialogData.rowData!.varsJson['scType'] === 'Deep_Archive'"
class="mt-2.5"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'OSS'"
:label="$t('setting.scType')"
prop="varsJson.scType"
:rules="[Rules.requiredSelect]"
>
<el-select v-model="dialogData.rowData!.varsJson['scType']">
<el-option value="Standard" :label="$t('setting.scStandard')" />
<el-option value="IA" :label="$t('setting.scStandard_IA')" />
<el-option value="Archive" :label="$t('setting.scArchive')" />
<el-option value="ColdArchive" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="dialogData.rowData!.varsJson['scType'] === 'Archive' || dialogData.rowData!.varsJson['scType'] === 'ColdArchive'"
class="mt-2.5"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'S3'"
:label="$t('setting.scType')"
prop="varsJson.scType"
:rules="[Rules.requiredSelect]"
>
<el-select v-model="dialogData.rowData!.varsJson['scType']">
<el-option value="STANDARD" :label="$t('setting.scStandard')" />
<el-option value="STANDARD_IA" :label="$t('setting.scStandard_IA')" />
<el-option value="GLACIER" :label="$t('setting.scArchive')" />
<el-option value="DEEP_ARCHIVE" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="dialogData.rowData!.varsJson['scType'] === 'GLACIER' || dialogData.rowData!.varsJson['scType'] === 'DEEP_ARCHIVE'"
class="mt-2.5"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'KODO'"
:label="$t('cronjob.requestExpirationTime')"
prop="varsJson.timeout"
>
<el-input-number
style="width: 200px"
:min="1"
step-strictly
:step="1"
v-model.number="dialogData.rowData!.varsJson['timeout']"
></el-input-number>
</el-form-item>
<div v-if="dialogData.rowData!.type === 'OneDrive'">
<el-form-item>
<el-radio-group v-model="dialogData.rowData!.varsJson['isCN']" @change="changeFrom">
<el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
<el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
</el-radio-group>
<span class="input-help">
{{ $t('setting.onedrive_helper') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc(true)"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item :label="$t('setting.client_id')" prop="varsJson.client_id" :rules="Rules.requiredInput">
<el-input v-model.trim="dialogData.rowData!.varsJson['client_id']" />
</el-form-item>
<el-form-item
:label="$t('setting.client_secret')"
prop="varsJson.client_secret"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="dialogData.rowData!.varsJson['client_secret']" />
</el-form-item>
<el-form-item
:label="$t('setting.redirect_uri')"
prop="varsJson.redirect_uri"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="dialogData.rowData!.varsJson['redirect_uri']" />
</el-form-item>
<el-form-item :label="$t('setting.code')" prop="varsJson.code" :rules="rules.driveCode">
<div class="!w-full">
<el-input
style="width: calc(100% - 80px)"
:rows="3"
type="textarea"
clearable
v-model.trim="dialogData.rowData!.varsJson['code']"
/>
<el-button class="append-button" @click="jumpAzure(formRef)">
{{ $t('setting.loadCode') }}
</el-button>
</div>
<span class="input-help">
{{ $t('setting.codeHelper') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc(false)"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
</div>
<el-form-item v-if="hasBackDir()" :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="dialogData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'SFTP'"
:label="$t('setting.backupDir')"
prop="bucket"
:rules="[Rules.requiredInput]"
>
<el-input v-model.trim="dialogData.rowData!.bucket" />
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'LOCAL'"
:label="$t('setting.backupDir')"
prop="varsJson['dir']"
:rules="Rules.requiredInput"
>
<el-input v-model="dialogData.rowData!.varsJson['dir']">
<template #prepend>
<FileList @choose="loadDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import { addBackup, editBackup, getOneDriveInfo, listBucket } from '@/api/modules/backup';
import { cities } from './../helper';
import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';
import { Base64 } from 'js-base64';
const loading = ref(false);
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const buckets = ref();
const errBuckets = ref();
const oneDriveInfo = ref();
const regionInput = ref();
const domainProto = ref('http');
const emit = defineEmits(['search']);
const rules = reactive({
driveCode: [{ validator: checkDriveCode, required: true, trigger: 'blur' }],
});
function checkDriveCode(rule: any, value: any, callback: any) {
if (!value) {
return callback(new Error(i18n.global.t('setting.codeWarning')));
}
const reg = /^[A-Za-z0-9_.-]+$/;
if (!reg.test(value)) {
return callback(new Error(i18n.global.t('setting.codeWarning')));
}
callback();
}
interface DialogProps {
title: string;
rowData?: Backup.BackupInfo;
}
const title = ref<string>('');
const drawerVisible = ref(false);
const dialogData = ref<DialogProps>({
title: '',
});
const acceptParams = (params: DialogProps): void => {
dialogData.value = params;
title.value = i18n.global.t('commons.button.' + dialogData.value.title);
if (dialogData.value.title === 'create') {
dialogData.value.rowData!.type = 'OSS';
changeType();
drawerVisible.value = true;
return;
}
buckets.value = [];
if (hasAccessKey()) {
let itemJson = dialogData.value.rowData!.varsJson['endpoint'];
if (dialogData.value.rowData!.type === 'KODO') {
itemJson = dialogData.value.rowData!.varsJson['domain'];
}
let httpItem = splitHttp(itemJson);
dialogData.value.rowData!.varsJson['endpointItem'] = httpItem.url;
domainProto.value = httpItem.proto;
}
if (dialogData.value.rowData!.rememberAuth) {
dialogData.value.rowData!.accessKey = Base64.decode(dialogData.value.rowData!.accessKey);
dialogData.value.rowData!.credential = Base64.decode(dialogData.value.rowData!.credential);
}
if (dialogData.value.rowData!.varsJson['timeout'] === undefined) {
dialogData.value.rowData!.varsJson['timeout'] = 1;
}
drawerVisible.value = true;
};
const toDoc = (isConf: boolean) => {
let item = isConf ? '#onedrive' : '#onedrive_1';
window.open('https://1panel.cn/docs/user_manual/settings/' + item, '_blank', 'noopener,noreferrer');
};
const toWebDAVDoc = () => {
window.open('https://1panel.cn/docs/user_manual/settings/#webdav-alist', '_blank', 'noopener,noreferrer');
};
const jumpAzure = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
const result = await formEl.validateField('varsJson.client_id', callback);
if (!result) {
return;
}
const result1 = await formEl.validateField('varsJson.redirect_uri', callback);
if (!result1) {
return;
}
let client_id = dialogData.value.rowData.varsJson['client_id'];
let redirect_uri = dialogData.value.rowData.varsJson['redirect_uri'];
let commonUrl = `response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri}&scope=offline_access+Files.ReadWrite.All+User.Read`;
if (!dialogData.value.rowData!.varsJson['isCN']) {
window.open('https://login.microsoftonline.com/common/oauth2/v2.0/authorize?' + commonUrl, '_blank');
} else {
window.open('https://login.chinacloudapi.cn/common/oauth2/v2.0/authorize?' + commonUrl, '_blank');
}
};
function callback(error: any) {
if (error) {
return error.message;
} else {
return;
}
}
const hasAccessKey = () => {
let itemType = dialogData.value.rowData!.type;
return itemType === 'COS' || itemType === 'KODO' || itemType === 'MINIO' || itemType === 'OSS' || itemType === 'S3';
};
const hasPassword = () => {
let itemType = dialogData.value.rowData!.type;
return itemType === 'SFTP' || itemType === 'WebDAV';
};
const hasBackDir = () => {
let itemType = dialogData.value.rowData!.type;
return itemType !== 'LOCAL' && itemType !== 'SFTP';
};
const loadDir = async (path: string) => {
dialogData.value.rowData!.varsJson['dir'] = path;
};
const changeType = async () => {
buckets.value = [];
dialogData.value.rowData!.varsJson = {};
dialogData.value.rowData!.rememberAuth = false;
switch (dialogData.value.rowData!.type) {
case 'COS':
case 'OSS':
case 'S3':
dialogData.value.rowData.varsJson['scType'] = 'Standard';
break;
case 'KODO':
dialogData.value.rowData!.varsJson['timeout'] = 1;
break;
case 'OneDrive':
dialogData.value.rowData.varsJson['isCN'] = false;
const res = await getOneDriveInfo();
oneDriveInfo.value = res.data;
if (!dialogData.value.rowData.id) {
dialogData.value.rowData.varsJson = {
isCN: false,
client_id: res.data.client_id,
client_secret: res.data.client_secret,
redirect_uri: res.data.redirect_uri,
};
}
case 'SFTP':
dialogData.value.rowData.varsJson['port'] = 22;
}
};
const changeFrom = () => {
if (dialogData.value.rowData.varsJson['isCN']) {
dialogData.value.rowData.varsJson = {
isCN: true,
client_id: '',
client_secret: '',
redirect_uri: '',
};
} else {
dialogData.value.rowData.varsJson = {
isCN: false,
client_id: oneDriveInfo.value.client_id,
client_secret: oneDriveInfo.value.client_secret,
redirect_uri: oneDriveInfo.value.redirect_uri,
};
}
};
const handleClose = () => {
emit('search');
drawerVisible.value = false;
};
const getBuckets = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
loading.value = true;
let item = deepCopy(dialogData.value.rowData!.varsJson);
if (dialogData.value.rowData!.type === 'KODO') {
item['domain'] = spliceHttp(domainProto.value, dialogData.value.rowData!.varsJson['endpointItem']);
} else {
item['endpoint'] = spliceHttp(domainProto.value, dialogData.value.rowData!.varsJson['endpointItem']);
}
item['endpointItem'] = undefined;
listBucket({
type: dialogData.value.rowData!.type,
vars: JSON.stringify(item),
accessKey: dialogData.value.rowData!.accessKey,
credential: dialogData.value.rowData!.credential,
})
.then((res) => {
loading.value = false;
buckets.value = res.data;
})
.catch(() => {
buckets.value = [];
loading.value = false;
});
});
};
const onSubmit = async (formEl: FormInstance | undefined) => {
if (hasAccessKey() && !dialogData.value.rowData.bucket) {
errBuckets.value = true;
return;
}
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
if (!dialogData.value.rowData) return;
if (hasAccessKey()) {
let itemEndpoint = spliceHttp(domainProto.value, dialogData.value.rowData!.varsJson['endpointItem']);
if (dialogData.value.rowData!.type === 'KODO') {
dialogData.value.rowData!.varsJson['domain'] = itemEndpoint;
} else {
dialogData.value.rowData!.varsJson['endpoint'] = itemEndpoint;
}
dialogData.value.rowData!.varsJson['endpointItem'] = undefined;
}
dialogData.value.rowData.vars = JSON.stringify(dialogData.value.rowData!.varsJson);
loading.value = true;
if (dialogData.value.title === 'create') {
await addBackup(dialogData.value.rowData)
.then(() => {
loading.value = false;
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
drawerVisible.value = false;
})
.catch(() => {
loading.value = false;
});
return;
}
await editBackup(dialogData.value.rowData)
.then(() => {
loading.value = false;
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
drawerVisible.value = false;
})
.catch(() => {
loading.value = false;
});
});
};
defineExpose({
acceptParams,
});
</script>
<style scoped lang="scss">
.option-help {
float: right;
font-size: 12px;
word-break: break-all;
color: #8f959e;
}
</style>