pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

antd table 기본 컬러 변경

master
김장현 2 weeks ago
parent
9c2e07671c
commit
348e93ec36
2 changed files with 365 additions and 317 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 335
      src/components/flight/ControlApprovalsTable.js
  2. 347
      src/components/flight/OperationApprovalsTable.js

335
src/components/flight/ControlApprovalsTable.js
Unescape View File

@ -1,5 +1,6 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { ConfigProvider } from 'antd';
import { Button, Card } from '@component/ui'; import { Button, Card } from '@component/ui';
import { openModal } from '@src/redux/features/comn/message/messageSlice'; import { openModal } from '@src/redux/features/comn/message/messageSlice';
import { FaAngleDown, FaAngleUp } from 'react-icons/fa'; import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
@ -482,6 +483,16 @@ export default function ControlApprovalsTable(props) {
} }
]; ];
const handleIsModal = record => {
dispatch(
openModal({
header: '재검토 사유',
body: record.reviewedReason,
type: 'review'
})
);
};
const handleSave = async row => { const handleSave = async row => {
try { try {
const updateRes = await dispatch( const updateRes = await dispatch(
@ -775,169 +786,183 @@ export default function ControlApprovalsTable(props) {
}; };
return ( return (
<div className='layer-content'> <ConfigProvider
<div className='layer-ti'> theme={{
<div> token: {
<h4>비행승인 신청 검토결과 목록</h4> colorPrimary: '#8a1c05'
</div> // colorBgContainer: '#fff'
</div> }
<div className='search-download'> }}
<div> >
<span className='search-case'> <div className='layer-content'>
{`${formatDate(props.startDate)} `} <div className='layer-ti'>
{props.endDate && props.startDate !== props.endDate <div>
? '~' + formatDate(props.endDate) + ' ' <h4>비행승인 신청 검토결과 목록</h4>
: null} </div>
총
{approvalCdValue.S +
approvalCdValue.F +
approvalCdValue.U +
approvalCdValue.C}
건
</span>
</div> </div>
<div className='search-download'>
<div>
<span className='search-case'>
{`${formatDate(props.startDate)} `}
{props.endDate && props.startDate !== props.endDate
? '~' + formatDate(props.endDate) + ' '
: null}
총
{approvalCdValue.S +
approvalCdValue.F +
approvalCdValue.U +
approvalCdValue.C}
건
</span>
</div>
<div className='download'> <div className='download'>
<Button color='primary' size='sm' onClick={() => handleCheckbox('P')}> <Button
검토 완료 color='primary'
</Button> size='sm'
{/* <Button color='danger' size='sm' onClick={() => handleCheckbox('C')}> onClick={() => handleCheckbox('P')}
>
검토 완료
</Button>
{/* <Button color='danger' size='sm' onClick={() => handleCheckbox('C')}>
요청 반려 요청 반려
</Button> */} </Button> */}
<Button <Button
color='primary' color='primary'
size='sm' size='sm'
onClick={() => handleFileDownload('pdf')} onClick={() => handleFileDownload('pdf')}
> >
한글 다운로드 한글 다운로드
</Button> </Button>
<Button <Button
color='primary' color='primary'
size='sm' size='sm'
onClick={() => handleFileDownload('excel')} onClick={() => handleFileDownload('excel')}
> >
엑셀 다운로드 엑셀 다운로드
</Button> </Button>
</div>
</div> </div>
</div>
<div className='search-case-list'> <div className='search-case-list'>
<div> <div>
<ul> <ul>
<li className='approval'>승인 {approvalCdValue.S}건</li> <li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li> <li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='condition-approved'> <li className='condition-approved'>
조건부 승인 {approvalCdValue.C}건 조건부 승인 {approvalCdValue.C}건
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> <div className='invoice-list-wrapper'>
<div className='invoice-list-wrapper'> <Card>
<Card> <div className='invoice-list-dataTable flight-approval'>
<div className='invoice-list-dataTable flight-approval'> {laancAprvList?.length > 0 ? (
{laancAprvList?.length > 0 ? ( <Form form={form} component={false}>
<Form form={form} component={false}> <ScrollContainer
<ScrollContainer className='scroll-container'
className='scroll-container' ref={scrollContainerRef}
ref={scrollContainerRef} hideScrollbars={false}
hideScrollbars={false} vertical={true}
vertical={true} horizontal={true}
horizontal={true} activationDistance={10}
activationDistance={10} ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외 >
> <div style={{ width: '2000px' }}>
<div style={{ width: '2000px' }}> <Form form={form}>
<Form form={form}> <Table
<Table components={{
components={{ body: {
body: { cell: EditableCell
cell: EditableCell
}
}}
dataSource={laancAprvList
.filter(
i =>
i.applyDt !== '2024-08-26' &&
i.applyDt !== '2024-08-27'
)
.map((item, index) =>
item.areaList.map((area, index) => ({
...area,
key: `${area.planAreaSno}`
}))
)
.flat()}
columns={mergedColumns}
rowClassName={record => {
let className = '';
if (record?.approvalCd === 'S') {
className += 'flight-approval-row editable-row';
} else if (record.approvalCd === 'F') {
className += 'flight-not-approval-row editable-row';
} else if (record.approvalCd === 'C') {
className +=
'flight-condition-approval-row editable-row';
} else className += 'editable-row';
if (props.selected?.length > 0) {
if (record.planAreaSno === props.selected[0]) {
className += ' flight-approval-row-click';
} }
} }}
dataSource={laancAprvList
if (record.length > 1) { .filter(
className += 'expanded-tr'; i =>
} i.applyDt !== '2024-08-26' &&
return className; i.applyDt !== '2024-08-27'
}} )
rowSelection={{ .map((item, index) =>
...rowSelection item.areaList.map((area, index) => ({
}} ...area,
onRow={record => ({ key: `${area.planAreaSno}`
onClick: event => { }))
handleRowClick(record); )
} .flat()}
})} columns={mergedColumns}
loading={laancAprvLoading} rowClassName={record => {
scroll={{ let className = '';
x: 1700 if (record?.approvalCd === 'S') {
}} className += 'flight-approval-row editable-row';
pagination={{ } else if (record.approvalCd === 'F') {
position: ['bottomLeft'] className +=
}} 'flight-not-approval-row editable-row';
rowHoverable={false} } else if (record.approvalCd === 'C') {
expandIconColumnIndex={-1} className +=
onChange={(pagination, filters, sorter, extra) => { 'flight-condition-approval-row editable-row';
handlePageChange(); } else className += 'editable-row';
}}
/> if (props.selected?.length > 0) {
</Form> if (record.planAreaSno === props.selected[0]) {
</div> className += ' flight-approval-row-click';
</ScrollContainer> }
{modal && ( }
<ConfirmModal
modal={modal} if (record.length > 1) {
setModal={setModal} className += 'expanded-tr';
handlerConfirm={() => }
modal.type === 'review' return className;
? updateReviewedType('P', currentPlanAreaSno) }}
: handleSave(modal.row) rowSelection={{
} ...rowSelection
color='primary' }}
/> onRow={record => ({
)} onClick: event => {
</Form> handleRowClick(record);
) : ( }
<div })}
className='d-flex justify-content-center align-items-center ' loading={laancAprvLoading}
style={{ height: '100px', color: '#000' }} scroll={{
> x: 1700
<p>비행승인 신청 건수가 없습니다.</p> }}
</div> pagination={{
)} position: ['bottomLeft']
</div> }}
</Card> rowHoverable={false}
expandIconColumnIndex={-1}
onChange={(pagination, filters, sorter, extra) => {
handlePageChange();
}}
/>
</Form>
</div>
</ScrollContainer>
{modal && (
<ConfirmModal
modal={modal}
setModal={setModal}
handlerConfirm={() =>
modal.type === 'review'
? updateReviewedType('P', currentPlanAreaSno)
: handleSave(modal.row)
}
color='primary'
/>
)}
</Form>
) : (
<div
className='d-flex justify-content-center align-items-center '
style={{ height: '100px', color: '#000' }}
>
<p>비행승인 신청 건수가 없습니다.</p>
</div>
)}
</div>
</Card>
</div>
</div> </div>
</div> </ConfigProvider>
); );
} }

347
src/components/flight/OperationApprovalsTable.js
Unescape View File

@ -1,5 +1,6 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { ConfigProvider } from 'antd';
import { Button, Card, CustomInput } from '@component/ui'; import { Button, Card, CustomInput } from '@component/ui';
import { openModal } from '@src/redux/features/comn/message/messageSlice'; import { openModal } from '@src/redux/features/comn/message/messageSlice';
import { Form, Input, Select, Table } from 'antd'; import { Form, Input, Select, Table } from 'antd';
@ -840,174 +841,196 @@ export default function OperationApprovalsTable(props) {
}; };
return ( return (
<div className='layer-content'> <ConfigProvider
<div className='layer-ti'> theme={{
<div> token: {
<h4>비행승인 신청 검토결과 목록</h4> colorPrimary: '#8a1c05'
</div> // colorBgContainer: '#fff'
</div> }
{ismodal && ( }}
<OperationModal >
isModal={ismodal} <div className='layer-content'>
setIsModal={setIsModal} <div className='layer-ti'>
data={validData} <div>
/> <h4>비행승인 신청 검토결과 목록</h4>
)} </div>
{isCheckBoxModal && (
<OperationCheckBoxModal
checkData={checkData}
setCheckData={setCheckData}
isCheckBoxModal={isCheckBoxModal}
setIsCheckBoxModal={setIsCheckBoxModal}
handlerErrorModal={handlerErrorModal}
handlerSearch={props.handlerSearch}
filterArea={props.filterArea}
filterId={props.filterId}
startDate={props.startDate}
endDate={props.endDate}
/>
)}
<div className='search-download'>
<div>
<span className='search-case'>
{formatDate(props.startDate)}
{props.endDate && props.startDate !== props.endDate
? '~' + formatDate(props.endDate) + ' '
: null}
총
{approvalCdValue.S +
approvalCdValue.F +
approvalCdValue.U +
approvalCdValue.C}
건
</span>
</div> </div>
<div className='download'> {ismodal && (
<Button color='primary' size='sm' onClick={() => handleCheckbox('S')}> <OperationModal
검토 완료 isModal={ismodal}
</Button> setIsModal={setIsModal}
<Button color='primary' size='sm' onClick={() => handleCheckbox('Q')}> data={validData}
검토 요청 />
</Button> )}
{/* <Button color='primary' size='sm' onClick={() => handleCheckbox('A')}> {isCheckBoxModal && (
<OperationCheckBoxModal
checkData={checkData}
setCheckData={setCheckData}
isCheckBoxModal={isCheckBoxModal}
setIsCheckBoxModal={setIsCheckBoxModal}
handlerErrorModal={handlerErrorModal}
handlerSearch={props.handlerSearch}
filterArea={props.filterArea}
filterId={props.filterId}
startDate={props.startDate}
endDate={props.endDate}
/>
)}
<div className='search-download'>
<div>
<span className='search-case'>
{formatDate(props.startDate)}
{props.endDate && props.startDate !== props.endDate
? '~' + formatDate(props.endDate) + ' '
: null}
총
{approvalCdValue.S +
approvalCdValue.F +
approvalCdValue.U +
approvalCdValue.C}
건
</span>
</div>
<div className='download'>
<Button
color='primary'
size='sm'
onClick={() => handleCheckbox('S')}
>
검토 완료
</Button>
<Button
color='primary'
size='sm'
onClick={() => handleCheckbox('Q')}
>
검토 요청
</Button>
{/* <Button color='primary' size='sm' onClick={() => handleCheckbox('A')}>
재 요청 재 요청
</Button> */} </Button> */}
<Button color='primary' size='sm' onClick={() => handleCheckbox('A')}> <Button
드론 원스톱 전송 color='primary'
</Button> size='sm'
onClick={() => handleCheckbox('A')}
>
드론 원스톱 전송
</Button>
</div>
</div> </div>
</div> <div className='search-case-list'>
<div className='search-case-list'> <div>
<div> <ul>
<ul> <li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='approval'>승인 {approvalCdValue.S}건</li> <li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li> <li className='condition-approved'>
<li className='condition-approved'> 조건부 승인 {approvalCdValue.C}건
조건부 승인 {approvalCdValue.C}건 </li>
</li> <li className='non-target'>비대상 {approvalCdValue.U}건</li>
<li className='non-target'>비대상 {approvalCdValue.U}건</li> <li className='sent'>전송 0건</li>
<li className='sent'>전송 0건</li> <li className='not-sent'>미 전송 0건</li>
<li className='not-sent'>미 전송 0건</li> </ul>
</ul> </div>
</div> </div>
</div> <div className='invoice-list-wrapper'>
<div className='invoice-list-wrapper'> <Card>
<Card> <div className='invoice-list-dataTable flight-approval'>
<div className='invoice-list-dataTable flight-approval'> {laancAprvList?.length > 0 ? (
{laancAprvList?.length > 0 ? ( <Form form={form} component={false}>
<Form form={form} component={false}> <ScrollContainer
<ScrollContainer className='scroll-container'
className='scroll-container' ref={scrollContainerRef}
ref={scrollContainerRef} hideScrollbars={false}
hideScrollbars={false} vertical={true}
vertical={true} horizontal={true}
horizontal={true} activationDistance={10}
activationDistance={10} ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외 >
> <div style={{ width: '2000px' }}>
<div style={{ width: '2000px' }}> <Form form={form}>
<Form form={form}> <Table
<Table components={{
components={{ body: {
body: { cell: EditableCell
cell: EditableCell
}
}}
dataSource={laancAprvList
.map((item, index) =>
item.areaList.map((area, index) => ({
...area,
key: `${area.planAreaSno}`
}))
)
.flat()}
columns={mergedColumns}
rowClassName={record => {
let className = '';
if (record?.approvalCd === 'S') {
className += 'flight-approval-row editable-row';
} else if (record.approvalCd === 'F') {
className += 'flight-not-approval-row editable-row';
} else if (record.approvalCd === 'C') {
className +=
'flight-condition-approval-row editable-row';
} else className += 'editable-row';
if (props.selected?.length > 0) {
if (record.planAreaSno === props.selected[0]) {
className += ' flight-approval-row-click';
} }
} }}
dataSource={laancAprvList
if (record.length > 1) { .map((item, index) =>
className += 'expanded-tr'; item.areaList.map((area, index) => ({
} ...area,
return className; key: `${area.planAreaSno}`
}} }))
onRow={record => ({ )
onClick: event => { .flat()}
handleRowClick(record); columns={mergedColumns}
} rowClassName={record => {
})} let className = '';
rowSelection={{ if (record?.approvalCd === 'S') {
...rowSelection className += 'flight-approval-row editable-row';
}} } else if (record.approvalCd === 'F') {
loading={laancAprvLoading} className +=
scroll={{ 'flight-not-approval-row editable-row';
x: 1700 } else if (record.approvalCd === 'C') {
}} className +=
rowHoverable={false} 'flight-condition-approval-row editable-row';
expandIconColumnIndex={-1} } else className += 'editable-row';
onChange={(pagination, filters, sorter, extra) => {
handlePageChange(); if (props.selected?.length > 0) {
}} if (record.planAreaSno === props.selected[0]) {
pagination={{ className += ' flight-approval-row-click';
position: ['bottomLeft'] }
}} }
/>
</Form> if (record.length > 1) {
</div> className += 'expanded-tr';
</ScrollContainer> }
{modal && ( return className;
<ConfirmModal }}
modal={modal} onRow={record => ({
setModal={setModal} onClick: event => {
handlerConfirm={() => handleSave(modal.row)} handleRowClick(record);
color='primary' }
/> })}
)} rowSelection={{
</Form> ...rowSelection
) : ( }}
<div loading={laancAprvLoading}
className='d-flex justify-content-center align-items-center ' scroll={{
style={{ height: '100px', color: '#000' }} x: 1700
> }}
<p>비행승인 신청 건수가 없습니다.</p> rowHoverable={false}
</div> expandIconColumnIndex={-1}
)} onChange={(pagination, filters, sorter, extra) => {
</div> handlePageChange();
</Card> }}
pagination={{
position: ['bottomLeft']
}}
/>
</Form>
</div>
</ScrollContainer>
{modal && (
<ConfirmModal
modal={modal}
setModal={setModal}
handlerConfirm={() => handleSave(modal.row)}
color='primary'
/>
)}
</Form>
) : (
<div
className='d-flex justify-content-center align-items-center '
style={{ height: '100px', color: '#000' }}
>
<p>비행승인 신청 건수가 없습니다.</p>
</div>
)}
</div>
</Card>
</div>
</div> </div>
</div> </ConfigProvider>
); );
} }

Write Preview
Loading…
Cancel
Save