mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-23 07:33:53 +08:00
update:添加多个组件"保存"时的loading状态
This commit is contained in:
@@ -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');
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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回调关闭加载状态
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user