首页工作流表单对话卡片化，历史回显走消息流

选中工作流即以表单卡片推送进入对话消息流，卡片内填写并提交执行，移除整页表单区。历史 workflow 会话回显为带值表单卡片 + 结果消息，不再跳整页表单页；回显数据源改用 session/get 记录（requestParams 即完整 flowContent，含 __start__ 值快照），失败判断以 errorMsg 为准。 - 新增 WorkflowFormCard.vue 表单卡片组件（迁移原整页表单渲染/校验逻辑） - ChatList 渲染 form 类型消息，透传 form-submit - MainContent 精简为两态（对话页/占位页） - SessionResults workflow 结果精简摘要，状态以 errorMsg 为准 Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-15 20:03:39 +08:00
parent b8d29e31df
commit dc20a6a829
5 changed files with 815 additions and 609 deletions
@@ -0,0 +1,561 @@
+<template>
+	<div class="workflow-form-card" :class="{ readonly, submitting, failed: isFailed }">
+		<div class="workflow-form-header">
+			<div>
+				<h3>{{ detail?.flowName || '工作流表单' }}</h3>
+				<div class="workflow-form-sub">{{ detail?.description || '请填写以下参数' }}</div>
+			</div>
+		</div>
+		<div class="workflow-form-scroll">
+			<el-form label-position="top" class="workflow-form">
+				<template v-if="detail?.nodeInputParams">
+					<template v-for="node in detail.nodeInputParams" :key="node.id || node.nodeCode">
+						<template v-if="hasFormConfig(node)">
+							<el-form-item
+								v-for="field in getVisibleFields(node)"
+								:key="getFieldKey(node, field)"
+								:label="field.label"
+								:required="field.required"
+							>
+								<!-- 引用其他节点输出：只读展示，值由上游节点运行时提供 -->
+								<div v-if="field.valueSource" class="field-source-readonly">
+									<el-tag type="info" size="small" class="source-tag">引用</el-tag>
+									<span class="source-text">由「{{ getSourceDisplay(field) }}」自动提供</span>
+								</div>
+
+								<template v-else>
+								<!-- 文本输入 -->
+								<el-input
+									v-if="field.type === 'input' || field.type === 'string'"
+									v-model="formValues[getFieldKey(node, field)]"
+									:disabled="isDisabled"
+									:placeholder="field.required ? '必填' : '选填'"
+									clearable
+								/>
+
+								<!-- 数字输入 -->
+								<el-input-number
+									v-else-if="field.type === 'number' || field.type === 'inputNumber'"
+									v-model="formValues[getFieldKey(node, field)]"
+									class="w100"
+									:controls="true"
+									:disabled="isDisabled"
+									:min="field.fieldConstraint?.minValue ?? undefined"
+									:max="field.fieldConstraint?.maxValue ?? undefined"
+								/>
+
+								<!-- 多行文本 -->
+								<el-input
+									v-else-if="field.type === 'textarea'"
+									v-model="formValues[getFieldKey(node, field)]"
+									type="textarea"
+									:rows="3"
+									:disabled="isDisabled"
+									:placeholder="field.required ? '必填' : '选填'"
+									show-word-limit
+									:maxlength="500"
+								/>
+
+								<!-- 开关 -->
+								<el-switch
+									v-else-if="field.type === 'switch'"
+									v-model="formValues[getFieldKey(node, field)]"
+									:disabled="isDisabled"
+									active-text="开启"
+									inactive-text="关闭"
+								/>
+
+								<!-- 下拉选择 -->
+								<el-select
+									v-else-if="field.type === 'select' && field.options"
+									v-model="formValues[getFieldKey(node, field)]"
+									:disabled="isDisabled"
+									:placeholder="field.required ? '必填' : '选填'"
+									class="w100"
+								>
+									<el-option v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
+								</el-select>
+
+								<!-- 文件上传 -->
+								<div v-else-if="isFileField(field)" class="field-upload-wrapper">
+									<el-upload
+										:key="`upload-${getFieldKey(node, field)}`"
+										:auto-upload="false"
+										:multiple="field.type === 'uploadMultiple'"
+										:show-file-list="false"
+										:accept="getFileAccept(field)"
+										:disabled="isDisabled"
+										:on-change="(file: any) => handleFileUpload(node, field, file)"
+									>
+										<el-button
+											size="small"
+											type="primary"
+											:loading="uploadingFields[getFieldKey(node, field)]"
+											:disabled="isDisabled || uploadingFields[getFieldKey(node, field)]"
+										>
+											{{ uploadingFields[getFieldKey(node, field)] ? '上传中...' : '选择文件' }}
+										</el-button>
+									</el-upload>
+									<div class="upload-rules">
+										<span>{{ getFileRuleText(field) }}</span>
+										<span v-if="getFieldFileList(node, field).length > 0" class="upload-count">
+											已上传 {{ getFieldFileCountText(node, field) }}
+										</span>
+									</div>
+									<div v-if="getFieldFileList(node, field).length > 0" class="uploaded-files-list">
+										<div
+											v-for="(f, fileIdx) in getFieldFileList(node, field)"
+											:key="fileIdx"
+											class="uploaded-file-item"
+										>
+											<span class="file-name">{{ f.name }}</span>
+											<el-button v-if="!isDisabled" type="danger" link size="small" @click="removeFieldFile(node, field, fileIdx)">
+												删除
+											</el-button>
+										</div>
+									</div>
+								</div>
+
+								<!-- 兜底文本输入 -->
+								<el-input
+									v-else
+									v-model="formValues[getFieldKey(node, field)]"
+									:disabled="isDisabled"
+									:placeholder="field.required ? '必填' : '选填'"
+								/>
+								</template>
+							</el-form-item>
+						</template>
+					</template>
+				</template>
+			</el-form>
+
+			<!-- 贴片模板编辑器 -->
+			<div v-if="currentWorkflowHasPatchLayout" class="patch-template-section">
+				<PatchTemplateEditor v-model="templates" />
+			</div>
+
+			<el-empty v-if="!hasFormFields && !currentWorkflowHasPatchLayout" description="该工作流无需填写参数" :image-size="60" />
+		</div>
+
+		<!-- 底部操作区：editing 提交 / running 执行中 / done·failed 定格状态 -->
+		<div class="workflow-form-footer">
+			<div v-if="isFailed" class="form-error-text">{{ formError }}</div>
+			<el-button v-if="submitting" type="primary" loading disabled>执行中...</el-button>
+			<el-button v-else-if="!readonly" type="primary" :disabled="submitting" @click="handleSubmit">提交执行</el-button>
+			<el-tag v-else :type="isFailed ? 'danger' : 'success'" size="small" effect="light">
+				{{ isFailed ? '执行失败' : '执行完成' }}
+			</el-tag>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import PatchTemplateEditor from '/@/components/patchTemplate/PatchTemplateEditor.vue';
+import { uploadFile } from '/@/api/common/upload';
+import { collectHomeFormFields } from '../utils/flowDsl';
+
+interface Props {
+	// 工作流详情（含 nodeInputParams / flowContent）
+	detail: any;
+	// 定格只读（done/failed 态）：禁用表单与提交
+	readonly?: boolean;
+	// 执行中：禁用表单，底部显示加载中
+	submitting?: boolean;
+	// 执行失败信息（有值即 failed 态）
+	formError?: string;
+}
+
+interface Emits {
+	(e: 'submit', payload: { formValues: Record<string, any>; formFileNames: Record<string, string | string[]>; templates: any[] }): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	readonly: false,
+	submitting: false,
+	formError: '',
+});
+const emit = defineEmits<Emits>();
+
+const formValues = reactive<Record<string, any>>({});
+const fieldFiles = reactive<Record<string, { name: string; url: string }[]>>({});
+// 上传字段的文件名（与 formValues 平行；单文件为字符串、多文件为数组），执行时随 value 一并写回开始节点传给后端
+const formFileNames = reactive<Record<string, string | string[]>>({});
+const uploadingFields = reactive<Record<string, boolean>>({});
+const templates = ref<any[]>([]);
+
+// 状态派生：失败 = 携带 formError；禁用 = 定格或执行中
+const isFailed = computed(() => !!props.formError);
+const isDisabled = computed(() => props.readonly || props.submitting);
+
+const getFieldKey = (node: any, field: any): string => {
+	const id = node.id || node.nodeCode;
+	return `${id}|${field.path || field.field || field.label}`;
+};
+
+const getVisibleFields = (node: any): any[] => {
+	return collectHomeFormFields(node);
+};
+
+// 引用来源展示：valueSource.nodeId 定位上游节点名 + 字段
+const getSourceDisplay = (field: any): string => {
+	const vs = field?.valueSource;
+	if (!vs || typeof vs !== 'object') return '';
+	const nodes = props.detail?.nodeInputParams || [];
+	const srcNode = nodes.find((n: any) => String(n?.id) === String(vs.nodeId));
+	const nodeName = srcNode?.name || srcNode?.nodeName || (vs.nodeId ? `节点 ${vs.nodeId}` : '上游节点');
+	return vs.field ? `${nodeName} · ${vs.field}` : nodeName;
+};
+
+const isFileField = (field: any): boolean => {
+	return field.type === 'upload' || field.type === 'uploadMultiple' || field.type === 'fileUpload';
+};
+
+const getFileAccept = (field: any): string => {
+	return field.fieldConstraint?.fileTypes ? '.' + field.fieldConstraint.fileTypes.replace(/,/g, ',.') : '*';
+};
+
+const getFileRuleText = (field: any): string => {
+	const rules: string[] = [];
+	if (field.fieldConstraint?.fileTypes) rules.push('格式: ' + field.fieldConstraint.fileTypes);
+	if (field.fieldConstraint?.maxFileSize) rules.push('最大: ' + field.fieldConstraint.maxFileSize + 'MB');
+	if (field.fieldConstraint?.maxFileCount) rules.push('最多: ' + field.fieldConstraint.maxFileCount + '个');
+	return rules.join(' | ');
+};
+
+const getFieldFileList = (node: any, field: any): { name: string; url: string }[] => {
+	return fieldFiles[getFieldKey(node, field)] || [];
+};
+
+const getFieldConstraint = (field: any): any => {
+	return field?.fieldConstraint && typeof field.fieldConstraint === 'object' ? field.fieldConstraint : {};
+};
+
+const getFieldFileCountText = (node: any, field: any): string => {
+	const current = getFieldFileList(node, field).length;
+	const max = Number(getFieldConstraint(field).maxFileCount);
+	if (!Number.isNaN(max) && max > 0) {
+		return `${current} / ${max}`;
+	}
+	return `${current}`;
+};
+
+const handleFileUpload = async (node: any, field: any, file: any) => {
+	const raw = file.raw;
+	if (!raw) return;
+
+	const key = getFieldKey(node, field);
+	const fc = getFieldConstraint(field);
+
+	const typeRules = String(fc.fileTypes || '')
+		.split(',')
+		.map((t: string) => t.trim().toLowerCase().replace(/^\./, ''))
+		.filter(Boolean);
+	if (typeRules.length > 0) {
+		const ext = (raw.name?.split('.').pop() || '').toLowerCase();
+		if (!typeRules.includes(ext)) {
+			ElMessage.warning(`文件格式不符合要求，仅支持：${typeRules.join(', ')}`);
+			return;
+		}
+	}
+
+	const maxFileSize = Number(fc.maxFileSize);
+	if (!Number.isNaN(maxFileSize) && maxFileSize > 0) {
+		const sizeMB = raw.size / 1024 / 1024;
+		if (sizeMB > maxFileSize) {
+			ElMessage.warning(`文件大小超限，最大 ${maxFileSize}MB`);
+			return;
+		}
+	}
+
+	const maxFileCount = Number(fc.maxFileCount);
+	if (!Number.isNaN(maxFileCount) && maxFileCount > 0) {
+		const currentCount = fieldFiles[key]?.length || 0;
+		if (currentCount >= maxFileCount) {
+			ElMessage.warning(`文件数量超限，最多 ${maxFileCount} 个`);
+			return;
+		}
+	}
+
+	uploadingFields[key] = true;
+
+	try {
+		const uploadRes = await uploadFile(raw, { timeout: 0 });
+		if (!uploadRes?.data?.fileURL) throw new Error('上传失败：未返回文件URL');
+
+		const fileUrl = uploadRes.data.fileAddressPrefix
+			? `${uploadRes.data.fileAddressPrefix}${uploadRes.data.fileURL}`
+			: uploadRes.data.fileURL;
+
+		if (!fieldFiles[key]) fieldFiles[key] = [];
+		// 文件名取服务器返回 fileName（OSS 存储名，已确认），随 value 一并写回开始节点传给后端
+		fieldFiles[key].push({ name: uploadRes.data.fileName || raw.name, url: fileUrl });
+
+		if (field.type === 'upload') {
+			formValues[key] = fileUrl;
+			formFileNames[key] = fieldFiles[key][0]?.name;
+		} else {
+			formValues[key] = fieldFiles[key].map((f: any) => f.url);
+			formFileNames[key] = fieldFiles[key].map((f: any) => f.name);
+		}
+	} catch (error: any) {
+		ElMessage.error(error?.message || '文件上传失败');
+	} finally {
+		uploadingFields[key] = false;
+	}
+};
+
+const removeFieldFile = (node: any, field: any, fileIdx: number) => {
+	const key = getFieldKey(node, field);
+	if (!fieldFiles[key]) return;
+	fieldFiles[key].splice(fileIdx, 1);
+	if (field.type === 'upload') {
+		formValues[key] = '';
+		formFileNames[key] = '';
+	} else {
+		formValues[key] = fieldFiles[key].map((f) => f.url);
+		formFileNames[key] = fieldFiles[key].map((f) => f.name);
+	}
+};
+
+const currentWorkflowHasPatchLayout = computed(() => {
+	const nodes = props.detail?.nodeInputParams || [];
+	return nodes.some((node: any) => node.patchLayout === true);
+});
+
+const hasFormConfig = (node: any): boolean => {
+	// 开始节点为唯一表单源（runFormFields 汇总各 model 勾选字段 + form 自定义字段）
+	return String(node?.nodeCode || '').toLowerCase() === '__start__' && collectHomeFormFields(node).length > 0;
+};
+
+const hasFormFields = computed(() => {
+	if (!props.detail?.nodeInputParams) return false;
+	return props.detail.nodeInputParams.some((node: any) => hasFormConfig(node));
+});
+
+const validateFormFields = (): boolean => {
+	if (!props.detail?.nodeInputParams) return true;
+	for (const node of props.detail.nodeInputParams as any[]) {
+		if (String(node?.nodeCode || '').toLowerCase() !== '__start__') continue;
+		const fields = getVisibleFields(node);
+		for (const field of fields) {
+			if (!field.required) continue;
+			// 引用其他节点输出的字段：值由上游节点运行时提供，非用户填写项，跳过必填校验
+			if (field.valueSource) continue;
+			const key = getFieldKey(node, field);
+			const value = formValues[key];
+			if (value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0)) {
+				ElMessage.warning(`请填写必填项：${field.label}`);
+				return false;
+			}
+		}
+	}
+	return true;
+};
+
+// 初始化或重置表单（与旧整页表单一致：含默认值 + 文件回填 + 贴片模板恢复）
+watch(
+	() => props.detail,
+	(detail) => {
+		Object.keys(formValues).forEach((key) => delete formValues[key]);
+		Object.keys(fieldFiles).forEach((key) => delete fieldFiles[key]);
+		Object.keys(formFileNames).forEach((key) => delete formFileNames[key]);
+		Object.keys(uploadingFields).forEach((key) => delete uploadingFields[key]);
+		// 尝试从执行详情恢复贴片模板
+		const ext = (detail as any)?.extension;
+		const restoredTemplates = ext?.templates || (detail as any)?.templates || detail?.flowContent?.templates || [];
+		templates.value = Array.isArray(restoredTemplates) ? restoredTemplates : [];
+
+		if (!detail?.nodeInputParams) return;
+		const nodes = detail.nodeInputParams as any[];
+
+		// 1) 初始化表单值（model → modelRequestParams runtimeShow；form → outputConfig；旧数据 → formConfig）
+		nodes.forEach((node) => {
+			collectHomeFormFields(node).forEach((field) => {
+				const key = getFieldKey(node, field);
+				const hasValue = field.value !== undefined && field.value !== null && field.value !== '';
+				if (field.type === 'number' || field.type === 'inputNumber') {
+					formValues[key] = hasValue ? Number(field.value) : (field.default ?? null);
+				} else if (field.type === 'switch') {
+					formValues[key] = hasValue ? Boolean(field.value) : (field.default ?? false);
+				} else if (field.type === 'upload' || field.type === 'uploadMultiple' || field.type === 'fileUpload') {
+					if (field.type === 'fileUpload') {
+						formValues[key] = hasValue
+							? Array.isArray(field.value)
+								? field.value
+								: field.value
+									? [field.value]
+									: []
+							: Array.isArray(field.default)
+								? field.default
+								: field.default
+									? [field.default]
+									: [];
+					} else {
+						formValues[key] = hasValue ? field.value : (field.default ?? (field.type === 'upload' ? '' : []));
+					}
+				} else {
+					formValues[key] = hasValue ? field.value : (field.default ?? '');
+				}
+			});
+		});
+
+		// 2) 文件字段回填已上传文件列表
+		nodes.forEach((node) => {
+			collectHomeFormFields(node).forEach((field) => {
+				if (!isFileField(field)) return;
+				const key = getFieldKey(node, field);
+				const rawValue = formValues[key];
+				const urls = Array.isArray(rawValue) ? rawValue : rawValue ? [rawValue] : [];
+				if (urls.length === 0) return;
+				// 文件名优先取运行字段携带的服务器名（新数据），旧数据从 url 提取兜底
+				const rawFn = (field as any).fileName;
+				fieldFiles[key] = urls.map((url: string, i: number) => ({
+					name:
+						(Array.isArray(rawFn) ? rawFn[i] : i === 0 ? rawFn : undefined) ||
+						String(url || '').split('/').pop() ||
+						'file-' + Math.random().toString(36).slice(2, 8),
+					url,
+				}));
+				formFileNames[key] =
+					field.type === 'upload' && fieldFiles[key].length === 1
+						? fieldFiles[key][0].name
+						: fieldFiles[key].map((f) => f.name);
+			});
+		});
+	},
+	{ immediate: true }
+);
+
+const handleSubmit = () => {
+	if (props.readonly || props.submitting) return;
+	if (!validateFormFields()) return;
+	emit('submit', {
+		formValues: JSON.parse(JSON.stringify(formValues)),
+		formFileNames: JSON.parse(JSON.stringify(formFileNames)),
+		templates: JSON.parse(JSON.stringify(templates.value || [])),
+	});
+};
+</script>
+
+<style scoped lang="scss">
+/* ===== 表单卡片（对话消息流内） ===== */
+.workflow-form-card {
+	background: #fff;
+	border: 1px solid #e5e8ee;
+	border-radius: 14px;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
+	width: min(640px, calc(100% - 4px));
+	max-width: 100%;
+	transition: opacity 0.2s;
+
+	&.readonly {
+		box-shadow: none;
+	}
+	&.submitting {
+		opacity: 0.9;
+	}
+}
+
+.workflow-form-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px 20px;
+	border-bottom: 1px solid #f1f5f9;
+	flex-shrink: 0;
+	h3 { margin: 0; font-size: 14px; font-weight: 600; color: #0f172a; }
+	.workflow-form-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
+}
+
+.workflow-form-scroll {
+	max-height: 55vh;
+	overflow-y: auto;
+	padding: 20px;
+	&::-webkit-scrollbar { width: 4px; }
+	&::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+	&::-webkit-scrollbar-track { background: transparent; }
+}
+
+:deep(.el-form-item) {
+	margin-bottom: 14px;
+	&:last-child { margin-bottom: 0; }
+	.el-form-item__label { font-size: 13px; font-weight: 500; color: #334155; padding-bottom: 4px; line-height: 1.5; }
+	.el-form-item__label::before { color: #ef4444; margin-right: 4px; }
+	.el-input-number { width: 100%; }
+	.el-select { width: 100%; }
+	.el-textarea__inner { font-size: 13px; }
+}
+
+/* 引用字段只读展示 */
+.field-source-readonly {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	background: #f8fafc;
+	border: 1px solid #e2e8f0;
+	border-radius: 8px;
+	font-size: 12px;
+	color: #64748b;
+	.source-tag { flex-shrink: 0; }
+	.source-text { line-height: 1.5; }
+}
+
+.uploaded-files-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
+
+.uploaded-file-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 12px;
+	background: #f8fafc;
+	border: 1px solid #e2e8f0;
+	border-radius: 8px;
+	.file-name {
+		flex: 1;
+		font-size: 12px;
+		color: #475569;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.patch-template-section {
+	margin-top: 16px;
+	:deep(.patch-template-editor) {
+		> .el-divider { margin-top: 4px; margin-bottom: 12px; border-top-color: #e2e8f0;
+			.el-divider__text { font-weight: 600; font-size: 13px; color: #475569; background: transparent; padding-left: 0; }
+		}
+		.template-card { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 10px; }
+	}
+}
+
+/* 底部操作区 */
+.workflow-form-footer {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px 20px;
+	border-top: 1px solid #f1f5f9;
+	background: #fafbfc;
+	flex-shrink: 0;
+	.form-error-text {
+		flex: 1;
+		font-size: 12px;
+		color: #ef4444;
+		line-height: 1.5;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.w100 { width: 100%; }
+</style>