refactor: 优化创作页面文件上传逻辑与样式
- 调整了文件上传按钮的样式和结构,提升了可读性。 - 规范化了文件上传状态管理,确保用户体验一致性。 - 更新了动态表单值处理逻辑,支持更灵活的字段扩展管理。 - 清理了动态表单值,确保在节点切换时正确重置相关字段。
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="creation-page" :class="{ 'creation-mode': isCreationMode }">
|
<div class="creation-page" :class="{ 'creation-mode': isCreationMode }">
|
||||||
<!-- 左侧面板:工作空间/当前选中元素 Tab切换 -->
|
<!-- 左侧面板:工作空间/当前选中元素 Tab切换 -->
|
||||||
<div class="panel left">
|
<div class="panel left">
|
||||||
@@ -352,7 +352,13 @@
|
|||||||
:accept="getCreationFileAccept(field)"
|
:accept="getCreationFileAccept(field)"
|
||||||
:on-change="(file: any) => handleCreationFieldUpload(node, field, file)"
|
:on-change="(file: any) => handleCreationFieldUpload(node, field, file)"
|
||||||
>
|
>
|
||||||
<el-button size="small" type="primary" :loading="isCreationFieldUploading(node, field)" :disabled="isFromWorkspace || isCreationFieldUploading(node, field)">{{ isCreationFieldUploading(node, field) ? '上传中...' : '选择文件' }}</el-button>
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
:loading="isCreationFieldUploading(node, field)"
|
||||||
|
:disabled="isFromWorkspace || isCreationFieldUploading(node, field)"
|
||||||
|
>{{ isCreationFieldUploading(node, field) ? '上传中...' : '选择文件' }}</el-button
|
||||||
|
>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</div>
|
</div>
|
||||||
<div class="creation-upload-tags">
|
<div class="creation-upload-tags">
|
||||||
@@ -360,7 +366,11 @@
|
|||||||
<span class="creation-upload-tag count">已上传 {{ getCreationFileCountText(node, field) }}</span>
|
<span class="creation-upload-tag count">已上传 {{ getCreationFileCountText(node, field) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="getCreationFieldFiles(node, field).length > 0" class="uploaded-files-list creation-upload-list">
|
<div v-if="getCreationFieldFiles(node, field).length > 0" class="uploaded-files-list creation-upload-list">
|
||||||
<div v-for="(uploadedFile, fileIdx) in getCreationFieldFiles(node, field)" :key="fileIdx" class="uploaded-file-item creation-upload-item">
|
<div
|
||||||
|
v-for="(uploadedFile, fileIdx) in getCreationFieldFiles(node, field)"
|
||||||
|
:key="fileIdx"
|
||||||
|
class="uploaded-file-item creation-upload-item"
|
||||||
|
>
|
||||||
<span class="file-name">{{ uploadedFile.name }}</span>
|
<span class="file-name">{{ uploadedFile.name }}</span>
|
||||||
<el-button
|
<el-button
|
||||||
type="danger"
|
type="danger"
|
||||||
@@ -1945,7 +1955,9 @@ const sendMessage = async () => {
|
|||||||
value:
|
value:
|
||||||
bodyItem.fieldType === 'fileUpload'
|
bodyItem.fieldType === 'fileUpload'
|
||||||
? Array.isArray(userVal !== undefined ? userVal : bodyItem.value)
|
? Array.isArray(userVal !== undefined ? userVal : bodyItem.value)
|
||||||
? (userVal !== undefined ? userVal : bodyItem.value)
|
? userVal !== undefined
|
||||||
|
? userVal
|
||||||
|
: bodyItem.value
|
||||||
: userVal !== undefined
|
: userVal !== undefined
|
||||||
? [userVal]
|
? [userVal]
|
||||||
: bodyItem.value
|
: bodyItem.value
|
||||||
@@ -2406,12 +2418,18 @@ const isHttpExpandTriggerField = (fieldItem: any) => {
|
|||||||
};
|
};
|
||||||
const openHttpExpandDialog = (fieldItem: any) => {
|
const openHttpExpandDialog = (fieldItem: any) => {
|
||||||
if (!Array.isArray(fieldItem?.expand)) return;
|
if (!Array.isArray(fieldItem?.expand)) return;
|
||||||
|
const nodeId = selectedElement.value?.id;
|
||||||
|
if (!nodeId) return;
|
||||||
|
|
||||||
currentHttpExpandFields.value = fieldItem.expand;
|
currentHttpExpandFields.value = fieldItem.expand;
|
||||||
Object.keys(httpExpandFormValues).forEach((k) => delete httpExpandFormValues[k]);
|
Object.keys(httpExpandFormValues).forEach((k) => delete httpExpandFormValues[k]);
|
||||||
Object.keys(httpExpandKeyValuePairs).forEach((k) => delete httpExpandKeyValuePairs[k]);
|
Object.keys(httpExpandKeyValuePairs).forEach((k) => delete httpExpandKeyValuePairs[k]);
|
||||||
|
|
||||||
fieldItem.expand.forEach((f: any) => {
|
fieldItem.expand.forEach((f: any) => {
|
||||||
httpExpandFormValues[f.field] = dynamicFormValues[f.field] !== undefined ? dynamicFormValues[f.field] : (f.default ?? '');
|
const expandKey = `${nodeId}_responseType_expand_${f.field}`;
|
||||||
|
httpExpandFormValues[f.field] = dynamicFormValues[expandKey] !== undefined ? dynamicFormValues[expandKey] : '';
|
||||||
});
|
});
|
||||||
|
|
||||||
showHttpExpandDialog.value = true;
|
showHttpExpandDialog.value = true;
|
||||||
};
|
};
|
||||||
const getHttpExpandKeyValuePairs = (field: string) => {
|
const getHttpExpandKeyValuePairs = (field: string) => {
|
||||||
@@ -2454,12 +2472,28 @@ const removeHttpExpandKeyValuePair = (field: string, index: number) => {
|
|||||||
updateHttpExpandKeyValueField(field);
|
updateHttpExpandKeyValueField(field);
|
||||||
};
|
};
|
||||||
const confirmHttpExpandDialog = () => {
|
const confirmHttpExpandDialog = () => {
|
||||||
|
const nodeId = selectedElement.value?.id;
|
||||||
|
if (!nodeId) return;
|
||||||
|
|
||||||
currentHttpExpandFields.value.forEach((f: any) => {
|
currentHttpExpandFields.value.forEach((f: any) => {
|
||||||
dynamicFormValues[f.field] = httpExpandFormValues[f.field];
|
const expandKey = `${nodeId}_responseType_expand_${f.field}`;
|
||||||
|
dynamicFormValues[expandKey] = httpExpandFormValues[f.field];
|
||||||
});
|
});
|
||||||
|
|
||||||
showHttpExpandDialog.value = false;
|
showHttpExpandDialog.value = false;
|
||||||
ElMessage.success('主动拉取参数已保存');
|
ElMessage.success('主动拉取参数已保存');
|
||||||
};
|
};
|
||||||
|
const buildHttpResponseTypeExpandData = (responseTypeField: any, nodeId: string) => {
|
||||||
|
if (!Array.isArray(responseTypeField?.expand) || responseTypeField.expand.length === 0) return [];
|
||||||
|
|
||||||
|
return responseTypeField.expand.map((f: any) => {
|
||||||
|
const expandKey = `${nodeId}_responseType_expand_${f.field}`;
|
||||||
|
return {
|
||||||
|
...f,
|
||||||
|
value: dynamicFormValues[expandKey] !== undefined ? dynamicFormValues[expandKey] : '',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// HTTP请求体配置相关函数
|
// HTTP请求体配置相关函数
|
||||||
// 打开HTTP请求体配置弹窗
|
// 打开HTTP请求体配置弹窗
|
||||||
@@ -3182,12 +3216,14 @@ watch(
|
|||||||
currentHttpBodyField.value = '';
|
currentHttpBodyField.value = '';
|
||||||
showHttpBodyDialog.value = false;
|
showHttpBodyDialog.value = false;
|
||||||
|
|
||||||
// 重置 dynamicFormValues(不删除键,保持响应式)
|
// 重置 dynamicFormValues(不删除固定字段键,动态 expand 键按节点切换清理)
|
||||||
for (const key in dynamicFormValues) {
|
for (const key in dynamicFormValues) {
|
||||||
|
if (key.includes('_responseType_expand_')) {
|
||||||
|
delete dynamicFormValues[key];
|
||||||
|
continue;
|
||||||
|
}
|
||||||
dynamicFormValues[key] = '';
|
dynamicFormValues[key] = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取当前节点的基础表单字段(直接从 nodeSchemaMap 获取,避免响应式延迟)
|
|
||||||
const currentNodeCode = formState.nodeCode;
|
const currentNodeCode = formState.nodeCode;
|
||||||
const baseFormFields = nodeSchemaMap.value[currentNodeCode] || [];
|
const baseFormFields = nodeSchemaMap.value[currentNodeCode] || [];
|
||||||
const baseFieldNames = new Set(baseFormFields.map((f) => f.field));
|
const baseFieldNames = new Set(baseFormFields.map((f) => f.field));
|
||||||
@@ -3208,6 +3244,16 @@ watch(
|
|||||||
// 其他类型:保持原值
|
// 其他类型:保持原值
|
||||||
dynamicFormValues[fieldConfig.field] = fieldConfig.value;
|
dynamicFormValues[fieldConfig.field] = fieldConfig.value;
|
||||||
}
|
}
|
||||||
|
if (
|
||||||
|
String(e.properties.nodeCode || '').toLowerCase() === 'http' &&
|
||||||
|
fieldConfig.field === 'responseType' &&
|
||||||
|
Array.isArray(fieldConfig.expand)
|
||||||
|
) {
|
||||||
|
fieldConfig.expand.forEach((expandField: any) => {
|
||||||
|
const expandKey = `${e.id}_responseType_expand_${expandField.field}`;
|
||||||
|
dynamicFormValues[expandKey] = expandField.value !== undefined ? expandField.value : '';
|
||||||
|
});
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// 自定义字段:加载到 customFields
|
// 自定义字段:加载到 customFields
|
||||||
const customType = fieldConfig.type === 'upload' ? 'uploadMultiple' : fieldConfig.type || 'input';
|
const customType = fieldConfig.type === 'upload' ? 'uploadMultiple' : fieldConfig.type || 'input';
|
||||||
@@ -3460,6 +3506,11 @@ const applySelected = () => {
|
|||||||
label: fieldItem.label,
|
label: fieldItem.label,
|
||||||
value: normalizedValue,
|
value: normalizedValue,
|
||||||
required: fieldItem.required || false,
|
required: fieldItem.required || false,
|
||||||
|
...(String(formState.nodeCode || '').toLowerCase() === 'http' && fieldItem.field === 'responseType' && normalizedValue === 'pull'
|
||||||
|
? {
|
||||||
|
expand: buildHttpResponseTypeExpandData(fieldItem, cur.id),
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user