From e87fb7b50e7769fcc5281c273d634aae9bf2ef21 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 5 Sep 2024 21:53:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=87=E4=BB=BD=E8=B4=A6=E5=8F=B7=20b?=
 =?UTF-8?q?ucket=20=E6=94=AF=E6=8C=81=E6=89=8B=E5=8A=A8=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=20(#6381)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #6378
---
 frontend/src/api/interface/backup.ts          |  1 +
 .../setting/backup-account/cos/index.vue      | 66 ++++++++---------
 .../setting/backup-account/kodo/index.vue     | 68 ++++++++----------
 .../setting/backup-account/minio/index.vue    | 70 +++++++++----------
 .../setting/backup-account/oss/index.vue      | 66 ++++++++---------
 .../views/setting/backup-account/s3/index.vue | 62 ++++++++--------
 6 files changed, 148 insertions(+), 185 deletions(-)

diff --git a/frontend/src/api/interface/backup.ts b/frontend/src/api/interface/backup.ts
index d87675aee..c29c5e1fd 100644
--- a/frontend/src/api/interface/backup.ts
+++ b/frontend/src/api/interface/backup.ts
@@ -6,6 +6,7 @@ export namespace Backup {
         type: string;
         accessKey: string;
         bucket: string;
+        bucketInput: boolean;
         credential: string;
         backupPath: string;
         vars: string;
diff --git a/frontend/src/views/setting/backup-account/cos/index.vue b/frontend/src/views/setting/backup-account/cos/index.vue
index a98e7e8ac..e5c4ce2ba 100644
--- a/frontend/src/views/setting/backup-account/cos/index.vue
+++ b/frontend/src/views/setting/backup-account/cos/index.vue
@@ -54,18 +54,17 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                @change="errBuckets = false"
-                                style="width: 80%"
-                                v-model="cosData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+                        <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
+                            <el-checkbox v-model="cosData.rowData!.bucketInput" :label="$t('container.input')" />
+                            <el-input clearable v-if="cosData.rowData!.bucketInput" v-model="cosData.rowData!.bucket" />
+                            <div v-else class="w-full">
+                                <el-select style="width: 80%" v-model="cosData.rowData!.bucket">
+                                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                                </el-select>
+                                <el-button style="width: 20%" plain @click="getBuckets()">
+                                    {{ $t('setting.loadBucket') }}
+                                </el-button>
+                            </div>
                         </el-form-item>
                         <el-form-item
                             :label="$t('setting.scType')"
@@ -122,7 +121,6 @@ type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 const buckets = ref();
 const regionInput = ref();
-const errBuckets = ref();
 
 const endpointProto = ref('http');
 const emit = defineEmits(['search']);
@@ -181,35 +179,27 @@ const handleClose = () => {
     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(cosData.value.rowData!.varsJson);
-        item['endpoint'] = spliceHttp(endpointProto.value, cosData.value.rowData!.varsJson['endpointItem']);
-        listBucket({
-            type: cosData.value.rowData!.type,
-            vars: JSON.stringify(item),
-            accessKey: cosData.value.rowData!.accessKey,
-            credential: cosData.value.rowData!.credential,
+const getBuckets = async () => {
+    loading.value = true;
+    let item = deepCopy(cosData.value.rowData!.varsJson);
+    item['endpoint'] = spliceHttp(endpointProto.value, cosData.value.rowData!.varsJson['endpointItem']);
+    listBucket({
+        type: cosData.value.rowData!.type,
+        vars: JSON.stringify(item),
+        accessKey: cosData.value.rowData!.accessKey,
+        credential: cosData.value.rowData!.credential,
+    })
+        .then((res) => {
+            loading.value = false;
+            buckets.value = res.data;
         })
-            .then((res) => {
-                loading.value = false;
-                buckets.value = res.data;
-            })
-            .catch(() => {
-                buckets.value = [];
-                loading.value = false;
-            });
-    });
+        .catch(() => {
+            buckets.value = [];
+            loading.value = false;
+        });
 };
 
 const onSubmit = async (formEl: FormInstance | undefined) => {
-    if (!cosData.value.rowData.bucket) {
-        errBuckets.value = true;
-        return;
-    }
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
diff --git a/frontend/src/views/setting/backup-account/kodo/index.vue b/frontend/src/views/setting/backup-account/kodo/index.vue
index 2ba5d565c..889e4cde9 100644
--- a/frontend/src/views/setting/backup-account/kodo/index.vue
+++ b/frontend/src/views/setting/backup-account/kodo/index.vue
@@ -36,18 +36,21 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                @change="errBuckets = false"
-                                style="width: 80%"
+                        <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
+                            <el-checkbox v-model="kodoData.rowData!.bucketInput" :label="$t('container.input')" />
+                            <el-input
+                                clearable
+                                v-if="kodoData.rowData!.bucketInput"
                                 v-model="kodoData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+                            />
+                            <div v-else class="w-full">
+                                <el-select style="width: 80%" v-model="kodoData.rowData!.bucket">
+                                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                                </el-select>
+                                <el-button style="width: 20%" plain @click="getBuckets()">
+                                    {{ $t('setting.loadBucket') }}
+                                </el-button>
+                            </div>
                         </el-form-item>
 
                         <el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout">
@@ -95,7 +98,6 @@ const loading = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 const buckets = ref();
-const errBuckets = ref();
 
 const domainProto = ref('http');
 const emit = defineEmits(['search']);
@@ -129,35 +131,27 @@ const handleClose = () => {
     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(kodoData.value.rowData!.varsJson);
-        item['domain'] = spliceHttp(domainProto.value, kodoData.value.rowData!.varsJson['domainItem']);
-        listBucket({
-            type: kodoData.value.rowData!.type,
-            vars: JSON.stringify(item),
-            accessKey: kodoData.value.rowData!.accessKey,
-            credential: kodoData.value.rowData!.credential,
+const getBuckets = async () => {
+    loading.value = true;
+    let item = deepCopy(kodoData.value.rowData!.varsJson);
+    item['domain'] = spliceHttp(domainProto.value, kodoData.value.rowData!.varsJson['domainItem']);
+    listBucket({
+        type: kodoData.value.rowData!.type,
+        vars: JSON.stringify(item),
+        accessKey: kodoData.value.rowData!.accessKey,
+        credential: kodoData.value.rowData!.credential,
+    })
+        .then((res) => {
+            loading.value = false;
+            buckets.value = res.data;
         })
-            .then((res) => {
-                loading.value = false;
-                buckets.value = res.data;
-            })
-            .catch(() => {
-                buckets.value = [];
-                loading.value = false;
-            });
-    });
+        .catch(() => {
+            buckets.value = [];
+            loading.value = false;
+        });
 };
 
 const onSubmit = async (formEl: FormInstance | undefined) => {
-    if (!kodoData.value.rowData.bucket) {
-        errBuckets.value = true;
-        return;
-    }
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
diff --git a/frontend/src/views/setting/backup-account/minio/index.vue b/frontend/src/views/setting/backup-account/minio/index.vue
index 6faa3a959..1af3bf2e6 100644
--- a/frontend/src/views/setting/backup-account/minio/index.vue
+++ b/frontend/src/views/setting/backup-account/minio/index.vue
@@ -32,18 +32,21 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                style="width: 80%"
-                                @change="errBuckets = false"
+                        <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
+                            <el-checkbox v-model="minioData.rowData!.bucketInput" :label="$t('container.input')" />
+                            <el-input
+                                clearable
+                                v-if="minioData.rowData!.bucketInput"
                                 v-model="minioData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+                            />
+                            <div v-else class="w-full">
+                                <el-select style="width: 80%" v-model="minioData.rowData!.bucket">
+                                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                                </el-select>
+                                <el-button style="width: 20%" plain @click="getBuckets()">
+                                    {{ $t('setting.loadBucket') }}
+                                </el-button>
+                            </div>
                         </el-form-item>
                         <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
                             <el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" />
@@ -80,7 +83,6 @@ const loading = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 const buckets = ref();
-const errBuckets = ref();
 
 const endpointProto = ref('http');
 const emit = defineEmits(['search']);
@@ -111,36 +113,28 @@ const handleClose = () => {
     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(minioData.value.rowData!.varsJson);
-        item['endpoint'] = spliceHttp(endpointProto.value, minioData.value.rowData!.varsJson['endpointItem']);
-        item['endpointItem'] = undefined;
-        listBucket({
-            type: minioData.value.rowData!.type,
-            vars: JSON.stringify(item),
-            accessKey: minioData.value.rowData!.accessKey,
-            credential: minioData.value.rowData!.credential,
+const getBuckets = async () => {
+    loading.value = true;
+    let item = deepCopy(minioData.value.rowData!.varsJson);
+    item['endpoint'] = spliceHttp(endpointProto.value, minioData.value.rowData!.varsJson['endpointItem']);
+    item['endpointItem'] = undefined;
+    listBucket({
+        type: minioData.value.rowData!.type,
+        vars: JSON.stringify(item),
+        accessKey: minioData.value.rowData!.accessKey,
+        credential: minioData.value.rowData!.credential,
+    })
+        .then((res) => {
+            loading.value = false;
+            buckets.value = res.data;
         })
-            .then((res) => {
-                loading.value = false;
-                buckets.value = res.data;
-            })
-            .catch(() => {
-                buckets.value = [];
-                loading.value = false;
-            });
-    });
+        .catch(() => {
+            buckets.value = [];
+            loading.value = false;
+        });
 };
 
 const onSubmit = async (formEl: FormInstance | undefined) => {
-    if (!minioData.value.rowData.bucket) {
-        errBuckets.value = true;
-        return;
-    }
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
diff --git a/frontend/src/views/setting/backup-account/oss/index.vue b/frontend/src/views/setting/backup-account/oss/index.vue
index b7942c1ec..4c4d1fe2a 100644
--- a/frontend/src/views/setting/backup-account/oss/index.vue
+++ b/frontend/src/views/setting/backup-account/oss/index.vue
@@ -32,18 +32,17 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                @change="errBuckets = false"
-                                style="width: 80%"
-                                v-model="ossData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+                        <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
+                            <el-checkbox v-model="ossData.rowData!.bucketInput" :label="$t('container.input')" />
+                            <el-input clearable v-if="ossData.rowData!.bucketInput" v-model="ossData.rowData!.bucket" />
+                            <div v-else class="w-full">
+                                <el-select style="width: 80%" v-model="ossData.rowData!.bucket">
+                                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                                </el-select>
+                                <el-button style="width: 20%" plain @click="getBuckets()">
+                                    {{ $t('setting.loadBucket') }}
+                                </el-button>
+                            </div>
                         </el-form-item>
                         <el-form-item
                             :label="$t('setting.scType')"
@@ -99,7 +98,6 @@ const loading = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 const buckets = ref();
-const errBuckets = ref();
 
 const endpointProto = ref('http');
 const emit = defineEmits(['search']);
@@ -133,35 +131,27 @@ const handleClose = () => {
     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(ossData.value.rowData!.varsJson);
-        item['endpoint'] = spliceHttp(endpointProto.value, ossData.value.rowData!.varsJson['endpointItem']);
-        listBucket({
-            type: ossData.value.rowData!.type,
-            vars: JSON.stringify(item),
-            accessKey: ossData.value.rowData!.accessKey,
-            credential: ossData.value.rowData!.credential,
+const getBuckets = async () => {
+    loading.value = true;
+    let item = deepCopy(ossData.value.rowData!.varsJson);
+    item['endpoint'] = spliceHttp(endpointProto.value, ossData.value.rowData!.varsJson['endpointItem']);
+    listBucket({
+        type: ossData.value.rowData!.type,
+        vars: JSON.stringify(item),
+        accessKey: ossData.value.rowData!.accessKey,
+        credential: ossData.value.rowData!.credential,
+    })
+        .then((res) => {
+            loading.value = false;
+            buckets.value = res.data;
         })
-            .then((res) => {
-                loading.value = false;
-                buckets.value = res.data;
-            })
-            .catch(() => {
-                buckets.value = [];
-                loading.value = false;
-            });
-    });
+        .catch(() => {
+            buckets.value = [];
+            loading.value = false;
+        });
 };
 
 const onSubmit = async (formEl: FormInstance | undefined) => {
-    if (!ossData.value.rowData.bucket) {
-        errBuckets.value = true;
-        return;
-    }
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
diff --git a/frontend/src/views/setting/backup-account/s3/index.vue b/frontend/src/views/setting/backup-account/s3/index.vue
index 7ac43eae9..6cfb651f8 100644
--- a/frontend/src/views/setting/backup-account/s3/index.vue
+++ b/frontend/src/views/setting/backup-account/s3/index.vue
@@ -35,14 +35,17 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select @change="errBuckets = false" style="width: 80%" v-model="s3Data.rowData!.bucket">
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+                        <el-form-item label="Bucket" prop="bucket" :rules="Rules.requiredInput">
+                            <el-checkbox v-model="s3Data.rowData!.bucketInput" :label="$t('container.input')" />
+                            <el-input clearable v-if="s3Data.rowData!.bucketInput" v-model="s3Data.rowData!.bucket" />
+                            <div v-else class="w-full">
+                                <el-select style="width: 80%" v-model="s3Data.rowData!.bucket">
+                                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                                </el-select>
+                                <el-button style="width: 20%" plain @click="getBuckets()">
+                                    {{ $t('setting.loadBucket') }}
+                                </el-button>
+                            </div>
                         </el-form-item>
                         <el-form-item
                             :label="$t('setting.scType')"
@@ -98,7 +101,6 @@ const loading = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 const buckets = ref();
-const errBuckets = ref();
 
 const endpointProto = ref('http');
 const emit = defineEmits(['search']);
@@ -132,35 +134,27 @@ const handleClose = () => {
     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(s3Data.value.rowData!.varsJson);
-        item['endpoint'] = spliceHttp(endpointProto.value, s3Data.value.rowData!.varsJson['endpointItem']);
-        listBucket({
-            type: s3Data.value.rowData!.type,
-            vars: JSON.stringify(item),
-            accessKey: s3Data.value.rowData!.accessKey,
-            credential: s3Data.value.rowData!.credential,
+const getBuckets = async () => {
+    loading.value = true;
+    let item = deepCopy(s3Data.value.rowData!.varsJson);
+    item['endpoint'] = spliceHttp(endpointProto.value, s3Data.value.rowData!.varsJson['endpointItem']);
+    listBucket({
+        type: s3Data.value.rowData!.type,
+        vars: JSON.stringify(item),
+        accessKey: s3Data.value.rowData!.accessKey,
+        credential: s3Data.value.rowData!.credential,
+    })
+        .then((res) => {
+            loading.value = false;
+            buckets.value = res.data;
         })
-            .then((res) => {
-                loading.value = false;
-                buckets.value = res.data;
-            })
-            .catch(() => {
-                buckets.value = [];
-                loading.value = false;
-            });
-    });
+        .catch(() => {
+            buckets.value = [];
+            loading.value = false;
+        });
 };
 
 const onSubmit = async (formEl: FormInstance | undefined) => {
-    if (!s3Data.value.rowData.bucket) {
-        errBuckets.value = true;
-        return;
-    }
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;