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
Split 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 { useDispatch, useSelector } from 'react-redux';
import { ConfigProvider } from 'antd';
import { Button, Card } from '@component/ui';
import { openModal } from '@src/redux/features/comn/message/messageSlice';
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 => {
try {
const updateRes = await dispatch(
@ -775,169 +786,183 @@ export default function ControlApprovalsTable(props) {
};
return (
<div className='layer-content'>
<div className='layer-ti'>
<div>
<h4>비행승인 신청 검토결과 목록</h4>
</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>
<ConfigProvider
theme={{
token: {
colorPrimary: '#8a1c05'
// colorBgContainer: '#fff'
}
}}
>
<div className='layer-content'>
<div className='layer-ti'>
<div>
<h4>비행승인 신청 검토결과 목록</h4>
</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'>
<Button color='primary' size='sm' onClick={() => handleCheckbox('P')}>
검토 완료
</Button>
{/* <Button color='danger' size='sm' onClick={() => handleCheckbox('C')}>
<div className='download'>
<Button
color='primary'
size='sm'
onClick={() => handleCheckbox('P')}
>
검토 완료
</Button>
{/* <Button color='danger' size='sm' onClick={() => handleCheckbox('C')}>
요청 반려
</Button> */}
<Button
color='primary'
size='sm'
onClick={() => handleFileDownload('pdf')}
>
한글 다운로드
</Button>
<Button
color='primary'
size='sm'
onClick={() => handleFileDownload('excel')}
>
엑셀 다운로드
</Button>
<Button
color='primary'
size='sm'
onClick={() => handleFileDownload('pdf')}
>
한글 다운로드
</Button>
<Button
color='primary'
size='sm'
onClick={() => handleFileDownload('excel')}
>
엑셀 다운로드
</Button>
</div>
</div>
</div>
<div className='search-case-list'>
<div>
<ul>
<li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='condition-approved'>
조건부 승인 {approvalCdValue.C}건
</li>
</ul>
<div className='search-case-list'>
<div>
<ul>
<li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='condition-approved'>
조건부 승인 {approvalCdValue.C}건
</li>
</ul>
</div>
</div>
</div>
<div className='invoice-list-wrapper'>
<Card>
<div className='invoice-list-dataTable flight-approval'>
{laancAprvList?.length > 0 ? (
<Form form={form} component={false}>
<ScrollContainer
className='scroll-container'
ref={scrollContainerRef}
hideScrollbars={false}
vertical={true}
horizontal={true}
activationDistance={10}
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
>
<div style={{ width: '2000px' }}>
<Form form={form}>
<Table
components={{
body: {
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';
<div className='invoice-list-wrapper'>
<Card>
<div className='invoice-list-dataTable flight-approval'>
{laancAprvList?.length > 0 ? (
<Form form={form} component={false}>
<ScrollContainer
className='scroll-container'
ref={scrollContainerRef}
hideScrollbars={false}
vertical={true}
horizontal={true}
activationDistance={10}
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
>
<div style={{ width: '2000px' }}>
<Form form={form}>
<Table
components={{
body: {
cell: EditableCell
}
}
if (record.length > 1) {
className += 'expanded-tr';
}
return className;
}}
rowSelection={{
...rowSelection
}}
onRow={record => ({
onClick: event => {
handleRowClick(record);
}
})}
loading={laancAprvLoading}
scroll={{
x: 1700
}}
pagination={{
position: ['bottomLeft']
}}
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>
}}
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';
}
}
if (record.length > 1) {
className += 'expanded-tr';
}
return className;
}}
rowSelection={{
...rowSelection
}}
onRow={record => ({
onClick: event => {
handleRowClick(record);
}
})}
loading={laancAprvLoading}
scroll={{
x: 1700
}}
pagination={{
position: ['bottomLeft']
}}
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>
</ConfigProvider>
);
}

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

@ -1,5 +1,6 @@
import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ConfigProvider } from 'antd';
import { Button, Card, CustomInput } from '@component/ui';
import { openModal } from '@src/redux/features/comn/message/messageSlice';
import { Form, Input, Select, Table } from 'antd';
@ -840,174 +841,196 @@ export default function OperationApprovalsTable(props) {
};
return (
<div className='layer-content'>
<div className='layer-ti'>
<div>
<h4>비행승인 신청 검토결과 목록</h4>
</div>
</div>
{ismodal && (
<OperationModal
isModal={ismodal}
setIsModal={setIsModal}
data={validData}
/>
)}
{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>
<ConfigProvider
theme={{
token: {
colorPrimary: '#8a1c05'
// colorBgContainer: '#fff'
}
}}
>
<div className='layer-content'>
<div className='layer-ti'>
<div>
<h4>비행승인 신청 검토결과 목록</h4>
</div>
</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')}>
{ismodal && (
<OperationModal
isModal={ismodal}
setIsModal={setIsModal}
data={validData}
/>
)}
{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 color='primary' size='sm' onClick={() => handleCheckbox('A')}>
드론 원스톱 전송
</Button>
<Button
color='primary'
size='sm'
onClick={() => handleCheckbox('A')}
>
드론 원스톱 전송
</Button>
</div>
</div>
</div>
<div className='search-case-list'>
<div>
<ul>
<li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='condition-approved'>
조건부 승인 {approvalCdValue.C}건
</li>
<li className='non-target'>비대상 {approvalCdValue.U}건</li>
<li className='sent'>전송 0건</li>
<li className='not-sent'>미 전송 0건</li>
</ul>
<div className='search-case-list'>
<div>
<ul>
<li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='condition-approved'>
조건부 승인 {approvalCdValue.C}건
</li>
<li className='non-target'>비대상 {approvalCdValue.U}건</li>
<li className='sent'>전송 0건</li>
<li className='not-sent'>미 전송 0건</li>
</ul>
</div>
</div>
</div>
<div className='invoice-list-wrapper'>
<Card>
<div className='invoice-list-dataTable flight-approval'>
{laancAprvList?.length > 0 ? (
<Form form={form} component={false}>
<ScrollContainer
className='scroll-container'
ref={scrollContainerRef}
hideScrollbars={false}
vertical={true}
horizontal={true}
activationDistance={10}
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
>
<div style={{ width: '2000px' }}>
<Form form={form}>
<Table
components={{
body: {
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';
<div className='invoice-list-wrapper'>
<Card>
<div className='invoice-list-dataTable flight-approval'>
{laancAprvList?.length > 0 ? (
<Form form={form} component={false}>
<ScrollContainer
className='scroll-container'
ref={scrollContainerRef}
hideScrollbars={false}
vertical={true}
horizontal={true}
activationDistance={10}
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
>
<div style={{ width: '2000px' }}>
<Form form={form}>
<Table
components={{
body: {
cell: EditableCell
}
}
if (record.length > 1) {
className += 'expanded-tr';
}
return className;
}}
onRow={record => ({
onClick: event => {
handleRowClick(record);
}
})}
rowSelection={{
...rowSelection
}}
loading={laancAprvLoading}
scroll={{
x: 1700
}}
rowHoverable={false}
expandIconColumnIndex={-1}
onChange={(pagination, filters, sorter, extra) => {
handlePageChange();
}}
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>
}}
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';
}
}
if (record.length > 1) {
className += 'expanded-tr';
}
return className;
}}
onRow={record => ({
onClick: event => {
handleRowClick(record);
}
})}
rowSelection={{
...rowSelection
}}
loading={laancAprvLoading}
scroll={{
x: 1700
}}
rowHoverable={false}
expandIconColumnIndex={-1}
onChange={(pagination, filters, sorter, extra) => {
handlePageChange();
}}
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>
</ConfigProvider>
);
}

Write Preview
Loading…
Cancel
Save