물건현황 목록, 상세 1차점,2차점 즐겨찾기 & 목록 그리드 헤더 정렬추가

This commit is contained in:
basssy 2024-10-29 10:14:48 +09:00
parent 09abb897ac
commit eb636881da
4 changed files with 219 additions and 101 deletions

View File

@ -43,9 +43,9 @@ export default function Stuff() {
const copyNo = async (value) => {
try {
await navigator.clipboard.writeText(value)
alert('물건번호가 복사되었습니다.')
alert(getMessage('stuff.detail.header.message2'))
} catch (error) {
alert('물건번호 복사에 실패했습니다.')
alert(getMessage('stuff.detail.header.message3'))
}
}

View File

@ -88,6 +88,9 @@ export default function StuffDetail() {
const [prefCodeList, setPrefCodeList] = useState([]) //
const [prefValue, setPrefValue] = useState('')
const [saleStoreList, setSaleStoreList] = useState([]) //
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
@ -318,21 +321,37 @@ export default function StuffDetail() {
//1 : X167 T01
//2 : 10X22, 201X112
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
let url
if (sessionState?.storeId === 'T01') {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
} else {
url = `/api/object/saleStore/${sessionState?.storeId}/list`
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
const firstList = res.filter((row) => row.saleStoreLevel === '1')
let favList
if (sessionState?.storeId === 'T01') {
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
setSaleStoreList(firstList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
} else {
//1
setSaleStoreList(firstList)
}
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
//1
setSaleStoreList(firstList)
let filterOtherList
if (sessionState?.storeId === 'T01') {
filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
setOriginOtherSaleStoreList(filterOtherList)
setOtherSaleStoreList(filterOtherList)
} else {
//1
//T01 2
setOriginOtherSaleStoreList(otherList)
setOtherSaleStoreList(otherList)
}
@ -380,13 +399,29 @@ export default function StuffDetail() {
//1 : X167 T01
//2 : 10X22, 201X112
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
let url
if (sessionState?.storeId === 'T01') {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
} else {
url = `/api/object/saleStore/${sessionState?.storeId}/list`
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
const firstList = res.filter((row) => row.saleStoreLevel === '1')
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
let favList
//1
setSaleStoreList(firstList)
if (sessionState?.storeId === 'T01') {
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
setSaleStoreList(firstList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
} else {
//1
setSaleStoreList(firstList)
}
let filterOtherList
if (sessionState?.storeId === 'T01') {
@ -495,6 +530,16 @@ export default function StuffDetail() {
const onRadioChange = (key) => {
setSelectObjectStatusId(key.target.value)
}
//1 input
const onInputChange = (key) => {
if (key !== '') {
setShowSaleStoreList(saleStoreList)
} else {
setShowSaleStoreList(favoriteStoreList)
}
}
//1
const onSelectionChange = (key) => {
if (isObjectNotEmpty(key)) {
@ -516,7 +561,7 @@ export default function StuffDetail() {
}
} else {
// EDIT
if (planReqNo !== null) {
if (planReqNo !== null && planReqNo !== '') {
if (confirm(getMessage('stuff.detail.confirm.message1'))) {
delFlg = true
} else {
@ -629,7 +674,7 @@ export default function StuffDetail() {
}
} else {
//EDIT
if (planReqNo !== null) {
if (planReqNo !== null && planReqNo !== '') {
if (confirm(getMessage('stuff.detail.confirm.message1'))) {
delFlg = true
} else {
@ -849,7 +894,6 @@ export default function StuffDetail() {
errors.installHeight = true
}
// console.log(':::::', errors)
setIsFormValid(Object.keys(errors).length === 0 ? true : false)
}
}, [
@ -906,20 +950,17 @@ export default function StuffDetail() {
//
const onValid = async () => {
const formData = form.getValues()
let errors = {}
let fieldNm
//
if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
fieldNm = getMessage('stuff.detail.receiveUser')
errors = fieldNm
inputReceiveUserEl.current.focus()
}
//
if (!formData.objectName || formData.objectName.trim().length === 0) {
fieldNm = getMessage('stuff.detail.objectStatusId')
errors = fieldNm
inputObjectNameEl.current.focus()
}
//
if (!formData.objectNameOmit) {
@ -935,13 +976,11 @@ export default function StuffDetail() {
if (!formData.zipNo) {
fieldNm = getMessage('stuff.detail.zipNo')
errors = fieldNm
inputZipNoEl.current.focus()
}
//
if (!formData.address) {
fieldNm = getMessage('stuff.detail.address')
errors = fieldNm
inputAddressEl.current.focus()
}
//
if (!formData.prefId || formData.prefId === '0') {
@ -962,7 +1001,6 @@ export default function StuffDetail() {
if (!formData.verticalSnowCover) {
fieldNm = getMessage('stuff.detail.verticalSnowCover')
errors = fieldNm
inputVerticalSnowCoverEl.current.focus()
}
//
@ -974,7 +1012,6 @@ export default function StuffDetail() {
if (!formData.installHeight) {
fieldNm = getMessage('stuff.detail.installHeight')
errors = fieldNm
inputInstallHeightEl.current.focus()
}
if (Object.keys(errors).length > 0) {
@ -1306,33 +1343,68 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
{(sessionState?.storeId === 'T01' && (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={showSaleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
></Select>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)) || (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
></Select>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)}
</div>
</td>
</tr>
@ -1651,13 +1723,7 @@ export default function StuffDetail() {
</th>
<td>
<div className="input-wrap" style={{ width: '500px' }}>
<input
type="text"
className="input-light"
{...form.register('receiveUser')}
value={form.watch('receiveUser') || ''}
ref={inputReceiveUserEl}
/>
<input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
</div>
</td>
</tr>
@ -1686,7 +1752,7 @@ export default function StuffDetail() {
})}
{/* 상세라디오끝 */}
<div className="input-wrap mr5" style={{ width: '545px' }}>
<input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
<input type="text" className="input-light" {...form.register('objectName')} />
</div>
<div className="select-wrap" style={{ width: '120px' }}>
<Select
@ -1732,33 +1798,68 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
{(sessionState?.storeId === 'T01' && (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)) || (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)}
</div>
</td>
</tr>
@ -1811,7 +1912,7 @@ export default function StuffDetail() {
<td>
<div className="flx-box">
<div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
</div>
<Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
{getMessage('stuff.detail.btn.addressPop')}
@ -1848,13 +1949,7 @@ export default function StuffDetail() {
)}
</div>
<div className="input-wrap mr5" style={{ width: '580px' }}>
<input
type="text"
className="input-light"
value={form.watch('address') || ''}
{...form.register('address')}
ref={inputAddressEl}
/>
<input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
</div>
</div>
</td>
@ -1935,7 +2030,6 @@ export default function StuffDetail() {
onKeyUp={handleKeyUp}
value={form.watch('verticalSnowCover') || ''}
{...register('verticalSnowCover')}
ref={inputVerticalSnowCoverEl}
/>
</div>
<span className="mr10">cm</span>
@ -1987,7 +2081,6 @@ export default function StuffDetail() {
onKeyUp={handleKeyUp}
value={form.watch('installHeight') || ''}
{...register('installHeight')}
ref={inputInstallHeightEl}
/>
</div>
<span>m</span>
@ -2017,7 +2110,7 @@ export default function StuffDetail() {
<th>{getMessage('stuff.detail.remarks')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" {...form.register('remarks')} />
<input type="text" className="input-light" {...form.register('remarks')} value={form.watch('remarks') || ''} />
</div>
</td>
</tr>

View File

@ -39,7 +39,7 @@ export default function StuffQGrid(props) {
return {
filter: false,
flex: 1,
sortable: false,
sortable: true,
suppressMovable: true,
resizable: true,
suppressSizeToFit: false,

View File

@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
// import Select from 'react-dropdown-select'
import Select from 'react-select'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
@ -57,7 +56,9 @@ export default function StuffSearchCondition() {
const [receiveUser, setReceiveUser] = useState('') //
const [dateType, setDateType] = useState('U') //(U)/(R)
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) // SELECT
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) // SELECT
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //
//
const onSubmit = () => {
let diff = dayjs(endDate).diff(startDate, 'day')
@ -128,13 +129,24 @@ export default function StuffSearchCondition() {
useEffect(() => {
if (isObjectNotEmpty(sessionState)) {
// storeId T01 1
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
let url
if (sessionState?.storeId === 'T01') {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
} else {
url = `/api/object/saleStore/${sessionState?.storeId}/list`
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
row.value = row.saleStoreId
row.label = row.saleStoreName
})
setSchSelSaleStoreList(res)
const allList = res
const favList = res.filter((row) => row.priority !== 'B')
setSchSelSaleStoreList(allList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
}
})
}
@ -147,6 +159,15 @@ export default function StuffSearchCondition() {
}
}
//
const onInputChange = (key) => {
if (key !== '') {
setShowSaleStoreList(schSelSaleStoreList)
} else {
setShowSaleStoreList(favoriteStoreList)
}
}
//
const onSelectionChange = (key) => {
if (isObjectNotEmpty(key)) {
@ -300,11 +321,15 @@ export default function StuffSearchCondition() {
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={schSelSaleStoreList}
// options={schSelSaleStoreList}
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
value={schSelSaleStoreList.filter(function (option) {
// value={schSelSaleStoreList.filter(function (option) {
value={showSaleStoreList.filter(function (option) {
// console.log(' value::::', option)
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
return false
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {