red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化创作页面文件上传逻辑与样式

Browse Source 
- 调整了文件上传按钮的样式和结构，提升了可读性。
- 规范化了文件上传状态管理，确保用户体验一致性。
- 更新了动态表单值处理逻辑，支持更灵活的字段扩展管理。
- 清理了动态表单值，确保在节点切换时正确重置相关字段。
This commit is contained in:
吴思建
2026-05-22 18:20:39 +08:00
parent d507112829
commit 010db1e7bc
1 changed files with 78 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/views/settings/creation/index.vue
View File

@@ -1,4 +1,4 @@
<template>
<template>
<div class="creation-page" :class="{ 'creation-mode': isCreationMode }">
<!-- 左侧面板：工作空间/当前选中元素 Tab切换 -->
<div class="panel left">
@@ -352,7 +352,13 @@
:accept="getCreationFileAccept(field)"
: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>
</div>
<div class="creation-upload-tags">
@@ -360,7 +366,11 @@
<span class="creation-upload-tag count">已上传 {{ getCreationFileCountText(node, field) }}</span>
</div>
<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>
<el-button
type="danger"
@@ -1799,7 +1809,7 @@ const handleCreationFieldUpload = async (node: any, field: any, file: any) => {
creationFieldFiles[key].push({ name: file.name, url: fileUrl });
creationFormValues[key] = creationFieldFiles[key].map((f) => f.url);
ElMessage.success('文件上传成功');
} catch (error: any) {
} catch (error: any) {
ElMessage.error(error?.message || '文件上传失败');
} finally {
creationFieldUploading[key] = false;
@@ -1945,7 +1955,9 @@ const sendMessage = async () => {
value:
bodyItem.fieldType === 'fileUpload'
? Array.isArray(userVal !== undefined ? userVal : bodyItem.value)
? (userVal !== undefined ? userVal : bodyItem.value)
? userVal !== undefined
? userVal
: bodyItem.value
: userVal !== undefined
? [userVal]
: bodyItem.value
@@ -2130,13 +2142,13 @@ const handleTreeNodeClick = async (data: TreeNode) => {
creationFormValues[fieldKey] = Boolean(field.value);
} else {
creationFormValues[fieldKey] =
field.type === 'upload' || field.type === 'uploadMultiple' || field.type === 'fileUpload'
? Array.isArray(field.value)
? field.value
: field.value
? [field.value]
: []
: field.value || '';
field.type === 'upload' || field.type === 'uploadMultiple' || field.type === 'fileUpload'
? Array.isArray(field.value)
? field.value
: field.value
? [field.value]
: []
: field.value || '';
}
});
}
@@ -2214,13 +2226,13 @@ const handleTreeNodeClick = async (data: TreeNode) => {
creationFormValues[fieldKey] = Boolean(field.value);
} else {
creationFormValues[fieldKey] =
field.type === 'upload' || field.type === 'uploadMultiple' || field.type === 'fileUpload'
? Array.isArray(field.value)
? field.value
: field.value
? [field.value]
: []
: field.value || '';
field.type === 'upload' || field.type === 'uploadMultiple' || field.type === 'fileUpload'
? Array.isArray(field.value)
? field.value
: field.value
? [field.value]
: []
: field.value || '';
}
});
}
@@ -2406,12 +2418,18 @@ const isHttpExpandTriggerField = (fieldItem: any) => {
};
const openHttpExpandDialog = (fieldItem: any) => {
if (!Array.isArray(fieldItem?.expand)) return;
const nodeId = selectedElement.value?.id;
if (!nodeId) return;
currentHttpExpandFields.value = fieldItem.expand;
Object.keys(httpExpandFormValues).forEach((k) => delete httpExpandFormValues[k]);
Object.keys(httpExpandKeyValuePairs).forEach((k) => delete httpExpandKeyValuePairs[k]);
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;
};
const getHttpExpandKeyValuePairs = (field: string) => {
@@ -2454,12 +2472,28 @@ const removeHttpExpandKeyValuePair = (field: string, index: number) => {
updateHttpExpandKeyValueField(field);
};
const confirmHttpExpandDialog = () => {
const nodeId = selectedElement.value?.id;
if (!nodeId) return;
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;
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请求体配置弹窗
@@ -3182,12 +3216,14 @@ watch(
currentHttpBodyField.value = '';
showHttpBodyDialog.value = false;
// 重置 dynamicFormValues（不删除键，保持响应式）
for (const key in dynamicFormValues) {
dynamicFormValues[key] = '';
}
// 获取当前节点的基础表单字段（直接从 nodeSchemaMap 获取，避免响应式延迟）
// 重置 dynamicFormValues（不删除固定字段键，动态 expand 键按节点切换清理）
for (const key in dynamicFormValues) {
if (key.includes('_responseType_expand_')) {
delete dynamicFormValues[key];
continue;
}
dynamicFormValues[key] = '';
}
const currentNodeCode = formState.nodeCode;
const baseFormFields = nodeSchemaMap.value[currentNodeCode] || [];
const baseFieldNames = new Set(baseFormFields.map((f) => f.field));
@@ -3208,6 +3244,16 @@ watch(
// 其他类型：保持原值
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 {
// 自定义字段：加载到 customFields
const customType = fieldConfig.type === 'upload' ? 'uploadMultiple' : fieldConfig.type || 'input';
@@ -3460,6 +3506,11 @@ const applySelected = () => {
label: fieldItem.label,
value: normalizedValue,
required: fieldItem.required || false,
...(String(formState.nodeCode || '').toLowerCase() === 'http' && fieldItem.field === 'responseType' && normalizedValue === 'pull'
? {
expand: buildHttpResponseTypeExpandData(fieldItem, cur.id),
}
: {}),
});
});