update:添加多个组件"保存"时的loading状态

This commit is contained in:
CGD
2025-04-21 11:36:10 +08:00
parent 5904ee1571
commit ec9fa32c81
5 changed files with 92 additions and 34 deletions
@@ -77,7 +77,12 @@
</div>
<div style="display: flex;justify-content: center;">
<el-button type="primary" @click="confirm" class="save-btn">
<el-button
type="primary"
@click="confirm"
class="save-btn"
:loading="saving"
:disabled="saving">
保存
</el-button>
</div>
@@ -94,6 +99,7 @@ export default {
},
data() {
return {
saving: false,
providers: [],
dialogVisible: false,
providersLoaded: false,
@@ -175,6 +181,7 @@ export default {
},
handleClose() {
this.saving = false;
this.$emit('update:visible', false);
},
initDynamicConfig() {
@@ -185,8 +192,11 @@ export default {
this.formData.configJson = newConfig;
},
confirm() {
this.saving = true;
if (!this.formData.supplier) {
this.$message.error('请选择供应器');
this.saving = false;
return;
}
@@ -206,11 +216,18 @@ export default {
}
};
this.$emit('confirm', submitData);
this.$emit('update:visible', false);
this.resetForm();
try {
this.$emit('confirm', submitData);
this.$emit('update:visible', false);
this.resetForm();
} catch (e) {
console.error(e);
} finally {
this.saving = false;
}
},
resetForm() {
this.saving = false;
this.formData = {
modelName: '',
modelCode: '',
@@ -76,7 +76,12 @@
</div>
<div style="display: flex;justify-content: center;">
<el-button type="primary" @click="handleSave" class="save-btn">
<el-button
type="primary"
@click="handleSave"
class="save-btn"
:loading="saving"
:disabled="saving">
保存
</el-button>
</div>
@@ -102,6 +107,7 @@ export default {
dialogVisible: this.visible,
providers: [],
providersLoaded: false,
saving: false,
allProvidersData: null,
pendingProviderType: null,
pendingModelData: null,
@@ -195,6 +201,8 @@ export default {
}
},
handleSave() {
this.saving = true; // 开始保存加载
const provideCode = this.form.configJson.type;
const formData = {
id: this.modelData.id,
@@ -209,8 +217,19 @@ export default {
...this.form.configJson,
}
};
this.$emit("save", { provideCode, formData });
this.dialogVisible = false;
this.$emit("save", {
provideCode,
formData,
done: () => {
this.saving = false; // 保存完成后回调
}
});
// 如果父组件不处理done回调,3秒后自动关闭加载状态
setTimeout(() => {
this.saving = false;
}, 3000);
},
loadProviders() {
if (this.providersLoaded) return;
@@ -40,7 +40,12 @@
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="submit" class="save-btn">
<el-button
type="primary"
@click="submit"
class="save-btn"
:loading="saving"
:disabled="saving">
保存
</el-button>
<el-button @click="cancel" class="cancel-btn">
@@ -76,6 +81,7 @@ export default {
data() {
return {
dialogKey: Date.now(),
saving: false,
valueTypeOptions: [
{ value: 'string', label: '字符串(string)' },
{ value: 'number', label: '数字(number)' },
@@ -100,11 +106,22 @@ export default {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit('submit', this.form);
this.saving = true; // 开始加载
this.$emit('submit', {
form: this.form,
done: () => {
this.saving = false; // 加载完成
}
});
setTimeout(() => {
this.saving = false;
}, 3000);
}
});
},
cancel() {
this.saving = false; // 取消时重置状态
this.$emit('cancel');
}
},
+3 -1
View File
@@ -312,9 +312,10 @@ export default {
this.currentPage = page;
this.$refs.modelTable.clearSelection();
},
handleModelSave({ provideCode, formData }) {
handleModelSave({ provideCode, formData, done }) {
const modelType = this.activeTab;
const id = formData.id;
Api.model.updateModel(
{ modelType, provideCode, id, formData },
({ data }) => {
@@ -325,6 +326,7 @@ export default {
} else {
this.$message.error(data.msg || '保存失败');
}
done && done(); // 调用done回调关闭加载状态
}
);
},
+27 -24
View File
@@ -195,32 +195,35 @@ export default {
this.paramForm = { ...row };
this.dialogVisible = true;
},
handleSubmit(form) {
if (form.id) {
// 编辑
Api.admin.updateParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"修改成功",
showClose:true
});
this.dialogVisible = false;
this.fetchParams();
}
handleSubmit({ form, done }) {
if (form.id) {
// 编辑
Api.admin.updateParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"修改成功",
showClose:true
});
} else {
// 新增
Api.admin.addParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"新增成功",
showClose:true
});
this.dialogVisible = false;
this.fetchParams();
}
this.dialogVisible = false;
this.fetchParams();
}
done && done();
});
} else {
// 新增
Api.admin.addParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"新增成功",
showClose:true
});
}
this.dialogVisible = false;
this.fetchParams();
}
done && done();
});
}
},
deleteSelectedParams() {