플로우 분기처리 구현
This commit is contained in:
parent
de9491aa29
commit
7d8abc0449
|
|
@ -56,7 +56,7 @@ import todoRoutes from "./routes/todoRoutes"; // To-Do 관리
|
|||
import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
|
||||
import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
|
||||
import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 야드 관리 3D
|
||||
import materialRoutes from "./routes/materialRoutes"; // 자재 관리
|
||||
//import materialRoutes from "./routes/materialRoutes"; // 자재 관리
|
||||
import flowRoutes from "./routes/flowRoutes"; // 플로우 관리
|
||||
import { BatchSchedulerService } from "./services/batchSchedulerService";
|
||||
// import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
|
||||
|
|
@ -208,7 +208,7 @@ app.use("/api/todos", todoRoutes); // To-Do 관리
|
|||
app.use("/api/bookings", bookingRoutes); // 예약 요청 관리
|
||||
app.use("/api/map-data", mapDataRoutes); // 지도 데이터 조회
|
||||
app.use("/api/yard-layouts", yardLayoutRoutes); // 야드 관리 3D
|
||||
app.use("/api/materials", materialRoutes); // 자재 관리
|
||||
// app.use("/api/materials", materialRoutes); // 자재 관리 (임시 주석)
|
||||
app.use("/api/flow", flowRoutes); // 플로우 관리
|
||||
// app.use("/api/collections", collectionRoutes); // 임시 주석
|
||||
// app.use("/api/batch", batchRoutes); // 임시 주석
|
||||
|
|
|
|||
|
|
@ -573,28 +573,46 @@ export class FlowController {
|
|||
*/
|
||||
moveBatchData = async (req: Request, res: Response): Promise<void> => {
|
||||
try {
|
||||
const { flowId, recordIds, toStepId, note } = req.body;
|
||||
const { flowId, fromStepId, toStepId, dataIds } = req.body;
|
||||
const userId = (req as any).user?.userId || "system";
|
||||
|
||||
if (!flowId || !recordIds || !Array.isArray(recordIds) || !toStepId) {
|
||||
if (
|
||||
!flowId ||
|
||||
!fromStepId ||
|
||||
!toStepId ||
|
||||
!dataIds ||
|
||||
!Array.isArray(dataIds)
|
||||
) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
message: "flowId, recordIds (array), and toStepId are required",
|
||||
message:
|
||||
"flowId, fromStepId, toStepId, and dataIds (array) are required",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await this.flowDataMoveService.moveBatchData(
|
||||
const result = await this.flowDataMoveService.moveBatchData(
|
||||
flowId,
|
||||
recordIds,
|
||||
fromStepId,
|
||||
toStepId,
|
||||
userId,
|
||||
note
|
||||
dataIds,
|
||||
userId
|
||||
);
|
||||
|
||||
const successCount = result.results.filter((r) => r.success).length;
|
||||
const failureCount = result.results.filter((r) => !r.success).length;
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
message: `${recordIds.length} records moved successfully`,
|
||||
success: result.success,
|
||||
message: result.success
|
||||
? `${successCount}건의 데이터를 성공적으로 이동했습니다`
|
||||
: `${successCount}건 성공, ${failureCount}건 실패`,
|
||||
data: {
|
||||
successCount,
|
||||
failureCount,
|
||||
total: dataIds.length,
|
||||
},
|
||||
results: result.results,
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error("Error moving batch data:", error);
|
||||
|
|
|
|||
|
|
@ -33,12 +33,14 @@ export class FlowConditionParser {
|
|||
|
||||
switch (condition.operator) {
|
||||
case "equals":
|
||||
case "=":
|
||||
conditions.push(`${column} = $${paramIndex}`);
|
||||
params.push(condition.value);
|
||||
paramIndex++;
|
||||
break;
|
||||
|
||||
case "not_equals":
|
||||
case "!=":
|
||||
conditions.push(`${column} != $${paramIndex}`);
|
||||
params.push(condition.value);
|
||||
paramIndex++;
|
||||
|
|
@ -65,24 +67,28 @@ export class FlowConditionParser {
|
|||
break;
|
||||
|
||||
case "greater_than":
|
||||
case ">":
|
||||
conditions.push(`${column} > $${paramIndex}`);
|
||||
params.push(condition.value);
|
||||
paramIndex++;
|
||||
break;
|
||||
|
||||
case "less_than":
|
||||
case "<":
|
||||
conditions.push(`${column} < $${paramIndex}`);
|
||||
params.push(condition.value);
|
||||
paramIndex++;
|
||||
break;
|
||||
|
||||
case "greater_than_or_equal":
|
||||
case ">=":
|
||||
conditions.push(`${column} >= $${paramIndex}`);
|
||||
params.push(condition.value);
|
||||
paramIndex++;
|
||||
break;
|
||||
|
||||
case "less_than_or_equal":
|
||||
case "<=":
|
||||
conditions.push(`${column} <= $${paramIndex}`);
|
||||
params.push(condition.value);
|
||||
paramIndex++;
|
||||
|
|
@ -165,13 +171,19 @@ export class FlowConditionParser {
|
|||
|
||||
const validOperators = [
|
||||
"equals",
|
||||
"=",
|
||||
"not_equals",
|
||||
"!=",
|
||||
"in",
|
||||
"not_in",
|
||||
"greater_than",
|
||||
">",
|
||||
"less_than",
|
||||
"<",
|
||||
"greater_than_or_equal",
|
||||
">=",
|
||||
"less_than_or_equal",
|
||||
"<=",
|
||||
"is_null",
|
||||
"is_not_null",
|
||||
"like",
|
||||
|
|
|
|||
|
|
@ -1,118 +1,360 @@
|
|||
/**
|
||||
* 플로우 데이터 이동 서비스
|
||||
* 데이터의 플로우 단계 이동 및 오딧 로그 관리
|
||||
* 플로우 데이터 이동 서비스 (하이브리드 방식 지원)
|
||||
* - 상태 변경 방식: 같은 테이블 내에서 상태 컬럼 업데이트
|
||||
* - 테이블 이동 방식: 다른 테이블로 데이터 복사 및 매핑
|
||||
* - 하이브리드 방식: 두 가지 모두 수행
|
||||
*/
|
||||
|
||||
import db from "../database/db";
|
||||
import { FlowAuditLog } from "../types/flow";
|
||||
import { FlowDefinitionService } from "./flowDefinitionService";
|
||||
import { FlowStepService } from "./flowStepService";
|
||||
|
||||
export class FlowDataMoveService {
|
||||
private flowDefinitionService: FlowDefinitionService;
|
||||
private flowStepService: FlowStepService;
|
||||
|
||||
constructor() {
|
||||
this.flowDefinitionService = new FlowDefinitionService();
|
||||
this.flowStepService = new FlowStepService();
|
||||
}
|
||||
|
||||
/**
|
||||
* 데이터를 다음 플로우 단계로 이동
|
||||
* 데이터를 다음 플로우 단계로 이동 (하이브리드 지원)
|
||||
*/
|
||||
async moveDataToStep(
|
||||
flowId: number,
|
||||
recordId: string,
|
||||
fromStepId: number,
|
||||
toStepId: number,
|
||||
userId: string,
|
||||
note?: string
|
||||
): Promise<void> {
|
||||
await db.transaction(async (client) => {
|
||||
// 1. 플로우 정의 조회
|
||||
const flowDef = await this.flowDefinitionService.findById(flowId);
|
||||
if (!flowDef) {
|
||||
throw new Error(`Flow definition not found: ${flowId}`);
|
||||
}
|
||||
dataId: any,
|
||||
userId: string = "system",
|
||||
additionalData?: Record<string, any>
|
||||
): Promise<{ success: boolean; targetDataId?: any; message?: string }> {
|
||||
return await db.transaction(async (client) => {
|
||||
try {
|
||||
// 1. 단계 정보 조회
|
||||
const fromStep = await this.flowStepService.findById(fromStepId);
|
||||
const toStep = await this.flowStepService.findById(toStepId);
|
||||
|
||||
// 2. 현재 상태 조회
|
||||
const currentStatusQuery = `
|
||||
SELECT current_step_id, table_name
|
||||
FROM flow_data_status
|
||||
WHERE flow_definition_id = $1 AND record_id = $2
|
||||
`;
|
||||
const currentStatusResult = await client.query(currentStatusQuery, [
|
||||
flowId,
|
||||
recordId,
|
||||
]);
|
||||
const currentStatus =
|
||||
currentStatusResult.rows.length > 0
|
||||
? {
|
||||
currentStepId: currentStatusResult.rows[0].current_step_id,
|
||||
tableName: currentStatusResult.rows[0].table_name,
|
||||
}
|
||||
: null;
|
||||
const fromStepId = currentStatus?.currentStepId || null;
|
||||
if (!fromStep || !toStep) {
|
||||
throw new Error("유효하지 않은 단계입니다");
|
||||
}
|
||||
|
||||
// 3. flow_data_status 업데이트 또는 삽입
|
||||
if (currentStatus) {
|
||||
await client.query(
|
||||
`
|
||||
UPDATE flow_data_status
|
||||
SET current_step_id = $1, updated_by = $2, updated_at = NOW()
|
||||
WHERE flow_definition_id = $3 AND record_id = $4
|
||||
`,
|
||||
[toStepId, userId, flowId, recordId]
|
||||
);
|
||||
} else {
|
||||
await client.query(
|
||||
`
|
||||
INSERT INTO flow_data_status
|
||||
(flow_definition_id, table_name, record_id, current_step_id, updated_by)
|
||||
VALUES ($1, $2, $3, $4, $5)
|
||||
`,
|
||||
[flowId, flowDef.tableName, recordId, toStepId, userId]
|
||||
);
|
||||
}
|
||||
let targetDataId = dataId;
|
||||
let sourceTable = fromStep.tableName;
|
||||
let targetTable = toStep.tableName || fromStep.tableName;
|
||||
|
||||
// 4. 오딧 로그 기록
|
||||
await client.query(
|
||||
`
|
||||
INSERT INTO flow_audit_log
|
||||
(flow_definition_id, table_name, record_id, from_step_id, to_step_id, changed_by, note)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)
|
||||
`,
|
||||
[
|
||||
// 2. 이동 방식에 따라 처리
|
||||
switch (toStep.moveType || "status") {
|
||||
case "status":
|
||||
// 상태 변경 방식
|
||||
await this.moveByStatusChange(
|
||||
client,
|
||||
fromStep,
|
||||
toStep,
|
||||
dataId,
|
||||
additionalData
|
||||
);
|
||||
break;
|
||||
|
||||
case "table":
|
||||
// 테이블 이동 방식
|
||||
targetDataId = await this.moveByTableTransfer(
|
||||
client,
|
||||
fromStep,
|
||||
toStep,
|
||||
dataId,
|
||||
additionalData
|
||||
);
|
||||
targetTable = toStep.targetTable || toStep.tableName;
|
||||
break;
|
||||
|
||||
case "both":
|
||||
// 하이브리드 방식: 둘 다 수행
|
||||
await this.moveByStatusChange(
|
||||
client,
|
||||
fromStep,
|
||||
toStep,
|
||||
dataId,
|
||||
additionalData
|
||||
);
|
||||
targetDataId = await this.moveByTableTransfer(
|
||||
client,
|
||||
fromStep,
|
||||
toStep,
|
||||
dataId,
|
||||
additionalData
|
||||
);
|
||||
targetTable = toStep.targetTable || toStep.tableName;
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`지원하지 않는 이동 방식: ${toStep.moveType}`);
|
||||
}
|
||||
|
||||
// 3. 매핑 테이블 업데이트 (테이블 이동 방식일 때)
|
||||
if (toStep.moveType === "table" || toStep.moveType === "both") {
|
||||
await this.updateDataMapping(
|
||||
client,
|
||||
flowId,
|
||||
toStepId,
|
||||
fromStepId,
|
||||
dataId,
|
||||
targetDataId
|
||||
);
|
||||
}
|
||||
|
||||
// 4. 감사 로그 기록
|
||||
await this.logDataMove(client, {
|
||||
flowId,
|
||||
flowDef.tableName,
|
||||
recordId,
|
||||
fromStepId,
|
||||
toStepId,
|
||||
moveType: toStep.moveType || "status",
|
||||
sourceTable,
|
||||
targetTable,
|
||||
sourceDataId: String(dataId),
|
||||
targetDataId: String(targetDataId),
|
||||
statusFrom: fromStep.statusValue,
|
||||
statusTo: toStep.statusValue,
|
||||
userId,
|
||||
note || null,
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
targetDataId,
|
||||
message: "데이터가 성공적으로 이동되었습니다",
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error("데이터 이동 실패:", error);
|
||||
throw error;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 상태 변경 방식으로 데이터 이동
|
||||
*/
|
||||
private async moveByStatusChange(
|
||||
client: any,
|
||||
fromStep: any,
|
||||
toStep: any,
|
||||
dataId: any,
|
||||
additionalData?: Record<string, any>
|
||||
): Promise<void> {
|
||||
const statusColumn = toStep.statusColumn || "flow_status";
|
||||
const tableName = fromStep.tableName;
|
||||
|
||||
// 추가 필드 업데이트 준비
|
||||
const updates: string[] = [`${statusColumn} = $2`, `updated_at = NOW()`];
|
||||
const values: any[] = [dataId, toStep.statusValue];
|
||||
let paramIndex = 3;
|
||||
|
||||
// 추가 데이터가 있으면 함께 업데이트
|
||||
if (additionalData) {
|
||||
for (const [key, value] of Object.entries(additionalData)) {
|
||||
updates.push(`${key} = $${paramIndex}`);
|
||||
values.push(value);
|
||||
paramIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
const updateQuery = `
|
||||
UPDATE ${tableName}
|
||||
SET ${updates.join(", ")}
|
||||
WHERE id = $1
|
||||
`;
|
||||
|
||||
const result = await client.query(updateQuery, values);
|
||||
|
||||
if (result.rowCount === 0) {
|
||||
throw new Error(`데이터를 찾을 수 없습니다: ${dataId}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 테이블 이동 방식으로 데이터 이동
|
||||
*/
|
||||
private async moveByTableTransfer(
|
||||
client: any,
|
||||
fromStep: any,
|
||||
toStep: any,
|
||||
dataId: any,
|
||||
additionalData?: Record<string, any>
|
||||
): Promise<any> {
|
||||
const sourceTable = fromStep.tableName;
|
||||
const targetTable = toStep.targetTable || toStep.tableName;
|
||||
const fieldMappings = toStep.fieldMappings || {};
|
||||
|
||||
// 1. 소스 데이터 조회
|
||||
const selectQuery = `SELECT * FROM ${sourceTable} WHERE id = $1`;
|
||||
const sourceResult = await client.query(selectQuery, [dataId]);
|
||||
|
||||
if (sourceResult.length === 0) {
|
||||
throw new Error(`소스 데이터를 찾을 수 없습니다: ${dataId}`);
|
||||
}
|
||||
|
||||
const sourceData = sourceResult[0];
|
||||
|
||||
// 2. 필드 매핑 적용
|
||||
const mappedData: Record<string, any> = {};
|
||||
|
||||
// 매핑 정의가 있으면 적용
|
||||
for (const [sourceField, targetField] of Object.entries(fieldMappings)) {
|
||||
if (sourceData[sourceField] !== undefined) {
|
||||
mappedData[targetField as string] = sourceData[sourceField];
|
||||
}
|
||||
}
|
||||
|
||||
// 추가 데이터 병합
|
||||
if (additionalData) {
|
||||
Object.assign(mappedData, additionalData);
|
||||
}
|
||||
|
||||
// 3. 타겟 테이블에 데이터 삽입
|
||||
if (Object.keys(mappedData).length === 0) {
|
||||
throw new Error("매핑할 데이터가 없습니다");
|
||||
}
|
||||
|
||||
const columns = Object.keys(mappedData);
|
||||
const values = Object.values(mappedData);
|
||||
const placeholders = columns.map((_, i) => `$${i + 1}`).join(", ");
|
||||
|
||||
const insertQuery = `
|
||||
INSERT INTO ${targetTable} (${columns.join(", ")})
|
||||
VALUES (${placeholders})
|
||||
RETURNING id
|
||||
`;
|
||||
|
||||
const insertResult = await client.query(insertQuery, values);
|
||||
return insertResult[0].id;
|
||||
}
|
||||
|
||||
/**
|
||||
* 데이터 매핑 테이블 업데이트
|
||||
*/
|
||||
private async updateDataMapping(
|
||||
client: any,
|
||||
flowId: number,
|
||||
currentStepId: number,
|
||||
prevStepId: number,
|
||||
sourceDataId: any,
|
||||
targetDataId: any
|
||||
): Promise<void> {
|
||||
// 기존 매핑 조회
|
||||
const selectQuery = `
|
||||
SELECT id, step_data_map
|
||||
FROM flow_data_mapping
|
||||
WHERE flow_definition_id = $1
|
||||
AND step_data_map->$2 = $3
|
||||
`;
|
||||
const mappingResult = await client.query(selectQuery, [
|
||||
flowId,
|
||||
String(prevStepId),
|
||||
JSON.stringify(String(sourceDataId)),
|
||||
]);
|
||||
|
||||
const stepDataMap: Record<string, string> =
|
||||
mappingResult.length > 0 ? mappingResult[0].step_data_map : {};
|
||||
|
||||
// 새 단계 데이터 추가
|
||||
stepDataMap[String(currentStepId)] = String(targetDataId);
|
||||
|
||||
if (mappingResult.length > 0) {
|
||||
// 기존 매핑 업데이트
|
||||
const updateQuery = `
|
||||
UPDATE flow_data_mapping
|
||||
SET current_step_id = $1,
|
||||
step_data_map = $2,
|
||||
updated_at = NOW()
|
||||
WHERE id = $3
|
||||
`;
|
||||
await client.query(updateQuery, [
|
||||
currentStepId,
|
||||
JSON.stringify(stepDataMap),
|
||||
mappingResult[0].id,
|
||||
]);
|
||||
} else {
|
||||
// 새 매핑 생성
|
||||
const insertQuery = `
|
||||
INSERT INTO flow_data_mapping
|
||||
(flow_definition_id, current_step_id, step_data_map)
|
||||
VALUES ($1, $2, $3)
|
||||
`;
|
||||
await client.query(insertQuery, [
|
||||
flowId,
|
||||
currentStepId,
|
||||
JSON.stringify(stepDataMap),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 감사 로그 기록
|
||||
*/
|
||||
private async logDataMove(client: any, params: any): Promise<void> {
|
||||
const query = `
|
||||
INSERT INTO flow_audit_log (
|
||||
flow_definition_id, from_step_id, to_step_id,
|
||||
move_type, source_table, target_table,
|
||||
source_data_id, target_data_id,
|
||||
status_from, status_to,
|
||||
changed_by, note
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
|
||||
`;
|
||||
|
||||
await client.query(query, [
|
||||
params.flowId,
|
||||
params.fromStepId,
|
||||
params.toStepId,
|
||||
params.moveType,
|
||||
params.sourceTable,
|
||||
params.targetTable,
|
||||
params.sourceDataId,
|
||||
params.targetDataId,
|
||||
params.statusFrom,
|
||||
params.statusTo,
|
||||
params.userId,
|
||||
params.note || null,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 여러 데이터를 동시에 다음 단계로 이동
|
||||
*/
|
||||
async moveBatchData(
|
||||
flowId: number,
|
||||
recordIds: string[],
|
||||
fromStepId: number,
|
||||
toStepId: number,
|
||||
userId: string,
|
||||
note?: string
|
||||
): Promise<void> {
|
||||
for (const recordId of recordIds) {
|
||||
await this.moveDataToStep(flowId, recordId, toStepId, userId, note);
|
||||
dataIds: any[],
|
||||
userId: string = "system"
|
||||
): Promise<{ success: boolean; results: any[] }> {
|
||||
const results = [];
|
||||
|
||||
for (const dataId of dataIds) {
|
||||
try {
|
||||
const result = await this.moveDataToStep(
|
||||
flowId,
|
||||
fromStepId,
|
||||
toStepId,
|
||||
dataId,
|
||||
userId
|
||||
);
|
||||
results.push({ dataId, ...result });
|
||||
} catch (error: any) {
|
||||
results.push({ dataId, success: false, message: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: results.every((r) => r.success),
|
||||
results,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 데이터의 플로우 이력 조회
|
||||
*/
|
||||
async getAuditLogs(
|
||||
flowId: number,
|
||||
recordId: string
|
||||
): Promise<FlowAuditLog[]> {
|
||||
async getAuditLogs(flowId: number, dataId: string): Promise<FlowAuditLog[]> {
|
||||
const query = `
|
||||
SELECT
|
||||
fal.*,
|
||||
|
|
@ -121,17 +363,18 @@ export class FlowDataMoveService {
|
|||
FROM flow_audit_log fal
|
||||
LEFT JOIN flow_step fs_from ON fal.from_step_id = fs_from.id
|
||||
LEFT JOIN flow_step fs_to ON fal.to_step_id = fs_to.id
|
||||
WHERE fal.flow_definition_id = $1 AND fal.record_id = $2
|
||||
WHERE fal.flow_definition_id = $1
|
||||
AND (fal.source_data_id = $2 OR fal.target_data_id = $2)
|
||||
ORDER BY fal.changed_at DESC
|
||||
`;
|
||||
|
||||
const result = await db.query(query, [flowId, recordId]);
|
||||
const result = await db.query(query, [flowId, dataId]);
|
||||
|
||||
return result.map((row) => ({
|
||||
id: row.id,
|
||||
flowDefinitionId: row.flow_definition_id,
|
||||
tableName: row.table_name,
|
||||
recordId: row.record_id,
|
||||
tableName: row.table_name || row.source_table,
|
||||
recordId: row.record_id || row.source_data_id,
|
||||
fromStepId: row.from_step_id,
|
||||
toStepId: row.to_step_id,
|
||||
changedBy: row.changed_by,
|
||||
|
|
@ -139,6 +382,13 @@ export class FlowDataMoveService {
|
|||
note: row.note,
|
||||
fromStepName: row.from_step_name,
|
||||
toStepName: row.to_step_name,
|
||||
moveType: row.move_type,
|
||||
sourceTable: row.source_table,
|
||||
targetTable: row.target_table,
|
||||
sourceDataId: row.source_data_id,
|
||||
targetDataId: row.target_data_id,
|
||||
statusFrom: row.status_from,
|
||||
statusTo: row.status_to,
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -167,8 +417,8 @@ export class FlowDataMoveService {
|
|||
return result.map((row) => ({
|
||||
id: row.id,
|
||||
flowDefinitionId: row.flow_definition_id,
|
||||
tableName: row.table_name,
|
||||
recordId: row.record_id,
|
||||
tableName: row.table_name || row.source_table,
|
||||
recordId: row.record_id || row.source_data_id,
|
||||
fromStepId: row.from_step_id,
|
||||
toStepId: row.to_step_id,
|
||||
changedBy: row.changed_by,
|
||||
|
|
@ -176,6 +426,13 @@ export class FlowDataMoveService {
|
|||
note: row.note,
|
||||
fromStepName: row.from_step_name,
|
||||
toStepName: row.to_step_name,
|
||||
moveType: row.move_type,
|
||||
sourceTable: row.source_table,
|
||||
targetTable: row.target_table,
|
||||
sourceDataId: row.source_data_id,
|
||||
targetDataId: row.target_data_id,
|
||||
statusFrom: row.status_from,
|
||||
statusTo: row.status_to,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,6 +195,13 @@ export class FlowStepService {
|
|||
color: row.color,
|
||||
positionX: row.position_x,
|
||||
positionY: row.position_y,
|
||||
// 하이브리드 플로우 지원 필드
|
||||
moveType: row.move_type || undefined,
|
||||
statusColumn: row.status_column || undefined,
|
||||
statusValue: row.status_value || undefined,
|
||||
targetTable: row.target_table || undefined,
|
||||
fieldMappings: row.field_mappings || undefined,
|
||||
requiredFields: row.required_fields || undefined,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,13 +31,19 @@ export interface UpdateFlowDefinitionRequest {
|
|||
// 조건 연산자
|
||||
export type ConditionOperator =
|
||||
| "equals"
|
||||
| "="
|
||||
| "not_equals"
|
||||
| "!="
|
||||
| "in"
|
||||
| "not_in"
|
||||
| "greater_than"
|
||||
| ">"
|
||||
| "less_than"
|
||||
| "<"
|
||||
| "greater_than_or_equal"
|
||||
| ">="
|
||||
| "less_than_or_equal"
|
||||
| "<="
|
||||
| "is_null"
|
||||
| "is_not_null"
|
||||
| "like"
|
||||
|
|
@ -67,6 +73,13 @@ export interface FlowStep {
|
|||
color: string;
|
||||
positionX: number;
|
||||
positionY: number;
|
||||
// 하이브리드 플로우 지원 필드
|
||||
moveType?: "status" | "table" | "both"; // 데이터 이동 방식
|
||||
statusColumn?: string; // 상태 컬럼명 (상태 변경 방식)
|
||||
statusValue?: string; // 이 단계의 상태값
|
||||
targetTable?: string; // 타겟 테이블명 (테이블 이동 방식)
|
||||
fieldMappings?: Record<string, string>; // 필드 매핑 정보
|
||||
requiredFields?: string[]; // 필수 입력 필드
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
|
@ -81,6 +94,13 @@ export interface CreateFlowStepRequest {
|
|||
color?: string;
|
||||
positionX?: number;
|
||||
positionY?: number;
|
||||
// 하이브리드 플로우 지원 필드
|
||||
moveType?: "status" | "table" | "both";
|
||||
statusColumn?: string;
|
||||
statusValue?: string;
|
||||
targetTable?: string;
|
||||
fieldMappings?: Record<string, string>;
|
||||
requiredFields?: string[];
|
||||
}
|
||||
|
||||
// 플로우 단계 수정 요청
|
||||
|
|
@ -92,6 +112,13 @@ export interface UpdateFlowStepRequest {
|
|||
color?: string;
|
||||
positionX?: number;
|
||||
positionY?: number;
|
||||
// 하이브리드 플로우 지원 필드
|
||||
moveType?: "status" | "table" | "both";
|
||||
statusColumn?: string;
|
||||
statusValue?: string;
|
||||
targetTable?: string;
|
||||
fieldMappings?: Record<string, string>;
|
||||
requiredFields?: string[];
|
||||
}
|
||||
|
||||
// 플로우 단계 연결
|
||||
|
|
@ -134,6 +161,14 @@ export interface FlowAuditLog {
|
|||
changedBy?: string;
|
||||
changedAt: Date;
|
||||
note?: string;
|
||||
// 하이브리드 플로우 지원 필드
|
||||
moveType?: "status" | "table" | "both";
|
||||
sourceTable?: string;
|
||||
targetTable?: string;
|
||||
sourceDataId?: string;
|
||||
targetDataId?: string;
|
||||
statusFrom?: string;
|
||||
statusTo?: string;
|
||||
// 조인 필드
|
||||
fromStepName?: string;
|
||||
toStepName?: string;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,302 @@
|
|||
# 플로우 데이터 구조 설계 가이드
|
||||
|
||||
## 개요
|
||||
|
||||
플로우 관리 시스템에서 각 단계별로 테이블 구조가 다른 경우의 데이터 관리 방법
|
||||
|
||||
## 추천 아키텍처: 하이브리드 접근
|
||||
|
||||
### 1. 메인 데이터 테이블 (상태 기반)
|
||||
|
||||
각 플로우의 핵심 데이터를 담는 메인 테이블에 `flow_status` 컬럼을 추가합니다.
|
||||
|
||||
```sql
|
||||
-- 예시: 제품 수명주기 관리
|
||||
CREATE TABLE product_lifecycle (
|
||||
id SERIAL PRIMARY KEY,
|
||||
product_code VARCHAR(50) UNIQUE NOT NULL,
|
||||
product_name VARCHAR(200) NOT NULL,
|
||||
flow_status VARCHAR(50) NOT NULL, -- 'purchase', 'installation', 'disposal'
|
||||
|
||||
-- 공통 필드
|
||||
created_at TIMESTAMP DEFAULT NOW(),
|
||||
updated_at TIMESTAMP DEFAULT NOW(),
|
||||
created_by VARCHAR(50),
|
||||
|
||||
-- 단계별 핵심 정보 (NULL 허용)
|
||||
purchase_date DATE,
|
||||
purchase_price DECIMAL(15,2),
|
||||
installation_date DATE,
|
||||
installation_location VARCHAR(200),
|
||||
disposal_date DATE,
|
||||
disposal_method VARCHAR(100),
|
||||
|
||||
-- 인덱스
|
||||
INDEX idx_flow_status (flow_status),
|
||||
INDEX idx_product_code (product_code)
|
||||
);
|
||||
```
|
||||
|
||||
### 2. 단계별 상세 정보 테이블 (선택적)
|
||||
|
||||
각 단계에서 필요한 상세 정보는 별도 테이블에 저장합니다.
|
||||
|
||||
```sql
|
||||
-- 구매 단계 상세 정보
|
||||
CREATE TABLE product_purchase_detail (
|
||||
id SERIAL PRIMARY KEY,
|
||||
product_id INTEGER REFERENCES product_lifecycle(id),
|
||||
vendor_name VARCHAR(200),
|
||||
vendor_contact VARCHAR(100),
|
||||
purchase_order_no VARCHAR(50),
|
||||
warranty_period INTEGER, -- 월 단위
|
||||
warranty_end_date DATE,
|
||||
specifications JSONB, -- 유연한 사양 정보
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- 설치 단계 상세 정보
|
||||
CREATE TABLE product_installation_detail (
|
||||
id SERIAL PRIMARY KEY,
|
||||
product_id INTEGER REFERENCES product_lifecycle(id),
|
||||
technician_name VARCHAR(100),
|
||||
installation_address TEXT,
|
||||
installation_notes TEXT,
|
||||
installation_photos JSONB, -- [{url, description}]
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- 폐기 단계 상세 정보
|
||||
CREATE TABLE product_disposal_detail (
|
||||
id SERIAL PRIMARY KEY,
|
||||
product_id INTEGER REFERENCES product_lifecycle(id),
|
||||
disposal_company VARCHAR(200),
|
||||
disposal_certificate_no VARCHAR(100),
|
||||
environmental_compliance BOOLEAN,
|
||||
disposal_cost DECIMAL(15,2),
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
```
|
||||
|
||||
### 3. 플로우 단계 설정 테이블 수정
|
||||
|
||||
`flow_step` 테이블에 단계별 필드 매핑 정보를 추가합니다.
|
||||
|
||||
```sql
|
||||
ALTER TABLE flow_step
|
||||
ADD COLUMN status_value VARCHAR(50), -- 이 단계의 상태값
|
||||
ADD COLUMN required_fields JSONB, -- 필수 입력 필드 목록
|
||||
ADD COLUMN detail_table_name VARCHAR(200), -- 상세 정보 테이블명 (선택적)
|
||||
ADD COLUMN field_mappings JSONB; -- 메인 테이블과 상세 테이블 필드 매핑
|
||||
|
||||
-- 예시 데이터
|
||||
INSERT INTO flow_step (flow_definition_id, step_name, step_order, table_name, status_value, required_fields, detail_table_name) VALUES
|
||||
(1, '구매', 1, 'product_lifecycle', 'purchase',
|
||||
'["product_code", "product_name", "purchase_date", "purchase_price"]'::jsonb,
|
||||
'product_purchase_detail'),
|
||||
(1, '설치', 2, 'product_lifecycle', 'installation',
|
||||
'["installation_date", "installation_location"]'::jsonb,
|
||||
'product_installation_detail'),
|
||||
(1, '폐기', 3, 'product_lifecycle', 'disposal',
|
||||
'["disposal_date", "disposal_method"]'::jsonb,
|
||||
'product_disposal_detail');
|
||||
```
|
||||
|
||||
## 데이터 이동 로직
|
||||
|
||||
### 백엔드 서비스 수정
|
||||
|
||||
```typescript
|
||||
// backend-node/src/services/flowDataMoveService.ts
|
||||
|
||||
export class FlowDataMoveService {
|
||||
/**
|
||||
* 다음 단계로 데이터 이동
|
||||
*/
|
||||
async moveToNextStep(
|
||||
flowId: number,
|
||||
currentStepId: number,
|
||||
nextStepId: number,
|
||||
dataId: any
|
||||
): Promise<boolean> {
|
||||
const client = await db.getClient();
|
||||
|
||||
try {
|
||||
await client.query("BEGIN");
|
||||
|
||||
// 1. 현재 단계와 다음 단계 정보 조회
|
||||
const currentStep = await this.getStepInfo(currentStepId);
|
||||
const nextStep = await this.getStepInfo(nextStepId);
|
||||
|
||||
if (!currentStep || !nextStep) {
|
||||
throw new Error("유효하지 않은 단계입니다");
|
||||
}
|
||||
|
||||
// 2. 메인 테이블의 상태 업데이트
|
||||
const updateQuery = `
|
||||
UPDATE ${currentStep.table_name}
|
||||
SET flow_status = $1,
|
||||
updated_at = NOW()
|
||||
WHERE id = $2
|
||||
AND flow_status = $3
|
||||
`;
|
||||
|
||||
const result = await client.query(updateQuery, [
|
||||
nextStep.status_value,
|
||||
dataId,
|
||||
currentStep.status_value,
|
||||
]);
|
||||
|
||||
if (result.rowCount === 0) {
|
||||
throw new Error("데이터를 찾을 수 없거나 이미 이동되었습니다");
|
||||
}
|
||||
|
||||
// 3. 감사 로그 기록
|
||||
await this.logDataMove(client, {
|
||||
flowId,
|
||||
fromStepId: currentStepId,
|
||||
toStepId: nextStepId,
|
||||
dataId,
|
||||
tableName: currentStep.table_name,
|
||||
statusFrom: currentStep.status_value,
|
||||
statusTo: nextStep.status_value,
|
||||
});
|
||||
|
||||
await client.query("COMMIT");
|
||||
return true;
|
||||
} catch (error) {
|
||||
await client.query("ROLLBACK");
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
}
|
||||
|
||||
private async getStepInfo(stepId: number) {
|
||||
const query = `
|
||||
SELECT id, table_name, status_value, detail_table_name, required_fields
|
||||
FROM flow_step
|
||||
WHERE id = $1
|
||||
`;
|
||||
const result = await db.query(query, [stepId]);
|
||||
return result[0];
|
||||
}
|
||||
|
||||
private async logDataMove(client: any, params: any) {
|
||||
const query = `
|
||||
INSERT INTO flow_audit_log (
|
||||
flow_definition_id, from_step_id, to_step_id,
|
||||
data_id, table_name, status_from, status_to,
|
||||
moved_at, moved_by
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, NOW(), 'system')
|
||||
`;
|
||||
|
||||
await client.query(query, [
|
||||
params.flowId,
|
||||
params.fromStepId,
|
||||
params.toStepId,
|
||||
params.dataId,
|
||||
params.tableName,
|
||||
params.statusFrom,
|
||||
params.statusTo,
|
||||
]);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 플로우 조건 설정
|
||||
|
||||
각 단계의 조건은 `flow_status` 컬럼을 기준으로 설정합니다:
|
||||
|
||||
```json
|
||||
// 구매 단계 조건
|
||||
{
|
||||
"operator": "AND",
|
||||
"conditions": [
|
||||
{
|
||||
"column": "flow_status",
|
||||
"operator": "=",
|
||||
"value": "purchase"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 설치 단계 조건
|
||||
{
|
||||
"operator": "AND",
|
||||
"conditions": [
|
||||
{
|
||||
"column": "flow_status",
|
||||
"operator": "=",
|
||||
"value": "installation"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 프론트엔드 구현
|
||||
|
||||
### 단계별 폼 렌더링
|
||||
|
||||
각 단계에서 필요한 필드를 동적으로 렌더링합니다.
|
||||
|
||||
```typescript
|
||||
// 단계 정보에서 필수 필드 가져오기
|
||||
const requiredFields = step.required_fields; // ["purchase_date", "purchase_price"]
|
||||
|
||||
// 동적 폼 생성
|
||||
{
|
||||
requiredFields.map((fieldName) => (
|
||||
<FormField
|
||||
key={fieldName}
|
||||
name={fieldName}
|
||||
label={getFieldLabel(fieldName)}
|
||||
type={getFieldType(fieldName)}
|
||||
required={true}
|
||||
/>
|
||||
));
|
||||
}
|
||||
```
|
||||
|
||||
## 장점
|
||||
|
||||
1. **단순한 데이터 이동**: 상태값만 업데이트
|
||||
2. **유연한 구조**: 단계별 상세 정보는 별도 테이블
|
||||
3. **완벽한 이력 추적**: 감사 로그로 모든 이동 기록
|
||||
4. **쿼리 효율**: 단일 테이블 조회로 각 단계 데이터 확인
|
||||
5. **확장성**: 새로운 단계 추가 시 컬럼 추가 또는 상세 테이블 생성
|
||||
|
||||
## 마이그레이션 스크립트
|
||||
|
||||
```sql
|
||||
-- 1. 기존 테이블에 flow_status 컬럼 추가
|
||||
ALTER TABLE product_lifecycle
|
||||
ADD COLUMN flow_status VARCHAR(50) DEFAULT 'purchase';
|
||||
|
||||
-- 2. 인덱스 생성
|
||||
CREATE INDEX idx_product_lifecycle_status ON product_lifecycle(flow_status);
|
||||
|
||||
-- 3. flow_step 테이블 확장
|
||||
ALTER TABLE flow_step
|
||||
ADD COLUMN status_value VARCHAR(50),
|
||||
ADD COLUMN required_fields JSONB,
|
||||
ADD COLUMN detail_table_name VARCHAR(200);
|
||||
|
||||
-- 4. 기존 데이터 마이그레이션
|
||||
UPDATE flow_step
|
||||
SET status_value = CASE step_order
|
||||
WHEN 1 THEN 'purchase'
|
||||
WHEN 2 THEN 'installation'
|
||||
WHEN 3 THEN 'disposal'
|
||||
END
|
||||
WHERE flow_definition_id = 1;
|
||||
```
|
||||
|
||||
## 결론
|
||||
|
||||
이 하이브리드 접근 방식을 사용하면:
|
||||
|
||||
- 각 단계의 데이터는 같은 메인 테이블에서 `flow_status`로 구분
|
||||
- 단계별 추가 정보는 별도 상세 테이블에 저장 (선택적)
|
||||
- 데이터 이동은 상태값 업데이트만으로 간단하게 처리
|
||||
- 완전한 감사 로그와 이력 추적 가능
|
||||
|
|
@ -0,0 +1,381 @@
|
|||
# 플로우 하이브리드 모드 사용 가이드
|
||||
|
||||
## 개요
|
||||
|
||||
플로우 관리 시스템은 세 가지 데이터 이동 방식을 지원합니다:
|
||||
|
||||
1. **상태 변경 방식(status)**: 같은 테이블 내에서 상태 컬럼만 업데이트
|
||||
2. **테이블 이동 방식(table)**: 완전히 다른 테이블로 데이터 복사 및 이동
|
||||
3. **하이브리드 방식(both)**: 두 가지 모두 수행
|
||||
|
||||
## 1. 상태 변경 방식 (Status Mode)
|
||||
|
||||
### 사용 시나리오
|
||||
|
||||
- 같은 엔티티가 여러 단계를 거치는 경우
|
||||
- 예: 승인 프로세스 (대기 → 검토 → 승인 → 완료)
|
||||
|
||||
### 설정 방법
|
||||
|
||||
```sql
|
||||
-- 플로우 정의 생성
|
||||
INSERT INTO flow_definition (name, description, table_name, is_active)
|
||||
VALUES ('문서 승인', '문서 승인 프로세스', 'documents', true);
|
||||
|
||||
-- 단계 생성 (상태 변경 방식)
|
||||
INSERT INTO flow_step (
|
||||
flow_definition_id, step_name, step_order,
|
||||
table_name, move_type, status_column, status_value,
|
||||
condition_json
|
||||
) VALUES
|
||||
(1, '대기', 1, 'documents', 'status', 'approval_status', 'pending',
|
||||
'{"operator":"AND","conditions":[{"column":"approval_status","operator":"=","value":"pending"}]}'::jsonb),
|
||||
|
||||
(1, '검토중', 2, 'documents', 'status', 'approval_status', 'reviewing',
|
||||
'{"operator":"AND","conditions":[{"column":"approval_status","operator":"=","value":"reviewing"}]}'::jsonb),
|
||||
|
||||
(1, '승인됨', 3, 'documents', 'status', 'approval_status', 'approved',
|
||||
'{"operator":"AND","conditions":[{"column":"approval_status","operator":"=","value":"approved"}]}'::jsonb);
|
||||
```
|
||||
|
||||
### 테이블 구조
|
||||
|
||||
```sql
|
||||
CREATE TABLE documents (
|
||||
id SERIAL PRIMARY KEY,
|
||||
title VARCHAR(200),
|
||||
content TEXT,
|
||||
approval_status VARCHAR(50) DEFAULT 'pending', -- 상태 컬럼
|
||||
created_at TIMESTAMP DEFAULT NOW(),
|
||||
updated_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
```
|
||||
|
||||
### 데이터 이동
|
||||
|
||||
```typescript
|
||||
// 프론트엔드에서 호출
|
||||
await moveData(flowId, currentStepId, nextStepId, documentId);
|
||||
|
||||
// 백엔드에서 처리
|
||||
// documents 테이블의 approval_status가 'pending' → 'reviewing'으로 변경됨
|
||||
```
|
||||
|
||||
## 2. 테이블 이동 방식 (Table Mode)
|
||||
|
||||
### 사용 시나리오
|
||||
|
||||
- 완전히 다른 엔티티를 다루는 경우
|
||||
- 예: 제품 수명주기 (구매 주문 → 설치 작업 → 폐기 신청)
|
||||
|
||||
### 설정 방법
|
||||
|
||||
```sql
|
||||
-- 플로우 정의 생성
|
||||
INSERT INTO flow_definition (name, description, table_name, is_active)
|
||||
VALUES ('제품 수명주기', '구매→설치→폐기 프로세스', 'purchase_orders', true);
|
||||
|
||||
-- 단계 생성 (테이블 이동 방식)
|
||||
INSERT INTO flow_step (
|
||||
flow_definition_id, step_name, step_order,
|
||||
table_name, move_type, target_table,
|
||||
field_mappings, required_fields
|
||||
) VALUES
|
||||
(2, '구매', 1, 'purchase_orders', 'table', 'installations',
|
||||
'{"order_id":"purchase_order_id","product_name":"product_name","product_code":"product_code"}'::jsonb,
|
||||
'["product_name","purchase_date","purchase_price"]'::jsonb),
|
||||
|
||||
(2, '설치', 2, 'installations', 'table', 'disposals',
|
||||
'{"installation_id":"installation_id","product_name":"product_name","product_code":"product_code"}'::jsonb,
|
||||
'["installation_date","installation_location","technician"]'::jsonb),
|
||||
|
||||
(2, '폐기', 3, 'disposals', 'table', NULL,
|
||||
NULL,
|
||||
'["disposal_date","disposal_method","disposal_cost"]'::jsonb);
|
||||
```
|
||||
|
||||
### 테이블 구조
|
||||
|
||||
```sql
|
||||
-- 단계 1: 구매 주문 테이블
|
||||
CREATE TABLE purchase_orders (
|
||||
id SERIAL PRIMARY KEY,
|
||||
order_id VARCHAR(50) UNIQUE,
|
||||
product_name VARCHAR(200),
|
||||
product_code VARCHAR(50),
|
||||
purchase_date DATE,
|
||||
purchase_price DECIMAL(15,2),
|
||||
vendor_name VARCHAR(200),
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- 단계 2: 설치 작업 테이블
|
||||
CREATE TABLE installations (
|
||||
id SERIAL PRIMARY KEY,
|
||||
purchase_order_id VARCHAR(50), -- 매핑 필드
|
||||
product_name VARCHAR(200),
|
||||
product_code VARCHAR(50),
|
||||
installation_date DATE,
|
||||
installation_location TEXT,
|
||||
technician VARCHAR(100),
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- 단계 3: 폐기 신청 테이블
|
||||
CREATE TABLE disposals (
|
||||
id SERIAL PRIMARY KEY,
|
||||
installation_id INTEGER, -- 매핑 필드
|
||||
product_name VARCHAR(200),
|
||||
product_code VARCHAR(50),
|
||||
disposal_date DATE,
|
||||
disposal_method VARCHAR(100),
|
||||
disposal_cost DECIMAL(15,2),
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
```
|
||||
|
||||
### 데이터 이동
|
||||
|
||||
```typescript
|
||||
// 구매 → 설치 단계로 이동
|
||||
const result = await moveData(
|
||||
flowId,
|
||||
purchaseStepId,
|
||||
installationStepId,
|
||||
purchaseOrderId
|
||||
);
|
||||
|
||||
// 결과:
|
||||
// 1. purchase_orders 테이블에서 데이터 조회
|
||||
// 2. field_mappings에 따라 필드 매핑
|
||||
// 3. installations 테이블에 새 레코드 생성
|
||||
// 4. flow_data_mapping 테이블에 매핑 정보 저장
|
||||
// 5. flow_audit_log에 이동 이력 기록
|
||||
```
|
||||
|
||||
### 매핑 정보 조회
|
||||
|
||||
```sql
|
||||
-- 플로우 전체 이력 조회
|
||||
SELECT * FROM flow_data_mapping
|
||||
WHERE flow_definition_id = 2;
|
||||
|
||||
-- 결과 예시:
|
||||
-- {
|
||||
-- "current_step_id": 2,
|
||||
-- "step_data_map": {
|
||||
-- "1": "123", -- 구매 주문 ID
|
||||
-- "2": "456" -- 설치 작업 ID
|
||||
-- }
|
||||
-- }
|
||||
```
|
||||
|
||||
## 3. 하이브리드 방식 (Both Mode)
|
||||
|
||||
### 사용 시나리오
|
||||
|
||||
- 상태도 변경하면서 다른 테이블로도 이동해야 하는 경우
|
||||
- 예: 검토 완료 후 승인 테이블로 이동하면서 원본 테이블의 상태도 변경
|
||||
|
||||
### 설정 방법
|
||||
|
||||
```sql
|
||||
INSERT INTO flow_step (
|
||||
flow_definition_id, step_name, step_order,
|
||||
table_name, move_type,
|
||||
status_column, status_value, -- 상태 변경용
|
||||
target_table, field_mappings, -- 테이블 이동용
|
||||
required_fields
|
||||
) VALUES
|
||||
(3, '검토 완료', 1, 'review_queue', 'both',
|
||||
'status', 'reviewed',
|
||||
'approved_items',
|
||||
'{"item_id":"source_item_id","item_name":"name","review_score":"score"}'::jsonb,
|
||||
'["review_date","reviewer_id","review_comment"]'::jsonb);
|
||||
```
|
||||
|
||||
### 동작
|
||||
|
||||
1. **상태 변경**: review_queue 테이블의 status를 'reviewed'로 업데이트
|
||||
2. **테이블 이동**: approved_items 테이블에 새 레코드 생성
|
||||
3. **매핑 저장**: flow_data_mapping에 양쪽 ID 기록
|
||||
|
||||
## 4. 프론트엔드 구현
|
||||
|
||||
### FlowWidget에서 데이터 이동
|
||||
|
||||
```typescript
|
||||
// frontend/components/screen/widgets/FlowWidget.tsx
|
||||
|
||||
const handleMoveToNext = async () => {
|
||||
// ... 선택된 데이터 준비 ...
|
||||
|
||||
for (const data of selectedData) {
|
||||
// Primary Key 추출 (첫 번째 컬럼 또는 'id' 컬럼)
|
||||
const dataId = data.id || data[stepDataColumns[0]];
|
||||
|
||||
// API 호출
|
||||
const response = await moveData(flowId, currentStepId, nextStepId, dataId);
|
||||
|
||||
if (!response.success) {
|
||||
toast.error(`이동 실패: ${response.message}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 성공 시 targetDataId 확인 가능
|
||||
if (response.data?.targetDataId) {
|
||||
console.log(`새 테이블 ID: ${response.data.targetDataId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 데이터 새로고침
|
||||
await refreshStepData();
|
||||
};
|
||||
```
|
||||
|
||||
### 추가 데이터 전달
|
||||
|
||||
```typescript
|
||||
// 다음 단계로 이동하면서 추가 데이터 입력
|
||||
const additionalData = {
|
||||
installation_date: "2025-10-20",
|
||||
technician: "John Doe",
|
||||
installation_notes: "Installed successfully",
|
||||
};
|
||||
|
||||
const response = await fetch(`/api/flow/${flowId}/move`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
fromStepId: currentStepId,
|
||||
toStepId: nextStepId,
|
||||
dataId: dataId,
|
||||
additionalData: additionalData,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
## 5. 감사 로그 조회
|
||||
|
||||
### 특정 데이터의 이력 조회
|
||||
|
||||
```typescript
|
||||
const auditLogs = await getFlowAuditLogs(flowId, dataId);
|
||||
|
||||
// 결과:
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
moveType: "table",
|
||||
sourceTable: "purchase_orders",
|
||||
targetTable: "installations",
|
||||
sourceDataId: "123",
|
||||
targetDataId: "456",
|
||||
fromStepName: "구매",
|
||||
toStepName: "설치",
|
||||
changedBy: "system",
|
||||
changedAt: "2025-10-20T10:30:00",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
moveType: "table",
|
||||
sourceTable: "installations",
|
||||
targetTable: "disposals",
|
||||
sourceDataId: "456",
|
||||
targetDataId: "789",
|
||||
fromStepName: "설치",
|
||||
toStepName: "폐기",
|
||||
changedBy: "user123",
|
||||
changedAt: "2025-10-21T14:20:00",
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## 6. 모범 사례
|
||||
|
||||
### 상태 변경 방식 사용 시
|
||||
|
||||
✅ **권장**:
|
||||
|
||||
- 단일 엔티티의 생명주기 관리
|
||||
- 간단한 승인 프로세스
|
||||
- 빠른 상태 조회가 필요한 경우
|
||||
|
||||
❌ **비권장**:
|
||||
|
||||
- 각 단계마다 완전히 다른 데이터 구조가 필요한 경우
|
||||
|
||||
### 테이블 이동 방식 사용 시
|
||||
|
||||
✅ **권장**:
|
||||
|
||||
- 각 단계가 독립적인 엔티티
|
||||
- 단계별로 다른 팀/부서에서 관리
|
||||
- 각 단계의 데이터 구조가 완전히 다른 경우
|
||||
|
||||
❌ **비권장**:
|
||||
|
||||
- 단순한 상태 변경만 필요한 경우 (오버엔지니어링)
|
||||
- 실시간 조회 성능이 중요한 경우 (JOIN 비용)
|
||||
|
||||
### 하이브리드 방식 사용 시
|
||||
|
||||
✅ **권장**:
|
||||
|
||||
- 원본 데이터는 보존하면서 처리된 데이터는 별도 저장
|
||||
- 이중 추적이 필요한 경우
|
||||
|
||||
## 7. 주의사항
|
||||
|
||||
1. **필드 매핑 주의**: `field_mappings`의 소스/타겟 필드가 정확해야 함
|
||||
2. **필수 필드 검증**: `required_fields`에 명시된 필드는 반드시 입력
|
||||
3. **트랜잭션**: 모든 이동은 트랜잭션으로 처리되어 원자성 보장
|
||||
4. **Primary Key**: 테이블 이동 시 소스 데이터의 Primary Key가 명확해야 함
|
||||
5. **순환 참조 방지**: 플로우 연결 시 사이클이 발생하지 않도록 주의
|
||||
|
||||
## 8. 트러블슈팅
|
||||
|
||||
### Q1: "데이터를 찾을 수 없습니다" 오류
|
||||
|
||||
- 원인: Primary Key가 잘못되었거나 데이터가 이미 이동됨
|
||||
- 해결: `flow_audit_log`에서 이동 이력 확인
|
||||
|
||||
### Q2: "매핑할 데이터가 없습니다" 오류
|
||||
|
||||
- 원인: `field_mappings`가 비어있거나 소스 필드가 없음
|
||||
- 해결: 소스 테이블에 매핑 필드가 존재하는지 확인
|
||||
|
||||
### Q3: 테이블 이동 후 원본 데이터 처리
|
||||
|
||||
- 원본 데이터는 자동으로 삭제되지 않음
|
||||
- 필요시 별도 로직으로 처리하거나 `is_archived` 플래그 사용
|
||||
|
||||
## 9. 성능 최적화
|
||||
|
||||
1. **인덱스 생성**: 상태 컬럼에 인덱스 필수
|
||||
|
||||
```sql
|
||||
CREATE INDEX idx_documents_status ON documents(approval_status);
|
||||
```
|
||||
|
||||
2. **배치 이동**: 대량 데이터는 배치 API 사용
|
||||
|
||||
```typescript
|
||||
await moveBatchData(flowId, fromStepId, toStepId, dataIds);
|
||||
```
|
||||
|
||||
3. **매핑 테이블 정리**: 주기적으로 완료된 플로우의 매핑 데이터 아카이빙
|
||||
|
||||
```sql
|
||||
DELETE FROM flow_data_mapping
|
||||
WHERE created_at < NOW() - INTERVAL '1 year'
|
||||
AND current_step_id IN (SELECT id FROM flow_step WHERE step_order = (SELECT MAX(step_order) FROM flow_step WHERE flow_definition_id = ?));
|
||||
```
|
||||
|
||||
## 결론
|
||||
|
||||
하이브리드 플로우 시스템은 다양한 비즈니스 요구사항에 유연하게 대응할 수 있습니다:
|
||||
|
||||
- 간단한 상태 관리부터
|
||||
- 복잡한 다단계 프로세스까지
|
||||
- 하나의 시스템으로 통합 관리 가능
|
||||
|
|
@ -148,94 +148,103 @@ export default function FlowManagementPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto space-y-6 p-6">
|
||||
<div className="container mx-auto space-y-4 p-3 sm:space-y-6 sm:p-4 lg:p-6">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="flex items-center gap-2 text-3xl font-bold">
|
||||
<Workflow className="h-8 w-8" />
|
||||
<div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
||||
<div className="flex-1">
|
||||
<h1 className="flex items-center gap-2 text-xl font-bold sm:text-2xl lg:text-3xl">
|
||||
<Workflow className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8" />
|
||||
플로우 관리
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">업무 프로세스 플로우를 생성하고 관리합니다</p>
|
||||
<p className="text-muted-foreground mt-1 text-xs sm:text-sm">업무 프로세스 플로우를 생성하고 관리합니다</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />새 플로우 생성
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)} className="w-full sm:w-auto">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<span className="hidden sm:inline">새 플로우 생성</span>
|
||||
<span className="sm:hidden">생성</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 플로우 카드 목록 */}
|
||||
{loading ? (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-muted-foreground">로딩 중...</p>
|
||||
<div className="py-8 text-center sm:py-12">
|
||||
<p className="text-muted-foreground text-sm sm:text-base">로딩 중...</p>
|
||||
</div>
|
||||
) : flows.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<Workflow className="text-muted-foreground mx-auto mb-4 h-12 w-12" />
|
||||
<p className="text-muted-foreground mb-4">생성된 플로우가 없습니다</p>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||
<CardContent className="py-8 text-center sm:py-12">
|
||||
<Workflow className="text-muted-foreground mx-auto mb-3 h-10 w-10 sm:mb-4 sm:h-12 sm:w-12" />
|
||||
<p className="text-muted-foreground mb-3 text-sm sm:mb-4 sm:text-base">생성된 플로우가 없습니다</p>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)} className="w-full sm:w-auto">
|
||||
<Plus className="mr-2 h-4 w-4" />첫 플로우 만들기
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="grid grid-cols-1 gap-4 sm:gap-5 md:grid-cols-2 lg:gap-6 xl:grid-cols-3">
|
||||
{flows.map((flow) => (
|
||||
<Card
|
||||
key={flow.id}
|
||||
className="cursor-pointer transition-shadow hover:shadow-lg"
|
||||
onClick={() => handleEdit(flow.id)}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardHeader className="p-4 sm:p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{flow.name}
|
||||
{flow.isActive && <Badge variant="success">활성</Badge>}
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="flex flex-col gap-1 text-base sm:flex-row sm:items-center sm:gap-2 sm:text-lg">
|
||||
<span className="truncate">{flow.name}</span>
|
||||
{flow.isActive && (
|
||||
<Badge variant="success" className="self-start">
|
||||
활성
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-2">{flow.description || "설명 없음"}</CardDescription>
|
||||
<CardDescription className="mt-1 line-clamp-2 text-xs sm:mt-2 sm:text-sm">
|
||||
{flow.description || "설명 없음"}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="text-muted-foreground flex items-center gap-2">
|
||||
<Table className="h-4 w-4" />
|
||||
<span>{flow.tableName}</span>
|
||||
<CardContent className="p-4 pt-0 sm:p-6">
|
||||
<div className="space-y-1.5 text-xs sm:space-y-2 sm:text-sm">
|
||||
<div className="text-muted-foreground flex items-center gap-1.5 sm:gap-2">
|
||||
<Table className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
|
||||
<span className="truncate">{flow.tableName}</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground flex items-center gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
<span>생성자: {flow.createdBy}</span>
|
||||
<div className="text-muted-foreground flex items-center gap-1.5 sm:gap-2">
|
||||
<User className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
|
||||
<span className="truncate">생성자: {flow.createdBy}</span>
|
||||
</div>
|
||||
<div className="text-muted-foreground flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<div className="text-muted-foreground flex items-center gap-1.5 sm:gap-2">
|
||||
<Calendar className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
|
||||
<span>{new Date(flow.updatedAt).toLocaleDateString("ko-KR")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-2">
|
||||
<div className="mt-3 flex gap-2 sm:mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
className="h-8 flex-1 text-xs sm:h-9 sm:text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEdit(flow.id);
|
||||
}}
|
||||
>
|
||||
<Edit2 className="mr-2 h-4 w-4" />
|
||||
<Edit2 className="mr-1 h-3 w-3 sm:mr-2 sm:h-4 sm:w-4" />
|
||||
편집
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 px-2 text-xs sm:h-9 sm:px-3 sm:text-sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFlow(flow);
|
||||
setIsDeleteDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -246,77 +255,101 @@ export default function FlowManagementPage() {
|
|||
|
||||
{/* 생성 다이얼로그 */}
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>새 플로우 생성</DialogTitle>
|
||||
<DialogDescription>새로운 업무 프로세스 플로우를 생성합니다</DialogDescription>
|
||||
<DialogTitle className="text-base sm:text-lg">새 플로우 생성</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
새로운 업무 프로세스 플로우를 생성합니다
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">플로우 이름 *</Label>
|
||||
<Label htmlFor="name" className="text-xs sm:text-sm">
|
||||
플로우 이름 *
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="예: 제품 수명주기 관리"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="tableName">연결 테이블 *</Label>
|
||||
<Label htmlFor="tableName" className="text-xs sm:text-sm">
|
||||
연결 테이블 *
|
||||
</Label>
|
||||
<Input
|
||||
id="tableName"
|
||||
value={formData.tableName}
|
||||
onChange={(e) => setFormData({ ...formData, tableName: e.target.value })}
|
||||
placeholder="예: products"
|
||||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||||
/>
|
||||
<p className="text-muted-foreground mt-1 text-xs">플로우가 관리할 데이터 테이블 이름을 입력하세요</p>
|
||||
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
||||
플로우가 관리할 데이터 테이블 이름을 입력하세요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">설명</Label>
|
||||
<Label htmlFor="description" className="text-xs sm:text-sm">
|
||||
설명
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="플로우에 대한 설명을 입력하세요"
|
||||
rows={3}
|
||||
className="text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsCreateDialogOpen(false)}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleCreate}>생성</Button>
|
||||
<Button onClick={handleCreate} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
||||
생성
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>플로우 삭제</DialogTitle>
|
||||
<DialogDescription>
|
||||
<DialogTitle className="text-base sm:text-lg">플로우 삭제</DialogTitle>
|
||||
<DialogDescription className="text-xs sm:text-sm">
|
||||
정말로 "{selectedFlow?.name}" 플로우를 삭제하시겠습니까?
|
||||
<br />이 작업은 되돌릴 수 없습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsDeleteDialogOpen(false);
|
||||
setSelectedFlow(null);
|
||||
}}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
|
||||
import { FlowComponent } from "@/types/screen-management";
|
||||
|
||||
/**
|
||||
* 플로우 위젯 테스트 페이지
|
||||
* 문서 승인 플로우 (ID: 8)를 테스트합니다
|
||||
*/
|
||||
export default function TestFlowPage() {
|
||||
// 문서 승인 플로우
|
||||
const documentFlow: FlowComponent = {
|
||||
id: "test-flow-1",
|
||||
type: "flow",
|
||||
flowId: 8, // 문서 승인 플로우
|
||||
flowName: "문서 승인 플로우",
|
||||
showStepCount: true,
|
||||
allowDataMove: true,
|
||||
displayMode: "horizontal",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 1200, height: 600 },
|
||||
style: {},
|
||||
};
|
||||
|
||||
// 작업 요청 워크플로우
|
||||
const workRequestFlow: FlowComponent = {
|
||||
id: "test-flow-2",
|
||||
type: "flow",
|
||||
flowId: 12, // 작업 요청 워크플로우
|
||||
flowName: "작업 요청 워크플로우",
|
||||
showStepCount: true,
|
||||
allowDataMove: true,
|
||||
displayMode: "horizontal",
|
||||
position: { x: 0, y: 0 },
|
||||
size: { width: 1200, height: 600 },
|
||||
style: {},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-8">
|
||||
<div className="mx-auto max-w-7xl space-y-8">
|
||||
{/* 헤더 */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">플로우 위젯 테스트</h1>
|
||||
<p className="mt-2 text-gray-600">두 가지 플로우를 테스트할 수 있습니다</p>
|
||||
</div>
|
||||
|
||||
{/* 문서 승인 플로우 */}
|
||||
<div className="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h2 className="mb-4 text-xl font-semibold text-gray-800">문서 승인 플로우 (4단계)</h2>
|
||||
<FlowWidget component={documentFlow} />
|
||||
</div>
|
||||
|
||||
{/* 작업 요청 워크플로우 */}
|
||||
<div className="rounded-lg bg-white p-6 shadow-lg">
|
||||
<h2 className="mb-4 text-xl font-semibold text-gray-800">작업 요청 워크플로우 (6단계)</h2>
|
||||
<FlowWidget component={workRequestFlow} />
|
||||
</div>
|
||||
|
||||
{/* 사용 안내 */}
|
||||
<div className="mt-8 rounded-lg border border-blue-200 bg-blue-50 p-6">
|
||||
<h3 className="mb-2 text-lg font-semibold text-blue-900">사용 방법</h3>
|
||||
<ul className="list-inside list-disc space-y-1 text-blue-800">
|
||||
<li>각 플로우 단계를 클릭하면 해당 단계의 데이터 목록이 표시됩니다</li>
|
||||
<li>데이터 행을 체크하고 "다음 단계로 이동" 버튼을 클릭하면 데이터가 이동됩니다</li>
|
||||
<li>이동 후 자동으로 데이터 목록이 새로고침됩니다</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -41,6 +41,17 @@ export function FlowConditionBuilder({ flowId, tableName, condition, onChange }:
|
|||
const [conditionType, setConditionType] = useState<"AND" | "OR">(condition?.type || "AND");
|
||||
const [conditions, setConditions] = useState<FlowCondition[]>(condition?.conditions || []);
|
||||
|
||||
// condition prop이 변경될 때 상태 동기화
|
||||
useEffect(() => {
|
||||
if (condition) {
|
||||
setConditionType(condition.type || "AND");
|
||||
setConditions(condition.conditions || []);
|
||||
} else {
|
||||
setConditionType("AND");
|
||||
setConditions([]);
|
||||
}
|
||||
}, [condition]);
|
||||
|
||||
// 테이블 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (!tableName) {
|
||||
|
|
|
|||
|
|
@ -9,13 +9,14 @@ import { Button } from "@/components/ui/button";
|
|||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { updateFlowStep, deleteFlowStep } from "@/lib/api/flow";
|
||||
import { FlowStep } from "@/types/flow";
|
||||
import { FlowConditionBuilder } from "./FlowConditionBuilder";
|
||||
import { tableManagementApi } from "@/lib/api/tableManagement";
|
||||
import { tableManagementApi, getTableColumns } from "@/lib/api/tableManagement";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface FlowStepPanelProps {
|
||||
|
|
@ -32,12 +33,23 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
|
|||
stepName: step.stepName,
|
||||
tableName: step.tableName || "",
|
||||
conditionJson: step.conditionJson,
|
||||
// 하이브리드 모드 필드
|
||||
moveType: step.moveType || "status",
|
||||
statusColumn: step.statusColumn || "",
|
||||
statusValue: step.statusValue || "",
|
||||
targetTable: step.targetTable || "",
|
||||
fieldMappings: step.fieldMappings || {},
|
||||
});
|
||||
|
||||
const [tableList, setTableList] = useState<any[]>([]);
|
||||
const [loadingTables, setLoadingTables] = useState(true);
|
||||
const [openTableCombobox, setOpenTableCombobox] = useState(false);
|
||||
|
||||
// 컬럼 목록 (상태 컬럼 선택용)
|
||||
const [columns, setColumns] = useState<any[]>([]);
|
||||
const [loadingColumns, setLoadingColumns] = useState(false);
|
||||
const [openStatusColumnCombobox, setOpenStatusColumnCombobox] = useState(false);
|
||||
|
||||
// 테이블 목록 조회
|
||||
useEffect(() => {
|
||||
const loadTables = async () => {
|
||||
|
|
@ -61,9 +73,47 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
|
|||
stepName: step.stepName,
|
||||
tableName: step.tableName || "",
|
||||
conditionJson: step.conditionJson,
|
||||
// 하이브리드 모드 필드
|
||||
moveType: step.moveType || "status",
|
||||
statusColumn: step.statusColumn || "",
|
||||
statusValue: step.statusValue || "",
|
||||
targetTable: step.targetTable || "",
|
||||
fieldMappings: step.fieldMappings || {},
|
||||
});
|
||||
}, [step]);
|
||||
|
||||
// 테이블 선택 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
const loadColumns = async () => {
|
||||
if (!formData.tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoadingColumns(true);
|
||||
console.log("🔍 Loading columns for status column selector:", formData.tableName);
|
||||
const response = await getTableColumns(formData.tableName);
|
||||
console.log("📦 Columns response:", response);
|
||||
|
||||
if (response.success && response.data && response.data.columns) {
|
||||
console.log("✅ Setting columns:", response.data.columns);
|
||||
setColumns(response.data.columns);
|
||||
} else {
|
||||
console.log("❌ No columns in response");
|
||||
setColumns([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load columns:", error);
|
||||
setColumns([]);
|
||||
} finally {
|
||||
setLoadingColumns(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadColumns();
|
||||
}, [formData.tableName]);
|
||||
|
||||
// 저장
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
|
|
@ -230,6 +280,149 @@ export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanel
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 데이터 이동 설정 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>데이터 이동 설정</CardTitle>
|
||||
<CardDescription>다음 단계로 데이터를 이동할 때의 동작을 설정합니다</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* 이동 방식 선택 */}
|
||||
<div>
|
||||
<Label>이동 방식</Label>
|
||||
<Select
|
||||
value={formData.moveType}
|
||||
onValueChange={(value: "status" | "table" | "both") => setFormData({ ...formData, moveType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="status">
|
||||
<div>
|
||||
<div className="font-medium">상태 변경</div>
|
||||
<div className="text-xs text-gray-500">같은 테이블 내에서 상태 컬럼만 업데이트</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="table">
|
||||
<div>
|
||||
<div className="font-medium">테이블 이동</div>
|
||||
<div className="text-xs text-gray-500">다른 테이블로 데이터 복사</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="both">
|
||||
<div>
|
||||
<div className="font-medium">하이브리드</div>
|
||||
<div className="text-xs text-gray-500">상태 변경 + 테이블 이동</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 상태 변경 설정 (status 또는 both일 때) */}
|
||||
{(formData.moveType === "status" || formData.moveType === "both") && (
|
||||
<>
|
||||
<div>
|
||||
<Label>상태 컬럼명</Label>
|
||||
<Popover open={openStatusColumnCombobox} onOpenChange={setOpenStatusColumnCombobox}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openStatusColumnCombobox}
|
||||
className="w-full justify-between"
|
||||
disabled={!formData.tableName || loadingColumns}
|
||||
>
|
||||
{loadingColumns
|
||||
? "컬럼 로딩 중..."
|
||||
: formData.statusColumn
|
||||
? columns.find((col) => col.columnName === formData.statusColumn)?.columnName ||
|
||||
formData.statusColumn
|
||||
: "상태 컬럼 선택"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{columns.map((column) => (
|
||||
<CommandItem
|
||||
key={column.columnName}
|
||||
value={column.columnName}
|
||||
onSelect={() => {
|
||||
setFormData({ ...formData, statusColumn: column.columnName });
|
||||
setOpenStatusColumnCombobox(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
formData.statusColumn === column.columnName ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<div>{column.columnName}</div>
|
||||
<div className="text-xs text-gray-500">({column.dataType})</div>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<p className="mt-1 text-xs text-gray-500">업데이트할 컬럼의 이름</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>이 단계의 상태값</Label>
|
||||
<Input
|
||||
value={formData.statusValue}
|
||||
onChange={(e) => setFormData({ ...formData, statusValue: e.target.value })}
|
||||
placeholder="예: approved"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">이 단계에 있을 때의 상태값</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 테이블 이동 설정 (table 또는 both일 때) */}
|
||||
{(formData.moveType === "table" || formData.moveType === "both") && (
|
||||
<>
|
||||
<div>
|
||||
<Label>타겟 테이블</Label>
|
||||
<Select
|
||||
value={formData.targetTable}
|
||||
onValueChange={(value) => setFormData({ ...formData, targetTable: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tableList.map((table) => (
|
||||
<SelectItem key={table.tableName} value={table.tableName}>
|
||||
{table.displayName || table.tableName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="mt-1 text-xs text-gray-500">다음 단계로 이동 시 데이터가 저장될 테이블</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md bg-blue-50 p-3">
|
||||
<p className="text-sm text-blue-900">
|
||||
💡 필드 매핑은 향후 구현 예정입니다. 현재는 같은 이름의 컬럼만 자동 매핑됩니다.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 액션 버튼 */}
|
||||
<div className="flex gap-2">
|
||||
<Button className="flex-1" onClick={handleSave}>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,29 @@ import React, { useEffect, useState } from "react";
|
|||
import { FlowComponent } from "@/types/screen-management";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertCircle, Loader2 } from "lucide-react";
|
||||
import { getFlowById, getAllStepCounts } from "@/lib/api/flow";
|
||||
import type { FlowDefinition, FlowStep } from "@/types/flow";
|
||||
import { FlowDataListModal } from "@/components/flow/FlowDataListModal";
|
||||
import { AlertCircle, Loader2, ChevronDown, ChevronUp, History } from "lucide-react";
|
||||
import { getFlowById, getAllStepCounts, getStepDataList, moveBatchData, getFlowAuditLogs } from "@/lib/api/flow";
|
||||
import type { FlowDefinition, FlowStep, FlowAuditLog } from "@/types/flow";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { toast } from "sonner";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
|
||||
interface FlowWidgetProps {
|
||||
component: FlowComponent;
|
||||
|
|
@ -20,10 +39,23 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
|
|||
const [stepCounts, setStepCounts] = useState<Record<number, number>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [connections, setConnections] = useState<any[]>([]); // 플로우 연결 정보
|
||||
|
||||
// 모달 상태
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [selectedStep, setSelectedStep] = useState<{ id: number; name: string } | null>(null);
|
||||
// 선택된 스텝의 데이터 리스트 상태
|
||||
const [selectedStepId, setSelectedStepId] = useState<number | null>(null);
|
||||
const [stepData, setStepData] = useState<any[]>([]);
|
||||
const [stepDataColumns, setStepDataColumns] = useState<string[]>([]);
|
||||
const [stepDataLoading, setStepDataLoading] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
|
||||
const [movingData, setMovingData] = useState(false);
|
||||
const [selectedNextStepId, setSelectedNextStepId] = useState<number | null>(null); // 선택된 다음 단계
|
||||
|
||||
// 오딧 로그 상태
|
||||
const [auditLogs, setAuditLogs] = useState<FlowAuditLog[]>([]);
|
||||
const [auditLogsLoading, setAuditLogsLoading] = useState(false);
|
||||
const [showAuditLogs, setShowAuditLogs] = useState(false);
|
||||
const [auditPage, setAuditPage] = useState(1);
|
||||
const [auditPageSize] = useState(10);
|
||||
|
||||
// componentConfig에서 플로우 설정 추출 (DynamicComponentRenderer에서 전달됨)
|
||||
const config = (component as any).componentConfig || (component as any).config || {};
|
||||
|
|
@ -78,6 +110,15 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
|
|||
const sortedSteps = stepsData.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
|
||||
setSteps(sortedSteps);
|
||||
|
||||
// 연결 정보 조회
|
||||
const connectionsResponse = await fetch(`/api/flow/connections/${flowId}`);
|
||||
if (connectionsResponse.ok) {
|
||||
const connectionsData = await connectionsResponse.json();
|
||||
if (connectionsData.success && connectionsData.data) {
|
||||
setConnections(connectionsData.data);
|
||||
}
|
||||
}
|
||||
|
||||
// 스텝별 데이터 건수 조회
|
||||
if (showStepCount) {
|
||||
const countsResponse = await getAllStepCounts(flowId!);
|
||||
|
|
@ -103,36 +144,176 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
|
|||
}, [flowId, showStepCount]);
|
||||
|
||||
// 스텝 클릭 핸들러
|
||||
const handleStepClick = (stepId: number, stepName: string) => {
|
||||
const handleStepClick = async (stepId: number, stepName: string) => {
|
||||
if (onStepClick) {
|
||||
onStepClick(stepId, stepName);
|
||||
} else {
|
||||
// 기본 동작: 모달 열기
|
||||
setSelectedStep({ id: stepId, name: stepName });
|
||||
setModalOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 같은 스텝을 다시 클릭하면 접기
|
||||
if (selectedStepId === stepId) {
|
||||
setSelectedStepId(null);
|
||||
setStepData([]);
|
||||
setStepDataColumns([]);
|
||||
setSelectedRows(new Set());
|
||||
return;
|
||||
}
|
||||
|
||||
// 새로운 스텝 선택 - 데이터 로드
|
||||
setSelectedStepId(stepId);
|
||||
setStepDataLoading(true);
|
||||
setSelectedRows(new Set());
|
||||
|
||||
try {
|
||||
const response = await getStepDataList(flowId!, stepId, 1, 100);
|
||||
|
||||
if (!response.success) {
|
||||
throw new Error(response.message || "데이터를 불러올 수 없습니다");
|
||||
}
|
||||
|
||||
const rows = response.data?.records || [];
|
||||
setStepData(rows);
|
||||
|
||||
// 컬럼 추출
|
||||
if (rows.length > 0) {
|
||||
setStepDataColumns(Object.keys(rows[0]));
|
||||
} else {
|
||||
setStepDataColumns([]);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Failed to load step data:", err);
|
||||
toast.error(err.message || "데이터를 불러오는데 실패했습니다");
|
||||
} finally {
|
||||
setStepDataLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 데이터 이동 후 리프레시
|
||||
const handleDataMoved = async () => {
|
||||
if (!flowId) return;
|
||||
// 체크박스 토글
|
||||
const toggleRowSelection = (rowIndex: number) => {
|
||||
const newSelected = new Set(selectedRows);
|
||||
if (newSelected.has(rowIndex)) {
|
||||
newSelected.delete(rowIndex);
|
||||
} else {
|
||||
newSelected.add(rowIndex);
|
||||
}
|
||||
setSelectedRows(newSelected);
|
||||
};
|
||||
|
||||
// 전체 선택/해제
|
||||
const toggleAllRows = () => {
|
||||
if (selectedRows.size === stepData.length) {
|
||||
setSelectedRows(new Set());
|
||||
} else {
|
||||
setSelectedRows(new Set(stepData.map((_, index) => index)));
|
||||
}
|
||||
};
|
||||
|
||||
// 현재 단계에서 가능한 다음 단계들 찾기
|
||||
const getNextSteps = (currentStepId: number) => {
|
||||
return connections
|
||||
.filter((conn) => conn.fromStepId === currentStepId)
|
||||
.map((conn) => steps.find((s) => s.id === conn.toStepId))
|
||||
.filter((step) => step !== undefined);
|
||||
};
|
||||
|
||||
// 다음 단계로 이동
|
||||
const handleMoveToNext = async (targetStepId?: number) => {
|
||||
if (!flowId || !selectedStepId || selectedRows.size === 0) return;
|
||||
|
||||
// 다음 단계 결정
|
||||
let nextStepId = targetStepId || selectedNextStepId;
|
||||
|
||||
if (!nextStepId) {
|
||||
const nextSteps = getNextSteps(selectedStepId);
|
||||
if (nextSteps.length === 0) {
|
||||
toast.error("다음 단계가 없습니다");
|
||||
return;
|
||||
}
|
||||
if (nextSteps.length === 1) {
|
||||
nextStepId = nextSteps[0].id;
|
||||
} else {
|
||||
toast.error("다음 단계를 선택해주세요");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const selectedData = Array.from(selectedRows).map((index) => stepData[index]);
|
||||
|
||||
try {
|
||||
// 스텝별 데이터 건수 다시 조회
|
||||
setMovingData(true);
|
||||
|
||||
// Primary Key 컬럼 추출 (첫 번째 컬럼 가정)
|
||||
const primaryKeyColumn = stepDataColumns[0];
|
||||
const dataIds = selectedData.map((data) => String(data[primaryKeyColumn]));
|
||||
|
||||
// 배치 이동 API 호출
|
||||
const response = await moveBatchData({
|
||||
flowId,
|
||||
fromStepId: selectedStepId,
|
||||
toStepId: nextStepId,
|
||||
dataIds,
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
throw new Error(response.message || "데이터 이동에 실패했습니다");
|
||||
}
|
||||
|
||||
const nextStepName = steps.find((s) => s.id === nextStepId)?.stepName;
|
||||
toast.success(`${selectedRows.size}건의 데이터를 "${nextStepName}"(으)로 이동했습니다`);
|
||||
|
||||
// 선택 초기화
|
||||
setSelectedNextStepId(null);
|
||||
setSelectedRows(new Set());
|
||||
|
||||
// 데이터 새로고침
|
||||
await handleStepClick(selectedStepId, steps.find((s) => s.id === selectedStepId)?.stepName || "");
|
||||
|
||||
// 건수 새로고침
|
||||
const countsResponse = await getAllStepCounts(flowId);
|
||||
if (countsResponse.success && countsResponse.data) {
|
||||
// 배열을 Record<number, number>로 변환
|
||||
const countsMap: Record<number, number> = {};
|
||||
countsResponse.data.forEach((item: any) => {
|
||||
countsMap[item.stepId] = item.count;
|
||||
});
|
||||
setStepCounts(countsMap);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to refresh step counts:", err);
|
||||
} catch (err: any) {
|
||||
console.error("Failed to move data:", err);
|
||||
toast.error(err.message || "데이터 이동 중 오류가 발생했습니다");
|
||||
} finally {
|
||||
setMovingData(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 오딧 로그 로드
|
||||
const loadAuditLogs = async () => {
|
||||
if (!flowId) return;
|
||||
|
||||
try {
|
||||
setAuditLogsLoading(true);
|
||||
const response = await getFlowAuditLogs(flowId, 100); // 최근 100개
|
||||
if (response.success && response.data) {
|
||||
setAuditLogs(response.data);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Failed to load audit logs:", err);
|
||||
toast.error("이력 조회 중 오류가 발생했습니다");
|
||||
} finally {
|
||||
setAuditLogsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 오딧 로그 모달 열기
|
||||
const handleOpenAuditLogs = () => {
|
||||
setShowAuditLogs(true);
|
||||
setAuditPage(1); // 페이지 초기화
|
||||
loadAuditLogs();
|
||||
};
|
||||
|
||||
// 페이지네이션된 오딧 로그
|
||||
const paginatedAuditLogs = auditLogs.slice((auditPage - 1) * auditPageSize, auditPage * auditPageSize);
|
||||
const totalAuditPages = Math.ceil(auditLogs.length / auditPageSize);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
|
|
@ -167,17 +348,189 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
|
|||
);
|
||||
}
|
||||
|
||||
// 반응형 컨테이너 클래스
|
||||
const containerClass =
|
||||
displayMode === "horizontal"
|
||||
? "flex flex-wrap items-center justify-center gap-3"
|
||||
? "flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-3 sm:gap-4"
|
||||
: "flex flex-col items-center gap-4";
|
||||
|
||||
return (
|
||||
<div className="min-h-full w-full p-4">
|
||||
<div className="@container min-h-full w-full p-2 sm:p-4 lg:p-6">
|
||||
{/* 플로우 제목 */}
|
||||
<div className="mb-4 text-center">
|
||||
<h3 className="text-foreground text-lg font-semibold">{flowData.name}</h3>
|
||||
{flowData.description && <p className="text-muted-foreground mt-1 text-sm">{flowData.description}</p>}
|
||||
<div className="mb-3 sm:mb-4">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<h3 className="text-foreground text-base font-semibold sm:text-lg lg:text-xl">{flowData.name}</h3>
|
||||
|
||||
{/* 오딧 로그 버튼 */}
|
||||
<Dialog open={showAuditLogs} onOpenChange={setShowAuditLogs}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm" onClick={handleOpenAuditLogs} className="gap-1.5">
|
||||
<History className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">변경 이력</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[85vh] max-w-[95vw] sm:max-w-[1000px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>플로우 변경 이력</DialogTitle>
|
||||
<DialogDescription>데이터 이동 및 상태 변경 기록 (총 {auditLogs.length}건)</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{auditLogsLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
|
||||
<span className="text-muted-foreground ml-2 text-sm">이력 로딩 중...</span>
|
||||
</div>
|
||||
) : auditLogs.length === 0 ? (
|
||||
<div className="text-muted-foreground py-8 text-center text-sm">변경 이력이 없습니다</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* 테이블 */}
|
||||
<div className="bg-card overflow-hidden rounded-lg border">
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="w-[140px]">변경일시</TableHead>
|
||||
<TableHead className="w-[80px]">타입</TableHead>
|
||||
<TableHead className="w-[120px]">출발 단계</TableHead>
|
||||
<TableHead className="w-[120px]">도착 단계</TableHead>
|
||||
<TableHead className="w-[100px]">데이터 ID</TableHead>
|
||||
<TableHead className="w-[140px]">상태 변경</TableHead>
|
||||
<TableHead className="w-[100px]">변경자</TableHead>
|
||||
<TableHead>테이블</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedAuditLogs.map((log) => {
|
||||
const fromStep = steps.find((s) => s.id === log.fromStepId);
|
||||
const toStep = steps.find((s) => s.id === log.toStepId);
|
||||
|
||||
return (
|
||||
<TableRow key={log.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-xs">
|
||||
{new Date(log.changedAt).toLocaleString("ko-KR", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{log.moveType === "status"
|
||||
? "상태"
|
||||
: log.moveType === "table"
|
||||
? "테이블"
|
||||
: "하이브리드"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{fromStep?.stepName || `Step ${log.fromStepId}`}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{toStep?.stepName || `Step ${log.toStepId}`}
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-xs">
|
||||
{log.sourceDataId || "-"}
|
||||
{log.targetDataId && log.targetDataId !== log.sourceDataId && (
|
||||
<>
|
||||
<br />→ {log.targetDataId}
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
{log.statusFrom && log.statusTo ? (
|
||||
<span className="font-mono">
|
||||
{log.statusFrom}
|
||||
<br />→ {log.statusTo}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs">{log.changedBy}</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
{log.sourceTable || "-"}
|
||||
{log.targetTable && log.targetTable !== log.sourceTable && (
|
||||
<>
|
||||
<br />→ {log.targetTable}
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{totalAuditPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-muted-foreground text-sm">
|
||||
{(auditPage - 1) * auditPageSize + 1}-{Math.min(auditPage * auditPageSize, auditLogs.length)} /{" "}
|
||||
{auditLogs.length}건
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
onClick={() => setAuditPage((p) => Math.max(1, p - 1))}
|
||||
className={auditPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
|
||||
/>
|
||||
</PaginationItem>
|
||||
|
||||
{Array.from({ length: totalAuditPages }, (_, i) => i + 1)
|
||||
.filter((page) => {
|
||||
// 현재 페이지 주변만 표시
|
||||
return (
|
||||
page === 1 ||
|
||||
page === totalAuditPages ||
|
||||
(page >= auditPage - 1 && page <= auditPage + 1)
|
||||
);
|
||||
})
|
||||
.map((page, idx, arr) => (
|
||||
<React.Fragment key={page}>
|
||||
{idx > 0 && arr[idx - 1] !== page - 1 && (
|
||||
<PaginationItem>
|
||||
<span className="text-muted-foreground px-2">...</span>
|
||||
</PaginationItem>
|
||||
)}
|
||||
<PaginationItem>
|
||||
<PaginationLink
|
||||
onClick={() => setAuditPage(page)}
|
||||
isActive={auditPage === page}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
onClick={() => setAuditPage((p) => Math.min(totalAuditPages, p + 1))}
|
||||
className={
|
||||
auditPage === totalAuditPages ? "pointer-events-none opacity-50" : "cursor-pointer"
|
||||
}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{flowData.description && (
|
||||
<p className="text-muted-foreground mt-1 text-center text-xs sm:text-sm">{flowData.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 플로우 스텝 목록 */}
|
||||
|
|
@ -185,53 +538,272 @@ export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
|
|||
{steps.map((step, index) => (
|
||||
<React.Fragment key={step.id}>
|
||||
{/* 스텝 카드 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hover:border-primary hover:bg-accent flex shrink-0 flex-col items-start gap-3 p-5"
|
||||
<div
|
||||
className={`group bg-card relative w-full cursor-pointer rounded-lg border-2 p-4 shadow-sm transition-all duration-200 sm:w-auto sm:min-w-[180px] sm:rounded-xl sm:p-5 lg:min-w-[220px] lg:p-6 ${
|
||||
selectedStepId === step.id
|
||||
? "border-primary bg-primary/5 shadow-md"
|
||||
: "border-border hover:border-primary/50 hover:shadow-md"
|
||||
}`}
|
||||
onClick={() => handleStepClick(step.id, step.stepName)}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<Badge variant="outline" className="text-sm">
|
||||
단계 {step.stepOrder}
|
||||
</Badge>
|
||||
{showStepCount && (
|
||||
<Badge variant="secondary" className="text-sm font-semibold">
|
||||
{stepCounts[step.id] || 0}건
|
||||
</Badge>
|
||||
)}
|
||||
{/* 단계 번호 배지 */}
|
||||
<div className="bg-primary/10 text-primary mb-2 inline-flex items-center rounded-full px-2 py-1 text-xs font-medium sm:mb-3 sm:px-3">
|
||||
Step {step.stepOrder}
|
||||
</div>
|
||||
<div className="w-full text-left">
|
||||
<div className="text-foreground text-base font-semibold">{step.stepName}</div>
|
||||
{step.tableName && (
|
||||
<div className="text-muted-foreground mt-2 flex items-center gap-1 text-sm">
|
||||
<span>📊</span>
|
||||
<span>{step.tableName}</span>
|
||||
|
||||
{/* 스텝 이름 */}
|
||||
<h4 className="text-foreground mb-2 pr-8 text-base leading-tight font-semibold sm:text-lg">
|
||||
{step.stepName}
|
||||
</h4>
|
||||
|
||||
{/* 데이터 건수 */}
|
||||
{showStepCount && (
|
||||
<div className="text-muted-foreground mt-2 flex items-center gap-2 text-xs sm:mt-3 sm:text-sm">
|
||||
<div className="bg-muted flex h-7 items-center rounded-md px-2 sm:h-8 sm:px-3">
|
||||
<span className="text-foreground text-sm font-semibold sm:text-base">
|
||||
{stepCounts[step.id] || 0}
|
||||
</span>
|
||||
<span className="ml-1">건</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 선택 인디케이터 */}
|
||||
{selectedStepId === step.id && (
|
||||
<div className="absolute top-3 right-3 sm:top-4 sm:right-4">
|
||||
<ChevronUp className="text-primary h-4 w-4 sm:h-5 sm:w-5" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 화살표 (마지막 스텝 제외) */}
|
||||
{index < steps.length - 1 && (
|
||||
<div className="text-muted-foreground flex shrink-0 items-center justify-center text-2xl font-bold">
|
||||
{displayMode === "horizontal" ? "→" : "↓"}
|
||||
<div className="text-muted-foreground/40 flex shrink-0 items-center justify-center py-2 sm:py-0">
|
||||
{displayMode === "horizontal" ? (
|
||||
<svg
|
||||
className="h-5 w-5 rotate-90 sm:h-6 sm:w-6 sm:rotate-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 데이터 목록 모달 */}
|
||||
{selectedStep && flowId && (
|
||||
<FlowDataListModal
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
flowId={flowId}
|
||||
stepId={selectedStep.id}
|
||||
stepName={selectedStep.name}
|
||||
allowDataMove={allowDataMove}
|
||||
onDataMoved={handleDataMoved}
|
||||
/>
|
||||
{/* 선택된 스텝의 데이터 리스트 */}
|
||||
{selectedStepId !== null && (
|
||||
<div className="bg-muted/30 mt-4 w-full rounded-lg p-4 sm:mt-6 sm:rounded-xl sm:p-5 lg:mt-8 lg:p-6">
|
||||
{/* 헤더 */}
|
||||
<div className="mb-4 flex flex-col items-start justify-between gap-3 sm:mb-6 sm:flex-row sm:items-center">
|
||||
<div className="flex-1">
|
||||
<h4 className="text-foreground text-base font-semibold sm:text-lg">
|
||||
{steps.find((s) => s.id === selectedStepId)?.stepName}
|
||||
</h4>
|
||||
<p className="text-muted-foreground mt-1 text-xs sm:text-sm">총 {stepData.length}건의 데이터</p>
|
||||
</div>
|
||||
{allowDataMove &&
|
||||
selectedRows.size > 0 &&
|
||||
(() => {
|
||||
const nextSteps = getNextSteps(selectedStepId);
|
||||
return nextSteps.length > 1 ? (
|
||||
// 다음 단계가 여러 개인 경우: 선택 UI 표시
|
||||
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
|
||||
<Select
|
||||
value={selectedNextStepId?.toString() || ""}
|
||||
onValueChange={(value) => setSelectedNextStepId(Number(value))}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:w-[180px] sm:text-sm">
|
||||
<SelectValue placeholder="이동할 단계 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{nextSteps.map((step) => (
|
||||
<SelectItem key={step.id} value={step.id.toString()}>
|
||||
{step.stepName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
onClick={() => handleMoveToNext()}
|
||||
disabled={movingData || !selectedNextStepId}
|
||||
className="h-8 gap-1 px-3 text-xs sm:h-10 sm:gap-2 sm:px-4 sm:text-sm"
|
||||
>
|
||||
{movingData ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 animate-spin sm:h-4 sm:w-4" />
|
||||
<span>이동 중...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="h-3 w-3 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||
/>
|
||||
</svg>
|
||||
<span>이동 ({selectedRows.size})</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
// 다음 단계가 하나인 경우: 바로 이동 버튼만 표시
|
||||
<Button
|
||||
onClick={() => handleMoveToNext()}
|
||||
disabled={movingData}
|
||||
className="h-8 w-full gap-1 px-3 text-xs sm:h-10 sm:w-auto sm:gap-2 sm:px-4 sm:text-sm"
|
||||
>
|
||||
{movingData ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 animate-spin sm:h-4 sm:w-4" />
|
||||
<span className="hidden sm:inline">이동 중...</span>
|
||||
<span className="sm:hidden">이동중</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="h-3 w-3 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||
/>
|
||||
</svg>
|
||||
<span className="hidden sm:inline">
|
||||
{nextSteps.length > 0 ? `${nextSteps[0].stepName}(으)로 이동` : "다음 단계로 이동"} (
|
||||
{selectedRows.size})
|
||||
</span>
|
||||
<span className="sm:hidden">다음 ({selectedRows.size})</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* 데이터 테이블 */}
|
||||
{stepDataLoading ? (
|
||||
<div className="flex items-center justify-center py-8 sm:py-12">
|
||||
<Loader2 className="text-primary h-6 w-6 animate-spin sm:h-8 sm:w-8" />
|
||||
<span className="text-muted-foreground ml-2 text-xs sm:ml-3 sm:text-sm">데이터 로딩 중...</span>
|
||||
</div>
|
||||
) : stepData.length === 0 ? (
|
||||
<div className="bg-card flex flex-col items-center justify-center rounded-lg border-2 border-dashed py-8 sm:py-12">
|
||||
<svg
|
||||
className="text-muted-foreground/50 mb-2 h-10 w-10 sm:mb-3 sm:h-12 sm:w-12"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-muted-foreground text-xs sm:text-sm">데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 모바일: 카드 뷰 (컨테이너 640px 미만) */}
|
||||
<div className="space-y-3 @sm:hidden">
|
||||
{stepData.map((row, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`bg-card rounded-lg border p-3 transition-colors ${
|
||||
selectedRows.has(index) ? "border-primary bg-primary/5" : "border-border"
|
||||
}`}
|
||||
>
|
||||
{/* 체크박스 헤더 */}
|
||||
{allowDataMove && (
|
||||
<div className="mb-2 flex items-center justify-between border-b pb-2">
|
||||
<span className="text-muted-foreground text-xs font-medium">선택</span>
|
||||
<Checkbox checked={selectedRows.has(index)} onCheckedChange={() => toggleRowSelection(index)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 데이터 필드들 */}
|
||||
<div className="space-y-2">
|
||||
{stepDataColumns.map((col) => (
|
||||
<div key={col} className="flex justify-between gap-2">
|
||||
<span className="text-muted-foreground text-xs font-medium">{col}:</span>
|
||||
<span className="text-foreground truncate text-xs">
|
||||
{row[col] !== null && row[col] !== undefined ? (
|
||||
String(row[col])
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 데스크톱: 테이블 뷰 (컨테이너 640px 이상) */}
|
||||
<div className="bg-card hidden overflow-x-auto rounded-lg border shadow-sm @sm:block">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/50">
|
||||
<TableRow className="hover:bg-transparent">
|
||||
{allowDataMove && (
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={selectedRows.size === stepData.length && stepData.length > 0}
|
||||
onCheckedChange={toggleAllRows}
|
||||
/>
|
||||
</TableHead>
|
||||
)}
|
||||
{stepDataColumns.map((col) => (
|
||||
<TableHead key={col} className="text-xs font-semibold whitespace-nowrap sm:text-sm">
|
||||
{col}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{stepData.map((row, index) => (
|
||||
<TableRow
|
||||
key={index}
|
||||
className={`transition-colors ${selectedRows.has(index) ? "bg-primary/5" : "hover:bg-muted/50"}`}
|
||||
>
|
||||
{allowDataMove && (
|
||||
<TableCell className="w-12">
|
||||
<Checkbox
|
||||
checked={selectedRows.has(index)}
|
||||
onCheckedChange={() => toggleRowSelection(index)}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
{stepDataColumns.map((col) => (
|
||||
<TableCell key={col} className="font-mono text-xs whitespace-nowrap sm:text-sm">
|
||||
{row[col] !== null && row[col] !== undefined ? (
|
||||
String(row[col])
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -404,7 +404,7 @@ export async function moveBatchData(
|
|||
data: MoveBatchDataRequest,
|
||||
): Promise<ApiResponse<{ success: boolean; results: any[] }>> {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/flow/move/batch`, {
|
||||
const response = await fetch(`${API_BASE}/flow/move-batch`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
|
|||
|
|
@ -175,8 +175,9 @@ export interface MoveDataRequest {
|
|||
|
||||
export interface MoveBatchDataRequest {
|
||||
flowId: number;
|
||||
recordIds: string[];
|
||||
fromStepId: number;
|
||||
toStepId: number;
|
||||
dataIds: string[];
|
||||
note?: string;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue