450 lines
18 KiB
JavaScript
450 lines
18 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
|
|
import FindAddressPopQGrid from './FindAddressPopQGrid'
|
|
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 { sessionStore } from '@/store/commonAtom'
|
|
import { planReqSearchState } from '@/store/planReqAtom'
|
|
import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
|
|
|
|
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 sessionState = useRecoilValue(sessionStore)
|
|
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
|
|
const [planReqObject, setPlanReqObject] = useState({})
|
|
|
|
const { get, 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 resetPlanReqRecoil = useResetRecoilState(planReqSearchState)
|
|
|
|
const [planReqSearch, setPlanReqSearch] = useRecoilState(planReqSearchState)
|
|
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() //셀렉트 자동완성 초기화
|
|
resetPlanReqRecoil()
|
|
}
|
|
|
|
//셀렉트 자동완성 초기화
|
|
const handleClear = () => {
|
|
if (ref.current) {
|
|
ref.current.clearValue()
|
|
}
|
|
}
|
|
|
|
// 상태 검색조건 변경
|
|
const onSelectionChange = (key) => {
|
|
//임시작업
|
|
// console.log('E::::::::', key)
|
|
if (isObjectNotEmpty(key)) {
|
|
setSchPlanStatCd(key.value)
|
|
setPlanReqSearch({
|
|
...planReqSearch,
|
|
schPlanStatCd: key.value,
|
|
})
|
|
} else {
|
|
//X누름
|
|
setSchPlanStatCd('')
|
|
setPlanReqSearch({ ...planReqSearch, schPlanStatCd: '' })
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setStartDate(planReqSearch?.schStartDt ? planReqSearch.schStartDt : dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
|
|
setEndDate(planReqSearch?.schEndDt ? planReqSearch.schEndDt : dayjs(new Date()).format('YYYY-MM-DD'))
|
|
}, [planReqSearch])
|
|
|
|
// 조회
|
|
const onSubmit = (page, type) => {
|
|
const params = {
|
|
saleStoreId: 'T100',
|
|
saleStoreLevel: '1',
|
|
// saleStoreId: sessionState?.storeId,
|
|
// saleStoreLevel: sessionState?.storeLvl,
|
|
schPlanReqNo: planReqSearch?.schPlanReqNo ? planReqSearch.schPlanReqNo : schPlanReqNo,
|
|
schTitle: planReqSearch?.schTitle ? planReqSearch.schTitle : schTitle,
|
|
schAddress: planReqSearch?.schAddress ? planReqSearch.schAddress : schAddress,
|
|
schSaleStoreName: planReqSearch?.schSaleStoreName ? planReqSearch.schSaleStoreName : schSaleStoreName,
|
|
schPlanReqName: planReqSearch?.schPlanReqName ? planReqSearch.schPlanReqName : schPlanReqName,
|
|
schPlanStatCd: planReqSearch?.schPlanStatCd ? planReqSearch.schPlanStatCd : schPlanStatCd,
|
|
schDateGbn: planReqSearch?.schDateGbn ? planReqSearch.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) => {
|
|
setPlanReqSearch({
|
|
...planReqSearch,
|
|
startRow: (page - 1) * pageSize + 1,
|
|
endRow: page * pageSize,
|
|
})
|
|
setPageNo(page)
|
|
|
|
onSubmit(page, 'P')
|
|
}
|
|
|
|
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'))
|
|
}
|
|
}
|
|
|
|
const tempList = [
|
|
{
|
|
label: '완료',
|
|
value: 'C',
|
|
},
|
|
{
|
|
label: '저장',
|
|
value: 'I',
|
|
},
|
|
{
|
|
label: '접수',
|
|
value: 'R',
|
|
},
|
|
{
|
|
label: '제출',
|
|
value: '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={planReqSearch?.schPlanReqNo ? planReqSearch?.schPlanReqNo : schPlanReqNo}
|
|
onChange={(e) => {
|
|
setSchPlanReqNo(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schPlanReqNo: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.title')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={planReqSearch?.schTitle ? planReqSearch?.schTitle : schTitle}
|
|
onChange={(e) => {
|
|
setSchTitle(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schTitle: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.address1')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={planReqSearch?.schAddress ? planReqSearch?.schAddress : schAddress}
|
|
onChange={(e) => {
|
|
setSchAddress(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schAddress: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.planReqPopup.search.saleStoreName')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={planReqSearch?.schSaleStoreName ? planReqSearch?.schSaleStoreName : schSaleStoreName}
|
|
onChange={(e) => {
|
|
setSchSaleStoreName(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schSaleStoreName: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.planReqName')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={planReqSearch?.schPlanReqName ? planReqSearch?.schPlanReqName : schPlanReqName}
|
|
onChange={(e) => {
|
|
setSchPlanReqName(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schPlanReqName: e.target.value })
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
|
|
<td>
|
|
<div className="select-wrap">
|
|
<Select
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
ref={ref}
|
|
options={tempList}
|
|
onChange={onSelectionChange}
|
|
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={planReqSearch?.schDateGbn === 'S' ? true : false}
|
|
value={'S'}
|
|
onChange={(e) => {
|
|
setSchDateGbn(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schDateGbn: 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={planReqSearch?.schDateGbn === 'R' ? true : false}
|
|
value={'R'}
|
|
onChange={(e) => {
|
|
setSchDateGbn(e.target.value)
|
|
setPlanReqSearch({ ...planReqSearch, schDateGbn: 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-grid-tit">Plan List</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>
|
|
)
|
|
}
|