From 54242ae2209f0ccc702ab043602db5087464e060 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Mon, 15 Jan 2024 14:15:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E5=A4=87=E4=BB=BD=E8=B7=AF=E5=BE=84=E6=97=A0=E6=B3=95=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E7=9A=84=E9=97=AE=E9=A2=98=20(#3612)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/setting/backup-account/index.vue    |   8 +-
 .../setting/backup-account/local/index.vue    | 126 ++++++++++++++++++
 2 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/setting/backup-account/local/index.vue

diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index 8c04da48f..045fda09a 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -9,7 +9,7 @@
                                 <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon>
                                 <span class="card-title">&nbsp;{{ $t('setting.LOCAL') }}</span>
                                 <div style="float: right">
-                                    <el-button round @click="onOpenDialog('edit', 'local', localData)">
+                                    <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)">
                                         {{ $t('commons.button.edit') }}
                                     </el-button>
                                 </div>
@@ -414,6 +414,7 @@
             </template>
         </LayoutContent>
 
+        <localDialog ref="localRef" @search="search" />
         <s3Dialog ref="s3Ref" @search="search" />
         <ossDialog ref="ossRef" @search="search" />
         <cosDialog ref="cosRef" @search="search" />
@@ -430,6 +431,7 @@ import { dateFormat } from '@/utils/util';
 import { onMounted, ref } from 'vue';
 import OpDialog from '@/components/del-dialog/index.vue';
 import { getBackupList, deleteBackup } from '@/api/modules/setting';
+import localDialog from '@/views/setting/backup-account/local/index.vue';
 import s3Dialog from '@/views/setting/backup-account/s3/index.vue';
 import ossDialog from '@/views/setting/backup-account/oss/index.vue';
 import cosDialog from '@/views/setting/backup-account/cos/index.vue';
@@ -446,6 +448,7 @@ const data = ref();
 const opRef = ref();
 const refresh = ref(false);
 
+const localRef = ref();
 const s3Ref = ref();
 const ossRef = ref();
 const cosRef = ref();
@@ -647,6 +650,9 @@ const onOpenDialog = async (
         rowData: { ...rowData },
     };
     switch (accountType) {
+        case 'LOCAL':
+            localRef.value.acceptParams(params);
+            return;
         case 'S3':
             s3Ref.value.acceptParams(params);
             return;
diff --git a/frontend/src/views/setting/backup-account/local/index.vue b/frontend/src/views/setting/backup-account/local/index.vue
new file mode 100644
index 000000000..d30aee4a8
--- /dev/null
+++ b/frontend/src/views/setting/backup-account/local/index.vue
@@ -0,0 +1,126 @@
+<template>
+    <div v-loading="loading">
+        <el-drawer v-model="drawerVisible" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+            <template #header>
+                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
+            </template>
+            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                            <el-tag>{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('setting.currentPath')"
+                            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-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-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>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Rules } from '@/global/form-rules';
+import FileList from '@/components/file-list/index.vue';
+import i18n from '@/lang';
+import { ElForm } from 'element-plus';
+import { Backup } from '@/api/interface/backup';
+import DrawerHeader from '@/components/drawer-header/index.vue';
+import { addBackup, editBackup } from '@/api/modules/setting';
+import { MsgSuccess } from '@/utils/message';
+
+const loading = ref(false);
+type FormInstance = InstanceType<typeof ElForm>;
+const formRef = ref<FormInstance>();
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+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);
+    drawerVisible.value = true;
+};
+
+const handleClose = () => {
+    emit('search');
+    drawerVisible.value = false;
+};
+
+const loadDir = async (path: string) => {
+    dialogData.value.rowData!.varsJson['dir'] = path;
+};
+
+const onSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        if (!dialogData.value.rowData) return;
+        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 lang="scss" scoped>
+.append-button {
+    width: 80px;
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-info);
+}
+</style>