|
|
|
@ -1,87 +1,113 @@
|
|
|
|
|
import React, { useState } from 'react'; |
|
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
|
import * as yup from 'yup'; |
|
|
|
|
import { useForm } from 'react-hook-form'; |
|
|
|
|
import classnames from 'classnames'; |
|
|
|
|
import { |
|
|
|
|
Row, |
|
|
|
|
Col, |
|
|
|
|
Table, |
|
|
|
|
Badge, |
|
|
|
|
UncontrolledDropdown, |
|
|
|
|
DropdownMenu, |
|
|
|
|
DropdownItem, |
|
|
|
|
DropdownToggle, |
|
|
|
|
Card, |
|
|
|
|
CardHeader, |
|
|
|
|
CardBody, |
|
|
|
|
CardTitle, |
|
|
|
|
CardSubtitle, |
|
|
|
|
ButtonGroup, |
|
|
|
|
Button, |
|
|
|
|
Input, |
|
|
|
|
CustomInput, |
|
|
|
|
FormGroup, |
|
|
|
|
Modal, |
|
|
|
|
ModalHeader, |
|
|
|
|
ModalBody, |
|
|
|
|
ModalFooter, |
|
|
|
|
Label |
|
|
|
|
Label, |
|
|
|
|
FormFeedback, |
|
|
|
|
Form |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { Link, useHistory } from 'react-router-dom'; |
|
|
|
|
import { yupResolver } from '@hookform/resolvers/yup'; |
|
|
|
|
|
|
|
|
|
export const BasisGroupForm = props => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (props.groupData?.groupId) { |
|
|
|
|
setValue('groupNm', props.groupData?.groupNm); |
|
|
|
|
} |
|
|
|
|
}, [props.groupData]); |
|
|
|
|
|
|
|
|
|
const Schema = yup.object().shape({ |
|
|
|
|
groupNm: yup |
|
|
|
|
.string() |
|
|
|
|
.required('그룹명을 입력해 주세요') |
|
|
|
|
.matches( |
|
|
|
|
/^[ㄱ-힣A-Za-z0-9]{2,12}$/, |
|
|
|
|
'2 자 이상, 12 자 이하 영문자/숫자만 입력 가능합니다.' |
|
|
|
|
) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const { register, getValues, setValue, errors, handleSubmit } = useForm({ |
|
|
|
|
defaultValues: { |
|
|
|
|
groupNm: '' |
|
|
|
|
}, |
|
|
|
|
resolver: yupResolver(Schema) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const onSumbit = async data => { |
|
|
|
|
props.handlerSave(data); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
<Card> |
|
|
|
|
<CardBody className='pal-card-body'> |
|
|
|
|
<div className='search-cont search-info'> |
|
|
|
|
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
|
|
|
|
<div> |
|
|
|
|
<h4>{props.title} 상세정보</h4> |
|
|
|
|
</div> |
|
|
|
|
<div className='final'> |
|
|
|
|
{props.groupData.type === 'update' ? ( |
|
|
|
|
<span>최종 수정일자 : {props.groupData.updateDt}</span> |
|
|
|
|
) : null} |
|
|
|
|
<Form onSubmit={handleSubmit(onSumbit)}> |
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
<Card> |
|
|
|
|
<CardBody className='pal-card-body'> |
|
|
|
|
<div className='search-cont search-info'> |
|
|
|
|
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
|
|
|
|
<div> |
|
|
|
|
<h4>{props.title} 상세정보</h4> |
|
|
|
|
</div> |
|
|
|
|
<div className='final'> |
|
|
|
|
{props.groupData.type === 'update' ? ( |
|
|
|
|
<span>최종 수정일자 : {props.groupData.updateDt}</span> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='4' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='groupcode'> |
|
|
|
|
<span className='necessary'>*</span>그룹 코드 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='groupId' |
|
|
|
|
name='groupId' |
|
|
|
|
bsSize='sm' |
|
|
|
|
readOnly={true} |
|
|
|
|
value={props.groupData.groupId || ''} |
|
|
|
|
placeholder='' |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='4' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='groupname'> |
|
|
|
|
<span className='necessary'>*</span>그룹명 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='groupNm' |
|
|
|
|
name='groupNm' |
|
|
|
|
bsSize='sm' |
|
|
|
|
onChange={props.handlerInput} |
|
|
|
|
value={props.groupData.groupNm || ''} |
|
|
|
|
placeholder='' |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='4' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='groupId'> |
|
|
|
|
<span className='necessary'>*</span>그룹 코드 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='groupId' |
|
|
|
|
name='groupId' |
|
|
|
|
bsSize='sm' |
|
|
|
|
readOnly={true} |
|
|
|
|
value={props.groupData.groupId || ''} |
|
|
|
|
placeholder='' |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='4' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='groupNm'> |
|
|
|
|
<span className='necessary'>*</span>그룹명 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='groupNm' |
|
|
|
|
name='groupNm' |
|
|
|
|
bsSize='sm' |
|
|
|
|
innerRef={register} |
|
|
|
|
// value={props.groupData.groupNm || ''}
|
|
|
|
|
placeholder='' |
|
|
|
|
className={classnames({ |
|
|
|
|
'is-invalid': errors.groupNm |
|
|
|
|
})} |
|
|
|
|
/> |
|
|
|
|
{errors && errors.groupNm && ( |
|
|
|
|
<FormFeedback> |
|
|
|
|
{errors.groupNm.message} |
|
|
|
|
</FormFeedback> |
|
|
|
|
)} |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
|
|
|
|
|
{/* <Col className='list-input' md='4' sm='12'> |
|
|
|
|
{/* <Col className='list-input' md='4' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='groupauthority'>그룹 구분 코드</Label> |
|
|
|
|
<Input |
|
|
|
@ -95,39 +121,41 @@ export const BasisGroupForm = props => {
|
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> */} |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
|
|
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple |
|
|
|
|
className='mr-1' |
|
|
|
|
color='primary' |
|
|
|
|
size='sm' |
|
|
|
|
onClick={props.handlerSave} |
|
|
|
|
> |
|
|
|
|
저장 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
{/* <Button.Ripple className='mr-1' color='secondary' size='sm'> |
|
|
|
|
목록 |
|
|
|
|
</Button.Ripple> */} |
|
|
|
|
{props.groupData.type != 'create' ? ( |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple |
|
|
|
|
color='danger' |
|
|
|
|
className='mr-1' |
|
|
|
|
color='primary' |
|
|
|
|
size='sm' |
|
|
|
|
onClick={() => props.handlerWidthrow()} |
|
|
|
|
// onClick={props.handlerSave}
|
|
|
|
|
type='submit' |
|
|
|
|
> |
|
|
|
|
삭제 |
|
|
|
|
저장 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
)} |
|
|
|
|
{/* <Button.Ripple className='mr-1' color='secondary' size='sm'> |
|
|
|
|
목록 |
|
|
|
|
</Button.Ripple> */} |
|
|
|
|
{props.groupData.type != 'create' ? ( |
|
|
|
|
<Button.Ripple |
|
|
|
|
color='danger' |
|
|
|
|
size='sm' |
|
|
|
|
onClick={() => props.handlerWidthrow()} |
|
|
|
|
> |
|
|
|
|
삭제 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</Form> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|