处理模型回显

src/views/digitalHuman/modelConfig/modelModule/component/editModule.vue

@@ -40,9 +40,12 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="请求头绑定" prop="headMsg">
-							<el-button @click="showHeaderDialog = true" style="width: 100%">
-								配置请求头 ({{ state.headers.length }})
-							</el-button>
+							<el-button @click="showHeaderDialog = true" style="width: 100%"> 配置请求头 ({{ state.headers.length }}) </el-button>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="自定义字段" prop="form">
+							<el-button @click="showFormDialog = true" style="width: 100%"> 配置表单字段 ({{ state.formFields.length }}) </el-button>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -136,19 +139,38 @@
 				</span>
 			</template>
 		</el-dialog>
+		<!-- 自定义字段配置弹窗 -->
+		<el-dialog v-model="showFormDialog" title="配置表单字段" width="600px" :close-on-click-modal="false">
+			<div class="form-config-container">
+				<div v-for="(field, index) in state.formFields" :key="index" class="form-field-item">
+					<el-input v-model="field.key" placeholder="请输入字段名 (Key)" style="width: 40%" clearable></el-input>
+					<span class="separator">=</span>
+					<el-input v-model="field.value" placeholder="请输入字段值 (Value)" style="width: 40%" clearable></el-input>
+					<el-button type="danger" link @click="removeFormField(index)">删除</el-button>
+				</div>
+				<el-button type="primary" link @click="addFormField" style="margin-top: 10px">+ 添加字段</el-button>
+			</div>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="showFormDialog = false" size="default">取 消</el-button>
+					<el-button type="primary" @click="confirmFormFields" size="default">确 定</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts" name="systemEditModule">
 import { reactive, ref } from 'vue';
 import { ElMessage } from 'element-plus';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
 import { addModelModule, updateModelModule } from '/@/api/digitalHuman/modelConfig/modelModule/index';
 
 const editModuleFormRef = ref();
 const emit = defineEmits(['refresh']);
 const showHeaderDialog = ref(false);
-
+const showFormDialog = ref(false);
 const state = reactive({
 	ruleForm: {
 		id: '',
@@ -188,6 +210,7 @@ const state = reactive({
 	},
 	showAdvanced: false, // 是否展开高级配置
 	headers: [] as Array<{ key: string; value: string }>, // 请求头列表
+	formFields: [] as Array<{ key: string; value: string }>,
 });
 
 // 解析 headMsg 字符串为数组
@@ -203,6 +226,30 @@ const parseHeaders = (headMsg: string) => {
 	});
 	return headers;
 };
+// 解析 form 对象为数组
+const parseFormFields = (form: any) => {
+	if (!form || typeof form !== 'object') return [];
+	const fields: Array<{ key: string; value: string }> = [];
+	Object.keys(form).forEach((key) => {
+		if (form[key] && typeof form[key] === 'object' && form[key].value !== undefined) {
+			fields.push({ key, value: form[key].value });
+		}
+	});
+	return fields;
+};
+
+// 将数组转换为 form 对象
+const stringifyFormFields = () => {
+	const formObj: Record<string, { value: string }> = {};
+	state.formFields.forEach((field) => {
+		const key = field.key?.trim();
+		const value = field.value?.trim();
+		if (key && value) {
+			formObj[key] = { value: value };
+		}
+	});
+	return formObj;
+};
 
 // 将数组转换为 headMsg 字符串
 const stringifyHeaders = () => {
@@ -227,6 +274,20 @@ const confirmHeaders = () => {
 	state.ruleForm.headMsg = stringifyHeaders();
 	showHeaderDialog.value = false;
 };
+// 添加表单字段
+const addFormField = () => {
+	state.formFields.push({ key: '', value: '' });
+};
+
+// 删除表单字段
+const removeFormField = (index: number) => {
+	state.formFields.splice(index, 1);
+};
+
+// 确认表单字段配置
+const confirmFormFields = () => {
+	showFormDialog.value = false;
+};
 
 // 打开弹窗
 const openDialog = (type: string, row?: any) => {
@@ -252,6 +313,7 @@ const openDialog = (type: string, row?: any) => {
 		};
 		// 解析请求头
 		state.headers = parseHeaders(row.headMsg || '');
+		state.formFields = parseFormFields(row.form);
 		state.dialog.title = '修改模型配置';
 		state.dialog.submitTxt = '修 改';
 	} else {
@@ -275,6 +337,7 @@ const openDialog = (type: string, row?: any) => {
 		};
 		// 初始化一个空的请求头
 		state.headers = [{ key: '', value: '' }];
+		state.formFields = [{ key: '', value: '' }];
 		state.dialog.title = '新增模型配置';
 		state.dialog.submitTxt = '新 增';
 	}
@@ -298,28 +361,20 @@ const onCancel = () => {
 const onSubmit = () => {
 	editModuleFormRef.value.validate(async (valid: boolean) => {
 		if (!valid) return;
-		
+
 		state.dialog.loading = true;
 		try {
 			// 将 headMsg 转换为 form 的 JSON 格式
 			// headMsg: "X-API-Key:xxx,operation:true"
 			// 转换为 form: { "X-API-Key": { "value": "xxx" }, "operation": { "value": "true" } }
-			const formObj: Record<string, { value: string }> = {};
-			state.headers.forEach((header) => {
-				// 去除 key 和 value 的首尾空格
-				const key = header.key?.trim();
-				const value = header.value?.trim();
-				if (key && value) {
-					formObj[key] = { value: value };
-				}
-			});
-			
+			const formObj = stringifyFormFields();
+
 			// 提交数据
 			const submitData = {
 				...state.ruleForm,
 				form: formObj,
 			};
-			
+
 			if (state.dialog.type === 'edit') {
 				await updateModelModule(submitData);
 				ElMessage.success('修改成功');
@@ -330,7 +385,7 @@ const onSubmit = () => {
 			closeDialog();
 			emit('refresh');
 		} catch (error) {
-			console.error('保存失败:', error);
+			ElMessage.error('保存失败');
 		} finally {
 			state.dialog.loading = false;
 		}
@@ -344,6 +399,17 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.form-config-container {
+	max-height: 400px;
+	overflow-y: auto;
+}
+
+.form-field-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 12px;
+}
 .ml5 {
 	margin-left: 5px;
 }