feat(product): 商品代號加入隨機產生按鈕 (8碼大寫英數)
This commit is contained in:
@@ -115,6 +115,15 @@ export default function ProductDialog({
|
|||||||
setData("barcode", randomDigits.toString());
|
setData("barcode", randomDigits.toString());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const generateRandomCode = () => {
|
||||||
|
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||||||
|
let result = "";
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||||
|
}
|
||||||
|
setData("code", result);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||||
@@ -164,14 +173,26 @@ export default function ProductDialog({
|
|||||||
<Label htmlFor="code">
|
<Label htmlFor="code">
|
||||||
商品代號 <span className="text-red-500">*</span>
|
商品代號 <span className="text-red-500">*</span>
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<div className="flex gap-2">
|
||||||
id="code"
|
<Input
|
||||||
value={data.code}
|
id="code"
|
||||||
onChange={(e) => setData("code", e.target.value)}
|
value={data.code}
|
||||||
placeholder="例:A1 (2-8碼)"
|
onChange={(e) => setData("code", e.target.value)}
|
||||||
maxLength={8}
|
placeholder="例:A1 (2-8碼)"
|
||||||
className={errors.code ? "border-red-500" : ""}
|
maxLength={8}
|
||||||
/>
|
className={`flex-1 ${errors.code ? "border-red-500" : ""}`}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={generateRandomCode}
|
||||||
|
title="隨機生成代號"
|
||||||
|
className="shrink-0 button-outlined-primary"
|
||||||
|
>
|
||||||
|
<Wand2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
{errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
|
{errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user