qcast-front/src/components/management/StuffSearchCondition.jsx
2024-11-01 09:53:45 +09:00

667 lines
28 KiB
JavaScript

'use client'
import { useEffect, useRef, useState, useContext } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import Select from 'react-select'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
import { stuffSearchState } from '@/store/stuffAtom'
import { isEmptyArray } from '@/util/common-utils'
import dayjs from 'dayjs'
import Link from 'next/link'
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
import { sessionStore } from '@/store/commonAtom'
import { useMessage } from '@/hooks/useMessage'
import { isObjectNotEmpty } from '@/util/common-utils'
import { SessionContext } from '@/app/SessionProvider'
export default function StuffSearchCondition() {
const { session } = useContext(SessionContext)
const sessionState = useRecoilValue(sessionStore)
const setAppMessageState = useSetRecoilState(appMessageStore)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
const ref = useRef()
const ref2 = useRef()
const { get } = useAxios(globalLocaleState)
const objectNoRef = useRef(null)
const saleStoreNameRef = useRef(null)
const addressRef = useRef(null)
const objectNameRef = useRef(null)
const dispCompanyNameRef = useRef(null)
const receiveUserRef = useRef(null)
//달력 props 관련 날짜 셋팅
const [startDate, setStartDate] = useState(dayjs(new Date()).add(-1, 'year').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,
}
//여기서 선택한 검색조건들을 recoil로 관리
const resetStuffRecoil = useResetRecoilState(stuffSearchState)
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
const [objectNo, setObjectNo] = useState('') //물건번호
const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
const [address, setAddress] = useState('') //물건주소
const [objectName, setobjectName] = useState('') //물건명
const [dispCompanyName, setDispCompanyName] = useState('') //견적처
const [schSelSaleStoreId, setSchSelSaleStoreId] = useState('') //판매대리점 선택
const [receiveUser, setReceiveUser] = useState('') //담당자
const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
const [otherSaleStoreList, setOtherSaleStoreList] = useState([]) //1차점 이외 판매점목록
const [otherSaleStoreId, setOtherSaleStoreId] = useState('')
// 조회
const onSubmit = () => {
let diff = dayjs(endDate).diff(startDate, 'day')
if (diff > 366) {
return alert(getMessage('stuff.message.periodError'))
}
if (stuffSearch.code === 'S') {
setStuffSearch({
schObjectNo: objectNo ? objectNo : stuffSearch?.schObjectNo,
schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch?.schSaleStoreName : saleStoreName,
schAddress: address ? address : stuffSearch?.schAddress,
schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
schToDt: dayjs(endDate).format('YYYY-MM-DD'),
code: 'E',
startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
})
} else {
setStuffSearch({
schObjectNo: objectNo ? objectNo : '',
schSaleStoreName: saleStoreName ? saleStoreName : '',
schAddress: address ? address : '',
schObjectName: objectName ? objectName : '',
schDispCompanyName: dispCompanyName ? dispCompanyName : '',
schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
schReceiveUser: receiveUser ? receiveUser : '',
schDateType: dateType,
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
schToDt: dayjs(endDate).format('YYYY-MM-DD'),
code: 'E',
startRow: 1,
endRow: 100,
schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
})
}
}
//초기화
const resetRecoil = () => {
//T01아니면 자동완성 초기화 막기
objectNoRef.current.value = ''
saleStoreNameRef.current.value = ''
addressRef.current.value = ''
objectNameRef.current.value = ''
dispCompanyNameRef.current.value = ''
receiveUserRef.current.value = ''
setObjectNo('')
setAddress('')
setobjectName('')
setSaleStoreName('')
setReceiveUser('')
setDispCompanyName('')
setDateType('U')
setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
// if (sessionState?.storeId === 'T01') {
if (session?.storeId === 'T01') {
setSchSelSaleStoreId('')
handleClear1() //판매대리점선택 자동완성 클리어
resetStuffRecoil()
setStuffSearch({
...stuffSearch,
code: 'C',
schSelSaleStoreId: '',
schOtherSelSaleStoreId: '',
})
} else {
if (otherSaleStoreList.length > 1) {
handleClear2()
setOtherSaleStoreId('')
stuffSearch.schObjectNo = ''
stuffSearch.schDateType = 'U'
} else {
stuffSearch.schObjectNo = ''
stuffSearch.schDateType = 'U'
}
}
}
useEffect(() => {
// if (isObjectNotEmpty(sessionState)) {
if (isObjectNotEmpty(session)) {
// storeId가 T01 이거나 storeLvl이 1차점일때만 판매대리점 선택 활성화
let url
// if (sessionState?.storeId === 'T01') {
if (session?.storeId === 'T01') {
//T01일떄
// url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
} else {
// if (sessionState.storeLvl === '1') {
if (session.storeLvl === '1') {
//T01아닌 1차점일때
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
} else {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
}
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
row.value = row.saleStoreId
row.label = row.saleStoreName
})
let allList
let favList
let otherList
// if (sessionState?.storeId === 'T01') {
if (session?.storeId === 'T01') {
allList = res
allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
setSchSelSaleStoreList(allList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
// setSchSelSaleStoreId(sessionState?.storeId)
setSchSelSaleStoreId(session?.storeId)
setStuffSearch({
...stuffSearch,
code: 'S',
// schSelSaleStoreId: sessionState?.storeId,
schSelSaleStoreId: session?.storeId,
})
//T01일때 2차 판매점 호출하기 디폴트로 1차점을 본인으로 셋팅해서 세션storeId사용
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
row.value = row.saleStoreId
row.label = row.saleStoreName
})
otherList = res
setOtherSaleStoreList(otherList)
} else {
setOtherSaleStoreList([])
}
})
} else {
// if (sessionState?.storeLvl === '1') {
if (session?.storeLvl === '1') {
allList = res
favList = res.filter((row) => row.priority !== 'B')
otherList = res.filter((row) => row.firstAgentYn === 'N')
setSchSelSaleStoreList(allList)
setFavoriteStoreList(allList)
setShowSaleStoreList(allList)
setSchSelSaleStoreId(allList[0].saleStoreId)
setOtherSaleStoreList(otherList)
setStuffSearch({
...stuffSearch,
code: 'S',
schSelSaleStoreId: allList[0].saleStoreId,
})
} else {
//10X22, 201X112 그냥2차점
//2차점인데 34들고있는애 202X217
setSchSelSaleStoreList(res)
setFavoriteStoreList(res)
setShowSaleStoreList(res)
setSchSelSaleStoreId(res[0].saleStoreId)
otherList = res.filter((row) => row.firstAgentYn === 'N')
setOtherSaleStoreList(otherList)
//선택한 2차점 세션으로 자동셋팅
// setOtherSaleStoreId(sessionState?.storeId)
setOtherSaleStoreId(session?.storeId)
setStuffSearch({
...stuffSearch,
code: 'S',
schSelSaleStoreId: otherList[0].saleStoreId,
})
}
}
}
})
}
// }, [sessionState])
}, [session])
//초기화 눌렀을 때 1차판매점 자동완성도..
const handleClear1 = () => {
if (ref.current) {
ref.current.clearValue()
}
}
const handleClear2 = () => {
if (ref2.current) {
ref2.current.clearValue()
}
}
//자동완성 인풋
const onInputChange = (key) => {
if (key !== '') {
setShowSaleStoreList(schSelSaleStoreList)
setOtherSaleStoreList([])
} else {
setShowSaleStoreList(favoriteStoreList)
}
}
//판매대리점 자동완성 변경
const onSelectionChange = (key) => {
if (isObjectNotEmpty(key)) {
setOtherSaleStoreId('')
setSchSelSaleStoreId(key.saleStoreId)
stuffSearch.schSelSaleStoreId = key.saleStoreId
//T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
//고른 1차점의 saleStoreId로 2차점 API호출하기
// let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
let otherList
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
row.value = row.saleStoreId
row.label = row.saleStoreName
})
otherList = res
setOtherSaleStoreList(otherList)
} else {
setOtherSaleStoreList([])
}
})
} else {
//X누름
setSchSelSaleStoreId('')
stuffSearch.schSelSaleStoreId = ''
//2차점 판매점목록비우기
setOtherSaleStoreList([])
}
}
//2차점 자동완성 변경
const onSelectionChange2 = (key) => {
if (isObjectNotEmpty(key)) {
setOtherSaleStoreId(key.saleStoreId)
stuffSearch.schOtherSelSaleStoreId = key.saleStoreId
} else {
//X누르면 검색조건에 1차점으로 셋팅
setOtherSaleStoreId('')
setSchSelSaleStoreId(schSelSaleStoreId)
stuffSearch.schOtherSelSaleStoreId = ''
stuffSearch.schSelSaleStoreId = schSelSaleStoreId
}
}
useEffect(() => {
setStartDate(stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
setEndDate(stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'))
}, [stuffSearch])
useEffect(() => {
if (globalLocaleState === 'ko') {
setAppMessageState(KO)
} else {
setAppMessageState(JA)
}
}, [globalLocaleState])
// 엔터 이벤트
const handleByOnKeyUp = (e) => {
if (e.key === 'Enter') {
onSubmit()
}
}
return (
<>
{/* 퍼블적용시작 */}
<div className="sub-table-box">
<div className="table-box-title-wrap">
<div className="title-wrap">
<h3>{getMessage('stuff.search.title')}</h3>
</div>
<div className="left-unit-box">
<Link href="/management/stuff/tempdetail" scroll={false}>
<button type="button" className="btn-origin navy mr5">
{getMessage('stuff.search.btn1')}
</button>
</Link>
<button type="button" className="btn-origin navy mr5" onClick={onSubmit}>
{getMessage('stuff.search.btn2')}
</button>
<button type="button" className="btn-origin grey" onClick={resetRecoil}>
{getMessage('stuff.search.btn3')}
</button>
</div>
</div>
<div className="common-table">
<table>
<colgroup>
<col style={{ width: '160px' }} />
<col />
<col style={{ width: '160px' }} />
<col />
<col style={{ width: '160px' }} />
<col />
<col style={{ width: '160px' }} />
<col />
</colgroup>
<tbody>
<tr>
<th>{getMessage('stuff.search.schObjectNo')}</th>
<td>
<div className="input-wrap">
<input
type="text"
ref={objectNoRef}
className="input-light"
defaultValue={stuffSearch.code === 'E' || stuffSearch.code === 'M' ? stuffSearch?.schObjectNo : objectNo}
onChange={(e) => {
setObjectNo(objectNoRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
<th>{getMessage('stuff.search.schSaleStoreName')}</th>
<td>
<div className="input-wrap">
<input
type="text"
ref={saleStoreNameRef}
className="input-light"
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schSaleStoreName : saleStoreName}
onChange={(e) => {
setSaleStoreName(saleStoreNameRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
<th>{getMessage('stuff.search.schAddress')}</th>
<td>
<div className="input-wrap">
<input
type="text"
ref={addressRef}
className="input-light"
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schAddress : address}
onChange={(e) => {
setAddress(addressRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
<th>{getMessage('stuff.search.schDispCompanyName')}</th>
<td>
<div className="input-wrap">
<input
type="text"
ref={dispCompanyNameRef}
className="input-light"
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
onChange={(e) => {
setDispCompanyName(dispCompanyNameRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
</tr>
<tr>
<th>{getMessage('stuff.search.schObjectName')}</th>
<td>
<div className="input-wrap">
<input
type="text"
ref={objectNameRef}
className="input-light"
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schObjectName : objectName}
onChange={(e) => {
setobjectName(objectNameRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
<th>{getMessage('stuff.search.schReceiveUser')}</th>
<td>
<div className="input-wrap">
<input
type="text"
className="input-light"
ref={receiveUserRef}
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schReceiveUser : receiveUser}
onChange={(e) => {
setReceiveUser(receiveUserRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
<th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
<td colSpan={3}>
<div className="form-flex-wrap">
<div className="select-wrap mr5" style={{ flex: 1 }}>
{/* {sessionState?.storeId === 'T01' && ( */}
{session?.storeId === 'T01' && (
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
value={schSelSaleStoreList.filter(function (option) {
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
return false
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else {
if (stuffSearch?.schSelSaleStoreId !== '') {
return option.saleStoreId === stuffSearch.schSelSaleStoreId
} else {
return false
}
}
})}
// isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
isClearable={true}
/>
)}
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
{session?.storeId !== 'T01' && session?.storeLvl === '1' && (
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={showSaleStoreList[0]}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
value={showSaleStoreList.filter(function (option) {
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
return false
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else {
if (stuffSearch?.schSelSaleStoreId !== '') {
return option.saleStoreId === stuffSearch.schSelSaleStoreId
} else {
return false
}
}
})}
// isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
isClearable={false}
/>
)}
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
{session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={showSaleStoreList[0]}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
value={showSaleStoreList.filter(function (option) {
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
return false
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else {
if (stuffSearch?.schSelSaleStoreId !== '') {
return option.saleStoreId === stuffSearch.schSelSaleStoreId
} else {
return false
}
}
})}
isDisabled={true}
isClearable={false}
/>
)}
</div>
<div className="select-wrap" style={{ flex: 1 }}>
<Select
id="long-value-select2"
instanceId="long-value-select2"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref2}
options={otherSaleStoreList}
onChange={onSelectionChange2}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isDisabled={otherSaleStoreList.length > 1 ? false : true}
isClearable={true}
value={otherSaleStoreList.filter(function (option) {
return option.saleStoreId === otherSaleStoreId
})}
/>
</div>
</div>
</td>
</tr>
<tr>
<th>{getMessage('stuff.search.period')}</th>
<td colSpan={7}>
<div className="form-flex-wrap">
<div className="radio-wrap mr10">
<div className="d-check-radio light mr10">
<input
type="radio"
name="radio_ptype"
id="radio_u"
checked={stuffSearch?.schDateType === 'U' ? true : false}
value={'U'}
onChange={(e) => {
setDateType(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
}}
/>
<label htmlFor="radio_u">{getMessage('stuff.search.schDateTypeU')}</label>
</div>
<div className="d-check-radio light">
<input
type="radio"
name="radio_ptype"
id="radio_r"
checked={stuffSearch?.schDateType === 'R' ? true : false}
value={'R'}
onChange={(e) => {
setDateType(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
}}
/>
<label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}</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>
{/* 퍼블적용끝 */}
</>
)
}