qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

물건현황 화면 수정 react-select scss, svg 적용

Browse Source
This commit is contained in:
basssy 2024-10-18 14:15:00 +09:00
parent 3fccada6e8
commit 325cef14f0
6 changed files with 73 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/common/select_del.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 370 B

17
src/components/management/Stuff.jsx
View File

@ -245,9 +245,8 @@ export default function Stuff() {
} }
async function fetchData() { async function fetchData() {
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}` // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}` const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
await get({ await get({
url: apiUrl, url: apiUrl,
}).then((res) => { }).then((res) => {
@ -303,8 +302,8 @@ export default function Stuff() {
setPageNo(1) setPageNo(1)
async function fetchData() { async function fetchData() {
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
await get({ url: apiUrl }).then((res) => { await get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) { if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -333,8 +332,8 @@ export default function Stuff() {
}) })
setPageNo(1) setPageNo(1)
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
get({ url: apiUrl }).then((res) => { get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) { if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -364,8 +363,8 @@ export default function Stuff() {
setPageNo(1) setPageNo(1)
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
get({ url: apiUrl }).then((res) => { get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) { if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })

86
src/components/management/StuffDetail.jsx
View File

@ -127,7 +127,7 @@ export default function StuffDetail() {
} }
}) })
} }
}, [objectNo]) }, [objectNo, sessionState])
useEffect(() => { useEffect(() => {
if (isObjectNotEmpty(detailData)) { if (isObjectNotEmpty(detailData)) {
@ -303,7 +303,7 @@ export default function StuffDetail() {
} }
// console.log('임시저장용::', errors) // console.log('임시저장용::', errors)
setIsFormValid(Object.keys(errors).length === 0) setIsFormValid(Object.keys(errors).length === 0 ? true : false)
} else { } else {
console.log('상세일때 폼체크') console.log('상세일때 폼체크')
} }
@ -362,25 +362,14 @@ export default function StuffDetail() {
form.setValue('areaId', e.target.value) form.setValue('areaId', e.target.value)
} }
// useEffect(() => {
// if (!isEmptyArray(areaIdList)) {
// let _prefName = form.watch('prefName')
// // console.log('기준풍속 가져오는 API', _prefName)
// get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
// // console.log('res::', res)
// if (!isEmptyArray(res)) {
// setWindSpeedList(res)
// }
// })
// }
// }, [areaIdList])
//필수값 다 입력했을때 //필수값 다 입력했을때
const onValid = (data) => { const onValid = (data, e) => {
const formData = form.getValues()
console.log('필수값 통과:::', data, formData)
// console.log('필수값 formData:::', formData)
// 수정모드일때는 PUT // 수정모드일때는 PUT
// console.log('필수값 다 있고 저장') // console.log('필수값 다 있고 저장')
// console.log('data::::::', data) // console.log('data::::::', data)
const formData = form.getValues()
// console.log('formData::::', formData) // console.log('formData::::', formData)
// const _dispCompanyName = watch('dispCompanyName') // const _dispCompanyName = watch('dispCompanyName')
// const _objectStatusId = watch('objectStatusId') // const _objectStatusId = watch('objectStatusId')
@ -408,6 +397,8 @@ export default function StuffDetail() {
// 임시저장 // 임시저장
const onTempSave = async () => { const onTempSave = async () => {
console.log('임시저장:::::')
return
const formData = form.getValues() const formData = form.getValues()
// console.log('formData::', formData) // console.log('formData::', formData)
const params = { const params = {
@ -487,9 +478,9 @@ export default function StuffDetail() {
<div className="input-wrap mr5" style={{ width: '200px' }}> <div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" readOnly /> <input type="text" className="input-light" readOnly />
</div> </div>
<button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}> <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
{getMessage('stuff.planReqPopup.title')} {getMessage('stuff.planReqPopup.title')}
</button> </Button>
</div> </div>
</td> </td>
</tr> </tr>
@ -555,6 +546,8 @@ export default function StuffDetail() {
<div className="flx-box"> <div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}> <div className="select-wrap mr5" style={{ width: '567px' }}>
<Select <Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom" className="react-select-custom"
classNamePrefix="custom" classNamePrefix="custom"
placeholder="Select" placeholder="Select"
@ -587,6 +580,8 @@ export default function StuffDetail() {
<div className="flx-box"> <div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}> <div className="select-wrap mr5" style={{ width: '567px' }}>
<Select <Select
id="long-value-select2"
instanceId="long-value-select2"
className="react-select-custom" className="react-select-custom"
classNamePrefix="custom" classNamePrefix="custom"
placeholder="Select" placeholder="Select"
@ -695,9 +690,9 @@ export default function StuffDetail() {
</select> </select>
</div> */} </div> */}
<span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span> <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
<button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}> <Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
{getMessage('stuff.detail.btn.windSpeedPop')} {getMessage('stuff.detail.btn.windSpeedPop')}
</button> </Button>
</div> </div>
</td> </td>
</tr> </tr>
@ -790,18 +785,18 @@ export default function StuffDetail() {
</div> </div>
<div className="sub-table-footer"> <div className="sub-table-footer">
{!isFormValid ? ( {!isFormValid ? (
<button className="btn-origin grey mr5" onClick={onTempSave}> <Button className="btn-origin grey mr5" onClick={onTempSave}>
New화면 임시저장 New화면 임시저장
</button> </Button>
) : ( ) : (
<button type="submit" className="btn-origin navy mr5"> <Button type="submit" className="btn-origin navy mr5">
NEW 화면 저장 NEW 화면 저장
</button> </Button>
)} )}
<Link href="/management/stuff"> <Link href="/management/stuff">
<button type="button" className="btn-origin grey"> <Button type="button" className="btn-origin grey">
NEW화면 물건목록이동 NEW화면 물건목록이동
</button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
@ -827,9 +822,9 @@ export default function StuffDetail() {
<div className="input-wrap mr5" style={{ width: '200px' }}> <div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" readOnly /> <input type="text" className="input-light" readOnly />
</div> </div>
<button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}> <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
{getMessage('stuff.planReqPopup.title')} {getMessage('stuff.planReqPopup.title')}
</button> </Button>
</div> </div>
</td> </td>
</tr> </tr>
@ -916,32 +911,32 @@ export default function StuffDetail() {
{objectNo.substring(0, 1) === 'R' ? ( {objectNo.substring(0, 1) === 'R' ? (
<> <>
<Link href="/management/stuff"> <Link href="/management/stuff">
<button type="button" className="btn-origin grey mr5"> <Button type="button" className="btn-origin grey mr5">
R상세:물건목록 R상세:물건목록
</button> </Button>
</Link> </Link>
<button type="submit" className="btn-origin navy mr5"> <Button type="submit" className="btn-origin navy mr5">
R상세:저장 R상세:저장
</button> </Button>
<button type="submit" className="btn-origin navy" onClick={onDelete}> <Button type="submit" className="btn-origin navy" onClick={onDelete}>
R상세:물건삭제 R상세:물건삭제
</button> </Button>
</> </>
) : ( ) : (
<> <>
{!isFormValid ? ( {!isFormValid ? (
<button type="submit" className="btn-origin navy mr5" onClick={onTempSave}> <Button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
TEMP상세:임시저장 TEMP상세:임시저장
</button> </Button>
) : ( ) : (
<button type="submit" className="btn-origin navy mr5"> <Button type="submit" className="btn-origin navy mr5">
TEMP상세:저장 TEMP상세:저장
</button> </Button>
)} )}
<Link href="/management/stuff"> <Link href="/management/stuff">
<button type="button" className="btn-origin grey"> <Button type="button" className="btn-origin grey">
T상세:물건목록 T상세:물건목록
</button> </Button>
</Link> </Link>
</> </>
)} )}
@ -949,7 +944,14 @@ export default function StuffDetail() {
)} )}
{showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />} {showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
{showDesignRequestButtonValid && ( {showDesignRequestButtonValid && (
<PlanRequestPop setShowDesignRequestButtonValid={setShowDesignRequestButtonValid} planReqInfo={setPlanReqInfo} /> <PlanRequestPop
setShowDesignRequestButtonValid={setShowDesignRequestButtonValid}
saleStoreId={form.watch('saleStoreId')}
saleStoreLevel={form.watch('saleStoreLevel')}
otherSaleStoreId={form.watch('otherSaleStoreId')}
otherSaleStoreLevel={form.watch('otherSaleStoreLevel')}
planReqInfo={setPlanReqInfo}
/>
)} )}
{showWindSpeedButtonValid && ( {showWindSpeedButtonValid && (
<WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} /> <WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />

2
src/components/management/StuffSearchCondition.jsx
View File

@ -254,6 +254,8 @@ export default function StuffSearchCondition() {
<div className="select-wrap"> <div className="select-wrap">
{schSelSaleStoreList?.length > 0 && ( {schSelSaleStoreList?.length > 0 && (
<Select <Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom" className="react-select-custom"
classNamePrefix="custom" classNamePrefix="custom"
placeholder="Select" placeholder="Select"

17
src/components/management/popup/PlanRequestPop.jsx
View File

@ -20,8 +20,6 @@ export default function PlanRequestPop(props) {
const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수 const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
const [totalCount, setTotalCount] = useState(0) //총 갯수 const [totalCount, setTotalCount] = useState(0) //총 갯수
const sessionState = useRecoilValue(sessionStore)
const globalLocaleState = useRecoilValue(globalLocaleStore) const globalLocaleState = useRecoilValue(globalLocaleStore)
const [planReqObject, setPlanReqObject] = useState({}) const [planReqObject, setPlanReqObject] = useState({})
@ -103,10 +101,10 @@ export default function PlanRequestPop(props) {
// 조회 // 조회
const onSubmit = (page, type) => { const onSubmit = (page, type) => {
const params = { const params = {
saleStoreId: 'T100', // saleStoreId: 'T100',
saleStoreLevel: '1', // saleStoreLevel: '1',
// saleStoreId: sessionState?.storeId, saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
// saleStoreLevel: sessionState?.storeLvl, saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
schPlanReqNo: planReqSearch?.schPlanReqNo ? planReqSearch.schPlanReqNo : schPlanReqNo, schPlanReqNo: planReqSearch?.schPlanReqNo ? planReqSearch.schPlanReqNo : schPlanReqNo,
schTitle: planReqSearch?.schTitle ? planReqSearch.schTitle : schTitle, schTitle: planReqSearch?.schTitle ? planReqSearch.schTitle : schTitle,
schAddress: planReqSearch?.schAddress ? planReqSearch.schAddress : schAddress, schAddress: planReqSearch?.schAddress ? planReqSearch.schAddress : schAddress,
@ -114,8 +112,8 @@ export default function PlanRequestPop(props) {
schPlanReqName: planReqSearch?.schPlanReqName ? planReqSearch.schPlanReqName : schPlanReqName, schPlanReqName: planReqSearch?.schPlanReqName ? planReqSearch.schPlanReqName : schPlanReqName,
schPlanStatCd: planReqSearch?.schPlanStatCd ? planReqSearch.schPlanStatCd : schPlanStatCd, schPlanStatCd: planReqSearch?.schPlanStatCd ? planReqSearch.schPlanStatCd : schPlanStatCd,
schDateGbn: planReqSearch?.schDateGbn ? planReqSearch.schDateGbn : schDateGbn, schDateGbn: planReqSearch?.schDateGbn ? planReqSearch.schDateGbn : schDateGbn,
// schStartDt: dayjs(startDate).format('YYYY-MM-DD'), schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
// schEndDt: dayjs(endDate).format('YYYY-MM-DD'), schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1, startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
endRow: type === 'S' ? 1 * pageSize : page * pageSize, endRow: type === 'S' ? 1 * pageSize : page * pageSize,
} }
@ -124,6 +122,7 @@ export default function PlanRequestPop(props) {
} else { } else {
setPageNo(page) setPageNo(page)
} }
// console.log(params)
const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}` const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
promiseGet({ url: apiUrl }).then((res) => { promiseGet({ url: apiUrl }).then((res) => {
@ -363,6 +362,8 @@ export default function PlanRequestPop(props) {
<td> <td>
<div className="select-wrap"> <div className="select-wrap">
<Select <Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom" className="react-select-custom"
classNamePrefix="custom" classNamePrefix="custom"
ref={ref} ref={ref}

10
src/styles/_reset.scss
View File

@ -981,16 +981,18 @@ input[type='text'] {
color: #bbbbbb; color: #bbbbbb;
font-weight: 400; font-weight: 400;
} }
.custom__clear-indicator,
.custom__indicator-separator {
display: none;
}
.custom__indicator { .custom__indicator {
padding: 0; padding: 0;
svg { svg {
display: none; display: none;
} }
} }
.custom__clear-indicator {
width: 30px;
height: 100%;
background: url(../../public/static/images/common/select_del.svg) no-repeat center;
background-size: 8px 8px;
}
.custom__dropdown-indicator { .custom__dropdown-indicator {
width: 30px; width: 30px;
height: 100%; height: 100%;