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