공통 셀렉트 박스 반영
This commit is contained in:
parent
d834359577
commit
d18c97c992
@ -137,5 +137,16 @@ router.patch("/codes/:id/active", async (req, res, next) => {
|
||||
});
|
||||
//////========================================공통코드==============================================//////
|
||||
|
||||
// 공통 셀렉트 박스 데이터를 가져오기 위한 엔드포인트
|
||||
router.get("/select-options", async (req, res, next) => {
|
||||
try {
|
||||
const { modelName, orderField } = req.query;
|
||||
//가져올 모델명(테이블) 과 sorting 할 필드를 전달
|
||||
const options = await CommonService.getSelectOptions(modelName, orderField);
|
||||
res.json(options);
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@ -1,7 +1,4 @@
|
||||
const {
|
||||
MenuInfo,
|
||||
CommCode,
|
||||
} = require("../models");
|
||||
const { MenuInfo, CommCode, ProductGroup, sequelize } = require("../models"); // sequelize 임포트 추가
|
||||
const { Op } = require("sequelize");
|
||||
|
||||
|
||||
@ -218,6 +215,28 @@ const toggleCodeActive = async (id, isActive) => {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// 공통 셀렉트 박스 데이터를 가져오기 위한 함수
|
||||
const getSelectOptions = async (modelName, orderField = 'name') => {
|
||||
try {
|
||||
const model = sequelize.models[modelName]; // 동적으로 모델 참조
|
||||
if (!model) {
|
||||
throw new Error('Invalid model name');
|
||||
}
|
||||
|
||||
const options = await model.findAll({
|
||||
order: [[orderField, 'ASC']],
|
||||
raw: true,
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: options,
|
||||
};
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
//////========================================공통코드==============================================//////
|
||||
|
||||
module.exports = {
|
||||
@ -228,5 +247,7 @@ module.exports = {
|
||||
getCodes,
|
||||
saveCode,
|
||||
deleteCode,
|
||||
toggleCodeActive
|
||||
toggleCodeActive,
|
||||
getProductGroups,
|
||||
getSelectOptions, // getSelectOptions 함수 추가
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@ -12,6 +12,8 @@ import {
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; // Select 컴포넌트 임포트 추가
|
||||
import { api } from "@/lib/api"; // API 호출을 위한 임포트 추가
|
||||
|
||||
interface ProductFormProps {
|
||||
initialData?: Partial<product>;
|
||||
@ -26,6 +28,7 @@ export const ProductForm: React.FC<ProductFormProps> = ({
|
||||
}) => {
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
product_group_id: initialData?.product_group_id || "",
|
||||
product_code: initialData?.product_code || "",
|
||||
product_name: initialData?.product_name || "",
|
||||
product_desc: initialData?.product_desc || "",
|
||||
@ -33,21 +36,49 @@ export const ProductForm: React.FC<ProductFormProps> = ({
|
||||
},
|
||||
});
|
||||
|
||||
const [productGroups, setProductGroups] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSelectOptions = async (modelName, orderField) => {
|
||||
try {
|
||||
const response = await api.get("/api/v1/app/common/select-options", {
|
||||
params: { modelName, orderField },
|
||||
});
|
||||
console.log("Fetched select options:", response.data.data); // 디버깅 로그 추가
|
||||
setProductGroups(response.data.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch select options:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSelectOptions("ProductGroup", "product_group_name");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="product_name"
|
||||
name="product_group_id"
|
||||
validation={{
|
||||
required: "제품군은 필수 입력값입니다",
|
||||
maxLength: { value: 100, message: "최대 100자까지 입력 가능합니다" }
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>제품군</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="제품군을 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{productGroups.map((group) => (
|
||||
<SelectItem key={group.id} value={group.id}>
|
||||
{group.product_group_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@ -56,10 +87,44 @@ export const ProductForm: React.FC<ProductFormProps> = ({
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
name="product_code"
|
||||
validation={{
|
||||
required: "제품코드는 필수 입력값입니다",
|
||||
maxLength: { value: 50, message: "최대 50자까지 입력 가능합니다" }
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>설명</FormLabel>
|
||||
<FormLabel>제품코드</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="product_name"
|
||||
validation={{
|
||||
required: "제품명은 필수 입력값입니다",
|
||||
maxLength: { value: 50, message: "최대 50자까지 입력 가능합니다" }
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>제품명</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="product_desc"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>제품내용</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
@ -85,7 +150,6 @@ export const ProductForm: React.FC<ProductFormProps> = ({
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
취소
|
||||
|
||||
@ -160,6 +160,22 @@ const ProductPage = () => {
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "ProductGroup.product_group_name",
|
||||
header: "제품군명",
|
||||
meta: {
|
||||
width: "120px",
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "product_code",
|
||||
header: "제품코드",
|
||||
meta: {
|
||||
width: "120px",
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "product_name",
|
||||
header: "제품명",
|
||||
@ -169,8 +185,8 @@ const ProductPage = () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "description",
|
||||
header: "내용",
|
||||
accessorKey: "product_desc",
|
||||
header: "제품내용",
|
||||
meta: {
|
||||
width: "200px",
|
||||
textAlign: "center",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user