1202 lines
48 KiB
TypeScript
1202 lines
48 KiB
TypeScript
import { useEffect, useState, useMemo } from 'react';
|
||
import { bitable, FieldType, IDateTimeFieldMeta, IDateTimeField, ITable, ITextField, ISelectionField, INumberField, IOpenSegment, IRecord } from '@lark-base-open/js-sdk';
|
||
import { Steps, Button, Typography, Form, Toast, Spin, Empty } from '@douyinfe/semi-ui';
|
||
import './App.css';
|
||
|
||
// 步骤数据结构定义
|
||
interface StepItem {
|
||
name: string;
|
||
fieldId: string; // 原始的fieldId，代表流程名称本身
|
||
finished: boolean;
|
||
parallelSteps?: StepItem[]; // 并行子步骤数组
|
||
requireAllSubSteps?: boolean; // 是否所有子步骤都完成才标记主步骤完成
|
||
expectTimeFieldId?: string;
|
||
expectTimeValue?: number;
|
||
actualTimeFieldId?: string;
|
||
actualTimeValue?: number;
|
||
startTimeFieldId?: string;
|
||
startTimeValue?: number;
|
||
processNodeValue?: string;
|
||
order?: number; // 流程顺序，相同顺序的步骤视为并行
|
||
parallelGroup?: number; // 并行组标识，用于UI分组显示
|
||
isMainStep?: boolean; // 是否为主步骤（整数顺序）
|
||
}
|
||
|
||
// 流程配置项结构
|
||
interface ProcessConfigItem {
|
||
processName: string;
|
||
order: number;
|
||
processNodeValue: string;
|
||
timeFieldId: string;
|
||
originalRecordId: string;
|
||
posLink: string;
|
||
}
|
||
|
||
// 常量定义
|
||
const POS_TABLE_NAME = "pos_订单基础信息明细"; // 替换为你的实际POS表名
|
||
const PROCESS_TABLE_NAME = "订单流程表"; // 替换为你的实际流程配置表名
|
||
let POS_TABLE_ID = "";
|
||
let PROCESS_TABLE_ID = "";
|
||
|
||
async function initTableIds() {
|
||
const posTable = await bitable.base.getTableByName(POS_TABLE_NAME);
|
||
POS_TABLE_ID = posTable.id;
|
||
const processTable = await bitable.base.getTableByName(PROCESS_TABLE_NAME);
|
||
PROCESS_TABLE_ID = processTable.id;
|
||
}
|
||
|
||
// 在应用初始化或需要用到表ID前调用
|
||
initTableIds();
|
||
|
||
const PROCESS_NAME_FIELD_NAME = '流程名称';
|
||
const PROCESS_ORDER_FIELD_NAME = '流程顺序';
|
||
|
||
const POS_LINK_FIELD_NAME_IN_PROCESS_TABLE = 'POS表recordid';
|
||
const PROCESS_NODE_FIELD_NAME = '流程节点';
|
||
const FIELD_ID_FIELD_NAME = '字段ID';
|
||
|
||
|
||
const PROCESS_NODE_EXPECT_TIME = '预计完成时间';
|
||
const PROCESS_NODE_ACTUAL_TIME = '实际完成时间';
|
||
const PROCESS_NODE_START_TIME = '实际开始时间';
|
||
|
||
// 格式化时间戳为可读格式
|
||
const formatTimestamp = (timestamp: number | undefined): string => {
|
||
if (timestamp === undefined || timestamp === null) return '-';
|
||
return new Date(timestamp).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
|
||
};
|
||
|
||
// 步骤管理服务类
|
||
class StepService {
|
||
// 保存步骤完成时间
|
||
static async saveStepCompletionTime(
|
||
posTable: ITable,
|
||
selectedRecordId: string,
|
||
stepItem: StepItem,
|
||
isSubStep: boolean = false
|
||
): Promise<number | null> {
|
||
if (!selectedRecordId || !stepItem.actualTimeFieldId) return null;
|
||
|
||
try {
|
||
const timeField = await posTable.getFieldById<IDateTimeField>(stepItem.actualTimeFieldId);
|
||
const now = Date.now();
|
||
|
||
await timeField.setValue(selectedRecordId, now);
|
||
stepItem.actualTimeValue = now;
|
||
stepItem.finished = true;
|
||
|
||
console.log(`${isSubStep ? '子步骤' : '步骤'} "${stepItem.name}" 完成时间已保存到字段 ${stepItem.actualTimeFieldId}`);
|
||
return now;
|
||
} catch (e) {
|
||
console.error(`Error saving ${isSubStep ? 'sub-step' : 'step'} completion time:`, e);
|
||
throw e;
|
||
}
|
||
}
|
||
|
||
// 更新后续步骤的开始时间
|
||
static async updateSubsequentStepsStartTimes(
|
||
posTable: ITable,
|
||
selectedRecordId: string,
|
||
steps: StepItem[],
|
||
stepIndex: number,
|
||
actualTimeValue: number
|
||
) {
|
||
if (!selectedRecordId) return;
|
||
|
||
try {
|
||
// 从当前步骤的下一个步骤开始更新
|
||
for (let i = stepIndex + 1; i < steps.length; i++) {
|
||
const nextStep = steps[i];
|
||
|
||
// 如果下一步骤已有开始时间，且早于当前完成时间，则不更新
|
||
if (nextStep.startTimeValue && nextStep.startTimeValue <= actualTimeValue) {
|
||
continue;
|
||
}
|
||
|
||
// 如果下一步骤有开始时间字段ID，更新该字段
|
||
if (nextStep.startTimeFieldId) {
|
||
const startTimeField = await posTable.getFieldById<IDateTimeField>(nextStep.startTimeFieldId);
|
||
await startTimeField.setValue(selectedRecordId, actualTimeValue);
|
||
nextStep.startTimeValue = actualTimeValue;
|
||
console.log(`Updated step ${i} (${nextStep.name}) start time to ${new Date(actualTimeValue).toLocaleString()}`);
|
||
}
|
||
|
||
// 如果下一步骤有并行子步骤，也更新它们的开始时间
|
||
if (nextStep.parallelSteps) {
|
||
for (const subStep of nextStep.parallelSteps) {
|
||
if (subStep.startTimeFieldId) {
|
||
const subStartTimeField = await posTable.getFieldById<IDateTimeField>(subStep.startTimeFieldId);
|
||
await subStartTimeField.setValue(selectedRecordId, actualTimeValue);
|
||
subStep.startTimeValue = actualTimeValue;
|
||
console.log(`Updated sub-step ${subStep.name} start time to ${new Date(actualTimeValue).toLocaleString()}`);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error("Error updating subsequent steps start times:", e);
|
||
Toast.warning("更新后续步骤开始时间失败");
|
||
}
|
||
}
|
||
|
||
// 处理子步骤完成的逻辑
|
||
static async handleSubStepCompletion(
|
||
newSteps: StepItem[],
|
||
stepIndex: number,
|
||
subStepIndex: number,
|
||
posTable: ITable,
|
||
selectedRecordId: string,
|
||
refreshSteps: (value: boolean) => void
|
||
) {
|
||
const parentStep = newSteps[stepIndex];
|
||
const subStep = parentStep.parallelSteps![subStepIndex];
|
||
|
||
// 如果父步骤要求所有子步骤完成才标记为完成
|
||
if (parentStep.requireAllSubSteps && parentStep.parallelSteps?.every(ps => ps.finished)) {
|
||
parentStep.finished = true;
|
||
|
||
// 如果父步骤也有完成时间字段，记录完成时间
|
||
if (parentStep.actualTimeFieldId) {
|
||
try {
|
||
const completionTime = await StepService.saveStepCompletionTime(posTable, selectedRecordId, parentStep);
|
||
if (completionTime) {
|
||
// 更新父步骤后的步骤开始时间
|
||
await StepService.updateSubsequentStepsStartTimes(
|
||
posTable, selectedRecordId, newSteps, stepIndex, completionTime
|
||
);
|
||
|
||
// 强制刷新步骤数据
|
||
refreshSteps(true);
|
||
}
|
||
} catch (e) {
|
||
console.error("Error saving parent step completion time:", e);
|
||
}
|
||
} else {
|
||
// 如果没有完成时间字段，也需要更新后续步骤
|
||
refreshSteps(true);
|
||
}
|
||
} else if (!parentStep.requireAllSubSteps && parentStep.parallelSteps?.some(ps => ps.finished)) {
|
||
// 任一子步骤完成即可推进主步骤
|
||
parentStep.finished = true;
|
||
|
||
// 如果父步骤有完成时间字段，记录完成时间
|
||
if (parentStep.actualTimeFieldId) {
|
||
try {
|
||
const completionTime = await StepService.saveStepCompletionTime(posTable, selectedRecordId, parentStep);
|
||
if (completionTime) {
|
||
// 更新父步骤后的步骤开始时间
|
||
await StepService.updateSubsequentStepsStartTimes(
|
||
posTable, selectedRecordId, newSteps, stepIndex, completionTime
|
||
);
|
||
|
||
// 强制刷新步骤数据
|
||
refreshSteps(true);
|
||
}
|
||
} catch (e) {
|
||
console.error("Error saving parent step completion time:", e);
|
||
}
|
||
} else {
|
||
// 如果没有完成时间字段，也需要更新后续步骤
|
||
refreshSteps(true);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 查找上一个主步骤的完成时间
|
||
static findPreviousMainStepFinishTime(steps: StepItem[], currentIndex: number): number | undefined {
|
||
for (let i = currentIndex - 1; i >= 0; i--) {
|
||
const step = steps[i];
|
||
// 如果是主步骤（整数顺序）且已完成
|
||
if (step.isMainStep && step.finished && step.actualTimeValue) {
|
||
return step.actualTimeValue;
|
||
}
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
// 更新步骤的开始时间为上一个主步骤的完成时间
|
||
static async updateStepStartTimeFromPreviousMainStep(
|
||
posTable: ITable,
|
||
selectedRecordId: string,
|
||
steps: StepItem[],
|
||
stepIndex: number
|
||
) {
|
||
if (!selectedRecordId) return;
|
||
|
||
const currentStep = steps[stepIndex];
|
||
if (!currentStep.startTimeFieldId) return;
|
||
|
||
try {
|
||
// 查找上一个主步骤的完成时间
|
||
const previousFinishTime = StepService.findPreviousMainStepFinishTime(steps, stepIndex);
|
||
|
||
if (previousFinishTime) {
|
||
// 更新当前步骤的开始时间
|
||
const startTimeField = await posTable.getFieldById<IDateTimeField>(currentStep.startTimeFieldId);
|
||
await startTimeField.setValue(selectedRecordId, previousFinishTime);
|
||
currentStep.startTimeValue = previousFinishTime;
|
||
console.log(`Updated step ${stepIndex} (${currentStep.name}) start time to previous main step's finish time: ${new Date(previousFinishTime).toLocaleString()}`);
|
||
|
||
// 如果当前步骤有并行子步骤，也更新它们的开始时间
|
||
if (currentStep.parallelSteps) {
|
||
for (const subStep of currentStep.parallelSteps) {
|
||
if (subStep.startTimeFieldId) {
|
||
const subStartTimeField = await posTable.getFieldById<IDateTimeField>(subStep.startTimeFieldId);
|
||
await subStartTimeField.setValue(selectedRecordId, previousFinishTime);
|
||
subStep.startTimeValue = previousFinishTime;
|
||
console.log(`Updated sub-step ${subStep.name} start time to previous main step's finish time: ${new Date(previousFinishTime).toLocaleString()}`);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error(`Error updating step ${stepIndex} start time from previous main step:`, e);
|
||
Toast.warning("更新步骤开始时间失败");
|
||
}
|
||
}
|
||
}
|
||
|
||
// 判断并行步骤是否完成
|
||
const isParallelFinished = (parallelSteps: StepItem[], requireAll: boolean = true) => {
|
||
if (!parallelSteps || parallelSteps.length === 0) return true;
|
||
if (requireAll) {
|
||
return parallelSteps.every(step => step.finished);
|
||
} else {
|
||
return parallelSteps.some(step => step.finished);
|
||
}
|
||
};
|
||
|
||
// 步骤UI组件
|
||
const StepCard = ({
|
||
step,
|
||
idx,
|
||
currentStep,
|
||
loading,
|
||
onFinishStep,
|
||
formatTimestamp,
|
||
isCurrentStep,
|
||
isActiveParallelGroup,
|
||
isAnySubStepFinished, // 判断并行组中是否有子步骤已完成
|
||
canAccessSubSteps // 判断是否可以访问子步骤
|
||
}: {
|
||
step: StepItem;
|
||
idx: number;
|
||
currentStep: number;
|
||
loading: boolean;
|
||
onFinishStep: (stepIndex: number, subStepIndex?: number) => void;
|
||
formatTimestamp: (timestamp: number | undefined) => string;
|
||
isCurrentStep: boolean;
|
||
isActiveParallelGroup: boolean;
|
||
isAnySubStepFinished: boolean;
|
||
canAccessSubSteps: boolean;
|
||
}) => {
|
||
return (
|
||
<div className="step-content-container" style={{ minWidth: 300, marginTop: step.parallelSteps ? 10 : 0 }}>
|
||
{/* 并行步骤组标题 */}
|
||
{step.parallelSteps && (
|
||
<div className="parallel-group-header" style={{
|
||
padding: '10px 16px',
|
||
backgroundColor: '#f5f7fa',
|
||
borderRadius: '4px',
|
||
marginBottom: '16px',
|
||
borderLeft: '4px solid #165DFF'
|
||
}}>
|
||
<Typography.Text strong style={{ fontSize: 16, color: '#165DFF' }}>
|
||
并行处理组: {step.name}
|
||
</Typography.Text>
|
||
<Typography.Text style={{ fontSize: 14, color: '#86909c', marginTop: 4, display: 'block' }}>
|
||
{step.requireAllSubSteps ? '所有子步骤完成后自动推进' : '任一子步骤完成后自动推进'}
|
||
</Typography.Text>
|
||
</div>
|
||
)}
|
||
|
||
{/* 普通步骤的时间信息展示 */}
|
||
{!step.parallelSteps && (
|
||
<div className="step-time-info" style={{
|
||
margin: '16px 0 8px 0',
|
||
padding: '12px',
|
||
border: '1px solid #eee',
|
||
borderRadius: '4px'
|
||
}}>
|
||
<Typography.Text strong style={{color: '#000', fontSize: 14, marginBottom: 8, display: 'block'}}>
|
||
预计完成时间：{formatTimestamp(step.expectTimeValue)}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{color: '#000', fontSize: 14, marginBottom: 8, display: 'block'}}>
|
||
实际开始时间：{formatTimestamp(step.startTimeValue)}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{color: '#000', fontSize: 14, marginBottom: 8, display: 'block'}}>
|
||
实际完成时间：{formatTimestamp(step.actualTimeValue)}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{
|
||
color: step.actualTimeValue && step.expectTimeValue && step.actualTimeValue > step.expectTimeValue ? '#f5222d' :
|
||
(step.actualTimeValue && step.expectTimeValue && step.actualTimeValue <= step.expectTimeValue ? '#52c41a' : '#000'),
|
||
fontSize: 14, marginBottom: 0, display: 'block'
|
||
}}>
|
||
耗时：{step.startTimeValue && step.actualTimeValue ?
|
||
((step.actualTimeValue - step.startTimeValue) > 0 ?
|
||
((step.actualTimeValue - step.startTimeValue) / 1000 / 60 / 60).toFixed(2) + ' 小时' : '0 小时') : '-'}
|
||
</Typography.Text>
|
||
</div>
|
||
)}
|
||
|
||
{/* 并行子步骤 */}
|
||
{step.parallelSteps && (
|
||
<div className="parallel-steps-container" style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
gap: 16,
|
||
marginTop: 10,
|
||
flexWrap: 'wrap'
|
||
}}>
|
||
{step.parallelSteps.map((sub, subIdx) => (
|
||
<div
|
||
key={subIdx}
|
||
className="sub-step-card"
|
||
style={{
|
||
flex: 1,
|
||
minWidth: 280,
|
||
border: '1px solid #eee',
|
||
borderRadius: 4,
|
||
padding: 12,
|
||
backgroundColor: '#fafafa',
|
||
transition: 'all 0.3s',
|
||
position: 'relative'
|
||
}}
|
||
>
|
||
{/* 完成状态标识 */}
|
||
{sub.finished && (
|
||
<div className="sub-step-finished-badge" style={{
|
||
position: 'absolute',
|
||
top: '8px',
|
||
right: '8px',
|
||
backgroundColor: '#52c41a',
|
||
color: '#fff',
|
||
fontSize: '12px',
|
||
padding: '2px 6px',
|
||
borderRadius: '4px'
|
||
}}>
|
||
已完成
|
||
</div>
|
||
)}
|
||
|
||
<Typography.Text strong className="sub-step-title" style={{ fontSize: 15 }}>{sub.name}</Typography.Text>
|
||
|
||
<div className="sub-step-time-info" style={{ margin: '10px 0 8px 0' }}>
|
||
<Typography.Text strong style={{color: '#000', fontSize: 13, marginBottom: 8, display: 'block'}}>
|
||
预计完成时间：{formatTimestamp(sub.expectTimeValue || step.expectTimeValue)}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{color: '#000', fontSize: 13, marginBottom: 8, display: 'block'}}>
|
||
实际开始时间：{formatTimestamp(sub.startTimeValue || step.startTimeValue)}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{color: '#000', fontSize: 13, marginBottom: 8, display: 'block'}}>
|
||
实际完成时间：{formatTimestamp(sub.actualTimeValue)}
|
||
</Typography.Text>
|
||
<Typography.Text strong style={{
|
||
color: sub.actualTimeValue && (sub.expectTimeValue || step.expectTimeValue) &&
|
||
sub.actualTimeValue > (sub.expectTimeValue || step.expectTimeValue) ? '#f5222d' :
|
||
(sub.actualTimeValue && (sub.expectTimeValue || step.expectTimeValue) &&
|
||
sub.actualTimeValue <= (sub.expectTimeValue || step.expectTimeValue) ? '#52c41a' : '#000'),
|
||
fontSize: 13, marginBottom: 0, display: 'block'
|
||
}}>
|
||
耗时：{sub.startTimeValue && sub.actualTimeValue ?
|
||
((sub.actualTimeValue - sub.startTimeValue) > 0 ?
|
||
((sub.actualTimeValue - sub.startTimeValue) / 1000 / 60 / 60).toFixed(2) + ' 小时' : '0 小时') :
|
||
(step.startTimeValue && sub.actualTimeValue ?
|
||
((sub.actualTimeValue - step.startTimeValue) / 1000 / 60 / 60).toFixed(2) + ' 小时' : '-')}
|
||
</Typography.Text>
|
||
</div>
|
||
|
||
{/* 允许活动并行组中的子步骤被点击，或并行组中已有子步骤完成 */}
|
||
{!sub.finished && (isCurrentStep || isActiveParallelGroup || isAnySubStepFinished || canAccessSubSteps) && (
|
||
<Button
|
||
theme="solid"
|
||
size="small"
|
||
loading={loading}
|
||
onClick={() => onFinishStep(idx, subIdx)}
|
||
style={{ marginTop: 8 }}
|
||
>
|
||
完成此子步骤
|
||
</Button>
|
||
)}
|
||
|
||
{/* 只有当父步骤未完成且不在当前活动状态时才显示等待提示 */}
|
||
{!sub.finished && !(isCurrentStep || isActiveParallelGroup || isAnySubStepFinished || canAccessSubSteps) && (
|
||
<div style={{ marginTop: 8, padding: '6px 12px', backgroundColor: '#f2f3f5', borderRadius: 4, textAlign: 'center' }}>
|
||
<Typography.Text style={{ fontSize: 13, color: '#86909c' }}>
|
||
等待前置步骤完成
|
||
</Typography.Text>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 当前步骤的完成按钮 */}
|
||
{idx === currentStep && !step.finished && !step.parallelSteps && (
|
||
<Button
|
||
theme="solid"
|
||
size="default"
|
||
loading={loading}
|
||
onClick={() => onFinishStep(idx)}
|
||
style={{ marginTop: 16 }}
|
||
>
|
||
完成此步骤
|
||
</Button>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default function App() {
|
||
const [dateFields, setDateFields] = useState<IDateTimeFieldMeta[]>([]);
|
||
const [steps, setSteps] = useState<StepItem[]>([]);
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [loading, setLoading] = useState(false);
|
||
const [selectedRecordId, setSelectedRecordId] = useState<string | undefined>();
|
||
const [refreshSteps, setRefreshSteps] = useState<boolean>(false);
|
||
const [isChangingRecord, setIsChangingRecord] = useState(false); // 记录是否正在切换记录
|
||
const [hasNoProcess, setHasNoProcess] = useState(false); // 记录是否没有配置流程
|
||
|
||
// 缓存所有流程配置数据
|
||
const [allProcessConfigs, setAllProcessConfigs] = useState<ProcessConfigItem[]>([]);
|
||
const [processConfigLoading, setProcessConfigLoading] = useState(true);
|
||
// 缓存字段元数据，避免重复获取
|
||
const [fieldMetadataCache, setFieldMetadataCache] = useState<Map<string, any>>(new Map());
|
||
// 缓存按POS记录ID分组的配置
|
||
const [configsByPosLink, setConfigsByPosLink] = useState<Map<string, ProcessConfigItem[]>>(new Map());
|
||
|
||
// 预加载所有流程配置数据
|
||
async function fetchAllProcessConfigs() {
|
||
setProcessConfigLoading(true);
|
||
try {
|
||
// 检查缓存中是否已有配置数据
|
||
if (allProcessConfigs.length > 0) {
|
||
console.log('Using cached process configs');
|
||
return;
|
||
}
|
||
|
||
const processTable = await bitable.base.getTableByName(PROCESS_TABLE_NAME);
|
||
|
||
// 优化：批量获取所有字段元数据，减少API调用
|
||
const allFields = await processTable.getFieldMetaList();
|
||
const fieldMap = new Map(allFields.map(field => [field.id, field]));
|
||
setFieldMetadataCache(fieldMap);
|
||
|
||
// 验证字段是否存在 - 使用优化后的字段映射
|
||
const requiredFieldNames = [
|
||
POS_LINK_FIELD_NAME_IN_PROCESS_TABLE,
|
||
PROCESS_NODE_FIELD_NAME,
|
||
FIELD_ID_FIELD_NAME,
|
||
PROCESS_NAME_FIELD_NAME,
|
||
PROCESS_ORDER_FIELD_NAME
|
||
];
|
||
// 检查必需字段是否存在
|
||
const missingFields: string[] = [];
|
||
requiredFieldNames.forEach(name => {
|
||
const field = allFields.find(f => f.name === name);
|
||
if (!field) {
|
||
missingFields.push(`字段名: ${name}`);
|
||
}
|
||
});
|
||
if (missingFields.length > 0) {
|
||
const errorMsg = `订单流程表中缺少关键字段: ${missingFields.join(', ')}`;
|
||
console.error(errorMsg);
|
||
Toast.error(errorMsg);
|
||
setProcessConfigLoading(false);
|
||
return;
|
||
}
|
||
// 使用更高效的分页获取记录
|
||
const allRecords: IRecord[] = [];
|
||
let pageToken: string | undefined;
|
||
do {
|
||
const response = await processTable.getRecords({
|
||
pageSize: 5000, // 最大页大小
|
||
pageToken
|
||
});
|
||
allRecords.push(...response.records);
|
||
pageToken = response.pageToken;
|
||
} while (pageToken);
|
||
console.log(`Fetched ${allRecords.length} process config records`);
|
||
const allConfigs: ProcessConfigItem[] = [];
|
||
// 获取字段对象
|
||
const posLinkField = allFields.find(f => f.name === POS_LINK_FIELD_NAME_IN_PROCESS_TABLE);
|
||
const processNodeField = allFields.find(f => f.name === PROCESS_NODE_FIELD_NAME);
|
||
const fieldIdField = allFields.find(f => f.name === FIELD_ID_FIELD_NAME);
|
||
for (const record of allRecords) {
|
||
const fields = record.fields;
|
||
const recordId = record.recordId;
|
||
// 处理POS链接字段
|
||
let posLinkText = '';
|
||
const posLinkFieldValue = fields[posLinkField?.id ?? ''];
|
||
if (Array.isArray(posLinkFieldValue)) {
|
||
posLinkText = (posLinkFieldValue[0] as IOpenSegment)?.text?.trim() || '';
|
||
} else if (typeof posLinkFieldValue === 'object' && posLinkFieldValue) {
|
||
posLinkText = (posLinkFieldValue as IOpenSegment).text?.trim() || '';
|
||
}
|
||
// 处理流程名称字段 - 使用字段ID直接访问
|
||
const processNameField = allFields.find(f => f.name === PROCESS_NAME_FIELD_NAME);
|
||
let processName = '';
|
||
if (processNameField) {
|
||
const fieldValue = fields[processNameField.id];
|
||
processName = Array.isArray(fieldValue)
|
||
? (fieldValue[0] as IOpenSegment)?.text?.trim() || ''
|
||
: (fieldValue as IOpenSegment)?.text?.trim() || '';
|
||
}
|
||
// 处理顺序字段
|
||
const processOrderField = allFields.find(f => f.name === PROCESS_ORDER_FIELD_NAME);
|
||
const order = processOrderField
|
||
? (fields[processOrderField.id] as number | undefined) || 0
|
||
: 0;
|
||
// 处理流程节点字段
|
||
const processNodeValue = fields[processNodeField?.id ?? '']
|
||
? (Array.isArray(fields[processNodeField.id])
|
||
? (fields[processNodeField.id][0] as IOpenSegment)?.text?.trim() || ''
|
||
: (fields[processNodeField.id] as IOpenSegment)?.text?.trim() || '')
|
||
: '';
|
||
// 处理时间字段ID字段
|
||
const timeFieldId = fields[fieldIdField?.id ?? '']
|
||
? (Array.isArray(fields[fieldIdField.id])
|
||
? (fields[fieldIdField.id][0] as IOpenSegment)?.text?.trim() || ''
|
||
: (fields[fieldIdField.id] as IOpenSegment)?.text?.trim() || '')
|
||
: '';
|
||
allConfigs.push({
|
||
processName,
|
||
order,
|
||
processNodeValue,
|
||
timeFieldId,
|
||
originalRecordId: recordId,
|
||
posLink: posLinkText
|
||
});
|
||
}
|
||
|
||
// 按POS记录ID分组配置，便于快速查找
|
||
const configsByPosMap = new Map<string, ProcessConfigItem[]>();
|
||
allConfigs.forEach(config => {
|
||
if (!configsByPosMap.has(config.posLink)) {
|
||
configsByPosMap.set(config.posLink, []);
|
||
}
|
||
configsByPosMap.get(config.posLink)?.push(config);
|
||
});
|
||
|
||
setAllProcessConfigs(allConfigs);
|
||
setConfigsByPosLink(configsByPosMap);
|
||
console.log('Fetched all process configs:', allConfigs.length, 'items');
|
||
} catch (error) {
|
||
console.error('Failed to fetch all process configs:', error);
|
||
Toast.error('加载流程配置数据失败，请检查网络连接或表格权限');
|
||
} finally {
|
||
setProcessConfigLoading(false);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchAllProcessConfigs();
|
||
}, []);
|
||
|
||
// 初始化日期字段
|
||
useEffect(() => {
|
||
async function fetchDateFieldsForUI() {
|
||
try {
|
||
const activeTable = await bitable.base.getActiveTable();
|
||
const fields = await activeTable.getFieldMetaListByType<IDateTimeFieldMeta>(FieldType.DateTime);
|
||
setDateFields(fields);
|
||
} catch (e) {
|
||
console.error("Failed to fetch date fields for UI: ", e);
|
||
Toast.error("获取可选日期字段列表失败");
|
||
}
|
||
}
|
||
fetchDateFieldsForUI();
|
||
}, []);
|
||
|
||
// 优化：初始化步骤时处理并行组
|
||
const initializeStepsWithParallel = (configs: ProcessConfigItem[]) => {
|
||
if (configs.length === 0) return [];
|
||
|
||
// 使用Map按order分组，提高查询效率
|
||
const stepsByOrder = new Map<number, StepItem[]>();
|
||
|
||
// 初始化步骤
|
||
configs.forEach(config => {
|
||
const step: StepItem = {
|
||
name: config.processName,
|
||
fieldId: config.timeFieldId,
|
||
finished: false,
|
||
order: config.order,
|
||
processNodeValue: config.processNodeValue,
|
||
isMainStep: config.order === Math.floor(config.order) // 标记是否为主步骤（整数顺序）
|
||
};
|
||
|
||
if (!stepsByOrder.has(config.order)) {
|
||
stepsByOrder.set(config.order, []);
|
||
}
|
||
stepsByOrder.get(config.order)?.push(step);
|
||
});
|
||
|
||
// 处理并行组
|
||
const processedSteps: StepItem[] = [];
|
||
stepsByOrder.forEach((groupSteps, order) => {
|
||
if (groupSteps.length === 1) {
|
||
processedSteps.push(groupSteps[0]);
|
||
} else {
|
||
const parallelGroupStep: StepItem = {
|
||
name: `并行组${order}`,
|
||
fieldId: `parallel_group_${order}`,
|
||
finished: false,
|
||
order,
|
||
parallelSteps: groupSteps,
|
||
requireAllSubSteps: true,
|
||
parallelGroup: order,
|
||
isMainStep: true // 并行组作为一个整体视为主步骤
|
||
};
|
||
|
||
// 继承第一个子步骤的时间字段
|
||
if (groupSteps.length > 0) {
|
||
const firstSubStep = groupSteps[0];
|
||
parallelGroupStep.expectTimeFieldId = firstSubStep.expectTimeFieldId;
|
||
parallelGroupStep.expectTimeValue = firstSubStep.expectTimeValue;
|
||
parallelGroupStep.startTimeFieldId = firstSubStep.startTimeFieldId;
|
||
parallelGroupStep.startTimeValue = firstSubStep.startTimeValue;
|
||
}
|
||
|
||
processedSteps.push(parallelGroupStep);
|
||
}
|
||
});
|
||
|
||
return processedSteps.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||
};
|
||
|
||
// 刷新步骤数据
|
||
const refreshProcessSteps = async () => {
|
||
if (selectedRecordId) {
|
||
await loadProcessSteps(selectedRecordId);
|
||
}
|
||
};
|
||
|
||
// 从缓存中加载流程步骤
|
||
const loadProcessSteps = async (currentPosRecordId: string) => {
|
||
console.log('loadProcessSteps triggered with currentPosRecordId:', currentPosRecordId);
|
||
if (!currentPosRecordId) {
|
||
setSteps([]);
|
||
setCurrentStep(0);
|
||
setHasNoProcess(false);
|
||
console.log('No POS record selected, steps cleared.');
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
setIsChangingRecord(true);
|
||
setHasNoProcess(false); // 重置状态
|
||
console.log('Loading process steps from cached configs...');
|
||
|
||
try {
|
||
const posTable = await bitable.base.getTableByName(POS_TABLE_NAME);
|
||
|
||
// 从缓存中快速筛选当前记录的配置
|
||
const filteredConfigs = configsByPosLink.get(currentPosRecordId) ||
|
||
allProcessConfigs.filter(config => config.posLink === currentPosRecordId);
|
||
console.log('Filtered configs for current record:', filteredConfigs.length);
|
||
|
||
if (filteredConfigs.length === 0) {
|
||
console.log('No configs found for current record');
|
||
setSteps([]);
|
||
setCurrentStep(0);
|
||
setHasNoProcess(true); // 设置为没有配置流程
|
||
setLoading(false);
|
||
setIsChangingRecord(false);
|
||
return;
|
||
}
|
||
|
||
// 按流程顺序分组配置
|
||
const stepsByOrder = new Map<number, StepItem[]>();
|
||
const tempStepsMap = new Map<string, StepItem>();
|
||
|
||
// 首先处理每个步骤的基本信息
|
||
for (const config of filteredConfigs) {
|
||
const stepName = config.processName;
|
||
const order = config.order;
|
||
|
||
// 如果该步骤不存在，创建新步骤
|
||
if (!tempStepsMap.has(stepName)) {
|
||
tempStepsMap.set(stepName, {
|
||
name: stepName,
|
||
fieldId: stepName,
|
||
finished: false,
|
||
order,
|
||
parallelSteps: undefined,
|
||
requireAllSubSteps: true, // 默认需要所有子步骤完成
|
||
isMainStep: order === Math.floor(order) // 标记是否为主步骤
|
||
});
|
||
} else {
|
||
// 如果步骤已存在，使用最小的order值
|
||
const existingStep = tempStepsMap.get(stepName)!;
|
||
existingStep.order = Math.min(existingStep.order || 0, order);
|
||
// 重新计算是否为主步骤
|
||
existingStep.isMainStep = existingStep.order === Math.floor(existingStep.order);
|
||
}
|
||
|
||
const stepItem = tempStepsMap.get(stepName)!;
|
||
|
||
// 根据节点类型设置相应的时间字段
|
||
if (config.timeFieldId) {
|
||
try {
|
||
const posTimeField = await posTable.getFieldById<IDateTimeField>(config.timeFieldId);
|
||
const timeValue = await posTimeField.getValue(currentPosRecordId) as number | null;
|
||
|
||
if (config.processNodeValue?.includes('预计')) {
|
||
stepItem.expectTimeFieldId = config.timeFieldId;
|
||
stepItem.expectTimeValue = timeValue || undefined;
|
||
} else if (config.processNodeValue?.includes('实际') && !config.processNodeValue?.includes('开始')) {
|
||
stepItem.actualTimeFieldId = config.timeFieldId;
|
||
stepItem.actualTimeValue = timeValue || undefined;
|
||
if (timeValue) stepItem.finished = true;
|
||
} else if (config.processNodeValue === PROCESS_NODE_START_TIME || config.processNodeValue?.includes('实际开始')) {
|
||
stepItem.startTimeFieldId = config.timeFieldId;
|
||
stepItem.startTimeValue = timeValue || undefined;
|
||
}
|
||
} catch (e) {
|
||
console.warn(`Error processing time field ${config.timeFieldId} for step ${stepName} (node: ${config.processNodeValue}):`, e);
|
||
Toast.warning(`处理步骤 ${stepName} 的时间字段 ${config.timeFieldId} 出错`);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 按顺序分组步骤
|
||
const loadedSteps = Array.from(tempStepsMap.values()).sort((a, b) => (a.order || 0) - (b.order || 0));
|
||
|
||
// 处理并行组 - 相同整数顺序的步骤形成并行组
|
||
const parallelGroups = new Map<number, StepItem[]>();
|
||
loadedSteps.forEach(step => {
|
||
const mainOrder = Math.floor(step.order || 0); // 使用order的整数部分作为分组键
|
||
if (!parallelGroups.has(mainOrder)) {
|
||
parallelGroups.set(mainOrder, []);
|
||
}
|
||
parallelGroups.get(mainOrder)?.push(step);
|
||
});
|
||
|
||
// 重构步骤数组，将并行组封装为主步骤
|
||
const revisedSteps: StepItem[] = [];
|
||
parallelGroups.forEach((groupSteps, mainOrder) => {
|
||
// 条件：组内多于一个步骤，或者组内只有一个步骤但其原始order包含小数
|
||
const shouldFormParallelBlock = groupSteps.length > 1 ||
|
||
(groupSteps.length === 1 && groupSteps[0].order !== Math.floor(groupSteps[0].order || 0));
|
||
|
||
if (!shouldFormParallelBlock && groupSteps.length === 1) {
|
||
// 单个普通步骤（order为整数且不成组）直接添加
|
||
revisedSteps.push(groupSteps[0]);
|
||
} else {
|
||
// 形成并行组 (包含单个小数order的步骤，如16.1自己也形成一个"并行组")
|
||
let requiresAll = true; // 默认需要所有子步骤完成
|
||
// 检查组内是否有任何一个步骤的order以.2结尾
|
||
if (groupSteps.some(s => s.order && s.order.toString().endsWith('.2'))) {
|
||
requiresAll = false;
|
||
}
|
||
|
||
// 父并行步骤的名称
|
||
// 如果并行块仅由一个原始步骤构成（例如，order为16.1的步骤单独形成一个并行块），则父步骤名称可以就是该原始步骤的名称。
|
||
// 否则，组合所有子步骤名称。
|
||
const parallelStepName = groupSteps.length === 1
|
||
? groupSteps[0].name
|
||
: `并行处理组 ${mainOrder}`;
|
||
|
||
revisedSteps.push({
|
||
name: parallelStepName,
|
||
fieldId: `parallel_${mainOrder}`,
|
||
finished: requiresAll
|
||
? groupSteps.every(s => s.finished)
|
||
: groupSteps.some(s => s.finished), // 完成状态根据requireAllSubSteps判断
|
||
order: mainOrder, // 父并行步骤使用整数order进行排序
|
||
parallelSteps: groupSteps.sort((a,b) => (a.order || 0) - (b.order || 0)), // 子步骤按原始order排序
|
||
requireAllSubSteps: requiresAll,
|
||
// 尝试从第一个子步骤或具有整数order的子步骤继承时间字段
|
||
expectTimeFieldId: groupSteps.find(s => s.order === mainOrder)?.expectTimeFieldId || groupSteps[0]?.expectTimeFieldId,
|
||
expectTimeValue: groupSteps.find(s => s.order === mainOrder)?.expectTimeValue || groupSteps[0]?.expectTimeValue,
|
||
startTimeFieldId: groupSteps.find(s => s.order === mainOrder)?.startTimeFieldId || groupSteps[0]?.startTimeFieldId,
|
||
startTimeValue: groupSteps.find(s => s.order === mainOrder)?.startTimeValue || groupSteps[0]?.startTimeValue,
|
||
parallelGroup: mainOrder, // 用于UI分组显示的标识
|
||
isMainStep: true // 并行组作为一个整体视为主步骤
|
||
});
|
||
}
|
||
});
|
||
|
||
// 按顺序排序最终的步骤列表 (并行组和普通步骤)
|
||
const sortedSteps = revisedSteps.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||
|
||
// 处理步骤间的开始时间关联
|
||
for (let i = 0; i < sortedSteps.length; i++) {
|
||
const currentStep = sortedSteps[i];
|
||
|
||
// 第一个步骤的开始时间不依赖于前一步骤
|
||
if (i === 0) continue;
|
||
|
||
// 查找上一个已完成的主步骤（包括并行组）
|
||
let previousMainStepIndex = i - 1;
|
||
while (previousMainStepIndex >= 0 && !sortedSteps[previousMainStepIndex].isMainStep) {
|
||
previousMainStepIndex--;
|
||
}
|
||
|
||
// 如果找到了上一个主步骤
|
||
if (previousMainStepIndex >= 0) {
|
||
const previousMainStep = sortedSteps[previousMainStepIndex];
|
||
|
||
// 如果前一个主步骤已完成，且当前步骤没有开始时间，设置当前步骤的开始时间为前一步骤的完成时间
|
||
if (previousMainStep.finished && previousMainStep.actualTimeValue &&
|
||
(!currentStep.startTimeValue || currentStep.startTimeValue < previousMainStep.actualTimeValue)) {
|
||
|
||
currentStep.startTimeValue = previousMainStep.actualTimeValue;
|
||
|
||
// 如果当前步骤有开始时间字段ID，也更新该字段的值
|
||
if (currentStep.startTimeFieldId && selectedRecordId) {
|
||
try {
|
||
const startTimeField = await posTable.getFieldById<IDateTimeField>(currentStep.startTimeFieldId);
|
||
await startTimeField.setValue(selectedRecordId, previousMainStep.actualTimeValue);
|
||
console.log(`Set step ${i} (${currentStep.name}) start time to previous main step's finish time: ${new Date(previousMainStep.actualTimeValue).toLocaleString()}`);
|
||
} catch (e) {
|
||
console.warn(`Failed to update start time field for step ${i} (${currentStep.name}):`, e);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
console.log('Loaded steps:', JSON.stringify(sortedSteps, null, 2));
|
||
setSteps(sortedSteps);
|
||
|
||
// 确定当前步骤
|
||
const firstUnfinished = sortedSteps.findIndex(s => !s.finished);
|
||
setCurrentStep(firstUnfinished === -1 ? sortedSteps.length : firstUnfinished);
|
||
|
||
} catch (error) {
|
||
console.error('Failed to load process steps:', error);
|
||
Toast.error('加载流程步骤失败，请检查控制台获取更多信息。');
|
||
setSteps([]);
|
||
} finally {
|
||
setLoading(false);
|
||
setIsChangingRecord(false);
|
||
console.log('Finished loading process steps.');
|
||
}
|
||
};
|
||
|
||
// 监听表格选择变化
|
||
useEffect(() => {
|
||
const off = bitable.base.onSelectionChange(async (event) => {
|
||
if (event.data && event.data.tableId === POS_TABLE_ID && event.data.recordId) {
|
||
setSelectedRecordId(event.data.recordId);
|
||
// 只在配置数据加载完成后才加载步骤
|
||
if (!processConfigLoading) {
|
||
await loadProcessSteps(event.data.recordId);
|
||
}
|
||
} else if (!event.data.recordId) {
|
||
setSelectedRecordId(undefined);
|
||
setSteps([]);
|
||
setCurrentStep(0);
|
||
setHasNoProcess(false);
|
||
}
|
||
});
|
||
return () => {
|
||
off();
|
||
};
|
||
}, [POS_TABLE_ID, processConfigLoading]);
|
||
|
||
// 监听刷新标志
|
||
useEffect(() => {
|
||
if (refreshSteps && selectedRecordId) {
|
||
refreshProcessSteps();
|
||
setRefreshSteps(false);
|
||
}
|
||
}, [refreshSteps, selectedRecordId]);
|
||
|
||
// 处理步骤完成
|
||
const handleFinishStep = async (stepIndex: number, subStepIndex?: number) => {
|
||
if (!selectedRecordId) {
|
||
Toast.error('没有选中的POS记录');
|
||
return;
|
||
}
|
||
|
||
const newSteps = [...steps];
|
||
let stepToComplete: StepItem;
|
||
let isSubStep = typeof subStepIndex === 'number';
|
||
|
||
// 确定要完成的步骤
|
||
if (isSubStep && newSteps[stepIndex] && newSteps[stepIndex].parallelSteps) {
|
||
stepToComplete = newSteps[stepIndex].parallelSteps![subStepIndex!];
|
||
} else {
|
||
stepToComplete = newSteps[stepIndex];
|
||
}
|
||
|
||
// 检查步骤是否存在
|
||
if (!stepToComplete) {
|
||
Toast.error('找不到要完成的步骤');
|
||
return;
|
||
}
|
||
|
||
// 检查步骤是否已经完成
|
||
if (stepToComplete.finished && stepToComplete.actualTimeValue) {
|
||
Toast.info(`步骤 "${stepToComplete.name}" 已于 ${formatTimestamp(stepToComplete.actualTimeValue)} 完成`);
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
|
||
try {
|
||
const posTable = await bitable.base.getTableById(POS_TABLE_ID);
|
||
|
||
// 如果没有配置实际完成时间字段，仅标记为完成
|
||
if (!stepToComplete.actualTimeFieldId) {
|
||
Toast.warning(`步骤 "${stepToComplete.name}" 未配置实际完成时间字段ID，无法自动记录时间。将仅标记为完成。`);
|
||
stepToComplete.finished = true;
|
||
} else {
|
||
// 保存步骤完成时间
|
||
const completionTime = await StepService.saveStepCompletionTime(
|
||
posTable, selectedRecordId, stepToComplete, isSubStep
|
||
);
|
||
Toast.success(`步骤 "${stepToComplete.name}" 时间已记录`);
|
||
|
||
// 如果是主步骤完成，更新后续步骤的开始时间
|
||
if (!isSubStep && completionTime) {
|
||
await StepService.updateSubsequentStepsStartTimes(
|
||
posTable, selectedRecordId, newSteps, stepIndex, completionTime
|
||
);
|
||
|
||
// 强制刷新步骤数据
|
||
setRefreshSteps(true);
|
||
}
|
||
}
|
||
|
||
// 处理子步骤完成的特殊逻辑
|
||
if (isSubStep) {
|
||
const parentStep = newSteps[stepIndex];
|
||
|
||
// 如果父步骤要求所有子步骤完成才标记为完成
|
||
if (parentStep.requireAllSubSteps && parentStep.parallelSteps?.every(ps => ps.finished)) {
|
||
parentStep.finished = true;
|
||
|
||
// 如果父步骤也有完成时间字段，记录完成时间
|
||
if (parentStep.actualTimeFieldId) {
|
||
try {
|
||
const completionTime = await StepService.saveStepCompletionTime(posTable, selectedRecordId, parentStep);
|
||
if (completionTime) {
|
||
// 更新父步骤后的步骤开始时间
|
||
await StepService.updateSubsequentStepsStartTimes(
|
||
posTable, selectedRecordId, newSteps, stepIndex, completionTime
|
||
);
|
||
|
||
// 强制刷新步骤数据
|
||
setRefreshSteps(true);
|
||
}
|
||
} catch (e) {
|
||
console.error("Error saving parent step completion time:", e);
|
||
}
|
||
} else {
|
||
// 如果没有完成时间字段，也需要更新后续步骤
|
||
setRefreshSteps(true);
|
||
}
|
||
} else if (!parentStep.requireAllSubSteps && parentStep.parallelSteps?.some(ps => ps.finished)) {
|
||
// 任一子步骤完成即可推进主步骤
|
||
parentStep.finished = true;
|
||
|
||
// 如果父步骤有完成时间字段，记录完成时间
|
||
if (parentStep.actualTimeFieldId) {
|
||
try {
|
||
const completionTime = await StepService.saveStepCompletionTime(posTable, selectedRecordId, parentStep);
|
||
if (completionTime) {
|
||
// 更新父步骤后的步骤开始时间
|
||
await StepService.updateSubsequentStepsStartTimes(
|
||
posTable, selectedRecordId, newSteps, stepIndex, completionTime
|
||
);
|
||
|
||
// 强制刷新步骤数据
|
||
setRefreshSteps(true);
|
||
}
|
||
} catch (e) {
|
||
console.error("Error saving parent step completion time:", e);
|
||
}
|
||
} else {
|
||
// 如果没有完成时间字段，也需要更新后续步骤
|
||
setRefreshSteps(true);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 更新步骤状态和当前步骤
|
||
setSteps(newSteps);
|
||
const firstUnfinished = newSteps.findIndex(s => !s.finished);
|
||
setCurrentStep(firstUnfinished === -1 ? newSteps.length : firstUnfinished);
|
||
} catch (e) {
|
||
console.error("Error finishing step:", e);
|
||
Toast.error(`完成步骤 "${stepToComplete.name}" 失败`);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 确定当前并行组是否为活动组
|
||
const isActiveParallelGroup = (step: StepItem): boolean => {
|
||
// 如果当前步骤是并行组，则该并行组是活动的
|
||
if (step.parallelSteps && currentStep === steps.findIndex(s => s === step)) {
|
||
return true;
|
||
}
|
||
|
||
// 如果当前步骤是并行组中的子步骤，则其父并行组是活动的活动的
|
||
if (currentStep < steps.length && steps[currentStep].parallelSteps) {
|
||
const currentParallelStep = steps[currentStep];
|
||
// 检查当前步骤的并行组ID是否与参数步骤的并行组ID相同
|
||
return currentParallelStep.parallelGroup === step.parallelGroup;
|
||
}
|
||
|
||
return false;
|
||
};
|
||
|
||
// 判断并行组中是否有任何子步骤已完成
|
||
const isAnySubStepFinished = (step: StepItem): boolean => {
|
||
if (!step.parallelSteps) return false;
|
||
return step.parallelSteps.some(subStep => subStep.finished);
|
||
};
|
||
|
||
// 判断是否可以访问子步骤
|
||
const canAccessSubSteps = (step: StepItem): boolean => {
|
||
// 如果是当前步骤或活动并行组，当然可以访问
|
||
if (isActiveParallelGroup(step)) return true;
|
||
|
||
// 如果是已完成的并行组，也可以访问
|
||
if (step.finished) return true;
|
||
|
||
// 如果并行组中已有任何子步骤完成，也可以访问
|
||
if (isAnySubStepFinished(step)) return true;
|
||
|
||
// 如果并行组的前置步骤（主步骤）已完成，也可以访问
|
||
const stepIndex = steps.findIndex(s => s === step);
|
||
if (stepIndex > 0) {
|
||
// 查找上一个主步骤
|
||
let previousMainStepIndex = stepIndex - 1;
|
||
while (previousMainStepIndex >= 0 && !steps[previousMainStepIndex].isMainStep) {
|
||
previousMainStepIndex--;
|
||
}
|
||
|
||
// 如果找到了上一个主步骤且它已完成
|
||
if (previousMainStepIndex >= 0 && steps[previousMainStepIndex].finished) {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
return false;
|
||
};
|
||
|
||
// 渲染加载状态
|
||
if (processConfigLoading) {
|
||
return (
|
||
<div className="app-container" style={{ padding: 24, minWidth: 410 }}>
|
||
<Typography.Title heading={4}>流程进度</Typography.Title>
|
||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||
<Spin size="large" tip="加载中..." />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 渲染无流程记录提示
|
||
if (hasNoProcess && selectedRecordId) {
|
||
return (
|
||
<div className="app-container" style={{ padding: 24, minWidth: 410 }}>
|
||
<Typography.Title heading={4}>流程进度</Typography.Title>
|
||
<div style={{ marginTop: 24, textAlign: 'center' }}>
|
||
<Empty
|
||
description={
|
||
<Typography.Text style={{ fontSize: 16, color: '#4e5969' }}>
|
||
此记录没有配置流程
|
||
</Typography.Text>
|
||
}
|
||
/>
|
||
<Button
|
||
onClick={async () => { // 修改为 async 函数
|
||
setHasNoProcess(false);
|
||
await fetchAllProcessConfigs(); // 首先重新获取所有流程配置
|
||
if (selectedRecordId) {
|
||
await loadProcessSteps(selectedRecordId); // 然后使用新的配置加载步骤
|
||
}
|
||
}}
|
||
style={{ marginTop: 20 }}
|
||
loading={processConfigLoading || loading} // 当任一加载进行中时显示loading
|
||
>
|
||
刷新重试
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 渲染切换记录时的加载状态
|
||
if (isChangingRecord) {
|
||
return (
|
||
<div className="app-container" style={{ padding: 24, minWidth: 410 }}>
|
||
<Typography.Title heading={4}>流程进度</Typography.Title>
|
||
<div style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
height: '50vh',
|
||
backgroundColor: '#fafafa',
|
||
borderRadius: 8,
|
||
border: '1px solid #e5e6eb'
|
||
}}>
|
||
<Spin
|
||
size="large"
|
||
style={{ marginBottom: 20 }}
|
||
/>
|
||
<Typography.Title
|
||
heading={5}
|
||
style={{
|
||
fontSize: 18,
|
||
fontWeight: 500,
|
||
color: '#4e5969',
|
||
textAlign: 'center'
|
||
}}
|
||
>
|
||
正在加载流程数据...
|
||
</Typography.Title>
|
||
<Typography.Text
|
||
style={{
|
||
marginTop: 8,
|
||
color: '#86909c',
|
||
fontSize: 14
|
||
}}
|
||
>
|
||
请稍候，系统正在为您获取当前记录的流程信息
|
||
</Typography.Text>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 渲染主界面
|
||
return (
|
||
<div className="app-container" style={{ padding: 24, minWidth: 410 }}>
|
||
<Typography.Title heading={4}>流程进度</Typography.Title>
|
||
<Steps direction="vertical" type="basic" current={currentStep} style={{ margin: '28px 0' }}>
|
||
{steps.map((step, idx) => (
|
||
<Steps.Step
|
||
key={step.name}
|
||
title={step.name}
|
||
status={step.finished ? 'finish' : idx === currentStep ? 'process' : 'wait'}
|
||
description={
|
||
<StepCard
|
||
step={step}
|
||
idx={idx}
|
||
currentStep={currentStep}
|
||
loading={loading}
|
||
onFinishStep={handleFinishStep}
|
||
formatTimestamp={formatTimestamp}
|
||
isCurrentStep={idx === currentStep}
|
||
isActiveParallelGroup={isActiveParallelGroup(step)}
|
||
isAnySubStepFinished={isAnySubStepFinished(step)}
|
||
canAccessSubSteps={canAccessSubSteps(step)}
|
||
/>
|
||
}
|
||
/>
|
||
))}
|
||
</Steps>
|
||
</div>
|
||
);
|
||
}
|