484 lines
18 KiB
JavaScript
484 lines
18 KiB
JavaScript
import { useEffect, useState, useRef } from 'react'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { isNotEmptyArray } from '@/util/common-utils'
|
|
import SingleDatePicker from '@/components/common/datepicker/SingleDatePicker'
|
|
import dayjs from 'dayjs'
|
|
import PlanRequestPopQGrid from './PlanRequestPopQGrid'
|
|
import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
|
|
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
|
import Select from 'react-select'
|
|
import QPagination from '@/components/common/pagination/QPagination'
|
|
export default function PlanRequestPop(props) {
|
|
const [pageNo, setPageNo] = useState(1) //현재 페이지 번호
|
|
const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
|
|
const [totalCount, setTotalCount] = useState(0) //총 갯수
|
|
|
|
//공통코드
|
|
const { commonCode, findCommonCode } = useCommonCode()
|
|
|
|
const [planStatCdList, setPlanStatCdList] = useState([])
|
|
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
|
|
const [planReqObject, setPlanReqObject] = useState({})
|
|
|
|
const { promiseGet } = useAxios(globalLocaleState)
|
|
|
|
const { getMessage } = useMessage()
|
|
//Select ref
|
|
const ref = useRef()
|
|
// 검색조건 달력 셋팅
|
|
const [startDate, setStartDate] = useState(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
|
|
const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))
|
|
|
|
const rangeDatePickerProps1 = {
|
|
startDate, //시작일
|
|
setStartDate,
|
|
}
|
|
|
|
const rangeDatePickerProps2 = {
|
|
startDate: endDate, //종료일
|
|
setStartDate: setEndDate,
|
|
}
|
|
|
|
const [schPlanReqNo, setSchPlanReqNo] = useState('') //설계의뢰번호
|
|
const [schTitle, setSchTitle] = useState('') //안건명
|
|
const [schAddress, setSchAddress] = useState('') //도도부현
|
|
const [schSaleStoreName, setSchSaleStoreName] = useState('') //판매대리점명
|
|
const [schPlanReqName, setSchPlanReqName] = useState('') //의뢰자명
|
|
const [schPlanStatCd, setSchPlanStatCd] = useState('') //상태코드
|
|
const [schDateGbn, setSchDateGbn] = useState('S') //기간구분코드(S/R)
|
|
|
|
//초기화
|
|
const resetRecoil = () => {
|
|
setSchPlanReqNo('')
|
|
setSchTitle('')
|
|
setSchAddress('')
|
|
setSchSaleStoreName('')
|
|
setSchPlanReqName('')
|
|
setSchDateGbn('S')
|
|
setStartDate(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
|
|
setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
|
|
setSchPlanStatCd('')
|
|
handleClear() //셀렉트 자동완성 초기화
|
|
}
|
|
|
|
//셀렉트 자동완성 초기화
|
|
const handleClear = () => {
|
|
if (ref.current) {
|
|
ref.current.clearValue()
|
|
}
|
|
}
|
|
|
|
// 상태 검색조건 변경
|
|
const onSelectionChange = (key) => {
|
|
if (isObjectNotEmpty(key)) {
|
|
setSchPlanStatCd(key.clCode)
|
|
} else {
|
|
//X누름
|
|
setSchPlanStatCd('')
|
|
}
|
|
}
|
|
|
|
// 조회
|
|
const onSubmit = (page, type) => {
|
|
//2차점 테스트 201X112
|
|
const params = {
|
|
// saleStoreId: 'T100',
|
|
// saleStoreLevel: '1',
|
|
saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
|
|
saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
|
|
schPlanReqNo: schPlanReqNo,
|
|
schTitle: schTitle,
|
|
schAddress: schAddress,
|
|
schSaleStoreName: schSaleStoreName,
|
|
schPlanReqName: schPlanReqName,
|
|
schPlanStatCd: schPlanStatCd,
|
|
schDateGbn: schDateGbn,
|
|
schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
|
|
schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
|
|
startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
|
|
endRow: type === 'S' ? 1 * pageSize : page * pageSize,
|
|
}
|
|
if (type === 'S') {
|
|
setPageNo(1)
|
|
} else {
|
|
setPageNo(page)
|
|
}
|
|
|
|
const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
|
|
promiseGet({ url: apiUrl }).then((res) => {
|
|
if (res.status === 200) {
|
|
if (isNotEmptyArray(res.data.data)) {
|
|
setGridProps({ ...gridProps, gridData: res.data.data, gridCount: res.data.data[0].totCnt })
|
|
setTotalCount(res.data.data[0].totCnt)
|
|
} else {
|
|
setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
|
|
setTotalCount(0)
|
|
}
|
|
} else {
|
|
setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
|
|
setTotalCount(0)
|
|
}
|
|
})
|
|
}
|
|
// 페이징 현재페이지 변경
|
|
const handleChangePage = (page) => {
|
|
setPageNo(page)
|
|
|
|
onSubmit(page, 'P')
|
|
}
|
|
|
|
//페이지 갯수 변경 이벤트
|
|
const onChangePerPage = (e) => {
|
|
const params = {
|
|
// saleStoreId: 'T100',
|
|
// saleStoreLevel: '1',
|
|
saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
|
|
saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
|
|
schTitle: schTitle,
|
|
schAddress: schAddress,
|
|
schPlanReqNo: schPlanReqNo,
|
|
schSaleStoreName: schSaleStoreName,
|
|
schPlanReqName: schPlanReqName,
|
|
schPlanStatCd: schPlanStatCd,
|
|
schDateGbn: schDateGbn,
|
|
schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
|
|
schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
|
|
startRow: (1 - 1) * e.target.value + 1,
|
|
endRow: 1 * e.target.value,
|
|
}
|
|
|
|
setPageSize(e.target.value)
|
|
setPageNo(1)
|
|
|
|
const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
|
|
promiseGet({ url: apiUrl }).then((res) => {
|
|
if (res.status === 200) {
|
|
if (isNotEmptyArray(res.data.data)) {
|
|
setGridProps({ ...gridProps, gridData: res.data.data, gridCount: res.data.data[0].totCnt })
|
|
setTotalCount(res.data.data[0].totCnt)
|
|
} else {
|
|
setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
|
|
setTotalCount(0)
|
|
}
|
|
} else {
|
|
setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
|
|
setTotalCount(0)
|
|
}
|
|
})
|
|
}
|
|
|
|
const [gridProps, setGridProps] = useState({
|
|
gridData: [],
|
|
isPageable: false,
|
|
gridColumns: [
|
|
{
|
|
field: 'planStatName',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.planStatName'),
|
|
minWidth: 150,
|
|
checkboxSelection: true,
|
|
showDisabledCheckboxes: true,
|
|
},
|
|
{
|
|
field: 'planReqNo',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.planReqNo'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'saleStoreId',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.saleStoreId'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'saleStoreName',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.saleStoreName'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'title',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.title'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'address1',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.address1'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'houseCntName',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.houseCntName'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'planReqName',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.planReqName'),
|
|
minWidth: 150,
|
|
},
|
|
{
|
|
field: 'submitDt',
|
|
headerName: getMessage('stuff.planReqPopup.gridHeader.submitDt'),
|
|
minWidth: 150,
|
|
},
|
|
],
|
|
})
|
|
|
|
//설계의뢰 그리드에서 선택한 설계의로 정보
|
|
const getSelectedRowdata = (data) => {
|
|
if (isNotEmptyArray(data)) {
|
|
setPlanReqObject(data[0])
|
|
} else {
|
|
setPlanReqObject({})
|
|
}
|
|
}
|
|
|
|
// 설계의뢰 적용 클릭
|
|
const applyPlanReq = () => {
|
|
if (isObjectNotEmpty(planReqObject)) {
|
|
props.planReqInfo(planReqObject)
|
|
// 팝업닫기
|
|
props.setShowDesignRequestButtonValid(false)
|
|
} else {
|
|
alert(getMessage('stuff.planReqPopup.error.message1'))
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const code1 = findCommonCode(115800) //상태
|
|
if (code1 != null) {
|
|
setPlanStatCdList(code1)
|
|
}
|
|
}, [commonCode])
|
|
|
|
// 숫자만 입력 가능
|
|
const handleKeyUp = (e) => {
|
|
let input = e.target
|
|
input.value = input.value.replace(/[^0-9]/g, '')
|
|
if (e.key === 'Enter') {
|
|
onSubmit(pageNo, 'S')
|
|
}
|
|
}
|
|
|
|
// 엔터 이벤트
|
|
const handleByOnKeyUp = (e) => {
|
|
if (e.key === 'Enter') {
|
|
onSubmit(pageNo, 'S')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="modal-popup">
|
|
<div className="modal-dialog big">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="title">{getMessage('stuff.planReqPopup.title')}</h1>
|
|
<button className="modal-close" onClick={() => props.setShowDesignRequestButtonValid(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-body-inner">
|
|
<div className="design-tit-wrap">
|
|
<h3>{getMessage('stuff.planReqPopup.popTitle')}</h3>
|
|
<div className="design-search-wrap">
|
|
<button
|
|
className="btn-origin navy mr5"
|
|
onClick={() => {
|
|
onSubmit(pageNo, 'S')
|
|
}}
|
|
>
|
|
{getMessage('stuff.planReqPopup.btn1')}
|
|
</button>
|
|
<button className="btn-origin grey" onClick={resetRecoil}>
|
|
{getMessage('stuff.planReqPopup.btn2')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="design-request-table">
|
|
<div className="common-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{ width: '160px' }} />
|
|
<col />
|
|
<col style={{ width: '160px' }} />
|
|
<col />
|
|
<col style={{ width: '160px' }} />
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>{getMessage('stuff.planReqPopup.search.planReqNo')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={schPlanReqNo}
|
|
onKeyUp={handleKeyUp}
|
|
onChange={(e) => {
|
|
setSchPlanReqNo(e.target.value)
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.title')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={schTitle}
|
|
onChange={(e) => {
|
|
setSchTitle(e.target.value)
|
|
}}
|
|
onKeyUp={handleByOnKeyUp}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.address1')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={schAddress}
|
|
onChange={(e) => {
|
|
setSchAddress(e.target.value)
|
|
}}
|
|
onKeyUp={handleByOnKeyUp}
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.planReqPopup.search.saleStoreName')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={schSaleStoreName}
|
|
onChange={(e) => {
|
|
setSchSaleStoreName(e.target.value)
|
|
}}
|
|
onKeyUp={handleByOnKeyUp}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.planReqName')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={schPlanReqName}
|
|
onChange={(e) => {
|
|
setSchPlanReqName(e.target.value)
|
|
}}
|
|
onKeyUp={handleByOnKeyUp}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
|
|
<td>
|
|
<div className="select-wrap">
|
|
<Select
|
|
id="long-value-select1"
|
|
instanceId="long-value-select1"
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
ref={ref}
|
|
options={planStatCdList}
|
|
onChange={onSelectionChange}
|
|
getOptionLabel={(x) => x.clCodeNm}
|
|
getOptionValue={(x) => x.clCode}
|
|
isSearchable={false}
|
|
placeholder="Select"
|
|
isClearable={true}
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.planReqPopup.search.period')}</th>
|
|
<td colSpan={5}>
|
|
<div className="form-flex-wrap">
|
|
<div className="radio-wrap mr10">
|
|
<div className="d-check-radio light mr10">
|
|
<input
|
|
type="radio"
|
|
name="radio04"
|
|
id="ra07"
|
|
checked={schDateGbn === 'S' ? true : false}
|
|
value={'S'}
|
|
onChange={(e) => {
|
|
setSchDateGbn(e.target.value)
|
|
}}
|
|
/>
|
|
<label htmlFor="ra07">{getMessage('stuff.planReqPopup.search.schDateGbnS')}</label>
|
|
</div>
|
|
<div className="d-check-radio light">
|
|
<input
|
|
type="radio"
|
|
name="radio04"
|
|
id="ra08"
|
|
checked={schDateGbn === 'R' ? true : false}
|
|
value={'R'}
|
|
onChange={(e) => {
|
|
setSchDateGbn(e.target.value)
|
|
}}
|
|
/>
|
|
<label htmlFor="ra08">{getMessage('stuff.planReqPopup.search.schDateGbnR')}</label>
|
|
</div>
|
|
</div>
|
|
<div className="date-picker-wrap">
|
|
<div className="date-picker" style={{ flex: 1 }}>
|
|
<SingleDatePicker {...rangeDatePickerProps1} />
|
|
</div>
|
|
<span> ~ </span>
|
|
<div className="date-picker" style={{ flex: 1 }}>
|
|
<SingleDatePicker {...rangeDatePickerProps2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="design-request-grid">
|
|
<div className="design-request-count">
|
|
<div className="design-request-grid-tit">Plan List</div>
|
|
<div className="select-wrap">
|
|
<select className="select-light" onChange={onChangePerPage}>
|
|
<option>20</option>
|
|
<option>40</option>
|
|
<option>60</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<PlanRequestPopQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} />
|
|
<div className="pagination-wrap">
|
|
<QPagination pageNo={pageNo} pageSize={pageSize} pagePerBlock={10} totalCount={totalCount} handleChangePage={handleChangePage} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="footer-btn-wrap">
|
|
<button className="btn-origin grey mr5" onClick={() => props.setShowDesignRequestButtonValid(false)}>
|
|
{getMessage('stuff.planReqPopup.btn3')}
|
|
</button>
|
|
<button className="btn-origin navy" onClick={applyPlanReq}>
|
|
{getMessage('stuff.planReqPopup.btn4')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|