system-copyright-react/src/route/Correction/Correction.tsx

585 lines
25 KiB
TypeScript
Raw Normal View History

2024-08-26 18:03:35 +08:00
import React from 'react'
import { useState, useEffect, } from 'react';
import {
Table,
// Pagination,
Modal, Tag, message, Spin
} from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import {
get,
put, downloadUrl
} from '../../util/AjaxUtils'
import type { TableProps } from 'antd';
import { getMenuActive } from '../../util/cache'
import { useNavigate } from "react-router-dom";
interface DataType {
projName: string;
type: string; //类型
2024-08-27 18:29:20 +08:00
correctionType: string; //补正种类
2024-08-26 18:03:35 +08:00
correctionReason: string;
gmtCreate: string; //补正时间
gmtReview: string;//审核时间
reviewReason: string;//审核意见
projId: string;
applyStatus: string;//审核状态
correctionVoucherFileKVs: any //补正凭证
projCorrectionApplyId: string
}
import revokeImg from '../../static/revoke.png'
import { useLocation } from 'react-router-dom'
export default function Correction() {
const height = window.innerHeight - 180;
const [messageApi, contextHolder] = message.useMessage();
const nav = useNavigate();
const { state } = useLocation()
const MenuActive = getMenuActive() == 'Correction-PENDING' ? 'PENDING' : getMenuActive() == 'Correction-APPROVED' ? 'APPROVED' : getMenuActive() == 'Correction-REJECTED' ? 'REJECTED' : getMenuActive() == 'Correction-CANCELED' ? 'CANCELED' : ''
const type = state ? state.type : MenuActive
const [isLoading, setIsLoading] = useState(false)
const [page, setPage] = useState(1) // 分页
const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
const columns: TableProps<DataType>['columns'] =
// 撤销状态
type == 'CANCELED' ? [
{
title: '序号',
dataIndex: 'index',
align: 'center',
width: 80,
render: (_text, _record, index) => (page - 1) * 20 + index + 1, // 显示序号从1开始
},
{
title: '系统名称',
dataIndex: 'projName',
align: 'center',
key: 'projName',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
align: 'center',
2024-08-27 18:29:20 +08:00
render: (text) => <div >{text == 'CORRECTION1' ? '一次补正' : text == 'CORRECTION2' ? '二次补正' : ''}</div>,
2024-08-26 18:03:35 +08:00
},
{
2024-08-27 18:29:20 +08:00
title: '补正种类',
2024-08-26 18:03:35 +08:00
dataIndex: 'correctionType',
key: 'correctionType',
align: 'center',
2024-08-27 18:29:20 +08:00
render: (text) => <div >{text == 'CODE' ? '代码' : text == 'MANUAL' ? '操作手册' : ''}</div>,
2024-08-26 18:03:35 +08:00
},
{
title: '补正原因',
dataIndex: 'correctionReason',
key: 'correctionReason',
align: 'center',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '申请补正时间',
dataIndex: 'gmtCreate',
key: 'gmtCreate',
align: 'center',
width: 200,
},
{
title: '审核状态',
dataIndex: 'applyStatus',
key: 'applyStatus',
align: 'center',
width: 100,
render: (text) => <Tag
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
>{text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
},
{
title: '补正凭证',
dataIndex: 'correctionVoucherFileKVs',
key: 'correctionVoucherFileKVs',
// width: 100,
align: 'center',
render: (_, record) => (
(record.correctionVoucherFileKVs).map((item: any, index: number) => (
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
className='ellipsis-text' title={item.value}
key={index} onClick={() => {
window.open(downloadUrl(item.key, false), '_blank')
}}>{item.value}</div>
))
),
},
]
: type == 'PENDING' ?
// PENDING待审核状态
[
{
title: '序号',
dataIndex: 'index',
align: 'center',
width: 80,
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号从1开始
},
{
title: '系统名称',
dataIndex: 'projName',
align: 'center',
key: 'projName',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
align: 'center',
2024-08-27 18:29:20 +08:00
render: (text) => <div >{text == 'CORRECTION1' ? '一次补正' : text == 'CORRECTION2' ? '二次补正' : ''}</div>,
2024-08-26 18:03:35 +08:00
},
{
2024-08-27 18:29:20 +08:00
title: '补正种类',
2024-08-26 18:03:35 +08:00
dataIndex: 'correctionType',
key: 'correctionType',
align: 'center',
2024-08-27 18:29:20 +08:00
render: (text) => <div >{text == 'CODE' ? '代码' : text == 'MANUAL' ? '操作手册' : ''}</div>,
2024-08-26 18:03:35 +08:00
},
{
title: '补正原因',
dataIndex: 'correctionReason',
key: 'correctionReason',
align: 'center',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '申请补正时间',
dataIndex: 'gmtCreate',
key: 'gmtCreate',
align: 'center',
width: 200,
},
{
title: '审核状态',
dataIndex: 'applyStatus',
key: 'applyStatus',
align: 'center',
width: 100,
render: (text) => <Tag
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
>{text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
},
{
title: '补正凭证',
dataIndex: 'correctionVoucherFileKVs',
key: 'correctionVoucherFileKVs',
// width: 100,
align: 'center',
render: (_, record) => (
(record.correctionVoucherFileKVs).map((item: any, index: number) => (
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
className='ellipsis-text' title={item.value}
key={index} onClick={() => {
window.open(downloadUrl(item.key, false), '_blank')
}}>{item.value}</div>
))
),
},
{
title: '操作',
align: 'center',
width: 100,
render: (_, record) => (
// {record.name}
<div className='refunBtn' onClick={() => {
2024-08-27 18:29:20 +08:00
// console.log(record);
2024-08-26 18:03:35 +08:00
setRevokeModal(true)
setprojCorrectionApplyId(record.projCorrectionApplyId)
}}> </div>
),
},
2024-08-27 18:29:20 +08:00
]
// 未通过 状态
: type == 'REJECTED' ?
[
{
title: '序号',
dataIndex: 'index',
align: 'center',
width: 80,
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号从1开始
},
{
title: '系统名称',
dataIndex: 'projName',
align: 'center',
key: 'projName',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
2024-08-26 18:03:35 +08:00
2024-08-27 18:29:20 +08:00
{
title: '类型',
dataIndex: 'type',
key: 'type',
align: 'center',
render: (text) => <div >{text == 'CORRECTION1' ? '一次补正' : text == 'CORRECTION2' ? '二次补正' : ''}</div>,
},
{
title: '补正种类',
dataIndex: 'correctionType',
key: 'correctionType',
align: 'center',
render: (text) => <div >{text == 'CODE' ? '代码' : text == 'MANUAL' ? '操作手册' : ''}</div>,
},
{
title: '补正原因',
dataIndex: 'correctionReason',
key: 'correctionReason',
align: 'center',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '申请补正时间',
dataIndex: 'gmtCreate',
key: 'gmtCreate',
align: 'center',
width: 200,
},
{
title: '审核时间',
dataIndex: 'gmtReview',
key: 'gmtReview',
align: 'center',
width: 200,
},
{
title: '审核状态',
dataIndex: 'applyStatus',
key: 'applyStatus',
align: 'center',
width: 100,
render: (text) => <Tag
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
>{text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
},
{
title: '审核意见',
dataIndex: 'reviewReason',
key: 'reviewReason',
align: 'center',
// width: 150,
render: (text) => <div className='ellipsis-text' title={text}>{text ? text : '—'}</div>,
},
{
title: '补正凭证',
dataIndex: 'correctionVoucherFileKVs',
key: 'correctionVoucherFileKVs',
// width: 100,
align: 'center',
render: (_, record) => (
(record.correctionVoucherFileKVs).map((item: any, index: number) => (
2024-08-26 18:03:35 +08:00
2024-08-27 18:29:20 +08:00
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
className='ellipsis-text' title={item.value}
key={index} onClick={() => {
window.open(downloadUrl(item.key, false), '_blank')
}}>{item.value}</div>
2024-08-26 18:03:35 +08:00
2024-08-27 18:29:20 +08:00
))
2024-08-26 18:03:35 +08:00
2024-08-27 18:29:20 +08:00
),
},
]
//已通过状态
: type == 'APPROVED' ?
[
{
title: '序号',
dataIndex: 'index',
align: 'center',
width: 80,
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号从1开始
},
{
title: '系统名称',
dataIndex: 'projName',
align: 'center',
key: 'projName',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
align: 'center',
render: (text) => <div >{text == 'CORRECTION1' ? '一次补正' : text == 'CORRECTION2' ? '二次补正' : ''}</div>,
},
{
title: '补正种类',
dataIndex: 'correctionType',
key: 'correctionType',
align: 'center',
render: (text) => <div >{text == 'CODE' ? '代码' : text == 'MANUAL' ? '操作手册' : ''}</div>,
},
{
title: '补正原因',
dataIndex: 'correctionReason',
key: 'correctionReason',
align: 'center',
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
},
{
title: '申请补正时间',
dataIndex: 'gmtCreate',
key: 'gmtCreate',
align: 'center',
width: 200,
},
{
title: '审核时间',
dataIndex: 'gmtReview',
key: 'gmtReview',
align: 'center',
width: 200,
},
{
title: '审核状态',
dataIndex: 'applyStatus',
key: 'applyStatus',
align: 'center',
width: 100,
render: (text) => <Tag
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
>{text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
},
{
title: '审核意见',
dataIndex: 'reviewReason',
key: 'reviewReason',
align: 'center',
// width: 150,
render: (text) => <div className='ellipsis-text' title={text}>{text ? text : '—'}</div>,
},
{
title: '补正凭证',
dataIndex: 'correctionVoucherFileKVs',
key: 'correctionVoucherFileKVs',
// width: 100,
align: 'center',
render: (_, record) => (
(record.correctionVoucherFileKVs).map((item: any, index: number) => (
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
className='ellipsis-text' title={item.value}
key={index} onClick={() => {
window.open(downloadUrl(item.key, false), '_blank')
}}>{item.value}</div>
))
),
},
{
title: '操作',
align: 'center',
width: 100,
render: (_, record) => (
// {record.name}
<div className='refunBtn' onClick={() => {
// console.log(record);
// setRevokeModal(true)
// setprojCorrectionApplyId(record.projCorrectionApplyId)
nav(`/proj-edit/${record.projId}`);
}}> </div>
),
}
] : []
2024-08-26 18:03:35 +08:00
const dispath = useDispatch()
const redxuState: any = useSelector(state => state)
const correctionArray = redxuState.correctionArray
const total = redxuState.correctionTotal
const [projCorrectionApplyId, setprojCorrectionApplyId] = useState('') //要撤销的id
const getData = (page: number) => {
get({
messageApi,
url: `/api/proj/correction/apply/listpage`,
// url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
config: {
params: {
page: page,
rows: 20,
applyStatus: type
}
},
onBefore() {
setIsLoading(true)
},
onSuccess(data: any) {
2024-08-27 11:35:08 +08:00
// console.log('呵呵', data.data.rows);
2024-08-26 18:03:35 +08:00
// setData(data.data.rows)
dispath({
type: 'upCorrectionArray',
val: data.data.rows
})
dispath({
type: 'upCorrectionTotal',
val: data.data.total
})
// setTotal(data.data.total)
},
onFinally() {
setIsLoading(false)
},
})
}
// 撤销补正
const projRefund = () => {
put<any>({
messageApi,
url: `/api/proj/correction/apply/cancel/self/${projCorrectionApplyId}`,
onBefore() {
},
onSuccess() {
setRevokeModal(false)
messageApi.success('已撤销');
get({
messageApi,
url: `/api/proj/correction/apply/listpage`,
// url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
config: {
params: {
page: page,
rows: 20,
applyStatus: type
}
},
onSuccess(data: any) {
// console.log(data.data.rows);
// setData(data.data.rows)
// setTotal(data.data.total)
if (data.data.rows.length == 0 && page > 1) {
getData(page - 1)
} else {
dispath({
type: 'upCorrectionArray',
val: data.data.rows
})
dispath({
type: 'upCorrectionTotal',
val: data.data.total
})
}
}
})
},
onFinally() {
// setIsProjIntroductionLoading(false)
// renderData()
}
})
}
useEffect(() => {
if (!state) {
nav('/home')
}
}, [state])
useEffect(() => {
// getData(1)
setPage(1)
getData(1)
2024-08-27 11:35:08 +08:00
// console.log(type);
2024-08-26 18:03:35 +08:00
// console.log('嘻嘻',correctionArray);
}, [type])
return (
<div>
{contextHolder}
<div className='refun' style={{ height: `${height}px`, overflow: 'auto' }}>
{/* {state.type} */}
<Spin tip="加载中..." spinning={isLoading}>
<Table columns={columns}
dataSource={correctionArray}
style={{
// height: height - 80,
// height: 620,
// background: 'skyblue'
}}
// pagination={false} // 不显示分页
pagination={
{
pageSize: 20,
total: total,
onChange: (currentPage) => {
setPage(currentPage);
getData(currentPage)
},
showSizeChanger: false,
current: page
}
}
scroll={{ y: height - 150 }}
2024-08-27 18:29:20 +08:00
rowKey="projCorrectionApplyId"
2024-08-26 18:03:35 +08:00
/>
</Spin>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15, width: '100%' }}>
{/* <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
setPage(page)
getData(page)
}} /> */}
</div>
</div>
<Modal
title="确认撤销"
okText="撤销"
cancelText="取消"
destroyOnClose={true}
open={revokeModal}
onOk={() => {
setRevokeModal(false)
projRefund()
}}
onCancel={() => {
setRevokeModal(false)
}}
okButtonProps={{ style: { background: 'red', color: 'white' } }}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: `${height}px`,
}}>
<div style={{ width: 384, display: 'flex', height: 50, alignItems: 'center' }}>
<img src={revokeImg} alt="" style={{ width: 32, height: 32, marginLeft: 10 }} />
<div style={{ marginLeft: 10, fontSize: 18 }}>
</div>
</div>
</Modal>
</div>
)
}