2024-11-14 11:27:40 +09:00

76 lines
2.7 KiB
JavaScript

'use client'
import React, { useState, useEffect } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useRouter, useSearchParams } from 'next/navigation'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import dayjs from 'dayjs'
export default function StuffHeader() {
const { getMessage } = useMessage()
const router = useRouter()
const searchParams = useSearchParams()
const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
const [headerData, setHeaderData] = useState({})
useEffect(() => {
get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
if (res != null && res != '') {
setHeaderData(res)
} else {
alert(getMessage('stuff.detail.header.notExistObjectNo'))
router.push('/management/stuff')
}
})
}, [objectNo])
//물건번호 복사
const copyObjectNo = async (objectNo) => {
await navigator.clipboard.writeText(objectNo)
alert(getMessage('stuff.detail.header.message2'))
try {
} catch (error) {
alert(getMessage('stuff.detail.header.message3'))
}
}
return (
<div className="infomation-box-wrap">
<div className="sub-table-box">
<div className="info-title">{getMessage('stuff.detail.header.objectNo')}</div>
<div className="info-inner">
{headerData.objectNo}{' '}
<button
className="copy-ico"
onClick={() => {
copyObjectNo(headerData.objectNo)
}}
></button>
</div>
</div>
<div className="sub-table-box">
<div className="info-title">{getMessage('stuff.detail.header.specificationConfirmDate')}</div>
<div className="info-inner">{headerData.specificationConfirmDate}</div>
</div>
<div className="sub-table-box">
<div className="info-title">{getMessage('stuff.detail.header.lastEditDatetime')}</div>
<div className="info-inner">
{headerData?.lastEditDatetime ? `${dayjs(headerData.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}` : ''}{' '}
{headerData?.lastEditUserName ? `(${headerData.lastEditUserName})` : null}
</div>
</div>
<div className="sub-table-box">
<div className="info-title">{getMessage('stuff.detail.header.createDatetime')}</div>
<div className="info-inner">
{headerData?.createDatetime ? `${dayjs(headerData.lastEditDatetime).format('YYYY.MM.DD')}` : ''}{' '}
{headerData?.createUserName ? `(${headerData.createUserName})` : null}
</div>
</div>
</div>
)
}