update:优化了“添加配置”页面和“修改配置”页面,修复了“添加配置”页面非正常关闭添加对话框时,没有正确重置对话框的状态

This commit is contained in:
CGD
2025-04-09 14:08:05 +08:00
parent 0be5350a1c
commit 0e81a165e4
2 changed files with 84 additions and 48 deletions
@@ -1,5 +1,5 @@
<template> <template>
<el-dialog :visible.sync="visible" width="975px" center custom-class="custom-dialog" :show-close="false" <el-dialog :visible="dialogVisible" @update:visible="handleVisibleChange" width="975px" center custom-class="custom-dialog" :show-close="false"
class="center-dialog"> class="center-dialog">
<div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;"> <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
<div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;"> <div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
@@ -63,7 +63,7 @@
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div> <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div> <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
<el-form :model="formData.configJson" label-width="100px" label-position="left" class="custom-form"> <el-form :model="formData.configJson" label-width="auto" label-position="left" class="custom-form">
<template v-for="(row, rowIndex) in chunkedCallInfoFields"> <template v-for="(row, rowIndex) in chunkedCallInfoFields">
<div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0;"> <div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0;">
<el-form-item <el-form-item
@@ -104,6 +104,7 @@ export default {
data() { data() {
return { return {
providers: [], providers: [],
dialogVisible: false,
providersLoaded: false, providersLoaded: false,
providerFields: [], providerFields: [],
currentProvider: null, currentProvider: null,
@@ -122,8 +123,11 @@ export default {
}, },
watch: { watch: {
visible(val) { visible(val) {
this.dialogVisible = val;
if(val) { if(val) {
this.initConfigJson(); this.initConfigJson();
} else {
this.resetForm();
} }
}, },
'formData.supplier'(newVal) { 'formData.supplier'(newVal) {
@@ -171,6 +175,17 @@ export default {
}); });
this.formData.configJson = { ...defaultConfig }; this.formData.configJson = { ...defaultConfig };
}, },
handleVisibleChange(val) {
this.dialogVisible = val;
this.$emit('update:visible', val);
if (!val) {
this.resetForm();
}
},
handleClose() {
this.$emit('update:visible', false);
},
initDynamicConfig() { initDynamicConfig() {
const newConfig = {}; const newConfig = {};
this.providerFields.forEach(field => { this.providerFields.forEach(field => {
@@ -223,10 +238,6 @@ export default {
this.providerFields = []; this.providerFields = [];
this.currentProvider = null; this.currentProvider = null;
}, },
handleClose() {
this.resetForm();
this.$emit('update:visible', false);
}
} }
} }
</script> </script>
@@ -44,7 +44,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="排序号" prop="sort" style="flex: 1;"> <el-form-item label="排序号" prop="sort" style="flex: 1;">
<el-input v-model="form.sort" placeholder="请输入排序号" class="custom-input-bg"></el-input> <el-input v-model.number="form.sort" type="number" placeholder="请输入排序号" class="custom-input-bg"></el-input>
</el-form-item> </el-form-item>
</div> </div>
@@ -61,7 +61,7 @@
<div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div> <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
<div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div> <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
<el-form :model="form.configJson" ref="callInfoForm" label-width="100px" class="custom-form"> <el-form :model="form.configJson" ref="callInfoForm" label-width="auto" class="custom-form">
<template v-for="(row, rowIndex) in chunkedCallInfoFields"> <template v-for="(row, rowIndex) in chunkedCallInfoFields">
<div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0;"> <div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0;">
<el-form-item <el-form-item
@@ -130,6 +130,9 @@ export default {
dialogVisible: this.visible, dialogVisible: this.visible,
providers: [], providers: [],
providersLoaded: false, providersLoaded: false,
allProvidersData: null,
pendingProviderType: null,
pendingModelData: null,
dynamicCallInfoFields: [], dynamicCallInfoFields: [],
form: { form: {
id: "", id: "",
@@ -157,7 +160,8 @@ export default {
}, },
watch: { watch: {
modelType() { modelType() {
this.resetProviders() this.resetProviders();
this.loadProviders();
}, },
dialogVisible(val) { dialogVisible(val) {
this.$emit('update:visible', val); this.$emit('update:visible', val);
@@ -169,12 +173,15 @@ export default {
}, },
visible(val) { visible(val) {
this.dialogVisible = val; this.dialogVisible = val;
if (val) {
this.loadProviders();
}
}, },
'form.configJson.type'(newVal) { 'form.configJson.type'(newVal) {
if (newVal) { if (newVal && this.providersLoaded) {
this.loadProviderFields(newVal); this.loadProviderFields(newVal);
}
} }
}
}, },
methods: { methods: {
resetForm() { resetForm() {
@@ -187,7 +194,7 @@ export default {
isEnabled: false, isEnabled: false,
docLink: "", docLink: "",
remark: "", remark: "",
sort: 0, sort: "",
configJson: JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON)) configJson: JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON))
}; };
}, },
@@ -195,42 +202,19 @@ export default {
this.providers = []; this.providers = [];
this.providersLoaded = false; this.providersLoaded = false;
}, },
async loadModelData() { loadModelData() {
if (this.modelData.id) { if (this.modelData.id) {
Api.model.getModelConfig(this.modelData.id, async ({ data }) => { Api.model.getModelConfig(this.modelData.id, ({ data }) => {
if (data.code === 0 && data.data) { if (data.code === 0 && data.data) {
const model = data.data; const model = data.data;
this.pendingProviderType = model.configJson.type;
this.pendingModelData = model;
// 获取供应器字段配置 if (this.providersLoaded) {
await this.loadProviderFields(model.configJson.type); this.loadProviderFields(model.configJson.type);
} else {
// 初始化configJson this.loadProviders();
let configJson = model.configJson || {}; }
this.dynamicCallInfoFields.forEach(field => {
if (!configJson.hasOwnProperty(field.prop)) {
configJson[field.prop] = '';
}
});
this.form = {
id: model.id || "",
modelType: model.modelType || "",
modelCode: model.modelCode || "",
modelName: model.modelName || "",
isDefault: model.isDefault || 0,
isEnabled: model.isEnabled || 0,
docLink: model.docLink || "",
remark: model.remark || "",
sort: model.sort || 0,
configJson: {
...JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON)),
...configJson,
config: {
...DEFAULT_CONFIG_JSON.config,
...(configJson.config || {})
}
}
};
} }
}); });
} }
@@ -268,11 +252,17 @@ export default {
value: item.providerCode value: item.providerCode
})); }));
this.providersLoaded = true; this.providersLoaded = true;
this.allProvidersData = data;
if (this.pendingProviderType) {
this.loadProviderFields(this.pendingProviderType);
}
}); });
}, },
async loadProviderFields(providerCode) { loadProviderFields(providerCode) {
Api.model.getModelProviders(this.modelType, (data) => { if (this.allProvidersData) {
const provider = data.find(p => p.providerCode === providerCode); const provider = this.allProvidersData.find(p => p.providerCode === providerCode);
if (provider) { if (provider) {
this.dynamicCallInfoFields = JSON.parse(provider.fields || '[]').map(f => ({ this.dynamicCallInfoFields = JSON.parse(provider.fields || '[]').map(f => ({
label: f.label, label: f.label,
@@ -280,9 +270,44 @@ export default {
type: f.type === 'password' ? 'password' : 'text', type: f.type === 'password' ? 'password' : 'text',
placeholder: `请输入${f.label}` placeholder: `请输入${f.label}`
})); }));
if (this.pendingModelData && this.pendingProviderType === providerCode) {
this.processModelData(this.pendingModelData);
this.pendingModelData = null;
this.pendingProviderType = null;
}
}
}
},
processModelData(model) {
let configJson = model.configJson || {};
this.dynamicCallInfoFields.forEach(field => {
if (!configJson.hasOwnProperty(field.prop)) {
configJson[field.prop] = '';
} }
}); });
this.form = {
id: model.id || "",
modelType: model.modelType || "",
modelCode: model.modelCode || "",
modelName: model.modelName || "",
isDefault: model.isDefault || 0,
isEnabled: model.isEnabled || 0,
docLink: model.docLink || "",
remark: model.remark || "",
sort: Number(model.sort) || 0,
configJson: {
...JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON)),
...configJson,
config: {
...DEFAULT_CONFIG_JSON.config,
...(configJson.config || {})
}
}
};
} }
} }
}; };
</script> </script>