diff --git a/src/components/RefunModal/RefunModal.tsx b/src/components/RefunModal/RefunModal.tsx index 346aa3b..3fb8a83 100644 --- a/src/components/RefunModal/RefunModal.tsx +++ b/src/components/RefunModal/RefunModal.tsx @@ -2,24 +2,31 @@ import { useEffect, useState } from 'react' import './RefunModal.css' import { Form, Select, Button, Upload, message, Input } from 'antd'; 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; export default function RefunModal(props: any) { const [messageApi, contextHolder] = message.useMessage(); // 上传附件 const [refunArray, setRefunArray] = useState([]); - const [selectedReason, setSelectedReason] = useState(''); //选择原因 + // const [selectedReason, setSelectedReason] = useState(''); //选择原因 - const handleReasonChange = (value: any) => { - setSelectedReason(value); - }; + // const handleReasonChange = (value: any) => { + // setSelectedReason(value); + // }; + // 获取当前选择类型 + const type = getMenuActive() + const dispath = useDispatch() const [refunDataArray, setRefunDataArray] = useState([]) //未退款项目 // 提交表单 const onFinish = (values: any) => { - console.log('Form values:', values); - // props.closeModal() - console.log(refunArray); + // console.log('Form values:', values); + + // console.log(refunArray); + + post({ messageApi, url: `/api/proj/refund/apply/save`, @@ -29,17 +36,51 @@ export default function RefunModal(props: any) { refundVoucher: refunArray.join(', ') }, onBefore() { - + }, onSuccess() { messageApi.success('提交成功') - + + setTimeout(() => { + props.closeModal() + }, 1000) + if ( type === 'PENDING') { + getData() + + } + }, 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 = () => { get({ @@ -55,7 +96,7 @@ export default function RefunModal(props: any) { }, onSuccess(data: any) { - console.log(data); + // console.log(data); const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({ value: item.projId, label: item.projName @@ -71,6 +112,8 @@ export default function RefunModal(props: any) { } useEffect(() => { getRefunData() + // console.log(type); + }, []) return (
diff --git a/src/route/Refun/Refun.tsx b/src/route/Refun/Refun.tsx index 254da17..ff15fe1 100644 --- a/src/route/Refun/Refun.tsx +++ b/src/route/Refun/Refun.tsx @@ -3,199 +3,326 @@ import { useState, useEffect } from 'react'; import { Table, // Pagination, - Modal, Tag, message + Modal, Tag, message, Spin } 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'; interface DataType { projName: string; projPayment: string; refundReason: string; gmtCreate: string; - refundVoucherFileKVs: string; + refundVoucherFileKVs: any; projRefundApplyId: string; gmtReview: string; applyStatus: string; reviewReason: string; + projId: string; } import revokeImg from '../../static/revoke.png' import { useLocation } from 'react-router-dom' export default function Refun() { const height = window.innerHeight - 180; const [messageApi, contextHolder] = message.useMessage(); + const [isLoading, setIsLoading] = useState(false) const [page, setPage] = useState(1) // 分页 - const [total, setTotal] = useState(50) // 数据总数 - const [data, setData] = useState([]) + // const [total, setTotal] = useState(0) // 数据总数 + // const [data, setData] = useState([]) const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗 const [projRefundApplyId, setprojRefundApplyId] = useState('') //要撤销的id const { state } = useLocation() // {state.type} - const columns: TableProps['columns'] = state.type == 'CANCELED' ? [ - { - 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) =>
{text}
, - }, - { - title: '金额', - dataIndex: 'projPayment', - key: 'projPayment', - align: 'center', - width: 150, - }, - { - title: '退款原因', - dataIndex: 'refundReason', - key: 'refundReason', - align: 'center', - render: (text) =>
{text}
, - }, - { - 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) => {text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}, - }, - { - title: '审核意见', - dataIndex: 'reviewReason', - key: 'reviewReason', - align: 'center', - // width: 150, - render: (text) =>
{text}
, - }, - { - title: '退款凭证', - dataIndex: 'refundVoucherFileKVs', - key: 'refundVoucherFileKVs', - width: 100, - align: 'center', - render: (_, record) => ( - // {record.name} -
{ - // console.log(record.img); - }}> 预览
+ const columns: TableProps['columns'] = + // 撤销状态 + state.type == 'CANCELED' ? [ + { + 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) =>
{text}
, + }, + { + title: '金额', + dataIndex: 'projPayment', + key: 'projPayment', + align: 'center', + width: 150, + }, + { + title: '退款原因', + dataIndex: 'refundReason', + key: 'refundReason', + align: 'center', + render: (text) =>
{text}
, + }, + { + 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) => {text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}, + }, + // { + // title: '审核意见', + // dataIndex: 'reviewReason', + // key: 'reviewReason', + // align: 'center', + // // width: 150, + // render: (text) =>
{text}
, + // }, + { + title: '退款凭证', + dataIndex: 'refundVoucherFileKVs', + key: 'refundVoucherFileKVs', + // width: 100, + align: 'center', + render: (_, record) => ( + // {record.name} + //
{ + // // console.log(record.img); + // }}> 预览
+ (record.refundVoucherFileKVs).map((item: any, index: number) => ( + +
{ + window.open(downloadUrl(item.key, false), '_blank') + }}>{item.value}
+ + + )) - ), - }, + ), + }, - ] : [ - { - 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) =>
{text}
, - }, - { - title: '金额', - dataIndex: 'projPayment', - key: 'projPayment', - align: 'center', - width: 150, - }, - { - title: '退款原因', - dataIndex: 'refundReason', - key: 'refundReason', - align: 'center', - render: (text) =>
{text}
, - }, - { - 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) => {text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}, - }, - { - title: '审核意见', - dataIndex: 'reviewReason', - key: 'reviewReason', - align: 'center', - // width: 150, - render: (text) =>
{text}
, - }, - { - title: '退款凭证', - dataIndex: 'refundVoucherFileKVs', - key: 'refundVoucherFileKVs', - width: 100, - align: 'center', - render: (_, record) => ( - // {record.name} -
{ - // console.log(record.img); - }}> 预览
+ ] + : state.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) =>
{text}
, + }, + { + title: '金额', + dataIndex: 'projPayment', + key: 'projPayment', + align: 'center', + width: 150, + }, + { + title: '退款原因', + dataIndex: 'refundReason', + key: 'refundReason', + align: 'center', + render: (text) =>
{text}
, + }, + { + 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) => {text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}, + }, + // { + // title: '审核意见', + // dataIndex: 'reviewReason', + // key: 'reviewReason', + // align: 'center', + // // width: 150, + // render: (text) =>
{text}
, + // }, + { + title: '退款凭证', + dataIndex: 'refundVoucherFileKVs', + key: 'refundVoucherFileKVs', + // width: 100, + align: 'center', + render: (_, record) => ( + // {record.name} + //
{ + // console.log(record.refundVoucherFileKVs); + // }}> 预览
+ (record.refundVoucherFileKVs).map((item: any,index:number) => ( + +
{ + window.open(downloadUrl(item.key, false), '_blank') + }}>{item.value}
+ + + )) - ), - }, - { - title: '操作', - align: 'center', - width: 100, - render: (_, record) => ( - // {record.name} -
{ - console.log(record.projRefundApplyId); - setRevokeModal(true) - setprojRefundApplyId(record.projRefundApplyId) - }}> 撤销
+ ), - ), - }, - ]; + }, + { + title: '操作', + align: 'center', + width: 100, + render: (_, record) => ( + // {record.name} +
{ + console.log(record.projRefundApplyId); + setRevokeModal(true) + setprojRefundApplyId(record.projRefundApplyId) + }}> 撤销
+ + ), + }, + ] : + // 已通过 和未通过 状态 + [ + { + 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) =>
{text}
, + }, + { + title: '金额', + dataIndex: 'projPayment', + key: 'projPayment', + align: 'center', + width: 150, + }, + { + title: '退款原因', + dataIndex: 'refundReason', + key: 'refundReason', + align: 'center', + render: (text) =>
{text}
, + }, + { + 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) => {text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}, + }, + { + title: '审核意见', + dataIndex: 'reviewReason', + key: 'reviewReason', + align: 'center', + // width: 150, + render: (text) =>
{text}
, + }, + { + title: '退款凭证', + dataIndex: 'refundVoucherFileKVs', + key: 'refundVoucherFileKVs', + // width: 100, + align: 'center', + render: (_, record) => ( + // {record.name} + //
{ + // // console.log(record.img); + // }}> 预览
+ (record.refundVoucherFileKVs).map((item: any, index: number) => ( + +
{ + window.open(downloadUrl(item.key, false), '_blank') + }}>{item.value}
+ + )) + + ), + }, + // { + // title: '操作', + // align: 'center', + // width: 100, + // render: (_, record) => ( + // // {record.name} + //
{ + // console.log(record.projRefundApplyId); + // setRevokeModal(true) + // setprojRefundApplyId(record.projRefundApplyId) + // }}> 撤销
+ + // ), + // }, + ]; + const dispath = useDispatch() + const redxuState: any = useSelector(state => state) + const refunArray = redxuState.refunArray + const total = redxuState.refunTotal const getData = (page: number) => { get({ messageApi, @@ -208,10 +335,25 @@ export default function Refun() { applyStatus: state.type } }, + onBefore() { + setIsLoading(true) + }, onSuccess(data: any) { 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) + }, }) } // 撤销退款 @@ -219,15 +361,43 @@ export default function Refun() { put({ messageApi, url: `/api/proj/refund/apply/cancel/self/${projRefundApplyId}`, - + onBefore() { - + }, onSuccess() { setRevokeModal(false) 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() { // setIsProjIntroductionLoading(false) @@ -247,39 +417,45 @@ export default function Refun() { return (
{contextHolder} +
{/* {state.type} */} - { - setPage(currentPage); - getData(currentPage) - }, - showSizeChanger: false, - current: page + +
{ + setPage(currentPage); + getData(currentPage) + }, + showSizeChanger: false, + current: page + + } } - - } - scroll={{ y: height - 128 }} - rowKey="projId" - /> - {/*
- { + scroll={{ y: height - 140 }} + rowKey="projId" + /> + +
+ {/* { setPage(page) - // getData(page) - }} /> -
*/} + getData(page) + + }} /> */} +
+ + { if (action.type == 'uparray') { nstate.belongArray = action.val } + if (action.type == 'upRefunArray') { + nstate.refunArray = action.val + } + if (action.type == 'upRefunTotal') { + nstate.refunTotal = action.val + } return nstate } const store = createStore(reducer)