373 lines
11 KiB
JavaScript
373 lines
11 KiB
JavaScript
'use client'
|
|
|
|
import React, { useEffect, useState, useRef } from 'react'
|
|
import { useRouter, usePathname } from 'next/navigation'
|
|
import { Button } from '@nextui-org/react'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { QToast } from '@/hooks/useToast'
|
|
import StuffQGrid from './StuffQGrid'
|
|
import { useI18n } from '@/locales/client'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { stuffSearchState } from '@/store/stuffAtom'
|
|
import { queryStringFormatter } from '@/util/common-utils'
|
|
import dayjs from 'dayjs'
|
|
import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
|
|
dayjs.extend(isLeapYear)
|
|
|
|
export default function Stuff() {
|
|
const stuffSearchParams = useRecoilValue(stuffSearchState)
|
|
|
|
const { get, del } = useAxios()
|
|
const gridRef = useRef()
|
|
const lang = useI18n()
|
|
|
|
const [gridCount, setGridCount] = useState(0)
|
|
const [selectedRowData, setSelectedRowData] = useState([])
|
|
const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
|
|
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
//그리드 내부 복사버튼
|
|
const copyNo = async (value) => {
|
|
try {
|
|
await navigator.clipboard.writeText(value)
|
|
QToast({
|
|
message: `${value}물건번호가 복사되었습니다`,
|
|
type: 'info',
|
|
})
|
|
} catch (error) {
|
|
QToast({
|
|
message: `클립보드 복사에 실패하였습니다`,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
|
|
const [gridProps, setGridProps] = useState({
|
|
gridData: [],
|
|
isPageable: false,
|
|
// sets 10 rows per page (default is 100)
|
|
paginationPageSize: 100,
|
|
// allows the user to select the page size from a predefined list of page sizes
|
|
paginationPageSizeSelector: [100, 200, 300, 400],
|
|
gridColumns: [
|
|
{
|
|
field: 'lastEditDatetime',
|
|
headerName: lang('stuff.gridHeader.lastEditDatetime'),
|
|
headerCheckboxSelection: true,
|
|
headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
|
|
checkboxSelection: true,
|
|
showDisabledCheckboxes: true,
|
|
// headerClass: 'centered', //_test.scss에 추가 테스트
|
|
// .centered {
|
|
// .ag-header-cell-label {
|
|
// justify-content: center !important;
|
|
// }
|
|
// }
|
|
cellStyle: { textAlign: 'center' },
|
|
//suppressMovable: true, //헤더 못움직이게
|
|
// width : 100
|
|
// minWidth : 100
|
|
// maxWidth : 100
|
|
valueFormatter: function (params) {
|
|
if (params.value) {
|
|
return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: 'objectNo',
|
|
headerName: lang('stuff.gridHeader.objectNo'),
|
|
// headerClass: 'centered', //_test.scss에 추가 테스트
|
|
cellRenderer: function (params) {
|
|
if (params.data.objectNo) {
|
|
return (
|
|
<div>
|
|
<Button
|
|
size="sm"
|
|
// isDisabled={params.data.successful ? false : true}
|
|
color="default"
|
|
onPress={() => {
|
|
copyNo(params.value)
|
|
}}
|
|
>
|
|
복사
|
|
</Button>
|
|
<span>{params.value}</span>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
cellRendererParams: {
|
|
onPress: copyNo,
|
|
},
|
|
},
|
|
{
|
|
field: 'planTotCnt',
|
|
headerName: lang('stuff.gridHeader.planTotCnt'),
|
|
cellStyle: { textAlign: 'right' },
|
|
},
|
|
{ field: 'objectName', headerName: lang('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
|
|
{
|
|
field: 'saleStoreId',
|
|
headerName: lang('stuff.gridHeader.saleStoreId'),
|
|
cellStyle: { textAlign: 'left' },
|
|
},
|
|
{ field: 'saleStoreName', headerName: lang('stuff.gridHeader.saleStoreName'), cellStyle: { textAlign: 'left' } },
|
|
{ field: 'address', headerName: lang('stuff.gridHeader.address'), cellStyle: { textAlign: 'left' } },
|
|
{ field: 'dispCompanyName', headerName: lang('stuff.gridHeader.dispCompanyName'), cellStyle: { textAlign: 'left' } },
|
|
{ field: 'receiveUser', headerName: lang('stuff.gridHeader.receiveUser'), cellStyle: { textAlign: 'left' } },
|
|
{
|
|
field: 'specDate',
|
|
headerName: lang('stuff.gridHeader.specDate'),
|
|
valueFormatter: function (params) {
|
|
if (params.value) {
|
|
return dayjs(params?.value).format('YYYY.MM.DD')
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
cellStyle: { textAlign: 'center' },
|
|
},
|
|
{
|
|
field: 'createDatetime',
|
|
headerName: lang('stuff.gridHeader.createDatetime'),
|
|
valueFormatter: function (params) {
|
|
if (params.value) {
|
|
return dayjs(params?.value).format('YYYY.MM.DD')
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
cellStyle: { textAlign: 'center' },
|
|
},
|
|
],
|
|
gridCount: 0,
|
|
})
|
|
|
|
//그리드 더블클릭
|
|
const getCellDoubleClicked = (event) => {
|
|
if (event.column.colId === 'objectNo') {
|
|
return
|
|
} else {
|
|
console.log(' 상세이동::::::::', event.data)
|
|
if (event.data.objectNo) {
|
|
router.push(`${pathname}/detail?objectNo=${event.data.objectNo.toString()}`)
|
|
} else {
|
|
QToast({
|
|
message: '물건정보가 없습니다',
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
//그리드 체크박스 선택시
|
|
const getSelectedRowdata = (data) => {
|
|
// console.log('data:::', data)
|
|
// let delData = data.map((row) => {
|
|
// return row.objectNo
|
|
// })
|
|
// console.log('delData::', delData)
|
|
setSelectedRowData(data)
|
|
setSelectedRowDataCount(data.length)
|
|
}
|
|
|
|
//물건삭제
|
|
const fnDeleteRowData = (data) => {
|
|
console.log('물건삭제:::::::::::')
|
|
if (data.length === 0) {
|
|
QToast({
|
|
message: '삭제할 데이터를 선택하세요',
|
|
type: 'error',
|
|
})
|
|
return false
|
|
}
|
|
let errCount = 0
|
|
data.forEach((cell) => {
|
|
if (!cell.objectNo) {
|
|
// if (errCount === 0) {
|
|
// QToast({
|
|
// message: `물건정보가 있는 행만 삭제 됩니다`,
|
|
// type: 'error',
|
|
// })
|
|
// }
|
|
errCount++
|
|
}
|
|
})
|
|
|
|
async function fetchDelete(data) {
|
|
console.log('물건삭제API호출!!!!!!!!!', data)
|
|
//행추가말고 api데이터만 보냄
|
|
// let newData = data.filter((item) => item.company != null)
|
|
// console.log('삭제에 전송되는 데이타::', newData)
|
|
// await del({ url: '', data:newData })
|
|
await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
|
|
// try {
|
|
// const res = await del({url:'', data:newData})
|
|
|
|
// if(!res || res.length === 0) {
|
|
|
|
// } else {
|
|
fetchData()
|
|
// }
|
|
// } catch (error) {
|
|
// console.error('Data Delete error:', error);
|
|
// }
|
|
}
|
|
|
|
// 삭제API 완료 후 fetchData Api호출
|
|
async function fetchData() {
|
|
console.log('물건삭제후 조회API호출!!!!!!!!!!!!!', stuffSearchParams)
|
|
const data = await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
|
|
setGridProps({ ...gridProps, gridData: data, count: data.length })
|
|
setGridCount(data.length)
|
|
//data.length = 10
|
|
//setGridProps({ ...gridProps, gridData: data, count: data.length-1})
|
|
//setGridCount(data.length - 1 )
|
|
}
|
|
|
|
if (errCount === 0) {
|
|
// console.log('errCount::::::::', errCount)
|
|
fetchDelete(data)
|
|
// fetchData()
|
|
} else {
|
|
QToast({
|
|
message: `물건정보가 있는 행만 선택해주세요`,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
|
|
//행추가
|
|
let newCount = 0
|
|
const addRowItems = () => {
|
|
// console.log('girdRef::::::', gridRef.current.api)
|
|
const newItems = [
|
|
{
|
|
mission: newCount + 1,
|
|
successful: true,
|
|
},
|
|
]
|
|
gridRef.current.api.applyTransaction({
|
|
add: newItems,
|
|
addIndex: newCount,
|
|
})
|
|
newCount++
|
|
}
|
|
|
|
//행삭제
|
|
const removeRowItems = () => {
|
|
// console.log('selectedRowData::', selectedRowData)
|
|
let errCount = 0
|
|
selectedRowData.forEach((cell) => {
|
|
if (!cell.company) {
|
|
let newSelectedRowData = selectedRowData.filter((item) => item.company == null)
|
|
gridRef.current.api.applyTransaction({ remove: newSelectedRowData })
|
|
} else {
|
|
if (errCount === 0) {
|
|
QToast({
|
|
message: `행추가로 추가 한 행만 삭제됩니다.`,
|
|
type: 'error',
|
|
})
|
|
}
|
|
errCount++
|
|
}
|
|
})
|
|
}
|
|
|
|
// 진입시 그리드 데이터 조회
|
|
useEffect(() => {
|
|
if (stuffSearchParams?.code === 'S') {
|
|
const params = {
|
|
schObjectNo: '',
|
|
schSaleStoreId: '',
|
|
schAddress: '',
|
|
schObjectName: '',
|
|
schSaleStoreName: '',
|
|
schSpecDateYn: '',
|
|
schReceiveUser: '',
|
|
schDispCompanyName: '',
|
|
schDateType: 'U',
|
|
schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
|
|
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
|
}
|
|
|
|
async function fetchData() {
|
|
console.log('화면진입:::::::::::::', params)
|
|
const apiUrl = `/api/object/v1.0/object?saleStoreId=201TES01&${queryStringFormatter(params)}`
|
|
// console.log('apiUrl::', apiUrl)
|
|
|
|
await get({
|
|
url: apiUrl,
|
|
}).then((res) => {
|
|
if (res.length > 0) {
|
|
console.log('API결과:::::::', res)
|
|
setGridProps({ ...gridProps, gridData: res, count: res.length })
|
|
setGridCount(res.length)
|
|
}
|
|
})
|
|
}
|
|
fetchData()
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (stuffSearchParams?.code === 'E') {
|
|
console.log('조회 눌럿을때 ::::::::::::::', stuffSearchParams)
|
|
async function fetchData() {
|
|
const apiUrl = `/api/object/v1.0/object?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
|
|
await get({ url: apiUrl }).then((res) => {
|
|
console.log('API결과:::::::', res)
|
|
setGridProps({ ...gridProps, gridData: res, count: res.length })
|
|
setGridCount(res.length)
|
|
})
|
|
}
|
|
fetchData()
|
|
}
|
|
}, [stuffSearchParams])
|
|
|
|
return (
|
|
<>
|
|
<div className="text-2xl">
|
|
물건목록
|
|
<span>
|
|
전체 : {gridCount} // 선택 : {selectedRowDataCount}
|
|
</span>
|
|
<div align="right">
|
|
{/* <Button
|
|
color="primary"
|
|
onPress={() => {
|
|
fnDeleteRowData(selectedRowData)
|
|
}}
|
|
>
|
|
물건삭제
|
|
</Button> */}
|
|
{/* <Button
|
|
color="primary"
|
|
onPress={() => {
|
|
addRowItems()
|
|
}}
|
|
>
|
|
행추가
|
|
</Button>
|
|
<Button
|
|
color="primary"
|
|
onPress={() => {
|
|
removeRowItems()
|
|
}}
|
|
>
|
|
행삭제
|
|
</Button> */}
|
|
</div>
|
|
<div style={{ width: '100%', height: '100%' }}>
|
|
<StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|