60b1ac1442
- Introduced functionality to extract and manage individual separators for numbering rule parts. - Added methods to join parts with their respective separators, improving code generation flexibility. - Updated the numbering rule service to utilize the new separator logic during part processing. - Enhanced the frontend components to support custom separators for each part, allowing for more granular control over numbering formats.
101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import { NumberingRuleConfig } from "@/types/numbering-rule";
|
|
|
|
interface NumberingRulePreviewProps {
|
|
config: NumberingRuleConfig;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({
|
|
config,
|
|
compact = false
|
|
}) => {
|
|
const generatedCode = useMemo(() => {
|
|
if (!config.parts || config.parts.length === 0) {
|
|
return "규칙을 추가해주세요";
|
|
}
|
|
|
|
const sortedParts = config.parts.sort((a, b) => a.order - b.order);
|
|
|
|
const partValues = sortedParts.map((part) => {
|
|
if (part.generationMethod === "manual") {
|
|
return part.manualConfig?.value || "XXX";
|
|
}
|
|
|
|
const autoConfig = part.autoConfig || {};
|
|
|
|
switch (part.partType) {
|
|
case "sequence": {
|
|
const length = autoConfig.sequenceLength || 3;
|
|
const startFrom = autoConfig.startFrom || 1;
|
|
return String(startFrom).padStart(length, "0");
|
|
}
|
|
case "number": {
|
|
const length = autoConfig.numberLength || 4;
|
|
const value = autoConfig.numberValue || 0;
|
|
return String(value).padStart(length, "0");
|
|
}
|
|
case "date": {
|
|
const format = autoConfig.dateFormat || "YYYYMMDD";
|
|
if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
|
|
switch (format) {
|
|
case "YYYY": return "[YYYY]";
|
|
case "YY": return "[YY]";
|
|
case "YYYYMM": return "[YYYYMM]";
|
|
case "YYMM": return "[YYMM]";
|
|
case "YYYYMMDD": return "[YYYYMMDD]";
|
|
case "YYMMDD": return "[YYMMDD]";
|
|
default: return "[DATE]";
|
|
}
|
|
}
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
|
const day = String(now.getDate()).padStart(2, "0");
|
|
switch (format) {
|
|
case "YYYY": return String(year);
|
|
case "YY": return String(year).slice(-2);
|
|
case "YYYYMM": return `${year}${month}`;
|
|
case "YYMM": return `${String(year).slice(-2)}${month}`;
|
|
case "YYYYMMDD": return `${year}${month}${day}`;
|
|
case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
|
|
default: return `${year}${month}${day}`;
|
|
}
|
|
}
|
|
case "text":
|
|
return autoConfig.textValue || "TEXT";
|
|
default:
|
|
return "XXX";
|
|
}
|
|
});
|
|
|
|
// 파트별 개별 구분자로 결합
|
|
const globalSep = config.separator ?? "-";
|
|
let result = "";
|
|
partValues.forEach((val, idx) => {
|
|
result += val;
|
|
if (idx < partValues.length - 1) {
|
|
const sep = sortedParts[idx].separatorAfter ?? globalSep;
|
|
result += sep;
|
|
}
|
|
});
|
|
return result;
|
|
}, [config]);
|
|
|
|
if (compact) {
|
|
return (
|
|
<div className="rounded-md bg-muted px-2 py-1">
|
|
<code className="text-xs font-mono text-foreground">{generatedCode}</code>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-md bg-muted px-3 py-2">
|
|
<code className="text-sm font-mono text-foreground">{generatedCode}</code>
|
|
</div>
|
|
);
|
|
};
|