Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存

Browse Source
This commit is contained in:
xixi 2024-08-23 11:16:52 +08:00
parent 79cc905547
commit 76af005ae0
4 changed files with 440 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/RefunModal/RefunModal.tsx
View File

@ -2,24 +2,31 @@ import { useEffect, useState } from 'react'
import './RefunModal.css' import './RefunModal.css'
import { Form, Select, Button, Upload, message, Input } from 'antd'; import { Form, Select, Button, Upload, message, Input } from 'antd';
import { UploadOutlined } from '@ant-design/icons'; import { UploadOutlined } from '@ant-design/icons';
import { uploadImageUrl, DevUserId, get,post } from "../../util/AjaxUtils.ts"; import { uploadImageUrl, DevUserId, get, post } from "../../util/AjaxUtils.ts";
import { getMenuActive } from '../../util/cache.ts'
import { useDispatch } from 'react-redux'
const { TextArea } = Input; const { TextArea } = Input;
export default function RefunModal(props: any) { export default function RefunModal(props: any) {
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
// 上传附件 // 上传附件
const [refunArray, setRefunArray] = useState<string[]>([]); const [refunArray, setRefunArray] = useState<string[]>([]);
const [selectedReason, setSelectedReason] = useState(''); //选择原因 // const [selectedReason, setSelectedReason] = useState(''); //选择原因
const handleReasonChange = (value: any) => { // const handleReasonChange = (value: any) => {
setSelectedReason(value); // setSelectedReason(value);
}; // };
// 获取当前选择类型
const type = getMenuActive()
const dispath = useDispatch()
const [refunDataArray, setRefunDataArray] = useState<any[]>([]) //未退款项目 const [refunDataArray, setRefunDataArray] = useState<any[]>([]) //未退款项目
// 提交表单 // 提交表单
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log('Form values:', values); // console.log('Form values:', values);
// props.closeModal()
console.log(refunArray); // console.log(refunArray);
post<any>({ post<any>({
messageApi, messageApi,
url: `/api/proj/refund/apply/save`, url: `/api/proj/refund/apply/save`,
@ -34,12 +41,46 @@ export default function RefunModal(props: any) {
onSuccess() { onSuccess() {
messageApi.success('提交成功') messageApi.success('提交成功')
setTimeout(() => {
props.closeModal()
}, 1000)
if ( type === 'PENDING') {
getData()
}
}, },
onFinally() { onFinally() {
} }
}) })
}; };
const getData = () => {
get({
messageApi,
url: `/api/proj/refund/apply/listpage`,
// url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
config: {
params: {
page: 1,
rows: 10,
applyStatus: type
}
},
onSuccess(data: any) {
// console.log('更新');
dispath({
type: 'upRefunArray',
val: data.data.rows
})
dispath({
type: 'upRefunTotal',
val: data.data.total
})
}
})
}
// 获取未退款项目 // 获取未退款项目
const getRefunData = () => { const getRefunData = () => {
get({ get({
@ -55,7 +96,7 @@ export default function RefunModal(props: any) {
}, },
onSuccess(data: any) { onSuccess(data: any) {
console.log(data); // console.log(data);
const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({ const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({
value: item.projId, value: item.projId,
label: item.projName label: item.projName
@ -71,6 +112,8 @@ export default function RefunModal(props: any) {
} }
useEffect(() => { useEffect(() => {
getRefunData() getRefunData()
// console.log(type);
}, []) }, [])
return ( return (
<div className='refunModal'> <div className='refunModal'>

294
src/route/Refun/Refun.tsx
View File

@ -3,34 +3,39 @@ import { useState, useEffect } from 'react';
import { import {
Table, Table,
// Pagination, // Pagination,
Modal, Tag, message Modal, Tag, message, Spin
} from 'antd'; } from 'antd';
import { get,put } from '../../util/AjaxUtils' import { useSelector, useDispatch } from 'react-redux'
import { get, put, downloadUrl } from '../../util/AjaxUtils'
import type { TableProps } from 'antd'; import type { TableProps } from 'antd';
interface DataType { interface DataType {
projName: string; projName: string;
projPayment: string; projPayment: string;
refundReason: string; refundReason: string;
gmtCreate: string; gmtCreate: string;
refundVoucherFileKVs: string; refundVoucherFileKVs: any;
projRefundApplyId: string; projRefundApplyId: string;
gmtReview: string; gmtReview: string;
applyStatus: string; applyStatus: string;
reviewReason: string; reviewReason: string;
projId: string;
} }
import revokeImg from '../../static/revoke.png' import revokeImg from '../../static/revoke.png'
import { useLocation } from 'react-router-dom' import { useLocation } from 'react-router-dom'
export default function Refun() { export default function Refun() {
const height = window.innerHeight - 180; const height = window.innerHeight - 180;
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
const [isLoading, setIsLoading] = useState(false)
const [page, setPage] = useState(1) // 分页 const [page, setPage] = useState(1) // 分页
const [total, setTotal] = useState(50) // 数据总数 // const [total, setTotal] = useState(0) // 数据总数
const [data, setData] = useState<any[]>([]) // const [data, setData] = useState<any[]>([])
const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗 const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
const [projRefundApplyId, setprojRefundApplyId] = useState('') //要撤销的id const [projRefundApplyId, setprojRefundApplyId] = useState('') //要撤销的id
const { state } = useLocation() const { state } = useLocation()
// {state.type} // {state.type}
const columns: TableProps<DataType>['columns'] = state.type == 'CANCELED' ? [ const columns: TableProps<DataType>['columns'] =
// 撤销状态
state.type == 'CANCELED' ? [
{ {
title: '序号', title: '序号',
dataIndex: 'index', dataIndex: 'index',
@ -66,13 +71,13 @@ export default function Refun() {
align: 'center', align: 'center',
width: 200, width: 200,
}, },
{ // {
title: '审核时间', // title: '审核时间',
dataIndex: 'gmtReview', // dataIndex: 'gmtReview',
key: 'gmtReview', // key: 'gmtReview',
align: 'center', // align: 'center',
width: 200, // width: 200,
}, // },
{ {
title: '审核状态', title: '审核状态',
dataIndex: 'applyStatus', dataIndex: 'applyStatus',
@ -80,33 +85,44 @@ export default function Refun() {
align: 'center', align: 'center',
width: 100, width: 100,
render: (text) => <Tag render: (text) => <Tag
color={text == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''} color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
>{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</Tag>, >{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}</div>,
}, },
// {
// title: '审核意见',
// dataIndex: 'reviewReason',
// key: 'reviewReason',
// align: 'center',
// // width: 150,
// render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
// },
{ {
title: '退款凭证', title: '退款凭证',
dataIndex: 'refundVoucherFileKVs', dataIndex: 'refundVoucherFileKVs',
key: 'refundVoucherFileKVs', key: 'refundVoucherFileKVs',
width: 100, // width: 100,
align: 'center', align: 'center',
render: (_, record) => ( render: (_, record) => (
// {record.name} // {record.name}
<div className='refunBtn' onClick={() => { // <div className='refunBtn' onClick={() => {
// console.log(record.img); // // console.log(record.img);
}}> 预览</div> // }}> 预览</div>
(record.refundVoucherFileKVs).map((item: any, index: number) => (
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
window.open(downloadUrl(item.key, false), '_blank')
}}>{item.value}</div>
))
), ),
}, },
] : [ ]
: state.type == 'PENDING' ?
// PENDING待审核状态
[
{ {
title: '序号', title: '序号',
dataIndex: 'index', dataIndex: 'index',
@ -142,13 +158,13 @@ export default function Refun() {
align: 'center', align: 'center',
width: 200, width: 200,
}, },
{ // {
title: '审核时间', // title: '审核时间',
dataIndex: 'gmtReview', // dataIndex: 'gmtReview',
key: 'gmtReview', // key: 'gmtReview',
align: 'center', // align: 'center',
width: 200, // width: 200,
}, // },
{ {
title: '审核状态', title: '审核状态',
dataIndex: 'applyStatus', dataIndex: 'applyStatus',
@ -156,30 +172,39 @@ export default function Refun() {
align: 'center', align: 'center',
width: 100, width: 100,
render: (text) => <Tag render: (text) => <Tag
color={text == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''} color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
>{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</Tag>, >{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}</div>,
}, },
// {
// title: '审核意见',
// dataIndex: 'reviewReason',
// key: 'reviewReason',
// align: 'center',
// // width: 150,
// render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
// },
{ {
title: '退款凭证', title: '退款凭证',
dataIndex: 'refundVoucherFileKVs', dataIndex: 'refundVoucherFileKVs',
key: 'refundVoucherFileKVs', key: 'refundVoucherFileKVs',
width: 100, // width: 100,
align: 'center', align: 'center',
render: (_, record) => ( render: (_, record) => (
// {record.name} // {record.name}
<div className='refunBtn' onClick={() => { // <div className='refunBtn' onClick={() => {
// console.log(record.img); // console.log(record.refundVoucherFileKVs);
}}> 预览</div> // }}> 预览</div>
(record.refundVoucherFileKVs).map((item: any,index:number) => (
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
window.open(downloadUrl(item.key, false), '_blank')
}}>{item.value}</div>
))
), ),
}, },
{ {
title: '操作', title: '操作',
@ -195,7 +220,109 @@ export default function Refun() {
), ),
}, },
] :
// 已通过 和未通过 状态
[
{
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: 'projPayment',
key: 'projPayment',
align: 'center',
width: 150,
},
{
title: '退款原因',
dataIndex: 'refundReason',
key: 'refundReason',
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}</div>,
},
{
title: '退款凭证',
dataIndex: 'refundVoucherFileKVs',
key: 'refundVoucherFileKVs',
// width: 100,
align: 'center',
render: (_, record) => (
// {record.name}
// <div className='refunBtn' onClick={() => {
// // console.log(record.img);
// }}> 预览</div>
(record.refundVoucherFileKVs).map((item: any, index: number) => (
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }} 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.projRefundApplyId);
// setRevokeModal(true)
// setprojRefundApplyId(record.projRefundApplyId)
// }}> 撤销</div>
// ),
// },
]; ];
const dispath = useDispatch()
const redxuState: any = useSelector(state => state)
const refunArray = redxuState.refunArray
const total = redxuState.refunTotal
const getData = (page: number) => { const getData = (page: number) => {
get({ get({
messageApi, messageApi,
@ -208,10 +335,25 @@ export default function Refun() {
applyStatus: state.type applyStatus: state.type
} }
}, },
onBefore() {
setIsLoading(true)
},
onSuccess(data: any) { onSuccess(data: any) {
console.log(data.data.rows); console.log(data.data.rows);
setData(data.data.rows) // setData(data.data.rows)
} dispath({
type: 'upRefunArray',
val: data.data.rows
})
dispath({
type: 'upRefunTotal',
val: data.data.total
})
// setTotal(data.data.total)
},
onFinally() {
setIsLoading(false)
},
}) })
} }
// 撤销退款 // 撤销退款
@ -226,8 +368,36 @@ export default function Refun() {
onSuccess() { onSuccess() {
setRevokeModal(false) setRevokeModal(false)
messageApi.success('已撤销'); messageApi.success('已撤销');
get({
messageApi,
url: `/api/proj/refund/apply/listpage`,
// url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
config: {
params: {
page: page,
rows: 10,
applyStatus: state.type
}
},
onSuccess(data: any) {
// console.log(data.data.rows);
// setData(data.data.rows)
// setTotal(data.data.total)
if (data.data.rows.length == 0) {
getData(page - 1)
} else {
dispath({
type: 'upRefunArray',
val: data.data.rows
})
dispath({
type: 'upRefunTotal',
val: data.data.total
})
}
}
})
}, },
onFinally() { onFinally() {
// setIsProjIntroductionLoading(false) // setIsProjIntroductionLoading(false)
@ -247,9 +417,11 @@ export default function Refun() {
return ( return (
<div> <div>
{contextHolder} {contextHolder}
<div className='refun' style={{ height: `${height}px`, overflow: 'auto' }}> <div className='refun' style={{ height: `${height}px`, overflow: 'auto' }}>
{/* {state.type} */} {/* {state.type} */}
<Table columns={columns} dataSource={data} <Spin tip="加载中..." spinning={isLoading}>
<Table columns={columns} dataSource={refunArray}
style={{ style={{
// height: height - 80, // height: height - 80,
// height: 620, // height: 620,
@ -270,16 +442,20 @@ export default function Refun() {
} }
} }
scroll={{ y: height - 128 }} scroll={{ y: height - 140 }}
rowKey="projId" rowKey="projId"
/> />
{/* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 ,width:'100%'}}> </Spin>
<Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => { <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 ,width:'100%'}}>
{/* <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
setPage(page) setPage(page)
// getData(page) getData(page)
}} />
</div> */} }} /> */}
</div> </div>
</div>
<Modal <Modal
title="确认撤销" title="确认撤销"
okText="撤销" okText="撤销"

2
src/route/Refun/refun.css
View File

@ -1,7 +1,7 @@
.refun{ .refun{
margin-top: 18px; margin-top: 18px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
padding: 20px 20px 0px 20px; padding: 30px 20px 0px 20px;
box-sizing: border-box; box-sizing: border-box;
/* display: flex; /* display: flex;
flex-direction: column; flex-direction: column;

11
src/store/index.ts
View File

@ -8,8 +8,9 @@ const baseState = {
// hobby: '吃饭', // hobby: '吃饭',
// val: '' // val: ''
// }, // },
belongArray: [] belongArray: [],
refunArray:[],
refunTotal:0
} }
// 创建仓库 // 创建仓库
@ -27,6 +28,12 @@ const reducer = (state = baseState, action: any) => {
if (action.type == 'uparray') { if (action.type == 'uparray') {
nstate.belongArray = action.val nstate.belongArray = action.val
} }
if (action.type == 'upRefunArray') {
nstate.refunArray = action.val
}
if (action.type == 'upRefunTotal') {
nstate.refunTotal = action.val
}
return nstate return nstate
} }
const store = createStore(reducer) const store = createStore(reducer)