mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-30 04:03:56 +08:00
update:优化了“添加配置”页面和“修改配置”页面,修复了“添加配置”页面非正常关闭添加对话框时,没有正确重置对话框的状态
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user