1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-14 01:34:47 +08:00

fix: 备份账号 bucket 支持手动输入 (#6381)

Refs #6378
This commit is contained in:
ssongliu 2024-09-05 21:53:48 +08:00 committed by GitHub
parent 75612879c7
commit e87fb7b50e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 148 additions and 185 deletions

View File

@ -6,6 +6,7 @@ export namespace Backup {
type: string; type: string;
accessKey: string; accessKey: string;
bucket: string; bucket: string;
bucketInput: boolean;
credential: string; credential: string;
backupPath: string; backupPath: string;
vars: string; vars: string;

View File

@ -54,18 +54,17 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Bucket" prop="bucket"> <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
<el-select <el-checkbox v-model="cosData.rowData!.bucketInput" :label="$t('container.input')" />
@change="errBuckets = false" <el-input clearable v-if="cosData.rowData!.bucketInput" v-model="cosData.rowData!.bucket" />
style="width: 80%" <div v-else class="w-full">
v-model="cosData.rowData!.bucket" <el-select style="width: 80%" v-model="cosData.rowData!.bucket">
> <el-option v-for="item in buckets" :key="item" :value="item" />
<el-option v-for="item in buckets" :key="item" :value="item" /> </el-select>
</el-select> <el-button style="width: 20%" plain @click="getBuckets()">
<el-button style="width: 20%" plain @click="getBuckets(formRef)"> {{ $t('setting.loadBucket') }}
{{ $t('setting.loadBucket') }} </el-button>
</el-button> </div>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
:label="$t('setting.scType')" :label="$t('setting.scType')"
@ -122,7 +121,6 @@ type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const buckets = ref(); const buckets = ref();
const regionInput = ref(); const regionInput = ref();
const errBuckets = ref();
const endpointProto = ref('http'); const endpointProto = ref('http');
const emit = defineEmits(['search']); const emit = defineEmits(['search']);
@ -181,35 +179,27 @@ const handleClose = () => {
drawerVisible.value = false; drawerVisible.value = false;
}; };
const getBuckets = async (formEl: FormInstance | undefined) => { const getBuckets = async () => {
if (!formEl) return; loading.value = true;
formEl.validate(async (valid) => { let item = deepCopy(cosData.value.rowData!.varsJson);
if (!valid) return; item['endpoint'] = spliceHttp(endpointProto.value, cosData.value.rowData!.varsJson['endpointItem']);
loading.value = true; listBucket({
let item = deepCopy(cosData.value.rowData!.varsJson); type: cosData.value.rowData!.type,
item['endpoint'] = spliceHttp(endpointProto.value, cosData.value.rowData!.varsJson['endpointItem']); vars: JSON.stringify(item),
listBucket({ accessKey: cosData.value.rowData!.accessKey,
type: cosData.value.rowData!.type, credential: cosData.value.rowData!.credential,
vars: JSON.stringify(item), })
accessKey: cosData.value.rowData!.accessKey, .then((res) => {
credential: cosData.value.rowData!.credential, loading.value = false;
buckets.value = res.data;
}) })
.then((res) => { .catch(() => {
loading.value = false; buckets.value = [];
buckets.value = res.data; loading.value = false;
}) });
.catch(() => {
buckets.value = [];
loading.value = false;
});
});
}; };
const onSubmit = async (formEl: FormInstance | undefined) => { const onSubmit = async (formEl: FormInstance | undefined) => {
if (!cosData.value.rowData.bucket) {
errBuckets.value = true;
return;
}
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;

View File

@ -36,18 +36,21 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Bucket" prop="bucket"> <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
<el-select <el-checkbox v-model="kodoData.rowData!.bucketInput" :label="$t('container.input')" />
@change="errBuckets = false" <el-input
style="width: 80%" clearable
v-if="kodoData.rowData!.bucketInput"
v-model="kodoData.rowData!.bucket" v-model="kodoData.rowData!.bucket"
> />
<el-option v-for="item in buckets" :key="item" :value="item" /> <div v-else class="w-full">
</el-select> <el-select style="width: 80%" v-model="kodoData.rowData!.bucket">
<el-button style="width: 20%" plain @click="getBuckets(formRef)"> <el-option v-for="item in buckets" :key="item" :value="item" />
{{ $t('setting.loadBucket') }} </el-select>
</el-button> <el-button style="width: 20%" plain @click="getBuckets()">
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span> {{ $t('setting.loadBucket') }}
</el-button>
</div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout"> <el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout">
@ -95,7 +98,6 @@ const loading = ref(false);
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const buckets = ref(); const buckets = ref();
const errBuckets = ref();
const domainProto = ref('http'); const domainProto = ref('http');
const emit = defineEmits(['search']); const emit = defineEmits(['search']);
@ -129,35 +131,27 @@ const handleClose = () => {
drawerVisible.value = false; drawerVisible.value = false;
}; };
const getBuckets = async (formEl: FormInstance | undefined) => { const getBuckets = async () => {
if (!formEl) return; loading.value = true;
formEl.validate(async (valid) => { let item = deepCopy(kodoData.value.rowData!.varsJson);
if (!valid) return; item['domain'] = spliceHttp(domainProto.value, kodoData.value.rowData!.varsJson['domainItem']);
loading.value = true; listBucket({
let item = deepCopy(kodoData.value.rowData!.varsJson); type: kodoData.value.rowData!.type,
item['domain'] = spliceHttp(domainProto.value, kodoData.value.rowData!.varsJson['domainItem']); vars: JSON.stringify(item),
listBucket({ accessKey: kodoData.value.rowData!.accessKey,
type: kodoData.value.rowData!.type, credential: kodoData.value.rowData!.credential,
vars: JSON.stringify(item), })
accessKey: kodoData.value.rowData!.accessKey, .then((res) => {
credential: kodoData.value.rowData!.credential, loading.value = false;
buckets.value = res.data;
}) })
.then((res) => { .catch(() => {
loading.value = false; buckets.value = [];
buckets.value = res.data; loading.value = false;
}) });
.catch(() => {
buckets.value = [];
loading.value = false;
});
});
}; };
const onSubmit = async (formEl: FormInstance | undefined) => { const onSubmit = async (formEl: FormInstance | undefined) => {
if (!kodoData.value.rowData.bucket) {
errBuckets.value = true;
return;
}
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;

View File

@ -32,18 +32,21 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Bucket" prop="bucket"> <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
<el-select <el-checkbox v-model="minioData.rowData!.bucketInput" :label="$t('container.input')" />
style="width: 80%" <el-input
@change="errBuckets = false" clearable
v-if="minioData.rowData!.bucketInput"
v-model="minioData.rowData!.bucket" v-model="minioData.rowData!.bucket"
> />
<el-option v-for="item in buckets" :key="item" :value="item" /> <div v-else class="w-full">
</el-select> <el-select style="width: 80%" v-model="minioData.rowData!.bucket">
<el-button style="width: 20%" plain @click="getBuckets(formRef)"> <el-option v-for="item in buckets" :key="item" :value="item" />
{{ $t('setting.loadBucket') }} </el-select>
</el-button> <el-button style="width: 20%" plain @click="getBuckets()">
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span> {{ $t('setting.loadBucket') }}
</el-button>
</div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath"> <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" /> <el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" />
@ -80,7 +83,6 @@ const loading = ref(false);
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const buckets = ref(); const buckets = ref();
const errBuckets = ref();
const endpointProto = ref('http'); const endpointProto = ref('http');
const emit = defineEmits(['search']); const emit = defineEmits(['search']);
@ -111,36 +113,28 @@ const handleClose = () => {
drawerVisible.value = false; drawerVisible.value = false;
}; };
const getBuckets = async (formEl: FormInstance | undefined) => { const getBuckets = async () => {
if (!formEl) return; loading.value = true;
formEl.validate(async (valid) => { let item = deepCopy(minioData.value.rowData!.varsJson);
if (!valid) return; item['endpoint'] = spliceHttp(endpointProto.value, minioData.value.rowData!.varsJson['endpointItem']);
loading.value = true; item['endpointItem'] = undefined;
let item = deepCopy(minioData.value.rowData!.varsJson); listBucket({
item['endpoint'] = spliceHttp(endpointProto.value, minioData.value.rowData!.varsJson['endpointItem']); type: minioData.value.rowData!.type,
item['endpointItem'] = undefined; vars: JSON.stringify(item),
listBucket({ accessKey: minioData.value.rowData!.accessKey,
type: minioData.value.rowData!.type, credential: minioData.value.rowData!.credential,
vars: JSON.stringify(item), })
accessKey: minioData.value.rowData!.accessKey, .then((res) => {
credential: minioData.value.rowData!.credential, loading.value = false;
buckets.value = res.data;
}) })
.then((res) => { .catch(() => {
loading.value = false; buckets.value = [];
buckets.value = res.data; loading.value = false;
}) });
.catch(() => {
buckets.value = [];
loading.value = false;
});
});
}; };
const onSubmit = async (formEl: FormInstance | undefined) => { const onSubmit = async (formEl: FormInstance | undefined) => {
if (!minioData.value.rowData.bucket) {
errBuckets.value = true;
return;
}
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;

View File

@ -32,18 +32,17 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Bucket" prop="bucket"> <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
<el-select <el-checkbox v-model="ossData.rowData!.bucketInput" :label="$t('container.input')" />
@change="errBuckets = false" <el-input clearable v-if="ossData.rowData!.bucketInput" v-model="ossData.rowData!.bucket" />
style="width: 80%" <div v-else class="w-full">
v-model="ossData.rowData!.bucket" <el-select style="width: 80%" v-model="ossData.rowData!.bucket">
> <el-option v-for="item in buckets" :key="item" :value="item" />
<el-option v-for="item in buckets" :key="item" :value="item" /> </el-select>
</el-select> <el-button style="width: 20%" plain @click="getBuckets()">
<el-button style="width: 20%" plain @click="getBuckets(formRef)"> {{ $t('setting.loadBucket') }}
{{ $t('setting.loadBucket') }} </el-button>
</el-button> </div>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
:label="$t('setting.scType')" :label="$t('setting.scType')"
@ -99,7 +98,6 @@ const loading = ref(false);
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const buckets = ref(); const buckets = ref();
const errBuckets = ref();
const endpointProto = ref('http'); const endpointProto = ref('http');
const emit = defineEmits(['search']); const emit = defineEmits(['search']);
@ -133,35 +131,27 @@ const handleClose = () => {
drawerVisible.value = false; drawerVisible.value = false;
}; };
const getBuckets = async (formEl: FormInstance | undefined) => { const getBuckets = async () => {
if (!formEl) return; loading.value = true;
formEl.validate(async (valid) => { let item = deepCopy(ossData.value.rowData!.varsJson);
if (!valid) return; item['endpoint'] = spliceHttp(endpointProto.value, ossData.value.rowData!.varsJson['endpointItem']);
loading.value = true; listBucket({
let item = deepCopy(ossData.value.rowData!.varsJson); type: ossData.value.rowData!.type,
item['endpoint'] = spliceHttp(endpointProto.value, ossData.value.rowData!.varsJson['endpointItem']); vars: JSON.stringify(item),
listBucket({ accessKey: ossData.value.rowData!.accessKey,
type: ossData.value.rowData!.type, credential: ossData.value.rowData!.credential,
vars: JSON.stringify(item), })
accessKey: ossData.value.rowData!.accessKey, .then((res) => {
credential: ossData.value.rowData!.credential, loading.value = false;
buckets.value = res.data;
}) })
.then((res) => { .catch(() => {
loading.value = false; buckets.value = [];
buckets.value = res.data; loading.value = false;
}) });
.catch(() => {
buckets.value = [];
loading.value = false;
});
});
}; };
const onSubmit = async (formEl: FormInstance | undefined) => { const onSubmit = async (formEl: FormInstance | undefined) => {
if (!ossData.value.rowData.bucket) {
errBuckets.value = true;
return;
}
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;

View File

@ -35,14 +35,17 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Bucket" prop="bucket"> <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
<el-select @change="errBuckets = false" style="width: 80%" v-model="s3Data.rowData!.bucket"> <el-checkbox v-model="s3Data.rowData!.bucketInput" :label="$t('container.input')" />
<el-option v-for="item in buckets" :key="item" :value="item" /> <el-input clearable v-if="s3Data.rowData!.bucketInput" v-model="s3Data.rowData!.bucket" />
</el-select> <div v-else class="w-full">
<el-button style="width: 20%" plain @click="getBuckets(formRef)"> <el-select style="width: 80%" v-model="s3Data.rowData!.bucket">
{{ $t('setting.loadBucket') }} <el-option v-for="item in buckets" :key="item" :value="item" />
</el-button> </el-select>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span> <el-button style="width: 20%" plain @click="getBuckets()">
{{ $t('setting.loadBucket') }}
</el-button>
</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
:label="$t('setting.scType')" :label="$t('setting.scType')"
@ -98,7 +101,6 @@ const loading = ref(false);
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const buckets = ref(); const buckets = ref();
const errBuckets = ref();
const endpointProto = ref('http'); const endpointProto = ref('http');
const emit = defineEmits(['search']); const emit = defineEmits(['search']);
@ -132,35 +134,27 @@ const handleClose = () => {
drawerVisible.value = false; drawerVisible.value = false;
}; };
const getBuckets = async (formEl: FormInstance | undefined) => { const getBuckets = async () => {
if (!formEl) return; loading.value = true;
formEl.validate(async (valid) => { let item = deepCopy(s3Data.value.rowData!.varsJson);
if (!valid) return; item['endpoint'] = spliceHttp(endpointProto.value, s3Data.value.rowData!.varsJson['endpointItem']);
loading.value = true; listBucket({
let item = deepCopy(s3Data.value.rowData!.varsJson); type: s3Data.value.rowData!.type,
item['endpoint'] = spliceHttp(endpointProto.value, s3Data.value.rowData!.varsJson['endpointItem']); vars: JSON.stringify(item),
listBucket({ accessKey: s3Data.value.rowData!.accessKey,
type: s3Data.value.rowData!.type, credential: s3Data.value.rowData!.credential,
vars: JSON.stringify(item), })
accessKey: s3Data.value.rowData!.accessKey, .then((res) => {
credential: s3Data.value.rowData!.credential, loading.value = false;
buckets.value = res.data;
}) })
.then((res) => { .catch(() => {
loading.value = false; buckets.value = [];
buckets.value = res.data; loading.value = false;
}) });
.catch(() => {
buckets.value = [];
loading.value = false;
});
});
}; };
const onSubmit = async (formEl: FormInstance | undefined) => { const onSubmit = async (formEl: FormInstance | undefined) => {
if (!s3Data.value.rowData.bucket) {
errBuckets.value = true;
return;
}
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;