fix: 增加容器操作 loading

frontend/src/views/container/container/create/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ $t('container.containerCreate') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
             <el-form-item :label="$t('container.name')" prop="name">
                 <el-input clearable v-model="form.name" />
             </el-form-item>
@@ -179,8 +179,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading" @click="createVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -196,6 +198,8 @@ import { ElForm, ElMessage } from 'element-plus';
 import { listImage, listVolume, createContainer } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 
+const loading = ref(false);
+
 const createVisiable = ref(false);
 const form = reactive({
     name: '',
@@ -295,10 +299,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
                 form.memory = form.memoryItem * 1024 * 1024 * 1024;
                 break;
         }
-        await createContainer(form);
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        emit('search');
-        createVisiable.value = false;
+        loading.value = true;
+        await createContainer(form)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                createVisiable.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/container/reName/index.vue

@@ -11,15 +11,17 @@
                 <span>{{ $t('container.rename') }}</span>
             </div>
         </template>
-        <el-form ref="newNameRef" :model="renameForm">
+        <el-form ref="newNameRef" v-loading="loading" :model="renameForm">
             <el-form-item :label="$t('container.newName')" :rules="Rules.requiredInput" prop="newName">
                 <el-input v-model="renameForm.newName"></el-input>
             </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="newNameVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmitName(newNameRef)">
+                <el-button :disabled="loading" @click="newNameVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSubmitName(newNameRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -34,6 +36,8 @@ import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { reactive, ref } from 'vue';
 
+const loading = ref(false);
+
 const renameForm = reactive({
     containerID: '',
     operation: 'rename',
@@ -51,10 +55,17 @@ const onSubmitName = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        await ContainerOperator(renameForm);
-        emit('search');
-        newNameVisiable.value = false;
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+        loading.value = true;
+        await ContainerOperator(renameForm)
+            .then(() => {
+                loading.value = false;
+                emit('search');
+                newNameVisiable.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/image/build/index.vue

@@ -55,13 +55,14 @@
             :extensions="extensions"
             v-model="logInfo"
             :readOnly="true"
-            ref="buildLogRef"
         />
 
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="buildVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="buttonDisabled" @click="buildVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -83,10 +84,11 @@ import { LoadFile } from '@/api/modules/files';
 
 const logVisiable = ref<boolean>(false);
 const logInfo = ref();
-const buildLogRef = ref();
 const extensions = [javascript(), oneDark];
 let timer: NodeJS.Timer | null = null;
 
+const buttonDisabled = ref(false);
+
 const buildVisiable = ref(false);
 const form = reactive({
     from: 'path',
@@ -113,6 +115,7 @@ const acceptParams = async () => {
     form.tagStr = '';
     form.name = '';
     logInfo.value = '';
+    buttonDisabled.value = false;
 };
 
 const emit = defineEmits<{ (e: 'search'): void }>();
@@ -128,6 +131,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
             form.tags = form.tagStr.split('\n');
         }
         const res = await imageBuild(form);
+        buttonDisabled.value = true;
         logVisiable.value = true;
         loadLogs(res.data);
         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));

frontend/src/views/container/image/index.vue

@@ -17,7 +17,7 @@
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </template>
-                <el-table-column type="selection" fix></el-table-column>
+                <el-table-column type="selection" fix />
                 <el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
                 <el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
                     <template #default="{ row }">
@@ -199,6 +199,7 @@ const buttons = [
         label: i18n.global.t('commons.button.delete'),
         click: (row: Container.ImageInfo) => {
             deleteForm.tags = row.tags;
+            deleteForm.deleteTags = [];
             deleteVisiable.value = true;
         },
     },

frontend/src/views/container/image/load/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ $t('container.importImage') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="form" label-width="80px">
+        <el-form v-loading="loading" ref="formRef" :model="form" label-width="80px">
             <el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
                 <el-input clearable v-model="form.path">
                     <template #append>
@@ -16,8 +16,12 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="loadVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">{{ $t('container.import') }}</el-button>
+                <el-button :disabeld="loading" @click="loadVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
+                    {{ $t('container.import') }}
+                </el-button>
             </span>
         </template>
     </el-dialog>
@@ -31,6 +35,8 @@ import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { imageLoad } from '@/api/modules/container';
 
+const loading = ref(false);
+
 const loadVisiable = ref(false);
 const form = reactive({
     path: '',
@@ -50,14 +56,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        try {
-            loadVisiable.value = false;
-            await imageLoad(form);
-            emit('search');
-            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        } catch {
-            emit('search');
-        }
+        loading.value = true;
+        await imageLoad(form)
+            .then(() => {
+                loading.value = false;
+                loadVisiable.value = false;
+                emit('search');
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/image/save/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ $t('container.exportImage') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="form" label-width="80px">
+        <el-form v-loading="loading" ref="formRef" :model="form" label-width="80px">
             <el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName">
                 <el-select filterable v-model="form.tagName">
                     <el-option
@@ -32,8 +32,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="saveVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabeld="loading" @click="saveVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('container.export') }}
                 </el-button>
             </span>
@@ -50,6 +52,8 @@ import { ElForm, ElMessage } from 'element-plus';
 import { imageSave } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 
+const loading = ref(false);
+
 const saveVisiable = ref(false);
 const form = reactive({
     tags: [] as Array<string>,
@@ -85,14 +89,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        try {
-            saveVisiable.value = false;
-            await imageSave(form);
-            emit('search');
-            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        } catch {
-            emit('search');
-        }
+        loading.value = true;
+        await imageSave(form)
+            .then(() => {
+                loading.value = false;
+                saveVisiable.value = false;
+                emit('search');
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/image/tag/index.vue

@@ -5,7 +5,7 @@
                 <span>Tag {{ $t('container.image') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="form" label-width="80px">
+        <el-form v-loading="loading" ref="formRef" :model="form" label-width="80px">
             <el-form-item :label="$t('container.from')">
                 <el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
             </el-form-item>
@@ -27,8 +27,12 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="tagVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">{{ $t('commons.button.save') }}</el-button>
+                <el-button :disabeld="loading" @click="tagVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
+                    {{ $t('commons.button.save') }}
+                </el-button>
             </span>
         </template>
     </el-dialog>
@@ -42,6 +46,8 @@ import { ElForm, ElMessage } from 'element-plus';
 import { imageTag } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 
+const loading = ref(false);
+
 const tagVisiable = ref(false);
 const form = reactive({
     sourceID: '',
@@ -77,17 +83,20 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        try {
-            if (!form.fromRepo) {
-                form.repoID = 0;
-            }
-            tagVisiable.value = false;
-            await imageTag(form);
-            emit('search');
-            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        } catch {
-            emit('search');
+        if (!form.fromRepo) {
+            form.repoID = 0;
         }
+        loading.value = true;
+        await imageTag(form)
+            .then(() => {
+                loading.value = false;
+                tagVisiable.value = false;
+                emit('search');
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/network/create/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ $t('container.createNetwork') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
             <el-form-item :label="$t('container.networkName')" prop="name">
                 <el-input clearable v-model="form.name" />
             </el-form-item>
@@ -45,8 +45,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading" @click="createVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -61,6 +63,8 @@ import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { createNetwork } from '@/api/modules/container';
 
+const loading = ref(false);
+
 const createVisiable = ref(false);
 const form = reactive({
     name: '',
@@ -87,12 +91,6 @@ const rules = reactive({
 
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
-
-function restForm() {
-    if (formRef.value) {
-        formRef.value.resetFields();
-    }
-}
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
@@ -103,11 +101,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
         if (form.optionStr !== '') {
             form.options = form.optionStr.split('\n');
         }
-        await createNetwork(form);
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        restForm();
-        emit('search');
-        createVisiable.value = false;
+        loading.value = true;
+        await createNetwork(form)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                createVisiable.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/repo/index.vue

@@ -11,7 +11,7 @@
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </template>
-                <el-table-column type="selection" fix></el-table-column>
+                <el-table-column type="selection" :selectable="selectable" fix />
                 <el-table-column :label="$t('commons.table.name')" prop="name" min-width="60" />
                 <el-table-column
                     :label="$t('container.downloadUrl')"
@@ -63,6 +63,10 @@ const search = async () => {
     });
 };
 
+function selectable(row) {
+    return !(row.name === 'Docker Hub');
+}
+
 const dialogRef = ref();
 const onOpenDialog = async (
     title: string,

frontend/src/views/container/repo/operator/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ title }}{{ $t('container.repo') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="dialogData.rowData" label-position="left" :rules="rules" label-width="120px">
+        <el-form ref="formRef" v-loading="loading" :model="dialogData.rowData" :rules="rules" label-width="120px">
             <el-form-item :label="$t('container.name')" prop="name">
                 <el-input :disabled="dialogData.title === 'edit'" v-model="dialogData.rowData!.name"></el-input>
             </el-form-item>
@@ -33,8 +33,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="repoVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading" @click="repoVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -50,6 +52,8 @@ import { ElForm, ElMessage } from 'element-plus';
 import { Container } from '@/api/interface/container';
 import { createImageRepo, updateImageRepo } from '@/api/modules/container';
 
+const loading = ref(false);
+
 interface DialogProps {
     title: string;
     rowData?: Container.RepoInfo;
@@ -79,25 +83,34 @@ const rules = reactive({
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 
-function restForm() {
-    if (formRef.value) {
-        formRef.value.resetFields();
-    }
-}
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
+        loading.value = true;
         if (dialogData.value.title === 'create') {
-            await createImageRepo(dialogData.value.rowData!);
+            await createImageRepo(dialogData.value.rowData!)
+                .then(() => {
+                    loading.value = false;
+                    ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                    emit('search');
+                    repoVisiable.value = false;
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+            return;
         }
-        if (dialogData.value.title === 'edit') {
-            await updateImageRepo(dialogData.value.rowData!);
-        }
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        restForm();
-        emit('search');
-        repoVisiable.value = false;
+        await updateImageRepo(dialogData.value.rowData!)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                repoVisiable.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/setting/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-loading="loading">
         <Submenu activeName="setting" />
         <el-card style="margin-top: 20px">
             <el-radio-group v-model="confShowType" @change="changeMode">
@@ -41,7 +41,7 @@
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item>
-                            <el-button type="primary" @click="onSave(formRef)" style="width: 90px; margin-top: 5px">
+                            <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
                                 {{ $t('commons.button.save') }}
                             </el-button>
                         </el-form-item>
@@ -63,7 +63,7 @@
                     v-model="dockerConf"
                     :readOnly="true"
                 />
-                <el-button type="primary" @click="onSaveFile" style="width: 90px; margin-top: 5px">
+                <el-button :disabled="loading" type="primary" @click="onSaveFile" style="margin-top: 5px">
                     {{ $t('commons.button.save') }}
                 </el-button>
             </div>
@@ -85,6 +85,8 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import i18n from '@/lang';
 import { loadDaemonJson, updateDaemonJson, updateDaemonJsonByfile } from '@/api/modules/container';
 
+const loading = ref(false);
+
 const extensions = [javascript(), oneDark];
 const confShowType = ref('base');
 
@@ -129,8 +131,15 @@ const onSubmitSave = async () => {
             file: dockerConf.value,
             path: '/opt/1Panel/docker/conf/daemon.json',
         };
-        await updateDaemonJsonByfile(param);
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+        loading.value = true;
+        await updateDaemonJsonByfile(param)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+            })
+            .catch(() => {
+                loading.value = false;
+            });
         return;
     }
     let itemMirrors = form.mirrors.split('\n');
@@ -147,9 +156,16 @@ const onSubmitSave = async () => {
         liveRestore: form.liveRestore,
         cgroupDriver: form.cgroupDriver,
     };
-    await updateDaemonJson(param);
-    search();
-    ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+    loading.value = true;
+    await updateDaemonJson(param)
+        .then(() => {
+            loading.value = false;
+            search();
+            ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const loadMysqlConf = async () => {

frontend/src/views/container/template/index.vue

@@ -11,7 +11,7 @@
                         {{ $t('commons.button.delete') }}
                     </el-button>
                 </template>
-                <el-table-column type="selection" fix></el-table-column>
+                <el-table-column type="selection" fix />
                 <el-table-column
                     :label="$t('commons.table.name')"
                     show-overflow-tooltip

frontend/src/views/container/template/operator/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ title }}{{ $t('container.composeTemplate') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="dialogData.rowData" :rules="rules" label-width="80px">
+        <el-form v-loading="loading" ref="formRef" :model="dialogData.rowData" :rules="rules" label-width="80px">
             <el-form-item :label="$t('container.name')" prop="name">
                 <el-input :disabled="dialogData.title === 'edit'" v-model="dialogData.rowData!.name"></el-input>
             </el-form-item>
@@ -31,8 +31,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="templateVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading" @click="templateVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -51,6 +53,8 @@ import { ElForm, ElMessage } from 'element-plus';
 import { Container } from '@/api/interface/container';
 import { createComposeTemplate, updateComposeTemplate } from '@/api/modules/container';
 
+const loading = ref(false);
+
 interface DialogProps {
     title: string;
     rowData?: Container.TemplateInfo;
@@ -77,25 +81,34 @@ const rules = reactive({
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 
-function restForm() {
-    if (formRef.value) {
-        formRef.value.resetFields();
-    }
-}
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
+        loading.value = true;
         if (dialogData.value.title === 'create') {
-            await createComposeTemplate(dialogData.value.rowData!);
+            await createComposeTemplate(dialogData.value.rowData!)
+                .then(() => {
+                    loading.value = false;
+                    ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                    emit('search');
+                    templateVisiable.value = false;
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+            return;
         }
-        if (dialogData.value.title === 'edit') {
-            await updateComposeTemplate(dialogData.value.rowData!);
-        }
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        restForm();
-        emit('search');
-        templateVisiable.value = false;
+        await updateComposeTemplate(dialogData.value.rowData!)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                templateVisiable.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/container/volume/create/index.vue

@@ -5,7 +5,7 @@
                 <span>{{ $t('container.createVolume') }}</span>
             </div>
         </template>
-        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
             <el-form-item :label="$t('container.volumeName')" prop="name">
                 <el-input clearable v-model="form.name" />
             </el-form-item>
@@ -33,8 +33,10 @@
         </el-form>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
+                <el-button :disabled="loading" @click="createVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -49,6 +51,8 @@ import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { createVolume } from '@/api/modules/container';
 
+const loading = ref(false);
+
 const createVisiable = ref(false);
 const form = reactive({
     name: '',
@@ -73,11 +77,6 @@ const rules = reactive({
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 
-function restForm() {
-    if (formRef.value) {
-        formRef.value.resetFields();
-    }
-}
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
@@ -88,11 +87,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
         if (form.optionStr !== '') {
             form.options = form.optionStr.split('\n');
         }
-        await createVolume(form);
-        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        restForm();
-        emit('search');
-        createVisiable.value = false;
+        loading.value = true;
+        await createVolume(form)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                createVisiable.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 

frontend/src/views/cronjob/operate/index.vue

@@ -343,11 +343,7 @@ function changeName(isChangeType: boolean, type: string) {
     }
     dialogData.value.rowData!.name = `${type}-test`;
 }
-function restForm() {
-    if (formRef.value) {
-        formRef.value.resetFields();
-    }
-}
+
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
@@ -361,7 +357,6 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
         }
 
         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
-        restForm();
         emit('search');
         cronjobVisiable.value = false;
     });