暂存

src/components/RefunModal/RefunModal.tsx

@@ -2,10 +2,10 @@ 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 } from "../../util/AjaxUtils.ts";
+import { uploadImageUrl, DevUserId, get,post } from "../../util/AjaxUtils.ts";
 const { TextArea } = Input;
 
-export default function RefunModal(props:any) {
+export default function RefunModal(props: any) {
     const [messageApi, contextHolder] = message.useMessage();
     // 上传附件
     const [refunArray, setRefunArray] = useState<string[]>([]);
@@ -14,27 +14,64 @@ export default function RefunModal(props:any) {
     const handleReasonChange = (value: any) => {
         setSelectedReason(value);
     };
-    // const [refunDataArray,setRefunDataArray] = useState<any[]>([]) //未退款项目
+    const [refunDataArray, setRefunDataArray] = useState<any[]>([]) //未退款项目
     // 提交表单
     const onFinish = (values: any) => {
         console.log('Form values:', values);
-        props.closeModal()
+        // props.closeModal()
+        console.log(refunArray);
+        post<any>({
+            messageApi,
+            url: `/api/proj/refund/apply/save`,
+            body: {
+                projId: values.title,
+                refundReason: values.other,
+                refundVoucher: refunArray.join(', ')
+            },
+            onBefore() {
+                
+            },
+            onSuccess() {
+                messageApi.success('提交成功')
+            
+            },
+            onFinally() {
+                
+            }
+        })
     };
     // 获取未退款项目
     const getRefunData = () => {
         get({
             messageApi,
             url: `/api/proj/refund/apply/list-proj-unapply/self`,
-            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
+            // config: {
-            onSuccess({data}) {
+            //     params: {
+
+            //     }
+            // },
+            onBefore() {
+
+
+            },
+            onSuccess(data: any) {
                 console.log(data);
-                
+                const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({
-            }
+                    value: item.projId,
+                    label: item.projName
+                }))
+                setRefunDataArray(newArray)
+
+            },
+            onFinally() {
+
+
+            },
         })
     }
-    useEffect(()=>{
+    useEffect(() => {
         getRefunData()
-    },[])
+    }, [])
     return (
         <div className='refunModal'>
             {contextHolder}
@@ -59,13 +96,7 @@ export default function RefunModal(props:any) {
                             filterOption={(input, option) =>
                                 (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                             }
-                            options={[
+                            options={refunDataArray}
-                                { value: '嘻嘻系统', label: '嘻嘻系统' },
-                                { value: '呵呵系统', label: '呵呵系统' },
-                                { value: '哈哈系统', label: '哈哈系统' },
-                                { value: '哈嘎嘎系统', label: '哈嘎嘎系统' },
-                                { value: '哈嘻嘻嘎嘎系统', label: '哈嘻嘻嘎嘎系统' },
-                            ]}
                             style={{
                                 width: 405,
                                 height: 46,
@@ -73,7 +104,7 @@ export default function RefunModal(props:any) {
                         />
                     </Form.Item>
                 </div>
-                <div className='refunModal-item'>
+                {/* <div className='refunModal-item'>
                     <div className='refunModal-title'>
                         退款原因<span className='refunModal-red'>*</span>
                     </div>
@@ -96,8 +127,8 @@ export default function RefunModal(props:any) {
                             onChange={handleReasonChange}
                         />
                     </Form.Item>
-                </div>
+                </div> */}
-                {selectedReason === '其他' && (
+                {/* {selectedReason === '其他' && (
                     <div className='refunModal-item'>
                         <div className='refunModal-title'>
                             其他<span className='refunModal-red'>*</span>
@@ -112,7 +143,21 @@ export default function RefunModal(props:any) {
                             />
                         </Form.Item>
                     </div>
-                )}
+                )} */}
+                <div className='refunModal-item'>
+                    <div className='refunModal-title'>
+                        退款原因<span className='refunModal-red'>*</span>
+                    </div>
+                    <Form.Item
+                        name="other"
+                        rules={[{ required: true, message: '请输入退款原因' }]}
+                    >
+                        <TextArea
+                            placeholder="输入退款原因"
+                            style={{ height: 120, resize: 'none', width: 405 }}
+                        />
+                    </Form.Item>
+                </div>
                 {/* <div className='refunModal-item' >
                     <div className='refunModal-title'>
                         其他<span className='refunModal-red'>*</span>

src/route/Refun/Refun.tsx

@@ -1,20 +1,22 @@
 import './refun.css';
-import { useState,useEffect } from 'react';
+import { useState, useEffect } from 'react';
-import { Table,
+import {
+    Table,
     //  Pagination,
-      Modal, Tag, message } from 'antd';
+    Modal, Tag, message
-import { get } from '../../util/AjaxUtils'
+} from 'antd';
+import { get,put } from '../../util/AjaxUtils'
 import type { TableProps } from 'antd';
 interface DataType {
-    title: string;
+    projName: string;
-    price: string;
+    projPayment: string;
-    reason: string;
+    refundReason: string;
-    time: string;
+    gmtCreate: string;
-    img: string;
+    refundVoucherFileKVs: string;
-    id: string;
+    projRefundApplyId: string;
-    examineTime: string;
+    gmtReview: string;
-    examineStatus: string;
+    applyStatus: string;
-    examineText: string;
+    reviewReason: string;
 }
 import revokeImg from '../../static/revoke.png'
 import { useLocation } from 'react-router-dom'
@@ -23,7 +25,9 @@ export default function Refun() {
     const [messageApi, contextHolder] = message.useMessage();
     const [page, setPage] = useState(1)     // 分页
     const [total, setTotal] = useState(50)   // 数据总数
+    const [data, setData] = useState<any[]>([])
     const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
+    const [projRefundApplyId, setprojRefundApplyId] = useState('') //要撤销的id
     const { state } = useLocation()
     // {state.type}
     const columns: TableProps<DataType>['columns'] = state.type == 'CANCELED' ? [
@@ -36,43 +40,43 @@ export default function Refun() {
         },
         {
             title: '系统名称',
-            dataIndex: 'title',
+            dataIndex: 'projName',
             align: 'center',
-            key: 'title',
+            key: 'projName',
             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
         },
         {
             title: '金额',
-            dataIndex: 'price',
+            dataIndex: 'projPayment',
-            key: 'price',
+            key: 'projPayment',
             align: 'center',
             width: 150,
         },
         {
             title: '退款原因',
-            dataIndex: 'reason',
+            dataIndex: 'refundReason',
-            key: 'reason',
+            key: 'refundReason',
             align: 'center',
             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
         },
         {
             title: '申请退款时间',
-            dataIndex: 'time',
+            dataIndex: 'gmtCreate',
-            key: 'time',
+            key: 'gmtCreate',
             align: 'center',
-            width: 150,
+            width: 200,
         },
         {
             title: '审核时间',
-            dataIndex: 'examineTime',
+            dataIndex: 'gmtReview',
-            key: 'examineTime',
+            key: 'gmtReview',
             align: 'center',
-            width: 150,
+            width: 200,
         },
         {
             title: '审核状态',
-            dataIndex: 'examineStatus',
+            dataIndex: 'applyStatus',
-            key: 'examineStatus',
+            key: 'applyStatus',
             align: 'center',
             width: 100,
             render: (text) => <Tag
@@ -81,22 +85,22 @@ export default function Refun() {
         },
         {
             title: '审核意见',
-            dataIndex: 'examineText',
+            dataIndex: 'reviewReason',
-            key: 'examineText',
+            key: 'reviewReason',
             align: 'center',
             // width: 150,
             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
         },
         {
             title: '退款凭证',
-            dataIndex: 'img',
+            dataIndex: 'refundVoucherFileKVs',
-            key: 'img',
+            key: 'refundVoucherFileKVs',
             width: 100,
             align: 'center',
             render: (_, record) => (
                 // {record.name}
                 <div className='refunBtn' onClick={() => {
-                    console.log(record.img);
+                    // console.log(record.img);
                 }}> 预览</div>
 
             ),
@@ -112,43 +116,43 @@ export default function Refun() {
         },
         {
             title: '系统名称',
-            dataIndex: 'title',
+            dataIndex: 'projName',
             align: 'center',
-            key: 'title',
+            key: 'projName',
             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
         },
         {
             title: '金额',
-            dataIndex: 'price',
+            dataIndex: 'projPayment',
-            key: 'price',
+            key: 'projPayment',
             align: 'center',
             width: 150,
         },
         {
             title: '退款原因',
-            dataIndex: 'reason',
+            dataIndex: 'refundReason',
-            key: 'reason',
+            key: 'refundReason',
             align: 'center',
             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
         },
         {
             title: '申请退款时间',
-            dataIndex: 'time',
+            dataIndex: 'gmtCreate',
-            key: 'time',
+            key: 'gmtCreate',
             align: 'center',
-            width: 150,
+            width: 200,
         },
         {
             title: '审核时间',
-            dataIndex: 'examineTime',
+            dataIndex: 'gmtReview',
-            key: 'examineTime',
+            key: 'gmtReview',
             align: 'center',
-            width: 150,
+            width: 200,
         },
         {
             title: '审核状态',
-            dataIndex: 'examineStatus',
+            dataIndex: 'applyStatus',
-            key: 'examineStatus',
+            key: 'applyStatus',
             align: 'center',
             width: 100,
             render: (text) => <Tag
@@ -157,22 +161,22 @@ export default function Refun() {
         },
         {
             title: '审核意见',
-            dataIndex: 'examineText',
+            dataIndex: 'reviewReason',
-            key: 'examineText',
+            key: 'reviewReason',
             align: 'center',
             // width: 150,
             render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
         },
         {
             title: '退款凭证',
-            dataIndex: 'img',
+            dataIndex: 'refundVoucherFileKVs',
-            key: 'img',
+            key: 'refundVoucherFileKVs',
             width: 100,
             align: 'center',
             render: (_, record) => (
                 // {record.name}
                 <div className='refunBtn' onClick={() => {
-                    console.log(record.img);
+                    // console.log(record.img);
                 }}> 预览</div>
 
             ),
@@ -184,14 +188,15 @@ export default function Refun() {
             render: (_, record) => (
                 // {record.name}
                 <div className='refunBtn' onClick={() => {
-                    console.log(record.id);
+                    console.log(record.projRefundApplyId);
                     setRevokeModal(true)
+                    setprojRefundApplyId(record.projRefundApplyId)
                 }}> 撤销</div>
 
             ),
         },
     ];
-    const getData = (page:number) => {
+    const getData = (page: number) => {
         get({
             messageApi,
             url: `/api/proj/refund/apply/listpage`,
@@ -200,137 +205,44 @@ export default function Refun() {
                 params: {
                     page: page,
                     rows: 10,
-                    applyStatus:state.type
+                    applyStatus: state.type
                 }
             },
-            onSuccess({data}) {
+            onSuccess(data: any) {
-                console.log(data);
+                console.log(data.data.rows);
+                setData(data.data.rows)
+            }
+        })
+    }
+    // 撤销退款
+    const projRefund = () => {
+        put<any>({
+            messageApi,
+            url: `/api/proj/refund/apply/cancel/self/${projRefundApplyId}`,
+           
+            onBefore() {
                 
+            },
+            onSuccess() {
+                setRevokeModal(false)
+                messageApi.success('已撤销');
+           
+
+            },
+            onFinally() {
+                // setIsProjIntroductionLoading(false)
+                // renderData()
             }
         })
     }
     // useEffect(()=>{
     //     getData(page)
     // },[])
-    useEffect(()=>{
+    useEffect(() => {
         // getData(1)
         setPage(1)
         getData(1)
-    },[state.type])
+    }, [state.type])
-    const data: DataType[] = [
-        {
-            title: 'xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '1',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '2',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'NOPASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '3',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'WAIT',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '4',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'NOPASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '5',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '6',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '7',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '8',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '9',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        {
-            title: 'xxx系统',
-            price: '100',
-            reason: '没钱',
-            img: 'xxxx-xxx.img',
-            time: '2024-8-20  13:10',
-            id: '10',
-            examineTime: '2024-8-20  12:00',
-            examineStatus: 'PASS',
-            examineText: '额呵呵呵',
-        },
-        
-
-    ];
 
     return (
         <div>
@@ -359,7 +271,7 @@ export default function Refun() {
 
                     }
                     scroll={{ y: height - 128 }}
-                    rowKey="id"
+                    rowKey="projId"
                 />
                 {/* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 ,width:'100%'}}>
                     <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
@@ -375,7 +287,8 @@ export default function Refun() {
                 destroyOnClose={true}
                 open={revokeModal}
                 onOk={() => {
-                    setRevokeModal(false)
+                    // setRevokeModal(false)
+                    projRefund()
                 }}
                 onCancel={() => {
                     setRevokeModal(false)

src/route/Refun/refun.css

@@ -1,12 +1,12 @@
 .refun{
     margin-top: 18px;
     background-color: rgb(255, 255, 255);
-    padding: 0px 20px 0px 20px;
+    padding: 20px 20px 0px 20px;
     box-sizing: border-box;
-    display: flex;
+    /* display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: center; */
 }
 .ellipsis-text{
     white-space: nowrap; /* 防止文本换行 */